docs(storybook): update phone input (#835)

* docs(storybook): update phone input

* docs(storybook): larrys comments fixed

* feat(phone-input,storybook): add controls

---------

Co-authored-by: matique77 <[email protected]>

packages/storybook/stories/phone-input.mdx

@@ -0,0 +1,38 @@
+import { PhoneInput } from '@equisoft/design-elements-react';
+import { ArgTypes, Canvas, Meta } from '@storybook/blocks';
+import * as PhoneInputStories from './phone-input.stories';
+
+<Meta of={PhoneInputStories} />
+
+# Phone Input
+1. [Definition](#definition)
+2. [Usage](#usage)
+3. [Variants](#variants)
+4. [Properties](#properties)
+
+## Definition
+The phone input allows users to type a phone number in the appropriate regional format.
+<Canvas of={PhoneInputStories.Default} />
+
+## Usage
+### When to use
+- Use for phone number only.
+
+### When not to use
+- Do not use for anything else than a phone number.
+
+## Variants
+### Default
+The Phone Input Default allows users to enter a phone number in a Canadian or US format.
+<Canvas of={PhoneInputStories.Default} />
+
+### Mobile
+<Canvas of={PhoneInputStories.Mobile} />
+
+## Properties
+<ArgTypes of={PhoneInput} />
+
+## References
+1. [https://uxplanet.org/phone-number-field-design-best-practices-23957cbd86d5](https://uxplanet.org/phone-number-field-design-best-practices-23957cbd86d5)
+2. [https://stackoverflow.com/questions/723587/whats-the-longest-possible-worldwide-phone-number-i-should-consider-in-sql-varc](https://stackoverflow.com/questions/723587/whats-the-longest-possible-worldwide-phone-number-i-should-consider-in-sql-varc)
+3. [https://www.nngroup.com/articles/international-sites-requirements/](https://www.nngroup.com/articles/international-sites-requirements/)

packages/storybook/stories/phone-input.stories.tsx

@@ -1,30 +1,35 @@
 import { PhoneInput } from '@equisoft/design-elements-react';
-import { StoryFn as Story } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react';
 import { DesktopDecorator, MobileDecorator } from './utils/device-context-decorator';
 
-export default {
+const PhoneInputMeta: Meta<typeof PhoneInput> = {
     title: 'Components/Phone Input',
     component: PhoneInput,
+    args: {
+        pattern: '(___) ___-____',
+    },
 };
 
-export const Normal: Story = () => (
-    <PhoneInput
-        data-testid='custom-data-test-id'
-        pattern='(___) ___-____'
-        hint='Hint'
-        label='Label'
-    />
-);
-Normal.decorators = [DesktopDecorator];
+export default PhoneInputMeta;
+type Story = StoryObj<typeof PhoneInput>;
 
-export const Mobile: Story = () => <PhoneInput pattern='(___) ___-____' />;
-Mobile.decorators = [MobileDecorator];
-
-export const WithDefaultValue: Story = () => <PhoneInput pattern='(___) ___-____' defaultValue='1234567890' />;
-WithDefaultValue.decorators = [DesktopDecorator];
-
-export const Required: Story = () => <PhoneInput pattern='(___) ___-____' required />;
-Required.decorators = [DesktopDecorator];
+export const Default: Story = {
+    ...PhoneInputMeta,
+    args: {
+        hint: 'Hint',
+        label: 'Label',
+    },
+    decorators: [DesktopDecorator],
+    render: (args) => (
+        <PhoneInput
+            data-testid='custom-data-test-id'
+            /* eslint-disable-next-line react/jsx-props-no-spreading */
+            {...args}
+        />
+    ),
+};
 
-export const Disabled: Story = () => <PhoneInput pattern='(___) ___-____' disabled />;
-Disabled.decorators = [DesktopDecorator];
+export const Mobile: Story = {
+    ...PhoneInputMeta,
+    decorators: [MobileDecorator],
+};