Docs(web-react): Add Checkbox demos #DS-889

Checkbox demo in web-react is now same as demo in web

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;

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;

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;

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;

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;

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;

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;

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;

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>,
 );