@transferwise/components 0.0.0-experimental-b6b6dc1 → 0.0.0-experimental-a308934
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/expressiveMoneyInput/currencySelector/CurrencySelector.js +2 -3
- package/build/expressiveMoneyInput/currencySelector/CurrencySelector.js.map +1 -1
- package/build/expressiveMoneyInput/currencySelector/CurrencySelector.mjs +2 -3
- package/build/expressiveMoneyInput/currencySelector/CurrencySelector.mjs.map +1 -1
- package/build/field/Field.js +5 -4
- package/build/field/Field.js.map +1 -1
- package/build/field/Field.mjs +5 -4
- package/build/field/Field.mjs.map +1 -1
- package/build/i18n/en.json +2 -0
- package/build/i18n/en.json.js +2 -0
- package/build/i18n/en.json.js.map +1 -1
- package/build/i18n/en.json.mjs +2 -0
- package/build/i18n/en.json.mjs.map +1 -1
- 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/listItem/Prompt/ListItemPrompt.js +5 -4
- package/build/listItem/Prompt/ListItemPrompt.js.map +1 -1
- package/build/listItem/Prompt/ListItemPrompt.mjs +5 -4
- package/build/listItem/Prompt/ListItemPrompt.mjs.map +1 -1
- package/build/main.css +85 -29
- package/build/prompt/ActionPrompt/ActionPrompt.js +8 -40
- package/build/prompt/ActionPrompt/ActionPrompt.js.map +1 -1
- package/build/prompt/ActionPrompt/ActionPrompt.mjs +8 -40
- package/build/prompt/ActionPrompt/ActionPrompt.mjs.map +1 -1
- package/build/prompt/CriticalBanner/CriticalBanner.js +145 -0
- package/build/prompt/CriticalBanner/CriticalBanner.js.map +1 -0
- package/build/prompt/CriticalBanner/CriticalBanner.mjs +143 -0
- package/build/prompt/CriticalBanner/CriticalBanner.mjs.map +1 -0
- package/build/prompt/CriticalBanner/helpers.js +29 -0
- package/build/prompt/CriticalBanner/helpers.js.map +1 -0
- package/build/prompt/CriticalBanner/helpers.mjs +26 -0
- package/build/prompt/CriticalBanner/helpers.mjs.map +1 -0
- package/build/prompt/PrimitivePrompt/PrimitivePrompt.js +2 -0
- package/build/prompt/PrimitivePrompt/PrimitivePrompt.js.map +1 -1
- package/build/prompt/PrimitivePrompt/PrimitivePrompt.mjs +2 -0
- package/build/prompt/PrimitivePrompt/PrimitivePrompt.mjs.map +1 -1
- package/build/prompt/common/Expander/Expander.js +47 -0
- package/build/prompt/common/Expander/Expander.js.map +1 -0
- package/build/prompt/common/Expander/Expander.messages.js +17 -0
- package/build/prompt/common/Expander/Expander.messages.js.map +1 -0
- package/build/prompt/common/Expander/Expander.messages.mjs +13 -0
- package/build/prompt/common/Expander/Expander.messages.mjs.map +1 -0
- package/build/prompt/common/Expander/Expander.mjs +44 -0
- package/build/prompt/common/Expander/Expander.mjs.map +1 -0
- package/build/prompt/helpers/promptMedia.js +52 -0
- package/build/prompt/helpers/promptMedia.js.map +1 -0
- package/build/prompt/helpers/promptMedia.mjs +50 -0
- package/build/prompt/helpers/promptMedia.mjs.map +1 -0
- package/build/styles/main.css +85 -29
- package/build/styles/prompt/CriticalBanner/CriticalBanner.css +39 -0
- package/build/styles/prompt/common/Expander/Expander.css +8 -0
- package/build/typeahead/Typeahead.js +5 -4
- package/build/typeahead/Typeahead.js.map +1 -1
- package/build/typeahead/Typeahead.mjs +5 -4
- package/build/typeahead/Typeahead.mjs.map +1 -1
- package/build/types/expressiveMoneyInput/currencySelector/CurrencySelector.d.ts.map +1 -1
- package/build/types/index.d.ts +2 -2
- package/build/types/index.d.ts.map +1 -1
- package/build/types/prompt/ActionPrompt/ActionPrompt.d.ts +2 -11
- package/build/types/prompt/ActionPrompt/ActionPrompt.d.ts.map +1 -1
- package/build/types/prompt/CriticalBanner/CriticalBanner.d.ts +43 -0
- package/build/types/prompt/CriticalBanner/CriticalBanner.d.ts.map +1 -0
- package/build/types/prompt/CriticalBanner/helpers.d.ts +18 -0
- package/build/types/prompt/CriticalBanner/helpers.d.ts.map +1 -0
- package/build/types/prompt/CriticalBanner/index.d.ts +3 -0
- package/build/types/prompt/CriticalBanner/index.d.ts.map +1 -0
- package/build/types/prompt/PrimitivePrompt/PrimitivePrompt.d.ts +8 -3
- package/build/types/prompt/PrimitivePrompt/PrimitivePrompt.d.ts.map +1 -1
- package/build/types/prompt/common/Expander/Expander.d.ts +20 -0
- package/build/types/prompt/common/Expander/Expander.d.ts.map +1 -0
- package/build/types/prompt/common/Expander/Expander.messages.d.ts +14 -0
- package/build/types/prompt/common/Expander/Expander.messages.d.ts.map +1 -0
- package/build/types/prompt/helpers/promptMedia.d.ts +22 -0
- package/build/types/prompt/helpers/promptMedia.d.ts.map +1 -0
- package/build/types/prompt/index.d.ts +2 -0
- package/build/types/prompt/index.d.ts.map +1 -1
- package/build/types/test-utils/index.d.ts +4 -0
- package/build/types/test-utils/index.d.ts.map +1 -1
- package/package.json +4 -4
- package/src/expressiveMoneyInput/currencySelector/CurrencySelector.tsx +2 -3
- package/src/i18n/en.json +2 -0
- package/src/index.ts +2 -2
- package/src/main.css +85 -29
- package/src/main.less +3 -1
- package/src/prompt/ActionPrompt/ActionPrompt.tsx +9 -62
- package/src/prompt/CriticalBanner/CriticalBanner.accessibility.docs.mdx +131 -0
- package/src/prompt/CriticalBanner/CriticalBanner.css +39 -0
- package/src/prompt/CriticalBanner/CriticalBanner.less +45 -0
- package/src/prompt/CriticalBanner/CriticalBanner.story.tsx +476 -0
- package/src/prompt/CriticalBanner/CriticalBanner.test.story.tsx +67 -0
- package/src/prompt/CriticalBanner/CriticalBanner.tsx +188 -0
- package/src/prompt/CriticalBanner/helpers.ts +39 -0
- package/src/prompt/CriticalBanner/index.ts +2 -0
- package/src/prompt/PrimitivePrompt/PrimitivePrompt.tsx +9 -2
- package/src/prompt/common/Expander/Expander.css +8 -0
- package/src/prompt/common/Expander/Expander.less +9 -0
- package/src/prompt/common/Expander/Expander.messages.ts +14 -0
- package/src/prompt/common/Expander/Expander.test.tsx +167 -0
- package/src/prompt/common/Expander/Expander.tsx +83 -0
- package/src/prompt/helpers/promptMedia.tsx +79 -0
- package/src/prompt/index.ts +4 -0
- package/src/sentimentSurface/SentimentSurface.story.tsx +43 -17
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Helper to extract string from ReactNode for announcements.
|
|
3
|
+
* Complex ReactNodes (JSX elements) return empty string.
|
|
4
|
+
*/
|
|
5
|
+
const getStringValue = node => {
|
|
6
|
+
if (typeof node === 'string' || typeof node === 'number') {
|
|
7
|
+
return String(node);
|
|
8
|
+
}
|
|
9
|
+
return '';
|
|
10
|
+
};
|
|
11
|
+
/**
|
|
12
|
+
* Builds the announcement string from visible content only.
|
|
13
|
+
* Content visibility depends on expanded state and presence of title.
|
|
14
|
+
*/
|
|
15
|
+
const buildAnnouncementString = ({
|
|
16
|
+
title,
|
|
17
|
+
description,
|
|
18
|
+
expanded,
|
|
19
|
+
actionLabel,
|
|
20
|
+
actionSecondaryLabel
|
|
21
|
+
}) => {
|
|
22
|
+
return [title ? getStringValue(title) : undefined, description && (expanded || !title) ? getStringValue(description) : undefined, expanded && actionLabel ? getStringValue(actionLabel) : undefined, expanded && actionSecondaryLabel ? getStringValue(actionSecondaryLabel) : undefined].filter(Boolean).join('|');
|
|
23
|
+
};
|
|
24
|
+
|
|
25
|
+
export { buildAnnouncementString, getStringValue };
|
|
26
|
+
//# sourceMappingURL=helpers.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"helpers.mjs","sources":["../../../src/prompt/CriticalBanner/helpers.ts"],"sourcesContent":["import { ReactNode } from 'react';\n\n/**\n * Helper to extract string from ReactNode for announcements.\n * Complex ReactNodes (JSX elements) return empty string.\n */\nexport const getStringValue = (node: ReactNode): string => {\n if (typeof node === 'string' || typeof node === 'number') {\n return String(node);\n }\n return '';\n};\n\n/**\n * Builds the announcement string from visible content only.\n * Content visibility depends on expanded state and presence of title.\n */\nexport const buildAnnouncementString = ({\n title,\n description,\n expanded,\n actionLabel,\n actionSecondaryLabel,\n}: {\n title?: ReactNode;\n description?: ReactNode;\n expanded: boolean;\n actionLabel?: ReactNode;\n actionSecondaryLabel?: ReactNode;\n}): string => {\n return [\n title ? getStringValue(title) : undefined,\n description && (expanded || !title) ? getStringValue(description) : undefined,\n expanded && actionLabel ? getStringValue(actionLabel) : undefined,\n expanded && actionSecondaryLabel ? getStringValue(actionSecondaryLabel) : undefined,\n ]\n .filter(Boolean)\n .join('|');\n};\n"],"names":["getStringValue","node","String","buildAnnouncementString","title","description","expanded","actionLabel","actionSecondaryLabel","undefined","filter","Boolean","join"],"mappings":"AAEA;;;AAGG;AACI,MAAMA,cAAc,GAAIC,IAAe,IAAY;EACxD,IAAI,OAAOA,IAAI,KAAK,QAAQ,IAAI,OAAOA,IAAI,KAAK,QAAQ,EAAE;IACxD,OAAOC,MAAM,CAACD,IAAI,CAAC;AACrB,EAAA;AACA,EAAA,OAAO,EAAE;AACX;AAEA;;;AAGG;AACI,MAAME,uBAAuB,GAAGA,CAAC;EACtCC,KAAK;EACLC,WAAW;EACXC,QAAQ;EACRC,WAAW;AACXC,EAAAA;AAAoB,CAOrB,KAAY;EACX,OAAO,CACLJ,KAAK,GAAGJ,cAAc,CAACI,KAAK,CAAC,GAAGK,SAAS,EACzCJ,WAAW,KAAKC,QAAQ,IAAI,CAACF,KAAK,CAAC,GAAGJ,cAAc,CAACK,WAAW,CAAC,GAAGI,SAAS,EAC7EH,QAAQ,IAAIC,WAAW,GAAGP,cAAc,CAACO,WAAW,CAAC,GAAGE,SAAS,EACjEH,QAAQ,IAAIE,oBAAoB,GAAGR,cAAc,CAACQ,oBAAoB,CAAC,GAAGC,SAAS,CACpF,CACEC,MAAM,CAACC,OAAO,CAAC,CACfC,IAAI,CAAC,GAAG,CAAC;AACd;;;;"}
|
|
@@ -10,6 +10,7 @@ var jsxRuntime = require('react/jsx-runtime');
|
|
|
10
10
|
|
|
11
11
|
const PrimitivePrompt = ({
|
|
12
12
|
sentiment = 'success',
|
|
13
|
+
emphasis = 'base',
|
|
13
14
|
media,
|
|
14
15
|
actions,
|
|
15
16
|
onDismiss,
|
|
@@ -20,6 +21,7 @@ const PrimitivePrompt = ({
|
|
|
20
21
|
const intl = reactIntl.useIntl();
|
|
21
22
|
return /*#__PURE__*/jsxRuntime.jsx(SentimentSurface.default, {
|
|
22
23
|
sentiment: sentiment,
|
|
24
|
+
emphasis: emphasis,
|
|
23
25
|
className: clsx.clsx('wds-prompt', `wds-prompt--${sentiment}`, className),
|
|
24
26
|
...restProps,
|
|
25
27
|
children: /*#__PURE__*/jsxRuntime.jsxs("div", {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PrimitivePrompt.js","sources":["../../../src/prompt/PrimitivePrompt/PrimitivePrompt.tsx"],"sourcesContent":["import { Cross } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport SentimentSurface, { Sentiment } from '../../sentimentSurface';\nimport IconButton from '../../iconButton';\nimport { useIntl } from 'react-intl';\nimport closeBtnMessages from '../../common/closeButton/CloseButton.messages';\nimport { HTMLAttributes, ReactNode } from 'react';\n\nexport type PrimitivePromptProps = HTMLAttributes<HTMLDivElement> & {\n /**\n * The sentiment determines the colour scheme
|
|
1
|
+
{"version":3,"file":"PrimitivePrompt.js","sources":["../../../src/prompt/PrimitivePrompt/PrimitivePrompt.tsx"],"sourcesContent":["import { Cross } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport SentimentSurface, { Emphasis, Sentiment } from '../../sentimentSurface';\nimport IconButton from '../../iconButton';\nimport { useIntl } from 'react-intl';\nimport closeBtnMessages from '../../common/closeButton/CloseButton.messages';\nimport { HTMLAttributes, ReactNode } from 'react';\n\nexport type PrimitivePromptProps = HTMLAttributes<HTMLDivElement> & {\n /**\n * The sentiment determines the colour scheme.\n * @default success\n */\n sentiment?: Sentiment;\n /**\n * The emphasis level affecting background and text contrast.\n * @default 'base\n */\n emphasis?: Emphasis;\n /**\n * Media to be displayed on the prompt (icon/image/etc).\n */\n media: ReactNode;\n /**\n * Any actions to be displayed on the prompt.\n */\n actions?: ReactNode;\n /**\n * Handler called when the close button is clicked. If not provided, then the close button is hidden.\n */\n onDismiss?: () => void;\n /**\n * Test ID for testing tools\n */\n 'data-testid'?: string;\n};\n\n/**\n * PrimitivePrompt is a low-level component that provides the structure, sentiment support and styling for various prompts.\n * Uses several css variables to handle styling from within the consuming component, e.g. --Prompt-padding. */\nexport const PrimitivePrompt = ({\n sentiment = 'success',\n emphasis = 'base',\n media,\n actions,\n onDismiss,\n className,\n children,\n ...restProps\n}: PrimitivePromptProps) => {\n const intl = useIntl();\n\n return (\n <SentimentSurface\n sentiment={sentiment}\n emphasis={emphasis}\n className={clsx('wds-prompt', `wds-prompt--${sentiment}`, className)}\n {...restProps}\n >\n <div\n className={clsx('wds-prompt__content-wrapper', {\n 'wds-prompt__content-wrapper--with-dismiss': !!onDismiss,\n })}\n >\n <div className={clsx('wds-prompt__media-wrapper')}>{media}</div>\n {children}\n {onDismiss && (\n <IconButton\n size={24}\n priority=\"secondary\"\n aria-label={intl.formatMessage(closeBtnMessages.ariaLabel)}\n onClick={onDismiss}\n >\n <Cross />\n </IconButton>\n )}\n {actions && <div className=\"wds-prompt__actions-wrapper\">{actions}</div>}\n </div>\n </SentimentSurface>\n );\n};\n"],"names":["PrimitivePrompt","sentiment","emphasis","media","actions","onDismiss","className","children","restProps","intl","useIntl","_jsx","SentimentSurface","clsx","_jsxs","IconButton","size","priority","formatMessage","closeBtnMessages","ariaLabel","onClick","Cross"],"mappings":";;;;;;;;;;AAwCO,MAAMA,eAAe,GAAGA,CAAC;AAC9BC,EAAAA,SAAS,GAAG,SAAS;AACrBC,EAAAA,QAAQ,GAAG,MAAM;EACjBC,KAAK;EACLC,OAAO;EACPC,SAAS;EACTC,SAAS;EACTC,QAAQ;EACR,GAAGC;AAAS,CACS,KAAI;AACzB,EAAA,MAAMC,IAAI,GAAGC,iBAAO,EAAE;EAEtB,oBACEC,cAAA,CAACC,wBAAgB,EAAA;AACfX,IAAAA,SAAS,EAAEA,SAAU;AACrBC,IAAAA,QAAQ,EAAEA,QAAS;IACnBI,SAAS,EAAEO,SAAI,CAAC,YAAY,EAAE,eAAeZ,SAAS,CAAA,CAAE,EAAEK,SAAS,CAAE;AAAA,IAAA,GACjEE,SAAS;AAAAD,IAAAA,QAAA,eAEbO,eAAA,CAAA,KAAA,EAAA;AACER,MAAAA,SAAS,EAAEO,SAAI,CAAC,6BAA6B,EAAE;QAC7C,2CAA2C,EAAE,CAAC,CAACR;AAChD,OAAA,CAAE;AAAAE,MAAAA,QAAA,gBAEHI,cAAA,CAAA,KAAA,EAAA;AAAKL,QAAAA,SAAS,EAAEO,SAAI,CAAC,2BAA2B,CAAE;AAAAN,QAAAA,QAAA,EAAEJ;OAAW,CAC/D,EAACI,QAAQ,EACRF,SAAS,iBACRM,cAAA,CAACI,kBAAU,EAAA;AACTC,QAAAA,IAAI,EAAE,EAAG;AACTC,QAAAA,QAAQ,EAAC,WAAW;AACpB,QAAA,YAAA,EAAYR,IAAI,CAACS,aAAa,CAACC,4BAAgB,CAACC,SAAS,CAAE;AAC3DC,QAAAA,OAAO,EAAEhB,SAAU;AAAAE,QAAAA,QAAA,eAEnBI,cAAA,CAACW,WAAK,EAAA,EAAA;AACR,OAAY,CACb,EACAlB,OAAO,iBAAIO,cAAA,CAAA,KAAA,EAAA;AAAKL,QAAAA,SAAS,EAAC,6BAA6B;AAAAC,QAAAA,QAAA,EAAEH;AAAO,OAAM,CAAC;KACrE;AACP,GAAkB,CAAC;AAEvB;;;;"}
|
|
@@ -8,6 +8,7 @@ import { jsx, jsxs } from 'react/jsx-runtime';
|
|
|
8
8
|
|
|
9
9
|
const PrimitivePrompt = ({
|
|
10
10
|
sentiment = 'success',
|
|
11
|
+
emphasis = 'base',
|
|
11
12
|
media,
|
|
12
13
|
actions,
|
|
13
14
|
onDismiss,
|
|
@@ -18,6 +19,7 @@ const PrimitivePrompt = ({
|
|
|
18
19
|
const intl = useIntl();
|
|
19
20
|
return /*#__PURE__*/jsx(SentimentSurface, {
|
|
20
21
|
sentiment: sentiment,
|
|
22
|
+
emphasis: emphasis,
|
|
21
23
|
className: clsx('wds-prompt', `wds-prompt--${sentiment}`, className),
|
|
22
24
|
...restProps,
|
|
23
25
|
children: /*#__PURE__*/jsxs("div", {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PrimitivePrompt.mjs","sources":["../../../src/prompt/PrimitivePrompt/PrimitivePrompt.tsx"],"sourcesContent":["import { Cross } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport SentimentSurface, { Sentiment } from '../../sentimentSurface';\nimport IconButton from '../../iconButton';\nimport { useIntl } from 'react-intl';\nimport closeBtnMessages from '../../common/closeButton/CloseButton.messages';\nimport { HTMLAttributes, ReactNode } from 'react';\n\nexport type PrimitivePromptProps = HTMLAttributes<HTMLDivElement> & {\n /**\n * The sentiment determines the colour scheme
|
|
1
|
+
{"version":3,"file":"PrimitivePrompt.mjs","sources":["../../../src/prompt/PrimitivePrompt/PrimitivePrompt.tsx"],"sourcesContent":["import { Cross } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport SentimentSurface, { Emphasis, Sentiment } from '../../sentimentSurface';\nimport IconButton from '../../iconButton';\nimport { useIntl } from 'react-intl';\nimport closeBtnMessages from '../../common/closeButton/CloseButton.messages';\nimport { HTMLAttributes, ReactNode } from 'react';\n\nexport type PrimitivePromptProps = HTMLAttributes<HTMLDivElement> & {\n /**\n * The sentiment determines the colour scheme.\n * @default success\n */\n sentiment?: Sentiment;\n /**\n * The emphasis level affecting background and text contrast.\n * @default 'base\n */\n emphasis?: Emphasis;\n /**\n * Media to be displayed on the prompt (icon/image/etc).\n */\n media: ReactNode;\n /**\n * Any actions to be displayed on the prompt.\n */\n actions?: ReactNode;\n /**\n * Handler called when the close button is clicked. If not provided, then the close button is hidden.\n */\n onDismiss?: () => void;\n /**\n * Test ID for testing tools\n */\n 'data-testid'?: string;\n};\n\n/**\n * PrimitivePrompt is a low-level component that provides the structure, sentiment support and styling for various prompts.\n * Uses several css variables to handle styling from within the consuming component, e.g. --Prompt-padding. */\nexport const PrimitivePrompt = ({\n sentiment = 'success',\n emphasis = 'base',\n media,\n actions,\n onDismiss,\n className,\n children,\n ...restProps\n}: PrimitivePromptProps) => {\n const intl = useIntl();\n\n return (\n <SentimentSurface\n sentiment={sentiment}\n emphasis={emphasis}\n className={clsx('wds-prompt', `wds-prompt--${sentiment}`, className)}\n {...restProps}\n >\n <div\n className={clsx('wds-prompt__content-wrapper', {\n 'wds-prompt__content-wrapper--with-dismiss': !!onDismiss,\n })}\n >\n <div className={clsx('wds-prompt__media-wrapper')}>{media}</div>\n {children}\n {onDismiss && (\n <IconButton\n size={24}\n priority=\"secondary\"\n aria-label={intl.formatMessage(closeBtnMessages.ariaLabel)}\n onClick={onDismiss}\n >\n <Cross />\n </IconButton>\n )}\n {actions && <div className=\"wds-prompt__actions-wrapper\">{actions}</div>}\n </div>\n </SentimentSurface>\n );\n};\n"],"names":["PrimitivePrompt","sentiment","emphasis","media","actions","onDismiss","className","children","restProps","intl","useIntl","_jsx","SentimentSurface","clsx","_jsxs","IconButton","size","priority","formatMessage","closeBtnMessages","ariaLabel","onClick","Cross"],"mappings":";;;;;;;;AAwCO,MAAMA,eAAe,GAAGA,CAAC;AAC9BC,EAAAA,SAAS,GAAG,SAAS;AACrBC,EAAAA,QAAQ,GAAG,MAAM;EACjBC,KAAK;EACLC,OAAO;EACPC,SAAS;EACTC,SAAS;EACTC,QAAQ;EACR,GAAGC;AAAS,CACS,KAAI;AACzB,EAAA,MAAMC,IAAI,GAAGC,OAAO,EAAE;EAEtB,oBACEC,GAAA,CAACC,gBAAgB,EAAA;AACfX,IAAAA,SAAS,EAAEA,SAAU;AACrBC,IAAAA,QAAQ,EAAEA,QAAS;IACnBI,SAAS,EAAEO,IAAI,CAAC,YAAY,EAAE,eAAeZ,SAAS,CAAA,CAAE,EAAEK,SAAS,CAAE;AAAA,IAAA,GACjEE,SAAS;AAAAD,IAAAA,QAAA,eAEbO,IAAA,CAAA,KAAA,EAAA;AACER,MAAAA,SAAS,EAAEO,IAAI,CAAC,6BAA6B,EAAE;QAC7C,2CAA2C,EAAE,CAAC,CAACR;AAChD,OAAA,CAAE;AAAAE,MAAAA,QAAA,gBAEHI,GAAA,CAAA,KAAA,EAAA;AAAKL,QAAAA,SAAS,EAAEO,IAAI,CAAC,2BAA2B,CAAE;AAAAN,QAAAA,QAAA,EAAEJ;OAAW,CAC/D,EAACI,QAAQ,EACRF,SAAS,iBACRM,GAAA,CAACI,UAAU,EAAA;AACTC,QAAAA,IAAI,EAAE,EAAG;AACTC,QAAAA,QAAQ,EAAC,WAAW;AACpB,QAAA,YAAA,EAAYR,IAAI,CAACS,aAAa,CAACC,gBAAgB,CAACC,SAAS,CAAE;AAC3DC,QAAAA,OAAO,EAAEhB,SAAU;AAAAE,QAAAA,QAAA,eAEnBI,GAAA,CAACW,KAAK,EAAA,EAAA;AACR,OAAY,CACb,EACAlB,OAAO,iBAAIO,GAAA,CAAA,KAAA,EAAA;AAAKL,QAAAA,SAAS,EAAC,6BAA6B;AAAAC,QAAAA,QAAA,EAAEH;AAAO,OAAM,CAAC;KACrE;AACP,GAAkB,CAAC;AAEvB;;;;"}
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
require('react');
|
|
4
|
+
var clsx = require('clsx');
|
|
5
|
+
var icons = require('@transferwise/icons');
|
|
6
|
+
var IconButton = require('../../../iconButton/IconButton.js');
|
|
7
|
+
var reactIntl = require('react-intl');
|
|
8
|
+
var Expander_messages = require('./Expander.messages.js');
|
|
9
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
10
|
+
|
|
11
|
+
// Helper for conditional rendering based on expanded state
|
|
12
|
+
function shouldShowWhenExpanded({
|
|
13
|
+
expanded,
|
|
14
|
+
hasContent,
|
|
15
|
+
alwaysShow = false
|
|
16
|
+
}) {
|
|
17
|
+
if (alwaysShow) {
|
|
18
|
+
return hasContent;
|
|
19
|
+
}
|
|
20
|
+
return expanded && hasContent;
|
|
21
|
+
}
|
|
22
|
+
// Reusable toggle button component
|
|
23
|
+
const ExpanderToggle = ({
|
|
24
|
+
expanded,
|
|
25
|
+
onToggle,
|
|
26
|
+
size = 24,
|
|
27
|
+
className,
|
|
28
|
+
'data-testid': testId
|
|
29
|
+
}) => {
|
|
30
|
+
const intl = reactIntl.useIntl();
|
|
31
|
+
return /*#__PURE__*/jsxRuntime.jsx(IconButton.default, {
|
|
32
|
+
size: size,
|
|
33
|
+
priority: "secondary",
|
|
34
|
+
"aria-label": intl.formatMessage(expanded ? Expander_messages.default.collapseAriaLabel : Expander_messages.default.expandAriaLabel),
|
|
35
|
+
"aria-expanded": expanded,
|
|
36
|
+
className: clsx.clsx('wds-expander-toggle', {
|
|
37
|
+
'wds-expander-toggle--collapsed': !expanded
|
|
38
|
+
}, className),
|
|
39
|
+
"data-testid": testId,
|
|
40
|
+
onClick: onToggle,
|
|
41
|
+
children: /*#__PURE__*/jsxRuntime.jsx(icons.ChevronUp, {})
|
|
42
|
+
});
|
|
43
|
+
};
|
|
44
|
+
|
|
45
|
+
exports.ExpanderToggle = ExpanderToggle;
|
|
46
|
+
exports.shouldShowWhenExpanded = shouldShowWhenExpanded;
|
|
47
|
+
//# sourceMappingURL=Expander.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Expander.js","sources":["../../../../src/prompt/common/Expander/Expander.tsx"],"sourcesContent":["import { useState, useCallback } from 'react';\nimport { clsx } from 'clsx';\nimport { ChevronUp } from '@transferwise/icons';\nimport IconButton from '../../../iconButton';\nimport { useIntl } from 'react-intl';\nimport messages from './Expander.messages';\n\nexport type ExpanderState = {\n expanded: boolean;\n toggle: () => void;\n setExpanded: (expanded: boolean) => void;\n};\n\n// Hook for managing expander state\nexport function useExpanderState(initialExpanded = true): ExpanderState {\n const [expanded, setExpanded] = useState(initialExpanded);\n\n const toggle = useCallback(() => {\n setExpanded((prev) => !prev);\n }, []);\n\n return {\n expanded,\n toggle,\n setExpanded,\n };\n}\n\n// Helper for conditional rendering based on expanded state\nexport function shouldShowWhenExpanded({\n expanded,\n hasContent,\n alwaysShow = false,\n}: {\n expanded: boolean;\n hasContent: boolean;\n alwaysShow?: boolean;\n}): boolean {\n if (alwaysShow) {\n return hasContent;\n }\n\n return expanded && hasContent;\n}\n\nexport type ExpanderToggleProps = {\n expanded: boolean;\n onToggle: () => void;\n size?: 16 | 24 | 32 | 40 | 48 | 56 | 72;\n className?: string;\n 'data-testid'?: string;\n};\n\n// Reusable toggle button component\nexport const ExpanderToggle = ({\n expanded,\n onToggle,\n size = 24,\n className,\n 'data-testid': testId,\n}: ExpanderToggleProps) => {\n const intl = useIntl();\n\n return (\n <IconButton\n size={size}\n priority=\"secondary\"\n aria-label={intl.formatMessage(\n expanded ? messages.collapseAriaLabel : messages.expandAriaLabel,\n )}\n aria-expanded={expanded}\n className={clsx(\n 'wds-expander-toggle',\n { 'wds-expander-toggle--collapsed': !expanded },\n className,\n )}\n data-testid={testId}\n onClick={onToggle}\n >\n <ChevronUp />\n </IconButton>\n );\n};\n"],"names":["shouldShowWhenExpanded","expanded","hasContent","alwaysShow","ExpanderToggle","onToggle","size","className","testId","intl","useIntl","_jsx","IconButton","priority","formatMessage","messages","collapseAriaLabel","expandAriaLabel","clsx","onClick","children","ChevronUp"],"mappings":";;;;;;;;;;AA4BA;AACM,SAAUA,sBAAsBA,CAAC;EACrCC,QAAQ;EACRC,UAAU;AACVC,EAAAA,UAAU,GAAG;AAAK,CAKnB,EAAA;AACC,EAAA,IAAIA,UAAU,EAAE;AACd,IAAA,OAAOD,UAAU;AACnB,EAAA;EAEA,OAAOD,QAAQ,IAAIC,UAAU;AAC/B;AAUA;AACO,MAAME,cAAc,GAAGA,CAAC;EAC7BH,QAAQ;EACRI,QAAQ;AACRC,EAAAA,IAAI,GAAG,EAAE;EACTC,SAAS;AACT,EAAA,aAAa,EAAEC;AAAM,CACD,KAAI;AACxB,EAAA,MAAMC,IAAI,GAAGC,iBAAO,EAAE;EAEtB,oBACEC,cAAA,CAACC,kBAAU,EAAA;AACTN,IAAAA,IAAI,EAAEA,IAAK;AACXO,IAAAA,QAAQ,EAAC,WAAW;AACpB,IAAA,YAAA,EAAYJ,IAAI,CAACK,aAAa,CAC5Bb,QAAQ,GAAGc,yBAAQ,CAACC,iBAAiB,GAAGD,yBAAQ,CAACE,eAAe,CAChE;AACF,IAAA,eAAA,EAAehB,QAAS;AACxBM,IAAAA,SAAS,EAAEW,SAAI,CACb,qBAAqB,EACrB;AAAE,MAAA,gCAAgC,EAAE,CAACjB;KAAU,EAC/CM,SAAS,CACT;AACF,IAAA,aAAA,EAAaC,MAAO;AACpBW,IAAAA,OAAO,EAAEd,QAAS;AAAAe,IAAAA,QAAA,eAElBT,cAAA,CAACU,eAAS,EAAA,EAAA;AACZ,GAAY,CAAC;AAEjB;;;;;"}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
var reactIntl = require('react-intl');
|
|
6
|
+
|
|
7
|
+
var messages = reactIntl.defineMessages({
|
|
8
|
+
expandAriaLabel: {
|
|
9
|
+
id: "neptune.Expander.expandAriaLabel"
|
|
10
|
+
},
|
|
11
|
+
collapseAriaLabel: {
|
|
12
|
+
id: "neptune.Expander.collapseAriaLabel"
|
|
13
|
+
}
|
|
14
|
+
});
|
|
15
|
+
|
|
16
|
+
exports.default = messages;
|
|
17
|
+
//# sourceMappingURL=Expander.messages.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Expander.messages.js","sources":["../../../../src/prompt/common/Expander/Expander.messages.ts"],"sourcesContent":["import { defineMessages } from 'react-intl';\n\nexport default defineMessages({\n expandAriaLabel: {\n id: 'neptune.Expander.expandAriaLabel',\n defaultMessage: 'Expand',\n description: 'Expand button for expander',\n },\n collapseAriaLabel: {\n id: 'neptune.Expander.collapseAriaLabel',\n defaultMessage: 'Collapse',\n description: 'Collapse button for expander',\n },\n});\n"],"names":["defineMessages","expandAriaLabel","id","collapseAriaLabel"],"mappings":";;;;;;AAEA,eAAeA,wBAAc,CAAC;AAC5BC,EAAAA,eAAe,EAAE;IACfC,EAAE,EAAA;GAGH;AACDC,EAAAA,iBAAiB,EAAE;IACjBD,EAAE,EAAA;AAGH;AACF,CAAA,CAAC;;;;"}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { defineMessages } from 'react-intl';
|
|
2
|
+
|
|
3
|
+
var messages = defineMessages({
|
|
4
|
+
expandAriaLabel: {
|
|
5
|
+
id: "neptune.Expander.expandAriaLabel"
|
|
6
|
+
},
|
|
7
|
+
collapseAriaLabel: {
|
|
8
|
+
id: "neptune.Expander.collapseAriaLabel"
|
|
9
|
+
}
|
|
10
|
+
});
|
|
11
|
+
|
|
12
|
+
export { messages as default };
|
|
13
|
+
//# sourceMappingURL=Expander.messages.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Expander.messages.mjs","sources":["../../../../src/prompt/common/Expander/Expander.messages.ts"],"sourcesContent":["import { defineMessages } from 'react-intl';\n\nexport default defineMessages({\n expandAriaLabel: {\n id: 'neptune.Expander.expandAriaLabel',\n defaultMessage: 'Expand',\n description: 'Expand button for expander',\n },\n collapseAriaLabel: {\n id: 'neptune.Expander.collapseAriaLabel',\n defaultMessage: 'Collapse',\n description: 'Collapse button for expander',\n },\n});\n"],"names":["defineMessages","expandAriaLabel","id","collapseAriaLabel"],"mappings":";;AAEA,eAAeA,cAAc,CAAC;AAC5BC,EAAAA,eAAe,EAAE;IACfC,EAAE,EAAA;GAGH;AACDC,EAAAA,iBAAiB,EAAE;IACjBD,EAAE,EAAA;AAGH;AACF,CAAA,CAAC;;;;"}
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
import 'react';
|
|
2
|
+
import { clsx } from 'clsx';
|
|
3
|
+
import { ChevronUp } from '@transferwise/icons';
|
|
4
|
+
import IconButton from '../../../iconButton/IconButton.mjs';
|
|
5
|
+
import { useIntl } from 'react-intl';
|
|
6
|
+
import messages from './Expander.messages.mjs';
|
|
7
|
+
import { jsx } from 'react/jsx-runtime';
|
|
8
|
+
|
|
9
|
+
// Helper for conditional rendering based on expanded state
|
|
10
|
+
function shouldShowWhenExpanded({
|
|
11
|
+
expanded,
|
|
12
|
+
hasContent,
|
|
13
|
+
alwaysShow = false
|
|
14
|
+
}) {
|
|
15
|
+
if (alwaysShow) {
|
|
16
|
+
return hasContent;
|
|
17
|
+
}
|
|
18
|
+
return expanded && hasContent;
|
|
19
|
+
}
|
|
20
|
+
// Reusable toggle button component
|
|
21
|
+
const ExpanderToggle = ({
|
|
22
|
+
expanded,
|
|
23
|
+
onToggle,
|
|
24
|
+
size = 24,
|
|
25
|
+
className,
|
|
26
|
+
'data-testid': testId
|
|
27
|
+
}) => {
|
|
28
|
+
const intl = useIntl();
|
|
29
|
+
return /*#__PURE__*/jsx(IconButton, {
|
|
30
|
+
size: size,
|
|
31
|
+
priority: "secondary",
|
|
32
|
+
"aria-label": intl.formatMessage(expanded ? messages.collapseAriaLabel : messages.expandAriaLabel),
|
|
33
|
+
"aria-expanded": expanded,
|
|
34
|
+
className: clsx('wds-expander-toggle', {
|
|
35
|
+
'wds-expander-toggle--collapsed': !expanded
|
|
36
|
+
}, className),
|
|
37
|
+
"data-testid": testId,
|
|
38
|
+
onClick: onToggle,
|
|
39
|
+
children: /*#__PURE__*/jsx(ChevronUp, {})
|
|
40
|
+
});
|
|
41
|
+
};
|
|
42
|
+
|
|
43
|
+
export { ExpanderToggle, shouldShowWhenExpanded };
|
|
44
|
+
//# sourceMappingURL=Expander.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Expander.mjs","sources":["../../../../src/prompt/common/Expander/Expander.tsx"],"sourcesContent":["import { useState, useCallback } from 'react';\nimport { clsx } from 'clsx';\nimport { ChevronUp } from '@transferwise/icons';\nimport IconButton from '../../../iconButton';\nimport { useIntl } from 'react-intl';\nimport messages from './Expander.messages';\n\nexport type ExpanderState = {\n expanded: boolean;\n toggle: () => void;\n setExpanded: (expanded: boolean) => void;\n};\n\n// Hook for managing expander state\nexport function useExpanderState(initialExpanded = true): ExpanderState {\n const [expanded, setExpanded] = useState(initialExpanded);\n\n const toggle = useCallback(() => {\n setExpanded((prev) => !prev);\n }, []);\n\n return {\n expanded,\n toggle,\n setExpanded,\n };\n}\n\n// Helper for conditional rendering based on expanded state\nexport function shouldShowWhenExpanded({\n expanded,\n hasContent,\n alwaysShow = false,\n}: {\n expanded: boolean;\n hasContent: boolean;\n alwaysShow?: boolean;\n}): boolean {\n if (alwaysShow) {\n return hasContent;\n }\n\n return expanded && hasContent;\n}\n\nexport type ExpanderToggleProps = {\n expanded: boolean;\n onToggle: () => void;\n size?: 16 | 24 | 32 | 40 | 48 | 56 | 72;\n className?: string;\n 'data-testid'?: string;\n};\n\n// Reusable toggle button component\nexport const ExpanderToggle = ({\n expanded,\n onToggle,\n size = 24,\n className,\n 'data-testid': testId,\n}: ExpanderToggleProps) => {\n const intl = useIntl();\n\n return (\n <IconButton\n size={size}\n priority=\"secondary\"\n aria-label={intl.formatMessage(\n expanded ? messages.collapseAriaLabel : messages.expandAriaLabel,\n )}\n aria-expanded={expanded}\n className={clsx(\n 'wds-expander-toggle',\n { 'wds-expander-toggle--collapsed': !expanded },\n className,\n )}\n data-testid={testId}\n onClick={onToggle}\n >\n <ChevronUp />\n </IconButton>\n );\n};\n"],"names":["shouldShowWhenExpanded","expanded","hasContent","alwaysShow","ExpanderToggle","onToggle","size","className","testId","intl","useIntl","_jsx","IconButton","priority","formatMessage","messages","collapseAriaLabel","expandAriaLabel","clsx","onClick","children","ChevronUp"],"mappings":";;;;;;;;AA4BA;AACM,SAAUA,sBAAsBA,CAAC;EACrCC,QAAQ;EACRC,UAAU;AACVC,EAAAA,UAAU,GAAG;AAAK,CAKnB,EAAA;AACC,EAAA,IAAIA,UAAU,EAAE;AACd,IAAA,OAAOD,UAAU;AACnB,EAAA;EAEA,OAAOD,QAAQ,IAAIC,UAAU;AAC/B;AAUA;AACO,MAAME,cAAc,GAAGA,CAAC;EAC7BH,QAAQ;EACRI,QAAQ;AACRC,EAAAA,IAAI,GAAG,EAAE;EACTC,SAAS;AACT,EAAA,aAAa,EAAEC;AAAM,CACD,KAAI;AACxB,EAAA,MAAMC,IAAI,GAAGC,OAAO,EAAE;EAEtB,oBACEC,GAAA,CAACC,UAAU,EAAA;AACTN,IAAAA,IAAI,EAAEA,IAAK;AACXO,IAAAA,QAAQ,EAAC,WAAW;AACpB,IAAA,YAAA,EAAYJ,IAAI,CAACK,aAAa,CAC5Bb,QAAQ,GAAGc,QAAQ,CAACC,iBAAiB,GAAGD,QAAQ,CAACE,eAAe,CAChE;AACF,IAAA,eAAA,EAAehB,QAAS;AACxBM,IAAAA,SAAS,EAAEW,IAAI,CACb,qBAAqB,EACrB;AAAE,MAAA,gCAAgC,EAAE,CAACjB;KAAU,EAC/CM,SAAS,CACT;AACF,IAAA,aAAA,EAAaC,MAAO;AACpBW,IAAAA,OAAO,EAAEd,QAAS;AAAAe,IAAAA,QAAA,eAElBT,GAAA,CAACU,SAAS,EAAA,EAAA;AACZ,GAAY,CAAC;AAEjB;;;;"}
|
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var icons = require('@transferwise/icons');
|
|
4
|
+
var AvatarView = require('../../avatarView/AvatarView.js');
|
|
5
|
+
var Image = require('../../image/Image.js');
|
|
6
|
+
var StatusIcon = require('../../statusIcon/StatusIcon.js');
|
|
7
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
8
|
+
|
|
9
|
+
function renderPromptMedia({
|
|
10
|
+
media,
|
|
11
|
+
sentiment,
|
|
12
|
+
mediaId,
|
|
13
|
+
imgClassName
|
|
14
|
+
}) {
|
|
15
|
+
if (media?.imgSrc) {
|
|
16
|
+
return /*#__PURE__*/jsxRuntime.jsx(Image.default, {
|
|
17
|
+
id: mediaId,
|
|
18
|
+
src: media.imgSrc,
|
|
19
|
+
className: imgClassName,
|
|
20
|
+
alt: media['aria-label'] ?? ''
|
|
21
|
+
});
|
|
22
|
+
}
|
|
23
|
+
if (media?.avatar) {
|
|
24
|
+
const badge = media.avatar.badge ? media.avatar.badge : sentiment === 'proposition' ? {} : {
|
|
25
|
+
status: sentiment
|
|
26
|
+
};
|
|
27
|
+
return /*#__PURE__*/jsxRuntime.jsx(AvatarView.default, {
|
|
28
|
+
...media.avatar,
|
|
29
|
+
badge: badge,
|
|
30
|
+
"aria-label": media['aria-label'],
|
|
31
|
+
"aria-hidden": media['aria-hidden'],
|
|
32
|
+
id: mediaId,
|
|
33
|
+
size: 48,
|
|
34
|
+
children: media.avatar.asset
|
|
35
|
+
});
|
|
36
|
+
}
|
|
37
|
+
return sentiment === 'proposition' ? /*#__PURE__*/jsxRuntime.jsx(AvatarView.default, {
|
|
38
|
+
id: mediaId,
|
|
39
|
+
size: 48,
|
|
40
|
+
"aria-label": media['aria-label'],
|
|
41
|
+
"aria-hidden": media['aria-hidden'],
|
|
42
|
+
children: /*#__PURE__*/jsxRuntime.jsx(icons.GiftBox, {})
|
|
43
|
+
}) : /*#__PURE__*/jsxRuntime.jsx(StatusIcon.default, {
|
|
44
|
+
id: mediaId,
|
|
45
|
+
size: 48,
|
|
46
|
+
sentiment: sentiment,
|
|
47
|
+
iconLabel: media['aria-hidden'] ? null : media['aria-label']
|
|
48
|
+
});
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
exports.renderPromptMedia = renderPromptMedia;
|
|
52
|
+
//# sourceMappingURL=promptMedia.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"promptMedia.js","sources":["../../../src/prompt/helpers/promptMedia.tsx"],"sourcesContent":["import { ReactNode } from 'react';\nimport { GiftBox } from '@transferwise/icons';\n\nimport AvatarView, { AvatarViewProps } from '../../avatarView';\nimport Image from '../../image';\nimport StatusIcon from '../../statusIcon';\nimport { BadgeAssetsProps } from '../../badge';\nimport { PrimitivePromptProps } from '../PrimitivePrompt';\n\nexport type PromptMedia = {\n imgSrc?: string;\n avatar?: Pick<AvatarViewProps, 'imgSrc' | 'profileName' | 'profileType'> & {\n asset?: AvatarViewProps['children'];\n badge?: Pick<BadgeAssetsProps, 'flagCode'>;\n };\n 'aria-label'?: string;\n 'aria-hidden'?: boolean;\n};\n\ntype RenderPromptMediaOptions = {\n media: PromptMedia;\n sentiment: PrimitivePromptProps['sentiment'];\n mediaId: string;\n imgClassName: string;\n};\n\nexport function renderPromptMedia({\n media,\n sentiment,\n mediaId,\n imgClassName,\n}: RenderPromptMediaOptions): ReactNode {\n if (media?.imgSrc) {\n return (\n <Image\n id={mediaId}\n src={media.imgSrc}\n className={imgClassName}\n alt={media['aria-label'] ?? ''}\n />\n );\n }\n if (media?.avatar) {\n const badge = media.avatar.badge\n ? media.avatar.badge\n : sentiment === 'proposition'\n ? {}\n : { status: sentiment };\n return (\n <AvatarView\n {...media.avatar}\n badge={badge}\n aria-label={media['aria-label']}\n aria-hidden={media['aria-hidden']}\n id={mediaId}\n size={48}\n >\n {media.avatar.asset}\n </AvatarView>\n );\n }\n return sentiment === 'proposition' ? (\n <AvatarView\n id={mediaId}\n size={48}\n aria-label={media['aria-label']}\n aria-hidden={media['aria-hidden']}\n >\n <GiftBox />\n </AvatarView>\n ) : (\n <StatusIcon\n id={mediaId}\n size={48}\n sentiment={sentiment}\n iconLabel={media['aria-hidden'] ? null : media['aria-label']}\n />\n );\n}\n"],"names":["renderPromptMedia","media","sentiment","mediaId","imgClassName","imgSrc","_jsx","Image","id","src","className","alt","avatar","badge","status","AvatarView","size","children","asset","GiftBox","StatusIcon","iconLabel"],"mappings":";;;;;;;;AA0BM,SAAUA,iBAAiBA,CAAC;EAChCC,KAAK;EACLC,SAAS;EACTC,OAAO;AACPC,EAAAA;AAAY,CACa,EAAA;EACzB,IAAIH,KAAK,EAAEI,MAAM,EAAE;IACjB,oBACEC,cAAA,CAACC,aAAK,EAAA;AACJC,MAAAA,EAAE,EAAEL,OAAQ;MACZM,GAAG,EAAER,KAAK,CAACI,MAAO;AAClBK,MAAAA,SAAS,EAAEN,YAAa;AACxBO,MAAAA,GAAG,EAAEV,KAAK,CAAC,YAAY,CAAC,IAAI;AAAG,KAAA,CAC/B;AAEN,EAAA;EACA,IAAIA,KAAK,EAAEW,MAAM,EAAE;IACjB,MAAMC,KAAK,GAAGZ,KAAK,CAACW,MAAM,CAACC,KAAK,GAC5BZ,KAAK,CAACW,MAAM,CAACC,KAAK,GAClBX,SAAS,KAAK,aAAa,GACzB,EAAE,GACF;AAAEY,MAAAA,MAAM,EAAEZ;KAAW;IAC3B,oBACEI,cAAA,CAACS,kBAAU,EAAA;MAAA,GACLd,KAAK,CAACW,MAAM;AAChBC,MAAAA,KAAK,EAAEA,KAAM;MACb,YAAA,EAAYZ,KAAK,CAAC,YAAY,CAAE;MAChC,aAAA,EAAaA,KAAK,CAAC,aAAa,CAAE;AAClCO,MAAAA,EAAE,EAAEL,OAAQ;AACZa,MAAAA,IAAI,EAAE,EAAG;AAAAC,MAAAA,QAAA,EAERhB,KAAK,CAACW,MAAM,CAACM;AAAK,KACT,CAAC;AAEjB,EAAA;AACA,EAAA,OAAOhB,SAAS,KAAK,aAAa,gBAChCI,cAAA,CAACS,kBAAU,EAAA;AACTP,IAAAA,EAAE,EAAEL,OAAQ;AACZa,IAAAA,IAAI,EAAE,EAAG;IACT,YAAA,EAAYf,KAAK,CAAC,YAAY,CAAE;IAChC,aAAA,EAAaA,KAAK,CAAC,aAAa,CAAE;AAAAgB,IAAAA,QAAA,eAElCX,cAAA,CAACa,aAAO,EAAA,EAAA;AACV,GAAY,CAAC,gBAEbb,cAAA,CAACc,kBAAU,EAAA;AACTZ,IAAAA,EAAE,EAAEL,OAAQ;AACZa,IAAAA,IAAI,EAAE,EAAG;AACTd,IAAAA,SAAS,EAAEA,SAAU;IACrBmB,SAAS,EAAEpB,KAAK,CAAC,aAAa,CAAC,GAAG,IAAI,GAAGA,KAAK,CAAC,YAAY;AAAE,GAAA,CAEhE;AACH;;;;"}
|
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
import { GiftBox } from '@transferwise/icons';
|
|
2
|
+
import AvatarView from '../../avatarView/AvatarView.mjs';
|
|
3
|
+
import Image from '../../image/Image.mjs';
|
|
4
|
+
import StatusIcon from '../../statusIcon/StatusIcon.mjs';
|
|
5
|
+
import { jsx } from 'react/jsx-runtime';
|
|
6
|
+
|
|
7
|
+
function renderPromptMedia({
|
|
8
|
+
media,
|
|
9
|
+
sentiment,
|
|
10
|
+
mediaId,
|
|
11
|
+
imgClassName
|
|
12
|
+
}) {
|
|
13
|
+
if (media?.imgSrc) {
|
|
14
|
+
return /*#__PURE__*/jsx(Image, {
|
|
15
|
+
id: mediaId,
|
|
16
|
+
src: media.imgSrc,
|
|
17
|
+
className: imgClassName,
|
|
18
|
+
alt: media['aria-label'] ?? ''
|
|
19
|
+
});
|
|
20
|
+
}
|
|
21
|
+
if (media?.avatar) {
|
|
22
|
+
const badge = media.avatar.badge ? media.avatar.badge : sentiment === 'proposition' ? {} : {
|
|
23
|
+
status: sentiment
|
|
24
|
+
};
|
|
25
|
+
return /*#__PURE__*/jsx(AvatarView, {
|
|
26
|
+
...media.avatar,
|
|
27
|
+
badge: badge,
|
|
28
|
+
"aria-label": media['aria-label'],
|
|
29
|
+
"aria-hidden": media['aria-hidden'],
|
|
30
|
+
id: mediaId,
|
|
31
|
+
size: 48,
|
|
32
|
+
children: media.avatar.asset
|
|
33
|
+
});
|
|
34
|
+
}
|
|
35
|
+
return sentiment === 'proposition' ? /*#__PURE__*/jsx(AvatarView, {
|
|
36
|
+
id: mediaId,
|
|
37
|
+
size: 48,
|
|
38
|
+
"aria-label": media['aria-label'],
|
|
39
|
+
"aria-hidden": media['aria-hidden'],
|
|
40
|
+
children: /*#__PURE__*/jsx(GiftBox, {})
|
|
41
|
+
}) : /*#__PURE__*/jsx(StatusIcon, {
|
|
42
|
+
id: mediaId,
|
|
43
|
+
size: 48,
|
|
44
|
+
sentiment: sentiment,
|
|
45
|
+
iconLabel: media['aria-hidden'] ? null : media['aria-label']
|
|
46
|
+
});
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
export { renderPromptMedia };
|
|
50
|
+
//# sourceMappingURL=promptMedia.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"promptMedia.mjs","sources":["../../../src/prompt/helpers/promptMedia.tsx"],"sourcesContent":["import { ReactNode } from 'react';\nimport { GiftBox } from '@transferwise/icons';\n\nimport AvatarView, { AvatarViewProps } from '../../avatarView';\nimport Image from '../../image';\nimport StatusIcon from '../../statusIcon';\nimport { BadgeAssetsProps } from '../../badge';\nimport { PrimitivePromptProps } from '../PrimitivePrompt';\n\nexport type PromptMedia = {\n imgSrc?: string;\n avatar?: Pick<AvatarViewProps, 'imgSrc' | 'profileName' | 'profileType'> & {\n asset?: AvatarViewProps['children'];\n badge?: Pick<BadgeAssetsProps, 'flagCode'>;\n };\n 'aria-label'?: string;\n 'aria-hidden'?: boolean;\n};\n\ntype RenderPromptMediaOptions = {\n media: PromptMedia;\n sentiment: PrimitivePromptProps['sentiment'];\n mediaId: string;\n imgClassName: string;\n};\n\nexport function renderPromptMedia({\n media,\n sentiment,\n mediaId,\n imgClassName,\n}: RenderPromptMediaOptions): ReactNode {\n if (media?.imgSrc) {\n return (\n <Image\n id={mediaId}\n src={media.imgSrc}\n className={imgClassName}\n alt={media['aria-label'] ?? ''}\n />\n );\n }\n if (media?.avatar) {\n const badge = media.avatar.badge\n ? media.avatar.badge\n : sentiment === 'proposition'\n ? {}\n : { status: sentiment };\n return (\n <AvatarView\n {...media.avatar}\n badge={badge}\n aria-label={media['aria-label']}\n aria-hidden={media['aria-hidden']}\n id={mediaId}\n size={48}\n >\n {media.avatar.asset}\n </AvatarView>\n );\n }\n return sentiment === 'proposition' ? (\n <AvatarView\n id={mediaId}\n size={48}\n aria-label={media['aria-label']}\n aria-hidden={media['aria-hidden']}\n >\n <GiftBox />\n </AvatarView>\n ) : (\n <StatusIcon\n id={mediaId}\n size={48}\n sentiment={sentiment}\n iconLabel={media['aria-hidden'] ? null : media['aria-label']}\n />\n );\n}\n"],"names":["renderPromptMedia","media","sentiment","mediaId","imgClassName","imgSrc","_jsx","Image","id","src","className","alt","avatar","badge","status","AvatarView","size","children","asset","GiftBox","StatusIcon","iconLabel"],"mappings":";;;;;;AA0BM,SAAUA,iBAAiBA,CAAC;EAChCC,KAAK;EACLC,SAAS;EACTC,OAAO;AACPC,EAAAA;AAAY,CACa,EAAA;EACzB,IAAIH,KAAK,EAAEI,MAAM,EAAE;IACjB,oBACEC,GAAA,CAACC,KAAK,EAAA;AACJC,MAAAA,EAAE,EAAEL,OAAQ;MACZM,GAAG,EAAER,KAAK,CAACI,MAAO;AAClBK,MAAAA,SAAS,EAAEN,YAAa;AACxBO,MAAAA,GAAG,EAAEV,KAAK,CAAC,YAAY,CAAC,IAAI;AAAG,KAAA,CAC/B;AAEN,EAAA;EACA,IAAIA,KAAK,EAAEW,MAAM,EAAE;IACjB,MAAMC,KAAK,GAAGZ,KAAK,CAACW,MAAM,CAACC,KAAK,GAC5BZ,KAAK,CAACW,MAAM,CAACC,KAAK,GAClBX,SAAS,KAAK,aAAa,GACzB,EAAE,GACF;AAAEY,MAAAA,MAAM,EAAEZ;KAAW;IAC3B,oBACEI,GAAA,CAACS,UAAU,EAAA;MAAA,GACLd,KAAK,CAACW,MAAM;AAChBC,MAAAA,KAAK,EAAEA,KAAM;MACb,YAAA,EAAYZ,KAAK,CAAC,YAAY,CAAE;MAChC,aAAA,EAAaA,KAAK,CAAC,aAAa,CAAE;AAClCO,MAAAA,EAAE,EAAEL,OAAQ;AACZa,MAAAA,IAAI,EAAE,EAAG;AAAAC,MAAAA,QAAA,EAERhB,KAAK,CAACW,MAAM,CAACM;AAAK,KACT,CAAC;AAEjB,EAAA;AACA,EAAA,OAAOhB,SAAS,KAAK,aAAa,gBAChCI,GAAA,CAACS,UAAU,EAAA;AACTP,IAAAA,EAAE,EAAEL,OAAQ;AACZa,IAAAA,IAAI,EAAE,EAAG;IACT,YAAA,EAAYf,KAAK,CAAC,YAAY,CAAE;IAChC,aAAA,EAAaA,KAAK,CAAC,aAAa,CAAE;AAAAgB,IAAAA,QAAA,eAElCX,GAAA,CAACa,OAAO,EAAA,EAAA;AACV,GAAY,CAAC,gBAEbb,GAAA,CAACc,UAAU,EAAA;AACTZ,IAAAA,EAAE,EAAEL,OAAQ;AACZa,IAAAA,IAAI,EAAE,EAAG;AACTd,IAAAA,SAAS,EAAEA,SAAU;IACrBmB,SAAS,EAAEpB,KAAK,CAAC,aAAa,CAAC,GAAG,IAAI,GAAGA,KAAK,CAAC,YAAY;AAAE,GAAA,CAEhE;AACH;;;;"}
|
package/build/styles/main.css
CHANGED
|
@@ -32176,6 +32176,91 @@ html:not([dir="rtl"]) .np-navigation-option {
|
|
|
32176
32176
|
padding: 0;
|
|
32177
32177
|
}
|
|
32178
32178
|
|
|
32179
|
+
.wds-action-prompt {
|
|
32180
|
+
--Prompt-padding: var(--size-16);
|
|
32181
|
+
--Prompt-actions-gap: var(--size-8);
|
|
32182
|
+
--Prompt-gap: var(--size-10) var(--size-16);
|
|
32183
|
+
--Prompt-border-radius: var(--radius-large);
|
|
32184
|
+
}
|
|
32185
|
+
|
|
32186
|
+
.wds-action-prompt--media-image {
|
|
32187
|
+
width: 48px;
|
|
32188
|
+
width: var(--size-48);
|
|
32189
|
+
height: 48px;
|
|
32190
|
+
height: var(--size-48);
|
|
32191
|
+
-o-object-fit: contain;
|
|
32192
|
+
object-fit: contain;
|
|
32193
|
+
}
|
|
32194
|
+
|
|
32195
|
+
@media (max-width: 767px) {
|
|
32196
|
+
.wds-action-prompt--with-two-actions .wds-prompt__actions-wrapper .wds-Button {
|
|
32197
|
+
flex: 1 1 calc(50% - (var(--Prompt-actions-gap) / 2));
|
|
32198
|
+
min-width: -moz-fit-content;
|
|
32199
|
+
min-width: fit-content;
|
|
32200
|
+
}
|
|
32201
|
+
}
|
|
32202
|
+
|
|
32203
|
+
.wds-action-prompt__content {
|
|
32204
|
+
max-width: calc(48px * 10);
|
|
32205
|
+
max-width: calc(var(--size-48) * 10);
|
|
32206
|
+
}
|
|
32207
|
+
|
|
32208
|
+
.wds-critical-banner {
|
|
32209
|
+
--Prompt-padding: var(--size-16);
|
|
32210
|
+
--Prompt-actions-gap: var(--size-8);
|
|
32211
|
+
--Prompt-gap: var(--size-10) var(--size-16);
|
|
32212
|
+
--Prompt-border-radius: 0;
|
|
32213
|
+
}
|
|
32214
|
+
|
|
32215
|
+
.wds-critical-banner--media-image {
|
|
32216
|
+
width: 48px;
|
|
32217
|
+
width: var(--size-48);
|
|
32218
|
+
height: 48px;
|
|
32219
|
+
height: var(--size-48);
|
|
32220
|
+
-o-object-fit: contain;
|
|
32221
|
+
object-fit: contain;
|
|
32222
|
+
}
|
|
32223
|
+
|
|
32224
|
+
@media (max-width: 767px) {
|
|
32225
|
+
.wds-critical-banner--with-two-actions .wds-prompt__actions-wrapper .wds-Button {
|
|
32226
|
+
flex: 1 1 calc(50% - (var(--Prompt-actions-gap) / 2));
|
|
32227
|
+
min-width: -moz-fit-content;
|
|
32228
|
+
min-width: fit-content;
|
|
32229
|
+
}
|
|
32230
|
+
}
|
|
32231
|
+
|
|
32232
|
+
.wds-critical-banner__description--collapsed {
|
|
32233
|
+
display: -webkit-box;
|
|
32234
|
+
-webkit-line-clamp: 2;
|
|
32235
|
+
-webkit-box-orient: vertical;
|
|
32236
|
+
overflow: hidden;
|
|
32237
|
+
}
|
|
32238
|
+
|
|
32239
|
+
.wds-critical-banner .wds-prompt__content-wrapper {
|
|
32240
|
+
grid-template-columns: auto 1fr auto;
|
|
32241
|
+
align-items: flex-start;
|
|
32242
|
+
}
|
|
32243
|
+
|
|
32244
|
+
.wds-critical-banner__text-wrapper {
|
|
32245
|
+
min-width: 0;
|
|
32246
|
+
}
|
|
32247
|
+
|
|
32248
|
+
@media (max-width: 767px) {
|
|
32249
|
+
.wds-critical-banner .wds-prompt__actions-wrapper {
|
|
32250
|
+
grid-column: span 3;
|
|
32251
|
+
}
|
|
32252
|
+
}
|
|
32253
|
+
|
|
32254
|
+
.wds-expander-toggle {
|
|
32255
|
+
align-self: flex-start;
|
|
32256
|
+
flex-shrink: 0;
|
|
32257
|
+
transition: transform 0.2s ease-in-out;
|
|
32258
|
+
}
|
|
32259
|
+
|
|
32260
|
+
.wds-expander-toggle--collapsed {
|
|
32261
|
+
transform: rotate(180deg);
|
|
32262
|
+
}
|
|
32263
|
+
|
|
32179
32264
|
.wds-radio-group .np-radio:last-child label {
|
|
32180
32265
|
margin-bottom: 0;
|
|
32181
32266
|
}
|
|
@@ -34600,32 +34685,3 @@ html:not([dir="rtl"]) .np-navigation-option {
|
|
|
34600
34685
|
.np-list-item__action {
|
|
34601
34686
|
flex-shrink: 0;
|
|
34602
34687
|
}
|
|
34603
|
-
|
|
34604
|
-
.wds-action-prompt {
|
|
34605
|
-
--Prompt-padding: var(--size-16);
|
|
34606
|
-
--Prompt-actions-gap: var(--size-8);
|
|
34607
|
-
--Prompt-gap: var(--size-10) var(--size-16);
|
|
34608
|
-
--Prompt-border-radius: var(--radius-large);
|
|
34609
|
-
}
|
|
34610
|
-
|
|
34611
|
-
.wds-action-prompt--media-image {
|
|
34612
|
-
width: 48px;
|
|
34613
|
-
width: var(--size-48);
|
|
34614
|
-
height: 48px;
|
|
34615
|
-
height: var(--size-48);
|
|
34616
|
-
-o-object-fit: contain;
|
|
34617
|
-
object-fit: contain;
|
|
34618
|
-
}
|
|
34619
|
-
|
|
34620
|
-
@media (max-width: 767px) {
|
|
34621
|
-
.wds-action-prompt--with-two-actions .wds-prompt__actions-wrapper .wds-Button {
|
|
34622
|
-
flex: 1 1 calc(50% - (var(--Prompt-actions-gap) / 2));
|
|
34623
|
-
min-width: -moz-fit-content;
|
|
34624
|
-
min-width: fit-content;
|
|
34625
|
-
}
|
|
34626
|
-
}
|
|
34627
|
-
|
|
34628
|
-
.wds-action-prompt__content {
|
|
34629
|
-
max-width: calc(48px * 10);
|
|
34630
|
-
max-width: calc(var(--size-48) * 10);
|
|
34631
|
-
}
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
.wds-critical-banner {
|
|
2
|
+
--Prompt-padding: var(--size-16);
|
|
3
|
+
--Prompt-actions-gap: var(--size-8);
|
|
4
|
+
--Prompt-gap: var(--size-10) var(--size-16);
|
|
5
|
+
--Prompt-border-radius: 0;
|
|
6
|
+
}
|
|
7
|
+
.wds-critical-banner--media-image {
|
|
8
|
+
width: 48px;
|
|
9
|
+
width: var(--size-48);
|
|
10
|
+
height: 48px;
|
|
11
|
+
height: var(--size-48);
|
|
12
|
+
-o-object-fit: contain;
|
|
13
|
+
object-fit: contain;
|
|
14
|
+
}
|
|
15
|
+
@media (max-width: 767px) {
|
|
16
|
+
.wds-critical-banner--with-two-actions .wds-prompt__actions-wrapper .wds-Button {
|
|
17
|
+
flex: 1 1 calc(50% - (var(--Prompt-actions-gap) / 2));
|
|
18
|
+
min-width: -moz-fit-content;
|
|
19
|
+
min-width: fit-content;
|
|
20
|
+
}
|
|
21
|
+
}
|
|
22
|
+
.wds-critical-banner__description--collapsed {
|
|
23
|
+
display: -webkit-box;
|
|
24
|
+
-webkit-line-clamp: 2;
|
|
25
|
+
-webkit-box-orient: vertical;
|
|
26
|
+
overflow: hidden;
|
|
27
|
+
}
|
|
28
|
+
.wds-critical-banner .wds-prompt__content-wrapper {
|
|
29
|
+
grid-template-columns: auto 1fr auto;
|
|
30
|
+
align-items: flex-start;
|
|
31
|
+
}
|
|
32
|
+
.wds-critical-banner__text-wrapper {
|
|
33
|
+
min-width: 0;
|
|
34
|
+
}
|
|
35
|
+
@media (max-width: 767px) {
|
|
36
|
+
.wds-critical-banner .wds-prompt__actions-wrapper {
|
|
37
|
+
grid-column: span 3;
|
|
38
|
+
}
|
|
39
|
+
}
|
|
@@ -32,17 +32,18 @@ require('../common/fileType.js');
|
|
|
32
32
|
require('../common/closeButton/CloseButton.messages.js');
|
|
33
33
|
var jsxRuntime = require('react/jsx-runtime');
|
|
34
34
|
var InlinePrompt = require('../prompt/InlinePrompt/InlinePrompt.js');
|
|
35
|
-
require('../statusIcon/StatusIcon.js');
|
|
36
35
|
require('../body/Body.js');
|
|
37
36
|
require('../button/Button.resolver.js');
|
|
37
|
+
require('../sentimentSurface/SentimentSurface.js');
|
|
38
|
+
require('../primitives/PrimitiveButton/PrimitiveButton.js');
|
|
39
|
+
require('../primitives/PrimitiveAnchor/PrimitiveAnchor.js');
|
|
38
40
|
require('../badge/Badge.js');
|
|
39
41
|
require('@wise/art');
|
|
42
|
+
require('../statusIcon/StatusIcon.js');
|
|
40
43
|
require('@transferwise/neptune-validation');
|
|
41
44
|
require('../provider/direction/DirectionProvider.js');
|
|
42
|
-
require('../sentimentSurface/SentimentSurface.js');
|
|
43
|
-
require('../primitives/PrimitiveButton/PrimitiveButton.js');
|
|
44
|
-
require('../primitives/PrimitiveAnchor/PrimitiveAnchor.js');
|
|
45
45
|
require('../link/Link.messages.js');
|
|
46
|
+
require('../prompt/common/Expander/Expander.messages.js');
|
|
46
47
|
var contexts = require('../inputs/contexts.js');
|
|
47
48
|
var TypeaheadInput = require('./typeaheadInput/TypeaheadInput.js');
|
|
48
49
|
var TypeaheadOption = require('./typeaheadOption/TypeaheadOption.js');
|