@transferwise/components 0.0.0-experimental-c7da7db → 0.0.0-experimental-24a0a12
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/accordion/AccordionItem/AccordionItem.js +0 -1
- package/build/accordion/AccordionItem/AccordionItem.js.map +1 -1
- package/build/accordion/AccordionItem/AccordionItem.mjs +0 -1
- package/build/accordion/AccordionItem/AccordionItem.mjs.map +1 -1
- package/build/actionButton/ActionButton.js +0 -1
- package/build/actionButton/ActionButton.js.map +1 -1
- package/build/actionButton/ActionButton.mjs +0 -1
- package/build/actionButton/ActionButton.mjs.map +1 -1
- package/build/actionOption/ActionOption.js +0 -1
- package/build/actionOption/ActionOption.js.map +1 -1
- package/build/actionOption/ActionOption.mjs +0 -1
- package/build/actionOption/ActionOption.mjs.map +1 -1
- package/build/alert/Alert.js +0 -1
- package/build/alert/Alert.js.map +1 -1
- package/build/alert/Alert.mjs +0 -1
- package/build/alert/Alert.mjs.map +1 -1
- package/build/alert/inlineMarkdown/InlineMarkdown.js +0 -1
- package/build/alert/inlineMarkdown/InlineMarkdown.js.map +1 -1
- package/build/alert/inlineMarkdown/InlineMarkdown.mjs +0 -1
- package/build/alert/inlineMarkdown/InlineMarkdown.mjs.map +1 -1
- package/build/avatar/Avatar.js +0 -1
- package/build/avatar/Avatar.js.map +1 -1
- package/build/avatar/Avatar.mjs +0 -1
- package/build/avatar/Avatar.mjs.map +1 -1
- package/build/avatarView/AvatarView.js +0 -1
- package/build/avatarView/AvatarView.js.map +1 -1
- package/build/avatarView/AvatarView.mjs +0 -1
- package/build/avatarView/AvatarView.mjs.map +1 -1
- package/build/avatarWrapper/AvatarWrapper.js +0 -1
- package/build/avatarWrapper/AvatarWrapper.js.map +1 -1
- package/build/avatarWrapper/AvatarWrapper.mjs +0 -1
- package/build/avatarWrapper/AvatarWrapper.mjs.map +1 -1
- package/build/badge/Badge.js +0 -1
- package/build/badge/Badge.js.map +1 -1
- package/build/badge/Badge.mjs +0 -1
- package/build/badge/Badge.mjs.map +1 -1
- package/build/button/Button.js +0 -1
- package/build/button/Button.js.map +1 -1
- package/build/button/Button.mjs +0 -1
- package/build/button/Button.mjs.map +1 -1
- package/build/button/LegacyButton.js +0 -1
- package/build/button/LegacyButton.js.map +1 -1
- package/build/button/LegacyButton.mjs +0 -1
- package/build/button/LegacyButton.mjs.map +1 -1
- package/build/button/classMap.js +0 -1
- package/build/button/classMap.js.map +1 -1
- package/build/button/classMap.mjs +0 -1
- package/build/button/classMap.mjs.map +1 -1
- package/build/button/legacyUtils/legacyUtils.js +0 -1
- package/build/button/legacyUtils/legacyUtils.js.map +1 -1
- package/build/button/legacyUtils/legacyUtils.mjs +0 -1
- package/build/button/legacyUtils/legacyUtils.mjs.map +1 -1
- package/build/card/Card.js +0 -1
- package/build/card/Card.js.map +1 -1
- package/build/card/Card.mjs +0 -1
- package/build/card/Card.mjs.map +1 -1
- package/build/checkbox/Checkbox.js +0 -1
- package/build/checkbox/Checkbox.js.map +1 -1
- package/build/checkbox/Checkbox.mjs +0 -1
- package/build/checkbox/Checkbox.mjs.map +1 -1
- package/build/chevron/Chevron.js +0 -1
- package/build/chevron/Chevron.js.map +1 -1
- package/build/chevron/Chevron.mjs +0 -1
- package/build/chevron/Chevron.mjs.map +1 -1
- package/build/chips/Chip.js +0 -1
- package/build/chips/Chip.js.map +1 -1
- package/build/chips/Chip.mjs +0 -1
- package/build/chips/Chip.mjs.map +1 -1
- package/build/circularButton/CircularButton.js +0 -1
- package/build/circularButton/CircularButton.js.map +1 -1
- package/build/circularButton/CircularButton.mjs +0 -1
- package/build/circularButton/CircularButton.mjs.map +1 -1
- package/build/common/locale/index.js +4 -9
- package/build/common/locale/index.js.map +1 -1
- package/build/common/locale/index.mjs +4 -9
- package/build/common/locale/index.mjs.map +1 -1
- package/build/common/panel/Panel.js +56 -41
- package/build/common/panel/Panel.js.map +1 -1
- package/build/common/panel/Panel.mjs +61 -46
- package/build/common/panel/Panel.mjs.map +1 -1
- package/build/common/responsivePanel/ResponsivePanel.js +0 -1
- package/build/common/responsivePanel/ResponsivePanel.js.map +1 -1
- package/build/common/responsivePanel/ResponsivePanel.mjs +0 -1
- package/build/common/responsivePanel/ResponsivePanel.mjs.map +1 -1
- package/build/criticalBanner/CriticalCommsBanner.js +0 -1
- package/build/criticalBanner/CriticalCommsBanner.js.map +1 -1
- package/build/criticalBanner/CriticalCommsBanner.mjs +0 -1
- package/build/criticalBanner/CriticalCommsBanner.mjs.map +1 -1
- package/build/dateInput/DateInput.js +1 -1
- package/build/dateInput/DateInput.mjs +1 -1
- package/build/dateLookup/DateLookup.js +1 -1
- package/build/dateLookup/DateLookup.mjs +1 -1
- package/build/dateLookup/dateHeader/DateHeader.js +0 -1
- package/build/dateLookup/dateHeader/DateHeader.js.map +1 -1
- package/build/dateLookup/dateHeader/DateHeader.mjs +0 -1
- package/build/dateLookup/dateHeader/DateHeader.mjs.map +1 -1
- package/build/decision/Decision.js +0 -1
- package/build/decision/Decision.js.map +1 -1
- package/build/decision/Decision.mjs +0 -1
- package/build/decision/Decision.mjs.map +1 -1
- package/build/definitionList/DefinitionList.js +0 -1
- package/build/definitionList/DefinitionList.js.map +1 -1
- package/build/definitionList/DefinitionList.mjs +0 -1
- package/build/definitionList/DefinitionList.mjs.map +1 -1
- package/build/dimmer/Dimmer.js +0 -1
- package/build/dimmer/Dimmer.js.map +1 -1
- package/build/dimmer/Dimmer.mjs +0 -1
- package/build/dimmer/Dimmer.mjs.map +1 -1
- package/build/display/Display.js +0 -1
- package/build/display/Display.js.map +1 -1
- package/build/display/Display.mjs +0 -1
- package/build/display/Display.mjs.map +1 -1
- package/build/drawer/Drawer.js +0 -1
- package/build/drawer/Drawer.js.map +1 -1
- package/build/drawer/Drawer.mjs +0 -1
- package/build/drawer/Drawer.mjs.map +1 -1
- package/build/expressiveMoneyInput/currencySelector/CurrencySelector.js +3 -4
- package/build/expressiveMoneyInput/currencySelector/CurrencySelector.js.map +1 -1
- package/build/expressiveMoneyInput/currencySelector/CurrencySelector.mjs +3 -4
- package/build/expressiveMoneyInput/currencySelector/CurrencySelector.mjs.map +1 -1
- package/build/field/Field.js +5 -5
- package/build/field/Field.mjs +5 -5
- package/build/flowNavigation/FlowNavigation.js +0 -1
- package/build/flowNavigation/FlowNavigation.js.map +1 -1
- package/build/flowNavigation/FlowNavigation.mjs +0 -1
- package/build/flowNavigation/FlowNavigation.mjs.map +1 -1
- package/build/header/Header.js +0 -1
- package/build/header/Header.js.map +1 -1
- package/build/header/Header.mjs +0 -1
- package/build/header/Header.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/info/Info.js +0 -1
- package/build/info/Info.js.map +1 -1
- package/build/info/Info.mjs +0 -1
- package/build/info/Info.mjs.map +1 -1
- package/build/inlineAlert/InlineAlert.js +0 -1
- package/build/inlineAlert/InlineAlert.js.map +1 -1
- package/build/inlineAlert/InlineAlert.mjs +0 -1
- package/build/inlineAlert/InlineAlert.mjs.map +1 -1
- package/build/inputs/SearchInput.js +0 -1
- package/build/inputs/SearchInput.js.map +1 -1
- package/build/inputs/SearchInput.mjs +0 -1
- package/build/inputs/SearchInput.mjs.map +1 -1
- package/build/instructionsList/InstructionsList.js +0 -1
- package/build/instructionsList/InstructionsList.js.map +1 -1
- package/build/instructionsList/InstructionsList.mjs +0 -1
- package/build/instructionsList/InstructionsList.mjs.map +1 -1
- package/build/link/Link.js +0 -1
- package/build/link/Link.js.map +1 -1
- package/build/link/Link.mjs +0 -1
- package/build/link/Link.mjs.map +1 -1
- package/build/listItem/AdditionalInfo/ListItemAdditionalInfo.js +0 -1
- package/build/listItem/AdditionalInfo/ListItemAdditionalInfo.js.map +1 -1
- package/build/listItem/AdditionalInfo/ListItemAdditionalInfo.mjs +0 -1
- package/build/listItem/AdditionalInfo/ListItemAdditionalInfo.mjs.map +1 -1
- package/build/listItem/ListItem.js +0 -1
- package/build/listItem/ListItem.js.map +1 -1
- package/build/listItem/ListItem.mjs +0 -1
- package/build/listItem/ListItem.mjs.map +1 -1
- package/build/listItem/Prompt/ListItemPrompt.js +5 -5
- package/build/listItem/Prompt/ListItemPrompt.mjs +5 -5
- package/build/loader/Loader.js +0 -1
- package/build/loader/Loader.js.map +1 -1
- package/build/loader/Loader.mjs +0 -1
- package/build/loader/Loader.mjs.map +1 -1
- package/build/main.css +130 -51
- package/build/markdown/Markdown.js +0 -1
- package/build/markdown/Markdown.js.map +1 -1
- package/build/markdown/Markdown.mjs +0 -1
- package/build/markdown/Markdown.mjs.map +1 -1
- package/build/modal/Modal.js +0 -1
- package/build/modal/Modal.js.map +1 -1
- package/build/modal/Modal.mjs +0 -1
- package/build/modal/Modal.mjs.map +1 -1
- package/build/moneyInput/MoneyInput.js +12 -28
- package/build/moneyInput/MoneyInput.js.map +1 -1
- package/build/moneyInput/MoneyInput.mjs +14 -30
- package/build/moneyInput/MoneyInput.mjs.map +1 -1
- package/build/moneyInput/currencyFormatting.js +2 -8
- package/build/moneyInput/currencyFormatting.js.map +1 -1
- package/build/moneyInput/currencyFormatting.mjs +4 -5
- package/build/moneyInput/currencyFormatting.mjs.map +1 -1
- package/build/navigationOption/NavigationOption.js +0 -1
- package/build/navigationOption/NavigationOption.js.map +1 -1
- package/build/navigationOption/NavigationOption.mjs +0 -1
- package/build/navigationOption/NavigationOption.mjs.map +1 -1
- package/build/nudge/Nudge.js +0 -1
- package/build/nudge/Nudge.js.map +1 -1
- package/build/nudge/Nudge.mjs +0 -1
- package/build/nudge/Nudge.mjs.map +1 -1
- package/build/overlayHeader/OverlayHeader.js +0 -1
- package/build/overlayHeader/OverlayHeader.js.map +1 -1
- package/build/overlayHeader/OverlayHeader.mjs +0 -1
- package/build/overlayHeader/OverlayHeader.mjs.map +1 -1
- package/build/phoneNumberInput/PhoneNumberInput.js +0 -1
- package/build/phoneNumberInput/PhoneNumberInput.js.map +1 -1
- package/build/phoneNumberInput/PhoneNumberInput.mjs +0 -1
- package/build/phoneNumberInput/PhoneNumberInput.mjs.map +1 -1
- package/build/popover/Popover.js +0 -1
- package/build/popover/Popover.js.map +1 -1
- package/build/popover/Popover.mjs +0 -1
- package/build/popover/Popover.mjs.map +1 -1
- package/build/processIndicator/ProcessIndicator.js +0 -1
- package/build/processIndicator/ProcessIndicator.js.map +1 -1
- package/build/processIndicator/ProcessIndicator.mjs +0 -1
- package/build/processIndicator/ProcessIndicator.mjs.map +1 -1
- package/build/progressBar/ProgressBar.js +0 -1
- package/build/progressBar/ProgressBar.js.map +1 -1
- package/build/progressBar/ProgressBar.mjs +0 -1
- package/build/progressBar/ProgressBar.mjs.map +1 -1
- package/build/promoCard/PromoCard.js +0 -1
- package/build/promoCard/PromoCard.js.map +1 -1
- package/build/promoCard/PromoCard.mjs +0 -1
- package/build/promoCard/PromoCard.mjs.map +1 -1
- package/build/promoCard/PromoCardIndicator.js +0 -1
- package/build/promoCard/PromoCardIndicator.js.map +1 -1
- package/build/promoCard/PromoCardIndicator.mjs +0 -1
- package/build/promoCard/PromoCardIndicator.mjs.map +1 -1
- package/build/prompt/ActionPrompt/ActionPrompt.js +8 -41
- package/build/prompt/ActionPrompt/ActionPrompt.js.map +1 -1
- package/build/prompt/ActionPrompt/ActionPrompt.mjs +8 -41
- package/build/prompt/ActionPrompt/ActionPrompt.mjs.map +1 -1
- package/build/prompt/CriticalBanner/CriticalBanner.js +148 -0
- package/build/prompt/CriticalBanner/CriticalBanner.js.map +1 -0
- package/build/prompt/CriticalBanner/CriticalBanner.mjs +146 -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/InfoPrompt/InfoPrompt.js +0 -1
- package/build/prompt/InfoPrompt/InfoPrompt.js.map +1 -1
- package/build/prompt/InfoPrompt/InfoPrompt.mjs +0 -1
- package/build/prompt/InfoPrompt/InfoPrompt.mjs.map +1 -1
- package/build/prompt/InlinePrompt/InlinePrompt.js +0 -1
- package/build/prompt/InlinePrompt/InlinePrompt.js.map +1 -1
- package/build/prompt/InlinePrompt/InlinePrompt.mjs +0 -1
- package/build/prompt/InlinePrompt/InlinePrompt.mjs.map +1 -1
- 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/radio/Radio.js +0 -1
- package/build/radio/Radio.js.map +1 -1
- package/build/radio/Radio.mjs +0 -1
- package/build/radio/Radio.mjs.map +1 -1
- package/build/segmentedControl/SegmentedControl.js +0 -1
- package/build/segmentedControl/SegmentedControl.js.map +1 -1
- package/build/segmentedControl/SegmentedControl.mjs +0 -1
- package/build/segmentedControl/SegmentedControl.mjs.map +1 -1
- package/build/select/Select.js +0 -1
- package/build/select/Select.js.map +1 -1
- package/build/select/Select.mjs +0 -1
- package/build/select/Select.mjs.map +1 -1
- package/build/select/option/Option.js +0 -1
- package/build/select/option/Option.js.map +1 -1
- package/build/select/option/Option.mjs +0 -1
- package/build/select/option/Option.mjs.map +1 -1
- package/build/statusIcon/StatusIcon.js +0 -1
- package/build/statusIcon/StatusIcon.js.map +1 -1
- package/build/statusIcon/StatusIcon.mjs +0 -1
- package/build/statusIcon/StatusIcon.mjs.map +1 -1
- package/build/stepper/Stepper.js +0 -1
- package/build/stepper/Stepper.js.map +1 -1
- package/build/stepper/Stepper.mjs +0 -1
- package/build/stepper/Stepper.mjs.map +1 -1
- package/build/sticky/Sticky.js +0 -1
- package/build/sticky/Sticky.js.map +1 -1
- package/build/sticky/Sticky.mjs +0 -1
- package/build/sticky/Sticky.mjs.map +1 -1
- package/build/styles/css/neptune.css +22 -22
- package/build/styles/less/neptune-tokens.less +4 -4
- package/build/styles/main.css +130 -51
- package/build/styles/prompt/CriticalBanner/CriticalBanner.css +59 -0
- package/build/styles/prompt/common/Expander/Expander.css +8 -0
- package/build/styles/props/neptune-tokens.css +2 -2
- package/build/styles/styles/less/neptune.css +22 -22
- package/build/summary/Summary.js +0 -1
- package/build/summary/Summary.js.map +1 -1
- package/build/summary/Summary.mjs +0 -1
- package/build/summary/Summary.mjs.map +1 -1
- package/build/table/Table.js +0 -1
- package/build/table/Table.js.map +1 -1
- package/build/table/Table.mjs +0 -1
- package/build/table/Table.mjs.map +1 -1
- package/build/table/TableRow.js +0 -1
- package/build/table/TableRow.js.map +1 -1
- package/build/table/TableRow.mjs +0 -1
- package/build/table/TableRow.mjs.map +1 -1
- package/build/table/TableStatusText.js +0 -1
- package/build/table/TableStatusText.js.map +1 -1
- package/build/table/TableStatusText.mjs +0 -1
- package/build/table/TableStatusText.mjs.map +1 -1
- package/build/tabs/Tabs.js +0 -1
- package/build/tabs/Tabs.js.map +1 -1
- package/build/tabs/Tabs.mjs +0 -1
- package/build/tabs/Tabs.mjs.map +1 -1
- package/build/tile/Tile.js +0 -1
- package/build/tile/Tile.js.map +1 -1
- package/build/tile/Tile.mjs +0 -1
- package/build/tile/Tile.mjs.map +1 -1
- package/build/title/Title.js +0 -1
- package/build/title/Title.js.map +1 -1
- package/build/title/Title.mjs +0 -1
- package/build/title/Title.mjs.map +1 -1
- package/build/tooltip/Tooltip.js +50 -30
- package/build/tooltip/Tooltip.js.map +1 -1
- package/build/tooltip/Tooltip.mjs +51 -31
- package/build/tooltip/Tooltip.mjs.map +1 -1
- package/build/typeahead/Typeahead.js +5 -5
- package/build/typeahead/Typeahead.mjs +5 -5
- package/build/types/common/locale/index.d.ts +1 -1
- package/build/types/common/locale/index.d.ts.map +1 -1
- package/build/types/common/panel/Panel.d.ts.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/moneyInput/MoneyInput.d.ts +0 -6
- package/build/types/moneyInput/MoneyInput.d.ts.map +1 -1
- package/build/types/moneyInput/currencyFormatting.d.ts +3 -4
- package/build/types/moneyInput/currencyFormatting.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 +40 -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/build/types/tooltip/Tooltip.d.ts.map +1 -1
- package/build/upload/Upload.js +0 -1
- package/build/upload/Upload.js.map +1 -1
- package/build/upload/Upload.mjs +0 -1
- package/build/upload/Upload.mjs.map +1 -1
- package/build/upload/steps/completeStep/completeStep.js +0 -1
- package/build/upload/steps/completeStep/completeStep.js.map +1 -1
- package/build/upload/steps/completeStep/completeStep.mjs +0 -1
- package/build/upload/steps/completeStep/completeStep.mjs.map +1 -1
- package/build/upload/steps/processingStep/processingStep.js +0 -1
- package/build/upload/steps/processingStep/processingStep.js.map +1 -1
- package/build/upload/steps/processingStep/processingStep.mjs +0 -1
- package/build/upload/steps/processingStep/processingStep.mjs.map +1 -1
- package/build/upload/steps/uploadImageStep/uploadImageStep.js +0 -1
- package/build/upload/steps/uploadImageStep/uploadImageStep.js.map +1 -1
- package/build/upload/steps/uploadImageStep/uploadImageStep.mjs +0 -1
- package/build/upload/steps/uploadImageStep/uploadImageStep.mjs.map +1 -1
- package/build/uploadInput/UploadInput.js +0 -1
- package/build/uploadInput/UploadInput.js.map +1 -1
- package/build/uploadInput/UploadInput.mjs +0 -1
- package/build/uploadInput/UploadInput.mjs.map +1 -1
- package/build/uploadInput/uploadButton/UploadButton.js +0 -1
- package/build/uploadInput/uploadButton/UploadButton.js.map +1 -1
- package/build/uploadInput/uploadButton/UploadButton.mjs +0 -1
- package/build/uploadInput/uploadButton/UploadButton.mjs.map +1 -1
- package/build/uploadInput/uploadButton/defaults.js +0 -1
- package/build/uploadInput/uploadButton/defaults.js.map +1 -1
- package/build/uploadInput/uploadButton/defaults.mjs +0 -1
- package/build/uploadInput/uploadButton/defaults.mjs.map +1 -1
- package/build/uploadInput/uploadItem/UploadItem.js +0 -1
- package/build/uploadInput/uploadItem/UploadItem.js.map +1 -1
- package/build/uploadInput/uploadItem/UploadItem.mjs +0 -1
- package/build/uploadInput/uploadItem/UploadItem.mjs.map +1 -1
- package/build/withDisplayFormat/WithDisplayFormat.js +0 -1
- package/build/withDisplayFormat/WithDisplayFormat.js.map +1 -1
- package/build/withDisplayFormat/WithDisplayFormat.mjs +0 -1
- package/build/withDisplayFormat/WithDisplayFormat.mjs.map +1 -1
- package/package.json +16 -14
- package/src/common/locale/index.test.ts +4 -13
- package/src/common/locale/index.ts +3 -9
- package/src/common/panel/Panel.tsx +50 -42
- package/src/expressiveMoneyInput/ExpressiveMoneyInput.story.tsx +0 -18
- package/src/expressiveMoneyInput/currencySelector/CurrencySelector.test.tsx +1 -119
- package/src/expressiveMoneyInput/currencySelector/CurrencySelector.tsx +3 -4
- package/src/i18n/en.json +2 -0
- package/src/index.ts +2 -2
- package/src/main.css +130 -51
- package/src/main.less +3 -1
- package/src/moneyInput/MoneyInput.story.tsx +1 -10
- package/src/moneyInput/MoneyInput.test.story.tsx +1 -141
- package/src/moneyInput/MoneyInput.test.tsx +0 -45
- package/src/moneyInput/MoneyInput.tsx +3 -27
- package/src/moneyInput/currencyFormatting.ts +5 -11
- package/src/prompt/ActionPrompt/ActionPrompt.tsx +9 -62
- package/src/prompt/CriticalBanner/CriticalBanner.accessibility.docs.mdx +131 -0
- package/src/prompt/CriticalBanner/CriticalBanner.css +59 -0
- package/src/prompt/CriticalBanner/CriticalBanner.less +64 -0
- package/src/prompt/CriticalBanner/CriticalBanner.story.tsx +645 -0
- package/src/prompt/CriticalBanner/CriticalBanner.test.story.tsx +285 -0
- package/src/prompt/CriticalBanner/CriticalBanner.tsx +194 -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
- package/src/styles/less/neptune.css +22 -22
- package/src/tooltip/Tooltip.tsx +45 -26
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
import { useId } from 'react';
|
|
2
2
|
import { clsx } from 'clsx';
|
|
3
|
-
import StatusIcon from '../../statusIcon/StatusIcon.mjs';
|
|
4
3
|
import Body from '../../body/Body.mjs';
|
|
5
4
|
import Button from '../../button/Button.resolver.mjs';
|
|
6
5
|
import '../../common/theme.mjs';
|
|
@@ -22,15 +21,13 @@ import '../../common/propsValues/variant.mjs';
|
|
|
22
21
|
import '../../common/propsValues/scroll.mjs';
|
|
23
22
|
import '../../common/propsValues/markdownNodeType.mjs';
|
|
24
23
|
import '../../common/fileType.mjs';
|
|
25
|
-
import '@transferwise/
|
|
26
|
-
import { GiftBox } from '@transferwise/icons';
|
|
24
|
+
import '@transferwise/icons';
|
|
27
25
|
import 'react-intl';
|
|
28
26
|
import '../../common/closeButton/CloseButton.messages.mjs';
|
|
29
27
|
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
|
|
30
|
-
import AvatarView from '../../avatarView/AvatarView.mjs';
|
|
31
|
-
import Image from '../../image/Image.mjs';
|
|
32
28
|
import { PrimitivePrompt } from '../PrimitivePrompt/PrimitivePrompt.mjs';
|
|
33
29
|
import { useScreenSize } from '../../common/hooks/useScreenSize.mjs';
|
|
30
|
+
import { renderPromptMedia } from '../helpers/promptMedia.mjs';
|
|
34
31
|
|
|
35
32
|
const ActionPrompt = ({
|
|
36
33
|
sentiment = 'neutral',
|
|
@@ -50,42 +47,12 @@ const ActionPrompt = ({
|
|
|
50
47
|
const titleId = useId();
|
|
51
48
|
const descId = useId();
|
|
52
49
|
const ariaLabelledByIds = [media['aria-hidden'] ? undefined : mediaId, ariaLabel ? undefined : titleId].filter(Boolean).join(' ');
|
|
53
|
-
const renderMedia = () => {
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
alt: media['aria-label'] ?? ''
|
|
60
|
-
});
|
|
61
|
-
}
|
|
62
|
-
if (media?.avatar) {
|
|
63
|
-
const badge = media.avatar.badge ? media.avatar.badge : sentiment === 'proposition' ? {} : {
|
|
64
|
-
status: sentiment
|
|
65
|
-
};
|
|
66
|
-
return /*#__PURE__*/jsx(AvatarView, {
|
|
67
|
-
...media.avatar,
|
|
68
|
-
badge: badge,
|
|
69
|
-
"aria-label": media['aria-label'],
|
|
70
|
-
"aria-hidden": media['aria-hidden'],
|
|
71
|
-
id: mediaId,
|
|
72
|
-
size: 48,
|
|
73
|
-
children: media.avatar.asset
|
|
74
|
-
});
|
|
75
|
-
}
|
|
76
|
-
return sentiment === 'proposition' ? /*#__PURE__*/jsx(AvatarView, {
|
|
77
|
-
id: mediaId,
|
|
78
|
-
size: 48,
|
|
79
|
-
"aria-label": media['aria-label'],
|
|
80
|
-
"aria-hidden": media['aria-hidden'],
|
|
81
|
-
children: /*#__PURE__*/jsx(GiftBox, {})
|
|
82
|
-
}) : /*#__PURE__*/jsx(StatusIcon, {
|
|
83
|
-
id: mediaId,
|
|
84
|
-
size: 48,
|
|
85
|
-
sentiment: sentiment,
|
|
86
|
-
iconLabel: media['aria-hidden'] ? null : media['aria-label']
|
|
87
|
-
});
|
|
88
|
-
};
|
|
50
|
+
const renderMedia = () => renderPromptMedia({
|
|
51
|
+
media,
|
|
52
|
+
sentiment,
|
|
53
|
+
mediaId,
|
|
54
|
+
imgClassName: 'wds-action-prompt--media-image'
|
|
55
|
+
});
|
|
89
56
|
return /*#__PURE__*/jsx(PrimitivePrompt, {
|
|
90
57
|
id: id,
|
|
91
58
|
sentiment: sentiment,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ActionPrompt.mjs","sources":["../../../src/prompt/ActionPrompt/ActionPrompt.tsx"],"sourcesContent":["import { AriaAttributes, ReactNode, useId } from 'react';\nimport { clsx } from 'clsx';\n\nimport
|
|
1
|
+
{"version":3,"file":"ActionPrompt.mjs","sources":["../../../src/prompt/ActionPrompt/ActionPrompt.tsx"],"sourcesContent":["import { AriaAttributes, ReactNode, useId } from 'react';\nimport { clsx } from 'clsx';\n\nimport Body from '../../body';\nimport Button from '../../button';\nimport { Breakpoint, Typography } from '../../common';\nimport { ButtonProps } from '../../button/Button.types';\nimport { PrimitivePrompt, PrimitivePromptProps } from '../PrimitivePrompt';\nimport { useScreenSize } from '../../common/hooks/useScreenSize';\nimport { renderPromptMedia, PromptMedia } from '../helpers/promptMedia';\n\nexport type ActionPromptProps = {\n title: ReactNode;\n description?: ReactNode;\n /** @default {} */\n media?: PromptMedia;\n action: Pick<ButtonProps, 'onClick' | 'href' | 'target'> & {\n label: ButtonProps['children'];\n };\n actionSecondary?: Pick<ButtonProps, 'onClick' | 'href' | 'target'> & {\n label: ButtonProps['children'];\n };\n 'aria-label'?: AriaAttributes['aria-label'];\n} & Pick<PrimitivePromptProps, 'id' | 'className' | 'data-testid' | 'onDismiss'> & {\n /**\n * The sentiment determines the colour scheme\n * @default 'neutral'\n */\n sentiment?: PrimitivePromptProps['sentiment'];\n };\n\n/**\n * Use an action prompt for optional feedback that doesn't require immediate action, such as feature upsells, warnings, or suggestions. These prompts are typically used outside of core product flows (e.g., Launchpad, Recipient, or Transaction screens) and can be addressed at the user's convenience.\n *\n * If your message is about immediate user feedback (e.g., form submission errors, download failures, missing data warnings), use an [info prompt](https://storybook.wise.design/?path=/docs/prompts-infoprompt--docs) instead.\n *\n * Guidance can be found in the [design system](https://wise.design/components/action-prompt).\n */\nexport const ActionPrompt = ({\n sentiment = 'neutral',\n title,\n description,\n onDismiss,\n media = {},\n action,\n actionSecondary,\n id,\n className,\n 'data-testid': testId,\n 'aria-label': ariaLabel,\n}: ActionPromptProps) => {\n const isMobile = !useScreenSize(Breakpoint.MEDIUM);\n\n const mediaId = useId();\n const titleId = useId();\n const descId = useId();\n\n const ariaLabelledByIds = [\n media['aria-hidden'] ? undefined : mediaId,\n ariaLabel ? undefined : titleId,\n ]\n .filter(Boolean)\n .join(' ');\n\n const renderMedia = () =>\n renderPromptMedia({\n media,\n sentiment,\n mediaId,\n imgClassName: 'wds-action-prompt--media-image',\n });\n\n return (\n <PrimitivePrompt\n id={id}\n sentiment={sentiment}\n data-testid={testId}\n className={clsx(\n 'wds-action-prompt',\n { 'wds-action-prompt--with-two-actions': !!actionSecondary },\n className,\n )}\n media={renderMedia()}\n actions={\n <>\n {actionSecondary && (\n // @ts-expect-error onClick type mismatch\n <Button\n v2\n size=\"md\"\n priority=\"secondary\"\n href={actionSecondary.href}\n block={isMobile}\n onClick={actionSecondary?.onClick}\n >\n {actionSecondary.label}\n </Button>\n )}\n {/* @ts-expect-error onClick type mismatch */}\n <Button\n v2\n size=\"md\"\n priority=\"primary\"\n href={action.href}\n block={isMobile}\n onClick={action.onClick}\n >\n {action.label}\n </Button>\n </>\n }\n role=\"region\"\n onDismiss={onDismiss}\n {...(ariaLabel\n ? { 'aria-label': ariaLabel }\n : {\n 'aria-labelledby': ariaLabelledByIds,\n 'aria-describedby': descId,\n })}\n >\n <div className={clsx('d-flex', 'flex-column', 'justify-content-center')}>\n <Body id={titleId} type={Typography.BODY_LARGE_BOLD} className=\"wds-action-prompt__content\">\n {title}\n </Body>\n {description && (\n <Body id={descId} className=\"wds-action-prompt__content\">\n {description}\n </Body>\n )}\n </div>\n </PrimitivePrompt>\n );\n};\n\nexport default ActionPrompt;\n"],"names":["ActionPrompt","sentiment","title","description","onDismiss","media","action","actionSecondary","id","className","testId","ariaLabel","isMobile","useScreenSize","Breakpoint","MEDIUM","mediaId","useId","titleId","descId","ariaLabelledByIds","undefined","filter","Boolean","join","renderMedia","renderPromptMedia","imgClassName","_jsx","PrimitivePrompt","clsx","actions","_jsxs","_Fragment","children","Button","v2","size","priority","href","block","onClick","label","role","Body","type","Typography","BODY_LARGE_BOLD"],"mappings":"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"}
|
|
@@ -0,0 +1,148 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var React = require('react');
|
|
4
|
+
var clsx = require('clsx');
|
|
5
|
+
var Body = require('../../body/Body.js');
|
|
6
|
+
var Button_resolver = require('../../button/Button.resolver.js');
|
|
7
|
+
require('../../common/theme.js');
|
|
8
|
+
require('../../common/direction.js');
|
|
9
|
+
require('../../common/propsValues/control.js');
|
|
10
|
+
var breakpoint = require('../../common/propsValues/breakpoint.js');
|
|
11
|
+
require('../../common/propsValues/size.js');
|
|
12
|
+
var typography = require('../../common/propsValues/typography.js');
|
|
13
|
+
require('../../common/propsValues/width.js');
|
|
14
|
+
require('../../common/propsValues/type.js');
|
|
15
|
+
require('../../common/propsValues/dateMode.js');
|
|
16
|
+
require('../../common/propsValues/monthFormat.js');
|
|
17
|
+
require('../../common/propsValues/position.js');
|
|
18
|
+
require('../../common/propsValues/layouts.js');
|
|
19
|
+
require('../../common/propsValues/status.js');
|
|
20
|
+
require('../../common/propsValues/sentiment.js');
|
|
21
|
+
require('../../common/propsValues/profileType.js');
|
|
22
|
+
require('../../common/propsValues/variant.js');
|
|
23
|
+
require('../../common/propsValues/scroll.js');
|
|
24
|
+
require('../../common/propsValues/markdownNodeType.js');
|
|
25
|
+
require('../../common/fileType.js');
|
|
26
|
+
require('@transferwise/icons');
|
|
27
|
+
require('react-intl');
|
|
28
|
+
require('../../common/closeButton/CloseButton.messages.js');
|
|
29
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
30
|
+
var LiveRegion = require('../../common/liveRegion/LiveRegion.js');
|
|
31
|
+
var PrimitivePrompt = require('../PrimitivePrompt/PrimitivePrompt.js');
|
|
32
|
+
var useScreenSize = require('../../common/hooks/useScreenSize.js');
|
|
33
|
+
var promptMedia = require('../helpers/promptMedia.js');
|
|
34
|
+
var Expander = require('../common/Expander/Expander.js');
|
|
35
|
+
var helpers = require('./helpers.js');
|
|
36
|
+
|
|
37
|
+
const CriticalBanner = ({
|
|
38
|
+
sentiment = 'negative',
|
|
39
|
+
title,
|
|
40
|
+
description,
|
|
41
|
+
media = {},
|
|
42
|
+
action,
|
|
43
|
+
actionSecondary,
|
|
44
|
+
expanded = true,
|
|
45
|
+
onToggle,
|
|
46
|
+
id,
|
|
47
|
+
className,
|
|
48
|
+
'data-testid': testId,
|
|
49
|
+
'aria-label': ariaLabel
|
|
50
|
+
}) => {
|
|
51
|
+
const isMobile = !useScreenSize.useScreenSize(breakpoint.Breakpoint.EXTRA_SMALL);
|
|
52
|
+
const resolvedExpanded = !isMobile || expanded;
|
|
53
|
+
const hasActions = action ?? actionSecondary;
|
|
54
|
+
const mediaId = React.useId();
|
|
55
|
+
const titleId = React.useId();
|
|
56
|
+
const descId = React.useId();
|
|
57
|
+
const ariaLabelledByIds = [media['aria-hidden'] ? undefined : mediaId, ariaLabel || !title ? undefined : titleId].filter(Boolean).join(' ');
|
|
58
|
+
return /*#__PURE__*/jsxRuntime.jsx(LiveRegion.LiveRegion, {
|
|
59
|
+
"aria-live": "assertive",
|
|
60
|
+
announceOnChange: helpers.buildAnnouncementString({
|
|
61
|
+
title,
|
|
62
|
+
description,
|
|
63
|
+
expanded: resolvedExpanded,
|
|
64
|
+
actionLabel: action?.label,
|
|
65
|
+
actionSecondaryLabel: actionSecondary?.label
|
|
66
|
+
}),
|
|
67
|
+
children: /*#__PURE__*/jsxRuntime.jsxs(PrimitivePrompt.PrimitivePrompt, {
|
|
68
|
+
id: id,
|
|
69
|
+
sentiment: sentiment,
|
|
70
|
+
emphasis: sentiment === 'neutral' ? 'base' : 'elevated',
|
|
71
|
+
"data-testid": testId,
|
|
72
|
+
className: clsx.clsx('wds-critical-banner', {
|
|
73
|
+
'wds-critical-banner__mobile--collapsed': !resolvedExpanded,
|
|
74
|
+
'wds-critical-banner--with-two-actions': !!actionSecondary
|
|
75
|
+
}, className),
|
|
76
|
+
media: promptMedia.renderPromptMedia({
|
|
77
|
+
media,
|
|
78
|
+
sentiment,
|
|
79
|
+
mediaId,
|
|
80
|
+
imgClassName: 'wds-critical-banner--media-image'
|
|
81
|
+
}),
|
|
82
|
+
actions: Expander.shouldShowWhenExpanded({
|
|
83
|
+
expanded: resolvedExpanded,
|
|
84
|
+
hasContent: !!hasActions
|
|
85
|
+
}) ? /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
|
|
86
|
+
children: [actionSecondary &&
|
|
87
|
+
/*#__PURE__*/
|
|
88
|
+
// @ts-expect-error onClick type mismatch
|
|
89
|
+
jsxRuntime.jsx(Button_resolver.default, {
|
|
90
|
+
v2: true,
|
|
91
|
+
size: "md",
|
|
92
|
+
priority: "secondary",
|
|
93
|
+
href: actionSecondary.href,
|
|
94
|
+
block: isMobile,
|
|
95
|
+
onClick: actionSecondary?.onClick,
|
|
96
|
+
children: actionSecondary.label
|
|
97
|
+
}), action &&
|
|
98
|
+
/*#__PURE__*/
|
|
99
|
+
// @ts-expect-error onClick type mismatch
|
|
100
|
+
jsxRuntime.jsx(Button_resolver.default, {
|
|
101
|
+
v2: true,
|
|
102
|
+
size: "md",
|
|
103
|
+
priority: "primary",
|
|
104
|
+
href: action.href,
|
|
105
|
+
block: isMobile,
|
|
106
|
+
onClick: action.onClick,
|
|
107
|
+
children: action.label
|
|
108
|
+
})]
|
|
109
|
+
}) : undefined,
|
|
110
|
+
role: "region",
|
|
111
|
+
...(ariaLabel ? {
|
|
112
|
+
'aria-label': ariaLabel
|
|
113
|
+
} : {
|
|
114
|
+
'aria-labelledby': ariaLabelledByIds,
|
|
115
|
+
'aria-describedby': descId
|
|
116
|
+
}),
|
|
117
|
+
children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
|
|
118
|
+
className: clsx.clsx('d-flex', 'flex-column', 'justify-content-center', 'wds-critical-banner__text-wrapper'),
|
|
119
|
+
children: [title && /*#__PURE__*/jsxRuntime.jsx(Body.default, {
|
|
120
|
+
id: titleId,
|
|
121
|
+
type: typography.Typography.BODY_LARGE_BOLD,
|
|
122
|
+
className: clsx.clsx('wds-critical-banner__content', {
|
|
123
|
+
'wds-critical-banner__title--collapsed': !resolvedExpanded
|
|
124
|
+
}),
|
|
125
|
+
children: title
|
|
126
|
+
}), Expander.shouldShowWhenExpanded({
|
|
127
|
+
expanded: resolvedExpanded,
|
|
128
|
+
hasContent: !!description,
|
|
129
|
+
alwaysShow: !title
|
|
130
|
+
}) && /*#__PURE__*/jsxRuntime.jsx(Body.default, {
|
|
131
|
+
id: descId,
|
|
132
|
+
className: clsx.clsx('wds-critical-banner__content', {
|
|
133
|
+
'wds-critical-banner__description--collapsed': !resolvedExpanded && !title
|
|
134
|
+
}),
|
|
135
|
+
children: description
|
|
136
|
+
})]
|
|
137
|
+
}), isMobile && /*#__PURE__*/jsxRuntime.jsx(Expander.ExpanderToggle, {
|
|
138
|
+
expanded: expanded,
|
|
139
|
+
size: 24,
|
|
140
|
+
className: "wds-critical-banner__toggle",
|
|
141
|
+
onToggle: onToggle
|
|
142
|
+
})]
|
|
143
|
+
})
|
|
144
|
+
});
|
|
145
|
+
};
|
|
146
|
+
|
|
147
|
+
exports.CriticalBanner = CriticalBanner;
|
|
148
|
+
//# sourceMappingURL=CriticalBanner.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"CriticalBanner.js","sources":["../../../src/prompt/CriticalBanner/CriticalBanner.tsx"],"sourcesContent":["import { AriaAttributes, ReactNode, useId } from 'react';\nimport { clsx } from 'clsx';\n\nimport Body from '../../body';\nimport Button from '../../button';\nimport { Breakpoint, LiveRegion, Typography } from '../../common';\nimport { ButtonProps } from '../../button/Button.types';\nimport { PrimitivePrompt, PrimitivePromptProps } from '../PrimitivePrompt';\nimport { useScreenSize } from '../../common/hooks/useScreenSize';\n\nimport { renderPromptMedia, PromptMedia } from '../helpers/promptMedia';\nimport { shouldShowWhenExpanded, ExpanderToggle } from '../common/Expander/Expander';\nimport { buildAnnouncementString } from './helpers';\n\nexport type CriticalBannerProps = {\n title?: ReactNode;\n description?: ReactNode;\n media?: PromptMedia;\n action?: Pick<ButtonProps, 'onClick' | 'href' | 'target'> & {\n label: ButtonProps['children'];\n };\n actionSecondary?: Pick<ButtonProps, 'onClick' | 'href' | 'target'> & {\n label: ButtonProps['children'];\n };\n sentiment?: Exclude<PrimitivePromptProps['sentiment'], 'proposition'>;\n /**\n * Controls whether the description and actions are visible.\n * When collapsed with a title, only the title is shown.\n * When collapsed without a title, the description is trimmed to 2 lines.\n */\n expanded?: boolean;\n /** Called when the user clicks the chevron toggle. */\n onToggle?: () => void;\n /**\n * Overrides the default labelling derived from `title` and `description`.\n *\n * **NB:** When provided, the default `aria-labelledby` / `aria-describedby`\n * attributes are removed — include all necessary context in the label.\n */\n 'aria-label'?: AriaAttributes['aria-label'];\n} & Pick<PrimitivePromptProps, 'id' | 'className' | 'data-testid'>;\n\n/**\n * A full-width, non-dismissible banner for critical messages such as account blocks or\n * time-sensitive actions that require immediate user attention.\n\n * @see {@link https://wise.design/components/critical-banner Design Spec}\n */\nexport const CriticalBanner = ({\n sentiment = 'negative',\n title,\n description,\n media = {},\n action,\n actionSecondary,\n expanded = true,\n onToggle,\n id,\n className,\n 'data-testid': testId,\n 'aria-label': ariaLabel,\n}: CriticalBannerProps) => {\n const isMobile = !useScreenSize(Breakpoint.EXTRA_SMALL);\n const resolvedExpanded = !isMobile || expanded;\n const hasActions = action ?? actionSecondary;\n const mediaId = useId();\n const titleId = useId();\n const descId = useId();\n\n const ariaLabelledByIds = [\n media['aria-hidden'] ? undefined : mediaId,\n ariaLabel || !title ? undefined : titleId,\n ]\n .filter(Boolean)\n .join(' ');\n\n return (\n <LiveRegion\n aria-live=\"assertive\"\n announceOnChange={buildAnnouncementString({\n title,\n description,\n expanded: resolvedExpanded,\n actionLabel: action?.label,\n actionSecondaryLabel: actionSecondary?.label,\n })}\n >\n <PrimitivePrompt\n id={id}\n sentiment={sentiment}\n emphasis={sentiment === 'neutral' ? 'base' : 'elevated'}\n data-testid={testId}\n className={clsx(\n 'wds-critical-banner',\n {\n 'wds-critical-banner__mobile--collapsed': !resolvedExpanded,\n 'wds-critical-banner--with-two-actions': !!actionSecondary,\n },\n className,\n )}\n media={renderPromptMedia({\n media,\n sentiment,\n mediaId,\n imgClassName: 'wds-critical-banner--media-image',\n })}\n actions={\n shouldShowWhenExpanded({ expanded: resolvedExpanded, hasContent: !!hasActions }) ? (\n <>\n {actionSecondary && (\n // @ts-expect-error onClick type mismatch\n <Button\n v2\n size=\"md\"\n priority=\"secondary\"\n href={actionSecondary.href}\n block={isMobile}\n onClick={actionSecondary?.onClick}\n >\n {actionSecondary.label}\n </Button>\n )}\n {action && (\n // @ts-expect-error onClick type mismatch\n <Button\n v2\n size=\"md\"\n priority=\"primary\"\n href={action.href}\n block={isMobile}\n onClick={action.onClick}\n >\n {action.label}\n </Button>\n )}\n </>\n ) : undefined\n }\n role=\"region\"\n {...(ariaLabel\n ? { 'aria-label': ariaLabel }\n : {\n 'aria-labelledby': ariaLabelledByIds,\n 'aria-describedby': descId,\n })}\n >\n <div\n className={clsx(\n 'd-flex',\n 'flex-column',\n 'justify-content-center',\n 'wds-critical-banner__text-wrapper',\n )}\n >\n {title && (\n <Body\n id={titleId}\n type={Typography.BODY_LARGE_BOLD}\n className={clsx('wds-critical-banner__content', {\n 'wds-critical-banner__title--collapsed': !resolvedExpanded,\n })}\n >\n {title}\n </Body>\n )}\n {shouldShowWhenExpanded({\n expanded: resolvedExpanded,\n hasContent: !!description,\n alwaysShow: !title,\n }) && (\n <Body\n id={descId}\n className={clsx('wds-critical-banner__content', {\n 'wds-critical-banner__description--collapsed': !resolvedExpanded && !title,\n })}\n >\n {description}\n </Body>\n )}\n </div>\n {isMobile && (\n <ExpanderToggle\n expanded={expanded}\n size={24}\n className=\"wds-critical-banner__toggle\"\n onToggle={onToggle}\n />\n )}\n </PrimitivePrompt>\n </LiveRegion>\n );\n};\n\nexport default CriticalBanner;\n"],"names":["CriticalBanner","sentiment","title","description","media","action","actionSecondary","expanded","onToggle","id","className","testId","ariaLabel","isMobile","useScreenSize","Breakpoint","EXTRA_SMALL","resolvedExpanded","hasActions","mediaId","useId","titleId","descId","ariaLabelledByIds","undefined","filter","Boolean","join","_jsx","LiveRegion","announceOnChange","buildAnnouncementString","actionLabel","label","actionSecondaryLabel","children","_jsxs","PrimitivePrompt","emphasis","clsx","renderPromptMedia","imgClassName","actions","shouldShowWhenExpanded","hasContent","_Fragment","Button","v2","size","priority","href","block","onClick","role","Body","type","Typography","BODY_LARGE_BOLD","alwaysShow","ExpanderToggle"],"mappings":"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"}
|
|
@@ -0,0 +1,146 @@
|
|
|
1
|
+
import { useId } from 'react';
|
|
2
|
+
import { clsx } from 'clsx';
|
|
3
|
+
import Body from '../../body/Body.mjs';
|
|
4
|
+
import Button from '../../button/Button.resolver.mjs';
|
|
5
|
+
import '../../common/theme.mjs';
|
|
6
|
+
import '../../common/direction.mjs';
|
|
7
|
+
import '../../common/propsValues/control.mjs';
|
|
8
|
+
import { Breakpoint } from '../../common/propsValues/breakpoint.mjs';
|
|
9
|
+
import '../../common/propsValues/size.mjs';
|
|
10
|
+
import { Typography } from '../../common/propsValues/typography.mjs';
|
|
11
|
+
import '../../common/propsValues/width.mjs';
|
|
12
|
+
import '../../common/propsValues/type.mjs';
|
|
13
|
+
import '../../common/propsValues/dateMode.mjs';
|
|
14
|
+
import '../../common/propsValues/monthFormat.mjs';
|
|
15
|
+
import '../../common/propsValues/position.mjs';
|
|
16
|
+
import '../../common/propsValues/layouts.mjs';
|
|
17
|
+
import '../../common/propsValues/status.mjs';
|
|
18
|
+
import '../../common/propsValues/sentiment.mjs';
|
|
19
|
+
import '../../common/propsValues/profileType.mjs';
|
|
20
|
+
import '../../common/propsValues/variant.mjs';
|
|
21
|
+
import '../../common/propsValues/scroll.mjs';
|
|
22
|
+
import '../../common/propsValues/markdownNodeType.mjs';
|
|
23
|
+
import '../../common/fileType.mjs';
|
|
24
|
+
import '@transferwise/icons';
|
|
25
|
+
import 'react-intl';
|
|
26
|
+
import '../../common/closeButton/CloseButton.messages.mjs';
|
|
27
|
+
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
|
|
28
|
+
import { LiveRegion } from '../../common/liveRegion/LiveRegion.mjs';
|
|
29
|
+
import { PrimitivePrompt } from '../PrimitivePrompt/PrimitivePrompt.mjs';
|
|
30
|
+
import { useScreenSize } from '../../common/hooks/useScreenSize.mjs';
|
|
31
|
+
import { renderPromptMedia } from '../helpers/promptMedia.mjs';
|
|
32
|
+
import { shouldShowWhenExpanded, ExpanderToggle } from '../common/Expander/Expander.mjs';
|
|
33
|
+
import { buildAnnouncementString } from './helpers.mjs';
|
|
34
|
+
|
|
35
|
+
const CriticalBanner = ({
|
|
36
|
+
sentiment = 'negative',
|
|
37
|
+
title,
|
|
38
|
+
description,
|
|
39
|
+
media = {},
|
|
40
|
+
action,
|
|
41
|
+
actionSecondary,
|
|
42
|
+
expanded = true,
|
|
43
|
+
onToggle,
|
|
44
|
+
id,
|
|
45
|
+
className,
|
|
46
|
+
'data-testid': testId,
|
|
47
|
+
'aria-label': ariaLabel
|
|
48
|
+
}) => {
|
|
49
|
+
const isMobile = !useScreenSize(Breakpoint.EXTRA_SMALL);
|
|
50
|
+
const resolvedExpanded = !isMobile || expanded;
|
|
51
|
+
const hasActions = action ?? actionSecondary;
|
|
52
|
+
const mediaId = useId();
|
|
53
|
+
const titleId = useId();
|
|
54
|
+
const descId = useId();
|
|
55
|
+
const ariaLabelledByIds = [media['aria-hidden'] ? undefined : mediaId, ariaLabel || !title ? undefined : titleId].filter(Boolean).join(' ');
|
|
56
|
+
return /*#__PURE__*/jsx(LiveRegion, {
|
|
57
|
+
"aria-live": "assertive",
|
|
58
|
+
announceOnChange: buildAnnouncementString({
|
|
59
|
+
title,
|
|
60
|
+
description,
|
|
61
|
+
expanded: resolvedExpanded,
|
|
62
|
+
actionLabel: action?.label,
|
|
63
|
+
actionSecondaryLabel: actionSecondary?.label
|
|
64
|
+
}),
|
|
65
|
+
children: /*#__PURE__*/jsxs(PrimitivePrompt, {
|
|
66
|
+
id: id,
|
|
67
|
+
sentiment: sentiment,
|
|
68
|
+
emphasis: sentiment === 'neutral' ? 'base' : 'elevated',
|
|
69
|
+
"data-testid": testId,
|
|
70
|
+
className: clsx('wds-critical-banner', {
|
|
71
|
+
'wds-critical-banner__mobile--collapsed': !resolvedExpanded,
|
|
72
|
+
'wds-critical-banner--with-two-actions': !!actionSecondary
|
|
73
|
+
}, className),
|
|
74
|
+
media: renderPromptMedia({
|
|
75
|
+
media,
|
|
76
|
+
sentiment,
|
|
77
|
+
mediaId,
|
|
78
|
+
imgClassName: 'wds-critical-banner--media-image'
|
|
79
|
+
}),
|
|
80
|
+
actions: shouldShowWhenExpanded({
|
|
81
|
+
expanded: resolvedExpanded,
|
|
82
|
+
hasContent: !!hasActions
|
|
83
|
+
}) ? /*#__PURE__*/jsxs(Fragment, {
|
|
84
|
+
children: [actionSecondary &&
|
|
85
|
+
/*#__PURE__*/
|
|
86
|
+
// @ts-expect-error onClick type mismatch
|
|
87
|
+
jsx(Button, {
|
|
88
|
+
v2: true,
|
|
89
|
+
size: "md",
|
|
90
|
+
priority: "secondary",
|
|
91
|
+
href: actionSecondary.href,
|
|
92
|
+
block: isMobile,
|
|
93
|
+
onClick: actionSecondary?.onClick,
|
|
94
|
+
children: actionSecondary.label
|
|
95
|
+
}), action &&
|
|
96
|
+
/*#__PURE__*/
|
|
97
|
+
// @ts-expect-error onClick type mismatch
|
|
98
|
+
jsx(Button, {
|
|
99
|
+
v2: true,
|
|
100
|
+
size: "md",
|
|
101
|
+
priority: "primary",
|
|
102
|
+
href: action.href,
|
|
103
|
+
block: isMobile,
|
|
104
|
+
onClick: action.onClick,
|
|
105
|
+
children: action.label
|
|
106
|
+
})]
|
|
107
|
+
}) : undefined,
|
|
108
|
+
role: "region",
|
|
109
|
+
...(ariaLabel ? {
|
|
110
|
+
'aria-label': ariaLabel
|
|
111
|
+
} : {
|
|
112
|
+
'aria-labelledby': ariaLabelledByIds,
|
|
113
|
+
'aria-describedby': descId
|
|
114
|
+
}),
|
|
115
|
+
children: [/*#__PURE__*/jsxs("div", {
|
|
116
|
+
className: clsx('d-flex', 'flex-column', 'justify-content-center', 'wds-critical-banner__text-wrapper'),
|
|
117
|
+
children: [title && /*#__PURE__*/jsx(Body, {
|
|
118
|
+
id: titleId,
|
|
119
|
+
type: Typography.BODY_LARGE_BOLD,
|
|
120
|
+
className: clsx('wds-critical-banner__content', {
|
|
121
|
+
'wds-critical-banner__title--collapsed': !resolvedExpanded
|
|
122
|
+
}),
|
|
123
|
+
children: title
|
|
124
|
+
}), shouldShowWhenExpanded({
|
|
125
|
+
expanded: resolvedExpanded,
|
|
126
|
+
hasContent: !!description,
|
|
127
|
+
alwaysShow: !title
|
|
128
|
+
}) && /*#__PURE__*/jsx(Body, {
|
|
129
|
+
id: descId,
|
|
130
|
+
className: clsx('wds-critical-banner__content', {
|
|
131
|
+
'wds-critical-banner__description--collapsed': !resolvedExpanded && !title
|
|
132
|
+
}),
|
|
133
|
+
children: description
|
|
134
|
+
})]
|
|
135
|
+
}), isMobile && /*#__PURE__*/jsx(ExpanderToggle, {
|
|
136
|
+
expanded: expanded,
|
|
137
|
+
size: 24,
|
|
138
|
+
className: "wds-critical-banner__toggle",
|
|
139
|
+
onToggle: onToggle
|
|
140
|
+
})]
|
|
141
|
+
})
|
|
142
|
+
});
|
|
143
|
+
};
|
|
144
|
+
|
|
145
|
+
export { CriticalBanner };
|
|
146
|
+
//# sourceMappingURL=CriticalBanner.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"CriticalBanner.mjs","sources":["../../../src/prompt/CriticalBanner/CriticalBanner.tsx"],"sourcesContent":["import { AriaAttributes, ReactNode, useId } from 'react';\nimport { clsx } from 'clsx';\n\nimport Body from '../../body';\nimport Button from '../../button';\nimport { Breakpoint, LiveRegion, Typography } from '../../common';\nimport { ButtonProps } from '../../button/Button.types';\nimport { PrimitivePrompt, PrimitivePromptProps } from '../PrimitivePrompt';\nimport { useScreenSize } from '../../common/hooks/useScreenSize';\n\nimport { renderPromptMedia, PromptMedia } from '../helpers/promptMedia';\nimport { shouldShowWhenExpanded, ExpanderToggle } from '../common/Expander/Expander';\nimport { buildAnnouncementString } from './helpers';\n\nexport type CriticalBannerProps = {\n title?: ReactNode;\n description?: ReactNode;\n media?: PromptMedia;\n action?: Pick<ButtonProps, 'onClick' | 'href' | 'target'> & {\n label: ButtonProps['children'];\n };\n actionSecondary?: Pick<ButtonProps, 'onClick' | 'href' | 'target'> & {\n label: ButtonProps['children'];\n };\n sentiment?: Exclude<PrimitivePromptProps['sentiment'], 'proposition'>;\n /**\n * Controls whether the description and actions are visible.\n * When collapsed with a title, only the title is shown.\n * When collapsed without a title, the description is trimmed to 2 lines.\n */\n expanded?: boolean;\n /** Called when the user clicks the chevron toggle. */\n onToggle?: () => void;\n /**\n * Overrides the default labelling derived from `title` and `description`.\n *\n * **NB:** When provided, the default `aria-labelledby` / `aria-describedby`\n * attributes are removed — include all necessary context in the label.\n */\n 'aria-label'?: AriaAttributes['aria-label'];\n} & Pick<PrimitivePromptProps, 'id' | 'className' | 'data-testid'>;\n\n/**\n * A full-width, non-dismissible banner for critical messages such as account blocks or\n * time-sensitive actions that require immediate user attention.\n\n * @see {@link https://wise.design/components/critical-banner Design Spec}\n */\nexport const CriticalBanner = ({\n sentiment = 'negative',\n title,\n description,\n media = {},\n action,\n actionSecondary,\n expanded = true,\n onToggle,\n id,\n className,\n 'data-testid': testId,\n 'aria-label': ariaLabel,\n}: CriticalBannerProps) => {\n const isMobile = !useScreenSize(Breakpoint.EXTRA_SMALL);\n const resolvedExpanded = !isMobile || expanded;\n const hasActions = action ?? actionSecondary;\n const mediaId = useId();\n const titleId = useId();\n const descId = useId();\n\n const ariaLabelledByIds = [\n media['aria-hidden'] ? undefined : mediaId,\n ariaLabel || !title ? undefined : titleId,\n ]\n .filter(Boolean)\n .join(' ');\n\n return (\n <LiveRegion\n aria-live=\"assertive\"\n announceOnChange={buildAnnouncementString({\n title,\n description,\n expanded: resolvedExpanded,\n actionLabel: action?.label,\n actionSecondaryLabel: actionSecondary?.label,\n })}\n >\n <PrimitivePrompt\n id={id}\n sentiment={sentiment}\n emphasis={sentiment === 'neutral' ? 'base' : 'elevated'}\n data-testid={testId}\n className={clsx(\n 'wds-critical-banner',\n {\n 'wds-critical-banner__mobile--collapsed': !resolvedExpanded,\n 'wds-critical-banner--with-two-actions': !!actionSecondary,\n },\n className,\n )}\n media={renderPromptMedia({\n media,\n sentiment,\n mediaId,\n imgClassName: 'wds-critical-banner--media-image',\n })}\n actions={\n shouldShowWhenExpanded({ expanded: resolvedExpanded, hasContent: !!hasActions }) ? (\n <>\n {actionSecondary && (\n // @ts-expect-error onClick type mismatch\n <Button\n v2\n size=\"md\"\n priority=\"secondary\"\n href={actionSecondary.href}\n block={isMobile}\n onClick={actionSecondary?.onClick}\n >\n {actionSecondary.label}\n </Button>\n )}\n {action && (\n // @ts-expect-error onClick type mismatch\n <Button\n v2\n size=\"md\"\n priority=\"primary\"\n href={action.href}\n block={isMobile}\n onClick={action.onClick}\n >\n {action.label}\n </Button>\n )}\n </>\n ) : undefined\n }\n role=\"region\"\n {...(ariaLabel\n ? { 'aria-label': ariaLabel }\n : {\n 'aria-labelledby': ariaLabelledByIds,\n 'aria-describedby': descId,\n })}\n >\n <div\n className={clsx(\n 'd-flex',\n 'flex-column',\n 'justify-content-center',\n 'wds-critical-banner__text-wrapper',\n )}\n >\n {title && (\n <Body\n id={titleId}\n type={Typography.BODY_LARGE_BOLD}\n className={clsx('wds-critical-banner__content', {\n 'wds-critical-banner__title--collapsed': !resolvedExpanded,\n })}\n >\n {title}\n </Body>\n )}\n {shouldShowWhenExpanded({\n expanded: resolvedExpanded,\n hasContent: !!description,\n alwaysShow: !title,\n }) && (\n <Body\n id={descId}\n className={clsx('wds-critical-banner__content', {\n 'wds-critical-banner__description--collapsed': !resolvedExpanded && !title,\n })}\n >\n {description}\n </Body>\n )}\n </div>\n {isMobile && (\n <ExpanderToggle\n expanded={expanded}\n size={24}\n className=\"wds-critical-banner__toggle\"\n onToggle={onToggle}\n />\n )}\n </PrimitivePrompt>\n </LiveRegion>\n );\n};\n\nexport default CriticalBanner;\n"],"names":["CriticalBanner","sentiment","title","description","media","action","actionSecondary","expanded","onToggle","id","className","testId","ariaLabel","isMobile","useScreenSize","Breakpoint","EXTRA_SMALL","resolvedExpanded","hasActions","mediaId","useId","titleId","descId","ariaLabelledByIds","undefined","filter","Boolean","join","_jsx","LiveRegion","announceOnChange","buildAnnouncementString","actionLabel","label","actionSecondaryLabel","children","_jsxs","PrimitivePrompt","emphasis","clsx","renderPromptMedia","imgClassName","actions","shouldShowWhenExpanded","hasContent","_Fragment","Button","v2","size","priority","href","block","onClick","role","Body","type","Typography","BODY_LARGE_BOLD","alwaysShow","ExpanderToggle"],"mappings":"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"}
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* Helper to extract string from ReactNode for announcements.
|
|
5
|
+
* Complex ReactNodes (JSX elements) return empty string.
|
|
6
|
+
*/
|
|
7
|
+
const getStringValue = node => {
|
|
8
|
+
if (typeof node === 'string' || typeof node === 'number') {
|
|
9
|
+
return String(node);
|
|
10
|
+
}
|
|
11
|
+
return '';
|
|
12
|
+
};
|
|
13
|
+
/**
|
|
14
|
+
* Builds the announcement string from visible content only.
|
|
15
|
+
* Content visibility depends on expanded state and presence of title.
|
|
16
|
+
*/
|
|
17
|
+
const buildAnnouncementString = ({
|
|
18
|
+
title,
|
|
19
|
+
description,
|
|
20
|
+
expanded,
|
|
21
|
+
actionLabel,
|
|
22
|
+
actionSecondaryLabel
|
|
23
|
+
}) => {
|
|
24
|
+
return [title ? getStringValue(title) : undefined, description && (expanded || !title) ? getStringValue(description) : undefined, expanded && actionLabel ? getStringValue(actionLabel) : undefined, expanded && actionSecondaryLabel ? getStringValue(actionSecondaryLabel) : undefined].filter(Boolean).join('|');
|
|
25
|
+
};
|
|
26
|
+
|
|
27
|
+
exports.buildAnnouncementString = buildAnnouncementString;
|
|
28
|
+
exports.getStringValue = getStringValue;
|
|
29
|
+
//# sourceMappingURL=helpers.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"helpers.js","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;;;;;"}
|
|
@@ -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;;;;"}
|
|
@@ -20,7 +20,6 @@ require('../../common/propsValues/variant.js');
|
|
|
20
20
|
require('../../common/propsValues/scroll.js');
|
|
21
21
|
require('../../common/propsValues/markdownNodeType.js');
|
|
22
22
|
require('../../common/fileType.js');
|
|
23
|
-
require('@transferwise/formatting');
|
|
24
23
|
var icons = require('@transferwise/icons');
|
|
25
24
|
var clsx = require('clsx');
|
|
26
25
|
require('react-intl');
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InfoPrompt.js","sources":["../../../src/prompt/InfoPrompt/InfoPrompt.tsx"],"sourcesContent":["import { HTMLAttributes, ReactNode, useState } from 'react';\nimport { LiveRegion, Sentiment, Typography } from '../../common';\nimport type { AriaLive } from '../../common';\nimport { GiftBox } from '@transferwise/icons';\nimport type { Sentiment as SurfaceSentiment } from '../../sentimentSurface';\nimport StatusIcon from '../../statusIcon';\nimport { clsx } from 'clsx';\nimport Body from '../../body';\nimport Link, { LinkProps } from '../../link';\nimport { PrimitivePrompt, PrimitivePromptProps } from '../PrimitivePrompt';\n\nexport type InfoPromptAction = Pick<LinkProps, 'href' | 'target' | 'onClick'> & {\n /**\n * The label text for the action link\n */\n label: string;\n};\n\nexport type InfoPromptMedia = {\n /**\n * The icon/image asset to display.\n * The asset should include its own accessibility attributes (e.g. title, aria-label) if it conveys meaning.\n */\n asset: ReactNode;\n};\n\nexport type InfoPromptProps = Omit<HTMLAttributes<HTMLDivElement>, 'title' | 'aria-live' | 'role'> &\n Pick<PrimitivePromptProps, 'data-testid'> & {\n /**\n * The sentiment determines the colour scheme\n * @default 'neutral'\n */\n sentiment?: SurfaceSentiment;\n /**\n * Handler called when the close button is clicked.\n * If not provided, the close button is hidden.\n */\n onDismiss?: () => void;\n /**\n * Custom media to override the default status icon.\n * Success and proposition sentiments support 2 status variations: standard checkmark & confetti.\n */\n media?: InfoPromptMedia;\n /**\n * Action link to be displayed below the description\n */\n action?: InfoPromptAction;\n /**\n * Title content for the prompt\n */\n title?: string;\n /**\n * Description text for the prompt (required)\n */\n description: string;\n className?: string;\n /**\n * Sets the ARIA live region politeness level.\n * - `'polite'` — announced after the current speech (default)\n * - `'assertive'` — interrupts the current speech immediately\n * - `'off'` — disables the live region entirely\n * @default 'polite'\n */\n 'aria-live'?: AriaLive;\n };\n\n/**\n * `InfoPrompt` displays important contextual messages to users within a screen.\n * It provides a visually distinct way to communicate information, warnings, errors,\n * or positive feedback with optional actions and dismissal capabilities.\n *\n * Use this component to replace the deprecated `Alert` component (run codemod to migrate: **`npx \\@wise/wds-codemods@latest info-prompt`**).\n *\n * Guidance can be found in the [design system](https://wise.design/components/info-prompt).\n */\nexport const InfoPrompt = ({\n sentiment = 'neutral',\n onDismiss,\n media,\n action,\n title,\n description,\n className,\n 'aria-live': ariaLive = 'polite',\n 'data-testid': dataTestId,\n ...restProps\n}: InfoPromptProps) => {\n const [shouldFire, setShouldFire] = useState<boolean>();\n const announceOnChange = [title, description, action?.label].filter(Boolean).join('|');\n const statusIconSentiment =\n sentiment === 'success'\n ? Sentiment.POSITIVE\n : (sentiment as Exclude<SurfaceSentiment, 'proposition'>);\n\n const handleTouchStart = () => {\n setShouldFire(true);\n };\n\n const handleTouchEnd = () => {\n if (shouldFire && action?.href) {\n if (action.target === '_blank') {\n window.top?.open(action.href, '_blank', 'noopener, noreferrer');\n } else {\n window.top?.location.assign(action.href);\n }\n }\n setShouldFire(false);\n };\n\n const handleTouchMove = () => {\n setShouldFire(false);\n };\n\n const renderMedia = () => {\n if (media) {\n return <span className=\"wds-info-prompt__media\">{media.asset}</span>;\n }\n\n if (sentiment === 'proposition') {\n return <GiftBox size={24} />;\n }\n\n return <StatusIcon size={24} sentiment={statusIconSentiment} />;\n };\n\n // Render content directly in LiveRegion\n return (\n <LiveRegion aria-live={ariaLive} announceOnChange={announceOnChange}>\n <PrimitivePrompt\n sentiment={sentiment}\n media={renderMedia()}\n data-testid={dataTestId}\n className={clsx('wds-info-prompt', className)}\n {...restProps}\n onTouchStart={handleTouchStart}\n onTouchEnd={handleTouchEnd}\n onTouchMove={handleTouchMove}\n onDismiss={onDismiss}\n >\n <div className=\"wds-info-prompt__content\">\n {title && (\n <Body className=\"wds-info-prompt__title\" type={Typography.BODY_LARGE_BOLD} as=\"span\">\n {title}\n </Body>\n )}\n <Body as=\"span\" className=\"wds-info-prompt__description\">\n {description}\n </Body>\n {action && (\n <Link\n href={action.href}\n target={action.target}\n type={Typography.LINK_DEFAULT}\n className=\"wds-info-prompt__action\"\n onClick={action.onClick}\n >\n {action.label}\n </Link>\n )}\n </div>\n </PrimitivePrompt>\n </LiveRegion>\n );\n};\n"],"names":["InfoPrompt","sentiment","onDismiss","media","action","title","description","className","ariaLive","dataTestId","restProps","shouldFire","setShouldFire","useState","announceOnChange","label","filter","Boolean","join","statusIconSentiment","Sentiment","POSITIVE","handleTouchStart","handleTouchEnd","href","target","window","top","open","location","assign","handleTouchMove","renderMedia","_jsx","children","asset","GiftBox","size","StatusIcon","LiveRegion","PrimitivePrompt","clsx","onTouchStart","onTouchEnd","onTouchMove","_jsxs","Body","type","Typography","BODY_LARGE_BOLD","as","Link","LINK_DEFAULT","onClick"],"mappings":"
|
|
1
|
+
{"version":3,"file":"InfoPrompt.js","sources":["../../../src/prompt/InfoPrompt/InfoPrompt.tsx"],"sourcesContent":["import { HTMLAttributes, ReactNode, useState } from 'react';\nimport { LiveRegion, Sentiment, Typography } from '../../common';\nimport type { AriaLive } from '../../common';\nimport { GiftBox } from '@transferwise/icons';\nimport type { Sentiment as SurfaceSentiment } from '../../sentimentSurface';\nimport StatusIcon from '../../statusIcon';\nimport { clsx } from 'clsx';\nimport Body from '../../body';\nimport Link, { LinkProps } from '../../link';\nimport { PrimitivePrompt, PrimitivePromptProps } from '../PrimitivePrompt';\n\nexport type InfoPromptAction = Pick<LinkProps, 'href' | 'target' | 'onClick'> & {\n /**\n * The label text for the action link\n */\n label: string;\n};\n\nexport type InfoPromptMedia = {\n /**\n * The icon/image asset to display.\n * The asset should include its own accessibility attributes (e.g. title, aria-label) if it conveys meaning.\n */\n asset: ReactNode;\n};\n\nexport type InfoPromptProps = Omit<HTMLAttributes<HTMLDivElement>, 'title' | 'aria-live' | 'role'> &\n Pick<PrimitivePromptProps, 'data-testid'> & {\n /**\n * The sentiment determines the colour scheme\n * @default 'neutral'\n */\n sentiment?: SurfaceSentiment;\n /**\n * Handler called when the close button is clicked.\n * If not provided, the close button is hidden.\n */\n onDismiss?: () => void;\n /**\n * Custom media to override the default status icon.\n * Success and proposition sentiments support 2 status variations: standard checkmark & confetti.\n */\n media?: InfoPromptMedia;\n /**\n * Action link to be displayed below the description\n */\n action?: InfoPromptAction;\n /**\n * Title content for the prompt\n */\n title?: string;\n /**\n * Description text for the prompt (required)\n */\n description: string;\n className?: string;\n /**\n * Sets the ARIA live region politeness level.\n * - `'polite'` — announced after the current speech (default)\n * - `'assertive'` — interrupts the current speech immediately\n * - `'off'` — disables the live region entirely\n * @default 'polite'\n */\n 'aria-live'?: AriaLive;\n };\n\n/**\n * `InfoPrompt` displays important contextual messages to users within a screen.\n * It provides a visually distinct way to communicate information, warnings, errors,\n * or positive feedback with optional actions and dismissal capabilities.\n *\n * Use this component to replace the deprecated `Alert` component (run codemod to migrate: **`npx \\@wise/wds-codemods@latest info-prompt`**).\n *\n * Guidance can be found in the [design system](https://wise.design/components/info-prompt).\n */\nexport const InfoPrompt = ({\n sentiment = 'neutral',\n onDismiss,\n media,\n action,\n title,\n description,\n className,\n 'aria-live': ariaLive = 'polite',\n 'data-testid': dataTestId,\n ...restProps\n}: InfoPromptProps) => {\n const [shouldFire, setShouldFire] = useState<boolean>();\n const announceOnChange = [title, description, action?.label].filter(Boolean).join('|');\n const statusIconSentiment =\n sentiment === 'success'\n ? Sentiment.POSITIVE\n : (sentiment as Exclude<SurfaceSentiment, 'proposition'>);\n\n const handleTouchStart = () => {\n setShouldFire(true);\n };\n\n const handleTouchEnd = () => {\n if (shouldFire && action?.href) {\n if (action.target === '_blank') {\n window.top?.open(action.href, '_blank', 'noopener, noreferrer');\n } else {\n window.top?.location.assign(action.href);\n }\n }\n setShouldFire(false);\n };\n\n const handleTouchMove = () => {\n setShouldFire(false);\n };\n\n const renderMedia = () => {\n if (media) {\n return <span className=\"wds-info-prompt__media\">{media.asset}</span>;\n }\n\n if (sentiment === 'proposition') {\n return <GiftBox size={24} />;\n }\n\n return <StatusIcon size={24} sentiment={statusIconSentiment} />;\n };\n\n // Render content directly in LiveRegion\n return (\n <LiveRegion aria-live={ariaLive} announceOnChange={announceOnChange}>\n <PrimitivePrompt\n sentiment={sentiment}\n media={renderMedia()}\n data-testid={dataTestId}\n className={clsx('wds-info-prompt', className)}\n {...restProps}\n onTouchStart={handleTouchStart}\n onTouchEnd={handleTouchEnd}\n onTouchMove={handleTouchMove}\n onDismiss={onDismiss}\n >\n <div className=\"wds-info-prompt__content\">\n {title && (\n <Body className=\"wds-info-prompt__title\" type={Typography.BODY_LARGE_BOLD} as=\"span\">\n {title}\n </Body>\n )}\n <Body as=\"span\" className=\"wds-info-prompt__description\">\n {description}\n </Body>\n {action && (\n <Link\n href={action.href}\n target={action.target}\n type={Typography.LINK_DEFAULT}\n className=\"wds-info-prompt__action\"\n onClick={action.onClick}\n >\n {action.label}\n </Link>\n )}\n </div>\n </PrimitivePrompt>\n </LiveRegion>\n );\n};\n"],"names":["InfoPrompt","sentiment","onDismiss","media","action","title","description","className","ariaLive","dataTestId","restProps","shouldFire","setShouldFire","useState","announceOnChange","label","filter","Boolean","join","statusIconSentiment","Sentiment","POSITIVE","handleTouchStart","handleTouchEnd","href","target","window","top","open","location","assign","handleTouchMove","renderMedia","_jsx","children","asset","GiftBox","size","StatusIcon","LiveRegion","PrimitivePrompt","clsx","onTouchStart","onTouchEnd","onTouchMove","_jsxs","Body","type","Typography","BODY_LARGE_BOLD","as","Link","LINK_DEFAULT","onClick"],"mappings":"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"}
|
|
@@ -18,7 +18,6 @@ import '../../common/propsValues/variant.mjs';
|
|
|
18
18
|
import '../../common/propsValues/scroll.mjs';
|
|
19
19
|
import '../../common/propsValues/markdownNodeType.mjs';
|
|
20
20
|
import '../../common/fileType.mjs';
|
|
21
|
-
import '@transferwise/formatting';
|
|
22
21
|
import { GiftBox } from '@transferwise/icons';
|
|
23
22
|
import { clsx } from 'clsx';
|
|
24
23
|
import 'react-intl';
|