@transferwise/components 0.0.0-experimental-fa9fbe9 → 0.0.0-experimental-00012dd
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 +1 -1
- package/build/accordion/AccordionItem/AccordionItem.mjs +1 -1
- package/build/actionButton/ActionButton.js +1 -1
- package/build/actionButton/ActionButton.mjs +1 -1
- package/build/actionOption/ActionOption.js +1 -1
- package/build/actionOption/ActionOption.mjs +1 -1
- package/build/alert/Alert.js +1 -1
- package/build/alert/Alert.mjs +1 -1
- package/build/alert/inlineMarkdown/InlineMarkdown.js +1 -1
- package/build/alert/inlineMarkdown/InlineMarkdown.mjs +1 -1
- package/build/avatar/Avatar.js +1 -1
- package/build/avatar/Avatar.mjs +1 -1
- package/build/avatarLayout/AvatarLayout.js +1 -1
- package/build/avatarLayout/AvatarLayout.mjs +1 -1
- package/build/avatarView/AvatarView.js +1 -1
- package/build/avatarView/AvatarView.mjs +1 -1
- package/build/avatarWrapper/AvatarWrapper.js +1 -1
- package/build/avatarWrapper/AvatarWrapper.mjs +1 -1
- package/build/badge/Badge.js +1 -1
- package/build/badge/Badge.mjs +1 -1
- package/build/button/Button.js +1 -1
- package/build/button/Button.mjs +1 -1
- package/build/button/LegacyButton.js +1 -1
- package/build/button/LegacyButton.mjs +1 -1
- package/build/button/classMap.js +1 -1
- package/build/button/classMap.mjs +1 -1
- package/build/button/legacyUtils/legacyUtils.js +1 -1
- package/build/button/legacyUtils/legacyUtils.mjs +1 -1
- package/build/card/Card.js +1 -1
- package/build/card/Card.mjs +1 -1
- package/build/checkbox/Checkbox.js +1 -1
- package/build/checkbox/Checkbox.mjs +1 -1
- package/build/chevron/Chevron.js +1 -1
- package/build/chevron/Chevron.mjs +1 -1
- package/build/chips/Chip.js +1 -1
- package/build/chips/Chip.mjs +1 -1
- package/build/circularButton/CircularButton.js +2 -2
- package/build/circularButton/CircularButton.js.map +1 -1
- package/build/circularButton/CircularButton.mjs +2 -2
- package/build/circularButton/CircularButton.mjs.map +1 -1
- package/build/common/bottomSheet/BottomSheet.js +2 -2
- package/build/common/bottomSheet/BottomSheet.js.map +1 -1
- package/build/common/bottomSheet/BottomSheet.mjs +2 -2
- package/build/common/bottomSheet/BottomSheet.mjs.map +1 -1
- package/build/common/circle/Circle.js +2 -2
- package/build/common/circle/Circle.js.map +1 -1
- package/build/common/circle/Circle.mjs +2 -2
- package/build/common/circle/Circle.mjs.map +1 -1
- package/build/common/hooks/useLayout/useLayout.js +6 -6
- package/build/common/hooks/useLayout/useLayout.js.map +1 -1
- package/build/common/hooks/useLayout/useLayout.mjs +1 -1
- package/build/common/hooks/useLayout/useLayout.mjs.map +1 -1
- package/build/common/hooks/useResizeObserver.js +3 -3
- package/build/common/hooks/useResizeObserver.js.map +1 -1
- package/build/common/hooks/useResizeObserver.mjs +3 -3
- package/build/common/hooks/useResizeObserver.mjs.map +1 -1
- package/build/common/hooks/useScreenSize.js.map +1 -1
- package/build/common/hooks/useScreenSize.mjs.map +1 -1
- package/build/common/panel/Panel.js +1 -1
- package/build/common/panel/Panel.mjs +1 -1
- package/build/common/responsivePanel/ResponsivePanel.js +1 -1
- package/build/common/responsivePanel/ResponsivePanel.mjs +1 -1
- package/build/criticalBanner/CriticalCommsBanner.js +1 -4
- package/build/criticalBanner/CriticalCommsBanner.js.map +1 -1
- package/build/criticalBanner/CriticalCommsBanner.mjs +1 -4
- 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 +2 -2
- package/build/dateLookup/DateLookup.js.map +1 -1
- package/build/dateLookup/DateLookup.mjs +1 -1
- package/build/dateLookup/DateLookup.mjs.map +1 -1
- package/build/dateLookup/dateHeader/DateHeader.js +1 -1
- package/build/dateLookup/dateHeader/DateHeader.mjs +1 -1
- package/build/dateLookup/dateTrigger/DateTrigger.js +1 -1
- package/build/dateLookup/dateTrigger/DateTrigger.mjs +1 -1
- package/build/decision/Decision.js +3 -3
- package/build/decision/Decision.js.map +1 -1
- package/build/decision/Decision.mjs +1 -1
- package/build/decision/Decision.mjs.map +1 -1
- package/build/definitionList/DefinitionList.js +1 -1
- package/build/definitionList/DefinitionList.mjs +1 -1
- package/build/dimmer/Dimmer.js +1 -1
- package/build/dimmer/Dimmer.mjs +1 -1
- package/build/display/Display.js +1 -1
- package/build/display/Display.mjs +1 -1
- package/build/drawer/Drawer.js +1 -1
- package/build/drawer/Drawer.mjs +1 -1
- package/build/expressiveMoneyInput/currencySelector/CurrencySelector.js +1 -1
- package/build/expressiveMoneyInput/currencySelector/CurrencySelector.mjs +1 -1
- package/build/field/Field.js +3 -4
- package/build/field/Field.js.map +1 -1
- package/build/field/Field.mjs +3 -4
- package/build/field/Field.mjs.map +1 -1
- package/build/flowNavigation/FlowNavigation.js +3 -3
- package/build/flowNavigation/FlowNavigation.js.map +1 -1
- package/build/flowNavigation/FlowNavigation.mjs +1 -1
- package/build/flowNavigation/FlowNavigation.mjs.map +1 -1
- package/build/header/Header.js +1 -1
- package/build/header/Header.mjs +1 -1
- package/build/i18n/en.json +0 -2
- package/build/i18n/en.json.js +0 -2
- package/build/i18n/en.json.js.map +1 -1
- package/build/i18n/en.json.mjs +0 -2
- package/build/i18n/en.json.mjs.map +1 -1
- package/build/image/Image.js +1 -1
- package/build/image/Image.mjs +1 -1
- package/build/index.js +2 -4
- package/build/index.js.map +1 -1
- package/build/index.mjs +1 -2
- package/build/index.mjs.map +1 -1
- package/build/info/Info.js +1 -1
- package/build/info/Info.mjs +1 -1
- package/build/inlineAlert/InlineAlert.js +1 -1
- package/build/inlineAlert/InlineAlert.mjs +1 -1
- package/build/inputs/SearchInput.js +1 -1
- package/build/inputs/SearchInput.mjs +1 -1
- package/build/inputs/SelectInput/SelectInput.js +2 -2
- package/build/inputs/SelectInput/SelectInput.js.map +1 -1
- package/build/inputs/SelectInput/SelectInput.mjs +1 -1
- package/build/inputs/SelectInput/SelectInput.mjs.map +1 -1
- package/build/instructionsList/InstructionsList.js +1 -1
- package/build/instructionsList/InstructionsList.mjs +1 -1
- package/build/link/Link.js +1 -1
- package/build/link/Link.mjs +1 -1
- package/build/listItem/AdditionalInfo/ListItemAdditionalInfo.js +1 -1
- package/build/listItem/AdditionalInfo/ListItemAdditionalInfo.mjs +1 -1
- package/build/listItem/ListItem.js +1 -1
- package/build/listItem/ListItem.mjs +1 -1
- package/build/listItem/Prompt/ListItemPrompt.js +3 -4
- package/build/listItem/Prompt/ListItemPrompt.js.map +1 -1
- package/build/listItem/Prompt/ListItemPrompt.mjs +3 -4
- package/build/listItem/Prompt/ListItemPrompt.mjs.map +1 -1
- package/build/loader/Loader.js +1 -1
- package/build/loader/Loader.mjs +1 -1
- package/build/logo/Logo.js +1 -1
- package/build/logo/Logo.js.map +1 -1
- package/build/logo/Logo.mjs +1 -1
- package/build/logo/Logo.mjs.map +1 -1
- package/build/main.css +330 -495
- package/build/markdown/Markdown.js +1 -1
- package/build/markdown/Markdown.mjs +1 -1
- package/build/modal/Modal.js +1 -1
- package/build/modal/Modal.mjs +1 -1
- package/build/moneyInput/MoneyInput.js +1 -1
- package/build/moneyInput/MoneyInput.mjs +1 -1
- package/build/navigationOption/NavigationOption.js +1 -1
- package/build/navigationOption/NavigationOption.mjs +1 -1
- package/build/nudge/Nudge.js +1 -1
- package/build/nudge/Nudge.mjs +1 -1
- package/build/overlayHeader/OverlayHeader.js +1 -1
- package/build/overlayHeader/OverlayHeader.mjs +1 -1
- package/build/phoneNumberInput/PhoneNumberInput.js +1 -1
- package/build/phoneNumberInput/PhoneNumberInput.mjs +1 -1
- package/build/popover/Popover.js +1 -1
- package/build/popover/Popover.mjs +1 -1
- package/build/processIndicator/ProcessIndicator.js +1 -1
- package/build/processIndicator/ProcessIndicator.mjs +1 -1
- package/build/progressBar/ProgressBar.js +1 -1
- package/build/progressBar/ProgressBar.mjs +1 -1
- package/build/promoCard/PromoCard.js +1 -1
- package/build/promoCard/PromoCard.mjs +1 -1
- package/build/promoCard/PromoCardIndicator.js +1 -1
- package/build/promoCard/PromoCardIndicator.mjs +1 -1
- package/build/prompt/ActionPrompt/ActionPrompt.js +42 -10
- package/build/prompt/ActionPrompt/ActionPrompt.js.map +1 -1
- package/build/prompt/ActionPrompt/ActionPrompt.mjs +41 -9
- package/build/prompt/ActionPrompt/ActionPrompt.mjs.map +1 -1
- package/build/prompt/InfoPrompt/InfoPrompt.js +1 -1
- package/build/prompt/InfoPrompt/InfoPrompt.mjs +1 -1
- package/build/prompt/InlinePrompt/InlinePrompt.js +1 -1
- package/build/prompt/InlinePrompt/InlinePrompt.mjs +1 -1
- package/build/prompt/PrimitivePrompt/PrimitivePrompt.js +4 -11
- package/build/prompt/PrimitivePrompt/PrimitivePrompt.js.map +1 -1
- package/build/prompt/PrimitivePrompt/PrimitivePrompt.mjs +4 -11
- package/build/prompt/PrimitivePrompt/PrimitivePrompt.mjs.map +1 -1
- package/build/provider/Provider.js +1 -1
- package/build/provider/Provider.mjs +1 -1
- package/build/radio/Radio.js +1 -1
- package/build/radio/Radio.mjs +1 -1
- package/build/segmentedControl/SegmentedControl.js +1 -1
- package/build/segmentedControl/SegmentedControl.mjs +1 -1
- package/build/select/Select.js +1 -1
- package/build/select/Select.mjs +1 -1
- package/build/select/option/Option.js +1 -1
- package/build/select/option/Option.mjs +1 -1
- package/build/statusIcon/StatusIcon.js +2 -2
- package/build/statusIcon/StatusIcon.js.map +1 -1
- package/build/statusIcon/StatusIcon.mjs +2 -2
- package/build/statusIcon/StatusIcon.mjs.map +1 -1
- package/build/stepper/Stepper.js +1 -1
- package/build/stepper/Stepper.mjs +1 -1
- package/build/sticky/Sticky.js +1 -1
- package/build/sticky/Sticky.mjs +1 -1
- package/build/styles/accordion/Accordion.css +1 -1
- package/build/styles/card/Card.css +2 -2
- package/build/styles/carousel/Carousel.css +5 -5
- package/build/styles/common/Option/Option.css +1 -1
- package/build/styles/common/baseCard/BaseCard.css +1 -1
- package/build/styles/container/Container.css +3 -3
- package/build/styles/criticalBanner/CriticalCommsBanner.css +1 -1
- package/build/styles/css/accordion.css +4 -4
- package/build/styles/css/button-groups.css +6 -6
- package/build/styles/css/buttons.css +1 -1
- package/build/styles/css/circles.css +1 -1
- package/build/styles/css/column-layout.css +4 -4
- package/build/styles/css/decision.css +4 -4
- package/build/styles/css/dropdowns.css +10 -10
- package/build/styles/css/droppable.css +8 -8
- package/build/styles/css/flex.css +14 -14
- package/build/styles/css/footer.css +3 -3
- package/build/styles/css/grid.css +19 -19
- package/build/styles/css/input-groups.css +12 -12
- package/build/styles/css/list-group.css +8 -8
- package/build/styles/css/modals.css +3 -3
- package/build/styles/css/navbar.css +62 -62
- package/build/styles/css/navs.css +2 -2
- package/build/styles/css/neptune.css +258 -258
- package/build/styles/css/panels.css +9 -9
- package/build/styles/css/popovers.css +13 -13
- package/build/styles/css/select.css +1 -1
- package/build/styles/css/sequences.css +6 -6
- package/build/styles/css/table.css +6 -6
- package/build/styles/css/utilities.css +4 -4
- package/build/styles/css/wells.css +4 -4
- package/build/styles/dateInput/DateInput.css +1 -1
- package/build/styles/definitionList/DefinitionList.css +2 -2
- package/build/styles/drawer/Drawer.css +1 -1
- package/build/styles/inputs/Input.css +3 -3
- package/build/styles/inputs/SelectInput/Options/SelectInputOptions.css +2 -2
- package/build/styles/inputs/SelectInput/SelectInput.css +2 -2
- package/build/styles/inputs/TextArea.css +3 -3
- package/build/styles/less/legacy-variables.less +34 -47
- package/build/styles/less/neptune-tokens.less +2 -2
- package/build/styles/logo/Logo.css +2 -2
- package/build/styles/main.css +330 -495
- package/build/styles/modal/Modal.css +5 -5
- package/build/styles/popover/Popover.css +3 -3
- package/build/styles/promoCard/PromoCard.css +1 -1
- package/build/styles/prompt/ActionPrompt/ActionPrompt.css +1 -1
- package/build/styles/prompt/PrimitivePrompt/PrimitivePrompt.css +1 -1
- package/build/styles/props/custom-media.css +23 -11
- package/build/styles/props/neptune-tokens.css +1 -1
- package/build/styles/snackbar/Snackbar.css +2 -2
- package/build/styles/stepper/Stepper.css +2 -2
- package/build/styles/styles/less/accordion.css +4 -4
- package/build/styles/styles/less/button-groups.css +6 -6
- package/build/styles/styles/less/buttons.css +1 -1
- package/build/styles/styles/less/circles.css +1 -1
- package/build/styles/styles/less/column-layout.css +4 -4
- package/build/styles/styles/less/decision.css +4 -4
- package/build/styles/styles/less/dropdowns.css +10 -10
- package/build/styles/styles/less/droppable.css +8 -8
- package/build/styles/styles/less/flex.css +14 -14
- package/build/styles/styles/less/footer.css +3 -3
- package/build/styles/styles/less/forms/bootstrap-forms.css +9 -9
- package/build/styles/styles/less/grid.css +19 -19
- package/build/styles/styles/less/input-groups.css +12 -12
- package/build/styles/styles/less/list-group.css +8 -8
- package/build/styles/styles/less/modals.css +3 -3
- package/build/styles/styles/less/navbar.css +62 -62
- package/build/styles/styles/less/navs.css +2 -2
- package/build/styles/styles/less/neptune.css +258 -258
- package/build/styles/styles/less/panels.css +9 -9
- package/build/styles/styles/less/popovers.css +13 -13
- package/build/styles/styles/less/select.css +1 -1
- package/build/styles/styles/less/sequences.css +6 -6
- package/build/styles/styles/less/table.css +6 -6
- package/build/styles/styles/less/utilities.css +4 -4
- package/build/styles/styles/less/wells.css +4 -4
- package/build/styles/styles/props/custom-media.css +1 -11
- package/build/styles/table/Table.css +1 -1
- package/build/styles/tabs/Tabs.css +2 -2
- package/build/styles/typeahead/Typeahead.css +1 -1
- package/build/summary/Summary.js +1 -1
- package/build/summary/Summary.mjs +1 -1
- package/build/table/Table.js +7 -6
- package/build/table/Table.js.map +1 -1
- package/build/table/Table.mjs +7 -6
- package/build/table/Table.mjs.map +1 -1
- package/build/table/TableRow.js +1 -1
- package/build/table/TableRow.mjs +1 -1
- package/build/table/TableStatusText.js +1 -1
- package/build/table/TableStatusText.mjs +1 -1
- package/build/tabs/Tabs.js +1 -1
- package/build/tabs/Tabs.mjs +1 -1
- package/build/tile/Tile.js +1 -1
- package/build/tile/Tile.mjs +1 -1
- package/build/title/Title.js +1 -1
- package/build/title/Title.mjs +1 -1
- package/build/tooltip/Tooltip.js +1 -1
- package/build/tooltip/Tooltip.mjs +1 -1
- package/build/typeahead/Typeahead.js +3 -4
- package/build/typeahead/Typeahead.js.map +1 -1
- package/build/typeahead/Typeahead.mjs +3 -4
- package/build/typeahead/Typeahead.mjs.map +1 -1
- package/build/types/circularButton/CircularButton.d.ts.map +1 -1
- package/build/types/common/bottomSheet/BottomSheet.d.ts.map +1 -1
- package/build/types/common/hooks/useResizeObserver.d.ts +1 -1
- package/build/types/common/hooks/useResizeObserver.d.ts.map +1 -1
- package/build/types/common/hooks/useScreenSize.d.ts +1 -1
- package/build/types/common/hooks/useScreenSize.d.ts.map +1 -1
- package/build/types/common/index.d.ts +1 -1
- package/build/types/common/index.d.ts.map +1 -1
- package/build/types/criticalBanner/CriticalCommsBanner.d.ts +0 -3
- package/build/types/criticalBanner/CriticalCommsBanner.d.ts.map +1 -1
- package/build/types/dateLookup/DateLookup.d.ts.map +1 -1
- package/build/types/decision/Decision.d.ts.map +1 -1
- package/build/types/flowNavigation/FlowNavigation.d.ts.map +1 -1
- package/build/types/index.d.ts +4 -3
- package/build/types/index.d.ts.map +1 -1
- package/build/types/logo/Logo.d.ts +1 -1
- package/build/types/prompt/ActionPrompt/ActionPrompt.d.ts +11 -2
- package/build/types/prompt/ActionPrompt/ActionPrompt.d.ts.map +1 -1
- package/build/types/prompt/PrimitivePrompt/PrimitivePrompt.d.ts +3 -35
- package/build/types/prompt/PrimitivePrompt/PrimitivePrompt.d.ts.map +1 -1
- package/build/types/prompt/index.d.ts +0 -2
- package/build/types/prompt/index.d.ts.map +1 -1
- package/build/types/statusIcon/StatusIcon.d.ts.map +1 -1
- package/build/types/table/Table.d.ts.map +1 -1
- package/build/types/test-utils/index.d.ts +0 -4
- package/build/types/test-utils/index.d.ts.map +1 -1
- package/build/upload/Upload.js +1 -1
- package/build/upload/Upload.mjs +1 -1
- package/build/upload/steps/completeStep/completeStep.js +1 -1
- package/build/upload/steps/completeStep/completeStep.mjs +1 -1
- package/build/upload/steps/processingStep/processingStep.js +1 -1
- package/build/upload/steps/processingStep/processingStep.mjs +1 -1
- package/build/upload/steps/uploadImageStep/uploadImageStep.js +1 -1
- package/build/upload/steps/uploadImageStep/uploadImageStep.mjs +1 -1
- package/build/uploadInput/UploadInput.js +1 -1
- package/build/uploadInput/UploadInput.mjs +1 -1
- package/build/uploadInput/uploadButton/UploadButton.js +1 -1
- package/build/uploadInput/uploadButton/UploadButton.mjs +1 -1
- package/build/uploadInput/uploadButton/defaults.js +1 -1
- package/build/uploadInput/uploadButton/defaults.mjs +1 -1
- package/build/uploadInput/uploadItem/UploadItem.js +1 -1
- package/build/uploadInput/uploadItem/UploadItem.mjs +1 -1
- package/build/withDisplayFormat/WithDisplayFormat.js +1 -1
- package/build/withDisplayFormat/WithDisplayFormat.mjs +1 -1
- package/package.json +3 -3
- package/src/accordion/Accordion.css +1 -1
- package/src/card/Card.css +2 -2
- package/src/carousel/Carousel.css +5 -5
- package/src/circularButton/CircularButton.tsx +3 -2
- package/src/common/Option/Option.css +1 -1
- package/src/common/baseCard/BaseCard.css +1 -1
- package/src/common/bottomSheet/BottomSheet.test.story.tsx +6 -5
- package/src/common/bottomSheet/BottomSheet.tsx +2 -2
- package/src/common/circle/Circle.tsx +2 -2
- package/src/common/hooks/useLayout/useLayout.ts +1 -1
- package/src/common/hooks/useResizeObserver.ts +2 -3
- package/src/common/hooks/useScreenSize.ts +1 -1
- package/src/common/index.ts +1 -1
- package/src/common/responsivePanel/ResponsivePanel.test.js +3 -2
- package/src/container/Container.css +3 -3
- package/src/criticalBanner/CriticalCommsBanner.css +1 -1
- package/src/criticalBanner/CriticalCommsBanner.story.tsx +0 -4
- package/src/criticalBanner/CriticalCommsBanner.test.story.tsx +1 -1
- package/src/criticalBanner/CriticalCommsBanner.tsx +0 -3
- package/src/dateInput/DateInput.css +1 -1
- package/src/dateLookup/DateLookup.tsx +1 -1
- package/src/decision/Decision.test.tsx +2 -1
- package/src/decision/Decision.tsx +2 -1
- package/src/definitionList/DefinitionList.css +2 -2
- package/src/definitionList/DefinitionList.less +2 -2
- package/src/drawer/Drawer.css +1 -1
- package/src/flowNavigation/FlowNavigation.test.js +1 -1
- package/src/flowNavigation/FlowNavigation.tsx +2 -1
- package/src/i18n/en.json +0 -2
- package/src/index.ts +3 -3
- package/src/inputs/Input.css +3 -3
- package/src/inputs/SelectInput/Options/SelectInputOptions.css +2 -2
- package/src/inputs/SelectInput/SelectInput.css +2 -2
- package/src/inputs/SelectInput/SelectInput.tsx +1 -1
- package/src/inputs/TextArea.css +3 -3
- package/src/logo/Logo.css +2 -2
- package/src/logo/Logo.story.tsx +3 -3
- package/src/logo/Logo.tsx +1 -1
- package/src/main.css +330 -495
- package/src/main.less +1 -3
- package/src/modal/Modal.css +5 -5
- package/src/popover/Popover.css +3 -3
- package/src/popover/Popover.test.tsx +2 -1
- package/src/promoCard/PromoCard.css +1 -1
- package/src/prompt/ActionPrompt/ActionPrompt.css +1 -1
- package/src/prompt/ActionPrompt/ActionPrompt.test.tsx +3 -3
- package/src/prompt/ActionPrompt/ActionPrompt.tsx +64 -10
- package/src/prompt/PrimitivePrompt/PrimitivePrompt.css +1 -1
- package/src/prompt/PrimitivePrompt/PrimitivePrompt.tsx +40 -56
- package/src/prompt/index.ts +0 -4
- package/src/section/Section.story.tsx +2 -8
- package/src/select/Select.test.tsx +1 -1
- package/src/sentimentSurface/SentimentSurface.story.tsx +17 -43
- package/src/snackbar/Snackbar.css +2 -2
- package/src/statusIcon/StatusIcon.test.tsx +0 -2
- package/src/statusIcon/StatusIcon.tsx +3 -2
- package/src/stepper/Stepper.css +2 -2
- package/src/styles/less/accordion.css +4 -4
- package/src/styles/less/button-groups.css +6 -6
- package/src/styles/less/buttons.css +1 -1
- package/src/styles/less/circles.css +1 -1
- package/src/styles/less/column-layout.css +4 -4
- package/src/styles/less/decision.css +4 -4
- package/src/styles/less/dropdowns.css +10 -10
- package/src/styles/less/droppable.css +8 -8
- package/src/styles/less/flex.css +14 -14
- package/src/styles/less/footer.css +3 -3
- package/src/styles/less/forms/bootstrap-forms.css +9 -9
- package/src/styles/less/forms/bootstrap-forms.less +1 -1
- package/src/styles/less/grid.css +19 -19
- package/src/styles/less/input-groups.css +12 -12
- package/src/styles/less/list-group.css +8 -8
- package/src/styles/less/modals.css +3 -3
- package/src/styles/less/navbar.css +62 -62
- package/src/styles/less/navbar.less +2 -2
- package/src/styles/less/navs.css +2 -2
- package/src/styles/less/neptune.bundle.less +1 -0
- package/src/styles/less/neptune.css +258 -258
- package/src/styles/less/panels.css +9 -9
- package/src/styles/less/popovers.css +13 -13
- package/src/styles/less/select.css +1 -1
- package/src/styles/less/sequences.css +6 -6
- package/src/styles/less/table.css +6 -6
- package/src/styles/less/table.less +1 -1
- package/src/styles/less/utilities.css +4 -4
- package/src/styles/less/wells.css +4 -4
- package/src/styles/props/custom-media.css +1 -11
- package/src/styles/variables/legacy-variables.less +4 -47
- package/src/table/Table.css +1 -1
- package/src/table/Table.story.tsx +1 -1
- package/src/table/Table.tsx +6 -5
- package/src/tabs/Tabs.css +2 -2
- package/src/typeahead/Typeahead.css +1 -1
- package/build/common/hooks/useContainerSize.js +0 -30
- package/build/common/hooks/useContainerSize.js.map +0 -1
- package/build/common/hooks/useContainerSize.mjs +0 -28
- package/build/common/hooks/useContainerSize.mjs.map +0 -1
- package/build/common/propsValues/breakpoint.js +0 -12
- package/build/common/propsValues/breakpoint.js.map +0 -1
- package/build/common/propsValues/breakpoint.mjs +0 -12
- package/build/common/propsValues/breakpoint.mjs.map +0 -1
- package/build/prompt/CriticalBanner/CriticalBanner.js +0 -142
- package/build/prompt/CriticalBanner/CriticalBanner.js.map +0 -1
- package/build/prompt/CriticalBanner/CriticalBanner.mjs +0 -140
- package/build/prompt/CriticalBanner/CriticalBanner.mjs.map +0 -1
- package/build/prompt/CriticalBanner/helpers.js +0 -29
- package/build/prompt/CriticalBanner/helpers.js.map +0 -1
- package/build/prompt/CriticalBanner/helpers.mjs +0 -26
- package/build/prompt/CriticalBanner/helpers.mjs.map +0 -1
- package/build/prompt/common/Expander/Expander.js +0 -35
- package/build/prompt/common/Expander/Expander.js.map +0 -1
- package/build/prompt/common/Expander/Expander.messages.js +0 -17
- package/build/prompt/common/Expander/Expander.messages.js.map +0 -1
- package/build/prompt/common/Expander/Expander.messages.mjs +0 -13
- package/build/prompt/common/Expander/Expander.messages.mjs.map +0 -1
- package/build/prompt/common/Expander/Expander.mjs +0 -33
- package/build/prompt/common/Expander/Expander.mjs.map +0 -1
- package/build/prompt/helpers/promptMedia.js +0 -52
- package/build/prompt/helpers/promptMedia.js.map +0 -1
- package/build/prompt/helpers/promptMedia.mjs +0 -50
- package/build/prompt/helpers/promptMedia.mjs.map +0 -1
- package/build/styles/prompt/CriticalBanner/CriticalBanner.css +0 -134
- package/build/styles/prompt/CriticalBanner/CriticalBanner.vars.css +0 -0
- package/build/styles/prompt/common/Expander/Expander.css +0 -8
- package/build/types/common/hooks/useContainerSize.d.ts +0 -14
- package/build/types/common/hooks/useContainerSize.d.ts.map +0 -1
- package/build/types/common/propsValues/breakpoint.d.ts +0 -9
- package/build/types/common/propsValues/breakpoint.d.ts.map +0 -1
- package/build/types/prompt/CriticalBanner/CriticalBanner.d.ts +0 -39
- package/build/types/prompt/CriticalBanner/CriticalBanner.d.ts.map +0 -1
- package/build/types/prompt/CriticalBanner/helpers.d.ts +0 -18
- package/build/types/prompt/CriticalBanner/helpers.d.ts.map +0 -1
- package/build/types/prompt/CriticalBanner/index.d.ts +0 -3
- package/build/types/prompt/CriticalBanner/index.d.ts.map +0 -1
- package/build/types/prompt/common/Expander/Expander.d.ts +0 -20
- package/build/types/prompt/common/Expander/Expander.d.ts.map +0 -1
- package/build/types/prompt/common/Expander/Expander.messages.d.ts +0 -14
- package/build/types/prompt/common/Expander/Expander.messages.d.ts.map +0 -1
- package/build/types/prompt/helpers/promptMedia.d.ts +0 -22
- package/build/types/prompt/helpers/promptMedia.d.ts.map +0 -1
- package/src/common/hooks/useContainerSize.test.tsx +0 -121
- package/src/common/hooks/useContainerSize.ts +0 -32
- package/src/common/propsValues/breakpoint.ts +0 -8
- package/src/prompt/CriticalBanner/CriticalBanner.accessibility.docs.mdx +0 -113
- package/src/prompt/CriticalBanner/CriticalBanner.css +0 -134
- package/src/prompt/CriticalBanner/CriticalBanner.less +0 -155
- package/src/prompt/CriticalBanner/CriticalBanner.story.tsx +0 -635
- package/src/prompt/CriticalBanner/CriticalBanner.test.story.tsx +0 -422
- package/src/prompt/CriticalBanner/CriticalBanner.tsx +0 -178
- package/src/prompt/CriticalBanner/CriticalBanner.vars.css +0 -0
- package/src/prompt/CriticalBanner/CriticalBanner.vars.less +0 -6
- package/src/prompt/CriticalBanner/helpers.ts +0 -39
- package/src/prompt/CriticalBanner/index.ts +0 -2
- package/src/prompt/common/Expander/Expander.css +0 -8
- package/src/prompt/common/Expander/Expander.less +0 -9
- package/src/prompt/common/Expander/Expander.messages.ts +0 -14
- package/src/prompt/common/Expander/Expander.test.tsx +0 -167
- package/src/prompt/common/Expander/Expander.tsx +0 -83
- package/src/prompt/helpers/promptMedia.tsx +0 -79
|
@@ -1,50 +0,0 @@
|
|
|
1
|
-
import { GiftBox } from '@transferwise/icons';
|
|
2
|
-
import AvatarView from '../../avatarView/AvatarView.mjs';
|
|
3
|
-
import Image from '../../image/Image.mjs';
|
|
4
|
-
import StatusIcon from '../../statusIcon/StatusIcon.mjs';
|
|
5
|
-
import { jsx } from 'react/jsx-runtime';
|
|
6
|
-
|
|
7
|
-
function renderPromptMedia({
|
|
8
|
-
media,
|
|
9
|
-
sentiment,
|
|
10
|
-
mediaId,
|
|
11
|
-
imgClassName
|
|
12
|
-
}) {
|
|
13
|
-
if (media?.imgSrc) {
|
|
14
|
-
return /*#__PURE__*/jsx(Image, {
|
|
15
|
-
id: mediaId,
|
|
16
|
-
src: media.imgSrc,
|
|
17
|
-
className: imgClassName,
|
|
18
|
-
alt: media['aria-label'] ?? ''
|
|
19
|
-
});
|
|
20
|
-
}
|
|
21
|
-
if (media?.avatar) {
|
|
22
|
-
const badge = media.avatar.badge ? media.avatar.badge : sentiment === 'proposition' ? {} : {
|
|
23
|
-
status: sentiment
|
|
24
|
-
};
|
|
25
|
-
return /*#__PURE__*/jsx(AvatarView, {
|
|
26
|
-
...media.avatar,
|
|
27
|
-
badge: badge,
|
|
28
|
-
"aria-label": media['aria-label'],
|
|
29
|
-
"aria-hidden": media['aria-hidden'],
|
|
30
|
-
id: mediaId,
|
|
31
|
-
size: 48,
|
|
32
|
-
children: media.avatar.asset
|
|
33
|
-
});
|
|
34
|
-
}
|
|
35
|
-
return sentiment === 'proposition' ? /*#__PURE__*/jsx(AvatarView, {
|
|
36
|
-
id: mediaId,
|
|
37
|
-
size: 48,
|
|
38
|
-
"aria-label": media['aria-label'],
|
|
39
|
-
"aria-hidden": media['aria-hidden'],
|
|
40
|
-
children: /*#__PURE__*/jsx(GiftBox, {})
|
|
41
|
-
}) : /*#__PURE__*/jsx(StatusIcon, {
|
|
42
|
-
id: mediaId,
|
|
43
|
-
size: 48,
|
|
44
|
-
sentiment: sentiment,
|
|
45
|
-
iconLabel: media['aria-hidden'] ? null : media['aria-label']
|
|
46
|
-
});
|
|
47
|
-
}
|
|
48
|
-
|
|
49
|
-
export { renderPromptMedia };
|
|
50
|
-
//# sourceMappingURL=promptMedia.mjs.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"promptMedia.mjs","sources":["../../../src/prompt/helpers/promptMedia.tsx"],"sourcesContent":["import { ReactNode } from 'react';\nimport { GiftBox } from '@transferwise/icons';\n\nimport AvatarView, { AvatarViewProps } from '../../avatarView';\nimport Image from '../../image';\nimport StatusIcon from '../../statusIcon';\nimport { BadgeAssetsProps } from '../../badge';\nimport { PrimitivePromptProps } from '../PrimitivePrompt';\n\nexport type PromptMedia = {\n imgSrc?: string;\n avatar?: Pick<AvatarViewProps, 'imgSrc' | 'profileName' | 'profileType'> & {\n asset?: AvatarViewProps['children'];\n badge?: Pick<BadgeAssetsProps, 'flagCode'>;\n };\n 'aria-label'?: string;\n 'aria-hidden'?: boolean;\n};\n\ntype RenderPromptMediaOptions = {\n media: PromptMedia;\n sentiment: PrimitivePromptProps['sentiment'];\n mediaId: string;\n imgClassName: string;\n};\n\nexport function renderPromptMedia({\n media,\n sentiment,\n mediaId,\n imgClassName,\n}: RenderPromptMediaOptions): ReactNode {\n if (media?.imgSrc) {\n return (\n <Image\n id={mediaId}\n src={media.imgSrc}\n className={imgClassName}\n alt={media['aria-label'] ?? ''}\n />\n );\n }\n if (media?.avatar) {\n const badge = media.avatar.badge\n ? media.avatar.badge\n : sentiment === 'proposition'\n ? {}\n : { status: sentiment };\n return (\n <AvatarView\n {...media.avatar}\n badge={badge}\n aria-label={media['aria-label']}\n aria-hidden={media['aria-hidden']}\n id={mediaId}\n size={48}\n >\n {media.avatar.asset}\n </AvatarView>\n );\n }\n return sentiment === 'proposition' ? (\n <AvatarView\n id={mediaId}\n size={48}\n aria-label={media['aria-label']}\n aria-hidden={media['aria-hidden']}\n >\n <GiftBox />\n </AvatarView>\n ) : (\n <StatusIcon\n id={mediaId}\n size={48}\n sentiment={sentiment}\n iconLabel={media['aria-hidden'] ? null : media['aria-label']}\n />\n );\n}\n"],"names":["renderPromptMedia","media","sentiment","mediaId","imgClassName","imgSrc","_jsx","Image","id","src","className","alt","avatar","badge","status","AvatarView","size","children","asset","GiftBox","StatusIcon","iconLabel"],"mappings":";;;;;;AA0BM,SAAUA,iBAAiBA,CAAC;EAChCC,KAAK;EACLC,SAAS;EACTC,OAAO;AACPC,EAAAA;AAAY,CACa,EAAA;EACzB,IAAIH,KAAK,EAAEI,MAAM,EAAE;IACjB,oBACEC,GAAA,CAACC,KAAK,EAAA;AACJC,MAAAA,EAAE,EAAEL,OAAQ;MACZM,GAAG,EAAER,KAAK,CAACI,MAAO;AAClBK,MAAAA,SAAS,EAAEN,YAAa;AACxBO,MAAAA,GAAG,EAAEV,KAAK,CAAC,YAAY,CAAC,IAAI;AAAG,KAAA,CAC/B;AAEN,EAAA;EACA,IAAIA,KAAK,EAAEW,MAAM,EAAE;IACjB,MAAMC,KAAK,GAAGZ,KAAK,CAACW,MAAM,CAACC,KAAK,GAC5BZ,KAAK,CAACW,MAAM,CAACC,KAAK,GAClBX,SAAS,KAAK,aAAa,GACzB,EAAE,GACF;AAAEY,MAAAA,MAAM,EAAEZ;KAAW;IAC3B,oBACEI,GAAA,CAACS,UAAU,EAAA;MAAA,GACLd,KAAK,CAACW,MAAM;AAChBC,MAAAA,KAAK,EAAEA,KAAM;MACb,YAAA,EAAYZ,KAAK,CAAC,YAAY,CAAE;MAChC,aAAA,EAAaA,KAAK,CAAC,aAAa,CAAE;AAClCO,MAAAA,EAAE,EAAEL,OAAQ;AACZa,MAAAA,IAAI,EAAE,EAAG;AAAAC,MAAAA,QAAA,EAERhB,KAAK,CAACW,MAAM,CAACM;AAAK,KACT,CAAC;AAEjB,EAAA;AACA,EAAA,OAAOhB,SAAS,KAAK,aAAa,gBAChCI,GAAA,CAACS,UAAU,EAAA;AACTP,IAAAA,EAAE,EAAEL,OAAQ;AACZa,IAAAA,IAAI,EAAE,EAAG;IACT,YAAA,EAAYf,KAAK,CAAC,YAAY,CAAE;IAChC,aAAA,EAAaA,KAAK,CAAC,aAAa,CAAE;AAAAgB,IAAAA,QAAA,eAElCX,GAAA,CAACa,OAAO,EAAA,EAAA;AACV,GAAY,CAAC,gBAEbb,GAAA,CAACc,UAAU,EAAA;AACTZ,IAAAA,EAAE,EAAEL,OAAQ;AACZa,IAAAA,IAAI,EAAE,EAAG;AACTd,IAAAA,SAAS,EAAEA,SAAU;IACrBmB,SAAS,EAAEpB,KAAK,CAAC,aAAa,CAAC,GAAG,IAAI,GAAGA,KAAK,CAAC,YAAY;AAAE,GAAA,CAEhE;AACH;;;;"}
|
|
@@ -1,134 +0,0 @@
|
|
|
1
|
-
.wds-critical-banner {
|
|
2
|
-
--Prompt-padding: var(--size-16);
|
|
3
|
-
--Prompt-actions-gap: var(--size-8);
|
|
4
|
-
--Prompt-gap: var(--size-10) var(--size-16);
|
|
5
|
-
--Prompt-border-radius: 0;
|
|
6
|
-
container-type: inline-size;
|
|
7
|
-
--critical-banner-easing: cubic-bezier(0.9, 0, 0.7, 1);
|
|
8
|
-
--critical-banner-duration: 150ms;
|
|
9
|
-
/* Override PrimitivePrompt's --screen-sm-max actions behaviour:
|
|
10
|
-
actions only go full-width below mobile-max token (container query) */
|
|
11
|
-
}
|
|
12
|
-
.wds-critical-banner--media-image {
|
|
13
|
-
width: 48px;
|
|
14
|
-
width: var(--size-48);
|
|
15
|
-
height: 48px;
|
|
16
|
-
height: var(--size-48);
|
|
17
|
-
-o-object-fit: contain;
|
|
18
|
-
object-fit: contain;
|
|
19
|
-
}
|
|
20
|
-
.wds-critical-banner__title {
|
|
21
|
-
display: -webkit-box;
|
|
22
|
-
-webkit-line-clamp: 8;
|
|
23
|
-
line-clamp: 8;
|
|
24
|
-
-webkit-box-orient: vertical;
|
|
25
|
-
max-height: 192px;
|
|
26
|
-
overflow: hidden;
|
|
27
|
-
transition: max-height var(--critical-banner-duration) var(--critical-banner-easing);
|
|
28
|
-
}
|
|
29
|
-
.wds-critical-banner--collapsed .wds-critical-banner__title {
|
|
30
|
-
-webkit-line-clamp: 2;
|
|
31
|
-
line-clamp: 2;
|
|
32
|
-
max-height: 48px;
|
|
33
|
-
}
|
|
34
|
-
.wds-critical-banner__description {
|
|
35
|
-
max-height: 30vh;
|
|
36
|
-
opacity: 1;
|
|
37
|
-
overflow: hidden;
|
|
38
|
-
transition: max-height var(--critical-banner-duration) var(--critical-banner-easing), opacity var(--critical-banner-duration) var(--critical-banner-easing);
|
|
39
|
-
}
|
|
40
|
-
.wds-critical-banner--collapsed .wds-critical-banner__description--with-title {
|
|
41
|
-
max-height: 0;
|
|
42
|
-
opacity: 0;
|
|
43
|
-
}
|
|
44
|
-
.wds-critical-banner--collapsed .wds-critical-banner__description:not(.wds-critical-banner__description--with-title) {
|
|
45
|
-
display: -webkit-box;
|
|
46
|
-
-webkit-line-clamp: 2;
|
|
47
|
-
line-clamp: 2;
|
|
48
|
-
-webkit-box-orient: vertical;
|
|
49
|
-
overflow: hidden;
|
|
50
|
-
}
|
|
51
|
-
.wds-critical-banner .wds-prompt__content-wrapper {
|
|
52
|
-
grid-template-columns: auto 1fr auto;
|
|
53
|
-
align-items: flex-start;
|
|
54
|
-
transition: row-gap var(--critical-banner-duration) var(--critical-banner-easing);
|
|
55
|
-
}
|
|
56
|
-
.wds-critical-banner--collapsed .wds-prompt__content-wrapper {
|
|
57
|
-
row-gap: 0;
|
|
58
|
-
}
|
|
59
|
-
.wds-critical-banner__text-wrapper {
|
|
60
|
-
position: relative;
|
|
61
|
-
display: flex;
|
|
62
|
-
flex-direction: column;
|
|
63
|
-
justify-content: center;
|
|
64
|
-
align-items: flex-start;
|
|
65
|
-
text-align: start;
|
|
66
|
-
min-width: 0;
|
|
67
|
-
max-width: 480px;
|
|
68
|
-
height: 100%;
|
|
69
|
-
padding-top: 3px;
|
|
70
|
-
}
|
|
71
|
-
@media (max-width: 320px) {
|
|
72
|
-
.wds-critical-banner__text-wrapper {
|
|
73
|
-
padding-top: 0;
|
|
74
|
-
}
|
|
75
|
-
}
|
|
76
|
-
@container (--screen-400-zoom) {
|
|
77
|
-
.wds-critical-banner__text-wrapper {
|
|
78
|
-
padding-top: 0px;
|
|
79
|
-
}
|
|
80
|
-
}
|
|
81
|
-
.wds-critical-banner--collapsed .wds-critical-banner__title,
|
|
82
|
-
.wds-critical-banner--collapsed .wds-critical-banner__description {
|
|
83
|
-
transform: translateY(0);
|
|
84
|
-
}
|
|
85
|
-
.wds-critical-banner__toggle {
|
|
86
|
-
flex-shrink: 0;
|
|
87
|
-
transition: transform var(--critical-banner-duration) var(--critical-banner-easing);
|
|
88
|
-
}
|
|
89
|
-
.wds-critical-banner__toggle--collapsed {
|
|
90
|
-
transform: rotate(180deg);
|
|
91
|
-
}
|
|
92
|
-
@container (min-width: 768px) {
|
|
93
|
-
.wds-critical-banner__toggle {
|
|
94
|
-
display: none;
|
|
95
|
-
}
|
|
96
|
-
}
|
|
97
|
-
.wds-critical-banner .wds-prompt__actions-wrapper {
|
|
98
|
-
grid-column-start: 2;
|
|
99
|
-
grid-column-end: 3;
|
|
100
|
-
max-height: 200px;
|
|
101
|
-
opacity: 1;
|
|
102
|
-
overflow: visible;
|
|
103
|
-
}
|
|
104
|
-
@container (max-width: 600px) {
|
|
105
|
-
.wds-critical-banner .wds-prompt__actions-wrapper {
|
|
106
|
-
grid-column: span 3;
|
|
107
|
-
width: 100%;
|
|
108
|
-
}
|
|
109
|
-
.wds-critical-banner .wds-prompt__actions-wrapper .wds-Button {
|
|
110
|
-
flex: 1 1 100%;
|
|
111
|
-
width: 100%;
|
|
112
|
-
}
|
|
113
|
-
}
|
|
114
|
-
.wds-critical-banner--collapsed .wds-prompt__actions-wrapper {
|
|
115
|
-
max-height: 0;
|
|
116
|
-
opacity: 0;
|
|
117
|
-
overflow: hidden;
|
|
118
|
-
pointer-events: none;
|
|
119
|
-
}
|
|
120
|
-
@container (max-width: 600px) {
|
|
121
|
-
.wds-critical-banner--with-two-actions .wds-prompt__actions-wrapper .wds-Button {
|
|
122
|
-
flex: 1 1 calc(50% - (var(--Prompt-actions-gap) / 2));
|
|
123
|
-
min-width: -moz-fit-content;
|
|
124
|
-
min-width: fit-content;
|
|
125
|
-
}
|
|
126
|
-
}
|
|
127
|
-
@media (prefers-reduced-motion: reduce) {
|
|
128
|
-
.wds-critical-banner__description,
|
|
129
|
-
.wds-critical-banner__title,
|
|
130
|
-
.wds-critical-banner .wds-prompt__content-wrapper,
|
|
131
|
-
.wds-critical-banner__toggle {
|
|
132
|
-
transition: none !important;
|
|
133
|
-
}
|
|
134
|
-
}
|
|
File without changes
|
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Hook that returns a ref and a boolean indicating if the container
|
|
3
|
-
* has a width >= the specified breakpoint.
|
|
4
|
-
*
|
|
5
|
-
* Useful for synchronizing React state with CSS container queries.
|
|
6
|
-
*
|
|
7
|
-
* Uses content-box measurements to match CSS container query behavior
|
|
8
|
-
* (excludes padding and border).
|
|
9
|
-
*
|
|
10
|
-
* @param breakpoint - Minimum width in pixels
|
|
11
|
-
* @returns [ref, isAboveBreakpoint] tuple
|
|
12
|
-
*/
|
|
13
|
-
export declare function useContainerSize(breakpoint: number): [React.RefObject<HTMLDivElement>, boolean];
|
|
14
|
-
//# sourceMappingURL=useContainerSize.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"useContainerSize.d.ts","sourceRoot":"","sources":["../../../../src/common/hooks/useContainerSize.ts"],"names":[],"mappings":"AAIA;;;;;;;;;;;GAWG;AACH,wBAAgB,gBAAgB,CAAC,UAAU,EAAE,MAAM,GAAG,CAAC,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC,CAe/F"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"breakpoint.d.ts","sourceRoot":"","sources":["../../../../src/common/propsValues/breakpoint.ts"],"names":[],"mappings":"AAAA,oBAAY,UAAU;IACpB,QAAQ,MAAM;IACd,WAAW,MAAM;IACjB,KAAK,MAAM;IACX,MAAM,MAAM;IACZ,KAAK,MAAM;IACX,WAAW,OAAO;CACnB"}
|
|
@@ -1,39 +0,0 @@
|
|
|
1
|
-
import { ReactNode } from 'react';
|
|
2
|
-
import { ButtonProps } from '../../button/Button.types';
|
|
3
|
-
import { PrimitivePromptProps } from '../PrimitivePrompt';
|
|
4
|
-
import { PromptMedia } from '../helpers/promptMedia';
|
|
5
|
-
export type CriticalBannerProps = {
|
|
6
|
-
title?: ReactNode;
|
|
7
|
-
description: ReactNode;
|
|
8
|
-
media?: PromptMedia;
|
|
9
|
-
action?: Pick<ButtonProps, 'onClick' | 'href' | 'target'> & {
|
|
10
|
-
label: ButtonProps['children'];
|
|
11
|
-
};
|
|
12
|
-
actionSecondary?: Pick<ButtonProps, 'onClick' | 'href' | 'target'> & {
|
|
13
|
-
label: ButtonProps['children'];
|
|
14
|
-
};
|
|
15
|
-
sentiment?: Exclude<PrimitivePromptProps['sentiment'], 'proposition'>;
|
|
16
|
-
/**
|
|
17
|
-
* Controls whether the description and actions are visible, as a controlled component.
|
|
18
|
-
* When collapsed with a title, only the title is shown.
|
|
19
|
-
* When collapsed without a title, the description is trimmed to 2 lines.
|
|
20
|
-
*
|
|
21
|
-
* Note: On desktop (container width >= 768px), the banner is always expanded
|
|
22
|
-
* regardless of this prop value.
|
|
23
|
-
*/
|
|
24
|
-
expanded?: boolean;
|
|
25
|
-
/**
|
|
26
|
-
* Called when the user clicks the chevron toggle.
|
|
27
|
-
* If not provided, the component will manage expanded state internally.
|
|
28
|
-
*/
|
|
29
|
-
onToggle?: () => void;
|
|
30
|
-
} & Pick<PrimitivePromptProps, 'id' | 'className' | 'data-testid'>;
|
|
31
|
-
/**
|
|
32
|
-
* A full-width, non-dismissible banner for critical messages such as account blocks or
|
|
33
|
-
* time-sensitive actions that require immediate user attention.
|
|
34
|
-
|
|
35
|
-
* @see {@link https://wise.design/components/critical-banner Design Spec}
|
|
36
|
-
*/
|
|
37
|
-
export declare const CriticalBanner: ({ sentiment, title, description, media, action, actionSecondary, expanded: expandedProp, onToggle, id, className, "data-testid": testId, }: CriticalBannerProps) => import("react").JSX.Element;
|
|
38
|
-
export default CriticalBanner;
|
|
39
|
-
//# sourceMappingURL=CriticalBanner.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"CriticalBanner.d.ts","sourceRoot":"","sources":["../../../../src/prompt/CriticalBanner/CriticalBanner.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAA8B,MAAM,OAAO,CAAC;AAM9D,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AACxD,OAAO,EAAmB,oBAAoB,EAAE,MAAM,oBAAoB,CAAC;AAE3E,OAAO,EAAqB,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAKxE,MAAM,MAAM,mBAAmB,GAAG;IAChC,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,WAAW,EAAE,SAAS,CAAC;IACvB,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,MAAM,CAAC,EAAE,IAAI,CAAC,WAAW,EAAE,SAAS,GAAG,MAAM,GAAG,QAAQ,CAAC,GAAG;QAC1D,KAAK,EAAE,WAAW,CAAC,UAAU,CAAC,CAAC;KAChC,CAAC;IACF,eAAe,CAAC,EAAE,IAAI,CAAC,WAAW,EAAE,SAAS,GAAG,MAAM,GAAG,QAAQ,CAAC,GAAG;QACnE,KAAK,EAAE,WAAW,CAAC,UAAU,CAAC,CAAC;KAChC,CAAC;IACF,SAAS,CAAC,EAAE,OAAO,CAAC,oBAAoB,CAAC,WAAW,CAAC,EAAE,aAAa,CAAC,CAAC;IACtE;;;;;;;OAOG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB,GAAG,IAAI,CAAC,oBAAoB,EAAE,IAAI,GAAG,WAAW,GAAG,aAAa,CAAC,CAAC;AAEnE;;;;;GAKG;AACH,eAAO,MAAM,cAAc,GAAI,4IAY5B,mBAAmB,gCAoHrB,CAAC;AAEF,eAAe,cAAc,CAAC"}
|
|
@@ -1,18 +0,0 @@
|
|
|
1
|
-
import { ReactNode } from 'react';
|
|
2
|
-
/**
|
|
3
|
-
* Helper to extract string from ReactNode for announcements.
|
|
4
|
-
* Complex ReactNodes (JSX elements) return empty string.
|
|
5
|
-
*/
|
|
6
|
-
export declare const getStringValue: (node: ReactNode) => string;
|
|
7
|
-
/**
|
|
8
|
-
* Builds the announcement string from visible content only.
|
|
9
|
-
* Content visibility depends on expanded state and presence of title.
|
|
10
|
-
*/
|
|
11
|
-
export declare const buildAnnouncementString: ({ title, description, expanded, actionLabel, actionSecondaryLabel, }: {
|
|
12
|
-
title?: ReactNode;
|
|
13
|
-
description?: ReactNode;
|
|
14
|
-
expanded: boolean;
|
|
15
|
-
actionLabel?: ReactNode;
|
|
16
|
-
actionSecondaryLabel?: ReactNode;
|
|
17
|
-
}) => string;
|
|
18
|
-
//# sourceMappingURL=helpers.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../../src/prompt/CriticalBanner/helpers.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC;;;GAGG;AACH,eAAO,MAAM,cAAc,GAAI,MAAM,SAAS,KAAG,MAKhD,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,uBAAuB,GAAI,sEAMrC;IACD,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,QAAQ,EAAE,OAAO,CAAC;IAClB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,oBAAoB,CAAC,EAAE,SAAS,CAAC;CAClC,KAAG,MASH,CAAC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/prompt/CriticalBanner/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAC5D,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC"}
|
|
@@ -1,20 +0,0 @@
|
|
|
1
|
-
export type ExpanderState = {
|
|
2
|
-
expanded: boolean;
|
|
3
|
-
toggle: () => void;
|
|
4
|
-
setExpanded: (expanded: boolean) => void;
|
|
5
|
-
};
|
|
6
|
-
export declare function useExpanderState(initialExpanded?: boolean): ExpanderState;
|
|
7
|
-
export declare function shouldShowWhenExpanded({ expanded, hasContent, alwaysShow, }: {
|
|
8
|
-
expanded: boolean;
|
|
9
|
-
hasContent: boolean;
|
|
10
|
-
alwaysShow?: boolean;
|
|
11
|
-
}): boolean;
|
|
12
|
-
export type ExpanderToggleProps = {
|
|
13
|
-
expanded: boolean;
|
|
14
|
-
onToggle?: () => void;
|
|
15
|
-
size?: 16 | 24 | 32 | 40 | 48 | 56 | 72;
|
|
16
|
-
className?: string;
|
|
17
|
-
'data-testid'?: string;
|
|
18
|
-
};
|
|
19
|
-
export declare const ExpanderToggle: ({ expanded, onToggle, size, className, "data-testid": testId, }: ExpanderToggleProps) => import("react").JSX.Element;
|
|
20
|
-
//# sourceMappingURL=Expander.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Expander.d.ts","sourceRoot":"","sources":["../../../../../src/prompt/common/Expander/Expander.tsx"],"names":[],"mappings":"AAOA,MAAM,MAAM,aAAa,GAAG;IAC1B,QAAQ,EAAE,OAAO,CAAC;IAClB,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,WAAW,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;CAC1C,CAAC;AAGF,wBAAgB,gBAAgB,CAAC,eAAe,UAAO,GAAG,aAAa,CAYtE;AAGD,wBAAgB,sBAAsB,CAAC,EACrC,QAAQ,EACR,UAAU,EACV,UAAkB,GACnB,EAAE;IACD,QAAQ,EAAE,OAAO,CAAC;IAClB,UAAU,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,GAAG,OAAO,CAMV;AAED,MAAM,MAAM,mBAAmB,GAAG;IAChC,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,IAAI,CAAC,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;IACxC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAGF,eAAO,MAAM,cAAc,GAAI,iEAM5B,mBAAmB,gCAsBrB,CAAC"}
|
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
declare const _default: {
|
|
2
|
-
expandAriaLabel: {
|
|
3
|
-
id: string;
|
|
4
|
-
defaultMessage: string;
|
|
5
|
-
description: string;
|
|
6
|
-
};
|
|
7
|
-
collapseAriaLabel: {
|
|
8
|
-
id: string;
|
|
9
|
-
defaultMessage: string;
|
|
10
|
-
description: string;
|
|
11
|
-
};
|
|
12
|
-
};
|
|
13
|
-
export default _default;
|
|
14
|
-
//# sourceMappingURL=Expander.messages.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Expander.messages.d.ts","sourceRoot":"","sources":["../../../../../src/prompt/common/Expander/Expander.messages.ts"],"names":[],"mappings":";;;;;;;;;;;;AAEA,wBAWG"}
|
|
@@ -1,22 +0,0 @@
|
|
|
1
|
-
import { ReactNode } from 'react';
|
|
2
|
-
import { AvatarViewProps } from '../../avatarView';
|
|
3
|
-
import { BadgeAssetsProps } from '../../badge';
|
|
4
|
-
import { PrimitivePromptProps } from '../PrimitivePrompt';
|
|
5
|
-
export type PromptMedia = {
|
|
6
|
-
imgSrc?: string;
|
|
7
|
-
avatar?: Pick<AvatarViewProps, 'imgSrc' | 'profileName' | 'profileType'> & {
|
|
8
|
-
asset?: AvatarViewProps['children'];
|
|
9
|
-
badge?: Pick<BadgeAssetsProps, 'flagCode'>;
|
|
10
|
-
};
|
|
11
|
-
'aria-label'?: string;
|
|
12
|
-
'aria-hidden'?: boolean;
|
|
13
|
-
};
|
|
14
|
-
type RenderPromptMediaOptions = {
|
|
15
|
-
media: PromptMedia;
|
|
16
|
-
sentiment: PrimitivePromptProps['sentiment'];
|
|
17
|
-
mediaId: string;
|
|
18
|
-
imgClassName: string;
|
|
19
|
-
};
|
|
20
|
-
export declare function renderPromptMedia({ media, sentiment, mediaId, imgClassName, }: RenderPromptMediaOptions): ReactNode;
|
|
21
|
-
export {};
|
|
22
|
-
//# sourceMappingURL=promptMedia.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"promptMedia.d.ts","sourceRoot":"","sources":["../../../../src/prompt/helpers/promptMedia.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGlC,OAAmB,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAG/D,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,EAAE,oBAAoB,EAAE,MAAM,oBAAoB,CAAC;AAE1D,MAAM,MAAM,WAAW,GAAG;IACxB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,IAAI,CAAC,eAAe,EAAE,QAAQ,GAAG,aAAa,GAAG,aAAa,CAAC,GAAG;QACzE,KAAK,CAAC,EAAE,eAAe,CAAC,UAAU,CAAC,CAAC;QACpC,KAAK,CAAC,EAAE,IAAI,CAAC,gBAAgB,EAAE,UAAU,CAAC,CAAC;KAC5C,CAAC;IACF,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB,CAAC;AAEF,KAAK,wBAAwB,GAAG;IAC9B,KAAK,EAAE,WAAW,CAAC;IACnB,SAAS,EAAE,oBAAoB,CAAC,WAAW,CAAC,CAAC;IAC7C,OAAO,EAAE,MAAM,CAAC;IAChB,YAAY,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,wBAAgB,iBAAiB,CAAC,EAChC,KAAK,EACL,SAAS,EACT,OAAO,EACP,YAAY,GACb,EAAE,wBAAwB,GAAG,SAAS,CA+CtC"}
|
|
@@ -1,121 +0,0 @@
|
|
|
1
|
-
import React, { act } from 'react';
|
|
2
|
-
import { render, screen } from '@testing-library/react';
|
|
3
|
-
|
|
4
|
-
import { mockResizeObserver } from '../../test-utils/window-mock';
|
|
5
|
-
|
|
6
|
-
import { useContainerSize } from './useContainerSize';
|
|
7
|
-
|
|
8
|
-
mockResizeObserver();
|
|
9
|
-
|
|
10
|
-
describe('useContainerSize', () => {
|
|
11
|
-
let resizeObserverCallback: ResizeObserverCallback | null = null;
|
|
12
|
-
|
|
13
|
-
beforeEach(() => {
|
|
14
|
-
resizeObserverCallback = null;
|
|
15
|
-
|
|
16
|
-
// Capture the ResizeObserver callback for testing
|
|
17
|
-
const OriginalResizeObserver = global.ResizeObserver;
|
|
18
|
-
global.ResizeObserver = jest.fn().mockImplementation((callback: ResizeObserverCallback) => {
|
|
19
|
-
resizeObserverCallback = callback;
|
|
20
|
-
const instance = new OriginalResizeObserver(callback);
|
|
21
|
-
return instance;
|
|
22
|
-
}) as unknown as typeof ResizeObserver;
|
|
23
|
-
});
|
|
24
|
-
|
|
25
|
-
// Helper to create a test component
|
|
26
|
-
function TestComponent({
|
|
27
|
-
breakpoint,
|
|
28
|
-
onStateChange,
|
|
29
|
-
}: {
|
|
30
|
-
breakpoint: number;
|
|
31
|
-
onStateChange: (state: boolean) => void;
|
|
32
|
-
}) {
|
|
33
|
-
const [ref, isAboveBreakpoint] = useContainerSize(breakpoint);
|
|
34
|
-
|
|
35
|
-
// Call the callback whenever state changes
|
|
36
|
-
React.useEffect(() => {
|
|
37
|
-
onStateChange(isAboveBreakpoint);
|
|
38
|
-
}, [isAboveBreakpoint, onStateChange]);
|
|
39
|
-
|
|
40
|
-
return (
|
|
41
|
-
<div ref={ref} data-testid="container">
|
|
42
|
-
Test
|
|
43
|
-
</div>
|
|
44
|
-
);
|
|
45
|
-
}
|
|
46
|
-
|
|
47
|
-
// Helper to simulate container resize
|
|
48
|
-
function simulateResize(width: number, options?: { noBorderBoxSize?: boolean }) {
|
|
49
|
-
const container = screen.getByTestId('container');
|
|
50
|
-
|
|
51
|
-
act(() => {
|
|
52
|
-
if (resizeObserverCallback) {
|
|
53
|
-
const entry = {
|
|
54
|
-
target: container,
|
|
55
|
-
borderBoxSize: options?.noBorderBoxSize
|
|
56
|
-
? undefined
|
|
57
|
-
: [{ inlineSize: width, blockSize: 100 }],
|
|
58
|
-
contentRect: {
|
|
59
|
-
width,
|
|
60
|
-
height: 100,
|
|
61
|
-
x: 0,
|
|
62
|
-
y: 0,
|
|
63
|
-
top: 0,
|
|
64
|
-
right: width,
|
|
65
|
-
bottom: 100,
|
|
66
|
-
left: 0,
|
|
67
|
-
toJSON: () => ({}),
|
|
68
|
-
},
|
|
69
|
-
contentBoxSize: [{ inlineSize: width, blockSize: 100 }],
|
|
70
|
-
devicePixelContentBoxSize: [{ inlineSize: width, blockSize: 100 }],
|
|
71
|
-
} as ResizeObserverEntry;
|
|
72
|
-
|
|
73
|
-
resizeObserverCallback([entry], {} as ResizeObserver);
|
|
74
|
-
}
|
|
75
|
-
});
|
|
76
|
-
}
|
|
77
|
-
|
|
78
|
-
it('returns initial state as false', () => {
|
|
79
|
-
const onStateChange = jest.fn();
|
|
80
|
-
render(<TestComponent breakpoint={480} onStateChange={onStateChange} />);
|
|
81
|
-
|
|
82
|
-
// Initial call with false
|
|
83
|
-
expect(onStateChange).toHaveBeenCalledWith(false);
|
|
84
|
-
});
|
|
85
|
-
|
|
86
|
-
it('updates to true when container width is above breakpoint', () => {
|
|
87
|
-
const onStateChange = jest.fn();
|
|
88
|
-
render(<TestComponent breakpoint={480} onStateChange={onStateChange} />);
|
|
89
|
-
|
|
90
|
-
simulateResize(600);
|
|
91
|
-
expect(onStateChange).toHaveBeenCalledWith(true);
|
|
92
|
-
});
|
|
93
|
-
|
|
94
|
-
it('remains false when container width is below breakpoint', () => {
|
|
95
|
-
const onStateChange = jest.fn();
|
|
96
|
-
render(<TestComponent breakpoint={480} onStateChange={onStateChange} />);
|
|
97
|
-
|
|
98
|
-
simulateResize(400);
|
|
99
|
-
expect(onStateChange).toHaveBeenCalledWith(false);
|
|
100
|
-
expect(onStateChange).not.toHaveBeenCalledWith(true);
|
|
101
|
-
});
|
|
102
|
-
|
|
103
|
-
it('returns true when container width equals breakpoint', () => {
|
|
104
|
-
const onStateChange = jest.fn();
|
|
105
|
-
render(<TestComponent breakpoint={480} onStateChange={onStateChange} />);
|
|
106
|
-
|
|
107
|
-
simulateResize(480);
|
|
108
|
-
expect(onStateChange).toHaveBeenCalledWith(true);
|
|
109
|
-
});
|
|
110
|
-
|
|
111
|
-
it('updates state when container crosses breakpoint from below to above', () => {
|
|
112
|
-
const onStateChange = jest.fn();
|
|
113
|
-
render(<TestComponent breakpoint={480} onStateChange={onStateChange} />);
|
|
114
|
-
|
|
115
|
-
simulateResize(400);
|
|
116
|
-
expect(onStateChange).toHaveBeenCalledWith(false);
|
|
117
|
-
|
|
118
|
-
simulateResize(600);
|
|
119
|
-
expect(onStateChange).toHaveBeenCalledWith(true);
|
|
120
|
-
});
|
|
121
|
-
});
|
|
@@ -1,32 +0,0 @@
|
|
|
1
|
-
import { useRef, useState } from 'react';
|
|
2
|
-
|
|
3
|
-
import { useResizeObserver } from './useResizeObserver';
|
|
4
|
-
|
|
5
|
-
/**
|
|
6
|
-
* Hook that returns a ref and a boolean indicating if the container
|
|
7
|
-
* has a width >= the specified breakpoint.
|
|
8
|
-
*
|
|
9
|
-
* Useful for synchronizing React state with CSS container queries.
|
|
10
|
-
*
|
|
11
|
-
* Uses content-box measurements to match CSS container query behavior
|
|
12
|
-
* (excludes padding and border).
|
|
13
|
-
*
|
|
14
|
-
* @param breakpoint - Minimum width in pixels
|
|
15
|
-
* @returns [ref, isAboveBreakpoint] tuple
|
|
16
|
-
*/
|
|
17
|
-
export function useContainerSize(breakpoint: number): [React.RefObject<HTMLDivElement>, boolean] {
|
|
18
|
-
const ref = useRef<HTMLDivElement>(null);
|
|
19
|
-
const [isAboveBreakpoint, setIsAboveBreakpoint] = useState(false);
|
|
20
|
-
|
|
21
|
-
useResizeObserver(
|
|
22
|
-
ref,
|
|
23
|
-
(entry) => {
|
|
24
|
-
// Use contentRect.width to match CSS container query box model (content-box)
|
|
25
|
-
const inlineSize = entry.contentRect.width;
|
|
26
|
-
setIsAboveBreakpoint(inlineSize >= breakpoint);
|
|
27
|
-
},
|
|
28
|
-
'content-box',
|
|
29
|
-
);
|
|
30
|
-
|
|
31
|
-
return [ref, isAboveBreakpoint];
|
|
32
|
-
}
|
|
@@ -1,113 +0,0 @@
|
|
|
1
|
-
import { Meta, Source, Canvas } from '@storybook/addon-docs/blocks';
|
|
2
|
-
import * as CriticalBannerStories from './CriticalBanner.story';
|
|
3
|
-
|
|
4
|
-
<Meta title="Prompts/CriticalBanner/Accessibility" tags={['new']} />
|
|
5
|
-
|
|
6
|
-
# Accessibility
|
|
7
|
-
|
|
8
|
-
Under the hood, `CriticalBanner` is marked as `role="region"` for a section of content that users might want to navigate to directly.
|
|
9
|
-
|
|
10
|
-
By default, it's labelled by the `title` and described by the `description`.
|
|
11
|
-
|
|
12
|
-
## Announcement Behavior
|
|
13
|
-
|
|
14
|
-
`CriticalBanner` is designed for critical messages that require immediate attention. It always uses **`aria-live="assertive"`** to immediately interrupt and announce changes to screen readers.
|
|
15
|
-
|
|
16
|
-
Unlike `InfoPrompt` which offers configurable politeness levels, `CriticalBanner` is always assertive because it communicates critical, time-sensitive information that users must be aware of immediately.
|
|
17
|
-
|
|
18
|
-
### What Gets Announced
|
|
19
|
-
|
|
20
|
-
The component intelligently announces only **visible content**, respecting the collapsed/expanded state:
|
|
21
|
-
|
|
22
|
-
- **Collapsed with title**: Announces title only (description is hidden)
|
|
23
|
-
- **Collapsed without title**: Announces description only (visible up to 2 lines)
|
|
24
|
-
- **Expanded**: Announces title, description, and action button labels (all visible)
|
|
25
|
-
|
|
26
|
-
<Source
|
|
27
|
-
dark
|
|
28
|
-
code={`
|
|
29
|
-
// Collapsed with title - announces: "Your account requires verification"
|
|
30
|
-
<CriticalBanner
|
|
31
|
-
title="Your account requires verification"
|
|
32
|
-
description="Please verify your identity to continue"
|
|
33
|
-
action={{ label: "Verify now", onClick: handleVerify }}
|
|
34
|
-
expanded={false}
|
|
35
|
-
onToggle={handleToggle}
|
|
36
|
-
/>
|
|
37
|
-
|
|
38
|
-
// Expanded - announces: "Your account requires verification | Please verify your identity to continue | Verify now | Learn more"
|
|
39
|
-
|
|
40
|
-
<CriticalBanner
|
|
41
|
-
title="Your account requires verification"
|
|
42
|
-
description="Please verify your identity to continue"
|
|
43
|
-
action={{ label: 'Verify now', onClick: handleVerify }}
|
|
44
|
-
actionSecondary={{ label: 'Learn more', onClick: handleLearnMore }}
|
|
45
|
-
expanded={true}
|
|
46
|
-
onToggle={handleToggle}
|
|
47
|
-
/>
|
|
48
|
-
|
|
49
|
-
// Collapsed without title - announces: "Your verification is pending..."
|
|
50
|
-
|
|
51
|
-
<CriticalBanner
|
|
52
|
-
description="Your verification is pending. We'll notify you once complete."
|
|
53
|
-
expanded={false}
|
|
54
|
-
onToggle={handleToggle}
|
|
55
|
-
/>
|
|
56
|
-
`}
|
|
57
|
-
/>
|
|
58
|
-
|
|
59
|
-
### When Announcements Trigger
|
|
60
|
-
|
|
61
|
-
Screen readers announce the banner content whenever:
|
|
62
|
-
|
|
63
|
-
- The banner first appears in the DOM
|
|
64
|
-
- The user toggles between collapsed and expanded states
|
|
65
|
-
- The content (title, description, or action labels) changes
|
|
66
|
-
|
|
67
|
-
## Media
|
|
68
|
-
|
|
69
|
-
Custom media icons should include their own accessibility attributes. Use the `title` prop on icons to provide accessible names for screen readers:
|
|
70
|
-
|
|
71
|
-
<Source
|
|
72
|
-
dark
|
|
73
|
-
code={`
|
|
74
|
-
import { Bank, AlertCircle } from '@transferwise/icons';
|
|
75
|
-
|
|
76
|
-
<CriticalBanner
|
|
77
|
-
title="Bank connection required"
|
|
78
|
-
description="Connect your bank account to continue"
|
|
79
|
-
media={{ avatar: { asset: <Bank title="Bank account" /> } }}
|
|
80
|
-
action={{ label: 'Connect now', onClick: handleConnect }}
|
|
81
|
-
expanded={false}
|
|
82
|
-
onToggle={handleToggle}
|
|
83
|
-
/>
|
|
84
|
-
|
|
85
|
-
<CriticalBanner
|
|
86
|
-
title="Verification required"
|
|
87
|
-
description="We need to verify your identity"
|
|
88
|
-
media={{ avatar: { asset: <AlertCircle title="Alert" /> } }}
|
|
89
|
-
action={{ label: "Start verification", onClick: handleVerify }}
|
|
90
|
-
expanded={false}
|
|
91
|
-
onToggle={handleToggle}
|
|
92
|
-
/>
|
|
93
|
-
`}
|
|
94
|
-
/>
|
|
95
|
-
|
|
96
|
-
Alternatively, you can use `media['aria-label']` to provide a label for custom images:
|
|
97
|
-
|
|
98
|
-
<Source
|
|
99
|
-
dark
|
|
100
|
-
code={`
|
|
101
|
-
<CriticalBanner
|
|
102
|
-
title="Card blocked"
|
|
103
|
-
description="Your card has been blocked for security reasons"
|
|
104
|
-
media={{
|
|
105
|
-
imgSrc: '/wise-card.svg',
|
|
106
|
-
'aria-label': 'Wise debit card'
|
|
107
|
-
}}
|
|
108
|
-
action={{ label: "Unblock card", onClick: handleUnblock }}
|
|
109
|
-
expanded={false}
|
|
110
|
-
onToggle={handleToggle}
|
|
111
|
-
/>
|
|
112
|
-
`}
|
|
113
|
-
/>
|