Merge pull request #393 from lifeomic/csf3-s3

Update third batch of S- Components to Storybook CSF3

Author: MMFane

src/components/Slider/Slider.stories.tsx

@@ -1,88 +1,83 @@
-import React from 'react';
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { StoryObj, Meta } from '@storybook/react';
 
 import { Slider } from './Slider';
 
-export default {
-  title: 'Components/Slider',
+const meta: Meta<typeof Slider> = {
   component: Slider,
-  argTypes: {},
-} as ComponentMeta<typeof Slider>;
-
-const Template: ComponentStory<typeof Slider> = (args) => <Slider {...args} />;
-
-export const Default = Template.bind({});
-Default.args = {
-  label: 'Slider',
+  args: {
+    label: 'Slider',
+  },
 };
+export default meta;
+type Story = StoryObj<typeof Slider>;
 
-export const LabelPlacement = Template.bind({});
-LabelPlacement.args = {
-  label: 'Slider',
-  labelPlacement: 'bottom',
-};
+export const Default: Story = {};
 
-export const HelpMessage = Template.bind({});
-HelpMessage.args = {
-  label: 'Slider',
-  helpMessage: 'Help Message',
+export const LabelPlacement: Story = {
+  args: {
+    labelPlacement: 'bottom',
+  },
 };
 
-export const Value = Template.bind({});
-Value.args = {
-  label: 'Slider',
-  value: 40,
+export const HelpMessage: Story = {
+  args: {
+    helpMessage: 'Help Message',
+  },
 };
 
-export const ShowValue = Template.bind({});
-ShowValue.args = {
-  label: 'Slider',
-  value: 40,
-  showValue: true,
+export const Value: Story = {
+  args: {
+    value: 40,
+  },
 };
 
-export const FormatValue = Template.bind({});
-FormatValue.args = {
-  label: 'Slider',
-  value: 40,
-  formatValue: (value: number | undefined) => `${value} cm`,
+export const ShowValue: Story = {
+  args: {
+    value: 40,
+    showValue: true,
+  },
 };
 
-export const Disabled = Template.bind({});
-Disabled.args = {
-  label: 'Slider',
-  disabled: true,
+export const FormatValue: Story = {
+  args: {
+    value: 40,
+    formatValue: (value: number | undefined) => `${value} cm`,
+  },
 };
 
-export const Error = Template.bind({});
-Error.args = {
-  label: 'Slider',
-  hasError: true,
-  errorMessage: 'Error Message',
+export const Disabled: Story = {
+  args: {
+    disabled: true,
+  },
 };
 
-export const InverseDark = Template.bind({});
-InverseDark.parameters = {
-  backgrounds: { default: 'dark' },
-};
-InverseDark.args = {
-  label: 'Slider',
-  value: 40,
-  color: 'inverse',
-  helpMessage: 'Help Message',
-  showValue: true,
-  formatValue: (value: number | undefined) => `${value} cm`,
+export const Error: Story = {
+  args: {
+    hasError: true,
+    errorMessage: 'Error Message',
+  },
 };
 
-export const InverseBlue = Template.bind({});
-InverseBlue.parameters = {
-  backgrounds: { default: 'blue' },
+export const InverseDark: Story = {
+  parameters: {
+    backgrounds: { default: 'dark' },
+  },
+  args: {
+    value: 40,
+    color: 'inverse',
+    helpMessage: 'Help Message',
+    showValue: true,
+  },
 };
-InverseBlue.args = {
-  label: 'Slider',
-  value: 40,
-  color: 'inverse',
-  helpMessage: 'Help Message',
-  showValue: true,
-  formatValue: (value: number | undefined) => `${value} cm`,
+
+export const InverseBlue: Story = {
+  parameters: {
+    backgrounds: { default: 'blue' },
+  },
+  args: {
+    value: 40,
+    color: 'inverse',
+    helpMessage: 'Help Message',
+    showValue: true,
+  },
 };

src/components/SmallTile/SmallTile.stories.tsx

@@ -1,30 +1,26 @@
 import React from 'react';
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { StoryObj, Meta } from '@storybook/react';
 
 import { SmallTile } from './SmallTile';
 import { SmallTileContent } from './SmallTileContent';
 import { SmallTileFooter } from './SmallTileFooter';
 
-export default {
-  title: 'Components/SmallTile',
+const meta: Meta<typeof SmallTile> = {
   component: SmallTile,
-  argTypes: {},
+  args: {
+    children: (
+      <>
+        <SmallTileContent text="Title Text" />
+        <SmallTileFooter text="Footer Text" />
+      </>
+    ),
+  },
   subcomponents: {
     SmallTileContent,
     SmallTileFooter,
   },
-} as ComponentMeta<typeof SmallTile>;
-
-const Template: ComponentStory<typeof SmallTile> = (args) => (
-  <SmallTile {...args} />
-);
-
-export const Default = Template.bind({});
-Default.args = {
-  children: (
-    <>
-      <SmallTileContent text="Title Text" />
-      <SmallTileFooter text="Footer Text" />
-    </>
-  ),
 };
+export default meta;
+type Story = StoryObj<typeof SmallTile>;
+
+export const Default: Story = {};

src/components/Snackbar/Snackbar.stories.tsx

@@ -1,26 +1,50 @@
 import React from 'react';
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { StoryObj, Meta } from '@storybook/react';
 
 import { Snackbar } from './Snackbar';
 import { Button } from '../Button';
+import { AlertTriangle } from '@lifeomic/chromicons';
 
-export default {
-  title: 'Components/Snackbar',
+const meta: Meta<typeof Snackbar> = {
   component: Snackbar,
-  argTypes: {},
-} as ComponentMeta<typeof Snackbar>;
-
-const Template: ComponentStory<typeof Snackbar> = (args) => (
-  <Snackbar {...args} />
-);
+  args: {
+    isOpen: true,
+    children: (
+      <>
+        <span>This is child text with a call to action</span>
+        <Button style={{ marginLeft: 8 }}>Button</Button>
+      </>
+    ),
+  },
+  decorators: [
+    (story: Function) => (
+      <div
+        style={{
+          height: '100px',
+        }}
+      >
+        {story()}
+      </div>
+    ),
+  ],
+};
+export default meta;
+type Story = StoryObj<typeof Snackbar>;
 
-export const Default = Template.bind({});
-Default.args = {
-  isOpen: true,
-  children: (
-    <>
-      <span>This is child text with a call to action</span>
-      <Button style={{ marginLeft: 8 }}>Button</Button>
-    </>
-  ),
+export const Default: Story = {};
+export const Icon: Story = {
+  args: {
+    icon: AlertTriangle,
+    statusType: 'error',
+    role: 'alert',
+    allowDismiss: true,
+    children: (
+      <>
+        <span>Warning</span>
+        <Button style={{ marginLeft: 8 }} color="negative">
+          Button
+        </Button>
+      </>
+    ),
+  },
 };