Merge pull request #385 from lifeomic/csf3-m

Update M- Components to Storybook CSF3
lifeomic · Aug 29, 2023 · d3499f2 · d3499f2
2 parents 6cab1c2 + a839e9d
commit d3499f2
Show file tree

Hide file tree

Showing 3 changed files with 102 additions and 77 deletions.
diff --git a/src/components/Menu/Menu.stories.tsx b/src/components/Menu/Menu.stories.tsx
@@ -1,51 +1,66 @@
 import React from 'react';
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { StoryObj, Meta } from '@storybook/react';
 
 import { Menu } from './Menu';
 import { IconButton } from '../IconButton';
 import { MoreHorizontal } from '@lifeomic/chromicons';
 import { MenuItem } from './MenuItem';
 import { MenuGroupHeading } from './MenuGroupHeading';
 
-export default {
-  title: 'Components/Menu/Menu',
+const meta: Meta<typeof Menu> = {
   component: Menu,
-  argTypes: {},
-} as ComponentMeta<typeof Menu>;
-
-const Template: ComponentStory<typeof Menu> = (args) => <Menu {...args} />;
-
-export const Default = Template.bind({});
-Default.args = {
-  'aria-label': 'Chroma menu options',
-  anchorElement: (
-    <IconButton aria-label="Click to open menu" icon={MoreHorizontal} />
-  ),
-  items: [<MenuItem key="1">Menu body</MenuItem>],
+  args: {
+    'aria-label': 'Chroma menu options',
+    anchorElement: (
+      <IconButton aria-label="Click to open menu" icon={MoreHorizontal} />
+    ),
+    items: [
+      <MenuItem key="2">Option 1</MenuItem>,
+      <MenuItem key="3">Option 2</MenuItem>,
+      <MenuItem key="5">Option 3</MenuItem>,
+      <MenuItem key="6">Option 4</MenuItem>,
+    ],
+  },
+  decorators: [(story) => <div style={{ height: '250px' }}>{story()}</div>],
 };
+export default meta;
+type Story = StoryObj<typeof Menu>;
 
-export const GroupHeadings = Template.bind({});
-GroupHeadings.args = {
-  'aria-label': 'Chroma menu options',
-  anchorElement: (
-    <IconButton aria-label="Click to open menu" icon={MoreHorizontal} />
-  ),
-  items: [
-    <MenuGroupHeading key="1">First Section</MenuGroupHeading>,
-    <MenuItem key="2">Option 1</MenuItem>,
-    <MenuItem key="3">Option 2</MenuItem>,
-    <MenuGroupHeading key="4">Second Section</MenuGroupHeading>,
-    <MenuItem key="5">Option 3</MenuItem>,
-    <MenuItem key="6">Option 4</MenuItem>,
-  ],
+export const Default: Story = {};
+
+export const GroupHeadings: Story = {
+  args: {
+    items: [
+      <MenuGroupHeading key="1">First Section</MenuGroupHeading>,
+      <MenuItem key="2">Option 1</MenuItem>,
+      <MenuItem key="3">Option 2</MenuItem>,
+      <MenuGroupHeading key="4">Second Section</MenuGroupHeading>,
+      <MenuItem key="5">Option 3</MenuItem>,
+      <MenuItem key="6">Option 4</MenuItem>,
+    ],
+  },
+};
+
+export const Title: Story = {
+  args: {
+    title: 'Title',
+  },
+};
+
+export const Placement: Story = {
+  args: {
+    placement: 'top-end',
+  },
+};
+
+export const Gutter: Story = {
+  args: {
+    gutter: 50,
+  },
 };
 
-export const Placement = Template.bind({});
-Placement.args = {
-  'aria-label': 'Chroma menu options',
-  anchorElement: (
-    <IconButton aria-label="Click to open menu" icon={MoreHorizontal} />
-  ),
-  items: [<MenuItem key="1">Menu body</MenuItem>],
-  placement: 'top-end',
+export const UsePortal: Story = {
+  args: {
+    usePortal: true,
+  },
 };
diff --git a/src/components/Menu/MenuItem.stories.tsx b/src/components/Menu/MenuItem.stories.tsx
@@ -1,34 +1,30 @@
-import React from 'react';
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { StoryObj, Meta } from '@storybook/react';
 
 import { MenuItem } from './MenuItem';
 import { HelpCircle } from '@lifeomic/chromicons';
 
-export default {
-  title: 'Components/Menu/MenuItem',
+const meta: Meta<typeof MenuItem> = {
   component: MenuItem,
+  args: {
+    text: 'Menu Item',
+  },
   argTypes: {
     onClick: { action: 'clicked' },
   },
-} as ComponentMeta<typeof MenuItem>;
-
-const Template: ComponentStory<typeof MenuItem> = (args) => (
-  <MenuItem {...args} />
-);
-
-export const Default = Template.bind({});
-Default.args = {
-  text: 'Menu Item',
 };
+export default meta;
+type Story = StoryObj<typeof MenuItem>;
 
-export const SecondaryText = Template.bind({});
-SecondaryText.args = {
-  text: 'Menu Item',
-  secondaryText: 'This is secondary text',
+export const Default: Story = {};
+
+export const SecondaryText: Story = {
+  args: {
+    secondaryText: 'This is secondary text',
+  },
 };
 
-export const Icon = Template.bind({});
-Icon.args = {
-  text: 'Menu Item',
-  icon: HelpCircle,
+export const Icon: Story = {
+  args: {
+    icon: HelpCircle,
+  },
 };
diff --git a/src/components/Modal/Modal.stories.tsx b/src/components/Modal/Modal.stories.tsx
@@ -1,17 +1,17 @@
 import React from 'react';
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { StoryObj, StoryFn, Meta } from '@storybook/react';
 
 import { Modal } from './Modal';
 import { Button } from '../Button';
 import { Checkbox } from '../Checkbox';
 
-export default {
-  title: 'Components/Modal',
+const meta: Meta<typeof Modal> = {
   component: Modal,
-  argTypes: {},
-} as ComponentMeta<typeof Modal>;
+};
+export default meta;
+type Story = StoryObj<typeof Modal>;
 
-export const Default: ComponentStory<typeof Modal> = (args) => {
+const Template: StoryFn<typeof Modal> = (args) => {
   const [isOpen, setIsOpen] = React.useState(false);
 
   return (
@@ -33,13 +33,9 @@ export const Default: ComponentStory<typeof Modal> = (args) => {
     </>
   );
 };
-Default.args = {
-  title: 'Modal Example',
-};
 
-export const ActionsModal: ComponentStory<typeof Modal> = (args) => {
+const Template2: StoryFn<typeof Modal> = (args) => {
   const [isOpen, setIsOpen] = React.useState(false);
-
   return (
     <>
       <Button
@@ -72,14 +68,9 @@ export const ActionsModal: ComponentStory<typeof Modal> = (args) => {
     </>
   );
 };
-ActionsModal.args = {
-  title: 'Actions Example',
-  justifyActions: 'flex-end',
-};
 
-export const CustomHeader: ComponentStory<typeof Modal> = (args) => {
+const Template3: StoryFn<typeof Modal> = (args) => {
   const [isOpen, setIsOpen] = React.useState(false);
-
   return (
     <>
       <Button
@@ -98,6 +89,10 @@ export const CustomHeader: ComponentStory<typeof Modal> = (args) => {
               display: 'flex',
               flexDirection: 'row',
               justifyContent: 'space-between',
+              padding: '1rem',
+              paddingTop: '19px', // to accommodate for margin
+              marginTop: '-3px',
+              backgroundColor: 'lightblue',
             }}
           >
             <div>Hello, World!</div>
@@ -115,6 +110,25 @@ export const CustomHeader: ComponentStory<typeof Modal> = (args) => {
     </>
   );
 };
-CustomHeader.args = {
-  title: 'CustomHeader',
+
+export const Default: Story = {
+  render: Template,
+  args: {
+    title: 'Modal Example',
+  },
+};
+
+export const ActionsModal: Story = {
+  render: Template2,
+  args: {
+    title: 'Actions Example',
+    justifyActions: 'flex-end',
+  },
+};
+
+export const CustomHeader: Story = {
+  render: Template3,
+  args: {
+    title: 'CustomHeader',
+  },
 };