@telus-uds/components-base 1.1.0 → 1.3.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.turbo/turbo-build.log +8 -0
- package/CHANGELOG.json +38 -0
- package/CHANGELOG.md +35 -2
- package/__fixtures__/Accessible.js +4 -2
- package/__fixtures__/Accessible.native.js +5 -2
- package/__fixtures__/testTheme.js +9 -0
- package/__tests__/ActivityIndicator/ActivityIndicator.test.jsx +35 -0
- package/__tests__/ActivityIndicator/__snapshots__/ActivityIndicator.test.jsx.snap +287 -0
- package/__tests__/FlexGrid/Col.test.jsx +6 -10
- package/__tests__/HorizontalScroll/HorizontalScroll.test.jsx +1 -0
- package/__tests__/ToggleSwitch/ToggleSwitch.test.jsx +10 -0
- package/__tests__/ToggleSwitch/ToggleSwitchGroup.test.jsx +192 -0
- package/__tests__/utils/props.test.js +36 -0
- package/__tests__/utils/semantics.test.jsx +1 -10
- package/babel.config.js +27 -5
- package/component-docs.json +638 -1145
- package/generate-component-docs.js +3 -0
- package/lib/A11yText/index.js +6 -5
- package/lib/ActivityIndicator/Spinner.js +46 -37
- package/lib/ActivityIndicator/Spinner.native.js +26 -15
- package/lib/ActivityIndicator/index.js +3 -3
- package/lib/Box/Box.js +8 -8
- package/lib/Button/Button.js +2 -2
- package/lib/Button/ButtonBase.js +25 -12
- package/lib/Button/ButtonGroup.js +10 -12
- package/lib/Button/ButtonLink.js +4 -4
- package/lib/Button/propTypes.js +4 -2
- package/lib/Card/Card.js +6 -5
- package/lib/Card/CardBase.js +6 -9
- package/lib/Card/PressableCardBase.js +15 -14
- package/lib/Checkbox/Checkbox.js +4 -8
- package/lib/Divider/Divider.js +14 -13
- package/lib/ExpandCollapse/Control.js +7 -7
- package/lib/ExpandCollapse/ExpandCollapse.js +6 -2
- package/lib/ExpandCollapse/Panel.js +6 -7
- package/lib/Feedback/Feedback.js +6 -5
- package/lib/Fieldset/Fieldset.js +1 -3
- package/lib/FlexGrid/FlexGrid.js +4 -4
- package/lib/FlexGrid/helpers/index.js +1 -4
- package/lib/HorizontalScroll/HorizontalScroll.js +5 -6
- package/lib/IconButton/IconButton.js +14 -9
- package/lib/InputLabel/InputLabel.js +7 -2
- package/lib/InputSupports/InputSupports.js +2 -2
- package/lib/Link/LinkBase.js +21 -15
- package/lib/List/List.js +4 -6
- package/lib/List/ListItem.js +6 -2
- package/lib/Modal/Modal.js +6 -2
- package/lib/Notification/Notification.js +7 -2
- package/lib/Pagination/PageButton.js +3 -1
- package/lib/Pagination/Pagination.js +22 -5
- package/lib/Pagination/SideButton.js +3 -1
- package/lib/Progress/Progress.js +5 -4
- package/lib/Progress/ProgressBar.js +8 -7
- package/lib/Radio/Radio.js +4 -8
- package/lib/Radio/RadioButton.js +6 -3
- package/lib/Radio/RadioGroup.js +7 -2
- package/lib/RadioCard/RadioCard.js +4 -4
- package/lib/RadioCard/RadioCardGroup.js +9 -6
- package/lib/Search/Search.js +7 -2
- package/lib/Select/Select.js +10 -9
- package/lib/SideNav/Item.js +7 -7
- package/lib/SideNav/SideNav.js +7 -3
- package/lib/Skeleton/Skeleton.js +6 -2
- package/lib/Spacer/Spacer.js +9 -20
- package/lib/StackView/StackView.js +7 -7
- package/lib/StackView/StackWrapBox.js +6 -7
- package/lib/StackView/StackWrapGap.js +6 -5
- package/lib/StackView/getStackedContent.js +1 -1
- package/lib/StepTracker/Step.js +7 -3
- package/lib/StepTracker/StepTracker.js +7 -7
- package/lib/Tabs/Tabs.js +16 -4
- package/lib/Tabs/TabsItem.js +18 -11
- package/lib/Tags/Tags.js +11 -12
- package/lib/TextInput/TextArea.js +13 -14
- package/lib/TextInput/TextInput.js +13 -14
- package/lib/TextInput/TextInputBase.js +5 -3
- package/lib/ThemeProvider/useThemeTokens.js +3 -3
- package/lib/ThemeProvider/utils/theme-tokens.js +3 -3
- package/lib/ToggleSwitch/ToggleSwitch.js +106 -43
- package/lib/ToggleSwitch/ToggleSwitchGroup.js +228 -0
- package/lib/ToggleSwitch/index.js +14 -4
- package/lib/Tooltip/Tooltip.js +7 -2
- package/lib/TooltipButton/TooltipButton.js +7 -2
- package/lib/Typography/Typography.js +8 -6
- package/lib/index.js +20 -8
- package/lib/utils/a11y/semantics.js +4 -3
- package/lib/utils/children.js +5 -1
- package/lib/utils/index.js +28 -5
- package/lib/utils/pressability.js +2 -2
- package/lib/utils/props/a11yProps.js +153 -0
- package/lib/utils/props/clickProps.js +36 -0
- package/lib/utils/props/componentPropType.js +70 -0
- package/lib/utils/props/copyPropTypes.js +14 -0
- package/lib/utils/props/getPropSelector.js +13 -0
- package/lib/utils/props/hrefAttrsProp.js +41 -0
- package/lib/utils/props/index.js +158 -0
- package/lib/{InputSupports/propTypes.js → utils/props/inputSupportsProps.js} +2 -3
- package/lib/utils/props/linkProps.js +64 -0
- package/lib/utils/props/paddingProp.js +20 -0
- package/lib/utils/props/pressProps.js +57 -0
- package/lib/utils/props/rectProp.js +20 -0
- package/lib/utils/props/responsiveProps.js +40 -0
- package/lib/utils/props/selectSystemProps.js +31 -0
- package/lib/utils/props/spacingProps.js +71 -0
- package/lib/utils/props/tokens.js +145 -0
- package/lib/utils/props/variantProp.js +28 -0
- package/lib/utils/props/viewProps.js +34 -0
- package/lib/utils/ssr.js +51 -0
- package/lib/utils/useResponsiveProp.js +1 -1
- package/lib/utils/useSpacingScale.js +4 -4
- package/lib/utils/withLinkRouter.js +98 -0
- package/lib-module/A11yInfoProvider/index.js +62 -0
- package/lib-module/A11yText/index.js +55 -0
- package/lib-module/ActivityIndicator/Spinner.js +76 -0
- package/lib-module/ActivityIndicator/Spinner.native.js +143 -0
- package/lib-module/ActivityIndicator/index.js +40 -0
- package/lib-module/ActivityIndicator/shared.js +12 -0
- package/lib-module/BaseProvider/index.js +26 -0
- package/lib-module/Box/Box.js +243 -0
- package/lib-module/Box/index.js +2 -0
- package/lib-module/Button/Button.js +25 -0
- package/lib-module/Button/ButtonBase.js +254 -0
- package/lib-module/Button/ButtonGroup.js +164 -0
- package/lib-module/Button/ButtonLink.js +39 -0
- package/lib-module/Button/index.js +4 -0
- package/lib-module/Button/propTypes.js +36 -0
- package/lib-module/Card/Card.js +83 -0
- package/lib-module/Card/CardBase.js +62 -0
- package/lib-module/Card/PressableCardBase.js +113 -0
- package/lib-module/Card/index.js +4 -0
- package/lib-module/Checkbox/Checkbox.js +321 -0
- package/lib-module/Checkbox/CheckboxGroup.js +218 -0
- package/lib-module/Checkbox/CheckboxInput.js +58 -0
- package/lib-module/Checkbox/CheckboxInput.native.js +6 -0
- package/lib-module/Checkbox/index.js +3 -0
- package/lib-module/Divider/Divider.js +123 -0
- package/lib-module/Divider/index.js +2 -0
- package/lib-module/ExpandCollapse/Accordion.js +15 -0
- package/lib-module/ExpandCollapse/Control.js +130 -0
- package/lib-module/ExpandCollapse/ExpandCollapse.js +94 -0
- package/lib-module/ExpandCollapse/Panel.js +158 -0
- package/lib-module/ExpandCollapse/index.js +7 -0
- package/lib-module/Feedback/Feedback.js +144 -0
- package/lib-module/Feedback/index.js +2 -0
- package/lib-module/Fieldset/Fieldset.js +145 -0
- package/lib-module/Fieldset/FieldsetContainer.js +29 -0
- package/lib-module/Fieldset/FieldsetContainer.native.js +20 -0
- package/lib-module/Fieldset/Legend.js +21 -0
- package/lib-module/Fieldset/Legend.native.js +28 -0
- package/lib-module/Fieldset/cssReset.js +14 -0
- package/lib-module/Fieldset/index.js +2 -0
- package/lib-module/FlexGrid/Col/Col.js +265 -0
- package/lib-module/FlexGrid/Col/index.js +2 -0
- package/lib-module/FlexGrid/FlexGrid.js +147 -0
- package/lib-module/FlexGrid/Row/Row.js +177 -0
- package/lib-module/FlexGrid/Row/index.js +2 -0
- package/lib-module/FlexGrid/helpers/index.js +18 -0
- package/lib-module/FlexGrid/index.js +2 -0
- package/lib-module/FlexGrid/providers/GutterContext.js +3 -0
- package/lib-module/HorizontalScroll/HorizontalScroll.js +171 -0
- package/lib-module/HorizontalScroll/HorizontalScrollButton.js +102 -0
- package/lib-module/HorizontalScroll/ScrollViewEnd.js +47 -0
- package/lib-module/HorizontalScroll/ScrollViewEnd.native.js +24 -0
- package/lib-module/HorizontalScroll/dictionary.js +11 -0
- package/lib-module/HorizontalScroll/index.js +11 -0
- package/lib-module/HorizontalScroll/itemPositions.js +106 -0
- package/lib-module/Icon/Icon.js +61 -0
- package/lib-module/Icon/IconText.js +81 -0
- package/lib-module/Icon/index.js +4 -0
- package/lib-module/IconButton/IconButton.js +115 -0
- package/lib-module/IconButton/index.js +2 -0
- package/lib-module/InputLabel/InputLabel.js +131 -0
- package/lib-module/InputLabel/LabelContent.js +24 -0
- package/lib-module/InputLabel/LabelContent.native.js +16 -0
- package/lib-module/InputLabel/index.js +2 -0
- package/lib-module/InputSupports/InputSupports.js +88 -0
- package/lib-module/InputSupports/index.js +2 -0
- package/lib-module/InputSupports/useInputSupports.js +31 -0
- package/lib-module/Link/ChevronLink.js +51 -0
- package/lib-module/Link/InlinePressable.js +37 -0
- package/lib-module/Link/InlinePressable.native.js +85 -0
- package/lib-module/Link/Link.js +27 -0
- package/lib-module/Link/LinkBase.js +210 -0
- package/lib-module/Link/TextButton.js +43 -0
- package/lib-module/Link/index.js +5 -0
- package/lib-module/List/List.js +55 -0
- package/lib-module/List/ListItem.js +213 -0
- package/lib-module/List/index.js +5 -0
- package/lib-module/Modal/Modal.js +208 -0
- package/lib-module/Modal/dictionary.js +9 -0
- package/lib-module/Modal/index.js +2 -0
- package/lib-module/Notification/Notification.js +196 -0
- package/lib-module/Notification/dictionary.js +8 -0
- package/lib-module/Notification/index.js +2 -0
- package/lib-module/Pagination/PageButton.js +65 -0
- package/lib-module/Pagination/Pagination.js +140 -0
- package/lib-module/Pagination/SideButton.js +103 -0
- package/lib-module/Pagination/dictionary.js +18 -0
- package/lib-module/Pagination/index.js +2 -0
- package/lib-module/Pagination/usePagination.js +72 -0
- package/lib-module/Progress/Progress.js +85 -0
- package/lib-module/Progress/ProgressBar.js +134 -0
- package/lib-module/Progress/ProgressBarBackground.js +41 -0
- package/lib-module/Progress/index.js +4 -0
- package/lib-module/Radio/Radio.js +263 -0
- package/lib-module/Radio/RadioButton.js +128 -0
- package/lib-module/Radio/RadioGroup.js +225 -0
- package/lib-module/Radio/RadioInput.js +60 -0
- package/lib-module/Radio/RadioInput.native.js +6 -0
- package/lib-module/Radio/index.js +3 -0
- package/lib-module/RadioCard/RadioCard.js +218 -0
- package/lib-module/RadioCard/RadioCardGroup.js +232 -0
- package/lib-module/RadioCard/index.js +3 -0
- package/lib-module/Search/Search.js +233 -0
- package/lib-module/Search/dictionary.js +12 -0
- package/lib-module/Search/index.js +2 -0
- package/lib-module/Select/Group.js +20 -0
- package/lib-module/Select/Group.native.js +14 -0
- package/lib-module/Select/Item.js +17 -0
- package/lib-module/Select/Item.native.js +9 -0
- package/lib-module/Select/Picker.js +67 -0
- package/lib-module/Select/Picker.native.js +110 -0
- package/lib-module/Select/Select.js +317 -0
- package/lib-module/Select/index.js +6 -0
- package/lib-module/SideNav/Item.js +139 -0
- package/lib-module/SideNav/ItemContent.js +45 -0
- package/lib-module/SideNav/ItemsGroup.js +115 -0
- package/lib-module/SideNav/SideNav.js +133 -0
- package/lib-module/SideNav/index.js +1 -0
- package/lib-module/Skeleton/Skeleton.js +117 -0
- package/lib-module/Skeleton/index.js +2 -0
- package/lib-module/Skeleton/skeleton.constant.js +3 -0
- package/lib-module/Skeleton/skeletonWebAnimation.js +18 -0
- package/lib-module/Skeleton/useSkeletonNativeAnimation.js +24 -0
- package/lib-module/Spacer/Spacer.js +97 -0
- package/lib-module/Spacer/index.js +2 -0
- package/lib-module/StackView/StackView.js +124 -0
- package/lib-module/StackView/StackWrap.js +48 -0
- package/lib-module/StackView/StackWrap.native.js +3 -0
- package/lib-module/StackView/StackWrapBox.js +114 -0
- package/lib-module/StackView/StackWrapGap.js +58 -0
- package/lib-module/StackView/common.js +32 -0
- package/lib-module/StackView/getStackedContent.js +123 -0
- package/lib-module/StackView/index.js +5 -0
- package/lib-module/StepTracker/Step.js +229 -0
- package/lib-module/StepTracker/StepTracker.js +175 -0
- package/lib-module/StepTracker/dictionary.js +10 -0
- package/lib-module/StepTracker/index.js +2 -0
- package/lib-module/Tabs/Tabs.js +113 -0
- package/lib-module/Tabs/TabsItem.js +215 -0
- package/lib-module/Tabs/index.js +2 -0
- package/lib-module/Tags/Tags.js +238 -0
- package/lib-module/Tags/index.js +2 -0
- package/lib-module/TextInput/TextArea.js +88 -0
- package/lib-module/TextInput/TextInput.js +60 -0
- package/lib-module/TextInput/TextInputBase.js +233 -0
- package/lib-module/TextInput/index.js +3 -0
- package/lib-module/TextInput/propTypes.js +31 -0
- package/lib-module/ThemeProvider/ThemeProvider.js +35 -0
- package/lib-module/ThemeProvider/index.js +6 -0
- package/lib-module/ThemeProvider/useSetTheme.js +22 -0
- package/lib-module/ThemeProvider/useTheme.js +14 -0
- package/lib-module/ThemeProvider/useThemeTokens.js +105 -0
- package/lib-module/ThemeProvider/utils/index.js +2 -0
- package/lib-module/ThemeProvider/utils/styles.js +174 -0
- package/lib-module/ThemeProvider/utils/theme-tokens.js +151 -0
- package/lib-module/ToggleSwitch/ToggleSwitch.js +224 -0
- package/lib-module/ToggleSwitch/ToggleSwitchGroup.js +202 -0
- package/lib-module/ToggleSwitch/index.js +3 -0
- package/lib-module/Tooltip/Backdrop.js +52 -0
- package/lib-module/Tooltip/Backdrop.native.js +43 -0
- package/lib-module/Tooltip/Tooltip.js +332 -0
- package/lib-module/Tooltip/dictionary.js +8 -0
- package/lib-module/Tooltip/getTooltipPosition.js +164 -0
- package/lib-module/Tooltip/index.js +2 -0
- package/lib-module/TooltipButton/TooltipButton.js +71 -0
- package/lib-module/TooltipButton/index.js +2 -0
- package/lib-module/Typography/Typography.js +118 -0
- package/lib-module/Typography/index.js +2 -0
- package/lib-module/ViewportProvider/ViewportProvider.js +28 -0
- package/lib-module/ViewportProvider/index.js +3 -0
- package/lib-module/ViewportProvider/useViewport.js +3 -0
- package/lib-module/ViewportProvider/useViewportListener.js +43 -0
- package/lib-module/index.js +48 -0
- package/lib-module/utils/a11y/index.js +2 -0
- package/lib-module/utils/a11y/semantics.js +154 -0
- package/lib-module/utils/a11y/textSize.js +34 -0
- package/lib-module/utils/animation/index.js +2 -0
- package/lib-module/utils/animation/useVerticalExpandAnimation.js +49 -0
- package/lib-module/utils/children.js +118 -0
- package/lib-module/utils/index.js +15 -0
- package/lib-module/utils/info/index.js +7 -0
- package/lib-module/utils/info/platform/index.js +11 -0
- package/lib-module/utils/info/platform/platform.android.js +1 -0
- package/lib-module/utils/info/platform/platform.ios.js +1 -0
- package/lib-module/utils/info/platform/platform.js +1 -0
- package/lib-module/utils/info/platform/platform.native.js +4 -0
- package/lib-module/utils/info/versions.js +5 -0
- package/lib-module/utils/input.js +180 -0
- package/lib-module/utils/pressability.js +97 -0
- package/lib-module/utils/props/a11yProps.js +140 -0
- package/lib-module/utils/props/clickProps.js +25 -0
- package/lib-module/utils/props/componentPropType.js +63 -0
- package/lib-module/utils/props/copyPropTypes.js +2 -0
- package/lib-module/utils/props/getPropSelector.js +6 -0
- package/lib-module/utils/props/hrefAttrsProp.js +30 -0
- package/lib-module/utils/props/index.js +16 -0
- package/lib-module/utils/props/inputSupportsProps.js +54 -0
- package/lib-module/utils/props/linkProps.js +47 -0
- package/lib-module/utils/props/paddingProp.js +9 -0
- package/lib-module/utils/props/pressProps.js +42 -0
- package/lib-module/utils/props/rectProp.js +9 -0
- package/lib-module/utils/props/responsiveProps.js +30 -0
- package/lib-module/utils/props/selectSystemProps.js +24 -0
- package/lib-module/utils/props/spacingProps.js +56 -0
- package/lib-module/utils/props/tokens.js +120 -0
- package/lib-module/utils/props/variantProp.js +18 -0
- package/lib-module/utils/props/viewProps.js +22 -0
- package/lib-module/utils/ssr.js +35 -0
- package/lib-module/utils/useCopy.js +42 -0
- package/lib-module/utils/useHash.js +44 -0
- package/lib-module/utils/useHash.native.js +7 -0
- package/lib-module/utils/useResponsiveProp.js +47 -0
- package/lib-module/utils/useSpacingScale.js +123 -0
- package/lib-module/utils/useUniqueId.js +12 -0
- package/lib-module/utils/withLinkRouter.js +82 -0
- package/package.json +9 -5
- package/src/A11yText/index.jsx +7 -3
- package/src/ActivityIndicator/Spinner.jsx +56 -44
- package/src/ActivityIndicator/Spinner.native.jsx +20 -12
- package/src/ActivityIndicator/index.jsx +1 -1
- package/src/Box/Box.jsx +15 -13
- package/src/Button/Button.jsx +1 -1
- package/src/Button/ButtonBase.jsx +20 -12
- package/src/Button/ButtonGroup.jsx +17 -8
- package/src/Button/ButtonLink.jsx +1 -1
- package/src/Button/propTypes.js +2 -1
- package/src/Card/Card.jsx +7 -4
- package/src/Card/CardBase.jsx +6 -5
- package/src/Card/PressableCardBase.jsx +16 -14
- package/src/Checkbox/Checkbox.jsx +12 -7
- package/src/Divider/Divider.jsx +19 -12
- package/src/ExpandCollapse/Control.jsx +12 -7
- package/src/ExpandCollapse/ExpandCollapse.jsx +13 -3
- package/src/ExpandCollapse/Panel.jsx +15 -5
- package/src/Feedback/Feedback.jsx +13 -3
- package/src/Fieldset/Fieldset.jsx +1 -1
- package/src/FlexGrid/FlexGrid.jsx +11 -5
- package/src/FlexGrid/helpers/index.js +1 -3
- package/src/HorizontalScroll/HorizontalScroll.jsx +12 -5
- package/src/IconButton/IconButton.jsx +18 -12
- package/src/InputLabel/InputLabel.jsx +16 -2
- package/src/InputSupports/InputSupports.jsx +1 -1
- package/src/Link/LinkBase.jsx +15 -12
- package/src/List/List.jsx +12 -5
- package/src/List/ListItem.jsx +16 -2
- package/src/Modal/Modal.jsx +63 -50
- package/src/Notification/Notification.jsx +17 -3
- package/src/Pagination/PageButton.jsx +3 -2
- package/src/Pagination/Pagination.jsx +38 -4
- package/src/Pagination/SideButton.jsx +2 -2
- package/src/Progress/Progress.jsx +5 -3
- package/src/Progress/ProgressBar.jsx +8 -6
- package/src/Radio/Radio.jsx +13 -7
- package/src/Radio/RadioButton.jsx +13 -3
- package/src/Radio/RadioGroup.jsx +14 -2
- package/src/RadioCard/RadioCard.jsx +9 -6
- package/src/RadioCard/RadioCardGroup.jsx +16 -4
- package/src/Search/Search.jsx +15 -3
- package/src/Select/Select.jsx +21 -7
- package/src/SideNav/Item.jsx +15 -7
- package/src/SideNav/SideNav.jsx +13 -2
- package/src/Skeleton/Skeleton.jsx +55 -43
- package/src/Spacer/Spacer.jsx +10 -18
- package/src/StackView/StackView.jsx +13 -12
- package/src/StackView/StackWrapBox.jsx +12 -12
- package/src/StackView/StackWrapGap.jsx +9 -7
- package/src/StackView/getStackedContent.jsx +1 -1
- package/src/StepTracker/Step.jsx +7 -4
- package/src/StepTracker/StepTracker.jsx +8 -8
- package/src/Tabs/Tabs.jsx +63 -23
- package/src/Tabs/TabsItem.jsx +22 -14
- package/src/Tags/Tags.jsx +16 -7
- package/src/TextInput/TextArea.jsx +20 -8
- package/src/TextInput/TextInput.jsx +20 -8
- package/src/TextInput/TextInputBase.jsx +13 -3
- package/src/ThemeProvider/useThemeTokens.js +3 -3
- package/src/ThemeProvider/utils/theme-tokens.js +3 -3
- package/src/ToggleSwitch/ToggleSwitch.jsx +104 -41
- package/src/ToggleSwitch/ToggleSwitchGroup.jsx +211 -0
- package/src/ToggleSwitch/index.js +2 -1
- package/src/Tooltip/Tooltip.jsx +13 -3
- package/src/TooltipButton/TooltipButton.jsx +6 -4
- package/src/Typography/Typography.jsx +10 -6
- package/src/index.js +2 -2
- package/src/utils/a11y/semantics.js +3 -2
- package/src/utils/children.jsx +2 -1
- package/src/utils/index.js +3 -1
- package/src/utils/pressability.js +1 -1
- package/src/utils/props/a11yProps.js +151 -0
- package/src/utils/props/clickProps.js +31 -0
- package/src/utils/props/componentPropType.js +67 -0
- package/src/utils/props/copyPropTypes.js +3 -0
- package/src/utils/props/getPropSelector.js +14 -0
- package/src/utils/props/hrefAttrsProp.js +25 -0
- package/src/utils/props/index.js +16 -0
- package/src/{InputSupports/propTypes.js → utils/props/inputSupportsProps.js} +2 -4
- package/src/utils/props/linkProps.js +43 -0
- package/src/utils/props/paddingProp.js +10 -0
- package/src/utils/props/pressProps.js +45 -0
- package/src/utils/props/rectProp.js +10 -0
- package/src/utils/props/responsiveProps.js +30 -0
- package/src/utils/props/selectSystemProps.js +25 -0
- package/src/utils/props/spacingProps.js +58 -0
- package/src/utils/props/tokens.js +150 -0
- package/src/utils/props/variantProp.js +20 -0
- package/src/utils/props/viewProps.js +23 -0
- package/src/utils/ssr.js +35 -0
- package/src/utils/useResponsiveProp.js +1 -1
- package/src/utils/useSpacingScale.js +4 -4
- package/src/utils/withLinkRouter.jsx +68 -0
- package/stories/TextInput/TextArea.stories.jsx +1 -0
- package/stories/ToggleSwitch/ToggleSwitch.stories.jsx +5 -1
- package/stories/ToggleSwitch/ToggleSwitchGroup.stories.jsx +81 -0
- package/.ultra.cache.json +0 -1
- package/lib/utils/a11y/propTypes.js +0 -61
- package/lib/utils/a11y/propTypes.native.js +0 -47
- package/lib/utils/propTypes.js +0 -541
- package/release-context.json +0 -7
- package/src/utils/a11y/propTypes.js +0 -61
- package/src/utils/a11y/propTypes.native.js +0 -39
- package/src/utils/propTypes.js +0 -531
package/lib/utils/propTypes.js
DELETED
|
@@ -1,541 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.copyPropTypes = exports.componentPropType = exports.spacingProps = exports.responsiveProps = exports.viewProps = exports.linkProps = exports.pressProps = exports.hrefAttrsProp = exports.a11yProps = exports.getTokensSetPropType = exports.getTokensPropType = exports.selectTokens = exports.getTokenNames = exports.variantProp = exports.rectProp = exports.paddingProp = void 0;
|
|
7
|
-
|
|
8
|
-
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
9
|
-
|
|
10
|
-
var _Linking = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Linking"));
|
|
11
|
-
|
|
12
|
-
var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
|
|
13
|
-
|
|
14
|
-
var _systemThemeTokens = require("@telus-uds/system-theme-tokens");
|
|
15
|
-
|
|
16
|
-
var _propTypes2 = _interopRequireDefault(require("./a11y/propTypes"));
|
|
17
|
-
|
|
18
|
-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
19
|
-
|
|
20
|
-
const paddingProp = {
|
|
21
|
-
propType: _propTypes.default.shape({
|
|
22
|
-
paddingBottom: _propTypes.default.number,
|
|
23
|
-
paddingLeft: _propTypes.default.number,
|
|
24
|
-
paddingRight: _propTypes.default.number,
|
|
25
|
-
paddingTop: _propTypes.default.number
|
|
26
|
-
})
|
|
27
|
-
};
|
|
28
|
-
exports.paddingProp = paddingProp;
|
|
29
|
-
const rectProp = {
|
|
30
|
-
propType: _propTypes.default.shape({
|
|
31
|
-
bottom: _propTypes.default.number,
|
|
32
|
-
left: _propTypes.default.number,
|
|
33
|
-
right: _propTypes.default.number,
|
|
34
|
-
top: _propTypes.default.number
|
|
35
|
-
})
|
|
36
|
-
};
|
|
37
|
-
/**
|
|
38
|
-
* @typedef {{[key: string]: string|number|boolean}} AppearanceSet
|
|
39
|
-
* @typedef {AppearanceSet} VariantProp
|
|
40
|
-
*/
|
|
41
|
-
|
|
42
|
-
exports.rectProp = rectProp;
|
|
43
|
-
const variantProp = {
|
|
44
|
-
/**
|
|
45
|
-
* 'variant' is an optional object prop on all themable components.
|
|
46
|
-
*
|
|
47
|
-
* Contains an object with keys that correspond to the current component theme's allowed
|
|
48
|
-
* appearances and values that correspond to the allowed values of that component.
|
|
49
|
-
*
|
|
50
|
-
* Since the particular keys and values depend on which theme is currently active,
|
|
51
|
-
* the exact shape of variant props is not enforced using PropTypes.
|
|
52
|
-
*/
|
|
53
|
-
propType: _propTypes.default.objectOf(_propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number, _propTypes.default.bool]))
|
|
54
|
-
}; // Tokens can be primitive values (e.g. `'rgba(0,0,0,0'`, `12`), or objects of such values,
|
|
55
|
-
// such as tokens that describe shadow (e.g. shadow: { inset: true, color: 'rgba(...)' ... }),
|
|
56
|
-
// or components (e.g. Icon tokens)
|
|
57
|
-
|
|
58
|
-
exports.variantProp = variantProp;
|
|
59
|
-
|
|
60
|
-
const tokenValue = _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number, _propTypes.default.bool, _propTypes.default.elementType]);
|
|
61
|
-
|
|
62
|
-
const tokenValueType = _propTypes.default.oneOfType([tokenValue, _propTypes.default.objectOf(tokenValue)]);
|
|
63
|
-
|
|
64
|
-
const getTokenNames = componentName => {
|
|
65
|
-
const componentTokenSchema = _systemThemeTokens.components[componentName];
|
|
66
|
-
|
|
67
|
-
if (!componentTokenSchema) {
|
|
68
|
-
throw new Error(`No "${componentName}" tokenKeys in @telus-uds/system-theme-tokens`);
|
|
69
|
-
}
|
|
70
|
-
|
|
71
|
-
return Object.keys(componentTokenSchema);
|
|
72
|
-
};
|
|
73
|
-
/**
|
|
74
|
-
* Returns the subset of a set of tokens that may be accepted by the `tokens` prop of a named component
|
|
75
|
-
* or by a provided array of tokens. A prefix may be provided, for example:
|
|
76
|
-
*
|
|
77
|
-
* @example
|
|
78
|
-
* ```jsx
|
|
79
|
-
* // returns tokens from `themeTokens` that exist in the theme schema for `Button`.
|
|
80
|
-
* selectTokens('Button', themeTokens)
|
|
81
|
-
* ```
|
|
82
|
-
*
|
|
83
|
-
* @example
|
|
84
|
-
* ```jsx
|
|
85
|
-
* // returns `{ backgroundColor, width }` where the values of those keys come from
|
|
86
|
-
* // the source object's `{ containerBackgroundColor, containerWidth }` properties.
|
|
87
|
-
* selectTokens(['backgroundColor', 'width'], themeTokens, 'container')
|
|
88
|
-
* ```
|
|
89
|
-
*
|
|
90
|
-
* @example
|
|
91
|
-
* ```jsx
|
|
92
|
-
* // returns tokens that are defined in the `Button` theme schema, from tokens with
|
|
93
|
-
* // a prefix `'button'` e.g. a token `buttonBorderWidth` outputs as `borderWidth`.
|
|
94
|
-
* selectTokens('Button', themeTokens, 'button')
|
|
95
|
-
* ```
|
|
96
|
-
*
|
|
97
|
-
* @param {string[]|string} specifier - a name of a component in the theme schema, or an array of token names
|
|
98
|
-
* @param {object} tokens - a source object of theme tokens
|
|
99
|
-
* @param {string} [prefix] - if provided, matches keys in the source object with this as the first camelCase item
|
|
100
|
-
* @returns {object} - subset of theme tokens
|
|
101
|
-
*/
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
exports.getTokenNames = getTokenNames;
|
|
105
|
-
|
|
106
|
-
const selectTokens = (specifier, tokens, prefix) => {
|
|
107
|
-
const tokenNames = typeof specifier === 'string' ? getTokenNames(specifier) : specifier;
|
|
108
|
-
const filteredTokens = tokenNames.reduce((validTokens, key) => {
|
|
109
|
-
const prefixedKey = prefix ? `${prefix}${key[0].toUpperCase()}${key.slice(1)}` : key;
|
|
110
|
-
const token = tokens[prefixedKey];
|
|
111
|
-
return token !== undefined ? { ...validTokens,
|
|
112
|
-
[key]: token
|
|
113
|
-
} : validTokens;
|
|
114
|
-
}, {});
|
|
115
|
-
return filteredTokens;
|
|
116
|
-
};
|
|
117
|
-
/**
|
|
118
|
-
* @typedef {string|number|boolean|{[key: string]:string|number|boolean}} TokenValue
|
|
119
|
-
* @typedef {{[key: string]: TokenValue}} TokensSet
|
|
120
|
-
* @typedef {(AppearanceSet) => TokensSet} TokensGetter
|
|
121
|
-
* @typedef {TokensSet|TokensGetter} TokensProp
|
|
122
|
-
*/
|
|
123
|
-
|
|
124
|
-
/**
|
|
125
|
-
* 'tokens' is an optional object prop on all themable components. Its keys must match the
|
|
126
|
-
* token keys in the component's theme schema.
|
|
127
|
-
*
|
|
128
|
-
* This prop is intended to be used as an 'escape hatch' for difficult or exceptional cases
|
|
129
|
-
* where the main theming system doesn't apply. It is intentionally permissive about values.
|
|
130
|
-
*
|
|
131
|
-
* @param {...string} componentsNames - one or more ComponentName, which tokens keys are accepted
|
|
132
|
-
* @return {function} - a custom PropTypes validator
|
|
133
|
-
*
|
|
134
|
-
* @example
|
|
135
|
-
* Component.propTypes = {
|
|
136
|
-
* // accepts all tokens keys defined in Component schema
|
|
137
|
-
* tokens: getTokensPropType('Component')
|
|
138
|
-
* }
|
|
139
|
-
*
|
|
140
|
-
* Component.propTypes = {
|
|
141
|
-
* // accepts all tokens keys defined in schemas for Component1 and Component2
|
|
142
|
-
* tokens: getTokensPropType('Component1', 'Component2')
|
|
143
|
-
* }
|
|
144
|
-
*/
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
exports.selectTokens = selectTokens;
|
|
148
|
-
|
|
149
|
-
const getTokensPropType = (...componentsNames) => (props, propName, componentName) => {
|
|
150
|
-
_propTypes.default.checkPropTypes({
|
|
151
|
-
[propName]: _propTypes.default.oneOfType([_propTypes.default.object, _propTypes.default.func])
|
|
152
|
-
}, props, propName, componentName);
|
|
153
|
-
|
|
154
|
-
if (typeof props[propName] !== 'function') {
|
|
155
|
-
_propTypes.default.checkPropTypes({
|
|
156
|
-
[propName]: _propTypes.default.exact(Object.fromEntries(componentsNames.flatMap(component => getTokenNames(component).map(key => [key, tokenValueType]))))
|
|
157
|
-
}, props, propName, componentName);
|
|
158
|
-
}
|
|
159
|
-
};
|
|
160
|
-
/**
|
|
161
|
-
* Get a proptypes validator for a set of tokens that is not based on a component in the theme schema.
|
|
162
|
-
*
|
|
163
|
-
* For example, for a set of tokens used in a common style, or for a set of tokens required by
|
|
164
|
-
* a themeless component whose tokens are set by a parent but requires tokens of a certain shape.
|
|
165
|
-
*
|
|
166
|
-
* By default, requires an object with a complete set of tokens (allowing `null`, but not `undefined`).
|
|
167
|
-
*
|
|
168
|
-
* @param {string[]} componentTokenKeys - array of strings of token names
|
|
169
|
-
* @param {object} [options]
|
|
170
|
-
* @param {boolean} [options.partial] - if true, allows tokens to be undefined
|
|
171
|
-
* @param {boolean} [options.allowFunction] - if true, allows functions as well as tokens objects
|
|
172
|
-
* @returns
|
|
173
|
-
*/
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
exports.getTokensPropType = getTokensPropType;
|
|
177
|
-
|
|
178
|
-
const getTokensSetPropType = (componentTokenKeys, {
|
|
179
|
-
partial = false,
|
|
180
|
-
allowFunction = false
|
|
181
|
-
} = {}) => {
|
|
182
|
-
const tokensObjectValidator = _propTypes.default.exact(Object.fromEntries(componentTokenKeys.map(key => [key, partial ? tokenValueType : // Some theme tokens can validly resolve to `null`, but .isRequired treats null as undefined
|
|
183
|
-
(props, propName, ...args) => props[propName] !== null && tokenValueType.isRequired(props, propName, ...args)])));
|
|
184
|
-
|
|
185
|
-
return allowFunction ? _propTypes.default.oneOfType([tokensObjectValidator, _propTypes.default.func]) : tokensObjectValidator;
|
|
186
|
-
};
|
|
187
|
-
|
|
188
|
-
exports.getTokensSetPropType = getTokensSetPropType;
|
|
189
|
-
|
|
190
|
-
function getPropSelector(propTypes, regexp) {
|
|
191
|
-
const keys = Object.keys(propTypes);
|
|
192
|
-
return props => Object.entries(props).reduce((items, [key, value]) => keys.includes(key) || regexp && regexp.test(key) ? { ...items,
|
|
193
|
-
[key]: value
|
|
194
|
-
} : items, {});
|
|
195
|
-
}
|
|
196
|
-
|
|
197
|
-
const a11yProps = {
|
|
198
|
-
/**
|
|
199
|
-
* Proptypes for recognised React Native accessiblity (a11y) props.
|
|
200
|
-
* Spread this in the propTypes of components that accept React Native a11y props.
|
|
201
|
-
*/
|
|
202
|
-
types: _propTypes2.default,
|
|
203
|
-
|
|
204
|
-
/**
|
|
205
|
-
* Filters a props object, returning only recognised React Native accessiblity (a11y) props.
|
|
206
|
-
*
|
|
207
|
-
* Where components accept React Native a11y props, pass { ...rest } from its props to this,
|
|
208
|
-
* then spread the returned object into the component's props (usually its outer container).
|
|
209
|
-
*/
|
|
210
|
-
select: getPropSelector(_propTypes2.default, /^aria-/),
|
|
211
|
-
|
|
212
|
-
/**
|
|
213
|
-
* Use this to disable focus for elements which are visually hidden but still rendered.
|
|
214
|
-
*/
|
|
215
|
-
nonFocusableProps: {
|
|
216
|
-
focusable: false,
|
|
217
|
-
// for android, and for keyboard nav in web
|
|
218
|
-
..._Platform.default.select({
|
|
219
|
-
web: {
|
|
220
|
-
accessibilityHidden: true // web screenreaders
|
|
221
|
-
|
|
222
|
-
},
|
|
223
|
-
android: {
|
|
224
|
-
importantForAccessibility: 'no-hide-descendants'
|
|
225
|
-
},
|
|
226
|
-
ios: {
|
|
227
|
-
accessibilityElementsHidden: true
|
|
228
|
-
}
|
|
229
|
-
})
|
|
230
|
-
},
|
|
231
|
-
|
|
232
|
-
/**
|
|
233
|
-
* Generates an object of platform-appropriate a11y props describing an item that has an
|
|
234
|
-
* ordered position in a set. Examples of usage by accessibility tools includes screenreaders
|
|
235
|
-
* saying "Item X of Y" when this item is select.
|
|
236
|
-
*
|
|
237
|
-
* @param {number} itemsCount - the number of items in the set
|
|
238
|
-
* @param {number} index - the current item's index in the set
|
|
239
|
-
* @returns {object} - platform-applicable a11y props describing this position (if available)
|
|
240
|
-
*/
|
|
241
|
-
getPositionInSet: (itemsCount, index) => _Platform.default.select({
|
|
242
|
-
web: {
|
|
243
|
-
// accessibilityPosInSet etc exists in React Native Web main branch
|
|
244
|
-
// but not in a release compatible with Expo etc; just use `aria-*`
|
|
245
|
-
'aria-setsize': itemsCount,
|
|
246
|
-
'aria-posinset': index + 1
|
|
247
|
-
},
|
|
248
|
-
// No equivalents exist on the native side
|
|
249
|
-
default: {}
|
|
250
|
-
})
|
|
251
|
-
}; // Props related to HTML <a> anchor link attributes.
|
|
252
|
-
|
|
253
|
-
exports.a11yProps = a11yProps;
|
|
254
|
-
const targetValues = ['_self', '_blank', '_parent', '_top'];
|
|
255
|
-
const hrefAttrsProp = {
|
|
256
|
-
types: {
|
|
257
|
-
// React Native Web >= 0.15.0 supports hrefAttrs prop with only these properties
|
|
258
|
-
// and passes them to <a> if an element has a href prop or accessibilityRole "link"
|
|
259
|
-
download: _propTypes.default.string,
|
|
260
|
-
rel: _propTypes.default.string,
|
|
261
|
-
target: _propTypes.default.oneOf(targetValues)
|
|
262
|
-
},
|
|
263
|
-
|
|
264
|
-
/**
|
|
265
|
-
* Takes a props object, bundles any hrefAttrs props present into one object
|
|
266
|
-
* and returns that keyed as `hrefAttrs` and non-hrefAttrs props keyed as `rest`
|
|
267
|
-
*/
|
|
268
|
-
bundle: ({
|
|
269
|
-
download,
|
|
270
|
-
rel,
|
|
271
|
-
target,
|
|
272
|
-
...rest
|
|
273
|
-
}) => ({
|
|
274
|
-
hrefAttrs: {
|
|
275
|
-
download,
|
|
276
|
-
rel,
|
|
277
|
-
target
|
|
278
|
-
},
|
|
279
|
-
rest
|
|
280
|
-
})
|
|
281
|
-
};
|
|
282
|
-
exports.hrefAttrsProp = hrefAttrsProp;
|
|
283
|
-
const pressHandlerPropTypes = {
|
|
284
|
-
onPress: _propTypes.default.func,
|
|
285
|
-
onPressIn: _propTypes.default.func,
|
|
286
|
-
onPressOut: _propTypes.default.func,
|
|
287
|
-
..._Platform.default.select({
|
|
288
|
-
web: {
|
|
289
|
-
onMouseEnter: _propTypes.default.func,
|
|
290
|
-
onMouseLeave: _propTypes.default.func,
|
|
291
|
-
onFocus: _propTypes.default.func,
|
|
292
|
-
onBlur: _propTypes.default.func
|
|
293
|
-
},
|
|
294
|
-
default: {
|
|
295
|
-
onLongPress: _propTypes.default.func
|
|
296
|
-
}
|
|
297
|
-
})
|
|
298
|
-
};
|
|
299
|
-
const pressPropTypes = { ...pressHandlerPropTypes,
|
|
300
|
-
disabled: _propTypes.default.bool,
|
|
301
|
-
..._Platform.default.select({
|
|
302
|
-
web: {},
|
|
303
|
-
default: {
|
|
304
|
-
hitSlop: _propTypes.default.number,
|
|
305
|
-
pressRetentionOffset: _propTypes.default.oneOfType([_propTypes.default.number, rectProp.propType])
|
|
306
|
-
}
|
|
307
|
-
})
|
|
308
|
-
};
|
|
309
|
-
const pressProps = {
|
|
310
|
-
/**
|
|
311
|
-
* Proptypes for clickable or pressable components, including web-only props
|
|
312
|
-
*/
|
|
313
|
-
types: pressPropTypes,
|
|
314
|
-
|
|
315
|
-
/**
|
|
316
|
-
* Filters a props object, returning only the platform-relevant press props defined above
|
|
317
|
-
*/
|
|
318
|
-
select: getPropSelector(pressPropTypes),
|
|
319
|
-
selectHandlers: getPropSelector(pressHandlerPropTypes)
|
|
320
|
-
};
|
|
321
|
-
exports.pressProps = pressProps;
|
|
322
|
-
const linkPropTypes = { ...pressPropTypes,
|
|
323
|
-
href: _propTypes.default.string,
|
|
324
|
-
hrefAttrs: _propTypes.default.shape(hrefAttrsProp.types),
|
|
325
|
-
..._propTypes2.default
|
|
326
|
-
};
|
|
327
|
-
const linkProps = {
|
|
328
|
-
/**
|
|
329
|
-
* Proptypes for components that, on Web, can output <a href="..."> link elements
|
|
330
|
-
*/
|
|
331
|
-
types: linkPropTypes,
|
|
332
|
-
|
|
333
|
-
/**
|
|
334
|
-
* Filters a props object, returning only the platform-relevant link props defined above
|
|
335
|
-
*/
|
|
336
|
-
select: getPropSelector(linkPropTypes),
|
|
337
|
-
|
|
338
|
-
/**
|
|
339
|
-
* Turn hrefs into press handlers on Native and throw if not given `onPress` or `href`.
|
|
340
|
-
*
|
|
341
|
-
* @param {({ onPress?: () => void, href?: string })}
|
|
342
|
-
* @returns {(() => void)|undefined} Returns a press handler, or undefined on web if href
|
|
343
|
-
* string is provided. Expects calling component to use href string on web (e.g. in `<a>`).
|
|
344
|
-
*/
|
|
345
|
-
handleHref: ({
|
|
346
|
-
onPress,
|
|
347
|
-
href
|
|
348
|
-
}) => {
|
|
349
|
-
if (!href && !onPress) {
|
|
350
|
-
throw new Error('handleHref requires either href or onPress');
|
|
351
|
-
}
|
|
352
|
-
|
|
353
|
-
return _Platform.default.select({
|
|
354
|
-
web: onPress,
|
|
355
|
-
default: (...args) => {
|
|
356
|
-
if (onPress) onPress(...args);
|
|
357
|
-
if (href) _Linking.default.openURL(href);
|
|
358
|
-
}
|
|
359
|
-
});
|
|
360
|
-
}
|
|
361
|
-
};
|
|
362
|
-
exports.linkProps = linkProps;
|
|
363
|
-
const viewPropTypes = {
|
|
364
|
-
pointerEvents: _propTypes.default.oneOf(['all', 'none', 'box-only', 'box-none']),
|
|
365
|
-
onLayout: _propTypes.default.func,
|
|
366
|
-
nativeID: _propTypes.default.string,
|
|
367
|
-
testID: _propTypes.default.string,
|
|
368
|
-
dataSet: _propTypes.default.object
|
|
369
|
-
};
|
|
370
|
-
const viewProps = {
|
|
371
|
-
/**
|
|
372
|
-
* Subset of `View` proptypes that could conceivably be needed on any component
|
|
373
|
-
* that renders a single View.
|
|
374
|
-
*/
|
|
375
|
-
types: viewPropTypes,
|
|
376
|
-
|
|
377
|
-
/**
|
|
378
|
-
* Filters a props object, returning only cross-platform View props that are potentially
|
|
379
|
-
* relevant to any basic layout component that renders one View.
|
|
380
|
-
*/
|
|
381
|
-
select: getPropSelector(viewPropTypes)
|
|
382
|
-
};
|
|
383
|
-
exports.viewProps = viewProps;
|
|
384
|
-
|
|
385
|
-
const getByViewport = propType => ({
|
|
386
|
-
xs: propType,
|
|
387
|
-
sm: propType,
|
|
388
|
-
md: propType,
|
|
389
|
-
lg: propType,
|
|
390
|
-
xl: propType
|
|
391
|
-
});
|
|
392
|
-
/**
|
|
393
|
-
* Utilities for props that allow different values to be applied at different viewports.
|
|
394
|
-
*
|
|
395
|
-
* These should apply viewport inheritance such that if a viewport is undefined, the value is
|
|
396
|
-
* taken from the next smallest viewport for which a value is available. For example, a
|
|
397
|
-
* responsive prop { xs: 2, lg: 3 } should apply 2 at sizes sm and md, and 3 at size xl.
|
|
398
|
-
*
|
|
399
|
-
* @property {Function} getByViewport - returns an object where each each viewport has a key
|
|
400
|
-
* containing the provided argument.
|
|
401
|
-
* @property {Function} getTypeByViewport - returns a PropTypes shape validator for an object where
|
|
402
|
-
* each viewport has a key containing the provided proptype.
|
|
403
|
-
* @property {Function} getTypeOptionallyByViewport - returns a PropTypes validator that accepts
|
|
404
|
-
* either the provided proptype on its own, or the output of getTypeByViewport
|
|
405
|
-
*/
|
|
406
|
-
|
|
407
|
-
|
|
408
|
-
const responsiveProps = {
|
|
409
|
-
getByViewport,
|
|
410
|
-
getTypeByViewport: propType => _propTypes.default.shape(getByViewport(propType)),
|
|
411
|
-
getTypeOptionallyByViewport: propType => _propTypes.default.oneOfType([propType, _propTypes.default.shape(getByViewport(propType))])
|
|
412
|
-
};
|
|
413
|
-
/**
|
|
414
|
-
* @typedef {0|1|2|3|4|5|6|7|8|9|10|11} SpacingIndex - value used to select a size on the spacing scale
|
|
415
|
-
*
|
|
416
|
-
* @typedef SpacingOptions
|
|
417
|
-
* @property {VariantProp} [SpacingOptions.variant] - optional theme scale variants e.g. compact, wide
|
|
418
|
-
* @property {number} [SpacingOptions.size] - optional override to force a particular pixel size
|
|
419
|
-
* @property {number} [SpacingOptions.subtract] - optional number to subtract from final pixel size
|
|
420
|
-
*
|
|
421
|
-
* @typedef SpacingObject
|
|
422
|
-
* @property {SpacingIndex} [SpacingObject.xs] - space scale index to use above xs viewport
|
|
423
|
-
* @property {SpacingIndex} [SpacingObject.sm] - space scale index to use above sm viewport
|
|
424
|
-
* @property {SpacingIndex} [SpacingObject.md] - space scale index to use above md viewport
|
|
425
|
-
* @property {SpacingIndex} [SpacingObject.lg] - space scale index to use above lg viewport
|
|
426
|
-
* @property {SpacingIndex} [SpacingObject.xl] - space scale index to use above xl viewport
|
|
427
|
-
* @property {SpacingIndex} [SpacingObject.space] - space scale index to use at all viewports
|
|
428
|
-
* @property {SpacingOptions} [SpacingObject.options] - optional options for this spacing
|
|
429
|
-
*
|
|
430
|
-
* @typedef {SpacingIndex|SpacingObject} SpacingValue
|
|
431
|
-
*/
|
|
432
|
-
|
|
433
|
-
exports.responsiveProps = responsiveProps;
|
|
434
|
-
const spacingScale = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11];
|
|
435
|
-
|
|
436
|
-
const spacingIndexPropType = _propTypes.default.oneOf(spacingScale);
|
|
437
|
-
|
|
438
|
-
const spacingObjectPropType = _propTypes.default.shape({ ...responsiveProps.getByViewport(spacingIndexPropType),
|
|
439
|
-
space: spacingIndexPropType,
|
|
440
|
-
options: _propTypes.default.shape({
|
|
441
|
-
variant: variantProp.propType,
|
|
442
|
-
size: _propTypes.default.number
|
|
443
|
-
})
|
|
444
|
-
});
|
|
445
|
-
/**
|
|
446
|
-
* Components and utilities that assign fixed space between components use a theme-defined spacing scale.
|
|
447
|
-
*
|
|
448
|
-
* They typically take one or more props of the {@link SpacingValue} type and turn it into a pixel size value
|
|
449
|
-
* using the hook `useSpacingScale`, which resolves any options or responsive behaviour and returns the
|
|
450
|
-
* appropriate value from the theme spacing scale.
|
|
451
|
-
*
|
|
452
|
-
* - see /ADRs/inter-component-spacing/README.md - ADR on this structure
|
|
453
|
-
* - see /src/utils/spacing/useSpacingScale.js - hook that processes spacing values
|
|
454
|
-
* - @see {@link SpacingIndex} - themes provide spacing scales of up to 12 sizes with optional theme rules.
|
|
455
|
-
* - @see {@link SpacingValue} - either a simple number referencing an index position on the spacing
|
|
456
|
-
* scale, or an object with an optional `options` key and one or more spacing indexes keyed either by
|
|
457
|
-
* viewports or `space` to apply at all viewports.
|
|
458
|
-
*/
|
|
459
|
-
|
|
460
|
-
|
|
461
|
-
const spacingProps = {
|
|
462
|
-
scale: spacingScale,
|
|
463
|
-
types: {
|
|
464
|
-
spacingIndex: spacingIndexPropType,
|
|
465
|
-
spacingObject: spacingObjectPropType,
|
|
466
|
-
// Most spacing components and utilities take this prop / arg type:
|
|
467
|
-
spacingValue: _propTypes.default.oneOfType([spacingIndexPropType, spacingObjectPropType])
|
|
468
|
-
}
|
|
469
|
-
};
|
|
470
|
-
/**
|
|
471
|
-
* Returns a prop type validator which checks whether a prop is either a component or an array of
|
|
472
|
-
* components of a given type, based on their `name` or `displayName` properties.
|
|
473
|
-
* Use an array of strings for `passedName` to accept more than one component type.
|
|
474
|
-
* For an array the validation fails on the first occurrence of an invalid element.
|
|
475
|
-
*
|
|
476
|
-
* @param {string|string[]} passedName
|
|
477
|
-
* @return {function}
|
|
478
|
-
*/
|
|
479
|
-
|
|
480
|
-
exports.spacingProps = spacingProps;
|
|
481
|
-
|
|
482
|
-
const componentPropType = passedName => {
|
|
483
|
-
const passedNames = typeof passedName === 'string' ? [passedName] : passedName;
|
|
484
|
-
|
|
485
|
-
const checkProp = (props, propName, componentName) => {
|
|
486
|
-
var _props$propName$type, _props$propName$type2;
|
|
487
|
-
|
|
488
|
-
if (props[propName] === undefined || props[propName] === null) {
|
|
489
|
-
return undefined;
|
|
490
|
-
}
|
|
491
|
-
|
|
492
|
-
if (Array.isArray(props[propName])) {
|
|
493
|
-
// Iterates through every child and try to find the first element that does not match the passed name
|
|
494
|
-
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean
|
|
495
|
-
return props[propName].map((_, index) => checkProp(props[propName], index, componentName)).find(Boolean);
|
|
496
|
-
}
|
|
497
|
-
|
|
498
|
-
const nameInProp = ((_props$propName$type = props[propName].type) === null || _props$propName$type === void 0 ? void 0 : _props$propName$type.displayName) || ((_props$propName$type2 = props[propName].type) === null || _props$propName$type2 === void 0 ? void 0 : _props$propName$type2.name);
|
|
499
|
-
|
|
500
|
-
if (!nameInProp || !passedNames.includes(nameInProp)) {
|
|
501
|
-
const propDescription = nameInProp ? `Component ${nameInProp}` : typeof props[propName];
|
|
502
|
-
return new Error(`${componentName}: ${propDescription} was passed to \`${propName}\` prop; should be ${passedNames.join(' or ')}`);
|
|
503
|
-
}
|
|
504
|
-
|
|
505
|
-
return undefined;
|
|
506
|
-
};
|
|
507
|
-
|
|
508
|
-
const checkRequired = (props, propName, componentName) => {
|
|
509
|
-
if (props[propName] === undefined) {
|
|
510
|
-
return new Error(`The prop \`${propName}\` is marked as required in \`${componentName}\`, but its value is ${props[propName]}.`);
|
|
511
|
-
}
|
|
512
|
-
|
|
513
|
-
return undefined;
|
|
514
|
-
};
|
|
515
|
-
|
|
516
|
-
const createValidate = isRequired => {
|
|
517
|
-
if (isRequired) {
|
|
518
|
-
return (props, propName, componentName) => {
|
|
519
|
-
const checkForError = checkProp(props, propName, componentName);
|
|
520
|
-
|
|
521
|
-
if (checkForError) {
|
|
522
|
-
return checkForError;
|
|
523
|
-
}
|
|
524
|
-
|
|
525
|
-
return checkRequired(props, propName, componentName);
|
|
526
|
-
};
|
|
527
|
-
}
|
|
528
|
-
|
|
529
|
-
return checkProp;
|
|
530
|
-
};
|
|
531
|
-
|
|
532
|
-
const validate = createValidate();
|
|
533
|
-
validate.isRequired = createValidate(true);
|
|
534
|
-
return validate;
|
|
535
|
-
};
|
|
536
|
-
|
|
537
|
-
exports.componentPropType = componentPropType;
|
|
538
|
-
|
|
539
|
-
const copyPropTypes = _propTypes.default.oneOf(['en', 'fr']);
|
|
540
|
-
|
|
541
|
-
exports.copyPropTypes = copyPropTypes;
|
package/release-context.json
DELETED
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"previousReleaseTag": "@telus-uds/components-base/v1.0.1",
|
|
3
|
-
"changelog": "## [1.1.0](https://github.com/telus/universal-design-system/compare/@telus-uds/components-base/v1.0.1...@telus-uds/components-base/v1.1.0) (2022-02-28)\n\n\n### Features\n\n* **component-base:** add some fixes to the list component ([#1226](https://github.com/telus/universal-design-system/issues/1226)) ([35a42e0](https://github.com/telus/universal-design-system/commit/35a42e05e23630696286e7c8607e7a1e8da9d6c2))\n* **ds-allium:** add an Allium List ([#1304](https://github.com/telus/universal-design-system/issues/1304)) ([2f91c74](https://github.com/telus/universal-design-system/commit/2f91c74d6c0b30f09089e8f11beb3739e5be1887))\n* generate component docs ([#1292](https://github.com/telus/universal-design-system/issues/1292)) ([e0c03a5](https://github.com/telus/universal-design-system/commit/e0c03a5c4b5186e97d424c5b1c4594b1dda8201f))\n\n\n### Bug Fixes\n\n* **base:** no SSR crash on transpiled global CSS ([#1311](https://github.com/telus/universal-design-system/issues/1311)) ([7bc585c](https://github.com/telus/universal-design-system/commit/7bc585cc76bf7d760b1630a6f90f336f2be2abda))\n",
|
|
4
|
-
"releaseTag": "@telus-uds/components-base/v1.1.0",
|
|
5
|
-
"newVersion": "1.1.0",
|
|
6
|
-
"packageName": "@telus-uds/components-base"
|
|
7
|
-
}
|
|
@@ -1,61 +0,0 @@
|
|
|
1
|
-
import PropTypes from 'prop-types'
|
|
2
|
-
|
|
3
|
-
import nativePropTypes from './propTypes.native'
|
|
4
|
-
|
|
5
|
-
export default {
|
|
6
|
-
...nativePropTypes,
|
|
7
|
-
// React Native Web adds many a11y props that alias aria-* attributes
|
|
8
|
-
// Types based on https://necolas.github.io/react-native-web/docs/accessibility/
|
|
9
|
-
accessibilityActiveDescendant: PropTypes.string,
|
|
10
|
-
accessibilityAtomic: PropTypes.bool,
|
|
11
|
-
accessibilityAutoComplete: PropTypes.string,
|
|
12
|
-
accessibilityBusy: PropTypes.bool,
|
|
13
|
-
accessibilityChecked: PropTypes.oneOf([true, false, 'mixed']),
|
|
14
|
-
accessibilityColumnCount: PropTypes.number,
|
|
15
|
-
accessibilityColumnIndex: PropTypes.number,
|
|
16
|
-
accessibilityColumnSpan: PropTypes.number,
|
|
17
|
-
accessibilityControls: PropTypes.oneOfType([
|
|
18
|
-
PropTypes.string,
|
|
19
|
-
PropTypes.arrayOf(PropTypes.string)
|
|
20
|
-
]),
|
|
21
|
-
accessibilityCurrent: PropTypes.oneOf([true, false, 'page', 'step', 'location', 'date', 'time']),
|
|
22
|
-
accessibilityDescribedBy: PropTypes.oneOfType([
|
|
23
|
-
PropTypes.string,
|
|
24
|
-
PropTypes.arrayOf(PropTypes.string)
|
|
25
|
-
]),
|
|
26
|
-
accessibilityDetails: PropTypes.string,
|
|
27
|
-
accessibilityDisabled: PropTypes.bool,
|
|
28
|
-
accessibilityErrorMessage: PropTypes.string,
|
|
29
|
-
accessibilityExpanded: PropTypes.bool,
|
|
30
|
-
accessibilityFlowTo: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
|
|
31
|
-
accessibilityHasPopup: PropTypes.string,
|
|
32
|
-
accessibilityHidden: PropTypes.bool,
|
|
33
|
-
accessibilityInvalid: PropTypes.bool,
|
|
34
|
-
accessibilityKeyShortcuts: PropTypes.string,
|
|
35
|
-
accessibilityLabelledBy: PropTypes.oneOfType([
|
|
36
|
-
PropTypes.string,
|
|
37
|
-
PropTypes.arrayOf(PropTypes.string)
|
|
38
|
-
]),
|
|
39
|
-
accessibilityLevel: PropTypes.number,
|
|
40
|
-
accessibilityModal: PropTypes.bool,
|
|
41
|
-
accessibilityMultiline: PropTypes.bool,
|
|
42
|
-
accessibilityMultiSelectable: PropTypes.bool,
|
|
43
|
-
accessibilityOrientation: PropTypes.oneOf(['horizontal', 'vertical']),
|
|
44
|
-
accessibilityOwns: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
|
|
45
|
-
accessibilityPlaceholder: PropTypes.string,
|
|
46
|
-
accessibilityPosInSet: PropTypes.number,
|
|
47
|
-
accessibilityPressed: PropTypes.bool,
|
|
48
|
-
accessibilityReadOnly: PropTypes.bool,
|
|
49
|
-
accessibilityRequired: PropTypes.bool,
|
|
50
|
-
accessibilityRoleDescription: PropTypes.string,
|
|
51
|
-
accessibilityRowCount: PropTypes.number,
|
|
52
|
-
accessibilityRowIndex: PropTypes.number,
|
|
53
|
-
accessibilityRowSpan: PropTypes.number,
|
|
54
|
-
accessibilitySelected: PropTypes.bool,
|
|
55
|
-
accessibilitySetSize: PropTypes.number,
|
|
56
|
-
accessibilitySort: PropTypes.oneOf(['ascending', 'descending', 'none', 'other']),
|
|
57
|
-
accessibilityValueMax: PropTypes.number,
|
|
58
|
-
accessibilityValueMin: PropTypes.number,
|
|
59
|
-
accessibilityValueNow: PropTypes.number,
|
|
60
|
-
accessibilityValueText: PropTypes.string
|
|
61
|
-
}
|
|
@@ -1,39 +0,0 @@
|
|
|
1
|
-
import PropTypes from 'prop-types'
|
|
2
|
-
|
|
3
|
-
// React Native exports a11y prop definitions as TypeScript Interfaces, but no longer exports PropTypes
|
|
4
|
-
// so we have to define them ourselves.
|
|
5
|
-
export default {
|
|
6
|
-
accessible: PropTypes.bool,
|
|
7
|
-
focusable: PropTypes.bool,
|
|
8
|
-
|
|
9
|
-
accessibilityElementsHidden: PropTypes.bool,
|
|
10
|
-
accessibilityHint: PropTypes.string, // react-native-web ignores `accessibilityHint`
|
|
11
|
-
accessibilityIgnoresInvertColors: PropTypes.bool,
|
|
12
|
-
accessibilityLabel: PropTypes.string,
|
|
13
|
-
accessibilityRole: PropTypes.string,
|
|
14
|
-
accessibilityActions: PropTypes.arrayOf(
|
|
15
|
-
PropTypes.shape({
|
|
16
|
-
name: PropTypes.string.isRequired,
|
|
17
|
-
label: PropTypes.string
|
|
18
|
-
})
|
|
19
|
-
),
|
|
20
|
-
accessibilityLiveRegion: PropTypes.oneOf(['none', 'polite', 'assertive']),
|
|
21
|
-
accessibilityState: PropTypes.shape({
|
|
22
|
-
disabled: PropTypes.bool,
|
|
23
|
-
selected: PropTypes.bool,
|
|
24
|
-
checked: PropTypes.oneOf([true, false, 'mixed']),
|
|
25
|
-
busy: PropTypes.bool,
|
|
26
|
-
expanded: PropTypes.bool
|
|
27
|
-
}),
|
|
28
|
-
accessibilityValue: PropTypes.shape({
|
|
29
|
-
min: PropTypes.number,
|
|
30
|
-
max: PropTypes.number,
|
|
31
|
-
now: PropTypes.number,
|
|
32
|
-
text: PropTypes.string
|
|
33
|
-
}),
|
|
34
|
-
accessibilityViewIsModal: PropTypes.bool,
|
|
35
|
-
importantForAccessibility: PropTypes.oneOf(['auto', 'yes', 'no', 'no-hide-descendants']),
|
|
36
|
-
onAccessibilityAction: PropTypes.func,
|
|
37
|
-
onAccessibilityEscape: PropTypes.func,
|
|
38
|
-
onAccessibilityTap: PropTypes.func
|
|
39
|
-
}
|