@nypl/design-system-react-components 1.0.2 → 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 (282) hide show
  1. package/README.md +0 -2
  2. package/dist/components/Slider/Slider.d.ts +1 -2
  3. package/dist/components/TextInput/TextInput.d.ts +2 -1
  4. package/dist/design-system-react-components.cjs.development.js +33 -10
  5. package/dist/design-system-react-components.cjs.development.js.map +1 -1
  6. package/dist/design-system-react-components.cjs.production.min.js +1 -1
  7. package/dist/design-system-react-components.cjs.production.min.js.map +1 -1
  8. package/dist/design-system-react-components.esm.js +33 -10
  9. package/dist/design-system-react-components.esm.js.map +1 -1
  10. package/dist/hooks/{tests → __tests__}/useCarouselStyles.test.d.ts +0 -0
  11. package/dist/theme/components/global.d.ts +1 -1
  12. package/dist/theme/components/radio.d.ts +8 -0
  13. package/dist/theme/components/template.d.ts +4 -1
  14. package/package.json +2 -3
  15. package/CHANGELOG.md +0 -1430
  16. package/src/__tests__/fileMock.ts +0 -6
  17. package/src/__tests__/setup.ts +0 -27
  18. package/src/__tests__/utils/utils.test.ts +0 -18
  19. package/src/components/AccessibilityGuide/SkipNavigation.stories.mdx +0 -42
  20. package/src/components/Accordion/Accordion.stories.mdx +0 -333
  21. package/src/components/Accordion/Accordion.test.tsx +0 -237
  22. package/src/components/Accordion/Accordion.tsx +0 -137
  23. package/src/components/Accordion/__snapshots__/Accordion.test.tsx.snap +0 -734
  24. package/src/components/Autosuggest/Autosuggest.stories.mdx +0 -75
  25. package/src/components/Autosuggest/Autosuggest.stories.tsx +0 -211
  26. package/src/components/Autosuggest/_Autosuggest.scss +0 -51
  27. package/src/components/Breadcrumbs/Breadcrumbs.stories.mdx +0 -231
  28. package/src/components/Breadcrumbs/Breadcrumbs.test.tsx +0 -144
  29. package/src/components/Breadcrumbs/Breadcrumbs.tsx +0 -98
  30. package/src/components/Breadcrumbs/__snapshots__/Breadcrumbs.test.tsx.snap +0 -695
  31. package/src/components/Button/Button.stories.mdx +0 -320
  32. package/src/components/Button/Button.test.tsx +0 -184
  33. package/src/components/Button/Button.tsx +0 -95
  34. package/src/components/Button/__snapshots__/Button.test.tsx.snap +0 -106
  35. package/src/components/ButtonGroup/ButtonGroup.stories.mdx +0 -178
  36. package/src/components/ButtonGroup/ButtonGroup.test.tsx +0 -141
  37. package/src/components/ButtonGroup/ButtonGroup.tsx +0 -100
  38. package/src/components/ButtonGroup/__snapshots__/ButtonGroup.test.tsx.snap +0 -117
  39. package/src/components/Card/Card.stories.mdx +0 -1041
  40. package/src/components/Card/Card.test.tsx +0 -388
  41. package/src/components/Card/Card.tsx +0 -346
  42. package/src/components/Card/__snapshots__/Card.test.tsx.snap +0 -568
  43. package/src/components/Chakra/Box.stories.mdx +0 -52
  44. package/src/components/Chakra/Center.stories.mdx +0 -96
  45. package/src/components/Chakra/Flex.stories.mdx +0 -111
  46. package/src/components/Chakra/Grid.stories.mdx +0 -89
  47. package/src/components/Chakra/Stack.stories.mdx +0 -109
  48. package/src/components/Checkbox/Checkbox.stories.mdx +0 -243
  49. package/src/components/Checkbox/Checkbox.test.tsx +0 -350
  50. package/src/components/Checkbox/Checkbox.tsx +0 -152
  51. package/src/components/Checkbox/__snapshots__/Checkbox.test.tsx.snap +0 -661
  52. package/src/components/CheckboxGroup/CheckboxGroup.stories.mdx +0 -462
  53. package/src/components/CheckboxGroup/CheckboxGroup.test.tsx +0 -492
  54. package/src/components/CheckboxGroup/CheckboxGroup.tsx +0 -173
  55. package/src/components/CheckboxGroup/__snapshots__/CheckboxGroup.test.tsx.snap +0 -1842
  56. package/src/components/ComponentWrapper/ComponentWrapper.test.tsx +0 -163
  57. package/src/components/ComponentWrapper/ComponentWrapper.tsx +0 -76
  58. package/src/components/ComponentWrapper/__snapshots__/ComponentWrapper.test.tsx.snap +0 -103
  59. package/src/components/DatePicker/DatePicker.stories.mdx +0 -452
  60. package/src/components/DatePicker/DatePicker.test.tsx +0 -940
  61. package/src/components/DatePicker/DatePicker.tsx +0 -450
  62. package/src/components/DatePicker/_DatePicker.scss +0 -100
  63. package/src/components/DatePicker/__snapshots__/DatePicker.test.tsx.snap +0 -908
  64. package/src/components/Fieldset/Fieldset.stories.mdx +0 -96
  65. package/src/components/Fieldset/Fieldset.test.tsx +0 -155
  66. package/src/components/Fieldset/Fieldset.tsx +0 -55
  67. package/src/components/Fieldset/__snapshots__/Fieldset.test.tsx.snap +0 -89
  68. package/src/components/Form/Form.stories.mdx +0 -426
  69. package/src/components/Form/Form.test.tsx +0 -234
  70. package/src/components/Form/Form.tsx +0 -124
  71. package/src/components/Form/__snapshots__/Form.test.tsx.snap +0 -115
  72. package/src/components/Grid/SimpleGrid.stories.mdx +0 -336
  73. package/src/components/Grid/SimpleGrid.test.tsx +0 -79
  74. package/src/components/Grid/SimpleGrid.tsx +0 -49
  75. package/src/components/Grid/__snapshots__/SimpleGrid.test.tsx.snap +0 -23
  76. package/src/components/Heading/Heading.stories.mdx +0 -187
  77. package/src/components/Heading/Heading.test.tsx +0 -171
  78. package/src/components/Heading/Heading.tsx +0 -104
  79. package/src/components/Heading/__snapshots__/Heading.test.tsx.snap +0 -90
  80. package/src/components/HelperErrorText/HelperErrorText.stories.mdx +0 -172
  81. package/src/components/HelperErrorText/HelperErrorText.test.tsx +0 -114
  82. package/src/components/HelperErrorText/HelperErrorText.tsx +0 -62
  83. package/src/components/HelperErrorText/__snapshots__/HelperErrorText.test.tsx.snap +0 -93
  84. package/src/components/Hero/Hero.stories.mdx +0 -378
  85. package/src/components/Hero/Hero.test.tsx +0 -611
  86. package/src/components/Hero/Hero.tsx +0 -203
  87. package/src/components/Hero/__snapshots__/Hero.test.tsx.snap +0 -379
  88. package/src/components/HorizontalRule/HorizontalRule.stories.mdx +0 -73
  89. package/src/components/HorizontalRule/HorizontalRule.test.tsx +0 -54
  90. package/src/components/HorizontalRule/HorizontalRule.tsx +0 -27
  91. package/src/components/HorizontalRule/__snapshots__/HorizontalRule.test.tsx.snap +0 -44
  92. package/src/components/Icons/Icon.stories.mdx +0 -413
  93. package/src/components/Icons/Icon.test.tsx +0 -120
  94. package/src/components/Icons/Icon.tsx +0 -187
  95. package/src/components/Icons/IconSvgs.tsx +0 -64
  96. package/src/components/Icons/__snapshots__/Icon.test.tsx.snap +0 -129
  97. package/src/components/Image/Image.stories.mdx +0 -332
  98. package/src/components/Image/Image.test.tsx +0 -155
  99. package/src/components/Image/Image.tsx +0 -171
  100. package/src/components/Image/__snapshots__/Image.test.tsx.snap +0 -269
  101. package/src/components/Label/Label.stories.mdx +0 -100
  102. package/src/components/Label/Label.test.tsx +0 -116
  103. package/src/components/Label/Label.tsx +0 -55
  104. package/src/components/Label/__snapshots__/Label.test.tsx.snap +0 -45
  105. package/src/components/Link/Link.stories.mdx +0 -249
  106. package/src/components/Link/Link.test.tsx +0 -224
  107. package/src/components/Link/Link.tsx +0 -178
  108. package/src/components/Link/__snapshots__/Link.test.tsx.snap +0 -286
  109. package/src/components/List/List.stories.mdx +0 -393
  110. package/src/components/List/List.test.tsx +0 -265
  111. package/src/components/List/List.tsx +0 -156
  112. package/src/components/List/__snapshots__/List.test.tsx.snap +0 -213
  113. package/src/components/Logo/Logo.stories.mdx +0 -295
  114. package/src/components/Logo/Logo.test.tsx +0 -116
  115. package/src/components/Logo/Logo.tsx +0 -151
  116. package/src/components/Logo/LogoSvgs.tsx +0 -90
  117. package/src/components/Logo/__snapshots__/Logo.test.tsx.snap +0 -142
  118. package/src/components/Modal/Modal.stories.mdx +0 -294
  119. package/src/components/Modal/Modal.test.tsx +0 -157
  120. package/src/components/Modal/Modal.tsx +0 -154
  121. package/src/components/Modal/__snapshots__/Modal.test.tsx.snap +0 -25
  122. package/src/components/Notification/Notification.stories.mdx +0 -358
  123. package/src/components/Notification/Notification.test.tsx +0 -279
  124. package/src/components/Notification/Notification.tsx +0 -224
  125. package/src/components/Notification/__snapshots__/Notification.test.tsx.snap +0 -525
  126. package/src/components/Pagination/Pagination.stories.mdx +0 -184
  127. package/src/components/Pagination/Pagination.test.tsx +0 -419
  128. package/src/components/Pagination/Pagination.tsx +0 -269
  129. package/src/components/Pagination/__snapshots__/Pagination.test.tsx.snap +0 -544
  130. package/src/components/Placeholder/Placeholder.tsx +0 -19
  131. package/src/components/ProgressIndicator/ProgressIndicator.stories.mdx +0 -360
  132. package/src/components/ProgressIndicator/ProgressIndicator.test.tsx +0 -298
  133. package/src/components/ProgressIndicator/ProgressIndicator.tsx +0 -132
  134. package/src/components/ProgressIndicator/__snapshots__/ProgressIndicator.test.tsx.snap +0 -434
  135. package/src/components/Radio/Radio.stories.mdx +0 -216
  136. package/src/components/Radio/Radio.test.tsx +0 -247
  137. package/src/components/Radio/Radio.tsx +0 -119
  138. package/src/components/Radio/__snapshots__/Radio.test.tsx.snap +0 -451
  139. package/src/components/RadioGroup/RadioGroup.stories.mdx +0 -479
  140. package/src/components/RadioGroup/RadioGroup.test.tsx +0 -471
  141. package/src/components/RadioGroup/RadioGroup.tsx +0 -171
  142. package/src/components/RadioGroup/__snapshots__/RadioGroup.test.tsx.snap +0 -1550
  143. package/src/components/SearchBar/SearchBar.stories.mdx +0 -518
  144. package/src/components/SearchBar/SearchBar.test.tsx +0 -435
  145. package/src/components/SearchBar/SearchBar.tsx +0 -210
  146. package/src/components/SearchBar/__snapshots__/SearchBar.test.tsx.snap +0 -1049
  147. package/src/components/Select/Select.stories.mdx +0 -439
  148. package/src/components/Select/Select.test.tsx +0 -358
  149. package/src/components/Select/Select.tsx +0 -183
  150. package/src/components/Select/__snapshots__/Select.test.tsx.snap +0 -895
  151. package/src/components/SkeletonLoader/SkeletonLoader.stories.mdx +0 -142
  152. package/src/components/SkeletonLoader/SkeletonLoader.test.tsx +0 -116
  153. package/src/components/SkeletonLoader/SkeletonLoader.tsx +0 -123
  154. package/src/components/SkeletonLoader/__snapshots__/SkeletonLoader.test.tsx.snap +0 -898
  155. package/src/components/SkipNavigation/SkipNavigation.stories.mdx +0 -90
  156. package/src/components/SkipNavigation/SkipNavigation.test.tsx +0 -63
  157. package/src/components/SkipNavigation/SkipNavigation.tsx +0 -51
  158. package/src/components/SkipNavigation/__snapshots__/SkipNavigation.test.tsx.snap +0 -130
  159. package/src/components/Slider/Slider.stories.mdx +0 -628
  160. package/src/components/Slider/Slider.test.tsx +0 -736
  161. package/src/components/Slider/Slider.tsx +0 -322
  162. package/src/components/Slider/__snapshots__/Slider.test.tsx.snap +0 -2186
  163. package/src/components/StatusBadge/StatusBadge.stories.mdx +0 -109
  164. package/src/components/StatusBadge/StatusBadge.test.tsx +0 -70
  165. package/src/components/StatusBadge/StatusBadge.tsx +0 -35
  166. package/src/components/StatusBadge/__snapshots__/StatusBadge.test.tsx.snap +0 -47
  167. package/src/components/StructuredContent/StructuredContent.stories.mdx +0 -567
  168. package/src/components/StructuredContent/StructuredContent.test.tsx +0 -435
  169. package/src/components/StructuredContent/StructuredContent.tsx +0 -139
  170. package/src/components/StructuredContent/__snapshots__/StructuredContent.test.tsx.snap +0 -368
  171. package/src/components/StyleGuide/Bidirectionality.stories.mdx +0 -206
  172. package/src/components/StyleGuide/Breakpoints.stories.mdx +0 -55
  173. package/src/components/StyleGuide/Buttons.stories.mdx +0 -194
  174. package/src/components/StyleGuide/ColorCard.tsx +0 -43
  175. package/src/components/StyleGuide/Colors.stories.mdx +0 -201
  176. package/src/components/StyleGuide/DesignTokens.stories.mdx +0 -193
  177. package/src/components/StyleGuide/Forms.stories.mdx +0 -94
  178. package/src/components/StyleGuide/Iconography.stories.mdx +0 -142
  179. package/src/components/StyleGuide/Spacing.stories.mdx +0 -116
  180. package/src/components/StyleGuide/Typography.stories.mdx +0 -419
  181. package/src/components/Table/Table.stories.mdx +0 -272
  182. package/src/components/Table/Table.test.tsx +0 -241
  183. package/src/components/Table/Table.tsx +0 -152
  184. package/src/components/Table/__snapshots__/Table.test.tsx.snap +0 -1703
  185. package/src/components/Tabs/Tabs.stories.mdx +0 -338
  186. package/src/components/Tabs/Tabs.test.tsx +0 -298
  187. package/src/components/Tabs/Tabs.tsx +0 -264
  188. package/src/components/Tabs/__snapshots__/Tabs.test.tsx.snap +0 -584
  189. package/src/components/Template/Template.stories.mdx +0 -695
  190. package/src/components/Template/Template.test.tsx +0 -309
  191. package/src/components/Template/Template.tsx +0 -326
  192. package/src/components/Template/__snapshots__/Template.test.tsx.snap +0 -342
  193. package/src/components/Text/Text.stories.mdx +0 -103
  194. package/src/components/Text/Text.test.tsx +0 -63
  195. package/src/components/Text/Text.tsx +0 -50
  196. package/src/components/Text/__snapshots__/Text.test.tsx.snap +0 -50
  197. package/src/components/TextInput/TextInput.stories.mdx +0 -268
  198. package/src/components/TextInput/TextInput.test.tsx +0 -451
  199. package/src/components/TextInput/TextInput.tsx +0 -240
  200. package/src/components/TextInput/__snapshots__/TextInput.test.tsx.snap +0 -274
  201. package/src/components/Toggle/Toggle.stories.mdx +0 -237
  202. package/src/components/Toggle/Toggle.test.tsx +0 -170
  203. package/src/components/Toggle/Toggle.tsx +0 -128
  204. package/src/components/Toggle/__snapshots__/Toggle.test.tsx.snap +0 -470
  205. package/src/components/VideoPlayer/VideoPlayer.stories.mdx +0 -212
  206. package/src/components/VideoPlayer/VideoPlayer.test.tsx +0 -308
  207. package/src/components/VideoPlayer/VideoPlayer.tsx +0 -188
  208. package/src/components/VideoPlayer/__snapshots__/VideoPlayer.test.tsx.snap +0 -192
  209. package/src/docs/Chakra.stories.mdx +0 -563
  210. package/src/docs/Welcome.stories.mdx +0 -148
  211. package/src/helpers/types.ts +0 -1
  212. package/src/hooks/tests/useCarouselStyles.test.ts +0 -140
  213. package/src/hooks/tests/useNYPLTheme.test.tsx +0 -36
  214. package/src/hooks/useCarouselStyles.stories.mdx +0 -30
  215. package/src/hooks/useCarouselStyles.ts +0 -35
  216. package/src/hooks/useNYPLTheme.stories.mdx +0 -98
  217. package/src/hooks/useNYPLTheme.ts +0 -91
  218. package/src/hooks/useWindowSize.stories.mdx +0 -23
  219. package/src/hooks/useWindowSize.ts +0 -40
  220. package/src/index.ts +0 -136
  221. package/src/resources.scss +0 -6
  222. package/src/styles/base/_01-breakpoints.scss +0 -27
  223. package/src/styles/base/_02-mixins.scss +0 -103
  224. package/src/styles/base/_place-holder.scss +0 -33
  225. package/src/styles/space/_space-inline.scss +0 -79
  226. package/src/styles/space/_space-inset.scss +0 -57
  227. package/src/styles/space/_space-stack.scss +0 -116
  228. package/src/styles.scss +0 -23
  229. package/src/theme/components/accordion.ts +0 -25
  230. package/src/theme/components/breadcrumb.ts +0 -94
  231. package/src/theme/components/button.ts +0 -133
  232. package/src/theme/components/buttonGroup.ts +0 -10
  233. package/src/theme/components/card.ts +0 -237
  234. package/src/theme/components/checkbox.ts +0 -110
  235. package/src/theme/components/checkboxGroup.ts +0 -10
  236. package/src/theme/components/componentWrapper.ts +0 -14
  237. package/src/theme/components/customTable.ts +0 -77
  238. package/src/theme/components/datePicker.ts +0 -17
  239. package/src/theme/components/fieldset.ts +0 -23
  240. package/src/theme/components/global.ts +0 -91
  241. package/src/theme/components/globalMixins.ts +0 -24
  242. package/src/theme/components/heading.ts +0 -79
  243. package/src/theme/components/helperErrorText.ts +0 -14
  244. package/src/theme/components/hero.ts +0 -238
  245. package/src/theme/components/horizontalRule.ts +0 -17
  246. package/src/theme/components/icon.ts +0 -88
  247. package/src/theme/components/image.ts +0 -136
  248. package/src/theme/components/label.ts +0 -15
  249. package/src/theme/components/link.ts +0 -63
  250. package/src/theme/components/list.ts +0 -88
  251. package/src/theme/components/logo.ts +0 -58
  252. package/src/theme/components/notification.ts +0 -132
  253. package/src/theme/components/pagination.ts +0 -17
  254. package/src/theme/components/progressIndicator.ts +0 -67
  255. package/src/theme/components/radio.ts +0 -103
  256. package/src/theme/components/radioGroup.ts +0 -10
  257. package/src/theme/components/searchBar.ts +0 -19
  258. package/src/theme/components/select.ts +0 -72
  259. package/src/theme/components/skeletonLoader.ts +0 -113
  260. package/src/theme/components/skipNavigation.ts +0 -29
  261. package/src/theme/components/slider.ts +0 -95
  262. package/src/theme/components/statusBadge.ts +0 -26
  263. package/src/theme/components/structuredContent.ts +0 -149
  264. package/src/theme/components/tabs.ts +0 -109
  265. package/src/theme/components/template.ts +0 -114
  266. package/src/theme/components/text.ts +0 -38
  267. package/src/theme/components/textInput.ts +0 -65
  268. package/src/theme/components/toggle.ts +0 -109
  269. package/src/theme/components/videoPlayer.ts +0 -47
  270. package/src/theme/foundations/breakpoints.ts +0 -24
  271. package/src/theme/foundations/colors.ts +0 -212
  272. package/src/theme/foundations/global.ts +0 -43
  273. package/src/theme/foundations/radii.ts +0 -7
  274. package/src/theme/foundations/shadows.ts +0 -5
  275. package/src/theme/foundations/spacing.ts +0 -136
  276. package/src/theme/foundations/typography.ts +0 -107
  277. package/src/theme/index.ts +0 -131
  278. package/src/theme/provider.tsx +0 -9
  279. package/src/theme/types.ts +0 -1
  280. package/src/utils/componentCategories.ts +0 -152
  281. package/src/utils/interfaces.ts +0 -5
  282. package/src/utils/utils.ts +0 -84
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,333 +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 | `1.0.2` |
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
- imageProps={{
76
- alt: "Alt text",
77
- aspectRatio: "twoByOne",
78
- src: "https://play.nintendo.com/images/AC_Tom_FRYtwIN.17345b1513ac044897cfc243542899dce541e8dc.9afde10b.png",
79
- }}
80
- isCentered
81
- layout="row"
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
- export const accordionData = [
104
- {
105
- accordionType: "default",
106
- label: "Tom Nook",
107
- panel: (
108
- <Card
109
- imageProps={{
110
- alt: "Alt text",
111
- aspectRatio: "twoByOne",
112
- src: "https://play.nintendo.com/images/AC_Tom_FRYtwIN.17345b1513ac044897cfc243542899dce541e8dc.9afde10b.png",
113
- }}
114
- isCentered
115
- layout="row"
116
- >
117
- <CardHeading level="four" id="heading1">
118
- Tom Nook
119
- </CardHeading>
120
- <CardContent>
121
- Tom Nook, <b>known in Japan as Tanukichi</b>, is a fictional character
122
- in the Animal Crossing series who operates the village store.
123
- </CardContent>
124
- </Card>
125
- ),
126
- },
127
- ];
128
-
129
- <Canvas withToolbar>
130
- <Story
131
- name="Accordion with Controls"
132
- args={{
133
- id: "accordion-id",
134
- isDefaultOpen: false,
135
- }}
136
- >
137
- {(args) => <Accordion accordionData={accordionData} {...args} />}
138
- </Story>
139
- </Canvas>
140
-
141
- <ArgsTable story="Accordion with Controls" />
142
-
143
- ## Accessibility
144
-
145
- - Follows [U.S. Web Design System (USWDS)](https://designsystem.digital.gov/components/accordion/)
146
- guidelines:
147
- - Use the `button` HTML element for screenreaders and keyboards.
148
- - Use the `aria-expanded` attribute to indicate whether the `Accordion` is
149
- expanded (`true`) or collapsed (`false`).
150
- - Use the `aria-controls` attribute to associate the control with the panel.
151
- - Deviates from USWDS in that the user can open multiple panels. Opening one,
152
- does not collapse already expanded panel.
153
- - The open and close icons are decorative (`aria-hidden` is `true`).
154
- - Visible focus goes around full button and full button is clickable
155
-
156
- Resources:
157
-
158
- - [W3C WAI-Aria Practices - Accordion](https://www.w3.org/TR/wai-aria-practices-1.1/#accordion)
159
- - [USWDS Accordion](https://designsystem.digital.gov/components/accordion/)
160
- - [Chakra Accordion](https://chakra-ui.com/docs/components/disclosure/accordion)
161
-
162
- ## FAQ Example
163
-
164
- export const faqContent = [
165
- {
166
- accordionType: "default",
167
- label: "Tom Nook",
168
- panel: (
169
- <Card
170
- imageProps={{
171
- alt: "Alt text",
172
- aspectRatio: "twoByOne",
173
- src: "https://play.nintendo.com/images/AC_Tom_FRYtwIN.17345b1513ac044897cfc243542899dce541e8dc.9afde10b.png",
174
- }}
175
- isCentered
176
- layout="row"
177
- >
178
- <CardHeading level="four" id="heading1-tom">
179
- Tom Nook
180
- </CardHeading>
181
- <CardContent>
182
- Tom Nook, <b>known in Japan as Tanukichi</b>, is a fictional character
183
- in the Animal Crossing series who operates the village store.
184
- </CardContent>
185
- </Card>
186
- ),
187
- },
188
- {
189
- accordionType: "warning",
190
- label: "Isabelle",
191
- panel: (
192
- <Card
193
- imageProps={{
194
- alt: "Alt text",
195
- aspectRatio: "twoByOne",
196
- src: "https://play.nintendo.com/images/AC_Isabelle_7XU6aGu.17345b1513ac044897cfc243542899dce541e8dc.9afde10b.png",
197
- }}
198
- isCentered
199
- layout="row"
200
- >
201
- <CardHeading level="four" id="heading1-isabelle">
202
- Isabelle
203
- </CardHeading>
204
- <CardContent>
205
- Isabelle, known as Shizue in Japan, is a fictional character from the
206
- Animal Crossing series of video games. She is a kindly Shih Tzu that
207
- debuted in the 2012 release Animal Crossing: New Leaf, where she
208
- serves as the secretary to the player character.
209
- </CardContent>
210
- </Card>
211
- ),
212
- },
213
- {
214
- accordionType: "error",
215
- label: "K.K. Slider",
216
- panel: (
217
- <Card
218
- imageProps={{
219
- alt: "Alt text",
220
- aspectRatio: "twoByOne",
221
- src: "https://play.nintendo.com/images/AC_KK_jh4yj5t.17345b1513ac044897cfc243542899dce541e8dc.9afde10b.png",
222
- }}
223
- isCentered
224
- layout="row"
225
- >
226
- <CardHeading level="four" id="heading1-kkslider">
227
- K.K. Slider
228
- </CardHeading>
229
- <CardContent>
230
- <p>
231
- Totakeke, more commonly known as <b>K.K. Slider or K.K.</b>, is a
232
- fictional character within the Animal Crossing franchise. One of the
233
- franchise's most popular characters, he debuted in the title Animal
234
- Crossing, and has appeared in every installment since.
235
- </p>
236
- </CardContent>
237
- </Card>
238
- ),
239
- },
240
- ];
241
-
242
- Building out FAQ-like accordions happens automatically when there are more than
243
- one object in the array passed into the `accordionData` prop.
244
-
245
- <Canvas withToolbar>
246
- <Story name="FAQ Example">
247
- <Accordion accordionData={faqContent} />
248
- </Story>
249
- </Canvas>
250
-
251
- ```jsx
252
- export const faqContent = [
253
- {
254
- accordionType: "default",
255
- label: "Tom Nook",
256
- panel: (
257
- <Card
258
- imageProps={{
259
- alt: "Alt text",
260
- aspectRatio: "twoByOne",
261
- src: "https://play.nintendo.com/images/AC_Tom_FRYtwIN.17345b1513ac044897cfc243542899dce541e8dc.9afde10b.png",
262
- }}
263
- isCentered
264
- layout="row"
265
- >
266
- <CardHeading level="four" id="heading1-tom">
267
- Tom Nook
268
- </CardHeading>
269
- <CardContent>
270
- Tom Nook, <b>known in Japan as Tanukichi</b>, is a fictional character
271
- in the Animal Crossing series who operates the village store.
272
- </CardContent>
273
- </Card>
274
- ),
275
- },
276
- {
277
- accordionType: "warning",
278
- label: "Isabelle",
279
- panel: (
280
- <Card
281
- imageProps={{
282
- alt: "Alt text",
283
- aspectRatio: "twoByOne",
284
- src: "https://play.nintendo.com/images/AC_Isabelle_7XU6aGu.17345b1513ac044897cfc243542899dce541e8dc.9afde10b.png",
285
- }}
286
- isCentered
287
- layout="row"
288
- >
289
- <CardHeading level="four" id="heading1-isabelle">
290
- Isabelle
291
- </CardHeading>
292
- <CardContent>
293
- Isabelle, known as Shizue in Japan, is a fictional character from the
294
- Animal Crossing series of video games. She is a kindly Shih Tzu that
295
- debuted in the 2012 release Animal Crossing: New Leaf, where she
296
- serves as the secretary to the player character.
297
- </CardContent>
298
- </Card>
299
- ),
300
- },
301
- {
302
- accordionType: "error",
303
- label: "K.K. Slider",
304
- panel: (
305
- <Card
306
- imageProps={{
307
- alt: "Alt text",
308
- aspectRatio: "twoByOne",
309
- src: "https://play.nintendo.com/images/AC_KK_jh4yj5t.17345b1513ac044897cfc243542899dce541e8dc.9afde10b.png",
310
- }}
311
- isCentered
312
- layout="row"
313
- >
314
- <CardHeading level="four" id="heading1-kkslider">
315
- K.K. Slider
316
- </CardHeading>
317
- <CardContent>
318
- <p>
319
- Totakeke, more commonly known as <b>K.K. Slider or K.K.</b>, is a
320
- fictional character within the Animal Crossing franchise. One of the
321
- franchise's most popular characters, he debuted in the title Animal
322
- Crossing, and has appeared in every installment since.
323
- </p>
324
- </CardContent>
325
- </Card>
326
- ),
327
- },
328
- ];
329
-
330
- ...
331
-
332
- <Accordion accordionData={faqContent} />
333
- ```
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
- });