@transferwise/components 0.0.0-experimental-266e18f → 0.0.0-experimental-add7cf9

package/src/listItem/ListItem.spec.tsx

@@ -1,35 +0,0 @@
-import { render, screen } from '../test-utils';
-import ListItem from './ListItem';
-
-describe('ListItem', () => {
-  describe('spotlight', () => {
-    it('only fully interactive variant can have spotlight:active', () => {
-      render(<ListItem title="Test Title" spotlight="active" control={<ListItem.Navigation />} />);
-      const listItem = screen.getByRole('listitem');
-      expect(listItem).toHaveClass('wds-list-item-interactive');
-      expect(listItem).toHaveClass('wds-list-item-spotlight-active');
-    });
-
-    it('only fully interactive variant can have spotlight:inactive', () => {
-      render(
-        <ListItem
-          title="Test Title"
-          spotlight="inactive"
-          control={<ListItem.Switch onClick={() => {}} />}
-        />,
-      );
-      const listItem = screen.getByRole('listitem');
-      expect(listItem).toHaveClass('wds-list-item-interactive');
-      expect(listItem).toHaveClass('wds-list-item-spotlight-inactive');
-    });
-
-    it('non interactive variant can have spotlight', () => {
-      render(<ListItem title="Test Title" spotlight="inactive" />);
-      const listItem = screen.getByRole('listitem');
-      expect(listItem).toHaveClass('wds-list-item-non-interactive');
-      expect(listItem).not.toHaveClass('wds-list-item-interactive');
-      expect(listItem).not.toHaveClass('wds-list-item-spotlight-inactive');
-      expect(listItem).not.toHaveClass('wds-list-item-spotlight-active');
-    });
-  });
-});

package/src/listItem/ListItem.story.tsx

@@ -1,296 +0,0 @@
-import ListItem, { Props as ItemProps } from './ListItem';
-import { Meta, StoryObj } from '@storybook/react';
-import React, { useState } from 'react';
-import {
-  Bank,
-  BankTransfer,
-  FastFlag,
-  MultiCurrency,
-  Plus,
-  Receipt,
-  Savings,
-} from '@transferwise/icons';
-
-import { lorem10, lorem20, lorem40, lorem5 } from '../test-utils';
-import { Flag } from '@wise/art';
-import { List } from '../legacylistItem/List';
-import Money from '../money';
-import Section from '../section';
-import Header from '../header';
-
-export default {
-  component: ListItem,
-  title: 'Content/ListItem',
-} satisfies Meta<ItemProps>;
-
-type Story = StoryObj<ItemProps>;
-
-// TODO: delete this story later when we have more peace of the List Item puzzle
-export const TempPlayground: Story = {
-  render: () => {
-    const [checked, setChecked] = useState(false);
-
-    return (
-      <div>
-        <ListItem
-          media={
-            <ListItem.AvatarView badge={{ type: 'action' }}>
-              <Flag code="BBD" />
-            </ListItem.AvatarView>
-          }
-          title="Test title"
-          subtitle="Test subtitle"
-          additionalInfo={<ListItem.AdditionalInfo>{lorem10}</ListItem.AdditionalInfo>}
-        />
-        <ListItem
-          media={
-            <ListItem.AvatarLayout
-              avatars={[{ asset: <Flag code="BBD" /> }, { asset: <Flag code="MXN" /> }]}
-            />
-          }
-          title="Test title"
-          subtitle={lorem10}
-          additionalInfo={<ListItem.AdditionalInfo>{lorem20}</ListItem.AdditionalInfo>}
-        />
-        <ListItem
-          media={
-            <ListItem.AvatarLayout
-              size={72}
-              orientation="diagonal"
-              avatars={[{ asset: <Flag code="BBD" /> }, { asset: <Flag code="MXN" /> }]}
-            />
-          }
-          title="Test title"
-          subtitle={lorem10}
-          valueTitle="100 GBP"
-          valueSubtitle="100 USD"
-          additionalInfo={<ListItem.AdditionalInfo>{lorem20}</ListItem.AdditionalInfo>}
-        />
-        <ListItem
-          media={<ListItem.AvatarView profileType="BUSINESS" notification />}
-          title="Test title"
-          subtitle="Test subtitle"
-          additionalInfo={
-            <ListItem.AdditionalInfo
-              action={{ label: 'Learn more', href: 'https://wise.com', target: '_blank' }}
-            >
-              {lorem10}
-            </ListItem.AdditionalInfo>
-          }
-          prompt={<ListItem.Prompt type="negative">You have done something wrong</ListItem.Prompt>}
-        />
-        <ListItem
-          media={<ListItem.AvatarView imgSrc="../avatar-square-dude.webp" selected />}
-          title="Test title"
-          additionalInfo={<ListItem.AdditionalInfo>{lorem10}</ListItem.AdditionalInfo>}
-          prompt={
-            <ListItem.Prompt
-              type="discount"
-              action={{
-                href: 'https://wise.com',
-                target: '_blank',
-                'aria-label': 'clickable prompt',
-              }}
-            >
-              The whole prompt is secretly clickable
-            </ListItem.Prompt>
-          }
-        />
-
-        <ListItem
-          media={<ListItem.Image src="../apple-pay-logo.svg" />}
-          title="Accepting Apple Pay"
-          subtitle={lorem10}
-        />
-
-        <ListItem
-          media={<ListItem.Image src="../wise-card.svg" />}
-          title="Wise Business Card"
-          subtitle={lorem5}
-        />
-
-        <ListItem
-          title="Test title"
-          disabled
-          subtitle={lorem10}
-          additionalInfo={<ListItem.AdditionalInfo>{lorem20}</ListItem.AdditionalInfo>}
-          control={<ListItem.Button priority="secondary-neutral">as Button</ListItem.Button>}
-        />
-        <ListItem
-          title="Test title"
-          disabled
-          subtitle={lorem10}
-          additionalInfo={<ListItem.AdditionalInfo>{lorem20}</ListItem.AdditionalInfo>}
-          control={
-            <ListItem.IconButton>
-              <Plus />
-            </ListItem.IconButton>
-          }
-        />
-
-        <ListItem
-          title="Test title"
-          subtitle={lorem10}
-          additionalInfo={<ListItem.AdditionalInfo>{lorem20}</ListItem.AdditionalInfo>}
-          control={
-            <ListItem.Button
-              priority="secondary-neutral"
-              as="a"
-              target="dfdf"
-              aria-label="adsfasfd"
-              href="wise.com"
-            >
-              as Link
-            </ListItem.Button>
-          }
-        />
-
-        <ListItem
-          media={
-            <ListItem.AvatarView>
-              <Bank />
-            </ListItem.AvatarView>
-          }
-          spotlight="inactive"
-          title="Test title"
-          subtitle={lorem5}
-          additionalInfo={<ListItem.AdditionalInfo>{lorem10}</ListItem.AdditionalInfo>}
-          control={<ListItem.Checkbox indeterminate />}
-          className="m-t-2"
-        />
-
-        <ListItem
-          media={
-            <ListItem.AvatarLayout
-              orientation="diagonal"
-              avatars={[{ asset: <BankTransfer /> }, { asset: <Bank /> }]}
-            />
-          }
-          spotlight="active"
-          title="Test title"
-          subtitle={lorem5}
-          additionalInfo={<ListItem.AdditionalInfo>{lorem10}</ListItem.AdditionalInfo>}
-          control={
-            <ListItem.Switch
-              checked={checked}
-              onClick={() => {
-                setChecked(!checked);
-              }}
-            />
-          }
-          className="m-t-2 m-b-4"
-        />
-      </div>
-    );
-  },
-};
-
-export const Radio: Story = {
-  render: () => (
-    <div>
-      {/* Basic */}
-      {/* with additional info */}
-      {/* with prompt */}
-      {/* Disabled */}
-      {/* Spotlight */}
-      {/* Active */}
-    </div>
-  ),
-};
-
-export const Button: Story = {
-  render: () => (
-    <div>
-      {/* Basic */}
-      {/* with additional info */}
-      {/* with prompt */}
-      {/* partially interactive */}
-      {/* Disabled */}
-      {/* Spotlight */}
-      {/* Active */}
-    </div>
-  ),
-};
-
-export const NonInteractive: Story = {
-  render: () => (
-    <div>
-      <Section>
-        <Header title="Transcation Details" />
-        <List>
-          <ListItem
-            media={
-              <ListItem.AvatarView>
-                <MultiCurrency />
-              </ListItem.AvatarView>
-            }
-            title="Estimated costs"
-            subtitle="Other providers"
-            valueTitle={<Money amount={100} currency="GBP" />}
-          />
-          <ListItem
-            media={
-              <ListItem.AvatarView>
-                <FastFlag />
-              </ListItem.AvatarView>
-            }
-            title="Total paid"
-            subtitle="Wise"
-            valueTitle={<Money amount={12.15} currency="GBP" />}
-            valueSubtitle={<Money amount={100.9} currency="GBP" />}
-          />
-          <ListItem
-            media={
-              <ListItem.AvatarView>
-                <Receipt />
-              </ListItem.AvatarView>
-            }
-            title="Total fees"
-            subtitle={lorem5}
-            valueSubtitle={<Money amount={5.5} currency="GBP" />}
-          />
-          <ListItem
-            media={
-              <ListItem.AvatarView>
-                <Savings />
-              </ListItem.AvatarView>
-            }
-            title="You saved"
-            valueSubtitle={<Money amount={1000} currency="GBP" />}
-          />
-        </List>
-      </Section>
-
-      <ListItem
-        as="div"
-        title="Bank name and address"
-        subtitle="Bank Ltd, 2 Street Boulevard, Singapore, 1213423"
-        additionalInfo={
-          <ListItem.AdditionalInfo
-            action={{ label: 'Learn more', href: 'https://wise.com', target: '_blank' }}
-          >
-            This is our partner bank in Singapore.
-          </ListItem.AdditionalInfo>
-        }
-      />
-      <ListItem
-        as="div"
-        title="Bank name and address"
-        subtitle="Capital Ltd, 2 Canal Street, London, E14 111"
-        additionalInfo={
-          <ListItem.AdditionalInfo
-            action={{ label: 'Learn more', href: 'https://wise.com', target: '_blank' }}
-          />
-        }
-      />
-      {/* Basic */}
-      {/* with additional info */}
-      {/* with prompt */}
-      {/* Disabled */}
-      {/* Spotlight */}
-      {/* Active */}
-    </div>
-  ),
-};
-
-// add intaces with dark mode

package/src/listItem/ListItem.tsx

@@ -1,190 +0,0 @@
-import { createContext, ReactNode, useId, useMemo, useState } from 'react';
-import { Typography } from '../common';
-import Body from '../body';
-import { AdditionalInfo } from './ListItemAdditionalInfo';
-import { IconButton } from './ListItemIconButton';
-import { Checkbox } from './ListItemCheckbox';
-import { Navigation } from './ListItemNavigation';
-import { clsx } from 'clsx';
-import { Button } from './ListItemButton';
-import { Switch } from './ListItemSwitch';
-import { AvatarLayout, AvatarView, Image } from './ListItemMedia';
-import Prompt from './prompt/Prompt';
-
-export type ListItemTypes =
-  | 'non-interactive'
-  | 'navigation'
-  | 'radio'
-  | 'checkbox'
-  | 'switch'
-  | 'button'
-  | 'icon-button';
-
-export type Props = {
-  as?: 'li' | 'div' | 'span';
-  inverted?: boolean;
-  disabled?: boolean;
-  spotlight?: 'active' | 'inactive';
-  title: ReactNode;
-  subtitle?: ReactNode;
-  additionalInfo?: ReactNode;
-  valueTitle?: ReactNode;
-  valueSubtitle?: ReactNode;
-  media?: ReactNode;
-  control?: ReactNode;
-  prompt?: ReactNode;
-  className?: string;
-};
-
-export type ListItemContextData = {
-  setControlType: (type: ListItemTypes) => void;
-  ids: {
-    label: string;
-    additionalInfo: string;
-    value: string;
-    control: string;
-    prompt: string;
-  };
-  props: Pick<Props, 'as' | 'disabled' | 'inverted'>;
-};
-
-// @ts-expect-error for now let's mock it with `null` value
-// but actually by default we should specify `setControlType('none')`
-export const ListItemContext = createContext<ListItemContextData>(null);
-
-export const ListItem = ({
-  as: View = 'li',
-  title,
-  subtitle,
-  additionalInfo,
-  prompt,
-  inverted,
-  media,
-  spotlight = undefined,
-  valueTitle,
-  valueSubtitle,
-  control = null,
-  disabled,
-  className,
-}: Props) => {
-  /*
-  const returnType = (): ReactNode => {
-    switch (type) {
-      case 'Navigation':
-        return <Chevron orientation={Position.RIGHT} disabled />;
-      case 'Radio':
-        return <RadioButton name="Hello" checked />;
-      case 'Checkbox':
-        return <CheckboxButton name="Hello" checked />;
-      case 'Switch':
-        return <Switch onClick={() => console.log('clicked')} />;
-      case 'Button':
-        return <Button v2>Hello</Button>;
-      case 'IconButton':
-        return (
-          <IconButton size={40} priority="minimal">
-            <InfoCircle />
-          </IconButton>
-        );
-    }
-  };
-  */
-  const idPrefix = useId();
-
-  const [controlType, setControlType] = useState<ListItemTypes>('non-interactive');
-  const ids = {
-    label: `${idPrefix}_label`,
-    value: `${idPrefix}_value`,
-    control: `${idPrefix}_control`,
-    prompt: `${idPrefix}_prompt`,
-    additionalInfo: `${idPrefix}_additional-info`,
-  };
-
-  // TODO: add partially interactive check from Button and IconButtons
-  // (https://transferwise.atlassian.net/browse/DS-7562)
-  const isFullyInteractive = controlType !== 'non-interactive';
-
-  const listItemContext = useMemo(
-    () => ({ setControlType, ids, props: { as: View, disabled, inverted } }),
-    [],
-  );
-
-  return (
-    <ListItemContext.Provider value={listItemContext}>
-      <View
-        className={clsx(
-          'wds-list-item',
-          { 'wds-list-item-interactive': controlType !== 'non-interactive' },
-          `wds-list-item-${controlType}`,
-          'd-flex flex-row',
-          { 'align-items-center': !subtitle },
-          {
-            [`wds-list-item-spotlight-${spotlight}`]: isFullyInteractive && !!spotlight,
-          },
-          className,
-        )}
-        aria-describedby={[ids.additionalInfo].join(' ')}
-      >
-        {media && <div className="wds-list-item-media">{media}</div>}
-
-        {/* Title + Subtitle + Values + Additional Info - Group */}
-        <div className="wds-list-item-body">
-          {/* Title + Subtitle + Values - Group */}
-          <div className="d-flex justify-content-between">
-            <span>
-              {/* @ts-expect-error div can have role and aria-lavel props */}
-              <Body
-                type={Typography.BODY_LARGE_BOLD}
-                className="wds-list-item-title"
-                // for a11y this needs to be a header but for SEO it shouldn't be `h*` tag
-                // so we enable header semantics via `role` and `aria-level` attrs
-                role="heading"
-                aria-level="4"
-              >
-                {title}
-              </Body>
-              <Body className="wds-list-item-subtitle">{subtitle}</Body>
-            </span>
-            {(valueTitle || valueSubtitle) && (
-              <span
-                id={ids.value}
-                className={clsx('wds-list-item-value', 'd-flex align-items-center', {
-                  'flex-column': valueTitle !== undefined && valueSubtitle !== undefined,
-                })}
-              >
-                {valueTitle && (
-                  <Body type={Typography.BODY_LARGE_BOLD} className="wds-list-item-title-value">
-                    {valueTitle}
-                  </Body>
-                )}
-                {valueSubtitle && (
-                  <Body className="wds-list-item-subtitle-value">{valueSubtitle}</Body>
-                )}
-              </span>
-            )}
-          </div>
-
-          {/* Additional Info and Prompt here */}
-          {Boolean(subtitle) && additionalInfo}
-        </div>
-        {control === null ? null : <Body className="wds-list-item-control">{control}</Body>}
-        {prompt}
-      </View>
-    </ListItemContext.Provider>
-  );
-};
-
-/* eslint-disable functional/immutable-data */
-ListItem.Image = Image;
-ListItem.AvatarView = AvatarView;
-ListItem.AvatarLayout = AvatarLayout;
-ListItem.AdditionalInfo = AdditionalInfo;
-ListItem.Checkbox = Checkbox;
-ListItem.IconButton = IconButton;
-ListItem.Navigation = Navigation;
-ListItem.Button = Button;
-ListItem.Switch = Switch;
-ListItem.Prompt = Prompt;
-/* eslint-enable functional/immutable-data */
-
-export default ListItem;

package/src/listItem/ListItemAdditionalInfo.tsx

@@ -1,31 +0,0 @@
-import { PropsWithChildren, useContext } from 'react';
-import { ListItemContext, ListItemContextData } from './ListItem';
-import Body from '../body';
-import Link, { LinkProps } from '../link';
-import { Typography } from '../common';
-
-export type ListItemAdditionalInfoProps = PropsWithChildren<{
-  action?: Pick<LinkProps, 'href' | 'onClick' | 'target'> & { label?: string };
-}>;
-
-export const AdditionalInfo = function ({ children, action }: ListItemAdditionalInfoProps) {
-  const { ids } = useContext<ListItemContextData>(ListItemContext);
-
-  return (
-    <Body
-      type={Typography.BODY_DEFAULT}
-      id={ids.additionalInfo}
-      className="wds-list-item-additional-info"
-    >
-      {children}
-      {action ? (
-        <>
-          {' '}
-          <Link href={action.href} target={action.target} onClick={action.onClick}>
-            {action.label}
-          </Link>
-        </>
-      ) : null}
-    </Body>
-  );
-};

package/src/listItem/ListItemButton.spec.tsx

@@ -1,90 +0,0 @@
-import { render, screen, mockMatchMedia } from '../test-utils';
-import { Button as ItemButton } from './ListItemButton';
-import { ButtonPriority } from '../button/Button.types';
-import { ListItemContext } from './ListItem';
-
-mockMatchMedia();
-
-describe('ItemButton', () => {
-  const mockSetControlType = jest.fn();
-
-  const renderWithItemContext = (ui: React.ReactNode) => {
-    return render(
-      <ListItemContext.Provider
-        value={{
-          setControlType: mockSetControlType,
-          ids: {
-            label: 'label',
-            additionalInfo: 'additional Info',
-            value: 'value',
-            control: 'control',
-            prompt: 'prompt',
-          },
-          props: {},
-        }}
-      >
-        {ui}
-      </ListItemContext.Provider>,
-    );
-  };
-
-  beforeEach(() => {
-    jest.clearAllMocks();
-  });
-
-  it('always sets v2 to true', () => {
-    renderWithItemContext(<ItemButton priority="primary">Test Button</ItemButton>);
-    const button = screen.getByRole('button');
-    expect(button).toBeInTheDocument();
-    expect(mockSetControlType).toHaveBeenCalledWith('button');
-  });
-
-  it('always sets size to "md"', () => {
-    renderWithItemContext(<ItemButton priority="primary">Test Button</ItemButton>);
-    const button = screen.getByRole('button');
-    expect(button).toHaveClass('wds-Button--medium');
-  });
-
-  it('supports all priorities', () => {
-    const priorities: ButtonPriority[] = ['primary', 'secondary', 'tertiary'];
-    priorities.forEach((priority) => {
-      renderWithItemContext(<ItemButton priority={priority}>Test {priority}</ItemButton>);
-      const button = screen.getByRole('button', { name: `Test ${priority}` });
-      expect(button).toBeInTheDocument();
-    });
-  });
-
-  it('renders as a button by default', () => {
-    renderWithItemContext(<ItemButton>Click me</ItemButton>);
-    const button = screen.getByRole('button');
-    expect(button).toBeInTheDocument();
-    expect(button.tagName).toBe('BUTTON');
-  });
-
-  it('renders as an anchor when href is provided', () => {
-    renderWithItemContext(<ItemButton href="https://example.com">Go to Example</ItemButton>);
-    const link = screen.getByRole('link', { name: 'Go to Example' });
-    expect(link).toBeInTheDocument();
-    expect(link.tagName).toBe('A');
-    expect(link).toHaveAttribute('href', 'https://example.com');
-  });
-
-  it('spreads additional props to the button', () => {
-    renderWithItemContext(<ItemButton aria-label="Custom Button">Custom</ItemButton>);
-    const button = screen.getByRole('button', { name: 'Custom Button' });
-    expect(button).toBeInTheDocument();
-    expect(button).toHaveAttribute('aria-label', 'Custom Button');
-  });
-
-  it('spreads additional props to the anchor', () => {
-    renderWithItemContext(
-      <ItemButton href="https://example.com" target="_blank" aria-label="Custom Link">
-        Custom Link
-      </ItemButton>,
-    );
-    const link = screen.getByRole('link', { name: 'Custom Link' });
-    expect(link).toBeInTheDocument();
-    expect(link).toHaveAttribute('href', 'https://example.com');
-    expect(link).toHaveAttribute('target', '_blank');
-  });
-});

package/src/listItem/ListItemButton.tsx

@@ -1,18 +0,0 @@
-import { default as ButtonComp, NewButtonProps } from '../button';
-import { useItemControl } from './useItemControl';
-
-export type ListItemButtonProps = Omit<NewButtonProps, 'v2' | 'size' | 'disabled'>;
-
-export const Button = ({ priority = 'secondary', ...props }: ListItemButtonProps) => {
-  const { baseItemProps } = useItemControl('button');
-
-  const commonProps = {
-    ...props,
-    priority,
-    v2: true,
-    size: 'md',
-    disabled: baseItemProps.disabled,
-  };
-
-  return <ButtonComp {...(commonProps as NewButtonProps)} />;
-};

package/src/listItem/ListItemCheckbox.tsx

@@ -1,14 +0,0 @@
-import CheckboxButton from '../checkboxButton';
-import { CheckboxButtonProps } from '../checkboxButton/CheckboxButton';
-import { useItemControl } from './useItemControl';
-
-export type ListItemCheckboxProps = Pick<
-  CheckboxButtonProps,
-  'checked' | 'indeterminate' | 'onChange'
->;
-
-export const Checkbox = function (props: ListItemCheckboxProps) {
-  const { baseItemProps } = useItemControl('checkbox');
-
-  return <CheckboxButton disabled={baseItemProps.disabled} {...props} />;
-};

package/src/listItem/ListItemIconButton.tsx

@@ -1,13 +0,0 @@
-import { default as IconButtonComp, IconButtonProps } from '../iconButton';
-import { useItemControl } from './useItemControl';
-import { ReactNode } from 'react';
-
-export type ListItemIconButtonProps = Pick<IconButtonProps, 'onClick' | 'href' | 'target'> & {
-  children: ReactNode;
-};
-
-export const IconButton = function (props: ListItemIconButtonProps) {
-  const { baseItemProps } = useItemControl('icon-button');
-
-  return <IconButtonComp {...props} size={32} disabled={baseItemProps.disabled} />;
-};