@transferwise/components 46.119.5 → 46.120.1

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

@@ -1,6 +1,6 @@
 import { Meta } from '@storybook/react-webpack5';
 import { ListItem, type ListItemProps } from '../../ListItem';
-import { generateVariantsForControl } from './helpers';
+import { VariantStory } from './helpers';
 import { withSizedContainer } from '../helpers';
 
 export default {
@@ -15,20 +15,40 @@ export default {
   decorators: [withSizedContainer('medium')],
 } satisfies Meta<ListItemProps>;
 
-export const Button = generateVariantsForControl('button');
-export const ButtonAsLink = generateVariantsForControl('buttonAsLink');
-export const ButtonPartiallyInteractive = generateVariantsForControl('partialButton');
-export const ButtonAsLinkPartiallyInteractive = generateVariantsForControl('partialButtonAsLink');
-export const IconButton = generateVariantsForControl('iconButton');
-export const IconButtonAsLink = generateVariantsForControl('iconButtonAsLink');
-export const IconButtonWithLabel = generateVariantsForControl('iconButtonWithLabel');
-export const IconButtonAsLinkWithLabel = generateVariantsForControl('iconButtonAsLinkWithLabel');
-export const IconButtonPartiallyInteractive = generateVariantsForControl('partialIconButton');
-export const IconButtonAsLinkPartiallyInteractive =
-  generateVariantsForControl('partialIconButtonAsLink');
-export const Navigation = generateVariantsForControl('navigation');
-export const NavigationAsButton = generateVariantsForControl('navigationAsButton');
-export const Checkbox = generateVariantsForControl('checkbox');
-export const Radio = generateVariantsForControl('radio');
-export const Switch = generateVariantsForControl('switch');
-export const NonInteractive = generateVariantsForControl('non-interactive');
+export const Button = {
+  ...VariantStory,
+  args: { controlType: 'button' },
+};
+export const ButtonAsLink = { ...VariantStory, args: { controlType: 'buttonAsLink' } };
+export const ButtonPartiallyInteractive = {
+  ...VariantStory,
+  args: { controlType: 'partialButton' },
+};
+export const ButtonAsLinkPartiallyInteractive = {
+  ...VariantStory,
+  args: { controlType: 'partialButtonAsLink' },
+};
+export const IconButton = { ...VariantStory, args: { controlType: 'iconButton' } };
+export const IconButtonAsLink = { ...VariantStory, args: { controlType: 'iconButtonAsLink' } };
+export const IconButtonWithLabel = {
+  ...VariantStory,
+  args: { controlType: 'iconButtonWithLabel' },
+};
+export const IconButtonAsLinkWithLabel = {
+  ...VariantStory,
+  args: { controlType: 'iconButtonAsLinkWithLabel' },
+};
+export const IconButtonPartiallyInteractive = {
+  ...VariantStory,
+  args: { controlType: 'partialIconButton' },
+};
+export const IconButtonAsLinkPartiallyInteractive = {
+  ...VariantStory,
+  args: { controlType: 'partialIconButtonAsLink' },
+};
+export const Navigation = { ...VariantStory, args: { controlType: 'navigation' } };
+export const NavigationAsButton = { ...VariantStory, args: { controlType: 'navigationAsButton' } };
+export const Checkbox = { ...VariantStory, args: { controlType: 'checkbox' } };
+export const Radio = { ...VariantStory, args: { controlType: 'radio' } };
+export const Switch = { ...VariantStory, args: { controlType: 'switch' } };
+export const NonInteractive = { ...VariantStory, args: { controlType: 'non-interactive' } };

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

@@ -7,7 +7,6 @@ import {
   SB_LIST_ITEM_MEDIA as MEDIA,
   SB_LIST_ITEM_PROMPTS as PROMPT,
   SB_LIST_ITEM_TEXT as TEXT,
-  SB_ListItem_ControlType as ControlType,
 } from '../subcomponents';
 
 export default {

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

@@ -6,7 +6,7 @@ import {
   SB_LIST_ITEM_CONTROLS as CONTROLS,
   SB_LIST_ITEM_PROMPTS as PROMPT,
 } from '../subcomponents';
-import { generateVariantsForControl } from './helpers';
+import { VariantStory } from './helpers';
 
 export default {
   component: ListItem,
@@ -21,23 +21,43 @@ export default {
 
 type Story = StoryObj<ListItemProps>;
 
-export const Button = generateVariantsForControl('button');
-export const ButtonAsLink = generateVariantsForControl('buttonAsLink');
-export const ButtonPartiallyInteractive = generateVariantsForControl('partialButton');
-export const ButtonAsLinkPartiallyInteractive = generateVariantsForControl('partialButtonAsLink');
-export const IconButton = generateVariantsForControl('iconButton');
-export const IconButtonAsLink = generateVariantsForControl('iconButtonAsLink');
-export const IconButtonWithLabel = generateVariantsForControl('iconButtonWithLabel');
-export const IconButtonAsLinkWithLabel = generateVariantsForControl('iconButtonAsLinkWithLabel');
-export const IconButtonPartiallyInteractive = generateVariantsForControl('partialIconButton');
-export const IconButtonAsLinkPartiallyInteractive =
-  generateVariantsForControl('partialIconButtonAsLink');
-export const Navigation = generateVariantsForControl('navigation');
-export const NavigationAsButton = generateVariantsForControl('navigationAsButton');
-export const Checkbox = generateVariantsForControl('checkbox');
-export const Radio = generateVariantsForControl('radio');
-export const Switch = generateVariantsForControl('switch');
-export const NonInteractive = generateVariantsForControl('non-interactive');
+export const Button = {
+  ...VariantStory,
+  args: { controlType: 'button' },
+};
+export const ButtonAsLink = { ...VariantStory, args: { controlType: 'buttonAsLink' } };
+export const ButtonPartiallyInteractive = {
+  ...VariantStory,
+  args: { controlType: 'partialButton' },
+};
+export const ButtonAsLinkPartiallyInteractive = {
+  ...VariantStory,
+  args: { controlType: 'partialButtonAsLink' },
+};
+export const IconButton = { ...VariantStory, args: { controlType: 'iconButton' } };
+export const IconButtonAsLink = { ...VariantStory, args: { controlType: 'iconButtonAsLink' } };
+export const IconButtonWithLabel = {
+  ...VariantStory,
+  args: { controlType: 'iconButtonWithLabel' },
+};
+export const IconButtonAsLinkWithLabel = {
+  ...VariantStory,
+  args: { controlType: 'iconButtonAsLinkWithLabel' },
+};
+export const IconButtonPartiallyInteractive = {
+  ...VariantStory,
+  args: { controlType: 'partialIconButton' },
+};
+export const IconButtonAsLinkPartiallyInteractive = {
+  ...VariantStory,
+  args: { controlType: 'partialIconButtonAsLink' },
+};
+export const Navigation = { ...VariantStory, args: { controlType: 'navigation' } };
+export const NavigationAsButton = { ...VariantStory, args: { controlType: 'navigationAsButton' } };
+export const Checkbox = { ...VariantStory, args: { controlType: 'checkbox' } };
+export const Radio = { ...VariantStory, args: { controlType: 'radio' } };
+export const Switch = { ...VariantStory, args: { controlType: 'switch' } };
+export const NonInteractive = { ...VariantStory, args: { controlType: 'non-interactive' } };
 
 export const ButtonControlLabel: Story = {
   render: () => (

package/src/listItem/_stories/variants/ListItem.rtl.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,78 @@ export default {
   },
 } satisfies Meta<ListItemProps>;
 
-export const Button = generateVariantsForControl('button', 'rtl');
-export const ButtonAsLink = generateVariantsForControl('buttonAsLink', 'rtl');
-export const ButtonPartiallyInteractive = generateVariantsForControl('partialButton', 'rtl');
-export const ButtonAsLinkPartiallyInteractive = generateVariantsForControl(
-  'partialButtonAsLink',
-  'rtl',
-);
-export const IconButton = generateVariantsForControl('iconButton', 'rtl');
-export const IconButtonAsLink = generateVariantsForControl('iconButtonAsLink', 'rtl');
-export const IconButtonWithLabel = generateVariantsForControl('iconButtonWithLabel', 'rtl');
-export const IconButtonAsLinkWithLabel = generateVariantsForControl(
-  'iconButtonAsLinkWithLabel',
-  'rtl',
-);
-export const IconButtonPartiallyInteractive = generateVariantsForControl(
-  'partialIconButton',
-  'rtl',
-);
-export const IconButtonAsLinkPartiallyInteractive = generateVariantsForControl(
-  'partialIconButtonAsLink',
-  'rtl',
-);
-export const Navigation = generateVariantsForControl('navigation', 'rtl');
-export const NavigationAsButton = generateVariantsForControl('navigationAsButton', 'rtl');
-export const Checkbox = generateVariantsForControl('checkbox', 'rtl');
-export const Radio = generateVariantsForControl('radio', 'rtl');
-export const Switch = generateVariantsForControl('switch', 'rtl');
-export const NonInteractive = generateVariantsForControl('non-interactive', 'rtl');
+const Default = {
+  ...VariantStory,
+  parameters: {
+    variants: ['rtl'],
+    chromatic: {
+      rtl: allModes.rtl,
+    },
+  },
+  args: { variant: 'rtl' },
+};
+
+export const Button = {
+  ...Default,
+  args: { ...Default.args, variant: '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.small.test.story.tsx

@@ -1,6 +1,6 @@
 import { Meta } from '@storybook/react-webpack5';
 import { ListItem, type ListItemProps } from '../../ListItem';
-import { generateVariantsForControl } from './helpers';
+import { VariantStory } from './helpers';
 import { withSizedContainer } from '../helpers';
 
 export default {
@@ -15,20 +15,67 @@ export default {
   decorators: [withSizedContainer('small')],
 } satisfies Meta<ListItemProps>;
 
-export const Button = generateVariantsForControl('button');
-export const ButtonAsLink = generateVariantsForControl('buttonAsLink');
-export const ButtonPartiallyInteractive = generateVariantsForControl('partialButton');
-export const ButtonAsLinkPartiallyInteractive = generateVariantsForControl('partialButtonAsLink');
-export const IconButton = generateVariantsForControl('iconButton');
-export const IconButtonAsLink = generateVariantsForControl('iconButtonAsLink');
-export const IconButtonWithLabel = generateVariantsForControl('iconButtonWithLabel');
-export const IconButtonAsLinkWithLabel = generateVariantsForControl('iconButtonAsLinkWithLabel');
-export const IconButtonPartiallyInteractive = generateVariantsForControl('partialIconButton');
-export const IconButtonAsLinkPartiallyInteractive =
-  generateVariantsForControl('partialIconButtonAsLink');
-export const Navigation = generateVariantsForControl('navigation');
-export const NavigationAsButton = generateVariantsForControl('navigationAsButton');
-export const Checkbox = generateVariantsForControl('checkbox');
-export const Radio = generateVariantsForControl('radio');
-export const Switch = generateVariantsForControl('switch');
-export const NonInteractive = generateVariantsForControl('non-interactive');
+export const Button = {
+  ...VariantStory,
+  args: { controlType: 'button' },
+};
+export const ButtonAsLink = {
+  ...VariantStory,
+  args: { controlType: 'buttonAsLink' },
+};
+export const ButtonPartiallyInteractive = {
+  ...VariantStory,
+  args: { controlType: 'partialButton' },
+};
+export const ButtonAsLinkPartiallyInteractive = {
+  ...VariantStory,
+  args: { controlType: 'partialButtonAsLink' },
+};
+export const IconButton = {
+  ...VariantStory,
+  args: { controlType: 'iconButton' },
+};
+export const IconButtonAsLink = {
+  ...VariantStory,
+  args: { controlType: 'iconButtonAsLink' },
+};
+export const IconButtonWithLabel = {
+  ...VariantStory,
+  args: { controlType: 'iconButtonWithLabel' },
+};
+export const IconButtonAsLinkWithLabel = {
+  ...VariantStory,
+  args: { controlType: 'iconButtonAsLinkWithLabel' },
+};
+export const IconButtonPartiallyInteractive = {
+  ...VariantStory,
+  args: { controlType: 'partialIconButton' },
+};
+export const IconButtonAsLinkPartiallyInteractive = {
+  ...VariantStory,
+  args: { controlType: 'partialIconButtonAsLink' },
+};
+export const Navigation = {
+  ...VariantStory,
+  args: { controlType: 'navigation' },
+};
+export const NavigationAsButton = {
+  ...VariantStory,
+  args: { controlType: 'navigationAsButton' },
+};
+export const Checkbox = {
+  ...VariantStory,
+  args: { controlType: 'checkbox' },
+};
+export const Radio = {
+  ...VariantStory,
+  args: { controlType: 'radio' },
+};
+export const Switch = {
+  ...VariantStory,
+  args: { controlType: 'switch' },
+};
+export const NonInteractive = {
+  ...VariantStory,
+  args: { controlType: 'non-interactive' },
+};

package/src/listItem/_stories/variants/helpers.tsx

@@ -1,5 +1,4 @@
 import { StoryObj } from '@storybook/react-webpack5';
-import { StoryConfig, storyConfig } from '../../../test-utils';
 import List from '../../../list';
 import { ListItem, type ListItemProps } from '../../ListItem';
 import {
@@ -11,144 +10,148 @@ import {
   SB_ListItem_ControlType as ControlType,
 } from '../subcomponents';
 
-type Story = StoryObj<ListItemProps>;
 type VariantPartial = { title: string } & Partial<ListItemProps>;
+type Variant = 'default' | 'dark' | 'rtl' | 'forest-green' | 'bright-green' | 'mobile' | '400%';
 
 const { title, subtitle, valueTitle, valueSubtitle, longTitle, longSubtitle, longValueTitle } =
   TEXT;
 const prompt = PROMPT.nonInteractive;
 const media = MEDIA.avatarSingle;
 
-export const generateVariantsForControl = (
-  controlType: ControlType,
-  variant: NonNullable<StoryConfig['variants']>[number] = 'default',
-): Story => {
-  const control = CONTROLS[controlType];
-  const isInteractive = [
-    'partialButton',
-    'partialButtonAsLink',
-    'partialIconButton',
-    'partialIconButtonAsLink',
-  ].includes(controlType);
-  const additionalInfo = isInteractive ? INFO.interactive : INFO.nonInteractive;
-  const instances = [
-    { title },
-    { title: longTitle },
-    { title, valueTitle },
-    { title, valueTitle: longValueTitle },
-    { title: longTitle, valueTitle },
-    { title, subtitle },
-    { title, subtitle: longSubtitle },
-    { title, additionalInfo },
-    { title, valueTitle, valueSubtitle },
-    { title, valueTitle: longValueTitle, valueSubtitle },
-    { title, subtitle, inverted: true },
-    { title, subtitle, valueTitle },
-    { title, subtitle, valueTitle, inverted: true },
-    { title, subtitle, valueTitle, valueSubtitle },
-    {
-      title: longTitle,
-      subtitle: longSubtitle,
-      valueTitle,
-      valueSubtitle,
-      additionalInfo: INFO.nonInteractive,
-    },
-    { title, subtitle, valueTitle, valueSubtitle, inverted: true },
-    { media, title },
-    { media, title: longTitle },
-    { media, title, valueTitle },
-    { media, title: longTitle, valueTitle },
-    { media, title: longTitle, valueSubtitle },
-    { media, title, valueTitle: longValueTitle },
-    { media, title, valueTitle: longValueTitle, valueSubtitle },
-    { media, title, subtitle },
-    { media, title: longTitle, subtitle },
-    { media, title, valueTitle, valueSubtitle },
-    { media, title, valueTitle },
-    { media, title, valueSubtitle },
-    { media, title, subtitle },
-    { media, title, additionalInfo },
-    { media, title, subtitle, valueTitle },
-    { media, title, subtitle, valueTitle, valueSubtitle },
-    { media, title, subtitle, additionalInfo: INFO.nonInteractive },
-    isInteractive ? { media, title, subtitle, additionalInfo: INFO.interactive } : null,
-    { media, title, subtitle, additionalInfo, valueTitle },
-    { media, title, subtitle, additionalInfo, valueTitle, valueSubtitle },
-    {
-      media,
-      title: longTitle,
-      subtitle: longSubtitle,
-      valueTitle,
-      valueSubtitle,
-      additionalInfo: INFO.nonInteractive,
-    },
-    { media, title, subtitle, additionalInfo, valueTitle, valueSubtitle, prompt },
-    {
-      media,
-      title,
-      subtitle,
-      additionalInfo,
-      valueTitle,
-      valueSubtitle,
-      prompt: PROMPT.interactive,
-    },
-    {
-      media,
-      title,
-      subtitle,
-      additionalInfo,
-      valueTitle,
-      valueSubtitle,
-      prompt: PROMPT.interactive,
-      inverted: true,
-    },
-    {
-      media,
-      title,
-      subtitle,
-      additionalInfo,
-      valueTitle,
-      valueSubtitle,
-      prompt: PROMPT.interactive,
-      spotlight: 'active',
-    },
-    {
-      media,
-      title,
-      subtitle,
-      additionalInfo,
-      valueTitle,
-      valueSubtitle,
-      prompt: PROMPT.interactive,
-      spotlight: 'inactive',
-    },
-    {
-      media,
-      title,
-      subtitle,
-      additionalInfo,
-      valueTitle,
-      valueSubtitle,
-      prompt: PROMPT.interactive,
-      spotlight: 'inactive',
-      disabled: true,
-    },
-  ].filter(Boolean) as VariantPartial[];
+type VariantStoryProps = {
+  controlType: ControlType;
+  variant?: Variant;
+};
+
+type VariantStory = StoryObj<VariantStoryProps>;
+
+export const VariantStory: VariantStory = {
+  render: ({ controlType, variant = 'default' }) => {
+    const control = CONTROLS[controlType];
+    const isInteractive = [
+      'partialButton',
+      'partialButtonAsLink',
+      'partialIconButton',
+      'partialIconButtonAsLink',
+    ].includes(controlType);
+    const additionalInfo = isInteractive ? INFO.interactive : INFO.nonInteractive;
+    const instances = [
+      { title },
+      { title: longTitle },
+      { title, valueTitle },
+      { title, valueTitle: longValueTitle },
+      { title: longTitle, valueTitle },
+      { title, subtitle },
+      { title, subtitle: longSubtitle },
+      { title, additionalInfo },
+      { title, valueTitle, valueSubtitle },
+      { title, valueTitle: longValueTitle, valueSubtitle },
+      { title, subtitle, inverted: true },
+      { title, subtitle, valueTitle },
+      { title, subtitle, valueTitle, inverted: true },
+      { title, subtitle, valueTitle, valueSubtitle },
+      {
+        title: longTitle,
+        subtitle: longSubtitle,
+        valueTitle,
+        valueSubtitle,
+        additionalInfo: INFO.nonInteractive,
+      },
+      { title, subtitle, valueTitle, valueSubtitle, inverted: true },
+      { media, title },
+      { media, title: longTitle },
+      { media, title, valueTitle },
+      { media, title: longTitle, valueTitle },
+      { media, title: longTitle, valueSubtitle },
+      { media, title, valueTitle: longValueTitle },
+      { media, title, valueTitle: longValueTitle, valueSubtitle },
+      { media, title, subtitle },
+      { media, title: longTitle, subtitle },
+      { media, title, valueTitle, valueSubtitle },
+      { media, title, valueTitle },
+      { media, title, valueSubtitle },
+      { media, title, subtitle },
+      { media, title, additionalInfo },
+      { media, title, subtitle, valueTitle },
+      { media, title, subtitle, valueTitle, valueSubtitle },
+      { media, title, subtitle, additionalInfo: INFO.nonInteractive },
+      isInteractive ? { media, title, subtitle, additionalInfo: INFO.interactive } : null,
+      { media, title, subtitle, additionalInfo, valueTitle },
+      { media, title, subtitle, additionalInfo, valueTitle, valueSubtitle },
+      {
+        media,
+        title: longTitle,
+        subtitle: longSubtitle,
+        valueTitle,
+        valueSubtitle,
+        additionalInfo: INFO.nonInteractive,
+      },
+      { media, title, subtitle, additionalInfo, valueTitle, valueSubtitle, prompt },
+      {
+        media,
+        title,
+        subtitle,
+        additionalInfo,
+        valueTitle,
+        valueSubtitle,
+        prompt: PROMPT.interactive,
+      },
+      {
+        media,
+        title,
+        subtitle,
+        additionalInfo,
+        valueTitle,
+        valueSubtitle,
+        prompt: PROMPT.interactive,
+        inverted: true,
+      },
+      {
+        media,
+        title,
+        subtitle,
+        additionalInfo,
+        valueTitle,
+        valueSubtitle,
+        prompt: PROMPT.interactive,
+        spotlight: 'active',
+      },
+      {
+        media,
+        title,
+        subtitle,
+        additionalInfo,
+        valueTitle,
+        valueSubtitle,
+        prompt: PROMPT.interactive,
+        spotlight: 'inactive',
+      },
+      {
+        media,
+        title,
+        subtitle,
+        additionalInfo,
+        valueTitle,
+        valueSubtitle,
+        prompt: PROMPT.interactive,
+        spotlight: 'inactive',
+        disabled: true,
+      },
+    ].filter(Boolean) as VariantPartial[];
 
-  return storyConfig(
-    {
-      render: () => (
-        <List>
-          {instances.map((instance, instanceIndex) => (
-            <ListItem
-              key={`${variant}-${controlType}-${instanceIndex}`}
-              control={control}
-              {...instance}
-            />
-          ))}
-        </List>
-      ),
-    },
-    { variants: [variant] },
-  );
+    return (
+      <List>
+        {instances.map((instance) => (
+          <ListItem
+            key={`${variant}-${controlType}-${JSON.stringify(instance)}`}
+            control={control}
+            {...instance}
+          />
+        ))}
+      </List>
+    );
+  },
+  parameters: {
+    variants: ['default'],
+  },
 };