@transferwise/components 46.119.5 → 46.120.0

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' },
+};

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' },
+};