@telus-uds/components-base 0.0.2-prerelease.7 → 0.0.2-prerelease.8

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 (349) hide show
  1. package/.ultra.cache.json +1 -1
  2. package/CHANGELOG.md +27 -0
  3. package/__fixtures__/Accessible.js +33 -0
  4. package/__fixtures__/Accessible.native.js +32 -0
  5. package/__fixtures__/testTheme.js +429 -29
  6. package/__tests__/ActivityIndicator/ActivityIndicator.test.jsx +1 -1
  7. package/__tests__/Button/ButtonGroup.test.jsx +2 -2
  8. package/__tests__/Checkbox/CheckboxGroup.test.jsx +247 -0
  9. package/__tests__/Icon/Icon.test.jsx +3 -3
  10. package/__tests__/Modal/Modal.test.jsx +47 -0
  11. package/__tests__/Notification/Notification.test.jsx +20 -0
  12. package/__tests__/Pagination/Pagination.test.jsx +2 -2
  13. package/__tests__/Progress/Progress.test.jsx +79 -0
  14. package/__tests__/Radio/RadioGroup.test.jsx +221 -0
  15. package/__tests__/RadioCard/RadioCard.test.jsx +87 -0
  16. package/__tests__/RadioCard/RadioCardGroup.test.jsx +247 -0
  17. package/__tests__/Search/Search.test.jsx +72 -0
  18. package/__tests__/Skeleton/Skeleton.test.jsx +1 -1
  19. package/__tests__/StepTracker/StepTracker.test.jsx +94 -0
  20. package/__tests__/Tabs/Tabs.test.jsx +200 -0
  21. package/__tests__/Tags/Tags.test.jsx +1 -1
  22. package/__tests__/utils/input.test.js +58 -0
  23. package/__tests__/utils/useCopy.test.js +14 -3
  24. package/babel.config.js +20 -0
  25. package/jest.config.js +1 -1
  26. package/lib/A11yInfoProvider/index.js +54 -26
  27. package/lib/A11yText/index.js +37 -14
  28. package/lib/ActivityIndicator/Spinner.js +78 -0
  29. package/lib/ActivityIndicator/Spinner.native.js +121 -87
  30. package/lib/ActivityIndicator/index.js +28 -12
  31. package/lib/ActivityIndicator/shared.js +27 -12
  32. package/lib/BaseProvider/index.js +34 -11
  33. package/lib/Box/Box.js +54 -31
  34. package/lib/Box/index.js +13 -2
  35. package/lib/Button/Button.js +32 -11
  36. package/lib/Button/ButtonBase.js +85 -78
  37. package/lib/Button/ButtonGroup.js +94 -70
  38. package/lib/Button/ButtonLink.js +38 -15
  39. package/lib/Button/index.js +31 -4
  40. package/lib/Button/propTypes.js +32 -9
  41. package/lib/Card/Card.js +36 -41
  42. package/lib/Card/CardBase.js +78 -0
  43. package/lib/Card/PressableCardBase.js +137 -0
  44. package/lib/Card/index.js +40 -2
  45. package/lib/Checkbox/Checkbox.js +139 -103
  46. package/lib/Checkbox/CheckboxGroup.js +231 -0
  47. package/lib/Checkbox/CheckboxInput.js +74 -0
  48. package/lib/Checkbox/CheckboxInput.native.js +9 -1
  49. package/lib/Checkbox/index.js +21 -2
  50. package/lib/Divider/Divider.js +50 -24
  51. package/lib/Divider/index.js +13 -2
  52. package/lib/ExpandCollapse/Accordion.js +20 -7
  53. package/lib/ExpandCollapse/Control.js +50 -27
  54. package/lib/ExpandCollapse/ExpandCollapse.js +41 -24
  55. package/lib/ExpandCollapse/Panel.js +75 -37
  56. package/lib/ExpandCollapse/index.js +25 -7
  57. package/lib/Feedback/Feedback.js +69 -40
  58. package/lib/Feedback/index.js +13 -2
  59. package/lib/Fieldset/Fieldset.js +160 -0
  60. package/lib/Fieldset/FieldsetContainer.js +41 -0
  61. package/lib/Fieldset/FieldsetContainer.native.js +33 -0
  62. package/lib/Fieldset/Legend.js +33 -0
  63. package/lib/Fieldset/Legend.native.js +43 -0
  64. package/lib/Fieldset/cssReset.js +21 -0
  65. package/lib/Fieldset/index.js +13 -0
  66. package/lib/FlexGrid/Col/Col.js +67 -38
  67. package/lib/FlexGrid/Col/index.js +13 -2
  68. package/lib/FlexGrid/FlexGrid.js +70 -45
  69. package/lib/FlexGrid/Row/Row.js +48 -27
  70. package/lib/FlexGrid/Row/index.js +13 -2
  71. package/lib/FlexGrid/helpers/index.js +9 -1
  72. package/lib/FlexGrid/index.js +13 -2
  73. package/lib/FlexGrid/providers/GutterContext.js +15 -3
  74. package/lib/Icon/Icon.js +46 -44
  75. package/lib/Icon/IconText.js +49 -21
  76. package/lib/Icon/index.js +31 -4
  77. package/lib/InputLabel/InputLabel.js +70 -36
  78. package/lib/InputLabel/LabelContent.js +31 -0
  79. package/lib/InputLabel/LabelContent.native.js +9 -1
  80. package/lib/InputLabel/index.js +13 -2
  81. package/lib/InputSupports/InputSupports.js +62 -48
  82. package/lib/InputSupports/index.js +13 -2
  83. package/lib/InputSupports/propTypes.js +19 -8
  84. package/lib/InputSupports/useInputSupports.js +41 -0
  85. package/lib/Link/ChevronLink.js +33 -16
  86. package/lib/Link/InlinePressable.js +50 -0
  87. package/lib/Link/InlinePressable.native.js +34 -11
  88. package/lib/Link/Link.js +25 -9
  89. package/lib/Link/LinkBase.js +87 -57
  90. package/lib/Link/TextButton.js +32 -13
  91. package/lib/Link/index.js +39 -5
  92. package/lib/List/List.js +51 -23
  93. package/lib/List/ListItem.js +70 -40
  94. package/lib/List/index.js +13 -2
  95. package/lib/Modal/Modal.js +226 -0
  96. package/lib/Modal/dictionary.js +16 -0
  97. package/lib/Modal/index.js +13 -0
  98. package/lib/Notification/Notification.js +200 -0
  99. package/lib/Notification/dictionary.js +15 -0
  100. package/lib/Notification/index.js +13 -0
  101. package/lib/Pagination/PageButton.js +47 -25
  102. package/lib/Pagination/Pagination.js +70 -40
  103. package/lib/Pagination/SideButton.js +63 -37
  104. package/lib/Pagination/dictionary.js +9 -2
  105. package/lib/Pagination/index.js +13 -2
  106. package/lib/Pagination/usePagination.js +12 -2
  107. package/lib/Progress/Progress.js +99 -0
  108. package/lib/Progress/ProgressBar.js +146 -0
  109. package/lib/Progress/ProgressBarBackground.js +57 -0
  110. package/lib/Progress/index.js +16 -0
  111. package/lib/Radio/Radio.js +110 -109
  112. package/lib/Radio/RadioButton.js +141 -0
  113. package/lib/Radio/RadioGroup.js +233 -0
  114. package/lib/Radio/RadioInput.js +76 -0
  115. package/lib/Radio/RadioInput.native.js +9 -1
  116. package/lib/Radio/index.js +21 -2
  117. package/lib/RadioCard/RadioCard.js +240 -0
  118. package/lib/RadioCard/RadioCardGroup.js +251 -0
  119. package/lib/RadioCard/index.js +21 -0
  120. package/lib/Search/Search.js +243 -0
  121. package/lib/Search/dictionary.js +19 -0
  122. package/lib/Search/index.js +13 -0
  123. package/lib/Select/Group.js +33 -0
  124. package/lib/Select/Group.native.js +16 -5
  125. package/lib/Select/Item.js +29 -0
  126. package/lib/Select/Item.native.js +14 -4
  127. package/lib/Select/Picker.js +79 -0
  128. package/lib/Select/Picker.native.js +52 -24
  129. package/lib/Select/Select.js +110 -82
  130. package/lib/Select/index.js +19 -6
  131. package/lib/SideNav/Item.js +54 -33
  132. package/lib/SideNav/ItemContent.js +41 -15
  133. package/lib/SideNav/ItemsGroup.js +46 -27
  134. package/lib/SideNav/SideNav.js +92 -69
  135. package/lib/SideNav/index.js +15 -1
  136. package/lib/Skeleton/Skeleton.js +55 -37
  137. package/lib/Skeleton/index.js +13 -2
  138. package/lib/Skeleton/skeleton.constant.js +12 -0
  139. package/lib/Skeleton/skeletonWebAnimation.js +27 -0
  140. package/lib/Skeleton/useSkeletonNativeAnimation.js +37 -0
  141. package/lib/Spacer/Spacer.js +31 -12
  142. package/lib/Spacer/index.js +13 -2
  143. package/lib/StackView/StackView.js +49 -27
  144. package/lib/StackView/StackWrap.js +33 -10
  145. package/lib/StackView/StackWrap.native.js +13 -2
  146. package/lib/StackView/StackWrapBox.js +46 -24
  147. package/lib/StackView/StackWrapGap.js +43 -22
  148. package/lib/StackView/common.js +19 -4
  149. package/lib/StackView/getStackedContent.js +49 -19
  150. package/lib/StackView/index.js +29 -5
  151. package/lib/StepTracker/Step.js +245 -0
  152. package/lib/StepTracker/StepTracker.js +197 -0
  153. package/lib/StepTracker/dictionary.js +17 -0
  154. package/lib/StepTracker/index.js +13 -0
  155. package/lib/Tabs/HorizontalScroll.js +199 -0
  156. package/lib/Tabs/ScrollViewEnd.js +66 -0
  157. package/lib/Tabs/ScrollViewEnd.native.js +41 -0
  158. package/lib/Tabs/Tabs.js +117 -0
  159. package/lib/Tabs/TabsItem.js +234 -0
  160. package/lib/Tabs/TabsScrollButton.js +121 -0
  161. package/lib/Tabs/dictionary.js +18 -0
  162. package/lib/Tabs/index.js +13 -0
  163. package/lib/Tabs/itemPositions.js +128 -0
  164. package/lib/Tags/Tags.js +130 -97
  165. package/lib/Tags/index.js +13 -2
  166. package/lib/TextInput/TextArea.js +51 -24
  167. package/lib/TextInput/TextInput.js +40 -19
  168. package/lib/TextInput/TextInputBase.js +78 -55
  169. package/lib/TextInput/index.js +23 -3
  170. package/lib/TextInput/propTypes.js +18 -7
  171. package/lib/ThemeProvider/ThemeProvider.js +38 -14
  172. package/lib/ThemeProvider/index.js +61 -6
  173. package/lib/ThemeProvider/useSetTheme.js +14 -5
  174. package/lib/ThemeProvider/useTheme.js +13 -4
  175. package/lib/ThemeProvider/useThemeTokens.js +32 -16
  176. package/lib/ThemeProvider/utils/index.js +31 -2
  177. package/lib/ThemeProvider/utils/styles.js +52 -16
  178. package/lib/ThemeProvider/utils/theme-tokens.js +94 -16
  179. package/lib/ToggleSwitch/ToggleSwitch.js +75 -51
  180. package/lib/ToggleSwitch/index.js +13 -2
  181. package/lib/Tooltip/{Backdrop.web.js → Backdrop.js} +22 -18
  182. package/lib/Tooltip/Backdrop.native.js +39 -15
  183. package/lib/Tooltip/Tooltip.js +112 -70
  184. package/lib/Tooltip/dictionary.js +9 -2
  185. package/lib/Tooltip/getTooltipPosition.js +9 -1
  186. package/lib/Tooltip/index.js +13 -2
  187. package/lib/TooltipButton/TooltipButton.js +57 -38
  188. package/lib/TooltipButton/index.js +13 -2
  189. package/lib/Typography/Typography.js +57 -27
  190. package/lib/Typography/index.js +13 -2
  191. package/lib/ViewportProvider/ViewportProvider.js +34 -13
  192. package/lib/ViewportProvider/index.js +28 -3
  193. package/lib/ViewportProvider/useViewport.js +15 -3
  194. package/lib/ViewportProvider/useViewportListener.js +24 -10
  195. package/lib/index.js +509 -33
  196. package/lib/utils/a11y/index.js +18 -1
  197. package/lib/utils/a11y/textSize.js +23 -7
  198. package/lib/utils/animation/index.js +15 -2
  199. package/lib/utils/animation/useVerticalExpandAnimation.js +28 -11
  200. package/lib/utils/children.js +87 -0
  201. package/lib/utils/index.js +163 -10
  202. package/lib/utils/info/index.js +18 -6
  203. package/lib/utils/info/platform/index.js +19 -7
  204. package/lib/utils/info/platform/platform.android.js +8 -1
  205. package/lib/utils/info/platform/platform.ios.js +8 -1
  206. package/lib/utils/info/platform/platform.js +8 -0
  207. package/lib/utils/info/platform/platform.native.js +8 -1
  208. package/lib/utils/info/versions.js +15 -4
  209. package/lib/utils/input.js +51 -33
  210. package/lib/utils/pressability.js +38 -10
  211. package/lib/utils/propTypes.js +217 -125
  212. package/lib/utils/useCopy.js +40 -5
  213. package/lib/utils/useHash.js +48 -0
  214. package/lib/utils/useHash.native.js +15 -0
  215. package/lib/utils/useResponsiveProp.js +21 -9
  216. package/lib/utils/useSpacingScale.js +21 -9
  217. package/lib/utils/useUniqueId.js +13 -4
  218. package/package.json +7 -6
  219. package/release-context.json +4 -4
  220. package/src/ActivityIndicator/{Spinner.web.jsx → Spinner.jsx} +0 -0
  221. package/src/Box/Box.jsx +11 -4
  222. package/src/Button/Button.jsx +3 -2
  223. package/src/Button/ButtonBase.jsx +27 -36
  224. package/src/Button/ButtonGroup.jsx +2 -2
  225. package/src/Button/ButtonLink.jsx +3 -2
  226. package/src/Button/propTypes.js +12 -2
  227. package/src/Card/Card.jsx +4 -30
  228. package/src/Card/CardBase.jsx +57 -0
  229. package/src/Card/PressableCardBase.jsx +112 -0
  230. package/src/Card/index.js +3 -0
  231. package/src/Checkbox/Checkbox.jsx +10 -11
  232. package/src/Checkbox/CheckboxGroup.jsx +196 -0
  233. package/src/Checkbox/{CheckboxInput.web.jsx → CheckboxInput.jsx} +0 -0
  234. package/src/Checkbox/index.js +2 -0
  235. package/src/ExpandCollapse/Control.jsx +1 -1
  236. package/src/Feedback/Feedback.jsx +1 -1
  237. package/src/Fieldset/Fieldset.jsx +129 -0
  238. package/src/Fieldset/FieldsetContainer.jsx +22 -0
  239. package/src/Fieldset/FieldsetContainer.native.jsx +16 -0
  240. package/src/Fieldset/Legend.jsx +16 -0
  241. package/src/Fieldset/Legend.native.jsx +22 -0
  242. package/src/Fieldset/cssReset.js +14 -0
  243. package/src/Fieldset/index.js +3 -0
  244. package/src/Icon/Icon.jsx +14 -23
  245. package/src/Icon/IconText.jsx +2 -2
  246. package/src/Icon/index.js +2 -2
  247. package/src/InputLabel/InputLabel.jsx +9 -2
  248. package/src/InputLabel/{LabelContent.web.jsx → LabelContent.jsx} +0 -0
  249. package/src/InputSupports/InputSupports.jsx +7 -18
  250. package/src/InputSupports/useInputSupports.js +30 -0
  251. package/src/Link/{InlinePressable.web.jsx → InlinePressable.jsx} +0 -0
  252. package/src/Link/LinkBase.jsx +14 -12
  253. package/src/Modal/Modal.jsx +185 -0
  254. package/src/Modal/dictionary.js +9 -0
  255. package/src/Modal/index.js +3 -0
  256. package/src/Notification/Notification.jsx +149 -0
  257. package/src/Notification/dictionary.js +8 -0
  258. package/src/Notification/index.js +3 -0
  259. package/src/Progress/Progress.jsx +77 -0
  260. package/src/Progress/ProgressBar.jsx +110 -0
  261. package/src/Progress/ProgressBarBackground.jsx +34 -0
  262. package/src/Progress/index.js +6 -0
  263. package/src/Radio/Radio.jsx +19 -56
  264. package/src/Radio/RadioButton.jsx +131 -0
  265. package/src/Radio/RadioGroup.jsx +198 -0
  266. package/src/Radio/{RadioInput.web.jsx → RadioInput.jsx} +0 -0
  267. package/src/Radio/index.js +2 -0
  268. package/src/RadioCard/RadioCard.jsx +191 -0
  269. package/src/RadioCard/RadioCardGroup.jsx +211 -0
  270. package/src/RadioCard/index.js +5 -0
  271. package/src/Search/Search.jsx +204 -0
  272. package/src/Search/dictionary.js +12 -0
  273. package/src/Search/index.js +3 -0
  274. package/src/Select/{Group.web.jsx → Group.jsx} +0 -0
  275. package/src/Select/{Item.web.jsx → Item.jsx} +0 -0
  276. package/src/Select/{Picker.web.jsx → Picker.jsx} +0 -0
  277. package/src/Select/Select.jsx +12 -22
  278. package/src/SideNav/Item.jsx +2 -2
  279. package/src/Skeleton/Skeleton.jsx +17 -20
  280. package/src/Skeleton/skeleton.constant.js +3 -0
  281. package/src/Skeleton/skeletonWebAnimation.js +13 -0
  282. package/src/Skeleton/useSkeletonNativeAnimation.js +27 -0
  283. package/src/StackView/StackView.jsx +10 -3
  284. package/src/StackView/StackWrap.jsx +9 -1
  285. package/src/StackView/StackWrapBox.jsx +4 -3
  286. package/src/StackView/StackWrapGap.jsx +3 -3
  287. package/src/StackView/getStackedContent.jsx +8 -2
  288. package/src/StepTracker/Step.jsx +202 -0
  289. package/src/StepTracker/StepTracker.jsx +163 -0
  290. package/src/StepTracker/dictionary.js +10 -0
  291. package/src/StepTracker/index.js +3 -0
  292. package/src/Tabs/HorizontalScroll.jsx +165 -0
  293. package/src/Tabs/ScrollViewEnd.jsx +53 -0
  294. package/src/Tabs/ScrollViewEnd.native.jsx +24 -0
  295. package/src/Tabs/Tabs.jsx +89 -0
  296. package/src/Tabs/TabsItem.jsx +204 -0
  297. package/src/Tabs/TabsScrollButton.jsx +100 -0
  298. package/src/Tabs/dictionary.js +11 -0
  299. package/src/Tabs/index.js +3 -0
  300. package/src/Tabs/itemPositions.js +101 -0
  301. package/src/Tags/Tags.jsx +2 -1
  302. package/src/TextInput/TextInputBase.jsx +12 -22
  303. package/src/ThemeProvider/useThemeTokens.js +2 -2
  304. package/src/ThemeProvider/utils/styles.js +18 -5
  305. package/src/ThemeProvider/utils/theme-tokens.js +46 -5
  306. package/src/ToggleSwitch/ToggleSwitch.jsx +2 -3
  307. package/src/Tooltip/{Backdrop.web.jsx → Backdrop.jsx} +0 -0
  308. package/src/Tooltip/Tooltip.jsx +1 -1
  309. package/src/TooltipButton/TooltipButton.jsx +23 -27
  310. package/src/Typography/Typography.jsx +6 -5
  311. package/src/index.js +20 -2
  312. package/src/utils/children.jsx +66 -0
  313. package/src/utils/index.js +3 -0
  314. package/src/utils/info/platform/platform.js +1 -0
  315. package/src/utils/info/versions.js +2 -2
  316. package/src/utils/input.js +20 -12
  317. package/src/utils/pressability.js +4 -0
  318. package/src/utils/propTypes.js +98 -34
  319. package/src/utils/useCopy.js +30 -4
  320. package/src/utils/useHash.js +34 -0
  321. package/src/utils/useHash.native.js +6 -0
  322. package/stories/A11yText/A11yText.stories.jsx +4 -8
  323. package/stories/Checkbox/Checkbox.stories.jsx +24 -1
  324. package/stories/Icon/Icon.stories.jsx +6 -5
  325. package/stories/Modal/Modal.stories.jsx +29 -0
  326. package/stories/Notification/Notification.stories.jsx +82 -0
  327. package/stories/Progress/Progress.stories.jsx +93 -0
  328. package/stories/Radio/Radio.stories.jsx +23 -36
  329. package/stories/RadioCard/RadioCard.stories.jsx +98 -0
  330. package/stories/Search/Search.stories.jsx +16 -0
  331. package/stories/StepTracker/StepTracker.stories.jsx +71 -0
  332. package/stories/Tabs/Tabs.stories.jsx +97 -0
  333. package/stories/{platform-supports.web.jsx → platform-supports.jsx} +0 -0
  334. package/__fixtures__/accessible.icon.svg +0 -6
  335. package/babel.config.json +0 -8
  336. package/lib/ActivityIndicator/Spinner.web.js +0 -55
  337. package/lib/Checkbox/CheckboxInput.web.js +0 -57
  338. package/lib/InputLabel/LabelContent.web.js +0 -17
  339. package/lib/Link/InlinePressable.web.js +0 -32
  340. package/lib/Radio/RadioInput.web.js +0 -59
  341. package/lib/Select/Group.web.js +0 -18
  342. package/lib/Select/Item.web.js +0 -15
  343. package/lib/Select/Picker.web.js +0 -63
  344. package/lib/config/svgr-icons-web.js +0 -9
  345. package/lib/config/svgr-icons.js +0 -52
  346. package/lib/utils/info/platform/platform.web.js +0 -1
  347. package/src/config/svgr-icons-web.js +0 -11
  348. package/src/config/svgr-icons.js +0 -46
  349. package/src/utils/info/platform/platform.web.js +0 -1
@@ -0,0 +1,200 @@
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 _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
11
+
12
+ var _Text = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Text"));
13
+
14
+ var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
15
+
16
+ var _propTypes = _interopRequireDefault(require("prop-types"));
17
+
18
+ var _ThemeProvider = require("../ThemeProvider");
19
+
20
+ var _utils = require("../utils");
21
+
22
+ var _ButtonBase = _interopRequireDefault(require("../Button/ButtonBase"));
23
+
24
+ var _useCopy = _interopRequireDefault(require("../utils/useCopy"));
25
+
26
+ var _dictionary = _interopRequireDefault(require("./dictionary"));
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; }
35
+
36
+ const selectContainerStyles = tokens => ({ ...tokens
37
+ });
38
+
39
+ const selectTextStyles = tokens => (0, _ThemeProvider.applyTextStyles)((0, _utils.selectTokens)('Typography', tokens));
40
+
41
+ const selectIconProps = ({
42
+ iconSize,
43
+ iconColor
44
+ }) => ({
45
+ size: iconSize,
46
+ color: iconColor
47
+ });
48
+
49
+ const selectIconContainerStyles = ({
50
+ iconGap
51
+ }) => ({
52
+ paddingRight: iconGap
53
+ });
54
+
55
+ const selectDismissIconProps = ({
56
+ dismissIconSize,
57
+ dismissIconColor
58
+ }) => ({
59
+ size: dismissIconSize,
60
+ color: dismissIconColor
61
+ });
62
+
63
+ const selectDismissButtonContainerStyles = ({
64
+ dismissButtonGap
65
+ }) => ({
66
+ paddingLeft: dismissButtonGap
67
+ });
68
+ /**
69
+ * A banner that highlights important messages:
70
+ * - Status message to show there is an error or outage of services
71
+ * - Confirmation message in response to user action
72
+ * - Account information letting the user know they have almost used all their data
73
+ *
74
+ * ## Usage criteria
75
+ * - Use simple text content only, such as bold test or links. Don’t use other complex components or paragraphs
76
+ * - Show notifications before the content that the message is related to, otherwise show at the top of the main content
77
+ * - Show system notifications at the top of the page, below the navigation, and expands the full-width of the viewport
78
+ * - When showing multiple notifications, show them in order of importance from top to bottom
79
+ * - Use variants to visually show the type of message contained within the Notification.
80
+ * The icon and colour will indicate meaning and importance
81
+ *
82
+ * ### Variants
83
+ * - Use `variant.style` to set the visual style of the notification
84
+ * - Use `dismissible` prop to enable dismissible functionality
85
+ * - Use `system` prop to set the visual style of the notification and denote an announcement from the system or application
86
+ *
87
+ * ### When to use the system prop?
88
+ * - Use `system` to show system-based messages coming from the application
89
+ * - Don’t use `system` when the message is in response to user action
90
+ *
91
+ * ## Variants
92
+ *
93
+ * #### Success
94
+ * Use the success variant to provide feedback of a successful operation. The message will include an icon to indicate meaning and importance.
95
+ *
96
+ * #### Warning
97
+ * Use the warning variant to provide feedback of a warning; users would still be able to proceed forward.
98
+ * The message will include an icon to indicate meaning and importance.
99
+ *
100
+ * #### Error
101
+ * Use the error variant to provide feedback of a failed operation. The message will include an icon to indicate meaning and importance.
102
+ *
103
+ * #### Dismissible
104
+ * Dismissible notifications should only be used for default or success notifications where there is no action needed from the user.
105
+ * If the information is passive then it should be dismissible as indicated by an interactive close button on the far right.
106
+ * If the notification requires an action then make the option(s) clear with a `ChevronLink` or `Link`.
107
+ *
108
+ * Use the `dismissible` prop to allow users to dismiss the Notification at any time. Once dismissed, the Notification is removed from the DOM.
109
+ *
110
+ * Please note:
111
+ *
112
+ * - Default and Success variants are dismissible
113
+ * - Error and Warning variants are not dismissible
114
+ *
115
+ * #### System message
116
+ * Use full-width `Notifications` to show system-based messages coming from the application, not in response to user action.
117
+ * Show system notifications at the top of the page, below the navigation, and expands the full-width of the viewport
118
+ */
119
+
120
+
121
+ const Notification = ({
122
+ children,
123
+ system,
124
+ dismissible,
125
+ copy = 'en',
126
+ tokens,
127
+ variant
128
+ }) => {
129
+ const [isDismissed, setIsDismissed] = (0, _react.useState)(false);
130
+ const themeTokens = (0, _ThemeProvider.useThemeTokens)('Notification', tokens, variant, {
131
+ system
132
+ });
133
+ const getCopy = (0, _useCopy.default)({
134
+ dictionary: _dictionary.default,
135
+ copy
136
+ });
137
+
138
+ if (isDismissed) {
139
+ return null;
140
+ }
141
+
142
+ const textStyles = selectTextStyles(themeTokens);
143
+ const content = typeof children === 'string' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
144
+ style: textStyles,
145
+ children: children
146
+ }) : children;
147
+ const {
148
+ icon: IconComponent,
149
+ dismissIcon: DismissIconComponent
150
+ } = themeTokens;
151
+
152
+ const onDismissPress = () => setIsDismissed(true); // TODO: replace the dismiss button with IconButton when implemented (https://github.com/telus/universal-design-system/issues/281)
153
+
154
+
155
+ return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
156
+ style: [staticStyles.container, selectContainerStyles(themeTokens)],
157
+ children: [IconComponent && /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
158
+ style: selectIconContainerStyles(themeTokens),
159
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconComponent, { ...selectIconProps(themeTokens)
160
+ })
161
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
162
+ style: staticStyles.contentContainer,
163
+ children: content && typeof content === 'function' ? content({
164
+ textStyles,
165
+ variant
166
+ }) : content
167
+ }), dismissible && DismissIconComponent && /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
168
+ style: selectDismissButtonContainerStyles(themeTokens),
169
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonBase.default, {
170
+ onPress: onDismissPress,
171
+ accessibilityRole: "button",
172
+ accessibilityLabel: getCopy('dismiss'),
173
+ children: () => /*#__PURE__*/(0, _jsxRuntime.jsx)(DismissIconComponent, { ...selectDismissIconProps(themeTokens)
174
+ })
175
+ })
176
+ })]
177
+ });
178
+ };
179
+
180
+ Notification.propTypes = {
181
+ children: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node, _propTypes.default.func]),
182
+ system: _propTypes.default.bool,
183
+ dismissible: _propTypes.default.bool,
184
+ copy: _propTypes.default.oneOfType([_propTypes.default.oneOf(['en', 'fr']), _propTypes.default.shape({
185
+ dismiss: _propTypes.default.string
186
+ })]),
187
+ tokens: (0, _utils.getTokensPropType)('Notification'),
188
+ variant: _utils.variantProp.propType
189
+ };
190
+ var _default = Notification;
191
+ exports.default = _default;
192
+
193
+ const staticStyles = _StyleSheet.default.create({
194
+ container: {
195
+ flexDirection: 'row'
196
+ },
197
+ contentContainer: {
198
+ flex: 1
199
+ }
200
+ });
@@ -0,0 +1,15 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.default = void 0;
7
+ var _default = {
8
+ en: {
9
+ dismiss: 'Close'
10
+ },
11
+ fr: {
12
+ dismiss: 'Fermer'
13
+ }
14
+ };
15
+ 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 _Notification = _interopRequireDefault(require("./Notification"));
9
+
10
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
11
+
12
+ var _default = _Notification.default;
13
+ exports.default = _default;
@@ -1,10 +1,27 @@
1
- import React from 'react';
2
- import PropTypes from 'prop-types';
3
- import ButtonBase from '../Button/ButtonBase';
4
- import { useThemeTokensCallback } from '../ThemeProvider';
5
- import { a11yProps, copyPropTypes, getTokensPropType, hrefAttrsProp, linkProps, selectTokens, variantProp } from '../utils';
6
- import useCopy from '../utils/useCopy';
7
- import dictionary from './dictionary';
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 _ButtonBase = _interopRequireDefault(require("../Button/ButtonBase"));
13
+
14
+ var _ThemeProvider = require("../ThemeProvider");
15
+
16
+ var _utils = require("../utils");
17
+
18
+ var _useCopy = _interopRequireDefault(require("../utils/useCopy"));
19
+
20
+ var _dictionary = _interopRequireDefault(require("./dictionary"));
21
+
22
+ var _jsxRuntime = require("react/jsx-runtime");
23
+
24
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
8
25
 
9
26
  function PageButton({
10
27
  label,
@@ -16,28 +33,30 @@ function PageButton({
16
33
  tokens,
17
34
  ...props
18
35
  }) {
19
- const getTokens = useThemeTokensCallback('PaginationPageButton', tokens, variant);
20
- const getCopy = useCopy({
21
- dictionary,
36
+ const getTokens = (0, _ThemeProvider.useThemeTokensCallback)('PaginationPageButton', tokens, variant);
37
+ const getCopy = (0, _useCopy.default)({
38
+ dictionary: _dictionary.default,
22
39
  copy
23
40
  });
24
41
 
25
- const getButtonTokens = buttonState => selectTokens('Button', getTokens(buttonState));
42
+ const getButtonTokens = buttonState => (0, _utils.selectTokens)('Button', getTokens(buttonState));
26
43
 
27
44
  const activeProps = isActive ? {
28
45
  selected: true,
29
- ...a11yProps.nonFocusableProps,
46
+ ..._utils.a11yProps.nonFocusableProps,
30
47
  // a brute fix for the focus state being stuck on an active item since it becomes non-focusable
31
48
  // (see https://github.com/telus/universal-design-system/pull/577#issuecomment-931344107)
32
49
  key: 'active-item'
33
50
  } : {};
34
51
  const accessibilityRole = href !== undefined ? 'link' : 'button';
35
- const activeLabel = isActive ? ` ${getCopy('currentLabel')}` : '';
36
- const accessibilityLabel = `${getCopy('goToLabel')} ${label}${activeLabel}`;
52
+ const activeLabel = isActive ? " ".concat(getCopy('currentLabel')) : '';
53
+ const accessibilityLabel = "".concat(getCopy('goToLabel'), " ").concat(label).concat(activeLabel);
54
+
37
55
  const {
38
56
  hrefAttrs,
39
57
  rest
40
- } = hrefAttrsProp.bundle(props);
58
+ } = _utils.hrefAttrsProp.bundle(props);
59
+
41
60
  const buttonProps = {
42
61
  accessibilityRole,
43
62
  accessibilityLabel,
@@ -46,17 +65,20 @@ function PageButton({
46
65
  hrefAttrs,
47
66
  ...rest
48
67
  };
49
- return /*#__PURE__*/React.createElement(ButtonBase, Object.assign({}, buttonProps, {
50
- tokens: getButtonTokens
51
- }, activeProps), label);
68
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonBase.default, { ...buttonProps,
69
+ tokens: getButtonTokens,
70
+ ...activeProps,
71
+ children: label
72
+ });
52
73
  }
53
74
 
54
75
  PageButton.propTypes = {
55
- label: PropTypes.string,
56
- isActive: PropTypes.bool,
57
- copy: copyPropTypes,
58
- variant: variantProp.propType,
59
- tokens: getTokensPropType('PaginationPageButton'),
60
- ...linkProps.types
76
+ label: _propTypes.default.string,
77
+ isActive: _propTypes.default.bool,
78
+ copy: _utils.copyPropTypes,
79
+ variant: _utils.variantProp.propType,
80
+ tokens: (0, _utils.getTokensPropType)('PaginationPageButton'),
81
+ ..._utils.linkProps.types
61
82
  };
62
- export default PageButton;
83
+ var _default = PageButton;
84
+ exports.default = _default;
@@ -1,12 +1,35 @@
1
- import React from 'react';
2
- import { View, Text, StyleSheet } from 'react-native';
3
- import { componentPropType, copyPropTypes, getTokensPropType, variantProp } from '../utils';
4
- import { applyTextStyles, useThemeTokens } from '../ThemeProvider';
5
- import { useViewport } from '../ViewportProvider';
6
- import Box from '../Box';
7
- import usePagination from './usePagination';
8
- import PageButton from './PageButton';
9
- import SideButton from './SideButton';
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 _Text = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Text"));
13
+
14
+ var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
15
+
16
+ var _utils = require("../utils");
17
+
18
+ var _ThemeProvider = require("../ThemeProvider");
19
+
20
+ var _ViewportProvider = require("../ViewportProvider");
21
+
22
+ var _Box = _interopRequireDefault(require("../Box"));
23
+
24
+ var _usePagination = _interopRequireDefault(require("./usePagination"));
25
+
26
+ var _PageButton = _interopRequireDefault(require("./PageButton"));
27
+
28
+ var _SideButton = _interopRequireDefault(require("./SideButton"));
29
+
30
+ var _jsxRuntime = require("react/jsx-runtime");
31
+
32
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
10
33
 
11
34
  const selectTextStyles = ({
12
35
  color,
@@ -14,7 +37,7 @@ const selectTextStyles = ({
14
37
  fontSize,
15
38
  fontWeight,
16
39
  lineHeight
17
- }) => applyTextStyles({
40
+ }) => (0, _ThemeProvider.applyTextStyles)({
18
41
  color,
19
42
  fontName,
20
43
  fontSize,
@@ -30,15 +53,17 @@ function Pagination({
30
53
  sideButtonVariant,
31
54
  sideButtonTokens
32
55
  }) {
33
- const viewport = useViewport();
56
+ const viewport = (0, _ViewportProvider.useViewport)();
34
57
  const {
35
58
  truncateAbove,
36
59
  gap,
37
60
  ...themeTokens
38
- } = useThemeTokens('Pagination', tokens, variant, {
61
+ } = (0, _ThemeProvider.useThemeTokens)('Pagination', tokens, variant, {
39
62
  viewport
40
63
  });
41
- const items = React.Children.toArray(children);
64
+
65
+ const items = _react.default.Children.toArray(children);
66
+
42
67
  const {
43
68
  isItemActive,
44
69
  getItemProps,
@@ -48,7 +73,7 @@ function Pagination({
48
73
  previousItemProps,
49
74
  shouldRenderButton,
50
75
  shouldRenderEllipsis
51
- } = usePagination({
76
+ } = (0, _usePagination.default)({
52
77
  items,
53
78
  truncateAbove
54
79
  });
@@ -60,59 +85,64 @@ function Pagination({
60
85
  // concatenate all items to easily wrap them in identical spacing components
61
86
 
62
87
 
63
- const buttons = [showPrevious && /*#__PURE__*/React.createElement(SideButton, Object.assign({}, previousItemProps, {
88
+ const buttons = [showPrevious && /*#__PURE__*/(0, _jsxRuntime.jsx)(_SideButton.default, { ...previousItemProps,
64
89
  direction: "previous",
65
90
  copy: copy,
66
91
  variant: sideButtonVariant,
67
92
  tokens: sideButtonTokens
68
- })), ...items.map((child, itemIndex) => {
69
- const buttonLabel = `${itemIndex + 1}`;
93
+ }), ...items.map((child, itemIndex) => {
94
+ const buttonLabel = "".concat(itemIndex + 1);
70
95
  const itemProps = getItemProps(itemIndex);
71
96
 
72
97
  if (shouldRenderButton(itemIndex)) {
73
- return /*#__PURE__*/React.createElement(PageButton, Object.assign({}, itemProps, {
98
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)(_PageButton.default, { ...itemProps,
74
99
  label: buttonLabel,
75
100
  copy: copy,
76
101
  isActive: isItemActive(itemIndex)
77
- }));
102
+ });
78
103
  }
79
104
 
80
105
  if (shouldRenderEllipsis(itemIndex)) {
81
- return /*#__PURE__*/React.createElement(Text, {
82
- style: ellipsisTextStyles
83
- }, "...");
106
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
107
+ style: ellipsisTextStyles,
108
+ children: "..."
109
+ });
84
110
  }
85
111
 
86
112
  return null;
87
- }), showNext && /*#__PURE__*/React.createElement(SideButton, Object.assign({}, nextItemProps, {
113
+ }), showNext && /*#__PURE__*/(0, _jsxRuntime.jsx)(_SideButton.default, { ...nextItemProps,
88
114
  direction: "next",
89
115
  copy: copy,
90
116
  variant: sideButtonVariant,
91
117
  tokens: sideButtonTokens
92
- }))];
93
- return /*#__PURE__*/React.createElement(View, {
94
- style: staticStyles.container
95
- }, buttons // keep the keys in-line with the page numbers regardless of which buttons are actually rendered
96
- .map((element, index) => [element, `page-${index + 1}`]).filter(([element]) => element !== null).map(([element, key]) => /*#__PURE__*/React.createElement(Box, {
97
- right: gap,
98
- key: key
99
- }, element)));
118
+ })];
119
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
120
+ style: staticStyles.container,
121
+ children: buttons // keep the keys in-line with the page numbers regardless of which buttons are actually rendered
122
+ .map((element, index) => [element, "page-".concat(index + 1)]).filter(([element]) => element !== null).map(([element, key]) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
123
+ right: gap,
124
+ children: element
125
+ }, key))
126
+ });
100
127
  }
101
128
 
102
- Pagination.PageButton = PageButton;
129
+ Pagination.PageButton = _PageButton.default;
103
130
  Pagination.propTypes = {
104
- children: componentPropType('PageButton'),
105
- copy: copyPropTypes,
106
- variant: variantProp.propType,
107
- tokens: getTokensPropType('Pagination'),
108
- sideButtonVariant: variantProp.propType,
109
- sideButtonTokens: getTokensPropType('PaginationSideButton')
131
+ children: (0, _utils.componentPropType)('PageButton'),
132
+ copy: _utils.copyPropTypes,
133
+ variant: _utils.variantProp.propType,
134
+ tokens: (0, _utils.getTokensPropType)('Pagination'),
135
+ sideButtonVariant: _utils.variantProp.propType,
136
+ sideButtonTokens: (0, _utils.getTokensPropType)('PaginationSideButton')
110
137
  };
111
- const staticStyles = StyleSheet.create({
138
+
139
+ const staticStyles = _StyleSheet.default.create({
112
140
  container: {
113
141
  flexDirection: 'row',
114
142
  flexWrap: 'wrap',
115
143
  alignItems: 'center'
116
144
  }
117
145
  });
118
- export default Pagination;
146
+
147
+ var _default = Pagination;
148
+ exports.default = _default;
@@ -1,13 +1,33 @@
1
- import React from 'react';
2
- import { Text } from 'react-native';
3
- import PropTypes from 'prop-types';
4
- import ButtonBase from '../Button/ButtonBase';
5
- import { IconText } from '../Icon';
6
- import { useThemeTokensCallback } from '../ThemeProvider';
7
- import { useViewport } from '../ViewportProvider';
8
- import { copyPropTypes, hrefAttrsProp, linkProps, selectTokens } from '../utils';
9
- import dictionary from './dictionary';
10
- import useCopy from '../utils/useCopy';
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 _Text = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Text"));
11
+
12
+ var _propTypes = _interopRequireDefault(require("prop-types"));
13
+
14
+ var _ButtonBase = _interopRequireDefault(require("../Button/ButtonBase"));
15
+
16
+ var _Icon = require("../Icon");
17
+
18
+ var _ThemeProvider = require("../ThemeProvider");
19
+
20
+ var _ViewportProvider = require("../ViewportProvider");
21
+
22
+ var _utils = require("../utils");
23
+
24
+ var _dictionary = _interopRequireDefault(require("./dictionary"));
25
+
26
+ var _useCopy = _interopRequireDefault(require("../utils/useCopy"));
27
+
28
+ var _jsxRuntime = require("react/jsx-runtime");
29
+
30
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
11
31
 
12
32
  const selectIconTokens = ({
13
33
  color,
@@ -35,22 +55,22 @@ function SideButton({
35
55
  tokens,
36
56
  ...props
37
57
  }) {
38
- const viewport = useViewport();
58
+ const viewport = (0, _ViewportProvider.useViewport)();
39
59
  const buttonVariant = {
40
60
  direction,
41
61
  viewport,
42
62
  ...variant
43
63
  };
44
- const getTokens = useThemeTokensCallback('PaginationSideButton', tokens, buttonVariant);
45
- const getCopy = useCopy({
46
- dictionary,
64
+ const getTokens = (0, _ThemeProvider.useThemeTokensCallback)('PaginationSideButton', tokens, buttonVariant);
65
+ const getCopy = (0, _useCopy.default)({
66
+ dictionary: _dictionary.default,
47
67
  copy
48
68
  });
49
69
  const {
50
70
  icon
51
71
  } = getTokens(tokens, buttonVariant);
52
72
 
53
- const getButtonTokens = buttonState => selectTokens('Button', getTokens(buttonState));
73
+ const getButtonTokens = buttonState => (0, _utils.selectTokens)('Button', getTokens(buttonState));
54
74
 
55
75
  const getIconTokens = buttonState => selectIconTokens(getTokens(buttonState), direction);
56
76
 
@@ -58,10 +78,12 @@ function SideButton({
58
78
  const showLabel = viewport !== 'sm' && viewport !== 'xs';
59
79
  const accessibilityLabel = direction === 'previous' ? getCopy('previousLabel') : getCopy('nextLabel');
60
80
  const accessibilityRole = href !== undefined ? 'link' : 'button';
81
+
61
82
  const {
62
83
  hrefAttrs,
63
84
  rest
64
- } = hrefAttrsProp.bundle(props);
85
+ } = _utils.hrefAttrsProp.bundle(props);
86
+
65
87
  const buttonProps = {
66
88
  accessibilityRole,
67
89
  accessibilityLabel,
@@ -70,29 +92,33 @@ function SideButton({
70
92
  hrefAttrs,
71
93
  ...rest
72
94
  };
73
- return /*#__PURE__*/React.createElement(ButtonBase, Object.assign({}, buttonProps, {
74
- tokens: getButtonTokens
75
- }), ({
76
- textStyles,
77
- ...buttonState
78
- }) => {
79
- const iconProps = {
80
- tokens: getIconTokens(buttonState)
81
- };
82
- return /*#__PURE__*/React.createElement(IconText, {
83
- icon: icon,
84
- space: 1,
85
- iconPosition: directionToSide[direction],
86
- iconProps: iconProps
87
- }, showLabel && /*#__PURE__*/React.createElement(Text, {
88
- style: textStyles
89
- }, label));
95
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonBase.default, { ...buttonProps,
96
+ tokens: getButtonTokens,
97
+ children: ({
98
+ textStyles,
99
+ ...buttonState
100
+ }) => {
101
+ const iconProps = {
102
+ tokens: getIconTokens(buttonState)
103
+ };
104
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.IconText, {
105
+ icon: icon,
106
+ space: 1,
107
+ iconPosition: directionToSide[direction],
108
+ iconProps: iconProps,
109
+ children: showLabel && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
110
+ style: textStyles,
111
+ children: label
112
+ })
113
+ });
114
+ }
90
115
  });
91
116
  }
92
117
 
93
118
  SideButton.propTypes = {
94
- direction: PropTypes.oneOf(['previous', 'next']),
95
- copy: copyPropTypes,
96
- ...linkProps.types
119
+ direction: _propTypes.default.oneOf(['previous', 'next']),
120
+ copy: _utils.copyPropTypes,
121
+ ..._utils.linkProps.types
97
122
  };
98
- export default SideButton;
123
+ var _default = SideButton;
124
+ exports.default = _default;
@@ -1,4 +1,10 @@
1
- export default {
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.default = void 0;
7
+ var _default = {
2
8
  en: {
3
9
  goToLabel: 'Go to page number',
4
10
  currentLabel: '(current)',
@@ -15,4 +21,5 @@ export default {
15
21
  nextLabel: 'Aller au prochain page',
16
22
  nextText: 'Suivant'
17
23
  }
18
- };
24
+ };
25
+ exports.default = _default;