@nypl/design-system-react-components 1.0.0 → 1.0.3-beta

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 (296) hide show
  1. package/README.md +3 -5
  2. package/dist/components/Checkbox/Checkbox.d.ts +0 -1
  3. package/dist/components/ComponentWrapper/ComponentWrapper.d.ts +8 -0
  4. package/dist/components/Heading/Heading.d.ts +2 -0
  5. package/dist/components/Logo/Logo.d.ts +1 -1
  6. package/dist/components/Logo/LogoSvgs.d.ts +4 -0
  7. package/dist/components/Slider/Slider.d.ts +1 -2
  8. package/dist/components/TextInput/TextInput.d.ts +2 -1
  9. package/dist/design-system-react-components.cjs.development.js +1038 -674
  10. package/dist/design-system-react-components.cjs.development.js.map +1 -1
  11. package/dist/design-system-react-components.cjs.production.min.js +1 -1
  12. package/dist/design-system-react-components.cjs.production.min.js.map +1 -1
  13. package/dist/design-system-react-components.esm.js +1039 -675
  14. package/dist/design-system-react-components.esm.js.map +1 -1
  15. package/dist/hooks/{tests → __tests__}/useCarouselStyles.test.d.ts +0 -0
  16. package/dist/theme/components/button.d.ts +1 -0
  17. package/dist/theme/components/card.d.ts +98 -13
  18. package/dist/theme/components/checkboxGroup.d.ts +1 -1
  19. package/dist/theme/components/global.d.ts +2 -2
  20. package/dist/theme/components/heading.d.ts +4 -16
  21. package/dist/theme/components/image.d.ts +6 -0
  22. package/dist/theme/components/radio.d.ts +8 -0
  23. package/dist/theme/components/radioGroup.d.ts +1 -1
  24. package/dist/theme/components/skipNavigation.d.ts +3 -0
  25. package/dist/theme/components/structuredContent.d.ts +0 -5
  26. package/dist/theme/components/template.d.ts +4 -1
  27. package/dist/utils/utils.d.ts +15 -0
  28. package/package.json +6 -7
  29. package/CHANGELOG.md +0 -1399
  30. package/src/__tests__/fileMock.ts +0 -6
  31. package/src/__tests__/setup.ts +0 -27
  32. package/src/__tests__/utils/utils.test.ts +0 -18
  33. package/src/components/AccessibilityGuide/SkipNavigation.stories.mdx +0 -42
  34. package/src/components/Accordion/Accordion.stories.mdx +0 -361
  35. package/src/components/Accordion/Accordion.test.tsx +0 -237
  36. package/src/components/Accordion/Accordion.tsx +0 -136
  37. package/src/components/Accordion/__snapshots__/Accordion.test.tsx.snap +0 -734
  38. package/src/components/Autosuggest/Autosuggest.stories.mdx +0 -75
  39. package/src/components/Autosuggest/Autosuggest.stories.tsx +0 -211
  40. package/src/components/Autosuggest/_Autosuggest.scss +0 -51
  41. package/src/components/Breadcrumbs/Breadcrumbs.stories.mdx +0 -231
  42. package/src/components/Breadcrumbs/Breadcrumbs.test.tsx +0 -144
  43. package/src/components/Breadcrumbs/Breadcrumbs.tsx +0 -98
  44. package/src/components/Breadcrumbs/__snapshots__/Breadcrumbs.test.tsx.snap +0 -695
  45. package/src/components/Button/Button.stories.mdx +0 -320
  46. package/src/components/Button/Button.test.tsx +0 -184
  47. package/src/components/Button/Button.tsx +0 -95
  48. package/src/components/Button/__snapshots__/Button.test.tsx.snap +0 -106
  49. package/src/components/ButtonGroup/ButtonGroup.stories.mdx +0 -147
  50. package/src/components/ButtonGroup/ButtonGroup.test.tsx +0 -141
  51. package/src/components/ButtonGroup/ButtonGroup.tsx +0 -99
  52. package/src/components/ButtonGroup/__snapshots__/ButtonGroup.test.tsx.snap +0 -117
  53. package/src/components/Card/Card.stories.mdx +0 -1043
  54. package/src/components/Card/Card.test.tsx +0 -388
  55. package/src/components/Card/Card.tsx +0 -345
  56. package/src/components/Card/__snapshots__/Card.test.tsx.snap +0 -568
  57. package/src/components/Chakra/Box.stories.mdx +0 -52
  58. package/src/components/Chakra/Center.stories.mdx +0 -96
  59. package/src/components/Chakra/Flex.stories.mdx +0 -111
  60. package/src/components/Chakra/Grid.stories.mdx +0 -89
  61. package/src/components/Chakra/Stack.stories.mdx +0 -109
  62. package/src/components/Checkbox/Checkbox.stories.mdx +0 -243
  63. package/src/components/Checkbox/Checkbox.test.tsx +0 -319
  64. package/src/components/Checkbox/Checkbox.tsx +0 -166
  65. package/src/components/Checkbox/__snapshots__/Checkbox.test.tsx.snap +0 -616
  66. package/src/components/CheckboxGroup/CheckboxGroup.stories.mdx +0 -462
  67. package/src/components/CheckboxGroup/CheckboxGroup.test.tsx +0 -492
  68. package/src/components/CheckboxGroup/CheckboxGroup.tsx +0 -173
  69. package/src/components/CheckboxGroup/__snapshots__/CheckboxGroup.test.tsx.snap +0 -1722
  70. package/src/components/ComponentWrapper/ComponentWrapper.test.tsx +0 -163
  71. package/src/components/ComponentWrapper/ComponentWrapper.tsx +0 -67
  72. package/src/components/ComponentWrapper/__snapshots__/ComponentWrapper.test.tsx.snap +0 -98
  73. package/src/components/DatePicker/DatePicker.stories.mdx +0 -452
  74. package/src/components/DatePicker/DatePicker.test.tsx +0 -940
  75. package/src/components/DatePicker/DatePicker.tsx +0 -450
  76. package/src/components/DatePicker/_DatePicker.scss +0 -100
  77. package/src/components/DatePicker/__snapshots__/DatePicker.test.tsx.snap +0 -889
  78. package/src/components/Fieldset/Fieldset.stories.mdx +0 -96
  79. package/src/components/Fieldset/Fieldset.test.tsx +0 -155
  80. package/src/components/Fieldset/Fieldset.tsx +0 -55
  81. package/src/components/Fieldset/__snapshots__/Fieldset.test.tsx.snap +0 -89
  82. package/src/components/Form/Form.stories.mdx +0 -426
  83. package/src/components/Form/Form.test.tsx +0 -234
  84. package/src/components/Form/Form.tsx +0 -124
  85. package/src/components/Form/__snapshots__/Form.test.tsx.snap +0 -115
  86. package/src/components/Grid/SimpleGrid.stories.mdx +0 -338
  87. package/src/components/Grid/SimpleGrid.test.tsx +0 -79
  88. package/src/components/Grid/SimpleGrid.tsx +0 -49
  89. package/src/components/Grid/__snapshots__/SimpleGrid.test.tsx.snap +0 -23
  90. package/src/components/Heading/Heading.stories.mdx +0 -184
  91. package/src/components/Heading/Heading.test.tsx +0 -171
  92. package/src/components/Heading/Heading.tsx +0 -101
  93. package/src/components/Heading/__snapshots__/Heading.test.tsx.snap +0 -90
  94. package/src/components/HelperErrorText/HelperErrorText.stories.mdx +0 -172
  95. package/src/components/HelperErrorText/HelperErrorText.test.tsx +0 -114
  96. package/src/components/HelperErrorText/HelperErrorText.tsx +0 -62
  97. package/src/components/HelperErrorText/__snapshots__/HelperErrorText.test.tsx.snap +0 -93
  98. package/src/components/Hero/Hero.stories.mdx +0 -378
  99. package/src/components/Hero/Hero.test.tsx +0 -611
  100. package/src/components/Hero/Hero.tsx +0 -203
  101. package/src/components/Hero/__snapshots__/Hero.test.tsx.snap +0 -379
  102. package/src/components/HorizontalRule/HorizontalRule.stories.mdx +0 -73
  103. package/src/components/HorizontalRule/HorizontalRule.test.tsx +0 -54
  104. package/src/components/HorizontalRule/HorizontalRule.tsx +0 -27
  105. package/src/components/HorizontalRule/__snapshots__/HorizontalRule.test.tsx.snap +0 -44
  106. package/src/components/Icons/Icon.stories.mdx +0 -413
  107. package/src/components/Icons/Icon.test.tsx +0 -120
  108. package/src/components/Icons/Icon.tsx +0 -187
  109. package/src/components/Icons/IconSvgs.tsx +0 -64
  110. package/src/components/Icons/__snapshots__/Icon.test.tsx.snap +0 -129
  111. package/src/components/Image/Image.stories.mdx +0 -332
  112. package/src/components/Image/Image.test.tsx +0 -155
  113. package/src/components/Image/Image.tsx +0 -171
  114. package/src/components/Image/__snapshots__/Image.test.tsx.snap +0 -269
  115. package/src/components/Label/Label.stories.mdx +0 -100
  116. package/src/components/Label/Label.test.tsx +0 -116
  117. package/src/components/Label/Label.tsx +0 -55
  118. package/src/components/Label/__snapshots__/Label.test.tsx.snap +0 -45
  119. package/src/components/Link/Link.stories.mdx +0 -249
  120. package/src/components/Link/Link.test.tsx +0 -224
  121. package/src/components/Link/Link.tsx +0 -178
  122. package/src/components/Link/__snapshots__/Link.test.tsx.snap +0 -286
  123. package/src/components/List/List.stories.mdx +0 -393
  124. package/src/components/List/List.test.tsx +0 -265
  125. package/src/components/List/List.tsx +0 -156
  126. package/src/components/List/__snapshots__/List.test.tsx.snap +0 -213
  127. package/src/components/Logo/Logo.stories.mdx +0 -290
  128. package/src/components/Logo/Logo.test.tsx +0 -116
  129. package/src/components/Logo/Logo.tsx +0 -147
  130. package/src/components/Logo/LogoSvgs.tsx +0 -82
  131. package/src/components/Logo/__snapshots__/Logo.test.tsx.snap +0 -142
  132. package/src/components/Modal/Modal.stories.mdx +0 -301
  133. package/src/components/Modal/Modal.test.tsx +0 -157
  134. package/src/components/Modal/Modal.tsx +0 -154
  135. package/src/components/Modal/__snapshots__/Modal.test.tsx.snap +0 -25
  136. package/src/components/Notification/Notification.stories.mdx +0 -358
  137. package/src/components/Notification/Notification.test.tsx +0 -279
  138. package/src/components/Notification/Notification.tsx +0 -224
  139. package/src/components/Notification/__snapshots__/Notification.test.tsx.snap +0 -525
  140. package/src/components/Pagination/Pagination.stories.mdx +0 -184
  141. package/src/components/Pagination/Pagination.test.tsx +0 -419
  142. package/src/components/Pagination/Pagination.tsx +0 -269
  143. package/src/components/Pagination/__snapshots__/Pagination.test.tsx.snap +0 -544
  144. package/src/components/Placeholder/Placeholder.tsx +0 -19
  145. package/src/components/ProgressIndicator/ProgressIndicator.stories.mdx +0 -360
  146. package/src/components/ProgressIndicator/ProgressIndicator.test.tsx +0 -298
  147. package/src/components/ProgressIndicator/ProgressIndicator.tsx +0 -132
  148. package/src/components/ProgressIndicator/__snapshots__/ProgressIndicator.test.tsx.snap +0 -434
  149. package/src/components/Radio/Radio.stories.mdx +0 -216
  150. package/src/components/Radio/Radio.test.tsx +0 -247
  151. package/src/components/Radio/Radio.tsx +0 -128
  152. package/src/components/Radio/__snapshots__/Radio.test.tsx.snap +0 -411
  153. package/src/components/RadioGroup/RadioGroup.stories.mdx +0 -478
  154. package/src/components/RadioGroup/RadioGroup.test.tsx +0 -471
  155. package/src/components/RadioGroup/RadioGroup.tsx +0 -170
  156. package/src/components/RadioGroup/__snapshots__/RadioGroup.test.tsx.snap +0 -1430
  157. package/src/components/SearchBar/SearchBar.stories.mdx +0 -518
  158. package/src/components/SearchBar/SearchBar.test.tsx +0 -435
  159. package/src/components/SearchBar/SearchBar.tsx +0 -210
  160. package/src/components/SearchBar/__snapshots__/SearchBar.test.tsx.snap +0 -1027
  161. package/src/components/Select/Select.stories.mdx +0 -439
  162. package/src/components/Select/Select.test.tsx +0 -358
  163. package/src/components/Select/Select.tsx +0 -181
  164. package/src/components/Select/__snapshots__/Select.test.tsx.snap +0 -885
  165. package/src/components/SkeletonLoader/SkeletonLoader.stories.mdx +0 -142
  166. package/src/components/SkeletonLoader/SkeletonLoader.test.tsx +0 -116
  167. package/src/components/SkeletonLoader/SkeletonLoader.tsx +0 -123
  168. package/src/components/SkeletonLoader/__snapshots__/SkeletonLoader.test.tsx.snap +0 -898
  169. package/src/components/SkipNavigation/SkipNavigation.stories.mdx +0 -90
  170. package/src/components/SkipNavigation/SkipNavigation.test.tsx +0 -63
  171. package/src/components/SkipNavigation/SkipNavigation.tsx +0 -51
  172. package/src/components/SkipNavigation/__snapshots__/SkipNavigation.test.tsx.snap +0 -130
  173. package/src/components/Slider/Slider.stories.mdx +0 -628
  174. package/src/components/Slider/Slider.test.tsx +0 -736
  175. package/src/components/Slider/Slider.tsx +0 -322
  176. package/src/components/Slider/__snapshots__/Slider.test.tsx.snap +0 -2153
  177. package/src/components/StatusBadge/StatusBadge.stories.mdx +0 -109
  178. package/src/components/StatusBadge/StatusBadge.test.tsx +0 -70
  179. package/src/components/StatusBadge/StatusBadge.tsx +0 -35
  180. package/src/components/StatusBadge/__snapshots__/StatusBadge.test.tsx.snap +0 -47
  181. package/src/components/StructuredContent/StructuredContent.stories.mdx +0 -567
  182. package/src/components/StructuredContent/StructuredContent.test.tsx +0 -435
  183. package/src/components/StructuredContent/StructuredContent.tsx +0 -139
  184. package/src/components/StructuredContent/__snapshots__/StructuredContent.test.tsx.snap +0 -368
  185. package/src/components/StyleGuide/Bidirectionality.stories.mdx +0 -206
  186. package/src/components/StyleGuide/Breakpoints.stories.mdx +0 -55
  187. package/src/components/StyleGuide/Buttons.stories.mdx +0 -194
  188. package/src/components/StyleGuide/ColorCard.tsx +0 -43
  189. package/src/components/StyleGuide/Colors.stories.mdx +0 -201
  190. package/src/components/StyleGuide/DesignTokens.stories.mdx +0 -193
  191. package/src/components/StyleGuide/Forms.stories.mdx +0 -94
  192. package/src/components/StyleGuide/Iconography.stories.mdx +0 -142
  193. package/src/components/StyleGuide/Spacing.stories.mdx +0 -116
  194. package/src/components/StyleGuide/Typography.stories.mdx +0 -419
  195. package/src/components/Table/Table.stories.mdx +0 -276
  196. package/src/components/Table/Table.test.tsx +0 -208
  197. package/src/components/Table/Table.tsx +0 -131
  198. package/src/components/Table/__snapshots__/Table.test.tsx.snap +0 -1703
  199. package/src/components/Tabs/Tabs.stories.mdx +0 -338
  200. package/src/components/Tabs/Tabs.test.tsx +0 -298
  201. package/src/components/Tabs/Tabs.tsx +0 -264
  202. package/src/components/Tabs/__snapshots__/Tabs.test.tsx.snap +0 -584
  203. package/src/components/Template/Template.stories.mdx +0 -691
  204. package/src/components/Template/Template.test.tsx +0 -309
  205. package/src/components/Template/Template.tsx +0 -326
  206. package/src/components/Template/__snapshots__/Template.test.tsx.snap +0 -342
  207. package/src/components/Text/Text.stories.mdx +0 -103
  208. package/src/components/Text/Text.test.tsx +0 -63
  209. package/src/components/Text/Text.tsx +0 -50
  210. package/src/components/Text/__snapshots__/Text.test.tsx.snap +0 -50
  211. package/src/components/TextInput/TextInput.stories.mdx +0 -268
  212. package/src/components/TextInput/TextInput.test.tsx +0 -451
  213. package/src/components/TextInput/TextInput.tsx +0 -240
  214. package/src/components/TextInput/__snapshots__/TextInput.test.tsx.snap +0 -264
  215. package/src/components/Toggle/Toggle.stories.mdx +0 -237
  216. package/src/components/Toggle/Toggle.test.tsx +0 -170
  217. package/src/components/Toggle/Toggle.tsx +0 -126
  218. package/src/components/Toggle/__snapshots__/Toggle.test.tsx.snap +0 -442
  219. package/src/components/VideoPlayer/VideoPlayer.stories.mdx +0 -211
  220. package/src/components/VideoPlayer/VideoPlayer.test.tsx +0 -308
  221. package/src/components/VideoPlayer/VideoPlayer.tsx +0 -188
  222. package/src/components/VideoPlayer/__snapshots__/VideoPlayer.test.tsx.snap +0 -187
  223. package/src/docs/Chakra.stories.mdx +0 -563
  224. package/src/docs/Welcome.stories.mdx +0 -148
  225. package/src/helpers/types.ts +0 -1
  226. package/src/hooks/tests/useCarouselStyles.test.ts +0 -140
  227. package/src/hooks/tests/useNYPLTheme.test.tsx +0 -36
  228. package/src/hooks/useCarouselStyles.stories.mdx +0 -30
  229. package/src/hooks/useCarouselStyles.ts +0 -35
  230. package/src/hooks/useNYPLTheme.stories.mdx +0 -98
  231. package/src/hooks/useNYPLTheme.ts +0 -91
  232. package/src/hooks/useWindowSize.stories.mdx +0 -23
  233. package/src/hooks/useWindowSize.ts +0 -40
  234. package/src/index.ts +0 -136
  235. package/src/resources.scss +0 -6
  236. package/src/styles/base/_01-breakpoints.scss +0 -27
  237. package/src/styles/base/_02-mixins.scss +0 -103
  238. package/src/styles/base/_place-holder.scss +0 -33
  239. package/src/styles/space/_space-inline.scss +0 -79
  240. package/src/styles/space/_space-inset.scss +0 -57
  241. package/src/styles/space/_space-stack.scss +0 -116
  242. package/src/styles.scss +0 -23
  243. package/src/theme/components/accordion.ts +0 -25
  244. package/src/theme/components/breadcrumb.ts +0 -94
  245. package/src/theme/components/button.ts +0 -132
  246. package/src/theme/components/buttonGroup.ts +0 -10
  247. package/src/theme/components/card.ts +0 -231
  248. package/src/theme/components/checkbox.ts +0 -110
  249. package/src/theme/components/checkboxGroup.ts +0 -10
  250. package/src/theme/components/componentWrapper.ts +0 -14
  251. package/src/theme/components/customTable.ts +0 -77
  252. package/src/theme/components/datePicker.ts +0 -17
  253. package/src/theme/components/fieldset.ts +0 -23
  254. package/src/theme/components/global.ts +0 -91
  255. package/src/theme/components/globalMixins.ts +0 -24
  256. package/src/theme/components/heading.ts +0 -79
  257. package/src/theme/components/helperErrorText.ts +0 -14
  258. package/src/theme/components/hero.ts +0 -238
  259. package/src/theme/components/horizontalRule.ts +0 -17
  260. package/src/theme/components/icon.ts +0 -88
  261. package/src/theme/components/image.ts +0 -135
  262. package/src/theme/components/label.ts +0 -15
  263. package/src/theme/components/link.ts +0 -63
  264. package/src/theme/components/list.ts +0 -88
  265. package/src/theme/components/logo.ts +0 -58
  266. package/src/theme/components/notification.ts +0 -132
  267. package/src/theme/components/pagination.ts +0 -17
  268. package/src/theme/components/progressIndicator.ts +0 -67
  269. package/src/theme/components/radio.ts +0 -103
  270. package/src/theme/components/radioGroup.ts +0 -10
  271. package/src/theme/components/searchBar.ts +0 -19
  272. package/src/theme/components/select.ts +0 -72
  273. package/src/theme/components/skeletonLoader.ts +0 -113
  274. package/src/theme/components/skipNavigation.ts +0 -26
  275. package/src/theme/components/slider.ts +0 -95
  276. package/src/theme/components/statusBadge.ts +0 -26
  277. package/src/theme/components/structuredContent.ts +0 -149
  278. package/src/theme/components/tabs.ts +0 -109
  279. package/src/theme/components/template.ts +0 -114
  280. package/src/theme/components/text.ts +0 -38
  281. package/src/theme/components/textInput.ts +0 -65
  282. package/src/theme/components/toggle.ts +0 -109
  283. package/src/theme/components/videoPlayer.ts +0 -47
  284. package/src/theme/foundations/breakpoints.ts +0 -24
  285. package/src/theme/foundations/colors.ts +0 -212
  286. package/src/theme/foundations/global.ts +0 -43
  287. package/src/theme/foundations/radii.ts +0 -7
  288. package/src/theme/foundations/shadows.ts +0 -5
  289. package/src/theme/foundations/spacing.ts +0 -136
  290. package/src/theme/foundations/typography.ts +0 -107
  291. package/src/theme/index.ts +0 -131
  292. package/src/theme/provider.tsx +0 -9
  293. package/src/theme/types.ts +0 -1
  294. package/src/utils/componentCategories.ts +0 -152
  295. package/src/utils/interfaces.ts +0 -5
  296. package/src/utils/utils.ts +0 -44
package/src/__tests__/fileMock.ts DELETED
@@ -1,6 +0,0 @@
1
- /**
2
- * This file is use to mock asset imports in TSX files, mostly
3
- * used in our case to mock SVG files.
4
- */
5
-
6
- module.exports = "div";
package/src/__tests__/setup.ts DELETED
@@ -1,27 +0,0 @@
1
- /* eslint-disable @typescript-eslint/no-var-requires */
2
- import "@testing-library/jest-dom";
3
- // Import this to be able to call this jest-axe assertion for all test files:
4
- // expect(...).toHaveNoViolations();
5
- import "jest-axe/extend-expect";
6
-
7
- const { JSDOM } = require("jsdom");
8
-
9
- const jsdom = new JSDOM("<!doctype html><html><body></body></html>", {
10
- url: "http://localhost",
11
- });
12
- const { window } = jsdom;
13
- const exposedProperties = ["window", "navigator", "document"];
14
-
15
- (global as any).window = window;
16
- (global as any).document = window.document;
17
- Object.keys((document as Document).defaultView).forEach((property) => {
18
- if (typeof (global as any)[property] === "undefined") {
19
- exposedProperties.push(property);
20
- (global as any)[property] = (document as any).defaultView[property];
21
- }
22
- });
23
-
24
- // We expect an error to be thrown and we do catch, but it still gets
25
- // logged and we don't want to see expected errors while we test.
26
- jest.spyOn(global.console, "error").mockImplementation(() => jest.fn());
27
- jest.spyOn(global.console, "warn").mockImplementation(() => jest.fn());
package/src/__tests__/utils/utils.test.ts DELETED
@@ -1,18 +0,0 @@
1
- import { range } from "../../utils/utils";
2
-
3
- describe("range", () => {
4
- it("returns an array of values not including the stop argument", () => {
5
- expect(range(1, 2)).toEqual([1]);
6
- expect(range(4, 7)).toEqual([4, 5, 6]);
7
- expect(range(2, 9)).toEqual([2, 3, 4, 5, 6, 7, 8]);
8
- });
9
-
10
- it("returns an array of values skipping by the step argument", () => {
11
- expect(range(1, 10, 2)).toEqual([1, 3, 5, 7, 9]);
12
- expect(range(4, 8, 3)).toEqual([4, 7]);
13
- expect(range(2, 20, 2)).toEqual([2, 4, 6, 8, 10, 12, 14, 16, 18]);
14
- expect(range(2, 20, 4)).toEqual([2, 6, 10, 14, 18]);
15
- expect(range(2, 6, 2)).toEqual([2, 4]);
16
- expect(range(2, 20, 5)).toEqual([2, 7, 12, 17]);
17
- });
18
- });
package/src/components/AccessibilityGuide/SkipNavigation.stories.mdx DELETED
@@ -1,42 +0,0 @@
1
- import { Meta } from "@storybook/addon-docs";
2
-
3
- import { getCategory } from "../../utils/componentCategories";
4
-
5
- <Meta title={getCategory("Skip Navigation")} />
6
-
7
- # Skip Navigation
8
-
9
- | Table of Contents |
10
- | ---------------------------------------------- |
11
- | 1. [General Information](#general-information) |
12
- | 2. [Resources](#resources) |
13
-
14
- ## General Information
15
-
16
- An application's "skip navigation" is used to skip to the primary or main
17
- content of a page. This component usually contains one link that is located at
18
- the top of the page and is visually hidden until a user focuses on the link.
19
- In the case of NYPL applications, the skip navigation contains two links; the
20
- first link points to the main content of the page and the second link points to
21
- accessibility information on [NYPL.org/accessibility](https://nypl.org/accessibility).
22
- For most digitial applications on the NYPL.org platform, the [NYPL Header](https://github.com/NYPL/dgx-header-component)
23
- is used and this component already renders a skip navigation area with links.
24
-
25
- In the Reservoir Design System (DS), the `SkipNavigation` component renders two
26
- links.
27
-
28
- The first link points to the `"#mainContent"` anchor which an NYPL page
29
- is expected to have. The `TemplateAppContainer` component renders as a `main`
30
- HTML element with a default `id` of `"mainContent"`. While it's possible to
31
- update the target of the skip link and the id of the `<main>` element, this is
32
- not recommended. When using the DS' `SkipNavigation` and `TemplateAppContainer`
33
- components, this accessibility combination is automatically handled. When not
34
- using the `TemplateAppContainer` component, make sure to render a `main` HTML
35
- element with an `id` of `"mainContent"`.
36
-
37
- The second link points to additional accessibility information on [NYPL.org/accessibility](https://nypl.org/accessibility).
38
-
39
- ## Resources
40
-
41
- - [WebAim Skip Navigation Link](https://webaim.org/techniques/skipnav/)
42
- - [A11ymatters Skip Navigation Link](https://www.a11ymatters.com/pattern/skip-link/)
package/src/components/Accordion/Accordion.stories.mdx DELETED
@@ -1,361 +0,0 @@
1
- import {
2
- ArgsTable,
3
- Canvas,
4
- Description,
5
- Meta,
6
- Story,
7
- } from "@storybook/addon-docs";
8
- import ReactDOMServer from "react-dom/server";
9
- import { withDesign } from "storybook-addon-designs";
10
-
11
- import Accordion from "./Accordion";
12
- import Card, { CardHeading, CardContent } from "../Card/Card";
13
- import { getCategory } from "../../utils/componentCategories";
14
-
15
- <Meta
16
- title={getCategory("Accordion")}
17
- component={Accordion}
18
- decorators={[withDesign]}
19
- parameters={{
20
- design: {
21
- type: "figma",
22
- url: "https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Master?node-id=10734%3A2520",
23
- },
24
- jest: ["Accordion.test.tsx"],
25
- }}
26
- argTypes={{
27
- accordionData: { control: false },
28
- id: { control: false },
29
- isDefaultOpen: { table: { defaultValue: { summary: false } } },
30
- }}
31
- />
32
-
33
- # Accordion
34
-
35
- | Component Version | DS Version |
36
- | ----------------- | ---------- |
37
- | Added | `0.1.0` |
38
- | Latest | `0.28.0` |
39
-
40
- ## Table of Contents
41
-
42
- - [Overview](#overview)
43
- - [Component Props](#component-props)
44
- - [Accessibility](#accessibility)
45
- - [FAQ Example](#faq-example)
46
-
47
- ## Overview
48
-
49
- <Description of={Accordion} />
50
-
51
- The `Accordion` component displays a list of high-level options that can
52
- expand and collapse to reveal associated sections of content. This component
53
- pushes existing content on the page down. Each accordion item is self contained,
54
- but when the data for multiple accordions is passed in through the `accordionData`
55
- prop, the `Accordion` components are grouped together and rendered under a single
56
- element. When grouped like this, each `Accordion` component still opens and
57
- closes independent from the others in the group.
58
-
59
- The only way to render an `Accordion` component is to pass in an array of objects
60
- with `label`, `panel`, and optional `accordionType` properties for each accordion item.
61
- Note that you can pass in a string or DOM elements into the `panel` property in each
62
- object. This approach is needed because, internally, we deal with the logic to render
63
- the necessary icon, Chakra components, and styles. Additionally, the `accordionType`
64
- prop can be used to change the accordion button's background color. It takes a value
65
- of `"default"` for `"ui.white"`, `"warning"` for `"ui.status.primary"`, and
66
- `"error"` for `"ui.status.secondary"`.
67
-
68
- ```jsx
69
- const accordionData = [
70
- {
71
- accordionType: "default",
72
- label: "Tom Nook",
73
- panel: (
74
- <Card
75
- layout="row"
76
- center
77
- imageProps={{
78
- alt: "Alt text",
79
- aspectRatio: "twoByOne",
80
- src: "https://play.nintendo.com/images/AC_Tom_FRYtwIN.17345b1513ac044897cfc243542899dce541e8dc.9afde10b.png",
81
- }}
82
- >
83
- <CardHeading level="four" id="heading1">
84
- Tom Nook
85
- </CardHeading>
86
- <CardContent>
87
- Tom Nook, <b>known in Japan as Tanukichi</b>, is a fictional
88
- character in the Animal Crossing series who operates the
89
- village store.
90
- </CardContent>
91
- </Card>
92
- ),
93
- },
94
- ];
95
-
96
- ...
97
-
98
- <Accordion accordionData={accordionData} />
99
- ```
100
-
101
- ## Component Props
102
-
103
- <Canvas withToolbar>
104
- <Story
105
- name="Accordion with Controls"
106
- args={{
107
- accordionData: [
108
- {
109
- accordionType: "default",
110
- label: "Tom Nook",
111
- panel: (
112
- <Card
113
- imageProps={{
114
- alt: "Alt text",
115
- aspectRatio: "twoByOne",
116
- src: "https://play.nintendo.com/images/AC_Tom_FRYtwIN.17345b1513ac044897cfc243542899dce541e8dc.9afde10b.png",
117
- }}
118
- isCentered
119
- layout="row"
120
- >
121
- <CardHeading level="four" id="heading1">
122
- Tom Nook
123
- </CardHeading>
124
- <CardContent>
125
- Tom Nook, <b>known in Japan as Tanukichi</b>, is a fictional
126
- character in the Animal Crossing series who operates the village
127
- store.
128
- </CardContent>
129
- </Card>
130
- ),
131
- },
132
- ],
133
- id: "accordion-id",
134
- isDefaultOpen: false,
135
- }}
136
- >
137
- {(args) => <Accordion {...args} />}
138
- </Story>
139
- </Canvas>
140
-
141
- <ArgsTable story="Accordion with Controls" />
142
-
143
- ```jsx
144
- const accordionData = [
145
- {
146
- accordionType: "default",
147
- label: "Tom Nook",
148
- panel: (
149
- <Card
150
- imageProps={{
151
- alt: "Alt text",
152
- aspectRatio: "twoByOne",
153
- src: "https://play.nintendo.com/images/AC_Tom_FRYtwIN.17345b1513ac044897cfc243542899dce541e8dc.9afde10b.png",
154
- }}
155
- isCentered
156
- layout="row"
157
- >
158
- <CardHeading level="four" id="heading1">
159
- Tom Nook
160
- </CardHeading>
161
- <CardContent>
162
- Tom Nook, <b>known in Japan as Tanukichi</b>, is a fictional character
163
- in the Animal Crossing series who operates the village store.
164
- </CardContent>
165
- </Card>
166
- ),
167
- },
168
- ];
169
- ```
170
-
171
- ## Accessibility
172
-
173
- - Follows [U.S. Web Design System (USWDS)](https://designsystem.digital.gov/components/accordion/)
174
- guidelines:
175
- - Use the `button` HTML element for screenreaders and keyboards.
176
- - Use the `aria-expanded` attribute to indicate whether the `Accordion` is
177
- expanded (`true`) or collapsed (`false`).
178
- - Use the `aria-controls` attribute to associate the control with the panel.
179
- - Deviates from USWDS in that the user can open multiple panels. Opening one,
180
- does not collapse already expanded panel.
181
- - The open and close icons are decorative (`aria-hidden` is `true`).
182
- - Visible focus goes around full button and full button is clickable
183
-
184
- Resources:
185
-
186
- - [W3C WAI-Aria Practices - Accordion](https://www.w3.org/TR/wai-aria-practices-1.1/#accordion)
187
- - [USWDS Accordion](https://designsystem.digital.gov/components/accordion/)
188
- - [Chakra Accordion](https://chakra-ui.com/docs/components/disclosure/accordion)
189
-
190
- ## FAQ Example
191
-
192
- export const faqContent = [
193
- {
194
- accordionType: "default",
195
- label: "Tom Nook",
196
- panel: (
197
- <Card
198
- imageProps={{
199
- alt: "Alt text",
200
- aspectRatio: "twoByOne",
201
- src: "https://play.nintendo.com/images/AC_Tom_FRYtwIN.17345b1513ac044897cfc243542899dce541e8dc.9afde10b.png",
202
- }}
203
- isCentered
204
- layout="row"
205
- >
206
- <CardHeading level="four" id="heading1-tom">
207
- Tom Nook
208
- </CardHeading>
209
- <CardContent>
210
- Tom Nook, <b>known in Japan as Tanukichi</b>, is a fictional character
211
- in the Animal Crossing series who operates the village store.
212
- </CardContent>
213
- </Card>
214
- ),
215
- },
216
- {
217
- accordionType: "warning",
218
- label: "Isabelle",
219
- panel: (
220
- <Card
221
- imageProps={{
222
- alt: "Alt text",
223
- aspectRatio: "twoByOne",
224
- src: "https://play.nintendo.com/images/AC_Isabelle_7XU6aGu.17345b1513ac044897cfc243542899dce541e8dc.9afde10b.png",
225
- }}
226
- isCentered
227
- layout="row"
228
- >
229
- <CardHeading level="four" id="heading1-isabelle">
230
- Isabelle
231
- </CardHeading>
232
- <CardContent>
233
- Isabelle, known as Shizue in Japan, is a fictional character from the
234
- Animal Crossing series of video games. She is a kindly Shih Tzu that
235
- debuted in the 2012 release Animal Crossing: New Leaf, where she
236
- serves as the secretary to the player character.
237
- </CardContent>
238
- </Card>
239
- ),
240
- },
241
- {
242
- accordionType: "error",
243
- label: "K.K. Slider",
244
- panel: (
245
- <Card
246
- imageProps={{
247
- alt: "Alt text",
248
- aspectRatio: "twoByOne",
249
- src: "https://play.nintendo.com/images/AC_KK_jh4yj5t.17345b1513ac044897cfc243542899dce541e8dc.9afde10b.png",
250
- }}
251
- isCentered
252
- layout="row"
253
- >
254
- <CardHeading level="four" id="heading1-kkslider">
255
- K.K. Slider
256
- </CardHeading>
257
- <CardContent>
258
- <p>
259
- Totakeke, more commonly known as <b>K.K. Slider or K.K.</b>, is a
260
- fictional character within the Animal Crossing franchise. One of the
261
- franchise's most popular characters, he debuted in the title Animal
262
- Crossing, and has appeared in every installment since.
263
- </p>
264
- </CardContent>
265
- </Card>
266
- ),
267
- },
268
- ];
269
-
270
- Building out FAQ-like accordions happens automatically when there are more than
271
- one object in the array passed into the `accordionData` prop.
272
-
273
- <Canvas withToolbar>
274
- <Story name="FAQ Example">
275
- <Accordion accordionData={faqContent} />
276
- </Story>
277
- </Canvas>
278
-
279
- ```jsx
280
- export const faqContent = [
281
- {
282
- accordionType: "default",
283
- label: "Tom Nook",
284
- panel: (
285
- <Card
286
- imageProps={{
287
- alt: "Alt text",
288
- aspectRatio: "twoByOne",
289
- src: "https://play.nintendo.com/images/AC_Tom_FRYtwIN.17345b1513ac044897cfc243542899dce541e8dc.9afde10b.png",
290
- }}
291
- isCentered
292
- layout="row"
293
- >
294
- <CardHeading level="four" id="heading1-tom">
295
- Tom Nook
296
- </CardHeading>
297
- <CardContent>
298
- Tom Nook, <b>known in Japan as Tanukichi</b>, is a fictional character
299
- in the Animal Crossing series who operates the village store.
300
- </CardContent>
301
- </Card>
302
- ),
303
- },
304
- {
305
- accordionType: "warning",
306
- label: "Isabelle",
307
- panel: (
308
- <Card
309
- imageProps={{
310
- alt: "Alt text",
311
- aspectRatio: "twoByOne",
312
- src: "https://play.nintendo.com/images/AC_Isabelle_7XU6aGu.17345b1513ac044897cfc243542899dce541e8dc.9afde10b.png",
313
- }}
314
- isCentered
315
- layout="row"
316
- >
317
- <CardHeading level="four" id="heading1-isabelle">
318
- Isabelle
319
- </CardHeading>
320
- <CardContent>
321
- Isabelle, known as Shizue in Japan, is a fictional character from the
322
- Animal Crossing series of video games. She is a kindly Shih Tzu that
323
- debuted in the 2012 release Animal Crossing: New Leaf, where she
324
- serves as the secretary to the player character.
325
- </CardContent>
326
- </Card>
327
- ),
328
- },
329
- {
330
- accordionType: "error",
331
- label: "K.K. Slider",
332
- panel: (
333
- <Card
334
- imageProps={{
335
- alt: "Alt text",
336
- aspectRatio: "twoByOne",
337
- src: "https://play.nintendo.com/images/AC_KK_jh4yj5t.17345b1513ac044897cfc243542899dce541e8dc.9afde10b.png",
338
- }}
339
- isCentered
340
- layout="row"
341
- >
342
- <CardHeading level="four" id="heading1-kkslider">
343
- K.K. Slider
344
- </CardHeading>
345
- <CardContent>
346
- <p>
347
- Totakeke, more commonly known as <b>K.K. Slider or K.K.</b>, is a
348
- fictional character within the Animal Crossing franchise. One of the
349
- franchise's most popular characters, he debuted in the title Animal
350
- Crossing, and has appeared in every installment since.
351
- </p>
352
- </CardContent>
353
- </Card>
354
- ),
355
- },
356
- ];
357
-
358
- ...
359
-
360
- <Accordion accordionData={faqContent} />
361
- ```
package/src/components/Accordion/Accordion.test.tsx DELETED
@@ -1,237 +0,0 @@
1
- import * as React from "react";
2
- import { axe } from "jest-axe";
3
- import { render, screen } from "@testing-library/react";
4
- import renderer from "react-test-renderer";
5
- import userEvent from "@testing-library/user-event";
6
-
7
- import Accordion from "./Accordion";
8
- import Card, { CardContent, CardHeading } from "../Card/Card";
9
-
10
- describe("Accordion Accessibility", () => {
11
- it("passes axe accessibility test for one item", async () => {
12
- const { container } = render(
13
- <Accordion
14
- accordionData={[
15
- {
16
- label: "Tom Nook",
17
- panel: (
18
- <p>
19
- Tom Nook, <b>known in Japan as Tanukichi</b>, is a fictional
20
- character in the Animal Crossing series who operates the village
21
- store.
22
- </p>
23
- ),
24
- },
25
- ]}
26
- />
27
- );
28
- expect(await axe(container)).toHaveNoViolations();
29
- });
30
-
31
- it("passes axe accessibility test for multiple items", async () => {
32
- const { container } = render(
33
- <Accordion
34
- accordionData={[
35
- {
36
- label: "Tom Nook",
37
- panel: (
38
- <p>
39
- Tom Nook, <b>known in Japan as Tanukichi</b>, is a fictional
40
- character in the Animal Crossing series who operates the village
41
- store.
42
- </p>
43
- ),
44
- },
45
- {
46
- label: "Isabelle",
47
- panel:
48
- "Isabelle, known as Shizue in Japan, is a fictional character " +
49
- "from the Animal Crossing series of video games. She is a kindly Shih " +
50
- "Tzu that debuted in the 2012 release Animal Crossing: New Leaf, where " +
51
- "she serves as the secretary to the player character.",
52
- },
53
- ]}
54
- />
55
- );
56
- expect(await axe(container)).toHaveNoViolations();
57
- });
58
- });
59
-
60
- export const accordionData = [
61
- {
62
- label: "Tom Nook",
63
- panel: (
64
- <p>
65
- Tom Nook, <b>known in Japan as Tanukichi</b>, is a fictional character
66
- in the Animal Crossing series who operates the village store.
67
- </p>
68
- ),
69
- },
70
- {
71
- label: "Isabelle",
72
- panel:
73
- "Isabelle, known as Shizue in Japan, is a fictional character " +
74
- "from the Animal Crossing series of video games. She is a kindly Shih " +
75
- "Tzu that debuted in the 2012 release Animal Crossing: New Leaf, where " +
76
- "she serves as the secretary to the player character.",
77
- },
78
- {
79
- label: "K.K. Slider",
80
- panel:
81
- "<p>Totakeke, more commonly known as <b>K.K. Slider or K.K.</b>, is a " +
82
- "fictional character within the Animal Crossing franchise. One of the " +
83
- "franchise's most popular characters, he debuted in the title Animal " +
84
- "Crossing, and has appeared in every installment since.</p>",
85
- },
86
- ];
87
-
88
- describe("Accordion", () => {
89
- it("renders a visible button with a label to click on", () => {
90
- render(<Accordion accordionData={[accordionData[0]]} />);
91
- const accordionLabel = screen.getByRole("button", { name: "Tom Nook" });
92
-
93
- expect(accordionLabel).toBeInTheDocument();
94
- // Closed by default.
95
- expect(accordionLabel).toHaveAttribute("aria-expanded", "false");
96
- expect(screen.getByText(/known in Japan as Tanukichi/i)).not.toBeVisible();
97
- });
98
-
99
- it("opens the panel by default with isDefaultOpen passed", () => {
100
- render(<Accordion isDefaultOpen accordionData={[accordionData[0]]} />);
101
- const accordionLabel = screen.getByRole("button", { name: "Tom Nook" });
102
-
103
- expect(accordionLabel).toBeInTheDocument();
104
- expect(accordionLabel).toHaveAttribute("aria-expanded", "true");
105
- });
106
-
107
- it("opens the accordion when the label is clicked", () => {
108
- render(<Accordion accordionData={[accordionData[0]]} />);
109
-
110
- const accordionLabel = screen.getByRole("button", { name: "Tom Nook" });
111
- expect(accordionLabel).toHaveAttribute("aria-expanded", "false");
112
- userEvent.click(accordionLabel);
113
- expect(accordionLabel).toHaveAttribute("aria-expanded", "true");
114
- });
115
-
116
- it("renders multiple accordion items grouped together", () => {
117
- render(<Accordion accordionData={accordionData} />);
118
-
119
- const accordion1 = screen.getByRole("button", { name: "Tom Nook" });
120
- const accordion2 = screen.getByRole("button", { name: "Isabelle" });
121
- const accordion3 = screen.getByRole("button", { name: "K.K. Slider" });
122
-
123
- expect(accordion1).toHaveAttribute("aria-expanded", "false");
124
- expect(accordion2).toHaveAttribute("aria-expanded", "false");
125
- expect(accordion3).toHaveAttribute("aria-expanded", "false");
126
- });
127
-
128
- it("opens each accordion item independently of each other", () => {
129
- render(<Accordion accordionData={accordionData} />);
130
-
131
- const accordion1 = screen.getByRole("button", { name: "Tom Nook" });
132
- const accordion2 = screen.getByRole("button", { name: "Isabelle" });
133
- const accordion3 = screen.getByRole("button", { name: "K.K. Slider" });
134
-
135
- expect(accordion1).toHaveAttribute("aria-expanded", "false");
136
- expect(accordion2).toHaveAttribute("aria-expanded", "false");
137
- expect(accordion3).toHaveAttribute("aria-expanded", "false");
138
-
139
- userEvent.click(accordion1);
140
- expect(accordion1).toHaveAttribute("aria-expanded", "true");
141
- expect(accordion2).toHaveAttribute("aria-expanded", "false");
142
- expect(accordion3).toHaveAttribute("aria-expanded", "false");
143
-
144
- userEvent.click(accordion2);
145
- expect(accordion1).toHaveAttribute("aria-expanded", "true");
146
- expect(accordion2).toHaveAttribute("aria-expanded", "true");
147
- expect(accordion3).toHaveAttribute("aria-expanded", "false");
148
-
149
- userEvent.click(accordion3);
150
- userEvent.click(accordion1);
151
- expect(accordion1).toHaveAttribute("aria-expanded", "false");
152
- expect(accordion2).toHaveAttribute("aria-expanded", "true");
153
- expect(accordion3).toHaveAttribute("aria-expanded", "true");
154
- });
155
-
156
- it("Renders the UI snapshot correctly", () => {
157
- const accordionData = [
158
- {
159
- label: "Gerry Kellman",
160
- panel: (
161
- <Card
162
- id="card"
163
- imageProps={{
164
- alt: "Alt text",
165
- aspectRatio: "twoByOne",
166
- src: "https://cdn.onebauer.media/one/media/6176/76fd/405b/ab5f/f20f/2d52/gerri-1500-1.jpg?format=jpg&quality=80&width=850&ratio=1-1&resize=aspectfit",
167
- }}
168
- isCentered
169
- layout="row"
170
- >
171
- <CardHeading id="heading1" level="four">
172
- Gerry Kellman
173
- </CardHeading>
174
- <CardContent>
175
- Gerri is <b>one of Logan's most trusted confidantes</b>, one who
176
- serves many roles within the company. She's one of the most
177
- powerful people at Waystar Royco outside of the family itself.
178
- </CardContent>
179
- </Card>
180
- ),
181
- },
182
- ];
183
-
184
- const primary = renderer
185
- .create(<Accordion accordionData={accordionData} id="accordian" />)
186
- .toJSON();
187
- const defaultOpen = renderer
188
- .create(
189
- <Accordion accordionData={accordionData} id="accordian" isDefaultOpen />
190
- )
191
- .toJSON();
192
- const withError = renderer
193
- .create(
194
- <Accordion
195
- accordionData={[{ ...accordionData[0], accordionType: "error" }]}
196
- id="accordian"
197
- isDefaultOpen
198
- />
199
- )
200
- .toJSON();
201
- const withWarning = renderer
202
- .create(
203
- <Accordion
204
- accordionData={[{ ...accordionData[0], accordionType: "warning" }]}
205
- id="accordian"
206
- isDefaultOpen
207
- />
208
- )
209
- .toJSON();
210
- const withChakraProps = renderer
211
- .create(
212
- <Accordion
213
- accordionData={accordionData}
214
- id="accordian"
215
- p="s"
216
- color="ui.error.primary"
217
- />
218
- )
219
- .toJSON();
220
- const withOtherProps = renderer
221
- .create(
222
- <Accordion
223
- accordionData={accordionData}
224
- id="accordian"
225
- data-testid="testid"
226
- />
227
- )
228
- .toJSON();
229
-
230
- expect(primary).toMatchSnapshot();
231
- expect(defaultOpen).toMatchSnapshot();
232
- expect(withChakraProps).toMatchSnapshot();
233
- expect(withOtherProps).toMatchSnapshot();
234
- expect(withError).toMatchSnapshot();
235
- expect(withWarning).toMatchSnapshot();
236
- });
237
- });