@transferwise/components 46.160.7 → 46.161.0

package/src/Tag/Tag.less

@@ -0,0 +1,31 @@
+.wds-tag {
+  display: inline-block;
+  max-width: 240px;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  vertical-align: middle;
+  white-space: nowrap;
+  width: fit-content;
+
+  &--small {
+    border-radius: 6px;
+    font-size: var(--font-size-12);
+    padding-block: 1px;
+    padding-inline: var(--size-4);
+  }
+
+  &--large {
+    border-radius: 8px;
+    padding-block: 1px;
+    padding-inline: 6px;
+  }
+
+  &.wds-tag--proposition {
+    color: var(--color-sentiment-interactive-primary);
+  }
+}
+
+.wds-tag-theme {
+  display: contents;
+}

package/src/Tag/Tag.test.tsx

@@ -0,0 +1,70 @@
+import { ThemeProvider } from '@wise/components-theming';
+
+import { render, screen } from '../test-utils';
+import Tag from './Tag';
+
+describe('Tag', () => {
+  it('renders the label as a span', () => {
+    render(<Tag label="Tag copy" data-testid="tag" />);
+    const tag = screen.getByTestId('tag');
+
+    expect(tag.tagName).toBe('SPAN');
+    expect(tag).toHaveTextContent('Tag copy');
+  });
+
+  it('defaults to a small, neutral tag', () => {
+    render(<Tag label="Tag copy" data-testid="tag" />);
+
+    expect(screen.getByTestId('tag')).toHaveClass('wds-tag', 'wds-tag--small', 'wds-tag--neutral');
+  });
+
+  it('renders the size as a class', () => {
+    render(<Tag label="Tag copy" size="large" data-testid="tag" />);
+
+    expect(screen.getByTestId('tag')).toHaveClass('wds-tag--large');
+  });
+
+  it('renders the sentiment as a class', () => {
+    render(<Tag label="Tag copy" sentiment="success" data-testid="tag" />);
+
+    expect(screen.getByTestId('tag')).toHaveClass('wds-tag--success');
+  });
+
+  it('follows the surrounding screen mode', () => {
+    render(
+      <ThemeProvider theme="personal" screenMode="dark">
+        <Tag label="Tag copy" data-testid="tag" />
+      </ThemeProvider>,
+    );
+
+    expect(screen.getByTestId('tag')).toHaveClass('wds-sentiment-neutral-dark-base');
+  });
+
+  it('uses the dark elevated surface when overMedia is set in a light screen mode', () => {
+    render(
+      <ThemeProvider theme="personal" screenMode="light">
+        <Tag label="Tag copy" data-testid="tag" overMedia />
+      </ThemeProvider>,
+    );
+
+    expect(screen.getByTestId('tag')).toHaveClass('wds-sentiment-neutral-dark-elevated');
+  });
+
+  it('keeps the surrounding brand theme when overMedia is set', () => {
+    render(
+      <ThemeProvider theme="business" screenMode="light">
+        <Tag label="Tag copy" data-testid="tag" overMedia />
+      </ThemeProvider>,
+    );
+
+    expect(screen.getByTestId('tag')).toHaveClass('np-theme-business');
+  });
+
+  it('applies a custom className and id', () => {
+    render(<Tag label="Tag copy" className="custom-class" id="custom-id" data-testid="tag" />);
+    const tag = screen.getByTestId('tag');
+
+    expect(tag).toHaveClass('custom-class');
+    expect(tag).toHaveAttribute('id', 'custom-id');
+  });
+});

package/src/Tag/Tag.tsx

@@ -0,0 +1,71 @@
+import { forwardRef } from 'react';
+import { clsx } from 'clsx';
+import { ThemeProvider, useTheme } from '@wise/components-theming';
+
+import SentimentSurface from '../SentimentSurface';
+import { TagProps } from './Tag.types';
+
+/**
+ * Tag is a small, non-interactive label that categorises or highlights a piece of content.
+ *
+ * @param {string} label - The text of the tag, kept to a word or two.
+ * @param {Sentiment} [sentiment='neutral'] - Optional prop to set the sentiment type (negative, warning, neutral, success, proposition).
+ * @param {TagSize} [size='small'] - Optional prop to set the size of the tag (small or large).
+ * @param {Emphasis} [emphasis='base'] - Optional prop to specify the emphasis level (base or elevated).
+ * @param {boolean} [overMedia=false] - If true, renders the tag for use over media, keeping the colours it uses in dark screen modes.
+ * @param {string} [className] - Additional CSS classes to apply.
+ * @param {string} [id] - Unique identifier for the component.
+ * @param {string} [data-testid] - A unique string that appears as data attribute `data-testid` in the rendered code.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <Tag sentiment="success" label="Verified" />
+ * ```
+ *
+ * @see {@link https://storybook.wise.design/?path=/docs/tag--docs|Storybook Wise Design}
+ */
+const Tag = forwardRef<HTMLSpanElement, TagProps>(function Tag(
+  {
+    label,
+    sentiment = 'neutral',
+    size = 'small',
+    emphasis = 'base',
+    overMedia = false,
+    className,
+    id,
+    'data-testid': dataTestId,
+  },
+  ref,
+) {
+  const { theme, screenMode } = useTheme();
+
+  return (
+    <ThemeProvider
+      theme={theme}
+      screenMode={overMedia ? 'dark' : screenMode}
+      className="wds-tag-theme"
+    >
+      <SentimentSurface
+        // @ts-expect-error - SentimentSurface forwardRef types don't expose ref in props
+        ref={ref}
+        as="span"
+        sentiment={sentiment}
+        emphasis={overMedia ? 'elevated' : emphasis}
+        id={id}
+        data-testid={dataTestId}
+        className={clsx(
+          'wds-tag',
+          `wds-tag--${size}`,
+          `wds-tag--${sentiment}`,
+          'np-text-body-default-bold',
+          className,
+        )}
+      >
+        {label}
+      </SentimentSurface>
+    </ThemeProvider>
+  );
+});
+
+export default Tag;

package/src/Tag/Tag.types.ts

@@ -0,0 +1,46 @@
+import type { Emphasis, Sentiment } from '../SentimentSurface';
+
+/**
+ * Sizes for the Tag component
+ */
+export type TagSize = 'small' | 'large';
+
+export interface TagProps {
+  /**
+   * The text of the tag, kept to a word or two
+   */
+  label: string;
+
+  /**
+   * The sentiment type that determines the colour scheme
+   * @default 'neutral'
+   */
+  sentiment?: Sentiment;
+
+  /**
+   * The size of the tag
+   * @default 'small'
+   */
+  size?: TagSize;
+
+  /**
+   * The emphasis level affecting background and text contrast
+   * @default 'base'
+   */
+  emphasis?: Emphasis;
+
+  /**
+   * If true, renders the tag for use over media such as a photo or a video, keeping the colours
+   * it uses in dark screen modes so that it stays legible over unpredictable artwork
+   * @default false
+   */
+  overMedia?: boolean;
+
+  className?: string;
+  id?: string;
+
+  /**
+   * A unique string that appears as data attribute `data-testid` in the rendered code, serving as a hook for automated tests
+   */
+  'data-testid'?: string;
+}

package/src/Tag/_stories/Tag.story.tsx

@@ -0,0 +1,245 @@
+import { Fragment } from 'react';
+import type { ReactElement, ReactNode } from 'react';
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+
+import {
+  createSandboxStory,
+  globalScope,
+} from '../../../.storybook/components/sandbox/SandboxEditor';
+import Tag from '..';
+import type { TagProps } from '..';
+
+const withComponentGrid = (Story: () => ReactElement) => (
+  <div
+    style={{
+      display: 'flex',
+      flexWrap: 'wrap',
+      alignItems: 'center',
+      gap: '0.5rem',
+    }}
+  >
+    <Story />
+  </div>
+);
+
+const SENTIMENTS = ['neutral', 'negative', 'warning', 'success', 'proposition'] as const;
+const SIZES = ['small', 'large'] as const;
+const EMPHASES = ['base', 'elevated'] as const;
+const PHOTO = '../card-payment-bakery.webp';
+
+const Label = ({ children }: { children: ReactNode }) => (
+  <span
+    className="np-text-body-default"
+    style={{
+      color: 'var(--color-content-secondary)',
+      textTransform: 'capitalize',
+      whiteSpace: 'nowrap',
+    }}
+  >
+    {children}
+  </span>
+);
+
+/**
+ * Tag is a small, non-interactive label that categorises or highlights a piece of content,
+ * such as a status, a category, or a promotion.
+ *
+ * Tags are decorative labels, not controls — if the user needs to act on the tag, use `Chips`
+ * instead.
+ */
+export default {
+  title: 'Prompts/Tag',
+  component: Tag,
+  tags: ['early-access'],
+  args: {
+    label: 'Tag copy',
+  },
+  argTypes: {
+    label: {
+      control: 'text',
+      table: {
+        type: { summary: 'string' },
+      },
+    },
+    sentiment: {
+      control: 'select',
+      options: SENTIMENTS,
+    },
+    size: {
+      control: 'inline-radio',
+      options: SIZES,
+    },
+    emphasis: {
+      control: 'inline-radio',
+      options: EMPHASES,
+    },
+    overMedia: {
+      control: 'boolean',
+    },
+  },
+} satisfies Meta<TagProps>;
+
+type Story = StoryObj<TagProps>;
+
+export const Playground: Story = {};
+
+export const Sandbox = createSandboxStory({
+  code: `<div className="d-flex align-items-center" style={{ gap: '8px' }}>
+  <Tag label="New" />
+  <Tag label="Verified" sentiment="success" emphasis="elevated" />
+  <Tag label="Action needed" sentiment="warning" size="large" />
+</div>`,
+  scope: globalScope,
+});
+
+/**
+ * Every tag the component can render. Each cell sets its own `sentiment`, `emphasis` and
+ * `overMedia`; the `size` and text controls apply to the whole table.
+ */
+export const Overview: Story = {
+  args: {
+    size: 'small',
+  },
+  render: (args) => (
+    <div
+      style={{
+        alignItems: 'center',
+        columnGap: '2rem',
+        display: 'grid',
+        gridTemplateColumns: 'repeat(4, max-content)',
+        justifyItems: 'start',
+        rowGap: '0.75rem',
+      }}
+    >
+      <span />
+      <Label>Base</Label>
+      <Label>Elevated</Label>
+      <Label>Over media</Label>
+
+      {SENTIMENTS.map((sentiment) => (
+        <Fragment key={sentiment}>
+          <Label>{sentiment}</Label>
+          <Tag {...args} sentiment={sentiment} />
+          <Tag {...args} sentiment={sentiment} emphasis="elevated" />
+          <Tag {...args} sentiment={sentiment} overMedia />
+        </Fragment>
+      ))}
+    </div>
+  ),
+};
+
+/**
+ * Tags come in two sizes. Use `small` alongside body text and `large` when the tag sits next to
+ * headings or other prominent content.
+ */
+export const Sizes: Story = {
+  decorators: [withComponentGrid],
+  render: (args) => (
+    <>
+      <Tag {...args} size="small" />
+      <Tag {...args} size="large" />
+    </>
+  ),
+};
+
+/**
+ * The `sentiment` prop conveys the meaning of the tag:
+ *
+ * - `neutral` (default): general categorisation
+ * - `negative`: errors and failures
+ * - `warning`: something needs attention
+ * - `success`: completed or verified states
+ * - `proposition`: promotions and new features
+ */
+export const Sentiments: Story = {
+  decorators: [withComponentGrid],
+  render: (args) => (
+    <>
+      {SENTIMENTS.map((sentiment) => (
+        <Tag key={sentiment} {...args} sentiment={sentiment} />
+      ))}
+    </>
+  ),
+};
+
+/**
+ * Set `emphasis` to `elevated` to make the tag stand out from the content around it. Use it
+ * sparingly — when every tag is emphasised, none of them are.
+ */
+export const Emphasis: Story = {
+  decorators: [withComponentGrid],
+  render: (args) => (
+    <>
+      {SENTIMENTS.map((sentiment) => (
+        <Tag key={sentiment} {...args} sentiment={sentiment} emphasis="elevated" />
+      ))}
+    </>
+  ),
+};
+
+/**
+ * Set `overMedia` when the tag sits on top of a photo, a video or any other rich backdrop. The
+ * tag then keeps the colours it uses in dark screen modes, regardless of the current one, so that
+ * it stays legible over unpredictable artwork. Tags over media are always elevated.
+ */
+export const OverMedia: Story = {
+  decorators: [
+    (Story: () => ReactElement) => (
+      <div
+        style={{
+          alignItems: 'flex-start',
+          backgroundImage: `url(${PHOTO})`,
+          backgroundPosition: 'center',
+          backgroundSize: 'cover',
+          borderRadius: 'var(--radius-medium)',
+          display: 'flex',
+          flexWrap: 'wrap',
+          gap: '0.5rem',
+          height: '160px',
+          padding: '1rem',
+          width: '100%',
+        }}
+      >
+        <Story />
+      </div>
+    ),
+  ],
+  render: (args) => (
+    <>
+      {SENTIMENTS.map((sentiment) => (
+        <Tag key={sentiment} {...args} sentiment={sentiment} overMedia />
+      ))}
+    </>
+  ),
+};
+
+/**
+ * Tag copy never wraps. It truncates with an ellipsis, either at the tag's own 240px maximum
+ * width or at the width of a narrower parent, so keep the copy to a word or two.
+ */
+export const LongText: Story = {
+  decorators: [
+    (Story: () => ReactElement) => (
+      <div
+        style={{
+          alignItems: 'flex-start',
+          display: 'flex',
+          flexDirection: 'column',
+          gap: '0.5rem',
+        }}
+      >
+        <Story />
+      </div>
+    ),
+  ],
+  render: (args) => (
+    <>
+      <Tag {...args} label="A tag with very long text" />
+
+      <Tag {...args} label="A tag with very very very very very very long text" />
+      <div style={{ display: 'flex', width: '100px' }}>
+        <Tag {...args} label="A tag in a narrow container with long text" />
+      </div>
+    </>
+  ),
+};

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

@@ -0,0 +1,121 @@
+import type { ReactElement } from 'react';
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+
+import { withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
+import { allModes } from '../../../.storybook/modes';
+import Tag from '..';
+import type { TagProps } from '..';
+
+const SENTIMENTS = ['neutral', 'negative', 'warning', 'success', 'proposition'] as const;
+
+const withMatrixGrid = (Story: () => ReactElement) => (
+  <div
+    style={{
+      alignItems: 'center',
+      display: 'grid',
+      gap: '0.5rem',
+      gridTemplateColumns: 'repeat(5, max-content)',
+      justifyItems: 'start',
+    }}
+  >
+    <Story />
+  </div>
+);
+
+const meta = {
+  title: 'Prompts/Tag/Tests',
+  component: Tag,
+  tags: ['!autodocs', '!manifest'],
+  args: {
+    label: 'Tag copy',
+  },
+} satisfies Meta<TagProps>;
+
+export default meta;
+
+type Story = StoryObj<TagProps>;
+
+/**
+ * Every combination of size, emphasis and sentiment, across all themes.
+ */
+export const AllThemesAndSentiments: Story = {
+  render: () => (
+    <>
+      {(['small', 'large'] as const).map((size) =>
+        (['base', 'elevated'] as const).map((emphasis) =>
+          SENTIMENTS.map((sentiment) => (
+            <Tag
+              key={`${size}-${emphasis}-${sentiment}`}
+              label={`${size} ${sentiment}`}
+              size={size}
+              sentiment={sentiment}
+              emphasis={emphasis}
+            />
+          )),
+        ),
+      )}
+    </>
+  ),
+  decorators: [withMatrixGrid],
+  parameters: {
+    padding: '16px',
+    variants: ['default', 'dark', 'bright-green', 'forest-green'],
+    chromatic: {
+      dark: allModes.dark,
+      brightGreen: allModes.brightGreen,
+      forestGreen: allModes.forestGreen,
+    },
+  },
+};
+
+/**
+ * The tag's horizontal padding is asymmetric and long copy truncates, so both need to mirror.
+ */
+export const RTLDiff: Story = {
+  render: () => (
+    <div
+      style={{
+        alignItems: 'flex-start',
+        display: 'flex',
+        flexDirection: 'column',
+        gap: '0.5rem',
+      }}
+    >
+      <Tag label="Tag copy" />
+      <Tag label="Tag copy" size="large" sentiment="success" emphasis="elevated" />
+      <Tag label="A tag with copy far too long to fit within its maximum width" />
+    </div>
+  ),
+  ...withRTLDiff(),
+};
+
+/**
+ * `overMedia` tags keep their dark screen mode colours in every theme.
+ */
+export const OverMediaAcrossThemes: Story = {
+  render: () => (
+    <>
+      {(['small', 'large'] as const).map((size) =>
+        SENTIMENTS.map((sentiment) => (
+          <Tag
+            key={`${size}-${sentiment}`}
+            label={`${size} ${sentiment}`}
+            size={size}
+            sentiment={sentiment}
+            overMedia
+          />
+        )),
+      )}
+    </>
+  ),
+  decorators: [withMatrixGrid],
+  parameters: {
+    padding: '16px',
+    variants: ['default', 'dark', 'bright-green', 'forest-green'],
+    chromatic: {
+      dark: allModes.dark,
+      brightGreen: allModes.brightGreen,
+      forestGreen: allModes.forestGreen,
+    },
+  },
+};

package/src/Tag/index.ts

@@ -0,0 +1,2 @@
+export { default } from './Tag';
+export type { TagProps, TagSize } from './Tag.types';

package/src/_deprecated/Card/_stories/Card.test.story.tsx

@@ -7,7 +7,7 @@ import Card from '..';
 export default {
   component: Card,
   title: 'Layouts/Card/Tests',
-  tags: ['!autodocs', '!manifest'],
+  tags: ['!autodocs', '!manifest', 'deprecated'],
 } satisfies Meta<typeof Card>;
 
 type Story = StoryObj<typeof Card>;

package/src/_deprecated/CriticalBanner/_stories/CriticalCommsBanner.test.story.tsx

@@ -7,7 +7,7 @@ import { withRTLDiff } from '../../../../.storybook/decorators/RtlDiffDecorator'
 export default {
   component: CriticalCommsBanner,
   title: 'Prompts/CriticalCommsBanner/Tests',
-  tags: ['!autodocs', 'deprecated'],
+  tags: ['!autodocs', 'deprecated', 'deprecated'],
 } satisfies Meta<typeof CriticalCommsBanner>;
 
 type Story = StoryObj<typeof CriticalCommsBanner>;

package/src/_deprecated/InlineAlert/_stories/InlineAlert.test.story.tsx

@@ -6,7 +6,7 @@ import InlineAlert from '..';
 export default {
   component: InlineAlert,
   title: 'Prompts/InlineAlert/Tests',
-  tags: ['!autodocs', '!manifest'],
+  tags: ['!autodocs', '!manifest', 'deprecated'],
 } satisfies Meta<typeof InlineAlert>;
 
 type Story = StoryObj<typeof InlineAlert>;

package/src/_deprecated/OverlayHeader/_stories/OverlayHeader.test.story.tsx

@@ -9,7 +9,7 @@ import OverlayHeader from '..';
 export default {
   component: OverlayHeader,
   title: 'Navigation/OverlayHeader/Tests',
-  tags: ['!autodocs', '!manifest'],
+  tags: ['!autodocs', '!manifest', 'deprecated'],
 } satisfies Meta<typeof OverlayHeader>;
 
 type Story = StoryObj<typeof OverlayHeader>;

package/src/_deprecated/Select/Select.css

@@ -152,11 +152,40 @@
   letter-spacing: -0.006em;
   font-weight: 400;
   font-weight: var(--font-weight-regular);
+  word-wrap: break-word;
 }
 .np-theme-personal .np-dropdown-menu > li > a {
   border-radius: 10px;
   border-radius: var(--radius-small);
 }
+@supports (hyphenate-limit-chars: 1) {
+  .np-dropdown-menu > li > a {
+    hyphens: auto;
+    hyphenate-limit-chars: 7 3;
+  }
+  @media (min-width: 840px) {
+    .np-dropdown-menu > li > a {
+      hyphenate-limit-chars: 8 3;
+    }
+  }
+  @media (min-width: 1160px) {
+    .np-dropdown-menu > li > a {
+      hyphenate-limit-chars: 10 4 3;
+    }
+  }
+}
+@supports (not (hyphenate-limit-chars: 1)) and (-webkit-hyphenate-limit-before: 1) {
+  .np-dropdown-menu > li > a {
+    hyphens: auto;
+    -webkit-hyphenate-limit-before: 3;
+    -webkit-hyphenate-limit-after: 3;
+  }
+  @media (min-width: 1160px) {
+    .np-dropdown-menu > li > a {
+      -webkit-hyphenate-limit-before: 4;
+    }
+  }
+}
 .np-dropdown-menu > li:first-child > a {
   border-start-end-radius: 3px;
   border-start-start-radius: 3px;

package/src/_deprecated/Select/_stories/Select.rtl.test.story.tsx

@@ -8,7 +8,7 @@ import Select from '..';
 export default {
   component: Select,
   title: 'Forms/Select/Tests/RTL Diff',
-  tags: ['!autodocs', '!manifest'],
+  tags: ['!autodocs', '!manifest', 'deprecated'],
 } satisfies Meta<typeof Select>;
 
 type Story = StoryObj<typeof Select>;

package/src/_deprecated/Select/_stories/Select.test.story.tsx

@@ -8,7 +8,7 @@ import Select, { SelectOptionItem } from '../Select';
 const meta = {
   title: 'Forms/Select/Tests',
   component: Select,
-  tags: ['!autodocs', '!manifest'],
+  tags: ['!autodocs', '!manifest', 'deprecated'],
 } satisfies Meta<typeof Select>;
 export default meta;