feat: Added Large Checkbox menu

src/components/Checkbox/Checkbox.stories.tsx

@@ -1,15 +1,15 @@
 /* eslint-disable react/jsx-handler-names */
-import { useArgs } from '@storybook/client-api';
 import type { Meta, StoryObj } from '@storybook/react';
 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/Default',
   component: Checkbox,
   argTypes: {
     disabled: { control: 'boolean' },
@@ -21,22 +21,6 @@ export default meta;
 
 type Story = StoryObj<typeof meta>;
 
-function CheckboxWrapper({ ...arguments_ }): JSX.Element {
-  const [, updateArguments] = useArgs();
-
-  return (
-    <Checkbox
-      {...arguments_}
-      checked={arguments_.checked}
-      onChange={(): void => {
-        updateArguments({
-          checked: !arguments_.checked
-        });
-      }}
-    />
-  );
-}
-
 export const Enabled: Story = {
   render: _arguments => CheckboxWrapper(_arguments),
   name: 'Enabled',
@@ -134,28 +118,7 @@ export const WithHelperText: Story = {
   name: 'With helper text',
   args: {
     id: 'WithHelper',
-    label: 'With helper text',
-    helperText: 'This is optional helper text'
-  }
-};
-
-export const LargeTargetArea: Story = {
-  render: _arguments => CheckboxWrapper(_arguments),
-  name: 'Large target area',
-  args: {
-    id: 'LargeTargetArea',
-    label: 'Large target area',
-    isLarge: true
-  }
-};
-
-export const LargeTargetAreaWithHelperText: Story = {
-  render: _arguments => CheckboxWrapper(_arguments),
-  name: 'Large target area helper text',
-  args: {
-    id: 'LargeWithHelperText',
-    label: 'Large target area helper text',
-    isLarge: true,
+    label: 'Label',
     helperText: 'This is optional helper text'
   }
 };

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';
@@ -29,3 +30,19 @@ export const CheckboxTestWrapper = ({
     />
   );
 };
+
+export function CheckboxWrapper({ ...arguments_ }): JSX.Element {
+  const [, updateArguments] = useArgs();
+
+  return (
+    <Checkbox
+      {...arguments_}
+      checked={arguments_.checked}
+      onChange={(): void => {
+        updateArguments({
+          checked: !arguments_.checked
+        });
+      }}
+    />
+  );
+}

src/components/Checkbox/CheckboxLarge.stories.tsx

@@ -0,0 +1,99 @@
+/* eslint-disable react/jsx-handler-names */
+import type { Meta, StoryObj } from '@storybook/react';
+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/Large target area',
+  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'
+  }
+};