@transferwise/components 0.0.0-experimental-75fc27b → 0.0.0-experimental-8a932bb

package/src/button/Button.story.tsx

@@ -1,163 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { userEvent, within, fn } from '@storybook/test';
-
-import { ControlType, Priority } from '../common';
-import { storyConfig } from '../test-utils';
-
-import Button from './Button';
-
-export default {
-  component: Button,
-  title: 'Actions/Button',
-  args: {
-    children: 'Button text',
-    loading: false,
-    onClick: fn(),
-    onBlur: fn(),
-    onFocus: fn(),
-  },
-  argTypes: {
-    as: {
-      type: {
-        name: 'enum',
-        value: ['button', 'a'],
-      },
-    },
-  },
-  tags: ['autodocs'],
-} satisfies Meta<typeof Button>;
-
-type Story = StoryObj<typeof Button>;
-
-export const Basic: Story = {};
-
-export const Focused = storyConfig<Story>(
-  {
-    parameters: {
-      chromatic: {
-        delay: 1000,
-      },
-    },
-    play: async ({ canvasElement }) => {
-      const canvas = within(canvasElement);
-      await userEvent.click(canvas.getByRole('button'));
-    },
-  },
-  {
-    variants: ['dark'],
-  },
-);
-
-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'] },
-);
-
-/**
- * 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'],
-});