@transferwise/components 46.103.1 → 46.105.0

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

@@ -0,0 +1,374 @@
+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';
+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>
+);
+
+export default {
+  title: 'Content/ListItem/tests/layout',
+  tags: ['!autodocs'],
+  parameters: {
+    controls: { disable: true },
+    actions: { disable: true },
+    a11y: { disable: true },
+    knobs: { disable: true },
+  },
+} 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
+      title="Additional info button better align left"
+      additionalInfo={
+        <ListItem.AdditionalInfo
+          action={{
+            label: 'Additional info Additional info Additional info (as button)',
+            onClick: () => {},
+          }}
+        />
+      }
+      control={
+        <ListItem.Button onClick={() => {}}>Click me Click me Click me Click me</ListItem.Button>
+      }
+    />
+  ),
+  decorators: [withSizedContainer(400)],
+};
+
+export const GapsBetweenItems: Story = {
+  render: () => {
+    const props = {
+      title: lorem5,
+      subtitle: lorem10,
+      media: MEDIA.image,
+      control: CONTROLS.switch,
+    };
+    return (
+      <List>
+        <ListItem {...props} />
+        <ListItem {...props} spotlight="active" />
+        <ListItem {...props} spotlight="inactive" />
+        <ListItem {...props} />
+      </List>
+    );
+  },
+};
+
+type PreviewStoryArgs = ListItemProps & {
+  previewImageSize: ListItemMediaSize;
+  previewWithLineGuides: boolean;
+  previewPrompt: boolean | ListItemProps['prompt'];
+};
+
+const previewArgGroup = {
+  category: 'Preview options',
+  type: {
+    summary: undefined,
+  },
+};
+
+const previewArgTypes = {
+  previewImageSize: {
+    options: [32, 40, 48, 56, 72],
+    control: {
+      type: 'inline-radio',
+    },
+    name: 'Preview with image size',
+    table: previewArgGroup,
+  },
+  previewWithLineGuides: {
+    control: {
+      type: 'boolean',
+    },
+    name: 'Preview with line guides',
+    table: previewArgGroup,
+  },
+  previewPrompt: {
+    control: {
+      type: 'boolean',
+    },
+    mapping: {
+      true: <ListItem.Prompt sentiment="positive">This is a prompt</ListItem.Prompt>,
+      false: null,
+    },
+    name: 'Preview with `prompt`',
+    table: previewArgGroup,
+  },
+} as const;
+
+const getPropsForPreview = (args: PreviewStoryArgs) => {
+  const { previewImageSize, previewWithLineGuides, previewPrompt, ...props } = args as {
+    previewImageSize: ListItemMediaSize;
+    previewWithLineGuides: boolean;
+    previewPrompt: boolean | ListItemProps['prompt'];
+    title: ListItemProps['title'];
+    subtitle: ListItemProps['subtitle'];
+    [key: string]: any;
+  };
+
+  return [
+    {
+      ...props,
+      prompt: previewPrompt,
+    },
+    {
+      previewImageSize,
+      previewWithLineGuides,
+    },
+  ] as const;
+};
+
+// Create a completely untyped story object
+const ImageAlignmentStory: StoryObj<PreviewStoryArgs> = {
+  parameters: {
+    controls: { disable: false },
+  },
+  args: {
+    title: lorem5,
+    subtitle: lorem10,
+    previewImageSize: 48,
+    previewWithLineGuides: true,
+    previewPrompt: false,
+  },
+  argTypes: previewArgTypes,
+  decorators: [
+    (Story: any, { args }: { args: PreviewStoryArgs }) => (
+      <>
+        {args.previewWithLineGuides && (
+          <style
+            dangerouslySetInnerHTML={{
+              __html: `
+                .wds-list-item-media-image-wrapper::before{
+                  content: '';
+                  border: 1px dashed blue;
+                  position: absolute;
+                  width: ${args.previewImageSize}px;
+                  height: ${args.previewImageSize}px;
+                }
+                .wds-list-item-media-image-wrapper::after {
+                  content: '';
+                  border: 1px dashed red;
+                  position: absolute;
+                  left: 0;
+                  width: 100%;
+                  height: ${args.previewImageSize}px;
+                }
+              `,
+            }}
+          />
+        )}
+        <List
+          className="list-unstyled"
+          style={{ display: 'grid', gridTemplateColumns: '340px 400px', gap: '16px' }}
+        >
+          <Story />
+        </List>
+      </>
+    ),
+  ],
+  render: (args: PreviewStoryArgs) => {
+    const [{ title, subtitle, ...props }, previewProps] = getPropsForPreview(args);
+
+    const additionalInfo = <ListItem.AdditionalInfo>{lorem20}</ListItem.AdditionalInfo>;
+    const control = CONTROLS.button;
+    const size = previewProps.previewImageSize;
+
+    const instances = [
+      { title, ...props },
+      { title, subtitle, ...props },
+      { title, subtitle, additionalInfo, ...props },
+      { title, control, ...props },
+      { title, subtitle, control, ...props },
+      { title, subtitle, additionalInfo, control, ...props },
+    ] as const;
+
+    return (
+      <>
+        {instances.map((itemProps, index) => (
+          <Fragment key={`landscape-${index}`}>
+            <ListItem
+              {...itemProps}
+              media={<ListItem.Image size={size} src={landscapeImage} alt="landscape image" />}
+            />
+            <ListItem
+              {...itemProps}
+              media={<ListItem.Image size={size} src={landscapeImage} alt="landscape image" />}
+            />
+          </Fragment>
+        ))}
+        {instances.map((itemProps, index) => (
+          <Fragment key={`portrait-${index}`}>
+            <ListItem
+              {...itemProps}
+              media={<ListItem.Image size={size} src={portraitImage} alt="portrait image" />}
+            />
+            <ListItem
+              {...itemProps}
+              media={<ListItem.Image size={size} src={portraitImage} alt="portrait image" />}
+            />
+          </Fragment>
+        ))}
+      </>
+    );
+  },
+};
+
+export const ImageAlignment = ImageAlignmentStory;

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

@@ -0,0 +1,228 @@
+import { useState } from 'react';
+import { Title, Subtitle, Description, Stories } from '@storybook/addon-docs/blocks';
+import { Meta, StoryObj } from '@storybook/react-webpack5';
+import { action } from 'storybook/actions';
+import { InfoCircle, Documents } from '@transferwise/icons';
+import { lorem10, lorem100, lorem20, lorem5 } from '../../test-utils';
+import Modal from '../../modal';
+import Link from '../../link';
+import List from '../../list';
+import Popover from '../../popover';
+import { SnackbarConsumer, type SnackbarContextType } from '../../snackbar/SnackbarContext';
+import SnackbarProvider from '../../snackbar/SnackbarProvider';
+import Tooltip from '../../tooltip';
+import { Position } from '../../common';
+import { ListItem, type ListItemProps } from '../ListItem';
+import { storySourceWithoutNoise } from './helpers';
+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 PROMPTS,
+} from './subcomponents';
+
+export default {
+  component: ListItem,
+  title: 'Content/ListItem/common scenarios',
+  tags: ['autodocs'],
+  args: {
+    title: lorem5,
+    subtitle: lorem10,
+    media: MEDIA.image,
+    additionalInfo: INFO.nonInteractive,
+    prompt: PROMPTS.interactive,
+    control: CONTROLS.button,
+  },
+  parameters: {
+    docs: {
+      toc: true,
+      page: () => (
+        <>
+          <Title>Common scenarios</Title>
+          <Subtitle />
+          <Description />
+          <Stories />
+        </>
+      ),
+    },
+  },
+} satisfies Meta<ListItemProps>;
+type Story = StoryObj<ListItemProps>;
+
+/**
+ * Aside from using the main control for triggering a [Modal](?path=/docs/dialogs-modal--docs),
+ * it's also possible to toggle it via inline-button as part of the `<ListItem.AdditionalInfo>`
+ * or `<ListItem.Prompt>`.
+ */
+export const WithModals: Story = storySourceWithoutNoise({
+  parameters: {
+    controls: { disable: true },
+  },
+  render: function WithModals(listItemProps) {
+    const [isModalOpen, setIsModalOpen] = useState(false);
+
+    const handleOpening = () => {
+      setIsModalOpen(true);
+      action('Modal opening')();
+    };
+    const handleClosing = () => {
+      setIsModalOpen(false);
+      action('Modal closing')();
+    };
+
+    return (
+      <List>
+        <ListItem
+          {...listItemProps}
+          control={
+            <ListItem.Button partiallyInteractive onClick={handleOpening}>
+              Open modal
+            </ListItem.Button>
+          }
+          additionalInfo={
+            <ListItem.AdditionalInfo
+              action={{ label: 'button opening a modal', onClick: handleOpening }}
+            >
+              This is additional information that contains a
+            </ListItem.AdditionalInfo>
+          }
+          prompt={
+            <ListItem.Prompt sentiment="positive">
+              {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events */}
+              This prompt also has a <Link onClick={handleOpening}>
+                button that opens a modal
+              </Link>{' '}
+              for your convenience.
+            </ListItem.Prompt>
+          }
+        />
+        <Modal body={lorem100} open={isModalOpen} onClose={handleClosing} />
+      </List>
+    );
+  },
+});
+
+/**
+ * The control or inline buttons can trigger a [Popover](?path=/docs/dialogs-popover--docs).
+ */
+export const WithPopover: Story = {
+  parameters: {
+    controls: { disable: true },
+  },
+  render: (listItemProps) => {
+    return (
+      <List>
+        <ListItem
+          {...listItemProps}
+          control={
+            <Popover preferredPlacement={Position.BOTTOM} title={lorem5} content={lorem20}>
+              <ListItem.IconButton
+                partiallyInteractive
+                aria-label="Learn more about {enter subject here}"
+              >
+                <InfoCircle />
+              </ListItem.IconButton>
+            </Popover>
+          }
+          prompt={PROMPTS.nonInteractive}
+        />
+      </List>
+    );
+  },
+};
+
+/**
+ * The control or inline buttons can trigger a [Tooltip](?path=/docs/dialogs-tooltip--docs).
+ */
+export const WithTooltip: Story = {
+  parameters: {
+    controls: { disable: true },
+  },
+  render: (listItemProps) => {
+    return (
+      <List>
+        <ListItem
+          {...listItemProps}
+          control={
+            <Tooltip position={Position.BOTTOM} label={lorem10}>
+              <ListItem.IconButton
+                partiallyInteractive
+                aria-label="Learn more about {enter subject here}"
+              >
+                <InfoCircle />
+              </ListItem.IconButton>
+            </Tooltip>
+          }
+          prompt={PROMPTS.nonInteractive}
+        />
+      </List>
+    );
+  },
+};
+
+/**
+ * ListItem is often used as a simple copy and paste button augmented with a [Snackbar](?path=/docs/dialogs-snackbar--docs). <br />
+ *
+ * **NB** The snippet below uses a simplified example implementation of a clipboard handler,
+ * which may not be suitable or sufficient for your needs.
+ */
+export const CopyAndPasteWithSnackbar: Story = storySourceWithoutNoise({
+  parameters: {
+    controls: { disable: true },
+  },
+  args: {
+    prompt: undefined,
+    additionalInfo: undefined,
+  },
+  render: function CopyAndPaste(listItemProps) {
+    const title = 'Artie Choke';
+    const subtitle = 'Account holder';
+
+    const handleCopy = async (createSnackbar: SnackbarContextType['createSnackbar']) =>
+      navigator.clipboard
+        .writeText(`${subtitle}: ${title}`)
+        .catch((err) => {
+          console.error('Failed to copy text: ', err);
+        })
+        .then(() => {
+          createSnackbar({
+            text: `${subtitle} copied to clipboard.`,
+          });
+        });
+
+    return (
+      <List>
+        <ListItem
+          {...listItemProps}
+          title={title}
+          subtitle={subtitle}
+          inverted
+          control={
+            <SnackbarProvider>
+              <SnackbarConsumer>
+                {({ createSnackbar }) => {
+                  return (
+                    <ListItem.IconButton
+                      aria-label={`Copy ${subtitle} to clipboard`}
+                      partiallyInteractive
+                      onClick={async () => handleCopy(createSnackbar)}
+                    >
+                      <Documents />
+                    </ListItem.IconButton>
+                  );
+                }}
+              </SnackbarConsumer>
+            </SnackbarProvider>
+          }
+          media={
+            <ListItem.AvatarView
+              imgSrc="../avatar-square-dude.webp"
+              profileName="John Smith"
+              size={48}
+            />
+          }
+        />
+      </List>
+    );
+  },
+});