@transferwise/components 46.105.3 → 46.105.5

package/src/listItem/ListItem.grid.less

@@ -3,7 +3,21 @@
     display: grid;
     gap: var(--size-4) var(--size-16);
 
+    &.wds-list-item-hasMedia-hasControl,
+    &.wds-list-item-hasMedia-noControl {
+      &.wds-list-item-noInfo-hasPrompt:not(:has(.wds-list-item-subtitle-value, .wds-list-item-subtitle)) {
+        .wds-list-item-prompt {
+          margin-top: -2px;
+        }
+      }
+  }
+
     @container (min-width: 375px) {
+      .wds-list-item-control-wrapper {
+        height: var(--wds-list-item-control-wrapper-height);
+        align-content: center;
+      }
+
       .wds-list-item-media-image{
         object-position: center;
       }
@@ -158,6 +172,10 @@
         object-position: bottom left;
       }
 
+      .wds-list-item-control-wrapper {
+        align-content: start;
+      }
+
       &.wds-list-item-hasMedia-hasControl {
         &.wds-list-item-hasInfo-hasPrompt {
           grid-template-columns: 1fr auto;
@@ -381,9 +399,12 @@
     }
 
     @container (max-width: 297px) {
+      .wds-list-item-control-wrapper {
+        align-content: start;
+      }
       &.wds-list-item-hasMedia-hasControl {
         &.wds-list-item-hasInfo-hasPrompt {
-          grid-template-columns: auto 1fr;
+          grid-template-columns: 1fr auto;
           grid-template-rows: auto auto auto;
           grid-template-areas:
               "body control"
@@ -402,7 +423,7 @@
         }
 
         &.wds-list-item-hasInfo-noPrompt {
-          grid-template-columns: auto 1fr;
+          grid-template-columns: 1fr auto;
           grid-template-rows: auto auto;
           grid-template-areas:
               "body control"
@@ -418,7 +439,7 @@
         }
 
         &.wds-list-item-noInfo-hasPrompt {
-          grid-template-columns: auto 1fr;
+          grid-template-columns: 1fr auto;
           grid-template-rows: auto auto;
           grid-template-areas:
               "body control"
@@ -434,7 +455,7 @@
         }
 
         &.wds-list-item-noInfo-noPrompt {
-          grid-template-columns: auto 1fr;
+          grid-template-columns: 1fr auto;
           grid-template-rows: auto;
           grid-template-areas:
               "body control";
@@ -450,8 +471,8 @@
 
       &.wds-list-item-hasMedia-noControl {
         &.wds-list-item-hasInfo-hasPrompt {
-          grid-template-columns: auto;
-          grid-template-rows: auto auto;
+          grid-template-columns: 1fr;
+          grid-template-rows: auto auto auto;
           grid-template-areas:
               "body"
               "info"
@@ -459,15 +480,15 @@
         }
 
         &.wds-list-item-hasInfo-noPrompt {
-          grid-template-columns: auto;
-          grid-template-rows: auto auto auto;
+          grid-template-columns: 1fr;
+          grid-template-rows: auto auto;
           grid-template-areas:
               "body"
               "info"
         }
 
         &.wds-list-item-noInfo-hasPrompt {
-          grid-template-columns: auto;
+          grid-template-columns: 1fr;
           grid-template-rows: auto auto;
           grid-template-areas:
               "body"
@@ -495,6 +516,7 @@
               "info control"
               "prompt prompt";
 
+
               &:has(.wds-list-item-button-control) {
                 grid-template-columns: 1fr;
                 grid-template-rows: auto;

package/src/listItem/ListItem.less

@@ -198,8 +198,6 @@
 
   &-control-wrapper {
       grid-area: control;
-      align-content: center;
-      height: var(--wds-list-item-control-wrapper-height);
   }
 
   &-navigation {

package/src/listItem/_stories/helpers.tsx

@@ -48,6 +48,14 @@ export const withoutKey: Decorator = (Story, { args }) => {
   return <Story key={key} />;
 };
 
+export const withSizedContainer =
+  (width: number): Decorator =>
+  (Story, { args }) => (
+    <div style={{ width, border: '1px dashed #ccc', padding: '8px' }}>
+      <Story />
+    </div>
+  );
+
 /**
  * Not all stories need access to all controls as it causes unnecessary UI noise.
  */

package/src/listItem/_stories/subcomponents.tsx

@@ -25,6 +25,13 @@ export type SB_ListItem_ControlType =
   | 'radio'
   | 'switch';
 
+export const SB_LIST_ITEM_TEXT = {
+  title: 'This is a title',
+  subtitle: 'And it also has a subtitle',
+  valueTitle: '100 GBP',
+  valueSubtitle: '200 USD',
+};
+
 export const SB_LIST_ITEM_CONTROLS: Record<SB_ListItem_ControlType, ReactNode> = {
   'non-interactive': null,
   button: <ListItem.Button onClick={() => {}}>Click me</ListItem.Button>,

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

@@ -0,0 +1,49 @@
+import { Meta } from '@storybook/react-webpack5';
+import { ListItem, type ListItemProps } from '../../ListItem';
+import { generateVariantsForControl } from './helpers';
+
+export default {
+  component: ListItem,
+  title: 'Content/ListItem/tests/variants/theme: bright-green',
+  tags: ['!autodocs'],
+  parameters: {
+    controls: { disable: true },
+    actions: { disable: true },
+    knobs: { disable: true },
+  },
+} 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');

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

@@ -0,0 +1,43 @@
+import { Meta } from '@storybook/react-webpack5';
+import { ListItem, type ListItemProps } from '../../ListItem';
+import { generateVariantsForControl } from './helpers';
+
+export default {
+  component: ListItem,
+  title: 'Content/ListItem/tests/variants/theme: dark',
+  tags: ['!autodocs'],
+  parameters: {
+    controls: { disable: true },
+    actions: { disable: true },
+    knobs: { disable: true },
+  },
+} 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');

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

@@ -0,0 +1,49 @@
+import { Meta } from '@storybook/react-webpack5';
+import { ListItem, type ListItemProps } from '../../ListItem';
+import { generateVariantsForControl } from './helpers';
+
+export default {
+  component: ListItem,
+  title: 'Content/ListItem/tests/variants/theme: forest-green',
+  tags: ['!autodocs'],
+  parameters: {
+    controls: { disable: true },
+    actions: { disable: true },
+    knobs: { disable: true },
+  },
+} 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');

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

@@ -0,0 +1,34 @@
+import { Meta } from '@storybook/react-webpack5';
+import { ListItem, type ListItemProps } from '../../ListItem';
+import { generateVariantsForControl } from './helpers';
+import { withSizedContainer } from '../helpers';
+
+export default {
+  component: ListItem,
+  title: 'Content/ListItem/tests/variants/cq: medium',
+  tags: ['!autodocs'],
+  parameters: {
+    controls: { disable: true },
+    actions: { disable: true },
+    knobs: { disable: true },
+  },
+  decorators: [withSizedContainer(350)],
+} 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');

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

@@ -0,0 +1,130 @@
+import { Meta, StoryObj } from '@storybook/react-webpack5';
+import List from '../../../list';
+import { ListItem, type ListItemProps } from '../../ListItem';
+import {
+  SB_LIST_ITEM_ADDITIONAL_INFO as INFO,
+  SB_LIST_ITEM_CONTROLS as CONTROLS,
+  SB_LIST_ITEM_PROMPTS as PROMPT,
+} from '../subcomponents';
+import { generateVariantsForControl } from './helpers';
+
+export default {
+  component: ListItem,
+  title: 'Content/ListItem/tests/variants/theme: personal',
+  tags: ['!autodocs'],
+  parameters: {
+    controls: { disable: true },
+    actions: { disable: true },
+    knobs: { disable: true },
+  },
+} satisfies Meta<ListItemProps>;
+
+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 ButtonControlLabel: Story = {
+  render: () => (
+    <List>
+      <ListItem
+        title="Fully interactive button."
+        subtitle="It uses default content hierarchy."
+        valueTitle="100 GBP"
+        valueSubtitle="200 USD"
+        additionalInfo={INFO.nonInteractive}
+        control={CONTROLS.button}
+        prompt={PROMPT.nonInteractive}
+      />
+
+      <ListItem
+        inverted
+        title="Fully interactive button."
+        subtitle="It uses inverted content hierarchy."
+        valueTitle="100 GBP"
+        valueSubtitle="200 USD"
+        additionalInfo={INFO.nonInteractive}
+        control={CONTROLS.button}
+        prompt={PROMPT.nonInteractive}
+      />
+
+      <ListItem
+        title="Fully interactive button as HTML anchor."
+        subtitle="It uses default content hierarchy."
+        valueTitle="100 GBP"
+        valueSubtitle="200 USD"
+        additionalInfo={INFO.nonInteractive}
+        control={CONTROLS.buttonAsLink}
+        prompt={PROMPT.nonInteractive}
+      />
+
+      <ListItem
+        inverted
+        title="Fully interactive button as HTML anchor."
+        subtitle="It uses inverted content hierarchy."
+        valueTitle="100 GBP"
+        valueSubtitle="200 USD"
+        additionalInfo={INFO.nonInteractive}
+        control={CONTROLS.buttonAsLink}
+        prompt={PROMPT.nonInteractive}
+      />
+
+      <ListItem
+        title="Partially interactive button."
+        subtitle="It uses default content hierarchy."
+        valueTitle="100 GBP"
+        valueSubtitle="200 USD"
+        additionalInfo={INFO.nonInteractive}
+        control={CONTROLS.partialButton}
+        prompt={PROMPT.nonInteractive}
+      />
+
+      <ListItem
+        inverted
+        title="Partially interactive button."
+        subtitle="It uses inverted content hierarchy."
+        valueTitle="100 GBP"
+        valueSubtitle="200 USD"
+        additionalInfo={INFO.nonInteractive}
+        control={CONTROLS.partialButton}
+        prompt={PROMPT.nonInteractive}
+      />
+
+      <ListItem
+        title="Partially interactive button as HTML anchor."
+        subtitle="It uses default content hierarchy."
+        valueTitle="100 GBP"
+        valueSubtitle="200 USD"
+        additionalInfo={INFO.nonInteractive}
+        control={CONTROLS.partialButtonAsLink}
+        prompt={PROMPT.nonInteractive}
+      />
+
+      <ListItem
+        inverted
+        title="Partially interactive button as HTML anchor."
+        subtitle="It uses inverted content hierarchy."
+        valueTitle="100 GBP"
+        valueSubtitle="200 USD"
+        additionalInfo={INFO.nonInteractive}
+        control={CONTROLS.partialButtonAsLink}
+        prompt={PROMPT.nonInteractive}
+      />
+    </List>
+  ),
+};

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

@@ -0,0 +1,43 @@
+import { Meta } from '@storybook/react-webpack5';
+import { ListItem, type ListItemProps } from '../../ListItem';
+import { generateVariantsForControl } from './helpers';
+
+export default {
+  component: ListItem,
+  title: 'Content/ListItem/tests/variants/rtl',
+  tags: ['!autodocs'],
+  parameters: {
+    controls: { disable: true },
+    actions: { disable: true },
+    knobs: { disable: true },
+  },
+} 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');

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

@@ -0,0 +1,34 @@
+import { Meta } from '@storybook/react-webpack5';
+import { ListItem, type ListItemProps } from '../../ListItem';
+import { generateVariantsForControl } from './helpers';
+import { withSizedContainer } from '../helpers';
+
+export default {
+  component: ListItem,
+  title: 'Content/ListItem/tests/variants/cq: small',
+  tags: ['!autodocs'],
+  parameters: {
+    controls: { disable: true },
+    actions: { disable: true },
+    knobs: { disable: true },
+  },
+  decorators: [withSizedContainer(275)],
+} 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');

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

@@ -0,0 +1,127 @@
+import { StoryObj } from '@storybook/react-webpack5';
+import { StoryConfig, storyConfig } from '../../../test-utils';
+import List from '../../../list';
+import { ListItem, type ListItemProps } from '../../ListItem';
+import {
+  SB_LIST_ITEM_ADDITIONAL_INFO as INFO,
+  SB_LIST_ITEM_CONTROLS as CONTROLS,
+  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';
+
+type Story = StoryObj<ListItemProps>;
+type VariantPartial = { title: string } & Partial<ListItemProps>;
+
+const { title, subtitle, valueTitle, valueSubtitle } = 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, valueTitle },
+    { title, subtitle },
+    { title, additionalInfo },
+    { title, valueTitle, valueSubtitle },
+    { title, subtitle, inverted: true },
+    { title, subtitle, valueTitle },
+    { title, subtitle, valueTitle, inverted: true },
+    { title, subtitle, valueTitle, valueSubtitle },
+    { title, subtitle, valueTitle, valueSubtitle, inverted: true },
+    { media, title },
+    { media, title, valueTitle },
+    { media, title, 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, 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] },
+  );
+};