@transferwise/components 46.166.0 → 46.168.0

package/src/CardWidget/_stories/CardWidget.story.tsx

@@ -0,0 +1,238 @@
+import { Plus, Settings } from '@transferwise/icons';
+import { Meta, StoryObj } from '@storybook/react-webpack5';
+
+import {
+  createSandboxStory,
+  globalScope,
+} from '../../../.storybook/components/sandbox/SandboxEditor';
+import Body from '../../Body';
+import type { CardContainerSpotlight } from '../../CardContainer';
+import { CardsList, SampleContent } from '../../CardContainer/_stories/helpers';
+import { Typography } from '../../common';
+import CardWidget from '..';
+
+/**
+ * A `CardContainer` with an optional header above its content. The `header` prop takes a `title`,
+ * a `titleAction` that turns the title into a link, and up to two actions.
+ */
+const meta: Meta<typeof CardWidget> = {
+  component: CardWidget,
+  title: 'Layouts/CardWidget',
+  tags: ['early-access'],
+  argTypes: {
+    header: {
+      control: 'object',
+      table: { type: { summary: 'CardWidgetHeader' } },
+    },
+    spotlight: {
+      control: 'radio',
+      options: [undefined, 'active', 'inactive'],
+      table: {
+        defaultValue: { summary: 'undefined' },
+        type: { summary: 'CardContainerSpotlight' },
+      },
+    },
+    as: {
+      control: 'radio',
+      options: ['div', 'section', 'article'],
+      table: { defaultValue: { summary: "'div'" }, 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: 'div',
+    header: {
+      title: 'Cards',
+      titleAction: { href: '#cards' },
+      action: { label: 'Order card' },
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof CardWidget>;
+
+/** Experiment with the widget's props. */
+export const Playground: Story = {
+  render: (args) => (
+    <div style={{ maxWidth: '480px' }}>
+      <CardWidget {...args}>
+        <SampleContent />
+      </CardWidget>
+    </div>
+  ),
+};
+
+export const Sandbox = createSandboxStory({
+  code: `<CardWidget
+  spotlight="active"
+  header={{
+    title: 'Cards',
+    titleAction: { href: '#cards' },
+    action: { label: 'Order card' },
+  }}
+>
+  <Body>Your virtual card is ready to use.</Body>
+  <Body>Spend in 40+ currencies with the real exchange rate.</Body>
+</CardWidget>`,
+  scope: { ...globalScope, CardWidget },
+});
+
+/** `titleAction` turns the title into a link to the widget's own screen and appends a chevron. */
+export const TitleLink: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => (
+    <CardWidget header={{ title: 'Cards', titleAction: { href: '#cards' } }}>
+      <SampleContent />
+    </CardWidget>
+  ),
+};
+
+/**
+ * An action object with a `label` renders a small button, and one with only an `icon` a 32px icon
+ * button, which requires an `aria-label`. `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 = {
+  parameters: { controls: { disable: true } },
+  render: () => {
+    const header = {
+      title: 'Cards',
+      titleAction: { href: '#cards' },
+      action: { label: 'Order card', icon: <Plus size={16} /> },
+      actionSecondary: { 'aria-label': 'Card settings', icon: <Settings size={16} /> },
+    };
+    return (
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '24px', maxWidth: '480px' }}>
+        <CardWidget header={header}>
+          <SampleContent />
+        </CardWidget>
+
+        <div style={{ width: '320px' }}>
+          <CardWidget header={header}>
+            <SampleContent />
+          </CardWidget>
+        </div>
+      </div>
+    );
+  },
+};
+
+/** A title too long for its line wraps. A linked title keeps its chevron after its last word. */
+export const LongTitle: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '24px', maxWidth: '480px' }}>
+      <CardWidget header={{ title: 'Cards, accounts and everything else you hold with us' }}>
+        <SampleContent />
+      </CardWidget>
+
+      <CardWidget
+        header={{
+          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 />
+      </CardWidget>
+    </div>
+  ),
+};
+
+/** The action slots also take any node, for content the button actions do not cover. */
+export const CustomAction: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => (
+    <CardWidget
+      header={{
+        title: 'Balance',
+        action: (
+          <Body as="span" type={Typography.BODY_DEFAULT_BOLD}>
+            £1,240.00
+          </Body>
+        ),
+      }}
+    >
+      <SampleContent />
+    </CardWidget>
+  ),
+};
+
+/** A header followed by a list, as in a dashboard's cards module. */
+export const WithList: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => (
+    <CardWidget
+      header={{
+        title: 'Cards',
+        titleAction: { href: '#cards' },
+        action: { label: 'New card', icon: <Plus size={16} /> },
+      }}
+    >
+      <CardsList />
+    </CardWidget>
+  ),
+};
+
+/**
+ * The card shows as hovered or pressed while the title link is, and as hovered while the link has
+ * keyboard focus. Hovering or pressing the rest of
+ * the card, or its actions, leaves it at rest.
+ */
+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) => (
+          <CardWidget
+            key={spotlight ?? 'none'}
+            spotlight={spotlight}
+            header={{
+              title: `Spotlight: ${spotlight ?? 'not set'}`,
+              titleAction: { href: '#cards' },
+              action: { label: 'Order card', icon: <Plus size={16} /> },
+              actionSecondary: { 'aria-label': 'Card settings', icon: <Settings size={16} /> },
+            }}
+          >
+            <Body>Your virtual card is ready to use.</Body>
+          </CardWidget>
+        ),
+      )}
+    </div>
+  ),
+};
+
+/** The same header on each spotlight. */
+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) => (
+          <CardWidget
+            key={spotlight ?? 'none'}
+            spotlight={spotlight}
+            header={{
+              title: `Spotlight: ${spotlight ?? 'not set'}`,
+              titleAction: { href: '#cards' },
+              action: { label: 'Order card', icon: <Plus size={16} /> },
+            }}
+          >
+            <SampleContent />
+          </CardWidget>
+        ),
+      )}
+    </div>
+  ),
+};

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

@@ -0,0 +1,350 @@
+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 type { CardContainerSpotlight } from '../../CardContainer';
+import List from '../../List';
+import ListItem from '../../ListItem';
+import type { ListItemProps } from '../../ListItem';
+import Title from '../../Title';
+import CardWidget from '..';
+import type { CardWidgetProps } from '..';
+
+const meta: Meta<typeof CardWidget> = {
+  component: CardWidget,
+  tags: ['!autodocs', '!manifest'],
+  title: 'Layouts/CardWidget/Tests',
+};
+export default meta;
+type Story = StoryObj<CardWidgetProps>;
+
+const SPOTLIGHTS: (CardContainerSpotlight | undefined)[] = [undefined, 'active', 'inactive'];
+
+const ACTIONS = {
+  action: { label: 'Order card', icon: <Plus size={16} /> },
+  actionSecondary: { 'aria-label': 'Settings', icon: <Settings size={16} /> },
+};
+
+const ThemeTitle = () => {
+  const { theme, screenMode } = useTheme();
+  return (
+    <Title type="title-subsection">
+      {theme} / {screenMode}
+    </Title>
+  );
+};
+
+/** A full header on every spotlight against every theme. */
+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) => (
+        <CardWidget
+          key={spotlight ?? 'none'}
+          spotlight={spotlight}
+          header={{
+            title: `Spotlight: ${spotlight ?? 'not set'}`,
+            titleAction: { href: '#target' },
+            ...ACTIONS,
+          }}
+        >
+          <Body>First line of content.</Body>
+          <Body>Second line, to show the content stacks flush.</Body>
+        </CardWidget>
+      ))}
+    </div>
+  ),
+};
+
+/** 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' }}>
+      <CardWidget header={{ title: 'Title only' }}>
+        <Body>Content</Body>
+      </CardWidget>
+
+      <CardWidget header={{ title: 'Title as link', titleAction: { href: '#target' } }}>
+        <Body>Content</Body>
+      </CardWidget>
+
+      <CardWidget
+        header={{
+          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>
+      </CardWidget>
+
+      <CardWidget header={{ title: 'Leading action only', action: { label: 'Order card' } }}>
+        <Body>Content</Body>
+      </CardWidget>
+
+      <CardWidget header={{ title: 'Secondary action only', actionSecondary: { label: 'Manage' } }}>
+        <Body>Content</Body>
+      </CardWidget>
+
+      <CardWidget
+        header={{
+          title: 'Both actions, icon only',
+          action: { 'aria-label': 'Add', icon: <Plus size={16} /> },
+          actionSecondary: ACTIONS.actionSecondary,
+        }}
+      >
+        <Body>Content</Body>
+      </CardWidget>
+
+      <CardWidget
+        header={{
+          title: 'A title long enough to wrap onto more than a single line next to its actions',
+          titleAction: { href: '#target' },
+          ...ACTIONS,
+        }}
+      >
+        <Body>Content</Body>
+      </CardWidget>
+
+      <CardWidget header={{ title: 'Header only', action: { label: 'Order card' } }} />
+
+      <CardWidget>
+        <Body>No header — the content starts at the card&apos;s top padding.</Body>
+      </CardWidget>
+    </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 `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' }}>
+      <CardWidget header={{ title: 'Non-spotlight items', titleAction: { href: '#target' } }}>
+        <List>
+          <CardListItem index={0} />
+          <CardListItem index={1} />
+          <CardListItem index={2} />
+        </List>
+      </CardWidget>
+
+      <CardWidget header={{ title: 'Active spotlight items' }}>
+        <List>
+          <CardListItem index={0} spotlight="active" />
+          <CardListItem index={1} spotlight="active" />
+        </List>
+      </CardWidget>
+
+      <CardWidget header={{ title: 'Inactive spotlight items' }}>
+        <List>
+          <CardListItem index={0} spotlight="inactive" />
+          <CardListItem index={1} spotlight="inactive" />
+        </List>
+      </CardWidget>
+
+      <CardWidget header={{ title: 'Active and inactive spotlight items' }}>
+        <List>
+          <CardListItem index={0} spotlight="active" />
+          <CardListItem index={1} spotlight="inactive" />
+        </List>
+      </CardWidget>
+
+      <CardWidget header={{ title: 'Spotlight and non-spotlight items', action: ACTIONS.action }}>
+        <List>
+          <CardListItem index={0} spotlight="active" />
+          <CardListItem index={1} />
+          <CardListItem index={2} />
+        </List>
+      </CardWidget>
+
+      <CardWidget
+        spotlight="active"
+        header={{ title: 'Single non-spotlight item in an active card' }}
+      >
+        <List>
+          <CardListItem index={0} />
+        </List>
+      </CardWidget>
+
+      <CardWidget
+        spotlight="inactive"
+        header={{ title: 'Single spotlight item in an inactive card' }}
+      >
+        <List>
+          <CardListItem index={0} spotlight="active" />
+        </List>
+      </CardWidget>
+
+      <CardWidget>
+        <List>
+          <CardListItem index={0} />
+          <CardListItem index={1} />
+        </List>
+      </CardWidget>
+    </div>
+  ),
+};
+
+/**
+ * Two spotlighted widgets 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.
+ */
+export const SideBySide: Story = {
+  render: () => (
+    <div style={{ display: 'flex', gap: '24px', maxWidth: '900px' }}>
+      <div style={{ flex: 1 }}>
+        <CardWidget spotlight="active" header={{ title: 'Balance' }}>
+          <Body>Your virtual card is ready to use.</Body>
+          <Body>Spend in 40+ currencies with the real exchange rate.</Body>
+        </CardWidget>
+      </div>
+      <div style={{ flex: 1 }}>
+        <CardWidget
+          spotlight="active"
+          header={{ title: 'Cards', titleAction: { href: '#target' }, ...ACTIONS }}
+        >
+          <List>
+            <CardListItem index={0} />
+            <CardListItem index={1} />
+            <CardListItem index={2} />
+          </List>
+        </CardWidget>
+      </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) => (
+            <CardWidget
+              key={title}
+              spotlight="active"
+              header={{ title, titleAction: { href: '#target' }, ...ACTIONS }}
+            >
+              <Body>Content</Body>
+            </CardWidget>
+          ))}
+        </div>
+      ))}
+    </div>
+  ),
+};
+
+/**
+ * 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 widget 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 actions = {
+      action: { label: i18n.orderCard, icon: <Plus size={16} /> },
+      actionSecondary: { 'aria-label': i18n.settings, icon: <Settings size={16} /> },
+    };
+    const widgets = (
+      <>
+        <CardWidget header={{ title: i18n.cards, titleAction: { href: '#target' } }}>
+          <Body>{i18n.content}</Body>
+        </CardWidget>
+
+        <CardWidget header={{ title: i18n.cards, ...actions }}>
+          <Body>{i18n.content}</Body>
+        </CardWidget>
+
+        <CardWidget
+          spotlight="active"
+          header={{ title: i18n.longTitle, titleAction: { href: '#target' }, ...actions }}
+        >
+          <Body>{i18n.content}</Body>
+        </CardWidget>
+
+        <CardWidget spotlight="inactive" header={{ title: i18n.cards }}>
+          <Body>{i18n.content}</Body>
+        </CardWidget>
+      </>
+    );
+
+    return (
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '40px' }}>
+        {[480, 320].map((width) => (
+          <div key={width} style={{ display: 'flex', flexDirection: 'column', gap: '24px', width }}>
+            {widgets}
+          </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: 'البطاقات والحسابات وكل ما تحتفظ به لدينا',
+      },
+    },
+  }),
+};

package/src/CardWidget/index.ts

@@ -0,0 +1,3 @@
+export { default } from './CardWidget';
+export type { CardWidgetProps, CardWidgetHeader, CardWidgetTitleAction } from './CardWidget.types';
+export type { CardWidgetActionButton } from './CardWidgetAction';

package/src/IconButton/IconButton.css

@@ -35,15 +35,14 @@
   color: var(--color-white);
 }
 .np-icon-button-minimal-default {
-  color: var(--color-interactive-primary);
-  background-color: var(--color-background-screen);
+  color: var(--color-sentiment-content-primary, var(--color-interactive-primary));
   background-color: transparent;
 }
 .np-icon-button-minimal-default:not(.disabled):not(:disabled):hover {
-  background-color: var(--color-background-screen-hover);
+  background-color: var(--color-sentiment-interactive-secondary-neutral-hover, var(--color-background-screen-hover));
 }
 .np-icon-button-minimal-default:not(.disabled):not(:disabled):active {
-  background-color: var(--color-background-screen-active);
+  background-color: var(--color-sentiment-interactive-secondary-neutral-active, var(--color-background-screen-active));
 }
 .np-icon-button-secondary-default {
   color: var(--color-sentiment-content-primary, var(--color-interactive-primary));

package/src/IconButton/IconButton.less

@@ -31,8 +31,21 @@
   }
 
   &-minimal-default {
-    .colors(--color-interactive-primary, --color-background-screen);
+    color: var(--color-sentiment-content-primary, var(--color-interactive-primary));
     background-color: transparent;
+
+    &:not(.disabled, :disabled):hover {
+      background-color: var(
+        --color-sentiment-interactive-secondary-neutral-hover,
+        var(--color-background-screen-hover)
+      );
+    }
+    &:not(.disabled, :disabled):active {
+      background-color: var(
+        --color-sentiment-interactive-secondary-neutral-active,
+        var(--color-background-screen-active)
+      );
+    }
   }
 
   &-secondary-default {

package/src/Link/Link.tsx

@@ -14,7 +14,7 @@ export type LinkProps = PrimitiveAnchorProps &
 /**
  * Standard Link component with navigate away icon
  *
- * Documentation: https://transferwise.github.io/neptune-web/components/content/Link
+ * Documentation: https://storybook.wise.design/?path=/docs/typography-link--docs
  */
 const Link = ({
   className,

package/src/ListItem/AdditionalInfo/_stories/ListItemAdditionalInfo.story.tsx

@@ -15,7 +15,7 @@ import { action } from 'storybook/actions';
 /**
  * Use additional information to add extra details that help make the information clearer for users. Use additional information only after you've used the subtitle.
  *
- * Refer to the [design documentation](https://docs.wise.design/components/list-item#content:~:text=StatusIcon.iconLabel.error-,Additional%20information,-Use%20additional%20information) for more details.
+ * Refer to the [design documentation](https://docs.wise.design/components/list-item#additional-information) for more details.
  */
 export default {
   component: ListItem.AdditionalInfo,

package/src/ListItem/AvatarView/_stories/ListItemAvatarView.story.tsx

@@ -135,7 +135,7 @@ export const Playground: Story = {
 
 /**
  * AvatarView can display different types of content including icons, profile images, and initials. <br />
- * Refer to the [design documentation](https://docs.wise.design/components/avatar#:~:text=56%2C%20%E2%80%A8and%2072.-,Media,-There%20are%204) for details.
+ * Refer to the [design documentation](https://docs.wise.design/components/avatar#media) for details.
  */
 export const ContentTypes: Story = {
   args: {
@@ -209,7 +209,7 @@ export const ContentTypes: Story = {
 
 /**
  * AvatarView supports 6 sizes to fit different list item contexts: `24`, `32`, `40`, `48`, `56`, `72`. If decorated with a Badge, those will be sized accordingly as well. <br />
- * Please refer to the [design documentation](https://docs.wise.design/components/list-item#avatar:~:text=of%20the%20avatar.-,Avatar%20sizes,-List%20item%20supports) for details on when to use which one.
+ * Please refer to the [design documentation](https://docs.wise.design/components/list-item#avatar-sizes) for details on when to use which one.
  */
 export const Sizes: Story = {
   parameters: {
@@ -243,7 +243,7 @@ export const Sizes: Story = {
 
 /**
  * AvatarView supports different types of badges for additional context and information. <br />
- * Refer to the [design documentation](https://docs.wise.design/components/avatar#:~:text=support%20the%20information.-,With%20badge,-Badges%20contain%20additional) for details.
+ * Refer to the [design documentation](https://docs.wise.design/components/avatar#with-badge) for details.
  */
 export const Badges: Story = {
   args: {