Merge pull request #374 from lifeomic/csf3-c

Update C- Component to Storybook CSF3
lifeomic · Aug 24, 2023 · 13ca33c · 13ca33c
2 parents 96475e4 + 5f03b13
commit 13ca33c
Show file tree

Hide file tree

Showing 4 changed files with 352 additions and 339 deletions.
diff --git a/src/components/Checkbox/Checkbox.stories.tsx b/src/components/Checkbox/Checkbox.stories.tsx
@@ -1,11 +1,13 @@
-import React from 'react';
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { StoryObj, Meta } from '@storybook/react';
 
 import { Checkbox } from './Checkbox';
 
-export default {
+const meta: Meta<typeof Checkbox> = {
   title: 'Form Components/Checkbox',
   component: Checkbox,
+  args: {
+    label: 'Checkbox',
+  },
   argTypes: {
     checked: {
       description: '`boolean`',
@@ -23,149 +25,151 @@ export default {
     },
     onChange: { action: 'clicked' },
   },
-} as ComponentMeta<typeof Checkbox>;
-
-const Template: ComponentStory<typeof Checkbox> = (args) => (
-  <Checkbox {...args} />
-);
+};
+export default meta;
+type Story = StoryObj<typeof Checkbox>;
 
-export const Unchecked = Template.bind({});
-Unchecked.parameters = {
-  docs: {
-    description: {
-      story:
-        'A checkbox component for form usage. Under the covers, this is an input element with `type="checkbox"`.',
+export const Unchecked: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'A checkbox component for form usage. Under the covers, this is an input element with `type="checkbox"`.',
+      },
     },
   },
-};
-Unchecked.args = {
-  checked: false,
-  label: 'Checkbox',
+  args: {
+    checked: false,
+  },
 };
 
-export const Checked = Template.bind({});
-Checked.parameters = {
-  docs: {
-    description: {
-      story:
-        'The checked state of the checkbox. Normally this is controlled in combination with `onChange` handler.',
+export const Checked: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'The checked state of the checkbox. Normally this is controlled in combination with `onChange` handler.',
+      },
     },
   },
-};
-Checked.args = {
-  checked: true,
-  label: 'Checkbox',
+  args: {
+    checked: true,
+  },
 };
 
-export const DisabledChecked = Template.bind({});
-DisabledChecked.parameters = {
-  docs: {
-    description: {
-      story: 'Applies the disabled state to the element.',
+export const DisabledChecked: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story: 'Applies the disabled state to the element.',
+      },
     },
   },
-};
-DisabledChecked.args = {
-  disabled: true,
-  checked: true,
-  label: 'Checkbox',
+  args: {
+    disabled: true,
+    checked: true,
+  },
 };
 
-export const DisabledUnchecked = Template.bind({});
-DisabledUnchecked.args = {
-  disabled: true,
-  checked: false,
-  label: 'Checkbox',
+export const DisabledUnchecked: Story = {
+  args: {
+    disabled: true,
+    checked: false,
+  },
 };
 
-export const HelpMessage = Template.bind({});
-HelpMessage.parameters = {
-  docs: {
-    description: {
-      story:
-        'Caption, help text to display underneath the element. This should be supplemental text to the label, typically an expanded description of the option.',
+export const HelpMessage: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Caption, help text to display underneath the element. This should be supplemental text to the label, typically an expanded description of the option.',
+      },
     },
   },
-};
-HelpMessage.args = {
-  label: 'Checkbox',
-  helpMessage: 'This is some helper text.',
+  args: {
+    helpMessage: 'This is some helper text.',
+  },
 };
 
-export const WithError = Template.bind({});
-WithError.parameters = {
-  docs: {
-    description: {
-      story: 'Sets an error style on the element.',
+export const WithError: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story: 'Sets an error style on the element.',
+      },
     },
   },
-};
-WithError.args = {
-  label: 'Checkbox',
-  hasError: true,
+  args: {
+    hasError: true,
+  },
 };
 
-export const WithErrorText = Template.bind({});
-WithErrorText.args = {
-  label: 'Checkbox',
-  hasError: true,
-  errorMessage: 'This is an error!',
+export const WithErrorText: Story = {
+  args: {
+    hasError: true,
+    errorMessage: 'This is an error!',
+  },
 };
 
-export const ShowRequiredLabel = Template.bind({});
-ShowRequiredLabel.args = {
-  label: 'Checkbox',
-  showRequiredLabel: true,
+export const ShowRequiredLabel: Story = {
+  args: {
+    showRequiredLabel: true,
+  },
 };
 
-export const WithHelpAndErrorText = Template.bind({});
-WithHelpAndErrorText.args = {
-  label: 'Checkbox',
-  hasError: true,
-  errorMessage: 'This is an error!',
-  helpMessage: 'This is some helper text.',
+export const WithHelpAndErrorText: Story = {
+  args: {
+    hasError: true,
+    errorMessage: 'This is an error!',
+    helpMessage: 'This is some helper text.',
+  },
 };
 
-export const Indeterminate = Template.bind({});
-Indeterminate.parameters = {
-  docs: {
-    description: {
-      story:
-        'Applies the indeterminate state to the element. Primarily used when a parent checkbox has a mix of checked and unchecked children checkboxes.',
+export const Indeterminate: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Applies the indeterminate state to the element. Primarily used when a parent checkbox has a mix of checked and unchecked children checkboxes.',
+      },
     },
   },
-};
-Indeterminate.args = {
-  label: 'Checkbox',
-  indeterminate: true,
+  args: {
+    checked: true,
+    indeterminate: true,
+  },
 };
 
-export const IndeterminateDisabled = Template.bind({});
-IndeterminateDisabled.args = {
-  label: 'Checkbox',
-  indeterminate: true,
+export const IndeterminateDisabled: Story = {
+  args: {
+    checked: true,
+    disabled: true,
+    indeterminate: true,
+  },
 };
 
-export const NoLabel = Template.bind({});
-NoLabel.args = {
-  label: '',
-  'aria-label': 'Checkbox with no label',
+export const NoLabel: Story = {
+  args: {
+    label: '',
+    'aria-label': 'Checkbox with no label',
+  },
 };
 
-export const InverseDark = Template.bind({});
-InverseDark.parameters = {
-  backgrounds: { default: 'dark' },
-};
-InverseDark.args = {
-  label: 'Checkbox',
-  color: 'inverse',
+export const InverseDark: Story = {
+  parameters: {
+    backgrounds: { default: 'dark' },
+  },
+  args: {
+    color: 'inverse',
+  },
 };
 
-export const InverseBlue = Template.bind({});
-InverseBlue.parameters = {
-  backgrounds: { default: 'blue' },
-};
-InverseBlue.args = {
-  label: 'Checkbox',
-  color: 'inverse',
+export const InverseBlue: Story = {
+  parameters: {
+    backgrounds: { default: 'blue' },
+  },
+  args: {
+    color: 'inverse',
+  },
 };
diff --git a/src/components/Chip/Chip.stories.tsx b/src/components/Chip/Chip.stories.tsx
@@ -1,33 +1,34 @@
-import React from 'react';
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { StoryObj, Meta } from '@storybook/react';
 
 import { Chip } from './Chip';
 
-export default {
-  title: 'Components/Chip',
+const meta: Meta<typeof Chip> = {
   component: Chip,
-  argTypes: {},
-} as ComponentMeta<typeof Chip>;
-
-const Template: ComponentStory<typeof Chip> = (args) => <Chip {...args} />;
-
-export const Default = Template.bind({});
-Default.args = {
-  label: 'Chip',
+  args: {
+    label: 'Chip',
+  },
 };
+export default meta;
+type Story = StoryObj<typeof Chip>;
 
-export const OnDelete = Template.bind({});
-OnDelete.parameters = {
-  docs: {
-    description: {
-      story:
-        'The function to call when the removal button is clicked. Note that this does not ' +
-        'actually do anything to the Chip component, removing the element from the DOM is ' +
-        'up to the consumer to take care of.\n\n' +
-        'To display a Chip, but not display the removal button, do not provide this prop.',
+export const Default: Story = {};
+
+export const OnDelete: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'The function to call when the removal button is clicked. Note that this does not ' +
+          'actually do anything to the Chip component, removing the element from the DOM is ' +
+          'up to the consumer to take care of.\n\n' +
+          'To display a Chip, but not display the removal button, do not provide this prop.',
+      },
     },
   },
 };
-OnDelete.args = {
-  label: 'Chip',
+
+export const DisableDelete: Story = {
+  args: {
+    disableDelete: true,
+  },
 };