@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/Breadcrumbs/__snapshots__/Breadcrumbs.test.tsx.snap ADDED
@@ -0,0 +1,695 @@
1
+ // Jest Snapshot v1, https://goo.gl/fbAQLP
2
+
3
+ exports[`Breadcrumbs Snapshot Renders the UI snapshot correctly 1`] = `
4
+ <nav
5
+ aria-label="Breadcrumb"
6
+ className="chakra-breadcrumb css-1xdhyk6"
7
+ id="breadcrumbs-test"
8
+ >
9
+ <ol
10
+ className="chakra-breadcrumb__list css-0"
11
+ >
12
+ <li
13
+ className="chakra-breadcrumb__list-item css-18biwo"
14
+ >
15
+ <a
16
+ className="chakra-breadcrumb__link css-0"
17
+ href="#string1"
18
+ >
19
+ <span
20
+ className="breadcrumb-label"
21
+ >
22
+ string1
23
+ </span>
24
+ </a>
25
+ <span
26
+ className="css-t4q1nq"
27
+ role="presentation"
28
+ >
29
+ /
30
+ </span>
31
+ </li>
32
+ <li
33
+ className="chakra-breadcrumb__list-item css-18biwo"
34
+ >
35
+ <a
36
+ className="chakra-breadcrumb__link css-0"
37
+ href="#string2"
38
+ >
39
+ <svg
40
+ aria-hidden={true}
41
+ className="chakra-icon breadcrumbs-icon css-1grhd2q"
42
+ focusable={false}
43
+ id="breadcrumbs-test__backarrow"
44
+ role="img"
45
+ title="arrow icon"
46
+ viewBox="0 0 24 24"
47
+ >
48
+ <g
49
+ stroke="currentColor"
50
+ strokeWidth="1.5"
51
+ >
52
+ <path
53
+ d="M9,9a3,3,0,1,1,4,2.829,1.5,1.5,0,0,0-1,1.415V14.25"
54
+ fill="none"
55
+ strokeLinecap="round"
56
+ />
57
+ <path
58
+ d="M12,17.25a.375.375,0,1,0,.375.375A.375.375,0,0,0,12,17.25h0"
59
+ fill="currentColor"
60
+ strokeLinecap="round"
61
+ />
62
+ <circle
63
+ cx="12"
64
+ cy="12"
65
+ fill="none"
66
+ r="11.25"
67
+ strokeMiterlimit="10"
68
+ />
69
+ </g>
70
+ </svg>
71
+ <span
72
+ className="breadcrumb-label"
73
+ >
74
+ string2
75
+ </span>
76
+ </a>
77
+ <span
78
+ className="css-t4q1nq"
79
+ role="presentation"
80
+ >
81
+ /
82
+ </span>
83
+ </li>
84
+ <li
85
+ className="chakra-breadcrumb__list-item css-18biwo"
86
+ >
87
+ <span
88
+ aria-current="page"
89
+ className="chakra-breadcrumb__link css-0"
90
+ >
91
+ <span
92
+ className="breadcrumb-label"
93
+ >
94
+ string3
95
+ </span>
96
+ </span>
97
+ </li>
98
+ </ol>
99
+ </nav>
100
+ `;
101
+
102
+ exports[`Breadcrumbs Snapshot Renders the UI snapshot correctly 2`] = `
103
+ <nav
104
+ aria-label="Breadcrumb"
105
+ className="chakra-breadcrumb css-1xdhyk6"
106
+ id="breadcrumbs-test"
107
+ >
108
+ <ol
109
+ className="chakra-breadcrumb__list css-0"
110
+ >
111
+ <li
112
+ className="chakra-breadcrumb__list-item css-18biwo"
113
+ >
114
+ <a
115
+ className="chakra-breadcrumb__link css-0"
116
+ href="#string1"
117
+ >
118
+ <span
119
+ className="breadcrumb-label"
120
+ >
121
+ string1
122
+ </span>
123
+ </a>
124
+ <span
125
+ className="css-t4q1nq"
126
+ role="presentation"
127
+ >
128
+ /
129
+ </span>
130
+ </li>
131
+ <li
132
+ className="chakra-breadcrumb__list-item css-18biwo"
133
+ >
134
+ <a
135
+ className="chakra-breadcrumb__link css-0"
136
+ href="#string2"
137
+ >
138
+ <svg
139
+ aria-hidden={true}
140
+ className="chakra-icon breadcrumbs-icon css-1grhd2q"
141
+ focusable={false}
142
+ id="breadcrumbs-test__backarrow"
143
+ role="img"
144
+ title="arrow icon"
145
+ viewBox="0 0 24 24"
146
+ >
147
+ <g
148
+ stroke="currentColor"
149
+ strokeWidth="1.5"
150
+ >
151
+ <path
152
+ d="M9,9a3,3,0,1,1,4,2.829,1.5,1.5,0,0,0-1,1.415V14.25"
153
+ fill="none"
154
+ strokeLinecap="round"
155
+ />
156
+ <path
157
+ d="M12,17.25a.375.375,0,1,0,.375.375A.375.375,0,0,0,12,17.25h0"
158
+ fill="currentColor"
159
+ strokeLinecap="round"
160
+ />
161
+ <circle
162
+ cx="12"
163
+ cy="12"
164
+ fill="none"
165
+ r="11.25"
166
+ strokeMiterlimit="10"
167
+ />
168
+ </g>
169
+ </svg>
170
+ <span
171
+ className="breadcrumb-label"
172
+ >
173
+ string2
174
+ </span>
175
+ </a>
176
+ <span
177
+ className="css-t4q1nq"
178
+ role="presentation"
179
+ >
180
+ /
181
+ </span>
182
+ </li>
183
+ <li
184
+ className="chakra-breadcrumb__list-item css-18biwo"
185
+ >
186
+ <span
187
+ aria-current="page"
188
+ className="chakra-breadcrumb__link css-0"
189
+ >
190
+ <span
191
+ className="breadcrumb-label"
192
+ >
193
+ string3
194
+ </span>
195
+ </span>
196
+ </li>
197
+ </ol>
198
+ </nav>
199
+ `;
200
+
201
+ exports[`Breadcrumbs Snapshot Renders the UI snapshot correctly 3`] = `
202
+ <nav
203
+ aria-label="Breadcrumb"
204
+ className="chakra-breadcrumb css-1xdhyk6"
205
+ id="breadcrumbs-test"
206
+ >
207
+ <ol
208
+ className="chakra-breadcrumb__list css-0"
209
+ >
210
+ <li
211
+ className="chakra-breadcrumb__list-item css-18biwo"
212
+ >
213
+ <a
214
+ className="chakra-breadcrumb__link css-0"
215
+ href="#string1"
216
+ >
217
+ <span
218
+ className="breadcrumb-label"
219
+ >
220
+ string1
221
+ </span>
222
+ </a>
223
+ <span
224
+ className="css-t4q1nq"
225
+ role="presentation"
226
+ >
227
+ /
228
+ </span>
229
+ </li>
230
+ <li
231
+ className="chakra-breadcrumb__list-item css-18biwo"
232
+ >
233
+ <a
234
+ className="chakra-breadcrumb__link css-0"
235
+ href="#string2"
236
+ >
237
+ <svg
238
+ aria-hidden={true}
239
+ className="chakra-icon breadcrumbs-icon css-1grhd2q"
240
+ focusable={false}
241
+ id="breadcrumbs-test__backarrow"
242
+ role="img"
243
+ title="arrow icon"
244
+ viewBox="0 0 24 24"
245
+ >
246
+ <g
247
+ stroke="currentColor"
248
+ strokeWidth="1.5"
249
+ >
250
+ <path
251
+ d="M9,9a3,3,0,1,1,4,2.829,1.5,1.5,0,0,0-1,1.415V14.25"
252
+ fill="none"
253
+ strokeLinecap="round"
254
+ />
255
+ <path
256
+ d="M12,17.25a.375.375,0,1,0,.375.375A.375.375,0,0,0,12,17.25h0"
257
+ fill="currentColor"
258
+ strokeLinecap="round"
259
+ />
260
+ <circle
261
+ cx="12"
262
+ cy="12"
263
+ fill="none"
264
+ r="11.25"
265
+ strokeMiterlimit="10"
266
+ />
267
+ </g>
268
+ </svg>
269
+ <span
270
+ className="breadcrumb-label"
271
+ >
272
+ string2
273
+ </span>
274
+ </a>
275
+ <span
276
+ className="css-t4q1nq"
277
+ role="presentation"
278
+ >
279
+ /
280
+ </span>
281
+ </li>
282
+ <li
283
+ className="chakra-breadcrumb__list-item css-18biwo"
284
+ >
285
+ <span
286
+ aria-current="page"
287
+ className="chakra-breadcrumb__link css-0"
288
+ >
289
+ <span
290
+ className="breadcrumb-label"
291
+ >
292
+ string3
293
+ </span>
294
+ </span>
295
+ </li>
296
+ </ol>
297
+ </nav>
298
+ `;
299
+
300
+ exports[`Breadcrumbs Snapshot Renders the UI snapshot correctly 4`] = `
301
+ <nav
302
+ aria-label="Breadcrumb"
303
+ className="chakra-breadcrumb css-1xdhyk6"
304
+ id="breadcrumbs-test"
305
+ >
306
+ <ol
307
+ className="chakra-breadcrumb__list css-0"
308
+ >
309
+ <li
310
+ className="chakra-breadcrumb__list-item css-18biwo"
311
+ >
312
+ <a
313
+ className="chakra-breadcrumb__link css-0"
314
+ href="#string1"
315
+ >
316
+ <span
317
+ className="breadcrumb-label"
318
+ >
319
+ string1
320
+ </span>
321
+ </a>
322
+ <span
323
+ className="css-t4q1nq"
324
+ role="presentation"
325
+ >
326
+ /
327
+ </span>
328
+ </li>
329
+ <li
330
+ className="chakra-breadcrumb__list-item css-18biwo"
331
+ >
332
+ <a
333
+ className="chakra-breadcrumb__link css-0"
334
+ href="#string2"
335
+ >
336
+ <svg
337
+ aria-hidden={true}
338
+ className="chakra-icon breadcrumbs-icon css-1grhd2q"
339
+ focusable={false}
340
+ id="breadcrumbs-test__backarrow"
341
+ role="img"
342
+ title="arrow icon"
343
+ viewBox="0 0 24 24"
344
+ >
345
+ <g
346
+ stroke="currentColor"
347
+ strokeWidth="1.5"
348
+ >
349
+ <path
350
+ d="M9,9a3,3,0,1,1,4,2.829,1.5,1.5,0,0,0-1,1.415V14.25"
351
+ fill="none"
352
+ strokeLinecap="round"
353
+ />
354
+ <path
355
+ d="M12,17.25a.375.375,0,1,0,.375.375A.375.375,0,0,0,12,17.25h0"
356
+ fill="currentColor"
357
+ strokeLinecap="round"
358
+ />
359
+ <circle
360
+ cx="12"
361
+ cy="12"
362
+ fill="none"
363
+ r="11.25"
364
+ strokeMiterlimit="10"
365
+ />
366
+ </g>
367
+ </svg>
368
+ <span
369
+ className="breadcrumb-label"
370
+ >
371
+ string2
372
+ </span>
373
+ </a>
374
+ <span
375
+ className="css-t4q1nq"
376
+ role="presentation"
377
+ >
378
+ /
379
+ </span>
380
+ </li>
381
+ <li
382
+ className="chakra-breadcrumb__list-item css-18biwo"
383
+ >
384
+ <span
385
+ aria-current="page"
386
+ className="chakra-breadcrumb__link css-0"
387
+ >
388
+ <span
389
+ className="breadcrumb-label"
390
+ >
391
+ string3
392
+ </span>
393
+ </span>
394
+ </li>
395
+ </ol>
396
+ </nav>
397
+ `;
398
+
399
+ exports[`Breadcrumbs Snapshot Renders the UI snapshot correctly 5`] = `
400
+ <nav
401
+ aria-label="Breadcrumb"
402
+ className="chakra-breadcrumb css-1xdhyk6"
403
+ id="breadcrumbs-test"
404
+ >
405
+ <ol
406
+ className="chakra-breadcrumb__list css-0"
407
+ >
408
+ <li
409
+ className="chakra-breadcrumb__list-item css-18biwo"
410
+ >
411
+ <a
412
+ className="chakra-breadcrumb__link css-0"
413
+ href="#string1"
414
+ >
415
+ <span
416
+ className="breadcrumb-label"
417
+ >
418
+ string1
419
+ </span>
420
+ </a>
421
+ <span
422
+ className="css-t4q1nq"
423
+ role="presentation"
424
+ >
425
+ /
426
+ </span>
427
+ </li>
428
+ <li
429
+ className="chakra-breadcrumb__list-item css-18biwo"
430
+ >
431
+ <a
432
+ className="chakra-breadcrumb__link css-0"
433
+ href="#string2"
434
+ >
435
+ <svg
436
+ aria-hidden={true}
437
+ className="chakra-icon breadcrumbs-icon css-1grhd2q"
438
+ focusable={false}
439
+ id="breadcrumbs-test__backarrow"
440
+ role="img"
441
+ title="arrow icon"
442
+ viewBox="0 0 24 24"
443
+ >
444
+ <g
445
+ stroke="currentColor"
446
+ strokeWidth="1.5"
447
+ >
448
+ <path
449
+ d="M9,9a3,3,0,1,1,4,2.829,1.5,1.5,0,0,0-1,1.415V14.25"
450
+ fill="none"
451
+ strokeLinecap="round"
452
+ />
453
+ <path
454
+ d="M12,17.25a.375.375,0,1,0,.375.375A.375.375,0,0,0,12,17.25h0"
455
+ fill="currentColor"
456
+ strokeLinecap="round"
457
+ />
458
+ <circle
459
+ cx="12"
460
+ cy="12"
461
+ fill="none"
462
+ r="11.25"
463
+ strokeMiterlimit="10"
464
+ />
465
+ </g>
466
+ </svg>
467
+ <span
468
+ className="breadcrumb-label"
469
+ >
470
+ string2
471
+ </span>
472
+ </a>
473
+ <span
474
+ className="css-t4q1nq"
475
+ role="presentation"
476
+ >
477
+ /
478
+ </span>
479
+ </li>
480
+ <li
481
+ className="chakra-breadcrumb__list-item css-18biwo"
482
+ >
483
+ <span
484
+ aria-current="page"
485
+ className="chakra-breadcrumb__link css-0"
486
+ >
487
+ <span
488
+ className="breadcrumb-label"
489
+ >
490
+ string3
491
+ </span>
492
+ </span>
493
+ </li>
494
+ </ol>
495
+ </nav>
496
+ `;
497
+
498
+ exports[`Breadcrumbs Snapshot Renders the UI snapshot correctly 6`] = `
499
+ <nav
500
+ aria-label="Breadcrumb"
501
+ className="chakra-breadcrumb css-1t0bvx9"
502
+ id="breadcrumbs-test"
503
+ >
504
+ <ol
505
+ className="chakra-breadcrumb__list css-0"
506
+ >
507
+ <li
508
+ className="chakra-breadcrumb__list-item css-18biwo"
509
+ >
510
+ <a
511
+ className="chakra-breadcrumb__link css-0"
512
+ href="#string1"
513
+ >
514
+ <span
515
+ className="breadcrumb-label"
516
+ >
517
+ string1
518
+ </span>
519
+ </a>
520
+ <span
521
+ className="css-t4q1nq"
522
+ role="presentation"
523
+ >
524
+ /
525
+ </span>
526
+ </li>
527
+ <li
528
+ className="chakra-breadcrumb__list-item css-18biwo"
529
+ >
530
+ <a
531
+ className="chakra-breadcrumb__link css-0"
532
+ href="#string2"
533
+ >
534
+ <svg
535
+ aria-hidden={true}
536
+ className="chakra-icon breadcrumbs-icon css-1grhd2q"
537
+ focusable={false}
538
+ id="breadcrumbs-test__backarrow"
539
+ role="img"
540
+ title="arrow icon"
541
+ viewBox="0 0 24 24"
542
+ >
543
+ <g
544
+ stroke="currentColor"
545
+ strokeWidth="1.5"
546
+ >
547
+ <path
548
+ d="M9,9a3,3,0,1,1,4,2.829,1.5,1.5,0,0,0-1,1.415V14.25"
549
+ fill="none"
550
+ strokeLinecap="round"
551
+ />
552
+ <path
553
+ d="M12,17.25a.375.375,0,1,0,.375.375A.375.375,0,0,0,12,17.25h0"
554
+ fill="currentColor"
555
+ strokeLinecap="round"
556
+ />
557
+ <circle
558
+ cx="12"
559
+ cy="12"
560
+ fill="none"
561
+ r="11.25"
562
+ strokeMiterlimit="10"
563
+ />
564
+ </g>
565
+ </svg>
566
+ <span
567
+ className="breadcrumb-label"
568
+ >
569
+ string2
570
+ </span>
571
+ </a>
572
+ <span
573
+ className="css-t4q1nq"
574
+ role="presentation"
575
+ >
576
+ /
577
+ </span>
578
+ </li>
579
+ <li
580
+ className="chakra-breadcrumb__list-item css-18biwo"
581
+ >
582
+ <span
583
+ aria-current="page"
584
+ className="chakra-breadcrumb__link css-0"
585
+ >
586
+ <span
587
+ className="breadcrumb-label"
588
+ >
589
+ string3
590
+ </span>
591
+ </span>
592
+ </li>
593
+ </ol>
594
+ </nav>
595
+ `;
596
+
597
+ exports[`Breadcrumbs Snapshot Renders the UI snapshot correctly 7`] = `
598
+ <nav
599
+ aria-label="Breadcrumb"
600
+ className="chakra-breadcrumb css-1xdhyk6"
601
+ data-testid="testid"
602
+ id="breadcrumbs-test"
603
+ >
604
+ <ol
605
+ className="chakra-breadcrumb__list css-0"
606
+ >
607
+ <li
608
+ className="chakra-breadcrumb__list-item css-18biwo"
609
+ >
610
+ <a
611
+ className="chakra-breadcrumb__link css-0"
612
+ href="#string1"
613
+ >
614
+ <span
615
+ className="breadcrumb-label"
616
+ >
617
+ string1
618
+ </span>
619
+ </a>
620
+ <span
621
+ className="css-t4q1nq"
622
+ role="presentation"
623
+ >
624
+ /
625
+ </span>
626
+ </li>
627
+ <li
628
+ className="chakra-breadcrumb__list-item css-18biwo"
629
+ >
630
+ <a
631
+ className="chakra-breadcrumb__link css-0"
632
+ href="#string2"
633
+ >
634
+ <svg
635
+ aria-hidden={true}
636
+ className="chakra-icon breadcrumbs-icon css-1grhd2q"
637
+ focusable={false}
638
+ id="breadcrumbs-test__backarrow"
639
+ role="img"
640
+ title="arrow icon"
641
+ viewBox="0 0 24 24"
642
+ >
643
+ <g
644
+ stroke="currentColor"
645
+ strokeWidth="1.5"
646
+ >
647
+ <path
648
+ d="M9,9a3,3,0,1,1,4,2.829,1.5,1.5,0,0,0-1,1.415V14.25"
649
+ fill="none"
650
+ strokeLinecap="round"
651
+ />
652
+ <path
653
+ d="M12,17.25a.375.375,0,1,0,.375.375A.375.375,0,0,0,12,17.25h0"
654
+ fill="currentColor"
655
+ strokeLinecap="round"
656
+ />
657
+ <circle
658
+ cx="12"
659
+ cy="12"
660
+ fill="none"
661
+ r="11.25"
662
+ strokeMiterlimit="10"
663
+ />
664
+ </g>
665
+ </svg>
666
+ <span
667
+ className="breadcrumb-label"
668
+ >
669
+ string2
670
+ </span>
671
+ </a>
672
+ <span
673
+ className="css-t4q1nq"
674
+ role="presentation"
675
+ >
676
+ /
677
+ </span>
678
+ </li>
679
+ <li
680
+ className="chakra-breadcrumb__list-item css-18biwo"
681
+ >
682
+ <span
683
+ aria-current="page"
684
+ className="chakra-breadcrumb__link css-0"
685
+ >
686
+ <span
687
+ className="breadcrumb-label"
688
+ >
689
+ string3
690
+ </span>
691
+ </span>
692
+ </li>
693
+ </ol>
694
+ </nav>
695
+ `;