From 18acc3b861fa14ecda043b17668ec6426bff8d13 Mon Sep 17 00:00:00 2001
From: Sam <samantha.aran@lifeomic.com>
Date: Tue, 29 Aug 2023 14:35:53 -0700
Subject: [PATCH] add stories

---
 .../PercentFormatField.stories.tsx            | 32 +++++++++++++++++++
 .../PhoneNumberFormatField.stories.tsx        |  3 +-
 .../NumberFormat/PriceFormatField.stories.tsx | 32 +++++++++++++++++++
 .../UnitNumberFormatField.stories.tsx         | 32 +++++++++++++++++++
 4 files changed, 98 insertions(+), 1 deletion(-)

diff --git a/src/components/NumberFormat/PercentFormatField.stories.tsx b/src/components/NumberFormat/PercentFormatField.stories.tsx
index fbc136fd..ac615f9b 100644
--- 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
index 8f574ee2..0ac36ae3 100644
--- 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
index e41a3470..23ea1873 100644
--- 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
index 40afc670..383dc3eb 100644
--- 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' },