@transferwise/components 0.0.0-experimental-a656242 → 0.0.0-experimental-887f2e6

package/src/button/Button.story.tsx

@@ -1,163 +1,636 @@
 import { Meta, StoryObj } from '@storybook/react';
-import { userEvent, within, fn } from '@storybook/test';
+import { fn } from '@storybook/test';
+import { Freeze, ArrowRight } from '@transferwise/icons';
+import { Flag } from '@wise/art';
+import Button from './Button.resolver';
+import type { ButtonProps } from './Button.types';
 
-import { ControlType, Priority } from '../common';
-import { storyConfig } from '../test-utils';
+const withContainer = (Story: any) => (
+  <div style={{ display: 'flex', justifyContent: 'center' }}>
+    <Story />
+  </div>
+);
+
+/**
+ * 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>
+  );
 
-import Button from './Button';
+/**
+ * Not all stories need access to all controls as it causes unnecessary UI noise.
+ */
+const hideControls = (args: string[]) => {
+  const hidden = [
+    'avatars',
+    'iconStart',
+    'iconEnd',
+    'onClick',
+    'onBlur',
+    'onFocus',
+    'onKeyDown',
+    'onMouseEnter',
+    'onMouseLeave',
+    ...args,
+  ];
+
+  return Object.fromEntries(hidden.map((item) => [item, { table: { disable: true } }]));
+};
+
+/**
+ * SB code generation is often not ideal, rendering confusing source.
+ * This helper makes icon values more understandable for the stories below.
+ */
+const augmentIconProps = ({ start = 'Freeze', end = 'ArrowRight' } = {}) => ({
+  docs: {
+    source: {
+      transform(value: string): string {
+        return value
+          .replace(/iconStart=.*?\}+/g, `iconStart={${start}}`)
+          .replace(/iconEnd=.*?\}+/g, `iconEnd={${end}}`);
+      },
+    },
+  },
+});
 
-export default {
+/**
+ * Convenience controls for previewing rich markup,
+ * not otherwise possible via Storybook
+ */
+type PreviewStoryArgs = Parameters<typeof Button>[0] & {
+  previewAvatars: boolean | ButtonProps['avatars'];
+  previewIconStart: boolean | ButtonProps['iconStart'];
+  previewIconEnd: boolean | ButtonProps['iconEnd'];
+};
+const previewArgTypes = {
+  previewIconStart: {
+    control: 'boolean',
+    name: 'Show with `iconStart`',
+    mapping: {
+      true: Freeze,
+    },
+    table: {
+      category: 'Preview options',
+    },
+  },
+  previewIconEnd: {
+    control: 'boolean',
+    name: 'Show with `iconEnd`',
+    mapping: {
+      true: ArrowRight,
+    },
+    table: {
+      category: 'Preview options',
+    },
+  },
+  previewAvatars: {
+    control: 'select',
+    options: ['undefined', 'flag', 'initials', 'icon', 'image', 'double'],
+    name: 'Show with Avatar',
+    mapping: {
+      undefined,
+      flag: [{ asset: <Flag code="pl" /> }],
+      initials: [{ profileName: 'Jay Jay' }],
+      icon: [{ asset: <Freeze /> }],
+      image: [{ imgSrc: '../avatar-square-dude.webp' }],
+      double: [{ asset: <Flag code="gb" /> }, { imgSrc: '../avatar-square-dude.webp' }],
+    },
+    table: {
+      category: 'Preview options',
+    },
+  },
+} as const;
+
+const getPropsForPreview = (args: PreviewStoryArgs) => {
+  const { previewAvatars, previewIconStart, previewIconEnd, ...props } = args as {
+    previewAvatars: ButtonProps['avatars'];
+    previewIconStart: ButtonProps['iconStart'];
+    previewIconEnd: ButtonProps['iconEnd'];
+    props: typeof Button;
+  };
+
+  return [
+    props,
+    {
+      avatars: previewAvatars,
+      iconStart: previewIconStart,
+      iconEnd: previewIconEnd,
+    },
+  ];
+};
+
+const meta: Meta<typeof Button> = {
   component: Button,
   title: 'Actions/Button',
-  args: {
-    children: 'Button text',
-    loading: false,
-    onClick: fn(),
-    onBlur: fn(),
-    onFocus: fn(),
-  },
   argTypes: {
+    v2: {
+      table: {
+        readonly: true,
+      },
+    },
     as: {
+      table: {
+        defaultValue: { summary: 'button' },
+      },
+    },
+    size: {
       type: {
         name: 'enum',
-        value: ['button', 'a'],
+        value: ['lg', 'md', 'sm'],
+      },
+      table: {
+        type: {
+          summary: 'ButtonSize',
+        },
+      },
+    },
+    priority: {
+      type: {
+        name: 'enum',
+        value: ['primary', 'secondary', 'tertiary', 'minimal'],
+      },
+      table: {
+        type: {
+          summary: 'ButtonPriority',
+        },
+      },
+    },
+    sentiment: {
+      type: {
+        name: 'enum',
+        value: ['default', 'negative'],
+      },
+      table: {
+        type: {
+          summary: 'ButtonSentiment',
+        },
+      },
+    },
+    disabled: {
+      table: {
+        defaultValue: { summary: 'false' },
+      },
+    },
+    loading: {
+      table: {
+        defaultValue: { summary: 'false' },
+      },
+    },
+    block: {
+      table: {
+        defaultValue: { summary: 'false' },
+      },
+    },
+    href: {
+      type: {
+        name: 'string',
+      },
+    },
+    iconStart: {
+      control: 'object',
+    },
+    iconEnd: {
+      control: 'object',
+    },
+    avatars: {
+      control: 'object',
+    },
+    type: {
+      table: {
+        disable: true,
+      },
+    },
+    htmlType: {
+      table: {
+        disable: true,
+      },
+    },
+    'data-testid': {
+      table: {
+        disable: true,
       },
     },
   },
+  args: {
+    v2: true,
+    as: undefined,
+    size: undefined,
+    priority: undefined,
+    sentiment: undefined,
+    disabled: false,
+    loading: false,
+    block: false,
+    iconStart: undefined,
+    iconEnd: undefined,
+    avatars: undefined,
+    href: undefined,
+    target: undefined,
+    type: undefined,
+    testId: undefined,
+    className: '',
+    onClick: fn(),
+    children: 'Button text',
+  },
   tags: ['autodocs'],
-} satisfies Meta<typeof Button>;
+  decorators: [withContainer],
+};
+
+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 />;
+  },
+  args: {
+    onBlur: fn(),
+    onFocus: fn(),
+    onKeyDown: fn(),
+    onMouseEnter: fn(),
+    onMouseLeave: fn(),
+    previewIconStart: false,
+    previewIconEnd: false,
+    previewAvatars: false,
   },
-  {
-    variants: ['dark'],
+  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>
-        </>
-      );
-    },
-  },
-  { variants: ['default', 'dark', 'rtl'] },
-);
+/**
+ * There are two different types of button that, default and negative,
+ * these 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',
+      'testId',
+    ]),
+    ...previewArgTypes,
+  },
+  args: {
+    previewIconStart: false,
+    previewIconEnd: false,
+    previewAvatars: false,
+  },
+  decorators: [withComponentGrid('30rem')],
+  parameters: augmentIconProps(),
+};
 
 /**
- * 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.
+ * 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 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 Priority: StoryObj<PreviewStoryArgs> = {
+  render: function Render(args: PreviewStoryArgs) {
+    const [props, previewProps] = getPropsForPreview(args);
 
-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'] },
-);
+    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', 'testId']),
+    ...previewArgTypes,
+  },
+  args: {
+    previewIconStart: false,
+    previewIconEnd: false,
+    previewAvatars: false,
+  },
+  decorators: [withComponentGrid()],
+};
 
-export const SocialMediaMobile = storyConfig<Story>(SocialMedia, {
-  variants: ['default', 'dark', 'rtl', 'mobile'],
-});
+/**
+ * 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', 'testId']),
+    ...previewArgTypes,
+  },
+  args: {
+    previewIconStart: false,
+    previewIconEnd: false,
+    previewAvatars: 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',
+    previewIconStart: false,
+    previewIconEnd: false,
+    previewAvatars: 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,
+    previewIconStart: false,
+    previewIconEnd: false,
+    previewAvatars: 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,
+    previewIconStart: false,
+    previewIconEnd: false,
+    previewAvatars: 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',
+      'testId',
+    ]),
+    ...previewArgTypes,
+  },
+  args: {
+    block: true,
+    previewIconStart: false,
+    previewIconEnd: false,
+    previewAvatars: 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} iconStart={Freeze}>
+          With start icon
+        </Button>
+
+        <Button {...props} iconEnd={ArrowRight}>
+          With end icon
+        </Button>
+
+        <Button {...props} iconStart={Freeze} iconEnd={ArrowRight}>
+          With both icons
+        </Button>
+      </>
+    );
+  },
+  argTypes: {
+    ...hideControls([
+      'href',
+      'target',
+      'priority',
+      'sentiment',
+      'as',
+      'disabled',
+      'children',
+      'testId',
+    ]),
+  },
+  args: {
+    size: 'md',
+  },
+  parameters: augmentIconProps(),
+  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} avatars={[{ asset: <Freeze /> }]}>
+          With single avatar
+        </Button>
+
+        <Button {...props} avatars={[{ asset: <Flag code="br" /> }, { asset: <Flag code="jp" /> }]}>
+          With double avatar
+        </Button>
+
+        <Button {...props} avatars={[{ profileName: 'John Doe' }]}>
+          With initials
+        </Button>
+
+        <Button {...props} avatars={[{ imgSrc: '../avatar-square-dude.webp' }]}>
+          With an image
+        </Button>
+      </>
+    );
+  },
+  argTypes: hideControls([
+    'href',
+    'target',
+    'priority',
+    'sentiment',
+    'as',
+    'disabled',
+    'children',
+    'testId',
+  ]),
+  args: {
+    size: 'md',
+    avatars: [],
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: `
+<>
+  <Button v2 size="md" avatars={[{ asset: <Freeze /> }]}>
+    With single avatar
+  </Button>
+  
+  <Button v2 size="md" avatars={[{ asset: <Flag code="br" /> }, { asset: <Flag code="jp" /> }]}>
+    With double avatar
+  </Button>
+  
+  <Button v2 size="md" avatars={[{ profileName: 'John Doe' }]}>
+    With initials
+  </Button>
+  
+  <Button v2 size="md" avatars={[{ imgSrc: '../avatar-square-dude.webp' }]}>
+    With image Avatar
+  </Button>
+</>
+        `,
+      },
+    },
+  },
+  decorators: [withComponentGrid()],
+};
+
+/**
+ * Avatar will always take precedence over `iconStart`
+ */
+export const WithAvatarAndIcon: Story = {
+  args: {
+    size: 'md',
+    iconStart: Freeze,
+    avatars: [{ profileName: 'John Doe' }],
+    iconEnd: ArrowRight,
+  },
+  argTypes: hideControls(['href', 'target', 'as', 'children', 'testId']),
+  parameters: augmentIconProps(),
+};