@transferwise/components 46.119.5 → 46.120.1

package/src/header/Header.tests.story.tsx

@@ -1,6 +1,6 @@
 import { Meta, StoryObj } from '@storybook/react-webpack5';
 import Header, { type HeaderProps } from './Header';
-import { storyConfig } from '../test-utils';
+import { allModes } from '../../.storybook/modes';
 
 const meta: Meta<typeof Header> = {
   component: Header,
@@ -26,78 +26,104 @@ const TestComponent = () => (
   </div>
 );
 
-const generateLevelStory = (level: HeaderProps['level'], withAction = false) => {
-  return {
-    render: () => {
-      return (
-        <>
-          {(['legend', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'] as HeaderProps['as'][]).map((tag) => {
-            const Wrapper = tag === 'legend' ? 'fieldset' : 'section';
+const BaseLevelStory: Story = {
+  render: (args) => {
+    return (
+      <>
+        {(['legend', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'] as HeaderProps['as'][]).map((tag) => {
+          const Wrapper = tag === 'legend' ? 'fieldset' : 'section';
 
-            return (
-              <Wrapper key={tag}>
-                <Header
-                  as={tag}
-                  level={level}
-                  title={`Showcasing ${level} level with tag ${tag}`}
-                  action={withAction ? { text: 'Action', href: '#target' } : undefined}
-                />
-                <TestComponent />
-              </Wrapper>
-            );
-          })}
-        </>
-      );
-    },
-  };
+          return (
+            <Wrapper key={tag}>
+              <Header
+                as={tag}
+                level={args.level}
+                title={`Showcasing ${args.level} level with tag ${tag}`}
+                action={args.action}
+              />
+              <TestComponent />
+            </Wrapper>
+          );
+        })}
+      </>
+    );
+  },
 };
 
-/**
- * Helper to generate variants for `AllVariants` story.
- */
-const renderVariants = () => (
-  <div
-    className="header-variants"
-    style={{ display: 'flex', flexWrap: 'wrap', gap: '16px', maxWidth: '1200px' }}
-  >
-    {(['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'legend'] as const).map((as) => (
-      <Header key={as} as={as} title={`Header as ${as}`} />
-    ))}
-    {(['section', 'group'] as const).map((level) => (
-      <Header key={level} level={level} title={`Header level ${level}`} />
-    ))}
-    <Header
-      as="h2"
-      title="Header with Action"
-      action={{
-        'aria-label': 'Action',
-        text: 'Action',
-        onClick: () => alert('Action clicked!'),
-      }}
-    />
-    <Header
-      as="h2"
-      title="Header with link"
-      action={{
-        'aria-label': 'Action',
-        text: 'Action',
-        href: 'https://wise.com',
-      }}
-    />
-  </div>
-);
+export const GroupTrailingSpace: Story = {
+  ...BaseLevelStory,
+  args: {
+    ...BaseLevelStory.args,
+    level: 'group',
+  },
+};
+
+export const GroupTrailingSpaceWithAction: Story = {
+  ...BaseLevelStory,
+  args: {
+    ...BaseLevelStory.args,
+    level: 'group',
+    action: { text: 'Action', href: '#target' },
+  },
+};
 
-export const GroupTrailingSpace: Story = generateLevelStory('group');
-export const GroupTrailingSpaceWithAction: Story = generateLevelStory('group', true);
-export const SectionTrailingSpace: Story = generateLevelStory('section');
-export const SectionTrailingSpaceWithAction: Story = generateLevelStory('section', true);
+export const SectionTrailingSpace: Story = {
+  ...BaseLevelStory,
+  args: {
+    ...BaseLevelStory.args,
+    level: 'section',
+  },
+};
 
-export const AllVariants = storyConfig(
-  {
-    parameters: {
-      padding: '0',
+export const SectionTrailingSpaceWithAction: Story = {
+  ...BaseLevelStory,
+  args: {
+    ...BaseLevelStory.args,
+    level: 'section',
+    action: { text: 'Action', href: '#target' },
+  },
+};
+
+export const AllVariants: Story = {
+  parameters: {
+    padding: '0',
+    variants: ['default', 'dark', 'bright-green', 'forest-green', 'rtl'],
+    chromatic: {
+      dark: allModes.dark,
+      brightGreen: allModes.brightGreen,
+      forestGreen: allModes.forestGreen,
+      rtl: allModes.rtl,
     },
-    render: renderVariants,
   },
-  { variants: ['default', 'dark', 'bright-green', 'forest-green', 'rtl'] },
-);
+  render: () => (
+    <div
+      className="header-variants"
+      style={{ display: 'flex', flexWrap: 'wrap', gap: '16px', maxWidth: '1200px' }}
+    >
+      {(['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'legend'] as const).map((as) => (
+        <Header key={as} as={as} title={`Header as ${as}`} />
+      ))}
+      {(['section', 'group'] as const).map((level) => (
+        <Header key={level} level={level} title={`Header level ${level}`} />
+      ))}
+      <Header
+        as="h2"
+        title="Header with Action"
+        action={{
+          'aria-label': 'Action',
+          text: 'Action',
+          onClick: () => alert('Action clicked!'),
+        }}
+      />
+      <Header
+        as="h2"
+        title="Header with link"
+        action={{
+          'aria-label': 'Action',
+          text: 'Action',
+          href: 'https://wise.com',
+        }}
+      />
+    </div>
+  ),
+};

package/src/info/Info.story.tsx

@@ -1,9 +1,10 @@
 import { Meta, StoryObj } from '@storybook/react-webpack5';
 import { userEvent, within } from 'storybook/test';
 
-import { lorem10, storyConfig } from '../test-utils';
+import { lorem10 } from '../test-utils';
 
 import Info, { InfoPresentation } from '.';
+import { allModes } from '../../.storybook/modes';
 
 const meta = {
   component: Info,
@@ -25,12 +26,15 @@ export default meta;
 
 type Story = StoryObj<typeof meta>;
 
-export const Basic = storyConfig<typeof meta>(
-  {},
-  {
+export const Basic: Story = {
+  parameters: {
     variants: ['default', 'dark', 'rtl'],
+    chromatic: {
+      dark: allModes.dark,
+      rtl: allModes.rtl,
+    },
   },
-);
+};
 
 export const OpenedPopover = {
   parameters: {
@@ -44,9 +48,15 @@ export const OpenedPopover = {
   },
 } satisfies Story;
 
-export const OpenedPopoverMobile = storyConfig(OpenedPopover, {
-  variants: ['mobile'],
-});
+export const OpenedPopoverMobile: Story = {
+  ...OpenedPopover,
+  parameters: {
+    variants: ['mobile'],
+    chromatic: {
+      mobile: allModes.largeMobile,
+    },
+  },
+};
 
 export const OpenedModal = {
   ...OpenedPopover,
@@ -55,6 +65,12 @@ export const OpenedModal = {
   },
 } satisfies Story;
 
-export const OpenedModalMobile = storyConfig(OpenedModal, {
-  variants: ['mobile'],
-});
+export const OpenedModalMobile: Story = {
+  ...OpenedModal,
+  parameters: {
+    variants: ['mobile'],
+    chromatic: {
+      mobile: allModes.largeMobile,
+    },
+  },
+};

package/src/inlineAlert/InlineAlert.story.tsx

@@ -4,9 +4,13 @@ import InlineAlert, { InlineAlertProps } from './InlineAlert';
 import { lorem10, lorem40 } from '../test-utils';
 import Link from '../link';
 
+/**
+ * > **DEPRECATED** Use [InlinePrompt](?path=/docs/prompts-inlineprompt--docs) or [Field](?path=/docs/forms-field--docs) instead.
+ */
 export default {
   component: InlineAlert,
   title: 'Prompts/InlineAlert',
+  tags: ['deprecated'],
 } as Meta<InlineAlertProps>;
 
 export const Basic = () => {

package/src/inlineAlert/InlineAlert.tsx

@@ -22,13 +22,7 @@ const iconTypes = new Set<NonNullable<InlineAlertProps['type']>>([
 ]);
 
 /**
- * Avoid using `<InlineAlert>` component directly
- * it's for edge cases when `<Field />` isn't suitable for some reasons.
- *
- * Example:
- * ```
- * <Field sentiment={..} message={..}>..</Field>
- * ```
+ * @deprecated Use [<InlinePrompt />](https://storybook.wise.design/?path=/docs/prompts-inlineprompt--docs) or [<Field />](https://storybook.wise.design/?path=/docs/forms-field--docs) instead.
  */
 export default function InlineAlert({
   id,

package/src/instructionsList/InstructionsList.story.tsx

@@ -1,6 +1,5 @@
 import { Meta, StoryObj } from '@storybook/react-webpack5';
 import { fn } from 'storybook/test';
-import { storyConfig } from '../test-utils';
 
 import Link from '../link';
 

package/src/listItem/_stories/ListItem.layout.test.story.tsx

@@ -126,7 +126,7 @@ const getPropsForPreview = (args: PreviewStoryArgs) => {
 };
 
 // Create a completely untyped story object
-const ImageAlignmentStory: StoryObj<PreviewStoryArgs> = {
+export const ImageAlignment: StoryObj<PreviewStoryArgs> = {
   parameters: {
     controls: { disable: false },
   },
@@ -225,5 +225,3 @@ const ImageAlignmentStory: StoryObj<PreviewStoryArgs> = {
     );
   },
 };
-
-export const ImageAlignment = ImageAlignmentStory;

package/src/listItem/_stories/variants/ListItem.brightGreen.test.story.tsx

@@ -1,6 +1,7 @@
 import { Meta } from '@storybook/react-webpack5';
 import { ListItem, type ListItemProps } from '../../ListItem';
-import { generateVariantsForControl } from './helpers';
+import { VariantStory } from './helpers';
+import { allModes } from '../../../../.storybook/modes';
 
 export default {
   component: ListItem,
@@ -13,37 +14,78 @@ export default {
   },
 } satisfies Meta<ListItemProps>;
 
-export const Button = generateVariantsForControl('button', 'bright-green');
-export const ButtonAsLink = generateVariantsForControl('buttonAsLink', 'bright-green');
-export const ButtonPartiallyInteractive = generateVariantsForControl(
-  'partialButton',
-  'bright-green',
-);
-export const ButtonAsLinkPartiallyInteractive = generateVariantsForControl(
-  'partialButtonAsLink',
-  'bright-green',
-);
-export const IconButton = generateVariantsForControl('iconButton', 'bright-green');
-export const IconButtonAsLink = generateVariantsForControl('iconButtonAsLink', 'bright-green');
-export const IconButtonWithLabel = generateVariantsForControl(
-  'iconButtonWithLabel',
-  'bright-green',
-);
-export const IconButtonAsLinkWithLabel = generateVariantsForControl(
-  'iconButtonAsLinkWithLabel',
-  'bright-green',
-);
-export const IconButtonPartiallyInteractive = generateVariantsForControl(
-  'partialIconButton',
-  'bright-green',
-);
-export const IconButtonAsLinkPartiallyInteractive = generateVariantsForControl(
-  'partialIconButtonAsLink',
-  'bright-green',
-);
-export const Navigation = generateVariantsForControl('navigation', 'bright-green');
-export const NavigationAsButton = generateVariantsForControl('navigationAsButton', 'bright-green');
-export const Checkbox = generateVariantsForControl('checkbox', 'bright-green');
-export const Radio = generateVariantsForControl('radio', 'bright-green');
-export const Switch = generateVariantsForControl('switch', 'bright-green');
-export const NonInteractive = generateVariantsForControl('non-interactive', 'bright-green');
+const Default = {
+  ...VariantStory,
+  parameters: {
+    variants: ['bright-green'],
+    chromatic: {
+      'bright-green': allModes.brightGreen,
+    },
+  },
+  args: { variant: 'bright-green' },
+};
+
+export const Button = {
+  ...Default,
+  args: { ...Default.args, controlType: 'button' },
+};
+export const ButtonAsLink = {
+  ...Default,
+  args: { ...Default.args, controlType: 'buttonAsLink' },
+};
+export const ButtonPartiallyInteractive = {
+  ...Default,
+  args: { ...Default.args, controlType: 'partialButton' },
+};
+export const ButtonAsLinkPartiallyInteractive = {
+  ...Default,
+  args: { ...Default.args, controlType: 'partialButtonAsLink' },
+};
+export const IconButton = {
+  ...Default,
+  args: { ...Default.args, controlType: 'iconButton' },
+};
+export const IconButtonAsLink = {
+  ...Default,
+  args: { ...Default.args, controlType: 'iconButtonAsLink' },
+};
+export const IconButtonWithLabel = {
+  ...Default,
+  args: { ...Default.args, controlType: 'iconButtonWithLabel' },
+};
+export const IconButtonAsLinkWithLabel = {
+  ...Default,
+  args: { ...Default.args, controlType: 'iconButtonAsLinkWithLabel' },
+};
+export const IconButtonPartiallyInteractive = {
+  ...Default,
+  args: { ...Default.args, controlType: 'partialIconButton' },
+};
+export const IconButtonAsLinkPartiallyInteractive = {
+  ...Default,
+  args: { ...Default.args, controlType: 'partialIconButtonAsLink' },
+};
+export const Navigation = {
+  ...Default,
+  args: { ...Default.args, controlType: 'navigation' },
+};
+export const NavigationAsButton = {
+  ...Default,
+  args: { ...Default.args, controlType: 'navigationAsButton' },
+};
+export const Checkbox = {
+  ...Default,
+  args: { ...Default.args, controlType: 'checkbox' },
+};
+export const Radio = {
+  ...Default,
+  args: { ...Default.args, controlType: 'radio' },
+};
+export const Switch = {
+  ...Default,
+  args: { ...Default.args, controlType: 'switch' },
+};
+export const NonInteractive = {
+  ...Default,
+  args: { ...Default.args, controlType: 'non-interactive' },
+};

package/src/listItem/_stories/variants/ListItem.dark.test.story.tsx

@@ -1,6 +1,7 @@
 import { Meta } from '@storybook/react-webpack5';
 import { ListItem, type ListItemProps } from '../../ListItem';
-import { generateVariantsForControl } from './helpers';
+import { VariantStory } from './helpers';
+import { allModes } from '../../../../.storybook/modes';
 
 export default {
   component: ListItem,
@@ -13,31 +14,66 @@ export default {
   },
 } satisfies Meta<ListItemProps>;
 
-export const Button = generateVariantsForControl('button', 'dark');
-export const ButtonAsLink = generateVariantsForControl('buttonAsLink', 'dark');
-export const ButtonPartiallyInteractive = generateVariantsForControl('partialButton', 'dark');
-export const ButtonAsLinkPartiallyInteractive = generateVariantsForControl(
-  'partialButtonAsLink',
-  'dark',
-);
-export const IconButton = generateVariantsForControl('iconButton', 'dark');
-export const IconButtonAsLink = generateVariantsForControl('iconButtonAsLink', 'dark');
-export const IconButtonWithLabel = generateVariantsForControl('iconButtonWithLabel', 'dark');
-export const IconButtonAsLinkWithLabel = generateVariantsForControl(
-  'iconButtonAsLinkWithLabel',
-  'dark',
-);
-export const IconButtonPartiallyInteractive = generateVariantsForControl(
-  'partialIconButton',
-  'dark',
-);
-export const IconButtonAsLinkPartiallyInteractive = generateVariantsForControl(
-  'partialIconButtonAsLink',
-  'dark',
-);
-export const Navigation = generateVariantsForControl('navigation', 'dark');
-export const NavigationAsButton = generateVariantsForControl('navigationAsButton', 'dark');
-export const Checkbox = generateVariantsForControl('checkbox', 'dark');
-export const Radio = generateVariantsForControl('radio', 'dark');
-export const Switch = generateVariantsForControl('switch', 'dark');
-export const NonInteractive = generateVariantsForControl('non-interactive', 'dark');
+const Default = {
+  ...VariantStory,
+  parameters: {
+    variants: ['dark'],
+    chromatic: {
+      dark: allModes.dark,
+    },
+  },
+  args: { variant: 'dark' },
+};
+
+export const Button = {
+  ...Default,
+  args: { ...Default.args, controlType: 'button' },
+};
+export const ButtonAsLink = {
+  ...Default,
+  args: { ...Default.args, controlType: 'buttonAsLink' },
+};
+export const ButtonPartiallyInteractive = {
+  ...Default,
+  args: { ...Default.args, controlType: 'partialButton' },
+};
+export const ButtonAsLinkPartiallyInteractive = {
+  ...Default,
+  args: { ...Default.args, controlType: 'partialButtonAsLink' },
+};
+export const IconButton = {
+  ...Default,
+  args: { ...Default.args, controlType: 'iconButton' },
+};
+export const IconButtonAsLink = {
+  ...Default,
+  args: { ...Default.args, controlType: 'iconButtonAsLink' },
+};
+export const IconButtonWithLabel = {
+  ...Default,
+  args: { ...Default.args, controlType: 'iconButtonWithLabel' },
+};
+export const IconButtonAsLinkWithLabel = {
+  ...Default,
+  args: { ...Default.args, controlType: 'iconButtonAsLinkWithLabel' },
+};
+export const IconButtonPartiallyInteractive = {
+  ...Default,
+  args: { ...Default.args, controlType: 'partialIconButton' },
+};
+export const IconButtonAsLinkPartiallyInteractive = {
+  ...Default,
+  args: { ...Default.args, controlType: 'partialIconButtonAsLink', variant: 'dark' },
+};
+export const Navigation = { ...Default, args: { ...Default.args, controlType: 'navigation' } };
+export const NavigationAsButton = {
+  ...Default,
+  args: { ...Default.args, controlType: 'navigationAsButton' },
+};
+export const Checkbox = { ...Default, args: { ...Default.args, controlType: 'checkbox' } };
+export const Radio = { ...Default, args: { ...Default.args, controlType: 'radio' } };
+export const Switch = { ...Default, args: { ...Default.args, controlType: 'switch' } };
+export const NonInteractive = {
+  ...Default,
+  args: { ...Default.args, controlType: 'non-interactive' },
+};

package/src/listItem/_stories/variants/ListItem.forestGreen.test.story.tsx

@@ -1,6 +1,7 @@
 import { Meta } from '@storybook/react-webpack5';
 import { ListItem, type ListItemProps } from '../../ListItem';
-import { generateVariantsForControl } from './helpers';
+import { VariantStory } from './helpers';
+import { allModes } from '../../../../.storybook/modes';
 
 export default {
   component: ListItem,
@@ -13,37 +14,78 @@ export default {
   },
 } satisfies Meta<ListItemProps>;
 
-export const Button = generateVariantsForControl('button', 'forest-green');
-export const ButtonAsLink = generateVariantsForControl('buttonAsLink', 'forest-green');
-export const ButtonPartiallyInteractive = generateVariantsForControl(
-  'partialButton',
-  'forest-green',
-);
-export const ButtonAsLinkPartiallyInteractive = generateVariantsForControl(
-  'partialButtonAsLink',
-  'forest-green',
-);
-export const IconButton = generateVariantsForControl('iconButton', 'forest-green');
-export const IconButtonAsLink = generateVariantsForControl('iconButtonAsLink', 'forest-green');
-export const IconButtonWithLabel = generateVariantsForControl(
-  'iconButtonWithLabel',
-  'forest-green',
-);
-export const IconButtonAsLinkWithLabel = generateVariantsForControl(
-  'iconButtonAsLinkWithLabel',
-  'forest-green',
-);
-export const IconButtonPartiallyInteractive = generateVariantsForControl(
-  'partialIconButton',
-  'forest-green',
-);
-export const IconButtonAsLinkPartiallyInteractive = generateVariantsForControl(
-  'partialIconButtonAsLink',
-  'forest-green',
-);
-export const Navigation = generateVariantsForControl('navigation', 'forest-green');
-export const NavigationAsButton = generateVariantsForControl('navigationAsButton', 'forest-green');
-export const Checkbox = generateVariantsForControl('checkbox', 'forest-green');
-export const Radio = generateVariantsForControl('radio', 'forest-green');
-export const Switch = generateVariantsForControl('switch', 'forest-green');
-export const NonInteractive = generateVariantsForControl('non-interactive', 'forest-green');
+const Default = {
+  ...VariantStory,
+  parameters: {
+    variants: ['forest-green'],
+    chromatic: {
+      forestGreen: allModes.forestGreen,
+    },
+  },
+  args: { variant: 'forest-green' },
+};
+
+export const Button = {
+  ...Default,
+  args: { ...Default.args, controlType: 'button' },
+};
+export const ButtonAsLink = {
+  ...Default,
+  args: { ...Default.args, controlType: 'buttonAsLink' },
+};
+export const ButtonPartiallyInteractive = {
+  ...Default,
+  args: { ...Default.args, controlType: 'partialButton' },
+};
+export const ButtonAsLinkPartiallyInteractive = {
+  ...Default,
+  args: { ...Default.args, controlType: 'partialButtonAsLink' },
+};
+export const IconButton = {
+  ...Default,
+  args: { ...Default.args, controlType: 'iconButton' },
+};
+export const IconButtonAsLink = {
+  ...Default,
+  args: { ...Default.args, controlType: 'iconButtonAsLink' },
+};
+export const IconButtonWithLabel = {
+  ...Default,
+  args: { ...Default.args, controlType: 'iconButtonWithLabel' },
+};
+export const IconButtonAsLinkWithLabel = {
+  ...Default,
+  args: { ...Default.args, controlType: 'iconButtonAsLinkWithLabel' },
+};
+export const IconButtonPartiallyInteractive = {
+  ...Default,
+  args: { ...Default.args, controlType: 'partialIconButton' },
+};
+export const IconButtonAsLinkPartiallyInteractive = {
+  ...Default,
+  args: { ...Default.args, controlType: 'partialIconButtonAsLink' },
+};
+export const Navigation = {
+  ...Default,
+  args: { ...Default.args, controlType: 'navigation' },
+};
+export const NavigationAsButton = {
+  ...Default,
+  args: { ...Default.args, controlType: 'navigationAsButton' },
+};
+export const Checkbox = {
+  ...Default,
+  args: { ...Default.args, controlType: 'checkbox' },
+};
+export const Radio = {
+  ...Default,
+  args: { ...Default.args, controlType: 'radio' },
+};
+export const Switch = {
+  ...Default,
+  args: { ...Default.args, controlType: 'switch' },
+};
+export const NonInteractive = {
+  ...Default,
+  args: { ...Default.args, controlType: 'non-interactive' },
+};