@transferwise/components 0.0.0-experimental-db6cf60 → 0.0.0-experimental-4678400

package/src/CardContainer/CardContainer.test.tsx

@@ -1,103 +0,0 @@
-import Header from '../Header';
-import { render, screen } from '../test-utils';
-import CardContainer from './CardContainer';
-import type { CardContainerSpotlight } from './CardContainer.types';
-
-describe('CardContainer', () => {
-  const content = 'Container content';
-
-  describe('rendering', () => {
-    it('renders children', () => {
-      render(<CardContainer>{content}</CardContainer>);
-      expect(screen.getByText(content)).toBeInTheDocument();
-    });
-
-    it('renders as a section by default', () => {
-      render(<CardContainer data-testid="container">{content}</CardContainer>);
-      expect(screen.getByTestId('container').tagName).toBe('SECTION');
-    });
-
-    it.each(['div', 'article'] as const)('renders as %s when as is provided', (as) => {
-      render(
-        <CardContainer as={as} data-testid="container">
-          {content}
-        </CardContainer>,
-      );
-      expect(screen.getByTestId('container').tagName).toBe(as.toUpperCase());
-    });
-
-    it('applies className to the root element', () => {
-      render(
-        <CardContainer className="custom-class" data-testid="container">
-          {content}
-        </CardContainer>,
-      );
-      expect(screen.getByTestId('container')).toHaveClass('wds-card-container', 'custom-class');
-    });
-
-    it('spreads unknown props onto the root element', () => {
-      render(
-        <CardContainer aria-label="Cards" data-testid="container">
-          {content}
-        </CardContainer>,
-      );
-      expect(screen.getByTestId('container')).toHaveAttribute('aria-label', 'Cards');
-    });
-
-    it('renders a composed Header as a direct child', () => {
-      render(
-        <CardContainer data-testid="container">
-          <Header as="h3" title="Cards" />
-          {content}
-        </CardContainer>,
-      );
-      const heading = screen.getByRole('heading', { level: 3, name: 'Cards' });
-      expect(heading.parentElement).toBe(screen.getByTestId('container'));
-    });
-  });
-
-  describe('spotlight', () => {
-    it('has no spotlight modifier by default', () => {
-      render(<CardContainer data-testid="container">{content}</CardContainer>);
-      const root = screen.getByTestId('container');
-      expect(root).not.toHaveClass('wds-card-container--active');
-      expect(root).not.toHaveClass('wds-card-container--inactive');
-    });
-
-    it.each<CardContainerSpotlight>(['active', 'inactive'])(
-      'renders the %s spotlight modifier',
-      (spotlight) => {
-        render(
-          <CardContainer spotlight={spotlight} data-testid="container">
-            {content}
-          </CardContainer>,
-        );
-        expect(screen.getByTestId('container')).toHaveClass(`wds-card-container--${spotlight}`);
-      },
-    );
-
-    it('draws a decorative dashed border for the inactive spotlight', () => {
-      render(
-        <CardContainer spotlight="inactive" data-testid="container">
-          {content}
-        </CardContainer>,
-      );
-      expect(
-        screen.getByTestId('container').querySelector('.wds-card-container__border'),
-      ).toHaveAttribute('aria-hidden', 'true');
-    });
-
-    it.each<CardContainerSpotlight | undefined>(['active', undefined])(
-      'draws no dashed border for spotlight %s',
-      (spotlight) => {
-        render(
-          <CardContainer spotlight={spotlight} data-testid="container">
-            {content}
-          </CardContainer>,
-        );
-        const root = screen.getByTestId('container');
-        expect(root.querySelector('.wds-card-container__border')).not.toBeInTheDocument();
-      },
-    );
-  });
-});

package/src/CardContainer/CardContainer.tsx

@@ -1,36 +0,0 @@
-import { clsx } from 'clsx';
-import { forwardRef } from 'react';
-
-import type { CardContainerProps } from './CardContainer.types';
-
-/**
- * A bounded surface that groups related content. It has no slots of its own: compose a `Header`
- * and any other content as children, and the card stacks them with no gap between them.
- */
-const CardContainer = forwardRef<HTMLElement, CardContainerProps>(
-  ({ spotlight, children, as: Element = 'section', className, ...props }, ref) => {
-    return (
-      <Element
-        ref={ref as React.Ref<HTMLElement & HTMLDivElement>}
-        className={clsx(
-          'wds-card-container',
-          spotlight && `wds-card-container--${spotlight}`,
-          className,
-        )}
-        {...props}
-      >
-        {children}
-
-        {spotlight === 'inactive' && (
-          <svg aria-hidden="true" className="wds-card-container__border">
-            <rect />
-          </svg>
-        )}
-      </Element>
-    );
-  },
-);
-
-CardContainer.displayName = 'CardContainer';
-
-export default CardContainer;

package/src/CardContainer/CardContainer.types.ts

@@ -1,36 +0,0 @@
-import type { HTMLAttributes, ReactNode } from 'react';
-
-/**
- * Highlights the card, matching `ListItem`'s `spotlight`.
- *
- * - `active` — live content the user can act on. Raised, with a soft shadow and a hairline border.
- * - `inactive` — a feature the user has not set up yet. Recessed, with a dashed stroke.
- *
- * Without a spotlight the card is flat, with a solid stroke, for content that is present but not
- * actionable.
- */
-export type CardContainerSpotlight = 'active' | 'inactive';
-
-export interface CardContainerProps extends HTMLAttributes<HTMLElement> {
-  /**
-   * Highlights the card as live content (`active`) or as a feature not set up yet (`inactive`).
-   * Leave unset for a flat card.
-   * @default undefined
-   */
-  spotlight?: CardContainerSpotlight;
-
-  /**
-   * Content, stacked with no gap. A `Header` is spaced from the content after it.
-   * @default undefined
-   */
-  children?: ReactNode;
-
-  /**
-   * Element rendered as the root.
-   * @default 'section'
-   */
-  as?: 'section' | 'div' | 'article';
-
-  className?: string;
-  'data-testid'?: string;
-}

package/src/CardContainer/_stories/CardContainer.story.tsx

@@ -1,99 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react-webpack5';
-
-import {
-  createSandboxStory,
-  globalScope,
-} from '../../../.storybook/components/sandbox/SandboxEditor';
-import Body from '../../Body';
-import CardContainer from '..';
-import type { CardContainerSpotlight } from '..';
-import { CardsList, SampleContent } from './helpers';
-
-/**
- * A bounded surface that groups related content. It has no slots of its own: any content passed
- * as children is stacked with no gap, inside the card's padding.
- *
- * To give a card a title, a title link or actions, compose a `Header` as its first child — see the
- * **With Header** stories.
- */
-const meta: Meta<typeof CardContainer> = {
-  component: CardContainer,
-  title: 'Layouts/CardContainer',
-  tags: ['early-access'],
-  argTypes: {
-    spotlight: {
-      control: 'radio',
-      options: [undefined, 'active', 'inactive'],
-      table: {
-        defaultValue: { summary: 'undefined' },
-        type: { summary: 'CardContainerSpotlight' },
-      },
-    },
-    as: {
-      control: 'radio',
-      options: ['section', 'div', 'article'],
-      table: { defaultValue: { summary: "'section'" }, type: { summary: 'string' } },
-    },
-    children: {
-      control: false,
-      table: { type: { summary: 'ReactNode' } },
-    },
-    className: { control: 'text', table: { type: { summary: 'string' } } },
-    'data-testid': { control: 'text', table: { type: { summary: 'string' } } },
-  },
-  args: {
-    spotlight: 'active',
-    as: 'section',
-  },
-};
-
-export default meta;
-
-type Story = StoryObj<typeof CardContainer>;
-
-/** Experiment with the card's props. */
-export const Playground: Story = {
-  render: (args) => (
-    <CardContainer {...args}>
-      <SampleContent />
-    </CardContainer>
-  ),
-};
-
-export const Sandbox = createSandboxStory({
-  code: `<CardContainer spotlight="active">
-  <Body>Your virtual card is ready to use.</Body>
-  <Body>Spend in 40+ currencies with the real exchange rate.</Body>
-</CardContainer>`,
-  scope: { ...globalScope, CardContainer },
-});
-
-/**
- * `spotlight` matches `ListItem`'s: `active` is raised, for live content, and `inactive` is
- * recessed with a dashed stroke, for a feature not set up yet. Without a spotlight the card is
- * flat.
- */
-export const Spotlight: Story = {
-  parameters: { controls: { disable: true } },
-  render: () => (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: '24px', maxWidth: '480px' }}>
-      {([undefined, 'active', 'inactive'] as (CardContainerSpotlight | undefined)[]).map(
-        (spotlight) => (
-          <CardContainer key={spotlight ?? 'none'} spotlight={spotlight}>
-            <Body>Spotlight: {spotlight ?? 'not set'}</Body>
-          </CardContainer>
-        ),
-      )}
-    </div>
-  ),
-};
-
-/** A `List` placed directly in the card is inset by a further 8px on each side. */
-export const WithList: Story = {
-  parameters: { controls: { disable: true } },
-  render: () => (
-    <CardContainer>
-      <CardsList />
-    </CardContainer>
-  ),
-};

package/src/CardContainer/_stories/CardContainer.test.story.tsx

@@ -1,375 +0,0 @@
-import { Card, Jar, Plus, Settings, Travel } from '@transferwise/icons';
-import { Meta, StoryObj } from '@storybook/react-webpack5';
-import { useTheme } from '@wise/components-theming';
-
-import { useRtlDiffI18n, withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
-import { withVariantConfig } from '../../../.storybook/helpers';
-import Body from '../../Body';
-import Header from '../../Header';
-import List from '../../List';
-import ListItem from '../../ListItem';
-import type { ListItemProps } from '../../ListItem';
-import Title from '../../Title';
-import CardContainer from '..';
-import type { CardContainerProps, CardContainerSpotlight } from '..';
-
-const meta: Meta<typeof CardContainer> = {
-  component: CardContainer,
-  tags: ['!autodocs', '!manifest'],
-  title: 'Layouts/CardContainer/Tests',
-};
-export default meta;
-type Story = StoryObj<CardContainerProps>;
-
-const SPOTLIGHTS: (CardContainerSpotlight | undefined)[] = [undefined, 'active', 'inactive'];
-
-const ThemeTitle = () => {
-  const { theme, screenMode } = useTheme();
-  return (
-    <Title type="title-subsection">
-      {theme} / {screenMode}
-    </Title>
-  );
-};
-
-/**
- * Every spotlight against every theme. The `active` spotlight's resting shadow is only applied in
- * the light `personal`, `business` and `platform` themes; every `dark`, `bright-green` and
- * `forest-green` column should show a flat surface.
- */
-export const AllVariants: Story = {
-  ...withVariantConfig([
-    'default',
-    'dark',
-    'bright-green',
-    'forest-green',
-    'business',
-    'business--bright-green',
-    'business--forest-green',
-    'platform',
-    'platform--forest-green',
-  ]),
-  render: () => (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: '24px', maxWidth: '420px' }}>
-      <ThemeTitle />
-      {SPOTLIGHTS.map((spotlight) => (
-        <CardContainer key={spotlight ?? 'none'} spotlight={spotlight}>
-          <Header
-            as="h3"
-            title={`Spotlight: ${spotlight ?? 'not set'}`}
-            titleAction={{ href: '#target' }}
-            action={{ label: 'Order card', icon: <Plus size={16} /> }}
-            actionSecondary={{ 'aria-label': 'Settings', icon: <Settings size={16} /> }}
-          />
-          <Body>First line of content.</Body>
-          <Body>Second line, to show the content stacks flush.</Body>
-        </CardContainer>
-      ))}
-    </div>
-  ),
-};
-
-/** A composed `Header` with every combination of title link and the two action slots. */
-export const HeaderCombinations: Story = {
-  render: () => (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: '24px', maxWidth: '420px' }}>
-      <CardContainer>
-        <Header as="h3" title="Title only" />
-        <Body>Content</Body>
-      </CardContainer>
-
-      <CardContainer>
-        <Header as="h3" title="Title as link" titleAction={{ href: '#target' }} />
-        <Body>Content</Body>
-      </CardContainer>
-
-      <CardContainer>
-        <Header
-          as="h3"
-          title="A title link long enough to wrap onto a second line, with its chevron after the last word"
-          titleAction={{ href: '#target' }}
-        />
-        <Body>Content</Body>
-      </CardContainer>
-
-      <CardContainer>
-        <Header as="h3" title="Leading action only" action={{ label: 'Order card' }} />
-        <Body>Content</Body>
-      </CardContainer>
-
-      <CardContainer>
-        <Header as="h3" title="Secondary action only" actionSecondary={{ label: 'Manage' }} />
-        <Body>Content</Body>
-      </CardContainer>
-
-      <CardContainer>
-        <Header
-          as="h3"
-          title="Both actions, icon only"
-          action={{ 'aria-label': 'Add', icon: <Plus size={16} /> }}
-          actionSecondary={{ 'aria-label': 'Settings', icon: <Settings size={16} /> }}
-        />
-        <Body>Content</Body>
-      </CardContainer>
-
-      <CardContainer>
-        <Header
-          as="h3"
-          title="A title long enough to wrap onto more than a single line next to its actions"
-          titleAction={{ href: '#target' }}
-          action={{ label: 'Order card', icon: <Plus size={16} /> }}
-          actionSecondary={{ 'aria-label': 'Settings', icon: <Settings size={16} /> }}
-        />
-        <Body>Content</Body>
-      </CardContainer>
-
-      <CardContainer>
-        <Header as="h3" title="Header only" action={{ label: 'Order card' }} />
-      </CardContainer>
-
-      <CardContainer>
-        <Body>No header — the content starts at the card&apos;s top padding.</Body>
-      </CardContainer>
-    </div>
-  ),
-};
-
-const LIST_ITEMS = [
-  { title: '•••• 1582', subtitle: 'Current account', icon: <Card /> },
-  { title: '•••• 9982', subtitle: 'Jar', icon: <Jar /> },
-  { title: '•••• 5507', subtitle: 'Travel', icon: <Travel /> },
-];
-
-const CardListItem = ({
-  index,
-  spotlight,
-}: {
-  index: number;
-  spotlight?: ListItemProps['spotlight'];
-}) => {
-  const { title, subtitle, icon } = LIST_ITEMS[index];
-  return (
-    <ListItem
-      title={title}
-      subtitle={subtitle}
-      spotlight={spotlight}
-      media={<ListItem.AvatarView>{icon}</ListItem.AvatarView>}
-      control={<ListItem.Navigation href={`#item-${index}`} />}
-    />
-  );
-};
-
-/**
- * A composed `List` with every mix of spotlight and non-spotlight items. Non-spotlight items draw
- * their hover and focus backgrounds 8px out of bounds, into the card's padding.
- */
-export const ListCombinations: Story = {
-  render: () => (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: '24px', maxWidth: '420px' }}>
-      <CardContainer>
-        <Header as="h3" title="Non-spotlight items" titleAction={{ href: '#target' }} />
-        <List>
-          <CardListItem index={0} />
-          <CardListItem index={1} />
-          <CardListItem index={2} />
-        </List>
-      </CardContainer>
-
-      <CardContainer>
-        <Header as="h3" title="Active spotlight items" />
-        <List>
-          <CardListItem index={0} spotlight="active" />
-          <CardListItem index={1} spotlight="active" />
-        </List>
-      </CardContainer>
-
-      <CardContainer>
-        <Header as="h3" title="Inactive spotlight items" />
-        <List>
-          <CardListItem index={0} spotlight="inactive" />
-          <CardListItem index={1} spotlight="inactive" />
-        </List>
-      </CardContainer>
-
-      <CardContainer>
-        <Header as="h3" title="Active and inactive spotlight items" />
-        <List>
-          <CardListItem index={0} spotlight="active" />
-          <CardListItem index={1} spotlight="inactive" />
-        </List>
-      </CardContainer>
-
-      <CardContainer>
-        <Header
-          as="h3"
-          title="Spotlight and non-spotlight items"
-          action={{ label: 'Order card', icon: <Plus size={16} /> }}
-        />
-        <List>
-          <CardListItem index={0} spotlight="active" />
-          <CardListItem index={1} />
-          <CardListItem index={2} />
-        </List>
-      </CardContainer>
-
-      <CardContainer spotlight="active">
-        <Header as="h3" title="Single non-spotlight item in an active card" />
-        <List>
-          <CardListItem index={0} />
-        </List>
-      </CardContainer>
-
-      <CardContainer spotlight="inactive">
-        <Header as="h3" title="Single spotlight item in an inactive card" />
-        <List>
-          <CardListItem index={0} spotlight="active" />
-        </List>
-      </CardContainer>
-
-      <CardContainer>
-        <List>
-          <CardListItem index={0} />
-          <CardListItem index={1} />
-        </List>
-      </CardContainer>
-    </div>
-  ),
-};
-
-/**
- * Two spotlighted cards side by side: one with a title-only `Header` and text, the other with
- * action buttons and a `List`. Each header is at least as tall as the 32px action buttons, so the
- * first line of content starts at the same height in both cards.
- */
-export const SideBySide: Story = {
-  render: () => (
-    <div style={{ display: 'flex', gap: '24px', maxWidth: '900px' }}>
-      <div style={{ flex: 1 }}>
-        <CardContainer spotlight="active">
-          <Header as="h3" title="Balance" />
-          <Body>Your virtual card is ready to use.</Body>
-          <Body>Spend in 40+ currencies with the real exchange rate.</Body>
-        </CardContainer>
-      </div>
-      <div style={{ flex: 1 }}>
-        <CardContainer spotlight="active">
-          <Header
-            as="h3"
-            title="Cards"
-            titleAction={{ href: '#target' }}
-            action={{ label: 'Order card', icon: <Plus size={16} /> }}
-            actionSecondary={{ 'aria-label': 'Settings', icon: <Settings size={16} /> }}
-          />
-          <List>
-            <CardListItem index={0} />
-            <CardListItem index={1} />
-            <CardListItem index={2} />
-          </List>
-        </CardContainer>
-      </div>
-    </div>
-  ),
-};
-
-/**
- * When the `Header` is 360px wide or narrower, its action corner stays beside a title that fits
- * on one line next to it, and moves under a longer title. Above that width, a long title wraps
- * beside the actions instead.
- */
-export const NarrowHeader: Story = {
-  render: () => (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: '24px' }}>
-      {[320, 394, 420].map((width) => (
-        <div key={width} style={{ display: 'flex', flexDirection: 'column', gap: '16px', width }}>
-          {['Cards', `A longer title in a card ${width}px wide`].map((title) => (
-            <CardContainer key={title} spotlight="active">
-              <Header
-                as="h3"
-                title={title}
-                titleAction={{ href: '#target' }}
-                action={{ label: 'Order card', icon: <Plus size={16} /> }}
-                actionSecondary={{ 'aria-label': 'Settings', icon: <Settings size={16} /> }}
-              />
-              <Body>Content</Body>
-            </CardContainer>
-          ))}
-        </div>
-      ))}
-    </div>
-  ),
-};
-
-/**
- * The `Header` is a wrapping flex row, so in RTL the action cluster should move to the left and
- * the title's trailing chevron should point left. The `actionSecondary` slot must stay on the
- * inline-start side of `action` in both directions.
- *
- * Every card is rendered wide (480px, actions beside the title) and narrow (320px). At 320px the
- * short titles keep their actions beside them, and the long title's actions stack under it,
- * aligned to the inline end. The long title wraps, so its chevron should follow the last word on
- * the inline-end side in both directions.
- */
-export const RTLDiff: Story = {
-  render: () => {
-    const i18n = useRtlDiffI18n();
-    const cards = (
-      <>
-        <CardContainer>
-          <Header as="h3" title={i18n.cards} titleAction={{ href: '#target' }} />
-          <Body>{i18n.content}</Body>
-        </CardContainer>
-
-        <CardContainer>
-          <Header
-            as="h3"
-            title={i18n.cards}
-            action={{ label: i18n.orderCard, icon: <Plus size={16} /> }}
-            actionSecondary={{ 'aria-label': i18n.settings, icon: <Settings size={16} /> }}
-          />
-          <Body>{i18n.content}</Body>
-        </CardContainer>
-
-        <CardContainer spotlight="active">
-          <Header
-            as="h3"
-            title={i18n.longTitle}
-            titleAction={{ href: '#target' }}
-            action={{ label: i18n.orderCard, icon: <Plus size={16} /> }}
-            actionSecondary={{ 'aria-label': i18n.settings, icon: <Settings size={16} /> }}
-          />
-          <Body>{i18n.content}</Body>
-        </CardContainer>
-
-        <CardContainer spotlight="inactive">
-          <Header as="h3" title={i18n.cards} />
-          <Body>{i18n.content}</Body>
-        </CardContainer>
-      </>
-    );
-
-    return (
-      <div style={{ display: 'flex', flexDirection: 'column', gap: '40px' }}>
-        {[480, 320].map((width) => (
-          <div key={width} style={{ display: 'flex', flexDirection: 'column', gap: '24px', width }}>
-            {cards}
-          </div>
-        ))}
-      </div>
-    );
-  },
-  ...withRTLDiff({
-    i18n: {
-      cards: { en: 'Cards', ar: 'البطاقات' },
-      content: {
-        en: 'Your virtual card is ready to use.',
-        ar: 'بطاقتك الافتراضية جاهزة للاستخدام.',
-      },
-      orderCard: { en: 'Order card', ar: 'اطلب بطاقة' },
-      settings: { en: 'Card settings', ar: 'إعدادات البطاقة' },
-      longTitle: {
-        en: 'Cards, accounts and everything else you hold with us',
-        ar: 'البطاقات والحسابات وكل ما تحتفظ به لدينا',
-      },
-    },
-  }),
-};