@nypl/design-system-react-components 1.0.2 → 1.0.4

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 (309) hide show
  1. package/CHANGELOG.md +53 -0
  2. package/README.md +171 -135
  3. package/dist/__tests__/mediaMatchMock.d.ts +79 -0
  4. package/dist/components/Card/Card.d.ts +8 -6
  5. package/dist/components/Heading/Heading.d.ts +6 -0
  6. package/dist/components/Icons/Icon.d.ts +1 -1
  7. package/dist/components/Icons/IconSvgs.d.ts +10 -0
  8. package/dist/components/Logo/Logo.d.ts +1 -1
  9. package/dist/components/Logo/LogoSvgs.d.ts +3 -0
  10. package/dist/components/Slider/Slider.d.ts +1 -2
  11. package/dist/components/Table/Table.d.ts +3 -2
  12. package/dist/components/Text/Text.d.ts +6 -0
  13. package/dist/components/TextInput/TextInput.d.ts +2 -1
  14. package/dist/design-system-react-components.cjs.development.js +1700 -878
  15. package/dist/design-system-react-components.cjs.development.js.map +1 -1
  16. package/dist/design-system-react-components.cjs.production.min.js +1 -1
  17. package/dist/design-system-react-components.cjs.production.min.js.map +1 -1
  18. package/dist/design-system-react-components.esm.js +1672 -881
  19. package/dist/design-system-react-components.esm.js.map +1 -1
  20. package/dist/hooks/{tests → __tests__}/useCarouselStyles.test.d.ts +0 -0
  21. package/dist/hooks/__tests__/useNYPLBreakpoints.test.d.ts +1 -0
  22. package/dist/hooks/useNYPLBreakpoints.d.ts +13 -0
  23. package/dist/index.d.ts +2 -1
  24. package/dist/resources.scss +0 -4
  25. package/dist/styles.css +3 -2
  26. package/dist/theme/components/button.d.ts +7 -2
  27. package/dist/theme/components/checkbox.d.ts +1 -0
  28. package/dist/theme/components/customTable.d.ts +522 -34
  29. package/dist/theme/components/datePicker.d.ts +1 -0
  30. package/dist/theme/components/global.d.ts +5 -2
  31. package/dist/theme/components/heading.d.ts +5 -1
  32. package/dist/theme/components/image.d.ts +18 -0
  33. package/dist/theme/components/radio.d.ts +9 -0
  34. package/dist/theme/components/searchBar.d.ts +6 -0
  35. package/dist/theme/components/select.d.ts +4 -5
  36. package/dist/theme/components/structuredContent.d.ts +117 -17
  37. package/dist/theme/components/template.d.ts +4 -1
  38. package/dist/theme/components/text.d.ts +5 -1
  39. package/dist/theme/components/textInput.d.ts +4 -0
  40. package/dist/theme/components/toggle.d.ts +1 -0
  41. package/dist/theme/provider.d.ts +2 -1
  42. package/package.json +16 -16
  43. package/src/__tests__/fileMock.ts +0 -6
  44. package/src/__tests__/setup.ts +0 -27
  45. package/src/__tests__/utils/utils.test.ts +0 -18
  46. package/src/components/AccessibilityGuide/SkipNavigation.stories.mdx +0 -42
  47. package/src/components/Accordion/Accordion.stories.mdx +0 -333
  48. package/src/components/Accordion/Accordion.test.tsx +0 -237
  49. package/src/components/Accordion/Accordion.tsx +0 -137
  50. package/src/components/Accordion/__snapshots__/Accordion.test.tsx.snap +0 -734
  51. package/src/components/Autosuggest/Autosuggest.stories.mdx +0 -75
  52. package/src/components/Autosuggest/Autosuggest.stories.tsx +0 -211
  53. package/src/components/Autosuggest/_Autosuggest.scss +0 -51
  54. package/src/components/Breadcrumbs/Breadcrumbs.stories.mdx +0 -231
  55. package/src/components/Breadcrumbs/Breadcrumbs.test.tsx +0 -144
  56. package/src/components/Breadcrumbs/Breadcrumbs.tsx +0 -98
  57. package/src/components/Breadcrumbs/__snapshots__/Breadcrumbs.test.tsx.snap +0 -695
  58. package/src/components/Button/Button.stories.mdx +0 -320
  59. package/src/components/Button/Button.test.tsx +0 -184
  60. package/src/components/Button/Button.tsx +0 -95
  61. package/src/components/Button/__snapshots__/Button.test.tsx.snap +0 -106
  62. package/src/components/ButtonGroup/ButtonGroup.stories.mdx +0 -178
  63. package/src/components/ButtonGroup/ButtonGroup.test.tsx +0 -141
  64. package/src/components/ButtonGroup/ButtonGroup.tsx +0 -100
  65. package/src/components/ButtonGroup/__snapshots__/ButtonGroup.test.tsx.snap +0 -117
  66. package/src/components/Card/Card.stories.mdx +0 -1041
  67. package/src/components/Card/Card.test.tsx +0 -388
  68. package/src/components/Card/Card.tsx +0 -346
  69. package/src/components/Card/__snapshots__/Card.test.tsx.snap +0 -568
  70. package/src/components/Chakra/Box.stories.mdx +0 -52
  71. package/src/components/Chakra/Center.stories.mdx +0 -96
  72. package/src/components/Chakra/Flex.stories.mdx +0 -111
  73. package/src/components/Chakra/Grid.stories.mdx +0 -89
  74. package/src/components/Chakra/Stack.stories.mdx +0 -109
  75. package/src/components/Checkbox/Checkbox.stories.mdx +0 -243
  76. package/src/components/Checkbox/Checkbox.test.tsx +0 -350
  77. package/src/components/Checkbox/Checkbox.tsx +0 -152
  78. package/src/components/Checkbox/__snapshots__/Checkbox.test.tsx.snap +0 -661
  79. package/src/components/CheckboxGroup/CheckboxGroup.stories.mdx +0 -462
  80. package/src/components/CheckboxGroup/CheckboxGroup.test.tsx +0 -492
  81. package/src/components/CheckboxGroup/CheckboxGroup.tsx +0 -173
  82. package/src/components/CheckboxGroup/__snapshots__/CheckboxGroup.test.tsx.snap +0 -1842
  83. package/src/components/ComponentWrapper/ComponentWrapper.test.tsx +0 -163
  84. package/src/components/ComponentWrapper/ComponentWrapper.tsx +0 -76
  85. package/src/components/ComponentWrapper/__snapshots__/ComponentWrapper.test.tsx.snap +0 -103
  86. package/src/components/DatePicker/DatePicker.stories.mdx +0 -452
  87. package/src/components/DatePicker/DatePicker.test.tsx +0 -940
  88. package/src/components/DatePicker/DatePicker.tsx +0 -450
  89. package/src/components/DatePicker/_DatePicker.scss +0 -100
  90. package/src/components/DatePicker/__snapshots__/DatePicker.test.tsx.snap +0 -908
  91. package/src/components/Fieldset/Fieldset.stories.mdx +0 -96
  92. package/src/components/Fieldset/Fieldset.test.tsx +0 -155
  93. package/src/components/Fieldset/Fieldset.tsx +0 -55
  94. package/src/components/Fieldset/__snapshots__/Fieldset.test.tsx.snap +0 -89
  95. package/src/components/Form/Form.stories.mdx +0 -426
  96. package/src/components/Form/Form.test.tsx +0 -234
  97. package/src/components/Form/Form.tsx +0 -124
  98. package/src/components/Form/__snapshots__/Form.test.tsx.snap +0 -115
  99. package/src/components/Grid/SimpleGrid.stories.mdx +0 -336
  100. package/src/components/Grid/SimpleGrid.test.tsx +0 -79
  101. package/src/components/Grid/SimpleGrid.tsx +0 -49
  102. package/src/components/Grid/__snapshots__/SimpleGrid.test.tsx.snap +0 -23
  103. package/src/components/Heading/Heading.stories.mdx +0 -187
  104. package/src/components/Heading/Heading.test.tsx +0 -171
  105. package/src/components/Heading/Heading.tsx +0 -104
  106. package/src/components/Heading/__snapshots__/Heading.test.tsx.snap +0 -90
  107. package/src/components/HelperErrorText/HelperErrorText.stories.mdx +0 -172
  108. package/src/components/HelperErrorText/HelperErrorText.test.tsx +0 -114
  109. package/src/components/HelperErrorText/HelperErrorText.tsx +0 -62
  110. package/src/components/HelperErrorText/__snapshots__/HelperErrorText.test.tsx.snap +0 -93
  111. package/src/components/Hero/Hero.stories.mdx +0 -378
  112. package/src/components/Hero/Hero.test.tsx +0 -611
  113. package/src/components/Hero/Hero.tsx +0 -203
  114. package/src/components/Hero/__snapshots__/Hero.test.tsx.snap +0 -379
  115. package/src/components/HorizontalRule/HorizontalRule.stories.mdx +0 -73
  116. package/src/components/HorizontalRule/HorizontalRule.test.tsx +0 -54
  117. package/src/components/HorizontalRule/HorizontalRule.tsx +0 -27
  118. package/src/components/HorizontalRule/__snapshots__/HorizontalRule.test.tsx.snap +0 -44
  119. package/src/components/Icons/Icon.stories.mdx +0 -413
  120. package/src/components/Icons/Icon.test.tsx +0 -120
  121. package/src/components/Icons/Icon.tsx +0 -187
  122. package/src/components/Icons/IconSvgs.tsx +0 -64
  123. package/src/components/Icons/__snapshots__/Icon.test.tsx.snap +0 -129
  124. package/src/components/Image/Image.stories.mdx +0 -332
  125. package/src/components/Image/Image.test.tsx +0 -155
  126. package/src/components/Image/Image.tsx +0 -171
  127. package/src/components/Image/__snapshots__/Image.test.tsx.snap +0 -269
  128. package/src/components/Label/Label.stories.mdx +0 -100
  129. package/src/components/Label/Label.test.tsx +0 -116
  130. package/src/components/Label/Label.tsx +0 -55
  131. package/src/components/Label/__snapshots__/Label.test.tsx.snap +0 -45
  132. package/src/components/Link/Link.stories.mdx +0 -249
  133. package/src/components/Link/Link.test.tsx +0 -224
  134. package/src/components/Link/Link.tsx +0 -178
  135. package/src/components/Link/__snapshots__/Link.test.tsx.snap +0 -286
  136. package/src/components/List/List.stories.mdx +0 -393
  137. package/src/components/List/List.test.tsx +0 -265
  138. package/src/components/List/List.tsx +0 -156
  139. package/src/components/List/__snapshots__/List.test.tsx.snap +0 -213
  140. package/src/components/Logo/Logo.stories.mdx +0 -295
  141. package/src/components/Logo/Logo.test.tsx +0 -116
  142. package/src/components/Logo/Logo.tsx +0 -151
  143. package/src/components/Logo/LogoSvgs.tsx +0 -90
  144. package/src/components/Logo/__snapshots__/Logo.test.tsx.snap +0 -142
  145. package/src/components/Modal/Modal.stories.mdx +0 -294
  146. package/src/components/Modal/Modal.test.tsx +0 -157
  147. package/src/components/Modal/Modal.tsx +0 -154
  148. package/src/components/Modal/__snapshots__/Modal.test.tsx.snap +0 -25
  149. package/src/components/Notification/Notification.stories.mdx +0 -358
  150. package/src/components/Notification/Notification.test.tsx +0 -279
  151. package/src/components/Notification/Notification.tsx +0 -224
  152. package/src/components/Notification/__snapshots__/Notification.test.tsx.snap +0 -525
  153. package/src/components/Pagination/Pagination.stories.mdx +0 -184
  154. package/src/components/Pagination/Pagination.test.tsx +0 -419
  155. package/src/components/Pagination/Pagination.tsx +0 -269
  156. package/src/components/Pagination/__snapshots__/Pagination.test.tsx.snap +0 -544
  157. package/src/components/Placeholder/Placeholder.tsx +0 -19
  158. package/src/components/ProgressIndicator/ProgressIndicator.stories.mdx +0 -360
  159. package/src/components/ProgressIndicator/ProgressIndicator.test.tsx +0 -298
  160. package/src/components/ProgressIndicator/ProgressIndicator.tsx +0 -132
  161. package/src/components/ProgressIndicator/__snapshots__/ProgressIndicator.test.tsx.snap +0 -434
  162. package/src/components/Radio/Radio.stories.mdx +0 -216
  163. package/src/components/Radio/Radio.test.tsx +0 -247
  164. package/src/components/Radio/Radio.tsx +0 -119
  165. package/src/components/Radio/__snapshots__/Radio.test.tsx.snap +0 -451
  166. package/src/components/RadioGroup/RadioGroup.stories.mdx +0 -479
  167. package/src/components/RadioGroup/RadioGroup.test.tsx +0 -471
  168. package/src/components/RadioGroup/RadioGroup.tsx +0 -171
  169. package/src/components/RadioGroup/__snapshots__/RadioGroup.test.tsx.snap +0 -1550
  170. package/src/components/SearchBar/SearchBar.stories.mdx +0 -518
  171. package/src/components/SearchBar/SearchBar.test.tsx +0 -435
  172. package/src/components/SearchBar/SearchBar.tsx +0 -210
  173. package/src/components/SearchBar/__snapshots__/SearchBar.test.tsx.snap +0 -1049
  174. package/src/components/Select/Select.stories.mdx +0 -439
  175. package/src/components/Select/Select.test.tsx +0 -358
  176. package/src/components/Select/Select.tsx +0 -183
  177. package/src/components/Select/__snapshots__/Select.test.tsx.snap +0 -895
  178. package/src/components/SkeletonLoader/SkeletonLoader.stories.mdx +0 -142
  179. package/src/components/SkeletonLoader/SkeletonLoader.test.tsx +0 -116
  180. package/src/components/SkeletonLoader/SkeletonLoader.tsx +0 -123
  181. package/src/components/SkeletonLoader/__snapshots__/SkeletonLoader.test.tsx.snap +0 -898
  182. package/src/components/SkipNavigation/SkipNavigation.stories.mdx +0 -90
  183. package/src/components/SkipNavigation/SkipNavigation.test.tsx +0 -63
  184. package/src/components/SkipNavigation/SkipNavigation.tsx +0 -51
  185. package/src/components/SkipNavigation/__snapshots__/SkipNavigation.test.tsx.snap +0 -130
  186. package/src/components/Slider/Slider.stories.mdx +0 -628
  187. package/src/components/Slider/Slider.test.tsx +0 -736
  188. package/src/components/Slider/Slider.tsx +0 -322
  189. package/src/components/Slider/__snapshots__/Slider.test.tsx.snap +0 -2186
  190. package/src/components/StatusBadge/StatusBadge.stories.mdx +0 -109
  191. package/src/components/StatusBadge/StatusBadge.test.tsx +0 -70
  192. package/src/components/StatusBadge/StatusBadge.tsx +0 -35
  193. package/src/components/StatusBadge/__snapshots__/StatusBadge.test.tsx.snap +0 -47
  194. package/src/components/StructuredContent/StructuredContent.stories.mdx +0 -567
  195. package/src/components/StructuredContent/StructuredContent.test.tsx +0 -435
  196. package/src/components/StructuredContent/StructuredContent.tsx +0 -139
  197. package/src/components/StructuredContent/__snapshots__/StructuredContent.test.tsx.snap +0 -368
  198. package/src/components/StyleGuide/Bidirectionality.stories.mdx +0 -206
  199. package/src/components/StyleGuide/Breakpoints.stories.mdx +0 -55
  200. package/src/components/StyleGuide/Buttons.stories.mdx +0 -194
  201. package/src/components/StyleGuide/ColorCard.tsx +0 -43
  202. package/src/components/StyleGuide/Colors.stories.mdx +0 -201
  203. package/src/components/StyleGuide/DesignTokens.stories.mdx +0 -193
  204. package/src/components/StyleGuide/Forms.stories.mdx +0 -94
  205. package/src/components/StyleGuide/Iconography.stories.mdx +0 -142
  206. package/src/components/StyleGuide/Spacing.stories.mdx +0 -116
  207. package/src/components/StyleGuide/Typography.stories.mdx +0 -419
  208. package/src/components/Table/Table.stories.mdx +0 -272
  209. package/src/components/Table/Table.test.tsx +0 -241
  210. package/src/components/Table/Table.tsx +0 -152
  211. package/src/components/Table/__snapshots__/Table.test.tsx.snap +0 -1703
  212. package/src/components/Tabs/Tabs.stories.mdx +0 -338
  213. package/src/components/Tabs/Tabs.test.tsx +0 -298
  214. package/src/components/Tabs/Tabs.tsx +0 -264
  215. package/src/components/Tabs/__snapshots__/Tabs.test.tsx.snap +0 -584
  216. package/src/components/Template/Template.stories.mdx +0 -695
  217. package/src/components/Template/Template.test.tsx +0 -309
  218. package/src/components/Template/Template.tsx +0 -326
  219. package/src/components/Template/__snapshots__/Template.test.tsx.snap +0 -342
  220. package/src/components/Text/Text.stories.mdx +0 -103
  221. package/src/components/Text/Text.test.tsx +0 -63
  222. package/src/components/Text/Text.tsx +0 -50
  223. package/src/components/Text/__snapshots__/Text.test.tsx.snap +0 -50
  224. package/src/components/TextInput/TextInput.stories.mdx +0 -268
  225. package/src/components/TextInput/TextInput.test.tsx +0 -451
  226. package/src/components/TextInput/TextInput.tsx +0 -240
  227. package/src/components/TextInput/__snapshots__/TextInput.test.tsx.snap +0 -274
  228. package/src/components/Toggle/Toggle.stories.mdx +0 -237
  229. package/src/components/Toggle/Toggle.test.tsx +0 -170
  230. package/src/components/Toggle/Toggle.tsx +0 -128
  231. package/src/components/Toggle/__snapshots__/Toggle.test.tsx.snap +0 -470
  232. package/src/components/VideoPlayer/VideoPlayer.stories.mdx +0 -212
  233. package/src/components/VideoPlayer/VideoPlayer.test.tsx +0 -308
  234. package/src/components/VideoPlayer/VideoPlayer.tsx +0 -188
  235. package/src/components/VideoPlayer/__snapshots__/VideoPlayer.test.tsx.snap +0 -192
  236. package/src/docs/Chakra.stories.mdx +0 -563
  237. package/src/docs/Welcome.stories.mdx +0 -148
  238. package/src/helpers/types.ts +0 -1
  239. package/src/hooks/tests/useCarouselStyles.test.ts +0 -140
  240. package/src/hooks/tests/useNYPLTheme.test.tsx +0 -36
  241. package/src/hooks/useCarouselStyles.stories.mdx +0 -30
  242. package/src/hooks/useCarouselStyles.ts +0 -35
  243. package/src/hooks/useNYPLTheme.stories.mdx +0 -98
  244. package/src/hooks/useNYPLTheme.ts +0 -91
  245. package/src/hooks/useWindowSize.stories.mdx +0 -23
  246. package/src/hooks/useWindowSize.ts +0 -40
  247. package/src/index.ts +0 -136
  248. package/src/resources.scss +0 -6
  249. package/src/styles/base/_01-breakpoints.scss +0 -27
  250. package/src/styles/base/_02-mixins.scss +0 -103
  251. package/src/styles/base/_place-holder.scss +0 -33
  252. package/src/styles/space/_space-inline.scss +0 -79
  253. package/src/styles/space/_space-inset.scss +0 -57
  254. package/src/styles/space/_space-stack.scss +0 -116
  255. package/src/styles.scss +0 -23
  256. package/src/theme/components/accordion.ts +0 -25
  257. package/src/theme/components/breadcrumb.ts +0 -94
  258. package/src/theme/components/button.ts +0 -133
  259. package/src/theme/components/buttonGroup.ts +0 -10
  260. package/src/theme/components/card.ts +0 -237
  261. package/src/theme/components/checkbox.ts +0 -110
  262. package/src/theme/components/checkboxGroup.ts +0 -10
  263. package/src/theme/components/componentWrapper.ts +0 -14
  264. package/src/theme/components/customTable.ts +0 -77
  265. package/src/theme/components/datePicker.ts +0 -17
  266. package/src/theme/components/fieldset.ts +0 -23
  267. package/src/theme/components/global.ts +0 -91
  268. package/src/theme/components/globalMixins.ts +0 -24
  269. package/src/theme/components/heading.ts +0 -79
  270. package/src/theme/components/helperErrorText.ts +0 -14
  271. package/src/theme/components/hero.ts +0 -238
  272. package/src/theme/components/horizontalRule.ts +0 -17
  273. package/src/theme/components/icon.ts +0 -88
  274. package/src/theme/components/image.ts +0 -136
  275. package/src/theme/components/label.ts +0 -15
  276. package/src/theme/components/link.ts +0 -63
  277. package/src/theme/components/list.ts +0 -88
  278. package/src/theme/components/logo.ts +0 -58
  279. package/src/theme/components/notification.ts +0 -132
  280. package/src/theme/components/pagination.ts +0 -17
  281. package/src/theme/components/progressIndicator.ts +0 -67
  282. package/src/theme/components/radio.ts +0 -103
  283. package/src/theme/components/radioGroup.ts +0 -10
  284. package/src/theme/components/searchBar.ts +0 -19
  285. package/src/theme/components/select.ts +0 -72
  286. package/src/theme/components/skeletonLoader.ts +0 -113
  287. package/src/theme/components/skipNavigation.ts +0 -29
  288. package/src/theme/components/slider.ts +0 -95
  289. package/src/theme/components/statusBadge.ts +0 -26
  290. package/src/theme/components/structuredContent.ts +0 -149
  291. package/src/theme/components/tabs.ts +0 -109
  292. package/src/theme/components/template.ts +0 -114
  293. package/src/theme/components/text.ts +0 -38
  294. package/src/theme/components/textInput.ts +0 -65
  295. package/src/theme/components/toggle.ts +0 -109
  296. package/src/theme/components/videoPlayer.ts +0 -47
  297. package/src/theme/foundations/breakpoints.ts +0 -24
  298. package/src/theme/foundations/colors.ts +0 -212
  299. package/src/theme/foundations/global.ts +0 -43
  300. package/src/theme/foundations/radii.ts +0 -7
  301. package/src/theme/foundations/shadows.ts +0 -5
  302. package/src/theme/foundations/spacing.ts +0 -136
  303. package/src/theme/foundations/typography.ts +0 -107
  304. package/src/theme/index.ts +0 -131
  305. package/src/theme/provider.tsx +0 -9
  306. package/src/theme/types.ts +0 -1
  307. package/src/utils/componentCategories.ts +0 -152
  308. package/src/utils/interfaces.ts +0 -5
  309. package/src/utils/utils.ts +0 -84
package/src/components/Select/__snapshots__/Select.test.tsx.snap DELETED
@@ -1,895 +0,0 @@
1
- // Jest Snapshot v1, https://goo.gl/fbAQLP
2
-
3
- exports[`Select Renders the UI snapshot correctly 1`] = `
4
- <div
5
- className="css-1u8qly9"
6
- id="select-wrapper"
7
- >
8
- <div
9
- className="css-0"
10
- >
11
- <div
12
- className="css-0"
13
- >
14
- <label
15
- className="css-1xdhyk6"
16
- htmlFor="select"
17
- id="select-label"
18
- >
19
- Which Succession sibling are you?
20
- </label>
21
- </div>
22
- <div
23
- className="chakra-select__wrapper css-42b2qy"
24
- >
25
- <select
26
- className="chakra-select css-1ik61og"
27
- disabled={false}
28
- id="select"
29
- name="succession-sibling"
30
- onBlur={[Function]}
31
- onFocus={[Function]}
32
- required={false}
33
- >
34
- <option>
35
- Kendall
36
- </option>
37
- <option>
38
- Shiv
39
- </option>
40
- <option>
41
- Connor
42
- </option>
43
- <option>
44
- Roman
45
- </option>
46
- <option>
47
- Tom
48
- </option>
49
- </select>
50
- <div
51
- className="chakra-select__icon-wrapper css-162mkon"
52
- >
53
- <svg
54
- aria-hidden={true}
55
- className="chakra-icon chakra-select__icon css-1grhd2q"
56
- focusable={false}
57
- id="select-icon"
58
- role="presentation"
59
- style={
60
- Object {
61
- "color": "currentColor",
62
- "height": "1em",
63
- "width": "1em",
64
- }
65
- }
66
- title="arrow icon"
67
- viewBox="0 0 24 24"
68
- >
69
- <g
70
- stroke="currentColor"
71
- strokeWidth="1.5"
72
- >
73
- <path
74
- d="M9,9a3,3,0,1,1,4,2.829,1.5,1.5,0,0,0-1,1.415V14.25"
75
- fill="none"
76
- strokeLinecap="round"
77
- />
78
- <path
79
- d="M12,17.25a.375.375,0,1,0,.375.375A.375.375,0,0,0,12,17.25h0"
80
- fill="currentColor"
81
- strokeLinecap="round"
82
- />
83
- <circle
84
- cx="12"
85
- cy="12"
86
- fill="none"
87
- r="11.25"
88
- strokeMiterlimit="10"
89
- />
90
- </g>
91
- </svg>
92
- </div>
93
- </div>
94
- </div>
95
- </div>
96
- `;
97
-
98
- exports[`Select Renders the UI snapshot correctly 2`] = `
99
- <div
100
- className="css-1u8qly9"
101
- id="select-wrapper"
102
- >
103
- <div
104
- className="css-0"
105
- >
106
- <div
107
- className="css-0"
108
- >
109
- <label
110
- className="css-1xdhyk6"
111
- htmlFor="select"
112
- id="select-label"
113
- >
114
- Which Succession sibling are you?
115
- </label>
116
- </div>
117
- <div
118
- className="chakra-select__wrapper css-42b2qy"
119
- >
120
- <select
121
- className="chakra-select css-1ik61og"
122
- disabled={true}
123
- id="select"
124
- name="succession-sibling"
125
- onBlur={[Function]}
126
- onFocus={[Function]}
127
- required={false}
128
- >
129
- <option>
130
- Kendall
131
- </option>
132
- <option>
133
- Shiv
134
- </option>
135
- <option>
136
- Connor
137
- </option>
138
- <option>
139
- Roman
140
- </option>
141
- <option>
142
- Tom
143
- </option>
144
- </select>
145
- <div
146
- className="chakra-select__icon-wrapper css-162mkon"
147
- data-disabled=""
148
- >
149
- <svg
150
- aria-hidden={true}
151
- className="chakra-icon chakra-select__icon css-1grhd2q"
152
- focusable={false}
153
- id="select-icon"
154
- role="presentation"
155
- style={
156
- Object {
157
- "color": "currentColor",
158
- "height": "1em",
159
- "width": "1em",
160
- }
161
- }
162
- title="arrow icon"
163
- viewBox="0 0 24 24"
164
- >
165
- <g
166
- stroke="currentColor"
167
- strokeWidth="1.5"
168
- >
169
- <path
170
- d="M9,9a3,3,0,1,1,4,2.829,1.5,1.5,0,0,0-1,1.415V14.25"
171
- fill="none"
172
- strokeLinecap="round"
173
- />
174
- <path
175
- d="M12,17.25a.375.375,0,1,0,.375.375A.375.375,0,0,0,12,17.25h0"
176
- fill="currentColor"
177
- strokeLinecap="round"
178
- />
179
- <circle
180
- cx="12"
181
- cy="12"
182
- fill="none"
183
- r="11.25"
184
- strokeMiterlimit="10"
185
- />
186
- </g>
187
- </svg>
188
- </div>
189
- </div>
190
- </div>
191
- </div>
192
- `;
193
-
194
- exports[`Select Renders the UI snapshot correctly 3`] = `
195
- <div
196
- className="css-1u8qly9"
197
- id="select-wrapper"
198
- >
199
- <div
200
- className="css-0"
201
- >
202
- <div
203
- className="css-0"
204
- >
205
- <label
206
- className="css-1xdhyk6"
207
- htmlFor="select"
208
- id="select-label"
209
- >
210
- Which Succession sibling are you?
211
- </label>
212
- </div>
213
- <div
214
- className="chakra-select__wrapper css-42b2qy"
215
- >
216
- <select
217
- aria-describedby="select-helperText"
218
- aria-invalid={true}
219
- className="chakra-select css-1ik61og"
220
- disabled={false}
221
- id="select"
222
- name="succession-sibling"
223
- onBlur={[Function]}
224
- onFocus={[Function]}
225
- required={false}
226
- >
227
- <option>
228
- Kendall
229
- </option>
230
- <option>
231
- Shiv
232
- </option>
233
- <option>
234
- Connor
235
- </option>
236
- <option>
237
- Roman
238
- </option>
239
- <option>
240
- Tom
241
- </option>
242
- </select>
243
- <div
244
- className="chakra-select__icon-wrapper css-162mkon"
245
- >
246
- <svg
247
- aria-hidden={true}
248
- className="chakra-icon chakra-select__icon css-1grhd2q"
249
- focusable={false}
250
- id="select-icon"
251
- role="presentation"
252
- style={
253
- Object {
254
- "color": "currentColor",
255
- "height": "1em",
256
- "width": "1em",
257
- }
258
- }
259
- title="arrow icon"
260
- viewBox="0 0 24 24"
261
- >
262
- <g
263
- stroke="currentColor"
264
- strokeWidth="1.5"
265
- >
266
- <path
267
- d="M9,9a3,3,0,1,1,4,2.829,1.5,1.5,0,0,0-1,1.415V14.25"
268
- fill="none"
269
- strokeLinecap="round"
270
- />
271
- <path
272
- d="M12,17.25a.375.375,0,1,0,.375.375A.375.375,0,0,0,12,17.25h0"
273
- fill="currentColor"
274
- strokeLinecap="round"
275
- />
276
- <circle
277
- cx="12"
278
- cy="12"
279
- fill="none"
280
- r="11.25"
281
- strokeMiterlimit="10"
282
- />
283
- </g>
284
- </svg>
285
- </div>
286
- </div>
287
- </div>
288
- <div
289
- aria-atomic={true}
290
- aria-live="polite"
291
- className="css-1sax8hu"
292
- dangerouslySetInnerHTML={
293
- Object {
294
- "__html": "Tom doesn't count as a sibling :(.",
295
- }
296
- }
297
- data-isinvalid={true}
298
- id="select-helperText"
299
- />
300
- </div>
301
- `;
302
-
303
- exports[`Select Renders the UI snapshot correctly 4`] = `
304
- <div
305
- className="css-1u8qly9"
306
- id="select-wrapper"
307
- >
308
- <div
309
- className="css-0"
310
- >
311
- <div
312
- className="css-0"
313
- >
314
- <label
315
- className="css-1xdhyk6"
316
- htmlFor="select"
317
- id="select-label"
318
- >
319
- Which Succession sibling are you?
320
- </label>
321
- </div>
322
- <div
323
- className="chakra-select__wrapper css-42b2qy"
324
- >
325
- <select
326
- aria-describedby="select-helperText"
327
- className="chakra-select css-1ik61og"
328
- disabled={false}
329
- id="select"
330
- name="succession-sibling"
331
- onBlur={[Function]}
332
- onFocus={[Function]}
333
- required={false}
334
- >
335
- <option>
336
- Kendall
337
- </option>
338
- <option>
339
- Shiv
340
- </option>
341
- <option>
342
- Connor
343
- </option>
344
- <option>
345
- Roman
346
- </option>
347
- <option>
348
- Tom
349
- </option>
350
- </select>
351
- <div
352
- className="chakra-select__icon-wrapper css-162mkon"
353
- >
354
- <svg
355
- aria-hidden={true}
356
- className="chakra-icon chakra-select__icon css-1grhd2q"
357
- focusable={false}
358
- id="select-icon"
359
- role="presentation"
360
- style={
361
- Object {
362
- "color": "currentColor",
363
- "height": "1em",
364
- "width": "1em",
365
- }
366
- }
367
- title="arrow icon"
368
- viewBox="0 0 24 24"
369
- >
370
- <g
371
- stroke="currentColor"
372
- strokeWidth="1.5"
373
- >
374
- <path
375
- d="M9,9a3,3,0,1,1,4,2.829,1.5,1.5,0,0,0-1,1.415V14.25"
376
- fill="none"
377
- strokeLinecap="round"
378
- />
379
- <path
380
- d="M12,17.25a.375.375,0,1,0,.375.375A.375.375,0,0,0,12,17.25h0"
381
- fill="currentColor"
382
- strokeLinecap="round"
383
- />
384
- <circle
385
- cx="12"
386
- cy="12"
387
- fill="none"
388
- r="11.25"
389
- strokeMiterlimit="10"
390
- />
391
- </g>
392
- </svg>
393
- </div>
394
- </div>
395
- </div>
396
- <div
397
- aria-atomic={true}
398
- aria-live="off"
399
- className="css-1sax8hu"
400
- dangerouslySetInnerHTML={
401
- Object {
402
- "__html": "Remember, Logan will judge you no matter who you pick.",
403
- }
404
- }
405
- data-isinvalid={false}
406
- id="select-helperText"
407
- />
408
- </div>
409
- `;
410
-
411
- exports[`Select Renders the UI snapshot correctly 5`] = `
412
- <div
413
- className="css-1u8qly9"
414
- id="select-wrapper"
415
- >
416
- <div
417
- className="css-0"
418
- >
419
- <div
420
- className="css-0"
421
- >
422
- <label
423
- className="css-1xdhyk6"
424
- htmlFor="select"
425
- id="select-label"
426
- >
427
- Which Succession sibling are you?
428
- <span>
429
- (Required)
430
- </span>
431
- </label>
432
- </div>
433
- <div
434
- className="chakra-select__wrapper css-42b2qy"
435
- >
436
- <select
437
- aria-required={true}
438
- className="chakra-select css-1ik61og"
439
- disabled={false}
440
- id="select"
441
- name="succession-sibling"
442
- onBlur={[Function]}
443
- onFocus={[Function]}
444
- required={true}
445
- >
446
- <option>
447
- Kendall
448
- </option>
449
- <option>
450
- Shiv
451
- </option>
452
- <option>
453
- Connor
454
- </option>
455
- <option>
456
- Roman
457
- </option>
458
- <option>
459
- Tom
460
- </option>
461
- </select>
462
- <div
463
- className="chakra-select__icon-wrapper css-162mkon"
464
- >
465
- <svg
466
- aria-hidden={true}
467
- className="chakra-icon chakra-select__icon css-1grhd2q"
468
- focusable={false}
469
- id="select-icon"
470
- role="presentation"
471
- style={
472
- Object {
473
- "color": "currentColor",
474
- "height": "1em",
475
- "width": "1em",
476
- }
477
- }
478
- title="arrow icon"
479
- viewBox="0 0 24 24"
480
- >
481
- <g
482
- stroke="currentColor"
483
- strokeWidth="1.5"
484
- >
485
- <path
486
- d="M9,9a3,3,0,1,1,4,2.829,1.5,1.5,0,0,0-1,1.415V14.25"
487
- fill="none"
488
- strokeLinecap="round"
489
- />
490
- <path
491
- d="M12,17.25a.375.375,0,1,0,.375.375A.375.375,0,0,0,12,17.25h0"
492
- fill="currentColor"
493
- strokeLinecap="round"
494
- />
495
- <circle
496
- cx="12"
497
- cy="12"
498
- fill="none"
499
- r="11.25"
500
- strokeMiterlimit="10"
501
- />
502
- </g>
503
- </svg>
504
- </div>
505
- </div>
506
- </div>
507
- </div>
508
- `;
509
-
510
- exports[`Select Renders the UI snapshot correctly 6`] = `
511
- <div
512
- className="css-1u8qly9"
513
- id="select-wrapper"
514
- >
515
- <div
516
- className="css-0"
517
- >
518
- <div
519
- className="css-0"
520
- >
521
- <label
522
- className="css-1xdhyk6"
523
- htmlFor="select"
524
- id="select-label"
525
- >
526
- Which Succession sibling are you?
527
- <span>
528
- (Required)
529
- </span>
530
- </label>
531
- </div>
532
- <div
533
- className="chakra-select__wrapper css-42b2qy"
534
- >
535
- <select
536
- aria-required={true}
537
- className="chakra-select css-1ik61og"
538
- disabled={false}
539
- id="select"
540
- name="succession-sibling"
541
- onBlur={[Function]}
542
- onFocus={[Function]}
543
- required={true}
544
- >
545
- <option>
546
- Kendall
547
- </option>
548
- <option>
549
- Shiv
550
- </option>
551
- <option>
552
- Connor
553
- </option>
554
- <option>
555
- Roman
556
- </option>
557
- <option>
558
- Tom
559
- </option>
560
- </select>
561
- <div
562
- className="chakra-select__icon-wrapper css-162mkon"
563
- >
564
- <svg
565
- aria-hidden={true}
566
- className="chakra-icon chakra-select__icon css-1grhd2q"
567
- focusable={false}
568
- id="select-icon"
569
- role="presentation"
570
- style={
571
- Object {
572
- "color": "currentColor",
573
- "height": "1em",
574
- "width": "1em",
575
- }
576
- }
577
- title="arrow icon"
578
- viewBox="0 0 24 24"
579
- >
580
- <g
581
- stroke="currentColor"
582
- strokeWidth="1.5"
583
- >
584
- <path
585
- d="M9,9a3,3,0,1,1,4,2.829,1.5,1.5,0,0,0-1,1.415V14.25"
586
- fill="none"
587
- strokeLinecap="round"
588
- />
589
- <path
590
- d="M12,17.25a.375.375,0,1,0,.375.375A.375.375,0,0,0,12,17.25h0"
591
- fill="currentColor"
592
- strokeLinecap="round"
593
- />
594
- <circle
595
- cx="12"
596
- cy="12"
597
- fill="none"
598
- r="11.25"
599
- strokeMiterlimit="10"
600
- />
601
- </g>
602
- </svg>
603
- </div>
604
- </div>
605
- </div>
606
- </div>
607
- `;
608
-
609
- exports[`Select Renders the UI snapshot correctly 7`] = `
610
- <div
611
- className="css-1u8qly9"
612
- id="select-wrapper"
613
- >
614
- <div
615
- className="css-0"
616
- >
617
- <div
618
- className="css-0"
619
- >
620
- <label
621
- className="css-1xdhyk6"
622
- htmlFor="select"
623
- id="select-label"
624
- >
625
- Which Succession sibling are you?
626
- </label>
627
- </div>
628
- <div
629
- className="chakra-select__wrapper css-42b2qy"
630
- >
631
- <select
632
- className="chakra-select css-1ik61og"
633
- disabled={false}
634
- id="select"
635
- name="succession-sibling"
636
- onBlur={[Function]}
637
- onChange={[MockFunction]}
638
- onFocus={[Function]}
639
- required={false}
640
- value=""
641
- >
642
- <option>
643
- Kendall
644
- </option>
645
- <option>
646
- Shiv
647
- </option>
648
- <option>
649
- Connor
650
- </option>
651
- <option>
652
- Roman
653
- </option>
654
- <option>
655
- Tom
656
- </option>
657
- </select>
658
- <div
659
- className="chakra-select__icon-wrapper css-162mkon"
660
- >
661
- <svg
662
- aria-hidden={true}
663
- className="chakra-icon chakra-select__icon css-1grhd2q"
664
- focusable={false}
665
- id="select-icon"
666
- role="presentation"
667
- style={
668
- Object {
669
- "color": "currentColor",
670
- "height": "1em",
671
- "width": "1em",
672
- }
673
- }
674
- title="arrow icon"
675
- viewBox="0 0 24 24"
676
- >
677
- <g
678
- stroke="currentColor"
679
- strokeWidth="1.5"
680
- >
681
- <path
682
- d="M9,9a3,3,0,1,1,4,2.829,1.5,1.5,0,0,0-1,1.415V14.25"
683
- fill="none"
684
- strokeLinecap="round"
685
- />
686
- <path
687
- d="M12,17.25a.375.375,0,1,0,.375.375A.375.375,0,0,0,12,17.25h0"
688
- fill="currentColor"
689
- strokeLinecap="round"
690
- />
691
- <circle
692
- cx="12"
693
- cy="12"
694
- fill="none"
695
- r="11.25"
696
- strokeMiterlimit="10"
697
- />
698
- </g>
699
- </svg>
700
- </div>
701
- </div>
702
- </div>
703
- </div>
704
- `;
705
-
706
- exports[`Select Renders the UI snapshot correctly 8`] = `
707
- <div
708
- className="css-1y4kn3e"
709
- id="chakra-wrapper"
710
- >
711
- <div
712
- className="css-0"
713
- >
714
- <div
715
- className="css-0"
716
- >
717
- <label
718
- className="css-1xdhyk6"
719
- htmlFor="chakra"
720
- id="chakra-label"
721
- >
722
- Which Succession sibling are you?
723
- </label>
724
- </div>
725
- <div
726
- className="chakra-select__wrapper css-42b2qy"
727
- >
728
- <select
729
- className="chakra-select css-1ik61og"
730
- disabled={false}
731
- id="chakra"
732
- name="succession-sibling"
733
- onBlur={[Function]}
734
- onFocus={[Function]}
735
- required={false}
736
- >
737
- <option>
738
- Kendall
739
- </option>
740
- <option>
741
- Shiv
742
- </option>
743
- <option>
744
- Connor
745
- </option>
746
- <option>
747
- Roman
748
- </option>
749
- <option>
750
- Tom
751
- </option>
752
- </select>
753
- <div
754
- className="chakra-select__icon-wrapper css-162mkon"
755
- >
756
- <svg
757
- aria-hidden={true}
758
- className="chakra-icon chakra-select__icon css-1grhd2q"
759
- focusable={false}
760
- id="chakra-icon"
761
- role="presentation"
762
- style={
763
- Object {
764
- "color": "currentColor",
765
- "height": "1em",
766
- "width": "1em",
767
- }
768
- }
769
- title="arrow icon"
770
- viewBox="0 0 24 24"
771
- >
772
- <g
773
- stroke="currentColor"
774
- strokeWidth="1.5"
775
- >
776
- <path
777
- d="M9,9a3,3,0,1,1,4,2.829,1.5,1.5,0,0,0-1,1.415V14.25"
778
- fill="none"
779
- strokeLinecap="round"
780
- />
781
- <path
782
- d="M12,17.25a.375.375,0,1,0,.375.375A.375.375,0,0,0,12,17.25h0"
783
- fill="currentColor"
784
- strokeLinecap="round"
785
- />
786
- <circle
787
- cx="12"
788
- cy="12"
789
- fill="none"
790
- r="11.25"
791
- strokeMiterlimit="10"
792
- />
793
- </g>
794
- </svg>
795
- </div>
796
- </div>
797
- </div>
798
- </div>
799
- `;
800
-
801
- exports[`Select Renders the UI snapshot correctly 9`] = `
802
- <div
803
- className="css-1u8qly9"
804
- data-testid="props"
805
- id="props-wrapper"
806
- >
807
- <div
808
- className="css-0"
809
- >
810
- <div
811
- className="css-0"
812
- >
813
- <label
814
- className="css-1xdhyk6"
815
- htmlFor="props"
816
- id="props-label"
817
- >
818
- Which Succession sibling are you?
819
- </label>
820
- </div>
821
- <div
822
- className="chakra-select__wrapper css-42b2qy"
823
- >
824
- <select
825
- className="chakra-select css-1ik61og"
826
- disabled={false}
827
- id="props"
828
- name="succession-sibling"
829
- onBlur={[Function]}
830
- onFocus={[Function]}
831
- required={false}
832
- >
833
- <option>
834
- Kendall
835
- </option>
836
- <option>
837
- Shiv
838
- </option>
839
- <option>
840
- Connor
841
- </option>
842
- <option>
843
- Roman
844
- </option>
845
- <option>
846
- Tom
847
- </option>
848
- </select>
849
- <div
850
- className="chakra-select__icon-wrapper css-162mkon"
851
- >
852
- <svg
853
- aria-hidden={true}
854
- className="chakra-icon chakra-select__icon css-1grhd2q"
855
- focusable={false}
856
- id="props-icon"
857
- role="presentation"
858
- style={
859
- Object {
860
- "color": "currentColor",
861
- "height": "1em",
862
- "width": "1em",
863
- }
864
- }
865
- title="arrow icon"
866
- viewBox="0 0 24 24"
867
- >
868
- <g
869
- stroke="currentColor"
870
- strokeWidth="1.5"
871
- >
872
- <path
873
- d="M9,9a3,3,0,1,1,4,2.829,1.5,1.5,0,0,0-1,1.415V14.25"
874
- fill="none"
875
- strokeLinecap="round"
876
- />
877
- <path
878
- d="M12,17.25a.375.375,0,1,0,.375.375A.375.375,0,0,0,12,17.25h0"
879
- fill="currentColor"
880
- strokeLinecap="round"
881
- />
882
- <circle
883
- cx="12"
884
- cy="12"
885
- fill="none"
886
- r="11.25"
887
- strokeMiterlimit="10"
888
- />
889
- </g>
890
- </svg>
891
- </div>
892
- </div>
893
- </div>
894
- </div>
895
- `;