@transferwise/components 46.105.5 → 46.107.0

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> = {

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;

package/src/main.css

@@ -2653,7 +2653,7 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
 .wds-list-item-gridWrapper.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) {
+@container (min-width: 309px) {
   .wds-list-item-gridWrapper .wds-list-item-control-wrapper {
     height: var(--wds-list-item-control-wrapper-height);
     align-content: center;
@@ -2749,7 +2749,7 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
     grid-template-areas: "body";
   }
 }
-@container (min-width: 297px) and (max-width: 375px) {
+@container (min-width: 241px) and (max-width: 308px) {
   .wds-list-item-gridWrapper .wds-list-item-media-image {
     -o-object-position: bottom left;
        object-position: bottom left;
@@ -2875,8 +2875,12 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
     grid-template-rows: auto;
     grid-template-areas: "body";
   }
+  .wds-list-item-gridWrapper .wds-list-item-button-control--hasPrompt {
+    margin-top: 4px;
+    margin-top: var(--size-4);
+  }
 }
-@container (max-width: 297px) {
+@container (max-width: 240px) {
   .wds-list-item-gridWrapper .wds-list-item-control-wrapper {
     align-content: start;
   }
@@ -3017,6 +3021,10 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   .wds-list-item-gridWrapper .wds-list-item-body .wds-list-item-value {
     text-align: left;
   }
+  .wds-list-item-gridWrapper .wds-list-item-button-control--hasPrompt {
+    margin-top: 4px;
+    margin-top: var(--size-4);
+  }
 }
 .wds-list-item-prompt {
   grid-area: prompt;
@@ -3298,7 +3306,7 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
 }
 .wds-list-item-body {
   grid-area: body;
-  align-items: center;
+  align-items: start;
   width: 100%;
   display: grid;
   grid-template-columns: 1fr max-content;
@@ -3309,14 +3317,27 @@ html:not([dir="rtl"]) .np-flow-navigation--sm .np-flow-navigation__stepper {
   gap: var(--size-16);
   word-break: break-word;
 }
+.wds-list-item-titles,
+.wds-list-item-value {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+@container (min-width: 309px) {
+  .wds-list-item-titles,
+  .wds-list-item-value {
+    min-height: 100%;
+    min-height: var(--wds-list-item-value-min-height, 100%);
+  }
+}
+.wds-list-item-value {
+  text-align: right;
+}
 .wds-list-item-title,
 .wds-list-item-title-value {
   color: #37517e;
   color: var(--color-content-primary);
 }
-.wds-list-item-value {
-  text-align: right;
-}
 .wds-list-item-body-center {
   display: flex;
   flex-direction: row;

package/src/navigationOption/NavigationOption.story.tsx

@@ -15,10 +15,13 @@ import { fn } from 'storybook/test';
 
 type StoryArgs = NavigationOptionProps & { hasTitleOnly?: boolean };
 
+/**
+ * > ⚠️ This component is **deprecated** and superseded by the [new ListItem component](?path=/docs/content-listitem--docs) with the [ListItem.Navigation control](?path=/docs/content-listitem-listitem-navigation--docs).
+ */
 const meta: Meta<StoryArgs> = {
   component: NavigationOption,
   title: 'Option/NavigationOption',
-  tags: ['autodocs'],
+  tags: ['deprecated'],
   argTypes: {
     href: { control: 'text' },
     title: { control: 'text' },

package/src/navigationOption/NavigationOption.tsx

@@ -8,6 +8,14 @@ import { OptionProps, ReferenceType } from '../common/Option/Option';
 
 export type NavigationOptionProps = OptionProps;
 
+/**
+ * @deprecated Please use `<ListItem />` instead.
+ * @deprecatedSince 46.104.0
+ * @see [Source](../listItem/ListItem.tsx)
+ * @see [Storybook](https://storybook.wise.design/?path=/docs/content-listitem--docs)
+ * @see [Design docs](https://wise.design/components/list-item)
+ * @see [Release notes](https://transferwise.atlassian.net/wiki/spaces/DS/pages/3647251055/List+Item+release+notes)
+ */
 const NavigationOption = forwardRef<ReferenceType, NavigationOptionProps>(
   ({ as: component = 'button', disabled = false, onClick, className, ...rest }, reference) => {
     if ('href' in rest && rest.href) {

package/src/navigationOptionsList/NavigationOptionsList.story.tsx

@@ -2,9 +2,13 @@ import NavigationOption from '../navigationOption';
 
 import NavigationOptionsList from '.';
 
+/**
+ * > ⚠️ This component is **deprecated** and superseded by the [List](?path=/docs/content-list--docs), [new ListItem component](?path=/docs/content-listitem--docs) with the [ListItem.Navigation control](?path=/docs/content-listitem-listitem-navigation--docs).
+ */
 export default {
   component: NavigationOptionsList,
   title: 'Option/NavigationOptionsList',
+  tags: ['deprecated'],
 };
 
 export const Basic = () => {

package/src/navigationOptionsList/NavigationOptionsList.tsx

@@ -5,6 +5,15 @@ export interface NavigationOptionListProps {
   children: React.ReactNode;
 }
 
+/**
+ * @deprecated Please use `<List />` and `<ListItem />` instead.
+ * @deprecatedSince 46.104.0
+ * @see [List source](../list/List.tsx)
+ * @see [ListItem source](../listItem/ListItem.tsx)
+ * @see [Storybook](https://storybook.wise.design/?path=/docs/content-listitem--docs)
+ * @see [Design docs](https://wise.design/components/list-item)
+ * @see [Release notes](https://transferwise.atlassian.net/wiki/spaces/DS/pages/3647251055/List+Item+release+notes)
+ */
 const NavigationOptionList = ({ children }: NavigationOptionListProps) => {
   return (
     <ul className="np-navigation-options-list">

package/src/radioOption/RadioOption.story.tsx

@@ -5,9 +5,13 @@ import { FastFlag as FastFlagIcon } from '@transferwise/icons';
 import { Header, Nudge, Section, Title, Typography } from '..';
 import RadioOption, { RadioOptionProps } from './RadioOption';
 
+/**
+ * > ⚠️ This component is **deprecated** and superseded by the [new ListItem component](?path=/docs/content-listitem--docs) with the [ListItem.Radio control](?path=/docs/content-listitem-listitem-radio--docs).
+ */
 export default {
   component: RadioOption,
   title: 'Option/RadioOption',
+  tags: ['deprecated'],
   argTypes: {
     disabled: { control: 'boolean' },
     secondary: { control: 'text' },

package/src/radioOption/RadioOption.tsx

@@ -15,6 +15,14 @@ export interface RadioOptionProps<T extends string | number = string>
   isContainerAligned?: boolean;
 }
 
+/**
+ * @deprecated Please use `<ListItem />` instead.
+ * @deprecatedSince 46.104.0
+ * @see [Source](../listItem/ListItem.tsx)
+ * @see [Storybook](https://storybook.wise.design/?path=/docs/content-listitem--docs)
+ * @see [Design docs](https://wise.design/components/list-item)
+ * @see [Release notes](https://transferwise.atlassian.net/wiki/spaces/DS/pages/3647251055/List+Item+release+notes)
+ */
 function RadioOption<T extends string | number = ''>({
   'aria-label': ariaLabel,
   media,

package/src/summary/Summary.story.tsx

@@ -5,9 +5,13 @@ import { Status } from '../common';
 import { InfoPresentation } from '../info';
 import Summary, { type Props as SummaryProps } from './Summary';
 
+/**
+ * > ⚠️ This component is **deprecated** and superseded by the [new ListItem component](?path=/docs/content-listitem--docs).
+ */
 export default {
   component: Summary,
   title: 'Content/Summary',
+  tags: ['deprecated'],
   argTypes: {
     title: { control: 'text' },
   },

package/src/summary/Summary.tsx

@@ -90,6 +90,14 @@ export interface Props {
   title: ReactNode;
 }
 
+/**
+ * @deprecated Please use `<ListItem />` instead.
+ * @deprecatedSince 46.104.0
+ * @see [Source](../listItem/ListItem.tsx)
+ * @see [Storybook](https://storybook.wise.design/?path=/docs/content-listitem--docs)
+ * @see [Design docs](https://wise.design/components/list-item)
+ * @see [Release notes](https://transferwise.atlassian.net/wiki/spaces/DS/pages/3647251055/List+Item+release+notes)
+ */
 const Summary = ({
   action,
   as: Element = 'div',

package/src/switchOption/SwitchOption.story.tsx

@@ -6,10 +6,13 @@ import { Nudge, Title, Typography } from '..';
 
 import SwitchOption, { type SwitchOptionProps } from './SwitchOption';
 
+/**
+ * > ⚠️ This component is **deprecated** and superseded by the [new ListItem component](?path=/docs/content-listitem--docs) with the [ListItem.Switch control](?path=/docs/content-listitem-listitem-switch--docs).
+ */
 const meta = {
   component: SwitchOption,
   title: 'Option/SwitchOption',
-
+  tags: ['deprecated'],
   argTypes: {
     title: { control: 'text' },
     content: { control: 'text' },

package/src/switchOption/SwitchOption.tsx

@@ -26,6 +26,14 @@ const stopPropagation = (event?: MouseEvent<HTMLSpanElement>) => {
   }
 };
 
+/**
+ * @deprecated Please use `<ListItem />` instead.
+ * @deprecatedSince 46.104.0
+ * @see [Source](../listItem/ListItem.tsx)
+ * @see [Storybook](https://storybook.wise.design/?path=/docs/content-listitem--docs)
+ * @see [Design docs](https://wise.design/components/list-item)
+ * @see [Release notes](https://transferwise.atlassian.net/wiki/spaces/DS/pages/3647251055/List+Item+release+notes)
+ */
 const SwitchOption = ({
   checked,
   complex,

package/src/table/Table.story.tsx

@@ -5,7 +5,7 @@ import { TableRowType, TableRowClickableType } from './TableRow';
 
 export default {
   component: Table,
-  title: 'Option/Table',
+  title: 'Content/Table',
 } satisfies Meta<typeof Table>;
 
 type Story = StoryObj<typeof Table>;