@telus-uds/components-base 0.0.2-prerelease.5 → 0.0.2-prerelease.9
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/.ultra.cache.json +1 -0
- package/CHANGELOG.md +65 -0
- package/__fixtures__/Accessible.js +33 -0
- package/__fixtures__/Accessible.native.js +32 -0
- package/__fixtures__/testTheme.js +871 -52
- package/__tests__/ActivityIndicator/ActivityIndicator.test.jsx +1 -1
- package/__tests__/Button/ButtonBase.test.jsx +3 -32
- package/__tests__/Button/ButtonGroup.test.jsx +2 -2
- package/__tests__/Checkbox/Checkbox.test.jsx +94 -0
- package/__tests__/Checkbox/CheckboxGroup.test.jsx +247 -0
- package/__tests__/Icon/Icon.test.jsx +3 -3
- package/__tests__/IconButton/IconButton.test.jsx +52 -0
- package/__tests__/InputSupports/InputSupports.test.jsx +50 -0
- package/__tests__/List/List.test.jsx +60 -0
- package/__tests__/Modal/Modal.test.jsx +47 -0
- package/__tests__/Notification/Notification.test.jsx +20 -0
- package/__tests__/Pagination/Pagination.test.jsx +2 -2
- package/__tests__/Progress/Progress.test.jsx +79 -0
- package/__tests__/Radio/Radio.test.jsx +87 -0
- package/__tests__/Radio/RadioGroup.test.jsx +221 -0
- package/__tests__/RadioCard/RadioCard.test.jsx +87 -0
- package/__tests__/RadioCard/RadioCardGroup.test.jsx +247 -0
- package/__tests__/Search/Search.test.jsx +72 -0
- package/__tests__/Select/Select.test.jsx +93 -0
- package/__tests__/Skeleton/Skeleton.test.jsx +61 -0
- package/__tests__/StackView/StackView.test.jsx +0 -26
- package/__tests__/StepTracker/StepTracker.test.jsx +94 -0
- package/__tests__/Tabs/Tabs.test.jsx +200 -0
- package/__tests__/Tags/Tags.test.jsx +328 -0
- package/__tests__/TextInput/TextArea.test.jsx +34 -0
- package/__tests__/TextInput/{TextInput.test.jsx → TextInputBase.test.jsx} +20 -46
- package/__tests__/Tooltip/Tooltip.test.jsx +65 -0
- package/__tests__/Tooltip/getTooltipPosition.test.js +79 -0
- package/__tests__/utils/input.test.js +58 -0
- package/__tests__/utils/useCopy.test.js +42 -0
- package/__tests__/utils/useResponsiveProp.test.jsx +202 -0
- package/__tests__/utils/{spacing.test.jsx → useSpacingScale.test.jsx} +1 -1
- package/babel.config.js +20 -0
- package/jest.config.js +13 -4
- package/lib/A11yInfoProvider/index.js +54 -26
- package/lib/A11yText/index.js +37 -14
- package/lib/ActivityIndicator/Spinner.js +78 -0
- package/lib/ActivityIndicator/Spinner.native.js +121 -87
- package/lib/ActivityIndicator/index.js +28 -12
- package/lib/ActivityIndicator/shared.js +27 -12
- package/lib/BaseProvider/index.js +34 -11
- package/lib/Box/Box.js +54 -31
- package/lib/Box/index.js +13 -2
- package/lib/Button/Button.js +38 -10
- package/lib/Button/ButtonBase.js +115 -94
- package/lib/Button/ButtonGroup.js +94 -86
- package/lib/Button/ButtonLink.js +41 -13
- package/lib/Button/index.js +31 -4
- package/lib/Button/propTypes.js +32 -9
- package/lib/Card/Card.js +36 -41
- package/lib/Card/CardBase.js +78 -0
- package/lib/Card/PressableCardBase.js +137 -0
- package/lib/Card/index.js +40 -2
- package/lib/Checkbox/Checkbox.js +344 -0
- package/lib/Checkbox/CheckboxGroup.js +231 -0
- package/lib/Checkbox/CheckboxInput.js +74 -0
- package/lib/Checkbox/CheckboxInput.native.js +14 -0
- package/lib/Checkbox/index.js +21 -0
- package/lib/Divider/Divider.js +50 -24
- package/lib/Divider/index.js +13 -2
- package/lib/ExpandCollapse/Accordion.js +20 -7
- package/lib/ExpandCollapse/Control.js +50 -27
- package/lib/ExpandCollapse/ExpandCollapse.js +41 -24
- package/lib/ExpandCollapse/Panel.js +75 -37
- package/lib/ExpandCollapse/index.js +25 -7
- package/lib/Feedback/Feedback.js +85 -34
- package/lib/Feedback/index.js +13 -2
- package/lib/Fieldset/Fieldset.js +160 -0
- package/lib/Fieldset/FieldsetContainer.js +41 -0
- package/lib/Fieldset/FieldsetContainer.native.js +33 -0
- package/lib/Fieldset/Legend.js +33 -0
- package/lib/Fieldset/Legend.native.js +43 -0
- package/lib/Fieldset/cssReset.js +21 -0
- package/lib/Fieldset/index.js +13 -0
- package/lib/FlexGrid/Col/Col.js +67 -38
- package/lib/FlexGrid/Col/index.js +13 -2
- package/lib/FlexGrid/FlexGrid.js +70 -45
- package/lib/FlexGrid/Row/Row.js +48 -27
- package/lib/FlexGrid/Row/index.js +13 -2
- package/lib/FlexGrid/helpers/index.js +9 -1
- package/lib/FlexGrid/index.js +13 -2
- package/lib/FlexGrid/providers/GutterContext.js +15 -3
- package/lib/Icon/Icon.js +52 -47
- package/lib/Icon/IconText.js +100 -0
- package/lib/Icon/index.js +31 -3
- package/lib/IconButton/IconButton.js +135 -0
- package/lib/IconButton/index.js +13 -0
- package/lib/InputLabel/InputLabel.js +70 -34
- package/lib/InputLabel/LabelContent.js +31 -0
- package/lib/InputLabel/LabelContent.native.js +9 -1
- package/lib/InputLabel/index.js +13 -2
- package/lib/InputSupports/InputSupports.js +104 -0
- package/lib/InputSupports/index.js +13 -0
- package/lib/InputSupports/propTypes.js +66 -0
- package/lib/InputSupports/useInputSupports.js +41 -0
- package/lib/Link/ChevronLink.js +57 -15
- package/lib/Link/InlinePressable.js +50 -0
- package/lib/Link/InlinePressable.native.js +101 -0
- package/lib/Link/Link.js +30 -13
- package/lib/Link/LinkBase.js +114 -145
- package/lib/Link/TextButton.js +47 -17
- package/lib/Link/index.js +39 -4
- package/lib/List/List.js +80 -0
- package/lib/List/ListItem.js +237 -0
- package/lib/List/index.js +13 -0
- package/lib/Modal/Modal.js +226 -0
- package/lib/Modal/dictionary.js +16 -0
- package/lib/Modal/index.js +13 -0
- package/lib/Notification/Notification.js +200 -0
- package/lib/Notification/dictionary.js +15 -0
- package/lib/Notification/index.js +13 -0
- package/lib/Pagination/PageButton.js +45 -46
- package/lib/Pagination/Pagination.js +70 -40
- package/lib/Pagination/SideButton.js +74 -58
- package/lib/Pagination/dictionary.js +9 -2
- package/lib/Pagination/index.js +13 -2
- package/lib/Pagination/usePagination.js +12 -2
- package/lib/Progress/Progress.js +99 -0
- package/lib/Progress/ProgressBar.js +146 -0
- package/lib/Progress/ProgressBarBackground.js +57 -0
- package/lib/Progress/index.js +16 -0
- package/lib/Radio/Radio.js +292 -0
- package/lib/Radio/RadioButton.js +141 -0
- package/lib/Radio/RadioGroup.js +233 -0
- package/lib/Radio/RadioInput.js +76 -0
- package/lib/Radio/RadioInput.native.js +14 -0
- package/lib/Radio/index.js +21 -0
- package/lib/RadioCard/RadioCard.js +240 -0
- package/lib/RadioCard/RadioCardGroup.js +251 -0
- package/lib/RadioCard/index.js +21 -0
- package/lib/Search/Search.js +243 -0
- package/lib/Search/dictionary.js +19 -0
- package/lib/Search/index.js +13 -0
- package/lib/Select/Group.js +33 -0
- package/lib/Select/Group.native.js +25 -0
- package/lib/Select/Item.js +29 -0
- package/lib/Select/Item.native.js +19 -0
- package/lib/Select/Picker.js +79 -0
- package/lib/Select/Picker.native.js +115 -0
- package/lib/Select/Select.js +300 -0
- package/lib/Select/index.js +19 -0
- package/lib/SideNav/Item.js +54 -33
- package/lib/SideNav/ItemContent.js +41 -15
- package/lib/SideNav/ItemsGroup.js +46 -27
- package/lib/SideNav/SideNav.js +92 -69
- package/lib/SideNav/index.js +15 -1
- package/lib/Skeleton/Skeleton.js +137 -0
- package/lib/Skeleton/index.js +13 -0
- package/lib/Skeleton/skeleton.constant.js +12 -0
- package/lib/Skeleton/skeletonWebAnimation.js +27 -0
- package/lib/Skeleton/useSkeletonNativeAnimation.js +37 -0
- package/lib/Spacer/Spacer.js +31 -12
- package/lib/Spacer/index.js +13 -2
- package/lib/StackView/StackView.js +57 -33
- package/lib/StackView/StackWrap.js +33 -10
- package/lib/StackView/StackWrap.native.js +13 -2
- package/lib/StackView/StackWrapBox.js +50 -23
- package/lib/StackView/StackWrapGap.js +45 -19
- package/lib/StackView/common.js +19 -4
- package/lib/StackView/getStackedContent.js +49 -19
- package/lib/StackView/index.js +29 -5
- package/lib/StepTracker/Step.js +245 -0
- package/lib/StepTracker/StepTracker.js +197 -0
- package/lib/StepTracker/dictionary.js +17 -0
- package/lib/StepTracker/index.js +13 -0
- package/lib/Tabs/HorizontalScroll.js +199 -0
- package/lib/Tabs/ScrollViewEnd.js +66 -0
- package/lib/Tabs/ScrollViewEnd.native.js +41 -0
- package/lib/Tabs/Tabs.js +117 -0
- package/lib/Tabs/TabsItem.js +234 -0
- package/lib/Tabs/TabsScrollButton.js +121 -0
- package/lib/Tabs/dictionary.js +18 -0
- package/lib/Tabs/index.js +13 -0
- package/lib/Tabs/itemPositions.js +128 -0
- package/lib/Tags/Tags.js +250 -0
- package/lib/Tags/index.js +13 -0
- package/lib/TextInput/TextArea.js +109 -0
- package/lib/TextInput/TextInput.js +41 -303
- package/lib/TextInput/TextInputBase.js +252 -0
- package/lib/TextInput/index.js +23 -2
- package/lib/TextInput/propTypes.js +42 -0
- package/lib/ThemeProvider/ThemeProvider.js +38 -14
- package/lib/ThemeProvider/index.js +61 -6
- package/lib/ThemeProvider/useSetTheme.js +14 -5
- package/lib/ThemeProvider/useTheme.js +13 -4
- package/lib/ThemeProvider/useThemeTokens.js +86 -19
- package/lib/ThemeProvider/utils/index.js +31 -2
- package/lib/ThemeProvider/utils/styles.js +52 -16
- package/lib/ThemeProvider/utils/theme-tokens.js +94 -16
- package/lib/ToggleSwitch/ToggleSwitch.js +76 -52
- package/lib/ToggleSwitch/index.js +13 -2
- package/lib/Tooltip/Backdrop.js +56 -0
- package/lib/Tooltip/Backdrop.native.js +59 -0
- package/lib/Tooltip/Tooltip.js +357 -0
- package/lib/Tooltip/dictionary.js +15 -0
- package/lib/Tooltip/getTooltipPosition.js +172 -0
- package/lib/Tooltip/index.js +13 -0
- package/lib/TooltipButton/TooltipButton.js +83 -0
- package/lib/TooltipButton/index.js +13 -0
- package/lib/Typography/Typography.js +58 -43
- package/lib/Typography/index.js +13 -2
- package/lib/ViewportProvider/ViewportProvider.js +46 -0
- package/lib/ViewportProvider/index.js +22 -38
- package/lib/ViewportProvider/useViewport.js +15 -0
- package/lib/ViewportProvider/useViewportListener.js +57 -0
- package/lib/index.js +518 -24
- package/lib/utils/a11y/index.js +18 -0
- package/lib/utils/a11y/textSize.js +49 -0
- package/lib/utils/animation/index.js +15 -2
- package/lib/utils/animation/useVerticalExpandAnimation.js +28 -11
- package/lib/utils/children.js +87 -0
- package/lib/utils/index.js +163 -4
- package/lib/utils/info/index.js +19 -0
- package/lib/utils/info/platform/index.js +23 -0
- package/lib/utils/info/platform/platform.android.js +8 -0
- package/lib/utils/info/platform/platform.ios.js +8 -0
- package/lib/utils/info/platform/platform.js +8 -0
- package/lib/utils/info/platform/platform.native.js +11 -0
- package/lib/utils/info/versions.js +16 -0
- package/lib/utils/input.js +51 -33
- package/lib/utils/pressability.js +120 -0
- package/lib/utils/propTypes.js +269 -116
- package/lib/utils/useCopy.js +51 -0
- package/lib/utils/useHash.js +48 -0
- package/lib/utils/useHash.native.js +15 -0
- package/lib/utils/useResponsiveProp.js +59 -0
- package/lib/utils/{spacing/useSpacingScale.js → useSpacingScale.js} +45 -12
- package/lib/utils/useUniqueId.js +13 -4
- package/package.json +12 -9
- package/release-context.json +4 -4
- package/src/ActivityIndicator/{Spinner.web.jsx → Spinner.jsx} +0 -0
- package/src/Box/Box.jsx +11 -4
- package/src/Button/Button.jsx +9 -5
- package/src/Button/ButtonBase.jsx +69 -69
- package/src/Button/ButtonGroup.jsx +11 -24
- package/src/Button/ButtonLink.jsx +14 -4
- package/src/Button/propTypes.js +12 -2
- package/src/Card/Card.jsx +4 -30
- package/src/Card/CardBase.jsx +57 -0
- package/src/Card/PressableCardBase.jsx +112 -0
- package/src/Card/index.js +3 -0
- package/src/Checkbox/Checkbox.jsx +274 -0
- package/src/Checkbox/CheckboxGroup.jsx +196 -0
- package/src/Checkbox/CheckboxInput.jsx +55 -0
- package/src/Checkbox/CheckboxInput.native.jsx +6 -0
- package/src/Checkbox/index.js +5 -0
- package/src/ExpandCollapse/Control.jsx +1 -1
- package/src/Feedback/Feedback.jsx +31 -22
- package/src/Fieldset/Fieldset.jsx +129 -0
- package/src/Fieldset/FieldsetContainer.jsx +22 -0
- package/src/Fieldset/FieldsetContainer.native.jsx +16 -0
- package/src/Fieldset/Legend.jsx +16 -0
- package/src/Fieldset/Legend.native.jsx +22 -0
- package/src/Fieldset/cssReset.js +14 -0
- package/src/Fieldset/index.js +3 -0
- package/src/Icon/Icon.jsx +21 -26
- package/src/Icon/IconText.jsx +63 -0
- package/src/Icon/index.js +3 -2
- package/src/IconButton/IconButton.jsx +107 -0
- package/src/IconButton/index.js +3 -0
- package/src/InputLabel/InputLabel.jsx +11 -4
- package/src/InputLabel/{LabelContent.web.jsx → LabelContent.jsx} +0 -0
- package/src/InputSupports/InputSupports.jsx +75 -0
- package/src/InputSupports/index.js +3 -0
- package/src/InputSupports/propTypes.js +44 -0
- package/src/InputSupports/useInputSupports.js +30 -0
- package/src/Link/ChevronLink.jsx +28 -7
- package/src/Link/InlinePressable.jsx +37 -0
- package/src/Link/InlinePressable.native.jsx +73 -0
- package/src/Link/Link.jsx +17 -13
- package/src/Link/LinkBase.jsx +67 -148
- package/src/Link/TextButton.jsx +25 -11
- package/src/Link/index.js +2 -1
- package/src/List/List.jsx +47 -0
- package/src/List/ListItem.jsx +187 -0
- package/src/List/index.js +3 -0
- package/src/Modal/Modal.jsx +185 -0
- package/src/Modal/dictionary.js +9 -0
- package/src/Modal/index.js +3 -0
- package/src/Notification/Notification.jsx +149 -0
- package/src/Notification/dictionary.js +8 -0
- package/src/Notification/index.js +3 -0
- package/src/Pagination/PageButton.jsx +3 -17
- package/src/Pagination/SideButton.jsx +27 -38
- package/src/Progress/Progress.jsx +77 -0
- package/src/Progress/ProgressBar.jsx +110 -0
- package/src/Progress/ProgressBarBackground.jsx +34 -0
- package/src/Progress/index.js +6 -0
- package/src/Radio/Radio.jsx +233 -0
- package/src/Radio/RadioButton.jsx +131 -0
- package/src/Radio/RadioGroup.jsx +198 -0
- package/src/Radio/RadioInput.jsx +57 -0
- package/src/Radio/RadioInput.native.jsx +6 -0
- package/src/Radio/index.js +5 -0
- package/src/RadioCard/RadioCard.jsx +191 -0
- package/src/RadioCard/RadioCardGroup.jsx +211 -0
- package/src/RadioCard/index.js +5 -0
- package/src/Search/Search.jsx +204 -0
- package/src/Search/dictionary.js +12 -0
- package/src/Search/index.js +3 -0
- package/src/Select/Group.jsx +15 -0
- package/src/Select/Group.native.jsx +14 -0
- package/src/Select/Item.jsx +11 -0
- package/src/Select/Item.native.jsx +10 -0
- package/src/Select/Picker.jsx +67 -0
- package/src/Select/Picker.native.jsx +95 -0
- package/src/Select/Select.jsx +255 -0
- package/src/Select/index.js +8 -0
- package/src/SideNav/Item.jsx +2 -2
- package/src/Skeleton/Skeleton.jsx +98 -0
- package/src/Skeleton/index.js +3 -0
- package/src/Skeleton/skeleton.constant.js +3 -0
- package/src/Skeleton/skeletonWebAnimation.js +13 -0
- package/src/Skeleton/useSkeletonNativeAnimation.js +27 -0
- package/src/StackView/StackView.jsx +25 -17
- package/src/StackView/StackWrap.jsx +9 -1
- package/src/StackView/StackWrapBox.jsx +19 -7
- package/src/StackView/StackWrapGap.jsx +15 -5
- package/src/StackView/getStackedContent.jsx +8 -2
- package/src/StepTracker/Step.jsx +202 -0
- package/src/StepTracker/StepTracker.jsx +163 -0
- package/src/StepTracker/dictionary.js +10 -0
- package/src/StepTracker/index.js +3 -0
- package/src/Tabs/HorizontalScroll.jsx +165 -0
- package/src/Tabs/ScrollViewEnd.jsx +53 -0
- package/src/Tabs/ScrollViewEnd.native.jsx +24 -0
- package/src/Tabs/Tabs.jsx +89 -0
- package/src/Tabs/TabsItem.jsx +204 -0
- package/src/Tabs/TabsScrollButton.jsx +100 -0
- package/src/Tabs/dictionary.js +11 -0
- package/src/Tabs/index.js +3 -0
- package/src/Tabs/itemPositions.js +101 -0
- package/src/Tags/Tags.jsx +207 -0
- package/src/Tags/index.js +3 -0
- package/src/TextInput/TextArea.jsx +78 -0
- package/src/TextInput/TextInput.jsx +17 -290
- package/src/TextInput/TextInputBase.jsx +210 -0
- package/src/TextInput/index.js +2 -1
- package/src/TextInput/propTypes.js +29 -0
- package/src/ThemeProvider/useThemeTokens.js +56 -5
- package/src/ThemeProvider/utils/styles.js +18 -5
- package/src/ThemeProvider/utils/theme-tokens.js +46 -5
- package/src/ToggleSwitch/ToggleSwitch.jsx +3 -4
- package/src/Tooltip/Backdrop.jsx +60 -0
- package/src/Tooltip/Backdrop.native.jsx +33 -0
- package/src/Tooltip/Tooltip.jsx +294 -0
- package/src/Tooltip/dictionary.js +8 -0
- package/src/Tooltip/getTooltipPosition.js +161 -0
- package/src/Tooltip/index.js +3 -0
- package/src/TooltipButton/TooltipButton.jsx +49 -0
- package/src/TooltipButton/index.js +3 -0
- package/src/Typography/Typography.jsx +10 -20
- package/src/ViewportProvider/ViewportProvider.jsx +21 -0
- package/src/ViewportProvider/index.jsx +2 -41
- package/src/ViewportProvider/useViewport.js +5 -0
- package/src/ViewportProvider/useViewportListener.js +43 -0
- package/src/index.js +31 -3
- package/src/utils/a11y/index.js +1 -0
- package/src/utils/a11y/textSize.js +30 -0
- package/src/utils/children.jsx +66 -0
- package/src/utils/index.js +11 -1
- package/src/utils/info/index.js +8 -0
- package/src/utils/info/platform/index.js +11 -0
- package/src/utils/info/platform/platform.android.js +1 -0
- package/src/utils/info/platform/platform.ios.js +1 -0
- package/src/utils/info/platform/platform.js +1 -0
- package/src/utils/info/platform/platform.native.js +4 -0
- package/src/utils/info/versions.js +6 -0
- package/src/utils/input.js +20 -12
- package/src/utils/pressability.js +96 -0
- package/src/utils/propTypes.js +195 -56
- package/src/utils/useCopy.js +39 -0
- package/src/utils/useHash.js +34 -0
- package/src/utils/useHash.native.js +6 -0
- package/src/utils/useResponsiveProp.js +50 -0
- package/src/utils/{spacing/useSpacingScale.js → useSpacingScale.js} +25 -10
- package/stories/A11yText/A11yText.stories.jsx +4 -8
- package/stories/Button/Button.stories.jsx +5 -0
- package/stories/Card/Card.stories.jsx +1 -1
- package/stories/Checkbox/Checkbox.stories.jsx +94 -0
- package/stories/Feedback/Feedback.stories.jsx +5 -6
- package/stories/Icon/Icon.stories.jsx +27 -7
- package/stories/IconButton/IconButton.stories.jsx +50 -0
- package/stories/InputLabel/InputLabel.stories.jsx +8 -3
- package/stories/Link/ChevronLink.stories.jsx +3 -3
- package/stories/Link/Link.stories.jsx +28 -18
- package/stories/List/List.stories.jsx +117 -0
- package/stories/Modal/Modal.stories.jsx +29 -0
- package/stories/Notification/Notification.stories.jsx +82 -0
- package/stories/Progress/Progress.stories.jsx +93 -0
- package/stories/Radio/Radio.stories.jsx +100 -0
- package/stories/RadioCard/RadioCard.stories.jsx +98 -0
- package/stories/Search/Search.stories.jsx +16 -0
- package/stories/Select/Select.stories.jsx +55 -0
- package/stories/Skeleton/Skeleton.stories.jsx +36 -0
- package/stories/Spacer/Spacer.stories.jsx +7 -2
- package/stories/StackView/StackView.stories.jsx +10 -0
- package/stories/StackView/StackWrap.stories.jsx +12 -0
- package/stories/StepTracker/StepTracker.stories.jsx +71 -0
- package/stories/Tabs/Tabs.stories.jsx +97 -0
- package/stories/Tags/Tags.stories.jsx +69 -0
- package/stories/TextInput/TextArea.stories.jsx +100 -0
- package/stories/Tooltip/Tooltip.stories.jsx +81 -0
- package/stories/TooltipButton/TooltipButton.stories.jsx +11 -0
- package/stories/{platform-supports.web.jsx → platform-supports.jsx} +0 -0
- package/stories/supports.jsx +36 -2
- package/__fixtures__/accessible.icon.svg +0 -6
- package/babel.config.json +0 -8
- package/docs/Contributing.stories.mdx +0 -9
- package/docs/Fonts.stories.mdx +0 -104
- package/docs/Icons.stories.mdx +0 -144
- package/docs/Introduction.stories.mdx +0 -9
- package/lib/ActivityIndicator/Spinner.web.js +0 -55
- package/lib/InputLabel/LabelContent.web.js +0 -17
- package/lib/Pagination/useCopy.js +0 -10
- package/lib/config/svgr-icons-web.js +0 -9
- package/lib/config/svgr-icons.js +0 -52
- package/lib/utils/spacing/index.js +0 -2
- package/lib/utils/spacing/utils.js +0 -32
- package/src/Pagination/useCopy.js +0 -7
- package/src/config/svgr-icons-web.js +0 -11
- package/src/config/svgr-icons.js +0 -46
- package/src/utils/spacing/index.js +0 -3
- package/src/utils/spacing/utils.js +0 -28
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = void 0;
|
|
7
|
+
|
|
8
|
+
var _react = _interopRequireDefault(require("react"));
|
|
9
|
+
|
|
10
|
+
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
11
|
+
|
|
12
|
+
var _cssReset = _interopRequireDefault(require("./cssReset"));
|
|
13
|
+
|
|
14
|
+
var _jsxRuntime = require("react/jsx-runtime");
|
|
15
|
+
|
|
16
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
17
|
+
|
|
18
|
+
/**
|
|
19
|
+
* On Web, wraps children with a HTML `<fieldset>` and sets its attributes as necessary.
|
|
20
|
+
*/
|
|
21
|
+
const FieldsetContainer = ({
|
|
22
|
+
children,
|
|
23
|
+
inactive,
|
|
24
|
+
accessibilityRole,
|
|
25
|
+
name: fieldsetName
|
|
26
|
+
}) => /*#__PURE__*/(0, _jsxRuntime.jsx)("fieldset", {
|
|
27
|
+
disabled: inactive,
|
|
28
|
+
style: _cssReset.default,
|
|
29
|
+
role: accessibilityRole,
|
|
30
|
+
name: fieldsetName,
|
|
31
|
+
children: children
|
|
32
|
+
});
|
|
33
|
+
|
|
34
|
+
FieldsetContainer.propTypes = {
|
|
35
|
+
accessibilityRole: _propTypes.default.string,
|
|
36
|
+
children: _propTypes.default.node,
|
|
37
|
+
inactive: _propTypes.default.bool,
|
|
38
|
+
name: _propTypes.default.string
|
|
39
|
+
};
|
|
40
|
+
var _default = FieldsetContainer;
|
|
41
|
+
exports.default = _default;
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = void 0;
|
|
7
|
+
|
|
8
|
+
var _react = _interopRequireDefault(require("react"));
|
|
9
|
+
|
|
10
|
+
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
11
|
+
|
|
12
|
+
var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
|
|
13
|
+
|
|
14
|
+
var _jsxRuntime = require("react/jsx-runtime");
|
|
15
|
+
|
|
16
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
17
|
+
|
|
18
|
+
// No equivalent of `<fieldset>` on native, so just apply accessibility role to container.
|
|
19
|
+
// If a11y testing finds any additional handling is needed at the container level, add it here.
|
|
20
|
+
const FieldsetContainer = ({
|
|
21
|
+
children,
|
|
22
|
+
accessibilityRole
|
|
23
|
+
}) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
|
|
24
|
+
accessibilityRole: accessibilityRole,
|
|
25
|
+
children: children
|
|
26
|
+
});
|
|
27
|
+
|
|
28
|
+
FieldsetContainer.propTypes = {
|
|
29
|
+
children: _propTypes.default.node,
|
|
30
|
+
accessibilityRole: _propTypes.default.string
|
|
31
|
+
};
|
|
32
|
+
var _default = FieldsetContainer;
|
|
33
|
+
exports.default = _default;
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = void 0;
|
|
7
|
+
|
|
8
|
+
var _react = _interopRequireDefault(require("react"));
|
|
9
|
+
|
|
10
|
+
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
11
|
+
|
|
12
|
+
var _cssReset = _interopRequireDefault(require("./cssReset"));
|
|
13
|
+
|
|
14
|
+
var _jsxRuntime = require("react/jsx-runtime");
|
|
15
|
+
|
|
16
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
17
|
+
|
|
18
|
+
/**
|
|
19
|
+
* On Web, wraps children in HTML `<legend>` tag.
|
|
20
|
+
* On Native, `<legend>` does not exist, wraps in a width 100% block to follow <legend>'s behaviour in a flex.
|
|
21
|
+
*/
|
|
22
|
+
const Legend = ({
|
|
23
|
+
children
|
|
24
|
+
}) => /*#__PURE__*/(0, _jsxRuntime.jsx)("legend", {
|
|
25
|
+
style: _cssReset.default,
|
|
26
|
+
children: children
|
|
27
|
+
});
|
|
28
|
+
|
|
29
|
+
Legend.propTypes = {
|
|
30
|
+
children: _propTypes.default.node
|
|
31
|
+
};
|
|
32
|
+
var _default = Legend;
|
|
33
|
+
exports.default = _default;
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = void 0;
|
|
7
|
+
|
|
8
|
+
var _react = _interopRequireDefault(require("react"));
|
|
9
|
+
|
|
10
|
+
var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
|
|
11
|
+
|
|
12
|
+
var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
|
|
13
|
+
|
|
14
|
+
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
15
|
+
|
|
16
|
+
var _jsxRuntime = require("react/jsx-runtime");
|
|
17
|
+
|
|
18
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
19
|
+
|
|
20
|
+
/**
|
|
21
|
+
* On Web, wraps children in HTML `<legend>` tag.
|
|
22
|
+
* On Native, `<legend>` does not exist, wraps in a width 100% block to follow <legend>'s behaviour in a flex.
|
|
23
|
+
*/
|
|
24
|
+
const Legend = ({
|
|
25
|
+
children
|
|
26
|
+
}) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
|
|
27
|
+
style: staticStyles.stretch,
|
|
28
|
+
children: children
|
|
29
|
+
});
|
|
30
|
+
|
|
31
|
+
Legend.propTypes = {
|
|
32
|
+
children: _propTypes.default.node
|
|
33
|
+
};
|
|
34
|
+
|
|
35
|
+
const staticStyles = _StyleSheet.default.create({
|
|
36
|
+
stretch: {
|
|
37
|
+
width: '100%',
|
|
38
|
+
flexGrow: 1
|
|
39
|
+
}
|
|
40
|
+
});
|
|
41
|
+
|
|
42
|
+
var _default = Legend;
|
|
43
|
+
exports.default = _default;
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = void 0;
|
|
7
|
+
// React Native Web has no built-in `fieldset` or `legend` support.
|
|
8
|
+
// This reset makes them consistent with other RNW views.
|
|
9
|
+
// Can't use RN stylesheets because it's not an RN element (RNW's createElement tooling is unstable).
|
|
10
|
+
// Using CSS `all` doesn't work well as an inline style.
|
|
11
|
+
// https://github.com/necolas/react-native-web/issues/1385
|
|
12
|
+
var _default = {
|
|
13
|
+
margin: 'unset',
|
|
14
|
+
padding: 'unset',
|
|
15
|
+
float: 'unset',
|
|
16
|
+
border: 'unset',
|
|
17
|
+
width: 'unset',
|
|
18
|
+
display: 'flex',
|
|
19
|
+
flexDirection: 'column'
|
|
20
|
+
};
|
|
21
|
+
exports.default = _default;
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = void 0;
|
|
7
|
+
|
|
8
|
+
var _Fieldset = _interopRequireDefault(require("./Fieldset"));
|
|
9
|
+
|
|
10
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
11
|
+
|
|
12
|
+
var _default = _Fieldset.default;
|
|
13
|
+
exports.default = _default;
|
package/lib/FlexGrid/Col/Col.js
CHANGED
|
@@ -1,11 +1,37 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = void 0;
|
|
7
|
+
|
|
8
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
9
|
+
|
|
10
|
+
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
11
|
+
|
|
12
|
+
var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
|
|
13
|
+
|
|
14
|
+
var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
|
|
15
|
+
|
|
16
|
+
var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
|
|
17
|
+
|
|
18
|
+
var _systemConstants = require("@telus-uds/system-constants");
|
|
19
|
+
|
|
20
|
+
var _GutterContext = _interopRequireDefault(require("../providers/GutterContext"));
|
|
21
|
+
|
|
22
|
+
var _ViewportProvider = require("../../ViewportProvider");
|
|
23
|
+
|
|
24
|
+
var _helpers = _interopRequireDefault(require("../helpers"));
|
|
25
|
+
|
|
26
|
+
var _utils = require("../../utils");
|
|
27
|
+
|
|
28
|
+
var _jsxRuntime = require("react/jsx-runtime");
|
|
29
|
+
|
|
30
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
31
|
+
|
|
32
|
+
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
33
|
+
|
|
34
|
+
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
9
35
|
|
|
10
36
|
const Col = ({
|
|
11
37
|
horizontalAlign,
|
|
@@ -22,13 +48,13 @@ const Col = ({
|
|
|
22
48
|
xlOffset,
|
|
23
49
|
...viewProps
|
|
24
50
|
}) => {
|
|
25
|
-
const gutter = useContext(
|
|
26
|
-
const viewPort = useViewport();
|
|
27
|
-
const hiddenLevels =
|
|
51
|
+
const gutter = (0, _react.useContext)(_GutterContext.default);
|
|
52
|
+
const viewPort = (0, _ViewportProvider.useViewport)();
|
|
53
|
+
const hiddenLevels = (0, _helpers.default)([xs, sm, md, lg, xl]);
|
|
28
54
|
|
|
29
55
|
const getHorizontalAlignLevel = () => {
|
|
30
56
|
if (typeof horizontalAlign === 'object') {
|
|
31
|
-
return
|
|
57
|
+
return (0, _helpers.default)([horizontalAlign.xs, horizontalAlign.sm, horizontalAlign.md, horizontalAlign.lg, horizontalAlign.xl]);
|
|
32
58
|
}
|
|
33
59
|
|
|
34
60
|
if (typeof horizontalAlign === 'string') {
|
|
@@ -41,7 +67,7 @@ const Col = ({
|
|
|
41
67
|
const horizontalAlignLevel = getHorizontalAlignLevel();
|
|
42
68
|
|
|
43
69
|
const toPercent = num => {
|
|
44
|
-
return
|
|
70
|
+
return "".concat(num / 12 * 100, "%");
|
|
45
71
|
};
|
|
46
72
|
|
|
47
73
|
const calculateWidth = value => {
|
|
@@ -94,37 +120,37 @@ const Col = ({
|
|
|
94
120
|
paddingRight: gutter ? 16 : 0
|
|
95
121
|
};
|
|
96
122
|
let hidingStyles = {};
|
|
97
|
-
const shown =
|
|
123
|
+
const shown = _Platform.default.OS === 'web' ? 'block' : 'flex';
|
|
98
124
|
|
|
99
|
-
if (viewPort === viewports.xs) {
|
|
125
|
+
if (viewPort === _systemConstants.viewports.xs) {
|
|
100
126
|
hidingStyles = {
|
|
101
127
|
display: hiddenLevels[0] === 0 ? 'none' : shown,
|
|
102
128
|
textAlign: horizontalAlignLevel[0]
|
|
103
129
|
};
|
|
104
130
|
}
|
|
105
131
|
|
|
106
|
-
if (viewPort === viewports.sm) {
|
|
132
|
+
if (viewPort === _systemConstants.viewports.sm) {
|
|
107
133
|
hidingStyles = {
|
|
108
134
|
display: hiddenLevels[1] === 0 ? 'none' : shown,
|
|
109
135
|
textAlign: horizontalAlignLevel[1]
|
|
110
136
|
};
|
|
111
137
|
}
|
|
112
138
|
|
|
113
|
-
if (viewPort === viewports.md) {
|
|
139
|
+
if (viewPort === _systemConstants.viewports.md) {
|
|
114
140
|
hidingStyles = {
|
|
115
141
|
display: hiddenLevels[2] === 0 ? 'none' : shown,
|
|
116
142
|
textAlign: horizontalAlignLevel[2]
|
|
117
143
|
};
|
|
118
144
|
}
|
|
119
145
|
|
|
120
|
-
if (viewPort === viewports.lg) {
|
|
146
|
+
if (viewPort === _systemConstants.viewports.lg) {
|
|
121
147
|
hidingStyles = {
|
|
122
148
|
display: hiddenLevels[3] === 0 ? 'none' : shown,
|
|
123
149
|
textAlign: horizontalAlignLevel[3]
|
|
124
150
|
};
|
|
125
151
|
}
|
|
126
152
|
|
|
127
|
-
if (viewPort === viewports.xl) {
|
|
153
|
+
if (viewPort === _systemConstants.viewports.xl) {
|
|
128
154
|
hidingStyles = {
|
|
129
155
|
display: hiddenLevels[4] === 0 ? 'none' : shown,
|
|
130
156
|
textAlign: horizontalAlignLevel[4]
|
|
@@ -133,8 +159,8 @@ const Col = ({
|
|
|
133
159
|
|
|
134
160
|
const sizesArray = [xs, sm, md, lg, xl];
|
|
135
161
|
const offSetsArray = [xsOffset, smOffset, mdOffset, lgOffset, xlOffset];
|
|
136
|
-
const sizesWithIheritance =
|
|
137
|
-
const offsetsWithIheritance =
|
|
162
|
+
const sizesWithIheritance = (0, _helpers.default)(sizesArray);
|
|
163
|
+
const offsetsWithIheritance = (0, _helpers.default)(offSetsArray);
|
|
138
164
|
const sizes = {
|
|
139
165
|
xs: sizesWithIheritance[0],
|
|
140
166
|
sm: sizesWithIheritance[1],
|
|
@@ -149,13 +175,14 @@ const Col = ({
|
|
|
149
175
|
lg: offsetsWithIheritance[3],
|
|
150
176
|
xl: offsetsWithIheritance[4]
|
|
151
177
|
};
|
|
152
|
-
return /*#__PURE__*/
|
|
178
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, { ...viewProps,
|
|
153
179
|
style: [styles.col, gutterPadding, offsetStyles(offsets), sizeStyles(sizes), { ...hidingStyles
|
|
154
|
-
}]
|
|
155
|
-
|
|
180
|
+
}],
|
|
181
|
+
children: children
|
|
182
|
+
});
|
|
156
183
|
};
|
|
157
184
|
|
|
158
|
-
const styles =
|
|
185
|
+
const styles = _StyleSheet.default.create({
|
|
159
186
|
col: {
|
|
160
187
|
flexGrow: 1,
|
|
161
188
|
flexShrink: 0,
|
|
@@ -169,6 +196,7 @@ const styles = StyleSheet.create({
|
|
|
169
196
|
* styling issues.
|
|
170
197
|
*/
|
|
171
198
|
|
|
199
|
+
|
|
172
200
|
Col.propTypes = {
|
|
173
201
|
/**
|
|
174
202
|
* Specify number of columns within the 'xs' breakpoint range. `0` hides the column.
|
|
@@ -177,7 +205,7 @@ Col.propTypes = {
|
|
|
177
205
|
* `false` disables the prop
|
|
178
206
|
*
|
|
179
207
|
*/
|
|
180
|
-
xs:
|
|
208
|
+
xs: _propTypes.default.oneOf([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, true, false]),
|
|
181
209
|
|
|
182
210
|
/**
|
|
183
211
|
* Specify number of columns within the 'sm' breakpoint range. `0` hides the column.
|
|
@@ -186,7 +214,7 @@ Col.propTypes = {
|
|
|
186
214
|
* `false` disables the prop
|
|
187
215
|
*
|
|
188
216
|
*/
|
|
189
|
-
sm:
|
|
217
|
+
sm: _propTypes.default.oneOf([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, true, false]),
|
|
190
218
|
|
|
191
219
|
/**
|
|
192
220
|
* Specify number of columns within the 'md' breakpoint range. `0` hides the column.
|
|
@@ -195,7 +223,7 @@ Col.propTypes = {
|
|
|
195
223
|
* `false` disables the prop
|
|
196
224
|
*
|
|
197
225
|
*/
|
|
198
|
-
md:
|
|
226
|
+
md: _propTypes.default.oneOf([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, true, false]),
|
|
199
227
|
|
|
200
228
|
/**
|
|
201
229
|
* Specify number of columns within the 'lg' breakpoint range. `0` hides the column.
|
|
@@ -204,7 +232,7 @@ Col.propTypes = {
|
|
|
204
232
|
* `false` disables the prop
|
|
205
233
|
*
|
|
206
234
|
*/
|
|
207
|
-
lg:
|
|
235
|
+
lg: _propTypes.default.oneOf([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, true, false]),
|
|
208
236
|
|
|
209
237
|
/**
|
|
210
238
|
* Specify number of columns after the 'xl' breakpoint. `0` hides the column.
|
|
@@ -213,41 +241,41 @@ Col.propTypes = {
|
|
|
213
241
|
* `false` disables the prop
|
|
214
242
|
*
|
|
215
243
|
*/
|
|
216
|
-
xl:
|
|
244
|
+
xl: _propTypes.default.oneOf([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, true, false]),
|
|
217
245
|
|
|
218
246
|
/**
|
|
219
247
|
* Offset the specified number of columns within the 'xs' breakpoint range. `0` hides the column.
|
|
220
248
|
*
|
|
221
249
|
*/
|
|
222
|
-
xsOffset:
|
|
250
|
+
xsOffset: _propTypes.default.oneOf([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]),
|
|
223
251
|
|
|
224
252
|
/**
|
|
225
253
|
* Offset the specified number of columns within the 'sm' breakpoint range.
|
|
226
254
|
*
|
|
227
255
|
*/
|
|
228
|
-
smOffset:
|
|
256
|
+
smOffset: _propTypes.default.oneOf([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]),
|
|
229
257
|
|
|
230
258
|
/**
|
|
231
259
|
* Offset the specified number of columns within the 'md' breakpoint range.
|
|
232
260
|
*
|
|
233
261
|
*/
|
|
234
|
-
mdOffset:
|
|
262
|
+
mdOffset: _propTypes.default.oneOf([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]),
|
|
235
263
|
|
|
236
264
|
/**
|
|
237
265
|
* Offset the specified number of columns within the 'lg' breakpoint range.
|
|
238
266
|
*
|
|
239
267
|
*/
|
|
240
|
-
lgOffset:
|
|
268
|
+
lgOffset: _propTypes.default.oneOf([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]),
|
|
241
269
|
|
|
242
270
|
/**
|
|
243
271
|
* Offset the specified number of columns within the 'xl' breakpoint range.
|
|
244
272
|
*/
|
|
245
|
-
xlOffset:
|
|
273
|
+
xlOffset: _propTypes.default.oneOf([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]),
|
|
246
274
|
|
|
247
275
|
/**
|
|
248
276
|
* The columns of the Grid. Will typically be `FlexGrid.Col` components.
|
|
249
277
|
*/
|
|
250
|
-
children:
|
|
278
|
+
children: _propTypes.default.node.isRequired,
|
|
251
279
|
|
|
252
280
|
/**
|
|
253
281
|
*
|
|
@@ -255,6 +283,7 @@ Col.propTypes = {
|
|
|
255
283
|
*
|
|
256
284
|
* Accepts a `PropType.string` following the [responsive prop](#/Layout?id=responsive) structure.
|
|
257
285
|
*/
|
|
258
|
-
horizontalAlign: responsiveProps.getTypeOptionallyByViewport(
|
|
286
|
+
horizontalAlign: _utils.responsiveProps.getTypeOptionallyByViewport(_propTypes.default.oneOf(['left', 'center', 'right']))
|
|
259
287
|
};
|
|
260
|
-
|
|
288
|
+
var _default = Col;
|
|
289
|
+
exports.default = _default;
|
|
@@ -1,2 +1,13 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = void 0;
|
|
7
|
+
|
|
8
|
+
var _Col = _interopRequireDefault(require("./Col"));
|
|
9
|
+
|
|
10
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
11
|
+
|
|
12
|
+
var _default = _Col.default;
|
|
13
|
+
exports.default = _default;
|
package/lib/FlexGrid/FlexGrid.js
CHANGED
|
@@ -1,16 +1,37 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = void 0;
|
|
7
|
+
|
|
8
|
+
var _react = _interopRequireDefault(require("react"));
|
|
9
|
+
|
|
10
|
+
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
11
|
+
|
|
12
|
+
var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
|
|
13
|
+
|
|
14
|
+
var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
|
|
15
|
+
|
|
16
|
+
var _systemConstants = require("@telus-uds/system-constants");
|
|
17
|
+
|
|
18
|
+
var _Row = _interopRequireDefault(require("./Row"));
|
|
19
|
+
|
|
20
|
+
var _Col = _interopRequireDefault(require("./Col"));
|
|
21
|
+
|
|
22
|
+
var _ViewportProvider = require("../ViewportProvider");
|
|
23
|
+
|
|
24
|
+
var _GutterContext = _interopRequireDefault(require("./providers/GutterContext"));
|
|
25
|
+
|
|
26
|
+
var _helpers = _interopRequireDefault(require("./helpers"));
|
|
27
|
+
|
|
28
|
+
var _jsxRuntime = require("react/jsx-runtime");
|
|
29
|
+
|
|
30
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
31
|
+
|
|
10
32
|
/**
|
|
11
33
|
* A mobile-first flexbox grid.
|
|
12
34
|
*/
|
|
13
|
-
|
|
14
35
|
const FlexGrid = ({
|
|
15
36
|
limitWidth = true,
|
|
16
37
|
gutter = true,
|
|
@@ -23,103 +44,107 @@ const FlexGrid = ({
|
|
|
23
44
|
children,
|
|
24
45
|
...rest
|
|
25
46
|
}) => {
|
|
26
|
-
const viewPort = useViewport();
|
|
27
|
-
const reverseLevel =
|
|
47
|
+
const viewPort = (0, _ViewportProvider.useViewport)();
|
|
48
|
+
const reverseLevel = (0, _helpers.default)([xsReverse, smReverse, mdReverse, lgReverse, xlReverse]);
|
|
28
49
|
const marginVertical = 0;
|
|
29
50
|
const marginHorizontal = outsideGutter ? 'auto' : -16;
|
|
30
51
|
const width = outsideGutter ? '100%' : 'auto';
|
|
31
52
|
let flexDirection;
|
|
32
53
|
let maxWidth;
|
|
33
54
|
|
|
34
|
-
if (viewPort === viewports.xs) {
|
|
55
|
+
if (viewPort === _systemConstants.viewports.xs) {
|
|
35
56
|
// no maxWidth for xs
|
|
36
57
|
flexDirection = reverseLevel[0] ? 'column-reverse' : 'column';
|
|
37
58
|
}
|
|
38
59
|
|
|
39
|
-
if (viewPort === viewports.sm) {
|
|
40
|
-
maxWidth = limitWidth && viewports.map.get(viewports.sm);
|
|
60
|
+
if (viewPort === _systemConstants.viewports.sm) {
|
|
61
|
+
maxWidth = limitWidth && _systemConstants.viewports.map.get(_systemConstants.viewports.sm);
|
|
41
62
|
flexDirection = reverseLevel[1] ? 'column-reverse' : 'column';
|
|
42
63
|
}
|
|
43
64
|
|
|
44
|
-
if (viewPort === viewports.md) {
|
|
45
|
-
maxWidth = limitWidth && viewports.map.get(viewports.md);
|
|
65
|
+
if (viewPort === _systemConstants.viewports.md) {
|
|
66
|
+
maxWidth = limitWidth && _systemConstants.viewports.map.get(_systemConstants.viewports.md);
|
|
46
67
|
flexDirection = reverseLevel[2] ? 'column-reverse' : 'column';
|
|
47
68
|
}
|
|
48
69
|
|
|
49
|
-
if (viewPort === viewports.lg) {
|
|
50
|
-
maxWidth = limitWidth && viewports.map.get(viewports.lg);
|
|
70
|
+
if (viewPort === _systemConstants.viewports.lg) {
|
|
71
|
+
maxWidth = limitWidth && _systemConstants.viewports.map.get(_systemConstants.viewports.lg);
|
|
51
72
|
flexDirection = reverseLevel[3] ? 'column-reverse' : 'column';
|
|
52
73
|
}
|
|
53
74
|
|
|
54
|
-
if (viewPort === viewports.xl) {
|
|
55
|
-
maxWidth = limitWidth && viewports.map.get(viewports.xl);
|
|
75
|
+
if (viewPort === _systemConstants.viewports.xl) {
|
|
76
|
+
maxWidth = limitWidth && _systemConstants.viewports.map.get(_systemConstants.viewports.xl);
|
|
56
77
|
flexDirection = reverseLevel[4] ? 'column-reverse' : 'column';
|
|
57
78
|
}
|
|
58
79
|
|
|
59
|
-
return /*#__PURE__*/
|
|
60
|
-
value: gutter
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
80
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_GutterContext.default.Provider, {
|
|
81
|
+
value: gutter,
|
|
82
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, { ...rest,
|
|
83
|
+
style: [styles.grid, {
|
|
84
|
+
marginHorizontal,
|
|
85
|
+
marginVertical,
|
|
86
|
+
width,
|
|
87
|
+
flexDirection,
|
|
88
|
+
maxWidth
|
|
89
|
+
}],
|
|
90
|
+
children: children
|
|
91
|
+
})
|
|
92
|
+
});
|
|
70
93
|
};
|
|
71
94
|
|
|
72
|
-
const styles =
|
|
95
|
+
const styles = _StyleSheet.default.create({
|
|
73
96
|
grid: {
|
|
74
97
|
flexWrap: 'wrap'
|
|
75
98
|
}
|
|
76
99
|
});
|
|
100
|
+
|
|
77
101
|
FlexGrid.propTypes = {
|
|
78
102
|
/**
|
|
79
103
|
* Whether or not to give the grid a fixed width. This also centres the grid horizontally.
|
|
80
104
|
*/
|
|
81
|
-
limitWidth:
|
|
105
|
+
limitWidth: _propTypes.default.bool,
|
|
82
106
|
|
|
83
107
|
/**
|
|
84
108
|
* Whether or not to include gutters in between columns.
|
|
85
109
|
*/
|
|
86
|
-
gutter:
|
|
110
|
+
gutter: _propTypes.default.bool,
|
|
87
111
|
|
|
88
112
|
/**
|
|
89
113
|
* Whether or not to include gutter at the ends to the left and right of the FlexGrid
|
|
90
114
|
*/
|
|
91
|
-
outsideGutter:
|
|
115
|
+
outsideGutter: _propTypes.default.bool,
|
|
92
116
|
|
|
93
117
|
/**
|
|
94
118
|
* Choose if the item order should be reversed from the 'xs' breakpoint. When you pass in false, the order will be normal from the xs breakpoint. By default, it inherits the behaviour set by the preceding prop.
|
|
95
119
|
*/
|
|
96
|
-
xsReverse:
|
|
120
|
+
xsReverse: _propTypes.default.bool,
|
|
97
121
|
|
|
98
122
|
/**
|
|
99
123
|
* Choose if the item order should be reversed from the 'sm' breakpoint. When you pass in false, the order will be normal from the sm breakpoint. By default, it inherits the behaviour set by the preceding prop.
|
|
100
124
|
*/
|
|
101
|
-
smReverse:
|
|
125
|
+
smReverse: _propTypes.default.bool,
|
|
102
126
|
|
|
103
127
|
/**
|
|
104
128
|
* Choose if the item order should be reversed from the 'md' breakpoint. When you pass in false, the order will be normal from the md breakpoint. By default, it inherits the behaviour set by the preceding prop.
|
|
105
129
|
*/
|
|
106
|
-
mdReverse:
|
|
130
|
+
mdReverse: _propTypes.default.bool,
|
|
107
131
|
|
|
108
132
|
/**
|
|
109
133
|
* Choose if the item order should be reversed from the 'lg' breakpoint. When you pass in false, the order will be normal from the lg breakpoint. By default, it inherits the behaviour set by the preceding prop.
|
|
110
134
|
*/
|
|
111
|
-
lgReverse:
|
|
135
|
+
lgReverse: _propTypes.default.bool,
|
|
112
136
|
|
|
113
137
|
/**
|
|
114
138
|
* Choose if the item order should be reversed from the 'xl' breakpoint. When you pass in false, the order will be normal from the xl breakpoint. By default, it inherits the behaviour set by the preceding prop.
|
|
115
139
|
*/
|
|
116
|
-
xlReverse:
|
|
140
|
+
xlReverse: _propTypes.default.bool,
|
|
117
141
|
|
|
118
142
|
/**
|
|
119
143
|
* The rows and columns of the Grid. Will typically be `FlexGrid.Row` and `FlexGrid.Col` components.
|
|
120
144
|
*/
|
|
121
|
-
children:
|
|
145
|
+
children: _propTypes.default.node.isRequired
|
|
122
146
|
};
|
|
123
|
-
FlexGrid.Row =
|
|
124
|
-
FlexGrid.Col =
|
|
125
|
-
|
|
147
|
+
FlexGrid.Row = _Row.default;
|
|
148
|
+
FlexGrid.Col = _Col.default;
|
|
149
|
+
var _default = FlexGrid;
|
|
150
|
+
exports.default = _default;
|