@transferwise/components 0.0.0-experimental-11565f2 → 0.0.0-experimental-4add690

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

package/src/main.css

@@ -3298,7 +3298,7 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
 }
 .wds-list-item-body {
   grid-area: body;
-  align-items: start;
+  align-items: center;
   width: 100%;
   display: grid;
   grid-template-columns: 1fr max-content;
@@ -3309,13 +3309,6 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   gap: var(--size-16);
   word-break: break-word;
 }
-@container (min-width: 375px) {
-  .wds-list-item-titles,
-  .wds-list-item-value {
-    min-height: 100%;
-    min-height: var(--wds-list-item-value-min-height, 100%);
-  }
-}
 .wds-list-item-title,
 .wds-list-item-title-value {
   color: #37517e;
@@ -3323,9 +3316,6 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
 }
 .wds-list-item-value {
   text-align: right;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
 }
 .wds-list-item-body-center {
   display: flex;

package/src/listItem/ListItem.vars.less

@@ -1,8 +0,0 @@
-// List item has 3 unique layouts managed through container queries:
-// * width <= cq-min
-// * cq-min < width <= cq-max
-// * width > cq-max
-//
-// @see https://storybook.wise.design/?path=/story/content-listitem--responsiveness
-@wds-list-item-cq-min: 297px;
-@wds-list-item-cq-max: 375px;