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

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

@@ -1,149 +0,0 @@
-import { Plus, Settings } from '@transferwise/icons';
-import { Meta, StoryObj } from '@storybook/react-webpack5';
-
-import Body from '../../Body';
-import { Typography } from '../../common';
-import Header from '../../Header';
-import CardContainer from '..';
-import type { CardContainerSpotlight } from '..';
-import { CardsList, SampleContent } from './helpers';
-
-/**
- * A `Header` composed as the card's first child gives up its own group border and spacing, so the
- * card's padding places it. Use the `Header`'s `titleAction`, `action` and `actionSecondary` props
- * for the title link and the action corner.
- */
-const meta: Meta<typeof CardContainer> = {
-  component: CardContainer,
-  title: 'Layouts/CardContainer/With Header',
-  parameters: { controls: { disable: true } },
-};
-
-export default meta;
-
-type Story = StoryObj<typeof CardContainer>;
-
-/** `titleAction` turns the title into a link to the card's own screen and appends a chevron. */
-export const TitleLink: Story = {
-  render: () => (
-    <CardContainer>
-      <Header as="h3" title="Cards" titleAction={{ href: '#cards' }} />
-      <SampleContent />
-    </CardContainer>
-  ),
-};
-
-/**
- * `actionSecondary` renders before `action` at a lower emphasis; two actions is the maximum, to
- * keep the title legible. When the header is 360px wide or narrower, the actions move under a
- * title that doesn't fit beside them on one line.
- */
-export const Actions: Story = {
-  render: () => (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: '24px', maxWidth: '480px' }}>
-      <CardContainer>
-        <Header
-          as="h3"
-          title="Cards"
-          titleAction={{ href: '#cards' }}
-          action={{ label: 'Order card', icon: <Plus size={16} /> }}
-          actionSecondary={{ 'aria-label': 'Card settings', icon: <Settings size={16} /> }}
-        />
-        <SampleContent />
-      </CardContainer>
-
-      <div style={{ width: '320px' }}>
-        <CardContainer>
-          <Header
-            as="h3"
-            title="Cards"
-            titleAction={{ href: '#cards' }}
-            action={{ label: 'Order card', icon: <Plus size={16} /> }}
-            actionSecondary={{ 'aria-label': 'Card settings', icon: <Settings size={16} /> }}
-          />
-          <SampleContent />
-        </CardContainer>
-      </div>
-    </div>
-  ),
-};
-
-/**
- * Inside a card, a title too long for its line wraps. A linked title keeps its chevron after its
- * last word.
- */
-export const LongTitle: Story = {
-  render: () => (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: '24px', maxWidth: '480px' }}>
-      <CardContainer>
-        <Header as="h3" title="Cards, accounts and everything else you hold with us" />
-        <SampleContent />
-      </CardContainer>
-
-      <CardContainer>
-        <Header
-          as="h3"
-          title="Cards, accounts and everything else you hold with us"
-          titleAction={{ href: '#cards' }}
-          action={{ label: 'Order card', icon: <Plus size={16} /> }}
-          actionSecondary={{ 'aria-label': 'Card settings', icon: <Settings size={16} /> }}
-        />
-        <SampleContent />
-      </CardContainer>
-    </div>
-  ),
-};
-
-/** The `Header`'s action slots also take any node, for content the button actions do not cover. */
-export const CustomAction: Story = {
-  render: () => (
-    <CardContainer>
-      <Header
-        as="h3"
-        title="Balance"
-        action={
-          <Body as="span" type={Typography.BODY_DEFAULT_BOLD}>
-            £1,240.00
-          </Body>
-        }
-      />
-      <SampleContent />
-    </CardContainer>
-  ),
-};
-
-/** A `Header` followed by a list, as in a dashboard's cards module. */
-export const WithList: Story = {
-  render: () => (
-    <CardContainer>
-      <Header
-        as="h3"
-        title="Cards"
-        titleAction={{ href: '#cards' }}
-        action={{ label: 'New card', icon: <Plus size={16} /> }}
-      />
-      <CardsList />
-    </CardContainer>
-  ),
-};
-
-/** The same `Header` on each spotlight. */
-export const Spotlight: Story = {
-  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}>
-            <Header
-              as="h3"
-              title={`Spotlight: ${spotlight ?? 'not set'}`}
-              titleAction={{ href: '#cards' }}
-              action={{ label: 'Order card', icon: <Plus size={16} /> }}
-            />
-            <SampleContent />
-          </CardContainer>
-        ),
-      )}
-    </div>
-  ),
-};

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,2 +0,0 @@
-export { default } from './CardContainer';
-export type { CardContainerProps, CardContainerSpotlight } from './CardContainer.types';

package/src/Header/HeaderActionButton.tsx

@@ -1,125 +0,0 @@
-import { isValidElement, type MouseEventHandler, type ReactNode } from 'react';
-
-import Button from '../Button';
-import type { ButtonPriority, ButtonProps } from '../Button/Button.types';
-import IconButton, { type IconButtonProps } from '../IconButton';
-
-/** The action slot a `HeaderActionButton` was passed to, which is what determines its emphasis. */
-export type HeaderActionSlot = 'action' | 'actionSecondary';
-
-type HeaderActionButtonBase = Pick<ButtonProps, 'href' | 'target' | 'disabled'> & {
-  /**
-   * `HTMLElement` rather than a narrower target, because an action is a `button` or an `a`
-   * depending on whether `href` is set.
-   * @default undefined
-   */
-  onClick?: MouseEventHandler<HTMLElement>;
-
-  /**
-   * Rendered after `label`, or as the only content of an unlabelled action.
-   * Size it yourself — 16px is expected in both cases.
-   * @default undefined
-   */
-  icon?: ReactNode;
-  'data-testid'?: string;
-};
-
-/** An action with a visible label, rendered as a small button. */
-type HeaderLabelledActionButton = HeaderActionButtonBase & {
-  label: ButtonProps['children'];
-  /** @default undefined */
-  'aria-label'?: string;
-};
-
-/**
- * An action with no visible label, rendered as a 32px icon button. The icon is
- * the only thing on screen and `aria-label` is the only accessible name, so
- * both are required.
- */
-type HeaderIconActionButton = HeaderActionButtonBase & {
-  label?: never;
-  icon: ReactNode;
-  'aria-label': string;
-};
-
-/**
- * An action the `Header` renders as a button. With a `label` it is a small `Button`; without
- * one, a 32px `IconButton`, which requires both an `icon` and an `aria-label`. Emphasis is not
- * part of the object — it comes from the slot the action is passed to.
- */
-export type HeaderActionButton = HeaderLabelledActionButton | HeaderIconActionButton;
-
-const BUTTON_PRIORITY = {
-  action: 'secondary',
-  actionSecondary: 'secondary-neutral',
-} as const satisfies Record<HeaderActionSlot, ButtonPriority>;
-
-const ICON_BUTTON_PRIORITY = {
-  action: 'secondary',
-  actionSecondary: 'tertiary',
-} as const satisfies Record<HeaderActionSlot, IconButtonProps['priority']>;
-
-/**
- * Tells a `HeaderActionButton` object apart from any other node passed to an action slot.
- * Every button action has a `label` or an `icon`, which no React element, portal or array does.
- */
-export const isHeaderActionButton = (value: unknown): value is HeaderActionButton =>
-  typeof value === 'object' &&
-  value !== null &&
-  !isValidElement(value) &&
-  !Array.isArray(value) &&
-  ('label' in value || 'icon' in value);
-
-/** Renders a `HeaderActionButton` at the emphasis of the slot it was passed to. */
-const HeaderActionButtonComponent = function HeaderActionButton({
-  action: {
-    label,
-    icon,
-    'aria-label': ariaLabel,
-    'data-testid': dataTestId,
-    href,
-    target,
-    onClick,
-    disabled,
-  },
-  slot,
-}: {
-  action: HeaderActionButton;
-  slot: HeaderActionSlot;
-}) {
-  if (label === undefined) {
-    return (
-      <IconButton
-        size={32}
-        priority={ICON_BUTTON_PRIORITY[slot]}
-        aria-label={ariaLabel}
-        href={href}
-        target={target}
-        disabled={disabled}
-        data-testid={dataTestId}
-        onClick={onClick}
-      >
-        {icon}
-      </IconButton>
-    );
-  }
-
-  return (
-    <Button
-      v2
-      size="sm"
-      priority={BUTTON_PRIORITY[slot]}
-      aria-label={ariaLabel}
-      href={href}
-      target={target}
-      disabled={disabled}
-      addonEnd={icon ? { type: 'icon', value: icon } : undefined}
-      data-testid={dataTestId}
-      onClick={onClick}
-    >
-      {label}
-    </Button>
-  );
-};
-
-export default HeaderActionButtonComponent;