@nypl/design-system-react-components 0.25.1 → 0.25.5

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 (307) hide show
  1. package/CHANGELOG.md +118 -1
  2. package/README.md +98 -50
  3. package/dist/components/Breadcrumbs/Breadcrumbs.d.ts +4 -0
  4. package/dist/components/Button/Button.d.ts +13 -8
  5. package/dist/components/Button/ButtonTypes.d.ts +2 -1
  6. package/dist/components/Card/Card.d.ts +36 -52
  7. package/dist/components/Card/CardTypes.d.ts +0 -15
  8. package/dist/components/Checkbox/Checkbox.d.ts +17 -13
  9. package/dist/components/CheckboxGroup/CheckboxGroup.d.ts +4 -2
  10. package/dist/components/ComponentWrapper/ComponentWrapper.d.ts +15 -0
  11. package/dist/components/DatePicker/DatePicker.d.ts +36 -34
  12. package/dist/components/Fieldset/Fieldset.d.ts +25 -0
  13. package/dist/components/Heading/Heading.d.ts +4 -4
  14. package/dist/components/HelperErrorText/HelperErrorText.d.ts +17 -14
  15. package/dist/components/HorizontalRule/HorizontalRule.d.ts +10 -9
  16. package/dist/components/Icons/Icon.d.ts +8 -0
  17. package/dist/components/Icons/IconSvgs.d.ts +11 -0
  18. package/dist/components/Icons/IconTypes.d.ts +11 -0
  19. package/dist/components/Image/Image.d.ts +19 -9
  20. package/dist/components/Image/ImageTypes.d.ts +20 -0
  21. package/dist/components/Link/Link.d.ts +4 -0
  22. package/dist/components/List/List.d.ts +19 -14
  23. package/dist/components/Notification/Notification.d.ts +37 -16
  24. package/dist/components/Pagination/Pagination.d.ts +16 -13
  25. package/dist/components/Pagination/Pagination.stories.d.ts +2 -0
  26. package/dist/components/ProgressIndicator/ProgressIndicator.d.ts +29 -0
  27. package/dist/components/ProgressIndicator/ProgressIndicatorTypes.d.ts +8 -0
  28. package/dist/components/Radio/Radio.d.ts +2 -0
  29. package/dist/components/RadioGroup/RadioGroup.d.ts +4 -2
  30. package/dist/components/SearchBar/SearchBar.d.ts +3 -3
  31. package/dist/components/Select/Select.d.ts +2 -0
  32. package/dist/components/SkeletonLoader/SkeletonLoader.d.ts +18 -14
  33. package/dist/components/Slider/Slider.d.ts +57 -0
  34. package/dist/components/StyleGuide/ColorCard.d.ts +12 -0
  35. package/dist/components/Tabs/Tabs.d.ts +1 -1
  36. package/dist/components/TextInput/TextInput.d.ts +12 -0
  37. package/dist/components/VideoPlayer/VideoPlayer.d.ts +6 -8
  38. package/dist/components/VideoPlayer/VideoPlayerTypes.d.ts +2 -2
  39. package/dist/design-system-react-components.cjs.development.js +6131 -3715
  40. package/dist/design-system-react-components.cjs.development.js.map +1 -1
  41. package/dist/design-system-react-components.cjs.production.min.js +1 -1
  42. package/dist/design-system-react-components.cjs.production.min.js.map +1 -1
  43. package/dist/design-system-react-components.esm.js +6124 -3699
  44. package/dist/design-system-react-components.esm.js.map +1 -1
  45. package/dist/hooks/tests/useCarouselStyles.test.d.ts +1 -0
  46. package/dist/hooks/useCarouselStyles.d.ts +16 -0
  47. package/dist/hooks/useNYPLTheme.d.ts +54 -0
  48. package/dist/hooks/useWindowSize.d.ts +10 -0
  49. package/dist/index.d.ts +13 -8
  50. package/dist/resources.scss +180 -170
  51. package/dist/styles.css +1 -1
  52. package/dist/theme/components/button.d.ts +22 -8
  53. package/dist/theme/components/card.d.ts +168 -0
  54. package/dist/theme/components/checkbox.d.ts +5 -1
  55. package/dist/theme/components/checkboxGroup.d.ts +12 -0
  56. package/dist/theme/components/componentWrapper.d.ts +11 -0
  57. package/dist/theme/components/datePicker.d.ts +16 -0
  58. package/dist/theme/components/fieldset.d.ts +27 -0
  59. package/dist/theme/components/global.d.ts +23 -13
  60. package/dist/theme/components/globalMixins.d.ts +9 -1
  61. package/dist/theme/components/heading.d.ts +5 -0
  62. package/dist/theme/components/helperErrorText.d.ts +10 -0
  63. package/dist/theme/components/hero.d.ts +1 -0
  64. package/dist/theme/components/horizontalRule.d.ts +14 -0
  65. package/dist/theme/components/image.d.ts +31 -0
  66. package/dist/theme/components/label.d.ts +5 -3
  67. package/dist/theme/components/link.d.ts +4 -0
  68. package/dist/theme/components/list.d.ts +89 -0
  69. package/dist/theme/components/notification.d.ts +75 -0
  70. package/dist/theme/components/pagination.d.ts +19 -0
  71. package/dist/theme/components/progressIndicator.d.ts +50 -0
  72. package/dist/theme/components/radioGroup.d.ts +12 -0
  73. package/dist/theme/components/select.d.ts +11 -2
  74. package/dist/theme/components/skeletonLoader.d.ts +98 -0
  75. package/dist/theme/components/slider.d.ts +51 -0
  76. package/dist/theme/components/tabs.d.ts +54 -3
  77. package/dist/theme/components/textInput.d.ts +8 -1
  78. package/dist/theme/components/videoPlayer.d.ts +40 -0
  79. package/dist/theme/foundations/breakpoints.d.ts +8 -8
  80. package/dist/theme/foundations/global.d.ts +6 -1
  81. package/dist/theme/foundations/radii.d.ts +5 -0
  82. package/dist/theme/foundations/spacing.d.ts +16 -16
  83. package/package.json +72 -83
  84. package/src/__tests__/setup.ts +2 -2
  85. package/src/components/Accordion/Accordion.stories.mdx +39 -44
  86. package/src/components/Autosuggest/Autosuggest.stories.mdx +3 -3
  87. package/src/components/Autosuggest/Autosuggest.stories.tsx +2 -1
  88. package/src/components/Autosuggest/_Autosuggest.scss +5 -5
  89. package/src/components/Breadcrumbs/Breadcrumbs.stories.mdx +14 -10
  90. package/src/components/Breadcrumbs/Breadcrumbs.test.tsx +23 -0
  91. package/src/components/Breadcrumbs/Breadcrumbs.tsx +5 -1
  92. package/src/components/Breadcrumbs/__snapshots__/Breadcrumbs.test.tsx.snap +199 -1
  93. package/src/components/Button/Button.stories.mdx +15 -10
  94. package/src/components/Button/Button.test.tsx +21 -7
  95. package/src/components/Button/Button.tsx +22 -34
  96. package/src/components/Button/ButtonTypes.tsx +1 -0
  97. package/src/components/Button/__snapshots__/Button.test.tsx.snap +41 -10
  98. package/src/components/Card/Card.stories.mdx +296 -259
  99. package/src/components/Card/Card.test.tsx +156 -84
  100. package/src/components/Card/Card.tsx +195 -145
  101. package/src/components/Card/CardTypes.tsx +0 -17
  102. package/src/components/Card/__snapshots__/Card.test.tsx.snap +410 -0
  103. package/src/components/CardEdition/CardEdition.stories.tsx +15 -47
  104. package/src/components/CardEdition/_CardEdition.scss +22 -23
  105. package/src/components/Chakra/Box.stories.mdx +15 -16
  106. package/src/components/Chakra/Center.stories.mdx +31 -16
  107. package/src/components/Chakra/Grid.stories.mdx +28 -15
  108. package/src/components/Chakra/Stack.stories.mdx +35 -18
  109. package/src/components/Checkbox/Checkbox.stories.mdx +33 -11
  110. package/src/components/Checkbox/Checkbox.test.tsx +47 -2
  111. package/src/components/Checkbox/Checkbox.tsx +39 -33
  112. package/src/components/Checkbox/__snapshots__/Checkbox.test.tsx.snap +90 -2
  113. package/src/components/CheckboxGroup/CheckboxGroup.stories.mdx +82 -2
  114. package/src/components/CheckboxGroup/CheckboxGroup.test.tsx +29 -2
  115. package/src/components/CheckboxGroup/CheckboxGroup.tsx +22 -18
  116. package/src/components/CheckboxGroup/__snapshots__/CheckboxGroup.test.tsx.snap +47 -81
  117. package/src/components/ComponentWrapper/ComponentWrapper.tsx +63 -0
  118. package/src/components/DatePicker/DatePicker.stories.mdx +163 -62
  119. package/src/components/DatePicker/DatePicker.test.tsx +264 -64
  120. package/src/components/DatePicker/DatePicker.tsx +159 -128
  121. package/src/components/DatePicker/_DatePicker.scss +33 -67
  122. package/src/components/DatePicker/__snapshots__/DatePicker.test.tsx.snap +818 -0
  123. package/src/components/Fieldset/Fieldset.stories.mdx +55 -0
  124. package/src/components/Fieldset/Fieldset.test.tsx +125 -0
  125. package/src/components/Fieldset/Fieldset.tsx +52 -0
  126. package/src/components/Fieldset/__snapshots__/Fieldset.test.tsx.snap +68 -0
  127. package/src/components/Form/Form.stories.mdx +24 -6
  128. package/src/components/Form/Form.test.tsx +1 -1
  129. package/src/components/Form/Form.tsx +1 -0
  130. package/src/components/Grid/SimpleGrid.stories.mdx +32 -39
  131. package/src/components/Grid/SimpleGrid.test.tsx +4 -4
  132. package/src/components/Heading/Heading.stories.mdx +3 -4
  133. package/src/components/Heading/Heading.tsx +5 -5
  134. package/src/components/HelperErrorText/HelperErrorText.stories.mdx +124 -0
  135. package/src/components/HelperErrorText/HelperErrorText.test.tsx +39 -44
  136. package/src/components/HelperErrorText/HelperErrorText.tsx +37 -39
  137. package/src/components/HelperErrorText/__snapshots__/HelperErrorText.test.tsx.snap +25 -0
  138. package/src/components/Hero/Hero.stories.mdx +12 -2
  139. package/src/components/Hero/Hero.tsx +1 -1
  140. package/src/components/Hero/HeroTypes.tsx +1 -0
  141. package/src/components/Hero/__snapshots__/Hero.test.tsx.snap +7 -7
  142. package/src/components/HorizontalRule/HorizontalRule.stories.mdx +8 -6
  143. package/src/components/HorizontalRule/HorizontalRule.test.tsx +33 -28
  144. package/src/components/HorizontalRule/HorizontalRule.tsx +27 -29
  145. package/src/components/HorizontalRule/__snapshots__/HorizontalRule.test.tsx.snap +27 -9
  146. package/src/components/Icons/Icon.stories.mdx +12 -4
  147. package/src/components/Icons/Icon.test.tsx +18 -0
  148. package/src/components/Icons/Icon.tsx +16 -1
  149. package/src/components/Icons/IconSvgs.tsx +22 -0
  150. package/src/components/Icons/IconTypes.tsx +11 -0
  151. package/src/components/Image/Image.stories.mdx +220 -0
  152. package/src/components/Image/Image.test.tsx +131 -29
  153. package/src/components/Image/Image.tsx +84 -56
  154. package/src/components/Image/ImageTypes.ts +22 -0
  155. package/src/components/Image/__snapshots__/Image.test.tsx.snap +190 -0
  156. package/src/components/Input/Input.stories.tsx +23 -67
  157. package/src/components/Input/Input.test.tsx +4 -4
  158. package/src/components/Input/_Input.scss +23 -14
  159. package/src/components/Link/Link.tsx +4 -1
  160. package/src/components/List/List.stories.mdx +124 -49
  161. package/src/components/List/List.test.tsx +142 -63
  162. package/src/components/List/List.tsx +89 -93
  163. package/src/components/List/__snapshots__/List.test.tsx.snap +109 -0
  164. package/src/components/Modal/Modal.stories.mdx +3 -3
  165. package/src/components/Modal/_Modal.scss +2 -2
  166. package/src/components/Notification/Notification.stories.mdx +109 -112
  167. package/src/components/Notification/Notification.test.tsx +99 -110
  168. package/src/components/Notification/Notification.tsx +156 -159
  169. package/src/components/Notification/__snapshots__/Notification.test.tsx.snap +159 -8
  170. package/src/components/Pagination/Pagination.stories.mdx +26 -27
  171. package/src/components/Pagination/Pagination.stories.tsx +11 -16
  172. package/src/components/Pagination/Pagination.test.tsx +276 -146
  173. package/src/components/Pagination/Pagination.tsx +174 -154
  174. package/src/components/Pagination/__snapshots__/Pagination.test.tsx.snap +285 -0
  175. package/src/components/ProgressIndicator/ProgressIndicator.stories.mdx +292 -0
  176. package/src/components/ProgressIndicator/ProgressIndicator.test.tsx +225 -0
  177. package/src/components/ProgressIndicator/ProgressIndicator.tsx +126 -0
  178. package/src/components/ProgressIndicator/ProgressIndicatorTypes.ts +8 -0
  179. package/src/components/ProgressIndicator/__snapshots__/ProgressIndicator.test.tsx.snap +357 -0
  180. package/src/components/Radio/Radio.test.tsx +20 -4
  181. package/src/components/Radio/Radio.tsx +6 -3
  182. package/src/components/Radio/__snapshots__/Radio.test.tsx.snap +3 -0
  183. package/src/components/RadioGroup/RadioGroup.stories.mdx +3 -4
  184. package/src/components/RadioGroup/RadioGroup.test.tsx +24 -1
  185. package/src/components/RadioGroup/RadioGroup.tsx +19 -19
  186. package/src/components/RadioGroup/__snapshots__/RadioGroup.test.tsx.snap +42 -72
  187. package/src/components/SearchBar/SearchBar.Test.tsx +20 -1
  188. package/src/components/SearchBar/SearchBar.stories.mdx +113 -8
  189. package/src/components/SearchBar/SearchBar.tsx +20 -10
  190. package/src/components/Select/Select.test.tsx +12 -0
  191. package/src/components/Select/Select.tsx +5 -2
  192. package/src/components/Select/SelectTypes.tsx +1 -0
  193. package/src/components/SkeletonLoader/SkeletonLoader.stories.mdx +28 -59
  194. package/src/components/SkeletonLoader/SkeletonLoader.test.tsx +97 -177
  195. package/src/components/SkeletonLoader/SkeletonLoader.tsx +74 -71
  196. package/src/components/SkeletonLoader/__snapshots__/SkeletonLoader.test.tsx.snap +739 -0
  197. package/src/components/Slider/Slider.stories.mdx +529 -0
  198. package/src/components/Slider/Slider.test.tsx +653 -0
  199. package/src/components/Slider/Slider.tsx +303 -0
  200. package/src/components/Slider/__snapshots__/Slider.test.tsx.snap +1946 -0
  201. package/src/components/StyleGuide/Bidirectionality.stories.mdx +1 -1
  202. package/src/components/StyleGuide/Breakpoints.stories.mdx +34 -10
  203. package/src/components/StyleGuide/Buttons.stories.mdx +89 -73
  204. package/src/components/StyleGuide/ColorCard.tsx +46 -0
  205. package/src/components/StyleGuide/Colors.stories.mdx +171 -311
  206. package/src/components/StyleGuide/DesignTokens.stories.mdx +170 -0
  207. package/src/components/StyleGuide/Forms.stories.mdx +9 -7
  208. package/src/components/StyleGuide/Iconography.stories.mdx +85 -91
  209. package/src/components/StyleGuide/Spacing.stories.mdx +31 -23
  210. package/src/components/StyleGuide/Typography.stories.mdx +202 -189
  211. package/src/components/StyleGuide/UIDocCard.tsx +1 -1
  212. package/src/components/Tabs/Tabs.stories.mdx +73 -11
  213. package/src/components/Tabs/Tabs.tsx +87 -64
  214. package/src/components/Template/Template.stories.mdx +25 -27
  215. package/src/components/TextInput/TextInput.stories.mdx +1 -1
  216. package/src/components/TextInput/TextInput.test.tsx +22 -2
  217. package/src/components/TextInput/TextInput.tsx +28 -8
  218. package/src/components/TextInput/TextInputTypes.tsx +2 -0
  219. package/src/components/VideoPlayer/VideoPlayer.stories.mdx +17 -4
  220. package/src/components/VideoPlayer/VideoPlayer.test.tsx +54 -53
  221. package/src/components/VideoPlayer/VideoPlayer.tsx +50 -51
  222. package/src/components/VideoPlayer/VideoPlayerTypes.tsx +2 -2
  223. package/src/components/VideoPlayer/__snapshots__/VideoPlayer.test.tsx.snap +91 -0
  224. package/src/docs/Chakra.stories.mdx +244 -63
  225. package/src/docs/Intro.stories.mdx +5 -2
  226. package/src/hooks/tests/useCarouselStyles.test.ts +140 -0
  227. package/src/hooks/tests/useNYPLTheme.test.tsx +36 -0
  228. package/src/hooks/useCarouselStyles.ts +34 -0
  229. package/src/hooks/useNYPLTheme.ts +67 -0
  230. package/src/hooks/useWindowSize.ts +40 -0
  231. package/src/index.ts +22 -19
  232. package/src/resources.scss +5 -5
  233. package/src/styles/base/{_02-breakpoints.scss → _01-breakpoints.scss} +9 -10
  234. package/src/styles/base/{_03-mixins.scss → _02-mixins.scss} +16 -5
  235. package/src/styles/base/{_04-base.scss → _03-base.scss} +7 -2
  236. package/src/styles/base/{_05-focus.scss → _04-focus.scss} +0 -15
  237. package/src/styles/base/_place-holder.scss +14 -3
  238. package/src/styles/{03-space → space}/_space-inline.scss +14 -14
  239. package/src/styles/{03-space → space}/_space-inset.scss +10 -10
  240. package/src/styles/space/_space-stack.scss +116 -0
  241. package/src/styles.scss +13 -60
  242. package/src/theme/components/button.ts +21 -15
  243. package/src/theme/components/card.ts +174 -0
  244. package/src/theme/components/checkbox.ts +8 -3
  245. package/src/theme/components/checkboxGroup.ts +8 -0
  246. package/src/theme/components/componentWrapper.ts +10 -0
  247. package/src/theme/components/datePicker.ts +17 -0
  248. package/src/theme/components/fieldset.ts +18 -0
  249. package/src/theme/components/global.ts +26 -15
  250. package/src/theme/components/globalMixins.ts +9 -1
  251. package/src/theme/components/heading.ts +10 -5
  252. package/src/theme/components/helperErrorText.ts +9 -0
  253. package/src/theme/components/hero.ts +4 -3
  254. package/src/theme/components/horizontalRule.ts +13 -0
  255. package/src/theme/components/icon.ts +9 -9
  256. package/src/theme/components/image.ts +116 -0
  257. package/src/theme/components/label.ts +3 -10
  258. package/src/theme/components/link.ts +5 -1
  259. package/src/theme/components/list.ts +73 -0
  260. package/src/theme/components/notification.ts +93 -0
  261. package/src/theme/components/pagination.ts +20 -0
  262. package/src/theme/components/progressIndicator.ts +62 -0
  263. package/src/theme/components/radio.ts +2 -2
  264. package/src/theme/components/radioGroup.ts +8 -0
  265. package/src/theme/components/select.ts +6 -3
  266. package/src/theme/components/skeletonLoader.ts +107 -0
  267. package/src/theme/components/slider.ts +79 -0
  268. package/src/theme/components/statusBadge.ts +1 -2
  269. package/src/theme/components/tabs.ts +49 -19
  270. package/src/theme/components/template.ts +8 -8
  271. package/src/theme/components/textInput.ts +5 -4
  272. package/src/theme/components/videoPlayer.ts +49 -0
  273. package/src/theme/foundations/breakpoints.ts +8 -8
  274. package/src/theme/foundations/global.ts +6 -1
  275. package/src/theme/foundations/radii.ts +6 -0
  276. package/src/theme/foundations/spacing.ts +24 -24
  277. package/src/theme/index.ts +41 -10
  278. package/src/utils/componentCategories.ts +4 -3
  279. package/dist/components/HelperErrorText/HelperErrorText.stories.d.ts +0 -16
  280. package/dist/components/Image/Image.stories.d.ts +0 -18
  281. package/dist/components/List/List.stories.d.ts +0 -7
  282. package/dist/theme/components/customCheckboxGroup.d.ts +0 -18
  283. package/dist/theme/components/customRadioGroup.d.ts +0 -18
  284. package/src/components/Button/_Button.scss +0 -32
  285. package/src/components/Card/_Card.scss +0 -308
  286. package/src/components/HelperErrorText/HelperErrorText.stories.tsx +0 -48
  287. package/src/components/HelperErrorText/_HelperErrorText.scss +0 -9
  288. package/src/components/HorizontalRule/_HorizontalRule.scss +0 -15
  289. package/src/components/Image/Image.stories.tsx +0 -54
  290. package/src/components/Image/_Image.scss +0 -38
  291. package/src/components/List/List.stories.tsx +0 -139
  292. package/src/components/List/_List.scss +0 -76
  293. package/src/components/Notification/_Notification.scss +0 -110
  294. package/src/components/Pagination/_Pagination.scss +0 -40
  295. package/src/components/SkeletonLoader/_SkeletonLoader.scss +0 -142
  296. package/src/components/VideoPlayer/_VideoPlayer.scss +0 -38
  297. package/src/styles/01-colors/_colors-brand.scss +0 -62
  298. package/src/styles/01-colors/_colors-utility.scss +0 -67
  299. package/src/styles/02-typography/_type-scale.css +0 -11
  300. package/src/styles/02-typography/_type-weight.css +0 -7
  301. package/src/styles/02-typography/_typefaces.css +0 -4
  302. package/src/styles/03-space/_space-stack.scss +0 -116
  303. package/src/styles/03-space/_space.css +0 -30
  304. package/src/styles/base/_card-grid.scss +0 -78
  305. package/src/styles/base/_typography.scss +0 -11
  306. package/src/theme/components/customCheckboxGroup.ts +0 -12
  307. package/src/theme/components/customRadioGroup.ts +0 -12
package/src/styles/base/_typography.scss DELETED
@@ -1,11 +0,0 @@
1
- // Create a mixin for paragraph styles that can be implemented
2
- // in components with other classnames.
3
- @mixin paragraph($margin: 0 0 var(--space)) {
4
- margin: #{$margin};
5
- }
6
-
7
- .nypl-ds {
8
- p {
9
- @include paragraph;
10
- }
11
- }
package/src/theme/components/customCheckboxGroup.ts DELETED
@@ -1,12 +0,0 @@
1
- import { checkboxRadioGroupLayout } from "./global";
2
-
3
- const CustomCheckboxGroup = {
4
- parts: ["legend", "required", "helper"],
5
- baseStyle: {
6
- ...checkboxRadioGroupLayout,
7
- },
8
- sizes: {},
9
- defaultProps: {},
10
- };
11
-
12
- export default CustomCheckboxGroup;
package/src/theme/components/customRadioGroup.ts DELETED
@@ -1,12 +0,0 @@
1
- import { checkboxRadioGroupLayout } from "./global";
2
-
3
- const CustomRadioGroup = {
4
- parts: ["legend", "required", "helper"],
5
- baseStyle: {
6
- ...checkboxRadioGroupLayout,
7
- },
8
- sizes: {},
9
- defaultProps: {},
10
- };
11
-
12
- export default CustomRadioGroup;