@transferwise/components 46.160.8 → 46.161.1

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/index.ts

@@ -148,6 +148,7 @@ export type {
 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 +292,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';

package/src/main.css

@@ -2627,26 +2627,6 @@
   src: url("styles/fonts/inter-vietnamese-variable-wghtOnly-normal.woff2") format("woff2");
   unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
 }
-@font-face {
-  font-weight: 400;
-  font-weight: var(--font-weight-regular);
-  font-family: Averta;
-  src: url("styles/fonts/TW-Averta-Regular.woff2") format("woff2"), url("styles/fonts/TW-Averta-Regular.woff") format("woff");
-  font-display: swap;
-}
-@font-face {
-  font-weight: 600;
-  font-weight: var(--font-weight-semi-bold);
-  font-family: Averta;
-  src: url("styles/fonts/TW-Averta-Semibold.woff2") format("woff2"), url("styles/fonts/TW-Averta-Semibold.woff") format("woff");
-  font-display: swap;
-}
-@font-face {
-  font-weight: 700;
-  font-weight: var(--font-weight-bold);
-  font-family: Averta;
-  src: url("styles/fonts/TW-Averta-Bold.woff2") format("woff2"), url("styles/fonts/TW-Averta-Bold.woff") format("woff");
-}
 @font-face {
   font-family: "Wise Sans";
   font-style: normal;
@@ -2831,7 +2811,6 @@ summary {
 }
 :root {
   --base-font-size: 16px;
-  --font-family-regular: "Inter", Helvetica, Arial, sans-serif;
   --input-group-addon-padding: 12px 16px calc(12px - 2px);
   --btn-padding: 12px 24px calc(12px - 2px);
   --btn-xs-padding: 2px 8px calc(2px - 2px);
@@ -2847,18 +2826,8 @@ summary {
   --btn-sm-radius-base: 2px;
   --btn-lg-radius-base: 3px;
 }
-.np-theme-light,
-.np-theme-dark,
-.np-theme-navy {
-  --font-family-regular: averta, avenir w02, avenir, helvetica, arial, sans-serif !important;
-  font-family: averta, avenir w02, avenir, helvetica, arial, sans-serif;
-  font-family: var(--font-family-regular);
-  line-height: 1.5;
-  line-height: var(--line-height-body);
-}
 .np-theme-personal {
-  --font-family-regular: "Inter", Helvetica, Arial, sans-serif !important;
-  font-family: "Inter", Helvetica, Arial, sans-serif;
+  font-family: 'Inter', Helvetica, Arial, sans-serif;
   font-family: var(--font-family-regular);
   font-feature-settings: "calt";
   --input-group-addon-padding: 12px 16px;
@@ -27387,6 +27356,36 @@ button.np-link {
   margin-inline-end: 12px;
   margin-inline-end: var(--size-12);
 }
+.wds-tag {
+  display: inline-block;
+  max-inline-size: 240px;
+  min-inline-size: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  vertical-align: middle;
+  white-space: nowrap;
+  inline-size: -moz-fit-content;
+  inline-size: fit-content;
+}
+.wds-tag--small {
+  border-radius: 6px;
+  font-size: 0.75rem;
+  font-size: var(--font-size-12);
+  padding-block: 1px;
+  padding-inline: 4px;
+  padding-inline: var(--size-4);
+}
+.wds-tag--large {
+  border-radius: 8px;
+  padding-block: 1px;
+  padding-inline: 6px;
+}
+.wds-tag.wds-tag--proposition {
+  color: var(--color-sentiment-interactive-primary);
+}
+.wds-tag-theme {
+  display: contents;
+}
 .np-tile {
   min-inline-size: 120px;
   border-radius: 10px;

package/src/main.less

@@ -86,6 +86,7 @@
 @import "./_deprecated/SwitchOption/SwitchOption.less";
 @import "./Tabs/Tabs.less";
 @import "./Table/Table.less";
+@import "./Tag/Tag.less";
 @import "./Tile/Tile.less";
 @import "./Tooltip/Tooltip.less";
 @import "./Typeahead/Typeahead.less";

package/src/styles/less/core/_fonts.less

@@ -42,7 +42,9 @@
   font-display: swap;
   font-weight: 100 900;
   src: url("./styles/fonts/inter-latin-variable-wghtOnly-normal.woff2") format("woff2");
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+  unicode-range:
+    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074,
+    U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
 
 @font-face {
@@ -51,7 +53,9 @@
   font-display: swap;
   font-weight: 100 900;
   src: url("./styles/fonts/inter-latin-ext-variable-wghtOnly-normal.woff2") format("woff2");
-  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+  unicode-range:
+    U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F,
+    U+A720-A7FF;
 }
 
 @font-face {
@@ -60,33 +64,9 @@
   font-display: swap;
   font-weight: 100 900;
   src: url("./styles/fonts/inter-vietnamese-variable-wghtOnly-normal.woff2") format("woff2");
-  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
-}
-
-@font-face {
-  font-weight: var(--font-weight-regular);
-  font-family: Averta;
-  src:
-    url("./styles/fonts/TW-Averta-Regular.woff2") format("woff2"),
-    url("./styles/fonts/TW-Averta-Regular.woff") format("woff");
-  font-display: swap;
-}
-
-@font-face {
-  font-weight: var(--font-weight-semi-bold);
-  font-family: Averta;
-  src:
-    url("./styles/fonts/TW-Averta-Semibold.woff2") format("woff2"),
-    url("./styles/fonts/TW-Averta-Semibold.woff") format("woff");
-  font-display: swap;
-}
-
-@font-face {
-  font-weight: var(--font-weight-bold);
-  font-family: Averta;
-  src:
-    url("./styles/fonts/TW-Averta-Bold.woff2") format("woff2"),
-    url("./styles/fonts/TW-Averta-Bold.woff") format("woff");
+  unicode-range:
+    U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9,
+    U+20AB;
 }
 
 @font-face {

package/src/styles/less/core/_scaffolding.less

@@ -9,8 +9,8 @@
 
 :root {
   // page default font size should be set in absolute units (pixels)
+  // TODO: move this token to rest of foundation tokens (neptune-tokens)
   --base-font-size: 16px;
-  --font-family-regular: "Inter", Helvetica, Arial, sans-serif;
   --input-group-addon-padding: @padding-large-vertical @padding-base-horizontal
     calc(@padding-large-vertical - 2px);
   --btn-padding: @btn-padding-vertical @btn-padding-horizontal calc(@btn-padding-vertical - 2px);
@@ -36,18 +36,7 @@
   --btn-lg-radius-base: @border-radius-large;
 }
 
-.np-theme-light,
-.np-theme-dark,
-.np-theme-navy {
-  --font-family-regular: averta, avenir w02, avenir, helvetica, arial, sans-serif !important;
-
-  font-family: var(--font-family-regular);
-  line-height: var(--line-height-body);
-}
-
 .np-theme-personal {
-  --font-family-regular: "Inter", Helvetica, Arial, sans-serif !important;
-
   font-family: var(--font-family-regular);
   font-feature-settings: "calt";
 

package/src/styles/less/neptune-core.css

@@ -55,26 +55,6 @@
   src: url("styles/fonts/inter-vietnamese-variable-wghtOnly-normal.woff2") format("woff2");
   unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
 }
-@font-face {
-  font-weight: 400;
-  font-weight: var(--font-weight-regular);
-  font-family: Averta;
-  src: url("styles/fonts/TW-Averta-Regular.woff2") format("woff2"), url("styles/fonts/TW-Averta-Regular.woff") format("woff");
-  font-display: swap;
-}
-@font-face {
-  font-weight: 600;
-  font-weight: var(--font-weight-semi-bold);
-  font-family: Averta;
-  src: url("styles/fonts/TW-Averta-Semibold.woff2") format("woff2"), url("styles/fonts/TW-Averta-Semibold.woff") format("woff");
-  font-display: swap;
-}
-@font-face {
-  font-weight: 700;
-  font-weight: var(--font-weight-bold);
-  font-family: Averta;
-  src: url("styles/fonts/TW-Averta-Bold.woff2") format("woff2"), url("styles/fonts/TW-Averta-Bold.woff") format("woff");
-}
 @font-face {
   font-family: "Wise Sans";
   font-style: normal;
@@ -259,7 +239,6 @@ summary {
 }
 :root {
   --base-font-size: 16px;
-  --font-family-regular: "Inter", Helvetica, Arial, sans-serif;
   --input-group-addon-padding: 12px 16px calc(12px - 2px);
   --btn-padding: 12px 24px calc(12px - 2px);
   --btn-xs-padding: 2px 8px calc(2px - 2px);
@@ -275,18 +254,8 @@ summary {
   --btn-sm-radius-base: 2px;
   --btn-lg-radius-base: 3px;
 }
-.np-theme-light,
-.np-theme-dark,
-.np-theme-navy {
-  --font-family-regular: averta, avenir w02, avenir, helvetica, arial, sans-serif !important;
-  font-family: averta, avenir w02, avenir, helvetica, arial, sans-serif;
-  font-family: var(--font-family-regular);
-  line-height: 1.5;
-  line-height: var(--line-height-body);
-}
 .np-theme-personal {
-  --font-family-regular: "Inter", Helvetica, Arial, sans-serif !important;
-  font-family: "Inter", Helvetica, Arial, sans-serif;
+  font-family: 'Inter', Helvetica, Arial, sans-serif;
   font-family: var(--font-family-regular);
   font-feature-settings: "calt";
   --input-group-addon-padding: 12px 16px;

package/src/styles/less/neptune.css

@@ -2032,26 +2032,6 @@
   src: url("styles/fonts/inter-vietnamese-variable-wghtOnly-normal.woff2") format("woff2");
   unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
 }
-@font-face {
-  font-weight: 400;
-  font-weight: var(--font-weight-regular);
-  font-family: Averta;
-  src: url("styles/fonts/TW-Averta-Regular.woff2") format("woff2"), url("styles/fonts/TW-Averta-Regular.woff") format("woff");
-  font-display: swap;
-}
-@font-face {
-  font-weight: 600;
-  font-weight: var(--font-weight-semi-bold);
-  font-family: Averta;
-  src: url("styles/fonts/TW-Averta-Semibold.woff2") format("woff2"), url("styles/fonts/TW-Averta-Semibold.woff") format("woff");
-  font-display: swap;
-}
-@font-face {
-  font-weight: 700;
-  font-weight: var(--font-weight-bold);
-  font-family: Averta;
-  src: url("styles/fonts/TW-Averta-Bold.woff2") format("woff2"), url("styles/fonts/TW-Averta-Bold.woff") format("woff");
-}
 @font-face {
   font-family: "Wise Sans";
   font-style: normal;
@@ -2236,7 +2216,6 @@ summary {
 }
 :root {
   --base-font-size: 16px;
-  --font-family-regular: "Inter", Helvetica, Arial, sans-serif;
   --input-group-addon-padding: 12px 16px calc(12px - 2px);
   --btn-padding: 12px 24px calc(12px - 2px);
   --btn-xs-padding: 2px 8px calc(2px - 2px);
@@ -2252,18 +2231,8 @@ summary {
   --btn-sm-radius-base: 2px;
   --btn-lg-radius-base: 3px;
 }
-.np-theme-light,
-.np-theme-dark,
-.np-theme-navy {
-  --font-family-regular: averta, avenir w02, avenir, helvetica, arial, sans-serif !important;
-  font-family: averta, avenir w02, avenir, helvetica, arial, sans-serif;
-  font-family: var(--font-family-regular);
-  line-height: 1.5;
-  line-height: var(--line-height-body);
-}
 .np-theme-personal {
-  --font-family-regular: "Inter", Helvetica, Arial, sans-serif !important;
-  font-family: "Inter", Helvetica, Arial, sans-serif;
+  font-family: 'Inter', Helvetica, Arial, sans-serif;
   font-family: var(--font-family-regular);
   font-feature-settings: "calt";
   --input-group-addon-padding: 12px 16px;