From 439654f94c35fbe5993d8f7651917e7c9d7d05d3 Mon Sep 17 00:00:00 2001
From: Pavel Klibani <pavel@techloop.io>
Date: Mon, 28 Aug 2023 16:32:47 +0200
Subject: [PATCH] Docs(web-react): Add Checkbox demos #DS-889

Checkbox demo in web-react is now same as demo in web
---
 .../Checkbox/demo/CheckboxDefault.tsx         | 11 +++++
 .../Checkbox/demo/CheckboxDisabled.tsx        | 34 ++++++++++++++
 .../Checkbox/demo/CheckboxHelperText.tsx      | 20 ++-------
 .../Checkbox/demo/CheckboxHiddenLabel.tsx     |  8 ++++
 .../Checkbox/demo/CheckboxIndeterminate.tsx   | 14 ++++++
 .../components/Checkbox/demo/CheckboxItem.tsx | 45 +++++++++++++------
 .../Checkbox/demo/CheckboxRequired.tsx        |  8 ++++
 .../Checkbox/demo/CheckboxValidation.tsx      | 33 ++++++++++++++
 .../Checkbox/demo/CheckboxValidationState.tsx | 30 -------------
 .../src/components/Checkbox/demo/index.tsx    | 39 +++++++++++++---
 10 files changed, 175 insertions(+), 67 deletions(-)
 create mode 100644 packages/web-react/src/components/Checkbox/demo/CheckboxDefault.tsx
 create mode 100644 packages/web-react/src/components/Checkbox/demo/CheckboxDisabled.tsx
 create mode 100644 packages/web-react/src/components/Checkbox/demo/CheckboxHiddenLabel.tsx
 create mode 100644 packages/web-react/src/components/Checkbox/demo/CheckboxIndeterminate.tsx
 create mode 100644 packages/web-react/src/components/Checkbox/demo/CheckboxRequired.tsx
 create mode 100644 packages/web-react/src/components/Checkbox/demo/CheckboxValidation.tsx
 delete mode 100644 packages/web-react/src/components/Checkbox/demo/CheckboxValidationState.tsx

diff --git a/packages/web-react/src/components/Checkbox/demo/CheckboxDefault.tsx b/packages/web-react/src/components/Checkbox/demo/CheckboxDefault.tsx
new file mode 100644
index 0000000000..a2840a0864
--- /dev/null
+++ b/packages/web-react/src/components/Checkbox/demo/CheckboxDefault.tsx
@@ -0,0 +1,11 @@
+import React from 'react';
+import Checkbox from '../Checkbox';
+
+const CheckboxDefault = () => (
+  <>
+    <Checkbox id="checkboxDefault" name="checkboxDefault" label="Checkbox Label" />
+    <Checkbox id="checkboxDefaultChecked" name="checkboxDefaultChecked" label="Checkbox Label" isChecked />
+  </>
+);
+
+export default CheckboxDefault;
diff --git a/packages/web-react/src/components/Checkbox/demo/CheckboxDisabled.tsx b/packages/web-react/src/components/Checkbox/demo/CheckboxDisabled.tsx
new file mode 100644
index 0000000000..2c04879c69
--- /dev/null
+++ b/packages/web-react/src/components/Checkbox/demo/CheckboxDisabled.tsx
@@ -0,0 +1,34 @@
+import React, { useEffect, useRef } from 'react';
+import Checkbox from '../Checkbox';
+
+const CheckboxDisabled = () => {
+  const checkboxRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    checkboxRef.current && (checkboxRef.current.indeterminate = true);
+  }, [checkboxRef]);
+
+  return (
+    <>
+      <Checkbox id="checkboxDisabled" name="checkboxDisabled" label="Checkbox Label" isDisabled />
+      <Checkbox
+        id="checkboxDisabledHelperText"
+        name="checkboxDisabledHelperText"
+        label="Checkbox Label"
+        isChecked
+        helperText="Helper text"
+        isDisabled
+        isRequired
+      />
+      <Checkbox
+        id="checkboxDisabledIndeterminate"
+        name="checkboxDisabledIndeterminate"
+        label="Checkbox Label"
+        isDisabled
+        ref={checkboxRef}
+      />
+    </>
+  );
+};
+
+export default CheckboxDisabled;
diff --git a/packages/web-react/src/components/Checkbox/demo/CheckboxHelperText.tsx b/packages/web-react/src/components/Checkbox/demo/CheckboxHelperText.tsx
index 784929b964..614d42bb21 100644
--- a/packages/web-react/src/components/Checkbox/demo/CheckboxHelperText.tsx
+++ b/packages/web-react/src/components/Checkbox/demo/CheckboxHelperText.tsx
@@ -1,20 +1,8 @@
 import React from 'react';
-import { ComponentStory } from '@storybook/react';
 import Checkbox from '../Checkbox';
-import { SpiritCheckboxProps } from '../../../types';
 
-const Story: ComponentStory<typeof Checkbox> = (args: SpiritCheckboxProps) => <Checkbox {...args} />;
+const CheckboxHelperText = () => (
+  <Checkbox id="checkboxHelperText" name="checkboxHelperText" label="Checkbox Label" helperText="Helper text" />
+);
 
-Story.args = {
-  id: 'example',
-  isChecked: true,
-  isDisabled: false,
-  isItem: false,
-  isLabelHidden: false,
-  isRequired: false,
-  label: 'Label',
-  name: 'example',
-  helperText: 'Helper text',
-};
-
-export default Story;
+export default CheckboxHelperText;
diff --git a/packages/web-react/src/components/Checkbox/demo/CheckboxHiddenLabel.tsx b/packages/web-react/src/components/Checkbox/demo/CheckboxHiddenLabel.tsx
new file mode 100644
index 0000000000..344098b2b2
--- /dev/null
+++ b/packages/web-react/src/components/Checkbox/demo/CheckboxHiddenLabel.tsx
@@ -0,0 +1,8 @@
+import React from 'react';
+import Checkbox from '../Checkbox';
+
+const CheckboxHiddenLabel = () => (
+  <Checkbox id="checkboxHiddenLabel" name="checkboxHiddenLabel" label="Checkbox Label" isLabelHidden />
+);
+
+export default CheckboxHiddenLabel;
diff --git a/packages/web-react/src/components/Checkbox/demo/CheckboxIndeterminate.tsx b/packages/web-react/src/components/Checkbox/demo/CheckboxIndeterminate.tsx
new file mode 100644
index 0000000000..ef36535bb2
--- /dev/null
+++ b/packages/web-react/src/components/Checkbox/demo/CheckboxIndeterminate.tsx
@@ -0,0 +1,14 @@
+import React, { useEffect, useRef } from 'react';
+import Checkbox from '../Checkbox';
+
+const CheckboxIndeterminate = () => {
+  const checkboxRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    checkboxRef.current && (checkboxRef.current.indeterminate = true);
+  }, [checkboxRef]);
+
+  return <Checkbox id="checkboxIndeterminate" name="checkboxIndeterminate" label="Checkbox Label" ref={checkboxRef} />;
+};
+
+export default CheckboxIndeterminate;
diff --git a/packages/web-react/src/components/Checkbox/demo/CheckboxItem.tsx b/packages/web-react/src/components/Checkbox/demo/CheckboxItem.tsx
index 9a4d97a0c7..6fc26454ad 100644
--- a/packages/web-react/src/components/Checkbox/demo/CheckboxItem.tsx
+++ b/packages/web-react/src/components/Checkbox/demo/CheckboxItem.tsx
@@ -1,18 +1,35 @@
 import React from 'react';
-import { StoryFn } from '@storybook/react';
 import Checkbox from '../Checkbox';
-import { SpiritCheckboxProps } from '../../../types';
 
-const Story: StoryFn<typeof Checkbox> = (args: SpiritCheckboxProps) => <Checkbox {...args} />;
+const CheckboxItem = () => (
+  <>
+    <Checkbox id="checkboxItemDefault" name="checkboxItemDefault" label="Checkbox Label" isItem />
+    <Checkbox
+      id="checkboxItemDefaultChecked"
+      name="checkboxItemDefaultChecked"
+      label="Checkbox Label"
+      isItem
+      isChecked
+    />
+    <Checkbox
+      id="checkboxItemHelperText"
+      name="checkboxItemHelperText"
+      label="Checkbox Label"
+      isItem
+      helperText="Helper text"
+    />
+    <Checkbox id="checkboxItemDisabled" name="checkboxItemDisabled" label="Checkbox Label" isItem isDisabled />
+    <Checkbox
+      id="checkboxItemDisabledHelperText"
+      name="checkboxItemDisabledHelperText"
+      label="Checkbox Label"
+      isItem
+      helperText="Helper text"
+      isDisabled
+      isRequired
+      isChecked
+    />
+  </>
+);
 
-Story.args = {
-  isChecked: false,
-  isDisabled: false,
-  isItem: true,
-  isLabelHidden: false,
-  isRequired: false,
-  label: 'Label Item',
-  name: 'example',
-};
-
-export default Story;
+export default CheckboxItem;
diff --git a/packages/web-react/src/components/Checkbox/demo/CheckboxRequired.tsx b/packages/web-react/src/components/Checkbox/demo/CheckboxRequired.tsx
new file mode 100644
index 0000000000..1d39caa886
--- /dev/null
+++ b/packages/web-react/src/components/Checkbox/demo/CheckboxRequired.tsx
@@ -0,0 +1,8 @@
+import React from 'react';
+import Checkbox from '../Checkbox';
+
+const CheckboxRequired = () => (
+  <Checkbox id="checkboxRequired" name="checkboxRequired" label="Checkbox Label" isRequired />
+);
+
+export default CheckboxRequired;
diff --git a/packages/web-react/src/components/Checkbox/demo/CheckboxValidation.tsx b/packages/web-react/src/components/Checkbox/demo/CheckboxValidation.tsx
new file mode 100644
index 0000000000..c8245d540d
--- /dev/null
+++ b/packages/web-react/src/components/Checkbox/demo/CheckboxValidation.tsx
@@ -0,0 +1,33 @@
+import React from 'react';
+import Checkbox from '../Checkbox';
+
+const CheckboxValidation = () => (
+  <>
+    <Checkbox id="checkboxSuccess" name="checkboxSuccess" label="Checkbox Label" validationState="success" />
+    <Checkbox
+      id="checkboxWarning"
+      name="checkboxWarning"
+      label="Checkbox Label"
+      validationState="warning"
+      validationText="Warning validation text"
+    />
+    <Checkbox
+      id="checkboxDanger"
+      name="checkboxDanger"
+      label="Checkbox Label"
+      validationState="danger"
+      validationText={['First validation text', 'Second validation text']}
+    />
+    <Checkbox
+      id="checkboxWarningHelperText"
+      name="checkboxWarningHelperText"
+      label="Checkbox Label"
+      validationState="warning"
+      validationText="Warning validation text"
+      helperText="Helper text"
+      isChecked
+    />
+  </>
+);
+
+export default CheckboxValidation;
diff --git a/packages/web-react/src/components/Checkbox/demo/CheckboxValidationState.tsx b/packages/web-react/src/components/Checkbox/demo/CheckboxValidationState.tsx
deleted file mode 100644
index 48474be8ed..0000000000
--- a/packages/web-react/src/components/Checkbox/demo/CheckboxValidationState.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import React from 'react';
-import Checkbox from '../Checkbox';
-
-const Story = () => (
-  <div style={{ display: 'flex', flexWrap: 'wrap', gap: '1.5rem 1rem' }}>
-    <Checkbox
-      id="checkbox0"
-      label="Checkbox success"
-      name="example"
-      validationState="success"
-      validationText="Success validation text"
-    />
-    <Checkbox
-      id="checkbox1"
-      label="Checkbox warning"
-      name="example"
-      validationState="warning"
-      validationText="Warning validation text"
-    />
-    <Checkbox
-      id="checkbox2"
-      label="Checkbox danger"
-      name="example"
-      validationState="danger"
-      validationText={['Danger validation text', 'Danger validation text']}
-    />
-  </div>
-);
-
-export default Story;
diff --git a/packages/web-react/src/components/Checkbox/demo/index.tsx b/packages/web-react/src/components/Checkbox/demo/index.tsx
index c8dceae2fb..0d6e1fe227 100644
--- a/packages/web-react/src/components/Checkbox/demo/index.tsx
+++ b/packages/web-react/src/components/Checkbox/demo/index.tsx
@@ -1,24 +1,49 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import DocsSection from '../../../../docs/DocsSections';
-import Checkbox from './Checkbox';
+import DocsFormFieldGrid from '../../../../docs/DocsFormFieldGrid';
+import CheckboxDefault from './CheckboxDefault';
+import CheckboxIndeterminate from './CheckboxIndeterminate';
+import CheckboxRequired from './CheckboxRequired';
+import CheckboxHiddenLabel from './CheckboxHiddenLabel';
 import CheckboxHelperText from './CheckboxHelperText';
-import CheckboxValidationState from './CheckboxValidationState';
+import CheckboxDisabled from './CheckboxDisabled';
+import CheckboxValidation from './CheckboxValidation';
 import CheckboxItem from './CheckboxItem';
 
 ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
   <React.StrictMode>
     <DocsSection title="Default">
-      <Checkbox label="Label" />
+      <DocsFormFieldGrid>
+        <CheckboxDefault />
+      </DocsFormFieldGrid>
+    </DocsSection>
+    <DocsSection title="Indeterminate">
+      <CheckboxIndeterminate />
+    </DocsSection>
+    <DocsSection title="Required">
+      <CheckboxRequired />
+    </DocsSection>
+    <DocsSection title="Hidden Label">
+      <CheckboxHiddenLabel />
     </DocsSection>
     <DocsSection title="Helper Text">
-      <CheckboxHelperText label="Label" {...CheckboxHelperText.args} />
+      <CheckboxHelperText />
+    </DocsSection>
+    <DocsSection title="Disabled">
+      <DocsFormFieldGrid>
+        <CheckboxDisabled />
+      </DocsFormFieldGrid>
     </DocsSection>
-    <DocsSection title="Validation State">
-      <CheckboxValidationState />
+    <DocsSection title="Validation State with Validation Text">
+      <DocsFormFieldGrid>
+        <CheckboxValidation />
+      </DocsFormFieldGrid>
     </DocsSection>
     <DocsSection title="Item">
-      <CheckboxItem label="Label" {...CheckboxItem.args} />
+      <DocsFormFieldGrid>
+        <CheckboxItem />
+      </DocsFormFieldGrid>
     </DocsSection>
   </React.StrictMode>,
 );