Merge pull request #386 from lifeomic/csf3-numberFormat

Update NumberFormat Components to Storybook CSF3
lifeomic · Aug 30, 2023 · b16ea9b · b16ea9b
2 parents d3499f2 + 18acc3b
commit b16ea9b
Show file tree

Hide file tree

Showing 4 changed files with 216 additions and 148 deletions.
diff --git a/src/components/NumberFormat/PercentFormatField.stories.tsx b/src/components/NumberFormat/PercentFormatField.stories.tsx
@@ -1,59 +1,84 @@
 import React from 'react';
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { StoryObj, Meta } from '@storybook/react';
 
 import { PercentFormatField } from './UnitNumberFormatField';
+import { Apple, HelpCircle, TrendingUp } from '@lifeomic/chromicons';
 
-export default {
+const meta: Meta<typeof PercentFormatField> = {
   title: 'Form Components/NumberFormat/PercentFormatField',
   component: PercentFormatField,
+  args: {
+    label: 'Percent Format Field',
+    value: 50,
+  },
   argTypes: {
     color: {
       control: 'radio',
       options: ['default', 'inverse'],
     },
   },
-} as ComponentMeta<typeof PercentFormatField>;
+};
+export default meta;
+type Story = StoryObj<typeof PercentFormatField>;
 
-const Template: ComponentStory<typeof PercentFormatField> = (args) => (
-  <PercentFormatField {...args} />
-);
+export const Default: Story = {};
 
-export const Default = Template.bind({});
-Default.args = {
-  label: 'Percent Format Field',
-  value: 50,
+export const Min: Story = {
+  args: {
+    min: 20,
+  },
 };
 
-export const Min = Template.bind({});
-Min.args = {
-  label: 'Percent Format Field',
-  value: 50,
-  min: 20,
+export const Max: Story = {
+  args: {
+    max: 70,
+  },
 };
 
-export const Max = Template.bind({});
-Max.args = {
-  label: 'Percent Format Field',
-  value: 50,
-  max: 70,
+export const Adornments: Story = {
+  args: {
+    startAdornment: <Apple />,
+    endAdornment: <TrendingUp />,
+  },
 };
 
-export const InverseDark = Template.bind({});
-InverseDark.parameters = {
-  backgrounds: { default: 'dark' },
+export const TooltipMessage: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Icon and Tooltip Message must be used at the same time for either of them to render.',
+      },
+    },
+  },
+  args: {
+    icon: HelpCircle,
+    tooltipMessage: 'Tooltip Message',
+  },
 };
-InverseDark.args = {
-  label: 'Percent Format Field',
-  value: 50,
-  color: 'inverse',
+
+export const RequiredAndError: Story = {
+  args: {
+    hasError: true,
+    showRequiredLabel: true,
+    errorMessage: 'This is required',
+  },
 };
 
-export const InverseBlue = Template.bind({});
-InverseBlue.parameters = {
-  backgrounds: { default: 'blue' },
+export const InverseDark: Story = {
+  parameters: {
+    backgrounds: { default: 'dark' },
+  },
+  args: {
+    color: 'inverse',
+  },
 };
-InverseBlue.args = {
-  label: 'Percent Format Field',
-  value: 50,
-  color: 'inverse',
+
+export const InverseBlue: Story = {
+  parameters: {
+    backgrounds: { default: 'blue' },
+  },
+  args: {
+    color: 'inverse',
+  },
 };
diff --git a/src/components/NumberFormat/PhoneNumberFormatField.stories.tsx b/src/components/NumberFormat/PhoneNumberFormatField.stories.tsx
@@ -1,9 +1,8 @@
-import React from 'react';
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { StoryObj, Meta } from '@storybook/react';
 
 import { PhoneNumberFormatField } from './PhoneNumberFormatField';
 
-export default {
+const meta: Meta<typeof PhoneNumberFormatField> = {
   title: 'Form Components/NumberFormat/PhoneNumberFormatField',
   component: PhoneNumberFormatField,
   argTypes: {
@@ -12,38 +11,40 @@ export default {
       options: ['default', 'inverse'],
     },
   },
-} as ComponentMeta<typeof PhoneNumberFormatField>;
-
-const Template: ComponentStory<typeof PhoneNumberFormatField> = (args) => (
-  <PhoneNumberFormatField {...args} />
-);
+};
+export default meta;
+type Story = StoryObj<typeof PhoneNumberFormatField>;
 
-export const Default = Template.bind({});
-Default.args = {};
+export const Default: Story = {};
 
-export const Placeholder = Template.bind({});
-Placeholder.args = {
-  placeholder: 'placeholder',
+export const Placeholder: Story = {
+  args: {
+    placeholder: 'placeholder',
+  },
 };
 
-export const Error = Template.bind({});
-Error.args = {
-  hasError: true,
-  errorMessage: 'This is required',
+export const RequiredAndError: Story = {
+  args: {
+    hasError: true,
+    showRequiredLabel: true,
+    errorMessage: 'This is required',
+  },
 };
 
-export const InverseDark = Template.bind({});
-InverseDark.parameters = {
-  backgrounds: { default: 'dark' },
-};
-InverseDark.args = {
-  color: 'inverse',
+export const InverseDark: Story = {
+  parameters: {
+    backgrounds: { default: 'dark' },
+  },
+  args: {
+    color: 'inverse',
+  },
 };
 
-export const InverseBlue = Template.bind({});
-InverseBlue.parameters = {
-  backgrounds: { default: 'blue' },
-};
-InverseBlue.args = {
-  color: 'inverse',
+export const InverseBlue: Story = {
+  parameters: {
+    backgrounds: { default: 'blue' },
+  },
+  args: {
+    color: 'inverse',
+  },
 };
diff --git a/src/components/NumberFormat/PriceFormatField.stories.tsx b/src/components/NumberFormat/PriceFormatField.stories.tsx
@@ -1,59 +1,84 @@
 import React from 'react';
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { StoryObj, Meta } from '@storybook/react';
 
 import { PriceFormatField } from './UnitNumberFormatField';
+import { Apple, HelpCircle, TrendingUp } from '@lifeomic/chromicons';
 
-export default {
+const meta: Meta<typeof PriceFormatField> = {
   title: 'Form Components/NumberFormat/PriceFormatField',
   component: PriceFormatField,
+  args: {
+    label: 'Price Format Field',
+    value: 50,
+  },
   argTypes: {
     color: {
       control: 'radio',
       options: ['default', 'inverse'],
     },
   },
-} as ComponentMeta<typeof PriceFormatField>;
+};
+export default meta;
+type Story = StoryObj<typeof PriceFormatField>;
 
-const Template: ComponentStory<typeof PriceFormatField> = (args) => (
-  <PriceFormatField {...args} />
-);
+export const Default: Story = {};
 
-export const Default = Template.bind({});
-Default.args = {
-  label: 'Price Format Field',
-  value: 50,
+export const Min: Story = {
+  args: {
+    min: 20,
+  },
 };
 
-export const Min = Template.bind({});
-Min.args = {
-  label: 'Price Format Field',
-  value: 50,
-  min: 20,
+export const Max: Story = {
+  args: {
+    max: 70,
+  },
 };
 
-export const Max = Template.bind({});
-Max.args = {
-  label: 'Price Format Field',
-  value: 50,
-  max: 70,
+export const Adornments: Story = {
+  args: {
+    startAdornment: <Apple />,
+    endAdornment: <TrendingUp />,
+  },
 };
 
-export const InverseDark = Template.bind({});
-InverseDark.parameters = {
-  backgrounds: { default: 'dark' },
+export const TooltipMessage: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Icon and Tooltip Message must be used at the same time for either of them to render.',
+      },
+    },
+  },
+  args: {
+    icon: HelpCircle,
+    tooltipMessage: 'Tooltip Message',
+  },
 };
-InverseDark.args = {
-  label: 'Price Format Field',
-  value: 50,
-  color: 'inverse',
+
+export const RequiredAndError: Story = {
+  args: {
+    hasError: true,
+    showRequiredLabel: true,
+    errorMessage: 'This is required',
+  },
 };
 
-export const InverseBlue = Template.bind({});
-InverseBlue.parameters = {
-  backgrounds: { default: 'blue' },
+export const InverseDark: Story = {
+  parameters: {
+    backgrounds: { default: 'dark' },
+  },
+  args: {
+    color: 'inverse',
+  },
 };
-InverseBlue.args = {
-  label: 'Price Format Field',
-  value: 50,
-  color: 'inverse',
+
+export const InverseBlue: Story = {
+  parameters: {
+    backgrounds: { default: 'blue' },
+  },
+  args: {
+    color: 'inverse',
+  },
 };