@transferwise/components 46.106.0 → 46.108.0

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

@@ -0,0 +1,433 @@
+import { Title, Subtitle, Description, Stories } from '@storybook/addon-docs/blocks';
+import { Meta, StoryObj } from '@storybook/react-webpack5';
+import { MultiCurrency, Plus } from '@transferwise/icons';
+import { lorem10, lorem5 } from '../../test-utils';
+import List from '../../list';
+import Link from '../../link';
+import { ListItem, type ListItemProps } from '../ListItem';
+import type { ListItemPromptProps } from '../Prompt';
+import { disableControls, withoutKey } from './helpers';
+import {
+  SB_LIST_ITEM_TEXT as TEXT,
+  SB_LIST_ITEM_ADDITIONAL_INFO as INFO,
+  SB_LIST_ITEM_CONTROLS as CONTROLS,
+  SB_LIST_ITEM_MEDIA as MEDIA,
+} from './subcomponents';
+
+const hideControls = disableControls([
+  'title',
+  'subtitle',
+  'valueTitle',
+  'valueSubtitle',
+  'media',
+  'additionalInfo',
+  'prompt',
+  'control',
+  'as',
+  'inverted',
+  'className',
+  'id',
+  'valueColumnWidth',
+]);
+
+const renderPrompt = (sentiment: ListItemPromptProps['sentiment']) => (
+  <ListItem.Prompt sentiment={sentiment}>
+    This prompt contains an <Link href="#target">external link</Link> too.
+  </ListItem.Prompt>
+);
+const disabledPromptMessage = (
+  <>
+    This item is disabled because <Link href="#target">some reason</Link> has not been satisfied.
+  </>
+);
+
+/**
+ * Please refer to the [design documentation](https://wise.design/components/list-item#accessibility:~:text=-,Disabled%20states,-) for more details
+ */
+export default {
+  component: ListItem,
+  title: 'Content/ListItem/Disabled State',
+  tags: ['autodocs'],
+  decorators: [withoutKey],
+  argTypes: hideControls(),
+  args: {
+    disabled: true,
+    subtitle: TEXT.subtitle,
+    valueTitle: TEXT.valueTitle,
+    valueSubtitle: TEXT.valueSubtitle,
+    media: MEDIA.avatarFlag,
+  },
+  parameters: {
+    docs: {
+      canvas: {
+        sourceState: 'hidden',
+      },
+      toc: true,
+      page: () => (
+        <>
+          <Title>Disabled state</Title>
+          <Subtitle />
+          <Description />
+          <Stories />
+        </>
+      ),
+    },
+  },
+} satisfies Meta<ListItemProps>;
+type Story = StoryObj<ListItemProps>;
+
+/**
+ * When dealing with dynamic content, e.g. BFFs or general form submissions, it's a common practice
+ * to stop the users from making changes to the inputs while the form is being processed.
+ *
+ * Because these form states are usually short-lived, and would take at most few seconds to
+ * complete, we don't want to introduce any major content changes that could distract
+ * the user or, even worse, cause layout shift. That's why, by default, toggling the `disabled`
+ * prop will not show any additional visual indicators, apart from the luminosity and opacity
+ * changes.
+ */
+export const ShortLived: Story = {
+  name: 'Short-lived: fully interactive',
+  args: {
+    control: CONTROLS.button,
+  },
+  argTypes: hideControls(['disabledPromptMessage']),
+  render: function Render(args) {
+    return (
+      <List>
+        <ListItem {...args} title="No prompt" control={CONTROLS.navigation} />
+        <ListItem
+          {...args}
+          title="Neutral prompt"
+          prompt={renderPrompt('neutral')}
+          control={CONTROLS.navigation}
+        />
+        <ListItem {...args} title="Positive prompt" prompt={renderPrompt('positive')} />
+        <ListItem {...args} title="Warning prompt" prompt={renderPrompt('warning')} />
+        <ListItem {...args} title="Negative prompt" prompt={renderPrompt('negative')} />
+      </List>
+    );
+  },
+};
+
+/**
+ * There's a difference between fully and partially interactive ListItems. While setting `disabled`
+ * prop on the former applies the visual treatment to the whole item, on the latter ones it only
+ * affects the control element (`ListItem.Button` or `ListItem.IconButton`).
+ *
+ * That way, the inline link or button in the additional info section remains interactive and
+ * accessible.
+ */
+export const ShortLivedPartially: Story = {
+  name: 'Short-lived: partially interactive',
+  args: {
+    additionalInfo: INFO.interactive,
+  },
+  argTypes: hideControls(['spotlight', 'disabledPromptMessage']),
+  render: function Render(args) {
+    return (
+      <List>
+        <ListItem
+          {...args}
+          title="No prompt and disabled control"
+          control={CONTROLS.partialButton}
+        />
+        <ListItem
+          {...args}
+          title="Prompt and disabled Button control"
+          prompt={renderPrompt('warning')}
+          control={CONTROLS.partialButton}
+        />
+        <ListItem
+          {...args}
+          title="Prompt and disabled IconButton control"
+          prompt={renderPrompt('positive')}
+          control={CONTROLS.partialIconButton}
+        />
+      </List>
+    );
+  },
+};
+
+/**
+ * On the other hand, instances of ListItems that are disabled for longer periods of time and
+ * remain in such state until some user interaction or event occur, can and should offer extended
+ * affordances to the user, so they are aware of the current state of the item and the reason why
+ * it's not available to them.
+ *
+ * To achieve that, we're introducing additional prop `disabledPromptMessage` – it's a
+ * prompt content override only used when ListItem is in the disabled state, and it's expected to
+ * offer reasoning for why given list item has been disabled.
+ *
+ * If set, it will render a variant of the `ListItem.Prompt` component with an icon and colour
+ * scheme designed specifically for this scenario.
+ *
+ * Similarly to the short-lived scenario, fully interactive items will apply the visual treatment
+ * to the whole item. Prompts will remain interactive.
+ */
+export const LongLived: Story = {
+  name: 'Long-lived: fully interactive',
+  args: {
+    disabledPromptMessage,
+    control: CONTROLS.button,
+  },
+  argTypes: hideControls(['disabledPromptMessage']),
+  render: function Render(args) {
+    return (
+      <List>
+        <ListItem
+          {...args}
+          title="No prompt, no disabledPromptMessage"
+          disabledPromptMessage={undefined}
+          control={CONTROLS.navigation}
+        />
+        <ListItem
+          {...args}
+          title="No prompt, disabledPromptMessage set"
+          control={CONTROLS.navigation}
+        />
+        <ListItem
+          {...args}
+          title="Neutral prompt, disabledPromptMessage set"
+          prompt={renderPrompt('neutral')}
+          control={CONTROLS.navigation}
+        />
+        <ListItem
+          {...args}
+          title="Positive prompt, disabledPromptMessage set"
+          prompt={renderPrompt('positive')}
+        />
+        <ListItem
+          {...args}
+          title="Warning prompt, disabledPromptMessage set"
+          prompt={renderPrompt('warning')}
+        />
+        <ListItem
+          {...args}
+          title="Negative prompt, disabledPromptMessage set"
+          prompt={renderPrompt('negative')}
+        />
+      </List>
+    );
+  },
+};
+
+/**
+ * Similarly to the short-lived scenario, partially interactive items will only apply the visual
+ * treatment to the control element, leaving the additional info section fully interactive and
+ * accessible.
+ *
+ * While programmatically not required, you will be expected to use the `disabledPromptMessage`
+ * prop to offer an explanation to the user on why the item was disabled.
+ */
+export const LongLivedPartially: Story = {
+  name: 'Long-lived: partially interactive',
+  args: {
+    disabledPromptMessage,
+    additionalInfo: INFO.interactive,
+  },
+  argTypes: hideControls(['spotlight', 'disabledPromptMessage']),
+  render: function Render(args) {
+    return (
+      <List>
+        <ListItem
+          {...args}
+          disabledPromptMessage={undefined}
+          title="No prompt, no disabledPromptMessage"
+          control={CONTROLS.partialButton}
+        />
+        <ListItem
+          {...args}
+          title="No prompt, disabledPromptMessage set"
+          control={CONTROLS.partialButton}
+        />
+        <ListItem
+          {...args}
+          title="Prompt set, disabledPromptMessage set"
+          prompt={renderPrompt('warning')}
+          control={CONTROLS.partialIconButton}
+        />
+        <ListItem
+          {...args}
+          title="Prompt set, disabledPromptMessage set"
+          prompt={renderPrompt('positive')}
+          control={CONTROLS.partialIconButton}
+        />
+      </List>
+    );
+  },
+};
+
+export const AllControls: 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 primary"
+        subtitle={lorem5}
+        control={<ListItem.Button priority="primary">Primary</ListItem.Button>}
+      />
+      <ListItem
+        disabled
+        media={
+          <ListItem.AvatarView>
+            <MultiCurrency />
+          </ListItem.AvatarView>
+        }
+        title="Button secondary neutral"
+        subtitle={lorem5}
+        control={<ListItem.Button>Secondary</ListItem.Button>}
+      />
+      <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 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="Non-interactive"
+        subtitle={lorem10}
+        additionalInfo={INFO.nonInteractive}
+      />
+    </List>
+  ),
+};

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