@transferwise/components 46.124.1 → 46.126.0

package/src/prompt/InfoPrompt/InfoPrompt.story.tsx

@@ -0,0 +1,312 @@
+import type { ReactElement } from 'react';
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+import { action } from 'storybook/actions';
+import { Confetti, GiftBox, Star, Travel } from '@transferwise/icons';
+import { InfoPrompt, InfoPromptProps } from './InfoPrompt';
+
+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>
+  );
+
+export default {
+  title: 'Prompts/InfoPrompt',
+  component: InfoPrompt,
+  tags: ['new'],
+  decorators: [withComponentGrid()],
+  args: {
+    description: 'Your payment is being processed.',
+  },
+  argTypes: {
+    sentiment: {
+      control: 'select',
+      options: ['success', 'negative', 'neutral', 'warning', 'proposition'],
+    },
+    title: {
+      control: 'text',
+      table: {
+        type: { summary: 'ReactNode' },
+      },
+    },
+    description: {
+      control: 'text',
+      table: {
+        type: { summary: 'ReactNode' },
+      },
+    },
+  },
+  parameters: {
+    docs: {
+      toc: true,
+    },
+  },
+} satisfies Meta<InfoPromptProps>;
+
+/**
+ * Convenience controls for previewing rich markup,
+ * not otherwise possible via Storybook
+ */
+type PreviewStoryArgs = InfoPromptProps & {
+  previewMedia: boolean;
+  previewOnDismiss: boolean;
+  previewAction: boolean;
+};
+
+const previewArgGroup = {
+  category: 'Storybook Preview options',
+  type: {
+    summary: undefined,
+  },
+};
+
+const previewArgTypes = {
+  previewMedia: {
+    name: 'Preview with `media`',
+    control: 'boolean',
+    table: previewArgGroup,
+  },
+  previewOnDismiss: {
+    name: 'Preview with `onDismiss`',
+    control: 'boolean',
+    table: previewArgGroup,
+  },
+  previewAction: {
+    name: 'Preview with `action`',
+    control: 'boolean',
+    table: previewArgGroup,
+  },
+} as const;
+
+const getPropsForPreview = (
+  args: PreviewStoryArgs,
+): [InfoPromptProps, Partial<InfoPromptProps>] => {
+  const { previewMedia, previewOnDismiss, previewAction, ...props } = args;
+
+  return [
+    props,
+    {
+      media: previewMedia ? { asset: <Star title="Starred" /> } : undefined,
+      onDismiss: previewOnDismiss ? action('onDismiss') : undefined,
+      action: previewAction
+        ? { label: 'Learn more', onClick: action('action.onClick') }
+        : undefined,
+    },
+  ];
+};
+
+export const Playground: StoryObj<PreviewStoryArgs> = {
+  tags: ['!autodocs'],
+  argTypes: previewArgTypes,
+  args: {
+    previewMedia: false,
+    previewOnDismiss: false,
+    previewAction: false,
+  },
+  render: (args: PreviewStoryArgs) => {
+    const [props, previewProps] = getPropsForPreview(args);
+    return <InfoPrompt {...props} {...previewProps} />;
+  },
+};
+
+/**
+ * InfoPrompt supports multiple sentiments to communicate different types of messages:
+ * - `neutral` (default): General information
+ * - `success`: Success messages
+ * - `negative`: Error messages
+ * - `warning`: Warning messages
+ * - `proposition`: Promotional content (uses GiftBox icon by default)
+ */
+export const Sentiments: StoryObj<InfoPromptProps> = {
+  render: (args: InfoPromptProps) => (
+    <>
+      <InfoPrompt {...args} sentiment="neutral" description="This is a neutral message." />
+      <InfoPrompt {...args} sentiment="success" description="Your payment was successful!" />
+      <InfoPrompt {...args} sentiment="negative" description="Something went wrong." />
+      <InfoPrompt {...args} sentiment="warning" description="Please review your details." />
+      <InfoPrompt {...args} sentiment="proposition" description="Check out our new features!" />
+    </>
+  ),
+  decorators: [withComponentGrid()],
+};
+
+/**
+ * InfoPrompt can include both a title and description for more detailed messaging.
+ */
+export const WithTitle: StoryObj<InfoPromptProps> = {
+  render: (args: InfoPromptProps) => (
+    <>
+      <InfoPrompt
+        {...args}
+        sentiment="success"
+        title="Payment Successful"
+        description="Your money is on its way to the recipient."
+      />
+      <InfoPrompt
+        {...args}
+        sentiment="warning"
+        title="Payment Delayed"
+        description="Payments sent today might not arrive in time for the holidays."
+      />
+      <InfoPrompt
+        {...args}
+        sentiment="negative"
+        title="Payment Failed"
+        description="We couldn't process your payment. Please try again."
+      />
+    </>
+  ),
+  decorators: [withComponentGrid()],
+};
+
+/**
+ * When `onDismiss` is provided, a close button appears allowing users to dismiss the prompt.
+ * Note: The component itself is not automatically removed - you must handle state management.
+ */
+export const Dismissible: StoryObj<InfoPromptProps> = {
+  render: (args: InfoPromptProps) => (
+    <>
+      <InfoPrompt
+        {...args}
+        sentiment="success"
+        title="Success"
+        description="Your payment was successful."
+        onDismiss={action('onDismiss')}
+      />
+      <InfoPrompt
+        {...args}
+        sentiment="neutral"
+        description="This message can be dismissed."
+        onDismiss={action('onDismiss')}
+      />
+    </>
+  ),
+  decorators: [withComponentGrid()],
+};
+
+/**
+ * Use the `action` prop to add a clickable link below the message.
+ * Actions can have an `href` for navigation or an `onClick` for custom behavior.
+ */
+export const WithAction: StoryObj<InfoPromptProps> = {
+  render: (args: InfoPromptProps) => (
+    <>
+      <InfoPrompt
+        {...args}
+        sentiment="neutral"
+        description="New feature available"
+        action={{ label: 'Learn more', href: '/features', target: '_blank' }}
+      />
+      <InfoPrompt
+        {...args}
+        sentiment="warning"
+        title="Action Required"
+        description="Please verify your identity to continue."
+        action={{ label: 'Verify now', onClick: action('verify') }}
+      />
+      <InfoPrompt
+        {...args}
+        sentiment="proposition"
+        title="Special Offer"
+        description="Get 50% off your next transfer!"
+        action={{ label: 'Claim offer', onClick: action('claim') }}
+      />
+    </>
+  ),
+  decorators: [withComponentGrid()],
+};
+
+/**
+ * Use the `media` prop to override the default status icon with a custom icon.
+ * This is useful for matching the prompt's visual language to its content.
+ *
+ * Success and proposition sentiments support both standard checkmark and confetti variations.
+ */
+export const CustomMedia: StoryObj<InfoPromptProps> = {
+  render: (args: InfoPromptProps) => (
+    <>
+      <InfoPrompt
+        {...args}
+        sentiment="success"
+        description="Saved to favorites!"
+        media={{ asset: <Star title="Starred" /> }}
+      />
+      <InfoPrompt
+        {...args}
+        sentiment="success"
+        title="Congratulations!"
+        description="You've completed all the steps."
+        media={{ asset: <Confetti size={24} title="Celebration" /> }}
+      />
+      <InfoPrompt
+        {...args}
+        sentiment="proposition"
+        title="Check out more!"
+        description="New ways to send money with Wise!"
+        media={{ asset: <GiftBox title="Gift" /> }}
+      />
+      <InfoPrompt
+        {...args}
+        sentiment="success"
+        description="Your travel account is ready!"
+        media={{ asset: <Travel title="Travel" /> }}
+      />
+    </>
+  ),
+  decorators: [withComponentGrid()],
+};
+
+/**
+ * InfoPrompt fully supports accessibility attributes through spread props.
+ * Use `role="status"` for non-critical updates or `role="alert"` for important messages.
+ */
+export const Accessibility: StoryObj<InfoPromptProps> = {
+  render: (args: InfoPromptProps) => (
+    <>
+      <InfoPrompt
+        {...args}
+        sentiment="success"
+        description="Your profile has been saved"
+        role="status"
+      />
+      <InfoPrompt
+        {...args}
+        sentiment="negative"
+        title="Error"
+        description="Your session has expired. Please log in again."
+        role="alert"
+      />
+    </>
+  ),
+  decorators: [withComponentGrid()],
+};
+
+/**
+ * Complete example showing all features combined:
+ * sentiment, title, description, action, onDismiss, and custom media.
+ */
+export const CompleteExample: StoryObj<InfoPromptProps> = {
+  render: () => (
+    <InfoPrompt
+      sentiment="proposition"
+      title="Invite Friends & Earn"
+      description="Share Wise with friends and get £50 for each friend who makes their first transfer."
+      media={{ asset: <GiftBox title="Gift" /> }}
+      action={{ label: 'Invite friends', onClick: action('invite') }}
+      onDismiss={action('onDismiss')}
+    />
+  ),
+};

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

@@ -0,0 +1,246 @@
+import { useState, MouseEvent } from 'react';
+import { userEvent, within, expect, waitFor } from 'storybook/test';
+import { Meta, StoryObj } from '@storybook/react-webpack5';
+import { InfoPrompt, type InfoPromptProps } from './InfoPrompt';
+
+const meta = {
+  title: 'Prompts/InfoPrompt/Tests',
+  component: InfoPrompt,
+  tags: ['!autodocs', '!manifest', 'new'],
+  args: {
+    sentiment: 'neutral',
+    description: 'This is an informational message.',
+  },
+} satisfies Meta<typeof InfoPrompt>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+const wait = async (duration = 500) =>
+  new Promise<void>((resolve) => {
+    setTimeout(resolve, duration);
+  });
+
+/**
+ * Test that clicking the dismiss button removes the prompt.
+ */
+export const DismissInteraction: Story = {
+  play: async ({ canvasElement, step }) => {
+    const canvas = within(canvasElement);
+    const dismissButton = canvas.getByRole('button', { name: /close/i });
+
+    await step('Verify prompt is visible', async () => {
+      await waitFor(async () =>
+        expect(canvas.getByText('This message can be dismissed.')).toBeInTheDocument(),
+      );
+    });
+
+    await step('Click the dismiss button', async () => {
+      await userEvent.click(dismissButton);
+    });
+
+    await step('Verify prompt is removed', async () => {
+      await waitFor(async () =>
+        expect(canvas.queryByText('This message can be dismissed.')).not.toBeInTheDocument(),
+      );
+    });
+  },
+  render: function Render(args: InfoPromptProps) {
+    const [isVisible, setIsVisible] = useState(true);
+
+    if (!isVisible) {
+      return <div data-testid="dismissed">Prompt dismissed</div>;
+    }
+
+    return (
+      <InfoPrompt
+        {...args}
+        description="This message can be dismissed."
+        onDismiss={() => setIsVisible(false)}
+      />
+    );
+  },
+};
+
+/**
+ * Test keyboard accessibility - dismiss prompt via Enter key.
+ */
+export const DismissViaKeyboard: Story = {
+  play: async ({ canvasElement, step }) => {
+    const canvas = within(canvasElement);
+
+    await step('Tab to the dismiss button', async () => {
+      await wait();
+      await userEvent.tab();
+    });
+
+    await step('Press Enter to dismiss', async () => {
+      await userEvent.keyboard('{Enter}');
+    });
+
+    await step('Verify prompt is removed', async () => {
+      await waitFor(async () =>
+        expect(canvas.queryByText('Press Enter to dismiss.')).not.toBeInTheDocument(),
+      );
+    });
+  },
+  render: function Render(args: InfoPromptProps) {
+    const [isVisible, setIsVisible] = useState(true);
+
+    if (!isVisible) {
+      return <div data-testid="dismissed">Prompt dismissed</div>;
+    }
+
+    return (
+      <InfoPrompt
+        {...args}
+        description="Press Enter to dismiss."
+        onDismiss={() => setIsVisible(false)}
+      />
+    );
+  },
+};
+
+/**
+ * Test action link click interaction.
+ */
+export const ActionClickInteraction: Story = {
+  play: async ({ canvasElement, step }) => {
+    const canvas = within(canvasElement);
+    const actionLink = canvas.getByRole('link', { name: 'Learn more' });
+
+    await step('Verify prompt with action is visible', async () => {
+      await waitFor(async () =>
+        expect(canvas.getByText('Click the action link.')).toBeInTheDocument(),
+      );
+    });
+
+    await step('Click the action link', async () => {
+      await userEvent.click(actionLink);
+    });
+
+    await step('Verify action was triggered', async () => {
+      await waitFor(async () => expect(canvas.getByText('Action clicked!')).toBeInTheDocument());
+    });
+  },
+  render: function Render(args: InfoPromptProps) {
+    const [actionClicked, setActionClicked] = useState(false);
+
+    return (
+      <>
+        <InfoPrompt
+          {...args}
+          description="Click the action link."
+          action={{
+            label: 'Learn more',
+            href: '#',
+            onClick: (e: MouseEvent) => {
+              e.preventDefault();
+              setActionClicked(true);
+            },
+          }}
+        />
+        {actionClicked && <div>Action clicked!</div>}
+      </>
+    );
+  },
+};
+
+/**
+ * Test multiple prompts with different sentiments can be dismissed independently.
+ */
+export const MultipleDismissInteraction: Story = {
+  play: async ({ canvasElement, step }) => {
+    const canvas = within(canvasElement);
+    const dismissButtons = canvas.getAllByRole('button', { name: /close/i });
+
+    await step('Verify all prompts are visible', async () => {
+      await waitFor(async () => {
+        await expect(canvas.getByText('Success message')).toBeInTheDocument();
+        await expect(canvas.getByText('Warning message')).toBeInTheDocument();
+        await expect(canvas.getByText('Negative message')).toBeInTheDocument();
+      });
+    });
+
+    await step('Dismiss the warning prompt', async () => {
+      // Click the second dismiss button (warning)
+      await userEvent.click(dismissButtons[1]);
+    });
+
+    await step('Verify only warning prompt is removed', async () => {
+      await waitFor(async () => {
+        await expect(canvas.getByText('Success message')).toBeInTheDocument();
+        await expect(canvas.queryByText('Warning message')).not.toBeInTheDocument();
+        await expect(canvas.getByText('Negative message')).toBeInTheDocument();
+      });
+    });
+  },
+  render: function Render() {
+    const [prompts, setPrompts] = useState([
+      { id: 1, sentiment: 'success' as const, description: 'Success message' },
+      { id: 2, sentiment: 'warning' as const, description: 'Warning message' },
+      { id: 3, sentiment: 'negative' as const, description: 'Negative message' },
+    ]);
+
+    const handleDismiss = (id: number) => {
+      setPrompts((prev) => prev.filter((p) => p.id !== id));
+    };
+
+    return (
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
+        {prompts.map((prompt) => (
+          <InfoPrompt
+            key={prompt.id}
+            sentiment={prompt.sentiment}
+            description={prompt.description}
+            onDismiss={() => handleDismiss(prompt.id)}
+          />
+        ))}
+      </div>
+    );
+  },
+};
+
+/**
+ * Test that touch interactions work for navigation (mobile).
+ */
+export const TouchInteraction: Story = {
+  play: async ({ canvasElement, step }) => {
+    const canvas = within(canvasElement);
+    const actionLink = canvas.getByRole('link', { name: 'Navigate' });
+
+    await step('Verify prompt with action is visible', async () => {
+      await waitFor(async () => expect(canvas.getByText('Tap the prompt.')).toBeInTheDocument());
+    });
+
+    await step('Click the action (simulating touch)', async () => {
+      await userEvent.click(actionLink);
+    });
+
+    await step('Verify navigation was triggered', async () => {
+      await waitFor(async () => expect(canvas.getByText('Navigated!')).toBeInTheDocument());
+    });
+  },
+  render: function Render(args: InfoPromptProps) {
+    const [navigated, setNavigated] = useState(false);
+
+    return (
+      <>
+        <InfoPrompt
+          {...args}
+          description="Tap the prompt."
+          action={{
+            label: 'Navigate',
+            href: '#',
+            onClick: (e: MouseEvent) => {
+              e.preventDefault();
+              setNavigated(true);
+            },
+          }}
+        />
+        {navigated && <div>Navigated!</div>}
+      </>
+    );
+  },
+};