@transferwise/components 46.134.0 → 46.135.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/accordion/AccordionItem/AccordionItem.js +1 -0
- package/build/accordion/AccordionItem/AccordionItem.js.map +1 -1
- package/build/accordion/AccordionItem/AccordionItem.mjs +1 -0
- package/build/accordion/AccordionItem/AccordionItem.mjs.map +1 -1
- package/build/actionButton/ActionButton.js +1 -0
- package/build/actionButton/ActionButton.js.map +1 -1
- package/build/actionButton/ActionButton.mjs +1 -0
- package/build/actionButton/ActionButton.mjs.map +1 -1
- package/build/actionOption/ActionOption.js +1 -0
- package/build/actionOption/ActionOption.js.map +1 -1
- package/build/actionOption/ActionOption.mjs +1 -0
- package/build/actionOption/ActionOption.mjs.map +1 -1
- package/build/alert/Alert.js +1 -0
- package/build/alert/Alert.js.map +1 -1
- package/build/alert/Alert.mjs +1 -0
- package/build/alert/Alert.mjs.map +1 -1
- package/build/alert/inlineMarkdown/InlineMarkdown.js +1 -0
- package/build/alert/inlineMarkdown/InlineMarkdown.js.map +1 -1
- package/build/alert/inlineMarkdown/InlineMarkdown.mjs +1 -0
- package/build/alert/inlineMarkdown/InlineMarkdown.mjs.map +1 -1
- package/build/avatar/Avatar.js +1 -0
- package/build/avatar/Avatar.js.map +1 -1
- package/build/avatar/Avatar.mjs +1 -0
- package/build/avatar/Avatar.mjs.map +1 -1
- package/build/avatarView/AvatarView.js +1 -0
- package/build/avatarView/AvatarView.js.map +1 -1
- package/build/avatarView/AvatarView.mjs +1 -0
- package/build/avatarView/AvatarView.mjs.map +1 -1
- package/build/avatarWrapper/AvatarWrapper.js +1 -0
- package/build/avatarWrapper/AvatarWrapper.js.map +1 -1
- package/build/avatarWrapper/AvatarWrapper.mjs +1 -0
- package/build/avatarWrapper/AvatarWrapper.mjs.map +1 -1
- package/build/badge/Badge.js +1 -0
- package/build/badge/Badge.js.map +1 -1
- package/build/badge/Badge.mjs +1 -0
- package/build/badge/Badge.mjs.map +1 -1
- package/build/badge/BadgeAssets.js +2 -1
- package/build/badge/BadgeAssets.js.map +1 -1
- package/build/badge/BadgeAssets.mjs +2 -1
- package/build/badge/BadgeAssets.mjs.map +1 -1
- package/build/button/Button.js +1 -0
- package/build/button/Button.js.map +1 -1
- package/build/button/Button.mjs +1 -0
- package/build/button/Button.mjs.map +1 -1
- package/build/button/LegacyButton.js +1 -0
- package/build/button/LegacyButton.js.map +1 -1
- package/build/button/LegacyButton.mjs +1 -0
- package/build/button/LegacyButton.mjs.map +1 -1
- package/build/button/classMap.js +1 -0
- package/build/button/classMap.js.map +1 -1
- package/build/button/classMap.mjs +1 -0
- package/build/button/classMap.mjs.map +1 -1
- package/build/button/legacyUtils/legacyUtils.js +1 -0
- package/build/button/legacyUtils/legacyUtils.js.map +1 -1
- package/build/button/legacyUtils/legacyUtils.mjs +1 -0
- package/build/button/legacyUtils/legacyUtils.mjs.map +1 -1
- package/build/card/Card.js +1 -0
- package/build/card/Card.js.map +1 -1
- package/build/card/Card.mjs +1 -0
- package/build/card/Card.mjs.map +1 -1
- package/build/checkbox/Checkbox.js +1 -0
- package/build/checkbox/Checkbox.js.map +1 -1
- package/build/checkbox/Checkbox.mjs +1 -0
- package/build/checkbox/Checkbox.mjs.map +1 -1
- package/build/chevron/Chevron.js +1 -0
- package/build/chevron/Chevron.js.map +1 -1
- package/build/chevron/Chevron.mjs +1 -0
- package/build/chevron/Chevron.mjs.map +1 -1
- package/build/chips/Chip.js +1 -0
- package/build/chips/Chip.js.map +1 -1
- package/build/chips/Chip.mjs +1 -0
- package/build/chips/Chip.mjs.map +1 -1
- package/build/circularButton/CircularButton.js +1 -0
- package/build/circularButton/CircularButton.js.map +1 -1
- package/build/circularButton/CircularButton.mjs +1 -0
- package/build/circularButton/CircularButton.mjs.map +1 -1
- package/build/common/locale/index.js +9 -4
- package/build/common/locale/index.js.map +1 -1
- package/build/common/locale/index.mjs +9 -4
- package/build/common/locale/index.mjs.map +1 -1
- package/build/common/panel/Panel.js +1 -0
- package/build/common/panel/Panel.js.map +1 -1
- package/build/common/panel/Panel.mjs +1 -0
- package/build/common/panel/Panel.mjs.map +1 -1
- package/build/common/responsivePanel/ResponsivePanel.js +1 -0
- package/build/common/responsivePanel/ResponsivePanel.js.map +1 -1
- package/build/common/responsivePanel/ResponsivePanel.mjs +1 -0
- package/build/common/responsivePanel/ResponsivePanel.mjs.map +1 -1
- package/build/criticalBanner/CriticalCommsBanner.js +1 -0
- package/build/criticalBanner/CriticalCommsBanner.js.map +1 -1
- package/build/criticalBanner/CriticalCommsBanner.mjs +1 -0
- package/build/criticalBanner/CriticalCommsBanner.mjs.map +1 -1
- package/build/dateInput/DateInput.js +1 -1
- package/build/dateInput/DateInput.mjs +1 -1
- package/build/dateLookup/DateLookup.js +1 -1
- package/build/dateLookup/DateLookup.mjs +1 -1
- package/build/dateLookup/dateHeader/DateHeader.js +1 -0
- package/build/dateLookup/dateHeader/DateHeader.js.map +1 -1
- package/build/dateLookup/dateHeader/DateHeader.mjs +1 -0
- package/build/dateLookup/dateHeader/DateHeader.mjs.map +1 -1
- package/build/decision/Decision.js +1 -0
- package/build/decision/Decision.js.map +1 -1
- package/build/decision/Decision.mjs +1 -0
- package/build/decision/Decision.mjs.map +1 -1
- package/build/definitionList/DefinitionList.js +1 -0
- package/build/definitionList/DefinitionList.js.map +1 -1
- package/build/definitionList/DefinitionList.mjs +1 -0
- package/build/definitionList/DefinitionList.mjs.map +1 -1
- package/build/dimmer/Dimmer.js +1 -0
- package/build/dimmer/Dimmer.js.map +1 -1
- package/build/dimmer/Dimmer.mjs +1 -0
- package/build/dimmer/Dimmer.mjs.map +1 -1
- package/build/display/Display.js +1 -0
- package/build/display/Display.js.map +1 -1
- package/build/display/Display.mjs +1 -0
- package/build/display/Display.mjs.map +1 -1
- package/build/drawer/Drawer.js +1 -0
- package/build/drawer/Drawer.js.map +1 -1
- package/build/drawer/Drawer.mjs +1 -0
- package/build/drawer/Drawer.mjs.map +1 -1
- package/build/expressiveMoneyInput/currencySelector/CurrencySelector.js +4 -3
- package/build/expressiveMoneyInput/currencySelector/CurrencySelector.js.map +1 -1
- package/build/expressiveMoneyInput/currencySelector/CurrencySelector.mjs +4 -3
- package/build/expressiveMoneyInput/currencySelector/CurrencySelector.mjs.map +1 -1
- package/build/field/Field.js +1 -0
- package/build/field/Field.js.map +1 -1
- package/build/field/Field.mjs +1 -0
- package/build/field/Field.mjs.map +1 -1
- package/build/flowNavigation/FlowNavigation.js +1 -0
- package/build/flowNavigation/FlowNavigation.js.map +1 -1
- package/build/flowNavigation/FlowNavigation.mjs +1 -0
- package/build/flowNavigation/FlowNavigation.mjs.map +1 -1
- package/build/header/Header.js +1 -0
- package/build/header/Header.js.map +1 -1
- package/build/header/Header.mjs +1 -0
- package/build/header/Header.mjs.map +1 -1
- package/build/info/Info.js +1 -0
- package/build/info/Info.js.map +1 -1
- package/build/info/Info.mjs +1 -0
- package/build/info/Info.mjs.map +1 -1
- package/build/inlineAlert/InlineAlert.js +1 -0
- package/build/inlineAlert/InlineAlert.js.map +1 -1
- package/build/inlineAlert/InlineAlert.mjs +1 -0
- package/build/inlineAlert/InlineAlert.mjs.map +1 -1
- package/build/inputs/SearchInput.js +1 -0
- package/build/inputs/SearchInput.js.map +1 -1
- package/build/inputs/SearchInput.mjs +1 -0
- package/build/inputs/SearchInput.mjs.map +1 -1
- package/build/instructionsList/InstructionsList.js +1 -0
- package/build/instructionsList/InstructionsList.js.map +1 -1
- package/build/instructionsList/InstructionsList.mjs +1 -0
- package/build/instructionsList/InstructionsList.mjs.map +1 -1
- package/build/link/Link.js +1 -0
- package/build/link/Link.js.map +1 -1
- package/build/link/Link.mjs +1 -0
- package/build/link/Link.mjs.map +1 -1
- package/build/listItem/AdditionalInfo/ListItemAdditionalInfo.js +1 -0
- package/build/listItem/AdditionalInfo/ListItemAdditionalInfo.js.map +1 -1
- package/build/listItem/AdditionalInfo/ListItemAdditionalInfo.mjs +1 -0
- package/build/listItem/AdditionalInfo/ListItemAdditionalInfo.mjs.map +1 -1
- package/build/listItem/ListItem.js +1 -0
- package/build/listItem/ListItem.js.map +1 -1
- package/build/listItem/ListItem.mjs +1 -0
- package/build/listItem/ListItem.mjs.map +1 -1
- package/build/listItem/Prompt/ListItemPrompt.js +1 -0
- package/build/listItem/Prompt/ListItemPrompt.js.map +1 -1
- package/build/listItem/Prompt/ListItemPrompt.mjs +1 -0
- package/build/listItem/Prompt/ListItemPrompt.mjs.map +1 -1
- package/build/loader/Loader.js +1 -0
- package/build/loader/Loader.js.map +1 -1
- package/build/loader/Loader.mjs +1 -0
- package/build/loader/Loader.mjs.map +1 -1
- package/build/main.css +33 -22
- package/build/markdown/Markdown.js +1 -0
- package/build/markdown/Markdown.js.map +1 -1
- package/build/markdown/Markdown.mjs +1 -0
- package/build/markdown/Markdown.mjs.map +1 -1
- package/build/modal/Modal.js +1 -0
- package/build/modal/Modal.js.map +1 -1
- package/build/modal/Modal.mjs +1 -0
- package/build/modal/Modal.mjs.map +1 -1
- package/build/navigationOption/NavigationOption.js +1 -0
- package/build/navigationOption/NavigationOption.js.map +1 -1
- package/build/navigationOption/NavigationOption.mjs +1 -0
- package/build/navigationOption/NavigationOption.mjs.map +1 -1
- package/build/nudge/Nudge.js +1 -0
- package/build/nudge/Nudge.js.map +1 -1
- package/build/nudge/Nudge.mjs +1 -0
- package/build/nudge/Nudge.mjs.map +1 -1
- package/build/overlayHeader/OverlayHeader.js +1 -0
- package/build/overlayHeader/OverlayHeader.js.map +1 -1
- package/build/overlayHeader/OverlayHeader.mjs +1 -0
- package/build/overlayHeader/OverlayHeader.mjs.map +1 -1
- package/build/phoneNumberInput/PhoneNumberInput.js +1 -0
- package/build/phoneNumberInput/PhoneNumberInput.js.map +1 -1
- package/build/phoneNumberInput/PhoneNumberInput.mjs +1 -0
- package/build/phoneNumberInput/PhoneNumberInput.mjs.map +1 -1
- package/build/popover/Popover.js +1 -0
- package/build/popover/Popover.js.map +1 -1
- package/build/popover/Popover.mjs +1 -0
- package/build/popover/Popover.mjs.map +1 -1
- package/build/processIndicator/ProcessIndicator.js +1 -0
- package/build/processIndicator/ProcessIndicator.js.map +1 -1
- package/build/processIndicator/ProcessIndicator.mjs +1 -0
- package/build/processIndicator/ProcessIndicator.mjs.map +1 -1
- package/build/progressBar/ProgressBar.js +1 -0
- package/build/progressBar/ProgressBar.js.map +1 -1
- package/build/progressBar/ProgressBar.mjs +1 -0
- package/build/progressBar/ProgressBar.mjs.map +1 -1
- package/build/promoCard/PromoCard.js +1 -0
- package/build/promoCard/PromoCard.js.map +1 -1
- package/build/promoCard/PromoCard.mjs +1 -0
- package/build/promoCard/PromoCard.mjs.map +1 -1
- package/build/promoCard/PromoCardIndicator.js +1 -0
- package/build/promoCard/PromoCardIndicator.js.map +1 -1
- package/build/promoCard/PromoCardIndicator.mjs +1 -0
- package/build/promoCard/PromoCardIndicator.mjs.map +1 -1
- package/build/prompt/ActionPrompt/ActionPrompt.js +1 -0
- package/build/prompt/ActionPrompt/ActionPrompt.js.map +1 -1
- package/build/prompt/ActionPrompt/ActionPrompt.mjs +1 -0
- package/build/prompt/ActionPrompt/ActionPrompt.mjs.map +1 -1
- package/build/prompt/InfoPrompt/InfoPrompt.js +1 -0
- package/build/prompt/InfoPrompt/InfoPrompt.js.map +1 -1
- package/build/prompt/InfoPrompt/InfoPrompt.mjs +1 -0
- package/build/prompt/InfoPrompt/InfoPrompt.mjs.map +1 -1
- package/build/prompt/InlinePrompt/InlinePrompt.js +1 -0
- package/build/prompt/InlinePrompt/InlinePrompt.js.map +1 -1
- package/build/prompt/InlinePrompt/InlinePrompt.mjs +1 -0
- package/build/prompt/InlinePrompt/InlinePrompt.mjs.map +1 -1
- package/build/radio/Radio.js +1 -0
- package/build/radio/Radio.js.map +1 -1
- package/build/radio/Radio.mjs +1 -0
- package/build/radio/Radio.mjs.map +1 -1
- package/build/segmentedControl/SegmentedControl.js +1 -0
- package/build/segmentedControl/SegmentedControl.js.map +1 -1
- package/build/segmentedControl/SegmentedControl.mjs +1 -0
- package/build/segmentedControl/SegmentedControl.mjs.map +1 -1
- package/build/select/Select.js +1 -0
- package/build/select/Select.js.map +1 -1
- package/build/select/Select.mjs +1 -0
- package/build/select/Select.mjs.map +1 -1
- package/build/select/option/Option.js +1 -0
- package/build/select/option/Option.js.map +1 -1
- package/build/select/option/Option.mjs +1 -0
- package/build/select/option/Option.mjs.map +1 -1
- package/build/statusIcon/StatusIcon.js +1 -0
- package/build/statusIcon/StatusIcon.js.map +1 -1
- package/build/statusIcon/StatusIcon.mjs +1 -0
- package/build/statusIcon/StatusIcon.mjs.map +1 -1
- package/build/stepper/Stepper.js +1 -0
- package/build/stepper/Stepper.js.map +1 -1
- package/build/stepper/Stepper.mjs +1 -0
- package/build/stepper/Stepper.mjs.map +1 -1
- package/build/sticky/Sticky.js +1 -0
- package/build/sticky/Sticky.js.map +1 -1
- package/build/sticky/Sticky.mjs +1 -0
- package/build/sticky/Sticky.mjs.map +1 -1
- package/build/styles/css/neptune.css +33 -22
- package/build/styles/less/neptune-tokens.less +5 -4
- package/build/styles/main.css +33 -22
- package/build/styles/props/neptune-tokens.css +3 -2
- package/build/styles/styles/less/neptune.css +33 -22
- package/build/summary/Summary.js +1 -0
- package/build/summary/Summary.js.map +1 -1
- package/build/summary/Summary.mjs +1 -0
- package/build/summary/Summary.mjs.map +1 -1
- package/build/table/Table.js +1 -0
- package/build/table/Table.js.map +1 -1
- package/build/table/Table.mjs +1 -0
- package/build/table/Table.mjs.map +1 -1
- package/build/table/TableRow.js +1 -0
- package/build/table/TableRow.js.map +1 -1
- package/build/table/TableRow.mjs +1 -0
- package/build/table/TableRow.mjs.map +1 -1
- package/build/table/TableStatusText.js +1 -0
- package/build/table/TableStatusText.js.map +1 -1
- package/build/table/TableStatusText.mjs +1 -0
- package/build/table/TableStatusText.mjs.map +1 -1
- package/build/tabs/Tabs.js +1 -0
- package/build/tabs/Tabs.js.map +1 -1
- package/build/tabs/Tabs.mjs +1 -0
- package/build/tabs/Tabs.mjs.map +1 -1
- package/build/tile/Tile.js +1 -0
- package/build/tile/Tile.js.map +1 -1
- package/build/tile/Tile.mjs +1 -0
- package/build/tile/Tile.mjs.map +1 -1
- package/build/title/Title.js +1 -0
- package/build/title/Title.js.map +1 -1
- package/build/title/Title.mjs +1 -0
- package/build/title/Title.mjs.map +1 -1
- package/build/tooltip/Tooltip.js +1 -0
- package/build/tooltip/Tooltip.js.map +1 -1
- package/build/tooltip/Tooltip.mjs +1 -0
- package/build/tooltip/Tooltip.mjs.map +1 -1
- package/build/typeahead/Typeahead.js +1 -0
- package/build/typeahead/Typeahead.js.map +1 -1
- package/build/typeahead/Typeahead.mjs +1 -0
- package/build/typeahead/Typeahead.mjs.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/expressiveMoneyInput/currencySelector/CurrencySelector.d.ts.map +1 -1
- package/build/upload/Upload.js +1 -0
- package/build/upload/Upload.js.map +1 -1
- package/build/upload/Upload.mjs +1 -0
- package/build/upload/Upload.mjs.map +1 -1
- package/build/upload/steps/completeStep/completeStep.js +1 -0
- package/build/upload/steps/completeStep/completeStep.js.map +1 -1
- package/build/upload/steps/completeStep/completeStep.mjs +1 -0
- package/build/upload/steps/completeStep/completeStep.mjs.map +1 -1
- package/build/upload/steps/processingStep/processingStep.js +1 -0
- package/build/upload/steps/processingStep/processingStep.js.map +1 -1
- package/build/upload/steps/processingStep/processingStep.mjs +1 -0
- package/build/upload/steps/processingStep/processingStep.mjs.map +1 -1
- package/build/upload/steps/uploadImageStep/uploadImageStep.js +1 -0
- package/build/upload/steps/uploadImageStep/uploadImageStep.js.map +1 -1
- package/build/upload/steps/uploadImageStep/uploadImageStep.mjs +1 -0
- package/build/upload/steps/uploadImageStep/uploadImageStep.mjs.map +1 -1
- package/build/uploadInput/UploadInput.js +1 -0
- package/build/uploadInput/UploadInput.js.map +1 -1
- package/build/uploadInput/UploadInput.mjs +1 -0
- package/build/uploadInput/UploadInput.mjs.map +1 -1
- package/build/uploadInput/uploadButton/UploadButton.js +1 -0
- package/build/uploadInput/uploadButton/UploadButton.js.map +1 -1
- package/build/uploadInput/uploadButton/UploadButton.mjs +1 -0
- package/build/uploadInput/uploadButton/UploadButton.mjs.map +1 -1
- package/build/uploadInput/uploadButton/defaults.js +1 -0
- package/build/uploadInput/uploadButton/defaults.js.map +1 -1
- package/build/uploadInput/uploadButton/defaults.mjs +1 -0
- package/build/uploadInput/uploadButton/defaults.mjs.map +1 -1
- package/build/uploadInput/uploadItem/UploadItem.js +1 -0
- package/build/uploadInput/uploadItem/UploadItem.js.map +1 -1
- package/build/uploadInput/uploadItem/UploadItem.mjs +1 -0
- package/build/uploadInput/uploadItem/UploadItem.mjs.map +1 -1
- package/build/withDisplayFormat/WithDisplayFormat.js +1 -0
- package/build/withDisplayFormat/WithDisplayFormat.js.map +1 -1
- package/build/withDisplayFormat/WithDisplayFormat.mjs +1 -0
- package/build/withDisplayFormat/WithDisplayFormat.mjs.map +1 -1
- package/package.json +17 -17
- package/src/avatarView/AvatarView.story.tsx +1 -1
- package/src/avatarView/AvatarView.test.story.tsx +108 -1
- package/src/badge/BadgeAssets.tsx +2 -0
- package/src/common/locale/index.test.ts +13 -4
- package/src/common/locale/index.ts +9 -3
- package/src/expressiveMoneyInput/ExpressiveMoneyInput.story.tsx +18 -0
- package/src/expressiveMoneyInput/currencySelector/CurrencySelector.test.tsx +119 -1
- package/src/expressiveMoneyInput/currencySelector/CurrencySelector.tsx +4 -3
- package/src/main.css +33 -22
- package/src/styles/less/neptune.css +33 -22
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* Do not edit directly
|
|
3
|
-
* Generated on
|
|
2
|
+
* Do not edit directly, this file was auto-generated.
|
|
3
|
+
* Generated on Fri, 10 Apr 2026 14:46:00 GMT
|
|
4
4
|
*/
|
|
5
5
|
|
|
6
6
|
:root {
|
|
@@ -53,6 +53,7 @@
|
|
|
53
53
|
--radius-small: 10px;
|
|
54
54
|
--radius-medium: 16px;
|
|
55
55
|
--radius-large: 24px;
|
|
56
|
+
--radius-xlarge: 32px;
|
|
56
57
|
--size-4: 4px;
|
|
57
58
|
--size-5: 5px;
|
|
58
59
|
--size-8: 8px;
|
|
@@ -142,8 +143,8 @@
|
|
|
142
143
|
}
|
|
143
144
|
|
|
144
145
|
/**
|
|
145
|
-
* Do not edit directly
|
|
146
|
-
* Generated on
|
|
146
|
+
* Do not edit directly, this file was auto-generated.
|
|
147
|
+
* Generated on Fri, 10 Apr 2026 14:46:00 GMT
|
|
147
148
|
*/
|
|
148
149
|
|
|
149
150
|
.np-theme-personal {
|
|
@@ -236,6 +237,7 @@
|
|
|
236
237
|
--radius-small: 10px;
|
|
237
238
|
--radius-medium: 16px;
|
|
238
239
|
--radius-large: 24px;
|
|
240
|
+
--radius-xlarge: 32px;
|
|
239
241
|
--size-4: 4px;
|
|
240
242
|
--size-5: 5px;
|
|
241
243
|
--size-8: 8px;
|
|
@@ -391,8 +393,8 @@
|
|
|
391
393
|
}
|
|
392
394
|
|
|
393
395
|
/**
|
|
394
|
-
* Do not edit directly
|
|
395
|
-
* Generated on
|
|
396
|
+
* Do not edit directly, this file was auto-generated.
|
|
397
|
+
* Generated on Fri, 10 Apr 2026 14:46:00 GMT
|
|
396
398
|
*/
|
|
397
399
|
|
|
398
400
|
.np-theme-personal--forest-green {
|
|
@@ -485,6 +487,7 @@
|
|
|
485
487
|
--radius-small: 10px;
|
|
486
488
|
--radius-medium: 16px;
|
|
487
489
|
--radius-large: 24px;
|
|
490
|
+
--radius-xlarge: 32px;
|
|
488
491
|
--size-4: 4px;
|
|
489
492
|
--size-5: 5px;
|
|
490
493
|
--size-8: 8px;
|
|
@@ -640,8 +643,8 @@
|
|
|
640
643
|
}
|
|
641
644
|
|
|
642
645
|
/**
|
|
643
|
-
* Do not edit directly
|
|
644
|
-
* Generated on
|
|
646
|
+
* Do not edit directly, this file was auto-generated.
|
|
647
|
+
* Generated on Fri, 10 Apr 2026 14:46:00 GMT
|
|
645
648
|
*/
|
|
646
649
|
|
|
647
650
|
.np-theme-personal--bright-green {
|
|
@@ -734,6 +737,7 @@
|
|
|
734
737
|
--radius-small: 10px;
|
|
735
738
|
--radius-medium: 16px;
|
|
736
739
|
--radius-large: 24px;
|
|
740
|
+
--radius-xlarge: 32px;
|
|
737
741
|
--size-4: 4px;
|
|
738
742
|
--size-5: 5px;
|
|
739
743
|
--size-8: 8px;
|
|
@@ -889,8 +893,8 @@
|
|
|
889
893
|
}
|
|
890
894
|
|
|
891
895
|
/**
|
|
892
|
-
* Do not edit directly
|
|
893
|
-
* Generated on
|
|
896
|
+
* Do not edit directly, this file was auto-generated.
|
|
897
|
+
* Generated on Fri, 10 Apr 2026 14:46:00 GMT
|
|
894
898
|
*/
|
|
895
899
|
|
|
896
900
|
.np-theme-personal--dark {
|
|
@@ -983,6 +987,7 @@
|
|
|
983
987
|
--radius-small: 10px;
|
|
984
988
|
--radius-medium: 16px;
|
|
985
989
|
--radius-large: 24px;
|
|
990
|
+
--radius-xlarge: 32px;
|
|
986
991
|
--size-4: 4px;
|
|
987
992
|
--size-5: 5px;
|
|
988
993
|
--size-8: 8px;
|
|
@@ -1138,8 +1143,8 @@
|
|
|
1138
1143
|
}
|
|
1139
1144
|
|
|
1140
1145
|
/**
|
|
1141
|
-
* Do not edit directly
|
|
1142
|
-
* Generated on
|
|
1146
|
+
* Do not edit directly, this file was auto-generated.
|
|
1147
|
+
* Generated on Fri, 10 Apr 2026 14:46:00 GMT
|
|
1143
1148
|
*/
|
|
1144
1149
|
|
|
1145
1150
|
.np-theme-platform {
|
|
@@ -1232,6 +1237,7 @@
|
|
|
1232
1237
|
--radius-small: 10px;
|
|
1233
1238
|
--radius-medium: 16px;
|
|
1234
1239
|
--radius-large: 24px;
|
|
1240
|
+
--radius-xlarge: 32px;
|
|
1235
1241
|
--size-4: 4px;
|
|
1236
1242
|
--size-5: 5px;
|
|
1237
1243
|
--size-8: 8px;
|
|
@@ -1321,8 +1327,8 @@
|
|
|
1321
1327
|
}
|
|
1322
1328
|
|
|
1323
1329
|
/**
|
|
1324
|
-
* Do not edit directly
|
|
1325
|
-
* Generated on
|
|
1330
|
+
* Do not edit directly, this file was auto-generated.
|
|
1331
|
+
* Generated on Fri, 10 Apr 2026 14:46:00 GMT
|
|
1326
1332
|
*/
|
|
1327
1333
|
|
|
1328
1334
|
.np-theme-platform--forest-green {
|
|
@@ -1415,6 +1421,7 @@
|
|
|
1415
1421
|
--radius-small: 10px;
|
|
1416
1422
|
--radius-medium: 16px;
|
|
1417
1423
|
--radius-large: 24px;
|
|
1424
|
+
--radius-xlarge: 32px;
|
|
1418
1425
|
--size-4: 4px;
|
|
1419
1426
|
--size-5: 5px;
|
|
1420
1427
|
--size-8: 8px;
|
|
@@ -1504,8 +1511,8 @@
|
|
|
1504
1511
|
}
|
|
1505
1512
|
|
|
1506
1513
|
/**
|
|
1507
|
-
* Do not edit directly
|
|
1508
|
-
* Generated on
|
|
1514
|
+
* Do not edit directly, this file was auto-generated.
|
|
1515
|
+
* Generated on Fri, 10 Apr 2026 14:46:00 GMT
|
|
1509
1516
|
*/
|
|
1510
1517
|
|
|
1511
1518
|
.np-theme-business {
|
|
@@ -1599,6 +1606,7 @@
|
|
|
1599
1606
|
--radius-small: 10px;
|
|
1600
1607
|
--radius-medium: 16px;
|
|
1601
1608
|
--radius-large: 24px;
|
|
1609
|
+
--radius-xlarge: 32px;
|
|
1602
1610
|
--size-4: 4px;
|
|
1603
1611
|
--size-5: 5px;
|
|
1604
1612
|
--size-8: 8px;
|
|
@@ -1688,8 +1696,8 @@
|
|
|
1688
1696
|
}
|
|
1689
1697
|
|
|
1690
1698
|
/**
|
|
1691
|
-
* Do not edit directly
|
|
1692
|
-
* Generated on
|
|
1699
|
+
* Do not edit directly, this file was auto-generated.
|
|
1700
|
+
* Generated on Fri, 10 Apr 2026 14:46:00 GMT
|
|
1693
1701
|
*/
|
|
1694
1702
|
|
|
1695
1703
|
.np-theme-business--dark {
|
|
@@ -1783,6 +1791,7 @@
|
|
|
1783
1791
|
--radius-small: 10px;
|
|
1784
1792
|
--radius-medium: 16px;
|
|
1785
1793
|
--radius-large: 24px;
|
|
1794
|
+
--radius-xlarge: 32px;
|
|
1786
1795
|
--size-4: 4px;
|
|
1787
1796
|
--size-5: 5px;
|
|
1788
1797
|
--size-8: 8px;
|
|
@@ -1872,8 +1881,8 @@
|
|
|
1872
1881
|
}
|
|
1873
1882
|
|
|
1874
1883
|
/**
|
|
1875
|
-
* Do not edit directly
|
|
1876
|
-
* Generated on
|
|
1884
|
+
* Do not edit directly, this file was auto-generated.
|
|
1885
|
+
* Generated on Fri, 10 Apr 2026 14:46:00 GMT
|
|
1877
1886
|
*/
|
|
1878
1887
|
|
|
1879
1888
|
.np-theme-business--forest-green {
|
|
@@ -1967,6 +1976,7 @@
|
|
|
1967
1976
|
--radius-small: 10px;
|
|
1968
1977
|
--radius-medium: 16px;
|
|
1969
1978
|
--radius-large: 24px;
|
|
1979
|
+
--radius-xlarge: 32px;
|
|
1970
1980
|
--size-4: 4px;
|
|
1971
1981
|
--size-5: 5px;
|
|
1972
1982
|
--size-8: 8px;
|
|
@@ -2056,8 +2066,8 @@
|
|
|
2056
2066
|
}
|
|
2057
2067
|
|
|
2058
2068
|
/**
|
|
2059
|
-
* Do not edit directly
|
|
2060
|
-
* Generated on
|
|
2069
|
+
* Do not edit directly, this file was auto-generated.
|
|
2070
|
+
* Generated on Fri, 10 Apr 2026 14:46:01 GMT
|
|
2061
2071
|
*/
|
|
2062
2072
|
|
|
2063
2073
|
.np-theme-business--bright-green {
|
|
@@ -2151,6 +2161,7 @@
|
|
|
2151
2161
|
--radius-small: 10px;
|
|
2152
2162
|
--radius-medium: 16px;
|
|
2153
2163
|
--radius-large: 24px;
|
|
2164
|
+
--radius-xlarge: 32px;
|
|
2154
2165
|
--size-4: 4px;
|
|
2155
2166
|
--size-5: 5px;
|
|
2156
2167
|
--size-8: 8px;
|
package/build/summary/Summary.js
CHANGED
|
@@ -26,6 +26,7 @@ require('../common/propsValues/variant.js');
|
|
|
26
26
|
require('../common/propsValues/scroll.js');
|
|
27
27
|
require('../common/propsValues/markdownNodeType.js');
|
|
28
28
|
require('../common/fileType.js');
|
|
29
|
+
require('@transferwise/formatting');
|
|
29
30
|
require('../common/closeButton/CloseButton.messages.js');
|
|
30
31
|
var jsxRuntime = require('react/jsx-runtime');
|
|
31
32
|
require('../info/infoPresentations.js');
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Summary.js","sources":["../../src/summary/Summary.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-assignment */\nimport {\n CheckCircleFill as CheckCircleIcon,\n ClockFill as PendingCircleIcon,\n} from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { ElementType, cloneElement, ReactNode } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport Body from '../body';\nimport {\n Status,\n StatusDone,\n StatusNotDone,\n StatusPending,\n Size,\n Typography,\n Sentiment,\n} from '../common';\nimport Info, { InfoProps } from '../info';\nimport StatusIcon from '../statusIcon';\n\nimport messages from './Summary.messages';\nimport Link from '../link';\nimport type { AlertAction } from '../alert';\n\nconst BadgeIcons = {\n [Status.DONE]: CheckCircleIcon,\n [Status.PENDING]: PendingCircleIcon,\n};\n\nconst statusLabels = {\n [Status.NOT_DONE]: 'statusNotDone',\n [Status.DONE]: 'statusDone',\n [Status.PENDING]: 'statusPending',\n};\n\nconst statusMapping = {\n [Status.DONE]: Sentiment.POSITIVE,\n [Status.PENDING]: Sentiment.PENDING,\n};\n\nexport interface Props {\n /**\n * Action displayed at the bottom of the Summary\n */\n action?: AlertAction;\n /**\n * Decides which html element should wrap the Summary\n * @default 'div'\n */\n as?: ElementType;\n /**\n * Extra classes applied to Summary\n */\n className?: string;\n /**\n * @deprecated Use `description` instead.\n * @default null\n */\n content?: ReactNode;\n /**\n * Summary description\n */\n description?: ReactNode;\n /**\n * @deprecated Use `info` instead.\n */\n help?: {\n content: ReactNode;\n title?: ReactNode;\n };\n /**\n * Infos displayed on help Icon click inside Popover or Modal\n */\n info?: Pick<InfoProps, 'aria-label' | 'content' | 'onClick' | 'presentation' | 'title'>;\n /**\n * @deprecated Use `icon` instead.\n * @default null\n */\n illustration?: ReactNode;\n /**\n * Main Summary Icon\n */\n icon?: ReactNode;\n /**\n * Decides the badge applied to Icon\n */\n status?: StatusNotDone | StatusDone | StatusPending;\n /**\n * Summary title\n */\n title: ReactNode;\n}\n\n/**\n * @deprecated Use `<ListItem />` instead (run codemod to migrate: **`npx @wise/wds-codemods@latest list-item`**).\n * @deprecatedSince 46.104.0\n * @see [Source](../listItem/ListItem.tsx)\n * @see [Storybook](https://storybook.wise.design/?path=/docs/content-listitem--docs)\n * @see [Design docs](https://wise.design/components/list-item)\n * @see [Release notes](https://transferwise.atlassian.net/wiki/spaces/DS/pages/3647251055/List+Item+release+notes)\n */\nconst Summary = ({\n action,\n as: Element = 'div',\n className,\n content = null,\n description = content,\n help,\n icon,\n illustration = null,\n info = help,\n status,\n title,\n}: Props) => {\n const intl = useIntl();\n\n let media = illustration;\n if (icon) {\n // @ts-expect-error if icon is present it has props and size prop\n const iconSize = icon?.props?.size as number;\n\n media =\n iconSize !== 24\n ? // @ts-expect-error we need icon to adjust it's size\n cloneElement(icon, { size: 24 })\n : icon;\n }\n // @ts-expect-error Badge can be null, this is handled in code\n const Badge = status && BadgeIcons[status];\n\n return (\n <Element\n className={clsx('np-summary d-flex align-items-start', className)}\n // @ts-expect-error we check whether `status` is not null before index `statusLabels` and `messages`\n aria-label={status && intl.formatMessage(messages[statusLabels[status]])}\n >\n {icon && (\n <div className=\"np-summary__icon\">\n {media}\n {Badge && (\n <div>\n {/* @ts-expect-error it's okey to pass `undefined` into `sentiment` prop */}\n <StatusIcon size={Size.SMALL} sentiment={statusMapping[status]} />\n </div>\n )}\n </div>\n )}\n <div className={`np-summary__body ${icon ? 'm-l-2' : ''}`}>\n <div className=\"np-summary__title d-flex\">\n <Body\n as=\"span\"\n role=\"heading\"\n aria-level={6}\n type={Typography.BODY_LARGE_BOLD}\n className=\"text-primary text-overflow-wrap m-b-1\"\n >\n {title}\n </Body>\n {info && (\n <Info\n aria-label={info['aria-label']}\n className=\"m-l-1 hidden-xs\"\n content={info.content}\n presentation={info.presentation}\n size={Size.LARGE}\n title={info.title}\n onClick={info.onClick}\n />\n )}\n </div>\n\n {description && (\n <Body\n as=\"span\"\n type={Typography.BODY_DEFAULT}\n className={`d-block text-overflow-wrap ${icon ? 'np-summary__description' : 'np-summary__description-icon'}`}\n >\n {description}\n </Body>\n )}\n {action && (\n <Link\n href={action.href}\n target={action.target}\n className=\"np-summary__action\"\n aria-label={action['aria-label']}\n onClick={action.onClick}\n >\n {action.text}\n </Link>\n )}\n </div>\n {info && (\n <Info\n aria-label={info['aria-label']}\n className=\"m-l-2 hidden-sm hidden-md hidden-lg hidden-xl\"\n content={info.content}\n presentation={info.presentation}\n size={Size.LARGE}\n title={info.title}\n onClick={info.onClick}\n />\n )}\n </Element>\n );\n};\n\nexport default Summary;\n"],"names":["BadgeIcons","Status","DONE","CheckCircleIcon","PENDING","PendingCircleIcon","statusLabels","NOT_DONE","statusMapping","Sentiment","POSITIVE","Summary","action","as","Element","className","content","description","help","icon","illustration","info","status","title","intl","useIntl","media","iconSize","props","size","cloneElement","Badge","_jsxs","clsx","formatMessage","messages","children","_jsx","StatusIcon","Size","SMALL","sentiment","Body","role","type","Typography","BODY_LARGE_BOLD","Info","presentation","LARGE","onClick","BODY_DEFAULT","Link","href","target","text"],"mappings":"
|
|
1
|
+
{"version":3,"file":"Summary.js","sources":["../../src/summary/Summary.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-assignment */\nimport {\n CheckCircleFill as CheckCircleIcon,\n ClockFill as PendingCircleIcon,\n} from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { ElementType, cloneElement, ReactNode } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport Body from '../body';\nimport {\n Status,\n StatusDone,\n StatusNotDone,\n StatusPending,\n Size,\n Typography,\n Sentiment,\n} from '../common';\nimport Info, { InfoProps } from '../info';\nimport StatusIcon from '../statusIcon';\n\nimport messages from './Summary.messages';\nimport Link from '../link';\nimport type { AlertAction } from '../alert';\n\nconst BadgeIcons = {\n [Status.DONE]: CheckCircleIcon,\n [Status.PENDING]: PendingCircleIcon,\n};\n\nconst statusLabels = {\n [Status.NOT_DONE]: 'statusNotDone',\n [Status.DONE]: 'statusDone',\n [Status.PENDING]: 'statusPending',\n};\n\nconst statusMapping = {\n [Status.DONE]: Sentiment.POSITIVE,\n [Status.PENDING]: Sentiment.PENDING,\n};\n\nexport interface Props {\n /**\n * Action displayed at the bottom of the Summary\n */\n action?: AlertAction;\n /**\n * Decides which html element should wrap the Summary\n * @default 'div'\n */\n as?: ElementType;\n /**\n * Extra classes applied to Summary\n */\n className?: string;\n /**\n * @deprecated Use `description` instead.\n * @default null\n */\n content?: ReactNode;\n /**\n * Summary description\n */\n description?: ReactNode;\n /**\n * @deprecated Use `info` instead.\n */\n help?: {\n content: ReactNode;\n title?: ReactNode;\n };\n /**\n * Infos displayed on help Icon click inside Popover or Modal\n */\n info?: Pick<InfoProps, 'aria-label' | 'content' | 'onClick' | 'presentation' | 'title'>;\n /**\n * @deprecated Use `icon` instead.\n * @default null\n */\n illustration?: ReactNode;\n /**\n * Main Summary Icon\n */\n icon?: ReactNode;\n /**\n * Decides the badge applied to Icon\n */\n status?: StatusNotDone | StatusDone | StatusPending;\n /**\n * Summary title\n */\n title: ReactNode;\n}\n\n/**\n * @deprecated Use `<ListItem />` instead (run codemod to migrate: **`npx @wise/wds-codemods@latest list-item`**).\n * @deprecatedSince 46.104.0\n * @see [Source](../listItem/ListItem.tsx)\n * @see [Storybook](https://storybook.wise.design/?path=/docs/content-listitem--docs)\n * @see [Design docs](https://wise.design/components/list-item)\n * @see [Release notes](https://transferwise.atlassian.net/wiki/spaces/DS/pages/3647251055/List+Item+release+notes)\n */\nconst Summary = ({\n action,\n as: Element = 'div',\n className,\n content = null,\n description = content,\n help,\n icon,\n illustration = null,\n info = help,\n status,\n title,\n}: Props) => {\n const intl = useIntl();\n\n let media = illustration;\n if (icon) {\n // @ts-expect-error if icon is present it has props and size prop\n const iconSize = icon?.props?.size as number;\n\n media =\n iconSize !== 24\n ? // @ts-expect-error we need icon to adjust it's size\n cloneElement(icon, { size: 24 })\n : icon;\n }\n // @ts-expect-error Badge can be null, this is handled in code\n const Badge = status && BadgeIcons[status];\n\n return (\n <Element\n className={clsx('np-summary d-flex align-items-start', className)}\n // @ts-expect-error we check whether `status` is not null before index `statusLabels` and `messages`\n aria-label={status && intl.formatMessage(messages[statusLabels[status]])}\n >\n {icon && (\n <div className=\"np-summary__icon\">\n {media}\n {Badge && (\n <div>\n {/* @ts-expect-error it's okey to pass `undefined` into `sentiment` prop */}\n <StatusIcon size={Size.SMALL} sentiment={statusMapping[status]} />\n </div>\n )}\n </div>\n )}\n <div className={`np-summary__body ${icon ? 'm-l-2' : ''}`}>\n <div className=\"np-summary__title d-flex\">\n <Body\n as=\"span\"\n role=\"heading\"\n aria-level={6}\n type={Typography.BODY_LARGE_BOLD}\n className=\"text-primary text-overflow-wrap m-b-1\"\n >\n {title}\n </Body>\n {info && (\n <Info\n aria-label={info['aria-label']}\n className=\"m-l-1 hidden-xs\"\n content={info.content}\n presentation={info.presentation}\n size={Size.LARGE}\n title={info.title}\n onClick={info.onClick}\n />\n )}\n </div>\n\n {description && (\n <Body\n as=\"span\"\n type={Typography.BODY_DEFAULT}\n className={`d-block text-overflow-wrap ${icon ? 'np-summary__description' : 'np-summary__description-icon'}`}\n >\n {description}\n </Body>\n )}\n {action && (\n <Link\n href={action.href}\n target={action.target}\n className=\"np-summary__action\"\n aria-label={action['aria-label']}\n onClick={action.onClick}\n >\n {action.text}\n </Link>\n )}\n </div>\n {info && (\n <Info\n aria-label={info['aria-label']}\n className=\"m-l-2 hidden-sm hidden-md hidden-lg hidden-xl\"\n content={info.content}\n presentation={info.presentation}\n size={Size.LARGE}\n title={info.title}\n onClick={info.onClick}\n />\n )}\n </Element>\n );\n};\n\nexport default Summary;\n"],"names":["BadgeIcons","Status","DONE","CheckCircleIcon","PENDING","PendingCircleIcon","statusLabels","NOT_DONE","statusMapping","Sentiment","POSITIVE","Summary","action","as","Element","className","content","description","help","icon","illustration","info","status","title","intl","useIntl","media","iconSize","props","size","cloneElement","Badge","_jsxs","clsx","formatMessage","messages","children","_jsx","StatusIcon","Size","SMALL","sentiment","Body","role","type","Typography","BODY_LARGE_BOLD","Info","presentation","LARGE","onClick","BODY_DEFAULT","Link","href","target","text"],"mappings":"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"}
|
|
@@ -22,6 +22,7 @@ import '../common/propsValues/variant.mjs';
|
|
|
22
22
|
import '../common/propsValues/scroll.mjs';
|
|
23
23
|
import '../common/propsValues/markdownNodeType.mjs';
|
|
24
24
|
import '../common/fileType.mjs';
|
|
25
|
+
import '@transferwise/formatting';
|
|
25
26
|
import '../common/closeButton/CloseButton.messages.mjs';
|
|
26
27
|
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
27
28
|
import '../info/infoPresentations.mjs';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Summary.mjs","sources":["../../src/summary/Summary.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-assignment */\nimport {\n CheckCircleFill as CheckCircleIcon,\n ClockFill as PendingCircleIcon,\n} from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { ElementType, cloneElement, ReactNode } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport Body from '../body';\nimport {\n Status,\n StatusDone,\n StatusNotDone,\n StatusPending,\n Size,\n Typography,\n Sentiment,\n} from '../common';\nimport Info, { InfoProps } from '../info';\nimport StatusIcon from '../statusIcon';\n\nimport messages from './Summary.messages';\nimport Link from '../link';\nimport type { AlertAction } from '../alert';\n\nconst BadgeIcons = {\n [Status.DONE]: CheckCircleIcon,\n [Status.PENDING]: PendingCircleIcon,\n};\n\nconst statusLabels = {\n [Status.NOT_DONE]: 'statusNotDone',\n [Status.DONE]: 'statusDone',\n [Status.PENDING]: 'statusPending',\n};\n\nconst statusMapping = {\n [Status.DONE]: Sentiment.POSITIVE,\n [Status.PENDING]: Sentiment.PENDING,\n};\n\nexport interface Props {\n /**\n * Action displayed at the bottom of the Summary\n */\n action?: AlertAction;\n /**\n * Decides which html element should wrap the Summary\n * @default 'div'\n */\n as?: ElementType;\n /**\n * Extra classes applied to Summary\n */\n className?: string;\n /**\n * @deprecated Use `description` instead.\n * @default null\n */\n content?: ReactNode;\n /**\n * Summary description\n */\n description?: ReactNode;\n /**\n * @deprecated Use `info` instead.\n */\n help?: {\n content: ReactNode;\n title?: ReactNode;\n };\n /**\n * Infos displayed on help Icon click inside Popover or Modal\n */\n info?: Pick<InfoProps, 'aria-label' | 'content' | 'onClick' | 'presentation' | 'title'>;\n /**\n * @deprecated Use `icon` instead.\n * @default null\n */\n illustration?: ReactNode;\n /**\n * Main Summary Icon\n */\n icon?: ReactNode;\n /**\n * Decides the badge applied to Icon\n */\n status?: StatusNotDone | StatusDone | StatusPending;\n /**\n * Summary title\n */\n title: ReactNode;\n}\n\n/**\n * @deprecated Use `<ListItem />` instead (run codemod to migrate: **`npx @wise/wds-codemods@latest list-item`**).\n * @deprecatedSince 46.104.0\n * @see [Source](../listItem/ListItem.tsx)\n * @see [Storybook](https://storybook.wise.design/?path=/docs/content-listitem--docs)\n * @see [Design docs](https://wise.design/components/list-item)\n * @see [Release notes](https://transferwise.atlassian.net/wiki/spaces/DS/pages/3647251055/List+Item+release+notes)\n */\nconst Summary = ({\n action,\n as: Element = 'div',\n className,\n content = null,\n description = content,\n help,\n icon,\n illustration = null,\n info = help,\n status,\n title,\n}: Props) => {\n const intl = useIntl();\n\n let media = illustration;\n if (icon) {\n // @ts-expect-error if icon is present it has props and size prop\n const iconSize = icon?.props?.size as number;\n\n media =\n iconSize !== 24\n ? // @ts-expect-error we need icon to adjust it's size\n cloneElement(icon, { size: 24 })\n : icon;\n }\n // @ts-expect-error Badge can be null, this is handled in code\n const Badge = status && BadgeIcons[status];\n\n return (\n <Element\n className={clsx('np-summary d-flex align-items-start', className)}\n // @ts-expect-error we check whether `status` is not null before index `statusLabels` and `messages`\n aria-label={status && intl.formatMessage(messages[statusLabels[status]])}\n >\n {icon && (\n <div className=\"np-summary__icon\">\n {media}\n {Badge && (\n <div>\n {/* @ts-expect-error it's okey to pass `undefined` into `sentiment` prop */}\n <StatusIcon size={Size.SMALL} sentiment={statusMapping[status]} />\n </div>\n )}\n </div>\n )}\n <div className={`np-summary__body ${icon ? 'm-l-2' : ''}`}>\n <div className=\"np-summary__title d-flex\">\n <Body\n as=\"span\"\n role=\"heading\"\n aria-level={6}\n type={Typography.BODY_LARGE_BOLD}\n className=\"text-primary text-overflow-wrap m-b-1\"\n >\n {title}\n </Body>\n {info && (\n <Info\n aria-label={info['aria-label']}\n className=\"m-l-1 hidden-xs\"\n content={info.content}\n presentation={info.presentation}\n size={Size.LARGE}\n title={info.title}\n onClick={info.onClick}\n />\n )}\n </div>\n\n {description && (\n <Body\n as=\"span\"\n type={Typography.BODY_DEFAULT}\n className={`d-block text-overflow-wrap ${icon ? 'np-summary__description' : 'np-summary__description-icon'}`}\n >\n {description}\n </Body>\n )}\n {action && (\n <Link\n href={action.href}\n target={action.target}\n className=\"np-summary__action\"\n aria-label={action['aria-label']}\n onClick={action.onClick}\n >\n {action.text}\n </Link>\n )}\n </div>\n {info && (\n <Info\n aria-label={info['aria-label']}\n className=\"m-l-2 hidden-sm hidden-md hidden-lg hidden-xl\"\n content={info.content}\n presentation={info.presentation}\n size={Size.LARGE}\n title={info.title}\n onClick={info.onClick}\n />\n )}\n </Element>\n );\n};\n\nexport default Summary;\n"],"names":["BadgeIcons","Status","DONE","CheckCircleIcon","PENDING","PendingCircleIcon","statusLabels","NOT_DONE","statusMapping","Sentiment","POSITIVE","Summary","action","as","Element","className","content","description","help","icon","illustration","info","status","title","intl","useIntl","media","iconSize","props","size","cloneElement","Badge","_jsxs","clsx","formatMessage","messages","children","_jsx","StatusIcon","Size","SMALL","sentiment","Body","role","type","Typography","BODY_LARGE_BOLD","Info","presentation","LARGE","onClick","BODY_DEFAULT","Link","href","target","text"],"mappings":"
|
|
1
|
+
{"version":3,"file":"Summary.mjs","sources":["../../src/summary/Summary.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-assignment */\nimport {\n CheckCircleFill as CheckCircleIcon,\n ClockFill as PendingCircleIcon,\n} from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport { ElementType, cloneElement, ReactNode } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport Body from '../body';\nimport {\n Status,\n StatusDone,\n StatusNotDone,\n StatusPending,\n Size,\n Typography,\n Sentiment,\n} from '../common';\nimport Info, { InfoProps } from '../info';\nimport StatusIcon from '../statusIcon';\n\nimport messages from './Summary.messages';\nimport Link from '../link';\nimport type { AlertAction } from '../alert';\n\nconst BadgeIcons = {\n [Status.DONE]: CheckCircleIcon,\n [Status.PENDING]: PendingCircleIcon,\n};\n\nconst statusLabels = {\n [Status.NOT_DONE]: 'statusNotDone',\n [Status.DONE]: 'statusDone',\n [Status.PENDING]: 'statusPending',\n};\n\nconst statusMapping = {\n [Status.DONE]: Sentiment.POSITIVE,\n [Status.PENDING]: Sentiment.PENDING,\n};\n\nexport interface Props {\n /**\n * Action displayed at the bottom of the Summary\n */\n action?: AlertAction;\n /**\n * Decides which html element should wrap the Summary\n * @default 'div'\n */\n as?: ElementType;\n /**\n * Extra classes applied to Summary\n */\n className?: string;\n /**\n * @deprecated Use `description` instead.\n * @default null\n */\n content?: ReactNode;\n /**\n * Summary description\n */\n description?: ReactNode;\n /**\n * @deprecated Use `info` instead.\n */\n help?: {\n content: ReactNode;\n title?: ReactNode;\n };\n /**\n * Infos displayed on help Icon click inside Popover or Modal\n */\n info?: Pick<InfoProps, 'aria-label' | 'content' | 'onClick' | 'presentation' | 'title'>;\n /**\n * @deprecated Use `icon` instead.\n * @default null\n */\n illustration?: ReactNode;\n /**\n * Main Summary Icon\n */\n icon?: ReactNode;\n /**\n * Decides the badge applied to Icon\n */\n status?: StatusNotDone | StatusDone | StatusPending;\n /**\n * Summary title\n */\n title: ReactNode;\n}\n\n/**\n * @deprecated Use `<ListItem />` instead (run codemod to migrate: **`npx @wise/wds-codemods@latest list-item`**).\n * @deprecatedSince 46.104.0\n * @see [Source](../listItem/ListItem.tsx)\n * @see [Storybook](https://storybook.wise.design/?path=/docs/content-listitem--docs)\n * @see [Design docs](https://wise.design/components/list-item)\n * @see [Release notes](https://transferwise.atlassian.net/wiki/spaces/DS/pages/3647251055/List+Item+release+notes)\n */\nconst Summary = ({\n action,\n as: Element = 'div',\n className,\n content = null,\n description = content,\n help,\n icon,\n illustration = null,\n info = help,\n status,\n title,\n}: Props) => {\n const intl = useIntl();\n\n let media = illustration;\n if (icon) {\n // @ts-expect-error if icon is present it has props and size prop\n const iconSize = icon?.props?.size as number;\n\n media =\n iconSize !== 24\n ? // @ts-expect-error we need icon to adjust it's size\n cloneElement(icon, { size: 24 })\n : icon;\n }\n // @ts-expect-error Badge can be null, this is handled in code\n const Badge = status && BadgeIcons[status];\n\n return (\n <Element\n className={clsx('np-summary d-flex align-items-start', className)}\n // @ts-expect-error we check whether `status` is not null before index `statusLabels` and `messages`\n aria-label={status && intl.formatMessage(messages[statusLabels[status]])}\n >\n {icon && (\n <div className=\"np-summary__icon\">\n {media}\n {Badge && (\n <div>\n {/* @ts-expect-error it's okey to pass `undefined` into `sentiment` prop */}\n <StatusIcon size={Size.SMALL} sentiment={statusMapping[status]} />\n </div>\n )}\n </div>\n )}\n <div className={`np-summary__body ${icon ? 'm-l-2' : ''}`}>\n <div className=\"np-summary__title d-flex\">\n <Body\n as=\"span\"\n role=\"heading\"\n aria-level={6}\n type={Typography.BODY_LARGE_BOLD}\n className=\"text-primary text-overflow-wrap m-b-1\"\n >\n {title}\n </Body>\n {info && (\n <Info\n aria-label={info['aria-label']}\n className=\"m-l-1 hidden-xs\"\n content={info.content}\n presentation={info.presentation}\n size={Size.LARGE}\n title={info.title}\n onClick={info.onClick}\n />\n )}\n </div>\n\n {description && (\n <Body\n as=\"span\"\n type={Typography.BODY_DEFAULT}\n className={`d-block text-overflow-wrap ${icon ? 'np-summary__description' : 'np-summary__description-icon'}`}\n >\n {description}\n </Body>\n )}\n {action && (\n <Link\n href={action.href}\n target={action.target}\n className=\"np-summary__action\"\n aria-label={action['aria-label']}\n onClick={action.onClick}\n >\n {action.text}\n </Link>\n )}\n </div>\n {info && (\n <Info\n aria-label={info['aria-label']}\n className=\"m-l-2 hidden-sm hidden-md hidden-lg hidden-xl\"\n content={info.content}\n presentation={info.presentation}\n size={Size.LARGE}\n title={info.title}\n onClick={info.onClick}\n />\n )}\n </Element>\n );\n};\n\nexport default Summary;\n"],"names":["BadgeIcons","Status","DONE","CheckCircleIcon","PENDING","PendingCircleIcon","statusLabels","NOT_DONE","statusMapping","Sentiment","POSITIVE","Summary","action","as","Element","className","content","description","help","icon","illustration","info","status","title","intl","useIntl","media","iconSize","props","size","cloneElement","Badge","_jsxs","clsx","formatMessage","messages","children","_jsx","StatusIcon","Size","SMALL","sentiment","Body","role","type","Typography","BODY_LARGE_BOLD","Info","presentation","LARGE","onClick","BODY_DEFAULT","Link","href","target","text"],"mappings":"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"}
|
package/build/table/Table.js
CHANGED
|
@@ -28,6 +28,7 @@ require('../common/propsValues/variant.js');
|
|
|
28
28
|
require('../common/propsValues/scroll.js');
|
|
29
29
|
require('../common/propsValues/markdownNodeType.js');
|
|
30
30
|
require('../common/fileType.js');
|
|
31
|
+
require('@transferwise/formatting');
|
|
31
32
|
require('@transferwise/icons');
|
|
32
33
|
var clsx = require('clsx');
|
|
33
34
|
require('react');
|
package/build/table/Table.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Table.js","sources":["../../src/table/Table.tsx"],"sourcesContent":["import { useIntl } from 'react-intl';\nimport TableCell from './TableCell';\nimport TableHeader, { TableHeaderType } from './TableHeader';\nimport TableRow, { TableRowClickableType, TableRowType } from './TableRow';\nimport Alert from '../alert';\n\nimport messages from './Table.messages';\nimport Loader from '../loader';\nimport { Sentiment, Size } from '../common';\nimport StatusIcon from '../statusIcon';\nimport { clsx } from 'clsx';\nimport { useTheme } from '@wise/components-theming';\nimport Body from '../body';\n\nexport interface TableProps {\n 'aria-labelledby'?: string;\n data: {\n headers?: TableHeaderType[];\n rows?: TableRowType[] | TableRowClickableType[];\n onRowClick?: (rowData: TableRowType | TableRowClickableType) => void;\n };\n loading?: boolean;\n className?: string | undefined;\n fullWidth?: boolean;\n error?: {\n message?: string;\n action?: {\n href?: string;\n text?: string;\n };\n };\n}\n\nconst Table = ({\n 'aria-labelledby': ariaLabelledBy,\n data,\n loading,\n className,\n fullWidth = true,\n error,\n}: TableProps) => {\n const { formatMessage } = useIntl();\n const { theme } = useTheme();\n const isEmptyHeader = loading ?? (data?.headers && !data?.headers.length);\n\n const getRowLength = () => {\n const columnsLength = data?.headers?.length ?? 0;\n return data?.onRowClick ? columnsLength + 1 : columnsLength;\n };\n\n const getTableContent = () => {\n if (loading) {\n return (\n <TableRow>\n <TableCell>\n <Loader data-testid=\"np-table-loader\" />\n </TableCell>\n </TableRow>\n );\n }\n\n // Shows the `emptyData` message when there is no data to display\n if (!data?.rows?.length) {\n return (\n <TableRow>\n <TableCell colSpan={data?.headers?.length}>\n <div className=\"np-table-empty-data\" data-testid=\"np-table-empty-data\">\n <StatusIcon sentiment={Sentiment.WARNING} size={Size.MEDIUM} />\n <Body type=\"body-default-bold\">{formatMessage(messages.emptyData)}</Body>\n </div>\n </TableCell>\n </TableRow>\n );\n }\n\n return data?.rows?.map((rowData, rowIndex) => {\n return (\n <TableRow\n key={'table-row-'.concat(rowIndex.toString())}\n rowData={rowData}\n hasSeparator={data?.rows?.length ? data.rows.length - 1 !== rowIndex : false}\n onRowClick={data?.onRowClick}\n />\n );\n });\n };\n\n if (error) {\n return (\n <Alert\n className=\"np-table-error\"\n message={error.message}\n type={Sentiment.NEGATIVE}\n action={{\n href: error?.action?.href ?? '/',\n text: error?.action?.text ?? formatMessage(messages.refreshPage),\n }}\n data-testid=\"np-table-error\"\n />\n );\n }\n\n return (\n <>\n <div aria-live=\"polite\" className=\"sr-only\">\n {formatMessage(messages[loading ? 'loading' : 'loaded'])}\n </div>\n <div\n role={loading ? 'presentation' : 'region'}\n aria-labelledby={ariaLabelledBy}\n className={clsx('np-table-outer-container', className, {\n 'np-theme-personal': theme === 'bright-green',\n 'np-table-outer-container--center': !fullWidth,\n 'np-table-outer-container--full-width': fullWidth,\n })}\n tabIndex={0}\n data-testid=\"np-table-outer-container\"\n >\n <div\n className={clsx('np-table-container', {\n 'np-table-container--loading': loading,\n })}\n data-testid=\"np-table-container\"\n >\n <div className=\"np-table-inner-container\">\n <table className=\"np-table\">\n <thead aria-hidden={isEmptyHeader}>\n <tr>\n {isEmptyHeader ? (\n <TableHeader />\n ) : (\n data?.headers?.map((headerItem: TableHeaderType, index) => (\n <TableHeader\n key={headerItem.header?.concat(index.toString())}\n {...headerItem}\n />\n ))\n )}\n {data?.onRowClick && <TableHeader isActionHeader />}\n </tr>\n </thead>\n <tbody>\n <tr\n key=\"first-np-table-row--cosmetic\"\n aria-hidden=\"true\"\n className=\"np-table-row np-table-row--cosmetic\"\n >\n <td className=\"np-table-cell\" colSpan={getRowLength()} />\n </tr>\n {getTableContent()}\n <tr\n key=\"last-np-table-row--cosmetic\"\n aria-hidden=\"true\"\n className=\"np-table-row np-table-row--cosmetic\"\n >\n <td className=\"np-table-cell\" colSpan={getRowLength()} />\n </tr>\n </tbody>\n </table>\n </div>\n </div>\n </div>\n </>\n );\n};\n\nexport default Table;\n"],"names":["Table","ariaLabelledBy","data","loading","className","fullWidth","error","formatMessage","useIntl","theme","useTheme","isEmptyHeader","headers","length","getRowLength","columnsLength","onRowClick","getTableContent","_jsx","TableRow","children","TableCell","Loader","rows","colSpan","_jsxs","StatusIcon","sentiment","Sentiment","WARNING","size","Size","MEDIUM","Body","type","messages","emptyData","map","rowData","rowIndex","hasSeparator","concat","toString","Alert","message","NEGATIVE","action","href","text","refreshPage","_Fragment","role","clsx","tabIndex","TableHeader","headerItem","index","header","isActionHeader"],"mappings":"
|
|
1
|
+
{"version":3,"file":"Table.js","sources":["../../src/table/Table.tsx"],"sourcesContent":["import { useIntl } from 'react-intl';\nimport TableCell from './TableCell';\nimport TableHeader, { TableHeaderType } from './TableHeader';\nimport TableRow, { TableRowClickableType, TableRowType } from './TableRow';\nimport Alert from '../alert';\n\nimport messages from './Table.messages';\nimport Loader from '../loader';\nimport { Sentiment, Size } from '../common';\nimport StatusIcon from '../statusIcon';\nimport { clsx } from 'clsx';\nimport { useTheme } from '@wise/components-theming';\nimport Body from '../body';\n\nexport interface TableProps {\n 'aria-labelledby'?: string;\n data: {\n headers?: TableHeaderType[];\n rows?: TableRowType[] | TableRowClickableType[];\n onRowClick?: (rowData: TableRowType | TableRowClickableType) => void;\n };\n loading?: boolean;\n className?: string | undefined;\n fullWidth?: boolean;\n error?: {\n message?: string;\n action?: {\n href?: string;\n text?: string;\n };\n };\n}\n\nconst Table = ({\n 'aria-labelledby': ariaLabelledBy,\n data,\n loading,\n className,\n fullWidth = true,\n error,\n}: TableProps) => {\n const { formatMessage } = useIntl();\n const { theme } = useTheme();\n const isEmptyHeader = loading ?? (data?.headers && !data?.headers.length);\n\n const getRowLength = () => {\n const columnsLength = data?.headers?.length ?? 0;\n return data?.onRowClick ? columnsLength + 1 : columnsLength;\n };\n\n const getTableContent = () => {\n if (loading) {\n return (\n <TableRow>\n <TableCell>\n <Loader data-testid=\"np-table-loader\" />\n </TableCell>\n </TableRow>\n );\n }\n\n // Shows the `emptyData` message when there is no data to display\n if (!data?.rows?.length) {\n return (\n <TableRow>\n <TableCell colSpan={data?.headers?.length}>\n <div className=\"np-table-empty-data\" data-testid=\"np-table-empty-data\">\n <StatusIcon sentiment={Sentiment.WARNING} size={Size.MEDIUM} />\n <Body type=\"body-default-bold\">{formatMessage(messages.emptyData)}</Body>\n </div>\n </TableCell>\n </TableRow>\n );\n }\n\n return data?.rows?.map((rowData, rowIndex) => {\n return (\n <TableRow\n key={'table-row-'.concat(rowIndex.toString())}\n rowData={rowData}\n hasSeparator={data?.rows?.length ? data.rows.length - 1 !== rowIndex : false}\n onRowClick={data?.onRowClick}\n />\n );\n });\n };\n\n if (error) {\n return (\n <Alert\n className=\"np-table-error\"\n message={error.message}\n type={Sentiment.NEGATIVE}\n action={{\n href: error?.action?.href ?? '/',\n text: error?.action?.text ?? formatMessage(messages.refreshPage),\n }}\n data-testid=\"np-table-error\"\n />\n );\n }\n\n return (\n <>\n <div aria-live=\"polite\" className=\"sr-only\">\n {formatMessage(messages[loading ? 'loading' : 'loaded'])}\n </div>\n <div\n role={loading ? 'presentation' : 'region'}\n aria-labelledby={ariaLabelledBy}\n className={clsx('np-table-outer-container', className, {\n 'np-theme-personal': theme === 'bright-green',\n 'np-table-outer-container--center': !fullWidth,\n 'np-table-outer-container--full-width': fullWidth,\n })}\n tabIndex={0}\n data-testid=\"np-table-outer-container\"\n >\n <div\n className={clsx('np-table-container', {\n 'np-table-container--loading': loading,\n })}\n data-testid=\"np-table-container\"\n >\n <div className=\"np-table-inner-container\">\n <table className=\"np-table\">\n <thead aria-hidden={isEmptyHeader}>\n <tr>\n {isEmptyHeader ? (\n <TableHeader />\n ) : (\n data?.headers?.map((headerItem: TableHeaderType, index) => (\n <TableHeader\n key={headerItem.header?.concat(index.toString())}\n {...headerItem}\n />\n ))\n )}\n {data?.onRowClick && <TableHeader isActionHeader />}\n </tr>\n </thead>\n <tbody>\n <tr\n key=\"first-np-table-row--cosmetic\"\n aria-hidden=\"true\"\n className=\"np-table-row np-table-row--cosmetic\"\n >\n <td className=\"np-table-cell\" colSpan={getRowLength()} />\n </tr>\n {getTableContent()}\n <tr\n key=\"last-np-table-row--cosmetic\"\n aria-hidden=\"true\"\n className=\"np-table-row np-table-row--cosmetic\"\n >\n <td className=\"np-table-cell\" colSpan={getRowLength()} />\n </tr>\n </tbody>\n </table>\n </div>\n </div>\n </div>\n </>\n );\n};\n\nexport default Table;\n"],"names":["Table","ariaLabelledBy","data","loading","className","fullWidth","error","formatMessage","useIntl","theme","useTheme","isEmptyHeader","headers","length","getRowLength","columnsLength","onRowClick","getTableContent","_jsx","TableRow","children","TableCell","Loader","rows","colSpan","_jsxs","StatusIcon","sentiment","Sentiment","WARNING","size","Size","MEDIUM","Body","type","messages","emptyData","map","rowData","rowIndex","hasSeparator","concat","toString","Alert","message","NEGATIVE","action","href","text","refreshPage","_Fragment","role","clsx","tabIndex","TableHeader","headerItem","index","header","isActionHeader"],"mappings":"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"}
|
package/build/table/Table.mjs
CHANGED
|
@@ -24,6 +24,7 @@ import '../common/propsValues/variant.mjs';
|
|
|
24
24
|
import '../common/propsValues/scroll.mjs';
|
|
25
25
|
import '../common/propsValues/markdownNodeType.mjs';
|
|
26
26
|
import '../common/fileType.mjs';
|
|
27
|
+
import '@transferwise/formatting';
|
|
27
28
|
import '@transferwise/icons';
|
|
28
29
|
import { clsx } from 'clsx';
|
|
29
30
|
import 'react';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Table.mjs","sources":["../../src/table/Table.tsx"],"sourcesContent":["import { useIntl } from 'react-intl';\nimport TableCell from './TableCell';\nimport TableHeader, { TableHeaderType } from './TableHeader';\nimport TableRow, { TableRowClickableType, TableRowType } from './TableRow';\nimport Alert from '../alert';\n\nimport messages from './Table.messages';\nimport Loader from '../loader';\nimport { Sentiment, Size } from '../common';\nimport StatusIcon from '../statusIcon';\nimport { clsx } from 'clsx';\nimport { useTheme } from '@wise/components-theming';\nimport Body from '../body';\n\nexport interface TableProps {\n 'aria-labelledby'?: string;\n data: {\n headers?: TableHeaderType[];\n rows?: TableRowType[] | TableRowClickableType[];\n onRowClick?: (rowData: TableRowType | TableRowClickableType) => void;\n };\n loading?: boolean;\n className?: string | undefined;\n fullWidth?: boolean;\n error?: {\n message?: string;\n action?: {\n href?: string;\n text?: string;\n };\n };\n}\n\nconst Table = ({\n 'aria-labelledby': ariaLabelledBy,\n data,\n loading,\n className,\n fullWidth = true,\n error,\n}: TableProps) => {\n const { formatMessage } = useIntl();\n const { theme } = useTheme();\n const isEmptyHeader = loading ?? (data?.headers && !data?.headers.length);\n\n const getRowLength = () => {\n const columnsLength = data?.headers?.length ?? 0;\n return data?.onRowClick ? columnsLength + 1 : columnsLength;\n };\n\n const getTableContent = () => {\n if (loading) {\n return (\n <TableRow>\n <TableCell>\n <Loader data-testid=\"np-table-loader\" />\n </TableCell>\n </TableRow>\n );\n }\n\n // Shows the `emptyData` message when there is no data to display\n if (!data?.rows?.length) {\n return (\n <TableRow>\n <TableCell colSpan={data?.headers?.length}>\n <div className=\"np-table-empty-data\" data-testid=\"np-table-empty-data\">\n <StatusIcon sentiment={Sentiment.WARNING} size={Size.MEDIUM} />\n <Body type=\"body-default-bold\">{formatMessage(messages.emptyData)}</Body>\n </div>\n </TableCell>\n </TableRow>\n );\n }\n\n return data?.rows?.map((rowData, rowIndex) => {\n return (\n <TableRow\n key={'table-row-'.concat(rowIndex.toString())}\n rowData={rowData}\n hasSeparator={data?.rows?.length ? data.rows.length - 1 !== rowIndex : false}\n onRowClick={data?.onRowClick}\n />\n );\n });\n };\n\n if (error) {\n return (\n <Alert\n className=\"np-table-error\"\n message={error.message}\n type={Sentiment.NEGATIVE}\n action={{\n href: error?.action?.href ?? '/',\n text: error?.action?.text ?? formatMessage(messages.refreshPage),\n }}\n data-testid=\"np-table-error\"\n />\n );\n }\n\n return (\n <>\n <div aria-live=\"polite\" className=\"sr-only\">\n {formatMessage(messages[loading ? 'loading' : 'loaded'])}\n </div>\n <div\n role={loading ? 'presentation' : 'region'}\n aria-labelledby={ariaLabelledBy}\n className={clsx('np-table-outer-container', className, {\n 'np-theme-personal': theme === 'bright-green',\n 'np-table-outer-container--center': !fullWidth,\n 'np-table-outer-container--full-width': fullWidth,\n })}\n tabIndex={0}\n data-testid=\"np-table-outer-container\"\n >\n <div\n className={clsx('np-table-container', {\n 'np-table-container--loading': loading,\n })}\n data-testid=\"np-table-container\"\n >\n <div className=\"np-table-inner-container\">\n <table className=\"np-table\">\n <thead aria-hidden={isEmptyHeader}>\n <tr>\n {isEmptyHeader ? (\n <TableHeader />\n ) : (\n data?.headers?.map((headerItem: TableHeaderType, index) => (\n <TableHeader\n key={headerItem.header?.concat(index.toString())}\n {...headerItem}\n />\n ))\n )}\n {data?.onRowClick && <TableHeader isActionHeader />}\n </tr>\n </thead>\n <tbody>\n <tr\n key=\"first-np-table-row--cosmetic\"\n aria-hidden=\"true\"\n className=\"np-table-row np-table-row--cosmetic\"\n >\n <td className=\"np-table-cell\" colSpan={getRowLength()} />\n </tr>\n {getTableContent()}\n <tr\n key=\"last-np-table-row--cosmetic\"\n aria-hidden=\"true\"\n className=\"np-table-row np-table-row--cosmetic\"\n >\n <td className=\"np-table-cell\" colSpan={getRowLength()} />\n </tr>\n </tbody>\n </table>\n </div>\n </div>\n </div>\n </>\n );\n};\n\nexport default Table;\n"],"names":["Table","ariaLabelledBy","data","loading","className","fullWidth","error","formatMessage","useIntl","theme","useTheme","isEmptyHeader","headers","length","getRowLength","columnsLength","onRowClick","getTableContent","_jsx","TableRow","children","TableCell","Loader","rows","colSpan","_jsxs","StatusIcon","sentiment","Sentiment","WARNING","size","Size","MEDIUM","Body","type","messages","emptyData","map","rowData","rowIndex","hasSeparator","concat","toString","Alert","message","NEGATIVE","action","href","text","refreshPage","_Fragment","role","clsx","tabIndex","TableHeader","headerItem","index","header","isActionHeader"],"mappings":"
|
|
1
|
+
{"version":3,"file":"Table.mjs","sources":["../../src/table/Table.tsx"],"sourcesContent":["import { useIntl } from 'react-intl';\nimport TableCell from './TableCell';\nimport TableHeader, { TableHeaderType } from './TableHeader';\nimport TableRow, { TableRowClickableType, TableRowType } from './TableRow';\nimport Alert from '../alert';\n\nimport messages from './Table.messages';\nimport Loader from '../loader';\nimport { Sentiment, Size } from '../common';\nimport StatusIcon from '../statusIcon';\nimport { clsx } from 'clsx';\nimport { useTheme } from '@wise/components-theming';\nimport Body from '../body';\n\nexport interface TableProps {\n 'aria-labelledby'?: string;\n data: {\n headers?: TableHeaderType[];\n rows?: TableRowType[] | TableRowClickableType[];\n onRowClick?: (rowData: TableRowType | TableRowClickableType) => void;\n };\n loading?: boolean;\n className?: string | undefined;\n fullWidth?: boolean;\n error?: {\n message?: string;\n action?: {\n href?: string;\n text?: string;\n };\n };\n}\n\nconst Table = ({\n 'aria-labelledby': ariaLabelledBy,\n data,\n loading,\n className,\n fullWidth = true,\n error,\n}: TableProps) => {\n const { formatMessage } = useIntl();\n const { theme } = useTheme();\n const isEmptyHeader = loading ?? (data?.headers && !data?.headers.length);\n\n const getRowLength = () => {\n const columnsLength = data?.headers?.length ?? 0;\n return data?.onRowClick ? columnsLength + 1 : columnsLength;\n };\n\n const getTableContent = () => {\n if (loading) {\n return (\n <TableRow>\n <TableCell>\n <Loader data-testid=\"np-table-loader\" />\n </TableCell>\n </TableRow>\n );\n }\n\n // Shows the `emptyData` message when there is no data to display\n if (!data?.rows?.length) {\n return (\n <TableRow>\n <TableCell colSpan={data?.headers?.length}>\n <div className=\"np-table-empty-data\" data-testid=\"np-table-empty-data\">\n <StatusIcon sentiment={Sentiment.WARNING} size={Size.MEDIUM} />\n <Body type=\"body-default-bold\">{formatMessage(messages.emptyData)}</Body>\n </div>\n </TableCell>\n </TableRow>\n );\n }\n\n return data?.rows?.map((rowData, rowIndex) => {\n return (\n <TableRow\n key={'table-row-'.concat(rowIndex.toString())}\n rowData={rowData}\n hasSeparator={data?.rows?.length ? data.rows.length - 1 !== rowIndex : false}\n onRowClick={data?.onRowClick}\n />\n );\n });\n };\n\n if (error) {\n return (\n <Alert\n className=\"np-table-error\"\n message={error.message}\n type={Sentiment.NEGATIVE}\n action={{\n href: error?.action?.href ?? '/',\n text: error?.action?.text ?? formatMessage(messages.refreshPage),\n }}\n data-testid=\"np-table-error\"\n />\n );\n }\n\n return (\n <>\n <div aria-live=\"polite\" className=\"sr-only\">\n {formatMessage(messages[loading ? 'loading' : 'loaded'])}\n </div>\n <div\n role={loading ? 'presentation' : 'region'}\n aria-labelledby={ariaLabelledBy}\n className={clsx('np-table-outer-container', className, {\n 'np-theme-personal': theme === 'bright-green',\n 'np-table-outer-container--center': !fullWidth,\n 'np-table-outer-container--full-width': fullWidth,\n })}\n tabIndex={0}\n data-testid=\"np-table-outer-container\"\n >\n <div\n className={clsx('np-table-container', {\n 'np-table-container--loading': loading,\n })}\n data-testid=\"np-table-container\"\n >\n <div className=\"np-table-inner-container\">\n <table className=\"np-table\">\n <thead aria-hidden={isEmptyHeader}>\n <tr>\n {isEmptyHeader ? (\n <TableHeader />\n ) : (\n data?.headers?.map((headerItem: TableHeaderType, index) => (\n <TableHeader\n key={headerItem.header?.concat(index.toString())}\n {...headerItem}\n />\n ))\n )}\n {data?.onRowClick && <TableHeader isActionHeader />}\n </tr>\n </thead>\n <tbody>\n <tr\n key=\"first-np-table-row--cosmetic\"\n aria-hidden=\"true\"\n className=\"np-table-row np-table-row--cosmetic\"\n >\n <td className=\"np-table-cell\" colSpan={getRowLength()} />\n </tr>\n {getTableContent()}\n <tr\n key=\"last-np-table-row--cosmetic\"\n aria-hidden=\"true\"\n className=\"np-table-row np-table-row--cosmetic\"\n >\n <td className=\"np-table-cell\" colSpan={getRowLength()} />\n </tr>\n </tbody>\n </table>\n </div>\n </div>\n </div>\n </>\n );\n};\n\nexport default Table;\n"],"names":["Table","ariaLabelledBy","data","loading","className","fullWidth","error","formatMessage","useIntl","theme","useTheme","isEmptyHeader","headers","length","getRowLength","columnsLength","onRowClick","getTableContent","_jsx","TableRow","children","TableCell","Loader","rows","colSpan","_jsxs","StatusIcon","sentiment","Sentiment","WARNING","size","Size","MEDIUM","Body","type","messages","emptyData","map","rowData","rowIndex","hasSeparator","concat","toString","Alert","message","NEGATIVE","action","href","text","refreshPage","_Fragment","role","clsx","tabIndex","TableHeader","headerItem","index","header","isActionHeader"],"mappings":"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"}
|
package/build/table/TableRow.js
CHANGED
|
@@ -24,6 +24,7 @@ require('../common/propsValues/variant.js');
|
|
|
24
24
|
require('../common/propsValues/scroll.js');
|
|
25
25
|
require('../common/propsValues/markdownNodeType.js');
|
|
26
26
|
require('../common/fileType.js');
|
|
27
|
+
require('@transferwise/formatting');
|
|
27
28
|
require('@transferwise/icons');
|
|
28
29
|
var clsx = require('clsx');
|
|
29
30
|
require('react-intl');
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TableRow.js","sources":["../../src/table/TableRow.tsx"],"sourcesContent":["import React from 'react';\nimport TableCell, { TableCellProps } from './TableCell';\nimport Chevron from '../chevron';\nimport { Position } from '../common';\nimport { clsx } from 'clsx';\n\nexport interface TableRowType {\n cells?: TableCellProps[];\n}\n\nexport interface TableRowClickableType extends TableRowType {\n id: number | string; // `id` is mandatory for clickable rows\n}\n\nexport interface TableRowProps {\n rowData?: TableRowType | TableRowClickableType;\n hasSeparator?: boolean;\n children?: React.ReactNode;\n onRowClick?: (rowData: TableRowType | TableRowClickableType) => void;\n}\n\nconst TableRow = ({ rowData, hasSeparator = false, children, onRowClick }: TableRowProps) => {\n return (\n <>\n <tr\n className={clsx('np-table-row', { 'np-table-row--clickable': !!onRowClick })}\n data-testid=\"np-table-row\"\n role={onRowClick ? 'button' : undefined}\n tabIndex={0}\n onClick={onRowClick && rowData ? () => onRowClick(rowData) : undefined}\n onKeyDown={({ key }) => {\n if (onRowClick && rowData && key === 'Enter') {\n onRowClick(rowData);\n }\n }}\n >\n {rowData?.cells\n ? rowData?.cells?.map((item, index) => {\n const itemIndex = item.cell?.text ? item.cell?.text.concat(index.toString()) : index;\n return <TableCell key={itemIndex} {...item} />;\n })\n : children}\n {onRowClick && (\n <TableCell className=\"np-table-cell--action\">\n <div aria-hidden=\"true\">\n <Chevron orientation={Position.RIGHT} />\n </div>\n </TableCell>\n )}\n </tr>\n {hasSeparator && (\n <tr\n aria-hidden=\"true\"\n className=\"np-table-row np-table-row--separator\"\n data-testid=\"np-table-row--separator\"\n >\n <td\n className=\"np-table-cell np-table-cell--cosmetic\"\n colSpan={onRowClick ? Number(rowData?.cells?.length) + 1 : rowData?.cells?.length}\n data-testid=\"np-table-cell--cosmetic\"\n >\n <div className=\"np-table-cell-separator\" data-testid=\"np-table-cell-separator\" />\n </td>\n </tr>\n )}\n </>\n );\n};\n\nexport default TableRow;\n"],"names":["TableRow","rowData","hasSeparator","children","onRowClick","_jsxs","_Fragment","className","clsx","role","undefined","tabIndex","onClick","onKeyDown","key","cells","map","item","index","itemIndex","cell","text","concat","toString","_jsx","TableCell","Chevron","orientation","Position","RIGHT","colSpan","Number","length"],"mappings":"
|
|
1
|
+
{"version":3,"file":"TableRow.js","sources":["../../src/table/TableRow.tsx"],"sourcesContent":["import React from 'react';\nimport TableCell, { TableCellProps } from './TableCell';\nimport Chevron from '../chevron';\nimport { Position } from '../common';\nimport { clsx } from 'clsx';\n\nexport interface TableRowType {\n cells?: TableCellProps[];\n}\n\nexport interface TableRowClickableType extends TableRowType {\n id: number | string; // `id` is mandatory for clickable rows\n}\n\nexport interface TableRowProps {\n rowData?: TableRowType | TableRowClickableType;\n hasSeparator?: boolean;\n children?: React.ReactNode;\n onRowClick?: (rowData: TableRowType | TableRowClickableType) => void;\n}\n\nconst TableRow = ({ rowData, hasSeparator = false, children, onRowClick }: TableRowProps) => {\n return (\n <>\n <tr\n className={clsx('np-table-row', { 'np-table-row--clickable': !!onRowClick })}\n data-testid=\"np-table-row\"\n role={onRowClick ? 'button' : undefined}\n tabIndex={0}\n onClick={onRowClick && rowData ? () => onRowClick(rowData) : undefined}\n onKeyDown={({ key }) => {\n if (onRowClick && rowData && key === 'Enter') {\n onRowClick(rowData);\n }\n }}\n >\n {rowData?.cells\n ? rowData?.cells?.map((item, index) => {\n const itemIndex = item.cell?.text ? item.cell?.text.concat(index.toString()) : index;\n return <TableCell key={itemIndex} {...item} />;\n })\n : children}\n {onRowClick && (\n <TableCell className=\"np-table-cell--action\">\n <div aria-hidden=\"true\">\n <Chevron orientation={Position.RIGHT} />\n </div>\n </TableCell>\n )}\n </tr>\n {hasSeparator && (\n <tr\n aria-hidden=\"true\"\n className=\"np-table-row np-table-row--separator\"\n data-testid=\"np-table-row--separator\"\n >\n <td\n className=\"np-table-cell np-table-cell--cosmetic\"\n colSpan={onRowClick ? Number(rowData?.cells?.length) + 1 : rowData?.cells?.length}\n data-testid=\"np-table-cell--cosmetic\"\n >\n <div className=\"np-table-cell-separator\" data-testid=\"np-table-cell-separator\" />\n </td>\n </tr>\n )}\n </>\n );\n};\n\nexport default TableRow;\n"],"names":["TableRow","rowData","hasSeparator","children","onRowClick","_jsxs","_Fragment","className","clsx","role","undefined","tabIndex","onClick","onKeyDown","key","cells","map","item","index","itemIndex","cell","text","concat","toString","_jsx","TableCell","Chevron","orientation","Position","RIGHT","colSpan","Number","length"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqBA,MAAMA,QAAQ,GAAGA,CAAC;EAAEC,OAAO;AAAEC,EAAAA,YAAY,GAAG,KAAK;EAAEC,QAAQ;AAAEC,EAAAA;AAAU,CAAiB,KAAI;EAC1F,oBACEC,eAAA,CAAAC,mBAAA,EAAA;AAAAH,IAAAA,QAAA,gBACEE,eAAA,CAAA,IAAA,EAAA;AACEE,MAAAA,SAAS,EAAEC,SAAI,CAAC,cAAc,EAAE;QAAE,yBAAyB,EAAE,CAAC,CAACJ;AAAU,OAAE,CAAE;AAC7E,MAAA,aAAA,EAAY,cAAc;AAC1BK,MAAAA,IAAI,EAAEL,UAAU,GAAG,QAAQ,GAAGM,SAAU;AACxCC,MAAAA,QAAQ,EAAE,CAAE;MACZC,OAAO,EAAER,UAAU,IAAIH,OAAO,GAAG,MAAMG,UAAU,CAACH,OAAO,CAAC,GAAGS,SAAU;AACvEG,MAAAA,SAAS,EAAEA,CAAC;AAAEC,QAAAA;AAAG,OAAE,KAAI;AACrB,QAAA,IAAIV,UAAU,IAAIH,OAAO,IAAIa,GAAG,KAAK,OAAO,EAAE;UAC5CV,UAAU,CAACH,OAAO,CAAC;AACrB,QAAA;MACF,CAAE;AAAAE,MAAAA,QAAA,EAAA,CAEDF,OAAO,EAAEc,KAAK,GACXd,OAAO,EAAEc,KAAK,EAAEC,GAAG,CAAC,CAACC,IAAI,EAAEC,KAAK,KAAI;QAClC,MAAMC,SAAS,GAAGF,IAAI,CAACG,IAAI,EAAEC,IAAI,GAAGJ,IAAI,CAACG,IAAI,EAAEC,IAAI,CAACC,MAAM,CAACJ,KAAK,CAACK,QAAQ,EAAE,CAAC,GAAGL,KAAK;QACpF,oBAAOM,cAAA,CAACC,iBAAS,EAAA;UAAA,GAAqBR;AAAI,SAAA,EAAnBE,UAAuB;MAChD,CAAC,CAAC,GACFhB,QAAQ,EACXC,UAAU,iBACToB,cAAA,CAACC,iBAAS,EAAA;AAAClB,QAAAA,SAAS,EAAC,uBAAuB;AAAAJ,QAAAA,QAAA,eAC1CqB,cAAA,CAAA,KAAA,EAAA;AAAK,UAAA,aAAA,EAAY,MAAM;UAAArB,QAAA,eACrBqB,cAAA,CAACE,eAAO,EAAA;YAACC,WAAW,EAAEC,iBAAQ,CAACC;WAAM;SAClC;AACP,OAAW,CACZ;AAAA,KACC,CACJ,EAAC3B,YAAY,iBACXsB,cAAA,CAAA,IAAA,EAAA;AACE,MAAA,aAAA,EAAY,MAAM;AAClBjB,MAAAA,SAAS,EAAC,sCAAsC;AAChD,MAAA,aAAA,EAAY,yBAAyB;AAAAJ,MAAAA,QAAA,eAErCqB,cAAA,CAAA,IAAA,EAAA;AACEjB,QAAAA,SAAS,EAAC,uCAAuC;AACjDuB,QAAAA,OAAO,EAAE1B,UAAU,GAAG2B,MAAM,CAAC9B,OAAO,EAAEc,KAAK,EAAEiB,MAAM,CAAC,GAAG,CAAC,GAAG/B,OAAO,EAAEc,KAAK,EAAEiB,MAAO;AAClF,QAAA,aAAA,EAAY,yBAAyB;AAAA7B,QAAAA,QAAA,eAErCqB,cAAA,CAAA,KAAA,EAAA;AAAKjB,UAAAA,SAAS,EAAC,yBAAyB;UAAC,aAAA,EAAY;SAAyB;OAC5E;AACN,KAAI,CACL;AAAA,GACH,CAAG;AAEP;;;;"}
|
package/build/table/TableRow.mjs
CHANGED
|
@@ -20,6 +20,7 @@ import '../common/propsValues/variant.mjs';
|
|
|
20
20
|
import '../common/propsValues/scroll.mjs';
|
|
21
21
|
import '../common/propsValues/markdownNodeType.mjs';
|
|
22
22
|
import '../common/fileType.mjs';
|
|
23
|
+
import '@transferwise/formatting';
|
|
23
24
|
import '@transferwise/icons';
|
|
24
25
|
import { clsx } from 'clsx';
|
|
25
26
|
import 'react-intl';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TableRow.mjs","sources":["../../src/table/TableRow.tsx"],"sourcesContent":["import React from 'react';\nimport TableCell, { TableCellProps } from './TableCell';\nimport Chevron from '../chevron';\nimport { Position } from '../common';\nimport { clsx } from 'clsx';\n\nexport interface TableRowType {\n cells?: TableCellProps[];\n}\n\nexport interface TableRowClickableType extends TableRowType {\n id: number | string; // `id` is mandatory for clickable rows\n}\n\nexport interface TableRowProps {\n rowData?: TableRowType | TableRowClickableType;\n hasSeparator?: boolean;\n children?: React.ReactNode;\n onRowClick?: (rowData: TableRowType | TableRowClickableType) => void;\n}\n\nconst TableRow = ({ rowData, hasSeparator = false, children, onRowClick }: TableRowProps) => {\n return (\n <>\n <tr\n className={clsx('np-table-row', { 'np-table-row--clickable': !!onRowClick })}\n data-testid=\"np-table-row\"\n role={onRowClick ? 'button' : undefined}\n tabIndex={0}\n onClick={onRowClick && rowData ? () => onRowClick(rowData) : undefined}\n onKeyDown={({ key }) => {\n if (onRowClick && rowData && key === 'Enter') {\n onRowClick(rowData);\n }\n }}\n >\n {rowData?.cells\n ? rowData?.cells?.map((item, index) => {\n const itemIndex = item.cell?.text ? item.cell?.text.concat(index.toString()) : index;\n return <TableCell key={itemIndex} {...item} />;\n })\n : children}\n {onRowClick && (\n <TableCell className=\"np-table-cell--action\">\n <div aria-hidden=\"true\">\n <Chevron orientation={Position.RIGHT} />\n </div>\n </TableCell>\n )}\n </tr>\n {hasSeparator && (\n <tr\n aria-hidden=\"true\"\n className=\"np-table-row np-table-row--separator\"\n data-testid=\"np-table-row--separator\"\n >\n <td\n className=\"np-table-cell np-table-cell--cosmetic\"\n colSpan={onRowClick ? Number(rowData?.cells?.length) + 1 : rowData?.cells?.length}\n data-testid=\"np-table-cell--cosmetic\"\n >\n <div className=\"np-table-cell-separator\" data-testid=\"np-table-cell-separator\" />\n </td>\n </tr>\n )}\n </>\n );\n};\n\nexport default TableRow;\n"],"names":["TableRow","rowData","hasSeparator","children","onRowClick","_jsxs","_Fragment","className","clsx","role","undefined","tabIndex","onClick","onKeyDown","key","cells","map","item","index","itemIndex","cell","text","concat","toString","_jsx","TableCell","Chevron","orientation","Position","RIGHT","colSpan","Number","length"],"mappings":"
|
|
1
|
+
{"version":3,"file":"TableRow.mjs","sources":["../../src/table/TableRow.tsx"],"sourcesContent":["import React from 'react';\nimport TableCell, { TableCellProps } from './TableCell';\nimport Chevron from '../chevron';\nimport { Position } from '../common';\nimport { clsx } from 'clsx';\n\nexport interface TableRowType {\n cells?: TableCellProps[];\n}\n\nexport interface TableRowClickableType extends TableRowType {\n id: number | string; // `id` is mandatory for clickable rows\n}\n\nexport interface TableRowProps {\n rowData?: TableRowType | TableRowClickableType;\n hasSeparator?: boolean;\n children?: React.ReactNode;\n onRowClick?: (rowData: TableRowType | TableRowClickableType) => void;\n}\n\nconst TableRow = ({ rowData, hasSeparator = false, children, onRowClick }: TableRowProps) => {\n return (\n <>\n <tr\n className={clsx('np-table-row', { 'np-table-row--clickable': !!onRowClick })}\n data-testid=\"np-table-row\"\n role={onRowClick ? 'button' : undefined}\n tabIndex={0}\n onClick={onRowClick && rowData ? () => onRowClick(rowData) : undefined}\n onKeyDown={({ key }) => {\n if (onRowClick && rowData && key === 'Enter') {\n onRowClick(rowData);\n }\n }}\n >\n {rowData?.cells\n ? rowData?.cells?.map((item, index) => {\n const itemIndex = item.cell?.text ? item.cell?.text.concat(index.toString()) : index;\n return <TableCell key={itemIndex} {...item} />;\n })\n : children}\n {onRowClick && (\n <TableCell className=\"np-table-cell--action\">\n <div aria-hidden=\"true\">\n <Chevron orientation={Position.RIGHT} />\n </div>\n </TableCell>\n )}\n </tr>\n {hasSeparator && (\n <tr\n aria-hidden=\"true\"\n className=\"np-table-row np-table-row--separator\"\n data-testid=\"np-table-row--separator\"\n >\n <td\n className=\"np-table-cell np-table-cell--cosmetic\"\n colSpan={onRowClick ? Number(rowData?.cells?.length) + 1 : rowData?.cells?.length}\n data-testid=\"np-table-cell--cosmetic\"\n >\n <div className=\"np-table-cell-separator\" data-testid=\"np-table-cell-separator\" />\n </td>\n </tr>\n )}\n </>\n );\n};\n\nexport default TableRow;\n"],"names":["TableRow","rowData","hasSeparator","children","onRowClick","_jsxs","_Fragment","className","clsx","role","undefined","tabIndex","onClick","onKeyDown","key","cells","map","item","index","itemIndex","cell","text","concat","toString","_jsx","TableCell","Chevron","orientation","Position","RIGHT","colSpan","Number","length"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqBA,MAAMA,QAAQ,GAAGA,CAAC;EAAEC,OAAO;AAAEC,EAAAA,YAAY,GAAG,KAAK;EAAEC,QAAQ;AAAEC,EAAAA;AAAU,CAAiB,KAAI;EAC1F,oBACEC,IAAA,CAAAC,QAAA,EAAA;AAAAH,IAAAA,QAAA,gBACEE,IAAA,CAAA,IAAA,EAAA;AACEE,MAAAA,SAAS,EAAEC,IAAI,CAAC,cAAc,EAAE;QAAE,yBAAyB,EAAE,CAAC,CAACJ;AAAU,OAAE,CAAE;AAC7E,MAAA,aAAA,EAAY,cAAc;AAC1BK,MAAAA,IAAI,EAAEL,UAAU,GAAG,QAAQ,GAAGM,SAAU;AACxCC,MAAAA,QAAQ,EAAE,CAAE;MACZC,OAAO,EAAER,UAAU,IAAIH,OAAO,GAAG,MAAMG,UAAU,CAACH,OAAO,CAAC,GAAGS,SAAU;AACvEG,MAAAA,SAAS,EAAEA,CAAC;AAAEC,QAAAA;AAAG,OAAE,KAAI;AACrB,QAAA,IAAIV,UAAU,IAAIH,OAAO,IAAIa,GAAG,KAAK,OAAO,EAAE;UAC5CV,UAAU,CAACH,OAAO,CAAC;AACrB,QAAA;MACF,CAAE;AAAAE,MAAAA,QAAA,EAAA,CAEDF,OAAO,EAAEc,KAAK,GACXd,OAAO,EAAEc,KAAK,EAAEC,GAAG,CAAC,CAACC,IAAI,EAAEC,KAAK,KAAI;QAClC,MAAMC,SAAS,GAAGF,IAAI,CAACG,IAAI,EAAEC,IAAI,GAAGJ,IAAI,CAACG,IAAI,EAAEC,IAAI,CAACC,MAAM,CAACJ,KAAK,CAACK,QAAQ,EAAE,CAAC,GAAGL,KAAK;QACpF,oBAAOM,GAAA,CAACC,SAAS,EAAA;UAAA,GAAqBR;AAAI,SAAA,EAAnBE,UAAuB;MAChD,CAAC,CAAC,GACFhB,QAAQ,EACXC,UAAU,iBACToB,GAAA,CAACC,SAAS,EAAA;AAAClB,QAAAA,SAAS,EAAC,uBAAuB;AAAAJ,QAAAA,QAAA,eAC1CqB,GAAA,CAAA,KAAA,EAAA;AAAK,UAAA,aAAA,EAAY,MAAM;UAAArB,QAAA,eACrBqB,GAAA,CAACE,OAAO,EAAA;YAACC,WAAW,EAAEC,QAAQ,CAACC;WAAM;SAClC;AACP,OAAW,CACZ;AAAA,KACC,CACJ,EAAC3B,YAAY,iBACXsB,GAAA,CAAA,IAAA,EAAA;AACE,MAAA,aAAA,EAAY,MAAM;AAClBjB,MAAAA,SAAS,EAAC,sCAAsC;AAChD,MAAA,aAAA,EAAY,yBAAyB;AAAAJ,MAAAA,QAAA,eAErCqB,GAAA,CAAA,IAAA,EAAA;AACEjB,QAAAA,SAAS,EAAC,uCAAuC;AACjDuB,QAAAA,OAAO,EAAE1B,UAAU,GAAG2B,MAAM,CAAC9B,OAAO,EAAEc,KAAK,EAAEiB,MAAM,CAAC,GAAG,CAAC,GAAG/B,OAAO,EAAEc,KAAK,EAAEiB,MAAO;AAClF,QAAA,aAAA,EAAY,yBAAyB;AAAA7B,QAAAA,QAAA,eAErCqB,GAAA,CAAA,KAAA,EAAA;AAAKjB,UAAAA,SAAS,EAAC,yBAAyB;UAAC,aAAA,EAAY;SAAyB;OAC5E;AACN,KAAI,CACL;AAAA,GACH,CAAG;AAEP;;;;"}
|
|
@@ -25,6 +25,7 @@ require('../common/propsValues/variant.js');
|
|
|
25
25
|
require('../common/propsValues/scroll.js');
|
|
26
26
|
require('../common/propsValues/markdownNodeType.js');
|
|
27
27
|
require('../common/fileType.js');
|
|
28
|
+
require('@transferwise/formatting');
|
|
28
29
|
require('react-intl');
|
|
29
30
|
require('../common/closeButton/CloseButton.messages.js');
|
|
30
31
|
var jsxRuntime = require('react/jsx-runtime');
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TableStatusText.js","sources":["../../src/table/TableStatusText.tsx"],"sourcesContent":["import { AlertCircle, CheckCircle } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport React from 'react';\nimport Body from '../body';\nimport { Typography } from '../common';\n\nexport interface TableStatusTextProps {\n text: string | React.ReactNode;\n className?: string;\n status?: 'success' | 'error';\n typography?: 'default' | 'default-bold';\n}\n\nconst TableStatusText = ({\n text,\n className,\n status,\n typography = 'default',\n}: TableStatusTextProps) => {\n const typographyType =\n (status ?? typography === 'default-bold')\n ? Typography.BODY_DEFAULT_BOLD\n : Typography.BODY_DEFAULT;\n\n return (\n <Body\n type={typographyType}\n className={clsx(className, {\n 'np-table-content--success': status === 'success',\n 'np-table-content--error': status === 'error',\n })}\n >\n {text}\n {status === 'success' && <CheckCircle className=\"tw-icon--status\" data-testid=\"check-icon\" />}\n {status === 'error' && <AlertCircle className=\"tw-icon--status\" data-testid=\"alert-icon\" />}\n </Body>\n );\n};\n\nexport default TableStatusText;\n"],"names":["TableStatusText","text","className","status","typography","typographyType","Typography","BODY_DEFAULT_BOLD","BODY_DEFAULT","_jsxs","Body","type","clsx","children","_jsx","CheckCircle","AlertCircle"],"mappings":"
|
|
1
|
+
{"version":3,"file":"TableStatusText.js","sources":["../../src/table/TableStatusText.tsx"],"sourcesContent":["import { AlertCircle, CheckCircle } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport React from 'react';\nimport Body from '../body';\nimport { Typography } from '../common';\n\nexport interface TableStatusTextProps {\n text: string | React.ReactNode;\n className?: string;\n status?: 'success' | 'error';\n typography?: 'default' | 'default-bold';\n}\n\nconst TableStatusText = ({\n text,\n className,\n status,\n typography = 'default',\n}: TableStatusTextProps) => {\n const typographyType =\n (status ?? typography === 'default-bold')\n ? Typography.BODY_DEFAULT_BOLD\n : Typography.BODY_DEFAULT;\n\n return (\n <Body\n type={typographyType}\n className={clsx(className, {\n 'np-table-content--success': status === 'success',\n 'np-table-content--error': status === 'error',\n })}\n >\n {text}\n {status === 'success' && <CheckCircle className=\"tw-icon--status\" data-testid=\"check-icon\" />}\n {status === 'error' && <AlertCircle className=\"tw-icon--status\" data-testid=\"alert-icon\" />}\n </Body>\n );\n};\n\nexport default TableStatusText;\n"],"names":["TableStatusText","text","className","status","typography","typographyType","Typography","BODY_DEFAULT_BOLD","BODY_DEFAULT","_jsxs","Body","type","clsx","children","_jsx","CheckCircle","AlertCircle"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAaA,MAAMA,eAAe,GAAGA,CAAC;EACvBC,IAAI;EACJC,SAAS;EACTC,MAAM;AACNC,cAAAA,YAAU,GAAG;AAAS,CACD,KAAI;AACzB,EAAA,MAAMC,cAAc,GACjBF,MAAM,IAAIC,YAAU,KAAK,cAAc,GACpCE,qBAAU,CAACC,iBAAiB,GAC5BD,qBAAU,CAACE,YAAY;EAE7B,oBACEC,eAAA,CAACC,YAAI,EAAA;AACHC,IAAAA,IAAI,EAAEN,cAAe;AACrBH,IAAAA,SAAS,EAAEU,SAAI,CAACV,SAAS,EAAE;MACzB,2BAA2B,EAAEC,MAAM,KAAK,SAAS;MACjD,yBAAyB,EAAEA,MAAM,KAAK;AACvC,KAAA,CAAE;IAAAU,QAAA,EAAA,CAEFZ,IAAI,EACJE,MAAM,KAAK,SAAS,iBAAIW,cAAA,CAACC,iBAAW,EAAA;AAACb,MAAAA,SAAS,EAAC,iBAAiB;MAAC,aAAA,EAAY;MAAe,EAC5FC,MAAM,KAAK,OAAO,iBAAIW,cAAA,CAACE,iBAAW,EAAA;AAACd,MAAAA,SAAS,EAAC,iBAAiB;MAAC,aAAA,EAAY;AAAY,MAAG;AAAA,GACvF,CAAC;AAEX;;;;"}
|
|
@@ -21,6 +21,7 @@ import '../common/propsValues/variant.mjs';
|
|
|
21
21
|
import '../common/propsValues/scroll.mjs';
|
|
22
22
|
import '../common/propsValues/markdownNodeType.mjs';
|
|
23
23
|
import '../common/fileType.mjs';
|
|
24
|
+
import '@transferwise/formatting';
|
|
24
25
|
import 'react-intl';
|
|
25
26
|
import '../common/closeButton/CloseButton.messages.mjs';
|
|
26
27
|
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TableStatusText.mjs","sources":["../../src/table/TableStatusText.tsx"],"sourcesContent":["import { AlertCircle, CheckCircle } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport React from 'react';\nimport Body from '../body';\nimport { Typography } from '../common';\n\nexport interface TableStatusTextProps {\n text: string | React.ReactNode;\n className?: string;\n status?: 'success' | 'error';\n typography?: 'default' | 'default-bold';\n}\n\nconst TableStatusText = ({\n text,\n className,\n status,\n typography = 'default',\n}: TableStatusTextProps) => {\n const typographyType =\n (status ?? typography === 'default-bold')\n ? Typography.BODY_DEFAULT_BOLD\n : Typography.BODY_DEFAULT;\n\n return (\n <Body\n type={typographyType}\n className={clsx(className, {\n 'np-table-content--success': status === 'success',\n 'np-table-content--error': status === 'error',\n })}\n >\n {text}\n {status === 'success' && <CheckCircle className=\"tw-icon--status\" data-testid=\"check-icon\" />}\n {status === 'error' && <AlertCircle className=\"tw-icon--status\" data-testid=\"alert-icon\" />}\n </Body>\n );\n};\n\nexport default TableStatusText;\n"],"names":["TableStatusText","text","className","status","typography","typographyType","Typography","BODY_DEFAULT_BOLD","BODY_DEFAULT","_jsxs","Body","type","clsx","children","_jsx","CheckCircle","AlertCircle"],"mappings":"
|
|
1
|
+
{"version":3,"file":"TableStatusText.mjs","sources":["../../src/table/TableStatusText.tsx"],"sourcesContent":["import { AlertCircle, CheckCircle } from '@transferwise/icons';\nimport { clsx } from 'clsx';\nimport React from 'react';\nimport Body from '../body';\nimport { Typography } from '../common';\n\nexport interface TableStatusTextProps {\n text: string | React.ReactNode;\n className?: string;\n status?: 'success' | 'error';\n typography?: 'default' | 'default-bold';\n}\n\nconst TableStatusText = ({\n text,\n className,\n status,\n typography = 'default',\n}: TableStatusTextProps) => {\n const typographyType =\n (status ?? typography === 'default-bold')\n ? Typography.BODY_DEFAULT_BOLD\n : Typography.BODY_DEFAULT;\n\n return (\n <Body\n type={typographyType}\n className={clsx(className, {\n 'np-table-content--success': status === 'success',\n 'np-table-content--error': status === 'error',\n })}\n >\n {text}\n {status === 'success' && <CheckCircle className=\"tw-icon--status\" data-testid=\"check-icon\" />}\n {status === 'error' && <AlertCircle className=\"tw-icon--status\" data-testid=\"alert-icon\" />}\n </Body>\n );\n};\n\nexport default TableStatusText;\n"],"names":["TableStatusText","text","className","status","typography","typographyType","Typography","BODY_DEFAULT_BOLD","BODY_DEFAULT","_jsxs","Body","type","clsx","children","_jsx","CheckCircle","AlertCircle"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAaA,MAAMA,eAAe,GAAGA,CAAC;EACvBC,IAAI;EACJC,SAAS;EACTC,MAAM;AACNC,EAAAA,UAAU,GAAG;AAAS,CACD,KAAI;AACzB,EAAA,MAAMC,cAAc,GACjBF,MAAM,IAAIC,UAAU,KAAK,cAAc,GACpCE,UAAU,CAACC,iBAAiB,GAC5BD,UAAU,CAACE,YAAY;EAE7B,oBACEC,IAAA,CAACC,IAAI,EAAA;AACHC,IAAAA,IAAI,EAAEN,cAAe;AACrBH,IAAAA,SAAS,EAAEU,IAAI,CAACV,SAAS,EAAE;MACzB,2BAA2B,EAAEC,MAAM,KAAK,SAAS;MACjD,yBAAyB,EAAEA,MAAM,KAAK;AACvC,KAAA,CAAE;IAAAU,QAAA,EAAA,CAEFZ,IAAI,EACJE,MAAM,KAAK,SAAS,iBAAIW,GAAA,CAACC,WAAW,EAAA;AAACb,MAAAA,SAAS,EAAC,iBAAiB;MAAC,aAAA,EAAY;MAAe,EAC5FC,MAAM,KAAK,OAAO,iBAAIW,GAAA,CAACE,WAAW,EAAA;AAACd,MAAAA,SAAS,EAAC,iBAAiB;MAAC,aAAA,EAAY;AAAY,MAAG;AAAA,GACvF,CAAC;AAEX;;;;"}
|
package/build/tabs/Tabs.js
CHANGED
|
@@ -24,6 +24,7 @@ require('../common/propsValues/variant.js');
|
|
|
24
24
|
require('../common/propsValues/scroll.js');
|
|
25
25
|
require('../common/propsValues/markdownNodeType.js');
|
|
26
26
|
require('../common/fileType.js');
|
|
27
|
+
require('@transferwise/formatting');
|
|
27
28
|
require('@transferwise/icons');
|
|
28
29
|
require('react-intl');
|
|
29
30
|
require('../common/closeButton/CloseButton.messages.js');
|