@transferwise/components 46.165.5 → 46.167.0

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

@@ -0,0 +1,167 @@
+import { Meta, StoryObj } from '@storybook/react-webpack5';
+
+import {
+  createSandboxStory,
+  globalScope,
+} from '../../../.storybook/components/sandbox/SandboxEditor';
+import Body from '../../Body';
+import Link from '../../Link';
+import CardContainer from '..';
+import type { CardContainerPadding, 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.
+ *
+ * For a card with a title, a title link or actions, use `CardWidget`.
+ */
+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' },
+      },
+    },
+    padding: {
+      control: 'radio',
+      options: ['md', 'none'],
+      table: { defaultValue: { summary: "'md'" }, type: { summary: 'CardContainerPadding' } },
+    },
+    as: {
+      control: 'radio',
+      options: ['div', 'section', 'article'],
+      table: { defaultValue: { summary: "'div'" }, type: { summary: 'string' } },
+    },
+    interactive: {
+      control: 'boolean',
+      table: { defaultValue: { summary: 'false' }, type: { summary: 'boolean' } },
+    },
+    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',
+    padding: 'md',
+    as: 'div',
+  },
+};
+
+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>
+  ),
+};
+
+/**
+ * `padding="md"` insets the content by 8px, and by 16px from the `md` breakpoint up.
+ * `padding="none"` lets content such as images or charts run to the card's edges, clipped to its
+ * rounded corners. The grey boxes fill the content area, so their edges show where the padding
+ * ends.
+ *
+ * Focus rings are clipped at the edges too, so keep `none` for non-interactive content, and lists
+ * on `md`.
+ */
+export const Padding: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '24px', maxWidth: '480px' }}>
+      {(['md', 'none'] as CardContainerPadding[]).map((padding) =>
+        ([undefined, 'active', 'inactive'] as (CardContainerSpotlight | undefined)[]).map(
+          (spotlight) => (
+            <CardContainer
+              key={`${padding}-${spotlight ?? 'none'}`}
+              padding={padding}
+              spotlight={spotlight}
+            >
+              <div
+                style={{ height: '120px', background: 'var(--color-background-screen-active)' }}
+              />
+            </CardContainer>
+          ),
+        ),
+      )}
+    </div>
+  ),
+};
+
+/**
+ * `interactive` shows the card as hovered or pressed while a direct child link or button is, and
+ * as hovered while that child has keyboard focus. The card's padding, and a link nested deeper
+ * such as inside text, don't trigger the states.
+ */
+export const Interactive: 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} interactive>
+            <Link href="#cards">Direct child link, spotlight: {spotlight ?? 'not set'}</Link>
+          </CardContainer>
+        ),
+      )}
+      <CardContainer spotlight="active" interactive>
+        <Body>
+          A <Link href="#details">nested link</Link> isn&apos;t a direct child, so this card has no
+          states.
+        </Body>
+      </CardContainer>
+    </div>
+  ),
+};
+
+/** A `List` placed directly in the card. */
+export const WithList: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => (
+    <CardContainer>
+      <CardsList />
+    </CardContainer>
+  ),
+};

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

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

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

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

package/src/CardWidget/CardWidget.css

@@ -0,0 +1,78 @@
+.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 + .wds-card-widget__content {
+  margin-block-start: 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;
+  justify-self: start;
+  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 .tw-icon {
+  display: inline-block;
+  vertical-align: text-bottom;
+}
+.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 {
+  margin: 0;
+}
+.wds-card-widget__actions {
+  align-self: start;
+  align-items: center;
+  display: flex;
+  flex: none;
+  gap: var(--CardWidget-actions-gap);
+}
+.wds-card-widget--with-header .wds-card-widget__content {
+  padding-inline: var(--CardWidget-inset);
+}
+.wds-card-widget:has(.wds-card-widget__title-link:hover, .wds-card-widget__title-link:focus-visible).wds-card-container--active {
+  --CardContainer-border-color: color-mix(in srgb, var(--color-border-neutral) 75%, transparent);
+}
+.wds-card-widget:has(.wds-card-widget__title-link:hover, .wds-card-widget__title-link:focus-visible).wds-card-container--inactive {
+  --CardContainer-background-color: color-mix(in srgb, var(--color-background-neutral-hover) 25%, transparent);
+}
+.wds-card-widget:has(.wds-card-widget__title-link:active).wds-card-container--active {
+  --CardContainer-border-color: var(--color-border-neutral);
+}
+.wds-card-widget:has(.wds-card-widget__title-link:active).wds-card-container--inactive {
+  --CardContainer-background-color: color-mix(in srgb, var(--color-background-neutral-active) 25%, transparent);
+}

package/src/CardWidget/CardWidget.less

@@ -0,0 +1,107 @@
+@import (reference) "../CardContainer/CardContainer.less";
+
+// 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);
+  }
+
+  // On the content rather than the header, as an inactive card's decorative border comes after the
+  // header, so a header-only widget's header isn't its last child.
+  &__header + &__content {
+    margin-top: 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;
+    // The title is a grid, which would stretch the link to the full width up to the actions, so
+    // its hover and click area would reach past the text.
+    justify-self: start;
+    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;
+    }
+
+    // Inline, so the icons follow the title's last word: the chevron, and the new-tab icon `Link`
+    // adds for `target="_blank"`, which `Link` itself lays out as a flex box. Nested so it
+    // outweighs `Link`'s own `.np-link .tw-icon`, which loads later.
+    .tw-icon {
+      display: inline-block;
+      vertical-align: text-bottom;
+    }
+
+    .wds-card-widget__title-chevron {
+      white-space: nowrap;
+
+      .tw-icon {
+        margin: 0;
+      }
+    }
+  }
+
+  // Beside the title, the growing title pushes the actions to the inline end. When they wrap onto
+  // their own row under the title, they start at the inline start, under it.
+  &__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);
+  }
+
+  // With a header, the content is inset further from both inline edges.
+  &--with-header &__content {
+    padding-inline: var(--CardWidget-inset);
+  }
+
+  // The card's hover and pressed states follow the title link alone, as it leads to the widget's
+  // own screen. Hovering or pressing the rest of the card, or its actions, leaves it at rest.
+  // Keyboard focus on the link shows the hover state too, so keyboard users see the card react.
+  &:has(.wds-card-widget__title-link:hover, .wds-card-widget__title-link:focus-visible) {
+    .wds-card-container-hover-state();
+  }
+
+  // After the hover rule, so pressed wins while the pointer is down.
+  &:has(.wds-card-widget__title-link:active) {
+    .wds-card-container-pressed-state();
+  }
+}