@nypl/design-system-react-components 1.0.1 → 1.0.2

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 (396) hide show
  1. package/CHANGELOG.md +1428 -3
  2. package/README.md +391 -3
  3. package/dist/__tests__/fileMock.d.ts +4 -0
  4. package/dist/__tests__/setup.d.ts +2 -0
  5. package/{lib/stories/0-Welcome.stories.d.ts → dist/__tests__/utils/utils.test.d.ts} +1 -1
  6. package/dist/components/Accordion/Accordion.d.ts +21 -0
  7. package/dist/components/Autosuggest/Autosuggest.stories.d.ts +4 -0
  8. package/dist/components/Breadcrumbs/Breadcrumbs.d.ts +18 -0
  9. package/dist/components/Button/Button.d.ts +25 -0
  10. package/dist/components/ButtonGroup/ButtonGroup.d.ts +22 -0
  11. package/dist/components/Card/Card.d.ts +49 -0
  12. package/dist/components/Checkbox/Checkbox.d.ts +47 -0
  13. package/dist/components/CheckboxGroup/CheckboxGroup.d.ts +49 -0
  14. package/dist/components/ComponentWrapper/ComponentWrapper.d.ts +29 -0
  15. package/dist/components/DatePicker/DatePicker.d.ts +81 -0
  16. package/dist/components/Fieldset/Fieldset.d.ts +22 -0
  17. package/dist/components/Form/Form.d.ts +29 -0
  18. package/dist/components/Grid/SimpleGrid.d.ts +17 -0
  19. package/dist/components/Heading/Heading.d.ts +27 -0
  20. package/dist/components/HelperErrorText/HelperErrorText.d.ts +29 -0
  21. package/dist/components/Hero/Hero.d.ts +40 -0
  22. package/dist/components/HorizontalRule/HorizontalRule.d.ts +11 -0
  23. package/dist/components/Icons/Icon.d.ts +37 -0
  24. package/dist/components/Icons/IconSvgs.d.ts +33 -0
  25. package/dist/components/Image/Image.d.ts +61 -0
  26. package/dist/components/Label/Label.d.ts +20 -0
  27. package/dist/components/Link/Link.d.ts +20 -0
  28. package/dist/components/List/List.d.ts +35 -0
  29. package/dist/components/Logo/Logo.d.ts +26 -0
  30. package/dist/components/Logo/LogoSvgs.d.ts +46 -0
  31. package/dist/components/Modal/Modal.d.ts +33 -0
  32. package/dist/components/Notification/Notification.d.ts +50 -0
  33. package/dist/components/Pagination/Pagination.d.ts +27 -0
  34. package/dist/components/Placeholder/Placeholder.d.ts +10 -0
  35. package/dist/components/ProgressIndicator/ProgressIndicator.d.ts +30 -0
  36. package/dist/components/Radio/Radio.d.ts +43 -0
  37. package/dist/components/RadioGroup/RadioGroup.d.ts +51 -0
  38. package/dist/components/SearchBar/SearchBar.d.ts +61 -0
  39. package/dist/components/Select/Select.d.ts +57 -0
  40. package/dist/components/SkeletonLoader/SkeletonLoader.d.ts +39 -0
  41. package/dist/components/SkipNavigation/SkipNavigation.d.ts +17 -0
  42. package/dist/components/Slider/Slider.d.ts +60 -0
  43. package/dist/components/StatusBadge/StatusBadge.d.ts +16 -0
  44. package/dist/components/StructuredContent/StructuredContent.d.ts +28 -0
  45. package/dist/components/StyleGuide/ColorCard.d.ts +12 -0
  46. package/dist/components/Table/Table.d.ts +29 -0
  47. package/dist/components/Tabs/Tabs.d.ts +26 -0
  48. package/dist/components/Template/Template.d.ts +126 -0
  49. package/dist/components/Text/Text.d.ts +16 -0
  50. package/dist/components/TextInput/TextInput.d.ts +78 -0
  51. package/dist/components/Toggle/Toggle.d.ts +42 -0
  52. package/dist/components/VideoPlayer/VideoPlayer.d.ts +38 -0
  53. package/dist/design-system-react-components.cjs.development.js +11305 -0
  54. package/dist/design-system-react-components.cjs.development.js.map +1 -0
  55. package/dist/design-system-react-components.cjs.production.min.js +2 -0
  56. package/dist/design-system-react-components.cjs.production.min.js.map +1 -0
  57. package/dist/design-system-react-components.esm.js +11150 -0
  58. package/dist/design-system-react-components.esm.js.map +1 -0
  59. package/dist/helpers/types.d.ts +1 -0
  60. package/dist/hooks/tests/useCarouselStyles.test.d.ts +1 -0
  61. package/dist/hooks/useCarouselStyles.d.ts +17 -0
  62. package/dist/hooks/useNYPLTheme.d.ts +66 -0
  63. package/dist/hooks/useWindowSize.d.ts +10 -0
  64. package/dist/index.d.ts +48 -0
  65. package/dist/index.js +8 -0
  66. package/dist/resources.scss +386 -0
  67. package/dist/styles.css +3 -0
  68. package/dist/theme/components/accordion.d.ts +20 -0
  69. package/dist/theme/components/breadcrumb.d.ts +105 -0
  70. package/dist/theme/components/button.d.ts +120 -0
  71. package/dist/theme/components/buttonGroup.d.ts +11 -0
  72. package/dist/theme/components/card.d.ts +381 -0
  73. package/dist/theme/components/checkbox.d.ts +95 -0
  74. package/dist/theme/components/checkboxGroup.d.ts +14 -0
  75. package/dist/theme/components/componentWrapper.d.ts +12 -0
  76. package/dist/theme/components/customTable.d.ts +136 -0
  77. package/dist/theme/components/datePicker.d.ts +16 -0
  78. package/dist/theme/components/fieldset.d.ts +20 -0
  79. package/dist/theme/components/global.d.ts +73 -0
  80. package/dist/theme/components/globalMixins.d.ts +23 -0
  81. package/dist/theme/components/heading.d.ts +160 -0
  82. package/dist/theme/components/helperErrorText.d.ts +12 -0
  83. package/dist/theme/components/hero.d.ts +499 -0
  84. package/dist/theme/components/horizontalRule.d.ts +15 -0
  85. package/dist/theme/components/icon.d.ts +47755 -0
  86. package/dist/theme/components/image.d.ts +590 -0
  87. package/dist/theme/components/label.d.ts +18 -0
  88. package/dist/theme/components/link.d.ts +62 -0
  89. package/dist/theme/components/list.d.ts +182 -0
  90. package/dist/theme/components/logo.d.ts +477 -0
  91. package/dist/theme/components/notification.d.ts +95 -0
  92. package/dist/theme/components/pagination.d.ts +16 -0
  93. package/dist/theme/components/progressIndicator.d.ts +52 -0
  94. package/dist/theme/components/radio.d.ts +99 -0
  95. package/dist/theme/components/radioGroup.d.ts +14 -0
  96. package/dist/theme/components/searchBar.d.ts +18 -0
  97. package/dist/theme/components/select.d.ts +87 -0
  98. package/dist/theme/components/skeletonLoader.d.ts +102 -0
  99. package/dist/theme/components/skipNavigation.d.ts +25 -0
  100. package/dist/theme/components/slider.d.ts +59 -0
  101. package/dist/theme/components/statusBadge.d.ts +25 -0
  102. package/dist/theme/components/structuredContent.d.ts +226 -0
  103. package/dist/theme/components/tabs.d.ts +136 -0
  104. package/dist/theme/components/template.d.ts +105 -0
  105. package/dist/theme/components/text.d.ts +26 -0
  106. package/dist/theme/components/textInput.d.ts +124 -0
  107. package/dist/theme/components/toggle.d.ts +92 -0
  108. package/dist/theme/components/videoPlayer.d.ts +40 -0
  109. package/dist/theme/foundations/breakpoints.d.ts +23 -0
  110. package/dist/theme/foundations/colors.d.ts +3 -0
  111. package/dist/theme/foundations/global.d.ts +58 -0
  112. package/dist/theme/foundations/radii.d.ts +6 -0
  113. package/dist/theme/foundations/shadows.d.ts +4 -0
  114. package/dist/theme/foundations/spacing.d.ts +82 -0
  115. package/dist/theme/foundations/typography.d.ts +8 -0
  116. package/dist/theme/index.d.ts +20 -0
  117. package/dist/theme/provider.d.ts +3 -0
  118. package/dist/theme/types.d.ts +1 -0
  119. package/dist/utils/componentCategories.d.ts +1 -0
  120. package/dist/utils/interfaces.d.ts +5 -0
  121. package/dist/utils/utils.d.ts +31 -0
  122. package/package.json +133 -20
  123. package/src/__tests__/fileMock.ts +6 -0
  124. package/src/__tests__/setup.ts +27 -0
  125. package/src/__tests__/utils/utils.test.ts +18 -0
  126. package/src/components/AccessibilityGuide/SkipNavigation.stories.mdx +42 -0
  127. package/src/components/Accordion/Accordion.stories.mdx +333 -0
  128. package/src/components/Accordion/Accordion.test.tsx +237 -0
  129. package/src/components/Accordion/Accordion.tsx +137 -0
  130. package/src/components/Accordion/__snapshots__/Accordion.test.tsx.snap +734 -0
  131. package/src/components/Autosuggest/Autosuggest.stories.mdx +75 -0
  132. package/src/components/Autosuggest/Autosuggest.stories.tsx +211 -0
  133. package/src/components/Autosuggest/_Autosuggest.scss +51 -0
  134. package/src/components/Breadcrumbs/Breadcrumbs.stories.mdx +231 -0
  135. package/src/components/Breadcrumbs/Breadcrumbs.test.tsx +144 -0
  136. package/src/components/Breadcrumbs/Breadcrumbs.tsx +98 -0
  137. package/src/components/Breadcrumbs/__snapshots__/Breadcrumbs.test.tsx.snap +695 -0
  138. package/src/components/Button/Button.stories.mdx +320 -0
  139. package/src/components/Button/Button.test.tsx +184 -0
  140. package/src/components/Button/Button.tsx +95 -0
  141. package/src/components/Button/__snapshots__/Button.test.tsx.snap +106 -0
  142. package/src/components/ButtonGroup/ButtonGroup.stories.mdx +178 -0
  143. package/src/components/ButtonGroup/ButtonGroup.test.tsx +141 -0
  144. package/src/components/ButtonGroup/ButtonGroup.tsx +100 -0
  145. package/src/components/ButtonGroup/__snapshots__/ButtonGroup.test.tsx.snap +117 -0
  146. package/src/components/Card/Card.stories.mdx +1041 -0
  147. package/src/components/Card/Card.test.tsx +388 -0
  148. package/src/components/Card/Card.tsx +346 -0
  149. package/src/components/Card/__snapshots__/Card.test.tsx.snap +568 -0
  150. package/src/components/Chakra/Box.stories.mdx +52 -0
  151. package/src/components/Chakra/Center.stories.mdx +96 -0
  152. package/src/components/Chakra/Flex.stories.mdx +111 -0
  153. package/src/components/Chakra/Grid.stories.mdx +89 -0
  154. package/src/components/Chakra/Stack.stories.mdx +109 -0
  155. package/src/components/Checkbox/Checkbox.stories.mdx +243 -0
  156. package/src/components/Checkbox/Checkbox.test.tsx +350 -0
  157. package/src/components/Checkbox/Checkbox.tsx +152 -0
  158. package/src/components/Checkbox/__snapshots__/Checkbox.test.tsx.snap +661 -0
  159. package/src/components/CheckboxGroup/CheckboxGroup.stories.mdx +462 -0
  160. package/src/components/CheckboxGroup/CheckboxGroup.test.tsx +492 -0
  161. package/src/components/CheckboxGroup/CheckboxGroup.tsx +173 -0
  162. package/src/components/CheckboxGroup/__snapshots__/CheckboxGroup.test.tsx.snap +1842 -0
  163. package/src/components/ComponentWrapper/ComponentWrapper.test.tsx +163 -0
  164. package/src/components/ComponentWrapper/ComponentWrapper.tsx +76 -0
  165. package/src/components/ComponentWrapper/__snapshots__/ComponentWrapper.test.tsx.snap +103 -0
  166. package/src/components/DatePicker/DatePicker.stories.mdx +452 -0
  167. package/src/components/DatePicker/DatePicker.test.tsx +940 -0
  168. package/src/components/DatePicker/DatePicker.tsx +450 -0
  169. package/src/components/DatePicker/_DatePicker.scss +100 -0
  170. package/src/components/DatePicker/__snapshots__/DatePicker.test.tsx.snap +908 -0
  171. package/src/components/Fieldset/Fieldset.stories.mdx +96 -0
  172. package/src/components/Fieldset/Fieldset.test.tsx +155 -0
  173. package/src/components/Fieldset/Fieldset.tsx +55 -0
  174. package/src/components/Fieldset/__snapshots__/Fieldset.test.tsx.snap +89 -0
  175. package/src/components/Form/Form.stories.mdx +426 -0
  176. package/src/components/Form/Form.test.tsx +234 -0
  177. package/src/components/Form/Form.tsx +124 -0
  178. package/src/components/Form/__snapshots__/Form.test.tsx.snap +115 -0
  179. package/src/components/Grid/SimpleGrid.stories.mdx +336 -0
  180. package/src/components/Grid/SimpleGrid.test.tsx +79 -0
  181. package/src/components/Grid/SimpleGrid.tsx +49 -0
  182. package/src/components/Grid/__snapshots__/SimpleGrid.test.tsx.snap +23 -0
  183. package/src/components/Heading/Heading.stories.mdx +187 -0
  184. package/src/components/Heading/Heading.test.tsx +171 -0
  185. package/src/components/Heading/Heading.tsx +104 -0
  186. package/src/components/Heading/__snapshots__/Heading.test.tsx.snap +90 -0
  187. package/src/components/HelperErrorText/HelperErrorText.stories.mdx +172 -0
  188. package/src/components/HelperErrorText/HelperErrorText.test.tsx +114 -0
  189. package/src/components/HelperErrorText/HelperErrorText.tsx +62 -0
  190. package/src/components/HelperErrorText/__snapshots__/HelperErrorText.test.tsx.snap +93 -0
  191. package/src/components/Hero/Hero.stories.mdx +378 -0
  192. package/src/components/Hero/Hero.test.tsx +611 -0
  193. package/src/components/Hero/Hero.tsx +203 -0
  194. package/src/components/Hero/__snapshots__/Hero.test.tsx.snap +379 -0
  195. package/src/components/HorizontalRule/HorizontalRule.stories.mdx +73 -0
  196. package/src/components/HorizontalRule/HorizontalRule.test.tsx +54 -0
  197. package/src/components/HorizontalRule/HorizontalRule.tsx +27 -0
  198. package/src/components/HorizontalRule/__snapshots__/HorizontalRule.test.tsx.snap +44 -0
  199. package/src/components/Icons/Icon.stories.mdx +413 -0
  200. package/src/components/Icons/Icon.test.tsx +120 -0
  201. package/src/components/Icons/Icon.tsx +187 -0
  202. package/src/components/Icons/IconSvgs.tsx +64 -0
  203. package/src/components/Icons/__snapshots__/Icon.test.tsx.snap +129 -0
  204. package/src/components/Image/Image.stories.mdx +332 -0
  205. package/src/components/Image/Image.test.tsx +155 -0
  206. package/src/components/Image/Image.tsx +171 -0
  207. package/src/components/Image/__snapshots__/Image.test.tsx.snap +269 -0
  208. package/src/components/Label/Label.stories.mdx +100 -0
  209. package/src/components/Label/Label.test.tsx +116 -0
  210. package/src/components/Label/Label.tsx +55 -0
  211. package/src/components/Label/__snapshots__/Label.test.tsx.snap +45 -0
  212. package/src/components/Link/Link.stories.mdx +249 -0
  213. package/src/components/Link/Link.test.tsx +224 -0
  214. package/src/components/Link/Link.tsx +178 -0
  215. package/src/components/Link/__snapshots__/Link.test.tsx.snap +286 -0
  216. package/src/components/List/List.stories.mdx +393 -0
  217. package/src/components/List/List.test.tsx +265 -0
  218. package/src/components/List/List.tsx +156 -0
  219. package/src/components/List/__snapshots__/List.test.tsx.snap +213 -0
  220. package/src/components/Logo/Logo.stories.mdx +295 -0
  221. package/src/components/Logo/Logo.test.tsx +116 -0
  222. package/src/components/Logo/Logo.tsx +151 -0
  223. package/src/components/Logo/LogoSvgs.tsx +90 -0
  224. package/src/components/Logo/__snapshots__/Logo.test.tsx.snap +142 -0
  225. package/src/components/Modal/Modal.stories.mdx +294 -0
  226. package/src/components/Modal/Modal.test.tsx +157 -0
  227. package/src/components/Modal/Modal.tsx +154 -0
  228. package/src/components/Modal/__snapshots__/Modal.test.tsx.snap +25 -0
  229. package/src/components/Notification/Notification.stories.mdx +358 -0
  230. package/src/components/Notification/Notification.test.tsx +279 -0
  231. package/src/components/Notification/Notification.tsx +224 -0
  232. package/src/components/Notification/__snapshots__/Notification.test.tsx.snap +525 -0
  233. package/src/components/Pagination/Pagination.stories.mdx +184 -0
  234. package/src/components/Pagination/Pagination.test.tsx +419 -0
  235. package/src/components/Pagination/Pagination.tsx +269 -0
  236. package/src/components/Pagination/__snapshots__/Pagination.test.tsx.snap +544 -0
  237. package/src/components/Placeholder/Placeholder.tsx +19 -0
  238. package/src/components/ProgressIndicator/ProgressIndicator.stories.mdx +360 -0
  239. package/src/components/ProgressIndicator/ProgressIndicator.test.tsx +298 -0
  240. package/src/components/ProgressIndicator/ProgressIndicator.tsx +132 -0
  241. package/src/components/ProgressIndicator/__snapshots__/ProgressIndicator.test.tsx.snap +434 -0
  242. package/src/components/Radio/Radio.stories.mdx +216 -0
  243. package/src/components/Radio/Radio.test.tsx +247 -0
  244. package/src/components/Radio/Radio.tsx +119 -0
  245. package/src/components/Radio/__snapshots__/Radio.test.tsx.snap +451 -0
  246. package/src/components/RadioGroup/RadioGroup.stories.mdx +479 -0
  247. package/src/components/RadioGroup/RadioGroup.test.tsx +471 -0
  248. package/src/components/RadioGroup/RadioGroup.tsx +171 -0
  249. package/src/components/RadioGroup/__snapshots__/RadioGroup.test.tsx.snap +1550 -0
  250. package/src/components/SearchBar/SearchBar.stories.mdx +518 -0
  251. package/src/components/SearchBar/SearchBar.test.tsx +435 -0
  252. package/src/components/SearchBar/SearchBar.tsx +210 -0
  253. package/src/components/SearchBar/__snapshots__/SearchBar.test.tsx.snap +1049 -0
  254. package/src/components/Select/Select.stories.mdx +439 -0
  255. package/src/components/Select/Select.test.tsx +358 -0
  256. package/src/components/Select/Select.tsx +183 -0
  257. package/src/components/Select/__snapshots__/Select.test.tsx.snap +895 -0
  258. package/src/components/SkeletonLoader/SkeletonLoader.stories.mdx +142 -0
  259. package/src/components/SkeletonLoader/SkeletonLoader.test.tsx +116 -0
  260. package/src/components/SkeletonLoader/SkeletonLoader.tsx +123 -0
  261. package/src/components/SkeletonLoader/__snapshots__/SkeletonLoader.test.tsx.snap +898 -0
  262. package/src/components/SkipNavigation/SkipNavigation.stories.mdx +90 -0
  263. package/src/components/SkipNavigation/SkipNavigation.test.tsx +63 -0
  264. package/src/components/SkipNavigation/SkipNavigation.tsx +51 -0
  265. package/src/components/SkipNavigation/__snapshots__/SkipNavigation.test.tsx.snap +130 -0
  266. package/src/components/Slider/Slider.stories.mdx +628 -0
  267. package/src/components/Slider/Slider.test.tsx +736 -0
  268. package/src/components/Slider/Slider.tsx +322 -0
  269. package/src/components/Slider/__snapshots__/Slider.test.tsx.snap +2186 -0
  270. package/src/components/StatusBadge/StatusBadge.stories.mdx +109 -0
  271. package/src/components/StatusBadge/StatusBadge.test.tsx +70 -0
  272. package/src/components/StatusBadge/StatusBadge.tsx +35 -0
  273. package/src/components/StatusBadge/__snapshots__/StatusBadge.test.tsx.snap +47 -0
  274. package/src/components/StructuredContent/StructuredContent.stories.mdx +567 -0
  275. package/src/components/StructuredContent/StructuredContent.test.tsx +435 -0
  276. package/src/components/StructuredContent/StructuredContent.tsx +139 -0
  277. package/src/components/StructuredContent/__snapshots__/StructuredContent.test.tsx.snap +368 -0
  278. package/src/components/StyleGuide/Bidirectionality.stories.mdx +206 -0
  279. package/src/components/StyleGuide/Breakpoints.stories.mdx +55 -0
  280. package/src/components/StyleGuide/Buttons.stories.mdx +194 -0
  281. package/src/components/StyleGuide/ColorCard.tsx +43 -0
  282. package/src/components/StyleGuide/Colors.stories.mdx +201 -0
  283. package/src/components/StyleGuide/DesignTokens.stories.mdx +193 -0
  284. package/src/components/StyleGuide/Forms.stories.mdx +94 -0
  285. package/src/components/StyleGuide/Iconography.stories.mdx +142 -0
  286. package/src/components/StyleGuide/Spacing.stories.mdx +116 -0
  287. package/src/components/StyleGuide/Typography.stories.mdx +419 -0
  288. package/src/components/Table/Table.stories.mdx +272 -0
  289. package/src/components/Table/Table.test.tsx +241 -0
  290. package/src/components/Table/Table.tsx +152 -0
  291. package/src/components/Table/__snapshots__/Table.test.tsx.snap +1703 -0
  292. package/src/components/Tabs/Tabs.stories.mdx +338 -0
  293. package/src/components/Tabs/Tabs.test.tsx +298 -0
  294. package/src/components/Tabs/Tabs.tsx +264 -0
  295. package/src/components/Tabs/__snapshots__/Tabs.test.tsx.snap +584 -0
  296. package/src/components/Template/Template.stories.mdx +695 -0
  297. package/src/components/Template/Template.test.tsx +309 -0
  298. package/src/components/Template/Template.tsx +326 -0
  299. package/src/components/Template/__snapshots__/Template.test.tsx.snap +342 -0
  300. package/src/components/Text/Text.stories.mdx +103 -0
  301. package/src/components/Text/Text.test.tsx +63 -0
  302. package/src/components/Text/Text.tsx +50 -0
  303. package/src/components/Text/__snapshots__/Text.test.tsx.snap +50 -0
  304. package/src/components/TextInput/TextInput.stories.mdx +268 -0
  305. package/src/components/TextInput/TextInput.test.tsx +451 -0
  306. package/src/components/TextInput/TextInput.tsx +240 -0
  307. package/src/components/TextInput/__snapshots__/TextInput.test.tsx.snap +274 -0
  308. package/src/components/Toggle/Toggle.stories.mdx +237 -0
  309. package/src/components/Toggle/Toggle.test.tsx +170 -0
  310. package/src/components/Toggle/Toggle.tsx +128 -0
  311. package/src/components/Toggle/__snapshots__/Toggle.test.tsx.snap +470 -0
  312. package/src/components/VideoPlayer/VideoPlayer.stories.mdx +212 -0
  313. package/src/components/VideoPlayer/VideoPlayer.test.tsx +308 -0
  314. package/src/components/VideoPlayer/VideoPlayer.tsx +188 -0
  315. package/src/components/VideoPlayer/__snapshots__/VideoPlayer.test.tsx.snap +192 -0
  316. package/src/docs/Chakra.stories.mdx +563 -0
  317. package/src/docs/Welcome.stories.mdx +148 -0
  318. package/src/helpers/types.ts +1 -0
  319. package/src/hooks/tests/useCarouselStyles.test.ts +140 -0
  320. package/src/hooks/tests/useNYPLTheme.test.tsx +36 -0
  321. package/src/hooks/useCarouselStyles.stories.mdx +30 -0
  322. package/src/hooks/useCarouselStyles.ts +35 -0
  323. package/src/hooks/useNYPLTheme.stories.mdx +98 -0
  324. package/src/hooks/useNYPLTheme.ts +91 -0
  325. package/src/hooks/useWindowSize.stories.mdx +23 -0
  326. package/src/hooks/useWindowSize.ts +40 -0
  327. package/src/index.ts +136 -0
  328. package/src/resources.scss +6 -0
  329. package/src/styles/base/_01-breakpoints.scss +27 -0
  330. package/src/styles/base/_02-mixins.scss +103 -0
  331. package/src/styles/base/_place-holder.scss +33 -0
  332. package/src/styles/space/_space-inline.scss +79 -0
  333. package/src/styles/space/_space-inset.scss +57 -0
  334. package/src/styles/space/_space-stack.scss +116 -0
  335. package/src/styles.scss +23 -0
  336. package/src/theme/components/accordion.ts +25 -0
  337. package/src/theme/components/breadcrumb.ts +94 -0
  338. package/src/theme/components/button.ts +133 -0
  339. package/src/theme/components/buttonGroup.ts +10 -0
  340. package/src/theme/components/card.ts +237 -0
  341. package/src/theme/components/checkbox.ts +110 -0
  342. package/src/theme/components/checkboxGroup.ts +10 -0
  343. package/src/theme/components/componentWrapper.ts +14 -0
  344. package/src/theme/components/customTable.ts +77 -0
  345. package/src/theme/components/datePicker.ts +17 -0
  346. package/src/theme/components/fieldset.ts +23 -0
  347. package/src/theme/components/global.ts +91 -0
  348. package/src/theme/components/globalMixins.ts +24 -0
  349. package/src/theme/components/heading.ts +79 -0
  350. package/src/theme/components/helperErrorText.ts +14 -0
  351. package/src/theme/components/hero.ts +238 -0
  352. package/src/theme/components/horizontalRule.ts +17 -0
  353. package/src/theme/components/icon.ts +88 -0
  354. package/src/theme/components/image.ts +136 -0
  355. package/src/theme/components/label.ts +15 -0
  356. package/src/theme/components/link.ts +63 -0
  357. package/src/theme/components/list.ts +88 -0
  358. package/src/theme/components/logo.ts +58 -0
  359. package/src/theme/components/notification.ts +132 -0
  360. package/src/theme/components/pagination.ts +17 -0
  361. package/src/theme/components/progressIndicator.ts +67 -0
  362. package/src/theme/components/radio.ts +103 -0
  363. package/src/theme/components/radioGroup.ts +10 -0
  364. package/src/theme/components/searchBar.ts +19 -0
  365. package/src/theme/components/select.ts +72 -0
  366. package/src/theme/components/skeletonLoader.ts +113 -0
  367. package/src/theme/components/skipNavigation.ts +29 -0
  368. package/src/theme/components/slider.ts +95 -0
  369. package/src/theme/components/statusBadge.ts +26 -0
  370. package/src/theme/components/structuredContent.ts +149 -0
  371. package/src/theme/components/tabs.ts +109 -0
  372. package/src/theme/components/template.ts +114 -0
  373. package/src/theme/components/text.ts +38 -0
  374. package/src/theme/components/textInput.ts +65 -0
  375. package/src/theme/components/toggle.ts +109 -0
  376. package/src/theme/components/videoPlayer.ts +47 -0
  377. package/src/theme/foundations/breakpoints.ts +24 -0
  378. package/src/theme/foundations/colors.ts +212 -0
  379. package/src/theme/foundations/global.ts +43 -0
  380. package/src/theme/foundations/radii.ts +7 -0
  381. package/src/theme/foundations/shadows.ts +5 -0
  382. package/src/theme/foundations/spacing.ts +136 -0
  383. package/src/theme/foundations/typography.ts +107 -0
  384. package/src/theme/index.ts +131 -0
  385. package/src/theme/provider.tsx +9 -0
  386. package/src/theme/types.ts +1 -0
  387. package/src/utils/componentCategories.ts +152 -0
  388. package/src/utils/interfaces.ts +5 -0
  389. package/src/utils/utils.ts +84 -0
  390. package/lib/components/Button/Button.d.ts +0 -17
  391. package/lib/components/Button/Button.js +0 -42
  392. package/lib/index.d.ts +0 -1
  393. package/lib/index.js +0 -6
  394. package/lib/stories/0-Welcome.stories.js +0 -19
  395. package/lib/stories/1-Button.stories.d.ts +0 -6
  396. package/lib/stories/1-Button.stories.js +0 -20
package/src/components/SkeletonLoader/__snapshots__/SkeletonLoader.test.tsx.snap ADDED
@@ -0,0 +1,898 @@
1
+ // Jest Snapshot v1, https://goo.gl/fbAQLP
2
+
3
+ exports[`SkeletonLoader renders the UI snapshot correctly 1`] = `
4
+ <div
5
+ className="css-1xdhyk6"
6
+ style={
7
+ Object {
8
+ "width": undefined,
9
+ }
10
+ }
11
+ >
12
+ <div
13
+ className="chakra-skeleton css-1twknw3"
14
+ >
15
+ <div
16
+ className="css-0"
17
+ />
18
+ </div>
19
+ <div
20
+ className="column css-0"
21
+ >
22
+ <div
23
+ className="css-0"
24
+ >
25
+ <div
26
+ className="chakra-skeleton css-tz3wol"
27
+ >
28
+ <div
29
+ className="css-0"
30
+ style={
31
+ Object {
32
+ "marginBottom": undefined,
33
+ }
34
+ }
35
+ />
36
+ </div>
37
+ </div>
38
+ <div
39
+ className="css-0"
40
+ >
41
+ <div
42
+ className="chakra-skeleton css-1akrz52"
43
+ >
44
+ <div
45
+ className="css-0"
46
+ style={
47
+ Object {
48
+ "marginBottom": undefined,
49
+ }
50
+ }
51
+ />
52
+ </div>
53
+ <div
54
+ className="chakra-skeleton css-1akrz52"
55
+ >
56
+ <div
57
+ className="css-0"
58
+ style={
59
+ Object {
60
+ "marginBottom": undefined,
61
+ }
62
+ }
63
+ />
64
+ </div>
65
+ <div
66
+ className="chakra-skeleton css-qaeww3"
67
+ >
68
+ <div
69
+ className="css-0"
70
+ style={
71
+ Object {
72
+ "marginBottom": "0",
73
+ }
74
+ }
75
+ />
76
+ </div>
77
+ </div>
78
+ </div>
79
+ </div>
80
+ `;
81
+
82
+ exports[`SkeletonLoader renders the UI snapshot correctly 2`] = `
83
+ <div
84
+ className="css-1xdhyk6"
85
+ style={
86
+ Object {
87
+ "width": undefined,
88
+ }
89
+ }
90
+ >
91
+ <div
92
+ className="chakra-skeleton css-1twknw3"
93
+ >
94
+ <div
95
+ className="css-0"
96
+ />
97
+ </div>
98
+ <div
99
+ className="row css-0"
100
+ >
101
+ <div
102
+ className="css-0"
103
+ >
104
+ <div
105
+ className="chakra-skeleton css-tz3wol"
106
+ >
107
+ <div
108
+ className="css-0"
109
+ style={
110
+ Object {
111
+ "marginBottom": undefined,
112
+ }
113
+ }
114
+ />
115
+ </div>
116
+ </div>
117
+ <div
118
+ className="css-0"
119
+ >
120
+ <div
121
+ className="chakra-skeleton css-1akrz52"
122
+ >
123
+ <div
124
+ className="css-0"
125
+ style={
126
+ Object {
127
+ "marginBottom": undefined,
128
+ }
129
+ }
130
+ />
131
+ </div>
132
+ <div
133
+ className="chakra-skeleton css-1akrz52"
134
+ >
135
+ <div
136
+ className="css-0"
137
+ style={
138
+ Object {
139
+ "marginBottom": undefined,
140
+ }
141
+ }
142
+ />
143
+ </div>
144
+ <div
145
+ className="chakra-skeleton css-qaeww3"
146
+ >
147
+ <div
148
+ className="css-0"
149
+ style={
150
+ Object {
151
+ "marginBottom": "0",
152
+ }
153
+ }
154
+ />
155
+ </div>
156
+ </div>
157
+ </div>
158
+ </div>
159
+ `;
160
+
161
+ exports[`SkeletonLoader renders the UI snapshot correctly 3`] = `
162
+ <div
163
+ className="css-1xdhyk6"
164
+ style={
165
+ Object {
166
+ "width": undefined,
167
+ }
168
+ }
169
+ >
170
+ <div
171
+ className="chakra-skeleton css-1twknw3"
172
+ >
173
+ <div
174
+ className="css-0"
175
+ />
176
+ </div>
177
+ <div
178
+ className="column css-0"
179
+ >
180
+ <div
181
+ className="css-0"
182
+ >
183
+ <div
184
+ className="chakra-skeleton css-tz3wol"
185
+ >
186
+ <div
187
+ className="css-0"
188
+ style={
189
+ Object {
190
+ "marginBottom": undefined,
191
+ }
192
+ }
193
+ />
194
+ </div>
195
+ </div>
196
+ <div
197
+ className="css-0"
198
+ >
199
+ <div
200
+ className="chakra-skeleton css-1akrz52"
201
+ >
202
+ <div
203
+ className="css-0"
204
+ style={
205
+ Object {
206
+ "marginBottom": undefined,
207
+ }
208
+ }
209
+ />
210
+ </div>
211
+ <div
212
+ className="chakra-skeleton css-1akrz52"
213
+ >
214
+ <div
215
+ className="css-0"
216
+ style={
217
+ Object {
218
+ "marginBottom": undefined,
219
+ }
220
+ }
221
+ />
222
+ </div>
223
+ <div
224
+ className="chakra-skeleton css-qaeww3"
225
+ >
226
+ <div
227
+ className="css-0"
228
+ style={
229
+ Object {
230
+ "marginBottom": "0",
231
+ }
232
+ }
233
+ />
234
+ </div>
235
+ </div>
236
+ </div>
237
+ </div>
238
+ `;
239
+
240
+ exports[`SkeletonLoader renders the UI snapshot correctly 4`] = `
241
+ <div
242
+ className="css-1xdhyk6"
243
+ style={
244
+ Object {
245
+ "width": undefined,
246
+ }
247
+ }
248
+ >
249
+ <div
250
+ className="column css-0"
251
+ >
252
+ <div
253
+ className="css-0"
254
+ >
255
+ <div
256
+ className="chakra-skeleton css-tz3wol"
257
+ >
258
+ <div
259
+ className="css-0"
260
+ style={
261
+ Object {
262
+ "marginBottom": undefined,
263
+ }
264
+ }
265
+ />
266
+ </div>
267
+ </div>
268
+ <div
269
+ className="css-0"
270
+ >
271
+ <div
272
+ className="chakra-skeleton css-1akrz52"
273
+ >
274
+ <div
275
+ className="css-0"
276
+ style={
277
+ Object {
278
+ "marginBottom": undefined,
279
+ }
280
+ }
281
+ />
282
+ </div>
283
+ <div
284
+ className="chakra-skeleton css-1akrz52"
285
+ >
286
+ <div
287
+ className="css-0"
288
+ style={
289
+ Object {
290
+ "marginBottom": undefined,
291
+ }
292
+ }
293
+ />
294
+ </div>
295
+ <div
296
+ className="chakra-skeleton css-qaeww3"
297
+ >
298
+ <div
299
+ className="css-0"
300
+ style={
301
+ Object {
302
+ "marginBottom": "0",
303
+ }
304
+ }
305
+ />
306
+ </div>
307
+ </div>
308
+ </div>
309
+ </div>
310
+ `;
311
+
312
+ exports[`SkeletonLoader renders the UI snapshot correctly 5`] = `
313
+ <div
314
+ className="css-1xdhyk6"
315
+ style={
316
+ Object {
317
+ "width": undefined,
318
+ }
319
+ }
320
+ >
321
+ <div
322
+ className="chakra-skeleton css-1twknw3"
323
+ >
324
+ <div
325
+ className="css-0"
326
+ />
327
+ </div>
328
+ <div
329
+ className="column css-0"
330
+ >
331
+ <div
332
+ className="css-0"
333
+ >
334
+ <div
335
+ className="chakra-skeleton css-1akrz52"
336
+ >
337
+ <div
338
+ className="css-0"
339
+ style={
340
+ Object {
341
+ "marginBottom": undefined,
342
+ }
343
+ }
344
+ />
345
+ </div>
346
+ <div
347
+ className="chakra-skeleton css-1akrz52"
348
+ >
349
+ <div
350
+ className="css-0"
351
+ style={
352
+ Object {
353
+ "marginBottom": undefined,
354
+ }
355
+ }
356
+ />
357
+ </div>
358
+ <div
359
+ className="chakra-skeleton css-qaeww3"
360
+ >
361
+ <div
362
+ className="css-0"
363
+ style={
364
+ Object {
365
+ "marginBottom": "0",
366
+ }
367
+ }
368
+ />
369
+ </div>
370
+ </div>
371
+ </div>
372
+ </div>
373
+ `;
374
+
375
+ exports[`SkeletonLoader renders the UI snapshot correctly 6`] = `
376
+ <div
377
+ className="css-1xdhyk6"
378
+ style={
379
+ Object {
380
+ "width": undefined,
381
+ }
382
+ }
383
+ >
384
+ <div
385
+ className="chakra-skeleton css-1twknw3"
386
+ >
387
+ <div
388
+ className="css-0"
389
+ />
390
+ </div>
391
+ <div
392
+ className="column css-0"
393
+ >
394
+ <div
395
+ className="css-0"
396
+ >
397
+ <div
398
+ className="chakra-skeleton css-tz3wol"
399
+ >
400
+ <div
401
+ className="css-0"
402
+ style={
403
+ Object {
404
+ "marginBottom": undefined,
405
+ }
406
+ }
407
+ />
408
+ </div>
409
+ </div>
410
+ </div>
411
+ </div>
412
+ `;
413
+
414
+ exports[`SkeletonLoader renders the UI snapshot correctly 7`] = `
415
+ <div
416
+ className="css-1xdhyk6"
417
+ style={
418
+ Object {
419
+ "width": undefined,
420
+ }
421
+ }
422
+ >
423
+ <div
424
+ className="chakra-skeleton css-1twknw3"
425
+ >
426
+ <div
427
+ className="css-0"
428
+ />
429
+ </div>
430
+ <div
431
+ className="column css-0"
432
+ >
433
+ <div
434
+ className="css-0"
435
+ >
436
+ <div
437
+ className="chakra-skeleton css-tz3wol"
438
+ >
439
+ <div
440
+ className="css-0"
441
+ style={
442
+ Object {
443
+ "marginBottom": undefined,
444
+ }
445
+ }
446
+ />
447
+ </div>
448
+ </div>
449
+ <div
450
+ className="css-0"
451
+ >
452
+ <div
453
+ className="chakra-skeleton css-1akrz52"
454
+ >
455
+ <div
456
+ className="css-0"
457
+ style={
458
+ Object {
459
+ "marginBottom": undefined,
460
+ }
461
+ }
462
+ />
463
+ </div>
464
+ <div
465
+ className="chakra-skeleton css-1akrz52"
466
+ >
467
+ <div
468
+ className="css-0"
469
+ style={
470
+ Object {
471
+ "marginBottom": undefined,
472
+ }
473
+ }
474
+ />
475
+ </div>
476
+ <div
477
+ className="chakra-skeleton css-qaeww3"
478
+ >
479
+ <div
480
+ className="css-0"
481
+ style={
482
+ Object {
483
+ "marginBottom": "0",
484
+ }
485
+ }
486
+ />
487
+ </div>
488
+ </div>
489
+ <div
490
+ className="css-0"
491
+ >
492
+ <div
493
+ className="chakra-skeleton css-uhwxm5"
494
+ >
495
+ <div
496
+ className="css-0"
497
+ />
498
+ </div>
499
+ </div>
500
+ </div>
501
+ </div>
502
+ `;
503
+
504
+ exports[`SkeletonLoader renders the UI snapshot correctly 8`] = `
505
+ <div
506
+ className="css-1xdhyk6"
507
+ style={
508
+ Object {
509
+ "width": undefined,
510
+ }
511
+ }
512
+ >
513
+ <div
514
+ className="chakra-skeleton css-1twknw3"
515
+ >
516
+ <div
517
+ className="css-0"
518
+ />
519
+ </div>
520
+ <div
521
+ className="column css-0"
522
+ >
523
+ <div
524
+ className="css-0"
525
+ >
526
+ <div
527
+ className="chakra-skeleton css-tz3wol"
528
+ >
529
+ <div
530
+ className="css-0"
531
+ style={
532
+ Object {
533
+ "marginBottom": undefined,
534
+ }
535
+ }
536
+ />
537
+ </div>
538
+ </div>
539
+ <div
540
+ className="css-0"
541
+ >
542
+ <div
543
+ className="chakra-skeleton css-1akrz52"
544
+ >
545
+ <div
546
+ className="css-0"
547
+ style={
548
+ Object {
549
+ "marginBottom": undefined,
550
+ }
551
+ }
552
+ />
553
+ </div>
554
+ <div
555
+ className="chakra-skeleton css-1akrz52"
556
+ >
557
+ <div
558
+ className="css-0"
559
+ style={
560
+ Object {
561
+ "marginBottom": undefined,
562
+ }
563
+ }
564
+ />
565
+ </div>
566
+ <div
567
+ className="chakra-skeleton css-qaeww3"
568
+ >
569
+ <div
570
+ className="css-0"
571
+ style={
572
+ Object {
573
+ "marginBottom": "0",
574
+ }
575
+ }
576
+ />
577
+ </div>
578
+ </div>
579
+ </div>
580
+ </div>
581
+ `;
582
+
583
+ exports[`SkeletonLoader renders the UI snapshot correctly 9`] = `
584
+ <div
585
+ className="css-1xdhyk6"
586
+ style={
587
+ Object {
588
+ "width": undefined,
589
+ }
590
+ }
591
+ >
592
+ <div
593
+ className="chakra-skeleton css-1twknw3"
594
+ >
595
+ <div
596
+ className="css-0"
597
+ />
598
+ </div>
599
+ <div
600
+ className="column css-0"
601
+ >
602
+ <div
603
+ className="css-0"
604
+ >
605
+ <div
606
+ className="chakra-skeleton css-tz3wol"
607
+ >
608
+ <div
609
+ className="css-0"
610
+ style={
611
+ Object {
612
+ "marginBottom": undefined,
613
+ }
614
+ }
615
+ />
616
+ </div>
617
+ </div>
618
+ <div
619
+ className="css-0"
620
+ >
621
+ <div
622
+ className="chakra-skeleton css-1akrz52"
623
+ >
624
+ <div
625
+ className="css-0"
626
+ style={
627
+ Object {
628
+ "marginBottom": undefined,
629
+ }
630
+ }
631
+ />
632
+ </div>
633
+ <div
634
+ className="chakra-skeleton css-1akrz52"
635
+ >
636
+ <div
637
+ className="css-0"
638
+ style={
639
+ Object {
640
+ "marginBottom": undefined,
641
+ }
642
+ }
643
+ />
644
+ </div>
645
+ <div
646
+ className="chakra-skeleton css-qaeww3"
647
+ >
648
+ <div
649
+ className="css-0"
650
+ style={
651
+ Object {
652
+ "marginBottom": "0",
653
+ }
654
+ }
655
+ />
656
+ </div>
657
+ </div>
658
+ </div>
659
+ </div>
660
+ `;
661
+
662
+ exports[`SkeletonLoader renders the UI snapshot correctly 10`] = `
663
+ <div
664
+ className="css-1xdhyk6"
665
+ style={
666
+ Object {
667
+ "width": undefined,
668
+ }
669
+ }
670
+ >
671
+ <div
672
+ className="chakra-skeleton css-1twknw3"
673
+ >
674
+ <div
675
+ className="css-0"
676
+ />
677
+ </div>
678
+ <div
679
+ className="column css-0"
680
+ >
681
+ <div
682
+ className="css-0"
683
+ >
684
+ <div
685
+ className="chakra-skeleton css-tz3wol"
686
+ >
687
+ <div
688
+ className="css-0"
689
+ style={
690
+ Object {
691
+ "marginBottom": undefined,
692
+ }
693
+ }
694
+ />
695
+ </div>
696
+ </div>
697
+ <div
698
+ className="css-0"
699
+ >
700
+ <div
701
+ className="chakra-skeleton css-1akrz52"
702
+ >
703
+ <div
704
+ className="css-0"
705
+ style={
706
+ Object {
707
+ "marginBottom": undefined,
708
+ }
709
+ }
710
+ />
711
+ </div>
712
+ <div
713
+ className="chakra-skeleton css-1akrz52"
714
+ >
715
+ <div
716
+ className="css-0"
717
+ style={
718
+ Object {
719
+ "marginBottom": undefined,
720
+ }
721
+ }
722
+ />
723
+ </div>
724
+ <div
725
+ className="chakra-skeleton css-qaeww3"
726
+ >
727
+ <div
728
+ className="css-0"
729
+ style={
730
+ Object {
731
+ "marginBottom": "0",
732
+ }
733
+ }
734
+ />
735
+ </div>
736
+ </div>
737
+ </div>
738
+ </div>
739
+ `;
740
+
741
+ exports[`SkeletonLoader renders the UI snapshot correctly 11`] = `
742
+ <div
743
+ className="css-kle7zy"
744
+ style={
745
+ Object {
746
+ "width": undefined,
747
+ }
748
+ }
749
+ >
750
+ <div
751
+ className="chakra-skeleton css-1twknw3"
752
+ >
753
+ <div
754
+ className="css-0"
755
+ />
756
+ </div>
757
+ <div
758
+ className="column css-0"
759
+ >
760
+ <div
761
+ className="css-0"
762
+ >
763
+ <div
764
+ className="chakra-skeleton css-tz3wol"
765
+ >
766
+ <div
767
+ className="css-0"
768
+ style={
769
+ Object {
770
+ "marginBottom": undefined,
771
+ }
772
+ }
773
+ />
774
+ </div>
775
+ </div>
776
+ <div
777
+ className="css-0"
778
+ >
779
+ <div
780
+ className="chakra-skeleton css-1akrz52"
781
+ >
782
+ <div
783
+ className="css-0"
784
+ style={
785
+ Object {
786
+ "marginBottom": undefined,
787
+ }
788
+ }
789
+ />
790
+ </div>
791
+ <div
792
+ className="chakra-skeleton css-1akrz52"
793
+ >
794
+ <div
795
+ className="css-0"
796
+ style={
797
+ Object {
798
+ "marginBottom": undefined,
799
+ }
800
+ }
801
+ />
802
+ </div>
803
+ <div
804
+ className="chakra-skeleton css-qaeww3"
805
+ >
806
+ <div
807
+ className="css-0"
808
+ style={
809
+ Object {
810
+ "marginBottom": "0",
811
+ }
812
+ }
813
+ />
814
+ </div>
815
+ </div>
816
+ </div>
817
+ </div>
818
+ `;
819
+
820
+ exports[`SkeletonLoader renders the UI snapshot correctly 12`] = `
821
+ <div
822
+ className="css-1xdhyk6"
823
+ data-testid="props"
824
+ style={
825
+ Object {
826
+ "width": undefined,
827
+ }
828
+ }
829
+ >
830
+ <div
831
+ className="chakra-skeleton css-1twknw3"
832
+ >
833
+ <div
834
+ className="css-0"
835
+ />
836
+ </div>
837
+ <div
838
+ className="column css-0"
839
+ >
840
+ <div
841
+ className="css-0"
842
+ >
843
+ <div
844
+ className="chakra-skeleton css-tz3wol"
845
+ >
846
+ <div
847
+ className="css-0"
848
+ style={
849
+ Object {
850
+ "marginBottom": undefined,
851
+ }
852
+ }
853
+ />
854
+ </div>
855
+ </div>
856
+ <div
857
+ className="css-0"
858
+ >
859
+ <div
860
+ className="chakra-skeleton css-1akrz52"
861
+ >
862
+ <div
863
+ className="css-0"
864
+ style={
865
+ Object {
866
+ "marginBottom": undefined,
867
+ }
868
+ }
869
+ />
870
+ </div>
871
+ <div
872
+ className="chakra-skeleton css-1akrz52"
873
+ >
874
+ <div
875
+ className="css-0"
876
+ style={
877
+ Object {
878
+ "marginBottom": undefined,
879
+ }
880
+ }
881
+ />
882
+ </div>
883
+ <div
884
+ className="chakra-skeleton css-qaeww3"
885
+ >
886
+ <div
887
+ className="css-0"
888
+ style={
889
+ Object {
890
+ "marginBottom": "0",
891
+ }
892
+ }
893
+ />
894
+ </div>
895
+ </div>
896
+ </div>
897
+ </div>
898
+ `;