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