Merge pull request #391 from lifeomic/csf3-s1

Update first batch of S- Components to Storybook CSF3

src/components/SearchField/SearchField.stories.tsx

@@ -1,40 +1,33 @@
-import React from 'react';
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { StoryObj, Meta } from '@storybook/react';
 
 import { SearchField } from './SearchField';
 
-export default {
+const meta: Meta<typeof SearchField> = {
   title: 'Form Components/SearchField',
   component: SearchField,
-  argTypes: {},
-} as ComponentMeta<typeof SearchField>;
-
-const Template: ComponentStory<typeof SearchField> = (args) => (
-  <SearchField {...args} />
-);
-
-export const Default = Template.bind({});
-Default.args = {
-  'aria-label': 'Search',
+  args: {
+    'aria-label': 'Search',
+  },
 };
+export default meta;
+type Story = StoryObj<typeof SearchField>;
 
-export const WithLabel = Template.bind({});
-WithLabel.args = {};
+export const Default: Story = {};
 
-export const InverseDark = Template.bind({});
-InverseDark.parameters = {
-  backgrounds: { default: 'dark' },
-};
-InverseDark.args = {
-  'aria-label': 'Search',
-  color: 'inverse',
+export const InverseDark = {
+  parameters: {
+    backgrounds: { default: 'dark' },
+  },
+  args: {
+    color: 'inverse',
+  },
 };
 
-export const InverseBlue = Template.bind({});
-InverseBlue.parameters = {
-  backgrounds: { default: 'blue' },
-};
-InverseBlue.args = {
-  'aria-label': 'Search',
-  color: 'inverse',
+export const InverseBlue = {
+  parameters: {
+    backgrounds: { default: 'blue' },
+  },
+  args: {
+    color: 'inverse',
+  },
 };

src/components/SecondaryNavigation/SecondaryNavigation.stories.tsx

@@ -1,23 +1,24 @@
 import React from 'react';
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { StoryObj, StoryFn, Meta } from '@storybook/react';
 
 import { SecondaryNavigation } from './SecondaryNavigation';
 import { MemoryRouter } from 'react-router-dom';
 import { SecondaryNavigationItem } from './SecondaryNavigationItem';
 
-export default {
-  title: 'Components/SecondaryNavigation/SecondaryNavigation',
+const meta: Meta<typeof SecondaryNavigation> = {
   component: SecondaryNavigation,
-  argTypes: {},
   decorators: [(story) => <MemoryRouter>{story()}</MemoryRouter>],
-} as ComponentMeta<typeof SecondaryNavigation>;
+};
+export default meta;
+type Story = StoryObj<typeof SecondaryNavigation>;
 
-const Template: ComponentStory<typeof SecondaryNavigation> = (args) => (
+const Template: StoryFn<typeof SecondaryNavigation> = (args) => (
   <SecondaryNavigation {...args}>
     <SecondaryNavigationItem to="/link-1" label="Link 1" />
     <SecondaryNavigationItem to="/link-2" label="Link 2" />
   </SecondaryNavigation>
 );
 
-export const Default = Template.bind({});
-Default.args = {};
+export const Default: Story = {
+  render: Template,
+};

src/components/SecondaryNavigation/SecondaryNavigationItem.stories.tsx

@@ -1,22 +1,18 @@
 import React from 'react';
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { StoryObj, Meta } from '@storybook/react';
 
 import { MemoryRouter } from 'react-router-dom';
 import { SecondaryNavigationItem } from './SecondaryNavigationItem';
 
-export default {
-  title: 'Components/SecondaryNavigation/SecondaryNavigationItem',
+const meta: Meta<typeof SecondaryNavigationItem> = {
   component: SecondaryNavigationItem,
-  argTypes: {},
+  args: {
+    to: '/',
+    label: 'Default',
+  },
   decorators: [(story) => <MemoryRouter>{story()}</MemoryRouter>],
-} as ComponentMeta<typeof SecondaryNavigationItem>;
-
-const Template: ComponentStory<typeof SecondaryNavigationItem> = (args) => (
-  <SecondaryNavigationItem {...args} />
-);
-
-export const Default = Template.bind({});
-Default.args = {
-  to: '/',
-  label: 'Default',
 };
+export default meta;
+type Story = StoryObj<typeof SecondaryNavigationItem>;
+
+export const Default: Story = {};