@transferwise/components 0.0.0-experimental-a12c97e → 0.0.0-experimental-302d967

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

@@ -2,7 +2,6 @@ import { useState } from 'react';
 import { Meta, StoryObj } from '@storybook/react-webpack5';
 import { MultiCurrency, Plus } from '@transferwise/icons';
 import { lorem5, lorem10 } from '../../test-utils';
-import Emphasis from '../../emphasis';
 import { ListItem, Props as ItemProps } from '../ListItem';
 import {
   SB_LIST_ITEM_CONTROLS as CONTROLS,
@@ -10,20 +9,6 @@ import {
   SB_LIST_ITEM_PROMPTS as PROMPTS,
   SB_LIST_ITEM_MEDIA as MEDIA,
 } from './subcomponents';
-import { disableControls, storySourceWithoutNoise, withoutKey } from './helpers';
-import Link from '../../link';
-
-const hideControls = disableControls([
-  'additionalInfo',
-  'control',
-  'prompt',
-  'media',
-  'className',
-  'id',
-  'role',
-  'aria-labelledby',
-  'as',
-]);
 
 /**
  * List Items let users review or select options from a dynamic list.<br />
@@ -271,17 +256,16 @@ export const Playground: StoryObj<PreviewStoryArgs> = {
     previewAdditionalInfoFull: 'non-interactive',
     previewAdditionalInfoPartial: 'non-interactive',
   },
-  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 />
+ * containers under `320px`, those between `321px and 399px`, and finally everything including
+ * and above `400px`. <br />
  * This also supports high levels of zoom for assistive tech users.
  */
-export const Responsiveness: StoryObj<PreviewStoryArgs> = {
+export const Responsiveness: Story = {
   parameters: {
     docs: {
       canvas: {
@@ -289,32 +273,42 @@ export const Responsiveness: StoryObj<PreviewStoryArgs> = {
       },
     },
   },
-  argTypes: {
-    ...hideControls(),
-    ...previewArgTypes,
-  },
-  args: {
-    subtitle: lorem10,
-    previewInteractivity: 'fully-interactive',
-    previewPrompt: 'interactive',
-    previewMedia: 'image',
-    previewControlFull: 'Button',
-    previewControlPartial: 'Button',
-    previewAdditionalInfoFull: 'non-interactive',
-    previewAdditionalInfoPartial: 'non-interactive',
-  },
-  decorators: [withoutKey],
   render: (args) => {
-    const [props, previewProps] = getPropsForPreview(args);
-
     return (
       <ol
         className="list-unstyled"
-        style={{ display: 'grid', gridTemplateColumns: '290px 350px 381px', gap: 16 }}
+        style={{ display: 'grid', gridTemplateColumns: '320px 360px 400px', gap: 16 }}
       >
-        <ListItem {...props} {...previewProps} />
-        <ListItem {...props} {...previewProps} />
-        <ListItem {...props} {...previewProps} />
+        <div style={{ width: '320px' }}>
+          <ListItem
+            {...args}
+            subtitle={lorem10}
+            additionalInfo={ADDITIONAL_INFO.nonInteractive}
+            control={CONTROLS.button}
+            media={MEDIA.image}
+            prompt={PROMPTS.interactive}
+          />
+        </div>
+        <div style={{ width: '360px' }}>
+          <ListItem
+            {...args}
+            subtitle={lorem10}
+            additionalInfo={ADDITIONAL_INFO.nonInteractive}
+            control={CONTROLS.button}
+            media={MEDIA.image}
+            prompt={PROMPTS.interactive}
+          />
+        </div>
+        <div style={{ width: '400px' }}>
+          <ListItem
+            {...args}
+            subtitle={lorem10}
+            additionalInfo={<div />}
+            control={CONTROLS.button}
+            media={MEDIA.image}
+            prompt={PROMPTS.interactive}
+          />
+        </div>
       </ol>
     );
   },
@@ -333,7 +327,7 @@ export const Responsiveness: StoryObj<PreviewStoryArgs> = {
  * **NB:** This behaviour is slightly different on mobile platforms as they have more control over
  * layout calculations.
  */
-export const ContentRatio: StoryObj<PreviewStoryArgs> = {
+export const ContentRatio: Story = {
   parameters: {
     docs: {
       canvas: {
@@ -342,56 +336,45 @@ export const ContentRatio: StoryObj<PreviewStoryArgs> = {
     },
   },
   args: {
-    valueColumnWidth: 70,
-    subtitle: lorem5,
     valueTitle: `${lorem5} ${lorem5}`,
     valueSubtitle: lorem5,
-    previewInteractivity: 'fully-interactive',
-    previewPrompt: 'interactive',
-    previewMedia: 'image',
-    previewControlFull: 'Button',
-    previewControlPartial: 'Button',
-    previewAdditionalInfoFull: 'non-interactive',
-    previewAdditionalInfoPartial: 'non-interactive',
-    as: 'div',
-  },
-  argTypes: {
-    ...hideControls(['disabled', 'spotlight']),
-    ...previewArgTypes,
+    valueColumnWidth: 70,
   },
   render: (args) => {
-    const [props, previewProps] = getPropsForPreview(args);
-
-    return <ListItem {...props} {...previewProps} />;
+    return (
+      <ListItem
+        {...args}
+        subtitle={lorem5}
+        additionalInfo={ADDITIONAL_INFO.nonInteractive}
+        control={CONTROLS.button}
+        media={MEDIA.image}
+        prompt={PROMPTS.interactive}
+      />
+    );
   },
 };
 
 /**
  * List item supports default and inverted title and description to allow for further flexibility
- * in the component. No other content elements are affected by this prop.
+ * in the component.
  *
  * Refer to the [design documentation](https://wise.design/components/list-item#content-hierarchy) for more details.
  */
-export const ContentHierarchy: StoryObj<PreviewStoryArgs> = {
+export const ContentHierarchy: Story = {
   args: {
     inverted: true,
-    previewInteractivity: 'fully-interactive',
-    previewPrompt: 'interactive',
-    previewMedia: 'image',
-    previewControlFull: 'Button',
-    previewControlPartial: 'Button',
-    previewAdditionalInfoFull: 'non-interactive',
-    previewAdditionalInfoPartial: 'non-interactive',
-    as: 'div',
-  },
-  argTypes: {
-    ...hideControls(['valueColumnWidth', 'disabled']),
-    ...previewArgTypes,
   },
   render: (args) => {
-    const [props, previewProps] = getPropsForPreview(args);
-
-    return <ListItem {...props} {...previewProps} />;
+    return (
+      <ListItem
+        {...args}
+        subtitle={lorem10}
+        additionalInfo={ADDITIONAL_INFO.nonInteractive}
+        control={CONTROLS.button}
+        media={MEDIA.image}
+        prompt={PROMPTS.interactive}
+      />
+    );
   },
 };
 
@@ -400,29 +383,28 @@ export const ContentHierarchy: StoryObj<PreviewStoryArgs> = {
  *
  * Refer to the [design documentation](https://wise.design/components/list-item#spotlight) for more details.
  */
-export const Spotlight: StoryObj<PreviewStoryArgs> = {
-  argTypes: {
-    ...hideControls(['spotlight', 'valueColumnWidth']),
-    ...previewArgTypes,
-  },
-  args: {
-    subtitle: lorem10,
-    previewInteractivity: 'fully-interactive',
-    previewPrompt: 'interactive',
-    previewMedia: 'image',
-    previewControlFull: 'Button',
-    previewControlPartial: 'Button',
-    previewAdditionalInfoFull: 'non-interactive',
-    previewAdditionalInfoPartial: 'non-interactive',
-  },
-  decorators: [withoutKey],
+export const Spotlight: Story = {
   render: (args) => {
-    const [props, previewProps] = getPropsForPreview(args);
-
     return (
       <ol className="list-unstyled">
-        <ListItem {...props} {...previewProps} spotlight="inactive" />
-        <ListItem {...props} {...previewProps} spotlight="active" />
+        <ListItem
+          {...args}
+          subtitle={lorem10}
+          additionalInfo={ADDITIONAL_INFO.nonInteractive}
+          control={CONTROLS.button}
+          media={MEDIA.image}
+          prompt={PROMPTS.interactive}
+          spotlight="inactive"
+        />
+        <ListItem
+          {...args}
+          subtitle={lorem10}
+          additionalInfo={ADDITIONAL_INFO.nonInteractive}
+          control={CONTROLS.button}
+          media={MEDIA.image}
+          prompt={PROMPTS.interactive}
+          spotlight="active"
+        />
       </ol>
     );
   },
@@ -443,126 +425,82 @@ export const Spotlight: StoryObj<PreviewStoryArgs> = {
  * All of these limitations were put in place to ensure that the list item is compliant with
  * accessibility guidance and offers consistent experience across all engineering platforms.
  *
- * Please refer to the [design documentation](https://wise.design/components/list-item#interaction) for more details.
+ * Please refer to the [design documentation](https://wise.design/components/list-item#:~:text=specific%20list%20item.-,Interaction,-The%20list%20item) for more details.
  */
-export const Interactivity: StoryObj<PreviewStoryArgs> = storySourceWithoutNoise({
-  argTypes: {
-    ...hideControls([
-      'title',
-      'subtitle',
-      'valueTitle',
-      'valueSubtitle',
-      'valueColumnWidth',
-      'inverted',
-    ]),
-  },
-  args: {
-    subtitle: lorem10,
-  },
-  decorators: [withoutKey],
-  render: function Render(args) {
+export const Interactivity: Story = {
+  render: function Render() {
     const [clicked, setClicked] = useState(0);
 
-    const renderPrompt = () => (
-      <ListItem.Prompt sentiment="positive">
-        Finally, there is a prompt{' '}
-        <Link href="https://wise.com" target="_blank" rel="noreferrer">
-          referencing some details
-        </Link>{' '}
-        for your convenience.
-      </ListItem.Prompt>
-    );
-
-    const renderInteractiveInfo = () => (
-      <ListItem.AdditionalInfo
-        action={{
-          label: 'Details about the subject.',
-          href: 'https://wise.com',
-          target: '_blank',
-        }}
-      >
-        Which is augmented with additional info.
-      </ListItem.AdditionalInfo>
-    );
-
-    const renderStaticInfo = () => (
-      <ListItem.AdditionalInfo>Which is augmented with additional info.</ListItem.AdditionalInfo>
-    );
-
     return (
       <>
         <label>Count: {clicked}</label>
-        <ol className="list-unstyled">
-          <ListItem
-            {...args}
-            title="Fully interactive"
-            control={
-              <ListItem.Button
-                priority="secondary-neutral"
-                onClick={() => setClicked((current) => current + 1)}
-              >
-                as Button
-              </ListItem.Button>
-            }
-            additionalInfo={renderStaticInfo()}
-            prompt={renderPrompt()}
-          />
-          <ListItem
-            {...args}
-            title="Partially interactive"
-            control={
-              <ListItem.Button
-                priority="secondary-neutral"
-                partiallyInteractive
-                onClick={() => setClicked((current) => current + 1)}
-              >
-                as Button
-              </ListItem.Button>
-            }
-            additionalInfo={renderInteractiveInfo()}
-            prompt={renderPrompt()}
-          />
-          <ListItem
-            {...args}
-            title="Fully interactive"
-            control={
-              <ListItem.IconButton
-                aria-label="Add something to me"
-                onClick={() => setClicked((current) => current + 1)}
-              >
-                <Plus />
-              </ListItem.IconButton>
-            }
-            additionalInfo={renderStaticInfo()}
-            prompt={renderPrompt()}
-          />
-          <ListItem
-            {...args}
-            title="Partially interactive"
-            control={
-              <ListItem.IconButton
-                partiallyInteractive
-                onClick={() => setClicked((current) => current + 1)}
-              >
-                <Plus />
-              </ListItem.IconButton>
-            }
-            additionalInfo={renderInteractiveInfo()}
-            prompt={renderPrompt()}
-          />
-        </ol>
+        <ListItem
+          title="Fully interactive"
+          subtitle={lorem10}
+          additionalInfo={ADDITIONAL_INFO.nonInteractive}
+          control={
+            <ListItem.Button
+              priority="secondary-neutral"
+              onClick={() => setClicked((current) => current + 1)}
+            >
+              as Button
+            </ListItem.Button>
+          }
+          prompt={PROMPTS.interactive}
+        />
+        <ListItem
+          title="Partially interactive"
+          subtitle={lorem10}
+          additionalInfo={ADDITIONAL_INFO.interactive}
+          control={
+            <ListItem.Button
+              priority="secondary-neutral"
+              partiallyInteractive
+              onClick={() => setClicked((current) => current + 1)}
+            >
+              as Button
+            </ListItem.Button>
+          }
+          prompt={PROMPTS.interactive}
+        />
+        <ListItem
+          title="Fully interactive"
+          subtitle={lorem10}
+          additionalInfo={ADDITIONAL_INFO.nonInteractive}
+          control={
+            <ListItem.IconButton
+              aria-label="Add something to me"
+              onClick={() => setClicked((current) => current + 1)}
+            >
+              <Plus />
+            </ListItem.IconButton>
+          }
+          prompt={PROMPTS.interactive}
+        />
+        <ListItem
+          title="Partially interactive"
+          subtitle={lorem10}
+          additionalInfo={ADDITIONAL_INFO.interactive}
+          control={
+            <ListItem.IconButton
+              partiallyInteractive
+              onClick={() => setClicked((current) => current + 1)}
+            >
+              <Plus />
+            </ListItem.IconButton>
+          }
+          prompt={PROMPTS.interactive}
+        />
       </>
     );
   },
-});
+};
 
 /**
  * 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: {
@@ -571,11 +509,9 @@ export const Disabled: Story = {
         sourceState: 'hidden',
       },
     },
-    controls: { disable: true },
-    knobs: { disable: true },
   },
-  render: (args) => (
-    <ol className="list-unstyled">
+  render: () => (
+    <div>
       <ListItem
         disabled
         media={
@@ -729,44 +665,6 @@ export const Disabled: Story = {
           </ListItem.Button>
         }
       />
-    </ol>
+    </div>
   ),
 };
-
-/**
- * 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`
- * and `valueSubtitle` which can be augmented with sentiment colours, strikethrough or bold
- * styles. <br />
- *
- * Please refer to the [design documentation](https://wise.design/components/list-item#content) for more details.
- */
-export const StylingLabels: Story = {
-  argTypes: {
-    ...hideControls(['spotlight', 'valueColumnWidth']),
-  },
-  args: {
-    title: lorem5,
-    subtitle: lorem10,
-    media: MEDIA.image,
-    control: CONTROLS.iconButton,
-    prompt: PROMPTS.interactive,
-  },
-  decorators: [withoutKey],
-  render: function Render(args) {
-    return (
-      <ol className="list-unstyled">
-        <ListItem
-          {...args}
-          valueTitle={<Emphasis text="<negative>100 GBP</negative>" />}
-          valueSubtitle={<s>125 GBP</s>}
-        />
-        <ListItem
-          {...args}
-          valueTitle={<Emphasis text="<positive>100 GBP</positive>" />}
-          valueSubtitle={<strong>125 GBP</strong>}
-        />
-      </ol>
-    );
-  },
-};

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

@@ -71,18 +71,23 @@ const generateVariantsForControl = (controlType: ControlType): Story => {
   const additionalInfo = isInteractive ? infoWithLink : infoWithoutLink;
   const variants = [
     { title },
+    { title, valueTitle },
     { title, subtitle },
+    { 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, subtitle, valueTitle },
     { media, title, subtitle, valueTitle, valueSubtitle },
-    { media, title },
-    { media, title, subtitle },
     { media, title, subtitle, additionalInfo: infoWithoutLink },
     isInteractive ? { media, title, subtitle, additionalInfo: infoWithLink } : null,
     { media, title, subtitle, additionalInfo, valueTitle },

package/src/listItem/_stories/images/landscape.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 112 80"><path fill="#9FE870" stroke="#163300" stroke-width="2" d="M1 79V1h110v78z"/><path fill="#163300" stroke="#163300" stroke-width="2" d="M74.2 21.4 60.9 58h-5.8l11.1-30.8.5-1.3H48.6l.8 1.5 3 5.2-4.7 5.5-1.4 1.7h9.1l-1.4 4H37.3l9.5-11.2 1.4-1.6h-1.5L41 21.4h33.1Z"/></svg>

package/src/listItem/_stories/images/portrait.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 80 112"><path fill="#9FE870" stroke="#163300" stroke-width="2" d="M1 1h78v110H1z"/><path fill="#163300" stroke="#163300" stroke-width="2" d="M59 37 45.9 73.8H40l11-30.9.6-1.3H33.4l1 1.5 3 5.2-4.8 5.5-1.4 1.7h9.1l-1.5 4H22.2l9.5-11.2 1.4-1.6h-1.6L26 37h33Z"/></svg>

package/src/listItem/test-utils.tsx

@@ -0,0 +1,33 @@
+import { render, type RenderResult } from '../test-utils';
+import { ListItemContext } from './ListItemContext';
+
+export const mockSetControlType = jest.fn();
+export const mockSetControlProps = jest.fn();
+export const mockSetMediaSize = jest.fn();
+
+export const renderWithListItemContext = (ui: React.ReactNode): RenderResult => {
+  return render(
+    <ListItemContext.Provider
+      value={{
+        setControlType: mockSetControlType,
+        setControlProps: mockSetControlProps,
+        setMediaSize: mockSetMediaSize,
+        ids: {
+          title: 'title',
+          additionalInfo: 'additional-info',
+          valueTitle: 'value-title',
+          control: 'control',
+          prompt: 'prompt',
+        },
+        props: {},
+        describedByIds: 'described-by-ids',
+      }}
+    >
+      {ui}
+    </ListItemContext.Provider>,
+  );
+};
+
+export const clearListItemMocks = () => {
+  jest.clearAllMocks();
+};

package/src/listItem/useListItemMedia.tsx

@@ -0,0 +1,13 @@
+import { useContext, useEffect } from 'react';
+import { ListItemContext, type ListItemContextData } from './ListItemContext';
+import type { ListItemAvatarViewProps } from './AvatarView';
+
+export function useListItemMedia(size?: ListItemAvatarViewProps['size']) {
+  const { setMediaSize, mediaSize } = useContext<ListItemContextData>(ListItemContext);
+
+  useEffect(() => {
+    setMediaSize(size);
+  }, [size, setMediaSize]);
+
+  return { mediaSize, setMediaSize };
+}