@transferwise/components 46.167.0 → 46.168.0

package/src/Snackbar/SnackbarProvider.tsx

@@ -1,33 +0,0 @@
-import { useMemo, useState } from 'react';
-
-import SnackbarPortal, { SnackbarProps } from './Snackbar';
-import { SnackbarContext } from './SnackbarContext';
-
-export interface SnackbarProviderProps {
-  timeout?: number;
-  children?: React.ReactNode;
-}
-
-export default function SnackbarProvider({ timeout = 4500, children }: SnackbarProviderProps) {
-  const [state, setState] = useState<Omit<SnackbarProps, 'timeout'>>({
-    text: '',
-    timestamp: 0,
-  });
-  const { action, text, timestamp } = state;
-
-  return (
-    <SnackbarContext.Provider
-      value={useMemo(
-        () => ({
-          createSnackbar: ({ action, text }) => {
-            setState({ action, text, timestamp: Date.now() });
-          },
-        }),
-        [],
-      )}
-    >
-      <SnackbarPortal action={action} text={text} timestamp={timestamp} timeout={timeout} />
-      {children}
-    </SnackbarContext.Provider>
-  );
-}

package/src/Snackbar/_stories/Snackbar.story.tsx

@@ -1,89 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-webpack5';
-import { fn, userEvent, within } from 'storybook/test';
-
-import { wait } from '../../test-utils/wait';
-import {
-  createSandboxStory,
-  globalScope,
-} from '../../../.storybook/components/sandbox/SandboxEditor';
-import Button from '../../Button';
-import { Snackbar } from '../Snackbar';
-import { SnackbarConsumer } from '../SnackbarContext';
-import SnackbarProvider from '../SnackbarProvider';
-
-const meta: Meta = {
-  component: Snackbar,
-  title: 'Prompts/Snackbar',
-};
-export default meta;
-
-export const Sandbox = createSandboxStory({
-  code: `<SnackbarProvider>
-  <SnackbarConsumer>
-    {({ createSnackbar }) => (
-      <Button v2 size="md"
-        onClick={() =>
-          createSnackbar({
-            text: <span>Transfer completed successfully</span>,
-            action: {
-              label: 'View',
-              onClick: () => console.log('View clicked'),
-            },
-          })
-        }
-      >
-        Show Snackbar
-      </Button>
-    )}
-  </SnackbarConsumer>
-</SnackbarProvider>`,
-  scope: globalScope,
-});
-
-export const Basic: StoryObj = {
-  parameters: {
-    docs: {
-      source: {
-        type: 'code',
-        transform: async (src = '') => {
-          const match = /(function Render\(\).*?)(,\s+play:\s+async)/s.exec(src);
-          return match?.[1] || src;
-        },
-      },
-    },
-    source: {
-      type: 'code',
-    },
-  },
-  render: function Render() {
-    return (
-      <SnackbarProvider>
-        <SnackbarConsumer>
-          {({ createSnackbar }) => {
-            return (
-              <Button
-                block
-                onClick={() => {
-                  createSnackbar({
-                    action: {
-                      label: 'View',
-                      onClick: fn(),
-                    },
-                    text: <span>Some text</span>,
-                  });
-                }}
-              >
-                Show Snackbar
-              </Button>
-            );
-          }}
-        </SnackbarConsumer>
-      </SnackbarProvider>
-    );
-  },
-  play: async ({ canvasElement }) => {
-    await wait(0);
-    const canvas = within(canvasElement);
-    await userEvent.click(canvas.getByRole('button'));
-  },
-};

package/src/Snackbar/_stories/Snackbar.test.story.tsx

@@ -1,139 +0,0 @@
-import { userEvent, within, expect } from 'storybook/test';
-import { action } from 'storybook/actions';
-import { withVariantConfig } from '../../../.storybook/helpers';
-import { lorem20 } from '../../test-utils';
-import { wait } from '../../test-utils/wait';
-import Button from '../../Button';
-import { Snackbar, type SnackbarProps } from '../Snackbar';
-import { SnackbarConsumer } from '../SnackbarContext';
-import SnackbarProvider from '../SnackbarProvider';
-
-export default {
-  title: 'Prompts/Snackbar/Tests',
-  component: Snackbar,
-  argTypes: {},
-  tags: ['!autodocs', '!manifest'],
-};
-
-const launchSnackbar = async (canvasElement: HTMLElement) => {
-  await wait(0);
-  const canvas = within(canvasElement);
-  await userEvent.click(canvas.getByRole('button'));
-};
-
-type Args = Partial<SnackbarProps> & {
-  extraContext: React.ReactNode;
-  timeout: number;
-};
-
-const TIMEOUT = 10000000;
-
-const Default = {
-  args: {
-    timeout: TIMEOUT,
-  } as Args,
-  play: async ({ canvasElement }: { canvasElement: HTMLElement }) => {
-    await launchSnackbar(canvasElement);
-  },
-  render: (args: Args) => {
-    return (
-      <SnackbarProvider timeout={args.timeout}>
-        <SnackbarConsumer>
-          {({ createSnackbar }) => (
-            <>
-              <Button
-                v2
-                block
-                onClick={() => {
-                  createSnackbar({
-                    action: {
-                      label: 'View',
-                      onClick: () => action('View button clicked.'),
-                    },
-                    text: <span>Some text</span>,
-                  });
-                }}
-              >
-                Show Snackbar
-              </Button>
-              {args.extraContext}
-            </>
-          )}
-        </SnackbarConsumer>
-      </SnackbarProvider>
-    );
-  },
-};
-
-export const Basic = {
-  ...Default,
-  args: {
-    ...Default.args,
-  },
-};
-
-export const Mobile = {
-  ...Default,
-  args: {
-    ...Default.args,
-  },
-  ...withVariantConfig(['mobile'], Default),
-};
-
-const switchToDarkMode = async (context: { canvasElement: HTMLElement }) => {
-  await Default.play(context);
-
-  // the snackbar is outside the storybook dom so dark mode doesn't apply
-  const body = document.querySelector('div.np-theme-personal');
-  if (body) {
-    body.setAttribute('class', 'np-theme-personal--dark');
-  }
-  const snackbar = document.querySelector('div.snackbar');
-  if (snackbar) {
-    snackbar.setAttribute('class', 'snackbar np-theme-personal--dark');
-  }
-};
-
-export const DarkMode = {
-  ...Default,
-  args: {
-    ...Default.args,
-  },
-  play: switchToDarkMode,
-  ...withVariantConfig(['dark'], Default),
-};
-
-export const Zoom400 = {
-  ...Default,
-  args: {
-    ...Default.args,
-    extraContext: (
-      <div className="p-t-3">
-        Snackbar isn&#39;t transparent (I&#39;m going to make this text very long so that it will
-        fill up the entire page and go behind the snackbar. This way, when you look at it you will
-        easily be able to tell if the snackbar is transparent and recognize the bug because we
-        don&#39;t want it to be transparent. Transparent is bad. When we first did rebrand we had a
-        lot of problems with transparencies. {lorem20}
-      </div>
-    ),
-  },
-  ...withVariantConfig(['400%'], Default),
-};
-
-/**
- * Snackbar is only shown once even if trigger is clicked many times
- */
-export const MultipleClicks = {
-  ...Default,
-  args: {
-    ...Default.args,
-  },
-  play: async ({ canvasElement }: { canvasElement: HTMLElement }) => {
-    const canvas = within(canvasElement);
-    for (let i = 0; i < 8; i += 1) {
-      await userEvent.click(canvas.getByRole('button'));
-    }
-
-    await expect(within(document.body).getAllByRole('alert')).toHaveLength(1);
-  },
-};