@transferwise/components 0.0.0-experimental-feef95e → 0.0.0-experimental-1bb5459

package/src/Tag/Tag.css

@@ -0,0 +1,35 @@
+.wds-tag {
+  align-items: center;
+  display: inline-flex;
+  gap: 1px;
+  max-inline-size: 240px;
+  min-inline-size: 0;
+  inline-size: -moz-fit-content;
+  inline-size: fit-content;
+}
+.wds-tag--small {
+  border-radius: 6px;
+  padding-block: 1px;
+  padding-inline: 3px 4px;
+  padding-inline: 3px var(--size-4);
+}
+.wds-tag--small .wds-tag__text {
+  font-size: 0.75rem;
+  font-size: var(--font-size-12);
+}
+.wds-tag--large {
+  border-radius: 8px;
+  border-radius: var(--size-8);
+  padding-block: 1px;
+  padding-inline: 5px 6px;
+  padding-inline: var(--size-5) 6px;
+}
+.wds-tag__text {
+  overflow: hidden;
+  padding-inline-start: 1px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.wds-tag.wds-tag--proposition {
+  color: var(--color-sentiment-interactive-primary);
+}

package/src/Tag/Tag.less

@@ -0,0 +1,35 @@
+.wds-tag {
+  align-items: center;
+  display: inline-flex;
+  gap: 1px;
+  max-width: 240px;
+  min-width: 0;
+  width: fit-content;
+
+  &--small {
+    border-radius: 6px;
+    padding-block: 1px;
+    padding-inline: 3px var(--size-4);
+
+    .wds-tag__text {
+      font-size: var(--font-size-12);
+    }
+  }
+
+  &--large {
+    border-radius: var(--size-8);
+    padding-block: 1px;
+    padding-inline: var(--size-5) 6px;
+  }
+
+  &__text {
+    overflow: hidden;
+    padding-inline-start: 1px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  &.wds-tag--proposition {
+    color: var(--color-sentiment-interactive-primary);
+  }
+}

package/src/Tag/Tag.test.tsx

@@ -0,0 +1,72 @@
+import { ThemeProvider } from '@wise/components-theming';
+
+import { render, screen } from '../test-utils';
+import Tag from './Tag';
+
+describe('Tag', () => {
+  it('renders the text as a span', () => {
+    render(<Tag data-testid="tag">Tag copy</Tag>);
+    const tag = screen.getByTestId('tag');
+
+    expect(tag.tagName).toBe('SPAN');
+    expect(tag).toHaveTextContent('Tag copy');
+  });
+
+  it('wraps the text in a truncating text wrapper', () => {
+    render(<Tag data-testid="tag">Tag copy</Tag>);
+    const text = screen.getByText('Tag copy');
+
+    expect(text).toHaveClass('wds-tag__text');
+    expect(text.parentElement).toHaveClass('wds-tag');
+  });
+
+  it('defaults to a small, neutral tag', () => {
+    render(<Tag data-testid="tag">Tag copy</Tag>);
+
+    expect(screen.getByTestId('tag')).toHaveClass('wds-tag', 'wds-tag--small', 'wds-tag--neutral');
+  });
+
+  it('renders the size as a class', () => {
+    render(
+      <Tag size="large" data-testid="tag">
+        Tag copy
+      </Tag>,
+    );
+
+    expect(screen.getByTestId('tag')).toHaveClass('wds-tag--large');
+  });
+
+  it('renders the sentiment as a class', () => {
+    render(
+      <Tag sentiment="success" data-testid="tag">
+        Tag copy
+      </Tag>,
+    );
+
+    expect(screen.getByTestId('tag')).toHaveClass('wds-tag--success');
+  });
+
+  it('uses the dark elevated surface when overMedia is set in a light screen mode', () => {
+    render(
+      <ThemeProvider theme="personal" screenMode="light">
+        <Tag data-testid="tag" overMedia>
+          Tag copy
+        </Tag>
+      </ThemeProvider>,
+    );
+
+    expect(screen.getByTestId('tag')).toHaveClass('wds-sentiment-neutral-dark-elevated');
+  });
+
+  it('applies a custom className and id', () => {
+    render(
+      <Tag className="custom-class" id="custom-id" data-testid="tag">
+        Tag copy
+      </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,60 @@
+import { forwardRef } from 'react';
+import { clsx } from 'clsx';
+
+import Body from '../Body';
+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} children - The text of the tag.
+ * @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">Verified</Tag>
+ * ```
+ *
+ * @see {@link https://storybook.wise.design/?path=/docs/tag--docs|Storybook Wise Design}
+ */
+const Tag = forwardRef<HTMLSpanElement, TagProps>(function Tag(
+  {
+    children,
+    sentiment = 'neutral',
+    size = 'small',
+    emphasis = 'base',
+    overMedia = false,
+    className,
+    id,
+    'data-testid': dataTestId,
+  },
+  ref,
+) {
+  return (
+    <SentimentSurface
+      // @ts-expect-error - SentimentSurface forwardRef types don't expose ref in props
+      ref={ref}
+      as="span"
+      sentiment={sentiment}
+      emphasis={overMedia ? 'elevated' : emphasis}
+      colourScheme={overMedia ? 'dark' : undefined}
+      id={id}
+      data-testid={dataTestId}
+      className={clsx('wds-tag', `wds-tag--${size}`, `wds-tag--${sentiment}`, className)}
+    >
+      <Body as="span" type="body-default-bold" className="wds-tag__text">
+        {children}
+      </Body>
+    </SentimentSurface>
+  );
+});
+
+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
+   */
+  children: 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: {
+    children: 'Tag copy',
+  },
+  argTypes: {
+    children: {
+      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>New</Tag>
+  <Tag sentiment="success" emphasis="elevated">Verified</Tag>
+  <Tag sentiment="warning" size="large">Action needed</Tag>
+</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}>A tag with very long text</Tag>
+
+      <Tag {...args}>A tag with very very very very very very long text</Tag>
+      <div style={{ display: 'flex', width: '100px' }}>
+        <Tag {...args}>A tag in a narrow container with long text</Tag>
+      </div>
+    </>
+  ),
+};

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

@@ -0,0 +1,120 @@
+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', 'early-access'],
+  args: {
+    children: '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}`}
+              size={size}
+              sentiment={sentiment}
+              emphasis={emphasis}
+            >
+              {`${size} ${sentiment}`}
+            </Tag>
+          )),
+        ),
+      )}
+    </>
+  ),
+  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>Tag copy</Tag>
+      <Tag size="large" sentiment="success" emphasis="elevated">
+        Tag copy
+      </Tag>
+      <Tag>A tag with copy far too long to fit within its maximum width</Tag>
+    </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}`} size={size} sentiment={sentiment} overMedia>
+            {`${size} ${sentiment}`}
+          </Tag>
+        )),
+      )}
+    </>
+  ),
+  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/Select/Select.css

@@ -157,34 +157,6 @@
   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/index.ts

@@ -144,10 +144,12 @@ export type {
   SentimentSurfaceProps,
   SentimentSurfaceComponent,
   Sentiment as SurfaceSentiment,
+  ColourScheme as SurfaceColourScheme,
 } from './SentimentSurface';
 export type { SwitchProps } from './Switch';
 export type { SwitchOptionProps } from './_deprecated/SwitchOption';
 export type { TabItem, TabsProps, TabProps, TabListProps, TabPanelProps } from './Tabs';
+export type { TagProps, TagSize } from './Tag';
 export type { TextareaWithDisplayFormatProps } from './TextareaWithDisplayFormat';
 export type { TileProps } from './Tile';
 export type { TitleProps } from './Title';
@@ -291,6 +293,7 @@ export { default as Summary } from './_deprecated/Summary';
 export { default as Switch } from './Switch';
 export { default as SwitchOption } from './_deprecated/SwitchOption';
 export { default as Tabs } from './Tabs';
+export { default as Tag } from './Tag';
 export { default as TextareaWithDisplayFormat } from './TextareaWithDisplayFormat';
 export { default as Title } from './Title';
 export { default as Tile } from './Tile';