Merge pull request #373 from lifeomic/csf3-b

Update B- Components to Storybook CSF3
lifeomic · Aug 23, 2023 · af1f077 · af1f077
2 parents 081bc00 + a2b7474
commit af1f077
Show file tree

Hide file tree

Showing 7 changed files with 391 additions and 324 deletions.
diff --git a/src/components/Box/Box.stories.tsx b/src/components/Box/Box.stories.tsx
@@ -1,81 +1,92 @@
 import React from 'react';
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { StoryObj, StoryFn, Meta } from '@storybook/react';
 
 import { Box } from './Box';
 
-export default {
+const meta: Meta<typeof Box> = {
   title: 'Layout/Box',
   component: Box,
-  argTypes: {},
-} as ComponentMeta<typeof Box>;
+};
+export default meta;
+type Story = StoryObj<typeof Box>;
 
-const Template: ComponentStory<typeof Box> = (args) => (
+const Template: StoryFn<typeof Box> = (args) => (
   <Box {...args}>
     <p>p1</p>
     <p>p2</p>
     <p>p3</p>
   </Box>
 );
 
-export const Default = Template.bind({});
+export const Default: Story = {
+  render: Template,
+};
 
-export const Spacing = Template.bind({});
-Spacing.parameters = {
-  docs: {
-    description: {
-      story:
-        'Numbers are multiplied by the default theme spacing for margin, padding, and gap. ' +
-        'Strings are are ' +
-        'used as raw CSS. As well as `margin` and `padding`, the top, bottom, ' +
-        'left, right, x and y versions of each are supported. For a more modern, ' +
-        'straightforward approach to handle spacing between children, use the `gap` prop.',
+export const Spacing: Story = {
+  render: Template,
+  args: {
+    margin: 2,
+    padding: '1px',
+    gap: 2,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Numbers are multiplied by the default theme spacing for margin, padding, and gap. ' +
+          'Strings are are ' +
+          'used as raw CSS. As well as `margin` and `padding`, the top, bottom, ' +
+          'left, right, x and y versions of each are supported. For a more modern, ' +
+          'straightforward approach to handle spacing between children, use the `gap` prop.',
+      },
     },
   },
 };
-Spacing.args = {
-  margin: 2,
-  padding: '1px',
-  gap: 2,
-};
 
-export const Direction = Template.bind({});
-Direction.parameters = {
-  docs: {
-    description: {
-      story:
-        'A direction can be applied. Valid options are `row` (default) or `column`.',
+export const Direction: Story = {
+  render: Template,
+  args: {
+    direction: 'column',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'A direction can be applied. Valid options are `row` (default) or `column`.',
+      },
     },
   },
 };
-Direction.args = {
-  direction: 'column',
-};
 
-export const ThemeColor = Template.bind({});
-ThemeColor.parameters = {
-  docs: {
-    description: {
-      story:
-        'Color props take a string dot notation to the theme palette properties, or are passed as raw CSS.',
+export const ThemeColor: Story = {
+  render: Template,
+  args: {
+    color: 'text.contrast',
+    bgColor: 'common.black',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Color props take a string dot notation to the theme palette properties, or are passed as raw CSS.',
+      },
     },
   },
 };
-ThemeColor.args = {
-  color: 'text.contrast',
-  bgColor: 'common.black',
-};
 
-export const borderRadius = Template.bind({});
-borderRadius.parameters = {
-  docs: {
-    description: {
-      story:
-        'Sets the `borderRadius` of a box using `theme.shape.borderRadius`.',
+export const borderRadius: Story = {
+  render: Template,
+  args: {
+    color: 'text.contrast',
+    bgColor: 'common.black',
+    borderRadius: true,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Sets the `borderRadius` of a box using `theme.shape.borderRadius`.',
+      },
     },
   },
 };
-borderRadius.args = {
-  color: 'text.contrast',
-  bgColor: 'common.black',
-  borderRadius: true,
-};
diff --git a/src/components/Breadcrumbs/Breadcrumbs.stories.tsx b/src/components/Breadcrumbs/Breadcrumbs.stories.tsx
@@ -1,78 +1,49 @@
 import React from 'react';
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { StoryObj, Meta } from '@storybook/react';
 import { MemoryRouter } from 'react-router-dom';
 
 import { Breadcrumbs } from './Breadcrumbs';
 
-export default {
-  title: 'Components/Breadcrumbs',
+const meta: Meta<typeof Breadcrumbs> = {
   component: Breadcrumbs,
-  argTypes: {},
+  args: {
+    crumbs: [
+      {
+        text: 'Parent',
+        url: 'root',
+      },
+      {
+        text: 'Child',
+        url: 'root/child',
+      },
+      {
+        text: 'GrandChild',
+        url: 'root/child/grand',
+      },
+    ],
+  },
   decorators: [(story) => <MemoryRouter>{story()}</MemoryRouter>],
-} as ComponentMeta<typeof Breadcrumbs>;
+};
+export default meta;
+type Story = StoryObj<typeof Breadcrumbs>;
 
-const Template: ComponentStory<typeof Breadcrumbs> = (args) => (
-  <Breadcrumbs {...args} />
-);
+export const Default: Story = {};
 
-export const Default = Template.bind({});
-Default.args = {
-  crumbs: [
-    {
-      text: 'Parent',
-      url: 'root',
-    },
-    {
-      text: 'Child',
-      url: 'root/child',
-    },
-    {
-      text: 'GrandChild',
-      url: 'root/child/grand',
-    },
-  ],
+export const InverseDark = {
+  parameters: {
+    backgrounds: { default: 'dark' },
+  },
+  args: {
+    color: 'inverse',
+  },
 };
 
-export const InverseDark = Template.bind({});
-InverseDark.parameters = {
-  backgrounds: { default: 'dark' },
-};
-InverseDark.args = {
-  crumbs: [
-    {
-      text: 'Parent',
-      url: 'root',
-    },
-    {
-      text: 'Child',
-      url: 'root/child',
-    },
-    {
-      text: 'GrandChild',
-      url: 'root/child/grand',
-    },
-  ],
-  color: 'inverse',
-};
+export const InverseBlue = {
+  parameters: {
+    backgrounds: { default: 'blue' },
+  },
 
-export const InverseBlue = Template.bind({});
-InverseBlue.parameters = {
-  backgrounds: { default: 'blue' },
-};
-InverseBlue.args = {
-  crumbs: [
-    {
-      text: 'Parent',
-      url: 'root',
-    },
-    {
-      text: 'Child',
-      url: 'root/child',
-    },
-    {
-      text: 'GrandChild',
-      url: 'root/child/grand',
-    },
-  ],
-  color: 'inverse',
+  args: {
+    color: 'inverse',
+  },
 };