@transferwise/components 0.0.0-experimental-63c3fc6 → 0.0.0-experimental-5f03867

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

@@ -1,103 +0,0 @@
-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 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>
-  );
-};
-
-/** Fills the content area, so a padding-none card's corners show the clipping. */
-const FullBleedContent = () => (
-  <div style={{ height: '80px', background: 'var(--color-background-screen-active)' }} />
-);
-
-/**
- * Every spotlight against every theme, with and without padding. Without padding, the content
- * should be clipped to the rounded corners, and the `inactive` dashed stroke should stay whole.
- *
- * 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}>
-          <Body>Spotlight: {spotlight ?? 'not set'}</Body>
-          <Body>Second line, to show the content stacks flush.</Body>
-        </CardContainer>
-      ))}
-      {SPOTLIGHTS.map((spotlight) => (
-        <CardContainer key={`none-${spotlight ?? 'none'}`} spotlight={spotlight} padding="none">
-          <FullBleedContent />
-        </CardContainer>
-      ))}
-    </div>
-  ),
-};
-
-/**
- * The inactive spotlight's dashed stroke and the padding should mirror in RTL. Without padding,
- * the text should start at the inline-start edge.
- */
-export const RTLDiff: Story = {
-  render: () => {
-    const i18n = useRtlDiffI18n();
-    return (
-      <div style={{ display: 'flex', flexDirection: 'column', gap: '24px', width: 420 }}>
-        {SPOTLIGHTS.map((spotlight) => (
-          <CardContainer key={spotlight ?? 'none'} spotlight={spotlight}>
-            <Body>{i18n.content}</Body>
-          </CardContainer>
-        ))}
-        {SPOTLIGHTS.map((spotlight) => (
-          <CardContainer key={`none-${spotlight ?? 'none'}`} spotlight={spotlight} padding="none">
-            <Body>{i18n.content}</Body>
-          </CardContainer>
-        ))}
-      </div>
-    );
-  },
-  ...withRTLDiff({
-    i18n: {
-      content: {
-        en: 'Your virtual card is ready to use.',
-        ar: 'بطاقتك الافتراضية جاهزة للاستخدام.',
-      },
-    },
-  }),
-};

package/src/CardContainer/_stories/helpers.tsx

@@ -1,50 +0,0 @@
-import { Card, Jar, Travel } from '@transferwise/icons';
-
-import Body from '../../Body';
-import List from '../../List';
-import ListItem from '../../ListItem';
-
-export const SampleContent = () => (
-  <>
-    <Body>Your virtual card is ready to use.</Body>
-    <Body>Spend in 40+ currencies with the real exchange rate.</Body>
-  </>
-);
-
-export const CardsList = () => (
-  <List>
-    <ListItem
-      title="•••• 1582"
-      subtitle="Current account"
-      valueTitle="£0 spent"
-      media={
-        <ListItem.AvatarView>
-          <Card />
-        </ListItem.AvatarView>
-      }
-      control={<ListItem.Navigation href="#card-1582" />}
-    />
-    <ListItem
-      title="•••• 9982"
-      subtitle="Jar"
-      valueTitle="£410 / £500 day"
-      media={
-        <ListItem.AvatarView>
-          <Jar />
-        </ListItem.AvatarView>
-      }
-      control={<ListItem.Navigation href="#card-9982" />}
-    />
-    <ListItem
-      title="•••• 5507"
-      subtitle="Travel"
-      valueTitle="£200 / £500 day"
-      media={
-        <ListItem.AvatarView>
-          <Travel />
-        </ListItem.AvatarView>
-      }
-      control={<ListItem.Navigation href="#card-5507" />}
-    />
-  </List>
-);

package/src/CardContainer/index.ts

@@ -1,6 +0,0 @@
-export { default } from './CardContainer';
-export type {
-  CardContainerProps,
-  CardContainerSpotlight,
-  CardContainerPadding,
-} from './CardContainer.types';

package/src/CardWidget/CardWidget.css

@@ -1,64 +0,0 @@
-.wds-card-widget {
-  --CardWidget-inset: var(--size-8);
-  --CardWidget-header-spacing: var(--size-8);
-  --CardWidget-actions-gap: var(--size-8);
-}
-.wds-card-widget__header {
-  align-items: center;
-  -moz-column-gap: var(--size-24);
-       column-gap: var(--size-24);
-  container-type: inline-size;
-  display: flex;
-  flex-wrap: wrap;
-  padding-inline-start: var(--CardWidget-inset);
-  row-gap: var(--size-8);
-}
-.wds-card-widget__header:not(:last-child) {
-  margin-block-end: var(--CardWidget-header-spacing);
-}
-.wds-card-widget__title {
-  align-items: center;
-  color: var(--color-content-secondary);
-  display: grid;
-  flex: 1 1 0;
-  margin: 0;
-  min-block-size: var(--size-32);
-}
-@container (width <= 360px) {
-  .wds-card-widget__title {
-    flex-basis: auto;
-  }
-}
-.wds-card-widget__title-link.np-link {
-  color: inherit;
-  display: inline;
-  font: inherit;
-  letter-spacing: inherit;
-  text-align: start;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-}
-.wds-card-widget__title-link.np-link:hover,
-.wds-card-widget__title-link.np-link:focus-visible {
-  -webkit-text-decoration: underline;
-  text-decoration: underline;
-}
-.wds-card-widget__title-link.np-link .wds-card-widget__title-chevron {
-  white-space: nowrap;
-}
-.wds-card-widget__title-link.np-link .wds-card-widget__title-chevron .tw-icon {
-  display: inline-block;
-  margin: 0;
-  vertical-align: text-bottom;
-}
-.wds-card-widget__actions {
-  align-self: start;
-  align-items: center;
-  display: flex;
-  flex: none;
-  gap: var(--CardWidget-actions-gap);
-  margin-inline-start: auto;
-}
-.wds-card-widget--with-header .wds-card-widget__content {
-  padding-inline: var(--CardWidget-inset);
-}

package/src/CardWidget/CardWidget.less

@@ -1,82 +0,0 @@
-// Above this header width a long title wraps beside the action corner. At or below it, the title
-// only shares a line with the actions while it fits on one line, so it keeps room to read.
-@wds-card-widget-actions-stack-width: 360px;
-
-.wds-card-widget {
-  --CardWidget-inset: var(--size-8);
-  --CardWidget-header-spacing: var(--size-8);
-  --CardWidget-actions-gap: var(--size-8);
-
-  // The header's title row is at least as tall as the 32px action buttons, so cards side by side
-  // line up their titles and content whether or not their headers have actions, or have stacked
-  // them. The actions wrap under the title when they don't fit beside it.
-  &__header {
-    align-items: center;
-    column-gap: var(--size-24);
-    container-type: inline-size;
-    display: flex;
-    flex-wrap: wrap;
-    padding-inline-start: var(--CardWidget-inset);
-    row-gap: var(--size-8);
-
-    &:not(:last-child) {
-      margin-bottom: var(--CardWidget-header-spacing);
-    }
-  }
-
-  &__title {
-    align-items: center;
-    color: var(--color-content-secondary);
-    display: grid;
-    flex: 1 1 0;
-    margin: 0;
-    min-height: var(--size-32);
-
-    @container (width <= @wds-card-widget-actions-stack-width) {
-      flex-basis: auto;
-    }
-  }
-
-  // The title is a `Link`, but keeps the title's typography and colour rather than the link
-  // text style, and flows inline so the chevron can follow its last word.
-  &__title-link.np-link {
-    color: inherit;
-    display: inline;
-    font: inherit;
-    letter-spacing: inherit;
-    // `Link` renders a button when there is no `href`, which would otherwise centre the title.
-    text-align: start;
-    text-decoration: none;
-
-    &:hover,
-    &:focus-visible {
-      text-decoration: underline;
-    }
-
-    // Nested so it outweighs `Link`'s own `.np-link .tw-icon`, which loads later.
-    .wds-card-widget__title-chevron {
-      white-space: nowrap;
-
-      .tw-icon {
-        display: inline-block;
-        margin: 0;
-        vertical-align: text-bottom;
-      }
-    }
-  }
-
-  &__actions {
-    // Stays in the top corner when a long title wraps onto more lines.
-    align-self: start;
-    align-items: center;
-    display: flex;
-    flex: none;
-    gap: var(--CardWidget-actions-gap);
-    margin-inline-start: auto;
-  }
-
-  // With a header, the content is inset further from both inline edges.
-  &--with-header &__content {
-    padding-inline: var(--CardWidget-inset);
-  }
-}

package/src/CardWidget/CardWidget.test.tsx

@@ -1,189 +0,0 @@
-import { Plus, Settings } from '@transferwise/icons';
-
-import { mockMatchMedia, render, screen, userEvent } from '../test-utils';
-import CardWidget from './CardWidget';
-import type { CardWidgetHeader } from './CardWidget.types';
-
-mockMatchMedia();
-
-describe('CardWidget', () => {
-  const content = 'Widget content';
-
-  const renderWidget = (header: Partial<CardWidgetHeader> = {}) =>
-    render(
-      <CardWidget data-testid="widget" header={{ title: 'Cards', ...header }}>
-        {content}
-      </CardWidget>,
-    );
-
-  describe('rendering', () => {
-    it('renders children without a header', () => {
-      render(<CardWidget data-testid="widget">{content}</CardWidget>);
-      expect(screen.getByText(content)).toBeInTheDocument();
-      expect(screen.queryByRole('heading')).not.toBeInTheDocument();
-      expect(screen.getByTestId('widget')).not.toHaveClass('wds-card-widget--with-header');
-    });
-
-    it('renders on a CardContainer', () => {
-      render(
-        <CardWidget data-testid="widget" spotlight="active" as="article" className="custom">
-          {content}
-        </CardWidget>,
-      );
-      const root = screen.getByTestId('widget');
-      expect(root.tagName).toBe('ARTICLE');
-      expect(root).toHaveClass(
-        'wds-card-container',
-        'wds-card-container--active',
-        'wds-card-widget',
-        'custom',
-      );
-    });
-
-    it('always keeps the default padding', () => {
-      // `padding` is not a CardWidget prop, but untyped consumers can still pass it.
-      const untypedProps = { padding: 'none' } as object;
-      render(
-        <CardWidget data-testid="widget" {...untypedProps}>
-          {content}
-        </CardWidget>,
-      );
-      expect(screen.getByTestId('widget')).not.toHaveClass('wds-card-container--padding-none');
-    });
-
-    it('renders the title as an h3 by default', () => {
-      renderWidget();
-      expect(screen.getByRole('heading', { level: 3, name: 'Cards' })).toBeInTheDocument();
-      expect(screen.getByTestId('widget')).toHaveClass('wds-card-widget--with-header');
-    });
-
-    it('renders the title as the given heading level', () => {
-      renderWidget({ as: 'h2' });
-      expect(screen.getByRole('heading', { level: 2, name: 'Cards' })).toBeInTheDocument();
-    });
-
-    it('renders the header without content', () => {
-      render(<CardWidget header={{ title: 'Cards' }} />);
-      expect(screen.getByRole('heading', { name: 'Cards' })).toBeInTheDocument();
-      expect(document.querySelector('.wds-card-widget__content')).not.toBeInTheDocument();
-    });
-  });
-
-  describe('titleAction', () => {
-    it('renders the title as a link inside the heading', () => {
-      renderWidget({ titleAction: { href: '/cards' } });
-      const link = screen.getByRole('link', { name: 'Cards' });
-      expect(link).toHaveAttribute('href', '/cards');
-      expect(screen.getByRole('heading', { level: 3 })).toContainElement(link);
-    });
-
-    it('calls the titleAction onClick handler', async () => {
-      const onClick = jest.fn();
-      renderWidget({ titleAction: { href: '#cards', onClick } });
-      await userEvent.click(screen.getByRole('link', { name: 'Cards' }));
-      expect(onClick).toHaveBeenCalledTimes(1);
-    });
-
-    it('renders the title as a button when titleAction has only onClick', async () => {
-      const onClick = jest.fn();
-      renderWidget({ titleAction: { onClick } });
-      await userEvent.click(screen.getByRole('button', { name: 'Cards' }));
-      expect(onClick).toHaveBeenCalledTimes(1);
-    });
-
-    it('marks a title link that opens in a new tab', () => {
-      renderWidget({ titleAction: { href: '/cards', target: '_blank' } });
-      expect(screen.getByRole('link', { name: /Cards/u })).toHaveAttribute('rel', 'noreferrer');
-    });
-
-    it('keeps the title link alongside actions', () => {
-      renderWidget({ titleAction: { href: '/cards' }, action: { label: 'Order card' } });
-      expect(screen.getByRole('link', { name: 'Cards' })).toBeInTheDocument();
-      expect(screen.getByRole('button', { name: 'Order card' })).toBeInTheDocument();
-    });
-  });
-
-  describe('actions', () => {
-    it('renders a labelled action as a button', () => {
-      renderWidget({ action: { label: 'Order card' } });
-      expect(screen.getByRole('button', { name: 'Order card' })).toBeInTheDocument();
-    });
-
-    it('renders a labelled action with an href as a link', () => {
-      renderWidget({ action: { label: 'Order card', href: '/cards/order' } });
-      expect(screen.getByRole('link', { name: 'Order card' })).toHaveAttribute(
-        'href',
-        '/cards/order',
-      );
-    });
-
-    it('names an unlabelled action from its aria-label', () => {
-      renderWidget({ action: { 'aria-label': 'Card settings', icon: <Settings size={16} /> } });
-      expect(screen.getByRole('button', { name: 'Card settings' })).toBeInTheDocument();
-    });
-
-    it('calls the action onClick handler', async () => {
-      const onClick = jest.fn();
-      renderWidget({ action: { label: 'Order card', onClick } });
-      await userEvent.click(screen.getByRole('button', { name: 'Order card' }));
-      expect(onClick).toHaveBeenCalledTimes(1);
-    });
-
-    it('does not call onClick when disabled', async () => {
-      const onClick = jest.fn();
-      renderWidget({ action: { label: 'Order card', disabled: true, onClick } });
-      await userEvent.click(screen.getByRole('button', { name: 'Order card' }));
-      expect(onClick).not.toHaveBeenCalled();
-    });
-
-    it('renders actionSecondary before action in the DOM', () => {
-      renderWidget({ action: { label: 'Order card' }, actionSecondary: { label: 'Manage' } });
-      const [first, second] = screen.getAllByRole('button');
-      expect(first).toHaveAccessibleName('Manage');
-      expect(second).toHaveAccessibleName('Order card');
-    });
-
-    it('takes button priority from the slot the action is passed to', () => {
-      renderWidget({ action: { label: 'Order card' }, actionSecondary: { label: 'Manage' } });
-      expect(screen.getByRole('button', { name: 'Order card' })).toHaveClass(
-        'wds-Button--secondary',
-      );
-      expect(screen.getByRole('button', { name: 'Manage' })).toHaveClass(
-        'wds-Button--secondary-neutral',
-      );
-    });
-
-    it('takes icon button priority from the slot the action is passed to', () => {
-      renderWidget({
-        action: { 'aria-label': 'Add', icon: <Plus size={16} /> },
-        actionSecondary: { 'aria-label': 'Settings', icon: <Settings size={16} /> },
-      });
-      expect(screen.getByRole('button', { name: 'Add' })).toHaveClass(
-        'np-icon-button-secondary-default',
-      );
-      expect(screen.getByRole('button', { name: 'Settings' })).toHaveClass(
-        'np-icon-button-tertiary-default',
-      );
-    });
-
-    it('keeps the lower emphasis when actionSecondary is used on its own', () => {
-      renderWidget({ actionSecondary: { label: 'Manage' } });
-      expect(screen.getByRole('button', { name: 'Manage' })).toHaveClass(
-        'wds-Button--secondary-neutral',
-      );
-    });
-
-    it('renders an arbitrary node in place of the action buttons', () => {
-      renderWidget({ action: <span>Custom node</span> });
-      expect(screen.getByText('Custom node')).toBeInTheDocument();
-      expect(screen.queryByRole('button')).not.toBeInTheDocument();
-    });
-
-    it('renders an element as given, even when it has a label prop', () => {
-      const CustomAction = ({ label }: { label: string }) => <span>{label}</span>;
-      renderWidget({ action: <CustomAction label="Custom action" /> });
-      expect(screen.getByText('Custom action')).toBeInTheDocument();
-      expect(screen.queryByRole('button')).not.toBeInTheDocument();
-    });
-  });
-});

package/src/CardWidget/CardWidget.tsx

@@ -1,74 +0,0 @@
-import { ChevronEnd } from '@transferwise/icons';
-import { clsx } from 'clsx';
-import { forwardRef } from 'react';
-
-import CardContainer from '../CardContainer';
-import { Typography } from '../common';
-import Link from '../Link';
-import Title from '../Title';
-import type { CardWidgetHeader, CardWidgetProps } from './CardWidget.types';
-import CardWidgetAction, {
-  isCardWidgetActionButton,
-  type CardWidgetActionSlot,
-} from './CardWidgetAction';
-
-const renderAction = (action: CardWidgetHeader['action'], slot: CardWidgetActionSlot) =>
-  isCardWidgetActionButton(action) ? <CardWidgetAction action={action} slot={slot} /> : action;
-
-const CardWidgetHeaderComponent = ({
-  title,
-  as = 'h3',
-  titleAction,
-  action,
-  actionSecondary,
-}: CardWidgetHeader) => (
-  <div className="wds-card-widget__header">
-    <Title as={as} type={Typography.TITLE_GROUP} className="wds-card-widget__title">
-      {titleAction ? (
-        <Link
-          href={titleAction.href}
-          target={titleAction.target}
-          className="wds-card-widget__title-link"
-          onClick={titleAction.onClick}
-        >
-          {title}
-          {/* The word joiner keeps the chevron on the title's last line instead of wrapping alone. */}
-          <span className="wds-card-widget__title-chevron" aria-hidden>
-            {'\u2060'}
-            <ChevronEnd size={16} />
-          </span>
-        </Link>
-      ) : (
-        title
-      )}
-    </Title>
-    {(action || actionSecondary) && (
-      <div className="wds-card-widget__actions">
-        {actionSecondary && renderAction(actionSecondary, 'actionSecondary')}
-        {action && renderAction(action, 'action')}
-      </div>
-    )}
-  </div>
-);
-
-/**
- * A `CardContainer` with an optional header — a title, a title link and up to two actions — above
- * its content.
- */
-const CardWidget = forwardRef<HTMLElement, CardWidgetProps>(
-  ({ header, children, className, ...props }, ref) => (
-    <CardContainer
-      ref={ref}
-      className={clsx('wds-card-widget', header && 'wds-card-widget--with-header', className)}
-      {...props}
-      padding="md"
-    >
-      {header && <CardWidgetHeaderComponent {...header} />}
-      {children != null && <div className="wds-card-widget__content">{children}</div>}
-    </CardContainer>
-  ),
-);
-
-CardWidget.displayName = 'CardWidget';
-
-export default CardWidget;

package/src/CardWidget/CardWidget.types.ts

@@ -1,60 +0,0 @@
-import type { ReactNode } from 'react';
-
-import type { Heading } from '../common';
-import type { CardContainerProps } from '../CardContainer';
-import type { LinkProps } from '../Link';
-import type { CardWidgetActionButton } from './CardWidgetAction';
-
-/**
- * Props passed to the [Link](https://storybook.wise.design/?path=/docs/typography-link--docs)
- * that the title is rendered as. A trailing chevron is rendered automatically, so do not put one
- * in `title`.
- */
-export type CardWidgetTitleAction = Pick<LinkProps, 'href' | 'target' | 'onClick'>;
-
-export interface CardWidgetHeader {
-  /** The widget's title. */
-  title: ReactNode;
-
-  /**
-   * Heading element rendered for the title.
-   * @default 'h3'
-   */
-  as?: Heading;
-
-  /**
-   * Makes the title a link with a trailing chevron.
-   * @default undefined
-   */
-  titleAction?: CardWidgetTitleAction;
-
-  /**
-   * A `CardWidgetActionButton` object (with a `label` or an `icon`) renders a small button,
-   * anchored to the inline end. Any other node is rendered as given.
-   * @default undefined
-   */
-  action?: CardWidgetActionButton | ReactNode;
-
-  /**
-   * Second action, at a lower emphasis, rendered before `action`. Two is the maximum, to keep
-   * the title legible. Takes the same values as `action`, and keeps its lower emphasis when used
-   * on its own.
-   * @default undefined
-   */
-  actionSecondary?: CardWidgetActionButton | ReactNode;
-}
-
-/** The widget always has the card's default padding, so its header and content line up. */
-export interface CardWidgetProps extends Omit<CardContainerProps, 'padding'> {
-  /**
-   * The widget's header: a title, optionally a link, and up to two actions.
-   * @default undefined
-   */
-  header?: CardWidgetHeader;
-
-  /**
-   * The widget's content, rendered under the header.
-   * @default undefined
-   */
-  children?: ReactNode;
-}