@transferwise/components 46.103.1 → 46.105.0

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

@@ -0,0 +1,274 @@
+import { Meta, StoryObj } from '@storybook/react-webpack5';
+import { MultiCurrency } from '@transferwise/icons';
+import { storyConfig } from '../../test-utils';
+import Link from '../../link';
+import List from '../../list';
+import { ListItem, type ListItemProps } from '../ListItem';
+import {
+  SB_LIST_ITEM_ADDITIONAL_INFO as ADDITIONAL_INFO,
+  SB_LIST_ITEM_CONTROLS as CONTROLS,
+  SB_LIST_ITEM_PROMPTS as PROMPTS,
+  type SB_ListItem_ControlType as ControlType,
+} from './subcomponents';
+
+export default {
+  component: ListItem,
+  title: 'Content/ListItem/tests/variants',
+  tags: ['!autodocs'],
+  parameters: {
+    controls: { disable: true },
+    actions: { disable: true },
+    knobs: { disable: true },
+  },
+} satisfies Meta<ListItemProps>;
+
+type Story = StoryObj<ListItemProps>;
+type VariantPartial = { title: string } & Partial<ListItemProps>;
+
+const title = 'This is a title';
+const subtitle = 'And it also has a subtitle';
+const infoWithoutLink = (
+  <ListItem.AdditionalInfo>Which is augmented with additional info.</ListItem.AdditionalInfo>
+);
+const infoWithLink = (
+  <ListItem.AdditionalInfo
+    action={{
+      label: 'Details about the subject.',
+      href: 'https://wise.com',
+      target: '_blank',
+    }}
+  >
+    Which is augmented with additional info.
+  </ListItem.AdditionalInfo>
+);
+
+const valueTitle = '100 GBP';
+const valueSubtitle = '200 USD';
+const prompt = <ListItem.Prompt sentiment="positive">Finally, there is a prompt.</ListItem.Prompt>;
+const promptWithLink = (
+  <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 media = (
+  <ListItem.AvatarView>
+    <MultiCurrency />
+  </ListItem.AvatarView>
+);
+
+const generateVariantsForControl = (controlType: ControlType): Story => {
+  const control = CONTROLS[controlType];
+  const isInteractive = [
+    'partialButton',
+    'partialButtonAsLink',
+    'partialIconButton',
+    'partialIconButtonAsLink',
+  ].includes(controlType);
+  const additionalInfo = isInteractive ? infoWithLink : infoWithoutLink;
+  const variants = [
+    { title },
+    { title, valueTitle },
+    { title, subtitle },
+    { title, additionalInfo },
+    { 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, additionalInfo },
+    { media, title, subtitle, valueTitle },
+    { media, title, subtitle, valueTitle, valueSubtitle },
+    { media, title, subtitle, additionalInfo: infoWithoutLink },
+    isInteractive ? { media, title, subtitle, additionalInfo: infoWithLink } : null,
+    { media, title, subtitle, additionalInfo, valueTitle },
+    { media, title, subtitle, additionalInfo, valueTitle, valueSubtitle },
+    { media, title, subtitle, additionalInfo, valueTitle, valueSubtitle, prompt },
+    {
+      media,
+      title,
+      subtitle,
+      additionalInfo,
+      valueTitle,
+      valueSubtitle,
+      prompt: promptWithLink,
+    },
+    {
+      media,
+      title,
+      subtitle,
+      additionalInfo,
+      valueTitle,
+      valueSubtitle,
+      prompt: promptWithLink,
+      inverted: true,
+    },
+    {
+      media,
+      title,
+      subtitle,
+      additionalInfo,
+      valueTitle,
+      valueSubtitle,
+      prompt: promptWithLink,
+      spotlight: 'active',
+    },
+    {
+      media,
+      title,
+      subtitle,
+      additionalInfo,
+      valueTitle,
+      valueSubtitle,
+      prompt: promptWithLink,
+      spotlight: 'inactive',
+    },
+    {
+      media,
+      title,
+      subtitle,
+      additionalInfo,
+      valueTitle,
+      valueSubtitle,
+      prompt: promptWithLink,
+      spotlight: 'inactive',
+      disabled: true,
+    },
+  ].filter(Boolean) as VariantPartial[];
+
+  return storyConfig(
+    {
+      render: () => (
+        <List>
+          {variants.map((variant, variantIndex) => (
+            <ListItem
+              key={`${controlType}-${variantIndex}-${Math.random()}`}
+              control={control}
+              {...variant}
+            />
+          ))}
+        </List>
+      ),
+    },
+    { variants: ['default', 'dark', 'bright-green', 'forest-green', 'rtl'] },
+  );
+};
+
+export const Button = generateVariantsForControl('button');
+export const ButtonAsLink = generateVariantsForControl('buttonAsLink');
+export const ButtonPartiallyInteractive = generateVariantsForControl('partialButton');
+export const ButtonAsLinkPartiallyInteractive = generateVariantsForControl('partialButtonAsLink');
+export const IconButton = generateVariantsForControl('iconButton');
+export const IconButtonAsLink = generateVariantsForControl('iconButtonAsLink');
+export const IconButtonWithLabel = generateVariantsForControl('iconButtonWithLabel');
+export const IconButtonAsLinkWithLabel = generateVariantsForControl('iconButtonAsLinkWithLabel');
+export const IconButtonPartiallyInteractive = generateVariantsForControl('partialIconButton');
+export const IconButtonAsLinkPartiallyInteractive =
+  generateVariantsForControl('partialIconButtonAsLink');
+export const Navigation = generateVariantsForControl('navigation');
+export const NavigationAsButton = generateVariantsForControl('navigationAsButton');
+export const Checkbox = generateVariantsForControl('checkbox');
+export const Radio = generateVariantsForControl('radio');
+export const Switch = generateVariantsForControl('switch');
+export const NonInteractive = generateVariantsForControl('non-interactive');
+
+export const ButtonControlLabel: Story = {
+  render: () => (
+    <List>
+      <ListItem
+        title="Fully interactive button."
+        subtitle="It uses default content hierarchy."
+        valueTitle="100 GBP"
+        valueSubtitle="200 USD"
+        additionalInfo={ADDITIONAL_INFO.nonInteractive}
+        control={CONTROLS.button}
+        prompt={PROMPTS.nonInteractive}
+      />
+
+      <ListItem
+        inverted
+        title="Fully interactive button."
+        subtitle="It uses inverted content hierarchy."
+        valueTitle="100 GBP"
+        valueSubtitle="200 USD"
+        additionalInfo={ADDITIONAL_INFO.nonInteractive}
+        control={CONTROLS.button}
+        prompt={PROMPTS.nonInteractive}
+      />
+
+      <ListItem
+        title="Fully interactive button as HTML anchor."
+        subtitle="It uses default content hierarchy."
+        valueTitle="100 GBP"
+        valueSubtitle="200 USD"
+        additionalInfo={ADDITIONAL_INFO.nonInteractive}
+        control={CONTROLS.buttonAsLink}
+        prompt={PROMPTS.nonInteractive}
+      />
+
+      <ListItem
+        inverted
+        title="Fully interactive button as HTML anchor."
+        subtitle="It uses inverted content hierarchy."
+        valueTitle="100 GBP"
+        valueSubtitle="200 USD"
+        additionalInfo={ADDITIONAL_INFO.nonInteractive}
+        control={CONTROLS.buttonAsLink}
+        prompt={PROMPTS.nonInteractive}
+      />
+
+      <ListItem
+        title="Partially interactive button."
+        subtitle="It uses default content hierarchy."
+        valueTitle="100 GBP"
+        valueSubtitle="200 USD"
+        additionalInfo={ADDITIONAL_INFO.nonInteractive}
+        control={CONTROLS.partialButton}
+        prompt={PROMPTS.nonInteractive}
+      />
+
+      <ListItem
+        inverted
+        title="Partially interactive button."
+        subtitle="It uses inverted content hierarchy."
+        valueTitle="100 GBP"
+        valueSubtitle="200 USD"
+        additionalInfo={ADDITIONAL_INFO.nonInteractive}
+        control={CONTROLS.partialButton}
+        prompt={PROMPTS.nonInteractive}
+      />
+
+      <ListItem
+        title="Partially interactive button as HTML anchor."
+        subtitle="It uses default content hierarchy."
+        valueTitle="100 GBP"
+        valueSubtitle="200 USD"
+        additionalInfo={ADDITIONAL_INFO.nonInteractive}
+        control={CONTROLS.buttonAsLink}
+        prompt={PROMPTS.nonInteractive}
+      />
+
+      <ListItem
+        inverted
+        title="Partially interactive button as HTML anchor."
+        subtitle="It uses inverted content hierarchy."
+        valueTitle="100 GBP"
+        valueSubtitle="200 USD"
+        additionalInfo={ADDITIONAL_INFO.nonInteractive}
+        control={CONTROLS.buttonAsLink}
+        prompt={PROMPTS.nonInteractive}
+      />
+    </List>
+  ),
+};

package/src/listItem/_stories/helpers.tsx

@@ -0,0 +1,53 @@
+import { StoryObj, type Decorator } from '@storybook/react-webpack5';
+import type { ListItemProps } from '../ListItem';
+
+type Story = StoryObj<ListItemProps>;
+
+/**
+ * Recent storybook versions render the full source including all story parameters which
+ * creates noise, this simple workaround only shows the render function.
+ * This is a workaround for the issue.
+ * @see https://github.com/storybookjs/storybook/issues/22281
+ */
+export const storySourceWithoutNoise = (config: Story): Story => {
+  const newConfig: Story = {
+    ...config,
+    parameters: {
+      ...config.parameters,
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+      docs: {
+        ...config.parameters?.docs,
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+        source: {
+          // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+          ...config.parameters?.docs?.source,
+          type: 'code',
+          transform: (code: string) =>
+            code
+              // eslint-disable-next-line regexp/no-super-linear-backtracking
+              .replace(/storySourceWithoutNoise\(\{.+render\s?:\s+(.*)\}\)$/gms, '$1'),
+        },
+      },
+    },
+  };
+
+  return newConfig;
+};
+
+/**
+ * In order to make preview controls work correctly, we have to refresh the render
+ * by swapping the `key`. This is a workaround for the Storybook's limitation.
+ */
+export const withoutKey: Decorator = (Story, { args }) => (
+  <Story key={args?.disabled ? 'disabled' : 'enabled'} />
+);
+
+/**
+ * Not all stories need access to all controls as it causes unnecessary UI noise.
+ */
+export const disableControls =
+  (hiddenByDefault: string[] = []) =>
+  (hiddenForStory: string[] = []) => {
+    const hiddenControls = hiddenByDefault.concat(hiddenForStory);
+    return Object.fromEntries(hiddenControls.map((item) => [item, { table: { disable: true } }]));
+  };

package/src/listItem/_stories/subcomponents.tsx

@@ -0,0 +1,141 @@
+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';
+
+export type SB_ListItem_ControlType =
+  | 'non-interactive'
+  | 'button'
+  | 'buttonAsLink'
+  | 'partialButton'
+  | 'partialButtonAsLink'
+  | 'iconButton'
+  | 'iconButtonAsLink'
+  | 'iconButtonWithLabel'
+  | 'iconButtonAsLinkWithLabel'
+  | 'partialIconButton'
+  | 'partialIconButtonAsLink'
+  | 'partialIconButtonWithLabel'
+  | 'partialIconButtonAsLinkWithLabel'
+  | 'navigation'
+  | 'navigationAsButton'
+  | 'checkbox'
+  | 'radio'
+  | 'switch';
+
+export const SB_LIST_ITEM_CONTROLS: Record<SB_ListItem_ControlType, ReactNode> = {
+  'non-interactive': null,
+  button: <ListItem.Button onClick={() => {}}>Click me</ListItem.Button>,
+  buttonAsLink: <ListItem.Button href="https://wise.com">Click me</ListItem.Button>,
+  partialButton: (
+    <ListItem.Button partiallyInteractive onClick={() => {}}>
+      Click me
+    </ListItem.Button>
+  ),
+  partialButtonAsLink: (
+    <ListItem.Button partiallyInteractive href="https://wise.com">
+      Click me
+    </ListItem.Button>
+  ),
+  navigation: <ListItem.Navigation href="https://wise.com" />,
+  navigationAsButton: <ListItem.Navigation onClick={fn()} />,
+  checkbox: <ListItem.Checkbox onChange={() => {}} />,
+  radio: <ListItem.Radio name="radio" value={Math.random().toString()} onChange={() => {}} />,
+  switch: <ListItem.Switch onClick={() => {}} />,
+  iconButton: (
+    <ListItem.IconButton onClick={() => {}}>
+      <Edit />
+    </ListItem.IconButton>
+  ),
+  iconButtonAsLink: (
+    <ListItem.IconButton href="https://wise.com">
+      <Edit />
+    </ListItem.IconButton>
+  ),
+  iconButtonWithLabel: (
+    <ListItem.IconButton aria-label="Edit" onClick={() => {}}>
+      <Edit />
+    </ListItem.IconButton>
+  ),
+  iconButtonAsLinkWithLabel: (
+    <ListItem.IconButton href="https://wise.com" aria-label="Edit">
+      <Edit />
+    </ListItem.IconButton>
+  ),
+  partialIconButton: (
+    <ListItem.IconButton partiallyInteractive onClick={() => {}}>
+      <Edit />
+    </ListItem.IconButton>
+  ),
+  partialIconButtonAsLink: (
+    <ListItem.IconButton partiallyInteractive href="https://wise.com">
+      <Edit />
+    </ListItem.IconButton>
+  ),
+  partialIconButtonWithLabel: (
+    <ListItem.IconButton partiallyInteractive aria-label="Edit" onClick={() => {}}>
+      <Edit />
+    </ListItem.IconButton>
+  ),
+  partialIconButtonAsLinkWithLabel: (
+    <ListItem.IconButton partiallyInteractive aria-label="Edit" href="https://wise.com">
+      <Edit />
+    </ListItem.IconButton>
+  ),
+} as const;
+
+export const SB_LIST_ITEM_ADDITIONAL_INFO = {
+  interactive: (
+    <ListItem.AdditionalInfo
+      action={{
+        label: 'Details about the subject.',
+        href: 'https://wise.com',
+        target: '_blank',
+      }}
+    >
+      Which is augmented with additional info.
+    </ListItem.AdditionalInfo>
+  ),
+  nonInteractive: (
+    <ListItem.AdditionalInfo>Which is augmented with additional info.</ListItem.AdditionalInfo>
+  ),
+} as const;
+
+export const SB_LIST_ITEM_PROMPTS = {
+  interactive: (
+    <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>
+  ),
+  nonInteractive: (
+    <ListItem.Prompt sentiment="positive">Finally, there is a prompt.</ListItem.Prompt>
+  ),
+} as const;
+
+export const SB_LIST_ITEM_MEDIA = {
+  image: (
+    <ListItem.Image
+      alt="An illustration of a multi-currency account"
+      src="https://wise.com/public-resources/assets/spend/card-asset/medium/v2/personal_green_wise_2023_active.svg"
+    />
+  ),
+  avatarSingle: (
+    <ListItem.AvatarView>
+      <Briefcase />
+    </ListItem.AvatarView>
+  ),
+  avatarDouble: <ListItem.AvatarLayout avatars={[{ asset: <Plane /> }, { asset: '7+' }]} />,
+  avatarDiagonal: (
+    <ListItem.AvatarLayout
+      size={56}
+      orientation="diagonal"
+      avatars={[{ asset: <Flag code="gb" /> }, { asset: <Flag code="pl" /> }]}
+    />
+  ),
+} as const;

package/src/listItem/index.ts

@@ -0,0 +1,14 @@
+export type { ListItemProps } from './ListItem';
+export type { ListItemAdditionalInfoProps } from './AdditionalInfo';
+export type { ListItemAvatarLayoutProps } from './AvatarLayout';
+export type { ListItemAvatarViewProps } from './AvatarView';
+export type { ListItemButtonProps } from './Button';
+export type { ListItemCheckboxProps } from './Checkbox';
+export type { ListItemIconButtonProps } from './IconButton';
+export type { ListItemImageProps } from './Image';
+export type { ListItemNavigationProps } from './Navigation';
+export type { ListItemPromptProps } from './Prompt';
+export type { ListItemRadioProps } from './Radio';
+export type { ListItemSwitchProps } from './Switch';
+
+export { default } from './ListItem';

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: { disabled: false, inverted: false },
+        describedByIds: 'described-by-ids',
+      }}
+    >
+      {ui}
+    </ListItemContext.Provider>,
+  );
+};
+
+export const clearListItemMocks = () => {
+  jest.clearAllMocks();
+};

package/src/listItem/useListItemControl.tsx

@@ -0,0 +1,18 @@
+import { useContext, useEffect } from 'react';
+import { ListItemContext, type ListItemContextData } from './ListItemContext';
+import type { ListItemTypes, ListItemControlProps } from './ListItem';
+
+export function useListItemControl(controlType: ListItemTypes, controlProps: ListItemControlProps) {
+  const {
+    setControlType,
+    setControlProps,
+    props: baseItemProps,
+  } = useContext<ListItemContextData>(ListItemContext);
+
+  useEffect(() => {
+    setControlType(controlType);
+    setControlProps(controlProps);
+  }, [controlType, controlProps, setControlType, setControlProps]);
+
+  return { baseItemProps };
+}

package/src/listItem/useListItemMedia.tsx

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