@transferwise/components 46.105.4 → 46.105.5

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

@@ -1,274 +0,0 @@
-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>
-  ),
-};