@transferwise/components 46.106.0 → 46.108.0

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

@@ -3,8 +3,10 @@ import { Meta, StoryObj } from '@storybook/react-webpack5';
 import { MultiCurrency, Plus } from '@transferwise/icons';
 import { lorem5, lorem10 } from '../../test-utils';
 import Emphasis from '../../emphasis';
+import Link from '../../link';
 import List from '../../list';
 import { ListItem, type ListItemProps } from '../ListItem';
+import { LISTITEM_CQ } from '../constants';
 import {
   SB_LIST_ITEM_CONTROLS as CONTROLS,
   SB_LIST_ITEM_ADDITIONAL_INFO as ADDITIONAL_INFO,
@@ -12,7 +14,6 @@ import {
   SB_LIST_ITEM_MEDIA as MEDIA,
 } from './subcomponents';
 import { disableControls, storySourceWithoutNoise, withoutKey } from './helpers';
-import Link from '../../link';
 
 const hideControls = disableControls([
   'additionalInfo',
@@ -46,7 +47,6 @@ export default {
     'ListItem.Image': ListItem.Image,
   },
   title: 'Content/ListItem',
-  tags: ['early-access'],
   parameters: {
     docs: {
       toc: true,
@@ -58,6 +58,7 @@ export default {
     valueTitle: '100 GBP',
     valueSubtitle: '100 USD',
     disabled: false,
+    disabledPromptMessage: undefined,
     spotlight: undefined,
     inverted: false,
     valueColumnWidth: undefined,
@@ -274,19 +275,15 @@ export const Playground: StoryObj<PreviewStoryArgs> = {
   decorators: [withoutKey],
 };
 
-/**
- * ListItem uses container queries under the hood, which means its layout self-adjusts based on
- * the available space. At the 100% zoom level, these breakpoints correspond to
- * containers under `290px`, those between `291px and 380px`, and finally everything including
- * and above `381px`. <br />
- * This also supports high levels of zoom for assistive tech users.
- */
 export const Responsiveness: StoryObj<PreviewStoryArgs> = {
   parameters: {
     docs: {
       canvas: {
         sourceState: 'hidden',
       },
+      description: {
+        story: `ListItem uses container queries under the hood, which means its layout self-adjusts based on the available space. At the 100% zoom level, these breakpoints correspond to containers under \`${LISTITEM_CQ.MIN}px\`, those between \`${LISTITEM_CQ.MIN + 1}px and ${LISTITEM_CQ.MAX}px\`, and finally everything including and above \`${LISTITEM_CQ.MAX + 1}px\`.\n\nThis also supports high levels of zoom for assistive tech users.`,
+      },
     },
   },
   argTypes: {
@@ -311,7 +308,17 @@ export const Responsiveness: StoryObj<PreviewStoryArgs> = {
       <List
         as="ol"
         className="list-unstyled"
-        style={{ display: 'grid', gridTemplateColumns: '290px 350px 381px', gap: 16 }}
+        style={{
+          display: 'grid',
+          gridTemplateColumns: [
+            LISTITEM_CQ.MIN,
+            Math.round((LISTITEM_CQ.MAX - LISTITEM_CQ.MIN) / 2 + LISTITEM_CQ.MIN),
+            510,
+          ]
+            .map((width) => `${width}px`)
+            .join(' '),
+          gap: 16,
+        }}
       >
         <ListItem {...props} {...previewProps} />
         <ListItem {...props} {...previewProps} />
@@ -558,183 +565,6 @@ export const Interactivity: StoryObj<PreviewStoryArgs> = storySourceWithoutNoise
   },
 });
 
-/**
- * While most disabled states will show as grayed out, the navigation control switches from chevron
- * to a new icon for improved user experience and accessibility. <br />
- * For the same reason, only the control part of the List Item is dimmed, while all the content
- * retains high contrast and interactivity.
- *
- * Please refer to the [design documentation](https://wise.design/components/list-item#accessibility:~:text=-,Disabled%20states,-) for more details
- */
-export const Disabled: Story = {
-  parameters: {
-    docs: {
-      canvas: {
-        sourceState: 'hidden',
-      },
-    },
-    controls: { disable: true },
-    knobs: { disable: true },
-  },
-  render: (args) => (
-    <List>
-      <ListItem
-        disabled
-        media={
-          <ListItem.AvatarView>
-            <MultiCurrency />
-          </ListItem.AvatarView>
-        }
-        title="Navigation"
-        subtitle={lorem5}
-        control={<ListItem.Navigation onClick={() => {}} />}
-      />
-      <ListItem
-        disabled
-        media={
-          <ListItem.AvatarView>
-            <MultiCurrency />
-          </ListItem.AvatarView>
-        }
-        title="Button secondary neutral"
-        subtitle={lorem5}
-        control={<ListItem.Button priority="secondary-neutral">Secondary Neutral</ListItem.Button>}
-      />
-      <ListItem
-        disabled
-        media={
-          <ListItem.AvatarView>
-            <MultiCurrency />
-          </ListItem.AvatarView>
-        }
-        title="Button primary"
-        subtitle={lorem5}
-        control={<ListItem.Button priority="primary">Primary</ListItem.Button>}
-      />
-      <ListItem
-        disabled
-        media={
-          <ListItem.AvatarView>
-            <MultiCurrency />
-          </ListItem.AvatarView>
-        }
-        title="Button tertiary"
-        subtitle={lorem5}
-        control={<ListItem.Button priority="tertiary">Tertiary</ListItem.Button>}
-      />
-      <ListItem
-        disabled
-        media={
-          <ListItem.AvatarView>
-            <MultiCurrency />
-          </ListItem.AvatarView>
-        }
-        title="Icon Button"
-        subtitle={lorem5}
-        control={
-          <ListItem.IconButton>
-            <Plus />
-          </ListItem.IconButton>
-        }
-      />
-      <ListItem
-        disabled
-        media={
-          <ListItem.AvatarView>
-            <MultiCurrency />
-          </ListItem.AvatarView>
-        }
-        title="Checkbox"
-        subtitle={lorem5}
-        control={<ListItem.Checkbox />}
-      />
-      <ListItem
-        disabled
-        media={
-          <ListItem.AvatarView>
-            <MultiCurrency />
-          </ListItem.AvatarView>
-        }
-        title="Checkbox checked"
-        subtitle={lorem5}
-        control={<ListItem.Checkbox checked />}
-      />
-      <ListItem
-        disabled
-        media={
-          <ListItem.AvatarView>
-            <MultiCurrency />
-          </ListItem.AvatarView>
-        }
-        title="Checkbox indeterminate"
-        subtitle={lorem5}
-        control={<ListItem.Checkbox indeterminate />}
-      />
-      <ListItem
-        disabled
-        media={
-          <ListItem.AvatarView>
-            <MultiCurrency />
-          </ListItem.AvatarView>
-        }
-        title="Switch on"
-        subtitle={lorem5}
-        control={<ListItem.Switch checked onClick={() => {}} />}
-      />
-      <ListItem
-        disabled
-        media={
-          <ListItem.AvatarView>
-            <MultiCurrency />
-          </ListItem.AvatarView>
-        }
-        title="Switch off"
-        subtitle={lorem5}
-        control={<ListItem.Switch onClick={() => {}} />}
-      />
-      <ListItem
-        disabled
-        media={
-          <ListItem.AvatarView>
-            <MultiCurrency />
-          </ListItem.AvatarView>
-        }
-        title="Switch off"
-        subtitle={lorem5}
-        control={<ListItem.Radio name="radio" checked />}
-      />
-      <ListItem
-        disabled
-        media={
-          <ListItem.AvatarView>
-            <MultiCurrency />
-          </ListItem.AvatarView>
-        }
-        title="Switch off"
-        subtitle={lorem5}
-        control={<ListItem.Radio name="radios" />}
-      />
-      <ListItem
-        disabled
-        media={
-          <ListItem.AvatarView>
-            <MultiCurrency />
-          </ListItem.AvatarView>
-        }
-        title="Switch off"
-        subtitle={lorem5}
-        additionalInfo={ADDITIONAL_INFO.interactive}
-        prompt={PROMPTS.interactive}
-        control={
-          <ListItem.Button partiallyInteractive onClick={() => {}}>
-            Click me
-          </ListItem.Button>
-        }
-      />
-    </List>
-  ),
-};
-
 /**
  * For backwards compatibility, all of the ListItem's content elements accept `ReactNode`.
  * That said, most of them should be fed with plain text only. The exception is `valueTitle`

package/src/listItem/_stories/helpers.tsx

@@ -1,5 +1,6 @@
 import { StoryObj, type Decorator } from '@storybook/react-webpack5';
 import type { ListItemProps } from '../ListItem';
+import { LISTITEM_CQ } from '../constants';
 
 type Story = StoryObj<ListItemProps>;
 
@@ -42,6 +43,7 @@ export const withoutKey: Decorator = (Story, { args }) => {
   const key = [
     args.previewInteractivity,
     args?.disabled ? 'disabled' : 'enabled',
+    args?.disabledPromptMessage ? 'withReason' : 'withoutReason',
     args?.inverted ? 'desc' : 'asc',
   ].join('-');
 
@@ -49,12 +51,27 @@ export const withoutKey: Decorator = (Story, { args }) => {
 };
 
 export const withSizedContainer =
-  (width: number): Decorator =>
-  (Story, { args }) => (
-    <div style={{ width, border: '1px dashed #ccc', padding: '8px' }}>
-      <Story />
-    </div>
-  );
+  (size: 'small' | 'medium' | 'large' | number = 'large', border = true): Decorator =>
+  (Story, { args }) => {
+    const width =
+      typeof size === 'number'
+        ? size
+        : {
+            small: LISTITEM_CQ.MIN,
+            medium: Math.round((LISTITEM_CQ.MAX - LISTITEM_CQ.MIN) / 2 + LISTITEM_CQ.MIN),
+            large: LISTITEM_CQ.MAX + 1,
+          }[size];
+    return (
+      <div
+        style={{
+          width,
+          border: border ? '1px dashed #ccc' : undefined,
+        }}
+      >
+        <Story />
+      </div>
+    );
+  };
 
 /**
  * Not all stories need access to all controls as it causes unnecessary UI noise.

package/src/listItem/_stories/subcomponents.tsx

@@ -1,9 +1,10 @@
 import { ReactNode } from 'react';
 import { Edit, Briefcase, Plane } from '@transferwise/icons';
-import { ListItem } from '../ListItem';
 import { fn } from 'storybook/test';
-import Link from '../../link';
 import { Flag } from '@wise/art';
+import { lorem20 } from '../../test-utils';
+import Link from '../../link';
+import { ListItem } from '../ListItem';
 
 export type SB_ListItem_ControlType =
   | 'non-interactive'
@@ -30,6 +31,17 @@ export const SB_LIST_ITEM_TEXT = {
   subtitle: 'And it also has a subtitle',
   valueTitle: '100 GBP',
   valueSubtitle: '200 USD',
+  longTitle: `This is a long title. ${lorem20}`,
+  longSubtitle: `And it also has a long subtitle. ${lorem20}`,
+  longValueTitle: (
+    <>
+      This value title
+      <br />
+      is made to span
+      <br />
+      across few lines
+    </>
+  ),
 };
 
 export const SB_LIST_ITEM_CONTROLS: Record<SB_ListItem_ControlType, ReactNode> = {
@@ -132,6 +144,11 @@ export const SB_LIST_ITEM_MEDIA = {
       src="https://wise.com/public-resources/assets/spend/card-asset/medium/v2/personal_green_wise_2023_active.svg"
     />
   ),
+  avatarFlag: (
+    <ListItem.AvatarView>
+      <Flag code="de" />
+    </ListItem.AvatarView>
+  ),
   avatarSingle: (
     <ListItem.AvatarView>
       <Briefcase />

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

@@ -12,7 +12,7 @@ export default {
     actions: { disable: true },
     knobs: { disable: true },
   },
-  decorators: [withSizedContainer(350)],
+  decorators: [withSizedContainer('medium')],
 } satisfies Meta<ListItemProps>;
 
 export const Button = generateVariantsForControl('button');

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

@@ -0,0 +1,55 @@
+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_MEDIA as MEDIA,
+  SB_LIST_ITEM_PROMPTS as PROMPT,
+  SB_LIST_ITEM_TEXT as TEXT,
+  SB_ListItem_ControlType as ControlType,
+} from '../subcomponents';
+
+export default {
+  component: ListItem,
+  title: 'Content/ListItem/tests/variants/surface: neutral',
+  tags: ['!autodocs'],
+  parameters: {
+    controls: { disable: true },
+    actions: { disable: true },
+    knobs: { disable: true },
+    padding: '0',
+  },
+  decorators: [
+    (Story) => (
+      <div
+        style={{
+          backgroundColor: 'var(--color-background-neutral)',
+          padding: 80,
+          minHeight: '100%',
+        }}
+      >
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<ListItemProps>;
+
+type Story = StoryObj<ListItemProps>;
+
+export const OnNeutralBackdrop: Story = {
+  render: () => (
+    <List>
+      <ListItem
+        title={TEXT.title}
+        subtitle={TEXT.subtitle}
+        valueTitle={TEXT.valueTitle}
+        valueSubtitle={TEXT.valueSubtitle}
+        additionalInfo={INFO.nonInteractive}
+        control={CONTROLS.button}
+        prompt={PROMPT.nonInteractive}
+        media={MEDIA.avatarDouble}
+      />
+    </List>
+  ),
+};

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

@@ -12,7 +12,7 @@ export default {
     actions: { disable: true },
     knobs: { disable: true },
   },
-  decorators: [withSizedContainer(275)],
+  decorators: [withSizedContainer('small')],
 } satisfies Meta<ListItemProps>;
 
 export const Button = generateVariantsForControl('button');

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

@@ -14,7 +14,8 @@ import {
 type Story = StoryObj<ListItemProps>;
 type VariantPartial = { title: string } & Partial<ListItemProps>;
 
-const { title, subtitle, valueTitle, valueSubtitle } = TEXT;
+const { title, subtitle, valueTitle, valueSubtitle, longTitle, longSubtitle, longValueTitle } =
+  TEXT;
 const prompt = PROMPT.nonInteractive;
 const media = MEDIA.avatarSingle;
 
@@ -32,18 +33,36 @@ export const generateVariantsForControl = (
   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 },
@@ -55,6 +74,14 @@ export const generateVariantsForControl = (
     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,

package/src/listItem/constants.ts

@@ -0,0 +1,15 @@
+/**
+ * List item has 3 unique layouts managed through container queries:
+ * 1. width <= cq-min
+ * 2. cq-min < width <= cq-max
+ * 3. width > cq-max
+ *
+ * ⚠️ NB: These values must be kept in sync with:
+ * `packages/components/src/listItem/ListItem.vars.less`
+ *
+ * @see https://storybook.wise.design/?path=/story/content-listitem--responsiveness
+ */
+export const LISTITEM_CQ = {
+  MIN: 240,
+  MAX: 308,
+} as const;