@nypl/design-system-react-components 0.25.11 → 0.26.0

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 (347) hide show
  1. package/CHANGELOG.md +151 -0
  2. package/README.md +14 -26
  3. package/dist/components/Accordion/Accordion.d.ts +6 -4
  4. package/dist/components/Accordion/AccordionTypes.d.ts +5 -0
  5. package/dist/components/Breadcrumbs/Breadcrumbs.d.ts +4 -4
  6. package/dist/components/Breadcrumbs/BreadcrumbsTypes.d.ts +2 -1
  7. package/dist/components/Button/Button.d.ts +2 -2
  8. package/dist/components/Card/Card.d.ts +22 -29
  9. package/dist/components/Checkbox/Checkbox.d.ts +3 -3
  10. package/dist/components/CheckboxGroup/CheckboxGroup.d.ts +9 -6
  11. package/dist/components/ComponentWrapper/ComponentWrapper.d.ts +1 -1
  12. package/dist/components/DatePicker/DatePicker.d.ts +5 -6
  13. package/dist/components/Fieldset/Fieldset.d.ts +5 -6
  14. package/dist/components/Form/Form.d.ts +6 -6
  15. package/dist/components/Grid/GridTypes.d.ts +7 -7
  16. package/dist/components/Grid/SimpleGrid.d.ts +1 -1
  17. package/dist/components/Heading/Heading.d.ts +5 -5
  18. package/dist/components/Heading/HeadingTypes.d.ts +1 -1
  19. package/dist/components/HelperErrorText/HelperErrorText.d.ts +9 -8
  20. package/dist/components/Hero/Hero.d.ts +9 -5
  21. package/dist/components/HorizontalRule/HorizontalRule.d.ts +2 -10
  22. package/dist/components/Icons/Icon.d.ts +2 -1
  23. package/dist/components/Icons/IconTypes.d.ts +10 -7
  24. package/dist/components/Image/Image.d.ts +27 -9
  25. package/dist/components/Image/ImageTypes.d.ts +4 -4
  26. package/dist/components/Label/Label.d.ts +7 -4
  27. package/dist/components/Link/Link.d.ts +1 -1
  28. package/dist/components/List/List.d.ts +11 -11
  29. package/dist/components/List/ListTypes.d.ts +1 -1
  30. package/dist/components/Logo/Logo.d.ts +2 -1
  31. package/dist/components/Logo/LogoSvgs.d.ts +8 -0
  32. package/dist/components/Logo/LogoTypes.d.ts +10 -2
  33. package/dist/components/Notification/Notification.d.ts +7 -7
  34. package/dist/components/Pagination/Pagination.d.ts +8 -4
  35. package/dist/components/ProgressIndicator/ProgressIndicator.d.ts +3 -3
  36. package/dist/components/Radio/Radio.d.ts +5 -7
  37. package/dist/components/RadioGroup/RadioGroup.d.ts +16 -8
  38. package/dist/components/SearchBar/SearchBar.d.ts +5 -5
  39. package/dist/components/Select/Select.d.ts +12 -8
  40. package/dist/components/Select/SelectTypes.d.ts +4 -0
  41. package/dist/components/SkeletonLoader/SkeletonLoader.d.ts +8 -6
  42. package/dist/components/SkeletonLoader/SkeletonLoaderTypes.d.ts +0 -4
  43. package/dist/components/Slider/Slider.d.ts +6 -4
  44. package/dist/components/StatusBadge/StatusBadge.d.ts +5 -1
  45. package/dist/components/StructuredContent/StructuredContent.d.ts +10 -23
  46. package/dist/components/Table/Table.d.ts +1 -1
  47. package/dist/components/Tabs/Tabs.d.ts +7 -6
  48. package/dist/components/Template/Template.d.ts +18 -9
  49. package/dist/components/Text/Text.d.ts +4 -4
  50. package/dist/components/Text/TextTypes.d.ts +1 -1
  51. package/dist/components/TextInput/TextInput.d.ts +7 -7
  52. package/dist/components/Toggle/Toggle.d.ts +8 -10
  53. package/dist/components/Toggle/{ToggleSizes.d.ts → ToggleTypes.d.ts} +1 -1
  54. package/dist/components/VideoPlayer/VideoPlayer.d.ts +2 -1
  55. package/dist/design-system-react-components.cjs.development.js +2802 -1686
  56. package/dist/design-system-react-components.cjs.development.js.map +1 -1
  57. package/dist/design-system-react-components.cjs.production.min.js +1 -1
  58. package/dist/design-system-react-components.cjs.production.min.js.map +1 -1
  59. package/dist/design-system-react-components.esm.js +2811 -1699
  60. package/dist/design-system-react-components.esm.js.map +1 -1
  61. package/dist/helpers/enums.d.ts +4 -0
  62. package/dist/hooks/useCarouselStyles.d.ts +3 -2
  63. package/dist/hooks/useNYPLTheme.d.ts +12 -0
  64. package/dist/index.d.ts +11 -9
  65. package/dist/styles.css +1 -1
  66. package/dist/theme/components/accordion.d.ts +7 -12
  67. package/dist/theme/components/breadcrumb.d.ts +6 -0
  68. package/dist/theme/components/button.d.ts +10 -2
  69. package/dist/theme/components/card.d.ts +44 -24
  70. package/dist/theme/components/checkbox.d.ts +6 -6
  71. package/dist/theme/components/checkboxGroup.d.ts +4 -2
  72. package/dist/theme/components/componentWrapper.d.ts +2 -2
  73. package/dist/theme/components/customTable.d.ts +84 -1
  74. package/dist/theme/components/fieldset.d.ts +6 -14
  75. package/dist/theme/components/global.d.ts +37 -29
  76. package/dist/theme/components/globalMixins.d.ts +8 -8
  77. package/dist/theme/components/heading.d.ts +53 -0
  78. package/dist/theme/components/helperErrorText.d.ts +1 -0
  79. package/dist/theme/components/hero.d.ts +21 -15
  80. package/dist/theme/components/image.d.ts +1 -1
  81. package/dist/theme/components/label.d.ts +9 -10
  82. package/dist/theme/components/list.d.ts +105 -9
  83. package/dist/theme/components/notification.d.ts +7 -4
  84. package/dist/theme/components/pagination.d.ts +2 -5
  85. package/dist/theme/components/radio.d.ts +10 -6
  86. package/dist/theme/components/radioGroup.d.ts +4 -2
  87. package/dist/theme/components/select.d.ts +38 -13
  88. package/dist/theme/components/skeletonLoader.d.ts +2 -2
  89. package/dist/theme/components/slider.d.ts +14 -7
  90. package/dist/theme/components/structuredContent.d.ts +197 -0
  91. package/dist/theme/components/textInput.d.ts +22 -14
  92. package/dist/theme/components/toggle.d.ts +25 -6
  93. package/dist/theme/foundations/global.d.ts +33 -3
  94. package/dist/theme/foundations/radii.d.ts +1 -0
  95. package/dist/theme/foundations/spacing.d.ts +46 -43
  96. package/dist/utils/utils.d.ts +10 -0
  97. package/package.json +5 -6
  98. package/src/components/AccessibilityGuide/SkipNavigation.stories.mdx +34 -0
  99. package/src/components/Accordion/Accordion.stories.mdx +150 -66
  100. package/src/components/Accordion/Accordion.test.tsx +65 -17
  101. package/src/components/Accordion/Accordion.tsx +61 -27
  102. package/src/components/Accordion/AccordionTypes.tsx +5 -0
  103. package/src/components/Accordion/__snapshots__/Accordion.test.tsx.snap +505 -14
  104. package/src/components/Autosuggest/Autosuggest.stories.mdx +4 -3
  105. package/src/components/Breadcrumbs/Breadcrumbs.stories.mdx +53 -18
  106. package/src/components/Breadcrumbs/Breadcrumbs.test.tsx +66 -35
  107. package/src/components/Breadcrumbs/Breadcrumbs.tsx +14 -13
  108. package/src/components/Breadcrumbs/BreadcrumbsTypes.tsx +2 -1
  109. package/src/components/Breadcrumbs/__snapshots__/Breadcrumbs.test.tsx.snap +308 -10
  110. package/src/components/Button/Button.stories.mdx +87 -23
  111. package/src/components/Button/Button.test.tsx +25 -0
  112. package/src/components/Button/Button.tsx +18 -7
  113. package/src/components/Button/__snapshots__/Button.test.tsx.snap +27 -7
  114. package/src/components/Card/Card.stories.mdx +493 -329
  115. package/src/components/Card/Card.test.tsx +138 -18
  116. package/src/components/Card/Card.tsx +151 -85
  117. package/src/components/Card/__snapshots__/Card.test.tsx.snap +220 -100
  118. package/src/components/Chakra/Center.stories.mdx +2 -2
  119. package/src/components/Chakra/Grid.stories.mdx +4 -4
  120. package/src/components/Checkbox/Checkbox.stories.mdx +73 -9
  121. package/src/components/Checkbox/Checkbox.test.tsx +89 -10
  122. package/src/components/Checkbox/Checkbox.tsx +27 -16
  123. package/src/components/Checkbox/__snapshots__/Checkbox.test.tsx.snap +209 -6
  124. package/src/components/CheckboxGroup/CheckboxGroup.stories.mdx +135 -23
  125. package/src/components/CheckboxGroup/CheckboxGroup.test.tsx +216 -90
  126. package/src/components/CheckboxGroup/CheckboxGroup.tsx +39 -26
  127. package/src/components/CheckboxGroup/__snapshots__/CheckboxGroup.test.tsx.snap +493 -89
  128. package/src/components/ComponentWrapper/ComponentWrapper.test.tsx +12 -0
  129. package/src/components/ComponentWrapper/ComponentWrapper.tsx +39 -41
  130. package/src/components/ComponentWrapper/__snapshots__/ComponentWrapper.test.tsx.snap +47 -34
  131. package/src/components/DatePicker/DatePicker.stories.mdx +63 -27
  132. package/src/components/DatePicker/DatePicker.test.tsx +94 -15
  133. package/src/components/DatePicker/DatePicker.tsx +67 -58
  134. package/src/components/DatePicker/_DatePicker.scss +71 -13
  135. package/src/components/DatePicker/__snapshots__/DatePicker.test.tsx.snap +250 -206
  136. package/src/components/Fieldset/Fieldset.stories.mdx +33 -3
  137. package/src/components/Fieldset/Fieldset.test.tsx +58 -28
  138. package/src/components/Fieldset/Fieldset.tsx +35 -30
  139. package/src/components/Fieldset/__snapshots__/Fieldset.test.tsx.snap +40 -19
  140. package/src/components/Form/Form.stories.mdx +118 -47
  141. package/src/components/Form/Form.test.tsx +59 -16
  142. package/src/components/Form/Form.tsx +89 -65
  143. package/src/components/Form/__snapshots__/Form.test.tsx.snap +83 -5
  144. package/src/components/Grid/GridTypes.tsx +7 -7
  145. package/src/components/Grid/SimpleGrid.stories.mdx +87 -41
  146. package/src/components/Grid/SimpleGrid.test.tsx +24 -9
  147. package/src/components/Grid/SimpleGrid.tsx +29 -20
  148. package/src/components/Grid/__snapshots__/SimpleGrid.test.tsx.snap +16 -1
  149. package/src/components/Heading/Heading.stories.mdx +56 -25
  150. package/src/components/Heading/Heading.test.tsx +17 -7
  151. package/src/components/Heading/Heading.tsx +60 -58
  152. package/src/components/Heading/HeadingTypes.tsx +1 -1
  153. package/src/components/Heading/__snapshots__/Heading.test.tsx.snap +27 -8
  154. package/src/components/HelperErrorText/HelperErrorText.stories.mdx +64 -42
  155. package/src/components/HelperErrorText/HelperErrorText.test.tsx +15 -0
  156. package/src/components/HelperErrorText/HelperErrorText.tsx +40 -35
  157. package/src/components/HelperErrorText/__snapshots__/HelperErrorText.test.tsx.snap +35 -4
  158. package/src/components/Hero/Hero.stories.mdx +143 -113
  159. package/src/components/Hero/Hero.test.tsx +146 -58
  160. package/src/components/Hero/Hero.tsx +144 -112
  161. package/src/components/Hero/__snapshots__/Hero.test.tsx.snap +89 -17
  162. package/src/components/HorizontalRule/HorizontalRule.stories.mdx +26 -4
  163. package/src/components/HorizontalRule/HorizontalRule.test.tsx +9 -17
  164. package/src/components/HorizontalRule/HorizontalRule.tsx +9 -25
  165. package/src/components/HorizontalRule/__snapshots__/HorizontalRule.test.tsx.snap +18 -5
  166. package/src/components/Icons/Icon.stories.mdx +80 -23
  167. package/src/components/Icons/Icon.test.tsx +51 -2
  168. package/src/components/Icons/Icon.tsx +93 -71
  169. package/src/components/Icons/IconTypes.tsx +9 -6
  170. package/src/components/Icons/__snapshots__/Icon.test.tsx.snap +129 -0
  171. package/src/components/Image/Image.stories.mdx +160 -71
  172. package/src/components/Image/Image.test.tsx +40 -48
  173. package/src/components/Image/Image.tsx +80 -48
  174. package/src/components/Image/ImageTypes.ts +4 -4
  175. package/src/components/Image/__snapshots__/Image.test.tsx.snap +84 -21
  176. package/src/components/Label/Label.stories.mdx +42 -20
  177. package/src/components/Label/Label.test.tsx +42 -17
  178. package/src/components/Label/Label.tsx +22 -13
  179. package/src/components/Label/__snapshots__/Label.test.tsx.snap +19 -15
  180. package/src/components/Link/Link.stories.mdx +25 -1
  181. package/src/components/Link/Link.test.tsx +21 -0
  182. package/src/components/Link/Link.tsx +16 -9
  183. package/src/components/Link/__snapshots__/Link.test.tsx.snap +37 -11
  184. package/src/components/List/List.stories.mdx +75 -40
  185. package/src/components/List/List.test.tsx +73 -22
  186. package/src/components/List/List.tsx +44 -28
  187. package/src/components/List/ListTypes.tsx +1 -1
  188. package/src/components/List/__snapshots__/List.test.tsx.snap +110 -8
  189. package/src/components/Logo/Logo.stories.mdx +40 -16
  190. package/src/components/Logo/Logo.test.tsx +29 -2
  191. package/src/components/Logo/Logo.tsx +28 -11
  192. package/src/components/Logo/LogoSvgs.tsx +16 -0
  193. package/src/components/Logo/LogoTypes.tsx +9 -1
  194. package/src/components/Logo/__snapshots__/Logo.test.tsx.snap +73 -2
  195. package/src/components/Modal/Modal.stories.mdx +13 -0
  196. package/src/components/Notification/Notification.stories.mdx +34 -5
  197. package/src/components/Notification/Notification.test.tsx +43 -9
  198. package/src/components/Notification/Notification.tsx +59 -55
  199. package/src/components/Notification/__snapshots__/Notification.test.tsx.snap +256 -32
  200. package/src/components/Pagination/Pagination.stories.mdx +76 -13
  201. package/src/components/Pagination/Pagination.test.tsx +116 -5
  202. package/src/components/Pagination/Pagination.tsx +54 -29
  203. package/src/components/Pagination/__snapshots__/Pagination.test.tsx.snap +247 -30
  204. package/src/components/Placeholder/Placeholder.tsx +3 -1
  205. package/src/components/ProgressIndicator/ProgressIndicator.stories.mdx +76 -10
  206. package/src/components/ProgressIndicator/ProgressIndicator.test.tsx +87 -13
  207. package/src/components/ProgressIndicator/ProgressIndicator.tsx +20 -10
  208. package/src/components/ProgressIndicator/__snapshots__/ProgressIndicator.test.tsx.snap +101 -14
  209. package/src/components/Radio/Radio.stories.mdx +75 -11
  210. package/src/components/Radio/Radio.test.tsx +83 -9
  211. package/src/components/Radio/Radio.tsx +70 -61
  212. package/src/components/Radio/__snapshots__/Radio.test.tsx.snap +168 -10
  213. package/src/components/RadioGroup/RadioGroup.stories.mdx +293 -94
  214. package/src/components/RadioGroup/RadioGroup.test.tsx +193 -68
  215. package/src/components/RadioGroup/RadioGroup.tsx +110 -101
  216. package/src/components/RadioGroup/__snapshots__/RadioGroup.test.tsx.snap +1258 -902
  217. package/src/components/SearchBar/SearchBar.stories.mdx +104 -39
  218. package/src/components/SearchBar/{SearchBar.Test.tsx → SearchBar.test.tsx} +66 -6
  219. package/src/components/SearchBar/SearchBar.tsx +23 -13
  220. package/src/components/SearchBar/__snapshots__/SearchBar.test.tsx.snap +1039 -0
  221. package/src/components/Select/Select.stories.mdx +151 -62
  222. package/src/components/Select/Select.test.tsx +56 -44
  223. package/src/components/Select/Select.tsx +125 -104
  224. package/src/components/Select/SelectTypes.tsx +5 -0
  225. package/src/components/Select/__snapshots__/Select.test.tsx.snap +749 -409
  226. package/src/components/SkeletonLoader/SkeletonLoader.stories.mdx +53 -23
  227. package/src/components/SkeletonLoader/SkeletonLoader.test.tsx +14 -8
  228. package/src/components/SkeletonLoader/SkeletonLoader.tsx +80 -78
  229. package/src/components/SkeletonLoader/SkeletonLoaderTypes.tsx +0 -5
  230. package/src/components/SkeletonLoader/__snapshots__/SkeletonLoader.test.tsx.snap +169 -10
  231. package/src/components/Slider/Slider.stories.mdx +123 -41
  232. package/src/components/Slider/Slider.test.tsx +65 -17
  233. package/src/components/Slider/Slider.tsx +34 -24
  234. package/src/components/Slider/__snapshots__/Slider.test.tsx.snap +403 -226
  235. package/src/components/StatusBadge/StatusBadge.stories.mdx +19 -1
  236. package/src/components/StatusBadge/StatusBadge.test.tsx +19 -1
  237. package/src/components/StatusBadge/StatusBadge.tsx +25 -20
  238. package/src/components/StatusBadge/__snapshots__/StatusBadge.test.tsx.snap +22 -3
  239. package/src/components/StructuredContent/StructuredContent.stories.mdx +229 -61
  240. package/src/components/StructuredContent/StructuredContent.test.tsx +162 -101
  241. package/src/components/StructuredContent/StructuredContent.tsx +98 -103
  242. package/src/components/StructuredContent/__snapshots__/StructuredContent.test.tsx.snap +102 -17
  243. package/src/components/StyleGuide/Bidirectionality.stories.mdx +9 -9
  244. package/src/components/StyleGuide/Breakpoints.stories.mdx +6 -6
  245. package/src/components/StyleGuide/Buttons.stories.mdx +2 -12
  246. package/src/components/StyleGuide/ColorCard.tsx +4 -4
  247. package/src/components/StyleGuide/Colors.stories.mdx +34 -20
  248. package/src/components/StyleGuide/DesignTokens.stories.mdx +56 -26
  249. package/src/components/StyleGuide/Forms.stories.mdx +27 -12
  250. package/src/components/StyleGuide/Iconography.stories.mdx +2 -12
  251. package/src/components/StyleGuide/Spacing.stories.mdx +80 -41
  252. package/src/components/StyleGuide/Typography.stories.mdx +47 -33
  253. package/src/components/Table/Table.stories.mdx +38 -11
  254. package/src/components/Table/Table.test.tsx +16 -1
  255. package/src/components/Table/Table.tsx +10 -8
  256. package/src/components/Table/__snapshots__/Table.test.tsx.snap +408 -5
  257. package/src/components/Tabs/Tabs.stories.mdx +59 -10
  258. package/src/components/Tabs/Tabs.test.tsx +29 -11
  259. package/src/components/Tabs/Tabs.tsx +28 -21
  260. package/src/components/Tabs/__snapshots__/Tabs.test.tsx.snap +394 -5
  261. package/src/components/Template/Template.stories.mdx +73 -32
  262. package/src/components/Template/Template.test.tsx +68 -5
  263. package/src/components/Template/Template.tsx +86 -72
  264. package/src/components/Template/__snapshots__/Template.test.tsx.snap +195 -22
  265. package/src/components/Text/Text.stories.mdx +32 -15
  266. package/src/components/Text/Text.test.tsx +14 -11
  267. package/src/components/Text/Text.tsx +13 -16
  268. package/src/components/Text/TextTypes.tsx +1 -1
  269. package/src/components/Text/__snapshots__/Text.test.tsx.snap +21 -4
  270. package/src/components/TextInput/TextInput.stories.mdx +73 -27
  271. package/src/components/TextInput/TextInput.test.tsx +65 -50
  272. package/src/components/TextInput/TextInput.tsx +123 -115
  273. package/src/components/TextInput/__snapshots__/TextInput.test.tsx.snap +96 -73
  274. package/src/components/Toggle/Toggle.stories.mdx +74 -26
  275. package/src/components/Toggle/Toggle.test.tsx +41 -10
  276. package/src/components/Toggle/Toggle.tsx +31 -27
  277. package/src/components/Toggle/{ToggleSizes.tsx → ToggleTypes.tsx} +1 -1
  278. package/src/components/Toggle/__snapshots__/Toggle.test.tsx.snap +195 -8
  279. package/src/components/VideoPlayer/VideoPlayer.stories.mdx +52 -4
  280. package/src/components/VideoPlayer/VideoPlayer.test.tsx +41 -6
  281. package/src/components/VideoPlayer/VideoPlayer.tsx +134 -120
  282. package/src/components/VideoPlayer/__snapshots__/VideoPlayer.test.tsx.snap +81 -39
  283. package/src/docs/Chakra.stories.mdx +51 -10
  284. package/src/docs/Welcome.stories.mdx +168 -0
  285. package/src/{components/Card/CardTypes.tsx → helpers/enums.ts} +2 -2
  286. package/src/hooks/tests/useNYPLTheme.test.tsx +1 -1
  287. package/src/hooks/useCarouselStyles.stories.mdx +30 -0
  288. package/src/hooks/useCarouselStyles.ts +3 -2
  289. package/src/hooks/useNYPLTheme.stories.mdx +101 -0
  290. package/src/hooks/useNYPLTheme.ts +31 -7
  291. package/src/hooks/useWindowSize.stories.mdx +23 -0
  292. package/src/index.ts +11 -15
  293. package/src/styles/base/_place-holder.scss +3 -1
  294. package/src/styles.scss +0 -2
  295. package/src/theme/components/accordion.ts +7 -12
  296. package/src/theme/components/breadcrumb.ts +7 -0
  297. package/src/theme/components/button.ts +15 -7
  298. package/src/theme/components/card.ts +56 -36
  299. package/src/theme/components/checkbox.ts +12 -14
  300. package/src/theme/components/checkboxGroup.ts +4 -2
  301. package/src/theme/components/componentWrapper.ts +2 -2
  302. package/src/theme/components/customTable.ts +39 -31
  303. package/src/theme/components/fieldset.ts +3 -2
  304. package/src/theme/components/global.ts +42 -33
  305. package/src/theme/components/globalMixins.ts +8 -8
  306. package/src/theme/components/heading.ts +1 -1
  307. package/src/theme/components/helperErrorText.ts +1 -0
  308. package/src/theme/components/hero.ts +14 -16
  309. package/src/theme/components/icon.ts +5 -2
  310. package/src/theme/components/image.ts +1 -1
  311. package/src/theme/components/label.ts +4 -3
  312. package/src/theme/components/list.ts +76 -65
  313. package/src/theme/components/notification.ts +10 -7
  314. package/src/theme/components/pagination.ts +2 -5
  315. package/src/theme/components/progressIndicator.ts +3 -3
  316. package/src/theme/components/radio.ts +11 -14
  317. package/src/theme/components/radioGroup.ts +4 -2
  318. package/src/theme/components/select.ts +37 -18
  319. package/src/theme/components/skeletonLoader.ts +3 -3
  320. package/src/theme/components/slider.ts +19 -15
  321. package/src/theme/components/statusBadge.ts +2 -2
  322. package/src/theme/components/structuredContent.ts +66 -1
  323. package/src/theme/components/tabs.ts +2 -2
  324. package/src/theme/components/template.ts +9 -9
  325. package/src/theme/components/textInput.ts +13 -12
  326. package/src/theme/components/toggle.ts +76 -42
  327. package/src/theme/components/videoPlayer.ts +1 -1
  328. package/src/theme/foundations/colors.ts +20 -13
  329. package/src/theme/foundations/global.ts +17 -5
  330. package/src/theme/foundations/radii.ts +1 -0
  331. package/src/theme/foundations/spacing.ts +70 -22
  332. package/src/theme/foundations/typography.ts +3 -3
  333. package/src/utils/componentCategories.ts +28 -21
  334. package/src/utils/utils.ts +28 -0
  335. package/dist/components/Card/CardTypes.d.ts +0 -4
  336. package/dist/components/CheckboxGroup/CheckboxGroupLayoutTypes.d.ts +0 -4
  337. package/dist/components/Pagination/Pagination.stories.d.ts +0 -13
  338. package/dist/components/RadioGroup/RadioGroupLayoutTypes.d.ts +0 -4
  339. package/dist/components/SearchBar/SearchBar.Test.d.ts +0 -1
  340. package/dist/helpers/generateUUID.d.ts +0 -1
  341. package/src/components/CheckboxGroup/CheckboxGroupLayoutTypes.tsx +0 -4
  342. package/src/components/Pagination/Pagination.stories.tsx +0 -54
  343. package/src/components/RadioGroup/RadioGroupLayoutTypes.tsx +0 -4
  344. package/src/docs/Intro.stories.mdx +0 -53
  345. package/src/helpers/generateUUID.tsx +0 -5
  346. package/src/styles/base/_03-base.scss +0 -25
  347. package/src/styles/base/_04-focus.scss +0 -22
package/src/components/DatePicker/_DatePicker.scss CHANGED
@@ -1,42 +1,100 @@
1
1
  // Styles needed to override `react-datepicker` plugin styles.
2
2
  .date-picker-calendar {
3
+ font-family: var(--nypl-fonts-body);
4
+
5
+ .react-datepicker {
6
+ border-color: var(--nypl-colors-ui-gray-medium);
7
+ }
8
+ // The styles for the triangle arrow above the calendar popup.
9
+ .react-datepicker__triangle {
10
+ // Shift the triangle to the left.
11
+ transform: translate(32px, 0px) !important;
12
+ &::before {
13
+ border-bottom-color: var(--nypl-colors-ui-gray-medium) !important;
14
+ }
15
+ &::after {
16
+ border-bottom-color: var(--nypl-colors-ui-gray-x-light-cool) !important;
17
+ }
18
+ }
19
+ // The left and right arrow buttons.
20
+ .react-datepicker__navigation {
21
+ &-icon {
22
+ top: 5px;
23
+ width: 0px;
24
+ &::before {
25
+ border-color: var(--nypl-colors-ui-gray-medium);
26
+ }
27
+ }
28
+ &:hover {
29
+ .react-datepicker__navigation-icon::before {
30
+ border-color: var(--nypl-colors-ui-gray-dark);
31
+ }
32
+ }
33
+ }
34
+ // The header with the appropriate date.
35
+ .react-datepicker__header {
36
+ border-color: var(--nypl-colors-ui-gray-medium);
37
+ background-color: var(--nypl-colors-ui-gray-x-light-cool);
38
+ }
3
39
  // Make sure the width is enough to fit 12 selectable years.
4
40
  .react-datepicker__year-wrapper {
5
41
  max-width: 220px;
6
42
  }
7
-
43
+ // Hover state
44
+ .react-datepicker__year-text:not(.react-datepicker__year-text--disabled),
45
+ .react-datepicker__month-text,
46
+ .react-datepicker__day {
47
+ &:hover {
48
+ border-radius: 0;
49
+ background-color: var(--nypl-colors-ui-gray-x-light-cool);
50
+ color: var(--nypl-colors-ui-black);
51
+ }
52
+ }
53
+ .react-datepicker__day--keyboard-selected {
54
+ opacity: 1;
55
+ border-radius: 0;
56
+ background-color: var(--nypl-colors-ui-gray-x-light-cool);
57
+ color: var(--nypl-colors-ui-black);
58
+ }
8
59
  // Moving away from React DatePickers default blue color theme:
9
60
  .react-datepicker__year,
10
61
  .react-datepicker__month,
11
62
  .react-datepicker__day {
12
63
  // For currently selected ranges
13
64
  &--in-range.react-datepicker__day--in-range {
14
- opacity: 0.5;
65
+ opacity: 1;
15
66
  }
16
-
17
67
  // For ranges about to be selected.
18
68
  &-text--keyboard-selected,
19
69
  &--keyboard-selected,
20
70
  &--in-range,
21
71
  &--in-selecting-range {
22
- background-color: var(--nypl-colors-ui-black);
72
+ background-color: var(--nypl-colors-ui-gray-x-light-cool);
23
73
  border-radius: 0;
24
- color: var(--nypl-colors-ui-white);
25
- opacity: 0.3;
74
+ color: var(--nypl-colors-ui-black);
75
+ }
76
+ // For today's date visual styles.
77
+ &-text--today,
78
+ &--today {
79
+ color: var(--nypl-colors-ui-black);
80
+ background-color: var(--nypl-colors-ui-gray-light-cool);
81
+ &:hover {
82
+ color: var(--nypl-colors-ui-black);
83
+ background-color: var(--nypl-colors-ui-gray-light-cool);
84
+ }
26
85
  }
27
-
28
86
  // Selected states.
29
87
  &-text--selected,
30
88
  &--selected {
31
- background-color: var(--nypl-colors-ui-black);
89
+ background-color: var(--nypl-colors-ui-focus);
90
+ font-weight: bold;
32
91
  border-radius: 0;
33
92
  color: var(--nypl-colors-ui-white);
34
93
  opacity: 1;
94
+ &:hover {
95
+ background-color: var(--nypl-colors-ui-focus);
96
+ color: var(--nypl-colors-ui-white);
97
+ }
35
98
  }
36
99
  }
37
-
38
- // Shift the triangle to the left.
39
- .react-datepicker__triangle {
40
- transform: translate(32px, 0px) !important;
41
- }
42
100
  }