add stories

lifeomic · Aug 29, 2023 · 18acc3b · 18acc3b
1 parent c513011
commit 18acc3b
Show file tree

Hide file tree

Showing 4 changed files with 98 additions and 1 deletion.
diff --git a/src/components/NumberFormat/PercentFormatField.stories.tsx b/src/components/NumberFormat/PercentFormatField.stories.tsx
@@ -1,6 +1,8 @@
+import React from 'react';
 import { StoryObj, Meta } from '@storybook/react';
 
 import { PercentFormatField } from './UnitNumberFormatField';
+import { Apple, HelpCircle, TrendingUp } from '@lifeomic/chromicons';
 
 const meta: Meta<typeof PercentFormatField> = {
   title: 'Form Components/NumberFormat/PercentFormatField',
@@ -33,6 +35,36 @@ export const Max: Story = {
   },
 };
 
+export const Adornments: Story = {
+  args: {
+    startAdornment: <Apple />,
+    endAdornment: <TrendingUp />,
+  },
+};
+
+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',
+  },
+};
+
+export const RequiredAndError: Story = {
+  args: {
+    hasError: true,
+    showRequiredLabel: true,
+    errorMessage: 'This is required',
+  },
+};
+
 export const InverseDark: Story = {
   parameters: {
     backgrounds: { default: 'dark' },

diff --git a/src/components/NumberFormat/PhoneNumberFormatField.stories.tsx b/src/components/NumberFormat/PhoneNumberFormatField.stories.tsx
@@ -23,9 +23,10 @@ export const Placeholder: Story = {
   },
 };
 
-export const Error: Story = {
+export const RequiredAndError: Story = {
   args: {
     hasError: true,
+    showRequiredLabel: true,
     errorMessage: 'This is required',
   },
 };

diff --git a/src/components/NumberFormat/PriceFormatField.stories.tsx b/src/components/NumberFormat/PriceFormatField.stories.tsx
@@ -1,6 +1,8 @@
+import React from 'react';
 import { StoryObj, Meta } from '@storybook/react';
 
 import { PriceFormatField } from './UnitNumberFormatField';
+import { Apple, HelpCircle, TrendingUp } from '@lifeomic/chromicons';
 
 const meta: Meta<typeof PriceFormatField> = {
   title: 'Form Components/NumberFormat/PriceFormatField',
@@ -33,6 +35,36 @@ export const Max: Story = {
   },
 };
 
+export const Adornments: Story = {
+  args: {
+    startAdornment: <Apple />,
+    endAdornment: <TrendingUp />,
+  },
+};
+
+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',
+  },
+};
+
+export const RequiredAndError: Story = {
+  args: {
+    hasError: true,
+    showRequiredLabel: true,
+    errorMessage: 'This is required',
+  },
+};
+
 export const InverseDark: Story = {
   parameters: {
     backgrounds: { default: 'dark' },

diff --git a/src/components/NumberFormat/UnitNumberFormatField.stories.tsx b/src/components/NumberFormat/UnitNumberFormatField.stories.tsx
@@ -1,6 +1,8 @@
+import React from 'react';
 import { StoryObj, Meta } from '@storybook/react';
 
 import { UnitNumberFormatField } from './UnitNumberFormatField';
+import { Apple, HelpCircle, TrendingUp } from '@lifeomic/chromicons';
 
 const meta: Meta<typeof UnitNumberFormatField> = {
   title: 'Form Components/NumberFormat/UnitNumberFormatField',
@@ -46,6 +48,36 @@ export const PrefixUnits: Story = {
   },
 };
 
+export const Adornments: Story = {
+  args: {
+    startAdornment: <Apple />,
+    endAdornment: <TrendingUp />,
+  },
+};
+
+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',
+  },
+};
+
+export const RequiredAndError: Story = {
+  args: {
+    hasError: true,
+    showRequiredLabel: true,
+    errorMessage: 'This is required',
+  },
+};
+
 export const InverseDark: Story = {
   parameters: {
     backgrounds: { default: 'dark' },