Checkbox Sidemenu Updated, Checkbox States (Error/Warning/Success) (#287

) Closes #286 Closes #285 ## Changes - Checkbox - Storybook Sidemenu Update - Styling: Checkbox States (Error/Warning/Success) ## Screenshots (Updated 01/28/2024) ### Sidemenu Updated |Before|After| |---|---| |<img width="195" alt="Screenshot 2024-01-23 at 12 52 25 PM" src="https://github.com/cfpb/design-system-react/assets/13324863/10c24c26-e95d-4797-9f40-df693748a071">|<img width="1097" alt="Screenshot 2024-01-29 at 11 21 59 AM" src="https://github.com/cfpb/design-system-react/assets/13324863/09a78a6d-20cd-4cd8-a822-4d7a63fed95c">| ### New Checkbox Status <img width="148" alt="Screenshot 2024-01-23 at 12 54 16 PM" src="https://github.com/cfpb/design-system-react/assets/13324863/51ccbe5d-a264-4bac-afe9-da2ff5f2be78">
cfpb · Jan 30, 2024 · 307f291 · 307f291
1 parent d3888b7
commit 307f291
Show file tree

Hide file tree

Showing 38 changed files with 280 additions and 40 deletions.
diff --git a/.prettierignore b/.prettierignore
@@ -0,0 +1 @@
+**/*.mdx
diff --git a/.storybook/main.js b/.storybook/main.js
@@ -11,7 +11,7 @@ module.exports = {
     'display-element-css'
   ],
   docs: {
-    autodocs: true,
+    autodocs: 'tag',
     defaultName: 'Overview'
   },
   framework: {

diff --git a/.storybook/manager-head.html b/.storybook/manager-head.html
@@ -20,5 +20,4 @@
   .sidebar-item svg {
     color: black;
   }
-
 </style>
diff --git a/src/components/Alert/Alert.stories.tsx b/src/components/Alert/Alert.stories.tsx
@@ -5,6 +5,7 @@ import type { StatusType } from '../TextInput/TextInput';
 const meta: Meta<typeof Alert> = {
   title: 'Components (Draft)/Alerts',
   component: Alert,
+  tags: ['autodocs'],
   argTypes: {
     message: { control: 'text' }
   }

diff --git a/src/components/Banner/Banner.stories.tsx b/src/components/Banner/Banner.stories.tsx
@@ -5,6 +5,7 @@ import { AllLanguageCodes, LanguageLink } from './BannerLanguageLink';
 
 const meta: Meta<typeof Banner> = {
   title: 'Components (Verified)/Banner (US gov)',
+  tags: ['autodocs'],
   component: Banner,
   argTypes: {}
 };

diff --git a/src/components/Buttons/Buttons.stories.tsx b/src/components/Buttons/Buttons.stories.tsx
@@ -10,6 +10,7 @@ import { ButtonGroup } from './ButtonGroup';
 const meta: Meta<typeof Button> = {
   title: 'Components (Verified)/Buttons',
   component: Button,
+  tags: ['autodocs'],
   argTypes: {
     appearance: { control: 'select' },
     size: { control: 'select' },

diff --git a/src/components/Checkbox/Checkbox.stories.tsx b/src/components/Checkbox/Checkbox.stories.tsx
@@ -1,15 +1,14 @@
 /* eslint-disable react/jsx-handler-names */
 import type { Meta, StoryObj } from '@storybook/react';
-import { Checkbox } from './Checkbox';
-import { CheckboxTestWrapper } from './Checkbox.utils';
+import Checkbox from './Checkbox';
+import { CheckboxWrapper } from './Checkbox.utils';
 
 /**
-Use checkboxes when the user can select more than one option from a list. Make clear with helper text that this is the case. Use [radio buttons](https://cfpb.github.io/design-system/components/radio-buttons) when the user can choose only one option from a list.
-
 Source: https://cfpb.github.io/design-system/components/checkboxes
 */
 const meta: Meta<typeof Checkbox> = {
-  title: 'Components (Verified)/Checkboxes',
+  title: 'Components (Verified)/Checkboxes/Checkbox',
+  tags: ['autodocs'],
   component: Checkbox,
   argTypes: {
     disabled: { control: 'boolean' },
@@ -21,50 +20,104 @@ export default meta;
 
 type Story = StoryObj<typeof meta>;
 
-export const StandardCheckbox: Story = {
-  render: _arguments => CheckboxTestWrapper(_arguments),
-  name: 'Standard checkbox',
+export const Enabled: Story = {
+  render: _arguments => CheckboxWrapper(_arguments),
+  name: 'Enabled',
   args: {
-    id: 'standard',
-    name: 'standard',
-    label: 'Standard checkbox',
+    id: 'enabled',
+    label: 'Enabled',
     checked: false
   }
 };
 
-export const StandardCheckboxWithHelperText: Story = {
-  render: _arguments => CheckboxTestWrapper(_arguments),
-  name: 'Standard checkbox with helper text',
+export const Hover: Story = {
+  render: _arguments => CheckboxWrapper(_arguments),
+  name: 'Hover',
   args: {
-    ...StandardCheckbox.args,
-    id: 'StandardCheckboxWithHelper',
-    name: 'StandardCheckboxWithHelper',
-    label: 'Standard checkbox with helper text',
-    helperText: 'This is optional helper text'
+    id: 'hover',
+    inputClassName: 'hover',
+    label: 'Hover'
+  }
+};
+
+export const Focus: Story = {
+  render: _arguments => CheckboxWrapper(_arguments),
+  name: 'Focus',
+  args: {
+    id: 'focus',
+    inputClassName: 'focus',
+    label: 'Focus'
+  }
+};
+
+export const Selected: Story = {
+  render: _arguments => CheckboxWrapper(_arguments),
+  name: 'Selected',
+  args: {
+    id: 'selected',
+    label: 'Selected',
+    checked: true
+  }
+};
+
+export const Disabled: Story = {
+  render: _arguments => CheckboxWrapper(_arguments),
+  name: 'Disabled',
+  args: {
+    id: 'disabled',
+    label: 'Disabled',
+    checked: false,
+    disabled: true
+  }
+};
+
+export const Disabledselected: Story = {
+  render: _arguments => CheckboxWrapper(_arguments),
+  name: 'Disabled/selected',
+  args: {
+    id: 'disabled/selected',
+    label: 'Disabled/selected',
+    checked: true,
+    disabled: true
+  }
+};
+
+export const Success: Story = {
+  render: _arguments => CheckboxWrapper(_arguments),
+  name: 'Success',
+  args: {
+    id: 'success',
+    label: 'Success',
+    status: 'success'
+  }
+};
+
+export const Warning: Story = {
+  render: _arguments => CheckboxWrapper(_arguments),
+  name: 'Warning',
+  args: {
+    id: 'warning',
+    label: 'Warning',
+    status: 'warning'
   }
 };
 
-export const LargeTargetAreaCheckbox: Story = {
-  render: _arguments => CheckboxTestWrapper(_arguments),
-  name: 'Large target area checkbox',
+export const Error: Story = {
+  render: _arguments => CheckboxWrapper(_arguments),
+  name: 'Error',
   args: {
-    ...StandardCheckbox.args,
-    id: 'LargeTargetAreaCheckbox',
-    name: 'LargeTargetAreaCheckbox',
-    label: 'Large target area checkbox',
-    isLarge: true
+    id: 'error',
+    label: 'Error',
+    status: 'error'
   }
 };
 
-export const LargeTargetAreaCheckboxWithHelperText: Story = {
-  render: _arguments => CheckboxTestWrapper(_arguments),
-  name: 'Large target area checkbox helper text',
+export const WithHelperText: Story = {
+  render: _arguments => CheckboxWrapper(_arguments),
+  name: 'With helper text',
   args: {
-    ...StandardCheckbox.args,
-    id: 'LargeCheckboxWithHelperText',
-    name: 'LargeCheckboxWithHelperText',
-    label: 'Large target area checkbox helper text',
-    isLarge: true,
+    id: 'WithHelper',
+    label: 'Label',
     helperText: 'This is optional helper text'
   }
 };
diff --git a/src/components/Checkbox/Checkbox.tsx b/src/components/Checkbox/Checkbox.tsx
@@ -37,10 +37,18 @@ export interface CheckboxProperties {
   disabled?: boolean;
   /** An event handler function that will be called when the checkbox's value is changed  */
   onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
+  /** Border status */
+  status: 'success' | 'warning' | 'error';
 }
 
 const containerBaseStyles = ['m-form-field m-form-field__checkbox'];
 
+const borderStatus = {
+  success: 'm-form-field__checkbox__success',
+  warning: 'm-form-field__checkbox__warning',
+  error: 'm-form-field__checkbox__error'
+};
+
 export const Checkbox = ({
   id,
   label,
@@ -55,6 +63,7 @@ export const Checkbox = ({
   labelInline = true, // 'true' REMOVES the a.label__heading class
   name,
   onChange,
+  status,
   ...properties
 }: CheckboxProperties): ReactElement => {
   const onChangeHandler = useCallback(
@@ -67,6 +76,7 @@ export const Checkbox = ({
   const containerClasses = [
     ...containerBaseStyles,
     isLarge ? 'm-form-field__lg-target' : '',
+    borderStatus[status] ?? '',
     className
   ];
 

diff --git a/src/components/Checkbox/Checkbox.utils.tsx b/src/components/Checkbox/Checkbox.utils.tsx
@@ -1,3 +1,4 @@
+import { useArgs } from '@storybook/client-api';
 import { useState } from 'react';
 import type { CheckboxProperties } from './Checkbox';
 import { Checkbox } from './Checkbox';
@@ -8,9 +9,10 @@ import { Checkbox } from './Checkbox';
  */
 export const CheckboxTestWrapper = ({
   onChange,
+  checked,
   ...others
 }: CheckboxProperties): JSX.Element => {
-  const [checked, setChecked] = useState(false);
+  const [inputChecked, setChecked] = useState(false);
 
   const onWrapperChange = (
     event: React.ChangeEvent<HTMLInputElement>
@@ -20,5 +22,27 @@ export const CheckboxTestWrapper = ({
     setChecked(event.target.checked);
   };
 
-  return <Checkbox {...others} checked={checked} onChange={onWrapperChange} />;
+  return (
+    <Checkbox
+      checked={checked || inputChecked}
+      {...others}
+      onChange={onWrapperChange}
+    />
+  );
 };
+
+export function CheckboxWrapper({ ...arguments_ }): JSX.Element {
+  const [, updateArguments] = useArgs();
+
+  return (
+    <Checkbox
+      {...arguments_}
+      checked={arguments_.checked}
+      onChange={(): void => {
+        updateArguments({
+          checked: !arguments_.checked
+        });
+      }}
+    />
+  );
+}
diff --git a/src/components/Checkbox/CheckboxLarge.stories.tsx b/src/components/Checkbox/CheckboxLarge.stories.tsx
@@ -0,0 +1,98 @@
+/* eslint-disable react/jsx-handler-names */
+import type { Meta, StoryObj } from '@storybook/react';
+import Checkbox from './Checkbox';
+import { CheckboxWrapper } from './Checkbox.utils';
+
+/**
+Source: https://cfpb.github.io/design-system/components/checkboxes
+*/
+const meta: Meta<typeof Checkbox> = {
+  title: 'Components (Verified)/Checkboxes/Large target area',
+  tags: ['autodocs'],
+  component: Checkbox,
+  argTypes: {
+    disabled: { control: 'boolean' },
+    isLarge: { control: 'boolean' }
+  }
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Enabled: Story = {
+  render: _arguments => CheckboxWrapper(_arguments),
+  name: 'Enabled',
+  args: {
+    id: 'Enabled',
+    label: 'Enabled',
+    isLarge: true
+  }
+};
+
+export const Hover: Story = {
+  render: _arguments => CheckboxWrapper(_arguments),
+  name: 'Hover',
+  args: {
+    id: 'hover',
+    label: 'Hover',
+    inputClassName: 'hover',
+    isLarge: true
+  }
+};
+
+export const Focus: Story = {
+  render: _arguments => CheckboxWrapper(_arguments),
+  name: 'Focus',
+  args: {
+    id: 'focus',
+    label: 'Focus',
+    inputClassName: 'focus',
+    isLarge: true
+  }
+};
+
+export const Selected: Story = {
+  render: _arguments => CheckboxWrapper(_arguments),
+  name: 'Selected',
+  args: {
+    id: 'selected',
+    label: 'Selected',
+    isLarge: true,
+    checked: true
+  }
+};
+
+export const Disabled: Story = {
+  render: _arguments => CheckboxWrapper(_arguments),
+  name: 'Disabled',
+  args: {
+    id: 'disabled',
+    label: 'Disabled',
+    isLarge: true,
+    disabled: true
+  }
+};
+
+export const DisabledSelected: Story = {
+  render: _arguments => CheckboxWrapper(_arguments),
+  name: 'Disabled/Selected',
+  args: {
+    id: 'disabled/selected',
+    label: 'Disabled/Selected',
+    isLarge: true,
+    disabled: true,
+    checked: true
+  }
+};
+
+export const WithHelperText: Story = {
+  render: _arguments => CheckboxWrapper(_arguments),
+  name: 'With helper text',
+  args: {
+    id: 'withHelperText',
+    label: 'Label',
+    isLarge: true,
+    helperText: 'This is optional helper text'
+  }
+};