@transferwise/components 0.0.0-experimental-edd6df1 → 0.0.0-experimental-ad1a560
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/main.css +6 -0
- package/build/prompt/InlinePrompt/InlinePrompt.js +2 -1
- package/build/prompt/InlinePrompt/InlinePrompt.js.map +1 -1
- package/build/prompt/InlinePrompt/InlinePrompt.mjs +2 -1
- package/build/prompt/InlinePrompt/InlinePrompt.mjs.map +1 -1
- package/build/styles/main.css +6 -0
- package/build/styles/prompt/InlinePrompt/InlinePrompt.css +6 -0
- package/build/types/prompt/InlinePrompt/InlinePrompt.d.ts.map +1 -1
- package/package.json +3 -3
- package/src/main.css +6 -0
- package/src/prompt/InlinePrompt/InlinePrompt.css +6 -0
- package/src/prompt/InlinePrompt/InlinePrompt.less +5 -0
- package/src/prompt/InlinePrompt/InlinePrompt.tsx +7 -1
package/build/main.css
CHANGED
|
@@ -925,6 +925,12 @@
|
|
|
925
925
|
.wds-inline-prompt__media-wrapper .tw-icon-confetti {
|
|
926
926
|
color: var(--color-sentiment-content-primary);
|
|
927
927
|
}
|
|
928
|
+
.wds-inline-prompt .wds-inline-prompt-process-indicator {
|
|
929
|
+
width: 16px;
|
|
930
|
+
width: var(--size-16);
|
|
931
|
+
height: 16px;
|
|
932
|
+
height: var(--size-16);
|
|
933
|
+
}
|
|
928
934
|
.np-dot {
|
|
929
935
|
--np-dot-size: 14px;
|
|
930
936
|
position: relative;
|
|
@@ -57,7 +57,8 @@ const InlinePrompt = ({
|
|
|
57
57
|
if (loading) {
|
|
58
58
|
return /*#__PURE__*/jsxRuntime.jsx(ProcessIndicator.default, {
|
|
59
59
|
"data-testid": "InlinePrompt_ProcessIndicator",
|
|
60
|
-
size: "xxs"
|
|
60
|
+
size: "xxs",
|
|
61
|
+
className: "wds-inline-prompt-process-indicator"
|
|
61
62
|
});
|
|
62
63
|
}
|
|
63
64
|
return /*#__PURE__*/jsxRuntime.jsx(StatusIcon.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 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.\n */\nexport const InlinePrompt = ({\n sentiment = Sentiment.POSITIVE,\n muted = false,\n loading = false,\n className,\n children,\n media = null,\n 'data-testid': dataTestId,\n ...rest\n}: InlinePromptProps) => {\n const surfaceSentiment = sentiment === Sentiment.POSITIVE ? 'success' : sentiment;\n\n const renderMedia = () => {\n if (media && ['proposition', 'positive'].includes(sentiment)) {\n return media;\n }\n if (sentiment === 'proposition') {\n return <GiftBox />;\n }\n if (muted) {\n return <BackslashCircle size={16} data-testid=\"InlinePrompt_Muted\" />;\n }\n if (loading) {\n return <ProcessIndicator
|
|
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 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.\n */\nexport const InlinePrompt = ({\n sentiment = Sentiment.POSITIVE,\n muted = false,\n loading = false,\n className,\n children,\n media = null,\n 'data-testid': dataTestId,\n ...rest\n}: InlinePromptProps) => {\n const surfaceSentiment = sentiment === Sentiment.POSITIVE ? 'success' : sentiment;\n\n const renderMedia = () => {\n if (media && ['proposition', 'positive'].includes(sentiment)) {\n return media;\n }\n if (sentiment === 'proposition') {\n return <GiftBox />;\n }\n if (muted) {\n return <BackslashCircle size={16} data-testid=\"InlinePrompt_Muted\" />;\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 return <StatusIcon size={16} sentiment={sentiment} />;\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","dataTestId","rest","surfaceSentiment","renderMedia","includes","_jsx","GiftBox","BackslashCircle","size","ProcessIndicator","StatusIcon","_jsxs","SentimentSurface","clsx","Body"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwCO,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;AACZ,EAAA,aAAa,EAAEC,UAAU;EACzB,GAAGC;AAAI,CACW,KAAI;EACtB,MAAMC,gBAAgB,GAAGV,WAAS,KAAKC,mBAAS,CAACC,QAAQ,GAAG,SAAS,GAAGF,WAAS;EAEjF,MAAMW,WAAW,GAAGA,MAAK;AACvB,IAAA,IAAIJ,KAAK,IAAI,CAAC,aAAa,EAAE,UAAU,CAAC,CAACK,QAAQ,CAACZ,WAAS,CAAC,EAAE;AAC5D,MAAA,OAAOO,KAAK;AACd,IAAA;IACA,IAAIP,WAAS,KAAK,aAAa,EAAE;AAC/B,MAAA,oBAAOa,cAAA,CAACC,aAAO,EAAA,GAAG;AACpB,IAAA;AACA,IAAA,IAAIX,KAAK,EAAE;MACT,oBAAOU,cAAA,CAACE,qBAAe,EAAA;AAACC,QAAAA,IAAI,EAAE,EAAG;QAAC,aAAA,EAAY;AAAoB,QAAG;AACvE,IAAA;AACA,IAAA,IAAIZ,OAAO,EAAE;MACX,oBACES,cAAA,CAACI,wBAAgB,EAAA;AACf,QAAA,aAAA,EAAY,+BAA+B;AAC3CD,QAAAA,IAAI,EAAC,KAAK;AACVX,QAAAA,SAAS,EAAC;AAAqC,OAAA,CAC/C;AAEN,IAAA;IACA,oBAAOQ,cAAA,CAACK,kBAAU,EAAA;AAACF,MAAAA,IAAI,EAAE,EAAG;AAAChB,MAAAA,SAAS,EAAEA;AAAU,MAAG;EACvD,CAAC;EAED,oBACEmB,eAAA,CAACC,wBAAgB,EAAA;AACfpB,IAAAA,SAAS,EAAEU,gBAAiB;AAC5B,IAAA,aAAA,EAAaF,UAAW;IACxBH,SAAS,EAAEgB,SAAI,CACb,mBAAmB,EACnB,CAAA,mBAAA,EAAsBrB,WAAS,EAAE,EACjC;AACE,MAAA,0BAA0B,EAAEG,KAAK;AACjC,MAAA,4BAA4B,EAAEC;KAC/B,EACDC,SAAS,CACT;AAAA,IAAA,GACEI,IAAI;AAAAH,IAAAA,QAAA,gBAERO,cAAA,CAAA,KAAA,EAAA;AAAKR,MAAAA,SAAS,EAAC,kCAAkC;MAAAC,QAAA,EAAEK,WAAW;AAAE,KAAM,CACtE,eAAAE,cAAA,CAACS,YAAI,EAAA;AAAAhB,MAAAA,QAAA,EAAEA;AAAQ,KAAO,CACxB;AAAA,GAAkB,CAAC;AAEvB;;;;"}
|
|
@@ -55,7 +55,8 @@ const InlinePrompt = ({
|
|
|
55
55
|
if (loading) {
|
|
56
56
|
return /*#__PURE__*/jsx(ProcessIndicator, {
|
|
57
57
|
"data-testid": "InlinePrompt_ProcessIndicator",
|
|
58
|
-
size: "xxs"
|
|
58
|
+
size: "xxs",
|
|
59
|
+
className: "wds-inline-prompt-process-indicator"
|
|
59
60
|
});
|
|
60
61
|
}
|
|
61
62
|
return /*#__PURE__*/jsx(StatusIcon, {
|
|
@@ -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 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.\n */\nexport const InlinePrompt = ({\n sentiment = Sentiment.POSITIVE,\n muted = false,\n loading = false,\n className,\n children,\n media = null,\n 'data-testid': dataTestId,\n ...rest\n}: InlinePromptProps) => {\n const surfaceSentiment = sentiment === Sentiment.POSITIVE ? 'success' : sentiment;\n\n const renderMedia = () => {\n if (media && ['proposition', 'positive'].includes(sentiment)) {\n return media;\n }\n if (sentiment === 'proposition') {\n return <GiftBox />;\n }\n if (muted) {\n return <BackslashCircle size={16} data-testid=\"InlinePrompt_Muted\" />;\n }\n if (loading) {\n return <ProcessIndicator
|
|
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 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.\n */\nexport const InlinePrompt = ({\n sentiment = Sentiment.POSITIVE,\n muted = false,\n loading = false,\n className,\n children,\n media = null,\n 'data-testid': dataTestId,\n ...rest\n}: InlinePromptProps) => {\n const surfaceSentiment = sentiment === Sentiment.POSITIVE ? 'success' : sentiment;\n\n const renderMedia = () => {\n if (media && ['proposition', 'positive'].includes(sentiment)) {\n return media;\n }\n if (sentiment === 'proposition') {\n return <GiftBox />;\n }\n if (muted) {\n return <BackslashCircle size={16} data-testid=\"InlinePrompt_Muted\" />;\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 return <StatusIcon size={16} sentiment={sentiment} />;\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","dataTestId","rest","surfaceSentiment","renderMedia","includes","_jsx","GiftBox","BackslashCircle","size","ProcessIndicator","StatusIcon","_jsxs","SentimentSurface","clsx","Body"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwCO,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;AACZ,EAAA,aAAa,EAAEC,UAAU;EACzB,GAAGC;AAAI,CACW,KAAI;EACtB,MAAMC,gBAAgB,GAAGV,SAAS,KAAKC,SAAS,CAACC,QAAQ,GAAG,SAAS,GAAGF,SAAS;EAEjF,MAAMW,WAAW,GAAGA,MAAK;AACvB,IAAA,IAAIJ,KAAK,IAAI,CAAC,aAAa,EAAE,UAAU,CAAC,CAACK,QAAQ,CAACZ,SAAS,CAAC,EAAE;AAC5D,MAAA,OAAOO,KAAK;AACd,IAAA;IACA,IAAIP,SAAS,KAAK,aAAa,EAAE;AAC/B,MAAA,oBAAOa,GAAA,CAACC,OAAO,EAAA,GAAG;AACpB,IAAA;AACA,IAAA,IAAIX,KAAK,EAAE;MACT,oBAAOU,GAAA,CAACE,eAAe,EAAA;AAACC,QAAAA,IAAI,EAAE,EAAG;QAAC,aAAA,EAAY;AAAoB,QAAG;AACvE,IAAA;AACA,IAAA,IAAIZ,OAAO,EAAE;MACX,oBACES,GAAA,CAACI,gBAAgB,EAAA;AACf,QAAA,aAAA,EAAY,+BAA+B;AAC3CD,QAAAA,IAAI,EAAC,KAAK;AACVX,QAAAA,SAAS,EAAC;AAAqC,OAAA,CAC/C;AAEN,IAAA;IACA,oBAAOQ,GAAA,CAACK,UAAU,EAAA;AAACF,MAAAA,IAAI,EAAE,EAAG;AAAChB,MAAAA,SAAS,EAAEA;AAAU,MAAG;EACvD,CAAC;EAED,oBACEmB,IAAA,CAACC,gBAAgB,EAAA;AACfpB,IAAAA,SAAS,EAAEU,gBAAiB;AAC5B,IAAA,aAAA,EAAaF,UAAW;IACxBH,SAAS,EAAEgB,IAAI,CACb,mBAAmB,EACnB,CAAA,mBAAA,EAAsBrB,SAAS,EAAE,EACjC;AACE,MAAA,0BAA0B,EAAEG,KAAK;AACjC,MAAA,4BAA4B,EAAEC;KAC/B,EACDC,SAAS,CACT;AAAA,IAAA,GACEI,IAAI;AAAAH,IAAAA,QAAA,gBAERO,GAAA,CAAA,KAAA,EAAA;AAAKR,MAAAA,SAAS,EAAC,kCAAkC;MAAAC,QAAA,EAAEK,WAAW;AAAE,KAAM,CACtE,eAAAE,GAAA,CAACS,IAAI,EAAA;AAAAhB,MAAAA,QAAA,EAAEA;AAAQ,KAAO,CACxB;AAAA,GAAkB,CAAC;AAEvB;;;;"}
|
package/build/styles/main.css
CHANGED
|
@@ -925,6 +925,12 @@
|
|
|
925
925
|
.wds-inline-prompt__media-wrapper .tw-icon-confetti {
|
|
926
926
|
color: var(--color-sentiment-content-primary);
|
|
927
927
|
}
|
|
928
|
+
.wds-inline-prompt .wds-inline-prompt-process-indicator {
|
|
929
|
+
width: 16px;
|
|
930
|
+
width: var(--size-16);
|
|
931
|
+
height: 16px;
|
|
932
|
+
height: var(--size-16);
|
|
933
|
+
}
|
|
928
934
|
.np-dot {
|
|
929
935
|
--np-dot-size: 14px;
|
|
930
936
|
position: relative;
|
|
@@ -63,3 +63,9 @@
|
|
|
63
63
|
.wds-inline-prompt__media-wrapper .tw-icon-confetti {
|
|
64
64
|
color: var(--color-sentiment-content-primary);
|
|
65
65
|
}
|
|
66
|
+
.wds-inline-prompt .wds-inline-prompt-process-indicator {
|
|
67
|
+
width: 16px;
|
|
68
|
+
width: var(--size-16);
|
|
69
|
+
height: 16px;
|
|
70
|
+
height: var(--size-16);
|
|
71
|
+
}
|
|
@@ -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,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;;;GAGG;AACH,eAAO,MAAM,YAAY,GAAI,+FAS1B,iBAAiB,
|
|
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,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;;;GAGG;AACH,eAAO,MAAM,YAAY,GAAI,+FAS1B,iBAAiB,gCA4CnB,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@transferwise/components",
|
|
3
|
-
"version": "0.0.0-experimental-
|
|
3
|
+
"version": "0.0.0-experimental-ad1a560",
|
|
4
4
|
"description": "Neptune React components",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"repository": {
|
|
@@ -84,13 +84,13 @@
|
|
|
84
84
|
"storybook-addon-tag-badges": "^2.0.2",
|
|
85
85
|
"storybook-addon-test-codegen": "^2.0.1",
|
|
86
86
|
"@transferwise/less-config": "3.1.2",
|
|
87
|
-
"@transferwise/neptune-css": "0.0.0-experimental-
|
|
87
|
+
"@transferwise/neptune-css": "0.0.0-experimental-ad1a560",
|
|
88
88
|
"@wise/components-theming": "1.9.1",
|
|
89
89
|
"@wise/wds-configs": "0.0.0"
|
|
90
90
|
},
|
|
91
91
|
"peerDependencies": {
|
|
92
92
|
"@transferwise/icons": "^3 || ^4",
|
|
93
|
-
"@transferwise/neptune-css": "0.0.0-experimental-
|
|
93
|
+
"@transferwise/neptune-css": "0.0.0-experimental-ad1a560",
|
|
94
94
|
"@wise/art": "^2.24.4",
|
|
95
95
|
"@wise/components-theming": "^1.6.2",
|
|
96
96
|
"react": ">=18",
|
package/src/main.css
CHANGED
|
@@ -925,6 +925,12 @@
|
|
|
925
925
|
.wds-inline-prompt__media-wrapper .tw-icon-confetti {
|
|
926
926
|
color: var(--color-sentiment-content-primary);
|
|
927
927
|
}
|
|
928
|
+
.wds-inline-prompt .wds-inline-prompt-process-indicator {
|
|
929
|
+
width: 16px;
|
|
930
|
+
width: var(--size-16);
|
|
931
|
+
height: 16px;
|
|
932
|
+
height: var(--size-16);
|
|
933
|
+
}
|
|
928
934
|
.np-dot {
|
|
929
935
|
--np-dot-size: 14px;
|
|
930
936
|
position: relative;
|
|
@@ -63,3 +63,9 @@
|
|
|
63
63
|
.wds-inline-prompt__media-wrapper .tw-icon-confetti {
|
|
64
64
|
color: var(--color-sentiment-content-primary);
|
|
65
65
|
}
|
|
66
|
+
.wds-inline-prompt .wds-inline-prompt-process-indicator {
|
|
67
|
+
width: 16px;
|
|
68
|
+
width: var(--size-16);
|
|
69
|
+
height: 16px;
|
|
70
|
+
height: var(--size-16);
|
|
71
|
+
}
|
|
@@ -61,7 +61,13 @@ export const InlinePrompt = ({
|
|
|
61
61
|
return <BackslashCircle size={16} data-testid="InlinePrompt_Muted" />;
|
|
62
62
|
}
|
|
63
63
|
if (loading) {
|
|
64
|
-
return
|
|
64
|
+
return (
|
|
65
|
+
<ProcessIndicator
|
|
66
|
+
data-testid="InlinePrompt_ProcessIndicator"
|
|
67
|
+
size="xxs"
|
|
68
|
+
className="wds-inline-prompt-process-indicator"
|
|
69
|
+
/>
|
|
70
|
+
);
|
|
65
71
|
}
|
|
66
72
|
return <StatusIcon size={16} sentiment={sentiment} />;
|
|
67
73
|
};
|