@transferwise/components 0.0.0-experimental-276a15d → 0.0.0-experimental-dd4f4a5

package/src/iconButton/IconButton.test.story.tsx

@@ -1,194 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react-webpack5';
-import { Menu, Plus, Settings, Star, Travel } from '@transferwise/icons';
-import { action } from 'storybook/actions';
-import IconButton from './IconButton';
-import SentimentSurface from '../sentimentSurface';
-import { allModes } from '../../.storybook/modes';
-
-export default {
-  title: 'Actions/IconButton/Tests',
-  component: IconButton,
-  tags: ['!autodocs', '!manifest'],
-} satisfies Meta<typeof IconButton>;
-
-type Story = StoryObj<typeof IconButton>;
-
-/**
- * IconButton displayed across all themes and sentiments for visual regression testing.
- */
-export const AllThemesAndSentiments: Story = {
-  render: () => {
-    const priorities = ['primary', 'secondary', 'tertiary', 'minimal', 'disabled'] as const;
-    const sentiments = ['negative', 'warning', 'neutral', 'success', 'proposition'] as const;
-    const icons = [Plus, Settings, Star, Travel];
-
-    return (
-      <div style={{ display: 'flex', flexDirection: 'column' }}>
-        {/* Header row with priority labels */}
-        <div style={{ display: 'flex', alignItems: 'flex-end', marginBottom: '4px', gap: '8px' }}>
-          <div style={{ width: '82px', paddingLeft: '8px' }} />
-          {priorities.map((priority) => (
-            <div
-              key={priority}
-              style={{
-                width: '32px',
-                textAlign: 'center',
-                fontSize: '11px',
-                fontWeight: 'bold',
-                writingMode: 'vertical-rl',
-                transform: 'rotate(180deg)',
-                height: '60px',
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'center',
-              }}
-            >
-              {priority}
-            </div>
-          ))}
-        </div>
-
-        {/* Rows for each sentiment with base and elevated emphasis */}
-        {sentiments.flatMap((sentiment) => [
-          <SentimentSurface
-            key={`${sentiment}-base`}
-            sentiment={sentiment}
-            emphasis="base"
-            style={{ display: 'flex', alignItems: 'center', padding: '8px 0', gap: '8px' }}
-          >
-            <div
-              style={{
-                width: '82px',
-                fontSize: '11px',
-                fontWeight: 'bold',
-                textAlign: 'left',
-                paddingLeft: '8px',
-              }}
-            >
-              {sentiment} (base)
-            </div>
-            <IconButton
-              size={32}
-              aria-label="Primary action"
-              priority="primary"
-              type="default"
-              onClick={action('button click')}
-            >
-              <Plus />
-            </IconButton>
-            <IconButton
-              size={32}
-              aria-label="Secondary action"
-              priority="secondary"
-              type="default"
-              onClick={action('button click')}
-            >
-              <Settings />
-            </IconButton>
-            <IconButton
-              size={32}
-              aria-label="Tertiary action"
-              priority="tertiary"
-              type="default"
-              onClick={action('button click')}
-            >
-              <Star />
-            </IconButton>
-            <IconButton
-              size={32}
-              aria-label="Minimal action"
-              priority="minimal"
-              type="default"
-              onClick={action('button click')}
-            >
-              <Travel />
-            </IconButton>
-            <IconButton
-              size={32}
-              aria-label="Disabled action"
-              priority="primary"
-              type="default"
-              disabled
-              onClick={action('button click')}
-            >
-              <Menu />
-            </IconButton>
-          </SentimentSurface>,
-          <SentimentSurface
-            key={`${sentiment}-elevated`}
-            sentiment={sentiment}
-            emphasis="elevated"
-            style={{ display: 'flex', alignItems: 'center', padding: '8px 0', gap: '8px' }}
-          >
-            <div
-              style={{
-                width: '82px',
-                fontSize: '11px',
-                fontWeight: 'bold',
-                textAlign: 'left',
-                paddingLeft: '8px',
-              }}
-            >
-              {sentiment} (elevated)
-            </div>
-            <IconButton
-              size={32}
-              aria-label="Primary action"
-              priority="primary"
-              type="default"
-              onClick={action('button click')}
-            >
-              <Plus />
-            </IconButton>
-            <IconButton
-              size={32}
-              aria-label="Secondary action"
-              priority="secondary"
-              type="default"
-              onClick={action('button click')}
-            >
-              <Settings />
-            </IconButton>
-            <IconButton
-              size={32}
-              aria-label="Tertiary action"
-              priority="tertiary"
-              type="default"
-              onClick={action('button click')}
-            >
-              <Star />
-            </IconButton>
-            <IconButton
-              size={32}
-              aria-label="Minimal action"
-              priority="minimal"
-              type="default"
-              onClick={action('button click')}
-            >
-              <Travel />
-            </IconButton>
-            <IconButton
-              size={32}
-              aria-label="Disabled action"
-              priority="primary"
-              type="default"
-              disabled
-              onClick={action('button click')}
-            >
-              <Menu />
-            </IconButton>
-          </SentimentSurface>,
-        ])}
-      </div>
-    );
-  },
-  parameters: {
-    padding: '16px',
-    variants: ['default', 'dark', 'bright-green', 'forest-green'],
-    chromatic: {
-      dark: allModes.dark,
-      brightGreen: allModes.brightGreen,
-      forestGreen: allModes.forestGreen,
-    },
-  },
-};

package/src/prompt/InfoPrompt/InfoPrompt.accessibility.docs.mdx

@@ -1,79 +0,0 @@
-import { Meta, Source } from '@storybook/addon-docs/blocks';
-
-<Meta title="Prompts/InfoPrompt/Accessibility" />
-
-# Accessibility
-
-Under the hood, `InfoPrompt` is marked as `role="region"` for a section of content that users might want to navigate to directly.
-
-By default, it's labelled by the `title` and described by the `description`.
-
-## Announcement Behaviour
-
-`InfoPrompt` is designed for contextual messages that appear within a screen. Unlike `ActionPrompt`, it can be configured to announce to screen readers using ARIA roles:
-
-- **`role="status"`**: Politely announces updates when the screen reader is idle. Use for non-critical success messages or informational updates (e.g., "Your profile has been saved").
-- **`role="alert"`**: Immediately interrupts to announce urgent messages. Use for time-sensitive information that requires immediate attention (e.g., errors, warnings, deadlines).
-
-**Default behavior:** Without a role, the prompt won't be announced automatically. Users will encounter it when navigating the page.
-
-<Source
-  dark
-  code={`
-// Polite announcement for non-critical updates
-<InfoPrompt
-  sentiment="success"
-  description="Your profile has been saved"
-  role="status"
-/>
-
-// Immediate announcement for urgent messages
-
-<InfoPrompt
-  sentiment="negative"
-  title="Session expired"
-  description="Your session has expired. Please log in again."
-  role="alert"
-/>
-`}
-/>
-
-## Custom Labels
-
-If you want to provide a custom label for screen readers, you can use the `aria-label` prop. Make sure to include all necessary information in it, because when provided, the default labelling will be removed.
-
-<Source
-  dark
-  code={`
-<InfoPrompt
-  sentiment="negative"
-  title="Payment failed"
-  description="Unable to process payment."
-  aria-label="Critical error: Your payment could not be processed. Please update your payment method and try again within 24 hours."
-/>
-`}
-/>
-
-## Media
-
-Custom media icons should include their own accessibility attributes. Use the `title` prop on icons to provide accessible names for screen readers:
-
-<Source
-  dark
-  code={`
-<InfoPrompt
-  sentiment="success"
-  description="Your travel account is ready!"
-  media={{ asset: <Travel title="Travel feature" /> }}
-/>
-
-<InfoPrompt
-  sentiment="warning"
-  title="Business travel"
-  description="Book your business trip with Wise."
-  media={{ asset: <Briefcase title="Business" /> }}
-/>
-`}
-/>
-
-**Note:** Unlike `ActionPrompt` (which uses `media['aria-label']`) and `InlinePrompt` (which uses `mediaLabel`), `InfoPrompt` requires you to add accessibility attributes directly to the icon component you pass.

package/src/prompt/InlinePrompt/InlinePrompt.accessibility.docs.mdx

@@ -1,63 +0,0 @@
-import { Meta, Source } from '@storybook/addon-docs/blocks';
-
-<Meta title="Prompts/InlinePrompt/Accessibility" />
-
-# Accessibility
-
-Under the hood, `InlinePrompt` is marked as `role="region"` for a section of content that users might want to navigate to directly.
-
-By default, it's labelled by the `media` icon and the prompt's text content.
-
-## Announcement Behaviour
-
-`InlinePrompt` appears alongside a specific component on the screen (e.g., input fields, list items). It should not be announced via screen reader—neither assertively (`role="alert"`) nor politely (`role="status"`).
-
-**Note:** For immediate user feedback that requires announcement, use [InfoPrompt](?path=/docs/prompts-infoprompt--docs) instead.
-
-## Media Label
-
-You can use the `mediaLabel` prop to override the icon's accessible name announced by screen readers. This is especially useful for custom icons or when you want to provide more context than the default sentiment label.
-
-By default, sentiment icons have these labels:
-
-- `positive`: "Success:"
-- `negative`: "Error:"
-- `warning`: "Warning:"
-- `neutral`: "Information:"
-- `proposition`: No label (GiftBox icon is decorative by default)
-
-<Source
-  dark
-  code={`
-<InlinePrompt 
-  media={<Travel />} 
-  sentiment="positive" 
-  mediaLabel="Travel feature enabled: "
->
-  Your travel account is set up and ready to use.
-</InlinePrompt>
-
-<InlinePrompt 
-  media={<Clock />} 
-  sentiment="warning" 
-  mediaLabel="Delayed processing: "
->
-  The account verification is taking longer than usual.
-</InlinePrompt>
-`}
-/>
-
-## Muted State
-
-When a prompt is associated with a disabled component, use the `muted` prop to visually indicate the relationship while keeping the prompt accessible and interactive. The prompt remains keyboard accessible and can include interactive elements like links.
-
-<Source
-  dark
-  code={`
-<InlinePrompt muted sentiment="warning" mediaLabel="Feature locked: ">
-  Please <Link href="#">confirm your residential address</Link> to activate this feature.
-</InlinePrompt>
-`}
-/>
-
-The muted state uses a special backslash circle icon to indicate the disabled relationship, but the prompt itself remains fully accessible to screen readers and keyboard users.

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

@@ -1,21 +0,0 @@
-import { StoryObj } from '@storybook/react-webpack5';
-import { Travel } from '@transferwise/icons';
-import { InlinePrompt } from './InlinePrompt';
-import { withVariantConfig } from '../../../.storybook/helpers';
-
-export default {
-  title: 'Prompts/InlinePrompt/Tests',
-  component: InlinePrompt,
-  tags: ['!autodocs'],
-};
-
-type Story = StoryObj<typeof InlinePrompt>;
-
-export const TinyScreen: Story = {
-  render: () => (
-    <InlinePrompt sentiment="positive" media={<Travel />}>
-      Your travel money account is now active and ready to use for international transactions.
-    </InlinePrompt>
-  ),
-  ...withVariantConfig(['400%']),
-};