@transferwise/components 0.0.0-experimental-58ab0d7 → 0.0.0-experimental-4530892

package/src/button/Button.story.tsx

@@ -1,670 +1,163 @@
 import { Meta, StoryObj } from '@storybook/react';
-import { fn } from '@storybook/test';
-import { Freeze, ArrowRight, Bank } from '@transferwise/icons';
-import { Flag } from '@wise/art';
-import Button from './Button.resolver';
-import type { ButtonProps } from './Button.types';
-import AvatarLayout from '../avatarLayout';
+import { userEvent, within, fn } from '@storybook/test';
 
-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 { ControlType, Priority } from '../common';
+import { storyConfig } from '../test-utils';
 
-/**
- * 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}}`);
-      },
-    },
-  },
-});
+import Button from './Button';
 
-/**
- * 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> = {
+export default {
   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: ['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,
+        value: ['button', 'a'],
       },
     },
   },
-  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'],
-  decorators: [withContainer],
-};
-
-export default meta;
+} satisfies Meta<typeof Button>;
 
 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(),
-    previewIconStart: false,
-    previewIconEnd: false,
-    previewAvatars: 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 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(),
-};
-
-/**
- * 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', 'testId']),
-    ...previewArgTypes,
-  },
-  args: {
-    previewIconStart: false,
-    previewIconEnd: false,
-    previewAvatars: 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', 'testId']),
-    ...previewArgTypes,
-  },
-  args: {
-    previewIconStart: false,
-    previewIconEnd: false,
-    previewAvatars: false,
-  },
-  decorators: [withComponentGrid()],
-};
-
-export const Test: StoryObj<PreviewStoryArgs> = {
-  render: function Render(args: PreviewStoryArgs) {
-    return (
-      <div>
-        <Button
-          v2
-          size="sm"
-          startMedia={<AvatarLayout size={24} avatars={[{ profileName: 'Test Test' }]} />}
-          endMedia={<Bank />}
-        >
-          Button as anchor
-        </Button>
-        <Button
-          v2
-          size="md"
-          startMedia={<AvatarLayout size={24} avatars={[{ profileName: 'Test Test' }]} />}
-          endMedia={<Bank />}
-        >
-          Button as anchor
-        </Button>
-        <Button
-          v2
-          size="lg"
-          startMedia={<AvatarLayout size={24} avatars={[{ profileName: 'Test Test' }]} />}
-          endMedia={<Bank size={24} />}
-        >
-          Button as anchor
-        </Button>
-      </div>
-    );
-  },
-};
-
-/**
- * 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);
+export const Basic: Story = {};
 
-    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,
+export const Focused = storyConfig<Story>(
+  {
+    parameters: {
+      chromatic: {
+        delay: 1000,
+      },
+    },
+    play: async ({ canvasElement }) => {
+      const canvas = within(canvasElement);
+      await userEvent.click(canvas.getByRole('button'));
+    },
   },
-  args: {
-    block: true,
-    previewIconStart: false,
-    previewIconEnd: false,
-    previewAvatars: false,
+  {
+    variants: ['dark'],
   },
-};
-
-/**
- * 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()],
-};
+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'] },
+);
 
 /**
- * Avatars are only supported for `md` size Buttons. <br />
- * [Design documentation](https://wise.design/components/button#accessories)
+ * 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 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>
+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'] },
+);
 
-        <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()],
-};
+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'] },
+);
 
-/**
- * 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(),
-};
+export const SocialMediaMobile = storyConfig<Story>(SocialMedia, {
+  variants: ['default', 'dark', 'rtl', 'mobile'],
+});