@transferwise/components 46.121.2 → 46.122.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/prompt/InlinePrompt/InlinePrompt.js +1 -4
- package/build/prompt/InlinePrompt/InlinePrompt.js.map +1 -1
- package/build/prompt/InlinePrompt/InlinePrompt.mjs +1 -4
- package/build/prompt/InlinePrompt/InlinePrompt.mjs.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 +1 -1
- package/src/prompt/InlinePrompt/InlinePrompt.spec.tsx +10 -18
- package/src/prompt/InlinePrompt/InlinePrompt.story.tsx +9 -6
- package/src/prompt/InlinePrompt/InlinePrompt.tsx +4 -7
|
@@ -58,15 +58,12 @@ const InlinePrompt = ({
|
|
|
58
58
|
className: "wds-inline-prompt-process-indicator"
|
|
59
59
|
});
|
|
60
60
|
}
|
|
61
|
-
if (sentiment$1 === 'positive' && media) {
|
|
62
|
-
return media;
|
|
63
|
-
}
|
|
64
61
|
if (sentiment$1 === 'proposition') {
|
|
65
62
|
return media || /*#__PURE__*/jsxRuntime.jsx(icons.GiftBox, {
|
|
66
63
|
title: mediaLabel
|
|
67
64
|
});
|
|
68
65
|
}
|
|
69
|
-
return /*#__PURE__*/jsxRuntime.jsx(StatusIcon.default, {
|
|
66
|
+
return media || /*#__PURE__*/jsxRuntime.jsx(StatusIcon.default, {
|
|
70
67
|
size: 16,
|
|
71
68
|
sentiment: sentiment$1,
|
|
72
69
|
iconLabel: mediaLabel
|
|
@@ -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
|
|
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 all sentiments. If the sentiment uses StatusIcon by default, it will be\n * replaced by a plain icon.\n */\n media?: React.ReactNode;\n /**\n * Override for the sentiment's-derived, default, accessible name announced by the screen readers.\n */\n mediaLabel?: string;\n /**\n * Defines the sizing strategy of the prompt component - either hugging the content or taking full width of the container.\n * @default auto\n */\n width?: 'auto' | 'full';\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 width = 'auto',\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\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 === 'proposition') {\n return media || <GiftBox title={mediaLabel} />;\n }\n\n return media || <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--full-width': width === 'full',\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","width","dataTestId","rest","surfaceSentiment","renderMedia","_jsx","BackslashCircle","size","title","ProcessIndicator","GiftBox","StatusIcon","iconLabel","_jsxs","SentimentSurface","clsx","Body"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoDO,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;AACVC,EAAAA,KAAK,GAAG,MAAM;AACd,EAAA,aAAa,EAAEC,UAAU;EACzB,GAAGC;AAAI,CACW,KAAI;EACtB,MAAMC,gBAAgB,GAAGZ,WAAS,KAAKC,mBAAS,CAACC,QAAQ,GAAG,SAAS,GAAGF,WAAS;EAEjF,MAAMa,WAAW,GAAGA,MAAK;AACvB,IAAA,IAAIV,KAAK,EAAE;MACT,oBAAOW,cAAA,CAACC,qBAAe,EAAA;AAACC,QAAAA,IAAI,EAAE,EAAG;AAAC,QAAA,aAAA,EAAY,oBAAoB;AAACC,QAAAA,KAAK,EAAET;AAAW,QAAG;AAC1F,IAAA;AAEA,IAAA,IAAIJ,OAAO,EAAE;MACX,oBACEU,cAAA,CAACI,wBAAgB,EAAA;AACf,QAAA,aAAA,EAAY,+BAA+B;AAC3CF,QAAAA,IAAI,EAAC,KAAK;AACVX,QAAAA,SAAS,EAAC;AAAqC,OAAA,CAC/C;AAEN,IAAA;IAEA,IAAIL,WAAS,KAAK,aAAa,EAAE;AAC/B,MAAA,OAAOO,KAAK,iBAAIO,cAAA,CAACK,aAAO,EAAA;AAACF,QAAAA,KAAK,EAAET;AAAW,OAAA,CAAG;AAChD,IAAA;AAEA,IAAA,OAAOD,KAAK,iBAAIO,cAAA,CAACM,kBAAU,EAAA;AAACJ,MAAAA,IAAI,EAAE,EAAG;AAAChB,MAAAA,SAAS,EAAEA,WAAU;AAACqB,MAAAA,SAAS,EAAEb;AAAW,KAAA,CAAG;EACvF,CAAC;EAED,oBACEc,eAAA,CAACC,wBAAgB,EAAA;AACfvB,IAAAA,SAAS,EAAEY,gBAAiB;AAC5B,IAAA,aAAA,EAAaF,UAAW;IACxBL,SAAS,EAAEmB,SAAI,CACb,mBAAmB,EACnB,CAAA,mBAAA,EAAsBxB,WAAS,EAAE,EACjC;MACE,+BAA+B,EAAES,KAAK,KAAK,MAAM;AACjD,MAAA,0BAA0B,EAAEN,KAAK;AACjC,MAAA,4BAA4B,EAAEC;KAC/B,EACDC,SAAS,CACT;AAAA,IAAA,GACEM,IAAI;AAAAL,IAAAA,QAAA,gBAERQ,cAAA,CAAA,KAAA,EAAA;AAAKT,MAAAA,SAAS,EAAC,kCAAkC;MAAAC,QAAA,EAAEO,WAAW;AAAE,KAAM,CACtE,eAAAC,cAAA,CAACW,YAAI,EAAA;AAAAnB,MAAAA,QAAA,EAAEA;AAAQ,KAAO,CACxB;AAAA,GAAkB,CAAC;AAEvB;;;;"}
|
|
@@ -56,15 +56,12 @@ const InlinePrompt = ({
|
|
|
56
56
|
className: "wds-inline-prompt-process-indicator"
|
|
57
57
|
});
|
|
58
58
|
}
|
|
59
|
-
if (sentiment === 'positive' && media) {
|
|
60
|
-
return media;
|
|
61
|
-
}
|
|
62
59
|
if (sentiment === 'proposition') {
|
|
63
60
|
return media || /*#__PURE__*/jsx(GiftBox, {
|
|
64
61
|
title: mediaLabel
|
|
65
62
|
});
|
|
66
63
|
}
|
|
67
|
-
return /*#__PURE__*/jsx(StatusIcon, {
|
|
64
|
+
return media || /*#__PURE__*/jsx(StatusIcon, {
|
|
68
65
|
size: 16,
|
|
69
66
|
sentiment: sentiment,
|
|
70
67
|
iconLabel: mediaLabel
|
|
@@ -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
|
|
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 all sentiments. If the sentiment uses StatusIcon by default, it will be\n * replaced by a plain icon.\n */\n media?: React.ReactNode;\n /**\n * Override for the sentiment's-derived, default, accessible name announced by the screen readers.\n */\n mediaLabel?: string;\n /**\n * Defines the sizing strategy of the prompt component - either hugging the content or taking full width of the container.\n * @default auto\n */\n width?: 'auto' | 'full';\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 width = 'auto',\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\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 === 'proposition') {\n return media || <GiftBox title={mediaLabel} />;\n }\n\n return media || <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--full-width': width === 'full',\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","width","dataTestId","rest","surfaceSentiment","renderMedia","_jsx","BackslashCircle","size","title","ProcessIndicator","GiftBox","StatusIcon","iconLabel","_jsxs","SentimentSurface","clsx","Body"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoDO,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;AACVC,EAAAA,KAAK,GAAG,MAAM;AACd,EAAA,aAAa,EAAEC,UAAU;EACzB,GAAGC;AAAI,CACW,KAAI;EACtB,MAAMC,gBAAgB,GAAGZ,SAAS,KAAKC,SAAS,CAACC,QAAQ,GAAG,SAAS,GAAGF,SAAS;EAEjF,MAAMa,WAAW,GAAGA,MAAK;AACvB,IAAA,IAAIV,KAAK,EAAE;MACT,oBAAOW,GAAA,CAACC,eAAe,EAAA;AAACC,QAAAA,IAAI,EAAE,EAAG;AAAC,QAAA,aAAA,EAAY,oBAAoB;AAACC,QAAAA,KAAK,EAAET;AAAW,QAAG;AAC1F,IAAA;AAEA,IAAA,IAAIJ,OAAO,EAAE;MACX,oBACEU,GAAA,CAACI,gBAAgB,EAAA;AACf,QAAA,aAAA,EAAY,+BAA+B;AAC3CF,QAAAA,IAAI,EAAC,KAAK;AACVX,QAAAA,SAAS,EAAC;AAAqC,OAAA,CAC/C;AAEN,IAAA;IAEA,IAAIL,SAAS,KAAK,aAAa,EAAE;AAC/B,MAAA,OAAOO,KAAK,iBAAIO,GAAA,CAACK,OAAO,EAAA;AAACF,QAAAA,KAAK,EAAET;AAAW,OAAA,CAAG;AAChD,IAAA;AAEA,IAAA,OAAOD,KAAK,iBAAIO,GAAA,CAACM,UAAU,EAAA;AAACJ,MAAAA,IAAI,EAAE,EAAG;AAAChB,MAAAA,SAAS,EAAEA,SAAU;AAACqB,MAAAA,SAAS,EAAEb;AAAW,KAAA,CAAG;EACvF,CAAC;EAED,oBACEc,IAAA,CAACC,gBAAgB,EAAA;AACfvB,IAAAA,SAAS,EAAEY,gBAAiB;AAC5B,IAAA,aAAA,EAAaF,UAAW;IACxBL,SAAS,EAAEmB,IAAI,CACb,mBAAmB,EACnB,CAAA,mBAAA,EAAsBxB,SAAS,EAAE,EACjC;MACE,+BAA+B,EAAES,KAAK,KAAK,MAAM;AACjD,MAAA,0BAA0B,EAAEN,KAAK;AACjC,MAAA,4BAA4B,EAAEC;KAC/B,EACDC,SAAS,CACT;AAAA,IAAA,GACEM,IAAI;AAAAL,IAAAA,QAAA,gBAERQ,GAAA,CAAA,KAAA,EAAA;AAAKT,MAAAA,SAAS,EAAC,kCAAkC;MAAAC,QAAA,EAAEO,WAAW;AAAE,KAAM,CACtE,eAAAC,GAAA,CAACW,IAAI,EAAA;AAAAnB,MAAAA,QAAA,EAAEA;AAAQ,KAAO,CACxB;AAAA,GAAkB,CAAC;AAEvB;;;;"}
|
|
@@ -16,12 +16,12 @@ export type InlinePromptProps = {
|
|
|
16
16
|
*/
|
|
17
17
|
muted?: boolean;
|
|
18
18
|
/**
|
|
19
|
-
* Icon override for
|
|
19
|
+
* Icon override for all sentiments. If the sentiment uses StatusIcon by default, it will be
|
|
20
|
+
* replaced by a plain icon.
|
|
20
21
|
*/
|
|
21
22
|
media?: React.ReactNode;
|
|
22
23
|
/**
|
|
23
24
|
* Override for the sentiment's-derived, default, accessible name announced by the screen readers.
|
|
24
|
-
* To be used primarily for `proposition` sentiment.
|
|
25
25
|
*/
|
|
26
26
|
mediaLabel?: string;
|
|
27
27
|
/**
|
|
@@ -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
|
|
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;;;OAGG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,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,kHAW1B,iBAAiB,gCA6CnB,CAAC"}
|
package/package.json
CHANGED
|
@@ -23,12 +23,12 @@ describe('InlinePrompt', () => {
|
|
|
23
23
|
});
|
|
24
24
|
|
|
25
25
|
[
|
|
26
|
-
{ sentiment: Sentiment.NEGATIVE as const,
|
|
27
|
-
{ sentiment: Sentiment.WARNING as const,
|
|
28
|
-
{ sentiment: Sentiment.NEUTRAL as const,
|
|
29
|
-
{ sentiment: Sentiment.POSITIVE as const,
|
|
30
|
-
{ sentiment: 'proposition' as const,
|
|
31
|
-
].forEach(({ sentiment, statusIconLabel
|
|
26
|
+
{ sentiment: Sentiment.NEGATIVE as const, statusIconLabel: 'Error:' },
|
|
27
|
+
{ sentiment: Sentiment.WARNING as const, statusIconLabel: 'Warning:' },
|
|
28
|
+
{ sentiment: Sentiment.NEUTRAL as const, statusIconLabel: 'Information:' },
|
|
29
|
+
{ sentiment: Sentiment.POSITIVE as const, statusIconLabel: 'Success:' },
|
|
30
|
+
{ sentiment: 'proposition' as const, statusIconLabel: '' },
|
|
31
|
+
].forEach(({ sentiment, statusIconLabel }) => {
|
|
32
32
|
describe(sentiment, () => {
|
|
33
33
|
it('should apply correct styles', () => {
|
|
34
34
|
render(<InlinePrompt {...defaultProps} sentiment={sentiment} />);
|
|
@@ -77,18 +77,10 @@ describe('InlinePrompt', () => {
|
|
|
77
77
|
});
|
|
78
78
|
|
|
79
79
|
describe('custom media', () => {
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
});
|
|
85
|
-
} else {
|
|
86
|
-
it('should ignore `media`', () => {
|
|
87
|
-
render(<InlinePrompt {...defaultProps} sentiment={sentiment} media={MEDIA} />);
|
|
88
|
-
expect(screen.getByLabelText(statusIconLabel)).toBeInTheDocument();
|
|
89
|
-
expect(screen.queryByTestId('custom-media')).not.toBeInTheDocument();
|
|
90
|
-
});
|
|
91
|
-
}
|
|
80
|
+
it('should respect `media`', () => {
|
|
81
|
+
render(<InlinePrompt {...defaultProps} sentiment={sentiment} media={MEDIA} />);
|
|
82
|
+
expect(screen.getByTestId('custom-media')).toBeInTheDocument();
|
|
83
|
+
});
|
|
92
84
|
});
|
|
93
85
|
|
|
94
86
|
describe('mediaLabel', () => {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import type { ReactElement } from 'react';
|
|
2
2
|
import type { Meta, StoryObj } from '@storybook/react-webpack5';
|
|
3
3
|
import { action } from 'storybook/actions';
|
|
4
|
-
import { Taxi, Travel } from '@transferwise/icons';
|
|
4
|
+
import { Clock, Id, Taxi, Travel } from '@transferwise/icons';
|
|
5
5
|
import { lorem5 } from '../../test-utils';
|
|
6
6
|
import Link from '../../link';
|
|
7
7
|
import { InlinePrompt, InlinePromptProps } from './InlinePrompt';
|
|
@@ -222,8 +222,8 @@ export const Muted: StoryObj<PreviewStoryArgs> = {
|
|
|
222
222
|
};
|
|
223
223
|
|
|
224
224
|
/**
|
|
225
|
-
* While main sentiments (`warning`, `negative`, `neutral`)
|
|
226
|
-
*
|
|
225
|
+
* While all main sentiments (`warning`, `negative`, `positive` and`neutral`) are associated with a
|
|
226
|
+
* default `StatusIcon`s, we also allow for Icon overrides to bring the prompt's visual language
|
|
227
227
|
* closer to the prompt's content. <br /><br />
|
|
228
228
|
* It's also possible to override the default icon's accessible name announced by screen readers
|
|
229
229
|
* via `mediaLabel` prop, which is especially useful for the `proposition` sentiment.
|
|
@@ -232,14 +232,17 @@ export const IconOverrides: StoryObj<PreviewStoryArgs> = {
|
|
|
232
232
|
render: (args: PreviewStoryArgs) => {
|
|
233
233
|
return (
|
|
234
234
|
<>
|
|
235
|
-
<InlinePrompt {...args} media={<Travel />} sentiment="positive">
|
|
235
|
+
<InlinePrompt {...args} media={<Travel />} sentiment="positive" mediaLabel="Success: ">
|
|
236
236
|
Your travel account is set up and ready to use.
|
|
237
237
|
</InlinePrompt>
|
|
238
238
|
<InlinePrompt {...args} media={<Taxi />} sentiment="proposition" mediaLabel="Taxi addon: ">
|
|
239
239
|
Connect Wise with your taxi app to get exclusive discounts.
|
|
240
240
|
</InlinePrompt>
|
|
241
|
-
<InlinePrompt {...args} media={<
|
|
242
|
-
|
|
241
|
+
<InlinePrompt {...args} media={<Clock />} sentiment="warning" mediaLabel="Processing: ">
|
|
242
|
+
The account verification is taking longer than usual.
|
|
243
|
+
</InlinePrompt>
|
|
244
|
+
<InlinePrompt {...args} media={<Id />} sentiment="negative" mediaLabel="Error: ">
|
|
245
|
+
The identity document you provided has expired.
|
|
243
246
|
</InlinePrompt>
|
|
244
247
|
</>
|
|
245
248
|
);
|
|
@@ -25,12 +25,12 @@ export type InlinePromptProps = {
|
|
|
25
25
|
*/
|
|
26
26
|
muted?: boolean;
|
|
27
27
|
/**
|
|
28
|
-
* Icon override for
|
|
28
|
+
* Icon override for all sentiments. If the sentiment uses StatusIcon by default, it will be
|
|
29
|
+
* replaced by a plain icon.
|
|
29
30
|
*/
|
|
30
31
|
media?: React.ReactNode;
|
|
31
32
|
/**
|
|
32
33
|
* Override for the sentiment's-derived, default, accessible name announced by the screen readers.
|
|
33
|
-
* To be used primarily for `proposition` sentiment.
|
|
34
34
|
*/
|
|
35
35
|
mediaLabel?: string;
|
|
36
36
|
/**
|
|
@@ -68,6 +68,7 @@ export const InlinePrompt = ({
|
|
|
68
68
|
if (muted) {
|
|
69
69
|
return <BackslashCircle size={16} data-testid="InlinePrompt_Muted" title={mediaLabel} />;
|
|
70
70
|
}
|
|
71
|
+
|
|
71
72
|
if (loading) {
|
|
72
73
|
return (
|
|
73
74
|
<ProcessIndicator
|
|
@@ -78,15 +79,11 @@ export const InlinePrompt = ({
|
|
|
78
79
|
);
|
|
79
80
|
}
|
|
80
81
|
|
|
81
|
-
if (sentiment === 'positive' && media) {
|
|
82
|
-
return media;
|
|
83
|
-
}
|
|
84
|
-
|
|
85
82
|
if (sentiment === 'proposition') {
|
|
86
83
|
return media || <GiftBox title={mediaLabel} />;
|
|
87
84
|
}
|
|
88
85
|
|
|
89
|
-
return <StatusIcon size={16} sentiment={sentiment} iconLabel={mediaLabel} />;
|
|
86
|
+
return media || <StatusIcon size={16} sentiment={sentiment} iconLabel={mediaLabel} />;
|
|
90
87
|
};
|
|
91
88
|
|
|
92
89
|
return (
|