Merge pull request #397 from lifeomic/csf3-t2

Update second half of T- Components to Storybook CSF3
lifeomic · Sep 5, 2023 · 04780c4 · 04780c4
2 parents 8b574c0 + 4a71544
commit 04780c4
Show file tree

Hide file tree

Showing 3 changed files with 135 additions and 127 deletions.
diff --git a/src/components/TextField/TextField.stories.tsx b/src/components/TextField/TextField.stories.tsx
@@ -1,106 +1,103 @@
 import React from 'react';
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { StoryObj, Meta } from '@storybook/react';
 
 import { TextField } from './TextField';
 import { HelpCircle, User } from '@lifeomic/chromicons';
 
-export default {
+const meta: Meta<typeof TextField> = {
   title: 'Form Components/TextField',
   component: TextField,
-  argTypes: {},
-} as ComponentMeta<typeof TextField>;
-
-const Template: ComponentStory<typeof TextField> = (args) => (
-  <TextField {...args} />
-);
-
-export const Default = Template.bind({});
-Default.args = {
-  label: 'Text Field',
+  args: {
+    label: 'Text Field',
+  },
 };
+export default meta;
+type Story = StoryObj<typeof TextField>;
 
-export const Disabled = Template.bind({});
-Disabled.args = {
-  label: 'Text Field',
-  disabled: true,
-};
+export const Default: Story = {};
 
-export const ReadOnly = Template.bind({});
-ReadOnly.args = {
-  label: 'Text Field',
-  readOnly: true,
+export const Disabled: Story = {
+  args: {
+    disabled: true,
+  },
 };
 
-export const Password = Template.bind({});
-Password.args = {
-  label: 'Text Field',
-  type: 'password',
+export const ReadOnly: Story = {
+  args: {
+    readOnly: true,
+  },
 };
 
-export const Placeholder = Template.bind({});
-Placeholder.args = {
-  label: 'Text Field',
-  placeholder: 'Required',
+export const Password: Story = {
+  args: {
+    type: 'password',
+  },
 };
 
-export const Error = Template.bind({});
-Error.args = {
-  label: 'Text Field',
-  hasError: true,
-  errorMessage: 'This is required!',
+export const Placeholder: Story = {
+  args: {
+    placeholder: 'Required',
+  },
 };
 
-export const RequiredLabel = Template.bind({});
-RequiredLabel.args = {
-  label: 'Text Field',
-  showRequiredLabel: true,
+export const Error: Story = {
+  args: {
+    hasError: true,
+    errorMessage: 'This is required!',
+  },
 };
 
-export const StartAdornment = Template.bind({});
-StartAdornment.args = {
-  label: 'Text Field',
-  startAdornment: <User aria-hidden />,
+export const RequiredLabel: Story = {
+  args: {
+    showRequiredLabel: true,
+  },
 };
 
-export const EndAdornment = Template.bind({});
-EndAdornment.args = {
-  label: 'Text Field',
-  endAdornment: <User aria-hidden />,
+export const StartAdornment: Story = {
+  args: {
+    startAdornment: <User aria-hidden />,
+  },
 };
 
-export const HelpMessage = Template.bind({});
-HelpMessage.args = {
-  label: 'Text Field',
-  helpMessage: 'Help Message',
+export const EndAdornment: Story = {
+  args: {
+    endAdornment: <User aria-hidden />,
+  },
 };
 
-export const Tooltip = Template.bind({});
-Tooltip.args = {
-  label: 'Text Field',
-  icon: HelpCircle,
-  tooltipMessage: 'Tooltip Message',
+export const HelpMessage: Story = {
+  args: {
+    helpMessage: 'Help Message',
+  },
 };
 
-export const SecondaryLabel = Template.bind({});
-SecondaryLabel.args = {
-  label: 'Text Field',
-  secondaryLabel: 'Secondary Label',
+export const Tooltip: Story = {
+  args: {
+    icon: HelpCircle,
+    tooltipMessage: 'Tooltip Message',
+  },
 };
 
-export const InverseDark = Template.bind({});
-InverseDark.parameters = {
-  backgrounds: { default: 'dark' },
-};
-InverseDark.args = {
-  label: 'Text Field',
-  color: 'inverse',
+export const SecondaryLabel: Story = {
+  args: {
+    secondaryLabel: 'Secondary Label',
+  },
 };
 
-export const InverseBlue = Template.bind({});
-InverseBlue.parameters = {
-  backgrounds: { default: 'blue' },
+export const InverseDark: Story = {
+  parameters: {
+    backgrounds: { default: 'dark' },
+  },
+  args: {
+    color: 'inverse',
+  },
 };
-InverseBlue.args = {
-  label: 'Text Field',
-  color: 'inverse',
+
+export const InverseBlue: Story = {
+  parameters: {
+    backgrounds: { default: 'blue' },
+  },
+  args: {
+    color: 'inverse',
+  },
 };
diff --git a/src/components/Toggle/Toggle.stories.tsx b/src/components/Toggle/Toggle.stories.tsx
@@ -1,60 +1,58 @@
-import React from 'react';
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { StoryObj, Meta } from '@storybook/react';
 
 import { Toggle } from './Toggle';
 
-export default {
+const meta: Meta<typeof Toggle> = {
   title: 'Form Components/Toggle',
   component: Toggle,
-  argTypes: {},
-} as ComponentMeta<typeof Toggle>;
-
-const Template: ComponentStory<typeof Toggle> = (args) => <Toggle {...args} />;
-
-export const Default = Template.bind({});
-Default.args = {
-  label: 'Toggle',
+  args: {
+    label: 'Toggle',
+  },
 };
+export default meta;
+type Story = StoryObj<typeof Toggle>;
 
-export const Placement = Template.bind({});
-Placement.args = {
-  label: 'Toggle',
-  placement: 'right',
-};
+export const Default: Story = {};
 
-export const ShowRequiredLabel = Template.bind({});
-ShowRequiredLabel.args = {
-  label: 'Toggle',
-  showRequiredLabel: true,
+export const Placement: Story = {
+  args: {
+    placement: 'right',
+  },
 };
 
-export const Error = Template.bind({});
-Error.args = {
-  label: 'Toggle',
-  hasError: true,
-  errorMessage: 'Error Message',
+export const ShowRequiredLabel: Story = {
+  args: {
+    showRequiredLabel: true,
+  },
 };
 
-export const HelpMessage = Template.bind({});
-HelpMessage.args = {
-  label: 'Toggle',
-  helpMessage: 'Error Message',
+export const Error: Story = {
+  args: {
+    hasError: true,
+    errorMessage: 'Error Message',
+  },
 };
 
-export const InverseDark = Template.bind({});
-InverseDark.parameters = {
-  backgrounds: { default: 'dark' },
-};
-InverseDark.args = {
-  label: 'Toggle',
-  color: 'inverse',
+export const HelpMessage: Story = {
+  args: {
+    helpMessage: 'Error Message',
+  },
 };
 
-export const InverseBlue = Template.bind({});
-InverseBlue.parameters = {
-  backgrounds: { default: 'blue' },
+export const InverseDark: Story = {
+  parameters: {
+    backgrounds: { default: 'dark' },
+  },
+  args: {
+    color: 'inverse',
+  },
 };
-InverseBlue.args = {
-  label: 'Toggle',
-  color: 'inverse',
+
+export const InverseBlue: Story = {
+  parameters: {
+    backgrounds: { default: 'blue' },
+  },
+  args: {
+    color: 'inverse',
+  },
 };
diff --git a/src/components/Tooltip/Tooltip.stories.tsx b/src/components/Tooltip/Tooltip.stories.tsx
@@ -1,22 +1,35 @@
 import React from 'react';
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { StoryObj, Meta } from '@storybook/react';
 
 import { Tooltip } from './Tooltip';
 import { Button } from '../Button';
+import { IconButton } from '../IconButton';
+import { Info } from '@lifeomic/chromicons';
 
-export default {
-  title: 'Components/Tooltip',
+const meta: Meta<typeof Tooltip> = {
   component: Tooltip,
-  argTypes: {},
-} as ComponentMeta<typeof Tooltip>;
+  args: {
+    title: 'Tooltip',
+    children: <Button>Tooltip on hover</Button>,
+  },
+};
+export default meta;
+type Story = StoryObj<typeof Tooltip>;
+
+export const Default: Story = {};
 
-const Template: ComponentStory<typeof Tooltip> = (args) => (
-  <Tooltip {...args}>
-    <Button>Tooltip on hover</Button>
-  </Tooltip>
-);
+export const Children: Story = {
+  args: {
+    children: (
+      <p style={{ width: 'fit-content' }}>Other elements can be children too</p>
+    ),
+    title: 'Like this paragraph',
+  },
+};
 
-export const Default = Template.bind({});
-Default.args = {
-  title: 'Tooltip',
+export const IconChild: Story = {
+  args: {
+    children: <IconButton aria-label="Info icon tooltip" icon={Info} />,
+    title: 'Icons are a common tooltip paradigm',
+  },
 };