@transferwise/components 0.0.0-experimental-63c3fc6 → 0.0.0-experimental-5f03867

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

@@ -1,89 +1,417 @@
 import type { Meta, StoryObj } from '@storybook/react-webpack5';
-import { fn, userEvent, within } from 'storybook/test';
+import { fn } from 'storybook/test';
+import { Card } from '@transferwise/icons';
 
-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 type { SnackbarCreationProps } from '../Snackbar.types';
 import SnackbarProvider from '../SnackbarProvider';
+import useSnackbar from '../useSnackbar';
 
-const meta: Meta = {
+const meta = {
   component: Snackbar,
   title: 'Prompts/Snackbar',
-};
+  tags: ['new'],
+  parameters: {
+    docs: {
+      description: {
+        component: `Snackbar provides short feedback after an action, with one optional action of its own.
+Use \`useSnackbar()\` inside \`SnackbarProvider\`. A newer message replaces the current one; Snackbars do not stack.
+
+Change the Playground controls, then click **Show Snackbar** to try them. Keep messages short and plain.
+
+See [Accessibility](?path=/docs/prompts-snackbar-accessibility--docs) for keyboard and announcement behaviour,
+or [Migration](?path=/docs/prompts-snackbar-migration--docs) when updating existing usage.`,
+      },
+    },
+  },
+  argTypes: {
+    text: { control: 'text', table: { type: { summary: 'ReactNode' } } },
+    sentiment: {
+      control: 'select',
+      options: ['neutral', 'success', 'warning', 'negative', 'proposition'],
+    },
+    duration: { control: 'select', options: ['default', 'extended', 'indefinite'] },
+    loading: { control: 'boolean' },
+    media: { control: false, table: { type: { summary: 'ReactNode' } } },
+    action: {
+      control: false,
+      table: {
+        type: {
+          summary: 'SnackbarAction',
+          detail:
+            '{ label: ReactNode; href?: string; target?: string; onClick?: MouseEventHandler }',
+        },
+      },
+    },
+    onDismiss: { control: false },
+    announcementKey: { table: { disable: true } },
+    onDismissRequest: { table: { disable: true } },
+    onExited: { table: { disable: true } },
+    visible: { table: { disable: true } },
+    timeout: { table: { disable: true } },
+    timestamp: { table: { disable: true } },
+    theme: { table: { disable: true } },
+  },
+} satisfies Meta<typeof 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'),
-            },
-          })
+type PreviewStoryArgs = Pick<
+  SnackbarCreationProps,
+  'sentiment' | 'duration' | 'loading' | 'onDismiss'
+> & {
+  text: string;
+  previewMedia: 'default' | 'card';
+  previewActionLabel: string;
+  previewActionHref: string;
+};
+
+function SnackbarTrigger({
+  label = 'Show Snackbar',
+  ...props
+}: SnackbarCreationProps & { label?: string }) {
+  const createSnackbar = useSnackbar();
+
+  return (
+    <Button v2 size="md" onClick={() => createSnackbar(props)}>
+      {label}
+    </Button>
+  );
+}
+
+const onActionClick = fn();
+
+type SnackbarExample = SnackbarCreationProps & { label: string };
+
+function SnackbarExamples({ examples }: { examples: SnackbarExample[] }) {
+  return (
+    <SnackbarProvider>
+      <div className="d-flex flex-wrap" style={{ gap: 'var(--size-8)' }}>
+        {examples.map(({ label, ...props }) => (
+          <SnackbarTrigger key={label} label={label} {...props} />
+        ))}
+      </div>
+    </SnackbarProvider>
+  );
+}
+
+const getExamplesCode = (examples: string, withMedia = false) =>
+  `import { Button, SnackbarProvider, useSnackbar } from '@transferwise/components';
+${withMedia ? "import { Card } from '@transferwise/icons';\n" : ''}
+function App() {
+  return (
+    <SnackbarProvider>
+      <ShowExamples />
+    </SnackbarProvider>
+  );
+}
+
+function ShowExamples() {
+  const createSnackbar = useSnackbar();
+  const examples = ${examples};
+
+  return (
+    <div className="d-flex flex-wrap" style={{ gap: 'var(--size-8)' }}>
+      {examples.map(({ label, ...props }) => (
+        <Button key={label} v2 size="md" onClick={() => createSnackbar(props)}>
+          {label}
+        </Button>
+      ))}
+    </div>
+  );
+}
+
+export default App;`;
+
+const getExampleCode = ({
+  text,
+  sentiment,
+  duration,
+  loading,
+  previewMedia,
+  previewActionLabel,
+  previewActionHref,
+}: PreviewStoryArgs) => `function App() {
+  return (
+    <SnackbarProvider>
+      <ShowSnackbar />
+    </SnackbarProvider>
+  );
+}
+
+function ShowSnackbar() {
+  const createSnackbar = useSnackbar();
+
+  return (
+    <Button v2 size="md" onClick={() => createSnackbar({
+      text: ${JSON.stringify(text)},
+      sentiment: ${JSON.stringify(sentiment)},
+      duration: ${JSON.stringify(duration)},${loading ? '\n      loading: true,' : ''}${previewMedia === 'card' ? '\n      media: <Card aria-hidden />,' : ''}${
+        previewActionLabel
+          ? `
+      action: {
+        label: ${JSON.stringify(previewActionLabel)},${previewActionHref ? `\n        href: ${JSON.stringify(previewActionHref)},` : ''}
+        onClick: () => console.log('Action clicked'),
+      },`
+          : ''
+      }
+      onDismiss: () => console.log('Dismissed'),
+    })}>
+      Show Snackbar
+    </Button>
+  );
+}`;
+
+/** Change the controls, then click Show Snackbar to create a message with those values. */
+export const Playground: StoryObj<PreviewStoryArgs> = {
+  args: {
+    text: 'Changes saved',
+    sentiment: 'success',
+    duration: 'default',
+    loading: false,
+    previewMedia: 'default',
+    previewActionLabel: '',
+    previewActionHref: '',
+    onDismiss: fn(),
+  },
+  argTypes: {
+    previewMedia: {
+      name: 'Preview with custom media',
+      control: 'select',
+      options: ['default', 'card'],
+      table: { category: 'Storybook Preview options' },
+    },
+    previewActionLabel: {
+      name: 'Action label (empty for no action)',
+      control: 'text',
+      table: { category: 'Storybook Preview options' },
+    },
+    previewActionHref: {
+      name: 'Action href (empty for callback only)',
+      control: 'text',
+      table: { category: 'Storybook Preview options' },
+    },
+  },
+  render: ({ previewMedia, previewActionLabel, previewActionHref, ...props }) => (
+    <SnackbarProvider>
+      <SnackbarTrigger
+        {...props}
+        media={previewMedia === 'card' ? <Card aria-hidden /> : undefined}
+        action={
+          previewActionLabel
+            ? {
+                label: previewActionLabel,
+                href: previewActionHref || undefined,
+                onClick: onActionClick,
+              }
+            : undefined
         }
-      >
-        Show Snackbar
-      </Button>
-    )}
-  </SnackbarConsumer>
-</SnackbarProvider>`,
+      />
+    </SnackbarProvider>
+  ),
+  parameters: {
+    chromatic: { disableSnapshot: true },
+    docs: {
+      source: {
+        type: 'dynamic',
+        transform: (source: string, { args }: { args: PreviewStoryArgs }) =>
+          `import { Button, SnackbarProvider, useSnackbar } from '@transferwise/components';\n${args.previewMedia === 'card' ? "import { Card } from '@transferwise/icons';\n" : ''}\n${getExampleCode(args)}\n\nexport default App;`,
+      },
+    },
+  },
+};
+
+export const Sandbox = createSandboxStory({
+  code: getExampleCode({
+    text: 'Card added',
+    sentiment: 'neutral',
+    duration: 'extended',
+    previewMedia: 'card',
+    previewActionLabel: 'View',
+    previewActionHref: '',
+  }),
   scope: globalScope,
 });
 
-export const Basic: StoryObj = {
+/**
+ * Choose a sentiment to match the message. Each has default media; all use polite announcements.
+ * Show one at a time using the buttons below.
+ */
+export const Sentiments: StoryObj = {
+  render: () => (
+    <SnackbarExamples
+      examples={(['neutral', 'success', 'warning', 'negative', 'proposition'] as const).map(
+        (sentiment) => ({ label: sentiment, sentiment, text: 'Your details have been updated' }),
+      )}
+    />
+  ),
   parameters: {
+    controls: { disable: true },
+    chromatic: { disableSnapshot: true },
     docs: {
       source: {
-        type: 'code',
-        transform: async (src = '') => {
-          const match = /(function Render\(\).*?)(,\s+play:\s+async)/s.exec(src);
-          return match?.[1] || src;
-        },
+        code: getExamplesCode(`(['neutral', 'success', 'warning', 'negative', 'proposition'] as const).map(
+    (sentiment) => ({ label: sentiment, sentiment, text: 'Your details have been updated' }),
+  )`),
       },
     },
-    source: {
-      type: 'code',
+  },
+};
+
+/**
+ * Default media follows the sentiment. Override it with a custom icon, including for neutral and
+ * proposition. Wise icons fill the 24×24px slot without an explicit size.
+ */
+export const MediaTypes: StoryObj = {
+  render: () => (
+    <SnackbarExamples
+      examples={[
+        { label: 'Default media', text: 'Changes saved', sentiment: 'success' },
+        { label: 'Custom neutral', text: 'Card added', media: <Card aria-hidden /> },
+        {
+          label: 'Custom proposition',
+          text: 'Your new card is ready',
+          sentiment: 'proposition',
+          media: <Card aria-hidden />,
+        },
+      ]}
+    />
+  ),
+  parameters: {
+    controls: { disable: true },
+    chromatic: { disableSnapshot: true },
+    docs: {
+      source: {
+        code: getExamplesCode(
+          `[
+    { label: 'Default media', text: 'Changes saved', sentiment: 'success' as const },
+    { label: 'Custom neutral', text: 'Card added', media: <Card aria-hidden /> },
+    {
+      label: 'Custom proposition',
+      text: 'Your new card is ready',
+      sentiment: 'proposition' as const,
+      media: <Card aria-hidden />,
+    },
+  ]`,
+          true,
+        ),
+      },
     },
   },
-  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>
-    );
+};
+
+/** Loading replaces media, uses neutral styling and prevents auto-dismiss, regardless of duration. */
+export const Loading: StoryObj<PreviewStoryArgs> = {
+  ...Playground,
+  args: { ...Playground.args, text: 'Uploading document', loading: true },
+};
+
+/**
+ * Add one action: a callback with `onClick`, navigation with `href`, or both.
+ * Activating it requests dismissal after the callback runs.
+ */
+export const WithAction: StoryObj = {
+  render: () => (
+    <SnackbarExamples
+      examples={[
+        {
+          label: 'Callback action',
+          text: 'Transfer deleted',
+          duration: 'extended',
+          action: { label: 'Undo', onClick: onActionClick },
+        },
+        {
+          label: 'Navigation action',
+          text: 'Your transfer is ready',
+          duration: 'extended',
+          action: { label: 'View transfer', href: '/transfers/123', target: '_blank' },
+        },
+      ]}
+    />
+  ),
+  parameters: {
+    controls: { disable: true },
+    chromatic: { disableSnapshot: true },
+    docs: {
+      source: {
+        code: getExamplesCode(`[
+    {
+      label: 'Callback action',
+      text: 'Transfer deleted',
+      duration: 'extended' as const,
+      action: { label: 'Undo', onClick: () => console.log('Undo clicked') },
+    },
+    {
+      label: 'Navigation action',
+      text: 'Your transfer is ready',
+      duration: 'extended' as const,
+      action: { label: 'View transfer', href: '/transfers/123', target: '_blank' },
+    },
+  ]`),
+      },
+    },
   },
-  play: async ({ canvasElement }) => {
-    await wait(0);
-    const canvas = within(canvasElement);
-    await userEvent.click(canvas.getByRole('button'));
+};
+
+/**
+ * `default` lasts 4 seconds, `extended` lasts 6, and `indefinite` has no timer.
+ * Timers begin after entry and pause during hover, focus or a swipe, then resume with the remaining time.
+ */
+export const Durations: StoryObj = {
+  render: () => (
+    <SnackbarExamples
+      examples={[
+        { label: 'Default (4s)', text: 'Changes saved', duration: 'default' },
+        {
+          label: 'Extended (6s)',
+          text: 'Transfer deleted',
+          duration: 'extended',
+          action: { label: 'Undo', onClick: onActionClick },
+        },
+        {
+          label: 'Indefinite',
+          text: 'Uploading document',
+          duration: 'indefinite',
+          loading: true,
+        },
+      ]}
+    />
+  ),
+  parameters: {
+    controls: { disable: true },
+    chromatic: { disableSnapshot: true },
+    docs: {
+      source: {
+        code: getExamplesCode(`[
+    { label: 'Default (4s)', text: 'Changes saved', duration: 'default' as const },
+    {
+      label: 'Extended (6s)',
+      text: 'Transfer deleted',
+      duration: 'extended' as const,
+      action: { label: 'Undo', onClick: () => console.log('Undo clicked') },
+    },
+    {
+      label: 'Indefinite',
+      text: 'Uploading document',
+      duration: 'indefinite' as const,
+      loading: true,
+    },
+  ]`),
+      },
+    },
   },
 };
+
+/**
+ * Dismiss with Escape, the desktop close button, an action, or a downward swipe/drag of at least half
+ * the surface height. `onDismiss` fires after exit; check the Actions panel to see it.
+ */
+export const Dismissal: StoryObj<PreviewStoryArgs> = {
+  ...Playground,
+  args: { ...Playground.args, duration: 'indefinite' },
+};