@transferwise/components 0.0.0-experimental-2242f8a → 0.0.0-experimental-5759f4d

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

@@ -0,0 +1,266 @@
+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, subtitle },
+    { 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, subtitle },
+    { media, title, subtitle, valueTitle },
+    { media, title, subtitle, valueTitle, valueSubtitle },
+    { media, title },
+    { media, title, subtitle },
+    { 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>
+          {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/subcomponents.tsx

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

@@ -0,0 +1,14 @@
+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/useListItemControl.tsx

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