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

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

@@ -1,271 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react-webpack5';
-import { MultiCurrency } from '@transferwise/icons';
-import { storyConfig } from '../../test-utils';
-import Link from '../../link';
-import { ListItem, Props as ItemProps } 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 },
-    a11y: { disable: true },
-    knobs: { disable: true },
-  },
-} satisfies Meta<ItemProps>;
-
-type Story = StoryObj<ItemProps>;
-type VariantPartial = { title: string } & Partial<ItemProps>;
-
-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, 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, 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: () => (
-        <ol className="list-unstyled">
-          {variants.map((variant, variantIndex) => (
-            <ListItem
-              key={`${controlType}-${variantIndex}-${Math.random()}`}
-              control={control}
-              {...variant}
-            />
-          ))}
-        </ol>
-      ),
-    },
-    { 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 ButtonControlLabel: Story = {
-  render: () => (
-    <ol className="list-unstyled">
-      <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}
-      />
-    </ol>
-  ),
-};

package/src/listItem/_stories/images/landscape.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 112 80"><path fill="#9FE870" stroke="#163300" stroke-width="2" d="M1 79V1h110v78z"/><path fill="#163300" stroke="#163300" stroke-width="2" d="M74.2 21.4 60.9 58h-5.8l11.1-30.8.5-1.3H48.6l.8 1.5 3 5.2-4.7 5.5-1.4 1.7h9.1l-1.4 4H37.3l9.5-11.2 1.4-1.6h-1.5L41 21.4h33.1Z"/></svg>

package/src/listItem/_stories/images/portrait.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 80 112"><path fill="#9FE870" stroke="#163300" stroke-width="2" d="M1 1h78v110H1z"/><path fill="#163300" stroke="#163300" stroke-width="2" d="M59 37 45.9 73.8H40l11-30.9.6-1.3H33.4l1 1.5 3 5.2-4.8 5.5-1.4 1.7h9.1l-1.5 4H22.2l9.5-11.2 1.4-1.6h-1.6L26 37h33Z"/></svg>

package/src/listItem/_stories/subcomponents.tsx

@@ -1,139 +0,0 @@
-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 =
-  | '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> = {
-  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

@@ -1,14 +0,0 @@
-export type { Props as 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

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

package/src/listItem/useListItemControl.tsx

@@ -1,18 +0,0 @@
-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

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