@transferwise/components 46.87.2 → 46.88.1

package/src/button/Button.story.tsx

@@ -1,163 +1,811 @@
 import { Meta, StoryObj } from '@storybook/react';
-import { userEvent, within, fn } from '@storybook/test';
-
-import { ControlType, Priority } from '../common';
+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';
 
-import Button from './Button';
+const withContainer = (Story: any) => (
+  <div style={{ display: 'flex', justifyContent: 'center' }}>
+    <Story />
+  </div>
+);
 
-export default {
+/**
+ * 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;
+  };
+
+  return [
+    props,
+    {
+      addonStart: previewAddonStart,
+      addonEnd: previewAddonEnd,
+    },
+  ];
+};
+
+/**
+ * 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> = {
   component: Button,
   title: 'Actions/Button',
-  args: {
-    children: 'Button text',
-    loading: false,
-    onClick: fn(),
-    onBlur: fn(),
-    onFocus: fn(),
-  },
   argTypes: {
-    as: {
+    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: ['button', 'a'],
+        value: ['primary', 'secondary', 'secondary-neutral', 'tertiary'],
+      },
+      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',
+    onClick: fn(),
+  },
   tags: ['autodocs'],
-} satisfies Meta<typeof Button>;
+  decorators: [withContainer],
+  parameters: {
+    docs: {
+      toc: true,
+    },
+  },
+};
+
+export default meta;
 
 type Story = StoryObj<typeof Button>;
 
-export const Basic: Story = {};
+export const Playground: StoryObj<PreviewStoryArgs> = {
+  render: function Render(args: PreviewStoryArgs) {
+    const [props, previewProps] = getPropsForPreview(args);
 
-export const Focused = storyConfig<Story>(
-  {
-    parameters: {
-      chromatic: {
-        delay: 1000,
-      },
-    },
-    play: async ({ canvasElement }) => {
-      const canvas = within(canvasElement);
-      await userEvent.click(canvas.getByRole('button'));
-    },
+    return <Button {...props} {...previewProps} v2 />;
   },
-  {
-    variants: ['dark'],
+  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,
+  },
+};
 
-export const Variants = storyConfig<Story>(
-  {
-    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>
-          </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 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>
-        </>
-      );
+/**
+ * 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',
+      'children',
+      'type',
+      'className',
+    ]),
+    ...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="secondary-neutral">
+          Secondary neutral Priority
+        </Button>
+        <Button {...props} {...previewProps} v2 priority="tertiary">
+          Tertiary Priority
+        </Button>
+      </>
+    );
+  },
+  argTypes: {
+    ...hideControls(['priority', 'block', 'href', 'target', 'children', 'type', 'className']),
+    ...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', 'children', 'type', 'className']),
+    ...previewArgTypes,
+  },
+  args: {
+    previewAddonStart: false,
+    previewAddonEnd: false,
+  },
+  decorators: [withComponentGrid()],
+};
+
+/**
+ * If `href` prop is set, the component will be automatically rendered as an HTML 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: {
+    href: '#',
+    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',
+      'disabled',
+      'children',
+      'type',
+      'className',
+    ]),
+    ...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', 'sentiment', 'disabled', 'children', 'type', 'className']),
+  },
+  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>
+</>
+        `,
+      },
     },
   },
-  { variants: ['default', 'dark', 'rtl'] },
-);
+  decorators: [withComponentGrid()],
+};
 
 /**
- * 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.
+ * Avatars are only supported by the `md` size Buttons and are only allowed before the label. <br />
+ * [Design documentation](https://wise.design/components/button#accessories)
  */
-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 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',
+    'sentiment',
+    'disabled',
+    'children',
+    'type',
+    'className',
+  ]),
+  args: {
+    size: 'md',
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `
+<>
+  <Button 
+    v2 
+    size="md" 
+    addonStart={{ 
+      type: 'avatar', 
+      value: [{ asset: <Freeze /> }]
+    }}
+  >
+    With single avatar
+  </Button>
+
+  <Button 
+    v2 
+    size="md" 
+    addonStart={{ 
+      type: 'avatar', 
+      value: [{ asset: <Flag code="br" /> }, { asset: <Flag code="jp" /> }]
+    }}
+  >
+    With double avatar
+  </Button>
+
+  <Button 
+    v2 
+    size="md" 
+    addonStart={{ 
+      type: 'avatar', 
+      value: [{ profileName: 'John Doe' }]
+    }}
+  >
+    With initials
+  </Button>
+
+  <Button 
+    v2 
+    size="md" 
+    addonStart={{ 
+      type: 'avatar', 
+      value: [{ imgSrc: '../avatar-square-dude.webp' }]
+    }}
+  >
+    With image Avatar
+  </Button>
+</>
+        `,
+      },
+    },
+  },
+  decorators: [withComponentGrid()],
+};
 
-export const SocialMedia = storyConfig<Story>(
+const buttonPriorities = ['primary', 'secondary', 'secondary-neutral', 'tertiary'] as const;
+const buttonSizes = ['sm', 'md', 'lg'] as const;
+
+export const AllVariants = storyConfig(
   {
-    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'] },
+    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
+              >
+                {`${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>
+            </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
+              >
+                {`${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>
+    ),
+  },
+  { variants: ['default', 'dark', 'bright-green', 'forest-green', 'rtl'] },
 );
 
-export const SocialMediaMobile = storyConfig<Story>(SocialMedia, {
-  variants: ['default', 'dark', 'rtl', 'mobile'],
-});
+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'],
+};