@transferwise/components 46.160.8 → 46.161.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/Tag/Tag.js +45 -0
- package/build/Tag/Tag.js.map +1 -0
- package/build/Tag/Tag.mjs +41 -0
- package/build/Tag/Tag.mjs.map +1 -0
- package/build/index.js +2 -0
- package/build/index.js.map +1 -1
- package/build/index.mjs +1 -0
- package/build/index.mjs.map +1 -1
- package/build/main.css +30 -0
- package/build/styles/Tag/Tag.css +30 -0
- package/build/styles/main.css +30 -0
- package/build/types/Tag/Tag.d.ts +24 -0
- package/build/types/Tag/Tag.d.ts.map +1 -0
- package/build/types/Tag/Tag.types.d.ts +39 -0
- package/build/types/Tag/Tag.types.d.ts.map +1 -0
- package/build/types/Tag/index.d.ts +3 -0
- package/build/types/Tag/index.d.ts.map +1 -0
- package/build/types/index.d.ts +2 -0
- package/build/types/index.d.ts.map +1 -1
- package/package.json +3 -3
- package/src/Tag/Tag.css +30 -0
- package/src/Tag/Tag.less +31 -0
- package/src/Tag/Tag.test.tsx +70 -0
- package/src/Tag/Tag.tsx +71 -0
- package/src/Tag/Tag.types.ts +46 -0
- package/src/Tag/_stories/Tag.story.tsx +245 -0
- package/src/Tag/_stories/Tag.test.story.tsx +121 -0
- package/src/Tag/index.ts +2 -0
- package/src/index.ts +2 -0
- package/src/main.css +30 -0
- package/src/main.less +1 -0
- package/src/test-utils/assets/card-payment-bakery.webp +0 -0
package/build/Tag/Tag.js
ADDED
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
var React = require('react');
|
|
6
|
+
var clsx = require('clsx');
|
|
7
|
+
var componentsTheming = require('@wise/components-theming');
|
|
8
|
+
var SentimentSurface = require('../SentimentSurface/SentimentSurface.js');
|
|
9
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
10
|
+
|
|
11
|
+
const Tag = /*#__PURE__*/React.forwardRef(function Tag({
|
|
12
|
+
label,
|
|
13
|
+
sentiment = 'neutral',
|
|
14
|
+
size = 'small',
|
|
15
|
+
emphasis = 'base',
|
|
16
|
+
overMedia = false,
|
|
17
|
+
className,
|
|
18
|
+
id,
|
|
19
|
+
'data-testid': dataTestId
|
|
20
|
+
}, ref) {
|
|
21
|
+
const {
|
|
22
|
+
theme,
|
|
23
|
+
screenMode
|
|
24
|
+
} = componentsTheming.useTheme();
|
|
25
|
+
return /*#__PURE__*/jsxRuntime.jsx(componentsTheming.ThemeProvider, {
|
|
26
|
+
theme: theme,
|
|
27
|
+
screenMode: overMedia ? 'dark' : screenMode,
|
|
28
|
+
className: "wds-tag-theme",
|
|
29
|
+
children: /*#__PURE__*/jsxRuntime.jsx(SentimentSurface.default
|
|
30
|
+
// @ts-expect-error - SentimentSurface forwardRef types don't expose ref in props
|
|
31
|
+
, {
|
|
32
|
+
ref: ref,
|
|
33
|
+
as: "span",
|
|
34
|
+
sentiment: sentiment,
|
|
35
|
+
emphasis: overMedia ? 'elevated' : emphasis,
|
|
36
|
+
id: id,
|
|
37
|
+
"data-testid": dataTestId,
|
|
38
|
+
className: clsx.clsx('wds-tag', `wds-tag--${size}`, `wds-tag--${sentiment}`, 'np-text-body-default-bold', className),
|
|
39
|
+
children: label
|
|
40
|
+
})
|
|
41
|
+
});
|
|
42
|
+
});
|
|
43
|
+
|
|
44
|
+
exports.default = Tag;
|
|
45
|
+
//# sourceMappingURL=Tag.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Tag.js","sources":["../../src/Tag/Tag.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { clsx } from 'clsx';\nimport { ThemeProvider, useTheme } from '@wise/components-theming';\n\nimport SentimentSurface from '../SentimentSurface';\nimport { TagProps } from './Tag.types';\n\n/**\n * Tag is a small, non-interactive label that categorises or highlights a piece of content.\n *\n * @param {string} label - The text of the tag, kept to a word or two.\n * @param {Sentiment} [sentiment='neutral'] - Optional prop to set the sentiment type (negative, warning, neutral, success, proposition).\n * @param {TagSize} [size='small'] - Optional prop to set the size of the tag (small or large).\n * @param {Emphasis} [emphasis='base'] - Optional prop to specify the emphasis level (base or elevated).\n * @param {boolean} [overMedia=false] - If true, renders the tag for use over media, keeping the colours it uses in dark screen modes.\n * @param {string} [className] - Additional CSS classes to apply.\n * @param {string} [id] - Unique identifier for the component.\n * @param {string} [data-testid] - A unique string that appears as data attribute `data-testid` in the rendered code.\n *\n * @component\n * @example\n * ```tsx\n * <Tag sentiment=\"success\" label=\"Verified\" />\n * ```\n *\n * @see {@link https://storybook.wise.design/?path=/docs/tag--docs|Storybook Wise Design}\n */\nconst Tag = forwardRef<HTMLSpanElement, TagProps>(function Tag(\n {\n label,\n sentiment = 'neutral',\n size = 'small',\n emphasis = 'base',\n overMedia = false,\n className,\n id,\n 'data-testid': dataTestId,\n },\n ref,\n) {\n const { theme, screenMode } = useTheme();\n\n return (\n <ThemeProvider\n theme={theme}\n screenMode={overMedia ? 'dark' : screenMode}\n className=\"wds-tag-theme\"\n >\n <SentimentSurface\n // @ts-expect-error - SentimentSurface forwardRef types don't expose ref in props\n ref={ref}\n as=\"span\"\n sentiment={sentiment}\n emphasis={overMedia ? 'elevated' : emphasis}\n id={id}\n data-testid={dataTestId}\n className={clsx(\n 'wds-tag',\n `wds-tag--${size}`,\n `wds-tag--${sentiment}`,\n 'np-text-body-default-bold',\n className,\n )}\n >\n {label}\n </SentimentSurface>\n </ThemeProvider>\n );\n});\n\nexport default Tag;\n"],"names":["Tag","forwardRef","label","sentiment","size","emphasis","overMedia","className","id","dataTestId","ref","theme","screenMode","useTheme","_jsx","ThemeProvider","children","SentimentSurface","as","clsx"],"mappings":";;;;;;;;;;AA2BA,MAAMA,GAAG,gBAAGC,gBAAU,CAA4B,SAASD,GAAGA,CAC5D;EACEE,KAAK;AACLC,EAAAA,SAAS,GAAG,SAAS;AACrBC,EAAAA,IAAI,GAAG,OAAO;AACdC,EAAAA,QAAQ,GAAG,MAAM;AACjBC,EAAAA,SAAS,GAAG,KAAK;EACjBC,SAAS;EACTC,EAAE;AACF,EAAA,aAAa,EAAEC;AAAU,CAC1B,EACDC,GAAG,EAAA;EAEH,MAAM;IAAEC,KAAK;AAAEC,IAAAA;GAAY,GAAGC,0BAAQ,EAAE;EAExC,oBACEC,cAAA,CAACC,+BAAa,EAAA;AACZJ,IAAAA,KAAK,EAAEA,KAAM;AACbC,IAAAA,UAAU,EAAEN,SAAS,GAAG,MAAM,GAAGM,UAAW;AAC5CL,IAAAA,SAAS,EAAC,eAAe;IAAAS,QAAA,eAEzBF,cAAA,CAACG;AACC;AAAA,MAAA;AACAP,MAAAA,GAAG,EAAEA,GAAI;AACTQ,MAAAA,EAAE,EAAC,MAAM;AACTf,MAAAA,SAAS,EAAEA,SAAU;AACrBE,MAAAA,QAAQ,EAAEC,SAAS,GAAG,UAAU,GAAGD,QAAS;AAC5CG,MAAAA,EAAE,EAAEA,EAAG;AACP,MAAA,aAAA,EAAaC,UAAW;AACxBF,MAAAA,SAAS,EAAEY,SAAI,CACb,SAAS,EACT,YAAYf,IAAI,CAAA,CAAE,EAClB,CAAA,SAAA,EAAYD,SAAS,CAAA,CAAE,EACvB,2BAA2B,EAC3BI,SAAS,CACT;AAAAS,MAAAA,QAAA,EAEDd;KACe;AACpB,GAAe,CAAC;AAEpB,CAAC;;;;"}
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
import { forwardRef } from 'react';
|
|
2
|
+
import { clsx } from 'clsx';
|
|
3
|
+
import { useTheme, ThemeProvider } from '@wise/components-theming';
|
|
4
|
+
import SentimentSurface from '../SentimentSurface/SentimentSurface.mjs';
|
|
5
|
+
import { jsx } from 'react/jsx-runtime';
|
|
6
|
+
|
|
7
|
+
const Tag = /*#__PURE__*/forwardRef(function Tag({
|
|
8
|
+
label,
|
|
9
|
+
sentiment = 'neutral',
|
|
10
|
+
size = 'small',
|
|
11
|
+
emphasis = 'base',
|
|
12
|
+
overMedia = false,
|
|
13
|
+
className,
|
|
14
|
+
id,
|
|
15
|
+
'data-testid': dataTestId
|
|
16
|
+
}, ref) {
|
|
17
|
+
const {
|
|
18
|
+
theme,
|
|
19
|
+
screenMode
|
|
20
|
+
} = useTheme();
|
|
21
|
+
return /*#__PURE__*/jsx(ThemeProvider, {
|
|
22
|
+
theme: theme,
|
|
23
|
+
screenMode: overMedia ? 'dark' : screenMode,
|
|
24
|
+
className: "wds-tag-theme",
|
|
25
|
+
children: /*#__PURE__*/jsx(SentimentSurface
|
|
26
|
+
// @ts-expect-error - SentimentSurface forwardRef types don't expose ref in props
|
|
27
|
+
, {
|
|
28
|
+
ref: ref,
|
|
29
|
+
as: "span",
|
|
30
|
+
sentiment: sentiment,
|
|
31
|
+
emphasis: overMedia ? 'elevated' : emphasis,
|
|
32
|
+
id: id,
|
|
33
|
+
"data-testid": dataTestId,
|
|
34
|
+
className: clsx('wds-tag', `wds-tag--${size}`, `wds-tag--${sentiment}`, 'np-text-body-default-bold', className),
|
|
35
|
+
children: label
|
|
36
|
+
})
|
|
37
|
+
});
|
|
38
|
+
});
|
|
39
|
+
|
|
40
|
+
export { Tag as default };
|
|
41
|
+
//# sourceMappingURL=Tag.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Tag.mjs","sources":["../../src/Tag/Tag.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { clsx } from 'clsx';\nimport { ThemeProvider, useTheme } from '@wise/components-theming';\n\nimport SentimentSurface from '../SentimentSurface';\nimport { TagProps } from './Tag.types';\n\n/**\n * Tag is a small, non-interactive label that categorises or highlights a piece of content.\n *\n * @param {string} label - The text of the tag, kept to a word or two.\n * @param {Sentiment} [sentiment='neutral'] - Optional prop to set the sentiment type (negative, warning, neutral, success, proposition).\n * @param {TagSize} [size='small'] - Optional prop to set the size of the tag (small or large).\n * @param {Emphasis} [emphasis='base'] - Optional prop to specify the emphasis level (base or elevated).\n * @param {boolean} [overMedia=false] - If true, renders the tag for use over media, keeping the colours it uses in dark screen modes.\n * @param {string} [className] - Additional CSS classes to apply.\n * @param {string} [id] - Unique identifier for the component.\n * @param {string} [data-testid] - A unique string that appears as data attribute `data-testid` in the rendered code.\n *\n * @component\n * @example\n * ```tsx\n * <Tag sentiment=\"success\" label=\"Verified\" />\n * ```\n *\n * @see {@link https://storybook.wise.design/?path=/docs/tag--docs|Storybook Wise Design}\n */\nconst Tag = forwardRef<HTMLSpanElement, TagProps>(function Tag(\n {\n label,\n sentiment = 'neutral',\n size = 'small',\n emphasis = 'base',\n overMedia = false,\n className,\n id,\n 'data-testid': dataTestId,\n },\n ref,\n) {\n const { theme, screenMode } = useTheme();\n\n return (\n <ThemeProvider\n theme={theme}\n screenMode={overMedia ? 'dark' : screenMode}\n className=\"wds-tag-theme\"\n >\n <SentimentSurface\n // @ts-expect-error - SentimentSurface forwardRef types don't expose ref in props\n ref={ref}\n as=\"span\"\n sentiment={sentiment}\n emphasis={overMedia ? 'elevated' : emphasis}\n id={id}\n data-testid={dataTestId}\n className={clsx(\n 'wds-tag',\n `wds-tag--${size}`,\n `wds-tag--${sentiment}`,\n 'np-text-body-default-bold',\n className,\n )}\n >\n {label}\n </SentimentSurface>\n </ThemeProvider>\n );\n});\n\nexport default Tag;\n"],"names":["Tag","forwardRef","label","sentiment","size","emphasis","overMedia","className","id","dataTestId","ref","theme","screenMode","useTheme","_jsx","ThemeProvider","children","SentimentSurface","as","clsx"],"mappings":";;;;;;AA2BA,MAAMA,GAAG,gBAAGC,UAAU,CAA4B,SAASD,GAAGA,CAC5D;EACEE,KAAK;AACLC,EAAAA,SAAS,GAAG,SAAS;AACrBC,EAAAA,IAAI,GAAG,OAAO;AACdC,EAAAA,QAAQ,GAAG,MAAM;AACjBC,EAAAA,SAAS,GAAG,KAAK;EACjBC,SAAS;EACTC,EAAE;AACF,EAAA,aAAa,EAAEC;AAAU,CAC1B,EACDC,GAAG,EAAA;EAEH,MAAM;IAAEC,KAAK;AAAEC,IAAAA;GAAY,GAAGC,QAAQ,EAAE;EAExC,oBACEC,GAAA,CAACC,aAAa,EAAA;AACZJ,IAAAA,KAAK,EAAEA,KAAM;AACbC,IAAAA,UAAU,EAAEN,SAAS,GAAG,MAAM,GAAGM,UAAW;AAC5CL,IAAAA,SAAS,EAAC,eAAe;IAAAS,QAAA,eAEzBF,GAAA,CAACG;AACC;AAAA,MAAA;AACAP,MAAAA,GAAG,EAAEA,GAAI;AACTQ,MAAAA,EAAE,EAAC,MAAM;AACTf,MAAAA,SAAS,EAAEA,SAAU;AACrBE,MAAAA,QAAQ,EAAEC,SAAS,GAAG,UAAU,GAAGD,QAAS;AAC5CG,MAAAA,EAAE,EAAEA,EAAG;AACP,MAAA,aAAA,EAAaC,UAAW;AACxBF,MAAAA,SAAS,EAAEY,IAAI,CACb,SAAS,EACT,YAAYf,IAAI,CAAA,CAAE,EAClB,CAAA,SAAA,EAAYD,SAAS,CAAA,CAAE,EACvB,2BAA2B,EAC3BI,SAAS,CACT;AAAAS,MAAAA,QAAA,EAEDd;KACe;AACpB,GAAe,CAAC;AAEpB,CAAC;;;;"}
|
package/build/index.js
CHANGED
|
@@ -114,6 +114,7 @@ var Summary = require('./_deprecated/Summary/Summary.js');
|
|
|
114
114
|
var Switch = require('./Switch/Switch.js');
|
|
115
115
|
var SwitchOption = require('./_deprecated/SwitchOption/SwitchOption.js');
|
|
116
116
|
var Tabs = require('./Tabs/Tabs.js');
|
|
117
|
+
var Tag = require('./Tag/Tag.js');
|
|
117
118
|
var TextareaWithDisplayFormat = require('./TextareaWithDisplayFormat/TextareaWithDisplayFormat.js');
|
|
118
119
|
var Title = require('./Title/Title.js');
|
|
119
120
|
var Tile = require('./Tile/Tile.js');
|
|
@@ -284,6 +285,7 @@ exports.Summary = Summary.default;
|
|
|
284
285
|
exports.Switch = Switch.default;
|
|
285
286
|
exports.SwitchOption = SwitchOption.default;
|
|
286
287
|
exports.Tabs = Tabs.default;
|
|
288
|
+
exports.Tag = Tag.default;
|
|
287
289
|
exports.TextareaWithDisplayFormat = TextareaWithDisplayFormat.default;
|
|
288
290
|
exports.Title = Title.default;
|
|
289
291
|
exports.Tile = Tile.default;
|
package/build/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
package/build/index.mjs
CHANGED
|
@@ -112,6 +112,7 @@ export { default as Summary } from './_deprecated/Summary/Summary.mjs';
|
|
|
112
112
|
export { default as Switch } from './Switch/Switch.mjs';
|
|
113
113
|
export { default as SwitchOption } from './_deprecated/SwitchOption/SwitchOption.mjs';
|
|
114
114
|
export { default as Tabs } from './Tabs/Tabs.mjs';
|
|
115
|
+
export { default as Tag } from './Tag/Tag.mjs';
|
|
115
116
|
export { default as TextareaWithDisplayFormat } from './TextareaWithDisplayFormat/TextareaWithDisplayFormat.mjs';
|
|
116
117
|
export { default as Title } from './Title/Title.mjs';
|
|
117
118
|
export { default as Tile } from './Tile/Tile.mjs';
|
package/build/index.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
package/build/main.css
CHANGED
|
@@ -27387,6 +27387,36 @@ button.np-link {
|
|
|
27387
27387
|
margin-inline-end: 12px;
|
|
27388
27388
|
margin-inline-end: var(--size-12);
|
|
27389
27389
|
}
|
|
27390
|
+
.wds-tag {
|
|
27391
|
+
display: inline-block;
|
|
27392
|
+
max-inline-size: 240px;
|
|
27393
|
+
min-inline-size: 0;
|
|
27394
|
+
overflow: hidden;
|
|
27395
|
+
text-overflow: ellipsis;
|
|
27396
|
+
vertical-align: middle;
|
|
27397
|
+
white-space: nowrap;
|
|
27398
|
+
inline-size: -moz-fit-content;
|
|
27399
|
+
inline-size: fit-content;
|
|
27400
|
+
}
|
|
27401
|
+
.wds-tag--small {
|
|
27402
|
+
border-radius: 6px;
|
|
27403
|
+
font-size: 0.75rem;
|
|
27404
|
+
font-size: var(--font-size-12);
|
|
27405
|
+
padding-block: 1px;
|
|
27406
|
+
padding-inline: 4px;
|
|
27407
|
+
padding-inline: var(--size-4);
|
|
27408
|
+
}
|
|
27409
|
+
.wds-tag--large {
|
|
27410
|
+
border-radius: 8px;
|
|
27411
|
+
padding-block: 1px;
|
|
27412
|
+
padding-inline: 6px;
|
|
27413
|
+
}
|
|
27414
|
+
.wds-tag.wds-tag--proposition {
|
|
27415
|
+
color: var(--color-sentiment-interactive-primary);
|
|
27416
|
+
}
|
|
27417
|
+
.wds-tag-theme {
|
|
27418
|
+
display: contents;
|
|
27419
|
+
}
|
|
27390
27420
|
.np-tile {
|
|
27391
27421
|
min-inline-size: 120px;
|
|
27392
27422
|
border-radius: 10px;
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
.wds-tag {
|
|
2
|
+
display: inline-block;
|
|
3
|
+
max-inline-size: 240px;
|
|
4
|
+
min-inline-size: 0;
|
|
5
|
+
overflow: hidden;
|
|
6
|
+
text-overflow: ellipsis;
|
|
7
|
+
vertical-align: middle;
|
|
8
|
+
white-space: nowrap;
|
|
9
|
+
inline-size: -moz-fit-content;
|
|
10
|
+
inline-size: fit-content;
|
|
11
|
+
}
|
|
12
|
+
.wds-tag--small {
|
|
13
|
+
border-radius: 6px;
|
|
14
|
+
font-size: 0.75rem;
|
|
15
|
+
font-size: var(--font-size-12);
|
|
16
|
+
padding-block: 1px;
|
|
17
|
+
padding-inline: 4px;
|
|
18
|
+
padding-inline: var(--size-4);
|
|
19
|
+
}
|
|
20
|
+
.wds-tag--large {
|
|
21
|
+
border-radius: 8px;
|
|
22
|
+
padding-block: 1px;
|
|
23
|
+
padding-inline: 6px;
|
|
24
|
+
}
|
|
25
|
+
.wds-tag.wds-tag--proposition {
|
|
26
|
+
color: var(--color-sentiment-interactive-primary);
|
|
27
|
+
}
|
|
28
|
+
.wds-tag-theme {
|
|
29
|
+
display: contents;
|
|
30
|
+
}
|
package/build/styles/main.css
CHANGED
|
@@ -27387,6 +27387,36 @@ button.np-link {
|
|
|
27387
27387
|
margin-inline-end: 12px;
|
|
27388
27388
|
margin-inline-end: var(--size-12);
|
|
27389
27389
|
}
|
|
27390
|
+
.wds-tag {
|
|
27391
|
+
display: inline-block;
|
|
27392
|
+
max-inline-size: 240px;
|
|
27393
|
+
min-inline-size: 0;
|
|
27394
|
+
overflow: hidden;
|
|
27395
|
+
text-overflow: ellipsis;
|
|
27396
|
+
vertical-align: middle;
|
|
27397
|
+
white-space: nowrap;
|
|
27398
|
+
inline-size: -moz-fit-content;
|
|
27399
|
+
inline-size: fit-content;
|
|
27400
|
+
}
|
|
27401
|
+
.wds-tag--small {
|
|
27402
|
+
border-radius: 6px;
|
|
27403
|
+
font-size: 0.75rem;
|
|
27404
|
+
font-size: var(--font-size-12);
|
|
27405
|
+
padding-block: 1px;
|
|
27406
|
+
padding-inline: 4px;
|
|
27407
|
+
padding-inline: var(--size-4);
|
|
27408
|
+
}
|
|
27409
|
+
.wds-tag--large {
|
|
27410
|
+
border-radius: 8px;
|
|
27411
|
+
padding-block: 1px;
|
|
27412
|
+
padding-inline: 6px;
|
|
27413
|
+
}
|
|
27414
|
+
.wds-tag.wds-tag--proposition {
|
|
27415
|
+
color: var(--color-sentiment-interactive-primary);
|
|
27416
|
+
}
|
|
27417
|
+
.wds-tag-theme {
|
|
27418
|
+
display: contents;
|
|
27419
|
+
}
|
|
27390
27420
|
.np-tile {
|
|
27391
27421
|
min-inline-size: 120px;
|
|
27392
27422
|
border-radius: 10px;
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import { TagProps } from './Tag.types';
|
|
2
|
+
/**
|
|
3
|
+
* Tag is a small, non-interactive label that categorises or highlights a piece of content.
|
|
4
|
+
*
|
|
5
|
+
* @param {string} label - The text of the tag, kept to a word or two.
|
|
6
|
+
* @param {Sentiment} [sentiment='neutral'] - Optional prop to set the sentiment type (negative, warning, neutral, success, proposition).
|
|
7
|
+
* @param {TagSize} [size='small'] - Optional prop to set the size of the tag (small or large).
|
|
8
|
+
* @param {Emphasis} [emphasis='base'] - Optional prop to specify the emphasis level (base or elevated).
|
|
9
|
+
* @param {boolean} [overMedia=false] - If true, renders the tag for use over media, keeping the colours it uses in dark screen modes.
|
|
10
|
+
* @param {string} [className] - Additional CSS classes to apply.
|
|
11
|
+
* @param {string} [id] - Unique identifier for the component.
|
|
12
|
+
* @param {string} [data-testid] - A unique string that appears as data attribute `data-testid` in the rendered code.
|
|
13
|
+
*
|
|
14
|
+
* @component
|
|
15
|
+
* @example
|
|
16
|
+
* ```tsx
|
|
17
|
+
* <Tag sentiment="success" label="Verified" />
|
|
18
|
+
* ```
|
|
19
|
+
*
|
|
20
|
+
* @see {@link https://storybook.wise.design/?path=/docs/tag--docs|Storybook Wise Design}
|
|
21
|
+
*/
|
|
22
|
+
declare const Tag: import("react").ForwardRefExoticComponent<TagProps & import("react").RefAttributes<HTMLSpanElement>>;
|
|
23
|
+
export default Tag;
|
|
24
|
+
//# sourceMappingURL=Tag.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Tag.d.ts","sourceRoot":"","sources":["../../../src/Tag/Tag.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAEvC;;;;;;;;;;;;;;;;;;;GAmBG;AACH,QAAA,MAAM,GAAG,sGAyCP,CAAC;AAEH,eAAe,GAAG,CAAC"}
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
import type { Emphasis, Sentiment } from '../SentimentSurface';
|
|
2
|
+
/**
|
|
3
|
+
* Sizes for the Tag component
|
|
4
|
+
*/
|
|
5
|
+
export type TagSize = 'small' | 'large';
|
|
6
|
+
export interface TagProps {
|
|
7
|
+
/**
|
|
8
|
+
* The text of the tag, kept to a word or two
|
|
9
|
+
*/
|
|
10
|
+
label: string;
|
|
11
|
+
/**
|
|
12
|
+
* The sentiment type that determines the colour scheme
|
|
13
|
+
* @default 'neutral'
|
|
14
|
+
*/
|
|
15
|
+
sentiment?: Sentiment;
|
|
16
|
+
/**
|
|
17
|
+
* The size of the tag
|
|
18
|
+
* @default 'small'
|
|
19
|
+
*/
|
|
20
|
+
size?: TagSize;
|
|
21
|
+
/**
|
|
22
|
+
* The emphasis level affecting background and text contrast
|
|
23
|
+
* @default 'base'
|
|
24
|
+
*/
|
|
25
|
+
emphasis?: Emphasis;
|
|
26
|
+
/**
|
|
27
|
+
* If true, renders the tag for use over media such as a photo or a video, keeping the colours
|
|
28
|
+
* it uses in dark screen modes so that it stays legible over unpredictable artwork
|
|
29
|
+
* @default false
|
|
30
|
+
*/
|
|
31
|
+
overMedia?: boolean;
|
|
32
|
+
className?: string;
|
|
33
|
+
id?: string;
|
|
34
|
+
/**
|
|
35
|
+
* A unique string that appears as data attribute `data-testid` in the rendered code, serving as a hook for automated tests
|
|
36
|
+
*/
|
|
37
|
+
'data-testid'?: string;
|
|
38
|
+
}
|
|
39
|
+
//# sourceMappingURL=Tag.types.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Tag.types.d.ts","sourceRoot":"","sources":["../../../src/Tag/Tag.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAE/D;;GAEG;AACH,MAAM,MAAM,OAAO,GAAG,OAAO,GAAG,OAAO,CAAC;AAExC,MAAM,WAAW,QAAQ;IACvB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;;OAGG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IAEtB;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IAEf;;;OAGG;IACH,QAAQ,CAAC,EAAE,QAAQ,CAAC;IAEpB;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,EAAE,CAAC,EAAE,MAAM,CAAC;IAEZ;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/Tag/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAChC,YAAY,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC"}
|
package/build/types/index.d.ts
CHANGED
|
@@ -88,6 +88,7 @@ export type { SentimentSurfaceProps, SentimentSurfaceComponent, Sentiment as Sur
|
|
|
88
88
|
export type { SwitchProps } from './Switch';
|
|
89
89
|
export type { SwitchOptionProps } from './_deprecated/SwitchOption';
|
|
90
90
|
export type { TabItem, TabsProps, TabProps, TabListProps, TabPanelProps } from './Tabs';
|
|
91
|
+
export type { TagProps, TagSize } from './Tag';
|
|
91
92
|
export type { TextareaWithDisplayFormatProps } from './TextareaWithDisplayFormat';
|
|
92
93
|
export type { TileProps } from './Tile';
|
|
93
94
|
export type { TitleProps } from './Title';
|
|
@@ -198,6 +199,7 @@ export { default as Summary } from './_deprecated/Summary';
|
|
|
198
199
|
export { default as Switch } from './Switch';
|
|
199
200
|
export { default as SwitchOption } from './_deprecated/SwitchOption';
|
|
200
201
|
export { default as Tabs } from './Tabs';
|
|
202
|
+
export { default as Tag } from './Tag';
|
|
201
203
|
export { default as TextareaWithDisplayFormat } from './TextareaWithDisplayFormat';
|
|
202
204
|
export { default as Title } from './Title';
|
|
203
205
|
export { default as Tile } from './Tile';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@transferwise/components",
|
|
3
|
-
"version": "46.
|
|
3
|
+
"version": "46.161.0",
|
|
4
4
|
"description": "Neptune React components",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"repository": {
|
|
@@ -92,8 +92,8 @@
|
|
|
92
92
|
"storybook-addon-tag-badges": "^3.1.0",
|
|
93
93
|
"storybook-addon-test-codegen": "^3.0.4",
|
|
94
94
|
"@transferwise/less-config": "3.2.0",
|
|
95
|
-
"@wise/
|
|
96
|
-
"@wise/
|
|
95
|
+
"@wise/components-theming": "1.10.3",
|
|
96
|
+
"@wise/wds-configs": "0.0.0"
|
|
97
97
|
},
|
|
98
98
|
"peerDependencies": {
|
|
99
99
|
"@transferwise/icons": "^3 || ^4",
|
package/src/Tag/Tag.css
ADDED
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
.wds-tag {
|
|
2
|
+
display: inline-block;
|
|
3
|
+
max-inline-size: 240px;
|
|
4
|
+
min-inline-size: 0;
|
|
5
|
+
overflow: hidden;
|
|
6
|
+
text-overflow: ellipsis;
|
|
7
|
+
vertical-align: middle;
|
|
8
|
+
white-space: nowrap;
|
|
9
|
+
inline-size: -moz-fit-content;
|
|
10
|
+
inline-size: fit-content;
|
|
11
|
+
}
|
|
12
|
+
.wds-tag--small {
|
|
13
|
+
border-radius: 6px;
|
|
14
|
+
font-size: 0.75rem;
|
|
15
|
+
font-size: var(--font-size-12);
|
|
16
|
+
padding-block: 1px;
|
|
17
|
+
padding-inline: 4px;
|
|
18
|
+
padding-inline: var(--size-4);
|
|
19
|
+
}
|
|
20
|
+
.wds-tag--large {
|
|
21
|
+
border-radius: 8px;
|
|
22
|
+
padding-block: 1px;
|
|
23
|
+
padding-inline: 6px;
|
|
24
|
+
}
|
|
25
|
+
.wds-tag.wds-tag--proposition {
|
|
26
|
+
color: var(--color-sentiment-interactive-primary);
|
|
27
|
+
}
|
|
28
|
+
.wds-tag-theme {
|
|
29
|
+
display: contents;
|
|
30
|
+
}
|
package/src/Tag/Tag.less
ADDED
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
.wds-tag {
|
|
2
|
+
display: inline-block;
|
|
3
|
+
max-width: 240px;
|
|
4
|
+
min-width: 0;
|
|
5
|
+
overflow: hidden;
|
|
6
|
+
text-overflow: ellipsis;
|
|
7
|
+
vertical-align: middle;
|
|
8
|
+
white-space: nowrap;
|
|
9
|
+
width: fit-content;
|
|
10
|
+
|
|
11
|
+
&--small {
|
|
12
|
+
border-radius: 6px;
|
|
13
|
+
font-size: var(--font-size-12);
|
|
14
|
+
padding-block: 1px;
|
|
15
|
+
padding-inline: var(--size-4);
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
&--large {
|
|
19
|
+
border-radius: 8px;
|
|
20
|
+
padding-block: 1px;
|
|
21
|
+
padding-inline: 6px;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
&.wds-tag--proposition {
|
|
25
|
+
color: var(--color-sentiment-interactive-primary);
|
|
26
|
+
}
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
.wds-tag-theme {
|
|
30
|
+
display: contents;
|
|
31
|
+
}
|
|
@@ -0,0 +1,70 @@
|
|
|
1
|
+
import { ThemeProvider } from '@wise/components-theming';
|
|
2
|
+
|
|
3
|
+
import { render, screen } from '../test-utils';
|
|
4
|
+
import Tag from './Tag';
|
|
5
|
+
|
|
6
|
+
describe('Tag', () => {
|
|
7
|
+
it('renders the label as a span', () => {
|
|
8
|
+
render(<Tag label="Tag copy" data-testid="tag" />);
|
|
9
|
+
const tag = screen.getByTestId('tag');
|
|
10
|
+
|
|
11
|
+
expect(tag.tagName).toBe('SPAN');
|
|
12
|
+
expect(tag).toHaveTextContent('Tag copy');
|
|
13
|
+
});
|
|
14
|
+
|
|
15
|
+
it('defaults to a small, neutral tag', () => {
|
|
16
|
+
render(<Tag label="Tag copy" data-testid="tag" />);
|
|
17
|
+
|
|
18
|
+
expect(screen.getByTestId('tag')).toHaveClass('wds-tag', 'wds-tag--small', 'wds-tag--neutral');
|
|
19
|
+
});
|
|
20
|
+
|
|
21
|
+
it('renders the size as a class', () => {
|
|
22
|
+
render(<Tag label="Tag copy" size="large" data-testid="tag" />);
|
|
23
|
+
|
|
24
|
+
expect(screen.getByTestId('tag')).toHaveClass('wds-tag--large');
|
|
25
|
+
});
|
|
26
|
+
|
|
27
|
+
it('renders the sentiment as a class', () => {
|
|
28
|
+
render(<Tag label="Tag copy" sentiment="success" data-testid="tag" />);
|
|
29
|
+
|
|
30
|
+
expect(screen.getByTestId('tag')).toHaveClass('wds-tag--success');
|
|
31
|
+
});
|
|
32
|
+
|
|
33
|
+
it('follows the surrounding screen mode', () => {
|
|
34
|
+
render(
|
|
35
|
+
<ThemeProvider theme="personal" screenMode="dark">
|
|
36
|
+
<Tag label="Tag copy" data-testid="tag" />
|
|
37
|
+
</ThemeProvider>,
|
|
38
|
+
);
|
|
39
|
+
|
|
40
|
+
expect(screen.getByTestId('tag')).toHaveClass('wds-sentiment-neutral-dark-base');
|
|
41
|
+
});
|
|
42
|
+
|
|
43
|
+
it('uses the dark elevated surface when overMedia is set in a light screen mode', () => {
|
|
44
|
+
render(
|
|
45
|
+
<ThemeProvider theme="personal" screenMode="light">
|
|
46
|
+
<Tag label="Tag copy" data-testid="tag" overMedia />
|
|
47
|
+
</ThemeProvider>,
|
|
48
|
+
);
|
|
49
|
+
|
|
50
|
+
expect(screen.getByTestId('tag')).toHaveClass('wds-sentiment-neutral-dark-elevated');
|
|
51
|
+
});
|
|
52
|
+
|
|
53
|
+
it('keeps the surrounding brand theme when overMedia is set', () => {
|
|
54
|
+
render(
|
|
55
|
+
<ThemeProvider theme="business" screenMode="light">
|
|
56
|
+
<Tag label="Tag copy" data-testid="tag" overMedia />
|
|
57
|
+
</ThemeProvider>,
|
|
58
|
+
);
|
|
59
|
+
|
|
60
|
+
expect(screen.getByTestId('tag')).toHaveClass('np-theme-business');
|
|
61
|
+
});
|
|
62
|
+
|
|
63
|
+
it('applies a custom className and id', () => {
|
|
64
|
+
render(<Tag label="Tag copy" className="custom-class" id="custom-id" data-testid="tag" />);
|
|
65
|
+
const tag = screen.getByTestId('tag');
|
|
66
|
+
|
|
67
|
+
expect(tag).toHaveClass('custom-class');
|
|
68
|
+
expect(tag).toHaveAttribute('id', 'custom-id');
|
|
69
|
+
});
|
|
70
|
+
});
|
package/src/Tag/Tag.tsx
ADDED
|
@@ -0,0 +1,71 @@
|
|
|
1
|
+
import { forwardRef } from 'react';
|
|
2
|
+
import { clsx } from 'clsx';
|
|
3
|
+
import { ThemeProvider, useTheme } from '@wise/components-theming';
|
|
4
|
+
|
|
5
|
+
import SentimentSurface from '../SentimentSurface';
|
|
6
|
+
import { TagProps } from './Tag.types';
|
|
7
|
+
|
|
8
|
+
/**
|
|
9
|
+
* Tag is a small, non-interactive label that categorises or highlights a piece of content.
|
|
10
|
+
*
|
|
11
|
+
* @param {string} label - The text of the tag, kept to a word or two.
|
|
12
|
+
* @param {Sentiment} [sentiment='neutral'] - Optional prop to set the sentiment type (negative, warning, neutral, success, proposition).
|
|
13
|
+
* @param {TagSize} [size='small'] - Optional prop to set the size of the tag (small or large).
|
|
14
|
+
* @param {Emphasis} [emphasis='base'] - Optional prop to specify the emphasis level (base or elevated).
|
|
15
|
+
* @param {boolean} [overMedia=false] - If true, renders the tag for use over media, keeping the colours it uses in dark screen modes.
|
|
16
|
+
* @param {string} [className] - Additional CSS classes to apply.
|
|
17
|
+
* @param {string} [id] - Unique identifier for the component.
|
|
18
|
+
* @param {string} [data-testid] - A unique string that appears as data attribute `data-testid` in the rendered code.
|
|
19
|
+
*
|
|
20
|
+
* @component
|
|
21
|
+
* @example
|
|
22
|
+
* ```tsx
|
|
23
|
+
* <Tag sentiment="success" label="Verified" />
|
|
24
|
+
* ```
|
|
25
|
+
*
|
|
26
|
+
* @see {@link https://storybook.wise.design/?path=/docs/tag--docs|Storybook Wise Design}
|
|
27
|
+
*/
|
|
28
|
+
const Tag = forwardRef<HTMLSpanElement, TagProps>(function Tag(
|
|
29
|
+
{
|
|
30
|
+
label,
|
|
31
|
+
sentiment = 'neutral',
|
|
32
|
+
size = 'small',
|
|
33
|
+
emphasis = 'base',
|
|
34
|
+
overMedia = false,
|
|
35
|
+
className,
|
|
36
|
+
id,
|
|
37
|
+
'data-testid': dataTestId,
|
|
38
|
+
},
|
|
39
|
+
ref,
|
|
40
|
+
) {
|
|
41
|
+
const { theme, screenMode } = useTheme();
|
|
42
|
+
|
|
43
|
+
return (
|
|
44
|
+
<ThemeProvider
|
|
45
|
+
theme={theme}
|
|
46
|
+
screenMode={overMedia ? 'dark' : screenMode}
|
|
47
|
+
className="wds-tag-theme"
|
|
48
|
+
>
|
|
49
|
+
<SentimentSurface
|
|
50
|
+
// @ts-expect-error - SentimentSurface forwardRef types don't expose ref in props
|
|
51
|
+
ref={ref}
|
|
52
|
+
as="span"
|
|
53
|
+
sentiment={sentiment}
|
|
54
|
+
emphasis={overMedia ? 'elevated' : emphasis}
|
|
55
|
+
id={id}
|
|
56
|
+
data-testid={dataTestId}
|
|
57
|
+
className={clsx(
|
|
58
|
+
'wds-tag',
|
|
59
|
+
`wds-tag--${size}`,
|
|
60
|
+
`wds-tag--${sentiment}`,
|
|
61
|
+
'np-text-body-default-bold',
|
|
62
|
+
className,
|
|
63
|
+
)}
|
|
64
|
+
>
|
|
65
|
+
{label}
|
|
66
|
+
</SentimentSurface>
|
|
67
|
+
</ThemeProvider>
|
|
68
|
+
);
|
|
69
|
+
});
|
|
70
|
+
|
|
71
|
+
export default Tag;
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
import type { Emphasis, Sentiment } from '../SentimentSurface';
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* Sizes for the Tag component
|
|
5
|
+
*/
|
|
6
|
+
export type TagSize = 'small' | 'large';
|
|
7
|
+
|
|
8
|
+
export interface TagProps {
|
|
9
|
+
/**
|
|
10
|
+
* The text of the tag, kept to a word or two
|
|
11
|
+
*/
|
|
12
|
+
label: string;
|
|
13
|
+
|
|
14
|
+
/**
|
|
15
|
+
* The sentiment type that determines the colour scheme
|
|
16
|
+
* @default 'neutral'
|
|
17
|
+
*/
|
|
18
|
+
sentiment?: Sentiment;
|
|
19
|
+
|
|
20
|
+
/**
|
|
21
|
+
* The size of the tag
|
|
22
|
+
* @default 'small'
|
|
23
|
+
*/
|
|
24
|
+
size?: TagSize;
|
|
25
|
+
|
|
26
|
+
/**
|
|
27
|
+
* The emphasis level affecting background and text contrast
|
|
28
|
+
* @default 'base'
|
|
29
|
+
*/
|
|
30
|
+
emphasis?: Emphasis;
|
|
31
|
+
|
|
32
|
+
/**
|
|
33
|
+
* If true, renders the tag for use over media such as a photo or a video, keeping the colours
|
|
34
|
+
* it uses in dark screen modes so that it stays legible over unpredictable artwork
|
|
35
|
+
* @default false
|
|
36
|
+
*/
|
|
37
|
+
overMedia?: boolean;
|
|
38
|
+
|
|
39
|
+
className?: string;
|
|
40
|
+
id?: string;
|
|
41
|
+
|
|
42
|
+
/**
|
|
43
|
+
* A unique string that appears as data attribute `data-testid` in the rendered code, serving as a hook for automated tests
|
|
44
|
+
*/
|
|
45
|
+
'data-testid'?: string;
|
|
46
|
+
}
|
|
@@ -0,0 +1,245 @@
|
|
|
1
|
+
import { Fragment } from 'react';
|
|
2
|
+
import type { ReactElement, ReactNode } from 'react';
|
|
3
|
+
import type { Meta, StoryObj } from '@storybook/react-webpack5';
|
|
4
|
+
|
|
5
|
+
import {
|
|
6
|
+
createSandboxStory,
|
|
7
|
+
globalScope,
|
|
8
|
+
} from '../../../.storybook/components/sandbox/SandboxEditor';
|
|
9
|
+
import Tag from '..';
|
|
10
|
+
import type { TagProps } from '..';
|
|
11
|
+
|
|
12
|
+
const withComponentGrid = (Story: () => ReactElement) => (
|
|
13
|
+
<div
|
|
14
|
+
style={{
|
|
15
|
+
display: 'flex',
|
|
16
|
+
flexWrap: 'wrap',
|
|
17
|
+
alignItems: 'center',
|
|
18
|
+
gap: '0.5rem',
|
|
19
|
+
}}
|
|
20
|
+
>
|
|
21
|
+
<Story />
|
|
22
|
+
</div>
|
|
23
|
+
);
|
|
24
|
+
|
|
25
|
+
const SENTIMENTS = ['neutral', 'negative', 'warning', 'success', 'proposition'] as const;
|
|
26
|
+
const SIZES = ['small', 'large'] as const;
|
|
27
|
+
const EMPHASES = ['base', 'elevated'] as const;
|
|
28
|
+
const PHOTO = '../card-payment-bakery.webp';
|
|
29
|
+
|
|
30
|
+
const Label = ({ children }: { children: ReactNode }) => (
|
|
31
|
+
<span
|
|
32
|
+
className="np-text-body-default"
|
|
33
|
+
style={{
|
|
34
|
+
color: 'var(--color-content-secondary)',
|
|
35
|
+
textTransform: 'capitalize',
|
|
36
|
+
whiteSpace: 'nowrap',
|
|
37
|
+
}}
|
|
38
|
+
>
|
|
39
|
+
{children}
|
|
40
|
+
</span>
|
|
41
|
+
);
|
|
42
|
+
|
|
43
|
+
/**
|
|
44
|
+
* Tag is a small, non-interactive label that categorises or highlights a piece of content,
|
|
45
|
+
* such as a status, a category, or a promotion.
|
|
46
|
+
*
|
|
47
|
+
* Tags are decorative labels, not controls — if the user needs to act on the tag, use `Chips`
|
|
48
|
+
* instead.
|
|
49
|
+
*/
|
|
50
|
+
export default {
|
|
51
|
+
title: 'Prompts/Tag',
|
|
52
|
+
component: Tag,
|
|
53
|
+
tags: ['early-access'],
|
|
54
|
+
args: {
|
|
55
|
+
label: 'Tag copy',
|
|
56
|
+
},
|
|
57
|
+
argTypes: {
|
|
58
|
+
label: {
|
|
59
|
+
control: 'text',
|
|
60
|
+
table: {
|
|
61
|
+
type: { summary: 'string' },
|
|
62
|
+
},
|
|
63
|
+
},
|
|
64
|
+
sentiment: {
|
|
65
|
+
control: 'select',
|
|
66
|
+
options: SENTIMENTS,
|
|
67
|
+
},
|
|
68
|
+
size: {
|
|
69
|
+
control: 'inline-radio',
|
|
70
|
+
options: SIZES,
|
|
71
|
+
},
|
|
72
|
+
emphasis: {
|
|
73
|
+
control: 'inline-radio',
|
|
74
|
+
options: EMPHASES,
|
|
75
|
+
},
|
|
76
|
+
overMedia: {
|
|
77
|
+
control: 'boolean',
|
|
78
|
+
},
|
|
79
|
+
},
|
|
80
|
+
} satisfies Meta<TagProps>;
|
|
81
|
+
|
|
82
|
+
type Story = StoryObj<TagProps>;
|
|
83
|
+
|
|
84
|
+
export const Playground: Story = {};
|
|
85
|
+
|
|
86
|
+
export const Sandbox = createSandboxStory({
|
|
87
|
+
code: `<div className="d-flex align-items-center" style={{ gap: '8px' }}>
|
|
88
|
+
<Tag label="New" />
|
|
89
|
+
<Tag label="Verified" sentiment="success" emphasis="elevated" />
|
|
90
|
+
<Tag label="Action needed" sentiment="warning" size="large" />
|
|
91
|
+
</div>`,
|
|
92
|
+
scope: globalScope,
|
|
93
|
+
});
|
|
94
|
+
|
|
95
|
+
/**
|
|
96
|
+
* Every tag the component can render. Each cell sets its own `sentiment`, `emphasis` and
|
|
97
|
+
* `overMedia`; the `size` and text controls apply to the whole table.
|
|
98
|
+
*/
|
|
99
|
+
export const Overview: Story = {
|
|
100
|
+
args: {
|
|
101
|
+
size: 'small',
|
|
102
|
+
},
|
|
103
|
+
render: (args) => (
|
|
104
|
+
<div
|
|
105
|
+
style={{
|
|
106
|
+
alignItems: 'center',
|
|
107
|
+
columnGap: '2rem',
|
|
108
|
+
display: 'grid',
|
|
109
|
+
gridTemplateColumns: 'repeat(4, max-content)',
|
|
110
|
+
justifyItems: 'start',
|
|
111
|
+
rowGap: '0.75rem',
|
|
112
|
+
}}
|
|
113
|
+
>
|
|
114
|
+
<span />
|
|
115
|
+
<Label>Base</Label>
|
|
116
|
+
<Label>Elevated</Label>
|
|
117
|
+
<Label>Over media</Label>
|
|
118
|
+
|
|
119
|
+
{SENTIMENTS.map((sentiment) => (
|
|
120
|
+
<Fragment key={sentiment}>
|
|
121
|
+
<Label>{sentiment}</Label>
|
|
122
|
+
<Tag {...args} sentiment={sentiment} />
|
|
123
|
+
<Tag {...args} sentiment={sentiment} emphasis="elevated" />
|
|
124
|
+
<Tag {...args} sentiment={sentiment} overMedia />
|
|
125
|
+
</Fragment>
|
|
126
|
+
))}
|
|
127
|
+
</div>
|
|
128
|
+
),
|
|
129
|
+
};
|
|
130
|
+
|
|
131
|
+
/**
|
|
132
|
+
* Tags come in two sizes. Use `small` alongside body text and `large` when the tag sits next to
|
|
133
|
+
* headings or other prominent content.
|
|
134
|
+
*/
|
|
135
|
+
export const Sizes: Story = {
|
|
136
|
+
decorators: [withComponentGrid],
|
|
137
|
+
render: (args) => (
|
|
138
|
+
<>
|
|
139
|
+
<Tag {...args} size="small" />
|
|
140
|
+
<Tag {...args} size="large" />
|
|
141
|
+
</>
|
|
142
|
+
),
|
|
143
|
+
};
|
|
144
|
+
|
|
145
|
+
/**
|
|
146
|
+
* The `sentiment` prop conveys the meaning of the tag:
|
|
147
|
+
*
|
|
148
|
+
* - `neutral` (default): general categorisation
|
|
149
|
+
* - `negative`: errors and failures
|
|
150
|
+
* - `warning`: something needs attention
|
|
151
|
+
* - `success`: completed or verified states
|
|
152
|
+
* - `proposition`: promotions and new features
|
|
153
|
+
*/
|
|
154
|
+
export const Sentiments: Story = {
|
|
155
|
+
decorators: [withComponentGrid],
|
|
156
|
+
render: (args) => (
|
|
157
|
+
<>
|
|
158
|
+
{SENTIMENTS.map((sentiment) => (
|
|
159
|
+
<Tag key={sentiment} {...args} sentiment={sentiment} />
|
|
160
|
+
))}
|
|
161
|
+
</>
|
|
162
|
+
),
|
|
163
|
+
};
|
|
164
|
+
|
|
165
|
+
/**
|
|
166
|
+
* Set `emphasis` to `elevated` to make the tag stand out from the content around it. Use it
|
|
167
|
+
* sparingly — when every tag is emphasised, none of them are.
|
|
168
|
+
*/
|
|
169
|
+
export const Emphasis: Story = {
|
|
170
|
+
decorators: [withComponentGrid],
|
|
171
|
+
render: (args) => (
|
|
172
|
+
<>
|
|
173
|
+
{SENTIMENTS.map((sentiment) => (
|
|
174
|
+
<Tag key={sentiment} {...args} sentiment={sentiment} emphasis="elevated" />
|
|
175
|
+
))}
|
|
176
|
+
</>
|
|
177
|
+
),
|
|
178
|
+
};
|
|
179
|
+
|
|
180
|
+
/**
|
|
181
|
+
* Set `overMedia` when the tag sits on top of a photo, a video or any other rich backdrop. The
|
|
182
|
+
* tag then keeps the colours it uses in dark screen modes, regardless of the current one, so that
|
|
183
|
+
* it stays legible over unpredictable artwork. Tags over media are always elevated.
|
|
184
|
+
*/
|
|
185
|
+
export const OverMedia: Story = {
|
|
186
|
+
decorators: [
|
|
187
|
+
(Story: () => ReactElement) => (
|
|
188
|
+
<div
|
|
189
|
+
style={{
|
|
190
|
+
alignItems: 'flex-start',
|
|
191
|
+
backgroundImage: `url(${PHOTO})`,
|
|
192
|
+
backgroundPosition: 'center',
|
|
193
|
+
backgroundSize: 'cover',
|
|
194
|
+
borderRadius: 'var(--radius-medium)',
|
|
195
|
+
display: 'flex',
|
|
196
|
+
flexWrap: 'wrap',
|
|
197
|
+
gap: '0.5rem',
|
|
198
|
+
height: '160px',
|
|
199
|
+
padding: '1rem',
|
|
200
|
+
width: '100%',
|
|
201
|
+
}}
|
|
202
|
+
>
|
|
203
|
+
<Story />
|
|
204
|
+
</div>
|
|
205
|
+
),
|
|
206
|
+
],
|
|
207
|
+
render: (args) => (
|
|
208
|
+
<>
|
|
209
|
+
{SENTIMENTS.map((sentiment) => (
|
|
210
|
+
<Tag key={sentiment} {...args} sentiment={sentiment} overMedia />
|
|
211
|
+
))}
|
|
212
|
+
</>
|
|
213
|
+
),
|
|
214
|
+
};
|
|
215
|
+
|
|
216
|
+
/**
|
|
217
|
+
* Tag copy never wraps. It truncates with an ellipsis, either at the tag's own 240px maximum
|
|
218
|
+
* width or at the width of a narrower parent, so keep the copy to a word or two.
|
|
219
|
+
*/
|
|
220
|
+
export const LongText: Story = {
|
|
221
|
+
decorators: [
|
|
222
|
+
(Story: () => ReactElement) => (
|
|
223
|
+
<div
|
|
224
|
+
style={{
|
|
225
|
+
alignItems: 'flex-start',
|
|
226
|
+
display: 'flex',
|
|
227
|
+
flexDirection: 'column',
|
|
228
|
+
gap: '0.5rem',
|
|
229
|
+
}}
|
|
230
|
+
>
|
|
231
|
+
<Story />
|
|
232
|
+
</div>
|
|
233
|
+
),
|
|
234
|
+
],
|
|
235
|
+
render: (args) => (
|
|
236
|
+
<>
|
|
237
|
+
<Tag {...args} label="A tag with very long text" />
|
|
238
|
+
|
|
239
|
+
<Tag {...args} label="A tag with very very very very very very long text" />
|
|
240
|
+
<div style={{ display: 'flex', width: '100px' }}>
|
|
241
|
+
<Tag {...args} label="A tag in a narrow container with long text" />
|
|
242
|
+
</div>
|
|
243
|
+
</>
|
|
244
|
+
),
|
|
245
|
+
};
|
|
@@ -0,0 +1,121 @@
|
|
|
1
|
+
import type { ReactElement } from 'react';
|
|
2
|
+
import type { Meta, StoryObj } from '@storybook/react-webpack5';
|
|
3
|
+
|
|
4
|
+
import { withRTLDiff } from '../../../.storybook/decorators/RtlDiffDecorator';
|
|
5
|
+
import { allModes } from '../../../.storybook/modes';
|
|
6
|
+
import Tag from '..';
|
|
7
|
+
import type { TagProps } from '..';
|
|
8
|
+
|
|
9
|
+
const SENTIMENTS = ['neutral', 'negative', 'warning', 'success', 'proposition'] as const;
|
|
10
|
+
|
|
11
|
+
const withMatrixGrid = (Story: () => ReactElement) => (
|
|
12
|
+
<div
|
|
13
|
+
style={{
|
|
14
|
+
alignItems: 'center',
|
|
15
|
+
display: 'grid',
|
|
16
|
+
gap: '0.5rem',
|
|
17
|
+
gridTemplateColumns: 'repeat(5, max-content)',
|
|
18
|
+
justifyItems: 'start',
|
|
19
|
+
}}
|
|
20
|
+
>
|
|
21
|
+
<Story />
|
|
22
|
+
</div>
|
|
23
|
+
);
|
|
24
|
+
|
|
25
|
+
const meta = {
|
|
26
|
+
title: 'Prompts/Tag/Tests',
|
|
27
|
+
component: Tag,
|
|
28
|
+
tags: ['!autodocs', '!manifest'],
|
|
29
|
+
args: {
|
|
30
|
+
label: 'Tag copy',
|
|
31
|
+
},
|
|
32
|
+
} satisfies Meta<TagProps>;
|
|
33
|
+
|
|
34
|
+
export default meta;
|
|
35
|
+
|
|
36
|
+
type Story = StoryObj<TagProps>;
|
|
37
|
+
|
|
38
|
+
/**
|
|
39
|
+
* Every combination of size, emphasis and sentiment, across all themes.
|
|
40
|
+
*/
|
|
41
|
+
export const AllThemesAndSentiments: Story = {
|
|
42
|
+
render: () => (
|
|
43
|
+
<>
|
|
44
|
+
{(['small', 'large'] as const).map((size) =>
|
|
45
|
+
(['base', 'elevated'] as const).map((emphasis) =>
|
|
46
|
+
SENTIMENTS.map((sentiment) => (
|
|
47
|
+
<Tag
|
|
48
|
+
key={`${size}-${emphasis}-${sentiment}`}
|
|
49
|
+
label={`${size} ${sentiment}`}
|
|
50
|
+
size={size}
|
|
51
|
+
sentiment={sentiment}
|
|
52
|
+
emphasis={emphasis}
|
|
53
|
+
/>
|
|
54
|
+
)),
|
|
55
|
+
),
|
|
56
|
+
)}
|
|
57
|
+
</>
|
|
58
|
+
),
|
|
59
|
+
decorators: [withMatrixGrid],
|
|
60
|
+
parameters: {
|
|
61
|
+
padding: '16px',
|
|
62
|
+
variants: ['default', 'dark', 'bright-green', 'forest-green'],
|
|
63
|
+
chromatic: {
|
|
64
|
+
dark: allModes.dark,
|
|
65
|
+
brightGreen: allModes.brightGreen,
|
|
66
|
+
forestGreen: allModes.forestGreen,
|
|
67
|
+
},
|
|
68
|
+
},
|
|
69
|
+
};
|
|
70
|
+
|
|
71
|
+
/**
|
|
72
|
+
* The tag's horizontal padding is asymmetric and long copy truncates, so both need to mirror.
|
|
73
|
+
*/
|
|
74
|
+
export const RTLDiff: Story = {
|
|
75
|
+
render: () => (
|
|
76
|
+
<div
|
|
77
|
+
style={{
|
|
78
|
+
alignItems: 'flex-start',
|
|
79
|
+
display: 'flex',
|
|
80
|
+
flexDirection: 'column',
|
|
81
|
+
gap: '0.5rem',
|
|
82
|
+
}}
|
|
83
|
+
>
|
|
84
|
+
<Tag label="Tag copy" />
|
|
85
|
+
<Tag label="Tag copy" size="large" sentiment="success" emphasis="elevated" />
|
|
86
|
+
<Tag label="A tag with copy far too long to fit within its maximum width" />
|
|
87
|
+
</div>
|
|
88
|
+
),
|
|
89
|
+
...withRTLDiff(),
|
|
90
|
+
};
|
|
91
|
+
|
|
92
|
+
/**
|
|
93
|
+
* `overMedia` tags keep their dark screen mode colours in every theme.
|
|
94
|
+
*/
|
|
95
|
+
export const OverMediaAcrossThemes: Story = {
|
|
96
|
+
render: () => (
|
|
97
|
+
<>
|
|
98
|
+
{(['small', 'large'] as const).map((size) =>
|
|
99
|
+
SENTIMENTS.map((sentiment) => (
|
|
100
|
+
<Tag
|
|
101
|
+
key={`${size}-${sentiment}`}
|
|
102
|
+
label={`${size} ${sentiment}`}
|
|
103
|
+
size={size}
|
|
104
|
+
sentiment={sentiment}
|
|
105
|
+
overMedia
|
|
106
|
+
/>
|
|
107
|
+
)),
|
|
108
|
+
)}
|
|
109
|
+
</>
|
|
110
|
+
),
|
|
111
|
+
decorators: [withMatrixGrid],
|
|
112
|
+
parameters: {
|
|
113
|
+
padding: '16px',
|
|
114
|
+
variants: ['default', 'dark', 'bright-green', 'forest-green'],
|
|
115
|
+
chromatic: {
|
|
116
|
+
dark: allModes.dark,
|
|
117
|
+
brightGreen: allModes.brightGreen,
|
|
118
|
+
forestGreen: allModes.forestGreen,
|
|
119
|
+
},
|
|
120
|
+
},
|
|
121
|
+
};
|
package/src/Tag/index.ts
ADDED
package/src/index.ts
CHANGED
|
@@ -148,6 +148,7 @@ export type {
|
|
|
148
148
|
export type { SwitchProps } from './Switch';
|
|
149
149
|
export type { SwitchOptionProps } from './_deprecated/SwitchOption';
|
|
150
150
|
export type { TabItem, TabsProps, TabProps, TabListProps, TabPanelProps } from './Tabs';
|
|
151
|
+
export type { TagProps, TagSize } from './Tag';
|
|
151
152
|
export type { TextareaWithDisplayFormatProps } from './TextareaWithDisplayFormat';
|
|
152
153
|
export type { TileProps } from './Tile';
|
|
153
154
|
export type { TitleProps } from './Title';
|
|
@@ -291,6 +292,7 @@ export { default as Summary } from './_deprecated/Summary';
|
|
|
291
292
|
export { default as Switch } from './Switch';
|
|
292
293
|
export { default as SwitchOption } from './_deprecated/SwitchOption';
|
|
293
294
|
export { default as Tabs } from './Tabs';
|
|
295
|
+
export { default as Tag } from './Tag';
|
|
294
296
|
export { default as TextareaWithDisplayFormat } from './TextareaWithDisplayFormat';
|
|
295
297
|
export { default as Title } from './Title';
|
|
296
298
|
export { default as Tile } from './Tile';
|
package/src/main.css
CHANGED
|
@@ -27387,6 +27387,36 @@ button.np-link {
|
|
|
27387
27387
|
margin-inline-end: 12px;
|
|
27388
27388
|
margin-inline-end: var(--size-12);
|
|
27389
27389
|
}
|
|
27390
|
+
.wds-tag {
|
|
27391
|
+
display: inline-block;
|
|
27392
|
+
max-inline-size: 240px;
|
|
27393
|
+
min-inline-size: 0;
|
|
27394
|
+
overflow: hidden;
|
|
27395
|
+
text-overflow: ellipsis;
|
|
27396
|
+
vertical-align: middle;
|
|
27397
|
+
white-space: nowrap;
|
|
27398
|
+
inline-size: -moz-fit-content;
|
|
27399
|
+
inline-size: fit-content;
|
|
27400
|
+
}
|
|
27401
|
+
.wds-tag--small {
|
|
27402
|
+
border-radius: 6px;
|
|
27403
|
+
font-size: 0.75rem;
|
|
27404
|
+
font-size: var(--font-size-12);
|
|
27405
|
+
padding-block: 1px;
|
|
27406
|
+
padding-inline: 4px;
|
|
27407
|
+
padding-inline: var(--size-4);
|
|
27408
|
+
}
|
|
27409
|
+
.wds-tag--large {
|
|
27410
|
+
border-radius: 8px;
|
|
27411
|
+
padding-block: 1px;
|
|
27412
|
+
padding-inline: 6px;
|
|
27413
|
+
}
|
|
27414
|
+
.wds-tag.wds-tag--proposition {
|
|
27415
|
+
color: var(--color-sentiment-interactive-primary);
|
|
27416
|
+
}
|
|
27417
|
+
.wds-tag-theme {
|
|
27418
|
+
display: contents;
|
|
27419
|
+
}
|
|
27390
27420
|
.np-tile {
|
|
27391
27421
|
min-inline-size: 120px;
|
|
27392
27422
|
border-radius: 10px;
|
package/src/main.less
CHANGED
|
Binary file
|