@transferwise/components 0.0.0-experimental-e9f4151 → 0.0.0-experimental-ffa47f4
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 +19 -3
- package/build/accordion/AccordionItem/AccordionItem.js.map +1 -1
- package/build/accordion/AccordionItem/AccordionItem.mjs +19 -3
- package/build/accordion/AccordionItem/AccordionItem.mjs.map +1 -1
- package/build/actionButton/ActionButton.js +19 -1
- package/build/actionButton/ActionButton.js.map +1 -1
- package/build/actionButton/ActionButton.mjs +19 -1
- package/build/actionButton/ActionButton.mjs.map +1 -1
- package/build/actionOption/ActionOption.js +19 -1
- package/build/actionOption/ActionOption.js.map +1 -1
- package/build/actionOption/ActionOption.mjs +19 -1
- package/build/actionOption/ActionOption.mjs.map +1 -1
- package/build/alert/Alert.js +19 -3
- package/build/alert/Alert.js.map +1 -1
- package/build/alert/Alert.mjs +19 -3
- package/build/alert/Alert.mjs.map +1 -1
- package/build/alert/inlineMarkdown/InlineMarkdown.js +19 -1
- package/build/alert/inlineMarkdown/InlineMarkdown.js.map +1 -1
- package/build/alert/inlineMarkdown/InlineMarkdown.mjs +19 -1
- package/build/alert/inlineMarkdown/InlineMarkdown.mjs.map +1 -1
- package/build/avatar/Avatar.js +19 -1
- package/build/avatar/Avatar.js.map +1 -1
- package/build/avatar/Avatar.mjs +19 -1
- package/build/avatar/Avatar.mjs.map +1 -1
- package/build/avatarWrapper/AvatarWrapper.js +19 -2
- package/build/avatarWrapper/AvatarWrapper.js.map +1 -1
- package/build/avatarWrapper/AvatarWrapper.mjs +19 -2
- package/build/avatarWrapper/AvatarWrapper.mjs.map +1 -1
- package/build/badge/Badge.js +19 -2
- package/build/badge/Badge.js.map +1 -1
- package/build/badge/Badge.mjs +19 -2
- package/build/badge/Badge.mjs.map +1 -1
- package/build/button/Button.js +19 -2
- package/build/button/Button.js.map +1 -1
- package/build/button/Button.mjs +19 -2
- package/build/button/Button.mjs.map +1 -1
- package/build/button/classMap.js +18 -0
- package/build/button/classMap.js.map +1 -1
- package/build/button/classMap.mjs +18 -0
- package/build/button/classMap.mjs.map +1 -1
- package/build/button/legacyUtils/legacyUtils.js +18 -2
- package/build/button/legacyUtils/legacyUtils.js.map +1 -1
- package/build/button/legacyUtils/legacyUtils.mjs +18 -2
- package/build/button/legacyUtils/legacyUtils.mjs.map +1 -1
- package/build/card/Card.js +19 -2
- package/build/card/Card.js.map +1 -1
- package/build/card/Card.mjs +19 -2
- package/build/card/Card.mjs.map +1 -1
- package/build/checkbox/Checkbox.js +19 -1
- package/build/checkbox/Checkbox.js.map +1 -1
- package/build/checkbox/Checkbox.mjs +19 -1
- package/build/checkbox/Checkbox.mjs.map +1 -1
- package/build/chevron/Chevron.js +18 -1
- package/build/chevron/Chevron.js.map +1 -1
- package/build/chevron/Chevron.mjs +18 -1
- package/build/chevron/Chevron.mjs.map +1 -1
- package/build/chips/Chip.js +19 -1
- package/build/chips/Chip.js.map +1 -1
- package/build/chips/Chip.mjs +19 -1
- package/build/chips/Chip.mjs.map +1 -1
- package/build/circularButton/CircularButton.js +19 -2
- package/build/circularButton/CircularButton.js.map +1 -1
- package/build/circularButton/CircularButton.mjs +19 -2
- package/build/circularButton/CircularButton.mjs.map +1 -1
- package/build/common/bottomSheet/BottomSheet.js +3 -2
- package/build/common/bottomSheet/BottomSheet.js.map +1 -1
- package/build/common/bottomSheet/BottomSheet.mjs +3 -2
- package/build/common/bottomSheet/BottomSheet.mjs.map +1 -1
- package/build/common/hooks/useHasIntersected/useHasIntersected.js +7 -9
- package/build/common/hooks/useHasIntersected/useHasIntersected.js.map +1 -1
- package/build/common/hooks/useHasIntersected/useHasIntersected.mjs +7 -9
- package/build/common/hooks/useHasIntersected/useHasIntersected.mjs.map +1 -1
- package/build/common/locale/index.js +18 -0
- package/build/common/locale/index.js.map +1 -1
- package/build/common/locale/index.mjs +18 -0
- package/build/common/locale/index.mjs.map +1 -1
- package/build/common/panel/Panel.js +19 -1
- package/build/common/panel/Panel.js.map +1 -1
- package/build/common/panel/Panel.mjs +19 -1
- package/build/common/panel/Panel.mjs.map +1 -1
- package/build/common/responsivePanel/ResponsivePanel.js +22 -2
- package/build/common/responsivePanel/ResponsivePanel.js.map +1 -1
- package/build/common/responsivePanel/ResponsivePanel.mjs +22 -2
- package/build/common/responsivePanel/ResponsivePanel.mjs.map +1 -1
- package/build/criticalBanner/CriticalCommsBanner.js +19 -3
- package/build/criticalBanner/CriticalCommsBanner.js.map +1 -1
- package/build/criticalBanner/CriticalCommsBanner.mjs +19 -3
- package/build/criticalBanner/CriticalCommsBanner.mjs.map +1 -1
- package/build/dateInput/DateInput.js +19 -4
- package/build/dateInput/DateInput.js.map +1 -1
- package/build/dateInput/DateInput.mjs +19 -4
- package/build/dateInput/DateInput.mjs.map +1 -1
- package/build/dateLookup/DateLookup.js +20 -5
- package/build/dateLookup/DateLookup.js.map +1 -1
- package/build/dateLookup/DateLookup.mjs +20 -5
- package/build/dateLookup/DateLookup.mjs.map +1 -1
- package/build/dateLookup/dateHeader/DateHeader.js +23 -4
- package/build/dateLookup/dateHeader/DateHeader.js.map +1 -1
- package/build/dateLookup/dateHeader/DateHeader.mjs +23 -4
- package/build/dateLookup/dateHeader/DateHeader.mjs.map +1 -1
- package/build/dateLookup/dateTrigger/DateTrigger.js +19 -3
- package/build/dateLookup/dateTrigger/DateTrigger.js.map +1 -1
- package/build/dateLookup/dateTrigger/DateTrigger.mjs +19 -3
- package/build/dateLookup/dateTrigger/DateTrigger.mjs.map +1 -1
- package/build/decision/Decision.js +19 -2
- package/build/decision/Decision.js.map +1 -1
- package/build/decision/Decision.mjs +19 -2
- package/build/decision/Decision.mjs.map +1 -1
- package/build/definitionList/DefinitionList.js +19 -1
- package/build/definitionList/DefinitionList.js.map +1 -1
- package/build/definitionList/DefinitionList.mjs +19 -1
- package/build/definitionList/DefinitionList.mjs.map +1 -1
- package/build/dimmer/Dimmer.js +20 -1
- package/build/dimmer/Dimmer.js.map +1 -1
- package/build/dimmer/Dimmer.mjs +20 -1
- package/build/dimmer/Dimmer.mjs.map +1 -1
- package/build/display/Display.js +19 -1
- package/build/display/Display.js.map +1 -1
- package/build/display/Display.mjs +19 -1
- package/build/display/Display.mjs.map +1 -1
- package/build/drawer/Drawer.js +22 -3
- package/build/drawer/Drawer.js.map +1 -1
- package/build/drawer/Drawer.mjs +22 -3
- package/build/drawer/Drawer.mjs.map +1 -1
- package/build/field/Field.js +19 -1
- package/build/field/Field.js.map +1 -1
- package/build/field/Field.mjs +19 -1
- package/build/field/Field.mjs.map +1 -1
- package/build/flowNavigation/FlowNavigation.js +19 -2
- package/build/flowNavigation/FlowNavigation.js.map +1 -1
- package/build/flowNavigation/FlowNavigation.mjs +19 -2
- package/build/flowNavigation/FlowNavigation.mjs.map +1 -1
- package/build/header/Header.js +19 -1
- package/build/header/Header.js.map +1 -1
- package/build/header/Header.mjs +19 -1
- package/build/header/Header.mjs.map +1 -1
- package/build/image/Image.js +4 -1
- package/build/image/Image.js.map +1 -1
- package/build/image/Image.mjs +4 -1
- package/build/image/Image.mjs.map +1 -1
- package/build/index.js +64 -62
- package/build/index.js.map +1 -1
- package/build/index.mjs +22 -20
- package/build/index.mjs.map +1 -1
- package/build/info/Info.js +19 -2
- package/build/info/Info.js.map +1 -1
- package/build/info/Info.mjs +19 -2
- package/build/info/Info.mjs.map +1 -1
- package/build/inlineAlert/InlineAlert.js +19 -2
- package/build/inlineAlert/InlineAlert.js.map +1 -1
- package/build/inlineAlert/InlineAlert.mjs +19 -2
- package/build/inlineAlert/InlineAlert.mjs.map +1 -1
- package/build/inputs/SearchInput.js +19 -1
- package/build/inputs/SearchInput.js.map +1 -1
- package/build/inputs/SearchInput.mjs +19 -1
- package/build/inputs/SearchInput.mjs.map +1 -1
- package/build/instructionsList/InstructionsList.js +19 -1
- package/build/instructionsList/InstructionsList.js.map +1 -1
- package/build/instructionsList/InstructionsList.mjs +19 -1
- package/build/instructionsList/InstructionsList.mjs.map +1 -1
- package/build/loader/Loader.js +19 -1
- package/build/loader/Loader.js.map +1 -1
- package/build/loader/Loader.mjs +19 -1
- package/build/loader/Loader.mjs.map +1 -1
- package/build/markdown/Markdown.js +19 -1
- package/build/markdown/Markdown.js.map +1 -1
- package/build/markdown/Markdown.mjs +19 -1
- package/build/markdown/Markdown.mjs.map +1 -1
- package/build/modal/Modal.js +22 -5
- package/build/modal/Modal.js.map +1 -1
- package/build/modal/Modal.mjs +22 -5
- package/build/modal/Modal.mjs.map +1 -1
- package/build/moneyInput/MoneyInput.js +19 -2
- package/build/moneyInput/MoneyInput.js.map +1 -1
- package/build/moneyInput/MoneyInput.mjs +19 -2
- package/build/moneyInput/MoneyInput.mjs.map +1 -1
- package/build/navigationOption/NavigationOption.js +19 -1
- package/build/navigationOption/NavigationOption.js.map +1 -1
- package/build/navigationOption/NavigationOption.mjs +19 -1
- package/build/navigationOption/NavigationOption.mjs.map +1 -1
- package/build/nudge/Nudge.js +19 -1
- package/build/nudge/Nudge.js.map +1 -1
- package/build/nudge/Nudge.mjs +19 -1
- package/build/nudge/Nudge.mjs.map +1 -1
- package/build/overlayHeader/OverlayHeader.js +19 -1
- package/build/overlayHeader/OverlayHeader.js.map +1 -1
- package/build/overlayHeader/OverlayHeader.mjs +19 -1
- package/build/overlayHeader/OverlayHeader.mjs.map +1 -1
- package/build/phoneNumberInput/PhoneNumberInput.js +19 -1
- package/build/phoneNumberInput/PhoneNumberInput.js.map +1 -1
- package/build/phoneNumberInput/PhoneNumberInput.mjs +19 -1
- package/build/phoneNumberInput/PhoneNumberInput.mjs.map +1 -1
- package/build/popover/Popover.js +20 -3
- package/build/popover/Popover.js.map +1 -1
- package/build/popover/Popover.mjs +20 -3
- package/build/popover/Popover.mjs.map +1 -1
- package/build/processIndicator/ProcessIndicator.js +19 -1
- package/build/processIndicator/ProcessIndicator.js.map +1 -1
- package/build/processIndicator/ProcessIndicator.mjs +19 -1
- package/build/processIndicator/ProcessIndicator.mjs.map +1 -1
- package/build/progressBar/ProgressBar.js +19 -1
- package/build/progressBar/ProgressBar.js.map +1 -1
- package/build/progressBar/ProgressBar.mjs +19 -1
- package/build/progressBar/ProgressBar.mjs.map +1 -1
- package/build/promoCard/PromoCard.js +19 -1
- package/build/promoCard/PromoCard.js.map +1 -1
- package/build/promoCard/PromoCard.mjs +19 -1
- package/build/promoCard/PromoCard.mjs.map +1 -1
- package/build/promoCard/PromoCardIndicator.js +19 -1
- package/build/promoCard/PromoCardIndicator.js.map +1 -1
- package/build/promoCard/PromoCardIndicator.mjs +19 -1
- package/build/promoCard/PromoCardIndicator.mjs.map +1 -1
- package/build/provider/Provider.js +20 -1
- package/build/provider/Provider.js.map +1 -1
- package/build/provider/Provider.mjs +20 -1
- package/build/provider/Provider.mjs.map +1 -1
- package/build/radio/Radio.js +19 -1
- package/build/radio/Radio.js.map +1 -1
- package/build/radio/Radio.mjs +19 -1
- package/build/radio/Radio.mjs.map +1 -1
- package/build/segmentedControl/SegmentedControl.js +19 -1
- package/build/segmentedControl/SegmentedControl.js.map +1 -1
- package/build/segmentedControl/SegmentedControl.mjs +19 -1
- package/build/segmentedControl/SegmentedControl.mjs.map +1 -1
- package/build/select/Select.js +23 -3
- package/build/select/Select.js.map +1 -1
- package/build/select/Select.mjs +23 -3
- package/build/select/Select.mjs.map +1 -1
- package/build/select/option/Option.js +19 -1
- package/build/select/option/Option.js.map +1 -1
- package/build/select/option/Option.mjs +19 -1
- package/build/select/option/Option.mjs.map +1 -1
- package/build/selectOption/SelectOption.js +20 -3
- package/build/selectOption/SelectOption.js.map +1 -1
- package/build/selectOption/SelectOption.mjs +20 -3
- package/build/selectOption/SelectOption.mjs.map +1 -1
- package/build/snackbar/Snackbar.js +2 -2
- package/build/snackbar/Snackbar.js.map +1 -1
- package/build/snackbar/Snackbar.mjs +2 -2
- package/build/snackbar/Snackbar.mjs.map +1 -1
- package/build/stepper/Stepper.js +21 -2
- package/build/stepper/Stepper.js.map +1 -1
- package/build/stepper/Stepper.mjs +21 -2
- package/build/stepper/Stepper.mjs.map +1 -1
- package/build/sticky/Sticky.js +19 -1
- package/build/sticky/Sticky.js.map +1 -1
- package/build/sticky/Sticky.mjs +19 -1
- package/build/sticky/Sticky.mjs.map +1 -1
- package/build/summary/Summary.js +19 -4
- package/build/summary/Summary.js.map +1 -1
- package/build/summary/Summary.mjs +19 -4
- package/build/summary/Summary.mjs.map +1 -1
- package/build/tabs/Tabs.js +19 -2
- package/build/tabs/Tabs.js.map +1 -1
- package/build/tabs/Tabs.mjs +19 -2
- package/build/tabs/Tabs.mjs.map +1 -1
- package/build/tile/Tile.js +19 -1
- package/build/tile/Tile.js.map +1 -1
- package/build/tile/Tile.mjs +19 -1
- package/build/tile/Tile.mjs.map +1 -1
- package/build/title/Title.js +19 -1
- package/build/title/Title.js.map +1 -1
- package/build/title/Title.mjs +19 -1
- package/build/title/Title.mjs.map +1 -1
- package/build/tooltip/Tooltip.js +19 -1
- package/build/tooltip/Tooltip.js.map +1 -1
- package/build/tooltip/Tooltip.mjs +19 -1
- package/build/tooltip/Tooltip.mjs.map +1 -1
- package/build/typeahead/Typeahead.js +20 -3
- package/build/typeahead/Typeahead.js.map +1 -1
- package/build/typeahead/Typeahead.mjs +20 -3
- package/build/typeahead/Typeahead.mjs.map +1 -1
- package/build/types/common/fakeEvents.d.ts +23 -0
- package/build/types/common/fakeEvents.d.ts.map +1 -0
- package/build/types/common/hooks/index.d.ts +4 -4
- package/build/types/common/hooks/index.d.ts.map +1 -1
- package/build/types/common/hooks/useConditionalListener/index.d.ts +1 -1
- package/build/types/common/hooks/useConditionalListener/index.d.ts.map +1 -1
- package/build/types/common/hooks/useDirection/index.d.ts +1 -1
- package/build/types/common/hooks/useDirection/index.d.ts.map +1 -1
- package/build/types/common/hooks/useHasIntersected/index.d.ts +1 -1
- package/build/types/common/hooks/useHasIntersected/index.d.ts.map +1 -1
- package/build/types/common/hooks/useHasIntersected/useHasIntersected.d.ts +15 -4
- package/build/types/common/hooks/useHasIntersected/useHasIntersected.d.ts.map +1 -1
- package/build/types/common/index.d.ts +24 -24
- package/build/types/common/index.d.ts.map +1 -1
- package/build/types/common/requirements.d.ts +47 -0
- package/build/types/common/requirements.d.ts.map +1 -0
- package/build/types/common/responsivePanel/index.d.ts +1 -1
- package/build/types/common/responsivePanel/index.d.ts.map +1 -1
- package/build/types/navigationOption/NavigationOption.d.ts +1 -0
- package/build/types/navigationOption/NavigationOption.d.ts.map +1 -1
- package/build/types/snackbar/Snackbar.d.ts.map +1 -1
- package/build/upload/Upload.js +19 -1
- package/build/upload/Upload.js.map +1 -1
- package/build/upload/Upload.mjs +19 -1
- package/build/upload/Upload.mjs.map +1 -1
- package/build/upload/steps/processingStep/processingStep.js +19 -2
- package/build/upload/steps/processingStep/processingStep.js.map +1 -1
- package/build/upload/steps/processingStep/processingStep.mjs +19 -2
- package/build/upload/steps/processingStep/processingStep.mjs.map +1 -1
- package/build/upload/steps/uploadImageStep/uploadImageStep.js +19 -2
- package/build/upload/steps/uploadImageStep/uploadImageStep.js.map +1 -1
- package/build/upload/steps/uploadImageStep/uploadImageStep.mjs +19 -2
- package/build/upload/steps/uploadImageStep/uploadImageStep.mjs.map +1 -1
- package/build/uploadInput/UploadInput.js +19 -2
- package/build/uploadInput/UploadInput.js.map +1 -1
- package/build/uploadInput/UploadInput.mjs +19 -2
- package/build/uploadInput/UploadInput.mjs.map +1 -1
- package/build/uploadInput/uploadButton/UploadButton.js +19 -1
- package/build/uploadInput/uploadButton/UploadButton.js.map +1 -1
- package/build/uploadInput/uploadButton/UploadButton.mjs +19 -1
- package/build/uploadInput/uploadButton/UploadButton.mjs.map +1 -1
- package/build/uploadInput/uploadButton/defaults.js +18 -0
- package/build/uploadInput/uploadButton/defaults.js.map +1 -1
- package/build/uploadInput/uploadButton/defaults.mjs +18 -0
- package/build/uploadInput/uploadButton/defaults.mjs.map +1 -1
- package/build/uploadInput/uploadItem/UploadItem.js +19 -3
- package/build/uploadInput/uploadItem/UploadItem.js.map +1 -1
- package/build/uploadInput/uploadItem/UploadItem.mjs +19 -3
- package/build/uploadInput/uploadItem/UploadItem.mjs.map +1 -1
- package/build/withDisplayFormat/WithDisplayFormat.js +20 -1
- package/build/withDisplayFormat/WithDisplayFormat.js.map +1 -1
- package/build/withDisplayFormat/WithDisplayFormat.mjs +20 -1
- package/build/withDisplayFormat/WithDisplayFormat.mjs.map +1 -1
- package/package.json +3 -3
- package/src/common/{fakeEvents.js → fakeEvents.ts} +1 -1
- package/src/common/hooks/useHasIntersected/{useHasIntersected.js → useHasIntersected.ts} +17 -11
- package/src/common/{requirements.js → requirements.ts} +106 -36
- package/src/navigationOption/{NavigationOption.story.js → NavigationOption.story.tsx} +23 -5
- package/src/navigationOption/NavigationOption.tsx +1 -1
- package/src/snackbar/Snackbar.story.tsx +3 -1
- package/src/snackbar/Snackbar.tsx +8 -2
- /package/src/common/hooks/{index.js → index.ts} +0 -0
- /package/src/common/hooks/useConditionalListener/{index.js → index.ts} +0 -0
- /package/src/common/hooks/useDirection/{index.js → index.ts} +0 -0
- /package/src/common/hooks/useHasIntersected/{index.js → index.ts} +0 -0
- /package/src/common/{index.js → index.ts} +0 -0
- /package/src/common/responsivePanel/{index.js → index.ts} +0 -0
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"legacyUtils.js","sources":["../../../src/button/legacyUtils/legacyUtils.js"],"sourcesContent":["import { ControlType, Priority, Size, Type } from '../../common';\nimport { logActionRequiredIf } from '../../utilities';\n\nconst deprecatedTypeMap = {\n [Type.PRIMARY]: ControlType.ACCENT,\n [Type.SECONDARY]: ControlType.ACCENT,\n [Type.LINK]: ControlType.ACCENT,\n [Type.PAY]: ControlType.POSITIVE,\n [Type.DANGER]: ControlType.NEGATIVE,\n};\n\nconst oldTypePriorityMap = {\n [Type.DANGER]: Priority.SECONDARY,\n [Type.LINK]: Priority.TERTIARY,\n [Type.SECONDARY]: Priority.SECONDARY,\n};\n\nconst deprecatedTypeMapMessage = {\n [Type.DANGER]: 'Type.NEGATIVE',\n [Type.LINK]: 'ControlType.ACCENT with priority Priority.TERTIARY',\n [Type.PAY]: 'ControlType.POSITIVE',\n [Type.PRIMARY]: 'ControlType.ACCENT',\n [Type.SECONDARY]: 'ControlType.ACCENT with priority Priority.SECONDARY',\n};\n\nconst deprecatedTypes = Object.keys(deprecatedTypeMap);\n\nexport const establishNewType = (originalType) => deprecatedTypeMap[originalType] || originalType;\n\nexport const establishNewPriority = (originalPriority, originalType) => {\n const type = establishNewType(originalType);\n\n // The old SECONDARY and LINK types now map to priorities. If they're still using one of\n // these old types, ignore whatever priority they've passed and use this instead.\n if (oldTypePriorityMap[originalType]) {\n return oldTypePriorityMap[originalType];\n }\n // Only ControlType.ACCENT supports tertiary styles\n if (originalPriority === Priority.TERTIARY && type !== ControlType.ACCENT) {\n return Priority.SECONDARY;\n }\n return originalPriority;\n};\n\nexport const logDeprecationNotices = ({ size, type }) => {\n logActionRequiredIf(\n 'Button has deprecated the `Size.EXTRA_SMALL` value for the `size` prop. Please use Size.SMALL instead.',\n size === Size.EXTRA_SMALL,\n );\n logActionRequiredIf(\n `Button has deprecated the ${type} value for the \\`type\\` prop. Please update to ${deprecatedTypeMapMessage[type]}.`,\n deprecatedTypes.includes(type),\n );\n};\n"],"names":["deprecatedTypeMap","Type","PRIMARY","ControlType","ACCENT","SECONDARY","LINK","PAY","POSITIVE","DANGER","NEGATIVE","oldTypePriorityMap","Priority","TERTIARY","deprecatedTypeMapMessage","deprecatedTypes","Object","keys","establishNewType","originalType","establishNewPriority","originalPriority","type","logDeprecationNotices","size","logActionRequiredIf","Size","EXTRA_SMALL","includes"],"mappings":"
|
|
1
|
+
{"version":3,"file":"legacyUtils.js","sources":["../../../src/button/legacyUtils/legacyUtils.js"],"sourcesContent":["import { ControlType, Priority, Size, Type } from '../../common';\nimport { logActionRequiredIf } from '../../utilities';\n\nconst deprecatedTypeMap = {\n [Type.PRIMARY]: ControlType.ACCENT,\n [Type.SECONDARY]: ControlType.ACCENT,\n [Type.LINK]: ControlType.ACCENT,\n [Type.PAY]: ControlType.POSITIVE,\n [Type.DANGER]: ControlType.NEGATIVE,\n};\n\nconst oldTypePriorityMap = {\n [Type.DANGER]: Priority.SECONDARY,\n [Type.LINK]: Priority.TERTIARY,\n [Type.SECONDARY]: Priority.SECONDARY,\n};\n\nconst deprecatedTypeMapMessage = {\n [Type.DANGER]: 'Type.NEGATIVE',\n [Type.LINK]: 'ControlType.ACCENT with priority Priority.TERTIARY',\n [Type.PAY]: 'ControlType.POSITIVE',\n [Type.PRIMARY]: 'ControlType.ACCENT',\n [Type.SECONDARY]: 'ControlType.ACCENT with priority Priority.SECONDARY',\n};\n\nconst deprecatedTypes = Object.keys(deprecatedTypeMap);\n\nexport const establishNewType = (originalType) => deprecatedTypeMap[originalType] || originalType;\n\nexport const establishNewPriority = (originalPriority, originalType) => {\n const type = establishNewType(originalType);\n\n // The old SECONDARY and LINK types now map to priorities. If they're still using one of\n // these old types, ignore whatever priority they've passed and use this instead.\n if (oldTypePriorityMap[originalType]) {\n return oldTypePriorityMap[originalType];\n }\n // Only ControlType.ACCENT supports tertiary styles\n if (originalPriority === Priority.TERTIARY && type !== ControlType.ACCENT) {\n return Priority.SECONDARY;\n }\n return originalPriority;\n};\n\nexport const logDeprecationNotices = ({ size, type }) => {\n logActionRequiredIf(\n 'Button has deprecated the `Size.EXTRA_SMALL` value for the `size` prop. Please use Size.SMALL instead.',\n size === Size.EXTRA_SMALL,\n );\n logActionRequiredIf(\n `Button has deprecated the ${type} value for the \\`type\\` prop. Please update to ${deprecatedTypeMapMessage[type]}.`,\n deprecatedTypes.includes(type),\n );\n};\n"],"names":["deprecatedTypeMap","Type","PRIMARY","ControlType","ACCENT","SECONDARY","LINK","PAY","POSITIVE","DANGER","NEGATIVE","oldTypePriorityMap","Priority","TERTIARY","deprecatedTypeMapMessage","deprecatedTypes","Object","keys","establishNewType","originalType","establishNewPriority","originalPriority","type","logDeprecationNotices","size","logActionRequiredIf","Size","EXTRA_SMALL","includes"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAGA,MAAMA,iBAAiB,GAAG;AACxB,EAAA,CAACC,SAAI,CAACC,OAAO,GAAGC,mBAAW,CAACC,MAAM;AAClC,EAAA,CAACH,SAAI,CAACI,SAAS,GAAGF,mBAAW,CAACC,MAAM;AACpC,EAAA,CAACH,SAAI,CAACK,IAAI,GAAGH,mBAAW,CAACC,MAAM;AAC/B,EAAA,CAACH,SAAI,CAACM,GAAG,GAAGJ,mBAAW,CAACK,QAAQ;AAChC,EAAA,CAACP,SAAI,CAACQ,MAAM,GAAGN,mBAAW,CAACO,QAAAA;AAC7B,CAAC,CAAA;AAED,MAAMC,kBAAkB,GAAG;AACzB,EAAA,CAACV,SAAI,CAACQ,MAAM,GAAGG,gBAAQ,CAACP,SAAS;AACjC,EAAA,CAACJ,SAAI,CAACK,IAAI,GAAGM,gBAAQ,CAACC,QAAQ;AAC9B,EAAA,CAACZ,SAAI,CAACI,SAAS,GAAGO,gBAAQ,CAACP,SAAAA;AAC7B,CAAC,CAAA;AAED,MAAMS,wBAAwB,GAAG;AAC/B,EAAA,CAACb,SAAI,CAACQ,MAAM,GAAG,eAAe;AAC9B,EAAA,CAACR,SAAI,CAACK,IAAI,GAAG,oDAAoD;AACjE,EAAA,CAACL,SAAI,CAACM,GAAG,GAAG,sBAAsB;AAClC,EAAA,CAACN,SAAI,CAACC,OAAO,GAAG,oBAAoB;EACpC,CAACD,SAAI,CAACI,SAAS,GAAG,qDAAA;AACpB,CAAC,CAAA;AAED,MAAMU,eAAe,GAAGC,MAAM,CAACC,IAAI,CAACjB,iBAAiB,CAAC,CAAA;AAE/C,MAAMkB,gBAAgB,GAAIC,YAAY,IAAKnB,iBAAiB,CAACmB,YAAY,CAAC,IAAIA,aAAY;MAEpFC,oBAAoB,GAAGA,CAACC,gBAAgB,EAAEF,YAAY,KAAK;AACtE,EAAA,MAAMG,IAAI,GAAGJ,gBAAgB,CAACC,YAAY,CAAC,CAAA;;AAE3C;AACA;AACA,EAAA,IAAIR,kBAAkB,CAACQ,YAAY,CAAC,EAAE;IACpC,OAAOR,kBAAkB,CAACQ,YAAY,CAAC,CAAA;AACzC,GAAA;AACA;EACA,IAAIE,gBAAgB,KAAKT,gBAAQ,CAACC,QAAQ,IAAIS,IAAI,KAAKnB,mBAAW,CAACC,MAAM,EAAE;IACzE,OAAOQ,gBAAQ,CAACP,SAAS,CAAA;AAC3B,GAAA;AACA,EAAA,OAAOgB,gBAAgB,CAAA;AACzB,EAAC;AAEM,MAAME,qBAAqB,GAAGA,CAAC;QAAEC,MAAI;AAAEF,EAAAA,IAAAA;AAAK,CAAC,KAAK;EACvDG,qCAAmB,CACjB,wGAAwG,EACxGD,MAAI,KAAKE,SAAI,CAACC,WAChB,CAAC,CAAA;AACDF,EAAAA,qCAAmB,CACjB,CAA6BH,0BAAAA,EAAAA,IAAI,CAAkDR,+CAAAA,EAAAA,wBAAwB,CAACQ,IAAI,CAAC,CAAG,CAAA,CAAA,EACpHP,eAAe,CAACa,QAAQ,CAACN,IAAI,CAC/B,CAAC,CAAA;AACH;;;;;;"}
|
|
@@ -1,7 +1,23 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
1
|
+
import '../../common/theme.mjs';
|
|
2
|
+
import '../../common/direction.mjs';
|
|
3
3
|
import { ControlType, Priority } from '../../common/propsValues/control.mjs';
|
|
4
|
+
import '../../common/propsValues/breakpoint.mjs';
|
|
4
5
|
import { Size } from '../../common/propsValues/size.mjs';
|
|
6
|
+
import '../../common/propsValues/typography.mjs';
|
|
7
|
+
import '../../common/propsValues/width.mjs';
|
|
8
|
+
import { Type } from '../../common/propsValues/type.mjs';
|
|
9
|
+
import '../../common/propsValues/dateMode.mjs';
|
|
10
|
+
import '../../common/propsValues/monthFormat.mjs';
|
|
11
|
+
import '../../common/propsValues/position.mjs';
|
|
12
|
+
import '../../common/propsValues/layouts.mjs';
|
|
13
|
+
import '../../common/propsValues/status.mjs';
|
|
14
|
+
import '../../common/propsValues/sentiment.mjs';
|
|
15
|
+
import '../../common/propsValues/profileType.mjs';
|
|
16
|
+
import '../../common/propsValues/variant.mjs';
|
|
17
|
+
import '../../common/propsValues/scroll.mjs';
|
|
18
|
+
import '../../common/propsValues/markdownNodeType.mjs';
|
|
19
|
+
import '../../common/fileType.mjs';
|
|
20
|
+
import { logActionRequiredIf } from '../../utilities/logActionRequired.mjs';
|
|
5
21
|
|
|
6
22
|
const deprecatedTypeMap = {
|
|
7
23
|
[Type.PRIMARY]: ControlType.ACCENT,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"legacyUtils.mjs","sources":["../../../src/button/legacyUtils/legacyUtils.js"],"sourcesContent":["import { ControlType, Priority, Size, Type } from '../../common';\nimport { logActionRequiredIf } from '../../utilities';\n\nconst deprecatedTypeMap = {\n [Type.PRIMARY]: ControlType.ACCENT,\n [Type.SECONDARY]: ControlType.ACCENT,\n [Type.LINK]: ControlType.ACCENT,\n [Type.PAY]: ControlType.POSITIVE,\n [Type.DANGER]: ControlType.NEGATIVE,\n};\n\nconst oldTypePriorityMap = {\n [Type.DANGER]: Priority.SECONDARY,\n [Type.LINK]: Priority.TERTIARY,\n [Type.SECONDARY]: Priority.SECONDARY,\n};\n\nconst deprecatedTypeMapMessage = {\n [Type.DANGER]: 'Type.NEGATIVE',\n [Type.LINK]: 'ControlType.ACCENT with priority Priority.TERTIARY',\n [Type.PAY]: 'ControlType.POSITIVE',\n [Type.PRIMARY]: 'ControlType.ACCENT',\n [Type.SECONDARY]: 'ControlType.ACCENT with priority Priority.SECONDARY',\n};\n\nconst deprecatedTypes = Object.keys(deprecatedTypeMap);\n\nexport const establishNewType = (originalType) => deprecatedTypeMap[originalType] || originalType;\n\nexport const establishNewPriority = (originalPriority, originalType) => {\n const type = establishNewType(originalType);\n\n // The old SECONDARY and LINK types now map to priorities. If they're still using one of\n // these old types, ignore whatever priority they've passed and use this instead.\n if (oldTypePriorityMap[originalType]) {\n return oldTypePriorityMap[originalType];\n }\n // Only ControlType.ACCENT supports tertiary styles\n if (originalPriority === Priority.TERTIARY && type !== ControlType.ACCENT) {\n return Priority.SECONDARY;\n }\n return originalPriority;\n};\n\nexport const logDeprecationNotices = ({ size, type }) => {\n logActionRequiredIf(\n 'Button has deprecated the `Size.EXTRA_SMALL` value for the `size` prop. Please use Size.SMALL instead.',\n size === Size.EXTRA_SMALL,\n );\n logActionRequiredIf(\n `Button has deprecated the ${type} value for the \\`type\\` prop. Please update to ${deprecatedTypeMapMessage[type]}.`,\n deprecatedTypes.includes(type),\n );\n};\n"],"names":["deprecatedTypeMap","Type","PRIMARY","ControlType","ACCENT","SECONDARY","LINK","PAY","POSITIVE","DANGER","NEGATIVE","oldTypePriorityMap","Priority","TERTIARY","deprecatedTypeMapMessage","deprecatedTypes","Object","keys","establishNewType","originalType","establishNewPriority","originalPriority","type","logDeprecationNotices","size","logActionRequiredIf","Size","EXTRA_SMALL","includes"],"mappings":"
|
|
1
|
+
{"version":3,"file":"legacyUtils.mjs","sources":["../../../src/button/legacyUtils/legacyUtils.js"],"sourcesContent":["import { ControlType, Priority, Size, Type } from '../../common';\nimport { logActionRequiredIf } from '../../utilities';\n\nconst deprecatedTypeMap = {\n [Type.PRIMARY]: ControlType.ACCENT,\n [Type.SECONDARY]: ControlType.ACCENT,\n [Type.LINK]: ControlType.ACCENT,\n [Type.PAY]: ControlType.POSITIVE,\n [Type.DANGER]: ControlType.NEGATIVE,\n};\n\nconst oldTypePriorityMap = {\n [Type.DANGER]: Priority.SECONDARY,\n [Type.LINK]: Priority.TERTIARY,\n [Type.SECONDARY]: Priority.SECONDARY,\n};\n\nconst deprecatedTypeMapMessage = {\n [Type.DANGER]: 'Type.NEGATIVE',\n [Type.LINK]: 'ControlType.ACCENT with priority Priority.TERTIARY',\n [Type.PAY]: 'ControlType.POSITIVE',\n [Type.PRIMARY]: 'ControlType.ACCENT',\n [Type.SECONDARY]: 'ControlType.ACCENT with priority Priority.SECONDARY',\n};\n\nconst deprecatedTypes = Object.keys(deprecatedTypeMap);\n\nexport const establishNewType = (originalType) => deprecatedTypeMap[originalType] || originalType;\n\nexport const establishNewPriority = (originalPriority, originalType) => {\n const type = establishNewType(originalType);\n\n // The old SECONDARY and LINK types now map to priorities. If they're still using one of\n // these old types, ignore whatever priority they've passed and use this instead.\n if (oldTypePriorityMap[originalType]) {\n return oldTypePriorityMap[originalType];\n }\n // Only ControlType.ACCENT supports tertiary styles\n if (originalPriority === Priority.TERTIARY && type !== ControlType.ACCENT) {\n return Priority.SECONDARY;\n }\n return originalPriority;\n};\n\nexport const logDeprecationNotices = ({ size, type }) => {\n logActionRequiredIf(\n 'Button has deprecated the `Size.EXTRA_SMALL` value for the `size` prop. Please use Size.SMALL instead.',\n size === Size.EXTRA_SMALL,\n );\n logActionRequiredIf(\n `Button has deprecated the ${type} value for the \\`type\\` prop. Please update to ${deprecatedTypeMapMessage[type]}.`,\n deprecatedTypes.includes(type),\n );\n};\n"],"names":["deprecatedTypeMap","Type","PRIMARY","ControlType","ACCENT","SECONDARY","LINK","PAY","POSITIVE","DANGER","NEGATIVE","oldTypePriorityMap","Priority","TERTIARY","deprecatedTypeMapMessage","deprecatedTypes","Object","keys","establishNewType","originalType","establishNewPriority","originalPriority","type","logDeprecationNotices","size","logActionRequiredIf","Size","EXTRA_SMALL","includes"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAGA,MAAMA,iBAAiB,GAAG;AACxB,EAAA,CAACC,IAAI,CAACC,OAAO,GAAGC,WAAW,CAACC,MAAM;AAClC,EAAA,CAACH,IAAI,CAACI,SAAS,GAAGF,WAAW,CAACC,MAAM;AACpC,EAAA,CAACH,IAAI,CAACK,IAAI,GAAGH,WAAW,CAACC,MAAM;AAC/B,EAAA,CAACH,IAAI,CAACM,GAAG,GAAGJ,WAAW,CAACK,QAAQ;AAChC,EAAA,CAACP,IAAI,CAACQ,MAAM,GAAGN,WAAW,CAACO,QAAAA;AAC7B,CAAC,CAAA;AAED,MAAMC,kBAAkB,GAAG;AACzB,EAAA,CAACV,IAAI,CAACQ,MAAM,GAAGG,QAAQ,CAACP,SAAS;AACjC,EAAA,CAACJ,IAAI,CAACK,IAAI,GAAGM,QAAQ,CAACC,QAAQ;AAC9B,EAAA,CAACZ,IAAI,CAACI,SAAS,GAAGO,QAAQ,CAACP,SAAAA;AAC7B,CAAC,CAAA;AAED,MAAMS,wBAAwB,GAAG;AAC/B,EAAA,CAACb,IAAI,CAACQ,MAAM,GAAG,eAAe;AAC9B,EAAA,CAACR,IAAI,CAACK,IAAI,GAAG,oDAAoD;AACjE,EAAA,CAACL,IAAI,CAACM,GAAG,GAAG,sBAAsB;AAClC,EAAA,CAACN,IAAI,CAACC,OAAO,GAAG,oBAAoB;EACpC,CAACD,IAAI,CAACI,SAAS,GAAG,qDAAA;AACpB,CAAC,CAAA;AAED,MAAMU,eAAe,GAAGC,MAAM,CAACC,IAAI,CAACjB,iBAAiB,CAAC,CAAA;AAE/C,MAAMkB,gBAAgB,GAAIC,YAAY,IAAKnB,iBAAiB,CAACmB,YAAY,CAAC,IAAIA,aAAY;MAEpFC,oBAAoB,GAAGA,CAACC,gBAAgB,EAAEF,YAAY,KAAK;AACtE,EAAA,MAAMG,IAAI,GAAGJ,gBAAgB,CAACC,YAAY,CAAC,CAAA;;AAE3C;AACA;AACA,EAAA,IAAIR,kBAAkB,CAACQ,YAAY,CAAC,EAAE;IACpC,OAAOR,kBAAkB,CAACQ,YAAY,CAAC,CAAA;AACzC,GAAA;AACA;EACA,IAAIE,gBAAgB,KAAKT,QAAQ,CAACC,QAAQ,IAAIS,IAAI,KAAKnB,WAAW,CAACC,MAAM,EAAE;IACzE,OAAOQ,QAAQ,CAACP,SAAS,CAAA;AAC3B,GAAA;AACA,EAAA,OAAOgB,gBAAgB,CAAA;AACzB,EAAC;AAEM,MAAME,qBAAqB,GAAGA,CAAC;EAAEC,IAAI;AAAEF,EAAAA,IAAAA;AAAK,CAAC,KAAK;EACvDG,mBAAmB,CACjB,wGAAwG,EACxGD,IAAI,KAAKE,IAAI,CAACC,WAChB,CAAC,CAAA;AACDF,EAAAA,mBAAmB,CACjB,CAA6BH,0BAAAA,EAAAA,IAAI,CAAkDR,+CAAAA,EAAAA,wBAAwB,CAACQ,IAAI,CAAC,CAAG,CAAA,CAAA,EACpHP,eAAe,CAACa,QAAQ,CAACN,IAAI,CAC/B,CAAC,CAAA;AACH;;;;"}
|
package/build/card/Card.js
CHANGED
|
@@ -4,10 +4,27 @@ var clsx = require('clsx');
|
|
|
4
4
|
var React = require('react');
|
|
5
5
|
var Body = require('../body/Body.js');
|
|
6
6
|
var Chevron = require('../chevron/Chevron.js');
|
|
7
|
+
require('../common/theme.js');
|
|
8
|
+
require('../common/direction.js');
|
|
9
|
+
require('../common/propsValues/control.js');
|
|
10
|
+
require('../common/propsValues/breakpoint.js');
|
|
11
|
+
require('../common/propsValues/size.js');
|
|
12
|
+
var typography = require('../common/propsValues/typography.js');
|
|
13
|
+
require('../common/propsValues/width.js');
|
|
14
|
+
require('../common/propsValues/type.js');
|
|
15
|
+
require('../common/propsValues/dateMode.js');
|
|
16
|
+
require('../common/propsValues/monthFormat.js');
|
|
17
|
+
var position = require('../common/propsValues/position.js');
|
|
18
|
+
require('../common/propsValues/layouts.js');
|
|
19
|
+
require('../common/propsValues/status.js');
|
|
20
|
+
require('../common/propsValues/sentiment.js');
|
|
21
|
+
require('../common/propsValues/profileType.js');
|
|
22
|
+
require('../common/propsValues/variant.js');
|
|
23
|
+
require('../common/propsValues/scroll.js');
|
|
24
|
+
require('../common/propsValues/markdownNodeType.js');
|
|
25
|
+
require('../common/fileType.js');
|
|
7
26
|
var Option = require('../common/Option/Option.js');
|
|
8
27
|
var jsxRuntime = require('react/jsx-runtime');
|
|
9
|
-
var position = require('../common/propsValues/position.js');
|
|
10
|
-
var typography = require('../common/propsValues/typography.js');
|
|
11
28
|
|
|
12
29
|
const Card = /*#__PURE__*/React.forwardRef(function Card({
|
|
13
30
|
'aria-label': ariaLabel,
|
package/build/card/Card.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Card.js","sources":["../../src/card/Card.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { forwardRef, useId } from 'react';\n\nimport Body from '../body';\nimport Chevron from '../chevron';\nimport { Position, Typography } from '../common';\nimport Option from '../common/Option';\n\nexport interface CardProps {\n 'aria-label'?: string;\n as?: React.ElementType;\n isExpanded?: boolean;\n title: React.ReactNode;\n details: React.ReactNode;\n icon?: React.ReactNode;\n children?: React.ReactNode;\n id?: string;\n className?: string;\n 'data-testid'?: string;\n onClick?: (nextIsExpanded: boolean) => void;\n}\n\n/**\n * @deprecated use Navigation pattern (via `NavigationOption` component)\n * @see https://transferwise.atlassian.net/wiki/spaces/DS/pages/2387314550/Instructions+for+killing+expanding+cards+on+web+design+pattern\n */\nconst Card = forwardRef(function Card(\n {\n 'aria-label': ariaLabel,\n as: Element = 'div',\n isExpanded,\n title,\n details,\n children,\n onClick,\n icon,\n id,\n className,\n 'data-testid': dataTestId,\n }: CardProps,\n reference,\n) {\n const labelId = useId();\n const contentId = useId();\n const isExpandable = Boolean(children);\n\n return (\n <Element\n ref={reference}\n className={clsx('np-card', className, {\n 'np-card--expanded': isExpandable && isExpanded,\n 'np-card--inactive': !children,\n 'np-card--has-icon': !!icon,\n })}\n id={id}\n data-testid={dataTestId}\n >\n <Option\n aria-expanded={isExpandable ? isExpanded : undefined}\n aria-controls={isExpanded ? contentId : undefined}\n id={labelId}\n aria-label={ariaLabel}\n as={isExpandable ? 'button' : 'div'}\n className=\"np-card__button\"\n media={icon}\n title={title}\n content={details}\n showMediaAtAllSizes\n button={\n isExpandable ? (\n <Chevron orientation={isExpanded ? Position.TOP : Position.BOTTOM} />\n ) : null\n }\n onClick={isExpandable ? () => onClick?.(!isExpanded) : undefined}\n />\n\n {isExpandable && (\n <div\n className={clsx('np-card__divider', {\n 'np-card__divider--expanded': isExpanded,\n })}\n />\n )}\n\n {isExpandable && isExpanded && (\n <Body\n as=\"div\"\n type={Typography.BODY_LARGE}\n className={clsx('np-card__content', isExpanded ? 'd-block' : 'hide')}\n id={contentId}\n aria-labelledby={labelId}\n >\n {children}\n </Body>\n )}\n </Element>\n );\n});\n\nexport default Card;\n"],"names":["Card","forwardRef","ariaLabel","as","Element","isExpanded","title","details","children","onClick","icon","id","className","dataTestId","reference","labelId","useId","contentId","isExpandable","Boolean","_jsxs","ref","clsx","_jsx","Option","undefined","media","content","showMediaAtAllSizes","button","Chevron","orientation","Position","TOP","BOTTOM","Body","type","Typography","BODY_LARGE"],"mappings":"
|
|
1
|
+
{"version":3,"file":"Card.js","sources":["../../src/card/Card.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { forwardRef, useId } from 'react';\n\nimport Body from '../body';\nimport Chevron from '../chevron';\nimport { Position, Typography } from '../common';\nimport Option from '../common/Option';\n\nexport interface CardProps {\n 'aria-label'?: string;\n as?: React.ElementType;\n isExpanded?: boolean;\n title: React.ReactNode;\n details: React.ReactNode;\n icon?: React.ReactNode;\n children?: React.ReactNode;\n id?: string;\n className?: string;\n 'data-testid'?: string;\n onClick?: (nextIsExpanded: boolean) => void;\n}\n\n/**\n * @deprecated use Navigation pattern (via `NavigationOption` component)\n * @see https://transferwise.atlassian.net/wiki/spaces/DS/pages/2387314550/Instructions+for+killing+expanding+cards+on+web+design+pattern\n */\nconst Card = forwardRef(function Card(\n {\n 'aria-label': ariaLabel,\n as: Element = 'div',\n isExpanded,\n title,\n details,\n children,\n onClick,\n icon,\n id,\n className,\n 'data-testid': dataTestId,\n }: CardProps,\n reference,\n) {\n const labelId = useId();\n const contentId = useId();\n const isExpandable = Boolean(children);\n\n return (\n <Element\n ref={reference}\n className={clsx('np-card', className, {\n 'np-card--expanded': isExpandable && isExpanded,\n 'np-card--inactive': !children,\n 'np-card--has-icon': !!icon,\n })}\n id={id}\n data-testid={dataTestId}\n >\n <Option\n aria-expanded={isExpandable ? isExpanded : undefined}\n aria-controls={isExpanded ? contentId : undefined}\n id={labelId}\n aria-label={ariaLabel}\n as={isExpandable ? 'button' : 'div'}\n className=\"np-card__button\"\n media={icon}\n title={title}\n content={details}\n showMediaAtAllSizes\n button={\n isExpandable ? (\n <Chevron orientation={isExpanded ? Position.TOP : Position.BOTTOM} />\n ) : null\n }\n onClick={isExpandable ? () => onClick?.(!isExpanded) : undefined}\n />\n\n {isExpandable && (\n <div\n className={clsx('np-card__divider', {\n 'np-card__divider--expanded': isExpanded,\n })}\n />\n )}\n\n {isExpandable && isExpanded && (\n <Body\n as=\"div\"\n type={Typography.BODY_LARGE}\n className={clsx('np-card__content', isExpanded ? 'd-block' : 'hide')}\n id={contentId}\n aria-labelledby={labelId}\n >\n {children}\n </Body>\n )}\n </Element>\n );\n});\n\nexport default Card;\n"],"names":["Card","forwardRef","ariaLabel","as","Element","isExpanded","title","details","children","onClick","icon","id","className","dataTestId","reference","labelId","useId","contentId","isExpandable","Boolean","_jsxs","ref","clsx","_jsx","Option","undefined","media","content","showMediaAtAllSizes","button","Chevron","orientation","Position","TOP","BOTTOM","Body","type","Typography","BODY_LARGE"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0BA,MAAMA,IAAI,gBAAGC,gBAAU,CAAC,SAASD,IAAIA,CACnC;AACE,EAAA,YAAY,EAAEE,SAAS;EACvBC,EAAE,EAAEC,OAAO,GAAG,KAAK;EACnBC,UAAU;EACVC,KAAK;EACLC,OAAO;EACPC,QAAQ;EACRC,OAAO;EACPC,IAAI;EACJC,EAAE;EACFC,SAAS;AACT,EAAA,aAAa,EAAEC,UAAAA;AAAU,CACf,EACZC,SAAS,EAAA;AAET,EAAA,MAAMC,OAAO,GAAGC,WAAK,EAAE,CAAA;AACvB,EAAA,MAAMC,SAAS,GAAGD,WAAK,EAAE,CAAA;AACzB,EAAA,MAAME,YAAY,GAAGC,OAAO,CAACX,QAAQ,CAAC,CAAA;EAEtC,oBACEY,eAAA,CAAChB,OAAO,EAAA;AACNiB,IAAAA,GAAG,EAAEP,SAAU;AACfF,IAAAA,SAAS,EAAEU,SAAI,CAAC,SAAS,EAAEV,SAAS,EAAE;MACpC,mBAAmB,EAAEM,YAAY,IAAIb,UAAU;MAC/C,mBAAmB,EAAE,CAACG,QAAQ;MAC9B,mBAAmB,EAAE,CAAC,CAACE,IAAAA;AACxB,KAAA,CAAE;AACHC,IAAAA,EAAE,EAAEA,EAAG;AACP,IAAA,aAAA,EAAaE,UAAW;IAAAL,QAAA,EAAA,cAExBe,cAAA,CAACC,MAAM,EAAA;AACL,MAAA,eAAA,EAAeN,YAAY,GAAGb,UAAU,GAAGoB,SAAU;AACrD,MAAA,eAAA,EAAepB,UAAU,GAAGY,SAAS,GAAGQ,SAAU;AAClDd,MAAAA,EAAE,EAAEI,OAAQ;AACZ,MAAA,YAAA,EAAYb,SAAU;AACtBC,MAAAA,EAAE,EAAEe,YAAY,GAAG,QAAQ,GAAG,KAAM;AACpCN,MAAAA,SAAS,EAAC,iBAAiB;AAC3Bc,MAAAA,KAAK,EAAEhB,IAAK;AACZJ,MAAAA,KAAK,EAAEA,KAAM;AACbqB,MAAAA,OAAO,EAAEpB,OAAQ;MACjBqB,mBAAmB,EAAA,IAAA;AACnBC,MAAAA,MAAM,EACJX,YAAY,gBACVK,cAAA,CAACO,OAAO,EAAA;QAACC,WAAW,EAAE1B,UAAU,GAAG2B,iBAAQ,CAACC,GAAG,GAAGD,iBAAQ,CAACE,MAAAA;OAAO,CAAG,GACnE,IACL;MACDzB,OAAO,EAAES,YAAY,GAAG,MAAMT,OAAO,GAAG,CAACJ,UAAU,CAAC,GAAGoB,SAAAA;AAAU,KAGnE,CAAA,EAACP,YAAY,iBACXK,cAAA,CAAA,KAAA,EAAA;AACEX,MAAAA,SAAS,EAAEU,SAAI,CAAC,kBAAkB,EAAE;AAClC,QAAA,4BAA4B,EAAEjB,UAAAA;OAC/B,CAAA;KACD,CACH,EAEAa,YAAY,IAAIb,UAAU,iBACzBkB,cAAA,CAACY,IAAI,EAAA;AACHhC,MAAAA,EAAE,EAAC,KAAK;MACRiC,IAAI,EAAEC,qBAAU,CAACC,UAAW;MAC5B1B,SAAS,EAAEU,SAAI,CAAC,kBAAkB,EAAEjB,UAAU,GAAG,SAAS,GAAG,MAAM,CAAE;AACrEM,MAAAA,EAAE,EAAEM,SAAU;AACd,MAAA,iBAAA,EAAiBF,OAAQ;AAAAP,MAAAA,QAAA,EAExBA,QAAAA;AAAQ,KACL,CACP,CAAA;AAAA,GACM,CAAC,CAAA;AAEd,CAAC;;;;"}
|
package/build/card/Card.mjs
CHANGED
|
@@ -2,10 +2,27 @@ import { clsx } from 'clsx';
|
|
|
2
2
|
import { forwardRef, useId } from 'react';
|
|
3
3
|
import Body from '../body/Body.mjs';
|
|
4
4
|
import Chevron from '../chevron/Chevron.mjs';
|
|
5
|
+
import '../common/theme.mjs';
|
|
6
|
+
import '../common/direction.mjs';
|
|
7
|
+
import '../common/propsValues/control.mjs';
|
|
8
|
+
import '../common/propsValues/breakpoint.mjs';
|
|
9
|
+
import '../common/propsValues/size.mjs';
|
|
10
|
+
import { Typography } from '../common/propsValues/typography.mjs';
|
|
11
|
+
import '../common/propsValues/width.mjs';
|
|
12
|
+
import '../common/propsValues/type.mjs';
|
|
13
|
+
import '../common/propsValues/dateMode.mjs';
|
|
14
|
+
import '../common/propsValues/monthFormat.mjs';
|
|
15
|
+
import { Position } from '../common/propsValues/position.mjs';
|
|
16
|
+
import '../common/propsValues/layouts.mjs';
|
|
17
|
+
import '../common/propsValues/status.mjs';
|
|
18
|
+
import '../common/propsValues/sentiment.mjs';
|
|
19
|
+
import '../common/propsValues/profileType.mjs';
|
|
20
|
+
import '../common/propsValues/variant.mjs';
|
|
21
|
+
import '../common/propsValues/scroll.mjs';
|
|
22
|
+
import '../common/propsValues/markdownNodeType.mjs';
|
|
23
|
+
import '../common/fileType.mjs';
|
|
5
24
|
import Option from '../common/Option/Option.mjs';
|
|
6
25
|
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
7
|
-
import { Position } from '../common/propsValues/position.mjs';
|
|
8
|
-
import { Typography } from '../common/propsValues/typography.mjs';
|
|
9
26
|
|
|
10
27
|
const Card = /*#__PURE__*/forwardRef(function Card({
|
|
11
28
|
'aria-label': ariaLabel,
|
package/build/card/Card.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Card.mjs","sources":["../../src/card/Card.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { forwardRef, useId } from 'react';\n\nimport Body from '../body';\nimport Chevron from '../chevron';\nimport { Position, Typography } from '../common';\nimport Option from '../common/Option';\n\nexport interface CardProps {\n 'aria-label'?: string;\n as?: React.ElementType;\n isExpanded?: boolean;\n title: React.ReactNode;\n details: React.ReactNode;\n icon?: React.ReactNode;\n children?: React.ReactNode;\n id?: string;\n className?: string;\n 'data-testid'?: string;\n onClick?: (nextIsExpanded: boolean) => void;\n}\n\n/**\n * @deprecated use Navigation pattern (via `NavigationOption` component)\n * @see https://transferwise.atlassian.net/wiki/spaces/DS/pages/2387314550/Instructions+for+killing+expanding+cards+on+web+design+pattern\n */\nconst Card = forwardRef(function Card(\n {\n 'aria-label': ariaLabel,\n as: Element = 'div',\n isExpanded,\n title,\n details,\n children,\n onClick,\n icon,\n id,\n className,\n 'data-testid': dataTestId,\n }: CardProps,\n reference,\n) {\n const labelId = useId();\n const contentId = useId();\n const isExpandable = Boolean(children);\n\n return (\n <Element\n ref={reference}\n className={clsx('np-card', className, {\n 'np-card--expanded': isExpandable && isExpanded,\n 'np-card--inactive': !children,\n 'np-card--has-icon': !!icon,\n })}\n id={id}\n data-testid={dataTestId}\n >\n <Option\n aria-expanded={isExpandable ? isExpanded : undefined}\n aria-controls={isExpanded ? contentId : undefined}\n id={labelId}\n aria-label={ariaLabel}\n as={isExpandable ? 'button' : 'div'}\n className=\"np-card__button\"\n media={icon}\n title={title}\n content={details}\n showMediaAtAllSizes\n button={\n isExpandable ? (\n <Chevron orientation={isExpanded ? Position.TOP : Position.BOTTOM} />\n ) : null\n }\n onClick={isExpandable ? () => onClick?.(!isExpanded) : undefined}\n />\n\n {isExpandable && (\n <div\n className={clsx('np-card__divider', {\n 'np-card__divider--expanded': isExpanded,\n })}\n />\n )}\n\n {isExpandable && isExpanded && (\n <Body\n as=\"div\"\n type={Typography.BODY_LARGE}\n className={clsx('np-card__content', isExpanded ? 'd-block' : 'hide')}\n id={contentId}\n aria-labelledby={labelId}\n >\n {children}\n </Body>\n )}\n </Element>\n );\n});\n\nexport default Card;\n"],"names":["Card","forwardRef","ariaLabel","as","Element","isExpanded","title","details","children","onClick","icon","id","className","dataTestId","reference","labelId","useId","contentId","isExpandable","Boolean","_jsxs","ref","clsx","_jsx","Option","undefined","media","content","showMediaAtAllSizes","button","Chevron","orientation","Position","TOP","BOTTOM","Body","type","Typography","BODY_LARGE"],"mappings":"
|
|
1
|
+
{"version":3,"file":"Card.mjs","sources":["../../src/card/Card.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { forwardRef, useId } from 'react';\n\nimport Body from '../body';\nimport Chevron from '../chevron';\nimport { Position, Typography } from '../common';\nimport Option from '../common/Option';\n\nexport interface CardProps {\n 'aria-label'?: string;\n as?: React.ElementType;\n isExpanded?: boolean;\n title: React.ReactNode;\n details: React.ReactNode;\n icon?: React.ReactNode;\n children?: React.ReactNode;\n id?: string;\n className?: string;\n 'data-testid'?: string;\n onClick?: (nextIsExpanded: boolean) => void;\n}\n\n/**\n * @deprecated use Navigation pattern (via `NavigationOption` component)\n * @see https://transferwise.atlassian.net/wiki/spaces/DS/pages/2387314550/Instructions+for+killing+expanding+cards+on+web+design+pattern\n */\nconst Card = forwardRef(function Card(\n {\n 'aria-label': ariaLabel,\n as: Element = 'div',\n isExpanded,\n title,\n details,\n children,\n onClick,\n icon,\n id,\n className,\n 'data-testid': dataTestId,\n }: CardProps,\n reference,\n) {\n const labelId = useId();\n const contentId = useId();\n const isExpandable = Boolean(children);\n\n return (\n <Element\n ref={reference}\n className={clsx('np-card', className, {\n 'np-card--expanded': isExpandable && isExpanded,\n 'np-card--inactive': !children,\n 'np-card--has-icon': !!icon,\n })}\n id={id}\n data-testid={dataTestId}\n >\n <Option\n aria-expanded={isExpandable ? isExpanded : undefined}\n aria-controls={isExpanded ? contentId : undefined}\n id={labelId}\n aria-label={ariaLabel}\n as={isExpandable ? 'button' : 'div'}\n className=\"np-card__button\"\n media={icon}\n title={title}\n content={details}\n showMediaAtAllSizes\n button={\n isExpandable ? (\n <Chevron orientation={isExpanded ? Position.TOP : Position.BOTTOM} />\n ) : null\n }\n onClick={isExpandable ? () => onClick?.(!isExpanded) : undefined}\n />\n\n {isExpandable && (\n <div\n className={clsx('np-card__divider', {\n 'np-card__divider--expanded': isExpanded,\n })}\n />\n )}\n\n {isExpandable && isExpanded && (\n <Body\n as=\"div\"\n type={Typography.BODY_LARGE}\n className={clsx('np-card__content', isExpanded ? 'd-block' : 'hide')}\n id={contentId}\n aria-labelledby={labelId}\n >\n {children}\n </Body>\n )}\n </Element>\n );\n});\n\nexport default Card;\n"],"names":["Card","forwardRef","ariaLabel","as","Element","isExpanded","title","details","children","onClick","icon","id","className","dataTestId","reference","labelId","useId","contentId","isExpandable","Boolean","_jsxs","ref","clsx","_jsx","Option","undefined","media","content","showMediaAtAllSizes","button","Chevron","orientation","Position","TOP","BOTTOM","Body","type","Typography","BODY_LARGE"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AA0BA,MAAMA,IAAI,gBAAGC,UAAU,CAAC,SAASD,IAAIA,CACnC;AACE,EAAA,YAAY,EAAEE,SAAS;EACvBC,EAAE,EAAEC,OAAO,GAAG,KAAK;EACnBC,UAAU;EACVC,KAAK;EACLC,OAAO;EACPC,QAAQ;EACRC,OAAO;EACPC,IAAI;EACJC,EAAE;EACFC,SAAS;AACT,EAAA,aAAa,EAAEC,UAAAA;AAAU,CACf,EACZC,SAAS,EAAA;AAET,EAAA,MAAMC,OAAO,GAAGC,KAAK,EAAE,CAAA;AACvB,EAAA,MAAMC,SAAS,GAAGD,KAAK,EAAE,CAAA;AACzB,EAAA,MAAME,YAAY,GAAGC,OAAO,CAACX,QAAQ,CAAC,CAAA;EAEtC,oBACEY,IAAA,CAAChB,OAAO,EAAA;AACNiB,IAAAA,GAAG,EAAEP,SAAU;AACfF,IAAAA,SAAS,EAAEU,IAAI,CAAC,SAAS,EAAEV,SAAS,EAAE;MACpC,mBAAmB,EAAEM,YAAY,IAAIb,UAAU;MAC/C,mBAAmB,EAAE,CAACG,QAAQ;MAC9B,mBAAmB,EAAE,CAAC,CAACE,IAAAA;AACxB,KAAA,CAAE;AACHC,IAAAA,EAAE,EAAEA,EAAG;AACP,IAAA,aAAA,EAAaE,UAAW;IAAAL,QAAA,EAAA,cAExBe,GAAA,CAACC,MAAM,EAAA;AACL,MAAA,eAAA,EAAeN,YAAY,GAAGb,UAAU,GAAGoB,SAAU;AACrD,MAAA,eAAA,EAAepB,UAAU,GAAGY,SAAS,GAAGQ,SAAU;AAClDd,MAAAA,EAAE,EAAEI,OAAQ;AACZ,MAAA,YAAA,EAAYb,SAAU;AACtBC,MAAAA,EAAE,EAAEe,YAAY,GAAG,QAAQ,GAAG,KAAM;AACpCN,MAAAA,SAAS,EAAC,iBAAiB;AAC3Bc,MAAAA,KAAK,EAAEhB,IAAK;AACZJ,MAAAA,KAAK,EAAEA,KAAM;AACbqB,MAAAA,OAAO,EAAEpB,OAAQ;MACjBqB,mBAAmB,EAAA,IAAA;AACnBC,MAAAA,MAAM,EACJX,YAAY,gBACVK,GAAA,CAACO,OAAO,EAAA;QAACC,WAAW,EAAE1B,UAAU,GAAG2B,QAAQ,CAACC,GAAG,GAAGD,QAAQ,CAACE,MAAAA;OAAO,CAAG,GACnE,IACL;MACDzB,OAAO,EAAES,YAAY,GAAG,MAAMT,OAAO,GAAG,CAACJ,UAAU,CAAC,GAAGoB,SAAAA;AAAU,KAGnE,CAAA,EAACP,YAAY,iBACXK,GAAA,CAAA,KAAA,EAAA;AACEX,MAAAA,SAAS,EAAEU,IAAI,CAAC,kBAAkB,EAAE;AAClC,QAAA,4BAA4B,EAAEjB,UAAAA;OAC/B,CAAA;KACD,CACH,EAEAa,YAAY,IAAIb,UAAU,iBACzBkB,GAAA,CAACY,IAAI,EAAA;AACHhC,MAAAA,EAAE,EAAC,KAAK;MACRiC,IAAI,EAAEC,UAAU,CAACC,UAAW;MAC5B1B,SAAS,EAAEU,IAAI,CAAC,kBAAkB,EAAEjB,UAAU,GAAG,SAAS,GAAG,MAAM,CAAE;AACrEM,MAAAA,EAAE,EAAEM,SAAU;AACd,MAAA,iBAAA,EAAiBF,OAAQ;AAAAP,MAAAA,QAAA,EAExBA,QAAAA;AAAQ,KACL,CACP,CAAA;AAAA,GACM,CAAC,CAAA;AAEd,CAAC;;;;"}
|
|
@@ -2,9 +2,27 @@
|
|
|
2
2
|
|
|
3
3
|
var clsx = require('clsx');
|
|
4
4
|
var Body = require('../body/Body.js');
|
|
5
|
+
require('../common/theme.js');
|
|
6
|
+
require('../common/direction.js');
|
|
7
|
+
require('../common/propsValues/control.js');
|
|
8
|
+
require('../common/propsValues/breakpoint.js');
|
|
9
|
+
require('../common/propsValues/size.js');
|
|
10
|
+
var typography = require('../common/propsValues/typography.js');
|
|
11
|
+
require('../common/propsValues/width.js');
|
|
12
|
+
require('../common/propsValues/type.js');
|
|
13
|
+
require('../common/propsValues/dateMode.js');
|
|
14
|
+
require('../common/propsValues/monthFormat.js');
|
|
15
|
+
require('../common/propsValues/position.js');
|
|
16
|
+
require('../common/propsValues/layouts.js');
|
|
17
|
+
require('../common/propsValues/status.js');
|
|
18
|
+
require('../common/propsValues/sentiment.js');
|
|
19
|
+
require('../common/propsValues/profileType.js');
|
|
20
|
+
require('../common/propsValues/variant.js');
|
|
21
|
+
require('../common/propsValues/scroll.js');
|
|
22
|
+
require('../common/propsValues/markdownNodeType.js');
|
|
23
|
+
require('../common/fileType.js');
|
|
5
24
|
var jsxRuntime = require('react/jsx-runtime');
|
|
6
25
|
var CheckboxButton = require('../checkboxButton/CheckboxButton.js');
|
|
7
|
-
var typography = require('../common/propsValues/typography.js');
|
|
8
26
|
|
|
9
27
|
function Checkbox({
|
|
10
28
|
id,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Checkbox.js","sources":["../../src/checkbox/Checkbox.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport Body from '../body/Body';\nimport CheckboxButton from '../checkboxButton';\nimport { Typography } from '../common';\n\nexport interface CheckboxProps {\n id?: string;\n checked?: boolean;\n required?: boolean;\n disabled?: boolean;\n readOnly?: boolean;\n label: React.ReactNode;\n secondary?: string;\n onFocus?: React.FocusEventHandler<HTMLInputElement>;\n onChange: (checked: boolean) => void;\n onBlur?: React.FocusEventHandler<HTMLInputElement>;\n className?: string;\n}\n\nexport default function Checkbox({\n id,\n checked,\n required,\n disabled,\n readOnly,\n label,\n className,\n secondary,\n onChange,\n onFocus,\n onBlur,\n}: CheckboxProps) {\n const classList = clsx(\n 'np-checkbox',\n {\n checkbox: true,\n 'checkbox-lg': secondary,\n 'checkbox-disabled': disabled,\n },\n className,\n );\n\n const innerDisabled = disabled || readOnly;\n return (\n <div id={id} className={classList}>\n {/* eslint-disable-next-line jsx-a11y/label-has-for */}\n <label className={clsx({ disabled })}>\n <CheckboxButton\n className=\"p-r-2\"\n checked={checked}\n disabled={innerDisabled}\n required={!innerDisabled && required}\n onFocus={onFocus}\n onChange={() => onChange(!checked)}\n onBlur={onBlur}\n />\n <Body\n as=\"span\"\n className=\"np-checkbox__text\"\n type={secondary ? Typography.BODY_LARGE_BOLD : Typography.BODY_LARGE}\n >\n <span className={required ? 'has-required' : undefined}>{label}</span>\n {secondary && <Body as=\"span\">{secondary}</Body>}\n </Body>\n </label>\n </div>\n );\n}\n"],"names":["Checkbox","id","checked","required","disabled","readOnly","label","className","secondary","onChange","onFocus","onBlur","classList","clsx","checkbox","innerDisabled","_jsx","children","_jsxs","CheckboxButton","Body","as","type","Typography","BODY_LARGE_BOLD","BODY_LARGE","undefined"],"mappings":"
|
|
1
|
+
{"version":3,"file":"Checkbox.js","sources":["../../src/checkbox/Checkbox.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport Body from '../body/Body';\nimport CheckboxButton from '../checkboxButton';\nimport { Typography } from '../common';\n\nexport interface CheckboxProps {\n id?: string;\n checked?: boolean;\n required?: boolean;\n disabled?: boolean;\n readOnly?: boolean;\n label: React.ReactNode;\n secondary?: string;\n onFocus?: React.FocusEventHandler<HTMLInputElement>;\n onChange: (checked: boolean) => void;\n onBlur?: React.FocusEventHandler<HTMLInputElement>;\n className?: string;\n}\n\nexport default function Checkbox({\n id,\n checked,\n required,\n disabled,\n readOnly,\n label,\n className,\n secondary,\n onChange,\n onFocus,\n onBlur,\n}: CheckboxProps) {\n const classList = clsx(\n 'np-checkbox',\n {\n checkbox: true,\n 'checkbox-lg': secondary,\n 'checkbox-disabled': disabled,\n },\n className,\n );\n\n const innerDisabled = disabled || readOnly;\n return (\n <div id={id} className={classList}>\n {/* eslint-disable-next-line jsx-a11y/label-has-for */}\n <label className={clsx({ disabled })}>\n <CheckboxButton\n className=\"p-r-2\"\n checked={checked}\n disabled={innerDisabled}\n required={!innerDisabled && required}\n onFocus={onFocus}\n onChange={() => onChange(!checked)}\n onBlur={onBlur}\n />\n <Body\n as=\"span\"\n className=\"np-checkbox__text\"\n type={secondary ? Typography.BODY_LARGE_BOLD : Typography.BODY_LARGE}\n >\n <span className={required ? 'has-required' : undefined}>{label}</span>\n {secondary && <Body as=\"span\">{secondary}</Body>}\n </Body>\n </label>\n </div>\n );\n}\n"],"names":["Checkbox","id","checked","required","disabled","readOnly","label","className","secondary","onChange","onFocus","onBlur","classList","clsx","checkbox","innerDisabled","_jsx","children","_jsxs","CheckboxButton","Body","as","type","Typography","BODY_LARGE_BOLD","BODY_LARGE","undefined"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAoBc,SAAUA,QAAQA,CAAC;EAC/BC,EAAE;EACFC,OAAO;EACPC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,KAAK;EACLC,SAAS;EACTC,SAAS;EACTC,QAAQ;EACRC,OAAO;AACPC,EAAAA,MAAAA;AACc,CAAA,EAAA;AACd,EAAA,MAAMC,SAAS,GAAGC,SAAI,CACpB,aAAa,EACb;AACEC,IAAAA,QAAQ,EAAE,IAAI;AACd,IAAA,aAAa,EAAEN,SAAS;AACxB,IAAA,mBAAmB,EAAEJ,QAAAA;GACtB,EACDG,SAAS,CACV,CAAA;AAED,EAAA,MAAMQ,aAAa,GAAGX,QAAQ,IAAIC,QAAQ,CAAA;AAC1C,EAAA,oBACEW,cAAA,CAAA,KAAA,EAAA;AAAKf,IAAAA,EAAE,EAAEA,EAAG;AAACM,IAAAA,SAAS,EAAEK,SAAU;AAAAK,IAAAA,QAAA,eAEhCC,eAAA,CAAA,OAAA,EAAA;MAAOX,SAAS,EAAEM,SAAI,CAAC;AAAET,QAAAA,QAAAA;AAAQ,OAAE,CAAE;MAAAa,QAAA,EAAA,cACnCD,cAAA,CAACG,cAAc,EAAA;AACbZ,QAAAA,SAAS,EAAC,OAAO;AACjBL,QAAAA,OAAO,EAAEA,OAAQ;AACjBE,QAAAA,QAAQ,EAAEW,aAAc;AACxBZ,QAAAA,QAAQ,EAAE,CAACY,aAAa,IAAIZ,QAAS;AACrCO,QAAAA,OAAO,EAAEA,OAAQ;AACjBD,QAAAA,QAAQ,EAAEA,MAAMA,QAAQ,CAAC,CAACP,OAAO,CAAE;AACnCS,QAAAA,MAAM,EAAEA,MAAAA;AAAO,OAEjB,CAAA,eAAAO,eAAA,CAACE,IAAI,EAAA;AACHC,QAAAA,EAAE,EAAC,MAAM;AACTd,QAAAA,SAAS,EAAC,mBAAmB;QAC7Be,IAAI,EAAEd,SAAS,GAAGe,qBAAU,CAACC,eAAe,GAAGD,qBAAU,CAACE,UAAW;AAAAR,QAAAA,QAAA,gBAErED,cAAA,CAAA,MAAA,EAAA;AAAMT,UAAAA,SAAS,EAAEJ,QAAQ,GAAG,cAAc,GAAGuB,SAAU;AAAAT,UAAAA,QAAA,EAAEX,KAAAA;AAAK,SAAO,CACrE,EAACE,SAAS,iBAAIQ,cAAA,CAACI,IAAI,EAAA;AAACC,UAAAA,EAAE,EAAC,MAAM;AAAAJ,UAAAA,QAAA,EAAET,SAAAA;AAAS,SAAO,CAAC,CAAA;AAAA,OAC5C,CACR,CAAA;KAAO,CAAA;AACT,GAAK,CAAC,CAAA;AAEV;;;;"}
|
|
@@ -1,8 +1,26 @@
|
|
|
1
1
|
import { clsx } from 'clsx';
|
|
2
2
|
import Body from '../body/Body.mjs';
|
|
3
|
+
import '../common/theme.mjs';
|
|
4
|
+
import '../common/direction.mjs';
|
|
5
|
+
import '../common/propsValues/control.mjs';
|
|
6
|
+
import '../common/propsValues/breakpoint.mjs';
|
|
7
|
+
import '../common/propsValues/size.mjs';
|
|
8
|
+
import { Typography } from '../common/propsValues/typography.mjs';
|
|
9
|
+
import '../common/propsValues/width.mjs';
|
|
10
|
+
import '../common/propsValues/type.mjs';
|
|
11
|
+
import '../common/propsValues/dateMode.mjs';
|
|
12
|
+
import '../common/propsValues/monthFormat.mjs';
|
|
13
|
+
import '../common/propsValues/position.mjs';
|
|
14
|
+
import '../common/propsValues/layouts.mjs';
|
|
15
|
+
import '../common/propsValues/status.mjs';
|
|
16
|
+
import '../common/propsValues/sentiment.mjs';
|
|
17
|
+
import '../common/propsValues/profileType.mjs';
|
|
18
|
+
import '../common/propsValues/variant.mjs';
|
|
19
|
+
import '../common/propsValues/scroll.mjs';
|
|
20
|
+
import '../common/propsValues/markdownNodeType.mjs';
|
|
21
|
+
import '../common/fileType.mjs';
|
|
3
22
|
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
4
23
|
import CheckboxButton from '../checkboxButton/CheckboxButton.mjs';
|
|
5
|
-
import { Typography } from '../common/propsValues/typography.mjs';
|
|
6
24
|
|
|
7
25
|
function Checkbox({
|
|
8
26
|
id,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Checkbox.mjs","sources":["../../src/checkbox/Checkbox.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport Body from '../body/Body';\nimport CheckboxButton from '../checkboxButton';\nimport { Typography } from '../common';\n\nexport interface CheckboxProps {\n id?: string;\n checked?: boolean;\n required?: boolean;\n disabled?: boolean;\n readOnly?: boolean;\n label: React.ReactNode;\n secondary?: string;\n onFocus?: React.FocusEventHandler<HTMLInputElement>;\n onChange: (checked: boolean) => void;\n onBlur?: React.FocusEventHandler<HTMLInputElement>;\n className?: string;\n}\n\nexport default function Checkbox({\n id,\n checked,\n required,\n disabled,\n readOnly,\n label,\n className,\n secondary,\n onChange,\n onFocus,\n onBlur,\n}: CheckboxProps) {\n const classList = clsx(\n 'np-checkbox',\n {\n checkbox: true,\n 'checkbox-lg': secondary,\n 'checkbox-disabled': disabled,\n },\n className,\n );\n\n const innerDisabled = disabled || readOnly;\n return (\n <div id={id} className={classList}>\n {/* eslint-disable-next-line jsx-a11y/label-has-for */}\n <label className={clsx({ disabled })}>\n <CheckboxButton\n className=\"p-r-2\"\n checked={checked}\n disabled={innerDisabled}\n required={!innerDisabled && required}\n onFocus={onFocus}\n onChange={() => onChange(!checked)}\n onBlur={onBlur}\n />\n <Body\n as=\"span\"\n className=\"np-checkbox__text\"\n type={secondary ? Typography.BODY_LARGE_BOLD : Typography.BODY_LARGE}\n >\n <span className={required ? 'has-required' : undefined}>{label}</span>\n {secondary && <Body as=\"span\">{secondary}</Body>}\n </Body>\n </label>\n </div>\n );\n}\n"],"names":["Checkbox","id","checked","required","disabled","readOnly","label","className","secondary","onChange","onFocus","onBlur","classList","clsx","checkbox","innerDisabled","_jsx","children","_jsxs","CheckboxButton","Body","as","type","Typography","BODY_LARGE_BOLD","BODY_LARGE","undefined"],"mappings":"
|
|
1
|
+
{"version":3,"file":"Checkbox.mjs","sources":["../../src/checkbox/Checkbox.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport Body from '../body/Body';\nimport CheckboxButton from '../checkboxButton';\nimport { Typography } from '../common';\n\nexport interface CheckboxProps {\n id?: string;\n checked?: boolean;\n required?: boolean;\n disabled?: boolean;\n readOnly?: boolean;\n label: React.ReactNode;\n secondary?: string;\n onFocus?: React.FocusEventHandler<HTMLInputElement>;\n onChange: (checked: boolean) => void;\n onBlur?: React.FocusEventHandler<HTMLInputElement>;\n className?: string;\n}\n\nexport default function Checkbox({\n id,\n checked,\n required,\n disabled,\n readOnly,\n label,\n className,\n secondary,\n onChange,\n onFocus,\n onBlur,\n}: CheckboxProps) {\n const classList = clsx(\n 'np-checkbox',\n {\n checkbox: true,\n 'checkbox-lg': secondary,\n 'checkbox-disabled': disabled,\n },\n className,\n );\n\n const innerDisabled = disabled || readOnly;\n return (\n <div id={id} className={classList}>\n {/* eslint-disable-next-line jsx-a11y/label-has-for */}\n <label className={clsx({ disabled })}>\n <CheckboxButton\n className=\"p-r-2\"\n checked={checked}\n disabled={innerDisabled}\n required={!innerDisabled && required}\n onFocus={onFocus}\n onChange={() => onChange(!checked)}\n onBlur={onBlur}\n />\n <Body\n as=\"span\"\n className=\"np-checkbox__text\"\n type={secondary ? Typography.BODY_LARGE_BOLD : Typography.BODY_LARGE}\n >\n <span className={required ? 'has-required' : undefined}>{label}</span>\n {secondary && <Body as=\"span\">{secondary}</Body>}\n </Body>\n </label>\n </div>\n );\n}\n"],"names":["Checkbox","id","checked","required","disabled","readOnly","label","className","secondary","onChange","onFocus","onBlur","classList","clsx","checkbox","innerDisabled","_jsx","children","_jsxs","CheckboxButton","Body","as","type","Typography","BODY_LARGE_BOLD","BODY_LARGE","undefined"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAoBc,SAAUA,QAAQA,CAAC;EAC/BC,EAAE;EACFC,OAAO;EACPC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,KAAK;EACLC,SAAS;EACTC,SAAS;EACTC,QAAQ;EACRC,OAAO;AACPC,EAAAA,MAAAA;AACc,CAAA,EAAA;AACd,EAAA,MAAMC,SAAS,GAAGC,IAAI,CACpB,aAAa,EACb;AACEC,IAAAA,QAAQ,EAAE,IAAI;AACd,IAAA,aAAa,EAAEN,SAAS;AACxB,IAAA,mBAAmB,EAAEJ,QAAAA;GACtB,EACDG,SAAS,CACV,CAAA;AAED,EAAA,MAAMQ,aAAa,GAAGX,QAAQ,IAAIC,QAAQ,CAAA;AAC1C,EAAA,oBACEW,GAAA,CAAA,KAAA,EAAA;AAAKf,IAAAA,EAAE,EAAEA,EAAG;AAACM,IAAAA,SAAS,EAAEK,SAAU;AAAAK,IAAAA,QAAA,eAEhCC,IAAA,CAAA,OAAA,EAAA;MAAOX,SAAS,EAAEM,IAAI,CAAC;AAAET,QAAAA,QAAAA;AAAQ,OAAE,CAAE;MAAAa,QAAA,EAAA,cACnCD,GAAA,CAACG,cAAc,EAAA;AACbZ,QAAAA,SAAS,EAAC,OAAO;AACjBL,QAAAA,OAAO,EAAEA,OAAQ;AACjBE,QAAAA,QAAQ,EAAEW,aAAc;AACxBZ,QAAAA,QAAQ,EAAE,CAACY,aAAa,IAAIZ,QAAS;AACrCO,QAAAA,OAAO,EAAEA,OAAQ;AACjBD,QAAAA,QAAQ,EAAEA,MAAMA,QAAQ,CAAC,CAACP,OAAO,CAAE;AACnCS,QAAAA,MAAM,EAAEA,MAAAA;AAAO,OAEjB,CAAA,eAAAO,IAAA,CAACE,IAAI,EAAA;AACHC,QAAAA,EAAE,EAAC,MAAM;AACTd,QAAAA,SAAS,EAAC,mBAAmB;QAC7Be,IAAI,EAAEd,SAAS,GAAGe,UAAU,CAACC,eAAe,GAAGD,UAAU,CAACE,UAAW;AAAAR,QAAAA,QAAA,gBAErED,GAAA,CAAA,MAAA,EAAA;AAAMT,UAAAA,SAAS,EAAEJ,QAAQ,GAAG,cAAc,GAAGuB,SAAU;AAAAT,UAAAA,QAAA,EAAEX,KAAAA;AAAK,SAAO,CACrE,EAACE,SAAS,iBAAIQ,GAAA,CAACI,IAAI,EAAA;AAACC,UAAAA,EAAE,EAAC,MAAM;AAAAJ,UAAAA,QAAA,EAAET,SAAAA;AAAS,SAAO,CAAC,CAAA;AAAA,OAC5C,CACR,CAAA;KAAO,CAAA;AACT,GAAK,CAAC,CAAA;AAEV;;;;"}
|
package/build/chevron/Chevron.js
CHANGED
|
@@ -2,9 +2,26 @@
|
|
|
2
2
|
|
|
3
3
|
var icons = require('@transferwise/icons');
|
|
4
4
|
var clsx = require('clsx');
|
|
5
|
-
|
|
5
|
+
require('../common/theme.js');
|
|
6
|
+
require('../common/direction.js');
|
|
7
|
+
require('../common/propsValues/control.js');
|
|
8
|
+
require('../common/propsValues/breakpoint.js');
|
|
6
9
|
var size = require('../common/propsValues/size.js');
|
|
10
|
+
require('../common/propsValues/typography.js');
|
|
11
|
+
require('../common/propsValues/width.js');
|
|
12
|
+
require('../common/propsValues/type.js');
|
|
13
|
+
require('../common/propsValues/dateMode.js');
|
|
14
|
+
require('../common/propsValues/monthFormat.js');
|
|
7
15
|
var position = require('../common/propsValues/position.js');
|
|
16
|
+
require('../common/propsValues/layouts.js');
|
|
17
|
+
require('../common/propsValues/status.js');
|
|
18
|
+
require('../common/propsValues/sentiment.js');
|
|
19
|
+
require('../common/propsValues/profileType.js');
|
|
20
|
+
require('../common/propsValues/variant.js');
|
|
21
|
+
require('../common/propsValues/scroll.js');
|
|
22
|
+
require('../common/propsValues/markdownNodeType.js');
|
|
23
|
+
require('../common/fileType.js');
|
|
24
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
8
25
|
|
|
9
26
|
const CONTAINER_SIZE = {
|
|
10
27
|
[size.Size.EXTRA_SMALL]: 10,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Chevron.js","sources":["../../src/chevron/Chevron.tsx"],"sourcesContent":["import { ChevronUp } from '@transferwise/icons';\nimport { IconSize } from '@transferwise/icons/lib/types';\nimport { clsx } from 'clsx';\n\nimport {\n Size,\n Position,\n PositionTop,\n PositionBottom,\n PositionRight,\n PositionLeft,\n SizeExtraSmall,\n SizeSmall,\n SizeMedium,\n} from '../common';\n\nconst CONTAINER_SIZE = {\n [Size.EXTRA_SMALL]: 10,\n [Size.SMALL]: 16,\n [Size.MEDIUM]: 24,\n};\n\nexport interface ChevronProps {\n orientation?: PositionTop | PositionBottom | PositionLeft | PositionRight;\n size?: SizeExtraSmall | SizeSmall | SizeMedium;\n disabled?: boolean;\n className?: string;\n}\n\nexport interface ExtraSmallChevronProps {\n className?: string;\n}\n\nconst ExtraSmallChevron = ({ className }: ExtraSmallChevronProps) => {\n return (\n <span className={clsx('tw-icon', 'tw-icon-chevron', className)} role=\"presentation\" aria-hidden>\n <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"currentColor\" focusable=\"false\">\n <path\n fillRule=\"evenodd\"\n d=\"M4.9995 2.0865L0.0635004 6.7645L1.2745 7.9125L4.9995 4.3835L8.7245 7.9135L9.9355 6.7645L4.9995 2.0865Z\"\n />\n </svg>\n </span>\n );\n};\n\nconst Chevron = ({\n orientation = Position.BOTTOM,\n size = Size.SMALL,\n disabled = false,\n className,\n}: ChevronProps) => {\n const classNameValue = clsx('tw-chevron', { 'chevron-color': !disabled }, orientation, className);\n\n if (size === Size.EXTRA_SMALL) {\n return <ExtraSmallChevron className={classNameValue} />;\n }\n\n const sizeValue = CONTAINER_SIZE[size] as IconSize;\n\n return <ChevronUp className={classNameValue} size={sizeValue} />;\n};\n\nexport default Chevron;\n"],"names":["CONTAINER_SIZE","Size","EXTRA_SMALL","SMALL","MEDIUM","ExtraSmallChevron","className","_jsx","clsx","role","children","width","height","viewBox","fill","focusable","fillRule","d","Chevron","orientation","Position","BOTTOM","size","disabled","classNameValue","sizeValue","ChevronUp"],"mappings":"
|
|
1
|
+
{"version":3,"file":"Chevron.js","sources":["../../src/chevron/Chevron.tsx"],"sourcesContent":["import { ChevronUp } from '@transferwise/icons';\nimport { IconSize } from '@transferwise/icons/lib/types';\nimport { clsx } from 'clsx';\n\nimport {\n Size,\n Position,\n PositionTop,\n PositionBottom,\n PositionRight,\n PositionLeft,\n SizeExtraSmall,\n SizeSmall,\n SizeMedium,\n} from '../common';\n\nconst CONTAINER_SIZE = {\n [Size.EXTRA_SMALL]: 10,\n [Size.SMALL]: 16,\n [Size.MEDIUM]: 24,\n};\n\nexport interface ChevronProps {\n orientation?: PositionTop | PositionBottom | PositionLeft | PositionRight;\n size?: SizeExtraSmall | SizeSmall | SizeMedium;\n disabled?: boolean;\n className?: string;\n}\n\nexport interface ExtraSmallChevronProps {\n className?: string;\n}\n\nconst ExtraSmallChevron = ({ className }: ExtraSmallChevronProps) => {\n return (\n <span className={clsx('tw-icon', 'tw-icon-chevron', className)} role=\"presentation\" aria-hidden>\n <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"currentColor\" focusable=\"false\">\n <path\n fillRule=\"evenodd\"\n d=\"M4.9995 2.0865L0.0635004 6.7645L1.2745 7.9125L4.9995 4.3835L8.7245 7.9135L9.9355 6.7645L4.9995 2.0865Z\"\n />\n </svg>\n </span>\n );\n};\n\nconst Chevron = ({\n orientation = Position.BOTTOM,\n size = Size.SMALL,\n disabled = false,\n className,\n}: ChevronProps) => {\n const classNameValue = clsx('tw-chevron', { 'chevron-color': !disabled }, orientation, className);\n\n if (size === Size.EXTRA_SMALL) {\n return <ExtraSmallChevron className={classNameValue} />;\n }\n\n const sizeValue = CONTAINER_SIZE[size] as IconSize;\n\n return <ChevronUp className={classNameValue} size={sizeValue} />;\n};\n\nexport default Chevron;\n"],"names":["CONTAINER_SIZE","Size","EXTRA_SMALL","SMALL","MEDIUM","ExtraSmallChevron","className","_jsx","clsx","role","children","width","height","viewBox","fill","focusable","fillRule","d","Chevron","orientation","Position","BOTTOM","size","disabled","classNameValue","sizeValue","ChevronUp"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAgBA,MAAMA,cAAc,GAAG;AACrB,EAAA,CAACC,SAAI,CAACC,WAAW,GAAG,EAAE;AACtB,EAAA,CAACD,SAAI,CAACE,KAAK,GAAG,EAAE;EAChB,CAACF,SAAI,CAACG,MAAM,GAAG,EAAA;CAChB,CAAA;AAaD,MAAMC,iBAAiB,GAAGA,CAAC;AAAEC,EAAAA,SAAAA;AAAS,CAA0B,KAAI;AAClE,EAAA,oBACEC,cAAA,CAAA,MAAA,EAAA;IAAMD,SAAS,EAAEE,SAAI,CAAC,SAAS,EAAE,iBAAiB,EAAEF,SAAS,CAAE;AAACG,IAAAA,IAAI,EAAC,cAAc;IAAC,aAAW,EAAA,IAAA;AAAAC,IAAAA,QAAA,eAC7FH,cAAA,CAAA,KAAA,EAAA;AAAKI,MAAAA,KAAK,EAAC,IAAI;AAACC,MAAAA,MAAM,EAAC,IAAI;AAACC,MAAAA,OAAO,EAAC,WAAW;AAACC,MAAAA,IAAI,EAAC,cAAc;AAACC,MAAAA,SAAS,EAAC,OAAO;AAAAL,MAAAA,QAAA,eACnFH,cAAA,CAAA,MAAA,EAAA;AACES,QAAAA,QAAQ,EAAC,SAAS;AAClBC,QAAAA,CAAC,EAAC,wGAAA;OAEN,CAAA;KAAK,CAAA;AACP,GAAM,CAAC,CAAA;AAEX,CAAC,CAAA;AAEKC,MAAAA,OAAO,GAAGA,CAAC;EACfC,WAAW,GAAGC,iBAAQ,CAACC,MAAM;QAC7BC,MAAI,GAAGrB,SAAI,CAACE,KAAK;AACjBoB,EAAAA,QAAQ,GAAG,KAAK;AAChBjB,EAAAA,SAAAA;AACa,CAAA,KAAI;AACjB,EAAA,MAAMkB,cAAc,GAAGhB,SAAI,CAAC,YAAY,EAAE;AAAE,IAAA,eAAe,EAAE,CAACe,QAAAA;AAAU,GAAA,EAAEJ,WAAW,EAAEb,SAAS,CAAC,CAAA;AAEjG,EAAA,IAAIgB,MAAI,KAAKrB,SAAI,CAACC,WAAW,EAAE;IAC7B,oBAAOK,cAAA,CAACF,iBAAiB,EAAA;AAACC,MAAAA,SAAS,EAAEkB,cAAAA;AAAe,KAAA,CAAG,CAAA;AACzD,GAAA;AAEA,EAAA,MAAMC,SAAS,GAAGzB,cAAc,CAACsB,MAAI,CAAa,CAAA;EAElD,oBAAOf,cAAA,CAACmB,eAAS,EAAA;AAACpB,IAAAA,SAAS,EAAEkB,cAAe;AAACF,IAAAA,IAAI,EAAEG,SAAAA;AAAU,IAAG,CAAA;AAClE;;;;"}
|
|
@@ -1,8 +1,25 @@
|
|
|
1
1
|
import { ChevronUp } from '@transferwise/icons';
|
|
2
2
|
import { clsx } from 'clsx';
|
|
3
|
-
import
|
|
3
|
+
import '../common/theme.mjs';
|
|
4
|
+
import '../common/direction.mjs';
|
|
5
|
+
import '../common/propsValues/control.mjs';
|
|
6
|
+
import '../common/propsValues/breakpoint.mjs';
|
|
4
7
|
import { Size } from '../common/propsValues/size.mjs';
|
|
8
|
+
import '../common/propsValues/typography.mjs';
|
|
9
|
+
import '../common/propsValues/width.mjs';
|
|
10
|
+
import '../common/propsValues/type.mjs';
|
|
11
|
+
import '../common/propsValues/dateMode.mjs';
|
|
12
|
+
import '../common/propsValues/monthFormat.mjs';
|
|
5
13
|
import { Position } from '../common/propsValues/position.mjs';
|
|
14
|
+
import '../common/propsValues/layouts.mjs';
|
|
15
|
+
import '../common/propsValues/status.mjs';
|
|
16
|
+
import '../common/propsValues/sentiment.mjs';
|
|
17
|
+
import '../common/propsValues/profileType.mjs';
|
|
18
|
+
import '../common/propsValues/variant.mjs';
|
|
19
|
+
import '../common/propsValues/scroll.mjs';
|
|
20
|
+
import '../common/propsValues/markdownNodeType.mjs';
|
|
21
|
+
import '../common/fileType.mjs';
|
|
22
|
+
import { jsx } from 'react/jsx-runtime';
|
|
6
23
|
|
|
7
24
|
const CONTAINER_SIZE = {
|
|
8
25
|
[Size.EXTRA_SMALL]: 10,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Chevron.mjs","sources":["../../src/chevron/Chevron.tsx"],"sourcesContent":["import { ChevronUp } from '@transferwise/icons';\nimport { IconSize } from '@transferwise/icons/lib/types';\nimport { clsx } from 'clsx';\n\nimport {\n Size,\n Position,\n PositionTop,\n PositionBottom,\n PositionRight,\n PositionLeft,\n SizeExtraSmall,\n SizeSmall,\n SizeMedium,\n} from '../common';\n\nconst CONTAINER_SIZE = {\n [Size.EXTRA_SMALL]: 10,\n [Size.SMALL]: 16,\n [Size.MEDIUM]: 24,\n};\n\nexport interface ChevronProps {\n orientation?: PositionTop | PositionBottom | PositionLeft | PositionRight;\n size?: SizeExtraSmall | SizeSmall | SizeMedium;\n disabled?: boolean;\n className?: string;\n}\n\nexport interface ExtraSmallChevronProps {\n className?: string;\n}\n\nconst ExtraSmallChevron = ({ className }: ExtraSmallChevronProps) => {\n return (\n <span className={clsx('tw-icon', 'tw-icon-chevron', className)} role=\"presentation\" aria-hidden>\n <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"currentColor\" focusable=\"false\">\n <path\n fillRule=\"evenodd\"\n d=\"M4.9995 2.0865L0.0635004 6.7645L1.2745 7.9125L4.9995 4.3835L8.7245 7.9135L9.9355 6.7645L4.9995 2.0865Z\"\n />\n </svg>\n </span>\n );\n};\n\nconst Chevron = ({\n orientation = Position.BOTTOM,\n size = Size.SMALL,\n disabled = false,\n className,\n}: ChevronProps) => {\n const classNameValue = clsx('tw-chevron', { 'chevron-color': !disabled }, orientation, className);\n\n if (size === Size.EXTRA_SMALL) {\n return <ExtraSmallChevron className={classNameValue} />;\n }\n\n const sizeValue = CONTAINER_SIZE[size] as IconSize;\n\n return <ChevronUp className={classNameValue} size={sizeValue} />;\n};\n\nexport default Chevron;\n"],"names":["CONTAINER_SIZE","Size","EXTRA_SMALL","SMALL","MEDIUM","ExtraSmallChevron","className","_jsx","clsx","role","children","width","height","viewBox","fill","focusable","fillRule","d","Chevron","orientation","Position","BOTTOM","size","disabled","classNameValue","sizeValue","ChevronUp"],"mappings":"
|
|
1
|
+
{"version":3,"file":"Chevron.mjs","sources":["../../src/chevron/Chevron.tsx"],"sourcesContent":["import { ChevronUp } from '@transferwise/icons';\nimport { IconSize } from '@transferwise/icons/lib/types';\nimport { clsx } from 'clsx';\n\nimport {\n Size,\n Position,\n PositionTop,\n PositionBottom,\n PositionRight,\n PositionLeft,\n SizeExtraSmall,\n SizeSmall,\n SizeMedium,\n} from '../common';\n\nconst CONTAINER_SIZE = {\n [Size.EXTRA_SMALL]: 10,\n [Size.SMALL]: 16,\n [Size.MEDIUM]: 24,\n};\n\nexport interface ChevronProps {\n orientation?: PositionTop | PositionBottom | PositionLeft | PositionRight;\n size?: SizeExtraSmall | SizeSmall | SizeMedium;\n disabled?: boolean;\n className?: string;\n}\n\nexport interface ExtraSmallChevronProps {\n className?: string;\n}\n\nconst ExtraSmallChevron = ({ className }: ExtraSmallChevronProps) => {\n return (\n <span className={clsx('tw-icon', 'tw-icon-chevron', className)} role=\"presentation\" aria-hidden>\n <svg width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"currentColor\" focusable=\"false\">\n <path\n fillRule=\"evenodd\"\n d=\"M4.9995 2.0865L0.0635004 6.7645L1.2745 7.9125L4.9995 4.3835L8.7245 7.9135L9.9355 6.7645L4.9995 2.0865Z\"\n />\n </svg>\n </span>\n );\n};\n\nconst Chevron = ({\n orientation = Position.BOTTOM,\n size = Size.SMALL,\n disabled = false,\n className,\n}: ChevronProps) => {\n const classNameValue = clsx('tw-chevron', { 'chevron-color': !disabled }, orientation, className);\n\n if (size === Size.EXTRA_SMALL) {\n return <ExtraSmallChevron className={classNameValue} />;\n }\n\n const sizeValue = CONTAINER_SIZE[size] as IconSize;\n\n return <ChevronUp className={classNameValue} size={sizeValue} />;\n};\n\nexport default Chevron;\n"],"names":["CONTAINER_SIZE","Size","EXTRA_SMALL","SMALL","MEDIUM","ExtraSmallChevron","className","_jsx","clsx","role","children","width","height","viewBox","fill","focusable","fillRule","d","Chevron","orientation","Position","BOTTOM","size","disabled","classNameValue","sizeValue","ChevronUp"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAgBA,MAAMA,cAAc,GAAG;AACrB,EAAA,CAACC,IAAI,CAACC,WAAW,GAAG,EAAE;AACtB,EAAA,CAACD,IAAI,CAACE,KAAK,GAAG,EAAE;EAChB,CAACF,IAAI,CAACG,MAAM,GAAG,EAAA;CAChB,CAAA;AAaD,MAAMC,iBAAiB,GAAGA,CAAC;AAAEC,EAAAA,SAAAA;AAAS,CAA0B,KAAI;AAClE,EAAA,oBACEC,GAAA,CAAA,MAAA,EAAA;IAAMD,SAAS,EAAEE,IAAI,CAAC,SAAS,EAAE,iBAAiB,EAAEF,SAAS,CAAE;AAACG,IAAAA,IAAI,EAAC,cAAc;IAAC,aAAW,EAAA,IAAA;AAAAC,IAAAA,QAAA,eAC7FH,GAAA,CAAA,KAAA,EAAA;AAAKI,MAAAA,KAAK,EAAC,IAAI;AAACC,MAAAA,MAAM,EAAC,IAAI;AAACC,MAAAA,OAAO,EAAC,WAAW;AAACC,MAAAA,IAAI,EAAC,cAAc;AAACC,MAAAA,SAAS,EAAC,OAAO;AAAAL,MAAAA,QAAA,eACnFH,GAAA,CAAA,MAAA,EAAA;AACES,QAAAA,QAAQ,EAAC,SAAS;AAClBC,QAAAA,CAAC,EAAC,wGAAA;OAEN,CAAA;KAAK,CAAA;AACP,GAAM,CAAC,CAAA;AAEX,CAAC,CAAA;AAEKC,MAAAA,OAAO,GAAGA,CAAC;EACfC,WAAW,GAAGC,QAAQ,CAACC,MAAM;EAC7BC,IAAI,GAAGrB,IAAI,CAACE,KAAK;AACjBoB,EAAAA,QAAQ,GAAG,KAAK;AAChBjB,EAAAA,SAAAA;AACa,CAAA,KAAI;AACjB,EAAA,MAAMkB,cAAc,GAAGhB,IAAI,CAAC,YAAY,EAAE;AAAE,IAAA,eAAe,EAAE,CAACe,QAAAA;AAAU,GAAA,EAAEJ,WAAW,EAAEb,SAAS,CAAC,CAAA;AAEjG,EAAA,IAAIgB,IAAI,KAAKrB,IAAI,CAACC,WAAW,EAAE;IAC7B,oBAAOK,GAAA,CAACF,iBAAiB,EAAA;AAACC,MAAAA,SAAS,EAAEkB,cAAAA;AAAe,KAAA,CAAG,CAAA;AACzD,GAAA;AAEA,EAAA,MAAMC,SAAS,GAAGzB,cAAc,CAACsB,IAAI,CAAa,CAAA;EAElD,oBAAOf,GAAA,CAACmB,SAAS,EAAA;AAACpB,IAAAA,SAAS,EAAEkB,cAAe;AAACF,IAAAA,IAAI,EAAEG,SAAAA;AAAU,IAAG,CAAA;AAClE;;;;"}
|
package/build/chips/Chip.js
CHANGED
|
@@ -4,9 +4,27 @@ var componentsTheming = require('@wise/components-theming');
|
|
|
4
4
|
var clsx = require('clsx');
|
|
5
5
|
var React = require('react');
|
|
6
6
|
var Body = require('../body/Body.js');
|
|
7
|
+
require('../common/theme.js');
|
|
8
|
+
require('../common/direction.js');
|
|
9
|
+
require('../common/propsValues/control.js');
|
|
10
|
+
require('../common/propsValues/breakpoint.js');
|
|
11
|
+
require('../common/propsValues/size.js');
|
|
12
|
+
var typography = require('../common/propsValues/typography.js');
|
|
13
|
+
require('../common/propsValues/width.js');
|
|
14
|
+
require('../common/propsValues/type.js');
|
|
15
|
+
require('../common/propsValues/dateMode.js');
|
|
16
|
+
require('../common/propsValues/monthFormat.js');
|
|
17
|
+
require('../common/propsValues/position.js');
|
|
18
|
+
require('../common/propsValues/layouts.js');
|
|
19
|
+
require('../common/propsValues/status.js');
|
|
20
|
+
require('../common/propsValues/sentiment.js');
|
|
21
|
+
require('../common/propsValues/profileType.js');
|
|
22
|
+
require('../common/propsValues/variant.js');
|
|
23
|
+
require('../common/propsValues/scroll.js');
|
|
24
|
+
require('../common/propsValues/markdownNodeType.js');
|
|
25
|
+
require('../common/fileType.js');
|
|
7
26
|
var CloseButton = require('../common/closeButton/CloseButton.js');
|
|
8
27
|
var jsxRuntime = require('react/jsx-runtime');
|
|
9
|
-
var typography = require('../common/propsValues/typography.js');
|
|
10
28
|
|
|
11
29
|
const Chip = ({
|
|
12
30
|
label,
|
package/build/chips/Chip.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Chip.js","sources":["../../src/chips/Chip.tsx"],"sourcesContent":["import { useTheme } from '@wise/components-theming';\nimport { clsx } from 'clsx';\nimport { useEffect, useRef } from 'react';\n\nimport Body from '../body/Body';\nimport { AriaLabelProperty, CommonProps, Typography } from '../common';\nimport { CloseButton } from '../common/closeButton/CloseButton';\n\nexport type ChipValue = string | number;\n\nexport type Props = {\n value?: ChipValue;\n label: string;\n onRemove?: () => void;\n onClick?: () => void;\n onKeyPress?: () => void;\n closeButton?: AriaLabelProperty;\n 'aria-checked'?: boolean;\n role?: string;\n} & AriaLabelProperty &\n CommonProps;\n\nconst Chip = ({\n label,\n value,\n onRemove,\n onClick,\n onKeyPress,\n className = undefined,\n 'aria-label': ariaLabel,\n 'aria-checked': ariaChecked,\n role,\n closeButton,\n}: Props) => {\n const isActionable = onClick || onKeyPress;\n const defaultRole = isActionable ? 'button' : undefined;\n const tabIndex = isActionable ? 0 : -1;\n\n const { isModern } = useTheme();\n\n const closeButtonReference = useRef<HTMLButtonElement>(null);\n const previousCloseButtonShown = useRef<boolean | undefined>(undefined);\n useEffect(() => {\n if (closeButtonReference.current != null && previousCloseButtonShown.current === false) {\n closeButtonReference.current?.focus();\n }\n previousCloseButtonShown.current = closeButtonReference.current != null;\n }, [onRemove]);\n\n return (\n <div\n key={value}\n role={role ?? defaultRole}\n tabIndex={tabIndex}\n aria-label={ariaLabel}\n aria-checked={ariaChecked}\n className={clsx(\n 'np-chip',\n 'd-flex',\n 'align-items-center',\n 'justify-content-between',\n onRemove ? 'np-chip--removable' : '',\n className,\n )}\n {...(isActionable && { onClick, onKeyPress })}\n >\n {isModern ? (\n <Body aria-hidden={!!onRemove} type={Typography.BODY_DEFAULT_BOLD}>\n {label}\n </Body>\n ) : (\n <span aria-hidden=\"false\" className=\"np-chip-label\">\n {label}\n </span>\n )}\n {onRemove ? (\n <CloseButton\n ref={closeButtonReference}\n className={isModern ? `btn-unstyled` : `btn-unstyled m-l-1`}\n aria-label={closeButton?.['aria-label']}\n size=\"sm\"\n filled={isModern}\n onClick={onRemove}\n />\n ) : null}\n </div>\n );\n};\n\nexport default Chip;\n"],"names":["Chip","label","value","onRemove","onClick","onKeyPress","className","undefined","ariaLabel","ariaChecked","role","closeButton","isActionable","defaultRole","tabIndex","isModern","useTheme","closeButtonReference","useRef","previousCloseButtonShown","useEffect","current","focus","_jsxs","clsx","children","_jsx","Body","type","Typography","BODY_DEFAULT_BOLD","CloseButton","ref","size","filled"],"mappings":"
|
|
1
|
+
{"version":3,"file":"Chip.js","sources":["../../src/chips/Chip.tsx"],"sourcesContent":["import { useTheme } from '@wise/components-theming';\nimport { clsx } from 'clsx';\nimport { useEffect, useRef } from 'react';\n\nimport Body from '../body/Body';\nimport { AriaLabelProperty, CommonProps, Typography } from '../common';\nimport { CloseButton } from '../common/closeButton/CloseButton';\n\nexport type ChipValue = string | number;\n\nexport type Props = {\n value?: ChipValue;\n label: string;\n onRemove?: () => void;\n onClick?: () => void;\n onKeyPress?: () => void;\n closeButton?: AriaLabelProperty;\n 'aria-checked'?: boolean;\n role?: string;\n} & AriaLabelProperty &\n CommonProps;\n\nconst Chip = ({\n label,\n value,\n onRemove,\n onClick,\n onKeyPress,\n className = undefined,\n 'aria-label': ariaLabel,\n 'aria-checked': ariaChecked,\n role,\n closeButton,\n}: Props) => {\n const isActionable = onClick || onKeyPress;\n const defaultRole = isActionable ? 'button' : undefined;\n const tabIndex = isActionable ? 0 : -1;\n\n const { isModern } = useTheme();\n\n const closeButtonReference = useRef<HTMLButtonElement>(null);\n const previousCloseButtonShown = useRef<boolean | undefined>(undefined);\n useEffect(() => {\n if (closeButtonReference.current != null && previousCloseButtonShown.current === false) {\n closeButtonReference.current?.focus();\n }\n previousCloseButtonShown.current = closeButtonReference.current != null;\n }, [onRemove]);\n\n return (\n <div\n key={value}\n role={role ?? defaultRole}\n tabIndex={tabIndex}\n aria-label={ariaLabel}\n aria-checked={ariaChecked}\n className={clsx(\n 'np-chip',\n 'd-flex',\n 'align-items-center',\n 'justify-content-between',\n onRemove ? 'np-chip--removable' : '',\n className,\n )}\n {...(isActionable && { onClick, onKeyPress })}\n >\n {isModern ? (\n <Body aria-hidden={!!onRemove} type={Typography.BODY_DEFAULT_BOLD}>\n {label}\n </Body>\n ) : (\n <span aria-hidden=\"false\" className=\"np-chip-label\">\n {label}\n </span>\n )}\n {onRemove ? (\n <CloseButton\n ref={closeButtonReference}\n className={isModern ? `btn-unstyled` : `btn-unstyled m-l-1`}\n aria-label={closeButton?.['aria-label']}\n size=\"sm\"\n filled={isModern}\n onClick={onRemove}\n />\n ) : null}\n </div>\n );\n};\n\nexport default Chip;\n"],"names":["Chip","label","value","onRemove","onClick","onKeyPress","className","undefined","ariaLabel","ariaChecked","role","closeButton","isActionable","defaultRole","tabIndex","isModern","useTheme","closeButtonReference","useRef","previousCloseButtonShown","useEffect","current","focus","_jsxs","clsx","children","_jsx","Body","type","Typography","BODY_DEFAULT_BOLD","CloseButton","ref","size","filled"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsBMA,MAAAA,IAAI,GAAGA,CAAC;EACZC,KAAK;EACLC,KAAK;EACLC,QAAQ;EACRC,OAAO;EACPC,UAAU;AACVC,EAAAA,SAAS,GAAGC,SAAS;AACrB,EAAA,YAAY,EAAEC,SAAS;AACvB,EAAA,cAAc,EAAEC,WAAW;EAC3BC,IAAI;AACJC,EAAAA,WAAAA;AAAW,CACL,KAAI;AACV,EAAA,MAAMC,YAAY,GAAGR,OAAO,IAAIC,UAAU,CAAA;AAC1C,EAAA,MAAMQ,WAAW,GAAGD,YAAY,GAAG,QAAQ,GAAGL,SAAS,CAAA;AACvD,EAAA,MAAMO,QAAQ,GAAGF,YAAY,GAAG,CAAC,GAAG,CAAC,CAAC,CAAA;EAEtC,MAAM;AAAEG,IAAAA,QAAAA;GAAU,GAAGC,0BAAQ,EAAE,CAAA;AAE/B,EAAA,MAAMC,oBAAoB,GAAGC,YAAM,CAAoB,IAAI,CAAC,CAAA;AAC5D,EAAA,MAAMC,wBAAwB,GAAGD,YAAM,CAAsBX,SAAS,CAAC,CAAA;AACvEa,EAAAA,eAAS,CAAC,MAAK;IACb,IAAIH,oBAAoB,CAACI,OAAO,IAAI,IAAI,IAAIF,wBAAwB,CAACE,OAAO,KAAK,KAAK,EAAE;AACtFJ,MAAAA,oBAAoB,CAACI,OAAO,EAAEC,KAAK,EAAE,CAAA;AACvC,KAAA;AACAH,IAAAA,wBAAwB,CAACE,OAAO,GAAGJ,oBAAoB,CAACI,OAAO,IAAI,IAAI,CAAA;AACzE,GAAC,EAAE,CAAClB,QAAQ,CAAC,CAAC,CAAA;AAEd,EAAA,oBACEoB,eAAA,CAAA,KAAA,EAAA;IAEEb,IAAI,EAAEA,IAAI,IAAIG,WAAY;AAC1BC,IAAAA,QAAQ,EAAEA,QAAS;AACnB,IAAA,YAAA,EAAYN,SAAU;AACtB,IAAA,cAAA,EAAcC,WAAY;AAC1BH,IAAAA,SAAS,EAAEkB,SAAI,CACb,SAAS,EACT,QAAQ,EACR,oBAAoB,EACpB,yBAAyB,EACzBrB,QAAQ,GAAG,oBAAoB,GAAG,EAAE,EACpCG,SAAS,CACT;AAAA,IAAA,IACGM,YAAY,IAAI;MAAER,OAAO;AAAEC,MAAAA,UAAAA;KAAY,CAAA;AAAAoB,IAAAA,QAAA,EAE3CV,CAAAA,QAAQ,gBACPW,cAAA,CAACC,IAAI,EAAA;MAAC,aAAa,EAAA,CAAC,CAACxB,QAAS;MAACyB,IAAI,EAAEC,qBAAU,CAACC,iBAAkB;AAAAL,MAAAA,QAAA,EAC/DxB,KAAAA;KACG,CAAC,gBAEPyB,cAAA,CAAA,MAAA,EAAA;AAAM,MAAA,aAAA,EAAY,OAAO;AAACpB,MAAAA,SAAS,EAAC,eAAe;AAAAmB,MAAAA,QAAA,EAChDxB,KAAAA;AAAK,KACF,CACP,EACAE,QAAQ,gBACPuB,cAAA,CAACK,uBAAW,EAAA;AACVC,MAAAA,GAAG,EAAEf,oBAAqB;AAC1BX,MAAAA,SAAS,EAAES,QAAQ,GAAG,CAAA,YAAA,CAAc,GAAG,CAAqB,kBAAA,CAAA;MAC5D,YAAYJ,EAAAA,WAAW,GAAG,YAAY,CAAE;AACxCsB,MAAAA,IAAI,EAAC,IAAI;AACTC,MAAAA,MAAM,EAAEnB,QAAS;AACjBX,MAAAA,OAAO,EAAED,QAAAA;KACT,CAAA,GACA,IAAI,CAAA;AAAA,GAAA,EAjCHD,KAkCF,CAAC,CAAA;AAEV;;;;"}
|
package/build/chips/Chip.mjs
CHANGED
|
@@ -2,9 +2,27 @@ import { useTheme } from '@wise/components-theming';
|
|
|
2
2
|
import { clsx } from 'clsx';
|
|
3
3
|
import { useRef, useEffect } from 'react';
|
|
4
4
|
import Body from '../body/Body.mjs';
|
|
5
|
+
import '../common/theme.mjs';
|
|
6
|
+
import '../common/direction.mjs';
|
|
7
|
+
import '../common/propsValues/control.mjs';
|
|
8
|
+
import '../common/propsValues/breakpoint.mjs';
|
|
9
|
+
import '../common/propsValues/size.mjs';
|
|
10
|
+
import { Typography } from '../common/propsValues/typography.mjs';
|
|
11
|
+
import '../common/propsValues/width.mjs';
|
|
12
|
+
import '../common/propsValues/type.mjs';
|
|
13
|
+
import '../common/propsValues/dateMode.mjs';
|
|
14
|
+
import '../common/propsValues/monthFormat.mjs';
|
|
15
|
+
import '../common/propsValues/position.mjs';
|
|
16
|
+
import '../common/propsValues/layouts.mjs';
|
|
17
|
+
import '../common/propsValues/status.mjs';
|
|
18
|
+
import '../common/propsValues/sentiment.mjs';
|
|
19
|
+
import '../common/propsValues/profileType.mjs';
|
|
20
|
+
import '../common/propsValues/variant.mjs';
|
|
21
|
+
import '../common/propsValues/scroll.mjs';
|
|
22
|
+
import '../common/propsValues/markdownNodeType.mjs';
|
|
23
|
+
import '../common/fileType.mjs';
|
|
5
24
|
import { CloseButton } from '../common/closeButton/CloseButton.mjs';
|
|
6
25
|
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
7
|
-
import { Typography } from '../common/propsValues/typography.mjs';
|
|
8
26
|
|
|
9
27
|
const Chip = ({
|
|
10
28
|
label,
|
package/build/chips/Chip.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Chip.mjs","sources":["../../src/chips/Chip.tsx"],"sourcesContent":["import { useTheme } from '@wise/components-theming';\nimport { clsx } from 'clsx';\nimport { useEffect, useRef } from 'react';\n\nimport Body from '../body/Body';\nimport { AriaLabelProperty, CommonProps, Typography } from '../common';\nimport { CloseButton } from '../common/closeButton/CloseButton';\n\nexport type ChipValue = string | number;\n\nexport type Props = {\n value?: ChipValue;\n label: string;\n onRemove?: () => void;\n onClick?: () => void;\n onKeyPress?: () => void;\n closeButton?: AriaLabelProperty;\n 'aria-checked'?: boolean;\n role?: string;\n} & AriaLabelProperty &\n CommonProps;\n\nconst Chip = ({\n label,\n value,\n onRemove,\n onClick,\n onKeyPress,\n className = undefined,\n 'aria-label': ariaLabel,\n 'aria-checked': ariaChecked,\n role,\n closeButton,\n}: Props) => {\n const isActionable = onClick || onKeyPress;\n const defaultRole = isActionable ? 'button' : undefined;\n const tabIndex = isActionable ? 0 : -1;\n\n const { isModern } = useTheme();\n\n const closeButtonReference = useRef<HTMLButtonElement>(null);\n const previousCloseButtonShown = useRef<boolean | undefined>(undefined);\n useEffect(() => {\n if (closeButtonReference.current != null && previousCloseButtonShown.current === false) {\n closeButtonReference.current?.focus();\n }\n previousCloseButtonShown.current = closeButtonReference.current != null;\n }, [onRemove]);\n\n return (\n <div\n key={value}\n role={role ?? defaultRole}\n tabIndex={tabIndex}\n aria-label={ariaLabel}\n aria-checked={ariaChecked}\n className={clsx(\n 'np-chip',\n 'd-flex',\n 'align-items-center',\n 'justify-content-between',\n onRemove ? 'np-chip--removable' : '',\n className,\n )}\n {...(isActionable && { onClick, onKeyPress })}\n >\n {isModern ? (\n <Body aria-hidden={!!onRemove} type={Typography.BODY_DEFAULT_BOLD}>\n {label}\n </Body>\n ) : (\n <span aria-hidden=\"false\" className=\"np-chip-label\">\n {label}\n </span>\n )}\n {onRemove ? (\n <CloseButton\n ref={closeButtonReference}\n className={isModern ? `btn-unstyled` : `btn-unstyled m-l-1`}\n aria-label={closeButton?.['aria-label']}\n size=\"sm\"\n filled={isModern}\n onClick={onRemove}\n />\n ) : null}\n </div>\n );\n};\n\nexport default Chip;\n"],"names":["Chip","label","value","onRemove","onClick","onKeyPress","className","undefined","ariaLabel","ariaChecked","role","closeButton","isActionable","defaultRole","tabIndex","isModern","useTheme","closeButtonReference","useRef","previousCloseButtonShown","useEffect","current","focus","_jsxs","clsx","children","_jsx","Body","type","Typography","BODY_DEFAULT_BOLD","CloseButton","ref","size","filled"],"mappings":"
|
|
1
|
+
{"version":3,"file":"Chip.mjs","sources":["../../src/chips/Chip.tsx"],"sourcesContent":["import { useTheme } from '@wise/components-theming';\nimport { clsx } from 'clsx';\nimport { useEffect, useRef } from 'react';\n\nimport Body from '../body/Body';\nimport { AriaLabelProperty, CommonProps, Typography } from '../common';\nimport { CloseButton } from '../common/closeButton/CloseButton';\n\nexport type ChipValue = string | number;\n\nexport type Props = {\n value?: ChipValue;\n label: string;\n onRemove?: () => void;\n onClick?: () => void;\n onKeyPress?: () => void;\n closeButton?: AriaLabelProperty;\n 'aria-checked'?: boolean;\n role?: string;\n} & AriaLabelProperty &\n CommonProps;\n\nconst Chip = ({\n label,\n value,\n onRemove,\n onClick,\n onKeyPress,\n className = undefined,\n 'aria-label': ariaLabel,\n 'aria-checked': ariaChecked,\n role,\n closeButton,\n}: Props) => {\n const isActionable = onClick || onKeyPress;\n const defaultRole = isActionable ? 'button' : undefined;\n const tabIndex = isActionable ? 0 : -1;\n\n const { isModern } = useTheme();\n\n const closeButtonReference = useRef<HTMLButtonElement>(null);\n const previousCloseButtonShown = useRef<boolean | undefined>(undefined);\n useEffect(() => {\n if (closeButtonReference.current != null && previousCloseButtonShown.current === false) {\n closeButtonReference.current?.focus();\n }\n previousCloseButtonShown.current = closeButtonReference.current != null;\n }, [onRemove]);\n\n return (\n <div\n key={value}\n role={role ?? defaultRole}\n tabIndex={tabIndex}\n aria-label={ariaLabel}\n aria-checked={ariaChecked}\n className={clsx(\n 'np-chip',\n 'd-flex',\n 'align-items-center',\n 'justify-content-between',\n onRemove ? 'np-chip--removable' : '',\n className,\n )}\n {...(isActionable && { onClick, onKeyPress })}\n >\n {isModern ? (\n <Body aria-hidden={!!onRemove} type={Typography.BODY_DEFAULT_BOLD}>\n {label}\n </Body>\n ) : (\n <span aria-hidden=\"false\" className=\"np-chip-label\">\n {label}\n </span>\n )}\n {onRemove ? (\n <CloseButton\n ref={closeButtonReference}\n className={isModern ? `btn-unstyled` : `btn-unstyled m-l-1`}\n aria-label={closeButton?.['aria-label']}\n size=\"sm\"\n filled={isModern}\n onClick={onRemove}\n />\n ) : null}\n </div>\n );\n};\n\nexport default Chip;\n"],"names":["Chip","label","value","onRemove","onClick","onKeyPress","className","undefined","ariaLabel","ariaChecked","role","closeButton","isActionable","defaultRole","tabIndex","isModern","useTheme","closeButtonReference","useRef","previousCloseButtonShown","useEffect","current","focus","_jsxs","clsx","children","_jsx","Body","type","Typography","BODY_DEFAULT_BOLD","CloseButton","ref","size","filled"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAsBMA,MAAAA,IAAI,GAAGA,CAAC;EACZC,KAAK;EACLC,KAAK;EACLC,QAAQ;EACRC,OAAO;EACPC,UAAU;AACVC,EAAAA,SAAS,GAAGC,SAAS;AACrB,EAAA,YAAY,EAAEC,SAAS;AACvB,EAAA,cAAc,EAAEC,WAAW;EAC3BC,IAAI;AACJC,EAAAA,WAAAA;AAAW,CACL,KAAI;AACV,EAAA,MAAMC,YAAY,GAAGR,OAAO,IAAIC,UAAU,CAAA;AAC1C,EAAA,MAAMQ,WAAW,GAAGD,YAAY,GAAG,QAAQ,GAAGL,SAAS,CAAA;AACvD,EAAA,MAAMO,QAAQ,GAAGF,YAAY,GAAG,CAAC,GAAG,CAAC,CAAC,CAAA;EAEtC,MAAM;AAAEG,IAAAA,QAAAA;GAAU,GAAGC,QAAQ,EAAE,CAAA;AAE/B,EAAA,MAAMC,oBAAoB,GAAGC,MAAM,CAAoB,IAAI,CAAC,CAAA;AAC5D,EAAA,MAAMC,wBAAwB,GAAGD,MAAM,CAAsBX,SAAS,CAAC,CAAA;AACvEa,EAAAA,SAAS,CAAC,MAAK;IACb,IAAIH,oBAAoB,CAACI,OAAO,IAAI,IAAI,IAAIF,wBAAwB,CAACE,OAAO,KAAK,KAAK,EAAE;AACtFJ,MAAAA,oBAAoB,CAACI,OAAO,EAAEC,KAAK,EAAE,CAAA;AACvC,KAAA;AACAH,IAAAA,wBAAwB,CAACE,OAAO,GAAGJ,oBAAoB,CAACI,OAAO,IAAI,IAAI,CAAA;AACzE,GAAC,EAAE,CAAClB,QAAQ,CAAC,CAAC,CAAA;AAEd,EAAA,oBACEoB,IAAA,CAAA,KAAA,EAAA;IAEEb,IAAI,EAAEA,IAAI,IAAIG,WAAY;AAC1BC,IAAAA,QAAQ,EAAEA,QAAS;AACnB,IAAA,YAAA,EAAYN,SAAU;AACtB,IAAA,cAAA,EAAcC,WAAY;AAC1BH,IAAAA,SAAS,EAAEkB,IAAI,CACb,SAAS,EACT,QAAQ,EACR,oBAAoB,EACpB,yBAAyB,EACzBrB,QAAQ,GAAG,oBAAoB,GAAG,EAAE,EACpCG,SAAS,CACT;AAAA,IAAA,IACGM,YAAY,IAAI;MAAER,OAAO;AAAEC,MAAAA,UAAAA;KAAY,CAAA;AAAAoB,IAAAA,QAAA,EAE3CV,CAAAA,QAAQ,gBACPW,GAAA,CAACC,IAAI,EAAA;MAAC,aAAa,EAAA,CAAC,CAACxB,QAAS;MAACyB,IAAI,EAAEC,UAAU,CAACC,iBAAkB;AAAAL,MAAAA,QAAA,EAC/DxB,KAAAA;KACG,CAAC,gBAEPyB,GAAA,CAAA,MAAA,EAAA;AAAM,MAAA,aAAA,EAAY,OAAO;AAACpB,MAAAA,SAAS,EAAC,eAAe;AAAAmB,MAAAA,QAAA,EAChDxB,KAAAA;AAAK,KACF,CACP,EACAE,QAAQ,gBACPuB,GAAA,CAACK,WAAW,EAAA;AACVC,MAAAA,GAAG,EAAEf,oBAAqB;AAC1BX,MAAAA,SAAS,EAAES,QAAQ,GAAG,CAAA,YAAA,CAAc,GAAG,CAAqB,kBAAA,CAAA;MAC5D,YAAYJ,EAAAA,WAAW,GAAG,YAAY,CAAE;AACxCsB,MAAAA,IAAI,EAAC,IAAI;AACTC,MAAAA,MAAM,EAAEnB,QAAS;AACjBX,MAAAA,OAAO,EAAED,QAAAA;KACT,CAAA,GACA,IAAI,CAAA;AAAA,GAAA,EAjCHD,KAkCF,CAAC,CAAA;AAEV;;;;"}
|
|
@@ -4,9 +4,26 @@ var clsx = require('clsx');
|
|
|
4
4
|
var React = require('react');
|
|
5
5
|
var Body = require('../body/Body.js');
|
|
6
6
|
var classMap = require('../button/classMap.js');
|
|
7
|
-
|
|
8
|
-
|
|
7
|
+
require('../common/theme.js');
|
|
8
|
+
require('../common/direction.js');
|
|
9
9
|
var control = require('../common/propsValues/control.js');
|
|
10
|
+
require('../common/propsValues/breakpoint.js');
|
|
11
|
+
require('../common/propsValues/size.js');
|
|
12
|
+
var typography = require('../common/propsValues/typography.js');
|
|
13
|
+
require('../common/propsValues/width.js');
|
|
14
|
+
require('../common/propsValues/type.js');
|
|
15
|
+
require('../common/propsValues/dateMode.js');
|
|
16
|
+
require('../common/propsValues/monthFormat.js');
|
|
17
|
+
require('../common/propsValues/position.js');
|
|
18
|
+
require('../common/propsValues/layouts.js');
|
|
19
|
+
require('../common/propsValues/status.js');
|
|
20
|
+
require('../common/propsValues/sentiment.js');
|
|
21
|
+
require('../common/propsValues/profileType.js');
|
|
22
|
+
require('../common/propsValues/variant.js');
|
|
23
|
+
require('../common/propsValues/scroll.js');
|
|
24
|
+
require('../common/propsValues/markdownNodeType.js');
|
|
25
|
+
require('../common/fileType.js');
|
|
26
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
10
27
|
|
|
11
28
|
const CircularButton = ({
|
|
12
29
|
className,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CircularButton.js","sources":["../../src/circularButton/CircularButton.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { cloneElement } from 'react';\n\nimport Body from '../body/Body';\nimport { typeClassMap, priorityClassMap } from '../button/classMap';\nimport { ControlType, Priority, Typography } from '../common';\n\nexport interface CircularButtonProps {\n className?: string;\n children: string;\n disabled?: boolean;\n icon: React.ReactElement<{ size?: unknown }>;\n onClick?: React.MouseEventHandler<HTMLInputElement>;\n priority?: `${Priority.PRIMARY | Priority.SECONDARY}`;\n type?: `${ControlType.ACCENT | ControlType.POSITIVE | ControlType.NEGATIVE}`;\n}\n\nconst CircularButton = ({\n className,\n children,\n disabled,\n icon,\n priority = Priority.PRIMARY,\n type = ControlType.ACCENT,\n ...rest\n}: CircularButtonProps) => {\n const classes = clsx('btn np-btn', typeClassMap[type], priorityClassMap[priority]);\n\n const iconElement = Number(icon.props.size) !== 24 ? cloneElement(icon, { size: 24 }) : icon;\n\n return (\n <label className={clsx('np-circular-btn', priority, type, disabled && 'disabled', className)}>\n <input\n type=\"button\"\n aria-label={children}\n className={classes}\n disabled={disabled}\n {...rest}\n />\n {iconElement}\n <Body as=\"span\" className=\"np-circular-btn__label\" type={Typography.BODY_DEFAULT_BOLD}>\n {children}\n </Body>\n </label>\n );\n};\n\nexport default CircularButton;\n"],"names":["CircularButton","className","children","disabled","icon","priority","Priority","PRIMARY","type","ControlType","ACCENT","rest","classes","clsx","typeClassMap","priorityClassMap","iconElement","Number","props","size","cloneElement","_jsxs","_jsx","Body","as","Typography","BODY_DEFAULT_BOLD"],"mappings":"
|
|
1
|
+
{"version":3,"file":"CircularButton.js","sources":["../../src/circularButton/CircularButton.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { cloneElement } from 'react';\n\nimport Body from '../body/Body';\nimport { typeClassMap, priorityClassMap } from '../button/classMap';\nimport { ControlType, Priority, Typography } from '../common';\n\nexport interface CircularButtonProps {\n className?: string;\n children: string;\n disabled?: boolean;\n icon: React.ReactElement<{ size?: unknown }>;\n onClick?: React.MouseEventHandler<HTMLInputElement>;\n priority?: `${Priority.PRIMARY | Priority.SECONDARY}`;\n type?: `${ControlType.ACCENT | ControlType.POSITIVE | ControlType.NEGATIVE}`;\n}\n\nconst CircularButton = ({\n className,\n children,\n disabled,\n icon,\n priority = Priority.PRIMARY,\n type = ControlType.ACCENT,\n ...rest\n}: CircularButtonProps) => {\n const classes = clsx('btn np-btn', typeClassMap[type], priorityClassMap[priority]);\n\n const iconElement = Number(icon.props.size) !== 24 ? cloneElement(icon, { size: 24 }) : icon;\n\n return (\n <label className={clsx('np-circular-btn', priority, type, disabled && 'disabled', className)}>\n <input\n type=\"button\"\n aria-label={children}\n className={classes}\n disabled={disabled}\n {...rest}\n />\n {iconElement}\n <Body as=\"span\" className=\"np-circular-btn__label\" type={Typography.BODY_DEFAULT_BOLD}>\n {children}\n </Body>\n </label>\n );\n};\n\nexport default CircularButton;\n"],"names":["CircularButton","className","children","disabled","icon","priority","Priority","PRIMARY","type","ControlType","ACCENT","rest","classes","clsx","typeClassMap","priorityClassMap","iconElement","Number","props","size","cloneElement","_jsxs","_jsx","Body","as","Typography","BODY_DEFAULT_BOLD"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAiBMA,MAAAA,cAAc,GAAGA,CAAC;EACtBC,SAAS;EACTC,QAAQ;EACRC,QAAQ;EACRC,IAAI;EACJC,QAAQ,GAAGC,gBAAQ,CAACC,OAAO;EAC3BC,IAAI,GAAGC,mBAAW,CAACC,MAAM;EACzB,GAAGC,IAAAA;AACiB,CAAA,KAAI;AACxB,EAAA,MAAMC,OAAO,GAAGC,SAAI,CAAC,YAAY,EAAEC,qBAAY,CAACN,IAAI,CAAC,EAAEO,yBAAgB,CAACV,QAAQ,CAAC,CAAC,CAAA;AAElF,EAAA,MAAMW,WAAW,GAAGC,MAAM,CAACb,IAAI,CAACc,KAAK,CAACC,IAAI,CAAC,KAAK,EAAE,gBAAGC,kBAAY,CAAChB,IAAI,EAAE;AAAEe,IAAAA,IAAI,EAAE,EAAA;GAAI,CAAC,GAAGf,IAAI,CAAA;AAE5F,EAAA,oBACEiB,eAAA,CAAA,OAAA,EAAA;AAAOpB,IAAAA,SAAS,EAAEY,SAAI,CAAC,iBAAiB,EAAER,QAAQ,EAAEG,IAAI,EAAEL,QAAQ,IAAI,UAAU,EAAEF,SAAS,CAAE;AAAAC,IAAAA,QAAA,gBAC3FoB,cAAA,CAAA,OAAA,EAAA;AACEd,MAAAA,IAAI,EAAC,QAAQ;AACb,MAAA,YAAA,EAAYN,QAAS;AACrBD,MAAAA,SAAS,EAAEW,OAAQ;AACnBT,MAAAA,QAAQ,EAAEA,QAAS;MAAA,GACfQ,IAAAA;AAAI,KAEV,CAAA,EAACK,WAAW,eACZM,cAAA,CAACC,IAAI,EAAA;AAACC,MAAAA,EAAE,EAAC,MAAM;AAACvB,MAAAA,SAAS,EAAC,wBAAwB;MAACO,IAAI,EAAEiB,qBAAU,CAACC,iBAAkB;AAAAxB,MAAAA,QAAA,EACnFA,QAAAA;AAAQ,KACL,CACR,CAAA;AAAA,GAAO,CAAC,CAAA;AAEZ;;;;"}
|
|
@@ -2,9 +2,26 @@ import { clsx } from 'clsx';
|
|
|
2
2
|
import { cloneElement } from 'react';
|
|
3
3
|
import Body from '../body/Body.mjs';
|
|
4
4
|
import { typeClassMap, priorityClassMap } from '../button/classMap.mjs';
|
|
5
|
-
import
|
|
6
|
-
import
|
|
5
|
+
import '../common/theme.mjs';
|
|
6
|
+
import '../common/direction.mjs';
|
|
7
7
|
import { Priority, ControlType } from '../common/propsValues/control.mjs';
|
|
8
|
+
import '../common/propsValues/breakpoint.mjs';
|
|
9
|
+
import '../common/propsValues/size.mjs';
|
|
10
|
+
import { Typography } from '../common/propsValues/typography.mjs';
|
|
11
|
+
import '../common/propsValues/width.mjs';
|
|
12
|
+
import '../common/propsValues/type.mjs';
|
|
13
|
+
import '../common/propsValues/dateMode.mjs';
|
|
14
|
+
import '../common/propsValues/monthFormat.mjs';
|
|
15
|
+
import '../common/propsValues/position.mjs';
|
|
16
|
+
import '../common/propsValues/layouts.mjs';
|
|
17
|
+
import '../common/propsValues/status.mjs';
|
|
18
|
+
import '../common/propsValues/sentiment.mjs';
|
|
19
|
+
import '../common/propsValues/profileType.mjs';
|
|
20
|
+
import '../common/propsValues/variant.mjs';
|
|
21
|
+
import '../common/propsValues/scroll.mjs';
|
|
22
|
+
import '../common/propsValues/markdownNodeType.mjs';
|
|
23
|
+
import '../common/fileType.mjs';
|
|
24
|
+
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
8
25
|
|
|
9
26
|
const CircularButton = ({
|
|
10
27
|
className,
|