@transferwise/components 46.105.5 → 46.107.0

package/src/listItem/ListItem.css

@@ -9,7 +9,7 @@
 .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;
@@ -105,7 +105,7 @@
     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;
@@ -231,8 +231,12 @@
     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;
   }
@@ -373,6 +377,10 @@
   .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;
@@ -654,7 +662,7 @@
 }
 .wds-list-item-body {
   grid-area: body;
-  align-items: center;
+  align-items: start;
   width: 100%;
   display: grid;
   grid-template-columns: 1fr max-content;
@@ -665,14 +673,27 @@
   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/listItem/ListItem.grid.css

@@ -9,7 +9,7 @@
 .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;
@@ -105,7 +105,7 @@
     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;
@@ -231,8 +231,12 @@
     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;
   }
@@ -373,4 +377,8 @@
   .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);
+  }
 }

package/src/listItem/ListItem.grid.less

@@ -1,3 +1,5 @@
+@import (reference) "./ListItem.vars.less";
+
 .wds-list-item {
   &-gridWrapper {
     display: grid;
@@ -10,9 +12,9 @@
           margin-top: -2px;
         }
       }
-  }
+    }
 
-    @container (min-width: 375px) {
+    @container (min-width: unit(@wds-list-item-cq-max + 1, px)) {
       .wds-list-item-control-wrapper {
         height: var(--wds-list-item-control-wrapper-height);
         align-content: center;
@@ -167,7 +169,7 @@
       }
     }
 
-    @container (min-width: 297px) and (max-width: 375px) {
+    @container (min-width: unit(@wds-list-item-cq-min + 1, px)) and (max-width: unit(@wds-list-item-cq-max, px)) {
       .wds-list-item-media-image{
         object-position: bottom left;
       }
@@ -396,9 +398,13 @@
               "body"
         }
       }
+
+      .wds-list-item-button-control--hasPrompt{
+        margin-top: var(--size-4);
+      }
     }
 
-    @container (max-width: 297px) {
+    @container (max-width: unit(@wds-list-item-cq-min, px)) {
       .wds-list-item-control-wrapper {
         align-content: start;
       }
@@ -631,6 +637,10 @@
           text-align: left;
         }
       }
+
+      .wds-list-item-button-control--hasPrompt{
+        margin-top: var(--size-4);
+      }
     }
   }
 }

package/src/listItem/ListItem.less

@@ -1,6 +1,7 @@
 @import "./ListItem.grid.less";
 @import "./Prompt/ListItemPrompt.less";
 @import (reference) "../../node_modules/@transferwise/neptune-css/src/less/ring.less";
+@import (reference) "./ListItem.vars.less";
 
 .wds-list-item {
   list-style: none;
@@ -164,7 +165,7 @@
 
   &-body {
     grid-area: body;
-    align-items: center;
+    align-items: start;
     width: 100%;
     display: grid;
     grid-template-columns: var(--wds-list-item-body-left, 1fr) var(--wds-list-item-body-right, max-content);
@@ -172,14 +173,25 @@
     word-break: break-word;
   }
 
-  &-title, &-title-value {
-      color: var(--color-content-primary);
+  &-titles,
+  &-value{
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+
+    @container (min-width: unit(@wds-list-item-cq-max + 1, px)) {
+      min-height: var(--wds-list-item-value-min-height, 100%);
+    }
   }
 
   &-value {
     text-align: right;
   }
 
+  &-title, &-title-value {
+      color: var(--color-content-primary);
+  }
+
   &-body-center {
     display: flex;
     flex-direction: row;
@@ -252,7 +264,7 @@
           }
       }
 
-      
+
   }
 
   .wds-list-item-spotlight__border{

package/src/listItem/ListItem.spec.tsx

@@ -1484,6 +1484,7 @@ describe('ListItem', () => {
       const listItem = screen.getByRole('listitem');
       expect(listItem).toHaveClass('wds-list-item-interactive');
       expect(listItem).toHaveClass('wds-list-item-spotlight-active');
+      expect(listItem.querySelector('.wds-list-item-spotlight__border')).not.toBeInTheDocument();
     });
 
     it('only fully interactive variant can have spotlight:inactive', () => {
@@ -1497,15 +1498,17 @@ describe('ListItem', () => {
       const listItem = screen.getByRole('listitem');
       expect(listItem).toHaveClass('wds-list-item-interactive');
       expect(listItem).toHaveClass('wds-list-item-spotlight-inactive');
+      expect(listItem.querySelector('.wds-list-item-spotlight__border')).toBeInTheDocument();
     });
 
-    it('non interactive variant can have spotlight', () => {
+    it('non interactive variant cannot have spotlight', () => {
       render(<ListItem title="Test Title" spotlight="inactive" />);
       const listItem = screen.getByRole('listitem');
       expect(listItem).toHaveClass('wds-list-item-non-interactive');
       expect(listItem).not.toHaveClass('wds-list-item-interactive');
       expect(listItem).not.toHaveClass('wds-list-item-spotlight-inactive');
       expect(listItem).not.toHaveClass('wds-list-item-spotlight-active');
+      expect(listItem.querySelector('.wds-list-item-spotlight__border')).not.toBeInTheDocument();
     });
   });
 });

package/src/listItem/ListItem.tsx

@@ -229,8 +229,13 @@ export const ListItem = ({
         )}
         id={id}
         aria-disabled={disabled}
+        style={
+          {
+            '--wds-list-item-value-min-height': mediaSize ? `${mediaSize}px` : undefined,
+          } as React.CSSProperties
+        }
       >
-        {spotlight === 'inactive' && (
+        {isFullyInteractive && spotlight === 'inactive' && (
           <svg aria-hidden="true" className="wds-list-item-spotlight__border">
             <rect />
           </svg>
@@ -256,11 +261,7 @@ export const ListItem = ({
             style={valueColumnWidth ? gridColumnsStyle : undefined}
           >
             {/* Title + Subtitle + Values - Group */}
-            <span
-              className={clsx({
-                'wds-list-item-body-center': title && !subtitle,
-              })}
-            >
+            <span className="wds-list-item-titles">
               {(() => {
                 const titles = [
                   <Body
@@ -287,8 +288,6 @@ export const ListItem = ({
               <span
                 className={clsx('wds-list-item-value', {
                   'flex-column': valueTitle !== undefined || valueSubtitle !== undefined,
-                  'wds-list-item-body-center':
-                    (valueTitle && !valueSubtitle) || (!valueTitle && valueSubtitle),
                 })}
               >
                 {(() => {
@@ -326,6 +325,8 @@ export const ListItem = ({
             <Body
               className={clsx('wds-list-item-control-wrapper', {
                 'wds-list-item-button-control': controlType === 'button',
+                'wds-list-item-button-control--hasPrompt':
+                  controlType === 'button' && Boolean(prompt),
               })}
               style={
                 {
@@ -351,7 +352,6 @@ type ViewProps = PropsWithChildren<{
 
 function View({
   children,
-  subtitle,
   additionalInfo,
   prompt,
   disabled,

package/src/listItem/ListItem.vars.less

@@ -0,0 +1,11 @@
+// List item has 3 unique layouts managed through container queries:
+// * width <= cq-min
+// * cq-min < width <= cq-max
+// * width > cq-max
+//
+// ⚠️ These values must be kept in sync with:
+// `packages/components/src/listItem/constants.ts`
+//
+// @see https://storybook.wise.design/?path=/story/content-listitem--responsiveness
+@wds-list-item-cq-min: 240;
+@wds-list-item-cq-max: 308;

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

@@ -1,7 +1,5 @@
 import { Fragment } from 'react';
 import { Meta, StoryObj } from '@storybook/react-webpack5';
-import { Bank, FastFlag, MultiCurrency, Receipt, Savings } from '@transferwise/icons';
-import Link from '../../link';
 import List from '../../list';
 import { ListItem, type ListItemProps } from '../ListItem';
 import { lorem10, lorem20, lorem5 } from '../../test-utils';
@@ -9,20 +7,8 @@ import portraitImage from '../../test-utils/assets/placeholder-landscape.svg';
 import landscapeImage from '../../test-utils/assets/placeholder-portrait.svg';
 import { SB_LIST_ITEM_CONTROLS as CONTROLS, SB_LIST_ITEM_MEDIA as MEDIA } from './subcomponents';
 import { ListItemMediaSize } from '../ListItemContext';
-
-const withSizedContainer = (width: number) => (Story: any) => (
-  <List
-    className="list-unstyled"
-    style={{
-      width,
-      display: 'flex',
-      flexDirection: 'column',
-      gap: 16,
-    }}
-  >
-    <Story />
-  </List>
-);
+import { withSizedContainer } from './helpers';
+import { LISTITEM_CQ } from '../constants';
 
 export default {
   title: 'Content/ListItem/tests/layout',
@@ -36,143 +22,6 @@ export default {
 } satisfies Meta<ListItemProps>;
 type Story = StoryObj<ListItemProps>;
 
-const variants = [
-  <ListItem
-    key="button"
-    title="Button only"
-    control={
-      <ListItem.Button priority="secondary-neutral" onClick={() => {}}>
-        Click me
-      </ListItem.Button>
-    }
-  />,
-  <ListItem
-    key="media"
-    title="With media"
-    subtitle="Short subtitle"
-    additionalInfo={<ListItem.AdditionalInfo>{lorem5}</ListItem.AdditionalInfo>}
-    media={
-      <ListItem.AvatarView>
-        <FastFlag />
-      </ListItem.AvatarView>
-    }
-  />,
-  <ListItem key="value" title="With value" valueTitle="100 GBP" valueSubtitle="100 USD" />,
-  <ListItem
-    key="prompt"
-    title="With prompt"
-    prompt={
-      <ListItem.Prompt sentiment="positive">
-        This is a prompt with <Link href="https://wise.com">a link</Link>.
-      </ListItem.Prompt>
-    }
-  />,
-  <ListItem
-    key="button-media"
-    title="Button + media"
-    media={
-      <ListItem.AvatarView>
-        <MultiCurrency />
-      </ListItem.AvatarView>
-    }
-    control={
-      <ListItem.Button priority="primary" onClick={() => {}}>
-        Action
-      </ListItem.Button>
-    }
-  />,
-  <ListItem
-    key="button-value"
-    title="Button + value"
-    valueTitle="42 EUR"
-    control={
-      <ListItem.Button priority="secondary-neutral" onClick={() => {}}>
-        Pay
-      </ListItem.Button>
-    }
-  />,
-  <ListItem
-    key="media-value"
-    valueColumnWidth={80}
-    title="Media + value"
-    subtitle="this column is 20% wide"
-    media={
-      <ListItem.AvatarView>
-        <Bank />
-      </ListItem.AvatarView>
-    }
-    valueTitle="1,000 USD"
-  />,
-  <ListItem
-    key="prompt-value"
-    title="Prompt + value"
-    valueTitle="10 GBP"
-    prompt={<ListItem.Prompt sentiment="warning">Warning prompt!</ListItem.Prompt>}
-  />,
-  <ListItem
-    key="media-prompt"
-    title="Media + prompt"
-    media={
-      <ListItem.AvatarView>
-        <Receipt />
-      </ListItem.AvatarView>
-    }
-    prompt={<ListItem.Prompt sentiment="positive">Discount available!</ListItem.Prompt>}
-  />,
-  <ListItem
-    key="most"
-    title="Everything but button"
-    subtitle="No control"
-    media={
-      <ListItem.AvatarView>
-        <Savings />
-      </ListItem.AvatarView>
-    }
-    valueTitle="999 GBP"
-    prompt={
-      <ListItem.Prompt sentiment="positive">
-        <Link href="https://wise.com">See details</Link>
-      </ListItem.Prompt>
-    }
-  />,
-  <ListItem
-    key="all"
-    title="All together"
-    subtitle="Everything in one"
-    media={
-      <ListItem.AvatarView>
-        <Savings />
-      </ListItem.AvatarView>
-    }
-    valueTitle="999 GBP"
-    prompt={
-      <ListItem.Prompt sentiment="positive">
-        <Link href="https://wise.com">See details</Link>
-      </ListItem.Prompt>
-    }
-    control={
-      <ListItem.Button priority="secondary-neutral" onClick={() => {}}>
-        Go
-      </ListItem.Button>
-    }
-  />,
-];
-
-export const Under320: Story = {
-  render: () => <>{variants}</>,
-  decorators: [withSizedContainer(320)],
-};
-
-export const Between321And399: Story = {
-  render: () => <>{variants}</>,
-  decorators: [withSizedContainer(360)],
-};
-
-export const Over400: Story = {
-  render: () => <>{variants}</>,
-  decorators: [withSizedContainer(400)],
-};
-
 export const LongButton: Story = {
   render: () => (
     <ListItem
@@ -190,7 +39,7 @@ export const LongButton: Story = {
       }
     />
   ),
-  decorators: [withSizedContainer(400)],
+  decorators: [withSizedContainer(400, false)],
 };
 
 export const GapsBetweenItems: Story = {
@@ -317,7 +166,13 @@ const ImageAlignmentStory: StoryObj<PreviewStoryArgs> = {
         )}
         <List
           className="list-unstyled"
-          style={{ display: 'grid', gridTemplateColumns: '340px 400px', gap: '16px' }}
+          style={{
+            display: 'grid',
+            gridTemplateColumns: [LISTITEM_CQ.MAX, LISTITEM_CQ.MAX + 10]
+              .map((size) => `${size}px`)
+              .join(' '),
+            gap: '16px',
+          }}
         >
           <Story />
         </List>

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

@@ -235,23 +235,16 @@ export const CopyAndPasteWithSnackbar: Story = storySourceWithoutNoise({
   },
 });
 
-export const Summary: Story = {
+export const Summary: Story = storySourceWithoutNoise({
   parameters: {
     docs: {
       canvas: {
         sourceState: 'shown',
       },
     },
-    backgrounds: {
-      default: 'light',
-      values: [
-        { name: 'light', value: '#f8f9fa' },
-        { name: 'dark', value: '#343a40' },
-      ],
-    },
   },
-  render: () => {
-    const listItems = (
+  render: function Summary() {
+    return (
       <List>
         <ListItem
           title="System maintenance"
@@ -327,19 +320,5 @@ export const Summary: Story = {
         />
       </List>
     );
-    return (
-      <>
-        <div style={{ padding: '24px', width: '450px' }}>{listItems}</div>
-        <div
-          style={{
-            padding: '24px',
-            width: '450px',
-            backgroundColor: 'var(--color-background-neutral)',
-          }}
-        >
-          {listItems}
-        </div>
-      </>
-    );
   },
-};
+});

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,
@@ -274,19 +274,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 +307,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} />

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>;
 
@@ -49,12 +50,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.