@transferwise/components 46.94.2 → 46.95.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/accordion/Accordion.js +4 -2
- package/build/accordion/Accordion.js.map +1 -1
- package/build/accordion/AccordionItem/AccordionItem.js +6 -4
- package/build/accordion/AccordionItem/AccordionItem.js.map +1 -1
- package/build/actionButton/ActionButton.js +3 -1
- package/build/actionButton/ActionButton.js.map +1 -1
- package/build/actionOption/ActionOption.js +5 -3
- package/build/actionOption/ActionOption.js.map +1 -1
- package/build/alert/Alert.js +4 -4
- package/build/alert/Alert.js.map +1 -1
- package/build/alert/inlineMarkdown/InlineMarkdown.js +4 -2
- package/build/alert/inlineMarkdown/InlineMarkdown.js.map +1 -1
- package/build/avatar/Avatar.js +3 -1
- package/build/avatar/Avatar.js.map +1 -1
- package/build/avatarLayout/AvatarLayout.js +5 -3
- package/build/avatarLayout/AvatarLayout.js.map +1 -1
- package/build/avatarView/AvatarView.js +9 -7
- package/build/avatarView/AvatarView.js.map +1 -1
- package/build/avatarView/NotificationDot.js +3 -1
- package/build/avatarView/NotificationDot.js.map +1 -1
- package/build/avatarWrapper/AvatarWrapper.js +8 -6
- package/build/avatarWrapper/AvatarWrapper.js.map +1 -1
- package/build/avatarWrapper/AvatarWrapper.mjs +1 -1
- package/build/avatarWrapper/index.js +3 -1
- package/build/avatarWrapper/index.js.map +1 -1
- package/build/badge/Badge.js +3 -1
- package/build/badge/Badge.js.map +1 -1
- package/build/badge/Badge.mjs.map +1 -1
- package/build/badge/BadgeAssets.js +9 -7
- package/build/badge/BadgeAssets.js.map +1 -1
- package/build/badge/BadgeAssets.mjs +2 -2
- package/build/badge/BadgeAssets.mjs.map +1 -1
- package/build/body/Body.js +3 -1
- package/build/body/Body.js.map +1 -1
- package/build/button/Button.js +8 -6
- package/build/button/Button.js.map +1 -1
- package/build/button/Button.resolver.js +5 -3
- package/build/button/Button.resolver.js.map +1 -1
- package/build/button/LegacyButton.js +5 -3
- package/build/button/LegacyButton.js.map +1 -1
- package/build/card/Card.js +6 -4
- package/build/card/Card.js.map +1 -1
- package/build/carousel/Carousel.js +7 -5
- package/build/carousel/Carousel.js.map +1 -1
- package/build/checkbox/Checkbox.js +6 -4
- package/build/checkbox/Checkbox.js.map +1 -1
- package/build/checkboxButton/CheckboxButton.js +3 -1
- package/build/checkboxButton/CheckboxButton.js.map +1 -1
- package/build/checkboxOption/CheckboxOption.js +5 -3
- package/build/checkboxOption/CheckboxOption.js.map +1 -1
- package/build/chevron/Chevron.js +3 -1
- package/build/chevron/Chevron.js.map +1 -1
- package/build/chips/Chip.js +4 -2
- package/build/chips/Chip.js.map +1 -1
- package/build/chips/Chips.js +5 -3
- package/build/chips/Chips.js.map +1 -1
- package/build/chips/Chips.messages.js +3 -1
- package/build/chips/Chips.messages.js.map +1 -1
- package/build/circularButton/CircularButton.js +5 -3
- package/build/circularButton/CircularButton.js.map +1 -1
- package/build/common/Option/Option.js +7 -5
- package/build/common/Option/Option.js.map +1 -1
- package/build/common/Option/Option.mjs +2 -2
- package/build/common/Option/Option.mjs.map +1 -1
- package/build/common/RadioButton/RadioButton.js +3 -1
- package/build/common/RadioButton/RadioButton.js.map +1 -1
- package/build/common/action/Action.js +2 -2
- package/build/common/action/Action.js.map +1 -1
- package/build/common/bottomSheet/BottomSheet.js +4 -2
- package/build/common/bottomSheet/BottomSheet.js.map +1 -1
- package/build/common/card/Card.js +3 -1
- package/build/common/card/Card.js.map +1 -1
- package/build/common/circle/Circle.js +3 -1
- package/build/common/circle/Circle.js.map +1 -1
- package/build/common/closeButton/CloseButton.js +1 -1
- package/build/common/closeButton/CloseButton.js.map +1 -1
- package/build/common/closeButton/CloseButton.messages.js +3 -1
- package/build/common/closeButton/CloseButton.messages.js.map +1 -1
- package/build/common/flowHeader/FlowHeader.js +3 -1
- package/build/common/flowHeader/FlowHeader.js.map +1 -1
- package/build/common/focusBoundary/FocusBoundary.js +3 -1
- package/build/common/focusBoundary/FocusBoundary.js.map +1 -1
- package/build/common/historyNavigator/historyNavigator.js +3 -1
- package/build/common/historyNavigator/historyNavigator.js.map +1 -1
- package/build/common/locale/index.js +0 -24
- package/build/common/locale/index.js.map +1 -1
- package/build/common/locale/index.mjs +0 -24
- package/build/common/locale/index.mjs.map +1 -1
- package/build/common/panel/Panel.js +3 -1
- package/build/common/panel/Panel.js.map +1 -1
- package/build/common/responsivePanel/ResponsivePanel.js +5 -3
- package/build/common/responsivePanel/ResponsivePanel.js.map +1 -1
- package/build/common/textFormat/formatWithPattern/formatWithPattern.js +4 -2
- package/build/common/textFormat/formatWithPattern/formatWithPattern.js.map +1 -1
- package/build/common/textFormat/getCountOfSymbolsInSelection/getCountOfSymbolsInSelection.js +4 -2
- package/build/common/textFormat/getCountOfSymbolsInSelection/getCountOfSymbolsInSelection.js.map +1 -1
- package/build/common/textFormat/getCursorPositionAfterKeystroke/getCursorPositionAfterKeystroke.js +4 -2
- package/build/common/textFormat/getCursorPositionAfterKeystroke/getCursorPositionAfterKeystroke.js.map +1 -1
- package/build/common/textFormat/getDistanceToSymbol/getDistanceToSymbol.js +2 -2
- package/build/common/textFormat/getDistanceToSymbol/getDistanceToSymbol.js.map +1 -1
- package/build/common/textFormat/getSymbolsInPatternWithPosition/getSymbolsInPatternWithPosition.js +3 -1
- package/build/common/textFormat/getSymbolsInPatternWithPosition/getSymbolsInPatternWithPosition.js.map +1 -1
- package/build/common/textFormat/unformatWithPattern/unformatWithPattern.js +3 -1
- package/build/common/textFormat/unformatWithPattern/unformatWithPattern.js.map +1 -1
- package/build/criticalBanner/CriticalCommsBanner.js +3 -1
- package/build/criticalBanner/CriticalCommsBanner.js.map +1 -1
- package/build/dateInput/DateInput.js +15 -13
- package/build/dateInput/DateInput.js.map +1 -1
- package/build/dateInput/DateInput.messages.js +3 -1
- package/build/dateInput/DateInput.messages.js.map +1 -1
- package/build/dateInput/DateInput.mjs +3 -3
- package/build/dateInput/DateInput.mjs.map +1 -1
- package/build/dateLookup/DateLookup.js +8 -6
- package/build/dateLookup/DateLookup.js.map +1 -1
- package/build/dateLookup/DateLookup.messages.js +3 -1
- package/build/dateLookup/DateLookup.messages.js.map +1 -1
- package/build/dateLookup/dateHeader/DateHeader.js +10 -8
- package/build/dateLookup/dateHeader/DateHeader.js.map +1 -1
- package/build/dateLookup/dateTrigger/DateTrigger.js +8 -6
- package/build/dateLookup/dateTrigger/DateTrigger.js.map +1 -1
- package/build/dateLookup/dateTrigger/DateTrigger.messages.js +4 -2
- package/build/dateLookup/dateTrigger/DateTrigger.messages.js.map +1 -1
- package/build/dateLookup/dateTrigger/DateTrigger.messages.mjs +2 -2
- package/build/dateLookup/dateTrigger/DateTrigger.messages.mjs.map +1 -1
- package/build/dateLookup/dateTrigger/DateTrigger.mjs +2 -2
- package/build/dateLookup/dateTrigger/DateTrigger.mjs.map +1 -1
- package/build/dateLookup/dayCalendar/DayCalendar.js +6 -4
- package/build/dateLookup/dayCalendar/DayCalendar.js.map +1 -1
- package/build/dateLookup/dayCalendar/table/DayCalendarTable.js +4 -2
- package/build/dateLookup/dayCalendar/table/DayCalendarTable.js.map +1 -1
- package/build/dateLookup/monthCalendar/MonthCalendar.js +6 -4
- package/build/dateLookup/monthCalendar/MonthCalendar.js.map +1 -1
- package/build/dateLookup/monthCalendar/table/MonthCalendarTable.js +4 -2
- package/build/dateLookup/monthCalendar/table/MonthCalendarTable.js.map +1 -1
- package/build/dateLookup/tableLink/TableLink.js +4 -2
- package/build/dateLookup/tableLink/TableLink.js.map +1 -1
- package/build/dateLookup/yearCalendar/YearCalendar.js +6 -4
- package/build/dateLookup/yearCalendar/YearCalendar.js.map +1 -1
- package/build/dateLookup/yearCalendar/table/YearCalendarTable.js +4 -2
- package/build/dateLookup/yearCalendar/table/YearCalendarTable.js.map +1 -1
- package/build/decision/Decision.js +2 -2
- package/build/decision/Decision.js.map +1 -1
- package/build/definitionList/DefinitionList.js +4 -2
- package/build/definitionList/DefinitionList.js.map +1 -1
- package/build/dimmer/Dimmer.js +3 -3
- package/build/dimmer/Dimmer.js.map +1 -1
- package/build/dimmer/dimmerManager/DimmerManager.js +3 -1
- package/build/dimmer/dimmerManager/DimmerManager.js.map +1 -1
- package/build/display/Display.js +3 -1
- package/build/display/Display.js.map +1 -1
- package/build/divider/Divider.js +35 -0
- package/build/divider/Divider.js.map +1 -0
- package/build/divider/Divider.mjs +31 -0
- package/build/divider/Divider.mjs.map +1 -0
- package/build/drawer/Drawer.js +4 -2
- package/build/drawer/Drawer.js.map +1 -1
- package/build/dropFade/DropFade.js +3 -1
- package/build/dropFade/DropFade.js.map +1 -1
- package/build/emphasis/Emphasis.js +4 -2
- package/build/emphasis/Emphasis.js.map +1 -1
- package/build/emphasis/EmphasisHtmlTransformer.js +3 -1
- package/build/emphasis/EmphasisHtmlTransformer.js.map +1 -1
- package/build/field/Field.js +1 -1
- package/build/field/Field.js.map +1 -1
- package/build/flowNavigation/FlowNavigation.js +8 -6
- package/build/flowNavigation/FlowNavigation.js.map +1 -1
- package/build/flowNavigation/FlowNavigation.messages.js +3 -1
- package/build/flowNavigation/FlowNavigation.messages.js.map +1 -1
- package/build/flowNavigation/animatedLabel/AnimatedLabel.js +5 -3
- package/build/flowNavigation/animatedLabel/AnimatedLabel.js.map +1 -1
- package/build/header/Header.js +4 -4
- package/build/header/Header.js.map +1 -1
- package/build/i18n/commonMessages/Button.messages.js +3 -1
- package/build/i18n/commonMessages/Button.messages.js.map +1 -1
- package/build/i18n/cs.json +22 -5
- package/build/i18n/cs.json.js +25 -6
- package/build/i18n/cs.json.js.map +1 -1
- package/build/i18n/cs.json.mjs +22 -5
- package/build/i18n/cs.json.mjs.map +1 -1
- package/build/i18n/de.json.js +3 -1
- package/build/i18n/de.json.js.map +1 -1
- package/build/i18n/en.json.js +3 -1
- package/build/i18n/en.json.js.map +1 -1
- package/build/i18n/es.json.js +3 -1
- package/build/i18n/es.json.js.map +1 -1
- package/build/i18n/fr.json.js +3 -1
- package/build/i18n/fr.json.js.map +1 -1
- package/build/i18n/hu.json.js +3 -1
- package/build/i18n/hu.json.js.map +1 -1
- package/build/i18n/id.json.js +3 -1
- package/build/i18n/id.json.js.map +1 -1
- package/build/i18n/index.js +22 -20
- package/build/i18n/index.js.map +1 -1
- package/build/i18n/it.json.js +3 -1
- package/build/i18n/it.json.js.map +1 -1
- package/build/i18n/ja.json.js +3 -1
- package/build/i18n/ja.json.js.map +1 -1
- package/build/i18n/pl.json.js +3 -1
- package/build/i18n/pl.json.js.map +1 -1
- package/build/i18n/pt.json.js +3 -1
- package/build/i18n/pt.json.js.map +1 -1
- package/build/i18n/ro.json.js +3 -1
- package/build/i18n/ro.json.js.map +1 -1
- package/build/i18n/ru.json.js +3 -1
- package/build/i18n/ru.json.js.map +1 -1
- package/build/i18n/th.json.js +3 -1
- package/build/i18n/th.json.js.map +1 -1
- package/build/i18n/tr.json.js +3 -1
- package/build/i18n/tr.json.js.map +1 -1
- package/build/i18n/uk.json.js +3 -1
- package/build/i18n/uk.json.js.map +1 -1
- package/build/i18n/zh-CN.json.js +3 -1
- package/build/i18n/zh-CN.json.js.map +1 -1
- package/build/i18n/zh-HK.json.js +3 -1
- package/build/i18n/zh-HK.json.js.map +1 -1
- package/build/iconButton/IconButton.js +5 -3
- package/build/iconButton/IconButton.js.map +1 -1
- package/build/index.js +84 -82
- package/build/index.js.map +1 -1
- package/build/index.mjs +3 -2
- package/build/index.mjs.map +1 -1
- package/build/info/Info.js +8 -6
- package/build/info/Info.js.map +1 -1
- package/build/info/Info.messages.js +3 -1
- package/build/info/Info.messages.js.map +1 -1
- package/build/inlineAlert/InlineAlert.js +5 -3
- package/build/inlineAlert/InlineAlert.js.map +1 -1
- package/build/inputWithDisplayFormat/InputWithDisplayFormat.js +4 -2
- package/build/inputWithDisplayFormat/InputWithDisplayFormat.js.map +1 -1
- package/build/inputs/SelectInput.js +3 -3
- package/build/inputs/SelectInput.js.map +1 -1
- package/build/inputs/SelectInput.messages.js +3 -1
- package/build/inputs/SelectInput.messages.js.map +1 -1
- package/build/inputs/SelectInput.mjs +2 -2
- package/build/inputs/SelectInput.mjs.map +1 -1
- package/build/instructionsList/InstructionsList.js +4 -2
- package/build/instructionsList/InstructionsList.js.map +1 -1
- package/build/label/Label.js +3 -3
- package/build/label/Label.js.map +1 -1
- package/build/label/Label.messages.js +3 -1
- package/build/label/Label.messages.js.map +1 -1
- package/build/link/Link.js +5 -3
- package/build/link/Link.js.map +1 -1
- package/build/link/Link.messages.js +3 -1
- package/build/link/Link.messages.js.map +1 -1
- package/build/listItem/ListItem.js +5 -3
- package/build/listItem/ListItem.js.map +1 -1
- package/build/loader/Loader.js +3 -1
- package/build/loader/Loader.js.map +1 -1
- package/build/main.css +25 -1
- package/build/markdown/Markdown.js +3 -1
- package/build/markdown/Markdown.js.map +1 -1
- package/build/modal/Modal.js +5 -3
- package/build/modal/Modal.js.map +1 -1
- package/build/money/Money.js +3 -1
- package/build/money/Money.js.map +1 -1
- package/build/moneyInput/MoneyInput.js +7 -5
- package/build/moneyInput/MoneyInput.js.map +1 -1
- package/build/moneyInput/MoneyInput.messages.js +3 -1
- package/build/moneyInput/MoneyInput.messages.js.map +1 -1
- package/build/navigationOption/NavigationOption.js +5 -3
- package/build/navigationOption/NavigationOption.js.map +1 -1
- package/build/navigationOptionsList/NavigationOptionsList.js +3 -1
- package/build/navigationOptionsList/NavigationOptionsList.js.map +1 -1
- package/build/nudge/Nudge.js +2 -2
- package/build/nudge/Nudge.js.map +1 -1
- package/build/overlayHeader/OverlayHeader.js +4 -2
- package/build/overlayHeader/OverlayHeader.js.map +1 -1
- package/build/phoneNumberInput/PhoneNumberInput.js +5 -3
- package/build/phoneNumberInput/PhoneNumberInput.js.map +1 -1
- package/build/phoneNumberInput/PhoneNumberInput.messages.js +3 -1
- package/build/phoneNumberInput/PhoneNumberInput.messages.js.map +1 -1
- package/build/phoneNumberInput/data/countries.js +3 -1
- package/build/phoneNumberInput/data/countries.js.map +1 -1
- package/build/phoneNumberInput/utils/findCountryByCode/index.js +1 -1
- package/build/phoneNumberInput/utils/findCountryByCode/index.js.map +1 -1
- package/build/phoneNumberInput/utils/findCountryByPrefix/index.js +1 -1
- package/build/phoneNumberInput/utils/findCountryByPrefix/index.js.map +1 -1
- package/build/popover/Popover.js +5 -3
- package/build/popover/Popover.js.map +1 -1
- package/build/primitives/PrimitiveAnchor/PrimitiveAnchor.js +3 -1
- package/build/primitives/PrimitiveAnchor/PrimitiveAnchor.js.map +1 -1
- package/build/primitives/PrimitiveButton/PrimitiveButton.js +4 -2
- package/build/primitives/PrimitiveButton/PrimitiveButton.js.map +1 -1
- package/build/processIndicator/ProcessIndicator.js +3 -1
- package/build/processIndicator/ProcessIndicator.js.map +1 -1
- package/build/progress/Progress.js +3 -1
- package/build/progress/Progress.js.map +1 -1
- package/build/progressBar/ProgressBar.js +7 -5
- package/build/progressBar/ProgressBar.js.map +1 -1
- package/build/promoCard/PromoCard.js +8 -6
- package/build/promoCard/PromoCard.js.map +1 -1
- package/build/promoCard/PromoCardGroup.js +3 -1
- package/build/promoCard/PromoCardGroup.js.map +1 -1
- package/build/promoCard/PromoCardIndicator.js +5 -3
- package/build/promoCard/PromoCardIndicator.js.map +1 -1
- package/build/provider/Provider.js +4 -2
- package/build/provider/Provider.js.map +1 -1
- package/build/radio/Radio.js +6 -4
- package/build/radio/Radio.js.map +1 -1
- package/build/radioGroup/RadioGroup.js +4 -2
- package/build/radioGroup/RadioGroup.js.map +1 -1
- package/build/radioOption/RadioOption.js +5 -3
- package/build/radioOption/RadioOption.js.map +1 -1
- package/build/section/Section.js +3 -1
- package/build/section/Section.js.map +1 -1
- package/build/segmentedControl/SegmentedControl.js +5 -3
- package/build/segmentedControl/SegmentedControl.js.map +1 -1
- package/build/select/Select.js +13 -11
- package/build/select/Select.js.map +1 -1
- package/build/select/Select.messages.js +3 -1
- package/build/select/Select.messages.js.map +1 -1
- package/build/select/option/Option.js +6 -4
- package/build/select/option/Option.js.map +1 -1
- package/build/select/option/index.js +3 -1
- package/build/select/option/index.js.map +1 -1
- package/build/select/searchBox/SearchBox.js +3 -1
- package/build/select/searchBox/SearchBox.js.map +1 -1
- package/build/selectOption/SelectOption.js +10 -8
- package/build/selectOption/SelectOption.js.map +1 -1
- package/build/selectOption/SelectOption.messages.js +3 -1
- package/build/selectOption/SelectOption.messages.js.map +1 -1
- package/build/snackbar/Snackbar.js +3 -3
- package/build/snackbar/Snackbar.js.map +1 -1
- package/build/snackbar/SnackbarProvider.js +3 -1
- package/build/snackbar/SnackbarProvider.js.map +1 -1
- package/build/snackbar/useSnackbar.js +3 -1
- package/build/snackbar/useSnackbar.js.map +1 -1
- package/build/statusIcon/StatusIcon.js +12 -10
- package/build/statusIcon/StatusIcon.js.map +1 -1
- package/build/statusIcon/StatusIcon.messages.js +3 -1
- package/build/statusIcon/StatusIcon.messages.js.map +1 -1
- package/build/stepper/Stepper.js +4 -2
- package/build/stepper/Stepper.js.map +1 -1
- package/build/sticky/Sticky.js +3 -1
- package/build/sticky/Sticky.js.map +1 -1
- package/build/styles/common/Option/Option.css +1 -1
- package/build/styles/divider/Divider.css +24 -0
- package/build/styles/main.css +25 -1
- package/build/summary/Summary.js +9 -7
- package/build/summary/Summary.js.map +1 -1
- package/build/summary/Summary.messages.js +3 -1
- package/build/summary/Summary.messages.js.map +1 -1
- package/build/switch/Switch.js +3 -1
- package/build/switch/Switch.js.map +1 -1
- package/build/switchOption/SwitchOption.js +5 -3
- package/build/switchOption/SwitchOption.js.map +1 -1
- package/build/table/Table.js +16 -14
- package/build/table/Table.js.map +1 -1
- package/build/table/Table.messages.js +3 -1
- package/build/table/Table.messages.js.map +1 -1
- package/build/table/TableCell.js +9 -7
- package/build/table/TableCell.js.map +1 -1
- package/build/table/TableHeader.js +6 -4
- package/build/table/TableHeader.js.map +1 -1
- package/build/table/TableRow.js +6 -4
- package/build/table/TableRow.js.map +1 -1
- package/build/table/TableStatusText.js +4 -2
- package/build/table/TableStatusText.js.map +1 -1
- package/build/tabs/Tab.js +3 -1
- package/build/tabs/Tab.js.map +1 -1
- package/build/tabs/TabList.js +3 -1
- package/build/tabs/TabList.js.map +1 -1
- package/build/tabs/TabPanel.js +3 -1
- package/build/tabs/TabPanel.js.map +1 -1
- package/build/tabs/Tabs.js +6 -4
- package/build/tabs/Tabs.js.map +1 -1
- package/build/textareaWithDisplayFormat/TextareaWithDisplayFormat.js +4 -2
- package/build/textareaWithDisplayFormat/TextareaWithDisplayFormat.js.map +1 -1
- package/build/tile/Tile.js +5 -3
- package/build/tile/Tile.js.map +1 -1
- package/build/title/Title.js +3 -1
- package/build/title/Title.js.map +1 -1
- package/build/tooltip/Tooltip.js +3 -1
- package/build/tooltip/Tooltip.js.map +1 -1
- package/build/typeahead/Typeahead.js +8 -6
- package/build/typeahead/Typeahead.js.map +1 -1
- package/build/typeahead/Typeahead.messages.js +3 -1
- package/build/typeahead/Typeahead.messages.js.map +1 -1
- package/build/typeahead/typeaheadInput/TypeaheadInput.js +3 -1
- package/build/typeahead/typeaheadInput/TypeaheadInput.js.map +1 -1
- package/build/typeahead/typeaheadOption/TypeaheadOption.js +5 -3
- package/build/typeahead/typeaheadOption/TypeaheadOption.js.map +1 -1
- package/build/typeahead/util/highlight.js +3 -1
- package/build/typeahead/util/highlight.js.map +1 -1
- package/build/types/badge/Badge.d.ts +1 -1
- package/build/types/badge/Badge.d.ts.map +1 -1
- package/build/types/badge/BadgeAssets.d.ts.map +1 -1
- package/build/types/common/locale/index.d.ts +1 -1
- package/build/types/common/locale/index.d.ts.map +1 -1
- package/build/types/dateInput/DateInput.d.ts +1 -1
- package/build/types/dateInput/DateInput.d.ts.map +1 -1
- package/build/types/divider/Divider.d.ts +29 -0
- package/build/types/divider/Divider.d.ts.map +1 -0
- package/build/types/divider/index.d.ts +3 -0
- package/build/types/divider/index.d.ts.map +1 -0
- package/build/types/index.d.ts +2 -0
- package/build/types/index.d.ts.map +1 -1
- package/build/upload/Upload.js +17 -17
- package/build/upload/Upload.js.map +1 -1
- package/build/upload/Upload.messages.js +3 -1
- package/build/upload/Upload.messages.js.map +1 -1
- package/build/upload/steps/completeStep/completeStep.js +30 -6
- package/build/upload/steps/completeStep/completeStep.js.map +1 -1
- package/build/upload/steps/completeStep/completeStep.mjs +24 -2
- package/build/upload/steps/completeStep/completeStep.mjs.map +1 -1
- package/build/upload/steps/processingStep/processingStep.js +6 -4
- package/build/upload/steps/processingStep/processingStep.js.map +1 -1
- package/build/upload/steps/uploadImageStep/uploadImageStep.js +5 -3
- package/build/upload/steps/uploadImageStep/uploadImageStep.js.map +1 -1
- package/build/uploadInput/UploadInput.js +13 -11
- package/build/uploadInput/UploadInput.js.map +1 -1
- package/build/uploadInput/UploadInput.messages.js +3 -1
- package/build/uploadInput/UploadInput.messages.js.map +1 -1
- package/build/uploadInput/uploadButton/UploadButton.js +8 -8
- package/build/uploadInput/uploadButton/UploadButton.js.map +1 -1
- package/build/uploadInput/uploadButton/UploadButton.messages.js +3 -1
- package/build/uploadInput/uploadButton/UploadButton.messages.js.map +1 -1
- package/build/uploadInput/uploadButton/getAllowedFileTypes.js +3 -1
- package/build/uploadInput/uploadButton/getAllowedFileTypes.js.map +1 -1
- package/build/uploadInput/uploadItem/UploadItem.js +12 -12
- package/build/uploadInput/uploadItem/UploadItem.js.map +1 -1
- package/build/uploadInput/uploadItem/UploadItem.messages.js +3 -1
- package/build/uploadInput/uploadItem/UploadItem.messages.js.map +1 -1
- package/build/withDisplayFormat/WithDisplayFormat.js +19 -17
- package/build/withDisplayFormat/WithDisplayFormat.js.map +1 -1
- package/build/withId/withId.js +3 -1
- package/build/withId/withId.js.map +1 -1
- package/build/withNextPortal/withNextPortal.js +3 -1
- package/build/withNextPortal/withNextPortal.js.map +1 -1
- package/package.json +7 -8
- package/src/badge/Badge.tsx +1 -1
- package/src/badge/BadgeAssets.tsx +2 -2
- package/src/common/Option/Option.css +1 -1
- package/src/common/Option/Option.less +2 -2
- package/src/common/Option/Option.tsx +1 -1
- package/src/common/locale/index.ts +1 -1
- package/src/dateInput/DateInput.tsx +7 -1
- package/src/divider/Divider.accessibility.docs.mdx +61 -0
- package/src/divider/Divider.css +24 -0
- package/src/divider/Divider.less +31 -0
- package/src/divider/Divider.spec.tsx +60 -0
- package/src/divider/Divider.story.tsx +130 -0
- package/src/divider/Divider.tsx +54 -0
- package/src/divider/index.ts +2 -0
- package/src/i18n/cs.json +22 -5
- package/src/index.ts +2 -0
- package/src/main.css +25 -1
- package/src/main.less +1 -0
- package/src/upload/steps/completeStep/completeStep.tsx +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PrimitiveButton.js","sources":["../../../src/primitives/PrimitiveButton/PrimitiveButton.tsx"],"sourcesContent":["/* eslint-disable react/button-has-type */\nimport React, { forwardRef, useCallback } from 'react';\nimport { clsx } from 'clsx';\nimport { useIntl, MessageDescriptor } from 'react-intl';\nimport messages from '../../i18n/commonMessages/Button.messages';\nimport type { PrimitiveButtonProps } from '.';\n\n/**\n * The Primitive `PrimitiveButton` component can be used in various parts the Wise Design\n * System internally. It supports different states such as disabled and loading,\n * and provides event handlers for common interactions like click, focus, blur,\n * mouse enter, mouse leave, and keydown.\n *\n * @see {@link PrimitiveButton} for further information.\n * @see {@link https://storybook.wise.design/?path=/docs/primitive-button--docs|Storybook Wise Design}\n */\nconst PrimitiveButton = forwardRef<HTMLButtonElement, PrimitiveButtonProps>(\n (\n {\n children,\n className,\n id,\n disabled = false,\n loading = false,\n testId,\n type = 'button',\n onClick,\n onFocus,\n onBlur,\n onMouseEnter,\n onMouseLeave,\n onKeyDown,\n ...props\n },\n ref,\n ) => {\n const intl = useIntl();\n const classNames = clsx(className);\n\n const handleClick = useCallback(\n (event: React.MouseEvent<HTMLButtonElement>) => {\n if (disabled || loading) {\n event.preventDefault();\n } else {\n onClick?.(event);\n }\n },\n [disabled, loading, onClick],\n );\n\n const handleFocus = useCallback(\n (event: React.FocusEvent<HTMLButtonElement>) => {\n onFocus?.(event);\n },\n [onFocus],\n );\n\n const handleBlur = useCallback(\n (event: React.FocusEvent<HTMLButtonElement>) => {\n onBlur?.(event);\n },\n [onBlur],\n );\n\n const handleMouseEnter = useCallback(\n (event: React.MouseEvent<HTMLButtonElement>) => {\n onMouseEnter?.(event);\n },\n [onMouseEnter],\n );\n\n const handleMouseLeave = useCallback(\n (event: React.MouseEvent<HTMLButtonElement>) => {\n onMouseLeave?.(event);\n },\n [onMouseLeave],\n );\n\n const handleKeyDown = useCallback(\n (event: React.KeyboardEvent<HTMLButtonElement>) => {\n onKeyDown?.(event);\n },\n [onKeyDown],\n );\n\n /**\n * The following props are used to manage the `disabled` and `loading`\n * states for the button:\n *\n * - `aria-disabled`: Communicates to assistive technologies that the button\n * is disabled when it is either disabled or loading.\n * - `aria-label`: Provides an accessible label for the button, using a\n * localized loading message when the button is in a loading state.\n * - `aria-live`: Ensures that updates to the button's content are announced\n * by assistive technologies, set to 'polite' during loading.\n */\n const buttonProps = {\n 'aria-disabled': loading || undefined,\n 'aria-busy': loading || undefined,\n 'aria-label': loading ? intl.formatMessage(messages.loadingAriaLabel) : props['aria-label'],\n 'aria-live': (loading ? 'polite' : 'off') as 'polite' | 'off' | 'assertive' | undefined,\n className: classNames,\n 'data-testid': testId,\n disabled,\n id,\n ref,\n type,\n onBlur: handleBlur,\n onClick: handleClick,\n onFocus: handleFocus,\n onMouseEnter: handleMouseEnter,\n onMouseLeave: handleMouseLeave,\n onKeyDown: handleKeyDown,\n ...props,\n };\n\n return <button {...buttonProps}>{children}</button>;\n },\n);\n\nPrimitiveButton.displayName = 'PrimitiveButton';\n\nexport default PrimitiveButton;\n"],"names":["PrimitiveButton","forwardRef","children","className","id","disabled","loading","testId","type","onClick","onFocus","onBlur","onMouseEnter","onMouseLeave","onKeyDown","props","ref","intl","useIntl","classNames","clsx","handleClick","useCallback","event","preventDefault","handleFocus","handleBlur","handleMouseEnter","handleMouseLeave","handleKeyDown","buttonProps","undefined","formatMessage","messages","loadingAriaLabel","_jsx","displayName"],"mappings":"
|
|
1
|
+
{"version":3,"file":"PrimitiveButton.js","sources":["../../../src/primitives/PrimitiveButton/PrimitiveButton.tsx"],"sourcesContent":["/* eslint-disable react/button-has-type */\nimport React, { forwardRef, useCallback } from 'react';\nimport { clsx } from 'clsx';\nimport { useIntl, MessageDescriptor } from 'react-intl';\nimport messages from '../../i18n/commonMessages/Button.messages';\nimport type { PrimitiveButtonProps } from '.';\n\n/**\n * The Primitive `PrimitiveButton` component can be used in various parts the Wise Design\n * System internally. It supports different states such as disabled and loading,\n * and provides event handlers for common interactions like click, focus, blur,\n * mouse enter, mouse leave, and keydown.\n *\n * @see {@link PrimitiveButton} for further information.\n * @see {@link https://storybook.wise.design/?path=/docs/primitive-button--docs|Storybook Wise Design}\n */\nconst PrimitiveButton = forwardRef<HTMLButtonElement, PrimitiveButtonProps>(\n (\n {\n children,\n className,\n id,\n disabled = false,\n loading = false,\n testId,\n type = 'button',\n onClick,\n onFocus,\n onBlur,\n onMouseEnter,\n onMouseLeave,\n onKeyDown,\n ...props\n },\n ref,\n ) => {\n const intl = useIntl();\n const classNames = clsx(className);\n\n const handleClick = useCallback(\n (event: React.MouseEvent<HTMLButtonElement>) => {\n if (disabled || loading) {\n event.preventDefault();\n } else {\n onClick?.(event);\n }\n },\n [disabled, loading, onClick],\n );\n\n const handleFocus = useCallback(\n (event: React.FocusEvent<HTMLButtonElement>) => {\n onFocus?.(event);\n },\n [onFocus],\n );\n\n const handleBlur = useCallback(\n (event: React.FocusEvent<HTMLButtonElement>) => {\n onBlur?.(event);\n },\n [onBlur],\n );\n\n const handleMouseEnter = useCallback(\n (event: React.MouseEvent<HTMLButtonElement>) => {\n onMouseEnter?.(event);\n },\n [onMouseEnter],\n );\n\n const handleMouseLeave = useCallback(\n (event: React.MouseEvent<HTMLButtonElement>) => {\n onMouseLeave?.(event);\n },\n [onMouseLeave],\n );\n\n const handleKeyDown = useCallback(\n (event: React.KeyboardEvent<HTMLButtonElement>) => {\n onKeyDown?.(event);\n },\n [onKeyDown],\n );\n\n /**\n * The following props are used to manage the `disabled` and `loading`\n * states for the button:\n *\n * - `aria-disabled`: Communicates to assistive technologies that the button\n * is disabled when it is either disabled or loading.\n * - `aria-label`: Provides an accessible label for the button, using a\n * localized loading message when the button is in a loading state.\n * - `aria-live`: Ensures that updates to the button's content are announced\n * by assistive technologies, set to 'polite' during loading.\n */\n const buttonProps = {\n 'aria-disabled': loading || undefined,\n 'aria-busy': loading || undefined,\n 'aria-label': loading ? intl.formatMessage(messages.loadingAriaLabel) : props['aria-label'],\n 'aria-live': (loading ? 'polite' : 'off') as 'polite' | 'off' | 'assertive' | undefined,\n className: classNames,\n 'data-testid': testId,\n disabled,\n id,\n ref,\n type,\n onBlur: handleBlur,\n onClick: handleClick,\n onFocus: handleFocus,\n onMouseEnter: handleMouseEnter,\n onMouseLeave: handleMouseLeave,\n onKeyDown: handleKeyDown,\n ...props,\n };\n\n return <button {...buttonProps}>{children}</button>;\n },\n);\n\nPrimitiveButton.displayName = 'PrimitiveButton';\n\nexport default PrimitiveButton;\n"],"names":["PrimitiveButton","forwardRef","children","className","id","disabled","loading","testId","type","onClick","onFocus","onBlur","onMouseEnter","onMouseLeave","onKeyDown","props","ref","intl","useIntl","classNames","clsx","handleClick","useCallback","event","preventDefault","handleFocus","handleBlur","handleMouseEnter","handleMouseLeave","handleKeyDown","buttonProps","undefined","formatMessage","messages","loadingAriaLabel","_jsx","displayName"],"mappings":"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"}
|
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
3
5
|
var clsx = require('clsx');
|
|
4
6
|
var React = require('react');
|
|
5
7
|
require('../common/theme.js');
|
|
@@ -133,5 +135,5 @@ class ProcessIndicator extends React.Component {
|
|
|
133
135
|
}
|
|
134
136
|
}
|
|
135
137
|
|
|
136
|
-
|
|
138
|
+
exports.default = ProcessIndicator;
|
|
137
139
|
//# sourceMappingURL=ProcessIndicator.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ProcessIndicator.js","sources":["../../src/processIndicator/ProcessIndicator.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { Component } from 'react';\n\nimport { Status, Size } from '../common';\n\nconst radius = { xxs: 6, xs: 11, sm: 22, xl: 61 };\n\nconst ANIMATION_DURATION_IN_MS = 1500;\n\nexport type ProcessIndicatorStatus =\n `${Status.PROCESSING | Status.FAILED | Status.SUCCEEDED | Status.HIDDEN}`;\n\nexport interface ProcessIndicatorProps {\n status?: ProcessIndicatorStatus;\n size?: 'xxs' | `${Size.EXTRA_SMALL | Size.SMALL | Size.EXTRA_LARGE}`;\n className?: string;\n 'data-testid'?: string;\n onAnimationCompleted?: (status: ProcessIndicatorStatus) => void;\n}\n\ntype ProcessIndicatorState = Required<Pick<ProcessIndicatorProps, 'status' | 'size'>>;\n\nexport default class ProcessIndicator extends Component<\n ProcessIndicatorProps,\n ProcessIndicatorState\n> {\n declare props: ProcessIndicatorProps &\n Required<Pick<ProcessIndicatorProps, keyof typeof ProcessIndicator.defaultProps>>;\n\n static defaultProps = {\n status: 'processing',\n size: 'sm',\n } satisfies Partial<ProcessIndicatorProps>;\n\n interval = 0;\n timeout = 0;\n\n constructor(props: ProcessIndicator['props']) {\n super(props);\n this.state = {\n status: props.status,\n size: props.size,\n };\n }\n\n /**\n * Create interval for animation duration (1500ms)\n * Update state only at the end of every interval\n * (end of animation loop) if props changed before end of animation\n */\n componentDidMount() {\n this.interval = window.setInterval(() => {\n const { status: targetStatus, size: targetSize, onAnimationCompleted } = this.props;\n const { status: currentStatus, size: currentSize } = this.state;\n\n if (currentStatus !== targetStatus) {\n this.setState({ status: targetStatus }, () => {\n if (onAnimationCompleted) {\n this.timeout = window.setTimeout(() => {\n onAnimationCompleted(targetStatus);\n }, ANIMATION_DURATION_IN_MS);\n }\n });\n }\n\n if (currentSize !== targetSize) {\n this.setState({ size: targetSize });\n }\n }, ANIMATION_DURATION_IN_MS);\n }\n\n /**\n * Only trigger render if comopnent's state got\n * updated from interval callback\n */\n shouldComponentUpdate(nextProps: ProcessIndicator['props'], nextState: ProcessIndicatorState) {\n const isSameStatus = nextProps.status === nextState.status;\n const isSameSize = nextProps.size === nextState.size;\n\n return isSameStatus && isSameSize;\n }\n\n // Clear interval before destroying component\n componentWillUnmount() {\n window.clearInterval(this.interval);\n window.clearTimeout(this.timeout);\n }\n\n render() {\n const { className, 'data-testid': dataTestId } = this.props;\n const { size, status } = this.state;\n const classes = clsx(`process process-${size}`, className, {\n [`process-danger`]: status === Status.FAILED,\n [`process-stopped`]: status === Status.HIDDEN,\n [`process-success`]: status === Status.SUCCEEDED,\n });\n\n return (\n <span className={classes} data-testid={dataTestId}>\n <span className=\"process-icon-container\">\n <span className=\"process-icon-horizontal\" />\n <span className=\"process-icon-vertical\" />\n </span>\n <svg xmlns=\"http://www.w3.org/2000/svg\">\n <circle className=\"process-circle\" cx=\"50%\" cy=\"50%\" r={radius[size]} fillOpacity=\"0.0\" />\n </svg>\n </span>\n );\n }\n}\n"],"names":["radius","xxs","xs","sm","xl","ANIMATION_DURATION_IN_MS","ProcessIndicator","Component","defaultProps","status","size","interval","timeout","constructor","props","state","componentDidMount","window","setInterval","targetStatus","targetSize","onAnimationCompleted","currentStatus","currentSize","setState","setTimeout","shouldComponentUpdate","nextProps","nextState","isSameStatus","isSameSize","componentWillUnmount","clearInterval","clearTimeout","render","className","dataTestId","classes","clsx","Status","FAILED","HIDDEN","SUCCEEDED","_jsxs","children","_jsx","xmlns","cx","cy","r","fillOpacity"],"mappings":"
|
|
1
|
+
{"version":3,"file":"ProcessIndicator.js","sources":["../../src/processIndicator/ProcessIndicator.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { Component } from 'react';\n\nimport { Status, Size } from '../common';\n\nconst radius = { xxs: 6, xs: 11, sm: 22, xl: 61 };\n\nconst ANIMATION_DURATION_IN_MS = 1500;\n\nexport type ProcessIndicatorStatus =\n `${Status.PROCESSING | Status.FAILED | Status.SUCCEEDED | Status.HIDDEN}`;\n\nexport interface ProcessIndicatorProps {\n status?: ProcessIndicatorStatus;\n size?: 'xxs' | `${Size.EXTRA_SMALL | Size.SMALL | Size.EXTRA_LARGE}`;\n className?: string;\n 'data-testid'?: string;\n onAnimationCompleted?: (status: ProcessIndicatorStatus) => void;\n}\n\ntype ProcessIndicatorState = Required<Pick<ProcessIndicatorProps, 'status' | 'size'>>;\n\nexport default class ProcessIndicator extends Component<\n ProcessIndicatorProps,\n ProcessIndicatorState\n> {\n declare props: ProcessIndicatorProps &\n Required<Pick<ProcessIndicatorProps, keyof typeof ProcessIndicator.defaultProps>>;\n\n static defaultProps = {\n status: 'processing',\n size: 'sm',\n } satisfies Partial<ProcessIndicatorProps>;\n\n interval = 0;\n timeout = 0;\n\n constructor(props: ProcessIndicator['props']) {\n super(props);\n this.state = {\n status: props.status,\n size: props.size,\n };\n }\n\n /**\n * Create interval for animation duration (1500ms)\n * Update state only at the end of every interval\n * (end of animation loop) if props changed before end of animation\n */\n componentDidMount() {\n this.interval = window.setInterval(() => {\n const { status: targetStatus, size: targetSize, onAnimationCompleted } = this.props;\n const { status: currentStatus, size: currentSize } = this.state;\n\n if (currentStatus !== targetStatus) {\n this.setState({ status: targetStatus }, () => {\n if (onAnimationCompleted) {\n this.timeout = window.setTimeout(() => {\n onAnimationCompleted(targetStatus);\n }, ANIMATION_DURATION_IN_MS);\n }\n });\n }\n\n if (currentSize !== targetSize) {\n this.setState({ size: targetSize });\n }\n }, ANIMATION_DURATION_IN_MS);\n }\n\n /**\n * Only trigger render if comopnent's state got\n * updated from interval callback\n */\n shouldComponentUpdate(nextProps: ProcessIndicator['props'], nextState: ProcessIndicatorState) {\n const isSameStatus = nextProps.status === nextState.status;\n const isSameSize = nextProps.size === nextState.size;\n\n return isSameStatus && isSameSize;\n }\n\n // Clear interval before destroying component\n componentWillUnmount() {\n window.clearInterval(this.interval);\n window.clearTimeout(this.timeout);\n }\n\n render() {\n const { className, 'data-testid': dataTestId } = this.props;\n const { size, status } = this.state;\n const classes = clsx(`process process-${size}`, className, {\n [`process-danger`]: status === Status.FAILED,\n [`process-stopped`]: status === Status.HIDDEN,\n [`process-success`]: status === Status.SUCCEEDED,\n });\n\n return (\n <span className={classes} data-testid={dataTestId}>\n <span className=\"process-icon-container\">\n <span className=\"process-icon-horizontal\" />\n <span className=\"process-icon-vertical\" />\n </span>\n <svg xmlns=\"http://www.w3.org/2000/svg\">\n <circle className=\"process-circle\" cx=\"50%\" cy=\"50%\" r={radius[size]} fillOpacity=\"0.0\" />\n </svg>\n </span>\n );\n }\n}\n"],"names":["radius","xxs","xs","sm","xl","ANIMATION_DURATION_IN_MS","ProcessIndicator","Component","defaultProps","status","size","interval","timeout","constructor","props","state","componentDidMount","window","setInterval","targetStatus","targetSize","onAnimationCompleted","currentStatus","currentSize","setState","setTimeout","shouldComponentUpdate","nextProps","nextState","isSameStatus","isSameSize","componentWillUnmount","clearInterval","clearTimeout","render","className","dataTestId","classes","clsx","Status","FAILED","HIDDEN","SUCCEEDED","_jsxs","children","_jsx","xmlns","cx","cy","r","fillOpacity"],"mappings":"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"}
|
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
3
5
|
var clsx = require('clsx');
|
|
4
6
|
var jsxRuntime = require('react/jsx-runtime');
|
|
5
7
|
|
|
@@ -16,5 +18,5 @@ const Progress = ({
|
|
|
16
18
|
});
|
|
17
19
|
};
|
|
18
20
|
|
|
19
|
-
|
|
21
|
+
exports.default = Progress;
|
|
20
22
|
//# sourceMappingURL=Progress.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Progress.js","sources":["../../src/progress/Progress.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nexport type ProgressProps = {\n className?: string;\n id: string;\n progress: { value: number; max: number };\n};\n\nconst Progress = ({ className, id, progress }: ProgressProps) => {\n return (\n <progress id={id} className={clsx('np-progress d-block', className)} {...progress}>\n {Math.floor((progress.value / progress.max) * 100)}%\n </progress>\n );\n};\n\nexport default Progress;\n"],"names":["Progress","className","id","progress","_jsxs","clsx","children","Math","floor","value","max"],"mappings":"
|
|
1
|
+
{"version":3,"file":"Progress.js","sources":["../../src/progress/Progress.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nexport type ProgressProps = {\n className?: string;\n id: string;\n progress: { value: number; max: number };\n};\n\nconst Progress = ({ className, id, progress }: ProgressProps) => {\n return (\n <progress id={id} className={clsx('np-progress d-block', className)} {...progress}>\n {Math.floor((progress.value / progress.max) * 100)}%\n </progress>\n );\n};\n\nexport default Progress;\n"],"names":["Progress","className","id","progress","_jsxs","clsx","children","Math","floor","value","max"],"mappings":";;;;;;;AAQMA,MAAAA,QAAQ,GAAGA,CAAC;EAAEC,SAAS;EAAEC,EAAE;AAAEC,EAAAA,QAAAA;AAAyB,CAAA,KAAI;AAC9D,EAAA,oBACEC,eAAA,CAAA,UAAA,EAAA;AAAUF,IAAAA,EAAE,EAAEA,EAAG;AAACD,IAAAA,SAAS,EAAEI,SAAI,CAAC,qBAAqB,EAAEJ,SAAS,CAAE;AAAA,IAAA,GAAKE,QAAQ;AAAAG,IAAAA,QAAA,GAC9EC,IAAI,CAACC,KAAK,CAAEL,QAAQ,CAACM,KAAK,GAAGN,QAAQ,CAACO,GAAG,GAAI,GAAG,CAAC,EAAC,GACrD,CAAA;AAAA,GAAU,CAAC,CAAA;AAEf;;;;"}
|
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
3
5
|
var componentsTheming = require('@wise/components-theming');
|
|
4
6
|
var clsx = require('clsx');
|
|
5
7
|
var Body = require('../body/Body.js');
|
|
@@ -46,17 +48,17 @@ const ProgressBar = ({
|
|
|
46
48
|
children: [/*#__PURE__*/jsxRuntime.jsxs("label", {
|
|
47
49
|
className: "np-progress-bar__title m-b-1",
|
|
48
50
|
htmlFor: id,
|
|
49
|
-
children: [/*#__PURE__*/jsxRuntime.jsx(Title, {
|
|
51
|
+
children: [/*#__PURE__*/jsxRuntime.jsx(Title.default, {
|
|
50
52
|
type: typography.Typography.TITLE_BODY,
|
|
51
53
|
className: isModern ? `m-b-1 text-primary` : `text-primary`,
|
|
52
54
|
children: title
|
|
53
|
-
}), description && /*#__PURE__*/jsxRuntime.jsx(Body, {
|
|
55
|
+
}), description && /*#__PURE__*/jsxRuntime.jsx(Body.default, {
|
|
54
56
|
children: description
|
|
55
57
|
})]
|
|
56
|
-
}), /*#__PURE__*/jsxRuntime.jsx(Progress, {
|
|
58
|
+
}), /*#__PURE__*/jsxRuntime.jsx(Progress.default, {
|
|
57
59
|
id: id,
|
|
58
60
|
progress: progress
|
|
59
|
-
}), /*#__PURE__*/jsxRuntime.jsx(Body, {
|
|
61
|
+
}), /*#__PURE__*/jsxRuntime.jsx(Body.default, {
|
|
60
62
|
as: "p",
|
|
61
63
|
type: typography.Typography.BODY_DEFAULT_BOLD,
|
|
62
64
|
className: "d-flex justify-content-end text-primary m-b-0",
|
|
@@ -65,5 +67,5 @@ const ProgressBar = ({
|
|
|
65
67
|
});
|
|
66
68
|
};
|
|
67
69
|
|
|
68
|
-
|
|
70
|
+
exports.default = ProgressBar;
|
|
69
71
|
//# sourceMappingURL=ProgressBar.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ProgressBar.js","sources":["../../src/progressBar/ProgressBar.tsx"],"sourcesContent":["import { useTheme } from '@wise/components-theming';\nimport { clsx } from 'clsx';\n\nimport Body from '../body';\nimport { Typography } from '../common';\nimport Progress from '../progress';\nimport Title from '../title/Title';\n\nexport type ProgressBarProps = {\n className?: string;\n description?: string;\n id: string;\n title: string;\n progress: { value: number; max: number };\n textEnd: string;\n};\n\nconst ProgressBar = ({\n className,\n description,\n id,\n title,\n progress,\n textEnd,\n}: ProgressBarProps) => {\n const { isModern } = useTheme();\n return (\n <div className={clsx('np-progress-bar', className)}>\n <label className=\"np-progress-bar__title m-b-1\" htmlFor={id}>\n <Title\n type={Typography.TITLE_BODY}\n className={isModern ? `m-b-1 text-primary` : `text-primary`}\n >\n {title}\n </Title>\n {description && <Body>{description}</Body>}\n </label>\n <Progress id={id} progress={progress} />\n <Body\n as=\"p\"\n type={Typography.BODY_DEFAULT_BOLD}\n className=\"d-flex justify-content-end text-primary m-b-0\"\n >\n {textEnd}\n </Body>\n </div>\n );\n};\n\nexport default ProgressBar;\n"],"names":["ProgressBar","className","description","id","title","progress","textEnd","isModern","useTheme","_jsxs","clsx","children","htmlFor","_jsx","Title","type","Typography","TITLE_BODY","Body","Progress","as","BODY_DEFAULT_BOLD"],"mappings":"
|
|
1
|
+
{"version":3,"file":"ProgressBar.js","sources":["../../src/progressBar/ProgressBar.tsx"],"sourcesContent":["import { useTheme } from '@wise/components-theming';\nimport { clsx } from 'clsx';\n\nimport Body from '../body';\nimport { Typography } from '../common';\nimport Progress from '../progress';\nimport Title from '../title/Title';\n\nexport type ProgressBarProps = {\n className?: string;\n description?: string;\n id: string;\n title: string;\n progress: { value: number; max: number };\n textEnd: string;\n};\n\nconst ProgressBar = ({\n className,\n description,\n id,\n title,\n progress,\n textEnd,\n}: ProgressBarProps) => {\n const { isModern } = useTheme();\n return (\n <div className={clsx('np-progress-bar', className)}>\n <label className=\"np-progress-bar__title m-b-1\" htmlFor={id}>\n <Title\n type={Typography.TITLE_BODY}\n className={isModern ? `m-b-1 text-primary` : `text-primary`}\n >\n {title}\n </Title>\n {description && <Body>{description}</Body>}\n </label>\n <Progress id={id} progress={progress} />\n <Body\n as=\"p\"\n type={Typography.BODY_DEFAULT_BOLD}\n className=\"d-flex justify-content-end text-primary m-b-0\"\n >\n {textEnd}\n </Body>\n </div>\n );\n};\n\nexport default ProgressBar;\n"],"names":["ProgressBar","className","description","id","title","progress","textEnd","isModern","useTheme","_jsxs","clsx","children","htmlFor","_jsx","Title","type","Typography","TITLE_BODY","Body","Progress","as","BODY_DEFAULT_BOLD"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiBMA,MAAAA,WAAW,GAAGA,CAAC;EACnBC,SAAS;EACTC,WAAW;EACXC,EAAE;EACFC,KAAK;EACLC,QAAQ;AACRC,EAAAA,OAAAA;AAAO,CACU,KAAI;EACrB,MAAM;AAAEC,IAAAA,QAAAA;GAAU,GAAGC,0BAAQ,EAAE,CAAA;AAC/B,EAAA,oBACEC,eAAA,CAAA,KAAA,EAAA;AAAKR,IAAAA,SAAS,EAAES,SAAI,CAAC,iBAAiB,EAAET,SAAS,CAAE;AAAAU,IAAAA,QAAA,gBACjDF,eAAA,CAAA,OAAA,EAAA;AAAOR,MAAAA,SAAS,EAAC,8BAA8B;AAACW,MAAAA,OAAO,EAAET,EAAG;MAAAQ,QAAA,EAAA,cAC1DE,cAAA,CAACC,aAAK,EAAA;QACJC,IAAI,EAAEC,qBAAU,CAACC,UAAW;AAC5BhB,QAAAA,SAAS,EAAEM,QAAQ,GAAG,CAAA,kBAAA,CAAoB,GAAG,CAAe,YAAA,CAAA;AAAAI,QAAAA,QAAA,EAE3DP,KAAAA;AAAK,OACD,CACP,EAACF,WAAW,iBAAIW,cAAA,CAACK,YAAI,EAAA;AAAAP,QAAAA,QAAA,EAAET,WAAAA;AAAW,OAAO,CAAC,CAAA;AAAA,KACrC,CACP,eAAAW,cAAA,CAACM,gBAAQ,EAAA;AAAChB,MAAAA,EAAE,EAAEA,EAAG;AAACE,MAAAA,QAAQ,EAAEA,QAAAA;AAAS,KACrC,CAAA,eAAAQ,cAAA,CAACK,YAAI,EAAA;AACHE,MAAAA,EAAE,EAAC,GAAG;MACNL,IAAI,EAAEC,qBAAU,CAACK,iBAAkB;AACnCpB,MAAAA,SAAS,EAAC,+CAA+C;AAAAU,MAAAA,QAAA,EAExDL,OAAAA;AAAO,KACJ,CACR,CAAA;AAAA,GAAK,CAAC,CAAA;AAEV;;;;"}
|
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
3
5
|
var icons = require('@transferwise/icons');
|
|
4
6
|
var clsx = require('clsx');
|
|
5
7
|
var React = require('react');
|
|
@@ -160,11 +162,11 @@ const PromoCard = /*#__PURE__*/React.forwardRef(({
|
|
|
160
162
|
as: headingLevel,
|
|
161
163
|
className: 'np-Card-title'
|
|
162
164
|
};
|
|
163
|
-
return useDisplayFont ? /*#__PURE__*/jsxRuntime.jsx(Display, {
|
|
165
|
+
return useDisplayFont ? /*#__PURE__*/jsxRuntime.jsx(Display.default, {
|
|
164
166
|
type: typography.Typography.DISPLAY_SMALL,
|
|
165
167
|
...titleProps,
|
|
166
168
|
children: titleContent
|
|
167
|
-
}) : /*#__PURE__*/jsxRuntime.jsx(Title, {
|
|
169
|
+
}) : /*#__PURE__*/jsxRuntime.jsx(Title.default, {
|
|
168
170
|
type: typography.Typography.TITLE_SUBSECTION,
|
|
169
171
|
...titleProps,
|
|
170
172
|
children: titleContent
|
|
@@ -173,7 +175,7 @@ const PromoCard = /*#__PURE__*/React.forwardRef(({
|
|
|
173
175
|
React.useEffect(() => {
|
|
174
176
|
setChecked(defaultChecked ?? isChecked ?? false);
|
|
175
177
|
}, [defaultChecked, isChecked]);
|
|
176
|
-
return /*#__PURE__*/jsxRuntime.jsxs(Card, {
|
|
178
|
+
return /*#__PURE__*/jsxRuntime.jsxs(Card.default, {
|
|
177
179
|
...commonProps,
|
|
178
180
|
...checkedProps,
|
|
179
181
|
...props,
|
|
@@ -183,7 +185,7 @@ const PromoCard = /*#__PURE__*/React.forwardRef(({
|
|
|
183
185
|
size: 24,
|
|
184
186
|
"aria-hidden": "true"
|
|
185
187
|
})
|
|
186
|
-
}), getTitle(), /*#__PURE__*/jsxRuntime.jsx(Body, {
|
|
188
|
+
}), getTitle(), /*#__PURE__*/jsxRuntime.jsx(Body.default, {
|
|
187
189
|
className: "np-Card-description",
|
|
188
190
|
children: description
|
|
189
191
|
}), imageSource && /*#__PURE__*/jsxRuntime.jsx("div", {
|
|
@@ -195,7 +197,7 @@ const PromoCard = /*#__PURE__*/React.forwardRef(({
|
|
|
195
197
|
alt: imageAlt || '',
|
|
196
198
|
loading: "lazy"
|
|
197
199
|
})
|
|
198
|
-
}), /*#__PURE__*/jsxRuntime.jsx(PromoCardIndicator, {
|
|
200
|
+
}), /*#__PURE__*/jsxRuntime.jsx(PromoCardIndicator.default, {
|
|
199
201
|
label: indicatorLabel,
|
|
200
202
|
icon: getIconType(),
|
|
201
203
|
isSmall: isSmall
|
|
@@ -204,5 +206,5 @@ const PromoCard = /*#__PURE__*/React.forwardRef(({
|
|
|
204
206
|
});
|
|
205
207
|
var PromoCard$1 = /*#__PURE__*/React__default.default.memo(PromoCard);
|
|
206
208
|
|
|
207
|
-
|
|
209
|
+
exports.default = PromoCard$1;
|
|
208
210
|
//# sourceMappingURL=PromoCard.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PromoCard.js","sources":["../../src/promoCard/PromoCard.tsx"],"sourcesContent":["import { Check } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport React, { forwardRef, FunctionComponent, useEffect, useId, useState } from 'react';\n\nimport Body from '../body';\nimport { Typography } from '../common';\nimport Card, { type CardProps } from '../common/card';\nimport Display from '../display';\nimport Image from '../image/Image';\nimport Title from '../title';\n\nimport { usePromoCardContext } from './PromoCardContext';\nimport PromoCardIndicator, { type PromoCardIndicatorProps } from './PromoCardIndicator';\n\nexport type ReferenceType = React.Ref<HTMLInputElement> | React.Ref<HTMLDivElement>;\nexport type RelatedTypes =\n | ''\n | 'alternate'\n | 'author'\n | 'bookmark'\n | 'external'\n | 'help'\n | 'license'\n | 'next'\n | 'nofollow'\n | 'noreferrer'\n | 'noopener'\n | 'prev'\n | 'search'\n | 'tag';\n\nexport interface PromoCardCommonProps {\n /** Optional prop to specify classNames onto the PromoCard */\n className?: string;\n\n /** Optional prop to specify the ID of the PromoCard */\n id?: string;\n\n /** Required prop to specify the descriptive text of the PromoCard */\n description: string;\n\n /**\n * Optional prop to specify the heading level of the PromoCard\n *\n * @default 'h3'\n */\n headingLevel?: 'h3' | 'h4' | 'h5' | 'h6';\n\n /** Optional prop to specify text for the indicator label of the PromoCard */\n indicatorLabel?: string;\n\n /** Optional prop to specify the icon for the indicator icon of the PromoCard */\n indicatorIcon?: PromoCardIndicatorProps['icon'];\n\n /** Optional prop to specify an image alt text */\n imageAlt?: string;\n\n /** Optional prop to specify an image class */\n imageClass?: string;\n\n /** Optional prop to specify an image source url */\n imageSource?: string;\n\n /** Specify whether the PromoCard is disabled, or not */\n isDisabled?: boolean;\n\n /** Specify an onClick event handler */\n onClick?: () => void;\n\n /** Specify an onKeyDown event handler */\n onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;\n\n /** Optional prop to specify the ID used for testing */\n testId?: string;\n\n /** Required prop to specify the title text of the PromoCard */\n title: string;\n\n /** Set to false to use body font style for the title */\n useDisplayFont?: boolean;\n\n ref?: ReferenceType;\n}\n\nexport interface PromoCardLinkProps extends PromoCardCommonProps, Omit<CardProps, 'children'> {\n /**\n * Optional prop to prompts a user to save the linked URL instead of\n * navigating to it\n */\n download?: string;\n\n /** Optionally specify an href for your PromoCard to contain an <a> element */\n href?: string;\n\n /** Optionally specify the language of the linked URL */\n hrefLang?: string;\n\n /** Optional property that can be pass a ref for the anchor. */\n anchorRef?: React.Ref<HTMLAnchorElement>;\n\n /**\n * Optional prop to specify the ID of the anchor element which can be useful when using a ref.\n */\n anchorId?: string;\n\n /**\n * Relationship between the PromoCard href URL and the current page. See\n * [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel).\n */\n rel?: RelatedTypes;\n\n /** Optional prop to to display where the linked URL will show */\n target?: React.HTMLAttributeAnchorTarget;\n\n /** Only applies to role=\"radio\" or \"checkbox\" */\n defaultChecked?: never;\n isChecked?: never;\n tabIndex?: never;\n type?: never;\n ref?: ReferenceType;\n value?: never;\n}\n\nexport interface PromoCardCheckedProps extends PromoCardCommonProps, Omit<CardProps, 'children'> {\n /** Specify the initial checked attribute of the PromoCard */\n defaultChecked?: boolean;\n\n /** Specify whether the PromoCard is checked, or not */\n isChecked?: boolean;\n\n /** Optional prop to specify the tabIndex of the PromoCard */\n tabIndex?: number;\n\n /** Optional property to provide component Ref */\n ref?: ReferenceType;\n\n /** Optional prop to specify the input type of the PromoCard */\n type?: 'checkbox' | 'radio';\n\n /** Specify the value attribute of the PromoCard if Checkbox or Radio */\n value?: string;\n\n /** Only applies to <a />s */\n download?: never;\n href?: never;\n anchorRef?: never;\n anchorId?: never;\n hrefLang?: never;\n rel?: never;\n target?: never;\n}\n\nexport type PromoCardProps = PromoCardLinkProps | PromoCardCheckedProps;\n\nexport type PolymorphicPromoCard = (\n props: PromoCardLinkProps | PromoCardCheckedProps,\n) => React.JSX.Element;\n\n/**\n * PromoCard component.\n *\n * PromoCard is a marketing style component that is used to group marketing\n * product related information (such as choosing Card types). It can be used to\n * display information in a structured way, and can be customized with various\n * props to suit different use cases.\n *\n * @component\n * @param {string} className - Additional class name for the PromoCard.\n * @param {string} description - Description text for the PromoCard.\n * @param {boolean} defaultChecked - Initial checked state for checkboxes and radios.\n * @param {string} download - Download file name for links.\n * @param {string} href - URL for links.\n * @param {string} hrefLang - Language code for linked URL.\n * @param {string} id - ID of the PromoCard.\n * @param {string} imageAlt - Alt text for the image.\n * @param {string} imageSource - Source URL of the image.\n * @param {string} indicatorLabel - Label for the indicator icon.\n * @param {boolean} isChecked - Checked state for checkboxes and radios.\n * @param {boolean} isDisabled - Whether the PromoCard is disabled.\n * @param {Function} onClick - Click event handler for the PromoCard.\n * @param {string} rel - Relationship between the URL and the current page.\n * @param {number} tabIndex - Tab index for keyboard navigation.\n * @param {string} target - Target window for links.\n * @param {string} testId - ID used for testing.\n * @param {string} title - Title text of the PromoCard.\n * @param {('checkbox'|'radio')} type - Type of the PromoCard (checkbox, radio).\n * @param {string} value - Value for checkboxes and radios.\n * @returns {React.JSX.Element} The rendered PromoCard component.\n * @example\n * <PromoCard\n * title=\"Example PromoCard\"\n * description=\"This is an example PromoCard with a link variation.\"\n * href=\"https://example.com\"\n * target=\"_blank\"\n * imageSource=\"https://example.com/image.png\"\n * imageAlt=\"Example Image\"\n * indicatorLabel=\"Learn More\"\n * />\n */\nconst PromoCard: FunctionComponent<PromoCardProps> = forwardRef(\n (\n {\n className,\n description,\n defaultChecked,\n download,\n href,\n hrefLang,\n id,\n headingLevel = 'h3',\n imageAlt,\n imageClass,\n imageSource,\n indicatorLabel,\n indicatorIcon,\n isChecked,\n isDisabled,\n onClick,\n onKeyDown,\n rel,\n tabIndex,\n target,\n testId,\n title,\n type,\n value,\n isSmall,\n useDisplayFont = true,\n anchorRef,\n anchorId,\n ...props\n },\n ref: ReferenceType,\n ) => {\n // Set the `checked` state to the value of `defaultChecked` if it is truthy,\n // or the value of `isChecked` if it is truthy, or `false` if neither\n // is truthy.\n const { state, onChange, isDisabled: contextIsDisabled } = usePromoCardContext();\n const [checked, setChecked] = useState(\n type === 'checkbox' ? (defaultChecked ?? isChecked ?? false) : false,\n );\n\n const handleClick = () => {\n if (type === 'radio') {\n onChange(value || ''); // Update the context state for radio\n } else if (type === 'checkbox') {\n setChecked(!checked); // Update local state for checkbox\n }\n };\n\n const fallbackId = useId();\n const componentId = id || fallbackId;\n\n // Set the icon to `'arrow'` if `href` is truthy and `type` is falsy, or\n // `'download'` if `download` is truthy. If neither condition is true, set\n // `icon` to `undefined`.\n\n // Create a function to get icon type\n const getIconType = () => {\n if (indicatorIcon) {\n return indicatorIcon;\n }\n\n if (download) {\n return 'download';\n }\n\n if (href && !type) {\n return 'arrow';\n }\n\n return undefined;\n };\n\n const CardTitle = useDisplayFont ? Display : Title;\n\n // Define all class names string based on the values of the `href`, `type`,\n // `checked`, and `className` props.\n const commonClasses = clsx(\n {\n 'np-Card--promoCard': true,\n 'np-Card--checked': !href && type,\n 'np-Card--link': href && !type,\n 'is-checked':\n type === 'radio' ? value === state : type === 'checkbox' ? checked : undefined,\n },\n className,\n );\n\n // Object with common props that will be passed to the `Card` components\n const commonProps = {\n className: commonClasses,\n id: componentId,\n isDisabled: isDisabled || contextIsDisabled,\n onClick,\n onKeyDown,\n ref,\n 'data-testid': testId,\n isSmall,\n };\n\n // Object with Anchor props that will be passed to the `a` element. These\n // won't be refurned if set to `isDisabled`\n const anchorProps =\n href && !isDisabled\n ? {\n download,\n href: href || undefined,\n hrefLang,\n rel,\n target,\n ref: anchorRef,\n id: anchorId,\n }\n : {};\n\n // Object of all Checked props that will be passed to the root `Card` component\n const checkedProps =\n (type === 'checkbox' || type === 'radio') && !href\n ? {\n ...commonProps,\n 'aria-checked':\n type === 'radio' ? value === state : type === 'checkbox' ? checked : undefined,\n 'aria-describedby': `${componentId}-title`,\n 'aria-disabled': isDisabled,\n 'data-value': value ?? undefined,\n role: type === 'checkbox' || type === 'radio' ? type : undefined,\n onClick: handleClick,\n onKeyDown: (event: React.KeyboardEvent<HTMLInputElement>) => {\n if (event.key === 'Enter' || event.key === ' ') {\n handleClick();\n }\n },\n ref,\n tabIndex: 0,\n }\n : {};\n\n const getTitle = () => {\n const titleContent =\n href && !type ? (\n <a className=\"np-Card-titleLink\" {...anchorProps}>\n {title}\n </a>\n ) : (\n title\n );\n\n const titleProps = {\n id: `${componentId}-title`,\n as: headingLevel,\n className: 'np-Card-title',\n };\n\n return useDisplayFont ? (\n <Display type={Typography.DISPLAY_SMALL} {...titleProps}>\n {titleContent}\n </Display>\n ) : (\n <Title type={Typography.TITLE_SUBSECTION} {...titleProps}>\n {titleContent}\n </Title>\n );\n };\n\n useEffect(() => {\n setChecked(defaultChecked ?? isChecked ?? false);\n }, [defaultChecked, isChecked]);\n\n return (\n <Card {...commonProps} {...checkedProps} {...props}>\n {(value === state || checked) && (\n <span className=\"np-Card-check\">\n <Check size={24} aria-hidden=\"true\" />\n </span>\n )}\n\n {getTitle()}\n\n <Body className=\"np-Card-description\">{description}</Body>\n\n {imageSource && (\n <div className={clsx('np-Card-image', { imageClass })}>\n <Image src={imageSource} alt={imageAlt || ''} loading=\"lazy\" />\n </div>\n )}\n\n <PromoCardIndicator label={indicatorLabel} icon={getIconType()} isSmall={isSmall} />\n </Card>\n );\n },\n) as PolymorphicPromoCard;\n\nexport default React.memo(PromoCard);\n"],"names":["PromoCard","forwardRef","className","description","defaultChecked","download","href","hrefLang","id","headingLevel","imageAlt","imageClass","imageSource","indicatorLabel","indicatorIcon","isChecked","isDisabled","onClick","onKeyDown","rel","tabIndex","target","testId","title","type","value","isSmall","useDisplayFont","anchorRef","anchorId","props","ref","state","onChange","contextIsDisabled","usePromoCardContext","checked","setChecked","useState","handleClick","fallbackId","useId","componentId","getIconType","undefined","commonClasses","clsx","commonProps","anchorProps","checkedProps","role","event","key","getTitle","titleContent","_jsx","children","titleProps","as","Display","Typography","DISPLAY_SMALL","Title","TITLE_SUBSECTION","useEffect","_jsxs","Card","Check","size","Body","Image","src","alt","loading","PromoCardIndicator","label","icon","React","memo"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"PromoCard.js","sources":["../../src/promoCard/PromoCard.tsx"],"sourcesContent":["import { Check } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport React, { forwardRef, FunctionComponent, useEffect, useId, useState } from 'react';\n\nimport Body from '../body';\nimport { Typography } from '../common';\nimport Card, { type CardProps } from '../common/card';\nimport Display from '../display';\nimport Image from '../image/Image';\nimport Title from '../title';\n\nimport { usePromoCardContext } from './PromoCardContext';\nimport PromoCardIndicator, { type PromoCardIndicatorProps } from './PromoCardIndicator';\n\nexport type ReferenceType = React.Ref<HTMLInputElement> | React.Ref<HTMLDivElement>;\nexport type RelatedTypes =\n | ''\n | 'alternate'\n | 'author'\n | 'bookmark'\n | 'external'\n | 'help'\n | 'license'\n | 'next'\n | 'nofollow'\n | 'noreferrer'\n | 'noopener'\n | 'prev'\n | 'search'\n | 'tag';\n\nexport interface PromoCardCommonProps {\n /** Optional prop to specify classNames onto the PromoCard */\n className?: string;\n\n /** Optional prop to specify the ID of the PromoCard */\n id?: string;\n\n /** Required prop to specify the descriptive text of the PromoCard */\n description: string;\n\n /**\n * Optional prop to specify the heading level of the PromoCard\n *\n * @default 'h3'\n */\n headingLevel?: 'h3' | 'h4' | 'h5' | 'h6';\n\n /** Optional prop to specify text for the indicator label of the PromoCard */\n indicatorLabel?: string;\n\n /** Optional prop to specify the icon for the indicator icon of the PromoCard */\n indicatorIcon?: PromoCardIndicatorProps['icon'];\n\n /** Optional prop to specify an image alt text */\n imageAlt?: string;\n\n /** Optional prop to specify an image class */\n imageClass?: string;\n\n /** Optional prop to specify an image source url */\n imageSource?: string;\n\n /** Specify whether the PromoCard is disabled, or not */\n isDisabled?: boolean;\n\n /** Specify an onClick event handler */\n onClick?: () => void;\n\n /** Specify an onKeyDown event handler */\n onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;\n\n /** Optional prop to specify the ID used for testing */\n testId?: string;\n\n /** Required prop to specify the title text of the PromoCard */\n title: string;\n\n /** Set to false to use body font style for the title */\n useDisplayFont?: boolean;\n\n ref?: ReferenceType;\n}\n\nexport interface PromoCardLinkProps extends PromoCardCommonProps, Omit<CardProps, 'children'> {\n /**\n * Optional prop to prompts a user to save the linked URL instead of\n * navigating to it\n */\n download?: string;\n\n /** Optionally specify an href for your PromoCard to contain an <a> element */\n href?: string;\n\n /** Optionally specify the language of the linked URL */\n hrefLang?: string;\n\n /** Optional property that can be pass a ref for the anchor. */\n anchorRef?: React.Ref<HTMLAnchorElement>;\n\n /**\n * Optional prop to specify the ID of the anchor element which can be useful when using a ref.\n */\n anchorId?: string;\n\n /**\n * Relationship between the PromoCard href URL and the current page. See\n * [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel).\n */\n rel?: RelatedTypes;\n\n /** Optional prop to to display where the linked URL will show */\n target?: React.HTMLAttributeAnchorTarget;\n\n /** Only applies to role=\"radio\" or \"checkbox\" */\n defaultChecked?: never;\n isChecked?: never;\n tabIndex?: never;\n type?: never;\n ref?: ReferenceType;\n value?: never;\n}\n\nexport interface PromoCardCheckedProps extends PromoCardCommonProps, Omit<CardProps, 'children'> {\n /** Specify the initial checked attribute of the PromoCard */\n defaultChecked?: boolean;\n\n /** Specify whether the PromoCard is checked, or not */\n isChecked?: boolean;\n\n /** Optional prop to specify the tabIndex of the PromoCard */\n tabIndex?: number;\n\n /** Optional property to provide component Ref */\n ref?: ReferenceType;\n\n /** Optional prop to specify the input type of the PromoCard */\n type?: 'checkbox' | 'radio';\n\n /** Specify the value attribute of the PromoCard if Checkbox or Radio */\n value?: string;\n\n /** Only applies to <a />s */\n download?: never;\n href?: never;\n anchorRef?: never;\n anchorId?: never;\n hrefLang?: never;\n rel?: never;\n target?: never;\n}\n\nexport type PromoCardProps = PromoCardLinkProps | PromoCardCheckedProps;\n\nexport type PolymorphicPromoCard = (\n props: PromoCardLinkProps | PromoCardCheckedProps,\n) => React.JSX.Element;\n\n/**\n * PromoCard component.\n *\n * PromoCard is a marketing style component that is used to group marketing\n * product related information (such as choosing Card types). It can be used to\n * display information in a structured way, and can be customized with various\n * props to suit different use cases.\n *\n * @component\n * @param {string} className - Additional class name for the PromoCard.\n * @param {string} description - Description text for the PromoCard.\n * @param {boolean} defaultChecked - Initial checked state for checkboxes and radios.\n * @param {string} download - Download file name for links.\n * @param {string} href - URL for links.\n * @param {string} hrefLang - Language code for linked URL.\n * @param {string} id - ID of the PromoCard.\n * @param {string} imageAlt - Alt text for the image.\n * @param {string} imageSource - Source URL of the image.\n * @param {string} indicatorLabel - Label for the indicator icon.\n * @param {boolean} isChecked - Checked state for checkboxes and radios.\n * @param {boolean} isDisabled - Whether the PromoCard is disabled.\n * @param {Function} onClick - Click event handler for the PromoCard.\n * @param {string} rel - Relationship between the URL and the current page.\n * @param {number} tabIndex - Tab index for keyboard navigation.\n * @param {string} target - Target window for links.\n * @param {string} testId - ID used for testing.\n * @param {string} title - Title text of the PromoCard.\n * @param {('checkbox'|'radio')} type - Type of the PromoCard (checkbox, radio).\n * @param {string} value - Value for checkboxes and radios.\n * @returns {React.JSX.Element} The rendered PromoCard component.\n * @example\n * <PromoCard\n * title=\"Example PromoCard\"\n * description=\"This is an example PromoCard with a link variation.\"\n * href=\"https://example.com\"\n * target=\"_blank\"\n * imageSource=\"https://example.com/image.png\"\n * imageAlt=\"Example Image\"\n * indicatorLabel=\"Learn More\"\n * />\n */\nconst PromoCard: FunctionComponent<PromoCardProps> = forwardRef(\n (\n {\n className,\n description,\n defaultChecked,\n download,\n href,\n hrefLang,\n id,\n headingLevel = 'h3',\n imageAlt,\n imageClass,\n imageSource,\n indicatorLabel,\n indicatorIcon,\n isChecked,\n isDisabled,\n onClick,\n onKeyDown,\n rel,\n tabIndex,\n target,\n testId,\n title,\n type,\n value,\n isSmall,\n useDisplayFont = true,\n anchorRef,\n anchorId,\n ...props\n },\n ref: ReferenceType,\n ) => {\n // Set the `checked` state to the value of `defaultChecked` if it is truthy,\n // or the value of `isChecked` if it is truthy, or `false` if neither\n // is truthy.\n const { state, onChange, isDisabled: contextIsDisabled } = usePromoCardContext();\n const [checked, setChecked] = useState(\n type === 'checkbox' ? (defaultChecked ?? isChecked ?? false) : false,\n );\n\n const handleClick = () => {\n if (type === 'radio') {\n onChange(value || ''); // Update the context state for radio\n } else if (type === 'checkbox') {\n setChecked(!checked); // Update local state for checkbox\n }\n };\n\n const fallbackId = useId();\n const componentId = id || fallbackId;\n\n // Set the icon to `'arrow'` if `href` is truthy and `type` is falsy, or\n // `'download'` if `download` is truthy. If neither condition is true, set\n // `icon` to `undefined`.\n\n // Create a function to get icon type\n const getIconType = () => {\n if (indicatorIcon) {\n return indicatorIcon;\n }\n\n if (download) {\n return 'download';\n }\n\n if (href && !type) {\n return 'arrow';\n }\n\n return undefined;\n };\n\n const CardTitle = useDisplayFont ? Display : Title;\n\n // Define all class names string based on the values of the `href`, `type`,\n // `checked`, and `className` props.\n const commonClasses = clsx(\n {\n 'np-Card--promoCard': true,\n 'np-Card--checked': !href && type,\n 'np-Card--link': href && !type,\n 'is-checked':\n type === 'radio' ? value === state : type === 'checkbox' ? checked : undefined,\n },\n className,\n );\n\n // Object with common props that will be passed to the `Card` components\n const commonProps = {\n className: commonClasses,\n id: componentId,\n isDisabled: isDisabled || contextIsDisabled,\n onClick,\n onKeyDown,\n ref,\n 'data-testid': testId,\n isSmall,\n };\n\n // Object with Anchor props that will be passed to the `a` element. These\n // won't be refurned if set to `isDisabled`\n const anchorProps =\n href && !isDisabled\n ? {\n download,\n href: href || undefined,\n hrefLang,\n rel,\n target,\n ref: anchorRef,\n id: anchorId,\n }\n : {};\n\n // Object of all Checked props that will be passed to the root `Card` component\n const checkedProps =\n (type === 'checkbox' || type === 'radio') && !href\n ? {\n ...commonProps,\n 'aria-checked':\n type === 'radio' ? value === state : type === 'checkbox' ? checked : undefined,\n 'aria-describedby': `${componentId}-title`,\n 'aria-disabled': isDisabled,\n 'data-value': value ?? undefined,\n role: type === 'checkbox' || type === 'radio' ? type : undefined,\n onClick: handleClick,\n onKeyDown: (event: React.KeyboardEvent<HTMLInputElement>) => {\n if (event.key === 'Enter' || event.key === ' ') {\n handleClick();\n }\n },\n ref,\n tabIndex: 0,\n }\n : {};\n\n const getTitle = () => {\n const titleContent =\n href && !type ? (\n <a className=\"np-Card-titleLink\" {...anchorProps}>\n {title}\n </a>\n ) : (\n title\n );\n\n const titleProps = {\n id: `${componentId}-title`,\n as: headingLevel,\n className: 'np-Card-title',\n };\n\n return useDisplayFont ? (\n <Display type={Typography.DISPLAY_SMALL} {...titleProps}>\n {titleContent}\n </Display>\n ) : (\n <Title type={Typography.TITLE_SUBSECTION} {...titleProps}>\n {titleContent}\n </Title>\n );\n };\n\n useEffect(() => {\n setChecked(defaultChecked ?? isChecked ?? false);\n }, [defaultChecked, isChecked]);\n\n return (\n <Card {...commonProps} {...checkedProps} {...props}>\n {(value === state || checked) && (\n <span className=\"np-Card-check\">\n <Check size={24} aria-hidden=\"true\" />\n </span>\n )}\n\n {getTitle()}\n\n <Body className=\"np-Card-description\">{description}</Body>\n\n {imageSource && (\n <div className={clsx('np-Card-image', { imageClass })}>\n <Image src={imageSource} alt={imageAlt || ''} loading=\"lazy\" />\n </div>\n )}\n\n <PromoCardIndicator label={indicatorLabel} icon={getIconType()} isSmall={isSmall} />\n </Card>\n );\n },\n) as PolymorphicPromoCard;\n\nexport default React.memo(PromoCard);\n"],"names":["PromoCard","forwardRef","className","description","defaultChecked","download","href","hrefLang","id","headingLevel","imageAlt","imageClass","imageSource","indicatorLabel","indicatorIcon","isChecked","isDisabled","onClick","onKeyDown","rel","tabIndex","target","testId","title","type","value","isSmall","useDisplayFont","anchorRef","anchorId","props","ref","state","onChange","contextIsDisabled","usePromoCardContext","checked","setChecked","useState","handleClick","fallbackId","useId","componentId","getIconType","undefined","commonClasses","clsx","commonProps","anchorProps","checkedProps","role","event","key","getTitle","titleContent","_jsx","children","titleProps","as","Display","Typography","DISPLAY_SMALL","Title","TITLE_SUBSECTION","useEffect","_jsxs","Card","Check","size","Body","Image","src","alt","loading","PromoCardIndicator","label","icon","React","memo"],"mappings":"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"}
|
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
3
5
|
var clsx = require('clsx');
|
|
4
6
|
var React = require('react');
|
|
5
7
|
var PromoCardContext = require('./PromoCardContext.js');
|
|
@@ -74,5 +76,5 @@ const PromoCardGroup = ({
|
|
|
74
76
|
};
|
|
75
77
|
var PromoCardGroup$1 = /*#__PURE__*/React__default.default.memo(PromoCardGroup);
|
|
76
78
|
|
|
77
|
-
|
|
79
|
+
exports.default = PromoCardGroup$1;
|
|
78
80
|
//# sourceMappingURL=PromoCardGroup.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PromoCardGroup.js","sources":["../../src/promoCard/PromoCardGroup.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport React, { FunctionComponent, ReactNode, useState, useEffect, useMemo } from 'react';\n\nimport { PromoCardProps } from './PromoCard';\nimport PromoCardContext from './PromoCardContext';\n\nexport type AriaRoleRadioGroup = 'radiogroup';\n\nexport interface PromoCardGroupProps {\n /**\n * Optional class name(s) to add to the group container.\n */\n className?: string;\n /**\n * The PromoCard components to display inside the group.\n */\n children: ReactNode;\n /**\n * The default checked for the group.\n */\n defaultChecked?: string;\n /**\n * Optional ID to add to the group container.\n */\n id?: string;\n /**\n * Whether the group is disabled or not.\n */\n isDisabled?: boolean;\n /**\n * Optional label to display above the group.\n */\n label?: string;\n /**\n * Optional function to call when the group value changes.\n */\n onChange?: (value: string) => void;\n /**\n * Optional ID to add to the group container for testing purposes.\n */\n testId?: string;\n}\n\n/**\n * PromoCardGroup component.\n *\n * A PromoCardGroup is a container for PromoCard components that allows the user to select one or more\n * cards from a group. It can be used to display a set of related options, and can be customized with\n * various props to suit different use cases.\n *\n * @param {ReactNode} children - The PromoCard components to display inside the group.\n * @param {string} className - Optional class name(s) to add to the group container.\n * @param {string} defaultChecked - The default value for the group.\n * @param {string} id - Optional ID to add to the group container.\n * @param {boolean} isDisabled=false - Whether the group is disabled or not.\n * @param {string} label - Optional label to display above the group.\n * @param {Function} onChange - Optional function to call when the group value changes.\n * @param {string} testId - Optional ID to add to the group container for testing purposes.\n * @returns {React.JSX.Element} - The PromoCardGroup component.\n */\nconst PromoCardGroup: FunctionComponent<PromoCardGroupProps> = ({\n children,\n className,\n defaultChecked = '',\n id,\n isDisabled = false,\n onChange = () => {},\n testId,\n}) => {\n const [state, setState] = useState<string>(defaultChecked);\n const [containerRole, setContainerRole] = useState<string | null>(null);\n\n /**\n * The context value for the PromoCardGroup.\n *\n * The context value is an object that contains the current state of the\n * group, whether the group is disabled or not, and a function to call when\n * the group value changes. This value is used to provide context to child\n * PromoCard components, allowing them to interact with the group and update\n * its state.\n */\n const contextValue = useMemo(() => {\n const handleOnChange = (value: string) => {\n setState(value);\n onChange(value);\n };\n\n return { state, isDisabled, onChange: handleOnChange };\n }, [state, isDisabled, onChange]);\n\n const commonClasses = clsx(\n {\n 'np-CardGroup': true,\n 'is-disabled': isDisabled,\n },\n className,\n );\n\n const commonProps = {\n className: commonClasses,\n id,\n 'data-testid': testId,\n role: containerRole as AriaRoleRadioGroup | undefined, // Add the role attribute here\n };\n\n useEffect(() => {\n setState(defaultChecked);\n\n // Collect an array of types from the children PromoCard components\n const types =\n React.Children.map(children, (child) => {\n if (React.isValidElement<PromoCardProps>(child) && child.props.type) {\n return child.props.type;\n }\n return null;\n })?.filter((type): type is 'radio' | 'checkbox' => type !== null && type !== undefined) ?? [];\n\n // Check if all types are the same\n const allTypesAreTheSame = types.every((type) => type === types[0]);\n\n // If all types are the same and the type is 'radio', set the container role\n setContainerRole(allTypesAreTheSame && types[0] === 'radio' ? 'radiogroup' : null);\n }, [defaultChecked, children]);\n\n return (\n <PromoCardContext.Provider value={contextValue}>\n <div {...commonProps}>{children}</div>\n </PromoCardContext.Provider>\n );\n};\n\nexport default React.memo(PromoCardGroup);\n"],"names":["PromoCardGroup","children","className","defaultChecked","id","isDisabled","onChange","testId","state","setState","useState","containerRole","setContainerRole","contextValue","useMemo","handleOnChange","value","commonClasses","clsx","commonProps","role","useEffect","types","React","Children","map","child","isValidElement","props","type","filter","undefined","allTypesAreTheSame","every","_jsx","PromoCardContext","Provider","memo"],"mappings":"
|
|
1
|
+
{"version":3,"file":"PromoCardGroup.js","sources":["../../src/promoCard/PromoCardGroup.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport React, { FunctionComponent, ReactNode, useState, useEffect, useMemo } from 'react';\n\nimport { PromoCardProps } from './PromoCard';\nimport PromoCardContext from './PromoCardContext';\n\nexport type AriaRoleRadioGroup = 'radiogroup';\n\nexport interface PromoCardGroupProps {\n /**\n * Optional class name(s) to add to the group container.\n */\n className?: string;\n /**\n * The PromoCard components to display inside the group.\n */\n children: ReactNode;\n /**\n * The default checked for the group.\n */\n defaultChecked?: string;\n /**\n * Optional ID to add to the group container.\n */\n id?: string;\n /**\n * Whether the group is disabled or not.\n */\n isDisabled?: boolean;\n /**\n * Optional label to display above the group.\n */\n label?: string;\n /**\n * Optional function to call when the group value changes.\n */\n onChange?: (value: string) => void;\n /**\n * Optional ID to add to the group container for testing purposes.\n */\n testId?: string;\n}\n\n/**\n * PromoCardGroup component.\n *\n * A PromoCardGroup is a container for PromoCard components that allows the user to select one or more\n * cards from a group. It can be used to display a set of related options, and can be customized with\n * various props to suit different use cases.\n *\n * @param {ReactNode} children - The PromoCard components to display inside the group.\n * @param {string} className - Optional class name(s) to add to the group container.\n * @param {string} defaultChecked - The default value for the group.\n * @param {string} id - Optional ID to add to the group container.\n * @param {boolean} isDisabled=false - Whether the group is disabled or not.\n * @param {string} label - Optional label to display above the group.\n * @param {Function} onChange - Optional function to call when the group value changes.\n * @param {string} testId - Optional ID to add to the group container for testing purposes.\n * @returns {React.JSX.Element} - The PromoCardGroup component.\n */\nconst PromoCardGroup: FunctionComponent<PromoCardGroupProps> = ({\n children,\n className,\n defaultChecked = '',\n id,\n isDisabled = false,\n onChange = () => {},\n testId,\n}) => {\n const [state, setState] = useState<string>(defaultChecked);\n const [containerRole, setContainerRole] = useState<string | null>(null);\n\n /**\n * The context value for the PromoCardGroup.\n *\n * The context value is an object that contains the current state of the\n * group, whether the group is disabled or not, and a function to call when\n * the group value changes. This value is used to provide context to child\n * PromoCard components, allowing them to interact with the group and update\n * its state.\n */\n const contextValue = useMemo(() => {\n const handleOnChange = (value: string) => {\n setState(value);\n onChange(value);\n };\n\n return { state, isDisabled, onChange: handleOnChange };\n }, [state, isDisabled, onChange]);\n\n const commonClasses = clsx(\n {\n 'np-CardGroup': true,\n 'is-disabled': isDisabled,\n },\n className,\n );\n\n const commonProps = {\n className: commonClasses,\n id,\n 'data-testid': testId,\n role: containerRole as AriaRoleRadioGroup | undefined, // Add the role attribute here\n };\n\n useEffect(() => {\n setState(defaultChecked);\n\n // Collect an array of types from the children PromoCard components\n const types =\n React.Children.map(children, (child) => {\n if (React.isValidElement<PromoCardProps>(child) && child.props.type) {\n return child.props.type;\n }\n return null;\n })?.filter((type): type is 'radio' | 'checkbox' => type !== null && type !== undefined) ?? [];\n\n // Check if all types are the same\n const allTypesAreTheSame = types.every((type) => type === types[0]);\n\n // If all types are the same and the type is 'radio', set the container role\n setContainerRole(allTypesAreTheSame && types[0] === 'radio' ? 'radiogroup' : null);\n }, [defaultChecked, children]);\n\n return (\n <PromoCardContext.Provider value={contextValue}>\n <div {...commonProps}>{children}</div>\n </PromoCardContext.Provider>\n );\n};\n\nexport default React.memo(PromoCardGroup);\n"],"names":["PromoCardGroup","children","className","defaultChecked","id","isDisabled","onChange","testId","state","setState","useState","containerRole","setContainerRole","contextValue","useMemo","handleOnChange","value","commonClasses","clsx","commonProps","role","useEffect","types","React","Children","map","child","isValidElement","props","type","filter","undefined","allTypesAreTheSame","every","_jsx","PromoCardContext","Provider","memo"],"mappings":";;;;;;;;;;;;;AA4DA,MAAMA,cAAc,GAA2CA,CAAC;EAC9DC,QAAQ;EACRC,SAAS;AACTC,EAAAA,cAAc,GAAG,EAAE;EACnBC,EAAE;AACFC,EAAAA,UAAU,GAAG,KAAK;AAClBC,EAAAA,QAAQ,GAAGA,MAAO,EAAC;AACnBC,EAAAA,MAAAA;AACD,CAAA,KAAI;EACH,MAAM,CAACC,KAAK,EAAEC,QAAQ,CAAC,GAAGC,cAAQ,CAASP,cAAc,CAAC,CAAA;EAC1D,MAAM,CAACQ,aAAa,EAAEC,gBAAgB,CAAC,GAAGF,cAAQ,CAAgB,IAAI,CAAC,CAAA;AAEvE;;;;;;;;AAQG;AACH,EAAA,MAAMG,YAAY,GAAGC,aAAO,CAAC,MAAK;IAChC,MAAMC,cAAc,GAAIC,KAAa,IAAI;MACvCP,QAAQ,CAACO,KAAK,CAAC,CAAA;MACfV,QAAQ,CAACU,KAAK,CAAC,CAAA;KAChB,CAAA;IAED,OAAO;MAAER,KAAK;MAAEH,UAAU;AAAEC,MAAAA,QAAQ,EAAES,cAAAA;KAAgB,CAAA;GACvD,EAAE,CAACP,KAAK,EAAEH,UAAU,EAAEC,QAAQ,CAAC,CAAC,CAAA;EAEjC,MAAMW,aAAa,GAAGC,SAAI,CACxB;AACE,IAAA,cAAc,EAAE,IAAI;AACpB,IAAA,aAAa,EAAEb,UAAAA;GAChB,EACDH,SAAS,CACV,CAAA;AAED,EAAA,MAAMiB,WAAW,GAAG;AAClBjB,IAAAA,SAAS,EAAEe,aAAa;IACxBb,EAAE;AACF,IAAA,aAAa,EAAEG,MAAM;IACrBa,IAAI,EAAET,aAA+C;GACtD,CAAA;AAEDU,EAAAA,eAAS,CAAC,MAAK;IACbZ,QAAQ,CAACN,cAAc,CAAC,CAAA;AAExB;IACA,MAAMmB,KAAK,GACTC,sBAAK,CAACC,QAAQ,CAACC,GAAG,CAACxB,QAAQ,EAAGyB,KAAK,IAAI;AACrC,MAAA,kBAAIH,sBAAK,CAACI,cAAc,CAAiBD,KAAK,CAAC,IAAIA,KAAK,CAACE,KAAK,CAACC,IAAI,EAAE;AACnE,QAAA,OAAOH,KAAK,CAACE,KAAK,CAACC,IAAI,CAAA;AACzB,OAAA;AACA,MAAA,OAAO,IAAI,CAAA;AACb,KAAC,CAAC,EAAEC,MAAM,CAAED,IAAI,IAAmCA,IAAI,KAAK,IAAI,IAAIA,IAAI,KAAKE,SAAS,CAAC,IAAI,EAAE,CAAA;AAE/F;AACA,IAAA,MAAMC,kBAAkB,GAAGV,KAAK,CAACW,KAAK,CAAEJ,IAAI,IAAKA,IAAI,KAAKP,KAAK,CAAC,CAAC,CAAC,CAAC,CAAA;AAEnE;AACAV,IAAAA,gBAAgB,CAACoB,kBAAkB,IAAIV,KAAK,CAAC,CAAC,CAAC,KAAK,OAAO,GAAG,YAAY,GAAG,IAAI,CAAC,CAAA;AACpF,GAAC,EAAE,CAACnB,cAAc,EAAEF,QAAQ,CAAC,CAAC,CAAA;AAE9B,EAAA,oBACEiC,cAAA,CAACC,iCAAgB,CAACC,QAAQ,EAAA;AAACpB,IAAAA,KAAK,EAAEH,YAAa;AAAAZ,IAAAA,QAAA,eAC7CiC,cAAA,CAAA,KAAA,EAAA;AAAA,MAAA,GAASf,WAAW;AAAAlB,MAAAA,QAAA,EAAGA,QAAAA;KAAc,CAAA;AACvC,GAA2B,CAAC,CAAA;AAEhC,CAAC,CAAA;AAED,uBAAA,aAAesB,sBAAK,CAACc,IAAI,CAACrC,cAAc,CAAC;;;;"}
|
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
3
5
|
var icons = require('@transferwise/icons');
|
|
4
6
|
var clsx = require('clsx');
|
|
5
7
|
var avatarTypes = require('../avatar/avatarTypes.js');
|
|
@@ -48,12 +50,12 @@ const PromoCardIndicator = ({
|
|
|
48
50
|
className: clsx.clsx('np-Card-indicator', className),
|
|
49
51
|
"data-testid": testid,
|
|
50
52
|
...rest,
|
|
51
|
-
children: [label && /*#__PURE__*/jsxRuntime.jsx(Body, {
|
|
53
|
+
children: [label && /*#__PURE__*/jsxRuntime.jsx(Body.default, {
|
|
52
54
|
as: "span",
|
|
53
55
|
type: typography.Typography.BODY_LARGE_BOLD,
|
|
54
56
|
className: "np-Card-indicatorText",
|
|
55
57
|
children: label
|
|
56
|
-
}), icon && /*#__PURE__*/jsxRuntime.jsx(Avatar, {
|
|
58
|
+
}), icon && /*#__PURE__*/jsxRuntime.jsx(Avatar.default, {
|
|
57
59
|
type: avatarTypes.AvatarType.ICON,
|
|
58
60
|
size: isSmall ? 40 : 56,
|
|
59
61
|
backgroundColor: "var(--Card-indicator-icon-background-color)",
|
|
@@ -66,5 +68,5 @@ const PromoCardIndicator = ({
|
|
|
66
68
|
});
|
|
67
69
|
};
|
|
68
70
|
|
|
69
|
-
|
|
71
|
+
exports.default = PromoCardIndicator;
|
|
70
72
|
//# sourceMappingURL=PromoCardIndicator.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PromoCardIndicator.js","sources":["../../src/promoCard/PromoCardIndicator.tsx"],"sourcesContent":["import { ArrowRight, Check, Download } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { ReactElement, ReactNode } from 'react';\n\nimport Avatar, { AvatarType } from '../avatar';\nimport Body from '../body';\nimport { Typography } from '../common';\n\nexport type PromoCardIndicatorProps = {\n /** Optional class name(s) to add to the indicator container. */\n className?: string;\n\n /** Optional label to display next to the indicator. */\n label?: string;\n\n /** Optional icon to display in the indicator. */\n icon?: 'check' | 'arrow' | 'download' | ReactElement;\n\n /** Optional prop to specify whether the indicator is sized small or not. */\n isSmall?: boolean;\n\n /** Optional ID to add to the indicator container for testing purposes. */\n testid?: string;\n\n /** Optional children to display inside the indicator. */\n children?: ReactNode;\n};\n\n/**\n * PromoCardIndicator component.\n *\n * A PromoCardIndicator is a small component that can be used to display\n * additional information or actions related to a PromoCard. It can be\n * customized with various props to suit different use cases.\n *\n * @param {string} className - Optional class name(s) to add to the indicator container.\n * @param {string} label - Optional label to display next to the indicator.\n * @param {string | ReactElement} icon - Optional icon to display in the indicator.\n * @param {string} testid - Optional ID to add to the indicator container for testing purposes.\n * @param {ReactNode} children - Optional children to display inside the indicator.\n * @returns {React.JSX.Element} - The PromoCardIndicator component.\n * @example\n * <PromoCardIndicator label=\"Download\" icon=\"download\" />\n */\nconst PromoCardIndicator: React.FC<PromoCardIndicatorProps> = ({\n className,\n children,\n label,\n icon,\n isSmall = false,\n testid,\n ...rest\n}) => {\n const isIconString = icon && typeof icon === 'string';\n\n const IconComponent =\n isIconString &&\n {\n check: Check,\n arrow: ArrowRight,\n download: Download,\n }[icon];\n\n return (\n <div className={clsx('np-Card-indicator', className)} data-testid={testid} {...rest}>\n {label && (\n <Body as=\"span\" type={Typography.BODY_LARGE_BOLD} className=\"np-Card-indicatorText\">\n {label}\n </Body>\n )}\n {icon && (\n <Avatar\n type={AvatarType.ICON}\n size={isSmall ? 40 : 56}\n backgroundColor=\"var(--Card-indicator-icon-background-color)\"\n className=\"np-Card-indicatorIcon\"\n >\n {IconComponent ? <IconComponent size={24} aria-hidden=\"true\" /> : icon}\n </Avatar>\n )}\n {children}\n </div>\n );\n};\n\nexport default PromoCardIndicator;\n"],"names":["PromoCardIndicator","className","children","label","icon","isSmall","testid","rest","isIconString","IconComponent","check","Check","arrow","ArrowRight","download","Download","_jsxs","clsx","_jsx","Body","as","type","Typography","BODY_LARGE_BOLD","Avatar","AvatarType","ICON","size","backgroundColor"],"mappings":"
|
|
1
|
+
{"version":3,"file":"PromoCardIndicator.js","sources":["../../src/promoCard/PromoCardIndicator.tsx"],"sourcesContent":["import { ArrowRight, Check, Download } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { ReactElement, ReactNode } from 'react';\n\nimport Avatar, { AvatarType } from '../avatar';\nimport Body from '../body';\nimport { Typography } from '../common';\n\nexport type PromoCardIndicatorProps = {\n /** Optional class name(s) to add to the indicator container. */\n className?: string;\n\n /** Optional label to display next to the indicator. */\n label?: string;\n\n /** Optional icon to display in the indicator. */\n icon?: 'check' | 'arrow' | 'download' | ReactElement;\n\n /** Optional prop to specify whether the indicator is sized small or not. */\n isSmall?: boolean;\n\n /** Optional ID to add to the indicator container for testing purposes. */\n testid?: string;\n\n /** Optional children to display inside the indicator. */\n children?: ReactNode;\n};\n\n/**\n * PromoCardIndicator component.\n *\n * A PromoCardIndicator is a small component that can be used to display\n * additional information or actions related to a PromoCard. It can be\n * customized with various props to suit different use cases.\n *\n * @param {string} className - Optional class name(s) to add to the indicator container.\n * @param {string} label - Optional label to display next to the indicator.\n * @param {string | ReactElement} icon - Optional icon to display in the indicator.\n * @param {string} testid - Optional ID to add to the indicator container for testing purposes.\n * @param {ReactNode} children - Optional children to display inside the indicator.\n * @returns {React.JSX.Element} - The PromoCardIndicator component.\n * @example\n * <PromoCardIndicator label=\"Download\" icon=\"download\" />\n */\nconst PromoCardIndicator: React.FC<PromoCardIndicatorProps> = ({\n className,\n children,\n label,\n icon,\n isSmall = false,\n testid,\n ...rest\n}) => {\n const isIconString = icon && typeof icon === 'string';\n\n const IconComponent =\n isIconString &&\n {\n check: Check,\n arrow: ArrowRight,\n download: Download,\n }[icon];\n\n return (\n <div className={clsx('np-Card-indicator', className)} data-testid={testid} {...rest}>\n {label && (\n <Body as=\"span\" type={Typography.BODY_LARGE_BOLD} className=\"np-Card-indicatorText\">\n {label}\n </Body>\n )}\n {icon && (\n <Avatar\n type={AvatarType.ICON}\n size={isSmall ? 40 : 56}\n backgroundColor=\"var(--Card-indicator-icon-background-color)\"\n className=\"np-Card-indicatorIcon\"\n >\n {IconComponent ? <IconComponent size={24} aria-hidden=\"true\" /> : icon}\n </Avatar>\n )}\n {children}\n </div>\n );\n};\n\nexport default PromoCardIndicator;\n"],"names":["PromoCardIndicator","className","children","label","icon","isSmall","testid","rest","isIconString","IconComponent","check","Check","arrow","ArrowRight","download","Download","_jsxs","clsx","_jsx","Body","as","type","Typography","BODY_LARGE_BOLD","Avatar","AvatarType","ICON","size","backgroundColor"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4CMA,MAAAA,kBAAkB,GAAsCA,CAAC;EAC7DC,SAAS;EACTC,QAAQ;EACRC,KAAK;EACLC,IAAI;AACJC,EAAAA,OAAO,GAAG,KAAK;EACfC,MAAM;EACN,GAAGC,IAAAA;AACJ,CAAA,KAAI;AACH,EAAA,MAAMC,YAAY,GAAGJ,IAAI,IAAI,OAAOA,IAAI,KAAK,QAAQ,CAAA;EAErD,MAAMK,aAAa,GACjBD,YAAY,IACZ;AACEE,IAAAA,KAAK,EAAEC,WAAK;AACZC,IAAAA,KAAK,EAAEC,gBAAU;AACjBC,IAAAA,QAAQ,EAAEC,cAAAA;GACX,CAACX,IAAI,CAAC,CAAA;AAET,EAAA,oBACEY,eAAA,CAAA,KAAA,EAAA;AAAKf,IAAAA,SAAS,EAAEgB,SAAI,CAAC,mBAAmB,EAAEhB,SAAS,CAAE;AAAC,IAAA,aAAA,EAAaK,MAAO;AAAA,IAAA,GAAKC,IAAI;AAAAL,IAAAA,QAAA,EAChFC,CAAAA,KAAK,iBACJe,cAAA,CAACC,YAAI,EAAA;AAACC,MAAAA,EAAE,EAAC,MAAM;MAACC,IAAI,EAAEC,qBAAU,CAACC,eAAgB;AAACtB,MAAAA,SAAS,EAAC,uBAAuB;AAAAC,MAAAA,QAAA,EAChFC,KAAAA;AAAK,KACF,CACP,EACAC,IAAI,iBACHc,cAAA,CAACM,cAAM,EAAA;MACLH,IAAI,EAAEI,sBAAU,CAACC,IAAK;AACtBC,MAAAA,IAAI,EAAEtB,OAAO,GAAG,EAAE,GAAG,EAAG;AACxBuB,MAAAA,eAAe,EAAC,6CAA6C;AAC7D3B,MAAAA,SAAS,EAAC,uBAAuB;AAAAC,MAAAA,QAAA,EAEhCO,aAAa,gBAAGS,cAAA,CAACT,aAAa,EAAA;AAACkB,QAAAA,IAAI,EAAE,EAAG;QAAC,aAAY,EAAA,MAAA;AAAM,QAAG,GAAGvB,IAAAA;KAC5D,CACT,EACAF,QAAQ,CAAA;AAAA,GACN,CAAC,CAAA;AAEV;;;;"}
|
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
3
5
|
var reactIntl = require('react-intl');
|
|
4
6
|
require('../common/theme.js');
|
|
5
7
|
require('../common/direction.js');
|
|
@@ -47,7 +49,7 @@ function Provider({
|
|
|
47
49
|
intlConfig = {
|
|
48
50
|
locale: index.DEFAULT_LOCALE,
|
|
49
51
|
messages: {
|
|
50
|
-
...en,
|
|
52
|
+
...en.default,
|
|
51
53
|
...messages
|
|
52
54
|
}
|
|
53
55
|
};
|
|
@@ -72,5 +74,5 @@ function Provider({
|
|
|
72
74
|
});
|
|
73
75
|
}
|
|
74
76
|
|
|
75
|
-
|
|
77
|
+
exports.default = Provider;
|
|
76
78
|
//# sourceMappingURL=Provider.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Provider.js","sources":["../../src/provider/Provider.tsx"],"sourcesContent":["import { IntlProvider, ResolvedIntlConfig } from 'react-intl';\n\nimport { adjustLocale, DEFAULT_LOCALE, getDirectionFromLocale } from '../common';\nimport en from '../i18n/en.json';\n\nimport { DirectionProvider } from './direction';\nimport { LanguageProvider } from './language';\n\nexport interface ProviderProps {\n i18n: Pick<ResolvedIntlConfig, 'locale' | 'messages'> &\n Partial<Pick<ResolvedIntlConfig, 'defaultRichTextElements'>>;\n children?: React.ReactNode;\n}\n\nexport default function Provider({ i18n, children }: ProviderProps) {\n const { locale, messages, defaultRichTextElements } = i18n;\n const adjustedLocale = adjustLocale(locale);\n let intlConfig;\n\n if (adjustedLocale === null) {\n // eslint-disable-next-line no-console\n console.warn(\n `Unsupported locale value was provided: '${locale}', defaulting to '${DEFAULT_LOCALE}'`,\n );\n\n intlConfig = { locale: DEFAULT_LOCALE, messages: { ...en, ...messages } };\n } else {\n intlConfig = { locale: adjustedLocale, messages };\n }\n\n return (\n <DirectionProvider direction={getDirectionFromLocale(locale)}>\n <LanguageProvider locale={locale}>\n <IntlProvider\n defaultLocale={DEFAULT_LOCALE}\n locale={intlConfig.locale}\n messages={intlConfig.messages}\n defaultRichTextElements={defaultRichTextElements}\n >\n {children}\n </IntlProvider>\n </LanguageProvider>\n </DirectionProvider>\n );\n}\n"],"names":["Provider","i18n","children","locale","messages","defaultRichTextElements","adjustedLocale","adjustLocale","intlConfig","console","warn","DEFAULT_LOCALE","en","_jsx","DirectionProvider","direction","getDirectionFromLocale","LanguageProvider","IntlProvider","defaultLocale"],"mappings":"
|
|
1
|
+
{"version":3,"file":"Provider.js","sources":["../../src/provider/Provider.tsx"],"sourcesContent":["import { IntlProvider, ResolvedIntlConfig } from 'react-intl';\n\nimport { adjustLocale, DEFAULT_LOCALE, getDirectionFromLocale } from '../common';\nimport en from '../i18n/en.json';\n\nimport { DirectionProvider } from './direction';\nimport { LanguageProvider } from './language';\n\nexport interface ProviderProps {\n i18n: Pick<ResolvedIntlConfig, 'locale' | 'messages'> &\n Partial<Pick<ResolvedIntlConfig, 'defaultRichTextElements'>>;\n children?: React.ReactNode;\n}\n\nexport default function Provider({ i18n, children }: ProviderProps) {\n const { locale, messages, defaultRichTextElements } = i18n;\n const adjustedLocale = adjustLocale(locale);\n let intlConfig;\n\n if (adjustedLocale === null) {\n // eslint-disable-next-line no-console\n console.warn(\n `Unsupported locale value was provided: '${locale}', defaulting to '${DEFAULT_LOCALE}'`,\n );\n\n intlConfig = { locale: DEFAULT_LOCALE, messages: { ...en, ...messages } };\n } else {\n intlConfig = { locale: adjustedLocale, messages };\n }\n\n return (\n <DirectionProvider direction={getDirectionFromLocale(locale)}>\n <LanguageProvider locale={locale}>\n <IntlProvider\n defaultLocale={DEFAULT_LOCALE}\n locale={intlConfig.locale}\n messages={intlConfig.messages}\n defaultRichTextElements={defaultRichTextElements}\n >\n {children}\n </IntlProvider>\n </LanguageProvider>\n </DirectionProvider>\n );\n}\n"],"names":["Provider","i18n","children","locale","messages","defaultRichTextElements","adjustedLocale","adjustLocale","intlConfig","console","warn","DEFAULT_LOCALE","en","_jsx","DirectionProvider","direction","getDirectionFromLocale","LanguageProvider","IntlProvider","defaultLocale"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAcwB,SAAAA,QAAQA,CAAC;EAAEC,IAAI;AAAEC,EAAAA,QAAAA;AAAyB,CAAA,EAAA;EAChE,MAAM;IAAEC,MAAM;IAAEC,QAAQ;AAAEC,IAAAA,uBAAAA;AAAuB,GAAE,GAAGJ,IAAI,CAAA;AAC1D,EAAA,MAAMK,cAAc,GAAGC,kBAAY,CAACJ,MAAM,CAAC,CAAA;AAC3C,EAAA,IAAIK,UAAU,CAAA;EAEd,IAAIF,cAAc,KAAK,IAAI,EAAE;AAC3B;IACAG,OAAO,CAACC,IAAI,CACV,CAAA,wCAAA,EAA2CP,MAAM,CAAqBQ,kBAAAA,EAAAA,oBAAc,GAAG,CACxF,CAAA;AAEDH,IAAAA,UAAU,GAAG;AAAEL,MAAAA,MAAM,EAAEQ,oBAAc;AAAEP,MAAAA,QAAQ,EAAE;AAAE,QAAA,GAAGQ,UAAE;QAAE,GAAGR,QAAAA;AAAQ,OAAA;KAAI,CAAA;AAC3E,GAAC,MAAM;AACLI,IAAAA,UAAU,GAAG;AAAEL,MAAAA,MAAM,EAAEG,cAAc;AAAEF,MAAAA,QAAAA;KAAU,CAAA;AACnD,GAAA;EAEA,oBACES,cAAA,CAACC,mCAAiB,EAAA;AAACC,IAAAA,SAAS,EAAEC,4BAAsB,CAACb,MAAM,CAAE;IAAAD,QAAA,eAC3DW,cAAA,CAACI,iCAAgB,EAAA;AAACd,MAAAA,MAAM,EAAEA,MAAO;MAAAD,QAAA,eAC/BW,cAAA,CAACK,sBAAY,EAAA;AACXC,QAAAA,aAAa,EAAER,oBAAe;QAC9BR,MAAM,EAAEK,UAAU,CAACL,MAAO;QAC1BC,QAAQ,EAAEI,UAAU,CAACJ,QAAS;AAC9BC,QAAAA,uBAAuB,EAAEA,uBAAwB;AAAAH,QAAAA,QAAA,EAEhDA,QAAAA;OACW,CAAA;KACE,CAAA;AACpB,GAAmB,CAAC,CAAA;AAExB;;;;"}
|
package/build/radio/Radio.js
CHANGED
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
3
5
|
var clsx = require('clsx');
|
|
4
6
|
var Body = require('../body/Body.js');
|
|
5
7
|
require('../common/theme.js');
|
|
@@ -49,16 +51,16 @@ function Radio({
|
|
|
49
51
|
htmlFor: id,
|
|
50
52
|
children: [/*#__PURE__*/jsxRuntime.jsx("span", {
|
|
51
53
|
className: "m-r-2 np-radio-button",
|
|
52
|
-
children: /*#__PURE__*/jsxRuntime.jsx(RadioButton, {
|
|
54
|
+
children: /*#__PURE__*/jsxRuntime.jsx(RadioButton.default, {
|
|
53
55
|
id: id,
|
|
54
56
|
disabled: disabled,
|
|
55
57
|
...otherProps
|
|
56
58
|
})
|
|
57
|
-
}), /*#__PURE__*/jsxRuntime.jsxs(Body, {
|
|
59
|
+
}), /*#__PURE__*/jsxRuntime.jsxs(Body.default, {
|
|
58
60
|
as: "span",
|
|
59
61
|
type: secondary ? typography.Typography.BODY_LARGE_BOLD : typography.Typography.BODY_LARGE,
|
|
60
62
|
className: "np-radio__text",
|
|
61
|
-
children: [label, secondary && /*#__PURE__*/jsxRuntime.jsx(Body, {
|
|
63
|
+
children: [label, secondary && /*#__PURE__*/jsxRuntime.jsx(Body.default, {
|
|
62
64
|
as: "span",
|
|
63
65
|
children: secondary
|
|
64
66
|
})]
|
|
@@ -70,5 +72,5 @@ function Radio({
|
|
|
70
72
|
});
|
|
71
73
|
}
|
|
72
74
|
|
|
73
|
-
|
|
75
|
+
exports.default = Radio;
|
|
74
76
|
//# sourceMappingURL=Radio.js.map
|
package/build/radio/Radio.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Radio.js","sources":["../../src/radio/Radio.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport Body from '../body/Body';\nimport { Typography } from '../common';\nimport RadioButton from '../common/RadioButton';\nimport { RadioButtonProps } from '../common/RadioButton/RadioButton';\n\nexport interface RadioProps<T extends string | number = string> extends RadioButtonProps<T> {\n avatar?: React.ReactNode;\n label: string;\n secondary?: string;\n className?: string;\n}\n\nexport default function Radio<T extends string | number = ''>({\n label,\n id,\n disabled,\n className,\n avatar,\n secondary,\n ...otherProps\n}: RadioProps<T>) {\n return (\n <div\n className={clsx(\n 'radio np-radio',\n {\n 'radio-lg': secondary,\n 'radio-disabled': disabled,\n },\n className,\n )}\n >\n <label className={clsx({ disabled })} htmlFor={id}>\n <span className=\"m-r-2 np-radio-button\">\n <RadioButton id={id} disabled={disabled} {...otherProps} />\n </span>\n <Body\n as=\"span\"\n type={secondary ? Typography.BODY_LARGE_BOLD : Typography.BODY_LARGE}\n className=\"np-radio__text\"\n >\n {label}\n {secondary && <Body as=\"span\">{secondary}</Body>}\n </Body>\n {avatar && <span className=\"np-radio__avatar m-l-auto\">{avatar}</span>}\n </label>\n </div>\n );\n}\n"],"names":["Radio","label","id","disabled","className","avatar","secondary","otherProps","_jsx","clsx","children","_jsxs","htmlFor","RadioButton","Body","as","type","Typography","BODY_LARGE_BOLD","BODY_LARGE"],"mappings":"
|
|
1
|
+
{"version":3,"file":"Radio.js","sources":["../../src/radio/Radio.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport Body from '../body/Body';\nimport { Typography } from '../common';\nimport RadioButton from '../common/RadioButton';\nimport { RadioButtonProps } from '../common/RadioButton/RadioButton';\n\nexport interface RadioProps<T extends string | number = string> extends RadioButtonProps<T> {\n avatar?: React.ReactNode;\n label: string;\n secondary?: string;\n className?: string;\n}\n\nexport default function Radio<T extends string | number = ''>({\n label,\n id,\n disabled,\n className,\n avatar,\n secondary,\n ...otherProps\n}: RadioProps<T>) {\n return (\n <div\n className={clsx(\n 'radio np-radio',\n {\n 'radio-lg': secondary,\n 'radio-disabled': disabled,\n },\n className,\n )}\n >\n <label className={clsx({ disabled })} htmlFor={id}>\n <span className=\"m-r-2 np-radio-button\">\n <RadioButton id={id} disabled={disabled} {...otherProps} />\n </span>\n <Body\n as=\"span\"\n type={secondary ? Typography.BODY_LARGE_BOLD : Typography.BODY_LARGE}\n className=\"np-radio__text\"\n >\n {label}\n {secondary && <Body as=\"span\">{secondary}</Body>}\n </Body>\n {avatar && <span className=\"np-radio__avatar m-l-auto\">{avatar}</span>}\n </label>\n </div>\n );\n}\n"],"names":["Radio","label","id","disabled","className","avatar","secondary","otherProps","_jsx","clsx","children","_jsxs","htmlFor","RadioButton","Body","as","type","Typography","BODY_LARGE_BOLD","BODY_LARGE"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAcwB,SAAAA,KAAKA,CAAiC;EAC5DC,KAAK;EACLC,EAAE;EACFC,QAAQ;EACRC,SAAS;EACTC,MAAM;EACNC,SAAS;EACT,GAAGC,UAAAA;AACW,CAAA,EAAA;AACd,EAAA,oBACEC,cAAA,CAAA,KAAA,EAAA;AACEJ,IAAAA,SAAS,EAAEK,SAAI,CACb,gBAAgB,EAChB;AACE,MAAA,UAAU,EAAEH,SAAS;AACrB,MAAA,gBAAgB,EAAEH,QAAAA;KACnB,EACDC,SAAS,CACT;AAAAM,IAAAA,QAAA,eAEFC,eAAA,CAAA,OAAA,EAAA;MAAOP,SAAS,EAAEK,SAAI,CAAC;AAAEN,QAAAA,QAAAA;AAAU,OAAA,CAAE;AAACS,MAAAA,OAAO,EAAEV,EAAG;AAAAQ,MAAAA,QAAA,gBAChDF,cAAA,CAAA,MAAA,EAAA;AAAMJ,QAAAA,SAAS,EAAC,uBAAuB;QAAAM,QAAA,eACrCF,cAAA,CAACK,mBAAW,EAAA;AAACX,UAAAA,EAAE,EAAEA,EAAG;AAACC,UAAAA,QAAQ,EAAEA,QAAS;UAAA,GAAKI,UAAAA;SAC/C,CAAA;AAAA,OAAM,CACN,eAAAI,eAAA,CAACG,YAAI,EAAA;AACHC,QAAAA,EAAE,EAAC,MAAM;QACTC,IAAI,EAAEV,SAAS,GAAGW,qBAAU,CAACC,eAAe,GAAGD,qBAAU,CAACE,UAAW;AACrEf,QAAAA,SAAS,EAAC,gBAAgB;AAAAM,QAAAA,QAAA,GAEzBT,KAAK,EACLK,SAAS,iBAAIE,cAAA,CAACM,YAAI,EAAA;AAACC,UAAAA,EAAE,EAAC,MAAM;AAAAL,UAAAA,QAAA,EAAEJ,SAAAA;AAAS,SAAO,CAAC,CAAA;AAAA,OAC5C,CACN,EAACD,MAAM,iBAAIG,cAAA,CAAA,MAAA,EAAA;AAAMJ,QAAAA,SAAS,EAAC,2BAA2B;AAAAM,QAAAA,QAAA,EAAEL,MAAAA;AAAM,OAAO,CAAC,CAAA;KACjE,CAAA;AACT,GAAK,CAAC,CAAA;AAEV;;;;"}
|
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
3
5
|
var React = require('react');
|
|
4
6
|
var Radio = require('../radio/Radio.js');
|
|
5
7
|
var contexts = require('../inputs/contexts.js');
|
|
@@ -23,7 +25,7 @@ function RadioGroup({
|
|
|
23
25
|
children: radios.map(({
|
|
24
26
|
value = '',
|
|
25
27
|
...restProps
|
|
26
|
-
}, index) => /*#__PURE__*/jsxRuntime.jsx(Radio
|
|
28
|
+
}, index) => /*#__PURE__*/jsxRuntime.jsx(Radio.default
|
|
27
29
|
// eslint-disable-next-line react/no-array-index-key
|
|
28
30
|
, {
|
|
29
31
|
...restProps,
|
|
@@ -38,5 +40,5 @@ function RadioGroup({
|
|
|
38
40
|
}) : null;
|
|
39
41
|
}
|
|
40
42
|
|
|
41
|
-
|
|
43
|
+
exports.default = RadioGroup;
|
|
42
44
|
//# sourceMappingURL=RadioGroup.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RadioGroup.js","sources":["../../src/radioGroup/RadioGroup.tsx"],"sourcesContent":["import { useState } from 'react';\n\nimport Radio from '../radio';\nimport { RadioProps } from '../radio/Radio';\nimport { useInputAttributes, WithInputAttributesProps } from '../inputs/contexts';\n\nexport type RadioGroupRadio<T extends string | number = string> = Omit<\n RadioProps<T>,\n 'name' | 'checked' | 'onChange' | 'className'\n>;\n\nexport interface RadioGroupProps<T extends string | number = string> {\n name: string;\n radios: readonly RadioGroupRadio<T>[];\n selectedValue?: T; // TODO: `NoInfer<T>` from TypeScript 5.4\n onChange: NonNullable<RadioProps<T>['onChange']>;\n UNSAFE_inputAttributes?: WithInputAttributesProps['inputAttributes'];\n}\n\nexport default function RadioGroup<T extends string | number = never>({\n name,\n radios,\n selectedValue: controlledValue,\n onChange,\n UNSAFE_inputAttributes,\n}: RadioGroupProps<T>) {\n const inputAttributes = useInputAttributes({ nonLabelable: true });\n\n const [uncontrolledValue, setUncontrolledValue] = useState(controlledValue);\n\n return radios.length > 0 ? (\n <div role=\"radiogroup\" {...inputAttributes} {...UNSAFE_inputAttributes}>\n {radios.map(({ value = '' as T, ...restProps }, index) => (\n <Radio\n // eslint-disable-next-line react/no-array-index-key\n key={index}\n {...restProps}\n name={name}\n value={value}\n checked={value === uncontrolledValue}\n onChange={(nextValue) => {\n setUncontrolledValue(nextValue);\n onChange(nextValue);\n }}\n />\n ))}\n </div>\n ) : null;\n}\n"],"names":["RadioGroup","name","radios","selectedValue","controlledValue","onChange","UNSAFE_inputAttributes","inputAttributes","useInputAttributes","nonLabelable","uncontrolledValue","setUncontrolledValue","useState","length","_jsx","role","children","map","value","restProps","index","Radio","checked","nextValue"],"mappings":"
|
|
1
|
+
{"version":3,"file":"RadioGroup.js","sources":["../../src/radioGroup/RadioGroup.tsx"],"sourcesContent":["import { useState } from 'react';\n\nimport Radio from '../radio';\nimport { RadioProps } from '../radio/Radio';\nimport { useInputAttributes, WithInputAttributesProps } from '../inputs/contexts';\n\nexport type RadioGroupRadio<T extends string | number = string> = Omit<\n RadioProps<T>,\n 'name' | 'checked' | 'onChange' | 'className'\n>;\n\nexport interface RadioGroupProps<T extends string | number = string> {\n name: string;\n radios: readonly RadioGroupRadio<T>[];\n selectedValue?: T; // TODO: `NoInfer<T>` from TypeScript 5.4\n onChange: NonNullable<RadioProps<T>['onChange']>;\n UNSAFE_inputAttributes?: WithInputAttributesProps['inputAttributes'];\n}\n\nexport default function RadioGroup<T extends string | number = never>({\n name,\n radios,\n selectedValue: controlledValue,\n onChange,\n UNSAFE_inputAttributes,\n}: RadioGroupProps<T>) {\n const inputAttributes = useInputAttributes({ nonLabelable: true });\n\n const [uncontrolledValue, setUncontrolledValue] = useState(controlledValue);\n\n return radios.length > 0 ? (\n <div role=\"radiogroup\" {...inputAttributes} {...UNSAFE_inputAttributes}>\n {radios.map(({ value = '' as T, ...restProps }, index) => (\n <Radio\n // eslint-disable-next-line react/no-array-index-key\n key={index}\n {...restProps}\n name={name}\n value={value}\n checked={value === uncontrolledValue}\n onChange={(nextValue) => {\n setUncontrolledValue(nextValue);\n onChange(nextValue);\n }}\n />\n ))}\n </div>\n ) : null;\n}\n"],"names":["RadioGroup","name","radios","selectedValue","controlledValue","onChange","UNSAFE_inputAttributes","inputAttributes","useInputAttributes","nonLabelable","uncontrolledValue","setUncontrolledValue","useState","length","_jsx","role","children","map","value","restProps","index","Radio","checked","nextValue"],"mappings":";;;;;;;;;AAmBc,SAAUA,UAAUA,CAAoC;EACpEC,IAAI;EACJC,MAAM;AACNC,EAAAA,aAAa,EAAEC,eAAe;EAC9BC,QAAQ;AACRC,EAAAA,sBAAAA;AACmB,CAAA,EAAA;EACnB,MAAMC,eAAe,GAAGC,2BAAkB,CAAC;AAAEC,IAAAA,YAAY,EAAE,IAAA;AAAM,GAAA,CAAC,CAAA;EAElE,MAAM,CAACC,iBAAiB,EAAEC,oBAAoB,CAAC,GAAGC,cAAQ,CAACR,eAAe,CAAC,CAAA;AAE3E,EAAA,OAAOF,MAAM,CAACW,MAAM,GAAG,CAAC,gBACtBC,cAAA,CAAA,KAAA,EAAA;AAAKC,IAAAA,IAAI,EAAC,YAAY;AAAA,IAAA,GAAKR,eAAe;AAAA,IAAA,GAAMD,sBAAsB;AAAAU,IAAAA,QAAA,EACnEd,MAAM,CAACe,GAAG,CAAC,CAAC;AAAEC,MAAAA,KAAK,GAAG,EAAO;MAAE,GAAGC,SAAAA;AAAS,KAAE,EAAEC,KAAK,kBACnDN,cAAA,CAACO,aAAAA;AACC;AAAA,MAAA;AAAA,MAAA,GAEIF,SAAS;AACblB,MAAAA,IAAI,EAAEA,IAAK;AACXiB,MAAAA,KAAK,EAAEA,KAAM;MACbI,OAAO,EAAEJ,KAAK,KAAKR,iBAAkB;MACrCL,QAAQ,EAAGkB,SAAS,IAAI;QACtBZ,oBAAoB,CAACY,SAAS,CAAC,CAAA;QAC/BlB,QAAQ,CAACkB,SAAS,CAAC,CAAA;AACrB,OAAA;AAAE,KAAA,EARGH,KAQH,CAEL,CAAA;GACE,CAAC,GACJ,IAAI,CAAA;AACV;;;;"}
|
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
3
5
|
var Option = require('../common/Option/Option.js');
|
|
4
6
|
var RadioButton = require('../common/RadioButton/RadioButton.js');
|
|
5
7
|
var jsxRuntime = require('react/jsx-runtime');
|
|
@@ -20,7 +22,7 @@ function RadioOption({
|
|
|
20
22
|
showMediaAtAllSizes,
|
|
21
23
|
isContainerAligned
|
|
22
24
|
}) {
|
|
23
|
-
return /*#__PURE__*/jsxRuntime.jsx(Option, {
|
|
25
|
+
return /*#__PURE__*/jsxRuntime.jsx(Option.default, {
|
|
24
26
|
"aria-label": ariaLabel,
|
|
25
27
|
media: media,
|
|
26
28
|
title: title,
|
|
@@ -31,7 +33,7 @@ function RadioOption({
|
|
|
31
33
|
showMediaCircle: showMediaCircle,
|
|
32
34
|
showMediaAtAllSizes: showMediaAtAllSizes,
|
|
33
35
|
isContainerAligned: isContainerAligned,
|
|
34
|
-
button: /*#__PURE__*/jsxRuntime.jsx(RadioButton, {
|
|
36
|
+
button: /*#__PURE__*/jsxRuntime.jsx(RadioButton.default, {
|
|
35
37
|
id: id,
|
|
36
38
|
name: name,
|
|
37
39
|
checked: checked,
|
|
@@ -42,5 +44,5 @@ function RadioOption({
|
|
|
42
44
|
});
|
|
43
45
|
}
|
|
44
46
|
|
|
45
|
-
|
|
47
|
+
exports.default = RadioOption;
|
|
46
48
|
//# sourceMappingURL=RadioOption.js.map
|