@transferwise/components 0.0.0-experimental-28eac06 → 0.0.0-experimental-9b6d886

package/src/button/Button.story.tsx

@@ -1,790 +1,163 @@
 import { Meta, StoryObj } from '@storybook/react';
-import { fn } from '@storybook/test';
-import { Freeze, ArrowRight, ChevronRight } from '@transferwise/icons';
-import { Flag } from '@wise/art';
-import Button from './Button.resolver';
-import type { ButtonProps, ButtonPriority } from './Button.types';
-import { storyConfig } from '../test-utils';
-
-const withContainer = (Story: any) => (
-  <div style={{ display: 'flex', justifyContent: 'center' }}>
-    <Story />
-  </div>
-);
+import { userEvent, within, fn } from '@storybook/test';
 
-/**
- * Used for showing multiple components within a Canvas.
- * @decorator
- */
-const withComponentGrid =
-  (maxWidth = 'auto') =>
-  (Story: any) => (
-    <div
-      style={{
-        width: '100%',
-        placeItems: 'center',
-        justifyContent: 'center',
-        display: 'flex',
-        flexWrap: 'wrap',
-        gap: '2rem',
-        maxWidth,
-      }}
-    >
-      <Story />
-    </div>
-  );
-
-/**
- * Not all stories need access to all controls as it causes unnecessary UI noise.
- */
-const hideControls = (args: string[]) => {
-  const hidden = [
-    'addonStart',
-    'addonEnd',
-    'onClick',
-    'onBlur',
-    'onFocus',
-    'onKeyDown',
-    'onMouseEnter',
-    'onMouseLeave',
-    ...args,
-  ];
-
-  return Object.fromEntries(hidden.map((item) => [item, { table: { disable: true } }]));
-};
-
-/**
- * Convenience controls for previewing rich markup,
- * not otherwise possible via Storybook
- */
-type PreviewStoryArgs = Parameters<typeof Button>[0] & {
-  previewAddonStart: boolean | ButtonProps['addonStart'];
-  previewAddonEnd: boolean | ButtonProps['addonEnd'];
-};
-const previewArgTypes = {
-  previewAddonStart: {
-    control: 'select',
-    options: [
-      'undefined',
-      'icon',
-      'avatar: flag',
-      'avatar: initials',
-      'avatar: icon',
-      'avatar: image',
-      'avatar: double',
-    ],
-    name: 'Preview with `addonStart`',
-    mapping: {
-      undefined,
-      icon: {
-        type: 'icon',
-        value: <Freeze />,
-      },
-      'avatar: flag': {
-        type: 'avatar',
-        value: [{ asset: <Flag code="pl" /> }],
-      },
-      'avatar: initials': {
-        type: 'avatar',
-        value: [{ profileName: 'Jay Jay' }],
-      },
-      'avatar: icon': {
-        type: 'avatar',
-        value: [{ asset: <Freeze /> }],
-      },
-      'avatar: image': {
-        type: 'avatar',
-        value: [{ imgSrc: '../avatar-square-dude.webp' }],
-      },
-      'avatar: double': {
-        type: 'avatar',
-        value: [{ asset: <Flag code="gb" /> }, { imgSrc: '../avatar-square-dude.webp' }],
-      },
-    },
-    table: {
-      category: 'Preview options',
-      type: {
-        summary: undefined,
-      },
-    },
-    description:
-      '**NB:** The `lg` button does not support any addons. `md` button accepts either icons or avatars, while `sm` is restricted to icons only.',
-  },
-  previewAddonEnd: {
-    control: 'boolean',
-    name: 'Preview with `addonEnd`',
-    mapping: {
-      true: { type: 'icon', value: <ArrowRight /> },
-    },
-    description:
-      '**NB:** The `lg` button does not support any addons. `md` and `sm` allow for the use of icons only.',
-    table: {
-      category: 'Preview options',
-      type: {
-        summary: undefined,
-      },
-    },
-  },
-} as const;
-
-const getPropsForPreview = (args: PreviewStoryArgs) => {
-  const { previewAddonStart, previewAddonEnd, ...props } = args as {
-    previewAddonStart: ButtonProps['addonStart'];
-    previewAddonEnd: ButtonProps['addonEnd'];
-    props: typeof Button;
-  };
+import { ControlType, Priority } from '../common';
+import { storyConfig } from '../test-utils';
 
-  return [
-    props,
-    {
-      addonStart: previewAddonStart,
-      addonEnd: previewAddonEnd,
-    },
-  ];
-};
+import Button from './Button';
 
-/**
- * The stories below document the new Button API, which requires `v2` prop to function.  <br />For more details please refer to the [release notes](https://transferwise.atlassian.net/wiki/spaces/DS/pages/3542158737/Button+Updates+New+sizes+Loader+and+Cue) and the [design spec](https://wise.design/components/button). <br />
- * You can still find the old Button documentation under [Legacy Button](?path=/docs/actions-button-legacy--docs)
- *
- *
- */
-const meta: Meta<typeof Button> = {
+export default {
   component: Button,
   title: 'Actions/Button',
-  argTypes: {
-    v2: {
-      table: {
-        readonly: true,
-      },
-      description: 'If set, toggles the new Button API',
-    },
-    size: {
-      type: {
-        name: 'enum',
-        value: ['lg', 'md', 'sm'],
-      },
-      table: {
-        type: {
-          summary: 'ButtonSize',
-        },
-      },
-    },
-    priority: {
-      type: {
-        name: 'enum',
-        value: ['primary', 'secondary', 'tertiary', 'minimal'],
-      },
-      table: {
-        type: {
-          summary: 'ButtonPriority',
-        },
-        defaultValue: { summary: '"primary"' },
-      },
-    },
-    sentiment: {
-      type: {
-        name: 'enum',
-        value: ['default', 'negative'],
-      },
-      table: {
-        type: {
-          summary: 'ButtonSentiment',
-        },
-      },
-    },
-    disabled: {
-      description: 'Toggles the disabled state',
-      table: {
-        defaultValue: { summary: 'false' },
-      },
-    },
-    loading: {
-      description: 'Toggles the loading state',
-      table: {
-        defaultValue: { summary: 'false' },
-      },
-    },
-    block: {
-      table: {
-        defaultValue: { summary: 'false' },
-      },
-    },
-    href: {
-      type: {
-        name: 'string',
-      },
-      description: 'If set, the component will render as an HTML anchor.',
-    },
-    target: {
-      type: {
-        name: 'string',
-      },
-      table: {
-        type: {
-          summary: 'string',
-        },
-      },
-    },
-    addonStart: {
-      control: 'object',
-    },
-    addonEnd: {
-      control: 'object',
-    },
-    type: {
-      control: 'text',
-      table: {
-        type: {
-          summary: 'string',
-        },
-      },
-      description: "Native HTML button's `type` attribute",
-    },
-    htmlType: {
-      table: {
-        disable: true,
-      },
-    },
-  },
   args: {
-    v2: true,
-    size: undefined,
-    priority: undefined,
-    sentiment: undefined,
-    disabled: false,
-    loading: false,
-    block: false,
-    href: undefined,
-    target: undefined,
-    as: undefined,
-    type: undefined,
-    addonStart: undefined,
-    addonEnd: undefined,
-    className: undefined,
     children: 'Button text',
+    loading: false,
     onClick: fn(),
-  },
-  tags: ['autodocs'],
-  decorators: [withContainer],
-  parameters: {
-    docs: {
-      toc: true,
-    },
-  },
-};
-
-export default meta;
-
-type Story = StoryObj<typeof Button>;
-
-export const Playground: StoryObj<PreviewStoryArgs> = {
-  render: function Render(args: PreviewStoryArgs) {
-    const [props, previewProps] = getPropsForPreview(args);
-
-    return <Button {...props} {...previewProps} v2 />;
-  },
-  args: {
     onBlur: fn(),
     onFocus: fn(),
-    onKeyDown: fn(),
-    onMouseEnter: fn(),
-    onMouseLeave: fn(),
-    previewAddonStart: false,
-    previewAddonEnd: false,
   },
   argTypes: {
-    onClick: { table: { disable: true } },
-    onBlur: { table: { disable: true } },
-    onFocus: { table: { disable: true } },
-    onKeyDown: { table: { disable: true } },
-    onMouseEnter: { table: { disable: true } },
-    onMouseLeave: { table: { disable: true } },
-    ...previewArgTypes,
-  },
-};
-
-/**
- * There are two different types of button – default and negative – designed to emphasise the nature of the action. <br />
- * **NB:** Sentiment only applies to `primary` and `secondary` priorities. <br />
- * [Design documentation](https://wise.design/components/button#types)
- */
-export const Sentiment: StoryObj<PreviewStoryArgs> = {
-  render: function Render(args: PreviewStoryArgs) {
-    const [props, previewProps] = getPropsForPreview(args);
-
-    return (
-      <>
-        <Button {...props} {...previewProps} v2>
-          Default Sentiment
-        </Button>
-        <Button {...props} {...previewProps} v2 sentiment="negative">
-          Negative Sentiment
-        </Button>
-        <Button {...props} {...previewProps} v2 priority="secondary">
-          Default Sentiment
-        </Button>
-        <Button {...props} {...previewProps} v2 priority="secondary" sentiment="negative">
-          Negative Sentiment
-        </Button>
-      </>
-    );
-  },
-  argTypes: {
-    ...hideControls(['sentiment', 'priority', 'block', 'href', 'target', 'as', 'children']),
-    ...previewArgTypes,
-  },
-  args: {
-    previewAddonStart: false,
-    previewAddonEnd: false,
-  },
-  decorators: [withComponentGrid('30rem')],
-};
-
-/**
- * Priorities set a visual hierarchy amongst the buttons displayed on the
- * screen to help more important buttons to take precedence over others. <br />
- * [Design documentation](https://wise.design/components/button#priorities)
- */
-export const Priority: StoryObj<PreviewStoryArgs> = {
-  render: function Render(args: PreviewStoryArgs) {
-    const [props, previewProps] = getPropsForPreview(args);
-
-    return (
-      <>
-        <Button {...props} {...previewProps} v2>
-          Primary Priority (default)
-        </Button>
-        <Button {...props} {...previewProps} v2 priority="secondary">
-          Secondary Priority
-        </Button>
-        <Button {...props} {...previewProps} v2 priority="tertiary">
-          Tertiary Priority
-        </Button>
-        <Button {...props} {...previewProps} v2 priority="minimal">
-          Minimal Priority
-        </Button>
-      </>
-    );
-  },
-  argTypes: {
-    ...hideControls(['priority', 'block', 'href', 'target', 'as', 'children']),
-    ...previewArgTypes,
-  },
-  args: {
-    previewAddonStart: false,
-    previewAddonEnd: false,
-  },
-  decorators: [withComponentGrid()],
-};
-
-/**
- * There are three different button sizes – small (`sm`), medium (`md`) and large (`lg`) – each used for different purposes. <br />
- * [Design documentation](https://wise.design/components/button#sizes)
- */
-export const Size: StoryObj<PreviewStoryArgs> = {
-  render: function Render(args: PreviewStoryArgs) {
-    const [props, previewProps] = getPropsForPreview(args);
-
-    return (
-      <>
-        <Button {...props} {...previewProps}>
-          Large button (default)
-        </Button>
-        <Button {...props} {...previewProps} size="md">
-          Medium button
-        </Button>
-        <Button {...props} {...previewProps} size="sm">
-          Small button
-        </Button>
-      </>
-    );
-  },
-  argTypes: {
-    ...hideControls(['size', 'block', 'href', 'target', 'as', 'children']),
-    ...previewArgTypes,
-  },
-  args: {
-    previewAddonStart: false,
-    previewAddonEnd: false,
-  },
-  decorators: [withComponentGrid()],
-};
-
-/**
- * A Button rendered as an anchor element.
- */
-export const AsAnchor: StoryObj<PreviewStoryArgs> = {
-  render: function Render(args: PreviewStoryArgs) {
-    const [props, previewProps] = getPropsForPreview(args);
-
-    return (
-      <Button {...props} {...previewProps}>
-        Button as anchor
-      </Button>
-    );
-  },
-  argTypes: {
-    ...hideControls(['block']),
-    ...previewArgTypes,
-  },
-  args: {
-    as: 'a',
-    href: 'https://wise.com',
-    previewAddonStart: false,
-    previewAddonEnd: false,
-    onClick: undefined,
-  },
-};
-
-export const Disabled: StoryObj<PreviewStoryArgs> = {
-  render: function Render(args: PreviewStoryArgs) {
-    const [props, previewProps] = getPropsForPreview(args);
-
-    return (
-      <Button {...props} {...previewProps}>
-        Disabled button
-      </Button>
-    );
-  },
-  argTypes: {
-    ...hideControls(['block']),
-    ...previewArgTypes,
-  },
-  args: {
-    disabled: true,
-    previewAddonStart: false,
-    previewAddonEnd: false,
-  },
-};
-
-export const Loading: StoryObj<PreviewStoryArgs> = {
-  render: function Render(args: PreviewStoryArgs) {
-    const [props, previewProps] = getPropsForPreview(args);
-
-    return (
-      <Button {...props} {...previewProps}>
-        Button as anchor
-      </Button>
-    );
-  },
-  argTypes: {
-    ...hideControls(['block']),
-    ...previewArgTypes,
-  },
-  args: {
-    loading: true,
-    previewAddonStart: false,
-    previewAddonEnd: false,
-  },
-};
-
-/**
- * A Button that takes up the full width of its container (`display: block`).
- */
-export const DisplayBlock: StoryObj<PreviewStoryArgs> = {
-  render: function Render(args: PreviewStoryArgs) {
-    const [props, previewProps] = getPropsForPreview(args);
-
-    return (
-      <Button {...props} {...previewProps}>
-        Full-width button
-      </Button>
-    );
-  },
-  argTypes: {
-    ...hideControls(['href', 'target', 'priority', 'sentiment', 'as', 'disabled', 'children']),
-    ...previewArgTypes,
-  },
-  args: {
-    block: true,
-    previewAddonStart: false,
-    previewAddonEnd: false,
-  },
-};
-
-/**
- * Icons are only supported for `sm` and `md` size Buttons. <br />
- * [Design documentation](https://wise.design/components/button#accessories)
- */
-export const WithIcons: StoryObj<PreviewStoryArgs> = {
-  render: function Render(args: PreviewStoryArgs) {
-    const [props] = getPropsForPreview(args);
-
-    return (
-      <>
-        <Button {...props} v2 addonStart={{ type: 'icon', value: <Freeze /> }}>
-          With start icon
-        </Button>
-
-        <Button {...props} v2 addonEnd={{ type: 'icon', value: <ArrowRight /> }}>
-          With end icon
-        </Button>
-
-        <Button
-          {...props}
-          v2
-          addonStart={{ type: 'icon', value: <Freeze /> }}
-          addonEnd={{ type: 'icon', value: <ArrowRight /> }}
-        >
-          With both icons
-        </Button>
-      </>
-    );
-  },
-  argTypes: {
-    ...hideControls(['href', 'target', 'priority', 'sentiment', 'as', 'disabled', 'children']),
-  },
-  args: {
-    size: 'md',
-  },
-  parameters: {
-    docs: {
-      source: {
-        code: `
-<>
-  <Button v2 size="md" addonStart={{ type: 'icon', value: <Freeze /> }}>
-    With start icon
-  </Button>
-  
-  <Button v2 size="md" addonEnd={{ type: 'icon', value: <ArrowRight /> }}>
-    With end icon
-  </Button>
-  
-  <Button v2 size="md" addonStart={{ type: 'icon', value: <Freeze /> }} addonEnd={{ type: 'icon', value: <ArrowRight /> }}>
-    With both icons
-  </Button>
-</>
-        `,
+    as: {
+      type: {
+        name: 'enum',
+        value: ['button', 'a'],
       },
     },
   },
-  decorators: [withComponentGrid()],
-};
-
-/**
- * Avatars are only supported for `md` size Buttons. <br />
- * [Design documentation](https://wise.design/components/button#accessories)
- */
-export const WithAvatars: StoryObj<PreviewStoryArgs> = {
-  render: function Render(args: PreviewStoryArgs) {
-    const [props] = getPropsForPreview(args);
-
-    return (
-      <>
-        <Button {...props} v2 addonStart={{ type: 'avatar', value: [{ asset: <Freeze /> }] }}>
-          With single avatar
-        </Button>
-
-        <Button
-          {...props}
-          v2
-          addonStart={{
-            type: 'avatar',
-            value: [{ asset: <Flag code="br" /> }, { asset: <Flag code="jp" /> }],
-          }}
-        >
-          With double avatar
-        </Button>
-
-        <Button {...props} v2 addonStart={{ type: 'avatar', value: [{ profileName: 'John Doe' }] }}>
-          With initials
-        </Button>
-
-        <Button
-          {...props}
-          v2
-          addonStart={{ type: 'avatar', value: [{ imgSrc: '../avatar-square-dude.webp' }] }}
-        >
-          With an image
-        </Button>
-      </>
-    );
-  },
-  argTypes: hideControls(['href', 'target', 'priority', 'sentiment', 'as', 'disabled', 'children']),
-  args: {
-    size: 'md',
-  },
-  parameters: {
-    docs: {
-      source: {
-        code: `
-<>
-  <Button 
-    v2 
-    size="md" 
-    addonStart={{ 
-      type: 'avatar', 
-      value: [{ asset: <Freeze /> }]
-    }}
-  >
-    With single avatar
-  </Button>
+  tags: ['autodocs'],
+} satisfies Meta<typeof Button>;
 
-  <Button 
-    v2 
-    size="md" 
-    addonStart={{ 
-      type: 'avatar', 
-      value: [{ asset: <Flag code="br" /> }, { asset: <Flag code="jp" /> }]
-    }}
-  >
-    With double avatar
-  </Button>
+type Story = StoryObj<typeof Button>;
 
-  <Button 
-    v2 
-    size="md" 
-    addonStart={{ 
-      type: 'avatar', 
-      value: [{ profileName: 'John Doe' }]
-    }}
-  >
-    With initials
-  </Button>
+export const Basic: Story = {};
 
-  <Button 
-    v2 
-    size="md" 
-    addonStart={{ 
-      type: 'avatar', 
-      value: [{ imgSrc: '../avatar-square-dude.webp' }]
-    }}
-  >
-    With image Avatar
-  </Button>
-</>
-        `,
+export const Focused = storyConfig<Story>(
+  {
+    parameters: {
+      chromatic: {
+        delay: 1000,
       },
     },
+    play: async ({ canvasElement }) => {
+      const canvas = within(canvasElement);
+      await userEvent.click(canvas.getByRole('button'));
+    },
   },
-  decorators: [withComponentGrid()],
-};
-
-const buttonPriorities = ['primary', 'secondary', 'tertiary', 'minimal'] as const;
-const buttonSizes = ['sm', 'md', 'lg'] as const;
+  {
+    variants: ['dark'],
+  },
+);
 
-export const AllVariants = storyConfig(
+export const Variants = storyConfig<Story>(
   {
-    tags: ['!autodocs'],
-    parameters: {
-      padding: '0',
-    },
-    render: () => (
-      <div
-        className="button-variants"
-        style={{ display: 'flex', flexWrap: 'wrap', gap: '16px', maxWidth: '1200px' }}
-      >
-        {buttonPriorities.map((priority) =>
-          buttonSizes.map((size) => (
-            <div
-              key={`${priority}-default-${size}`}
-              style={{ flex: '1 0 30%', marginBottom: '16px', justifyContent: 'space-between' }}
-            >
-              <Button
-                v2
-                priority={priority as ButtonPriority}
-                size={size}
-                addonStart={{ type: 'avatar', value: [{ asset: <Freeze /> }] }}
-                addonEnd={{ type: 'icon', value: <ArrowRight /> }}
-                block
-                href="https://wise.com"
-                target="_blank"
-              >
-                {`${priority} default ${size}`}
-              </Button>
-              <Button
-                className="m-t-1 m-b-1"
-                v2
-                priority={priority as ButtonPriority}
-                size={size}
-                addonStart={{
-                  type: 'avatar',
-                  value: [{ asset: <Freeze /> }, { asset: <Freeze /> }],
-                }}
-                addonEnd={{ type: 'icon', value: <ArrowRight /> }}
-                block
-                disabled
-              >
-                {`${priority} default ${size} Disabled`}
-              </Button>
-              <Button
-                v2
-                priority={priority as ButtonPriority}
-                size={size}
-                addonStart={{ type: 'avatar', value: [{ asset: <Freeze /> }] }}
-                addonEnd={{ type: 'icon', value: <ArrowRight /> }}
-                block
-                loading
-              >
-                {`${priority} default ${size} Loading`}
-              </Button>
+    render: (args) => {
+      return (
+        <>
+          <div className="m-b-2">
+            <div className="title-4 m-b-1">Accent</div>
+            <div className="d-flex flex-wrap" style={{ gap: 'var(--size-16)' }}>
+              <Button {...args} priority={Priority.PRIMARY} type={ControlType.ACCENT} />
+              <Button {...args} priority={Priority.SECONDARY} type={ControlType.ACCENT} />
+              <Button {...args} priority={Priority.TERTIARY} type={ControlType.ACCENT} />
             </div>
-          )),
-        )}
-        {['primary', 'secondary'].map((priority) =>
-          buttonSizes.map((size) => (
-            <div
-              key={`${priority}-negative-${size}`}
-              style={{ flex: '1 0 30%', marginBottom: '16px', justifyContent: 'space-between' }}
-            >
-              <Button
-                v2
-                sentiment="negative"
-                priority={priority as ButtonPriority}
-                size={size}
-                addonEnd={{ type: 'icon', value: <ChevronRight /> }}
-                addonStart={{ type: 'avatar', value: [{ asset: <Freeze /> }] }}
-                block
-                href="https://wise.com"
-                target="_blank"
-              >
-                {`${priority} negative ${size}`}
-              </Button>
-              <Button
-                className="m-t-1 m-b-1"
-                v2
-                sentiment="negative"
-                priority={priority as ButtonPriority}
-                size={size}
-                addonEnd={{ type: 'icon', value: <ChevronRight /> }}
-                addonStart={{ type: 'avatar', value: [{ asset: <Freeze /> }] }}
-                block
-                disabled
-              >
-                {`${priority} negative ${size} Disabled`}
-              </Button>
-              <Button
-                v2
-                sentiment="negative"
-                priority={priority as ButtonPriority}
-                size={size}
-                addonEnd={{ type: 'icon', value: <ChevronRight /> }}
-                addonStart={{ type: 'avatar', value: [{ asset: <Freeze /> }] }}
-                block
-                loading
-              >
-                {`${priority} negative ${size} Loading`}
-              </Button>
+          </div>
+          <div className="m-b-2">
+            <div className="title-4 m-b-1">Positive</div>
+            <div className="d-flex flex-wrap" style={{ gap: 'var(--size-16)' }}>
+              <Button {...args} priority={Priority.PRIMARY} type={ControlType.POSITIVE} />
+              <Button {...args} priority={Priority.SECONDARY} type={ControlType.POSITIVE} />
             </div>
-          )),
-        )}
-      </div>
-    ),
+          </div>
+          <div className="m-b-2">
+            <div className="title-4 m-b-1">Negative</div>
+            <div className="d-flex flex-wrap" style={{ gap: 'var(--size-16)' }}>
+              <Button {...args} priority={Priority.PRIMARY} type={ControlType.NEGATIVE} />
+              <Button {...args} priority={Priority.SECONDARY} type={ControlType.NEGATIVE} />
+            </div>
+          </div>
+          <div className="m-b-2">
+            <div className="title-4 m-b-1">Disabled</div>
+            <div className="d-flex flex-wrap" style={{ gap: 'var(--size-16)' }}>
+              <Button {...args} priority={Priority.PRIMARY} disabled />
+              <Button {...args} priority={Priority.SECONDARY} disabled />
+              <Button {...args} priority={Priority.TERTIARY} disabled />
+            </div>
+          </div>
+        </>
+      );
+    },
   },
-  { variants: ['default', 'dark', 'bright-green', 'forest-green', 'rtl'] },
+  { variants: ['default', 'dark', 'rtl'] },
 );
 
-export const AccessibilityAddons: Story = {
-  args: {
-    v2: true,
-    addonStart: {
-      type: 'avatar',
-      value: [{ asset: <Flag code="br" /> }, { asset: <Flag code="jp" /> }],
-    },
-    'aria-label': 'Convert Real to Yen',
-    children: 'Convert',
-    size: 'md',
-  },
-  tags: ['!autodocs', '!dev'],
-};
+/**
+ * The purpose of the `loading` mode is to convey a message to the
+ * user that some asynchronous process has been triggered, likely
+ * in response to their previous action.
+ *
+ * Although it carries some similarities with the `disabled` mode
+ * (users cannot activate a loading button), it's not hidden from
+ * the keyboard and assistive tech users (users can focus on it,
+ * and it's announced by screen readers), and is also much more
+ * accessible to sighted users due to its default, high contrast.
+ */
+export const Loading = storyConfig<Story>(
+  {
+    render: (args) => {
+      return (
+        <div className="d-flex flex-wrap" style={{ gap: 'var(--size-16)' }}>
+          <Button {...args} loading priority={Priority.PRIMARY} />
+          <Button {...args} loading priority={Priority.SECONDARY} />
+          <Button {...args} loading priority={Priority.TERTIARY} />
+          <Button {...args} loading priority={Priority.PRIMARY} type={ControlType.NEGATIVE} />
+          <Button {...args} loading priority={Priority.SECONDARY} type={ControlType.NEGATIVE} />
+        </div>
+      );
+    },
+    args: {
+      loading: true,
+    },
+  },
+  { variants: ['default', 'dark', 'rtl'] },
+);
+
+export const SocialMedia = storyConfig<Story>(
+  {
+    render: () => {
+      return (
+        <>
+          <div className="m-b-2">
+            <button type="button" className="btn btn-google">
+              Login with Google
+            </button>
+          </div>
+          <div className="m-b-2">
+            <button type="button" className="btn btn-facebook">
+              Login with Facebook
+            </button>
+          </div>
+          <div className="m-b-2">
+            <button type="button" className="btn btn-lg btn-facebook">
+              Large Button
+            </button>
+          </div>
+          <div className="m-b-2">
+            <button type="button" className="btn btn-block btn-facebook">
+              Block Button
+            </button>
+          </div>
+          <div className="m-b-2">
+            <button type="button" className="btn btn-lg btn-block btn-facebook">
+              Large Block Button
+            </button>
+          </div>
+        </>
+      );
+    },
+  },
+  { variants: ['default', 'dark', 'rtl'] },
+);
+
+export const SocialMediaMobile = storyConfig<Story>(SocialMedia, {
+  variants: ['default', 'dark', 'rtl', 'mobile'],
+});