@transferwise/components 0.0.0-experimental-4d90243 → 0.0.0-experimental-a308934

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

@@ -0,0 +1,476 @@
+import { ReactElement, useState } from 'react';
+import { Meta, StoryObj } from '@storybook/react-webpack5';
+import { fn } from 'storybook/test';
+import { Bank, Star, Travel, Briefcase } from '@transferwise/icons';
+import { lorem10, lorem20 } from '../../test-utils';
+import Button from '../../button';
+import Title from '../../title';
+import { CriticalBanner, type CriticalBannerProps } from './CriticalBanner';
+
+const withComponentGrid =
+  ({ maxWidth = 'auto', gap = '1rem' } = {}) =>
+  (Story: () => ReactElement) => (
+    <div
+      style={{
+        width: '100%',
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: 'flex-start',
+        alignItems: 'flex-start',
+        alignContent: 'flex-start',
+        gap,
+        maxWidth,
+      }}
+    >
+      <Story />
+    </div>
+  );
+
+const meta: Meta<typeof CriticalBanner> = {
+  title: 'Prompts/CriticalBanner',
+  component: CriticalBanner,
+  tags: ['new'],
+  decorators: [withComponentGrid()],
+  args: {
+    title: 'Critical Action Required',
+    description: 'Please complete the following action to continue.',
+    action: { label: 'Take Action', onClick: fn() },
+    expanded: true,
+    onToggle: fn(),
+  },
+  argTypes: {
+    sentiment: {
+      control: 'select',
+      options: ['success', 'negative', 'neutral', 'warning'],
+    },
+    title: {
+      control: 'text',
+      table: {
+        type: { summary: 'ReactNode' },
+      },
+    },
+    description: {
+      control: 'text',
+      table: {
+        type: { summary: 'ReactNode' },
+      },
+    },
+    expanded: {
+      control: 'boolean',
+    },
+    media: {
+      control: false,
+      table: {
+        type: {
+          summary: 'CriticalBannerMedia',
+          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 }',
+        },
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof CriticalBanner>;
+
+/**
+ * Convenience controls for previewing rich markup,
+ * not otherwise possible via Storybook
+ */
+type PreviewStoryArgs = CriticalBannerProps & {
+  previewMedia: CriticalBannerProps['media'];
+  previewSecondaryAction: boolean;
+};
+
+const previewArgGroup = {
+  category: 'Storybook Preview options',
+  type: {
+    summary: undefined,
+  },
+};
+
+const MEDIA_OPTIONS: Record<string, CriticalBannerProps['media']> = {
+  undefined,
+  'Custom image (no badge)': { imgSrc: '../../wise-card.svg' },
+  'Avatar: Profile image': { avatar: { imgSrc: '../../avatar-rectangle-fox.webp' } },
+  'Avatar: Business (GB badge)': {
+    avatar: { profileType: 'BUSINESS', badge: { flagCode: 'GB' } },
+  },
+  'Avatar: Personal (EU badge)': {
+    avatar: { profileType: 'PERSONAL', badge: { flagCode: 'EU' } },
+  },
+  'Avatar: Icon (Bank)': { avatar: { asset: <Bank /> } },
+  'Avatar: Icon (Star)': { avatar: { asset: <Star /> } },
+  'Avatar: Icon (Travel)': { avatar: { asset: <Travel /> } },
+  'Avatar: Icon (Briefcase)': { avatar: { asset: <Briefcase /> } },
+  'Avatar: Initials': { avatar: { profileName: 'John Doe' } },
+};
+
+const previewArgTypes = {
+  previewMedia: {
+    name: 'Preview with `media`',
+    control: 'select',
+    options: [
+      'undefined',
+      'Custom image (no badge)',
+      'Avatar: Profile image',
+      'Avatar: Business (GB badge)',
+      'Avatar: Personal (EU badge)',
+      'Avatar: Icon (Bank)',
+      'Avatar: Icon (Star)',
+      'Avatar: Icon (Travel)',
+      'Avatar: Icon (Briefcase)',
+      'Avatar: Initials',
+    ],
+    mapping: MEDIA_OPTIONS,
+    table: previewArgGroup,
+  },
+  previewSecondaryAction: {
+    name: 'Preview with `actionSecondary`',
+    control: 'boolean',
+    table: previewArgGroup,
+  },
+} as const;
+
+const getPropsForPreview = (
+  args: PreviewStoryArgs,
+): [CriticalBannerProps, Partial<CriticalBannerProps>] => {
+  const { previewMedia, previewSecondaryAction, ...props } = args;
+
+  return [
+    props,
+    {
+      media: previewMedia,
+      actionSecondary: previewSecondaryAction ? { label: 'Cancel', onClick: fn() } : undefined,
+    },
+  ];
+};
+
+/**
+ * The Playground story demonstrates the CriticalBanner with interactive controls.
+ * The story manages the `expanded` state internally to enable the toggle behavior.
+ */
+export const Playground: StoryObj<PreviewStoryArgs> = {
+  argTypes: {
+    sentiment: {
+      control: 'radio',
+      options: ['success', 'negative', 'neutral', 'warning'],
+    },
+    ...previewArgTypes,
+  },
+  args: {
+    previewMedia: { avatar: undefined },
+    previewSecondaryAction: true,
+    sentiment: 'negative',
+  },
+  render: function PlaygroundRender(args: PreviewStoryArgs) {
+    const [expanded, setExpanded] = useState(args.expanded);
+    const [props, previewProps] = getPropsForPreview(args);
+    return (
+      <CriticalBanner
+        {...props}
+        {...previewProps}
+        expanded={expanded}
+        onToggle={() => setExpanded(!expanded)}
+      />
+    );
+  },
+};
+
+/**
+ * CriticalBanner supports multiple sentiments to communicate different types of critical messages:
+ * - `negative` (default): Critical errors or issues
+ * - `warning`: Warning messages requiring attention
+ * - `neutral`: General important notices
+ * - `success`: Success confirmations
+ */
+export const Sentiments: Story = {
+  render: () => {
+    const [expandedStates, setExpandedStates] = useState<Record<string, boolean>>({
+      success: true,
+      warning: true,
+      negative: true,
+      neutral: true,
+    });
+
+    const handleToggle = (sentiment: string) => {
+      setExpandedStates((prev) => ({ ...prev, [sentiment]: !prev[sentiment] }));
+    };
+
+    return (
+      <>
+        {(['negative', 'warning', 'neutral', 'success'] as const).map((sentiment) => (
+          <CriticalBanner
+            key={sentiment}
+            sentiment={sentiment}
+            title={`${sentiment.charAt(0).toUpperCase() + sentiment.slice(1)} Banner`}
+            description={lorem10}
+            action={{ label: 'Primary', onClick: fn() }}
+            actionSecondary={{ label: 'Secondary', onClick: fn() }}
+            expanded={expandedStates[sentiment]}
+            onToggle={() => handleToggle(sentiment)}
+          />
+        ))}
+      </>
+    );
+  },
+};
+
+/**
+ * CriticalBanner can have just a primary action, both primary and secondary actions, or no actions at all.
+ */
+export const Actions: Story = {
+  render: () => {
+    const [expandedStates, setExpandedStates] = useState({
+      noActions: true,
+      primaryOnly: true,
+      both: true,
+    });
+
+    return (
+      <>
+        <CriticalBanner
+          sentiment="negative"
+          title="No actions"
+          description="This banner has no action buttons."
+          expanded={expandedStates.noActions}
+          onToggle={() => setExpandedStates((prev) => ({ ...prev, noActions: !prev.noActions }))}
+        />
+        <CriticalBanner
+          sentiment="warning"
+          title="Primary action only"
+          description="This banner has only one action button."
+          action={{ label: 'Take Action', onClick: fn() }}
+          expanded={expandedStates.primaryOnly}
+          onToggle={() =>
+            setExpandedStates((prev) => ({ ...prev, primaryOnly: !prev.primaryOnly }))
+          }
+        />
+        <CriticalBanner
+          sentiment="negative"
+          title="Primary and secondary actions"
+          description="This banner has both action buttons."
+          action={{ label: 'Confirm', onClick: fn() }}
+          actionSecondary={{ label: 'Cancel', onClick: fn() }}
+          expanded={expandedStates.both}
+          onToggle={() => setExpandedStates((prev) => ({ ...prev, both: !prev.both }))}
+        />
+      </>
+    );
+  },
+};
+
+/**
+ * CriticalBanner supports various media types to enhance visual communication.
+ *
+ * **Default**: Each sentiment has a default status icon that appears when no media is provided.
+ *
+ * **Icon Overrides**: Replace default icons with custom images, avatars with images, avatars with initials,
+ * avatars with custom icons, or avatars with profile types and badges.
+ */
+export const MediaTypes: Story = {
+  render: () => {
+    const [expandedStates, setExpandedStates] = useState<Record<string, boolean>>({
+      default: true,
+      customImage: true,
+      avatarImage: true,
+      avatarInitials: true,
+      avatarIcon: true,
+      businessBadge: true,
+      personalBadge: true,
+    });
+
+    const handleToggle = (key: string) => {
+      setExpandedStates((prev) => ({ ...prev, [key]: !prev[key] }));
+    };
+
+    return (
+      <>
+        <Title type="title-body">Default</Title>
+        <CriticalBanner
+          sentiment="negative"
+          title="Default status icon"
+          description="When no media is provided, the sentiment's default status icon is displayed."
+          action={{ label: 'Continue', onClick: fn() }}
+          expanded={expandedStates.default}
+          onToggle={() => handleToggle('default')}
+        />
+
+        <Title type="title-body">Icon Overrides</Title>
+        <CriticalBanner
+          sentiment="negative"
+          title="Custom image"
+          description={lorem10}
+          media={{ imgSrc: '../../wise-card.svg' }}
+          action={{ label: 'View card', onClick: fn() }}
+          expanded={expandedStates.customImage}
+          onToggle={() => handleToggle('customImage')}
+        />
+        <CriticalBanner
+          sentiment="negative"
+          title="Avatar with image"
+          description={lorem10}
+          media={{ avatar: { imgSrc: '../../avatar-rectangle-fox.webp' } }}
+          action={{ label: 'View profile', onClick: fn() }}
+          expanded={expandedStates.avatarImage}
+          onToggle={() => handleToggle('avatarImage')}
+        />
+        <CriticalBanner
+          sentiment="negative"
+          title="Avatar with initials"
+          description={lorem10}
+          media={{ avatar: { profileName: 'John Doe' } }}
+          action={{ label: 'Send invite', onClick: fn() }}
+          expanded={expandedStates.avatarInitials}
+          onToggle={() => handleToggle('avatarInitials')}
+        />
+        <CriticalBanner
+          sentiment="warning"
+          title="Avatar with custom icon"
+          description={lorem10}
+          media={{ avatar: { asset: <Bank /> } }}
+          action={{ label: 'Connect bank', onClick: fn() }}
+          expanded={expandedStates.avatarIcon}
+          onToggle={() => handleToggle('avatarIcon')}
+        />
+        <CriticalBanner
+          sentiment="neutral"
+          title="Business profile with badge"
+          description={lorem10}
+          media={{ avatar: { profileType: 'BUSINESS', badge: { flagCode: 'GB' } } }}
+          action={{ label: 'Open account', onClick: fn() }}
+          expanded={expandedStates.businessBadge}
+          onToggle={() => handleToggle('businessBadge')}
+        />
+        <CriticalBanner
+          sentiment="negative"
+          title="Personal profile with badge"
+          description={lorem10}
+          media={{ avatar: { profileType: 'PERSONAL', badge: { flagCode: 'EU' } } }}
+          action={{ label: 'Verify', onClick: fn() }}
+          expanded={expandedStates.personalBadge}
+          onToggle={() => handleToggle('personalBadge')}
+        />
+      </>
+    );
+  },
+};
+
+/**
+ * The CriticalBanner is fully controlled - the parent component manages the `expanded` state.
+ * Clicking the chevron calls `onToggle`, allowing the parent to update the state.
+ */
+export const ExpandCollapse: Story = {
+  render: () => {
+    const [expanded, setExpanded] = useState(true);
+
+    return (
+      <>
+        <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 style={{ marginTop: '1rem' }}>
+          <Button v2 onClick={() => setExpanded(!expanded)}>
+            {expanded ? 'Collapse externally' : 'Expand externally'}
+          </Button>
+        </div>
+      </>
+    );
+  },
+};
+
+/**
+ * While the component itself will stretch to the full available width, the text container will be
+ * capped at `480px` to ensure optimal readability.
+ */
+export const ParagraphWidth: Story = {
+  parameters: {
+    docs: {
+      canvas: {
+        sourceState: 'hidden',
+      },
+    },
+  },
+  render: () => {
+    const [expanded, setExpanded] = useState(true);
+    return (
+      <CriticalBanner
+        title={lorem10}
+        description={lorem20}
+        sentiment="negative"
+        action={{ label: 'View details', onClick: fn() }}
+        expanded={expanded}
+        onToggle={() => setExpanded(!expanded)}
+      />
+    );
+  },
+};
+
+/**
+ * Demonstrates the accessibility features of CriticalBanner.
+ * The component uses aria-live="assertive" to immediately announce changes to screen readers.
+ *
+ * To test with a screen reader:
+ * 1. Enable your screen reader (VoiceOver on Mac: Cmd+F5, NVDA on Windows)
+ * 2. Click "Show banner" - the banner content should be announced immediately
+ * 3. Click the chevron to expand/collapse - changes should be announced
+ * 4. Click "Hide banner" and then "Show banner" again - it should announce again
+ *
+ * Announcement behavior:
+ * - Collapsed with title: Announces title only
+ * - Collapsed without title: Announces description only
+ * - Expanded: Announces title, description, and action button labels
+ */
+export const LiveRegionAnnouncements: Story = {
+  render: () => {
+    const [showBanner, setShowBanner] = useState(false);
+    const [expanded, setExpanded] = useState(false);
+
+    return (
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
+        <div style={{ display: 'flex', gap: '1rem', flexWrap: 'wrap' }}>
+          <Button v2 onClick={() => setShowBanner(!showBanner)}>
+            {showBanner ? 'Hide banner' : 'Show banner'}
+          </Button>
+        </div>
+
+        {showBanner && (
+          <CriticalBanner
+            sentiment="negative"
+            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() }}
+            expanded={expanded}
+            onToggle={() => setExpanded(!expanded)}
+          />
+        )}
+      </div>
+    );
+  },
+};

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

@@ -0,0 +1,67 @@
+import { Meta, StoryObj } from '@storybook/react-webpack5';
+import { fn } from 'storybook/test';
+import { CriticalBanner } from './CriticalBanner';
+
+const meta: Meta<typeof CriticalBanner> = {
+  title: 'Prompts/CriticalBanner/Tests',
+  component: CriticalBanner,
+};
+
+export default meta;
+type Story = StoryObj<typeof CriticalBanner>;
+
+const longDescription =
+  'DescriptionDescriptionDescriptionDescriptionDescriptionDescriptionDescriptionDescriptionDescriptionDescriptionDescriptionDescriptionDescriptionDescriptionDescriptionDescriptionDescriptionDescriptionDescriptionDescriptionDescriptionDescriptionDescriptionDescriptionDescriptionDescriptionDescriptionDescriptionDescriptionDescriptionDescriptionDescriptionDescriptionDescriptionDescription';
+
+/**
+ * Shows all four collapsed/expanded × with-title/without-title combinations.
+ * Used for visual regression testing of the collapsed state behaviour:
+ * - With title: description is hidden when collapsed
+ * - Without title: description is visible (up to 2 lines) when collapsed
+ */
+export const CollapsedVariants: Story = {
+  render: () => (
+    <div
+      style={{
+        display: 'grid',
+        gridTemplateColumns: '1fr 1fr',
+        gap: '1rem',
+        width: '100%',
+      }}
+    >
+      {/* Row 1: Expanded */}
+      <CriticalBanner
+        sentiment="negative"
+        title="Title (optional)"
+        description="Description"
+        action={{ label: 'Primary', onClick: fn() }}
+        expanded
+        onToggle={fn()}
+      />
+      <CriticalBanner
+        sentiment="negative"
+        description={longDescription}
+        action={{ label: 'Primary', onClick: fn() }}
+        expanded
+        onToggle={fn()}
+      />
+
+      {/* Row 2: Collapsed */}
+      <CriticalBanner
+        sentiment="negative"
+        title="Title (optional)"
+        description="Description"
+        action={{ label: 'Primary', onClick: fn() }}
+        expanded={false}
+        onToggle={fn()}
+      />
+      <CriticalBanner
+        sentiment="negative"
+        description={longDescription}
+        action={{ label: 'Primary', onClick: fn() }}
+        expanded={false}
+        onToggle={fn()}
+      />
+    </div>
+  ),
+};