@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.
Files changed (429) hide show
  1. package/.ultra.cache.json +1 -0
  2. package/CHANGELOG.md +65 -0
  3. package/__fixtures__/Accessible.js +33 -0
  4. package/__fixtures__/Accessible.native.js +32 -0
  5. package/__fixtures__/testTheme.js +871 -52
  6. package/__tests__/ActivityIndicator/ActivityIndicator.test.jsx +1 -1
  7. package/__tests__/Button/ButtonBase.test.jsx +3 -32
  8. package/__tests__/Button/ButtonGroup.test.jsx +2 -2
  9. package/__tests__/Checkbox/Checkbox.test.jsx +94 -0
  10. package/__tests__/Checkbox/CheckboxGroup.test.jsx +247 -0
  11. package/__tests__/Icon/Icon.test.jsx +3 -3
  12. package/__tests__/IconButton/IconButton.test.jsx +52 -0
  13. package/__tests__/InputSupports/InputSupports.test.jsx +50 -0
  14. package/__tests__/List/List.test.jsx +60 -0
  15. package/__tests__/Modal/Modal.test.jsx +47 -0
  16. package/__tests__/Notification/Notification.test.jsx +20 -0
  17. package/__tests__/Pagination/Pagination.test.jsx +2 -2
  18. package/__tests__/Progress/Progress.test.jsx +79 -0
  19. package/__tests__/Radio/Radio.test.jsx +87 -0
  20. package/__tests__/Radio/RadioGroup.test.jsx +221 -0
  21. package/__tests__/RadioCard/RadioCard.test.jsx +87 -0
  22. package/__tests__/RadioCard/RadioCardGroup.test.jsx +247 -0
  23. package/__tests__/Search/Search.test.jsx +72 -0
  24. package/__tests__/Select/Select.test.jsx +93 -0
  25. package/__tests__/Skeleton/Skeleton.test.jsx +61 -0
  26. package/__tests__/StackView/StackView.test.jsx +0 -26
  27. package/__tests__/StepTracker/StepTracker.test.jsx +94 -0
  28. package/__tests__/Tabs/Tabs.test.jsx +200 -0
  29. package/__tests__/Tags/Tags.test.jsx +328 -0
  30. package/__tests__/TextInput/TextArea.test.jsx +34 -0
  31. package/__tests__/TextInput/{TextInput.test.jsx → TextInputBase.test.jsx} +20 -46
  32. package/__tests__/Tooltip/Tooltip.test.jsx +65 -0
  33. package/__tests__/Tooltip/getTooltipPosition.test.js +79 -0
  34. package/__tests__/utils/input.test.js +58 -0
  35. package/__tests__/utils/useCopy.test.js +42 -0
  36. package/__tests__/utils/useResponsiveProp.test.jsx +202 -0
  37. package/__tests__/utils/{spacing.test.jsx → useSpacingScale.test.jsx} +1 -1
  38. package/babel.config.js +20 -0
  39. package/jest.config.js +13 -4
  40. package/lib/A11yInfoProvider/index.js +54 -26
  41. package/lib/A11yText/index.js +37 -14
  42. package/lib/ActivityIndicator/Spinner.js +78 -0
  43. package/lib/ActivityIndicator/Spinner.native.js +121 -87
  44. package/lib/ActivityIndicator/index.js +28 -12
  45. package/lib/ActivityIndicator/shared.js +27 -12
  46. package/lib/BaseProvider/index.js +34 -11
  47. package/lib/Box/Box.js +54 -31
  48. package/lib/Box/index.js +13 -2
  49. package/lib/Button/Button.js +38 -10
  50. package/lib/Button/ButtonBase.js +115 -94
  51. package/lib/Button/ButtonGroup.js +94 -86
  52. package/lib/Button/ButtonLink.js +41 -13
  53. package/lib/Button/index.js +31 -4
  54. package/lib/Button/propTypes.js +32 -9
  55. package/lib/Card/Card.js +36 -41
  56. package/lib/Card/CardBase.js +78 -0
  57. package/lib/Card/PressableCardBase.js +137 -0
  58. package/lib/Card/index.js +40 -2
  59. package/lib/Checkbox/Checkbox.js +344 -0
  60. package/lib/Checkbox/CheckboxGroup.js +231 -0
  61. package/lib/Checkbox/CheckboxInput.js +74 -0
  62. package/lib/Checkbox/CheckboxInput.native.js +14 -0
  63. package/lib/Checkbox/index.js +21 -0
  64. package/lib/Divider/Divider.js +50 -24
  65. package/lib/Divider/index.js +13 -2
  66. package/lib/ExpandCollapse/Accordion.js +20 -7
  67. package/lib/ExpandCollapse/Control.js +50 -27
  68. package/lib/ExpandCollapse/ExpandCollapse.js +41 -24
  69. package/lib/ExpandCollapse/Panel.js +75 -37
  70. package/lib/ExpandCollapse/index.js +25 -7
  71. package/lib/Feedback/Feedback.js +85 -34
  72. package/lib/Feedback/index.js +13 -2
  73. package/lib/Fieldset/Fieldset.js +160 -0
  74. package/lib/Fieldset/FieldsetContainer.js +41 -0
  75. package/lib/Fieldset/FieldsetContainer.native.js +33 -0
  76. package/lib/Fieldset/Legend.js +33 -0
  77. package/lib/Fieldset/Legend.native.js +43 -0
  78. package/lib/Fieldset/cssReset.js +21 -0
  79. package/lib/Fieldset/index.js +13 -0
  80. package/lib/FlexGrid/Col/Col.js +67 -38
  81. package/lib/FlexGrid/Col/index.js +13 -2
  82. package/lib/FlexGrid/FlexGrid.js +70 -45
  83. package/lib/FlexGrid/Row/Row.js +48 -27
  84. package/lib/FlexGrid/Row/index.js +13 -2
  85. package/lib/FlexGrid/helpers/index.js +9 -1
  86. package/lib/FlexGrid/index.js +13 -2
  87. package/lib/FlexGrid/providers/GutterContext.js +15 -3
  88. package/lib/Icon/Icon.js +52 -47
  89. package/lib/Icon/IconText.js +100 -0
  90. package/lib/Icon/index.js +31 -3
  91. package/lib/IconButton/IconButton.js +135 -0
  92. package/lib/IconButton/index.js +13 -0
  93. package/lib/InputLabel/InputLabel.js +70 -34
  94. package/lib/InputLabel/LabelContent.js +31 -0
  95. package/lib/InputLabel/LabelContent.native.js +9 -1
  96. package/lib/InputLabel/index.js +13 -2
  97. package/lib/InputSupports/InputSupports.js +104 -0
  98. package/lib/InputSupports/index.js +13 -0
  99. package/lib/InputSupports/propTypes.js +66 -0
  100. package/lib/InputSupports/useInputSupports.js +41 -0
  101. package/lib/Link/ChevronLink.js +57 -15
  102. package/lib/Link/InlinePressable.js +50 -0
  103. package/lib/Link/InlinePressable.native.js +101 -0
  104. package/lib/Link/Link.js +30 -13
  105. package/lib/Link/LinkBase.js +114 -145
  106. package/lib/Link/TextButton.js +47 -17
  107. package/lib/Link/index.js +39 -4
  108. package/lib/List/List.js +80 -0
  109. package/lib/List/ListItem.js +237 -0
  110. package/lib/List/index.js +13 -0
  111. package/lib/Modal/Modal.js +226 -0
  112. package/lib/Modal/dictionary.js +16 -0
  113. package/lib/Modal/index.js +13 -0
  114. package/lib/Notification/Notification.js +200 -0
  115. package/lib/Notification/dictionary.js +15 -0
  116. package/lib/Notification/index.js +13 -0
  117. package/lib/Pagination/PageButton.js +45 -46
  118. package/lib/Pagination/Pagination.js +70 -40
  119. package/lib/Pagination/SideButton.js +74 -58
  120. package/lib/Pagination/dictionary.js +9 -2
  121. package/lib/Pagination/index.js +13 -2
  122. package/lib/Pagination/usePagination.js +12 -2
  123. package/lib/Progress/Progress.js +99 -0
  124. package/lib/Progress/ProgressBar.js +146 -0
  125. package/lib/Progress/ProgressBarBackground.js +57 -0
  126. package/lib/Progress/index.js +16 -0
  127. package/lib/Radio/Radio.js +292 -0
  128. package/lib/Radio/RadioButton.js +141 -0
  129. package/lib/Radio/RadioGroup.js +233 -0
  130. package/lib/Radio/RadioInput.js +76 -0
  131. package/lib/Radio/RadioInput.native.js +14 -0
  132. package/lib/Radio/index.js +21 -0
  133. package/lib/RadioCard/RadioCard.js +240 -0
  134. package/lib/RadioCard/RadioCardGroup.js +251 -0
  135. package/lib/RadioCard/index.js +21 -0
  136. package/lib/Search/Search.js +243 -0
  137. package/lib/Search/dictionary.js +19 -0
  138. package/lib/Search/index.js +13 -0
  139. package/lib/Select/Group.js +33 -0
  140. package/lib/Select/Group.native.js +25 -0
  141. package/lib/Select/Item.js +29 -0
  142. package/lib/Select/Item.native.js +19 -0
  143. package/lib/Select/Picker.js +79 -0
  144. package/lib/Select/Picker.native.js +115 -0
  145. package/lib/Select/Select.js +300 -0
  146. package/lib/Select/index.js +19 -0
  147. package/lib/SideNav/Item.js +54 -33
  148. package/lib/SideNav/ItemContent.js +41 -15
  149. package/lib/SideNav/ItemsGroup.js +46 -27
  150. package/lib/SideNav/SideNav.js +92 -69
  151. package/lib/SideNav/index.js +15 -1
  152. package/lib/Skeleton/Skeleton.js +137 -0
  153. package/lib/Skeleton/index.js +13 -0
  154. package/lib/Skeleton/skeleton.constant.js +12 -0
  155. package/lib/Skeleton/skeletonWebAnimation.js +27 -0
  156. package/lib/Skeleton/useSkeletonNativeAnimation.js +37 -0
  157. package/lib/Spacer/Spacer.js +31 -12
  158. package/lib/Spacer/index.js +13 -2
  159. package/lib/StackView/StackView.js +57 -33
  160. package/lib/StackView/StackWrap.js +33 -10
  161. package/lib/StackView/StackWrap.native.js +13 -2
  162. package/lib/StackView/StackWrapBox.js +50 -23
  163. package/lib/StackView/StackWrapGap.js +45 -19
  164. package/lib/StackView/common.js +19 -4
  165. package/lib/StackView/getStackedContent.js +49 -19
  166. package/lib/StackView/index.js +29 -5
  167. package/lib/StepTracker/Step.js +245 -0
  168. package/lib/StepTracker/StepTracker.js +197 -0
  169. package/lib/StepTracker/dictionary.js +17 -0
  170. package/lib/StepTracker/index.js +13 -0
  171. package/lib/Tabs/HorizontalScroll.js +199 -0
  172. package/lib/Tabs/ScrollViewEnd.js +66 -0
  173. package/lib/Tabs/ScrollViewEnd.native.js +41 -0
  174. package/lib/Tabs/Tabs.js +117 -0
  175. package/lib/Tabs/TabsItem.js +234 -0
  176. package/lib/Tabs/TabsScrollButton.js +121 -0
  177. package/lib/Tabs/dictionary.js +18 -0
  178. package/lib/Tabs/index.js +13 -0
  179. package/lib/Tabs/itemPositions.js +128 -0
  180. package/lib/Tags/Tags.js +250 -0
  181. package/lib/Tags/index.js +13 -0
  182. package/lib/TextInput/TextArea.js +109 -0
  183. package/lib/TextInput/TextInput.js +41 -303
  184. package/lib/TextInput/TextInputBase.js +252 -0
  185. package/lib/TextInput/index.js +23 -2
  186. package/lib/TextInput/propTypes.js +42 -0
  187. package/lib/ThemeProvider/ThemeProvider.js +38 -14
  188. package/lib/ThemeProvider/index.js +61 -6
  189. package/lib/ThemeProvider/useSetTheme.js +14 -5
  190. package/lib/ThemeProvider/useTheme.js +13 -4
  191. package/lib/ThemeProvider/useThemeTokens.js +86 -19
  192. package/lib/ThemeProvider/utils/index.js +31 -2
  193. package/lib/ThemeProvider/utils/styles.js +52 -16
  194. package/lib/ThemeProvider/utils/theme-tokens.js +94 -16
  195. package/lib/ToggleSwitch/ToggleSwitch.js +76 -52
  196. package/lib/ToggleSwitch/index.js +13 -2
  197. package/lib/Tooltip/Backdrop.js +56 -0
  198. package/lib/Tooltip/Backdrop.native.js +59 -0
  199. package/lib/Tooltip/Tooltip.js +357 -0
  200. package/lib/Tooltip/dictionary.js +15 -0
  201. package/lib/Tooltip/getTooltipPosition.js +172 -0
  202. package/lib/Tooltip/index.js +13 -0
  203. package/lib/TooltipButton/TooltipButton.js +83 -0
  204. package/lib/TooltipButton/index.js +13 -0
  205. package/lib/Typography/Typography.js +58 -43
  206. package/lib/Typography/index.js +13 -2
  207. package/lib/ViewportProvider/ViewportProvider.js +46 -0
  208. package/lib/ViewportProvider/index.js +22 -38
  209. package/lib/ViewportProvider/useViewport.js +15 -0
  210. package/lib/ViewportProvider/useViewportListener.js +57 -0
  211. package/lib/index.js +518 -24
  212. package/lib/utils/a11y/index.js +18 -0
  213. package/lib/utils/a11y/textSize.js +49 -0
  214. package/lib/utils/animation/index.js +15 -2
  215. package/lib/utils/animation/useVerticalExpandAnimation.js +28 -11
  216. package/lib/utils/children.js +87 -0
  217. package/lib/utils/index.js +163 -4
  218. package/lib/utils/info/index.js +19 -0
  219. package/lib/utils/info/platform/index.js +23 -0
  220. package/lib/utils/info/platform/platform.android.js +8 -0
  221. package/lib/utils/info/platform/platform.ios.js +8 -0
  222. package/lib/utils/info/platform/platform.js +8 -0
  223. package/lib/utils/info/platform/platform.native.js +11 -0
  224. package/lib/utils/info/versions.js +16 -0
  225. package/lib/utils/input.js +51 -33
  226. package/lib/utils/pressability.js +120 -0
  227. package/lib/utils/propTypes.js +269 -116
  228. package/lib/utils/useCopy.js +51 -0
  229. package/lib/utils/useHash.js +48 -0
  230. package/lib/utils/useHash.native.js +15 -0
  231. package/lib/utils/useResponsiveProp.js +59 -0
  232. package/lib/utils/{spacing/useSpacingScale.js → useSpacingScale.js} +45 -12
  233. package/lib/utils/useUniqueId.js +13 -4
  234. package/package.json +12 -9
  235. package/release-context.json +4 -4
  236. package/src/ActivityIndicator/{Spinner.web.jsx → Spinner.jsx} +0 -0
  237. package/src/Box/Box.jsx +11 -4
  238. package/src/Button/Button.jsx +9 -5
  239. package/src/Button/ButtonBase.jsx +69 -69
  240. package/src/Button/ButtonGroup.jsx +11 -24
  241. package/src/Button/ButtonLink.jsx +14 -4
  242. package/src/Button/propTypes.js +12 -2
  243. package/src/Card/Card.jsx +4 -30
  244. package/src/Card/CardBase.jsx +57 -0
  245. package/src/Card/PressableCardBase.jsx +112 -0
  246. package/src/Card/index.js +3 -0
  247. package/src/Checkbox/Checkbox.jsx +274 -0
  248. package/src/Checkbox/CheckboxGroup.jsx +196 -0
  249. package/src/Checkbox/CheckboxInput.jsx +55 -0
  250. package/src/Checkbox/CheckboxInput.native.jsx +6 -0
  251. package/src/Checkbox/index.js +5 -0
  252. package/src/ExpandCollapse/Control.jsx +1 -1
  253. package/src/Feedback/Feedback.jsx +31 -22
  254. package/src/Fieldset/Fieldset.jsx +129 -0
  255. package/src/Fieldset/FieldsetContainer.jsx +22 -0
  256. package/src/Fieldset/FieldsetContainer.native.jsx +16 -0
  257. package/src/Fieldset/Legend.jsx +16 -0
  258. package/src/Fieldset/Legend.native.jsx +22 -0
  259. package/src/Fieldset/cssReset.js +14 -0
  260. package/src/Fieldset/index.js +3 -0
  261. package/src/Icon/Icon.jsx +21 -26
  262. package/src/Icon/IconText.jsx +63 -0
  263. package/src/Icon/index.js +3 -2
  264. package/src/IconButton/IconButton.jsx +107 -0
  265. package/src/IconButton/index.js +3 -0
  266. package/src/InputLabel/InputLabel.jsx +11 -4
  267. package/src/InputLabel/{LabelContent.web.jsx → LabelContent.jsx} +0 -0
  268. package/src/InputSupports/InputSupports.jsx +75 -0
  269. package/src/InputSupports/index.js +3 -0
  270. package/src/InputSupports/propTypes.js +44 -0
  271. package/src/InputSupports/useInputSupports.js +30 -0
  272. package/src/Link/ChevronLink.jsx +28 -7
  273. package/src/Link/InlinePressable.jsx +37 -0
  274. package/src/Link/InlinePressable.native.jsx +73 -0
  275. package/src/Link/Link.jsx +17 -13
  276. package/src/Link/LinkBase.jsx +67 -148
  277. package/src/Link/TextButton.jsx +25 -11
  278. package/src/Link/index.js +2 -1
  279. package/src/List/List.jsx +47 -0
  280. package/src/List/ListItem.jsx +187 -0
  281. package/src/List/index.js +3 -0
  282. package/src/Modal/Modal.jsx +185 -0
  283. package/src/Modal/dictionary.js +9 -0
  284. package/src/Modal/index.js +3 -0
  285. package/src/Notification/Notification.jsx +149 -0
  286. package/src/Notification/dictionary.js +8 -0
  287. package/src/Notification/index.js +3 -0
  288. package/src/Pagination/PageButton.jsx +3 -17
  289. package/src/Pagination/SideButton.jsx +27 -38
  290. package/src/Progress/Progress.jsx +77 -0
  291. package/src/Progress/ProgressBar.jsx +110 -0
  292. package/src/Progress/ProgressBarBackground.jsx +34 -0
  293. package/src/Progress/index.js +6 -0
  294. package/src/Radio/Radio.jsx +233 -0
  295. package/src/Radio/RadioButton.jsx +131 -0
  296. package/src/Radio/RadioGroup.jsx +198 -0
  297. package/src/Radio/RadioInput.jsx +57 -0
  298. package/src/Radio/RadioInput.native.jsx +6 -0
  299. package/src/Radio/index.js +5 -0
  300. package/src/RadioCard/RadioCard.jsx +191 -0
  301. package/src/RadioCard/RadioCardGroup.jsx +211 -0
  302. package/src/RadioCard/index.js +5 -0
  303. package/src/Search/Search.jsx +204 -0
  304. package/src/Search/dictionary.js +12 -0
  305. package/src/Search/index.js +3 -0
  306. package/src/Select/Group.jsx +15 -0
  307. package/src/Select/Group.native.jsx +14 -0
  308. package/src/Select/Item.jsx +11 -0
  309. package/src/Select/Item.native.jsx +10 -0
  310. package/src/Select/Picker.jsx +67 -0
  311. package/src/Select/Picker.native.jsx +95 -0
  312. package/src/Select/Select.jsx +255 -0
  313. package/src/Select/index.js +8 -0
  314. package/src/SideNav/Item.jsx +2 -2
  315. package/src/Skeleton/Skeleton.jsx +98 -0
  316. package/src/Skeleton/index.js +3 -0
  317. package/src/Skeleton/skeleton.constant.js +3 -0
  318. package/src/Skeleton/skeletonWebAnimation.js +13 -0
  319. package/src/Skeleton/useSkeletonNativeAnimation.js +27 -0
  320. package/src/StackView/StackView.jsx +25 -17
  321. package/src/StackView/StackWrap.jsx +9 -1
  322. package/src/StackView/StackWrapBox.jsx +19 -7
  323. package/src/StackView/StackWrapGap.jsx +15 -5
  324. package/src/StackView/getStackedContent.jsx +8 -2
  325. package/src/StepTracker/Step.jsx +202 -0
  326. package/src/StepTracker/StepTracker.jsx +163 -0
  327. package/src/StepTracker/dictionary.js +10 -0
  328. package/src/StepTracker/index.js +3 -0
  329. package/src/Tabs/HorizontalScroll.jsx +165 -0
  330. package/src/Tabs/ScrollViewEnd.jsx +53 -0
  331. package/src/Tabs/ScrollViewEnd.native.jsx +24 -0
  332. package/src/Tabs/Tabs.jsx +89 -0
  333. package/src/Tabs/TabsItem.jsx +204 -0
  334. package/src/Tabs/TabsScrollButton.jsx +100 -0
  335. package/src/Tabs/dictionary.js +11 -0
  336. package/src/Tabs/index.js +3 -0
  337. package/src/Tabs/itemPositions.js +101 -0
  338. package/src/Tags/Tags.jsx +207 -0
  339. package/src/Tags/index.js +3 -0
  340. package/src/TextInput/TextArea.jsx +78 -0
  341. package/src/TextInput/TextInput.jsx +17 -290
  342. package/src/TextInput/TextInputBase.jsx +210 -0
  343. package/src/TextInput/index.js +2 -1
  344. package/src/TextInput/propTypes.js +29 -0
  345. package/src/ThemeProvider/useThemeTokens.js +56 -5
  346. package/src/ThemeProvider/utils/styles.js +18 -5
  347. package/src/ThemeProvider/utils/theme-tokens.js +46 -5
  348. package/src/ToggleSwitch/ToggleSwitch.jsx +3 -4
  349. package/src/Tooltip/Backdrop.jsx +60 -0
  350. package/src/Tooltip/Backdrop.native.jsx +33 -0
  351. package/src/Tooltip/Tooltip.jsx +294 -0
  352. package/src/Tooltip/dictionary.js +8 -0
  353. package/src/Tooltip/getTooltipPosition.js +161 -0
  354. package/src/Tooltip/index.js +3 -0
  355. package/src/TooltipButton/TooltipButton.jsx +49 -0
  356. package/src/TooltipButton/index.js +3 -0
  357. package/src/Typography/Typography.jsx +10 -20
  358. package/src/ViewportProvider/ViewportProvider.jsx +21 -0
  359. package/src/ViewportProvider/index.jsx +2 -41
  360. package/src/ViewportProvider/useViewport.js +5 -0
  361. package/src/ViewportProvider/useViewportListener.js +43 -0
  362. package/src/index.js +31 -3
  363. package/src/utils/a11y/index.js +1 -0
  364. package/src/utils/a11y/textSize.js +30 -0
  365. package/src/utils/children.jsx +66 -0
  366. package/src/utils/index.js +11 -1
  367. package/src/utils/info/index.js +8 -0
  368. package/src/utils/info/platform/index.js +11 -0
  369. package/src/utils/info/platform/platform.android.js +1 -0
  370. package/src/utils/info/platform/platform.ios.js +1 -0
  371. package/src/utils/info/platform/platform.js +1 -0
  372. package/src/utils/info/platform/platform.native.js +4 -0
  373. package/src/utils/info/versions.js +6 -0
  374. package/src/utils/input.js +20 -12
  375. package/src/utils/pressability.js +96 -0
  376. package/src/utils/propTypes.js +195 -56
  377. package/src/utils/useCopy.js +39 -0
  378. package/src/utils/useHash.js +34 -0
  379. package/src/utils/useHash.native.js +6 -0
  380. package/src/utils/useResponsiveProp.js +50 -0
  381. package/src/utils/{spacing/useSpacingScale.js → useSpacingScale.js} +25 -10
  382. package/stories/A11yText/A11yText.stories.jsx +4 -8
  383. package/stories/Button/Button.stories.jsx +5 -0
  384. package/stories/Card/Card.stories.jsx +1 -1
  385. package/stories/Checkbox/Checkbox.stories.jsx +94 -0
  386. package/stories/Feedback/Feedback.stories.jsx +5 -6
  387. package/stories/Icon/Icon.stories.jsx +27 -7
  388. package/stories/IconButton/IconButton.stories.jsx +50 -0
  389. package/stories/InputLabel/InputLabel.stories.jsx +8 -3
  390. package/stories/Link/ChevronLink.stories.jsx +3 -3
  391. package/stories/Link/Link.stories.jsx +28 -18
  392. package/stories/List/List.stories.jsx +117 -0
  393. package/stories/Modal/Modal.stories.jsx +29 -0
  394. package/stories/Notification/Notification.stories.jsx +82 -0
  395. package/stories/Progress/Progress.stories.jsx +93 -0
  396. package/stories/Radio/Radio.stories.jsx +100 -0
  397. package/stories/RadioCard/RadioCard.stories.jsx +98 -0
  398. package/stories/Search/Search.stories.jsx +16 -0
  399. package/stories/Select/Select.stories.jsx +55 -0
  400. package/stories/Skeleton/Skeleton.stories.jsx +36 -0
  401. package/stories/Spacer/Spacer.stories.jsx +7 -2
  402. package/stories/StackView/StackView.stories.jsx +10 -0
  403. package/stories/StackView/StackWrap.stories.jsx +12 -0
  404. package/stories/StepTracker/StepTracker.stories.jsx +71 -0
  405. package/stories/Tabs/Tabs.stories.jsx +97 -0
  406. package/stories/Tags/Tags.stories.jsx +69 -0
  407. package/stories/TextInput/TextArea.stories.jsx +100 -0
  408. package/stories/Tooltip/Tooltip.stories.jsx +81 -0
  409. package/stories/TooltipButton/TooltipButton.stories.jsx +11 -0
  410. package/stories/{platform-supports.web.jsx → platform-supports.jsx} +0 -0
  411. package/stories/supports.jsx +36 -2
  412. package/__fixtures__/accessible.icon.svg +0 -6
  413. package/babel.config.json +0 -8
  414. package/docs/Contributing.stories.mdx +0 -9
  415. package/docs/Fonts.stories.mdx +0 -104
  416. package/docs/Icons.stories.mdx +0 -144
  417. package/docs/Introduction.stories.mdx +0 -9
  418. package/lib/ActivityIndicator/Spinner.web.js +0 -55
  419. package/lib/InputLabel/LabelContent.web.js +0 -17
  420. package/lib/Pagination/useCopy.js +0 -10
  421. package/lib/config/svgr-icons-web.js +0 -9
  422. package/lib/config/svgr-icons.js +0 -52
  423. package/lib/utils/spacing/index.js +0 -2
  424. package/lib/utils/spacing/utils.js +0 -32
  425. package/src/Pagination/useCopy.js +0 -7
  426. package/src/config/svgr-icons-web.js +0 -11
  427. package/src/config/svgr-icons.js +0 -46
  428. package/src/utils/spacing/index.js +0 -3
  429. 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;
@@ -1,11 +1,37 @@
1
- import React, { useContext } from 'react';
2
- import PropTypes from 'prop-types';
3
- import { Platform, StyleSheet, View } from 'react-native';
4
- import { viewports } from '@telus-uds/system-constants';
5
- import GutterContext from '../providers/GutterContext';
6
- import { useViewport } from '../../ViewportProvider';
7
- import applyInheritance from '../helpers';
8
- import { responsiveProps } from '../../utils';
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(GutterContext);
26
- const viewPort = useViewport();
27
- const hiddenLevels = applyInheritance([xs, sm, md, lg, xl]);
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 applyInheritance([horizontalAlign.xs, horizontalAlign.sm, horizontalAlign.md, horizontalAlign.lg, horizontalAlign.xl]);
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 `${num / 12 * 100}%`;
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 = Platform.OS === 'web' ? 'block' : 'flex';
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 = applyInheritance(sizesArray);
137
- const offsetsWithIheritance = applyInheritance(offSetsArray);
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__*/React.createElement(View, Object.assign({}, viewProps, {
178
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, { ...viewProps,
153
179
  style: [styles.col, gutterPadding, offsetStyles(offsets), sizeStyles(sizes), { ...hidingStyles
154
- }]
155
- }), children);
180
+ }],
181
+ children: children
182
+ });
156
183
  };
157
184
 
158
- const styles = StyleSheet.create({
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: PropTypes.oneOf([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, true, false]),
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: PropTypes.oneOf([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, true, false]),
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: PropTypes.oneOf([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, true, false]),
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: PropTypes.oneOf([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, true, false]),
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: PropTypes.oneOf([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, true, false]),
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: PropTypes.oneOf([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]),
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: PropTypes.oneOf([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]),
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: PropTypes.oneOf([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]),
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: PropTypes.oneOf([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]),
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: PropTypes.oneOf([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]),
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: PropTypes.node.isRequired,
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(PropTypes.oneOf(['left', 'center', 'right']))
286
+ horizontalAlign: _utils.responsiveProps.getTypeOptionallyByViewport(_propTypes.default.oneOf(['left', 'center', 'right']))
259
287
  };
260
- export default Col;
288
+ var _default = Col;
289
+ exports.default = _default;
@@ -1,2 +1,13 @@
1
- import Col from './Col';
2
- export default Col;
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;
@@ -1,16 +1,37 @@
1
- import React from 'react';
2
- import PropTypes from 'prop-types';
3
- import { View, StyleSheet } from 'react-native';
4
- import { viewports } from '@telus-uds/system-constants';
5
- import Row from './Row';
6
- import Col from './Col';
7
- import { useViewport } from '../ViewportProvider';
8
- import GutterContext from './providers/GutterContext';
9
- import applyInheritance from './helpers';
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 = applyInheritance([xsReverse, smReverse, mdReverse, lgReverse, xlReverse]);
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__*/React.createElement(GutterContext.Provider, {
60
- value: gutter
61
- }, /*#__PURE__*/React.createElement(View, Object.assign({}, rest, {
62
- style: [styles.grid, {
63
- marginHorizontal,
64
- marginVertical,
65
- width,
66
- flexDirection,
67
- maxWidth
68
- }]
69
- }), children));
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 = StyleSheet.create({
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: PropTypes.bool,
105
+ limitWidth: _propTypes.default.bool,
82
106
 
83
107
  /**
84
108
  * Whether or not to include gutters in between columns.
85
109
  */
86
- gutter: PropTypes.bool,
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: PropTypes.bool,
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: PropTypes.bool,
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: PropTypes.bool,
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: PropTypes.bool,
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: PropTypes.bool,
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: PropTypes.bool,
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: PropTypes.node.isRequired
145
+ children: _propTypes.default.node.isRequired
122
146
  };
123
- FlexGrid.Row = Row;
124
- FlexGrid.Col = Col;
125
- export default FlexGrid;
147
+ FlexGrid.Row = _Row.default;
148
+ FlexGrid.Col = _Col.default;
149
+ var _default = FlexGrid;
150
+ exports.default = _default;