@transferwise/components 0.0.0-experimental-fa9fbe9 → 0.0.0-experimental-00012dd

package/src/prompt/CriticalBanner/CriticalBanner.story.tsx

@@ -1,635 +0,0 @@
-import { useState, useEffect, useRef, type ReactNode } from 'react';
-import { createPortal } from 'react-dom';
-import { Meta, StoryObj, Decorator } from '@storybook/react-webpack5';
-import { fn } from 'storybook/test';
-import { Bank, Briefcase, Star, Travel } from '@transferwise/icons';
-import Button from '../../button';
-import { CriticalBanner, type CriticalBannerProps } from './CriticalBanner';
-import { withVariantConfig } from '../../../.storybook/helpers';
-
-/**
- * **Design guidance**: <a href="https://wise.design/components/critical-banner" target="_blank">wise.design/components/critical-banner</a>
- *
- * Can be controlled or uncontrolled. When `onToggle` is provided, the consumer manages the expanded state via `expanded` and the banner calls `onToggle` when the user clicks the chevron. When `onToggle` is not provided, the banner manages its own expanded state internally and toggles it when the user clicks the chevron.
- */
-const meta = {
-  component: CriticalBanner,
-  title: 'Prompts/CriticalBanner',
-  tags: ['new'],
-  parameters: { docs: { toc: true } },
-  args: {
-    title: 'Your account requires verification',
-    description: 'Please verify your identity to continue using all features.',
-    sentiment: 'negative',
-    expanded: true,
-    action: { label: 'Verify now', onClick: fn() },
-    actionSecondary: undefined,
-    media: undefined,
-    id: undefined,
-    className: undefined,
-    'data-testid': undefined,
-    onToggle: fn(),
-  },
-  argTypes: {
-    sentiment: {
-      control: 'radio',
-      options: ['negative', 'warning', 'neutral', 'success'],
-    },
-    title: {
-      control: 'text',
-      table: { type: { summary: 'ReactNode' } },
-    },
-    description: {
-      control: 'text',
-      table: { type: { summary: 'ReactNode' } },
-    },
-    expanded: { control: 'boolean' },
-    media: {
-      control: false,
-      description: 'Replaces the default Status Icon with a custom image or AvatarView.',
-      table: {
-        type: {
-          summary: 'PromptMedia',
-          detail:
-            '{ imgSrc?: string; avatar?: { imgSrc?: string; profileName?: string; profileType?: string; asset?: ReactNode; badge?: { flagCode: string } }; aria-label?: string }',
-        },
-      },
-    },
-    action: {
-      control: false,
-      table: {
-        type: {
-          summary: 'CriticalBannerAction',
-          detail: '{ label: ReactNode; onClick?: () => void; href?: string; target?: string }',
-        },
-      },
-    },
-    actionSecondary: {
-      control: false,
-      table: {
-        type: {
-          summary: 'CriticalBannerActionSecondary',
-          detail: '{ label: ReactNode; onClick?: () => void; href?: string; target?: string }',
-        },
-      },
-    },
-    id: { table: { category: 'Common' } },
-    className: { table: { category: 'Common' } },
-    'data-testid': { table: { category: 'Common' } },
-    onToggle: { table: { disable: true } },
-  },
-} satisfies Meta<typeof CriticalBanner>;
-
-export default meta;
-type Story = StoryObj<typeof CriticalBanner>;
-
-type PreviewStoryArgs = CriticalBannerProps & {
-  previewMedia: CriticalBannerProps['media'];
-  previewSecondaryAction: boolean;
-};
-
-const MEDIA_OPTIONS: Record<string, CriticalBannerProps['media']> = {
-  undefined,
-  'Custom image': { imgSrc: '../../wise-card.svg' },
-  'Avatar: Photo': { avatar: { imgSrc: '../../avatar-rectangle-fox.webp' } },
-  'Avatar: Business (GB)': {
-    avatar: { profileType: 'BUSINESS', badge: { flagCode: 'GB' } },
-  },
-  'Avatar: Personal (EU)': {
-    avatar: { profileType: 'PERSONAL', badge: { flagCode: 'EU' } },
-  },
-  'Avatar: Bank icon': { avatar: { asset: <Bank /> } },
-  'Avatar: Star icon': { avatar: { asset: <Star /> } },
-  'Avatar: Travel icon': { avatar: { asset: <Travel /> } },
-  'Avatar: Briefcase icon': { avatar: { asset: <Briefcase /> } },
-  'Avatar: Initials': { avatar: { profileName: 'John Doe' } },
-};
-
-const previewArgTypes = {
-  previewMedia: {
-    name: 'Preview with `media`',
-    control: 'select',
-    options: Object.keys(MEDIA_OPTIONS),
-    mapping: MEDIA_OPTIONS,
-    table: { category: 'Storybook Preview' },
-  },
-  previewSecondaryAction: {
-    name: 'Preview with `actionSecondary`',
-    control: 'boolean',
-    table: { category: 'Storybook Preview' },
-  },
-} as const;
-
-/** Renders children inside an iframe that inherits the parent page's stylesheets. */
-function IframeContainer({ width, children }: { width: number; children: ReactNode }) {
-  const iframeRef = useRef<HTMLIFrameElement>(null);
-  const [mountNode, setMountNode] = useState<HTMLElement | null>(null);
-
-  useEffect(() => {
-    const iframe = iframeRef.current;
-    if (!iframe) return;
-
-    const doc = iframe.contentDocument;
-    if (!doc) return;
-
-    doc.head.innerHTML = '';
-    Array.from(document.styleSheets).forEach((sheet) => {
-      try {
-        if (sheet.href) {
-          const link = doc.createElement('link');
-          link.rel = 'stylesheet';
-          link.href = sheet.href;
-          doc.head.appendChild(link);
-        } else if (sheet.cssRules) {
-          const style = doc.createElement('style');
-          style.textContent = Array.from(sheet.cssRules)
-            .map((r) => r.cssText)
-            .join('\n');
-          doc.head.appendChild(style);
-        }
-      } catch {
-        // Skip cross-origin sheets
-      }
-    });
-
-    doc.body.style.margin = '0';
-    setMountNode(doc.body);
-  }, []);
-
-  return (
-    <iframe
-      ref={iframeRef}
-      title={`${width}px preview`}
-      sandbox="allow-same-origin"
-      style={{
-        width,
-        height: 300,
-        border: '1px solid var(--color-border-neutral)',
-        borderRadius: 8,
-        overflow: 'hidden',
-      }}
-    >
-      {mountNode && createPortal(children, mountNode)}
-    </iframe>
-  );
-}
-
-const ContainerDecorator: Decorator = (Story) => (
-  <div
-    style={{
-      width: '100%',
-      display: 'flex',
-      flexDirection: 'column',
-      gap: '1rem',
-    }}
-  >
-    <Story />
-  </div>
-);
-
-/**
- * Interactive playground with all controls.
- */
-export const Playground: StoryObj<PreviewStoryArgs> = {
-  args: {
-    previewMedia: undefined,
-    previewSecondaryAction: true,
-  },
-  argTypes: {
-    ...previewArgTypes,
-  },
-  render: function Render(args: PreviewStoryArgs) {
-    const { previewMedia, previewSecondaryAction, ...props } = args;
-    const [expanded, setExpanded] = useState(args.expanded);
-
-    useEffect(() => {
-      setExpanded(args.expanded);
-    }, [args.expanded]);
-
-    return (
-      <CriticalBanner
-        {...props}
-        expanded={expanded}
-        media={previewMedia}
-        actionSecondary={
-          previewSecondaryAction ? { label: 'Learn more', onClick: fn() } : undefined
-        }
-        onToggle={() => setExpanded(!expanded)}
-      />
-    );
-  },
-};
-
-/**
- * There are four sentiments, with negative being the default.
- */
-export const Sentiments: Story = {
-  decorators: [ContainerDecorator],
-  parameters: {
-    docs: {
-      source: {
-        code: `<CriticalBanner sentiment="negative" ... />
-<CriticalBanner sentiment="warning" ... />
-<CriticalBanner sentiment="neutral" ... />
-<CriticalBanner sentiment="success" ... />`,
-      },
-    },
-  },
-  argTypes: {
-    sentiment: { table: { disable: true } },
-    title: { table: { disable: true } },
-    description: { table: { disable: true } },
-    action: { table: { disable: true } },
-    actionSecondary: { table: { disable: true } },
-    media: { table: { disable: true } },
-    expanded: { table: { disable: true } },
-    onToggle: { table: { disable: true } },
-    id: { table: { disable: true } },
-    className: { table: { disable: true } },
-    'data-testid': { table: { disable: true } },
-  },
-  render: function Render() {
-    return (
-      <>
-        {(['negative', 'warning', 'neutral', 'success'] as const).map((sentiment) => (
-          <CriticalBanner
-            key={sentiment}
-            sentiment={sentiment}
-            title={`This is a critical banner with ${sentiment} sentiment`}
-            description="Complete the required action to regain full access."
-            action={{ label: 'Take action', onClick: fn() }}
-            actionSecondary={{ label: 'Learn more', onClick: fn() }}
-          />
-        ))}
-      </>
-    );
-  },
-};
-
-/**
- * Banners can have just a primary action, both primary and secondary, or no actions at all.
- */
-export const Actions: Story = {
-  decorators: [ContainerDecorator],
-  parameters: {
-    docs: {
-      source: {
-        code: `<CriticalBanner 
-  title="..." 
-/>
-<CriticalBanner 
-  title="..."
-  action={{ label: 'Verify identity', onClick: () => {} }} />
-<CriticalBanner
-  title="..."
-  action={{ label: 'Verify now', onClick: () => {} }}
-  actionSecondary={{ label: 'Contact support', onClick: () => {} }}
-/>`,
-      },
-    },
-  },
-  argTypes: {
-    sentiment: { table: { disable: true } },
-    title: { table: { disable: true } },
-    description: { table: { disable: true } },
-    action: { table: { disable: true } },
-    actionSecondary: { table: { disable: true } },
-    media: { table: { disable: true } },
-    expanded: { table: { disable: true } },
-    onToggle: { table: { disable: true } },
-    id: { table: { disable: true } },
-    className: { table: { disable: true } },
-    'data-testid': { table: { disable: true } },
-  },
-  render: function Render() {
-    return (
-      <>
-        <CriticalBanner sentiment="negative" title="No actions" description="Description" />
-        <CriticalBanner
-          sentiment="warning"
-          title="Primary action only"
-          description="Description"
-          action={{ label: 'Verify identity', onClick: fn() }}
-        />
-        <CriticalBanner
-          sentiment="success"
-          title="Primary and secondary actions"
-          description="Description"
-          action={{ label: 'Verify now', onClick: fn() }}
-          actionSecondary={{ label: 'Contact support', onClick: fn() }}
-        />
-      </>
-    );
-  },
-};
-
-/**
- * Each sentiment has a default status icon. Override it with a custom image or an AvatarView.
- */
-export const MediaTypes: Story = {
-  decorators: [ContainerDecorator],
-  parameters: {
-    docs: {
-      source: {
-        code: `{/* Default — sentiment icon */}
-<CriticalBanner sentiment="neutral" />
-
-{/* Custom image */}
-<CriticalBanner media={{ imgSrc: '/card.svg', 'aria-label': 'Wise card' }} ... />
-
-{/* Avatar with photo */}
-<CriticalBanner media={{ avatar: { imgSrc: '/photo.webp' } }} ... />
-
-{/* Avatar with initials */}
-<CriticalBanner media={{ avatar: { profileName: 'John Doe' } }} ... />
-
-{/* Avatar with custom icon */}
-<CriticalBanner media={{ avatar: { asset: <Bank /> } }} ... />
-
-{/* Business Profile with flag badge */}
-<CriticalBanner media={{ avatar: { profileType: 'BUSINESS', badge: { flagCode: 'GB' } } }} ... />`,
-      },
-    },
-  },
-  argTypes: {
-    sentiment: { table: { disable: true } },
-    title: { table: { disable: true } },
-    description: { table: { disable: true } },
-    action: { table: { disable: true } },
-    actionSecondary: { table: { disable: true } },
-    media: { table: { disable: true } },
-    expanded: { table: { disable: true } },
-    onToggle: { table: { disable: true } },
-    id: { table: { disable: true } },
-    className: { table: { disable: true } },
-    'data-testid': { table: { disable: true } },
-  },
-  render: function Render() {
-    const [expandedStates, setExpandedStates] = useState<Record<string, boolean>>({
-      default: true,
-      image: true,
-      avatarPhoto: true,
-      avatarInitials: true,
-      avatarIcon: true,
-      businessBadge: true,
-      personalBadge: true,
-    });
-
-    const toggle = (key: string) => setExpandedStates((prev) => ({ ...prev, [key]: !prev[key] }));
-
-    return (
-      <>
-        <CriticalBanner
-          sentiment="neutral"
-          title="Default status icon"
-          description="When no media is provided, the sentiment's default icon is displayed."
-          action={{ label: 'Continue', onClick: fn() }}
-          expanded={expandedStates.default}
-          onToggle={() => toggle('default')}
-        />
-        <CriticalBanner
-          sentiment="neutral"
-          title="Custom image"
-          description="Your card has been blocked for security reasons."
-          media={{ imgSrc: '../../wise-card.svg', 'aria-label': 'Wise debit card' }}
-          action={{ label: 'Unblock card', onClick: fn() }}
-          expanded={expandedStates.image}
-          onToggle={() => toggle('image')}
-        />
-        <CriticalBanner
-          sentiment="neutral"
-          title="Avatar with photo"
-          description="The default badge is the status icon for the sentiment."
-          media={{ avatar: { imgSrc: '../../avatar-rectangle-fox.webp' } }}
-          action={{ label: 'Update photo', onClick: fn() }}
-          expanded={expandedStates.avatarPhoto}
-          onToggle={() => toggle('avatarPhoto')}
-        />
-        <CriticalBanner
-          sentiment="neutral"
-          title="Avatar with initials"
-          description="The default badge is the status icon for the sentiment."
-          media={{ avatar: { profileName: 'John Doe' } }}
-          action={{ label: 'Complete profile', onClick: fn() }}
-          expanded={expandedStates.avatarInitials}
-          onToggle={() => toggle('avatarInitials')}
-        />
-        <CriticalBanner
-          sentiment="neutral"
-          title="Avatar with custom icon"
-          description="The default badge is the status icon for the sentiment."
-          media={{ avatar: { asset: <Bank title="Bank account" /> } }}
-          action={{ label: 'Connect bank', onClick: fn() }}
-          expanded={expandedStates.avatarIcon}
-          onToggle={() => toggle('avatarIcon')}
-        />
-        <CriticalBanner
-          sentiment="neutral"
-          title="Business profile with badge"
-          description="Your business account requires additional documentation."
-          media={{ avatar: { profileType: 'BUSINESS', badge: { flagCode: 'GB' } } }}
-          action={{ label: 'Upload documents', onClick: fn() }}
-          expanded={expandedStates.businessBadge}
-          onToggle={() => toggle('businessBadge')}
-        />
-      </>
-    );
-  },
-};
-
-/**
- * The banner can be fully controlled — the parent can pass in the `expanded` state.
- * Clicking the chevron calls `onToggle`, and external buttons can also toggle expansion.
- * We recommend tracking the state that the user has set `expanded` to and keeping it there on page refresh.
- *
- * When the banner is shown on wider screens, it will always be fully expanded.
- */
-export const Expanded: Story = {
-  parameters: {
-    docs: {
-      source: {
-        code: `const [expanded, setExpanded] = useState(true);
-
-<Button onClick={() => setExpanded(!expanded)}>
-  {expanded ? 'Collapse' : 'Expand'}
-</Button>
-
-<CriticalBanner
-  ...
-  expanded={expanded}
-  onToggle={() => setExpanded(!expanded)}
-/>`,
-      },
-    },
-  },
-  argTypes: {
-    sentiment: { table: { disable: true } },
-    title: { table: { disable: true } },
-    description: { table: { disable: true } },
-    action: { table: { disable: true } },
-    actionSecondary: { table: { disable: true } },
-    media: { table: { disable: true } },
-    expanded: { table: { disable: true } },
-    onToggle: { table: { disable: true } },
-    id: { table: { disable: true } },
-    className: { table: { disable: true } },
-    'data-testid': { table: { disable: true } },
-  },
-  render: function Render() {
-    const [expanded, setExpanded] = useState(true);
-
-    return (
-      <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem', width: '100%' }}>
-        <div>
-          <Button v2 onClick={() => setExpanded(!expanded)}>
-            {expanded ? 'Collapse externally' : 'Expand externally'}
-          </Button>
-        </div>
-        <CriticalBanner
-          sentiment="negative"
-          title="Your account requires verification"
-          description="Please verify your identity to continue using all features. This process typically takes 2–3 minutes."
-          action={{ label: 'Verify now', onClick: fn() }}
-          actionSecondary={{ label: 'Learn more', onClick: fn() }}
-          expanded={expanded}
-          onToggle={() => setExpanded(!expanded)}
-        />
-      </div>
-    );
-  },
-};
-
-/**
- * When the banner has no title, the description remains visible when collapsed and
- * is clamped to 2 lines. With a title, only the title is shown when collapsed.
- */
-export const CollapsedBehaviour: Story = {
-  decorators: [ContainerDecorator],
-
-  argTypes: {
-    sentiment: { table: { disable: true } },
-    title: { table: { disable: true } },
-    description: { table: { disable: true } },
-    action: { table: { disable: true } },
-    actionSecondary: { table: { disable: true } },
-    media: { table: { disable: true } },
-    expanded: { table: { disable: true } },
-    onToggle: { table: { disable: true } },
-    id: { table: { disable: true } },
-    className: { table: { disable: true } },
-    'data-testid': { table: { disable: true } },
-  },
-  render: function Render() {
-    const [expanded1, setExpanded1] = useState(false);
-    const [expanded2, setExpanded2] = useState(false);
-
-    return (
-      <>
-        <CriticalBanner
-          sentiment="negative"
-          title="Collapsed with title"
-          description="This description is hidden when collapsed because the title provides enough context."
-          action={{ label: 'Take action', onClick: fn() }}
-          expanded={expanded1}
-          onToggle={() => setExpanded1(!expanded1)}
-        />
-        <CriticalBanner
-          sentiment="warning"
-          description="When there is no title, the description stays visible but is clamped to a maximum of two lines. This ensures the user always sees some context even in the collapsed state, because there is no title to summarise the message."
-          action={{ label: 'Take action', onClick: fn() }}
-          expanded={expanded2}
-          onToggle={() => setExpanded2(!expanded2)}
-        />
-      </>
-    );
-  },
-  ...withVariantConfig(['mobile'], {
-    parameters: {
-      docs: {
-        canvas: { sourceState: 'hidden' },
-      },
-    },
-  }),
-};
-
-/**
- * Above 768px the collapse toggle disappears and the banner is always fully expanded. The buttons are not block displayed.
- * Below 768px the user can collapse and expand the banner and the buttons are displayed as block elements.
- * Eventually the buttons stack.
- */
-export const Responsiveness: Story = {
-  parameters: {
-    docs: {
-      canvas: { sourceState: 'hidden' },
-    },
-  },
-  argTypes: {
-    sentiment: { table: { disable: true } },
-    title: { table: { disable: true } },
-    description: { table: { disable: true } },
-    action: { table: { disable: true } },
-    actionSecondary: { table: { disable: true } },
-    media: { table: { disable: true } },
-    expanded: { table: { disable: true } },
-    onToggle: { table: { disable: true } },
-    id: { table: { disable: true } },
-    className: { table: { disable: true } },
-    'data-testid': { table: { disable: true } },
-  },
-  render: function Render() {
-    return (
-      <div style={{ display: 'flex', gap: 16, alignItems: 'start', minWidth: 1500 }}>
-        {[200, 350, 600].map((width) => (
-          <IframeContainer key={width} width={width}>
-            <CriticalBanner
-              sentiment="warning"
-              title="Your account requires verification"
-              description="Please verify your identity to continue using all features."
-              action={{ label: 'Verify now', onClick: fn() }}
-              actionSecondary={{ label: 'Learn more', onClick: fn() }}
-            />
-          </IframeContainer>
-        ))}
-      </div>
-    );
-  },
-};
-
-/**
- * The text container is capped at 480px for optimal readability, even though
- * the banner itself stretches to the full available width.
- */
-export const ParagraphWidth: Story = {
-  parameters: {
-    docs: {
-      canvas: { sourceState: 'hidden' },
-    },
-  },
-  argTypes: {
-    sentiment: { table: { disable: true } },
-    title: { table: { disable: true } },
-    description: { table: { disable: true } },
-    action: { table: { disable: true } },
-    actionSecondary: { table: { disable: true } },
-    media: { table: { disable: true } },
-    expanded: { table: { disable: true } },
-    onToggle: { table: { disable: true } },
-    id: { table: { disable: true } },
-    className: { table: { disable: true } },
-    'data-testid': { table: { disable: true } },
-  },
-  render: function Render() {
-    const [expanded, setExpanded] = useState(true);
-
-    return (
-      <CriticalBanner
-        sentiment="negative"
-        title="The text container is capped at 480px for optimal readability, even though the banner itself stretches to the full available width."
-        description="To restore access, you'll need to verify your identity. This involves confirming your personal details and uploading a valid government-issued ID. The process typically takes 2–3 minutes, and your account will be restored immediately after successful verification."
-        action={{ label: 'Verify now', onClick: fn() }}
-        expanded={expanded}
-        onToggle={() => setExpanded(!expanded)}
-      />
-    );
-  },
-};