import { ReactElement } from 'react'; import { Freeze, People, Travel } from '@transferwise/icons'; import { action } from 'storybook/actions'; import { fn } from 'storybook/test'; import ActionPrompt from './ActionPrompt'; import { Body, Title } from '../..'; import { StoryObj } from '@storybook/react-webpack5'; import { allModes } from '../../../.storybook/modes'; import { withVariantConfig } from '../../../.storybook/helpers'; import { lorem10 } from '../../test-utils'; const withComponentGrid = ({ gap = '1rem' } = {}) => (Story: () => ReactElement) => (
); export default { title: 'Prompts/ActionPrompt/Tests', component: ActionPrompt, tags: ['!manifest', '!autodocs', 'new'], }; type Story = StoryObj; export const VariousA11yFeatures: Story = { name: 'Various a11y features', render: () => { return ( Neutral Prompt with Avatar Image and Custom label for media { action('send'); }, }} actionSecondary={{ label: 'Decline', onClick: () => { action('decline'); }, }} onDismiss={() => action('dismiss')} /> Warning Prompt { action('renew'); }, }} actionSecondary={{ label: 'Notify later', onClick: () => { action('notifyLater'); }, }} onDismiss={() => action('dismiss')} /> Warning Prompt Avatar Icon } }} title="Your Wise Card expires soon" description="Renew your card to keep spending" action={{ label: 'Renew card', onClick: () => { action('renew'); }, }} onDismiss={() => { action('dismiss'); }} /> Proposition Prompt Avatar Icon } }} title="Sync contacts for a faster experience" description="Find contacts on Wise — it’s simple, secure and you pick who you add." action={{ label: 'Sync contacts', onClick: () => { action('sync'); }, }} onDismiss={() => { action('dismiss'); }} /> Negative Prompt Avatar Icon + muted media }, 'aria-hidden': true }} title="Sync contacts for a faster experience" description="Find contacts on Wise — it’s simple, secure and you pick who you add." action={{ label: 'Sync contacts', onClick: () => { action('sync'); }, }} onDismiss={() => { action('dismiss'); }} /> Negative Prompt + override content with custom message via aria-label } }} title="Sync contacts for a faster experience" description="Find contacts on Wise — it's simple, secure and you pick who you add." action={{ label: 'Sync contacts', onClick: () => { action('sync'); }, }} onDismiss={() => { action('dismiss'); }} /> ); }, }; /** * ActionPrompt can be shown with or without a description. */ export const WithoutDescription: Story = { render: () => { return ( <> ); }, decorators: [withComponentGrid()], }; export const AllThemesAndSentiments: Story = { render: () => { return ( <> {(['negative', 'warning', 'neutral', 'success', 'proposition'] as const).map( (sentiment) => ( ), )} ); }, decorators: [withComponentGrid({ gap: '1.5rem' })], parameters: { padding: '16px', variants: ['default', 'dark', 'bright-green', 'forest-green'], chromatic: { dark: allModes.dark, brightGreen: allModes.brightGreen, forestGreen: allModes.forestGreen, }, }, }; export const TinyScreen: Story = { render: () => ( ), ...withVariantConfig(['400%']), }; /** * ActionPrompt adapts its layout based on available width. At narrow widths (mobile), * the buttons stack vertically. At wider widths (desktop), they appear side by side. */ export const Responsiveness: Story = { render: (args) => (
} }} action={{ label: 'Primary action', onClick: fn() }} actionSecondary={{ label: 'Secondary', onClick: fn() }} onDismiss={fn()} /> } }} action={{ label: 'Primary action', onClick: fn() }} actionSecondary={{ label: 'Secondary', onClick: fn() }} onDismiss={fn()} />
), parameters: { docs: { canvas: { sourceState: 'hidden', }, }, }, };