@transferwise/components 0.0.0-experimental-11565f2 → 0.0.0-experimental-d0addc4

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

@@ -1,425 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react-webpack5';
-import { MultiCurrency } from '@transferwise/icons';
-import { lorem20, 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 longTitle = `This is a long title. ${lorem20}`;
-const subtitle = 'And it also has a subtitle';
-const longSubtitle = `And it also has a long subtitle. ${lorem20}`;
-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 longValueTitle = <>This value title<br/>spans across<br/>multiple lines</>;
-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, width?: number): Story => {
-  const control = CONTROLS[controlType];
-  const isInteractive = [
-    'partialButton',
-    'partialButtonAsLink',
-    'partialIconButton',
-    'partialIconButtonAsLink',
-  ].includes(controlType);
-  const additionalInfo = isInteractive ? infoWithLink : infoWithoutLink;
-  const variants = [
-    { title },
-    { title: longTitle },
-    { title, valueTitle },
-    { title, valueTitle: longValueTitle },
-    { title: longTitle, valueTitle },
-    { title, subtitle },
-    { title, subtitle: longSubtitle },
-    { title, additionalInfo },
-    { title, valueTitle, valueSubtitle },
-    { title, valueTitle: longValueTitle, 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: longTitle },
-    { media, title, valueTitle },
-    { media, title: longTitle, valueTitle },
-    { media, title, valueTitle: longValueTitle },
-    { media, title, subtitle },
-    { media, title: longTitle, 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[];
-
-  const listContent = (
-    <List>
-      {variants.map((variant, variantIndex) => (
-        <ListItem
-          key={`${controlType}-${variantIndex}-${Math.random()}`}
-          control={control}
-          {...variant}
-        />
-      ))}
-    </List>
-  );
-
-  return storyConfig(
-    {
-      render: () =>
-        width ? (
-          <div style={{ width: `${width}px`, border: '1px dashed #ccc', padding: '8px' }}>
-            {listContent}
-          </div>
-        ) : (
-          listContent
-        ),
-    },
-    { variants: ['default', 'dark', 'bright-green', 'forest-green'] },
-  );
-};
-
-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 Button350px = {
-  ...generateVariantsForControl('button', 350),
-  name: 'Button (350px)',
-};
-export const ButtonAsLink350px = {
-  ...generateVariantsForControl('buttonAsLink', 350),
-  name: 'Button As Link (350px)',
-};
-export const ButtonPartiallyInteractive350px = {
-  ...generateVariantsForControl('partialButton', 350),
-  name: 'Button Partially Interactive (350px)',
-};
-export const ButtonAsLinkPartiallyInteractive350px = {
-  ...generateVariantsForControl('partialButtonAsLink', 350),
-  name: 'Button As Link Partially Interactive (350px)',
-};
-export const IconButton350px = {
-  ...generateVariantsForControl('iconButton', 350),
-  name: 'Icon Button (350px)',
-};
-export const IconButtonAsLink350px = {
-  ...generateVariantsForControl('iconButtonAsLink', 350),
-  name: 'Icon Button As Link (350px)',
-};
-export const IconButtonWithLabel350px = {
-  ...generateVariantsForControl('iconButtonWithLabel', 350),
-  name: 'Icon Button With Label (350px)',
-};
-export const IconButtonAsLinkWithLabel350px = {
-  ...generateVariantsForControl('iconButtonAsLinkWithLabel', 350),
-  name: 'Icon Button As Link With Label (350px)',
-};
-export const IconButtonPartiallyInteractive350px = {
-  ...generateVariantsForControl('partialIconButton', 350),
-  name: 'Icon Button Partially Interactive (350px)',
-};
-export const IconButtonAsLinkPartiallyInteractive350px = {
-  ...generateVariantsForControl('partialIconButtonAsLink', 350),
-  name: 'Icon Button As Link Partially Interactive (350px)',
-};
-export const Navigation350px = {
-  ...generateVariantsForControl('navigation', 350),
-  name: 'Navigation (350px)',
-};
-export const NavigationAsButton350px = {
-  ...generateVariantsForControl('navigationAsButton', 350),
-  name: 'Navigation As Button (350px)',
-};
-export const Checkbox350px = {
-  ...generateVariantsForControl('checkbox', 350),
-  name: 'Checkbox (350px)',
-};
-export const Radio350px = {
-  ...generateVariantsForControl('radio', 350),
-  name: 'Radio (350px)',
-};
-export const Switch350px = {
-  ...generateVariantsForControl('switch', 350),
-  name: 'Switch (350px)',
-};
-export const NonInteractive350px = {
-  ...generateVariantsForControl('non-interactive', 350),
-  name: 'Non Interactive (350px)',
-};
-
-export const Button275px = {
-  ...generateVariantsForControl('button', 275),
-  name: 'Button (275px)',
-};
-export const ButtonAsLink275px = {
-  ...generateVariantsForControl('buttonAsLink', 275),
-  name: 'Button As Link (275px)',
-};
-export const ButtonPartiallyInteractive275px = {
-  ...generateVariantsForControl('partialButton', 275),
-  name: 'Button Partially Interactive (275px)',
-};
-export const ButtonAsLinkPartiallyInteractive275px = {
-  ...generateVariantsForControl('partialButtonAsLink', 275),
-  name: 'Button As Link Partially Interactive (275px)',
-};
-export const IconButton275px = {
-  ...generateVariantsForControl('iconButton', 275),
-  name: 'Icon Button (275px)',
-};
-export const IconButtonAsLink275px = {
-  ...generateVariantsForControl('iconButtonAsLink', 275),
-  name: 'Icon Button As Link (275px)',
-};
-export const IconButtonWithLabel275px = {
-  ...generateVariantsForControl('iconButtonWithLabel', 275),
-  name: 'Icon Button With Label (275px)',
-};
-export const IconButtonAsLinkWithLabel275px = {
-  ...generateVariantsForControl('iconButtonAsLinkWithLabel', 275),
-  name: 'Icon Button As Link With Label (275px)',
-};
-export const IconButtonPartiallyInteractive275px = {
-  ...generateVariantsForControl('partialIconButton', 275),
-  name: 'Icon Button Partially Interactive (275px)',
-};
-export const IconButtonAsLinkPartiallyInteractive275px = {
-  ...generateVariantsForControl('partialIconButtonAsLink', 275),
-  name: 'Icon Button As Link Partially Interactive (275px)',
-};
-export const Navigation275px = {
-  ...generateVariantsForControl('navigation', 275),
-  name: 'Navigation (275px)',
-};
-export const NavigationAsButton275px = {
-  ...generateVariantsForControl('navigationAsButton', 275),
-  name: 'Navigation As Button (275px)',
-};
-export const Checkbox275px = {
-  ...generateVariantsForControl('checkbox', 275),
-  name: 'Checkbox (275px)',
-};
-export const Radio275px = {
-  ...generateVariantsForControl('radio', 275),
-  name: 'Radio (275px)',
-};
-export const Switch275px = {
-  ...generateVariantsForControl('switch', 275),
-  name: 'Switch (275px)',
-};
-export const NonInteractive275px = {
-  ...generateVariantsForControl('non-interactive', 275),
-  name: 'Non Interactive (275px)',
-};
-
-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>
-  ),
-};