feat(checkbox): add checkbox group and validation states (#13394)

* feat(checkbox): add checkbox group and invalid states * feat(checkbox): add readonly and helper text to checkbox group * chore(checkbox): update tests * feat(checkbox): add validation states to individual checkbox * chore(checkbox): update snapshots * chore(checkbox): yarn format * Update Checkbox.tsx * test(checkbox): add tests to checkbox group and checkbox * Update packages/react/src/components/CheckboxGroup/CheckboxGroup-test.js Co-authored-by: Francine Lucca <40550942+francinelucca@users.noreply.github.com> * Update packages/react/src/components/CheckboxGroup/CheckboxGroup-test.js Co-authored-by: Francine Lucca <40550942+francinelucca@users.noreply.github.com> * Update packages/react/src/components/CheckboxGroup/CheckboxGroup-test.js Co-authored-by: Francine Lucca <40550942+francinelucca@users.noreply.github.com> * Update packages/react/src/components/CheckboxGroup/CheckboxGroup-test.js Co-authored-by: Francine Lucca <40550942+francinelucca@users.noreply.github.com> * Update packages/react/src/components/Checkbox/__tests__/Checkbox-test.js Co-authored-by: Francine Lucca <40550942+francinelucca@users.noreply.github.com> * Update packages/react/src/components/CheckboxGroup/CheckboxGroup-test.js Co-authored-by: Francine Lucca <40550942+francinelucca@users.noreply.github.com> * Update packages/react/src/components/Checkbox/__tests__/Checkbox-test.js Co-authored-by: Francine Lucca <40550942+francinelucca@users.noreply.github.com> * Update packages/react/src/components/Checkbox/__tests__/Checkbox-test.js Co-authored-by: Francine Lucca <40550942+francinelucca@users.noreply.github.com> * Update packages/react/src/components/Checkbox/__tests__/Checkbox-test.js Co-authored-by: Francine Lucca <40550942+francinelucca@users.noreply.github.com> * Update packages/react/src/components/Checkbox/__tests__/Checkbox-test.js Co-authored-by: Francine Lucca <40550942+francinelucca@users.noreply.github.com> * chore(checkbox): move checkbox stories * chore(checkbox): update checkbox stories * chore(checkbox): update checkbox stories --------- Co-authored-by: Francine Lucca <40550942+francinelucca@users.noreply.github.com> Co-authored-by: TJ Egan <tw15egan@gmail.com> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
carbon-design-system · Mar 31, 2023 · fff99db · fff99db
1 parent de8d41b
commit fff99db
Show file tree

Hide file tree

Showing 12 changed files with 778 additions and 40 deletions.
diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -456,6 +456,9 @@ Map {
       "disabled": Object {
         "type": "bool",
       },
+      "helperText": Object {
+        "type": "node",
+      },
       "hideLabel": Object {
         "type": "bool",
       },
@@ -466,6 +469,12 @@ Map {
       "indeterminate": Object {
         "type": "bool",
       },
+      "invalid": Object {
+        "type": "bool",
+      },
+      "invalidText": Object {
+        "type": "node",
+      },
       "labelText": Object {
         "isRequired": true,
         "type": "node",
@@ -479,9 +488,50 @@ Map {
       "title": Object {
         "type": "string",
       },
+      "warn": Object {
+        "type": "bool",
+      },
+      "warnText": Object {
+        "type": "node",
+      },
     },
     "render": [Function],
   },
+  "CheckboxGroup" => Object {
+    "propTypes": Object {
+      "children": Object {
+        "type": "node",
+      },
+      "className": Object {
+        "type": "string",
+      },
+      "helperText": Object {
+        "type": "node",
+      },
+      "invalid": Object {
+        "type": "bool",
+      },
+      "invalidText": Object {
+        "type": "node",
+      },
+      "legendId": Object {
+        "type": "node",
+      },
+      "legendText": Object {
+        "isRequired": true,
+        "type": "node",
+      },
+      "readOnly": Object {
+        "type": "bool",
+      },
+      "warn": Object {
+        "type": "bool",
+      },
+      "warnText": Object {
+        "type": "node",
+      },
+    },
+  },
   "CheckboxSkeleton" => Object {
     "propTypes": Object {
       "className": Object {

diff --git a/packages/react/src/__tests__/index-test.js b/packages/react/src/__tests__/index-test.js
@@ -27,6 +27,7 @@ describe('Carbon Components React', () => {
         "ButtonSet",
         "ButtonSkeleton",
         "Checkbox",
+        "CheckboxGroup",
         "CheckboxSkeleton",
         "ClassPrefix",
         "ClickableTile",

diff --git a/packages/react/src/components/Checkbox/Checkbox.stories.js b/packages/react/src/components/Checkbox/Checkbox.stories.js
@@ -8,13 +8,23 @@
 import React from 'react';
 import { default as Checkbox, CheckboxSkeleton } from './';
 import mdx from './Checkbox.mdx';
+import CheckboxGroup from '../CheckboxGroup';
 
-const prefix = 'cds';
+const checkboxEvents = {
+  className: 'some-class',
+  labelText: 'Checkbox label',
+};
+
+const fieldsetCheckboxProps = () => ({
+  className: 'some-class',
+  legendText: 'Group label',
+});
 
 export default {
   title: 'Components/Checkbox',
   component: Checkbox,
   subcomponents: {
+    CheckboxGroup,
     CheckboxSkeleton,
   },
   parameters: {
@@ -26,55 +36,156 @@ export default {
 
 export const Default = () => {
   return (
-    <fieldset className={`${prefix}--fieldset`}>
-      <legend className={`${prefix}--label`}>Group label</legend>
+    <CheckboxGroup {...fieldsetCheckboxProps()}>
       <Checkbox labelText={`Checkbox label`} id="checkbox-label-1" />
       <Checkbox labelText={`Checkbox label`} id="checkbox-label-2" />
-    </fieldset>
+    </CheckboxGroup>
+  );
+};
+
+export const Single = () => {
+  return (
+    <>
+      <Checkbox
+        {...checkboxEvents}
+        id="checkbox-3"
+        helperText="Helper text goes here"
+      />
+      <br /> <br />
+      <Checkbox
+        {...checkboxEvents}
+        id="checkbox-4"
+        invalid
+        invalidText="Invalid text goes here"
+      />
+      <br /> <br />
+      <Checkbox
+        {...checkboxEvents}
+        id="checkbox-5"
+        warn
+        warnText="Warning text goes here"
+      />
+      <br /> <br />
+      <Checkbox {...checkboxEvents} id="checkbox-6" readOnly />
+    </>
   );
 };
 
 export const Skeleton = () => <CheckboxSkeleton />;
 
 export const Playground = (args) => (
-  <fieldset className={`${prefix}--fieldset`}>
-    <legend className={`${prefix}--label`}>Group label</legend>
-    <Checkbox labelText={`Checkbox label`} id="checkbox-label-1" {...args} />
-    <Checkbox labelText={`Checkbox label`} id="checkbox-label-2" {...args} />
-  </fieldset>
+  <CheckboxGroup {...fieldsetCheckboxProps()} {...args}>
+    <Checkbox
+      defaultChecked
+      {...checkboxEvents}
+      id="checkbox-0"
+      helperText="hello"
+    />
+    <Checkbox {...checkboxEvents} id="checkbox-1" />
+    <Checkbox disabled {...checkboxEvents} id="checkbox-2" />
+  </CheckboxGroup>
 );
 
 Playground.argTypes = {
-  checked: {
+  helperText: {
+    description: 'Provide text for the form group for additional help',
+    control: {
+      type: 'text',
+    },
+    defaultValue: 'Helper text goes here',
+  },
+  invalid: {
+    description: 'Specify whether the form group is currently invalid',
     control: {
       type: 'boolean',
     },
+    defaultValue: false,
   },
-  className: {
-    control: false,
+  invalidText: {
+    description:
+      'Provide the text that is displayed when the form group is in an invalid state',
+    control: {
+      type: 'text',
+    },
+    defaultValue: 'Invalid message goes here',
   },
-  defaultChecked: {
-    control: false,
+  legendText: {
+    description:
+      'Provide the text to be rendered inside of the fieldset <legend>',
+    control: {
+      type: 'text',
+    },
   },
-  disabled: {
+  readOnly: {
+    description: 'Specify whether the CheckboxGroup is read-only',
     control: {
       type: 'boolean',
     },
+    defaultValue: false,
   },
-  hideLabel: {
+  warn: {
+    description: 'Specify whether the form group is currently in warning state',
     control: {
       type: 'boolean',
     },
+    defaultValue: false,
+  },
+  warnText: {
+    description:
+      'Provide the text that is displayed when the form group is in warning state',
+    control: {
+      type: 'text',
+    },
+    defaultValue: 'Warning message goes here',
+  },
+  checked: {
+    table: {
+      disable: true,
+    },
+  },
+  className: {
+    table: {
+      disable: true,
+    },
+  },
+  defaultChecked: {
+    table: {
+      disable: true,
+    },
+  },
+  disabled: {
+    table: {
+      disable: true,
+    },
+  },
+  hideLabel: {
+    table: {
+      disable: true,
+    },
   },
   id: {
-    control: false,
+    table: {
+      disable: true,
+    },
   },
   indeterminate: {
-    control: {
-      type: 'boolean',
+    table: {
+      disable: true,
     },
   },
   labelText: {
-    control: false,
+    table: {
+      disable: true,
+    },
+  },
+  onChange: {
+    table: {
+      disable: true,
+    },
+  },
+  title: {
+    table: {
+      disable: true,
+    },
   },
 };