@transferwise/components 46.119.4 → 46.119.5
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/listItem/Prompt/ListItemPrompt.js +2 -2
- package/build/listItem/Prompt/ListItemPrompt.js.map +1 -1
- package/build/listItem/Prompt/ListItemPrompt.mjs +2 -2
- package/build/listItem/Prompt/ListItemPrompt.mjs.map +1 -1
- package/build/prompt/InlinePrompt/InlinePrompt.js +4 -4
- package/build/prompt/InlinePrompt/InlinePrompt.js.map +1 -1
- package/build/prompt/InlinePrompt/InlinePrompt.mjs +4 -4
- package/build/prompt/InlinePrompt/InlinePrompt.mjs.map +1 -1
- package/build/types/listItem/ListItem.d.ts +1 -1
- package/build/types/listItem/Prompt/ListItemPrompt.d.ts +2 -2
- package/build/types/listItem/Prompt/ListItemPrompt.d.ts.map +1 -1
- package/build/types/prompt/InlinePrompt/InlinePrompt.d.ts +2 -2
- package/build/types/prompt/InlinePrompt/InlinePrompt.d.ts.map +1 -1
- package/package.json +3 -3
- package/src/listItem/Prompt/ListItemPrompt.spec.tsx +9 -9
- package/src/listItem/Prompt/ListItemPrompt.story.tsx +1 -1
- package/src/listItem/Prompt/ListItemPrompt.tsx +3 -4
- package/src/prompt/InlinePrompt/InlinePrompt.spec.tsx +6 -6
- package/src/prompt/InlinePrompt/InlinePrompt.story.tsx +2 -2
- package/src/prompt/InlinePrompt/InlinePrompt.tsx +5 -5
|
@@ -32,7 +32,7 @@ var InlinePrompt = require('../../prompt/InlinePrompt/InlinePrompt.js');
|
|
|
32
32
|
|
|
33
33
|
const Prompt = ({
|
|
34
34
|
sentiment: sentiment$1 = sentiment.Sentiment.NEUTRAL,
|
|
35
|
-
|
|
35
|
+
mediaLabel,
|
|
36
36
|
children
|
|
37
37
|
}) => {
|
|
38
38
|
const {
|
|
@@ -43,7 +43,7 @@ const Prompt = ({
|
|
|
43
43
|
return /*#__PURE__*/jsxRuntime.jsx(InlinePrompt.InlinePrompt, {
|
|
44
44
|
id: ids.prompt,
|
|
45
45
|
sentiment: sentiment$1,
|
|
46
|
-
|
|
46
|
+
mediaLabel: mediaLabel,
|
|
47
47
|
muted: isLongLivedMuted,
|
|
48
48
|
className: "wds-list-item-prompt",
|
|
49
49
|
children: isLongLivedMuted ? props.disabledPromptMessage : children
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ListItemPrompt.js","sources":["../../../src/listItem/Prompt/ListItemPrompt.tsx"],"sourcesContent":["import { useContext } from 'react';\nimport {
|
|
1
|
+
{"version":3,"file":"ListItemPrompt.js","sources":["../../../src/listItem/Prompt/ListItemPrompt.tsx"],"sourcesContent":["import { useContext } from 'react';\nimport { Sentiment } from '../../common';\nimport { ListItemContext, type ListItemContextData } from '../ListItemContext';\nimport { InlinePrompt, type InlinePromptProps } from '../../prompt';\n\nexport type ListItemPromptProps = Pick<InlinePromptProps, 'children' | 'sentiment' | 'mediaLabel'>;\n\n/**\n * This component allows for rendering an Inline Prompt. <br />\n * In the future it will be a thin wrapper around a standalone component.<br />\n *\n * Please refer to the [Design documentation](https://wise.design/components/list-item#prompt) for details.\n */\nexport const Prompt = ({\n sentiment = Sentiment.NEUTRAL,\n mediaLabel,\n children,\n}: ListItemPromptProps) => {\n const { ids, props } = useContext<ListItemContextData>(ListItemContext);\n const isLongLivedMuted = props.disabled && Boolean(props.disabledPromptMessage);\n\n return (\n <InlinePrompt\n id={ids.prompt}\n sentiment={sentiment}\n mediaLabel={mediaLabel}\n muted={isLongLivedMuted}\n className=\"wds-list-item-prompt\"\n >\n {isLongLivedMuted ? props.disabledPromptMessage : children}\n </InlinePrompt>\n );\n};\n\nPrompt.displayName = 'ListItem.Prompt';\nexport default Prompt;\n"],"names":["Prompt","sentiment","Sentiment","NEUTRAL","mediaLabel","children","ids","props","useContext","ListItemContext","isLongLivedMuted","disabled","Boolean","disabledPromptMessage","_jsx","InlinePrompt","id","prompt","muted","className","displayName"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAaO,MAAMA,MAAM,GAAGA,CAAC;aACrBC,WAAS,GAAGC,mBAAS,CAACC,OAAO;EAC7BC,UAAU;AACVC,EAAAA;AAAQ,CACY,KAAI;EACxB,MAAM;IAAEC,GAAG;AAAEC,IAAAA;AAAK,GAAE,GAAGC,gBAAU,CAAsBC,+BAAe,CAAC;EACvE,MAAMC,gBAAgB,GAAGH,KAAK,CAACI,QAAQ,IAAIC,OAAO,CAACL,KAAK,CAACM,qBAAqB,CAAC;EAE/E,oBACEC,cAAA,CAACC,yBAAY,EAAA;IACXC,EAAE,EAAEV,GAAG,CAACW,MAAO;AACfhB,IAAAA,SAAS,EAAEA,WAAU;AACrBG,IAAAA,UAAU,EAAEA,UAAW;AACvBc,IAAAA,KAAK,EAAER,gBAAiB;AACxBS,IAAAA,SAAS,EAAC,sBAAsB;AAAAd,IAAAA,QAAA,EAE/BK,gBAAgB,GAAGH,KAAK,CAACM,qBAAqB,GAAGR;AAAQ,GAC9C,CAAC;AAEnB;AAEAL,MAAM,CAACoB,WAAW,GAAG,iBAAiB;;;;;"}
|
|
@@ -28,7 +28,7 @@ import { InlinePrompt } from '../../prompt/InlinePrompt/InlinePrompt.mjs';
|
|
|
28
28
|
|
|
29
29
|
const Prompt = ({
|
|
30
30
|
sentiment = Sentiment.NEUTRAL,
|
|
31
|
-
|
|
31
|
+
mediaLabel,
|
|
32
32
|
children
|
|
33
33
|
}) => {
|
|
34
34
|
const {
|
|
@@ -39,7 +39,7 @@ const Prompt = ({
|
|
|
39
39
|
return /*#__PURE__*/jsx(InlinePrompt, {
|
|
40
40
|
id: ids.prompt,
|
|
41
41
|
sentiment: sentiment,
|
|
42
|
-
|
|
42
|
+
mediaLabel: mediaLabel,
|
|
43
43
|
muted: isLongLivedMuted,
|
|
44
44
|
className: "wds-list-item-prompt",
|
|
45
45
|
children: isLongLivedMuted ? props.disabledPromptMessage : children
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ListItemPrompt.mjs","sources":["../../../src/listItem/Prompt/ListItemPrompt.tsx"],"sourcesContent":["import { useContext } from 'react';\nimport {
|
|
1
|
+
{"version":3,"file":"ListItemPrompt.mjs","sources":["../../../src/listItem/Prompt/ListItemPrompt.tsx"],"sourcesContent":["import { useContext } from 'react';\nimport { Sentiment } from '../../common';\nimport { ListItemContext, type ListItemContextData } from '../ListItemContext';\nimport { InlinePrompt, type InlinePromptProps } from '../../prompt';\n\nexport type ListItemPromptProps = Pick<InlinePromptProps, 'children' | 'sentiment' | 'mediaLabel'>;\n\n/**\n * This component allows for rendering an Inline Prompt. <br />\n * In the future it will be a thin wrapper around a standalone component.<br />\n *\n * Please refer to the [Design documentation](https://wise.design/components/list-item#prompt) for details.\n */\nexport const Prompt = ({\n sentiment = Sentiment.NEUTRAL,\n mediaLabel,\n children,\n}: ListItemPromptProps) => {\n const { ids, props } = useContext<ListItemContextData>(ListItemContext);\n const isLongLivedMuted = props.disabled && Boolean(props.disabledPromptMessage);\n\n return (\n <InlinePrompt\n id={ids.prompt}\n sentiment={sentiment}\n mediaLabel={mediaLabel}\n muted={isLongLivedMuted}\n className=\"wds-list-item-prompt\"\n >\n {isLongLivedMuted ? props.disabledPromptMessage : children}\n </InlinePrompt>\n );\n};\n\nPrompt.displayName = 'ListItem.Prompt';\nexport default Prompt;\n"],"names":["Prompt","sentiment","Sentiment","NEUTRAL","mediaLabel","children","ids","props","useContext","ListItemContext","isLongLivedMuted","disabled","Boolean","disabledPromptMessage","_jsx","InlinePrompt","id","prompt","muted","className","displayName"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAaO,MAAMA,MAAM,GAAGA,CAAC;EACrBC,SAAS,GAAGC,SAAS,CAACC,OAAO;EAC7BC,UAAU;AACVC,EAAAA;AAAQ,CACY,KAAI;EACxB,MAAM;IAAEC,GAAG;AAAEC,IAAAA;AAAK,GAAE,GAAGC,UAAU,CAAsBC,eAAe,CAAC;EACvE,MAAMC,gBAAgB,GAAGH,KAAK,CAACI,QAAQ,IAAIC,OAAO,CAACL,KAAK,CAACM,qBAAqB,CAAC;EAE/E,oBACEC,GAAA,CAACC,YAAY,EAAA;IACXC,EAAE,EAAEV,GAAG,CAACW,MAAO;AACfhB,IAAAA,SAAS,EAAEA,SAAU;AACrBG,IAAAA,UAAU,EAAEA,UAAW;AACvBc,IAAAA,KAAK,EAAER,gBAAiB;AACxBS,IAAAA,SAAS,EAAC,sBAAsB;AAAAd,IAAAA,QAAA,EAE/BK,gBAAgB,GAAGH,KAAK,CAACM,qBAAqB,GAAGR;AAAQ,GAC9C,CAAC;AAEnB;AAEAL,MAAM,CAACoB,WAAW,GAAG,iBAAiB;;;;"}
|
|
@@ -37,7 +37,7 @@ const InlinePrompt = ({
|
|
|
37
37
|
className,
|
|
38
38
|
children,
|
|
39
39
|
media = null,
|
|
40
|
-
|
|
40
|
+
mediaLabel,
|
|
41
41
|
'data-testid': dataTestId,
|
|
42
42
|
...rest
|
|
43
43
|
}) => {
|
|
@@ -47,7 +47,7 @@ const InlinePrompt = ({
|
|
|
47
47
|
return /*#__PURE__*/jsxRuntime.jsx(icons.BackslashCircle, {
|
|
48
48
|
size: 16,
|
|
49
49
|
"data-testid": "InlinePrompt_Muted",
|
|
50
|
-
title:
|
|
50
|
+
title: mediaLabel
|
|
51
51
|
});
|
|
52
52
|
}
|
|
53
53
|
if (loading) {
|
|
@@ -62,13 +62,13 @@ const InlinePrompt = ({
|
|
|
62
62
|
}
|
|
63
63
|
if (sentiment$1 === 'proposition') {
|
|
64
64
|
return media || /*#__PURE__*/jsxRuntime.jsx(icons.GiftBox, {
|
|
65
|
-
title:
|
|
65
|
+
title: mediaLabel
|
|
66
66
|
});
|
|
67
67
|
}
|
|
68
68
|
return /*#__PURE__*/jsxRuntime.jsx(StatusIcon.default, {
|
|
69
69
|
size: 16,
|
|
70
70
|
sentiment: sentiment$1,
|
|
71
|
-
iconLabel:
|
|
71
|
+
iconLabel: mediaLabel
|
|
72
72
|
});
|
|
73
73
|
};
|
|
74
74
|
return /*#__PURE__*/jsxRuntime.jsxs(SentimentSurface.default, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InlinePrompt.js","sources":["../../../src/prompt/InlinePrompt/InlinePrompt.tsx"],"sourcesContent":["import { Sentiment } from '../../common';\nimport { BackslashCircle, GiftBox } from '@transferwise/icons';\nimport ProcessIndicator from '../../processIndicator';\nimport StatusIcon from '../../statusIcon';\nimport { clsx } from 'clsx';\nimport Body from '../../body';\nimport SentimentSurface from '../../sentimentSurface';\n\nexport type InlinePromptProps = {\n /**\n * The sentiment determines the colour scheme\n */\n sentiment?:\n | `${Sentiment.POSITIVE | Sentiment.NEGATIVE | Sentiment.NEUTRAL | Sentiment.WARNING}`\n | 'proposition';\n /**\n * Replaces the icon with a spinner while waiting for the short-lived action to finish.\n * @default false\n */\n loading?: boolean;\n /**\n * While prompts cannot be fully (visually and functionally) disabled, this prop should be enabled\n * they are associated with actually disabled component (e.g. a disabled list item or input).\n * @default false\n */\n muted?: boolean;\n /**\n * Icon override for `proposition` and `positive` sentiments. Unsupported for remaining ones.\n */\n media?: React.ReactNode;\n /**\n * Override for the sentiment's-derived, default, accessible name announced by the screen readers.\n * To be used primarily for `proposition` sentiment.\n */\n
|
|
1
|
+
{"version":3,"file":"InlinePrompt.js","sources":["../../../src/prompt/InlinePrompt/InlinePrompt.tsx"],"sourcesContent":["import { Sentiment } from '../../common';\nimport { BackslashCircle, GiftBox } from '@transferwise/icons';\nimport ProcessIndicator from '../../processIndicator';\nimport StatusIcon from '../../statusIcon';\nimport { clsx } from 'clsx';\nimport Body from '../../body';\nimport SentimentSurface from '../../sentimentSurface';\n\nexport type InlinePromptProps = {\n /**\n * The sentiment determines the colour scheme\n */\n sentiment?:\n | `${Sentiment.POSITIVE | Sentiment.NEGATIVE | Sentiment.NEUTRAL | Sentiment.WARNING}`\n | 'proposition';\n /**\n * Replaces the icon with a spinner while waiting for the short-lived action to finish.\n * @default false\n */\n loading?: boolean;\n /**\n * While prompts cannot be fully (visually and functionally) disabled, this prop should be enabled\n * they are associated with actually disabled component (e.g. a disabled list item or input).\n * @default false\n */\n muted?: boolean;\n /**\n * Icon override for `proposition` and `positive` sentiments. Unsupported for remaining ones.\n */\n media?: React.ReactNode;\n /**\n * Override for the sentiment's-derived, default, accessible name announced by the screen readers.\n * To be used primarily for `proposition` sentiment.\n */\n mediaLabel?: string;\n id?: string;\n className?: string;\n 'data-testid'?: string;\n children: React.ReactNode;\n};\n\n/**\n * Inline prompts appear alongside a specific component on the screen. They help the user stay\n * informed, fix something, or get more out of what they're doing. <br />\n *\n * **NB:** It should be used in favour of `InlineAlert` which will be soon deprecated.\n */\nexport const InlinePrompt = ({\n sentiment = Sentiment.POSITIVE,\n muted = false,\n loading = false,\n className,\n children,\n media = null,\n mediaLabel,\n 'data-testid': dataTestId,\n ...rest\n}: InlinePromptProps) => {\n const surfaceSentiment = sentiment === Sentiment.POSITIVE ? 'success' : sentiment;\n\n const renderMedia = () => {\n if (muted) {\n return <BackslashCircle size={16} data-testid=\"InlinePrompt_Muted\" title={mediaLabel} />;\n }\n if (loading) {\n return (\n <ProcessIndicator\n data-testid=\"InlinePrompt_ProcessIndicator\"\n size=\"xxs\"\n className=\"wds-inline-prompt-process-indicator\"\n />\n );\n }\n\n if (sentiment === 'positive' && media) {\n return media;\n }\n\n if (sentiment === 'proposition') {\n return media || <GiftBox title={mediaLabel} />;\n }\n\n return <StatusIcon size={16} sentiment={sentiment} iconLabel={mediaLabel} />;\n };\n\n return (\n <SentimentSurface\n sentiment={surfaceSentiment}\n data-testid={dataTestId}\n className={clsx(\n 'wds-inline-prompt',\n `wds-inline-prompt--${sentiment}`,\n {\n 'wds-inline-prompt--muted': muted,\n 'wds-inline-prompt--loading': loading,\n },\n className,\n )}\n {...rest}\n >\n <div className=\"wds-inline-prompt__media-wrapper\">{renderMedia()}</div>\n <Body>{children}</Body>\n </SentimentSurface>\n );\n};\n"],"names":["InlinePrompt","sentiment","Sentiment","POSITIVE","muted","loading","className","children","media","mediaLabel","dataTestId","rest","surfaceSentiment","renderMedia","_jsx","BackslashCircle","size","title","ProcessIndicator","GiftBox","StatusIcon","iconLabel","_jsxs","SentimentSurface","clsx","Body"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+CO,MAAMA,YAAY,GAAGA,CAAC;aAC3BC,WAAS,GAAGC,mBAAS,CAACC,QAAQ;AAC9BC,EAAAA,KAAK,GAAG,KAAK;AACbC,EAAAA,OAAO,GAAG,KAAK;EACfC,SAAS;EACTC,QAAQ;AACRC,EAAAA,KAAK,GAAG,IAAI;EACZC,UAAU;AACV,EAAA,aAAa,EAAEC,UAAU;EACzB,GAAGC;AAAI,CACW,KAAI;EACtB,MAAMC,gBAAgB,GAAGX,WAAS,KAAKC,mBAAS,CAACC,QAAQ,GAAG,SAAS,GAAGF,WAAS;EAEjF,MAAMY,WAAW,GAAGA,MAAK;AACvB,IAAA,IAAIT,KAAK,EAAE;MACT,oBAAOU,cAAA,CAACC,qBAAe,EAAA;AAACC,QAAAA,IAAI,EAAE,EAAG;AAAC,QAAA,aAAA,EAAY,oBAAoB;AAACC,QAAAA,KAAK,EAAER;AAAW,QAAG;AAC1F,IAAA;AACA,IAAA,IAAIJ,OAAO,EAAE;MACX,oBACES,cAAA,CAACI,wBAAgB,EAAA;AACf,QAAA,aAAA,EAAY,+BAA+B;AAC3CF,QAAAA,IAAI,EAAC,KAAK;AACVV,QAAAA,SAAS,EAAC;AAAqC,OAAA,CAC/C;AAEN,IAAA;AAEA,IAAA,IAAIL,WAAS,KAAK,UAAU,IAAIO,KAAK,EAAE;AACrC,MAAA,OAAOA,KAAK;AACd,IAAA;IAEA,IAAIP,WAAS,KAAK,aAAa,EAAE;AAC/B,MAAA,OAAOO,KAAK,iBAAIM,cAAA,CAACK,aAAO,EAAA;AAACF,QAAAA,KAAK,EAAER;AAAW,OAAA,CAAG;AAChD,IAAA;IAEA,oBAAOK,cAAA,CAACM,kBAAU,EAAA;AAACJ,MAAAA,IAAI,EAAE,EAAG;AAACf,MAAAA,SAAS,EAAEA,WAAU;AAACoB,MAAAA,SAAS,EAAEZ;AAAW,KAAA,CAAG;EAC9E,CAAC;EAED,oBACEa,eAAA,CAACC,wBAAgB,EAAA;AACftB,IAAAA,SAAS,EAAEW,gBAAiB;AAC5B,IAAA,aAAA,EAAaF,UAAW;IACxBJ,SAAS,EAAEkB,SAAI,CACb,mBAAmB,EACnB,CAAA,mBAAA,EAAsBvB,WAAS,EAAE,EACjC;AACE,MAAA,0BAA0B,EAAEG,KAAK;AACjC,MAAA,4BAA4B,EAAEC;KAC/B,EACDC,SAAS,CACT;AAAA,IAAA,GACEK,IAAI;AAAAJ,IAAAA,QAAA,gBAERO,cAAA,CAAA,KAAA,EAAA;AAAKR,MAAAA,SAAS,EAAC,kCAAkC;MAAAC,QAAA,EAAEM,WAAW;AAAE,KAAM,CACtE,eAAAC,cAAA,CAACW,YAAI,EAAA;AAAAlB,MAAAA,QAAA,EAAEA;AAAQ,KAAO,CACxB;AAAA,GAAkB,CAAC;AAEvB;;;;"}
|
|
@@ -35,7 +35,7 @@ const InlinePrompt = ({
|
|
|
35
35
|
className,
|
|
36
36
|
children,
|
|
37
37
|
media = null,
|
|
38
|
-
|
|
38
|
+
mediaLabel,
|
|
39
39
|
'data-testid': dataTestId,
|
|
40
40
|
...rest
|
|
41
41
|
}) => {
|
|
@@ -45,7 +45,7 @@ const InlinePrompt = ({
|
|
|
45
45
|
return /*#__PURE__*/jsx(BackslashCircle, {
|
|
46
46
|
size: 16,
|
|
47
47
|
"data-testid": "InlinePrompt_Muted",
|
|
48
|
-
title:
|
|
48
|
+
title: mediaLabel
|
|
49
49
|
});
|
|
50
50
|
}
|
|
51
51
|
if (loading) {
|
|
@@ -60,13 +60,13 @@ const InlinePrompt = ({
|
|
|
60
60
|
}
|
|
61
61
|
if (sentiment === 'proposition') {
|
|
62
62
|
return media || /*#__PURE__*/jsx(GiftBox, {
|
|
63
|
-
title:
|
|
63
|
+
title: mediaLabel
|
|
64
64
|
});
|
|
65
65
|
}
|
|
66
66
|
return /*#__PURE__*/jsx(StatusIcon, {
|
|
67
67
|
size: 16,
|
|
68
68
|
sentiment: sentiment,
|
|
69
|
-
iconLabel:
|
|
69
|
+
iconLabel: mediaLabel
|
|
70
70
|
});
|
|
71
71
|
};
|
|
72
72
|
return /*#__PURE__*/jsxs(SentimentSurface, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InlinePrompt.mjs","sources":["../../../src/prompt/InlinePrompt/InlinePrompt.tsx"],"sourcesContent":["import { Sentiment } from '../../common';\nimport { BackslashCircle, GiftBox } from '@transferwise/icons';\nimport ProcessIndicator from '../../processIndicator';\nimport StatusIcon from '../../statusIcon';\nimport { clsx } from 'clsx';\nimport Body from '../../body';\nimport SentimentSurface from '../../sentimentSurface';\n\nexport type InlinePromptProps = {\n /**\n * The sentiment determines the colour scheme\n */\n sentiment?:\n | `${Sentiment.POSITIVE | Sentiment.NEGATIVE | Sentiment.NEUTRAL | Sentiment.WARNING}`\n | 'proposition';\n /**\n * Replaces the icon with a spinner while waiting for the short-lived action to finish.\n * @default false\n */\n loading?: boolean;\n /**\n * While prompts cannot be fully (visually and functionally) disabled, this prop should be enabled\n * they are associated with actually disabled component (e.g. a disabled list item or input).\n * @default false\n */\n muted?: boolean;\n /**\n * Icon override for `proposition` and `positive` sentiments. Unsupported for remaining ones.\n */\n media?: React.ReactNode;\n /**\n * Override for the sentiment's-derived, default, accessible name announced by the screen readers.\n * To be used primarily for `proposition` sentiment.\n */\n
|
|
1
|
+
{"version":3,"file":"InlinePrompt.mjs","sources":["../../../src/prompt/InlinePrompt/InlinePrompt.tsx"],"sourcesContent":["import { Sentiment } from '../../common';\nimport { BackslashCircle, GiftBox } from '@transferwise/icons';\nimport ProcessIndicator from '../../processIndicator';\nimport StatusIcon from '../../statusIcon';\nimport { clsx } from 'clsx';\nimport Body from '../../body';\nimport SentimentSurface from '../../sentimentSurface';\n\nexport type InlinePromptProps = {\n /**\n * The sentiment determines the colour scheme\n */\n sentiment?:\n | `${Sentiment.POSITIVE | Sentiment.NEGATIVE | Sentiment.NEUTRAL | Sentiment.WARNING}`\n | 'proposition';\n /**\n * Replaces the icon with a spinner while waiting for the short-lived action to finish.\n * @default false\n */\n loading?: boolean;\n /**\n * While prompts cannot be fully (visually and functionally) disabled, this prop should be enabled\n * they are associated with actually disabled component (e.g. a disabled list item or input).\n * @default false\n */\n muted?: boolean;\n /**\n * Icon override for `proposition` and `positive` sentiments. Unsupported for remaining ones.\n */\n media?: React.ReactNode;\n /**\n * Override for the sentiment's-derived, default, accessible name announced by the screen readers.\n * To be used primarily for `proposition` sentiment.\n */\n mediaLabel?: string;\n id?: string;\n className?: string;\n 'data-testid'?: string;\n children: React.ReactNode;\n};\n\n/**\n * Inline prompts appear alongside a specific component on the screen. They help the user stay\n * informed, fix something, or get more out of what they're doing. <br />\n *\n * **NB:** It should be used in favour of `InlineAlert` which will be soon deprecated.\n */\nexport const InlinePrompt = ({\n sentiment = Sentiment.POSITIVE,\n muted = false,\n loading = false,\n className,\n children,\n media = null,\n mediaLabel,\n 'data-testid': dataTestId,\n ...rest\n}: InlinePromptProps) => {\n const surfaceSentiment = sentiment === Sentiment.POSITIVE ? 'success' : sentiment;\n\n const renderMedia = () => {\n if (muted) {\n return <BackslashCircle size={16} data-testid=\"InlinePrompt_Muted\" title={mediaLabel} />;\n }\n if (loading) {\n return (\n <ProcessIndicator\n data-testid=\"InlinePrompt_ProcessIndicator\"\n size=\"xxs\"\n className=\"wds-inline-prompt-process-indicator\"\n />\n );\n }\n\n if (sentiment === 'positive' && media) {\n return media;\n }\n\n if (sentiment === 'proposition') {\n return media || <GiftBox title={mediaLabel} />;\n }\n\n return <StatusIcon size={16} sentiment={sentiment} iconLabel={mediaLabel} />;\n };\n\n return (\n <SentimentSurface\n sentiment={surfaceSentiment}\n data-testid={dataTestId}\n className={clsx(\n 'wds-inline-prompt',\n `wds-inline-prompt--${sentiment}`,\n {\n 'wds-inline-prompt--muted': muted,\n 'wds-inline-prompt--loading': loading,\n },\n className,\n )}\n {...rest}\n >\n <div className=\"wds-inline-prompt__media-wrapper\">{renderMedia()}</div>\n <Body>{children}</Body>\n </SentimentSurface>\n );\n};\n"],"names":["InlinePrompt","sentiment","Sentiment","POSITIVE","muted","loading","className","children","media","mediaLabel","dataTestId","rest","surfaceSentiment","renderMedia","_jsx","BackslashCircle","size","title","ProcessIndicator","GiftBox","StatusIcon","iconLabel","_jsxs","SentimentSurface","clsx","Body"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+CO,MAAMA,YAAY,GAAGA,CAAC;EAC3BC,SAAS,GAAGC,SAAS,CAACC,QAAQ;AAC9BC,EAAAA,KAAK,GAAG,KAAK;AACbC,EAAAA,OAAO,GAAG,KAAK;EACfC,SAAS;EACTC,QAAQ;AACRC,EAAAA,KAAK,GAAG,IAAI;EACZC,UAAU;AACV,EAAA,aAAa,EAAEC,UAAU;EACzB,GAAGC;AAAI,CACW,KAAI;EACtB,MAAMC,gBAAgB,GAAGX,SAAS,KAAKC,SAAS,CAACC,QAAQ,GAAG,SAAS,GAAGF,SAAS;EAEjF,MAAMY,WAAW,GAAGA,MAAK;AACvB,IAAA,IAAIT,KAAK,EAAE;MACT,oBAAOU,GAAA,CAACC,eAAe,EAAA;AAACC,QAAAA,IAAI,EAAE,EAAG;AAAC,QAAA,aAAA,EAAY,oBAAoB;AAACC,QAAAA,KAAK,EAAER;AAAW,QAAG;AAC1F,IAAA;AACA,IAAA,IAAIJ,OAAO,EAAE;MACX,oBACES,GAAA,CAACI,gBAAgB,EAAA;AACf,QAAA,aAAA,EAAY,+BAA+B;AAC3CF,QAAAA,IAAI,EAAC,KAAK;AACVV,QAAAA,SAAS,EAAC;AAAqC,OAAA,CAC/C;AAEN,IAAA;AAEA,IAAA,IAAIL,SAAS,KAAK,UAAU,IAAIO,KAAK,EAAE;AACrC,MAAA,OAAOA,KAAK;AACd,IAAA;IAEA,IAAIP,SAAS,KAAK,aAAa,EAAE;AAC/B,MAAA,OAAOO,KAAK,iBAAIM,GAAA,CAACK,OAAO,EAAA;AAACF,QAAAA,KAAK,EAAER;AAAW,OAAA,CAAG;AAChD,IAAA;IAEA,oBAAOK,GAAA,CAACM,UAAU,EAAA;AAACJ,MAAAA,IAAI,EAAE,EAAG;AAACf,MAAAA,SAAS,EAAEA,SAAU;AAACoB,MAAAA,SAAS,EAAEZ;AAAW,KAAA,CAAG;EAC9E,CAAC;EAED,oBACEa,IAAA,CAACC,gBAAgB,EAAA;AACftB,IAAAA,SAAS,EAAEW,gBAAiB;AAC5B,IAAA,aAAA,EAAaF,UAAW;IACxBJ,SAAS,EAAEkB,IAAI,CACb,mBAAmB,EACnB,CAAA,mBAAA,EAAsBvB,SAAS,EAAE,EACjC;AACE,MAAA,0BAA0B,EAAEG,KAAK;AACjC,MAAA,4BAA4B,EAAEC;KAC/B,EACDC,SAAS,CACT;AAAA,IAAA,GACEK,IAAI;AAAAJ,IAAAA,QAAA,gBAERO,GAAA,CAAA,KAAA,EAAA;AAAKR,MAAAA,SAAS,EAAC,kCAAkC;MAAAC,QAAA,EAAEM,WAAW;AAAE,KAAM,CACtE,eAAAC,GAAA,CAACW,IAAI,EAAA;AAAAlB,MAAAA,QAAA,EAAEA;AAAQ,KAAO,CACxB;AAAA,GAAkB,CAAC;AAEvB;;;;"}
|
|
@@ -112,7 +112,7 @@ export declare const ListItem: {
|
|
|
112
112
|
displayName: string;
|
|
113
113
|
};
|
|
114
114
|
Prompt: {
|
|
115
|
-
({ sentiment,
|
|
115
|
+
({ sentiment, mediaLabel, children, }: import("./Prompt").ListItemPromptProps): import("react").JSX.Element;
|
|
116
116
|
displayName: string;
|
|
117
117
|
};
|
|
118
118
|
};
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { type InlinePromptProps } from '../../prompt';
|
|
2
|
-
export type ListItemPromptProps = Pick<InlinePromptProps, 'children' | 'sentiment' | '
|
|
2
|
+
export type ListItemPromptProps = Pick<InlinePromptProps, 'children' | 'sentiment' | 'mediaLabel'>;
|
|
3
3
|
/**
|
|
4
4
|
* This component allows for rendering an Inline Prompt. <br />
|
|
5
5
|
* In the future it will be a thin wrapper around a standalone component.<br />
|
|
@@ -7,7 +7,7 @@ export type ListItemPromptProps = Pick<InlinePromptProps, 'children' | 'sentimen
|
|
|
7
7
|
* Please refer to the [Design documentation](https://wise.design/components/list-item#prompt) for details.
|
|
8
8
|
*/
|
|
9
9
|
export declare const Prompt: {
|
|
10
|
-
({ sentiment,
|
|
10
|
+
({ sentiment, mediaLabel, children, }: ListItemPromptProps): import("react").JSX.Element;
|
|
11
11
|
displayName: string;
|
|
12
12
|
};
|
|
13
13
|
export default Prompt;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ListItemPrompt.d.ts","sourceRoot":"","sources":["../../../../src/listItem/Prompt/ListItemPrompt.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"ListItemPrompt.d.ts","sourceRoot":"","sources":["../../../../src/listItem/Prompt/ListItemPrompt.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAgB,KAAK,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAEpE,MAAM,MAAM,mBAAmB,GAAG,IAAI,CAAC,iBAAiB,EAAE,UAAU,GAAG,WAAW,GAAG,YAAY,CAAC,CAAC;AAEnG;;;;;GAKG;AACH,eAAO,MAAM,MAAM;2CAIhB,mBAAmB;;CAerB,CAAC;AAGF,eAAe,MAAM,CAAC"}
|
|
@@ -23,7 +23,7 @@ export type InlinePromptProps = {
|
|
|
23
23
|
* Override for the sentiment's-derived, default, accessible name announced by the screen readers.
|
|
24
24
|
* To be used primarily for `proposition` sentiment.
|
|
25
25
|
*/
|
|
26
|
-
|
|
26
|
+
mediaLabel?: string;
|
|
27
27
|
id?: string;
|
|
28
28
|
className?: string;
|
|
29
29
|
'data-testid'?: string;
|
|
@@ -35,5 +35,5 @@ export type InlinePromptProps = {
|
|
|
35
35
|
*
|
|
36
36
|
* **NB:** It should be used in favour of `InlineAlert` which will be soon deprecated.
|
|
37
37
|
*/
|
|
38
|
-
export declare const InlinePrompt: ({ sentiment, muted, loading, className, children, media,
|
|
38
|
+
export declare const InlinePrompt: ({ sentiment, muted, loading, className, children, media, mediaLabel, "data-testid": dataTestId, ...rest }: InlinePromptProps) => import("react").JSX.Element;
|
|
39
39
|
//# sourceMappingURL=InlinePrompt.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InlinePrompt.d.ts","sourceRoot":"","sources":["../../../../src/prompt/InlinePrompt/InlinePrompt.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAQzC,MAAM,MAAM,iBAAiB,GAAG;IAC9B;;OAEG;IACH,SAAS,CAAC,EACN,GAAG,SAAS,CAAC,QAAQ,GAAG,SAAS,CAAC,QAAQ,GAAG,SAAS,CAAC,OAAO,GAAG,SAAS,CAAC,OAAO,EAAE,GACpF,aAAa,CAAC;IAClB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;OAIG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB;;;OAGG;IACH,
|
|
1
|
+
{"version":3,"file":"InlinePrompt.d.ts","sourceRoot":"","sources":["../../../../src/prompt/InlinePrompt/InlinePrompt.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAQzC,MAAM,MAAM,iBAAiB,GAAG;IAC9B;;OAEG;IACH,SAAS,CAAC,EACN,GAAG,SAAS,CAAC,QAAQ,GAAG,SAAS,CAAC,QAAQ,GAAG,SAAS,CAAC,OAAO,GAAG,SAAS,CAAC,OAAO,EAAE,GACpF,aAAa,CAAC;IAClB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;OAIG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,YAAY,GAAI,2GAU1B,iBAAiB,gCA+CnB,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@transferwise/components",
|
|
3
|
-
"version": "46.119.
|
|
3
|
+
"version": "46.119.5",
|
|
4
4
|
"description": "Neptune React components",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"repository": {
|
|
@@ -86,8 +86,8 @@
|
|
|
86
86
|
"storybook-addon-test-codegen": "^3.0.1",
|
|
87
87
|
"@transferwise/less-config": "3.1.2",
|
|
88
88
|
"@transferwise/neptune-css": "14.26.1",
|
|
89
|
-
"@wise/
|
|
90
|
-
"@wise/
|
|
89
|
+
"@wise/wds-configs": "0.0.0",
|
|
90
|
+
"@wise/components-theming": "1.10.0"
|
|
91
91
|
},
|
|
92
92
|
"peerDependencies": {
|
|
93
93
|
"@transferwise/icons": "^3 || ^4",
|
|
@@ -71,16 +71,16 @@ describe('ListItem.Prompt', () => {
|
|
|
71
71
|
});
|
|
72
72
|
|
|
73
73
|
[
|
|
74
|
-
{ sentiment: Sentiment.NEGATIVE as const,
|
|
75
|
-
{ sentiment: Sentiment.WARNING as const,
|
|
76
|
-
{ sentiment: Sentiment.NEUTRAL as const,
|
|
77
|
-
{ sentiment: Sentiment.POSITIVE as const,
|
|
78
|
-
{ sentiment: 'proposition' as const,
|
|
79
|
-
].forEach(({ sentiment,
|
|
74
|
+
{ sentiment: Sentiment.NEGATIVE as const, mediaLabel: 'Error:' },
|
|
75
|
+
{ sentiment: Sentiment.WARNING as const, mediaLabel: 'Warning:' },
|
|
76
|
+
{ sentiment: Sentiment.NEUTRAL as const, mediaLabel: 'Information:' },
|
|
77
|
+
{ sentiment: Sentiment.POSITIVE as const, mediaLabel: 'Success:' },
|
|
78
|
+
{ sentiment: 'proposition' as const, mediaLabel: '' },
|
|
79
|
+
].forEach(({ sentiment, mediaLabel }) => {
|
|
80
80
|
describe(sentiment, () => {
|
|
81
81
|
const customLabel = 'Custom icon label';
|
|
82
82
|
|
|
83
|
-
if (!
|
|
83
|
+
if (!mediaLabel) {
|
|
84
84
|
it('should not have accessible name for the icon', () => {
|
|
85
85
|
const { container } = render(
|
|
86
86
|
<ListItem
|
|
@@ -98,7 +98,7 @@ describe('ListItem.Prompt', () => {
|
|
|
98
98
|
prompt={<ListItem.Prompt sentiment={sentiment}>Message</ListItem.Prompt>}
|
|
99
99
|
/>,
|
|
100
100
|
);
|
|
101
|
-
expect(screen.getByLabelText(
|
|
101
|
+
expect(screen.getByLabelText(mediaLabel)).toBeInTheDocument();
|
|
102
102
|
});
|
|
103
103
|
}
|
|
104
104
|
|
|
@@ -107,7 +107,7 @@ describe('ListItem.Prompt', () => {
|
|
|
107
107
|
<ListItem
|
|
108
108
|
title="Test Title"
|
|
109
109
|
prompt={
|
|
110
|
-
<ListItem.Prompt sentiment={sentiment}
|
|
110
|
+
<ListItem.Prompt sentiment={sentiment} mediaLabel={customLabel}>
|
|
111
111
|
Message
|
|
112
112
|
</ListItem.Prompt>
|
|
113
113
|
}
|
|
@@ -1,10 +1,9 @@
|
|
|
1
1
|
import { useContext } from 'react';
|
|
2
|
-
import { clsx } from 'clsx';
|
|
3
2
|
import { Sentiment } from '../../common';
|
|
4
3
|
import { ListItemContext, type ListItemContextData } from '../ListItemContext';
|
|
5
4
|
import { InlinePrompt, type InlinePromptProps } from '../../prompt';
|
|
6
5
|
|
|
7
|
-
export type ListItemPromptProps = Pick<InlinePromptProps, 'children' | 'sentiment' | '
|
|
6
|
+
export type ListItemPromptProps = Pick<InlinePromptProps, 'children' | 'sentiment' | 'mediaLabel'>;
|
|
8
7
|
|
|
9
8
|
/**
|
|
10
9
|
* This component allows for rendering an Inline Prompt. <br />
|
|
@@ -14,7 +13,7 @@ export type ListItemPromptProps = Pick<InlinePromptProps, 'children' | 'sentimen
|
|
|
14
13
|
*/
|
|
15
14
|
export const Prompt = ({
|
|
16
15
|
sentiment = Sentiment.NEUTRAL,
|
|
17
|
-
|
|
16
|
+
mediaLabel,
|
|
18
17
|
children,
|
|
19
18
|
}: ListItemPromptProps) => {
|
|
20
19
|
const { ids, props } = useContext<ListItemContextData>(ListItemContext);
|
|
@@ -24,7 +23,7 @@ export const Prompt = ({
|
|
|
24
23
|
<InlinePrompt
|
|
25
24
|
id={ids.prompt}
|
|
26
25
|
sentiment={sentiment}
|
|
27
|
-
|
|
26
|
+
mediaLabel={mediaLabel}
|
|
28
27
|
muted={isLongLivedMuted}
|
|
29
28
|
className="wds-list-item-prompt"
|
|
30
29
|
>
|
|
@@ -91,8 +91,8 @@ describe('InlinePrompt', () => {
|
|
|
91
91
|
}
|
|
92
92
|
});
|
|
93
93
|
|
|
94
|
-
describe('
|
|
95
|
-
const
|
|
94
|
+
describe('mediaLabel', () => {
|
|
95
|
+
const mediaLabel = 'Custom icon label';
|
|
96
96
|
|
|
97
97
|
if (!statusIconLabel) {
|
|
98
98
|
it('should not have accessible name for the icon', () => {
|
|
@@ -107,15 +107,15 @@ describe('InlinePrompt', () => {
|
|
|
107
107
|
}
|
|
108
108
|
|
|
109
109
|
it('should allow for customisation of aria label', () => {
|
|
110
|
-
render(<InlinePrompt {...defaultProps} sentiment={sentiment}
|
|
111
|
-
expect(screen.getByLabelText(
|
|
110
|
+
render(<InlinePrompt {...defaultProps} sentiment={sentiment} mediaLabel={mediaLabel} />);
|
|
111
|
+
expect(screen.getByLabelText(mediaLabel)).toBeInTheDocument();
|
|
112
112
|
});
|
|
113
113
|
|
|
114
114
|
it('should retain custom label while muted', () => {
|
|
115
115
|
render(
|
|
116
|
-
<InlinePrompt {...defaultProps} sentiment={sentiment}
|
|
116
|
+
<InlinePrompt {...defaultProps} sentiment={sentiment} mediaLabel={mediaLabel} muted />,
|
|
117
117
|
);
|
|
118
|
-
expect(screen.getByLabelText(
|
|
118
|
+
expect(screen.getByLabelText(mediaLabel)).toBeInTheDocument();
|
|
119
119
|
});
|
|
120
120
|
});
|
|
121
121
|
});
|
|
@@ -222,7 +222,7 @@ export const Muted: StoryObj<PreviewStoryArgs> = {
|
|
|
222
222
|
* `StatusIcons`, the `positive` and `proposition` ones allow for Icon overrides to bring it
|
|
223
223
|
* closer to the prompt's content. <br /><br />
|
|
224
224
|
* It's also possible to override the default icon's accessible name announced by screen readers
|
|
225
|
-
* via `
|
|
225
|
+
* via `mediaLabel` prop, which is especially useful for the `proposition` sentiment.
|
|
226
226
|
*/
|
|
227
227
|
export const IconOverrides: StoryObj<PreviewStoryArgs> = {
|
|
228
228
|
render: (args: PreviewStoryArgs) => {
|
|
@@ -231,7 +231,7 @@ export const IconOverrides: StoryObj<PreviewStoryArgs> = {
|
|
|
231
231
|
<InlinePrompt {...args} media={<Travel />} sentiment="positive">
|
|
232
232
|
Your travel account is set up and ready to use.
|
|
233
233
|
</InlinePrompt>
|
|
234
|
-
<InlinePrompt {...args} media={<Taxi />} sentiment="proposition"
|
|
234
|
+
<InlinePrompt {...args} media={<Taxi />} sentiment="proposition" mediaLabel="Taxi addon: ">
|
|
235
235
|
Connect Wise with your taxi app to get exclusive discounts.
|
|
236
236
|
</InlinePrompt>
|
|
237
237
|
<InlinePrompt {...args} media={<Taxi />} sentiment="negative">
|
|
@@ -32,7 +32,7 @@ export type InlinePromptProps = {
|
|
|
32
32
|
* Override for the sentiment's-derived, default, accessible name announced by the screen readers.
|
|
33
33
|
* To be used primarily for `proposition` sentiment.
|
|
34
34
|
*/
|
|
35
|
-
|
|
35
|
+
mediaLabel?: string;
|
|
36
36
|
id?: string;
|
|
37
37
|
className?: string;
|
|
38
38
|
'data-testid'?: string;
|
|
@@ -52,7 +52,7 @@ export const InlinePrompt = ({
|
|
|
52
52
|
className,
|
|
53
53
|
children,
|
|
54
54
|
media = null,
|
|
55
|
-
|
|
55
|
+
mediaLabel,
|
|
56
56
|
'data-testid': dataTestId,
|
|
57
57
|
...rest
|
|
58
58
|
}: InlinePromptProps) => {
|
|
@@ -60,7 +60,7 @@ export const InlinePrompt = ({
|
|
|
60
60
|
|
|
61
61
|
const renderMedia = () => {
|
|
62
62
|
if (muted) {
|
|
63
|
-
return <BackslashCircle size={16} data-testid="InlinePrompt_Muted" title={
|
|
63
|
+
return <BackslashCircle size={16} data-testid="InlinePrompt_Muted" title={mediaLabel} />;
|
|
64
64
|
}
|
|
65
65
|
if (loading) {
|
|
66
66
|
return (
|
|
@@ -77,10 +77,10 @@ export const InlinePrompt = ({
|
|
|
77
77
|
}
|
|
78
78
|
|
|
79
79
|
if (sentiment === 'proposition') {
|
|
80
|
-
return media || <GiftBox title={
|
|
80
|
+
return media || <GiftBox title={mediaLabel} />;
|
|
81
81
|
}
|
|
82
82
|
|
|
83
|
-
return <StatusIcon size={16} sentiment={sentiment} iconLabel={
|
|
83
|
+
return <StatusIcon size={16} sentiment={sentiment} iconLabel={mediaLabel} />;
|
|
84
84
|
};
|
|
85
85
|
|
|
86
86
|
return (
|