@transferwise/components 0.0.0-experimental-751dc12 → 0.0.0-experimental-4341b9c

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

@@ -1,670 +0,0 @@
-import { useState } from 'react';
-import { Meta, StoryObj } from '@storybook/react-webpack5';
-import { MultiCurrency, Plus } from '@transferwise/icons';
-import { lorem5, lorem10 } from '../../test-utils';
-import { ListItem, Props as ItemProps } from '../ListItem';
-import {
-  SB_LIST_ITEM_CONTROLS as CONTROLS,
-  SB_LIST_ITEM_ADDITIONAL_INFO as ADDITIONAL_INFO,
-  SB_LIST_ITEM_PROMPTS as PROMPTS,
-  SB_LIST_ITEM_MEDIA as MEDIA,
-} from './subcomponents';
-
-/**
- * List Items let users review or select options from a dynamic list.<br />
- * For more details please refer to the [release notes](https://transferwise.atlassian.net/wiki/spaces/DS/pages/3647251055/List+Item+release+notes) and the [design spec](https://wise.design/components/list-item). <br />
- *
- * > This component replaces now deprecated `LegacyListItem`, `Summary` and all `*Option` components
- */
-export default {
-  component: ListItem,
-  subcomponents: {
-    'ListItem.AdditionalInfo': ListItem.AdditionalInfo,
-    'ListItem.Prompt': ListItem.Prompt,
-    'ListItem.Button': ListItem.Button,
-    'ListItem.IconButton': ListItem.IconButton,
-    'ListItem.Navigation': ListItem.Navigation,
-    'ListItem.Checkbox': ListItem.Checkbox,
-    'ListItem.Radio': ListItem.Radio,
-    'ListItem.Switch': ListItem.Switch,
-    'ListItem.AvatarView': ListItem.AvatarView,
-    'ListItem.AvatarLayout': ListItem.AvatarLayout,
-    'ListItem.Image': ListItem.Image,
-  },
-  title: 'Content/ListItem',
-  parameters: {
-    docs: {
-      toc: true,
-    },
-  },
-  args: {
-    title: 'List item title',
-    subtitle: 'Subtitle goes here',
-    valueTitle: '100 GBP',
-    valueSubtitle: '100 USD',
-    disabled: false,
-    spotlight: undefined,
-    inverted: false,
-    valueColumnWidth: undefined,
-  },
-  argTypes: {
-    spotlight: {
-      control: 'radio',
-      options: ['unset (undefined)', 'active', 'inactive'],
-      mapping: {
-        'unset (undefined)': undefined,
-        active: 'active',
-        inactive: 'inactive',
-      },
-    },
-  },
-} satisfies Meta<ItemProps>;
-
-type Story = StoryObj<ItemProps>;
-
-/**
- * Convenience controls for previewing rich markup,
- * not otherwise possible via Storybook
- */
-type PreviewStoryArgs = ItemProps & {
-  previewInteractivity: 'non-interactive' | 'fully-interactive' | 'partially-interactive';
-  previewControlFull: ItemProps['control'];
-  previewControlPartial: ItemProps['control'];
-  previewAdditionalInfoFull: ItemProps['additionalInfo'];
-  previewAdditionalInfoPartial: ItemProps['additionalInfo'];
-  previewPrompt: ItemProps['prompt'];
-  previewMedia: ItemProps['media'];
-};
-
-const previewArgGroup = {
-  category: 'Preview options',
-  type: {
-    summary: undefined,
-  },
-};
-
-const previewArgTypes = {
-  previewInteractivity: {
-    name: 'Preview different interactivity',
-    control: 'radio',
-    options: ['non-interactive', 'fully-interactive', 'partially-interactive'],
-    table: previewArgGroup,
-  },
-
-  previewControlFull: {
-    name: 'Preview with `control`',
-    if: {
-      arg: 'previewInteractivity',
-      eq: 'fully-interactive',
-    },
-    control: 'select',
-    options: [
-      'unset (undefined)',
-      'Button',
-      'Button as anchor',
-      'IconButton',
-      'IconButton as anchor',
-      'Navigation',
-      'Navigation as button',
-      'Checkbox',
-      'Radio',
-      'Switch',
-    ],
-    mapping: {
-      'unset (undefined)': undefined,
-      Button: CONTROLS.button,
-      'Button as anchor': CONTROLS.buttonAsLink,
-      IconButton: CONTROLS.iconButton,
-      'IconButton as anchor': CONTROLS.iconButtonAsLink,
-      Navigation: CONTROLS.navigation,
-      'Navigation as button': CONTROLS.navigationAsButton,
-      Checkbox: CONTROLS.checkbox,
-      Radio: CONTROLS.radio,
-      Switch: CONTROLS.switch,
-    },
-    table: previewArgGroup,
-  },
-
-  previewControlPartial: {
-    name: 'Preview with `control`',
-    if: {
-      arg: 'previewInteractivity',
-      eq: 'partially-interactive',
-    },
-    control: 'select',
-    options: [
-      'unset (undefined)',
-      'Button',
-      'Button as anchor',
-      'IconButton',
-      'IconButton as anchor',
-    ],
-    mapping: {
-      'unset (undefined)': undefined,
-      Button: CONTROLS.partialButton,
-      'Button as anchor': CONTROLS.partialButtonAsLink,
-      IconButton: CONTROLS.partialIconButton,
-      'IconButton as anchor': CONTROLS.partialIconButtonAsLink,
-    },
-    table: previewArgGroup,
-  },
-
-  previewAdditionalInfoFull: {
-    name: 'Preview with `additionalInfo`',
-    if: {
-      arg: 'previewInteractivity',
-      eq: 'fully-interactive',
-    },
-    control: 'radio',
-    options: ['unset (undefined)', 'non-interactive'],
-    mapping: {
-      'unset (undefined)': undefined,
-      'non-interactive': ADDITIONAL_INFO.nonInteractive,
-    },
-    table: previewArgGroup,
-  },
-  previewAdditionalInfoPartial: {
-    name: 'Preview with `additionalInfo`',
-    if: {
-      arg: 'previewInteractivity',
-      eq: 'partially-interactive',
-    },
-    control: 'radio',
-    options: ['unset (undefined)', 'interactive', 'non-interactive'],
-    mapping: {
-      'unset (undefined)': undefined,
-      interactive: ADDITIONAL_INFO.interactive,
-      'non-interactive': ADDITIONAL_INFO.nonInteractive,
-    },
-    table: previewArgGroup,
-  },
-
-  previewPrompt: {
-    name: 'Preview with `prompt`',
-    control: 'radio',
-    options: ['unset (undefined)', 'interactive', 'non-interactive'],
-    mapping: {
-      'unset (undefined)': undefined,
-      interactive: PROMPTS.interactive,
-      'non-interactive': PROMPTS.nonInteractive,
-    },
-    table: previewArgGroup,
-  },
-
-  previewMedia: {
-    name: 'Preview with `media`',
-    control: 'select',
-    options: [
-      'unset (undefined)',
-      'image',
-      'avatar: single',
-      'avatar: double',
-      'avatar: double-diagonal',
-    ],
-    mapping: {
-      'unset (undefined)': undefined,
-      image: MEDIA.image,
-      'avatar: single': MEDIA.avatarSingle,
-      'avatar: double': MEDIA.avatarDouble,
-      'avatar: double-diagonal': MEDIA.avatarDiagonal,
-    },
-    table: previewArgGroup,
-  },
-} as const;
-
-const getPropsForPreview = (args: PreviewStoryArgs): [ItemProps, Partial<ItemProps>] => {
-  const {
-    previewInteractivity,
-    previewControlFull,
-    previewControlPartial,
-    previewAdditionalInfoFull,
-    previewAdditionalInfoPartial,
-    previewPrompt,
-    previewMedia,
-    ...props
-  } = args;
-
-  return [
-    props,
-    {
-      control: previewControlFull || previewControlPartial,
-      additionalInfo: previewAdditionalInfoFull || previewAdditionalInfoPartial,
-      prompt: previewPrompt,
-      media: previewMedia,
-    },
-  ];
-};
-
-export const Playground: StoryObj<PreviewStoryArgs> = {
-  tags: ['!autodocs'],
-  render: (args: PreviewStoryArgs) => {
-    const [props, previewProps] = getPropsForPreview(args);
-
-    return (
-      <ol className="list-unstyled">
-        <ListItem {...props} {...previewProps} />
-      </ol>
-    );
-  },
-  argTypes: previewArgTypes,
-  args: {
-    previewInteractivity: 'fully-interactive',
-    previewPrompt: 'interactive',
-    previewMedia: 'avatar: single',
-    previewControlFull: 'Button',
-    previewControlPartial: 'Button',
-    previewAdditionalInfoFull: 'non-interactive',
-    previewAdditionalInfoPartial: 'non-interactive',
-  },
-};
-
-/**
- * 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 `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: Story = {
-  parameters: {
-    docs: {
-      canvas: {
-        sourceState: 'hidden',
-      },
-    },
-  },
-  render: (args) => {
-    return (
-      <ol
-        className="list-unstyled"
-        style={{ display: 'grid', gridTemplateColumns: '320px 360px 400px', gap: 16 }}
-      >
-        <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>
-    );
-  },
-};
-
-/**
- * Due to platform limitations, the component is unable to automagically adjust its content to
- * all possible configurations. <br />
- * By default, it'll follow a CSS grid `1fr max-content` ratio of left side content (`title` and
- * `subtitle`) to the right side content (`valueTitle` and `valueSubtitle`).
- *
- * To adjust the width of the right side content, you can use `valueColumnWidth` prop which accepts
- * a number between `0–100` which resolves to a `fr` value of a `grid-template-columns` declaration.
- * E.g. `valueColumnWidth={25}` will result in a `75fr 25fr`.
- *
- * **NB:** This behaviour is slightly different on mobile platforms as they have more control over
- * layout calculations.
- */
-export const ContentRatio: Story = {
-  parameters: {
-    docs: {
-      canvas: {
-        sourceState: 'hidden',
-      },
-    },
-  },
-  args: {
-    valueTitle: `${lorem5} ${lorem5}`,
-    valueSubtitle: lorem5,
-    valueColumnWidth: 70,
-  },
-  render: (args) => {
-    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.
- *
- * Refer to the [design documentation](https://wise.design/components/list-item#content-hierarchy) for more details.
- */
-export const ContentHierarchy: Story = {
-  args: {
-    inverted: true,
-  },
-  render: (args) => {
-    return (
-      <ListItem
-        {...args}
-        subtitle={lorem10}
-        additionalInfo={ADDITIONAL_INFO.nonInteractive}
-        control={CONTROLS.button}
-        media={MEDIA.image}
-        prompt={PROMPTS.interactive}
-      />
-    );
-  },
-};
-
-/**
- * Interactive list items can alternatively be displayed with a spotlight.
- *
- * Refer to the [design documentation](https://wise.design/components/list-item#spotlight) for more details.
- */
-export const Spotlight: Story = {
-  render: (args) => {
-    return (
-      <ol className="list-unstyled">
-        <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>
-    );
-  },
-};
-
-/**
- * By default, all list items are fully interactive, meaning that their whole surface triggers the
- * main action. The only 2 exceptions are those using `ListItem.Button` and `ListItem.IconButton`
- * as their controls, which can be made partially interactive by toggling `partiallyInteractive`
- * prop directly on them.
- *
- * Fully interactive list items **cannot contain any other interactive elements**, such as links or
- * buttons, inside them, with the only exception being the `ListItem.Prompt` subcomponent, as it's
- * rendered on a separate Accessibility Tree branch. <br/>
- * Partially interactive items can also have interactive `ListItem.AdditionalInfo` which allows
- * for a single, appended link or inline button.
- *
- * 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#:~:text=specific%20list%20item.-,Interaction,-The%20list%20item) for more details.
- */
-export const Interactivity: Story = {
-  render: function Render() {
-    const [clicked, setClicked] = useState(0);
-
-    return (
-      <>
-        <label>Count: {clicked}</label>
-        <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.
- */
-export const Disabled: Story = {
-  parameters: {
-    docs: {
-      canvas: {
-        sourceState: 'hidden',
-      },
-    },
-  },
-  render: () => (
-    <div>
-      <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 secondary neutral"
-        subtitle={lorem5}
-        control={<ListItem.Button priority="secondary-neutral">Secondary Neutral</ListItem.Button>}
-      />
-      <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 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="Switch off"
-        subtitle={lorem5}
-        additionalInfo={ADDITIONAL_INFO.interactive}
-        prompt={PROMPTS.interactive}
-        control={
-          <ListItem.Button partiallyInteractive onClick={() => {}}>
-            Click me
-          </ListItem.Button>
-        }
-      />
-    </div>
-  ),
-};