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

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 +98 -1
  2. package/README.md +46 -11
  3. package/dist/components/Accordion/Accordion.d.ts +14 -14
  4. package/dist/components/Autosuggest/Autosuggest.stories.d.ts +1 -0
  5. package/dist/components/Breadcrumbs/Breadcrumbs.d.ts +11 -14
  6. package/dist/components/Breadcrumbs/BreadcrumbsTypes.d.ts +6 -0
  7. package/dist/components/Button/Button.d.ts +6 -13
  8. package/dist/components/Button/ButtonTypes.d.ts +5 -3
  9. package/dist/components/Card/Card.d.ts +59 -10
  10. package/dist/components/Card/CardTypes.d.ts +19 -0
  11. package/dist/components/CardEdition/CardEdition.d.ts +21 -0
  12. package/dist/components/{StyleGuide/Colors.stories.d.ts → CardEdition/CardEdition.stories.d.ts} +5 -2
  13. package/dist/components/Checkbox/Checkbox.d.ts +21 -16
  14. package/dist/components/CheckboxGroup/CheckboxGroup.d.ts +43 -0
  15. package/dist/components/CheckboxGroup/CheckboxGroupLayoutTypes.d.ts +4 -0
  16. package/dist/components/DatePicker/DatePicker.d.ts +79 -0
  17. package/dist/components/DatePicker/DatePickerTypes.d.ts +5 -0
  18. package/dist/components/Form/Form.d.ts +16 -8
  19. package/dist/components/Form/FormTypes.d.ts +2 -0
  20. package/dist/components/Grid/GridTypes.d.ts +9 -0
  21. package/dist/components/Grid/SimpleGrid.d.ts +14 -0
  22. package/dist/components/Heading/Heading.d.ts +9 -11
  23. package/dist/components/Heading/{HeadingDisplaySizes.d.ts → HeadingTypes.d.ts} +8 -0
  24. package/dist/components/HelperErrorText/HelperErrorText.stories.d.ts +2 -1
  25. package/dist/components/Hero/Hero.d.ts +19 -14
  26. package/dist/components/Hero/HeroTypes.d.ts +10 -5
  27. package/dist/components/Icons/Icon.d.ts +13 -16
  28. package/dist/components/Icons/IconSvgs.d.ts +4 -0
  29. package/dist/components/Icons/IconTypes.d.ts +78 -60
  30. package/dist/components/Image/Image.stories.d.ts +2 -1
  31. package/dist/components/Label/Label.d.ts +10 -26
  32. package/dist/components/Link/Link.d.ts +8 -12
  33. package/dist/components/List/List.stories.d.ts +1 -0
  34. package/dist/components/Radio/Radio.d.ts +30 -24
  35. package/dist/components/RadioGroup/RadioGroup.d.ts +40 -0
  36. package/dist/components/RadioGroup/RadioGroupLayoutTypes.d.ts +4 -0
  37. package/dist/components/SearchBar/SearchBar.d.ts +45 -27
  38. package/dist/components/Select/Select.d.ts +34 -35
  39. package/dist/components/Select/SelectTypes.d.ts +4 -0
  40. package/dist/components/SkeletonLoader/SkeletonLoader.d.ts +1 -1
  41. package/dist/components/SkeletonLoader/SkeletonLoaderTypes.d.ts +2 -2
  42. package/dist/components/StatusBadge/StatusBadge.d.ts +8 -6
  43. package/dist/components/StatusBadge/StatusBadgeTypes.d.ts +5 -0
  44. package/dist/components/Tabs/Tabs.d.ts +25 -0
  45. package/dist/components/Template/Template.d.ts +91 -0
  46. package/dist/components/Text/Text.d.ts +16 -0
  47. package/dist/components/Text/TextTypes.d.ts +6 -0
  48. package/dist/components/TextInput/TextInput.d.ts +37 -30
  49. package/dist/components/TextInput/TextInputTypes.d.ts +5 -0
  50. package/dist/design-system-react-components.cjs.development.js +4102 -917
  51. package/dist/design-system-react-components.cjs.development.js.map +1 -1
  52. package/dist/design-system-react-components.cjs.production.min.js +1 -1
  53. package/dist/design-system-react-components.cjs.production.min.js.map +1 -1
  54. package/dist/design-system-react-components.esm.js +4023 -920
  55. package/dist/design-system-react-components.esm.js.map +1 -1
  56. package/dist/index.d.ts +23 -5
  57. package/dist/resources.scss +133 -24
  58. package/dist/styles.css +1 -1
  59. package/dist/theme/components/accordion.d.ts +25 -0
  60. package/dist/theme/components/breadcrumb.d.ts +90 -0
  61. package/dist/theme/components/button.d.ts +109 -0
  62. package/dist/theme/components/checkbox.d.ts +91 -0
  63. package/dist/theme/components/customCheckboxGroup.d.ts +18 -0
  64. package/dist/theme/components/customRadioGroup.d.ts +18 -0
  65. package/dist/theme/components/global.d.ts +55 -0
  66. package/dist/theme/components/globalMixins.d.ts +15 -0
  67. package/dist/theme/components/heading.d.ts +110 -0
  68. package/dist/theme/components/hero.d.ts +492 -0
  69. package/dist/theme/components/icon.d.ts +13 -0
  70. package/dist/theme/components/label.d.ts +16 -0
  71. package/dist/theme/components/link.d.ts +45 -0
  72. package/dist/theme/components/radio.d.ts +95 -0
  73. package/dist/theme/components/searchBar.d.ts +20 -0
  74. package/dist/theme/components/select.d.ts +58 -0
  75. package/dist/theme/components/statusBadge.d.ts +25 -0
  76. package/dist/theme/components/tabs.d.ts +85 -0
  77. package/dist/theme/components/template.d.ts +105 -0
  78. package/dist/theme/components/text.d.ts +20 -0
  79. package/dist/theme/components/textInput.d.ts +105 -0
  80. package/dist/theme/foundations/breakpoints.d.ts +23 -0
  81. package/dist/theme/foundations/colors.d.ts +3 -0
  82. package/dist/theme/foundations/global.d.ts +23 -0
  83. package/dist/theme/foundations/shadows.d.ts +4 -0
  84. package/dist/theme/foundations/spacing.d.ts +77 -0
  85. package/dist/theme/foundations/typography.d.ts +8 -0
  86. package/dist/theme/index.d.ts +20 -0
  87. package/dist/theme/provider.d.ts +5 -0
  88. package/dist/theme/types.d.ts +1 -0
  89. package/dist/utils/utils.d.ts +6 -0
  90. package/package.json +9 -2
  91. package/src/components/Accordion/Accordion.stories.mdx +233 -33
  92. package/src/components/Accordion/Accordion.test.tsx +135 -19
  93. package/src/components/Accordion/Accordion.tsx +81 -56
  94. package/src/components/Autosuggest/Autosuggest.stories.mdx +4 -3
  95. package/src/components/Autosuggest/Autosuggest.stories.tsx +1 -1
  96. package/src/components/Autosuggest/_Autosuggest.scss +2 -2
  97. package/src/components/Breadcrumbs/Breadcrumbs.stories.mdx +57 -56
  98. package/src/components/Breadcrumbs/Breadcrumbs.test.tsx +31 -25
  99. package/src/components/Breadcrumbs/Breadcrumbs.tsx +71 -73
  100. package/src/components/Breadcrumbs/BreadcrumbsTypes.tsx +6 -0
  101. package/src/components/Breadcrumbs/__snapshots__/Breadcrumbs.test.tsx.snap +100 -0
  102. package/src/components/Button/Button.stories.mdx +125 -138
  103. package/src/components/Button/Button.test.tsx +65 -11
  104. package/src/components/Button/Button.tsx +72 -68
  105. package/src/components/Button/ButtonTypes.tsx +4 -2
  106. package/src/components/Button/_Button.scss +7 -92
  107. package/src/components/Button/__snapshots__/Button.test.tsx.snap +58 -3
  108. package/src/components/Card/Card.stories.mdx +694 -0
  109. package/src/components/Card/Card.test.tsx +97 -102
  110. package/src/components/Card/Card.tsx +182 -31
  111. package/src/components/Card/CardTypes.tsx +21 -0
  112. package/src/components/Card/_Card.scss +234 -49
  113. package/src/components/{Card/Card.stories.tsx → CardEdition/CardEdition.stories.tsx} +32 -22
  114. package/src/components/CardEdition/CardEdition.test.tsx +395 -0
  115. package/src/components/CardEdition/CardEdition.tsx +60 -0
  116. package/src/components/CardEdition/_CardEdition.scss +138 -0
  117. package/src/components/Chakra/Box.stories.mdx +57 -0
  118. package/src/components/Chakra/Center.stories.mdx +99 -0
  119. package/src/components/Chakra/Grid.stories.mdx +79 -0
  120. package/src/components/Chakra/Stack.stories.mdx +93 -0
  121. package/src/components/Checkbox/Checkbox.stories.mdx +57 -35
  122. package/src/components/Checkbox/Checkbox.test.tsx +117 -147
  123. package/src/components/Checkbox/Checkbox.tsx +76 -50
  124. package/src/components/Checkbox/__snapshots__/Checkbox.test.tsx.snap +325 -0
  125. package/src/components/CheckboxGroup/CheckboxGroup.stories.mdx +249 -0
  126. package/src/components/CheckboxGroup/CheckboxGroup.test.tsx +345 -0
  127. package/src/components/CheckboxGroup/CheckboxGroup.tsx +148 -0
  128. package/src/components/CheckboxGroup/CheckboxGroupLayoutTypes.tsx +4 -0
  129. package/src/components/CheckboxGroup/__snapshots__/CheckboxGroup.test.tsx.snap +1360 -0
  130. package/src/components/DatePicker/DatePicker.stories.mdx +284 -0
  131. package/src/components/DatePicker/DatePicker.test.tsx +657 -0
  132. package/src/components/DatePicker/DatePicker.tsx +396 -0
  133. package/src/components/DatePicker/DatePickerTypes.tsx +5 -0
  134. package/src/components/DatePicker/_DatePicker.scss +76 -0
  135. package/src/components/Form/Form.stories.mdx +130 -27
  136. package/src/components/Form/Form.test.tsx +78 -36
  137. package/src/components/Form/Form.tsx +53 -19
  138. package/src/components/Form/FormTypes.tsx +3 -0
  139. package/src/components/Form/__snapshots__/Form.test.tsx.snap +38 -0
  140. package/src/components/Grid/GridTypes.tsx +9 -0
  141. package/src/components/Grid/SimpleGrid.stories.mdx +275 -0
  142. package/src/components/Grid/SimpleGrid.test.tsx +66 -0
  143. package/src/components/Grid/SimpleGrid.tsx +37 -0
  144. package/src/components/Grid/__snapshots__/SimpleGrid.test.tsx.snap +8 -0
  145. package/src/components/Heading/Heading.stories.mdx +63 -33
  146. package/src/components/Heading/Heading.test.tsx +24 -16
  147. package/src/components/Heading/Heading.tsx +54 -38
  148. package/src/components/Heading/{HeadingDisplaySizes.tsx → HeadingTypes.tsx} +9 -0
  149. package/src/components/HelperErrorText/HelperErrorText.stories.tsx +2 -1
  150. package/src/components/HelperErrorText/_HelperErrorText.scss +1 -1
  151. package/src/components/Hero/Hero.stories.mdx +195 -85
  152. package/src/components/Hero/Hero.test.tsx +544 -113
  153. package/src/components/Hero/Hero.tsx +80 -93
  154. package/src/components/Hero/HeroTypes.tsx +17 -5
  155. package/src/components/Hero/__snapshots__/Hero.test.tsx.snap +307 -0
  156. package/src/components/HorizontalRule/HorizontalRule.stories.mdx +6 -1
  157. package/src/components/HorizontalRule/_HorizontalRule.scss +1 -1
  158. package/src/components/Icons/Icon.stories.mdx +89 -74
  159. package/src/components/Icons/Icon.test.tsx +30 -22
  160. package/src/components/Icons/Icon.tsx +63 -61
  161. package/src/components/Icons/IconSvgs.tsx +8 -0
  162. package/src/components/Icons/IconTypes.tsx +80 -60
  163. package/src/components/Image/Image.stories.tsx +2 -1
  164. package/src/components/Input/_Input.scss +2 -2
  165. package/src/components/Label/Label.stories.mdx +77 -0
  166. package/src/components/Label/Label.test.tsx +43 -12
  167. package/src/components/Label/Label.tsx +28 -45
  168. package/src/components/Label/__snapshots__/Label.test.tsx.snap +41 -0
  169. package/src/components/Link/Link.stories.mdx +47 -41
  170. package/src/components/Link/Link.test.tsx +33 -44
  171. package/src/components/Link/Link.tsx +114 -100
  172. package/src/components/List/List.stories.mdx +7 -3
  173. package/src/components/List/List.stories.tsx +14 -9
  174. package/src/components/List/List.test.tsx +12 -8
  175. package/src/components/List/List.tsx +9 -7
  176. package/src/components/List/_List.scss +3 -3
  177. package/src/components/Modal/Modal.stories.mdx +7 -3
  178. package/src/components/Modal/_Modal.scss +1 -1
  179. package/src/components/Notification/Notification.stories.mdx +99 -65
  180. package/src/components/Notification/Notification.test.tsx +3 -16
  181. package/src/components/Notification/Notification.tsx +12 -12
  182. package/src/components/Notification/_Notification.scss +5 -4
  183. package/src/components/Notification/__snapshots__/Notification.test.tsx.snap +1 -1
  184. package/src/components/Pagination/Pagination.stories.mdx +7 -1
  185. package/src/components/Pagination/Pagination.test.tsx +16 -10
  186. package/src/components/Radio/Radio.stories.mdx +57 -46
  187. package/src/components/Radio/Radio.test.tsx +92 -138
  188. package/src/components/Radio/Radio.tsx +70 -69
  189. package/src/components/Radio/__snapshots__/Radio.test.tsx.snap +250 -0
  190. package/src/components/RadioGroup/RadioGroup.stories.mdx +247 -0
  191. package/src/components/RadioGroup/RadioGroup.test.tsx +327 -0
  192. package/src/components/RadioGroup/RadioGroup.tsx +154 -0
  193. package/src/components/RadioGroup/RadioGroupLayoutTypes.tsx +4 -0
  194. package/src/components/RadioGroup/__snapshots__/RadioGroup.test.tsx.snap +1101 -0
  195. package/src/components/SearchBar/SearchBar.Test.tsx +151 -16
  196. package/src/components/SearchBar/SearchBar.stories.mdx +196 -224
  197. package/src/components/SearchBar/SearchBar.tsx +151 -46
  198. package/src/components/Select/Select.stories.mdx +193 -168
  199. package/src/components/Select/Select.test.tsx +129 -324
  200. package/src/components/Select/Select.tsx +120 -160
  201. package/src/components/Select/SelectTypes.tsx +4 -0
  202. package/src/components/SkeletonLoader/SkeletonLoader.stories.mdx +18 -29
  203. package/src/components/SkeletonLoader/SkeletonLoader.test.tsx +7 -7
  204. package/src/components/SkeletonLoader/SkeletonLoader.tsx +4 -2
  205. package/src/components/SkeletonLoader/SkeletonLoaderTypes.tsx +2 -2
  206. package/src/components/SkeletonLoader/_SkeletonLoader.scss +3 -3
  207. package/src/components/StatusBadge/StatusBadge.stories.mdx +91 -0
  208. package/src/components/StatusBadge/StatusBadge.test.tsx +35 -7
  209. package/src/components/StatusBadge/StatusBadge.tsx +24 -25
  210. package/src/components/StatusBadge/StatusBadgeTypes.tsx +5 -0
  211. package/src/components/StatusBadge/__snapshots__/StatusBadge.test.tsx.snap +28 -0
  212. package/src/components/StyleGuide/Bidirectionality.stories.mdx +112 -90
  213. package/src/components/StyleGuide/Buttons.stories.mdx +98 -100
  214. package/src/components/StyleGuide/Colors.stories.mdx +336 -0
  215. package/src/components/StyleGuide/Forms.stories.mdx +85 -0
  216. package/src/components/StyleGuide/Iconography.stories.mdx +86 -93
  217. package/src/components/StyleGuide/Spacing.stories.mdx +0 -1
  218. package/src/components/StyleGuide/Typography.stories.mdx +164 -166
  219. package/src/components/StyleGuide/UIDocCard.tsx +4 -4
  220. package/src/components/Tabs/Tabs.stories.mdx +221 -0
  221. package/src/components/Tabs/Tabs.test.tsx +264 -0
  222. package/src/components/Tabs/Tabs.tsx +220 -0
  223. package/src/components/Template/Template.stories.mdx +574 -0
  224. package/src/components/Template/Template.test.tsx +124 -0
  225. package/src/components/Template/Template.tsx +226 -0
  226. package/src/components/Text/Text.stories.mdx +70 -0
  227. package/src/components/Text/Text.test.tsx +63 -0
  228. package/src/components/Text/Text.tsx +55 -0
  229. package/src/components/Text/TextTypes.tsx +6 -0
  230. package/src/components/Text/__snapshots__/Text.test.tsx.snap +33 -0
  231. package/src/components/TextInput/TextInput.stories.mdx +90 -90
  232. package/src/components/TextInput/TextInput.test.tsx +103 -83
  233. package/src/components/TextInput/TextInput.tsx +108 -91
  234. package/src/components/TextInput/TextInputTypes.tsx +6 -0
  235. package/src/components/VideoPlayer/VideoPlayer.stories.mdx +2 -1
  236. package/src/components/VideoPlayer/VideoPlayer.tsx +4 -2
  237. package/src/components/VideoPlayer/_VideoPlayer.scss +1 -1
  238. package/src/docs/Chakra.stories.mdx +341 -0
  239. package/src/docs/Intro.stories.mdx +31 -24
  240. package/src/index.ts +70 -5
  241. package/src/styles/01-colors/_colors-brand.scss +6 -4
  242. package/src/styles/01-colors/_colors-utility.scss +14 -15
  243. package/src/styles/03-space/_space-inline.scss +47 -7
  244. package/src/styles/03-space/_space-inset.scss +33 -5
  245. package/src/styles/03-space/_space-stack.scss +48 -8
  246. package/src/styles/base/_02-breakpoints.scss +5 -4
  247. package/src/styles/base/_04-base.scss +2 -1
  248. package/src/styles/base/_place-holder.scss +1 -1
  249. package/src/styles/base/_typography.scss +1 -29
  250. package/src/styles.scss +22 -25
  251. package/src/theme/components/accordion.ts +30 -0
  252. package/src/theme/components/breadcrumb.ts +77 -0
  253. package/src/theme/components/button.ts +125 -0
  254. package/src/theme/components/checkbox.ts +107 -0
  255. package/src/theme/components/customCheckboxGroup.ts +12 -0
  256. package/src/theme/components/customRadioGroup.ts +12 -0
  257. package/src/theme/components/global.ts +71 -0
  258. package/src/theme/components/globalMixins.ts +16 -0
  259. package/src/theme/components/heading.ts +72 -0
  260. package/src/theme/components/hero.ts +239 -0
  261. package/src/theme/components/icon.ts +79 -0
  262. package/src/theme/components/label.ts +17 -0
  263. package/src/theme/components/link.ts +47 -0
  264. package/src/theme/components/radio.ts +106 -0
  265. package/src/theme/components/searchBar.ts +21 -0
  266. package/src/theme/components/select.ts +50 -0
  267. package/src/theme/components/statusBadge.ts +27 -0
  268. package/src/theme/components/tabs.ts +79 -0
  269. package/src/theme/components/template.ts +114 -0
  270. package/src/theme/components/text.ts +31 -0
  271. package/src/theme/components/textInput.ts +61 -0
  272. package/src/theme/foundations/breakpoints.ts +24 -0
  273. package/src/theme/foundations/colors.ts +208 -0
  274. package/src/theme/foundations/global.ts +26 -0
  275. package/src/theme/foundations/shadows.ts +5 -0
  276. package/src/theme/foundations/spacing.ts +85 -0
  277. package/src/theme/foundations/typography.ts +35 -0
  278. package/src/theme/index.ts +88 -0
  279. package/src/theme/provider.tsx +9 -0
  280. package/src/theme/types.ts +1 -0
  281. package/src/utils/componentCategories.ts +56 -21
  282. package/src/utils/utils.ts +13 -0
  283. package/dist/components/Accordion/Accordion.stories.d.ts +0 -5
  284. package/dist/components/Card/Card.stories.d.ts +0 -27
  285. package/dist/components/Label/Label.stories.d.ts +0 -12
  286. package/dist/components/StatusBadge/StatusBadge.stories.d.ts +0 -8
  287. package/dist/components/Template/Template.stories.d.ts +0 -29
  288. package/src/components/Accordion/Accordion.stories.tsx +0 -65
  289. package/src/components/Accordion/_Accordion.scss +0 -81
  290. package/src/components/Breadcrumbs/_Breadcrumbs.scss +0 -97
  291. package/src/components/Checkbox/_Checkbox.scss +0 -97
  292. package/src/components/Form/_Form.scss +0 -28
  293. package/src/components/Heading/_Heading.scss +0 -163
  294. package/src/components/Hero/_Hero.scss +0 -256
  295. package/src/components/Icons/_Icons.scss +0 -116
  296. package/src/components/Label/Label.stories.tsx +0 -30
  297. package/src/components/Label/_Label.scss +0 -22
  298. package/src/components/Link/_Link.scss +0 -73
  299. package/src/components/Radio/_Radio.scss +0 -84
  300. package/src/components/SearchBar/_SearchBar.scss +0 -16
  301. package/src/components/Select/_Select.scss +0 -82
  302. package/src/components/StatusBadge/StatusBadge.stories.tsx +0 -33
  303. package/src/components/StatusBadge/_StatusBadge.scss +0 -23
  304. package/src/components/StyleGuide/Colors.stories.tsx +0 -288
  305. package/src/components/Template/Template.stories.tsx +0 -85
  306. package/src/components/Template/_Template.scss +0 -63
  307. package/src/components/TextInput/_TextInput.scss +0 -59
package/src/components/TextInput/_TextInput.scss DELETED
@@ -1,59 +0,0 @@
1
- $break-input-mobile: 400px;
2
-
3
- .textinput {
4
- @include space-stack-xs;
5
-
6
- .inputfield {
7
- @include placeholder {
8
- color: var(--ui-gray-dark);
9
- font-style: italic;
10
- line-height: 21px;
11
- }
12
-
13
- border: 1px solid var(--ui-gray-medium);
14
- padding: var(--space-xs) var(--space-s);
15
- width: 100%;
16
-
17
- &--textarea {
18
- line-height: 1.5;
19
- min-height: var(--space-xxl);
20
- }
21
-
22
- &:hover {
23
- border-color: var(--ui-gray-dark);
24
- }
25
-
26
- &:disabled {
27
- background-color: var(--ui-gray-xxlight);
28
- color: var(--ui-gray-xdark);
29
- pointer-events: none;
30
- }
31
-
32
- &:active,
33
- &:focus,
34
- &:active:hover,
35
- &:focus:hover {
36
- border: 1px solid var(--ui-focus);
37
- box-shadow: 0;
38
- outline: 1px solid var(--ui-focus);
39
- z-index: 9999;
40
- }
41
-
42
- &--error {
43
- border: 1px solid var(--ui-error);
44
-
45
- &:hover,
46
- &:active,
47
- &:focus,
48
- &:active:hover,
49
- &:focus:hover {
50
- border: 1px solid var(--ui-error);
51
- }
52
- }
53
- }
54
-
55
- > .helper-text {
56
- margin-bottom: 0;
57
- margin-top: var(--space-xs);
58
- }
59
- }