@transferwise/components 46.121.1 → 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.
Files changed (22) hide show
  1. package/build/i18n/uk.json +28 -6
  2. package/build/i18n/uk.json.js +28 -6
  3. package/build/i18n/uk.json.js.map +1 -1
  4. package/build/i18n/uk.json.mjs +28 -6
  5. package/build/i18n/uk.json.mjs.map +1 -1
  6. package/build/modal/Modal.js +1 -0
  7. package/build/modal/Modal.js.map +1 -1
  8. package/build/modal/Modal.mjs +1 -0
  9. package/build/modal/Modal.mjs.map +1 -1
  10. package/build/prompt/InlinePrompt/InlinePrompt.js +1 -4
  11. package/build/prompt/InlinePrompt/InlinePrompt.js.map +1 -1
  12. package/build/prompt/InlinePrompt/InlinePrompt.mjs +1 -4
  13. package/build/prompt/InlinePrompt/InlinePrompt.mjs.map +1 -1
  14. package/build/types/modal/Modal.d.ts.map +1 -1
  15. package/build/types/prompt/InlinePrompt/InlinePrompt.d.ts +2 -2
  16. package/build/types/prompt/InlinePrompt/InlinePrompt.d.ts.map +1 -1
  17. package/package.json +3 -3
  18. package/src/i18n/uk.json +28 -6
  19. package/src/modal/Modal.tsx +1 -0
  20. package/src/prompt/InlinePrompt/InlinePrompt.spec.tsx +10 -18
  21. package/src/prompt/InlinePrompt/InlinePrompt.story.tsx +9 -6
  22. package/src/prompt/InlinePrompt/InlinePrompt.tsx +4 -7
package/build/i18n/uk.json CHANGED
@@ -8,36 +8,58 @@
8
8
  "neptune.DateInput.month.label": "Місяць",
9
9
  "neptune.DateInput.year.label": "Рік",
10
10
  "neptune.DateInput.year.placeholder": "РРРР",
11
- "neptune.DateLookup.day": "дня",
12
- "neptune.DateLookup.goTo20YearView": "Go to 20 year view",
11
+ "neptune.DateLookup.day": "день",
12
+ "neptune.DateLookup.goTo20YearView": "Показати дані за 20 років",
13
13
  "neptune.DateLookup.month": "місяць",
14
14
  "neptune.DateLookup.next": "уперед",
15
15
  "neptune.DateLookup.previous": "назад",
16
16
  "neptune.DateLookup.selected": "вибрано",
17
17
  "neptune.DateLookup.twentyYears": "20 років",
18
18
  "neptune.DateLookup.year": "рік",
19
- "neptune.FlowNavigation.back": "back to previous step",
19
+ "neptune.ExpressiveMoneyInput.currency.search.placeholder": "Вкажіть валюту / країну",
20
+ "neptune.ExpressiveMoneyInput.currency.select.currency": "Виберіть валюту",
21
+ "neptune.FlowNavigation.back": "назад до попереднього кроку",
20
22
  "neptune.Info.ariaLabel": "Більше відомостей",
21
- "neptune.Link.opensInNewTab": "(opens in new tab)",
23
+ "neptune.Label.optional": "(Необов’язково)",
24
+ "neptune.Link.opensInNewTab": "(відкривається в новій вкладці)",
22
25
  "neptune.MoneyInput.Select.placeholder": "Виберіть варіант…",
26
+ "neptune.MoneyInput.Select.searchPlaceholder": "Введіть валюту або країну",
27
+ "neptune.MoneyInput.Select.selectCurrencyLabel": "Виберіть валюту",
28
+ "neptune.PhoneNumberInput.SelectInput.placeholder": "Виберіть варіант…",
29
+ "neptune.PhoneNumberInput.countryCodeLabel": "Код країни",
30
+ "neptune.PhoneNumberInput.phoneNumberLabel": "Номер телефону",
23
31
  "neptune.Select.searchPlaceholder": "Пошук…",
24
32
  "neptune.SelectInput.noResultsFound": "Нічого не знайдено",
33
+ "neptune.StatusIcon.iconLabel.error": "Помилка:",
34
+ "neptune.StatusIcon.iconLabel.information": "Інформація:",
35
+ "neptune.StatusIcon.iconLabel.pending": "Обробка:",
36
+ "neptune.StatusIcon.iconLabel.success": "Виконано:",
37
+ "neptune.StatusIcon.iconLabel.warning": "Попередження:",
25
38
  "neptune.Summary.statusDone": "Виконано",
26
39
  "neptune.Summary.statusNotDone": "Не виконано",
27
40
  "neptune.Summary.statusPending": "Виконується",
41
+ "neptune.Table.actionHeader": "Дія",
42
+ "neptune.Table.emptyData": "Нічого не знайдено",
43
+ "neptune.Table.loaded": "Дані таблиці завантажено",
44
+ "neptune.Table.loading": "Дані таблиці завантажуються",
45
+ "neptune.Table.refreshPage": "Оновити сторінку",
28
46
  "neptune.Upload.csButtonText": "Завантажити інший файл?",
29
47
  "neptune.Upload.csFailureText": "Не завантажено. Повторіть спробу.",
30
48
  "neptune.Upload.csSuccessText": "Завантаження завершено!",
31
- "neptune.Upload.csTooLargeMessage": "Завантажте файл завбільшки до 5 МБ",
49
+ "neptune.Upload.csTooLargeMessage": "Максимальний розмір файлу – {maxSize} МБ",
50
+ "neptune.Upload.csTooLargeNoLimitMessage": "Надайте файл меншого розміру",
32
51
  "neptune.Upload.csWrongTypeMessage": "Тип файлу не підтримується. Спробуйте завантажити інший файл.",
33
52
  "neptune.Upload.psButtonText": "Скасувати",
34
53
  "neptune.Upload.psProcessingText": "Завантаження…",
54
+ "neptune.Upload.retry": "Повторити",
35
55
  "neptune.Upload.usButtonText": "Або виберіть файл",
36
56
  "neptune.Upload.usDropMessage": "Перетягніть файл, щоб почати завантаження",
37
- "neptune.Upload.usPlaceholder": "Перетягніть файл завбільшки до 5 МБ",
57
+ "neptune.Upload.usPlaceholder": "Перетягніть файл розміром до {maxSize} МБ",
58
+ "neptune.Upload.usPlaceholderNoLimit": "Перетягніть файл",
38
59
  "neptune.UploadButton.allFileTypes": "Усі типи файлів",
39
60
  "neptune.UploadButton.dropFiles": "Перетягніть файл, щоб почати завантаження",
40
61
  "neptune.UploadButton.instructions": "{fileTypes}, до {size} МБ",
62
+ "neptune.UploadButton.maximumFiles": "Максимальна кількість файлів — {maxFiles}.",
41
63
  "neptune.UploadButton.uploadFile": "Завантажити файл",
42
64
  "neptune.UploadButton.uploadFiles": "Завантажити файли",
43
65
  "neptune.UploadInput.deleteModalBody": "Якщо вилучити файл, його буде видалено з нашої системи.",
package/build/i18n/uk.json.js CHANGED
@@ -12,36 +12,58 @@ var uk = {
12
12
  "neptune.DateInput.month.label": "Місяць",
13
13
  "neptune.DateInput.year.label": "Рік",
14
14
  "neptune.DateInput.year.placeholder": "РРРР",
15
- "neptune.DateLookup.day": "дня",
16
- "neptune.DateLookup.goTo20YearView": "Go to 20 year view",
15
+ "neptune.DateLookup.day": "день",
16
+ "neptune.DateLookup.goTo20YearView": "Показати дані за 20 років",
17
17
  "neptune.DateLookup.month": "місяць",
18
18
  "neptune.DateLookup.next": "уперед",
19
19
  "neptune.DateLookup.previous": "назад",
20
20
  "neptune.DateLookup.selected": "вибрано",
21
21
  "neptune.DateLookup.twentyYears": "20 років",
22
22
  "neptune.DateLookup.year": "рік",
23
- "neptune.FlowNavigation.back": "back to previous step",
23
+ "neptune.ExpressiveMoneyInput.currency.search.placeholder": "Вкажіть валюту / країну",
24
+ "neptune.ExpressiveMoneyInput.currency.select.currency": "Виберіть валюту",
25
+ "neptune.FlowNavigation.back": "назад до попереднього кроку",
24
26
  "neptune.Info.ariaLabel": "Більше відомостей",
25
- "neptune.Link.opensInNewTab": "(opens in new tab)",
27
+ "neptune.Label.optional": "(Необов’язково)",
28
+ "neptune.Link.opensInNewTab": "(відкривається в новій вкладці)",
26
29
  "neptune.MoneyInput.Select.placeholder": "Виберіть варіант…",
30
+ "neptune.MoneyInput.Select.searchPlaceholder": "Введіть валюту або країну",
31
+ "neptune.MoneyInput.Select.selectCurrencyLabel": "Виберіть валюту",
32
+ "neptune.PhoneNumberInput.SelectInput.placeholder": "Виберіть варіант…",
33
+ "neptune.PhoneNumberInput.countryCodeLabel": "Код країни",
34
+ "neptune.PhoneNumberInput.phoneNumberLabel": "Номер телефону",
27
35
  "neptune.Select.searchPlaceholder": "Пошук…",
28
36
  "neptune.SelectInput.noResultsFound": "Нічого не знайдено",
37
+ "neptune.StatusIcon.iconLabel.error": "Помилка:",
38
+ "neptune.StatusIcon.iconLabel.information": "Інформація:",
39
+ "neptune.StatusIcon.iconLabel.pending": "Обробка:",
40
+ "neptune.StatusIcon.iconLabel.success": "Виконано:",
41
+ "neptune.StatusIcon.iconLabel.warning": "Попередження:",
29
42
  "neptune.Summary.statusDone": "Виконано",
30
43
  "neptune.Summary.statusNotDone": "Не виконано",
31
44
  "neptune.Summary.statusPending": "Виконується",
45
+ "neptune.Table.actionHeader": "Дія",
46
+ "neptune.Table.emptyData": "Нічого не знайдено",
47
+ "neptune.Table.loaded": "Дані таблиці завантажено",
48
+ "neptune.Table.loading": "Дані таблиці завантажуються",
49
+ "neptune.Table.refreshPage": "Оновити сторінку",
32
50
  "neptune.Upload.csButtonText": "Завантажити інший файл?",
33
51
  "neptune.Upload.csFailureText": "Не завантажено. Повторіть спробу.",
34
52
  "neptune.Upload.csSuccessText": "Завантаження завершено!",
35
- "neptune.Upload.csTooLargeMessage": "Завантажте файл завбільшки до 5 МБ",
53
+ "neptune.Upload.csTooLargeMessage": "Максимальний розмір файлу – {maxSize} МБ",
54
+ "neptune.Upload.csTooLargeNoLimitMessage": "Надайте файл меншого розміру",
36
55
  "neptune.Upload.csWrongTypeMessage": "Тип файлу не підтримується. Спробуйте завантажити інший файл.",
37
56
  "neptune.Upload.psButtonText": "Скасувати",
38
57
  "neptune.Upload.psProcessingText": "Завантаження…",
58
+ "neptune.Upload.retry": "Повторити",
39
59
  "neptune.Upload.usButtonText": "Або виберіть файл",
40
60
  "neptune.Upload.usDropMessage": "Перетягніть файл, щоб почати завантаження",
41
- "neptune.Upload.usPlaceholder": "Перетягніть файл завбільшки до 5 МБ",
61
+ "neptune.Upload.usPlaceholder": "Перетягніть файл розміром до {maxSize} МБ",
62
+ "neptune.Upload.usPlaceholderNoLimit": "Перетягніть файл",
42
63
  "neptune.UploadButton.allFileTypes": "Усі типи файлів",
43
64
  "neptune.UploadButton.dropFiles": "Перетягніть файл, щоб почати завантаження",
44
65
  "neptune.UploadButton.instructions": "{fileTypes}, до {size} МБ",
66
+ "neptune.UploadButton.maximumFiles": "Максимальна кількість файлів — {maxFiles}.",
45
67
  "neptune.UploadButton.uploadFile": "Завантажити файл",
46
68
  "neptune.UploadButton.uploadFiles": "Завантажити файли",
47
69
  "neptune.UploadInput.deleteModalBody": "Якщо вилучити файл, його буде видалено з нашої системи.",
package/build/i18n/uk.json.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"uk.json.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"uk.json.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
package/build/i18n/uk.json.mjs CHANGED
@@ -8,36 +8,58 @@ var uk = {
8
8
  "neptune.DateInput.month.label": "Місяць",
9
9
  "neptune.DateInput.year.label": "Рік",
10
10
  "neptune.DateInput.year.placeholder": "РРРР",
11
- "neptune.DateLookup.day": "дня",
12
- "neptune.DateLookup.goTo20YearView": "Go to 20 year view",
11
+ "neptune.DateLookup.day": "день",
12
+ "neptune.DateLookup.goTo20YearView": "Показати дані за 20 років",
13
13
  "neptune.DateLookup.month": "місяць",
14
14
  "neptune.DateLookup.next": "уперед",
15
15
  "neptune.DateLookup.previous": "назад",
16
16
  "neptune.DateLookup.selected": "вибрано",
17
17
  "neptune.DateLookup.twentyYears": "20 років",
18
18
  "neptune.DateLookup.year": "рік",
19
- "neptune.FlowNavigation.back": "back to previous step",
19
+ "neptune.ExpressiveMoneyInput.currency.search.placeholder": "Вкажіть валюту / країну",
20
+ "neptune.ExpressiveMoneyInput.currency.select.currency": "Виберіть валюту",
21
+ "neptune.FlowNavigation.back": "назад до попереднього кроку",
20
22
  "neptune.Info.ariaLabel": "Більше відомостей",
21
- "neptune.Link.opensInNewTab": "(opens in new tab)",
23
+ "neptune.Label.optional": "(Необов’язково)",
24
+ "neptune.Link.opensInNewTab": "(відкривається в новій вкладці)",
22
25
  "neptune.MoneyInput.Select.placeholder": "Виберіть варіант…",
26
+ "neptune.MoneyInput.Select.searchPlaceholder": "Введіть валюту або країну",
27
+ "neptune.MoneyInput.Select.selectCurrencyLabel": "Виберіть валюту",
28
+ "neptune.PhoneNumberInput.SelectInput.placeholder": "Виберіть варіант…",
29
+ "neptune.PhoneNumberInput.countryCodeLabel": "Код країни",
30
+ "neptune.PhoneNumberInput.phoneNumberLabel": "Номер телефону",
23
31
  "neptune.Select.searchPlaceholder": "Пошук…",
24
32
  "neptune.SelectInput.noResultsFound": "Нічого не знайдено",
33
+ "neptune.StatusIcon.iconLabel.error": "Помилка:",
34
+ "neptune.StatusIcon.iconLabel.information": "Інформація:",
35
+ "neptune.StatusIcon.iconLabel.pending": "Обробка:",
36
+ "neptune.StatusIcon.iconLabel.success": "Виконано:",
37
+ "neptune.StatusIcon.iconLabel.warning": "Попередження:",
25
38
  "neptune.Summary.statusDone": "Виконано",
26
39
  "neptune.Summary.statusNotDone": "Не виконано",
27
40
  "neptune.Summary.statusPending": "Виконується",
41
+ "neptune.Table.actionHeader": "Дія",
42
+ "neptune.Table.emptyData": "Нічого не знайдено",
43
+ "neptune.Table.loaded": "Дані таблиці завантажено",
44
+ "neptune.Table.loading": "Дані таблиці завантажуються",
45
+ "neptune.Table.refreshPage": "Оновити сторінку",
28
46
  "neptune.Upload.csButtonText": "Завантажити інший файл?",
29
47
  "neptune.Upload.csFailureText": "Не завантажено. Повторіть спробу.",
30
48
  "neptune.Upload.csSuccessText": "Завантаження завершено!",
31
- "neptune.Upload.csTooLargeMessage": "Завантажте файл завбільшки до 5 МБ",
49
+ "neptune.Upload.csTooLargeMessage": "Максимальний розмір файлу – {maxSize} МБ",
50
+ "neptune.Upload.csTooLargeNoLimitMessage": "Надайте файл меншого розміру",
32
51
  "neptune.Upload.csWrongTypeMessage": "Тип файлу не підтримується. Спробуйте завантажити інший файл.",
33
52
  "neptune.Upload.psButtonText": "Скасувати",
34
53
  "neptune.Upload.psProcessingText": "Завантаження…",
54
+ "neptune.Upload.retry": "Повторити",
35
55
  "neptune.Upload.usButtonText": "Або виберіть файл",
36
56
  "neptune.Upload.usDropMessage": "Перетягніть файл, щоб почати завантаження",
37
- "neptune.Upload.usPlaceholder": "Перетягніть файл завбільшки до 5 МБ",
57
+ "neptune.Upload.usPlaceholder": "Перетягніть файл розміром до {maxSize} МБ",
58
+ "neptune.Upload.usPlaceholderNoLimit": "Перетягніть файл",
38
59
  "neptune.UploadButton.allFileTypes": "Усі типи файлів",
39
60
  "neptune.UploadButton.dropFiles": "Перетягніть файл, щоб почати завантаження",
40
61
  "neptune.UploadButton.instructions": "{fileTypes}, до {size} МБ",
62
+ "neptune.UploadButton.maximumFiles": "Максимальна кількість файлів — {maxFiles}.",
41
63
  "neptune.UploadButton.uploadFile": "Завантажити файл",
42
64
  "neptune.UploadButton.uploadFiles": "Завантажити файли",
43
65
  "neptune.UploadInput.deleteModalBody": "Якщо вилучити файл, його буде видалено з нашої системи.",
package/build/i18n/uk.json.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"uk.json.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"uk.json.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
package/build/modal/Modal.js CHANGED
@@ -61,6 +61,7 @@ const Modal = ({
61
61
  const overlayId = React.useContext(OverlayIdProvider.OverlayIdContext);
62
62
  return !isMedium ? /*#__PURE__*/jsxRuntime.jsx(Drawer.default, {
63
63
  open: open,
64
+ className: className,
64
65
  headerTitle: title,
65
66
  footerContent: footer,
66
67
  position: position.Position.BOTTOM,
package/build/modal/Modal.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Modal.js","sources":["../../src/modal/Modal.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { ReactNode, useContext, useId, useRef } from 'react';\nimport { CSSTransition } from 'react-transition-group';\nimport { useIntl } from 'react-intl';\n\nimport {\n Size,\n Position,\n PositionTop,\n PositionCenter,\n Scroll,\n CommonProps,\n SizeSmall,\n SizeMedium,\n SizeLarge,\n SizeExtraLarge,\n ScrollContent,\n ScrollViewport,\n Typography,\n} from '../common';\nimport { useLayout } from '../common/hooks';\nimport Dimmer from '../dimmer';\nimport Drawer from '../drawer';\nimport { OverlayIdContext } from '../provider/overlay/OverlayIdProvider';\nimport Title from '../title/Title';\nimport { Cross } from '@transferwise/icons';\nimport IconButton from '../iconButton';\nimport closeBtnMessages from '../common/closeButton/CloseButton.messages';\n\nconst TRANSITION_DURATION_IN_MILLISECONDS = 150;\n\nexport type ModalProps = CommonProps & {\n title?: ReactNode;\n body: ReactNode;\n footer?: ReactNode;\n size?: SizeSmall | SizeMedium | SizeLarge | SizeExtraLarge;\n onClose: () => void;\n onUnmount?: () => void;\n open: boolean;\n scroll?: ScrollContent | ScrollViewport;\n position?: PositionTop | PositionCenter;\n disableDimmerClickToClose?: boolean;\n};\n\nconst Modal = ({\n title = null,\n body,\n footer = null,\n onClose,\n onUnmount,\n className,\n open,\n size = Size.MEDIUM,\n scroll = Scroll.VIEWPORT,\n position = Position.CENTER,\n disableDimmerClickToClose = false,\n ...otherProps\n}: ModalProps) => {\n const intl = useIntl();\n const { isMedium } = useLayout();\n\n const contentReference = useRef<HTMLDivElement>(null);\n const titleId = useId();\n\n const overlayId = useContext(OverlayIdContext);\n\n return !isMedium ? (\n <Drawer\n open={open}\n headerTitle={title}\n footerContent={footer}\n position={Position.BOTTOM}\n onClose={onClose}\n onUnmount={onUnmount}\n >\n {body}\n </Drawer>\n ) : (\n <Dimmer\n open={open}\n scrollable={scroll === Scroll.VIEWPORT}\n contentPosition={position}\n disableClickToClose={disableDimmerClickToClose}\n onClose={onClose}\n onExited={onUnmount}\n >\n <CSSTransition\n nodeRef={contentReference}\n appear\n in={open}\n classNames={{ enterDone: 'in' }}\n timeout={TRANSITION_DURATION_IN_MILLISECONDS}\n unmountOnExit\n >\n <div\n ref={contentReference}\n className={clsx(\n 'tw-modal',\n 'd-flex',\n 'fade',\n 'outline-none',\n scroll === Scroll.CONTENT && 'tw-modal--scrollable',\n className,\n )}\n {...otherProps}\n >\n <div\n id={overlayId}\n role=\"dialog\"\n aria-modal\n aria-labelledby={titleId}\n className={clsx('tw-modal-dialog', 'd-flex', {\n [`tw-modal-${size}`]: size,\n })}\n >\n <div\n className={clsx(\n 'tw-modal-content',\n 'd-flex',\n 'flex-column',\n 'justify-content-between',\n )}\n >\n <div\n className={clsx(\n 'tw-modal-header',\n 'd-flex',\n 'align-items-center',\n title ? 'justify-content-between' : 'justify-content-end',\n 'flex-wrap',\n )}\n >\n {title && (\n <Title id={titleId} type={Typography.TITLE_SUBSECTION} className=\"tw-modal-title\">\n {title}\n </Title>\n )}\n <IconButton\n size={40}\n priority=\"tertiary\"\n aria-label={intl.formatMessage(closeBtnMessages.ariaLabel)}\n onClick={onClose}\n >\n <Cross />\n </IconButton>\n </div>\n <div\n className={clsx('tw-modal-body', {\n 'tw-modal-body--scrollable': scroll === Scroll.CONTENT,\n })}\n >\n {body}\n </div>\n {footer ? (\n <div\n className={clsx('tw-modal-footer', 'd-flex', 'align-items-center', 'flex-wrap')}\n >\n {footer}\n </div>\n ) : (\n <div className=\"m-t-3\" />\n )}\n </div>\n </div>\n </div>\n </CSSTransition>\n </Dimmer>\n );\n};\n\nexport default Modal;\n"],"names":["TRANSITION_DURATION_IN_MILLISECONDS","Modal","title","body","footer","onClose","onUnmount","className","open","size","Size","MEDIUM","scroll","Scroll","VIEWPORT","position","Position","CENTER","disableDimmerClickToClose","otherProps","intl","useIntl","isMedium","useLayout","contentReference","useRef","titleId","useId","overlayId","useContext","OverlayIdContext","_jsx","Drawer","headerTitle","footerContent","BOTTOM","children","Dimmer","scrollable","contentPosition","disableClickToClose","onExited","CSSTransition","nodeRef","appear","in","classNames","enterDone","timeout","unmountOnExit","ref","clsx","CONTENT","id","role","_jsxs","Title","type","Typography","TITLE_SUBSECTION","IconButton","priority","formatMessage","closeBtnMessages","ariaLabel","onClick","Cross"],"mappings":"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"}
1
+ {"version":3,"file":"Modal.js","sources":["../../src/modal/Modal.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { ReactNode, useContext, useId, useRef } from 'react';\nimport { CSSTransition } from 'react-transition-group';\nimport { useIntl } from 'react-intl';\n\nimport {\n Size,\n Position,\n PositionTop,\n PositionCenter,\n Scroll,\n CommonProps,\n SizeSmall,\n SizeMedium,\n SizeLarge,\n SizeExtraLarge,\n ScrollContent,\n ScrollViewport,\n Typography,\n} from '../common';\nimport { useLayout } from '../common/hooks';\nimport Dimmer from '../dimmer';\nimport Drawer from '../drawer';\nimport { OverlayIdContext } from '../provider/overlay/OverlayIdProvider';\nimport Title from '../title/Title';\nimport { Cross } from '@transferwise/icons';\nimport IconButton from '../iconButton';\nimport closeBtnMessages from '../common/closeButton/CloseButton.messages';\n\nconst TRANSITION_DURATION_IN_MILLISECONDS = 150;\n\nexport type ModalProps = CommonProps & {\n title?: ReactNode;\n body: ReactNode;\n footer?: ReactNode;\n size?: SizeSmall | SizeMedium | SizeLarge | SizeExtraLarge;\n onClose: () => void;\n onUnmount?: () => void;\n open: boolean;\n scroll?: ScrollContent | ScrollViewport;\n position?: PositionTop | PositionCenter;\n disableDimmerClickToClose?: boolean;\n};\n\nconst Modal = ({\n title = null,\n body,\n footer = null,\n onClose,\n onUnmount,\n className,\n open,\n size = Size.MEDIUM,\n scroll = Scroll.VIEWPORT,\n position = Position.CENTER,\n disableDimmerClickToClose = false,\n ...otherProps\n}: ModalProps) => {\n const intl = useIntl();\n const { isMedium } = useLayout();\n\n const contentReference = useRef<HTMLDivElement>(null);\n const titleId = useId();\n\n const overlayId = useContext(OverlayIdContext);\n\n return !isMedium ? (\n <Drawer\n open={open}\n className={className}\n headerTitle={title}\n footerContent={footer}\n position={Position.BOTTOM}\n onClose={onClose}\n onUnmount={onUnmount}\n >\n {body}\n </Drawer>\n ) : (\n <Dimmer\n open={open}\n scrollable={scroll === Scroll.VIEWPORT}\n contentPosition={position}\n disableClickToClose={disableDimmerClickToClose}\n onClose={onClose}\n onExited={onUnmount}\n >\n <CSSTransition\n nodeRef={contentReference}\n appear\n in={open}\n classNames={{ enterDone: 'in' }}\n timeout={TRANSITION_DURATION_IN_MILLISECONDS}\n unmountOnExit\n >\n <div\n ref={contentReference}\n className={clsx(\n 'tw-modal',\n 'd-flex',\n 'fade',\n 'outline-none',\n scroll === Scroll.CONTENT && 'tw-modal--scrollable',\n className,\n )}\n {...otherProps}\n >\n <div\n id={overlayId}\n role=\"dialog\"\n aria-modal\n aria-labelledby={titleId}\n className={clsx('tw-modal-dialog', 'd-flex', {\n [`tw-modal-${size}`]: size,\n })}\n >\n <div\n className={clsx(\n 'tw-modal-content',\n 'd-flex',\n 'flex-column',\n 'justify-content-between',\n )}\n >\n <div\n className={clsx(\n 'tw-modal-header',\n 'd-flex',\n 'align-items-center',\n title ? 'justify-content-between' : 'justify-content-end',\n 'flex-wrap',\n )}\n >\n {title && (\n <Title id={titleId} type={Typography.TITLE_SUBSECTION} className=\"tw-modal-title\">\n {title}\n </Title>\n )}\n <IconButton\n size={40}\n priority=\"tertiary\"\n aria-label={intl.formatMessage(closeBtnMessages.ariaLabel)}\n onClick={onClose}\n >\n <Cross />\n </IconButton>\n </div>\n <div\n className={clsx('tw-modal-body', {\n 'tw-modal-body--scrollable': scroll === Scroll.CONTENT,\n })}\n >\n {body}\n </div>\n {footer ? (\n <div\n className={clsx('tw-modal-footer', 'd-flex', 'align-items-center', 'flex-wrap')}\n >\n {footer}\n </div>\n ) : (\n <div className=\"m-t-3\" />\n )}\n </div>\n </div>\n </div>\n </CSSTransition>\n </Dimmer>\n );\n};\n\nexport default Modal;\n"],"names":["TRANSITION_DURATION_IN_MILLISECONDS","Modal","title","body","footer","onClose","onUnmount","className","open","size","Size","MEDIUM","scroll","Scroll","VIEWPORT","position","Position","CENTER","disableDimmerClickToClose","otherProps","intl","useIntl","isMedium","useLayout","contentReference","useRef","titleId","useId","overlayId","useContext","OverlayIdContext","_jsx","Drawer","headerTitle","footerContent","BOTTOM","children","Dimmer","scrollable","contentPosition","disableClickToClose","onExited","CSSTransition","nodeRef","appear","in","classNames","enterDone","timeout","unmountOnExit","ref","clsx","CONTENT","id","role","_jsxs","Title","type","Typography","TITLE_SUBSECTION","IconButton","priority","formatMessage","closeBtnMessages","ariaLabel","onClick","Cross"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6BA,MAAMA,mCAAmC,GAAG,GAAG;AAe/C,MAAMC,KAAK,GAAGA,CAAC;AACbC,EAAAA,KAAK,GAAG,IAAI;EACZC,IAAI;AACJC,EAAAA,MAAM,GAAG,IAAI;EACbC,OAAO;EACPC,SAAS;EACTC,SAAS;EACTC,IAAI;QACJC,MAAI,GAAGC,SAAI,CAACC,MAAM;UAClBC,QAAM,GAAGC,aAAM,CAACC,QAAQ;YACxBC,UAAQ,GAAGC,iBAAQ,CAACC,MAAM;AAC1BC,EAAAA,yBAAyB,GAAG,KAAK;EACjC,GAAGC;AAAU,CACF,KAAI;AACf,EAAA,MAAMC,IAAI,GAAGC,iBAAO,EAAE;EACtB,MAAM;AAAEC,IAAAA;GAAU,GAAGC,mBAAS,EAAE;AAEhC,EAAA,MAAMC,gBAAgB,GAAGC,YAAM,CAAiB,IAAI,CAAC;AACrD,EAAA,MAAMC,OAAO,GAAGC,WAAK,EAAE;AAEvB,EAAA,MAAMC,SAAS,GAAGC,gBAAU,CAACC,kCAAgB,CAAC;AAE9C,EAAA,OAAO,CAACR,QAAQ,gBACdS,cAAA,CAACC,cAAM,EAAA;AACLxB,IAAAA,IAAI,EAAEA,IAAK;AACXD,IAAAA,SAAS,EAAEA,SAAU;AACrB0B,IAAAA,WAAW,EAAE/B,KAAM;AACnBgC,IAAAA,aAAa,EAAE9B,MAAO;IACtBW,QAAQ,EAAEC,iBAAQ,CAACmB,MAAO;AAC1B9B,IAAAA,OAAO,EAAEA,OAAQ;AACjBC,IAAAA,SAAS,EAAEA,SAAU;AAAA8B,IAAAA,QAAA,EAEpBjC;AAAI,GACC,CAAC,gBAET4B,cAAA,CAACM,cAAM,EAAA;AACL7B,IAAAA,IAAI,EAAEA,IAAK;AACX8B,IAAAA,UAAU,EAAE1B,QAAM,KAAKC,aAAM,CAACC,QAAS;AACvCyB,IAAAA,eAAe,EAAExB,UAAS;AAC1ByB,IAAAA,mBAAmB,EAAEtB,yBAA0B;AAC/Cb,IAAAA,OAAO,EAAEA,OAAQ;AACjBoC,IAAAA,QAAQ,EAAEnC,SAAU;IAAA8B,QAAA,eAEpBL,cAAA,CAACW,kCAAa,EAAA;AACZC,MAAAA,OAAO,EAAEnB,gBAAiB;MAC1BoB,MAAM,EAAA,IAAA;AACNC,MAAAA,EAAE,EAAErC,IAAK;AACTsC,MAAAA,UAAU,EAAE;AAAEC,QAAAA,SAAS,EAAE;OAAO;AAChCC,MAAAA,OAAO,EAAEhD,mCAAoC;MAC7CiD,aAAa,EAAA,IAAA;AAAAb,MAAAA,QAAA,eAEbL,cAAA,CAAA,KAAA,EAAA;AACEmB,QAAAA,GAAG,EAAE1B,gBAAiB;QACtBjB,SAAS,EAAE4C,SAAI,CACb,UAAU,EACV,QAAQ,EACR,MAAM,EACN,cAAc,EACdvC,QAAM,KAAKC,aAAM,CAACuC,OAAO,IAAI,sBAAsB,EACnD7C,SAAS,CACT;AAAA,QAAA,GACEY,UAAU;AAAAiB,QAAAA,QAAA,eAEdL,cAAA,CAAA,KAAA,EAAA;AACEsB,UAAAA,EAAE,EAAEzB,SAAU;AACd0B,UAAAA,IAAI,EAAC,QAAQ;UACb,YAAA,EAAA,IAAU;AACV,UAAA,iBAAA,EAAiB5B,OAAQ;AACzBnB,UAAAA,SAAS,EAAE4C,SAAI,CAAC,iBAAiB,EAAE,QAAQ,EAAE;YAC3C,CAAC,CAAA,SAAA,EAAY1C,MAAI,CAAA,CAAE,GAAGA;AACvB,WAAA,CAAE;AAAA2B,UAAAA,QAAA,eAEHmB,eAAA,CAAA,KAAA,EAAA;YACEhD,SAAS,EAAE4C,SAAI,CACb,kBAAkB,EAClB,QAAQ,EACR,aAAa,EACb,yBAAyB,CACzB;AAAAf,YAAAA,QAAA,gBAEFmB,eAAA,CAAA,KAAA,EAAA;AACEhD,cAAAA,SAAS,EAAE4C,SAAI,CACb,iBAAiB,EACjB,QAAQ,EACR,oBAAoB,EACpBjD,KAAK,GAAG,yBAAyB,GAAG,qBAAqB,EACzD,WAAW,CACX;AAAAkC,cAAAA,QAAA,EAAA,CAEDlC,KAAK,iBACJ6B,cAAA,CAACyB,aAAK,EAAA;AAACH,gBAAAA,EAAE,EAAE3B,OAAQ;gBAAC+B,IAAI,EAAEC,qBAAU,CAACC,gBAAiB;AAACpD,gBAAAA,SAAS,EAAC,gBAAgB;AAAA6B,gBAAAA,QAAA,EAC9ElC;AAAK,eACD,CACR,eACD6B,cAAA,CAAC6B,kBAAU,EAAA;AACTnD,gBAAAA,IAAI,EAAE,EAAG;AACToD,gBAAAA,QAAQ,EAAC,UAAU;AACnB,gBAAA,YAAA,EAAYzC,IAAI,CAAC0C,aAAa,CAACC,4BAAgB,CAACC,SAAS,CAAE;AAC3DC,gBAAAA,OAAO,EAAE5D,OAAQ;AAAA+B,gBAAAA,QAAA,eAEjBL,cAAA,CAACmC,WAAK,EAAA,EAAA;AACR,eAAY,CACd;aAAK,CACL,eAAAnC,cAAA,CAAA,KAAA,EAAA;AACExB,cAAAA,SAAS,EAAE4C,SAAI,CAAC,eAAe,EAAE;AAC/B,gBAAA,2BAA2B,EAAEvC,QAAM,KAAKC,aAAM,CAACuC;AAChD,eAAA,CAAE;AAAAhB,cAAAA,QAAA,EAEFjC;AAAI,aACF,CACL,EAACC,MAAM,gBACL2B,cAAA,CAAA,KAAA,EAAA;cACExB,SAAS,EAAE4C,SAAI,CAAC,iBAAiB,EAAE,QAAQ,EAAE,oBAAoB,EAAE,WAAW,CAAE;AAAAf,cAAAA,QAAA,EAE/EhC;aACE,CAAC,gBAEN2B,cAAA,CAAA,KAAA,EAAA;AAAKxB,cAAAA,SAAS,EAAC;AAAO,aAAA,CACvB;WACE;SACF;OACF;KACQ;AACjB,GAAQ,CACT;AACH;;;;"}
package/build/modal/Modal.mjs CHANGED
@@ -57,6 +57,7 @@ const Modal = ({
57
57
  const overlayId = useContext(OverlayIdContext);
58
58
  return !isMedium ? /*#__PURE__*/jsx(Drawer, {
59
59
  open: open,
60
+ className: className,
60
61
  headerTitle: title,
61
62
  footerContent: footer,
62
63
  position: Position.BOTTOM,
package/build/modal/Modal.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Modal.mjs","sources":["../../src/modal/Modal.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { ReactNode, useContext, useId, useRef } from 'react';\nimport { CSSTransition } from 'react-transition-group';\nimport { useIntl } from 'react-intl';\n\nimport {\n Size,\n Position,\n PositionTop,\n PositionCenter,\n Scroll,\n CommonProps,\n SizeSmall,\n SizeMedium,\n SizeLarge,\n SizeExtraLarge,\n ScrollContent,\n ScrollViewport,\n Typography,\n} from '../common';\nimport { useLayout } from '../common/hooks';\nimport Dimmer from '../dimmer';\nimport Drawer from '../drawer';\nimport { OverlayIdContext } from '../provider/overlay/OverlayIdProvider';\nimport Title from '../title/Title';\nimport { Cross } from '@transferwise/icons';\nimport IconButton from '../iconButton';\nimport closeBtnMessages from '../common/closeButton/CloseButton.messages';\n\nconst TRANSITION_DURATION_IN_MILLISECONDS = 150;\n\nexport type ModalProps = CommonProps & {\n title?: ReactNode;\n body: ReactNode;\n footer?: ReactNode;\n size?: SizeSmall | SizeMedium | SizeLarge | SizeExtraLarge;\n onClose: () => void;\n onUnmount?: () => void;\n open: boolean;\n scroll?: ScrollContent | ScrollViewport;\n position?: PositionTop | PositionCenter;\n disableDimmerClickToClose?: boolean;\n};\n\nconst Modal = ({\n title = null,\n body,\n footer = null,\n onClose,\n onUnmount,\n className,\n open,\n size = Size.MEDIUM,\n scroll = Scroll.VIEWPORT,\n position = Position.CENTER,\n disableDimmerClickToClose = false,\n ...otherProps\n}: ModalProps) => {\n const intl = useIntl();\n const { isMedium } = useLayout();\n\n const contentReference = useRef<HTMLDivElement>(null);\n const titleId = useId();\n\n const overlayId = useContext(OverlayIdContext);\n\n return !isMedium ? (\n <Drawer\n open={open}\n headerTitle={title}\n footerContent={footer}\n position={Position.BOTTOM}\n onClose={onClose}\n onUnmount={onUnmount}\n >\n {body}\n </Drawer>\n ) : (\n <Dimmer\n open={open}\n scrollable={scroll === Scroll.VIEWPORT}\n contentPosition={position}\n disableClickToClose={disableDimmerClickToClose}\n onClose={onClose}\n onExited={onUnmount}\n >\n <CSSTransition\n nodeRef={contentReference}\n appear\n in={open}\n classNames={{ enterDone: 'in' }}\n timeout={TRANSITION_DURATION_IN_MILLISECONDS}\n unmountOnExit\n >\n <div\n ref={contentReference}\n className={clsx(\n 'tw-modal',\n 'd-flex',\n 'fade',\n 'outline-none',\n scroll === Scroll.CONTENT && 'tw-modal--scrollable',\n className,\n )}\n {...otherProps}\n >\n <div\n id={overlayId}\n role=\"dialog\"\n aria-modal\n aria-labelledby={titleId}\n className={clsx('tw-modal-dialog', 'd-flex', {\n [`tw-modal-${size}`]: size,\n })}\n >\n <div\n className={clsx(\n 'tw-modal-content',\n 'd-flex',\n 'flex-column',\n 'justify-content-between',\n )}\n >\n <div\n className={clsx(\n 'tw-modal-header',\n 'd-flex',\n 'align-items-center',\n title ? 'justify-content-between' : 'justify-content-end',\n 'flex-wrap',\n )}\n >\n {title && (\n <Title id={titleId} type={Typography.TITLE_SUBSECTION} className=\"tw-modal-title\">\n {title}\n </Title>\n )}\n <IconButton\n size={40}\n priority=\"tertiary\"\n aria-label={intl.formatMessage(closeBtnMessages.ariaLabel)}\n onClick={onClose}\n >\n <Cross />\n </IconButton>\n </div>\n <div\n className={clsx('tw-modal-body', {\n 'tw-modal-body--scrollable': scroll === Scroll.CONTENT,\n })}\n >\n {body}\n </div>\n {footer ? (\n <div\n className={clsx('tw-modal-footer', 'd-flex', 'align-items-center', 'flex-wrap')}\n >\n {footer}\n </div>\n ) : (\n <div className=\"m-t-3\" />\n )}\n </div>\n </div>\n </div>\n </CSSTransition>\n </Dimmer>\n );\n};\n\nexport default Modal;\n"],"names":["TRANSITION_DURATION_IN_MILLISECONDS","Modal","title","body","footer","onClose","onUnmount","className","open","size","Size","MEDIUM","scroll","Scroll","VIEWPORT","position","Position","CENTER","disableDimmerClickToClose","otherProps","intl","useIntl","isMedium","useLayout","contentReference","useRef","titleId","useId","overlayId","useContext","OverlayIdContext","_jsx","Drawer","headerTitle","footerContent","BOTTOM","children","Dimmer","scrollable","contentPosition","disableClickToClose","onExited","CSSTransition","nodeRef","appear","in","classNames","enterDone","timeout","unmountOnExit","ref","clsx","CONTENT","id","role","_jsxs","Title","type","Typography","TITLE_SUBSECTION","IconButton","priority","formatMessage","closeBtnMessages","ariaLabel","onClick","Cross"],"mappings":"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"}
1
+ {"version":3,"file":"Modal.mjs","sources":["../../src/modal/Modal.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { ReactNode, useContext, useId, useRef } from 'react';\nimport { CSSTransition } from 'react-transition-group';\nimport { useIntl } from 'react-intl';\n\nimport {\n Size,\n Position,\n PositionTop,\n PositionCenter,\n Scroll,\n CommonProps,\n SizeSmall,\n SizeMedium,\n SizeLarge,\n SizeExtraLarge,\n ScrollContent,\n ScrollViewport,\n Typography,\n} from '../common';\nimport { useLayout } from '../common/hooks';\nimport Dimmer from '../dimmer';\nimport Drawer from '../drawer';\nimport { OverlayIdContext } from '../provider/overlay/OverlayIdProvider';\nimport Title from '../title/Title';\nimport { Cross } from '@transferwise/icons';\nimport IconButton from '../iconButton';\nimport closeBtnMessages from '../common/closeButton/CloseButton.messages';\n\nconst TRANSITION_DURATION_IN_MILLISECONDS = 150;\n\nexport type ModalProps = CommonProps & {\n title?: ReactNode;\n body: ReactNode;\n footer?: ReactNode;\n size?: SizeSmall | SizeMedium | SizeLarge | SizeExtraLarge;\n onClose: () => void;\n onUnmount?: () => void;\n open: boolean;\n scroll?: ScrollContent | ScrollViewport;\n position?: PositionTop | PositionCenter;\n disableDimmerClickToClose?: boolean;\n};\n\nconst Modal = ({\n title = null,\n body,\n footer = null,\n onClose,\n onUnmount,\n className,\n open,\n size = Size.MEDIUM,\n scroll = Scroll.VIEWPORT,\n position = Position.CENTER,\n disableDimmerClickToClose = false,\n ...otherProps\n}: ModalProps) => {\n const intl = useIntl();\n const { isMedium } = useLayout();\n\n const contentReference = useRef<HTMLDivElement>(null);\n const titleId = useId();\n\n const overlayId = useContext(OverlayIdContext);\n\n return !isMedium ? (\n <Drawer\n open={open}\n className={className}\n headerTitle={title}\n footerContent={footer}\n position={Position.BOTTOM}\n onClose={onClose}\n onUnmount={onUnmount}\n >\n {body}\n </Drawer>\n ) : (\n <Dimmer\n open={open}\n scrollable={scroll === Scroll.VIEWPORT}\n contentPosition={position}\n disableClickToClose={disableDimmerClickToClose}\n onClose={onClose}\n onExited={onUnmount}\n >\n <CSSTransition\n nodeRef={contentReference}\n appear\n in={open}\n classNames={{ enterDone: 'in' }}\n timeout={TRANSITION_DURATION_IN_MILLISECONDS}\n unmountOnExit\n >\n <div\n ref={contentReference}\n className={clsx(\n 'tw-modal',\n 'd-flex',\n 'fade',\n 'outline-none',\n scroll === Scroll.CONTENT && 'tw-modal--scrollable',\n className,\n )}\n {...otherProps}\n >\n <div\n id={overlayId}\n role=\"dialog\"\n aria-modal\n aria-labelledby={titleId}\n className={clsx('tw-modal-dialog', 'd-flex', {\n [`tw-modal-${size}`]: size,\n })}\n >\n <div\n className={clsx(\n 'tw-modal-content',\n 'd-flex',\n 'flex-column',\n 'justify-content-between',\n )}\n >\n <div\n className={clsx(\n 'tw-modal-header',\n 'd-flex',\n 'align-items-center',\n title ? 'justify-content-between' : 'justify-content-end',\n 'flex-wrap',\n )}\n >\n {title && (\n <Title id={titleId} type={Typography.TITLE_SUBSECTION} className=\"tw-modal-title\">\n {title}\n </Title>\n )}\n <IconButton\n size={40}\n priority=\"tertiary\"\n aria-label={intl.formatMessage(closeBtnMessages.ariaLabel)}\n onClick={onClose}\n >\n <Cross />\n </IconButton>\n </div>\n <div\n className={clsx('tw-modal-body', {\n 'tw-modal-body--scrollable': scroll === Scroll.CONTENT,\n })}\n >\n {body}\n </div>\n {footer ? (\n <div\n className={clsx('tw-modal-footer', 'd-flex', 'align-items-center', 'flex-wrap')}\n >\n {footer}\n </div>\n ) : (\n <div className=\"m-t-3\" />\n )}\n </div>\n </div>\n </div>\n </CSSTransition>\n </Dimmer>\n );\n};\n\nexport default Modal;\n"],"names":["TRANSITION_DURATION_IN_MILLISECONDS","Modal","title","body","footer","onClose","onUnmount","className","open","size","Size","MEDIUM","scroll","Scroll","VIEWPORT","position","Position","CENTER","disableDimmerClickToClose","otherProps","intl","useIntl","isMedium","useLayout","contentReference","useRef","titleId","useId","overlayId","useContext","OverlayIdContext","_jsx","Drawer","headerTitle","footerContent","BOTTOM","children","Dimmer","scrollable","contentPosition","disableClickToClose","onExited","CSSTransition","nodeRef","appear","in","classNames","enterDone","timeout","unmountOnExit","ref","clsx","CONTENT","id","role","_jsxs","Title","type","Typography","TITLE_SUBSECTION","IconButton","priority","formatMessage","closeBtnMessages","ariaLabel","onClick","Cross"],"mappings":"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"}
package/build/prompt/InlinePrompt/InlinePrompt.js CHANGED
@@ -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
package/build/prompt/InlinePrompt/InlinePrompt.js.map CHANGED
@@ -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 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 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--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;AACA,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;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,iBAAIO,cAAA,CAACK,aAAO,EAAA;AAACF,QAAAA,KAAK,EAAET;AAAW,OAAA,CAAG;AAChD,IAAA;IAEA,oBAAOM,cAAA,CAACM,kBAAU,EAAA;AAACJ,MAAAA,IAAI,EAAE,EAAG;AAAChB,MAAAA,SAAS,EAAEA,WAAU;AAACqB,MAAAA,SAAS,EAAEb;AAAW,KAAA,CAAG;EAC9E,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;;;;"}
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;;;;"}
package/build/prompt/InlinePrompt/InlinePrompt.mjs CHANGED
@@ -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
package/build/prompt/InlinePrompt/InlinePrompt.mjs.map CHANGED
@@ -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 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 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--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;AACA,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;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,iBAAIO,GAAA,CAACK,OAAO,EAAA;AAACF,QAAAA,KAAK,EAAET;AAAW,OAAA,CAAG;AAChD,IAAA;IAEA,oBAAOM,GAAA,CAACM,UAAU,EAAA;AAACJ,MAAAA,IAAI,EAAE,EAAG;AAAChB,MAAAA,SAAS,EAAEA,SAAU;AAACqB,MAAAA,SAAS,EAAEb;AAAW,KAAA,CAAG;EAC9E,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;;;;"}
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;;;;"}
package/build/types/modal/Modal.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../../src/modal/Modal.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAA6B,MAAM,OAAO,CAAC;AAI7D,OAAO,EAGL,WAAW,EACX,cAAc,EAEd,WAAW,EACX,SAAS,EACT,UAAU,EACV,SAAS,EACT,cAAc,EACd,aAAa,EACb,cAAc,EAEf,MAAM,WAAW,CAAC;AAYnB,MAAM,MAAM,UAAU,GAAG,WAAW,GAAG;IACrC,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,IAAI,EAAE,SAAS,CAAC;IAChB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,IAAI,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,SAAS,GAAG,cAAc,CAAC;IAC3D,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,IAAI,EAAE,OAAO,CAAC;IACd,MAAM,CAAC,EAAE,aAAa,GAAG,cAAc,CAAC;IACxC,QAAQ,CAAC,EAAE,WAAW,GAAG,cAAc,CAAC;IACxC,yBAAyB,CAAC,EAAE,OAAO,CAAC;CACrC,CAAC;AAEF,QAAA,MAAM,KAAK,GAAI,gIAaZ,UAAU,gCA+GZ,CAAC;AAEF,eAAe,KAAK,CAAC"}
1
+ {"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../../src/modal/Modal.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAA6B,MAAM,OAAO,CAAC;AAI7D,OAAO,EAGL,WAAW,EACX,cAAc,EAEd,WAAW,EACX,SAAS,EACT,UAAU,EACV,SAAS,EACT,cAAc,EACd,aAAa,EACb,cAAc,EAEf,MAAM,WAAW,CAAC;AAYnB,MAAM,MAAM,UAAU,GAAG,WAAW,GAAG;IACrC,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,IAAI,EAAE,SAAS,CAAC;IAChB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,IAAI,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,SAAS,GAAG,cAAc,CAAC;IAC3D,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,IAAI,EAAE,OAAO,CAAC;IACd,MAAM,CAAC,EAAE,aAAa,GAAG,cAAc,CAAC;IACxC,QAAQ,CAAC,EAAE,WAAW,GAAG,cAAc,CAAC;IACxC,yBAAyB,CAAC,EAAE,OAAO,CAAC;CACrC,CAAC;AAEF,QAAA,MAAM,KAAK,GAAI,gIAaZ,UAAU,gCAgHZ,CAAC;AAEF,eAAe,KAAK,CAAC"}
package/build/types/prompt/InlinePrompt/InlinePrompt.d.ts CHANGED
@@ -16,12 +16,12 @@ export type InlinePromptProps = {
16
16
  */
17
17
  muted?: boolean;
18
18
  /**
19
- * Icon override for `proposition` and `positive` sentiments. Unsupported for remaining ones.
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
  /**
package/build/types/prompt/InlinePrompt/InlinePrompt.d.ts.map CHANGED
@@ -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,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,gCAgDnB,CAAC"}
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
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@transferwise/components",
3
- "version": "46.121.1",
3
+ "version": "46.122.0",
4
4
  "description": "Neptune React components",
5
5
  "license": "Apache-2.0",
6
6
  "repository": {
@@ -58,7 +58,7 @@
58
58
  "@testing-library/jest-dom": "^6.9.1",
59
59
  "@testing-library/react": "^16.3.1",
60
60
  "@testing-library/user-event": "^14.6.1",
61
- "@transferwise/icons": "^4.0.1",
61
+ "@transferwise/icons": "^4.0.2",
62
62
  "@tsconfig/recommended": "^1.0.13",
63
63
  "@types/babel__core": "^7.20.5",
64
64
  "@types/commonmark": "^0.27.10",
@@ -119,7 +119,7 @@
119
119
  "merge-props": "^6.0.0",
120
120
  "react-popper": "^2.3.0",
121
121
  "react-transition-group": "^4.4.5",
122
- "virtua": "^0.48.2"
122
+ "virtua": "^0.48.3"
123
123
  },
124
124
  "publishConfig": {
125
125
  "access": "public",
package/src/i18n/uk.json CHANGED
@@ -8,36 +8,58 @@
8
8
  "neptune.DateInput.month.label": "Місяць",
9
9
  "neptune.DateInput.year.label": "Рік",
10
10
  "neptune.DateInput.year.placeholder": "РРРР",
11
- "neptune.DateLookup.day": "дня",
12
- "neptune.DateLookup.goTo20YearView": "Go to 20 year view",
11
+ "neptune.DateLookup.day": "день",
12
+ "neptune.DateLookup.goTo20YearView": "Показати дані за 20 років",
13
13
  "neptune.DateLookup.month": "місяць",
14
14
  "neptune.DateLookup.next": "уперед",
15
15
  "neptune.DateLookup.previous": "назад",
16
16
  "neptune.DateLookup.selected": "вибрано",
17
17
  "neptune.DateLookup.twentyYears": "20 років",
18
18
  "neptune.DateLookup.year": "рік",
19
- "neptune.FlowNavigation.back": "back to previous step",
19
+ "neptune.ExpressiveMoneyInput.currency.search.placeholder": "Вкажіть валюту / країну",
20
+ "neptune.ExpressiveMoneyInput.currency.select.currency": "Виберіть валюту",
21
+ "neptune.FlowNavigation.back": "назад до попереднього кроку",
20
22
  "neptune.Info.ariaLabel": "Більше відомостей",
21
- "neptune.Link.opensInNewTab": "(opens in new tab)",
23
+ "neptune.Label.optional": "(Необов’язково)",
24
+ "neptune.Link.opensInNewTab": "(відкривається в новій вкладці)",
22
25
  "neptune.MoneyInput.Select.placeholder": "Виберіть варіант…",
26
+ "neptune.MoneyInput.Select.searchPlaceholder": "Введіть валюту або країну",
27
+ "neptune.MoneyInput.Select.selectCurrencyLabel": "Виберіть валюту",
28
+ "neptune.PhoneNumberInput.SelectInput.placeholder": "Виберіть варіант…",
29
+ "neptune.PhoneNumberInput.countryCodeLabel": "Код країни",
30
+ "neptune.PhoneNumberInput.phoneNumberLabel": "Номер телефону",
23
31
  "neptune.Select.searchPlaceholder": "Пошук…",
24
32
  "neptune.SelectInput.noResultsFound": "Нічого не знайдено",
33
+ "neptune.StatusIcon.iconLabel.error": "Помилка:",
34
+ "neptune.StatusIcon.iconLabel.information": "Інформація:",
35
+ "neptune.StatusIcon.iconLabel.pending": "Обробка:",
36
+ "neptune.StatusIcon.iconLabel.success": "Виконано:",
37
+ "neptune.StatusIcon.iconLabel.warning": "Попередження:",
25
38
  "neptune.Summary.statusDone": "Виконано",
26
39
  "neptune.Summary.statusNotDone": "Не виконано",
27
40
  "neptune.Summary.statusPending": "Виконується",
41
+ "neptune.Table.actionHeader": "Дія",
42
+ "neptune.Table.emptyData": "Нічого не знайдено",
43
+ "neptune.Table.loaded": "Дані таблиці завантажено",
44
+ "neptune.Table.loading": "Дані таблиці завантажуються",
45
+ "neptune.Table.refreshPage": "Оновити сторінку",
28
46
  "neptune.Upload.csButtonText": "Завантажити інший файл?",
29
47
  "neptune.Upload.csFailureText": "Не завантажено. Повторіть спробу.",
30
48
  "neptune.Upload.csSuccessText": "Завантаження завершено!",
31
- "neptune.Upload.csTooLargeMessage": "Завантажте файл завбільшки до 5 МБ",
49
+ "neptune.Upload.csTooLargeMessage": "Максимальний розмір файлу – {maxSize} МБ",
50
+ "neptune.Upload.csTooLargeNoLimitMessage": "Надайте файл меншого розміру",
32
51
  "neptune.Upload.csWrongTypeMessage": "Тип файлу не підтримується. Спробуйте завантажити інший файл.",
33
52
  "neptune.Upload.psButtonText": "Скасувати",
34
53
  "neptune.Upload.psProcessingText": "Завантаження…",
54
+ "neptune.Upload.retry": "Повторити",
35
55
  "neptune.Upload.usButtonText": "Або виберіть файл",
36
56
  "neptune.Upload.usDropMessage": "Перетягніть файл, щоб почати завантаження",
37
- "neptune.Upload.usPlaceholder": "Перетягніть файл завбільшки до 5 МБ",
57
+ "neptune.Upload.usPlaceholder": "Перетягніть файл розміром до {maxSize} МБ",
58
+ "neptune.Upload.usPlaceholderNoLimit": "Перетягніть файл",
38
59
  "neptune.UploadButton.allFileTypes": "Усі типи файлів",
39
60
  "neptune.UploadButton.dropFiles": "Перетягніть файл, щоб почати завантаження",
40
61
  "neptune.UploadButton.instructions": "{fileTypes}, до {size} МБ",
62
+ "neptune.UploadButton.maximumFiles": "Максимальна кількість файлів — {maxFiles}.",
41
63
  "neptune.UploadButton.uploadFile": "Завантажити файл",
42
64
  "neptune.UploadButton.uploadFiles": "Завантажити файли",
43
65
  "neptune.UploadInput.deleteModalBody": "Якщо вилучити файл, його буде видалено з нашої системи.",
package/src/modal/Modal.tsx CHANGED
@@ -67,6 +67,7 @@ const Modal = ({
67
67
  return !isMedium ? (
68
68
  <Drawer
69
69
  open={open}
70
+ className={className}
70
71
  headerTitle={title}
71
72
  footerContent={footer}
72
73
  position={Position.BOTTOM}
package/src/prompt/InlinePrompt/InlinePrompt.spec.tsx CHANGED
@@ -23,12 +23,12 @@ describe('InlinePrompt', () => {
23
23
  });
24
24
 
25
25
  [
26
- { sentiment: Sentiment.NEGATIVE as const, acceptsMedia: false, statusIconLabel: 'Error:' },
27
- { sentiment: Sentiment.WARNING as const, acceptsMedia: false, statusIconLabel: 'Warning:' },
28
- { sentiment: Sentiment.NEUTRAL as const, acceptsMedia: false, statusIconLabel: 'Information:' },
29
- { sentiment: Sentiment.POSITIVE as const, acceptsMedia: true, statusIconLabel: 'Success:' },
30
- { sentiment: 'proposition' as const, acceptsMedia: true, statusIconLabel: '' },
31
- ].forEach(({ sentiment, statusIconLabel, acceptsMedia }) => {
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
- if (acceptsMedia) {
81
- it('should respect `media`', () => {
82
- render(<InlinePrompt {...defaultProps} sentiment={sentiment} media={MEDIA} />);
83
- expect(screen.getByTestId('custom-media')).toBeInTheDocument();
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', () => {
package/src/prompt/InlinePrompt/InlinePrompt.story.tsx CHANGED
@@ -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`) must retain their associated
226
- * `StatusIcons`, the `positive` and `proposition` ones allow for Icon overrides to bring it
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={<Taxi />} sentiment="negative">
242
- This icon override is ignored.
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
  );
package/src/prompt/InlinePrompt/InlinePrompt.tsx CHANGED
@@ -25,12 +25,12 @@ export type InlinePromptProps = {
25
25
  */
26
26
  muted?: boolean;
27
27
  /**
28
- * Icon override for `proposition` and `positive` sentiments. Unsupported for remaining ones.
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 (