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

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 (99) hide show
  1. package/CHANGELOG.md +39 -0
  2. package/README.md +10 -10
  3. package/dist/components/Checkbox/Checkbox.d.ts +0 -1
  4. package/dist/components/ComponentWrapper/ComponentWrapper.d.ts +8 -0
  5. package/dist/components/Heading/Heading.d.ts +2 -0
  6. package/dist/components/Logo/Logo.d.ts +1 -1
  7. package/dist/components/Logo/LogoSvgs.d.ts +4 -0
  8. package/dist/design-system-react-components.cjs.development.js +1021 -683
  9. package/dist/design-system-react-components.cjs.development.js.map +1 -1
  10. package/dist/design-system-react-components.cjs.production.min.js +1 -1
  11. package/dist/design-system-react-components.cjs.production.min.js.map +1 -1
  12. package/dist/design-system-react-components.esm.js +1022 -684
  13. package/dist/design-system-react-components.esm.js.map +1 -1
  14. package/dist/theme/components/button.d.ts +1 -0
  15. package/dist/theme/components/card.d.ts +98 -13
  16. package/dist/theme/components/checkboxGroup.d.ts +1 -1
  17. package/dist/theme/components/global.d.ts +1 -1
  18. package/dist/theme/components/heading.d.ts +4 -16
  19. package/dist/theme/components/image.d.ts +6 -0
  20. package/dist/theme/components/radioGroup.d.ts +1 -1
  21. package/dist/theme/components/skipNavigation.d.ts +3 -0
  22. package/dist/theme/components/structuredContent.d.ts +0 -5
  23. package/dist/utils/utils.d.ts +15 -0
  24. package/package.json +6 -6
  25. package/src/components/Accordion/Accordion.stories.mdx +18 -46
  26. package/src/components/Accordion/Accordion.tsx +3 -2
  27. package/src/components/Accordion/__snapshots__/Accordion.test.tsx.snap +12 -12
  28. package/src/components/Button/Button.stories.mdx +1 -1
  29. package/src/components/ButtonGroup/ButtonGroup.stories.mdx +33 -2
  30. package/src/components/ButtonGroup/ButtonGroup.tsx +2 -1
  31. package/src/components/Card/Card.stories.mdx +2 -4
  32. package/src/components/Card/Card.tsx +2 -1
  33. package/src/components/Chakra/Box.stories.mdx +1 -1
  34. package/src/components/Chakra/Center.stories.mdx +1 -1
  35. package/src/components/Chakra/Flex.stories.mdx +1 -1
  36. package/src/components/Chakra/Grid.stories.mdx +1 -1
  37. package/src/components/Chakra/Stack.stories.mdx +1 -1
  38. package/src/components/Checkbox/Checkbox.stories.mdx +1 -1
  39. package/src/components/Checkbox/Checkbox.test.tsx +42 -11
  40. package/src/components/Checkbox/Checkbox.tsx +25 -39
  41. package/src/components/Checkbox/__snapshots__/Checkbox.test.tsx.snap +589 -544
  42. package/src/components/CheckboxGroup/CheckboxGroup.stories.mdx +1 -1
  43. package/src/components/CheckboxGroup/CheckboxGroup.tsx +1 -1
  44. package/src/components/CheckboxGroup/__snapshots__/CheckboxGroup.test.tsx.snap +1540 -1420
  45. package/src/components/ComponentWrapper/ComponentWrapper.tsx +12 -3
  46. package/src/components/ComponentWrapper/__snapshots__/ComponentWrapper.test.tsx.snap +5 -0
  47. package/src/components/DatePicker/__snapshots__/DatePicker.test.tsx.snap +36 -17
  48. package/src/components/Grid/SimpleGrid.stories.mdx +1 -3
  49. package/src/components/Heading/Heading.stories.mdx +4 -1
  50. package/src/components/Heading/Heading.tsx +4 -1
  51. package/src/components/Image/Image.stories.mdx +1 -1
  52. package/src/components/Logo/Logo.stories.mdx +10 -5
  53. package/src/components/Logo/Logo.tsx +4 -0
  54. package/src/components/Logo/LogoSvgs.tsx +8 -0
  55. package/src/components/Modal/Modal.stories.mdx +83 -90
  56. package/src/components/Pagination/Pagination.stories.mdx +1 -1
  57. package/src/components/Radio/Radio.stories.mdx +1 -1
  58. package/src/components/Radio/Radio.tsx +22 -31
  59. package/src/components/Radio/__snapshots__/Radio.test.tsx.snap +405 -365
  60. package/src/components/RadioGroup/RadioGroup.stories.mdx +2 -1
  61. package/src/components/RadioGroup/RadioGroup.tsx +2 -1
  62. package/src/components/RadioGroup/__snapshots__/RadioGroup.test.tsx.snap +1236 -1116
  63. package/src/components/SearchBar/SearchBar.stories.mdx +3 -3
  64. package/src/components/SearchBar/__snapshots__/SearchBar.test.tsx.snap +32 -10
  65. package/src/components/Select/Select.stories.mdx +1 -1
  66. package/src/components/Select/Select.tsx +24 -22
  67. package/src/components/Select/__snapshots__/Select.test.tsx.snap +21 -11
  68. package/src/components/SkipNavigation/SkipNavigation.stories.mdx +2 -2
  69. package/src/components/Slider/Slider.stories.mdx +1 -1
  70. package/src/components/Slider/Slider.tsx +14 -14
  71. package/src/components/Slider/__snapshots__/Slider.test.tsx.snap +66 -33
  72. package/src/components/StyleGuide/Buttons.stories.mdx +1 -1
  73. package/src/components/StyleGuide/Colors.stories.mdx +2 -2
  74. package/src/components/StyleGuide/Forms.stories.mdx +2 -1
  75. package/src/components/StyleGuide/Iconography.stories.mdx +2 -2
  76. package/src/components/StyleGuide/Spacing.stories.mdx +1 -1
  77. package/src/components/StyleGuide/Typography.stories.mdx +1 -1
  78. package/src/components/Table/Table.stories.mdx +1 -5
  79. package/src/components/Table/Table.test.tsx +33 -0
  80. package/src/components/Table/Table.tsx +21 -0
  81. package/src/components/Template/Template.stories.mdx +9 -5
  82. package/src/components/TextInput/TextInput.stories.mdx +1 -1
  83. package/src/components/TextInput/TextInput.tsx +21 -21
  84. package/src/components/TextInput/__snapshots__/TextInput.test.tsx.snap +19 -9
  85. package/src/components/Toggle/Toggle.stories.mdx +1 -1
  86. package/src/components/Toggle/Toggle.tsx +22 -20
  87. package/src/components/Toggle/__snapshots__/Toggle.test.tsx.snap +400 -372
  88. package/src/components/VideoPlayer/VideoPlayer.stories.mdx +1 -0
  89. package/src/components/VideoPlayer/__snapshots__/VideoPlayer.test.tsx.snap +5 -0
  90. package/src/docs/Chakra.stories.mdx +2 -2
  91. package/src/theme/components/button.ts +1 -0
  92. package/src/theme/components/card.ts +9 -3
  93. package/src/theme/components/componentWrapper.ts +1 -1
  94. package/src/theme/components/global.ts +1 -1
  95. package/src/theme/components/heading.ts +3 -3
  96. package/src/theme/components/image.ts +1 -0
  97. package/src/theme/components/skipNavigation.ts +3 -0
  98. package/src/theme/foundations/colors.ts +6 -9
  99. package/src/utils/utils.ts +40 -0
package/src/components/Toggle/__snapshots__/Toggle.test.tsx.snap CHANGED
@@ -2,441 +2,469 @@
2
2
 
3
3
  exports[`Toggle Renders the UI snapshot correctly 1`] = `
4
4
  <div
5
- className="css-1xdhyk6"
5
+ className="css-1u8qly9"
6
+ id="inputID-wrapper"
6
7
  >
7
- <label
8
- className="chakra-switch css-18x0has"
9
- onClick={[Function]}
8
+ <div
9
+ className="css-0"
10
10
  >
11
- <input
12
- aria-disabled={false}
13
- aria-invalid={false}
14
- aria-label="Test Label"
15
- checked={false}
16
- className="chakra-switch__input"
17
- disabled={false}
18
- id="inputID"
19
- name="default"
20
- onBlur={[Function]}
21
- onChange={[Function]}
22
- onFocus={[Function]}
23
- onKeyDown={[Function]}
24
- onKeyUp={[Function]}
25
- required={false}
26
- style={
27
- Object {
28
- "border": "0px",
29
- "clip": "rect(0px, 0px, 0px, 0px)",
30
- "height": "1px",
31
- "margin": "-1px",
32
- "overflow": "hidden",
33
- "padding": "0px",
34
- "position": "absolute",
35
- "whiteSpace": "nowrap",
36
- "width": "1px",
37
- }
38
- }
39
- type="checkbox"
40
- />
41
- <span
42
- aria-hidden={true}
43
- className="chakra-switch__track css-14qxnv8"
44
- onMouseDown={[Function]}
45
- onMouseEnter={[Function]}
46
- onMouseLeave={[Function]}
47
- onMouseUp={[Function]}
11
+ <label
12
+ className="chakra-switch css-18x0has"
13
+ onClick={[Function]}
48
14
  >
49
- <span
50
- className="chakra-switch__thumb css-0"
15
+ <input
16
+ aria-disabled={false}
17
+ aria-invalid={false}
18
+ checked={false}
19
+ className="chakra-switch__input"
20
+ disabled={false}
21
+ id="inputID"
22
+ name="default"
23
+ onBlur={[Function]}
24
+ onChange={[Function]}
25
+ onFocus={[Function]}
26
+ onKeyDown={[Function]}
27
+ onKeyUp={[Function]}
28
+ required={false}
29
+ style={
30
+ Object {
31
+ "border": "0px",
32
+ "clip": "rect(0px, 0px, 0px, 0px)",
33
+ "height": "1px",
34
+ "margin": "-1px",
35
+ "overflow": "hidden",
36
+ "padding": "0px",
37
+ "position": "absolute",
38
+ "whiteSpace": "nowrap",
39
+ "width": "1px",
40
+ }
41
+ }
42
+ type="checkbox"
51
43
  />
52
- </span>
53
- <span
54
- className="chakra-switch__label css-1y8kf23"
55
- onMouseDown={[Function]}
56
- onTouchStart={[Function]}
57
- >
58
- Test Label
59
- </span>
60
- </label>
44
+ <span
45
+ aria-hidden={true}
46
+ className="chakra-switch__track css-14qxnv8"
47
+ onMouseDown={[Function]}
48
+ onMouseEnter={[Function]}
49
+ onMouseLeave={[Function]}
50
+ onMouseUp={[Function]}
51
+ >
52
+ <span
53
+ className="chakra-switch__thumb css-0"
54
+ />
55
+ </span>
56
+ <span
57
+ className="chakra-switch__label css-1y8kf23"
58
+ onMouseDown={[Function]}
59
+ onTouchStart={[Function]}
60
+ >
61
+ Test Label
62
+ </span>
63
+ </label>
64
+ </div>
61
65
  </div>
62
66
  `;
63
67
 
64
68
  exports[`Toggle Renders the UI snapshot correctly 2`] = `
65
69
  <div
66
- className="css-1xdhyk6"
70
+ className="css-1u8qly9"
71
+ id="Toggle-checked-wrapper"
67
72
  >
68
- <label
69
- className="chakra-switch css-18x0has"
70
- data-checked=""
71
- onClick={[Function]}
73
+ <div
74
+ className="css-0"
72
75
  >
73
- <input
74
- aria-disabled={false}
75
- aria-invalid={false}
76
- aria-label="Test Label"
77
- checked={true}
78
- className="chakra-switch__input"
79
- disabled={false}
80
- id="Toggle-checked"
81
- name="default"
82
- onBlur={[Function]}
83
- onChange={[Function]}
84
- onFocus={[Function]}
85
- onKeyDown={[Function]}
86
- onKeyUp={[Function]}
87
- required={false}
88
- style={
89
- Object {
90
- "border": "0px",
91
- "clip": "rect(0px, 0px, 0px, 0px)",
92
- "height": "1px",
93
- "margin": "-1px",
94
- "overflow": "hidden",
95
- "padding": "0px",
96
- "position": "absolute",
97
- "whiteSpace": "nowrap",
98
- "width": "1px",
99
- }
100
- }
101
- type="checkbox"
102
- />
103
- <span
104
- aria-hidden={true}
105
- className="chakra-switch__track css-14qxnv8"
76
+ <label
77
+ className="chakra-switch css-18x0has"
106
78
  data-checked=""
107
- onMouseDown={[Function]}
108
- onMouseEnter={[Function]}
109
- onMouseLeave={[Function]}
110
- onMouseUp={[Function]}
79
+ onClick={[Function]}
111
80
  >
81
+ <input
82
+ aria-disabled={false}
83
+ aria-invalid={false}
84
+ checked={true}
85
+ className="chakra-switch__input"
86
+ disabled={false}
87
+ id="Toggle-checked"
88
+ name="default"
89
+ onBlur={[Function]}
90
+ onChange={[Function]}
91
+ onFocus={[Function]}
92
+ onKeyDown={[Function]}
93
+ onKeyUp={[Function]}
94
+ required={false}
95
+ style={
96
+ Object {
97
+ "border": "0px",
98
+ "clip": "rect(0px, 0px, 0px, 0px)",
99
+ "height": "1px",
100
+ "margin": "-1px",
101
+ "overflow": "hidden",
102
+ "padding": "0px",
103
+ "position": "absolute",
104
+ "whiteSpace": "nowrap",
105
+ "width": "1px",
106
+ }
107
+ }
108
+ type="checkbox"
109
+ />
112
110
  <span
113
- className="chakra-switch__thumb css-0"
111
+ aria-hidden={true}
112
+ className="chakra-switch__track css-14qxnv8"
114
113
  data-checked=""
115
- />
116
- </span>
117
- <span
118
- className="chakra-switch__label css-1y8kf23"
119
- data-checked=""
120
- onMouseDown={[Function]}
121
- onTouchStart={[Function]}
122
- >
123
- Test Label
124
- </span>
125
- </label>
114
+ onMouseDown={[Function]}
115
+ onMouseEnter={[Function]}
116
+ onMouseLeave={[Function]}
117
+ onMouseUp={[Function]}
118
+ >
119
+ <span
120
+ className="chakra-switch__thumb css-0"
121
+ data-checked=""
122
+ />
123
+ </span>
124
+ <span
125
+ className="chakra-switch__label css-1y8kf23"
126
+ data-checked=""
127
+ onMouseDown={[Function]}
128
+ onTouchStart={[Function]}
129
+ >
130
+ Test Label
131
+ </span>
132
+ </label>
133
+ </div>
126
134
  </div>
127
135
  `;
128
136
 
129
137
  exports[`Toggle Renders the UI snapshot correctly 3`] = `
130
138
  <div
131
- className="css-1xdhyk6"
139
+ className="css-1u8qly9"
140
+ id="Toggle-invalid-wrapper"
132
141
  >
133
- <label
134
- className="chakra-switch css-18x0has"
135
- data-invalid=""
136
- onClick={[Function]}
142
+ <div
143
+ className="css-0"
137
144
  >
138
- <input
139
- aria-disabled={false}
140
- aria-invalid={true}
141
- aria-label="Test Label"
142
- checked={false}
143
- className="chakra-switch__input"
144
- disabled={false}
145
- id="Toggle-invalid"
146
- name="default"
147
- onBlur={[Function]}
148
- onChange={[Function]}
149
- onFocus={[Function]}
150
- onKeyDown={[Function]}
151
- onKeyUp={[Function]}
152
- required={false}
153
- style={
154
- Object {
155
- "border": "0px",
156
- "clip": "rect(0px, 0px, 0px, 0px)",
157
- "height": "1px",
158
- "margin": "-1px",
159
- "overflow": "hidden",
160
- "padding": "0px",
161
- "position": "absolute",
162
- "whiteSpace": "nowrap",
163
- "width": "1px",
164
- }
165
- }
166
- type="checkbox"
167
- />
168
- <span
169
- aria-hidden={true}
170
- className="chakra-switch__track css-14qxnv8"
145
+ <label
146
+ className="chakra-switch css-18x0has"
171
147
  data-invalid=""
172
- onMouseDown={[Function]}
173
- onMouseEnter={[Function]}
174
- onMouseLeave={[Function]}
175
- onMouseUp={[Function]}
148
+ onClick={[Function]}
176
149
  >
177
- <span
178
- className="chakra-switch__thumb css-0"
150
+ <input
151
+ aria-disabled={false}
152
+ aria-invalid={true}
153
+ checked={false}
154
+ className="chakra-switch__input"
155
+ disabled={false}
156
+ id="Toggle-invalid"
157
+ name="default"
158
+ onBlur={[Function]}
159
+ onChange={[Function]}
160
+ onFocus={[Function]}
161
+ onKeyDown={[Function]}
162
+ onKeyUp={[Function]}
163
+ required={false}
164
+ style={
165
+ Object {
166
+ "border": "0px",
167
+ "clip": "rect(0px, 0px, 0px, 0px)",
168
+ "height": "1px",
169
+ "margin": "-1px",
170
+ "overflow": "hidden",
171
+ "padding": "0px",
172
+ "position": "absolute",
173
+ "whiteSpace": "nowrap",
174
+ "width": "1px",
175
+ }
176
+ }
177
+ type="checkbox"
179
178
  />
180
- </span>
181
- <span
182
- className="chakra-switch__label css-1y8kf23"
183
- data-invalid=""
184
- onMouseDown={[Function]}
185
- onTouchStart={[Function]}
186
- >
187
- Test Label
188
- </span>
189
- </label>
179
+ <span
180
+ aria-hidden={true}
181
+ className="chakra-switch__track css-14qxnv8"
182
+ data-invalid=""
183
+ onMouseDown={[Function]}
184
+ onMouseEnter={[Function]}
185
+ onMouseLeave={[Function]}
186
+ onMouseUp={[Function]}
187
+ >
188
+ <span
189
+ className="chakra-switch__thumb css-0"
190
+ />
191
+ </span>
192
+ <span
193
+ className="chakra-switch__label css-1y8kf23"
194
+ data-invalid=""
195
+ onMouseDown={[Function]}
196
+ onTouchStart={[Function]}
197
+ >
198
+ Test Label
199
+ </span>
200
+ </label>
201
+ </div>
190
202
  </div>
191
203
  `;
192
204
 
193
205
  exports[`Toggle Renders the UI snapshot correctly 4`] = `
194
206
  <div
195
- className="css-1xdhyk6"
207
+ className="css-1u8qly9"
208
+ id="Toggle-disabled-wrapper"
196
209
  >
197
- <label
198
- className="chakra-switch css-18x0has"
199
- data-disabled=""
200
- onClick={[Function]}
210
+ <div
211
+ className="css-0"
201
212
  >
202
- <input
203
- aria-disabled={true}
204
- aria-invalid={false}
205
- aria-label="Test Label"
206
- checked={false}
207
- className="chakra-switch__input"
208
- disabled={true}
209
- id="Toggle-disabled"
210
- name="default"
211
- onBlur={[Function]}
212
- onChange={[Function]}
213
- onFocus={[Function]}
214
- onKeyDown={[Function]}
215
- onKeyUp={[Function]}
216
- required={false}
217
- style={
218
- Object {
219
- "border": "0px",
220
- "clip": "rect(0px, 0px, 0px, 0px)",
221
- "height": "1px",
222
- "margin": "-1px",
223
- "overflow": "hidden",
224
- "padding": "0px",
225
- "position": "absolute",
226
- "whiteSpace": "nowrap",
227
- "width": "1px",
228
- }
229
- }
230
- type="checkbox"
231
- />
232
- <span
233
- aria-hidden={true}
234
- className="chakra-switch__track css-14qxnv8"
213
+ <label
214
+ className="chakra-switch css-18x0has"
235
215
  data-disabled=""
236
- onMouseDown={[Function]}
237
- onMouseEnter={[Function]}
238
- onMouseLeave={[Function]}
239
- onMouseUp={[Function]}
216
+ onClick={[Function]}
240
217
  >
241
- <span
242
- className="chakra-switch__thumb css-0"
218
+ <input
219
+ aria-disabled={true}
220
+ aria-invalid={false}
221
+ checked={false}
222
+ className="chakra-switch__input"
223
+ disabled={true}
224
+ id="Toggle-disabled"
225
+ name="default"
226
+ onBlur={[Function]}
227
+ onChange={[Function]}
228
+ onFocus={[Function]}
229
+ onKeyDown={[Function]}
230
+ onKeyUp={[Function]}
231
+ required={false}
232
+ style={
233
+ Object {
234
+ "border": "0px",
235
+ "clip": "rect(0px, 0px, 0px, 0px)",
236
+ "height": "1px",
237
+ "margin": "-1px",
238
+ "overflow": "hidden",
239
+ "padding": "0px",
240
+ "position": "absolute",
241
+ "whiteSpace": "nowrap",
242
+ "width": "1px",
243
+ }
244
+ }
245
+ type="checkbox"
243
246
  />
244
- </span>
245
- <span
246
- className="chakra-switch__label css-1y8kf23"
247
- data-disabled=""
248
- onMouseDown={[Function]}
249
- onTouchStart={[Function]}
250
- >
251
- Test Label
252
- </span>
253
- </label>
247
+ <span
248
+ aria-hidden={true}
249
+ className="chakra-switch__track css-14qxnv8"
250
+ data-disabled=""
251
+ onMouseDown={[Function]}
252
+ onMouseEnter={[Function]}
253
+ onMouseLeave={[Function]}
254
+ onMouseUp={[Function]}
255
+ >
256
+ <span
257
+ className="chakra-switch__thumb css-0"
258
+ />
259
+ </span>
260
+ <span
261
+ className="chakra-switch__label css-1y8kf23"
262
+ data-disabled=""
263
+ onMouseDown={[Function]}
264
+ onTouchStart={[Function]}
265
+ >
266
+ Test Label
267
+ </span>
268
+ </label>
269
+ </div>
254
270
  </div>
255
271
  `;
256
272
 
257
273
  exports[`Toggle Renders the UI snapshot correctly 5`] = `
258
274
  <div
259
- className="css-1xdhyk6"
275
+ className="css-1u8qly9"
276
+ id="Toggle-disabled-wrapper"
260
277
  >
261
- <label
262
- className="chakra-switch css-18x0has"
263
- data-disabled=""
264
- onClick={[Function]}
278
+ <div
279
+ className="css-0"
265
280
  >
266
- <input
267
- aria-disabled={true}
268
- aria-invalid={false}
269
- aria-label="Test Label"
270
- checked={false}
271
- className="chakra-switch__input"
272
- disabled={true}
273
- id="Toggle-disabled"
274
- name="default"
275
- onBlur={[Function]}
276
- onChange={[Function]}
277
- onFocus={[Function]}
278
- onKeyDown={[Function]}
279
- onKeyUp={[Function]}
280
- required={false}
281
- style={
282
- Object {
283
- "border": "0px",
284
- "clip": "rect(0px, 0px, 0px, 0px)",
285
- "height": "1px",
286
- "margin": "-1px",
287
- "overflow": "hidden",
288
- "padding": "0px",
289
- "position": "absolute",
290
- "whiteSpace": "nowrap",
291
- "width": "1px",
292
- }
293
- }
294
- type="checkbox"
295
- />
296
- <span
297
- aria-hidden={true}
298
- className="chakra-switch__track css-14qxnv8"
281
+ <label
282
+ className="chakra-switch css-18x0has"
299
283
  data-disabled=""
300
- onMouseDown={[Function]}
301
- onMouseEnter={[Function]}
302
- onMouseLeave={[Function]}
303
- onMouseUp={[Function]}
284
+ onClick={[Function]}
304
285
  >
305
- <span
306
- className="chakra-switch__thumb css-0"
286
+ <input
287
+ aria-disabled={true}
288
+ aria-invalid={false}
289
+ checked={false}
290
+ className="chakra-switch__input"
291
+ disabled={true}
292
+ id="Toggle-disabled"
293
+ name="default"
294
+ onBlur={[Function]}
295
+ onChange={[Function]}
296
+ onFocus={[Function]}
297
+ onKeyDown={[Function]}
298
+ onKeyUp={[Function]}
299
+ required={false}
300
+ style={
301
+ Object {
302
+ "border": "0px",
303
+ "clip": "rect(0px, 0px, 0px, 0px)",
304
+ "height": "1px",
305
+ "margin": "-1px",
306
+ "overflow": "hidden",
307
+ "padding": "0px",
308
+ "position": "absolute",
309
+ "whiteSpace": "nowrap",
310
+ "width": "1px",
311
+ }
312
+ }
313
+ type="checkbox"
307
314
  />
308
- </span>
309
- <span
310
- className="chakra-switch__label css-1y8kf23"
311
- data-disabled=""
312
- onMouseDown={[Function]}
313
- onTouchStart={[Function]}
314
- >
315
- Test Label
316
- </span>
317
- </label>
315
+ <span
316
+ aria-hidden={true}
317
+ className="chakra-switch__track css-14qxnv8"
318
+ data-disabled=""
319
+ onMouseDown={[Function]}
320
+ onMouseEnter={[Function]}
321
+ onMouseLeave={[Function]}
322
+ onMouseUp={[Function]}
323
+ >
324
+ <span
325
+ className="chakra-switch__thumb css-0"
326
+ />
327
+ </span>
328
+ <span
329
+ className="chakra-switch__label css-1y8kf23"
330
+ data-disabled=""
331
+ onMouseDown={[Function]}
332
+ onTouchStart={[Function]}
333
+ >
334
+ Test Label
335
+ </span>
336
+ </label>
337
+ </div>
318
338
  </div>
319
339
  `;
320
340
 
321
341
  exports[`Toggle Renders the UI snapshot correctly 6`] = `
322
342
  <div
323
- className="css-13xjm0o"
343
+ className="css-7zjd3y"
344
+ id="chakra-wrapper"
324
345
  >
325
- <label
326
- className="chakra-switch css-18x0has"
327
- onClick={[Function]}
346
+ <div
347
+ className="css-0"
328
348
  >
329
- <input
330
- aria-disabled={false}
331
- aria-invalid={false}
332
- aria-label="Test Label"
333
- checked={false}
334
- className="chakra-switch__input"
335
- disabled={false}
336
- id="chakra"
337
- name="default"
338
- onBlur={[Function]}
339
- onChange={[Function]}
340
- onFocus={[Function]}
341
- onKeyDown={[Function]}
342
- onKeyUp={[Function]}
343
- required={false}
344
- style={
345
- Object {
346
- "border": "0px",
347
- "clip": "rect(0px, 0px, 0px, 0px)",
348
- "height": "1px",
349
- "margin": "-1px",
350
- "overflow": "hidden",
351
- "padding": "0px",
352
- "position": "absolute",
353
- "whiteSpace": "nowrap",
354
- "width": "1px",
355
- }
356
- }
357
- type="checkbox"
358
- />
359
- <span
360
- aria-hidden={true}
361
- className="chakra-switch__track css-14qxnv8"
362
- onMouseDown={[Function]}
363
- onMouseEnter={[Function]}
364
- onMouseLeave={[Function]}
365
- onMouseUp={[Function]}
349
+ <label
350
+ className="chakra-switch css-18x0has"
351
+ onClick={[Function]}
366
352
  >
367
- <span
368
- className="chakra-switch__thumb css-0"
353
+ <input
354
+ aria-disabled={false}
355
+ aria-invalid={false}
356
+ checked={false}
357
+ className="chakra-switch__input"
358
+ disabled={false}
359
+ id="chakra"
360
+ name="default"
361
+ onBlur={[Function]}
362
+ onChange={[Function]}
363
+ onFocus={[Function]}
364
+ onKeyDown={[Function]}
365
+ onKeyUp={[Function]}
366
+ required={false}
367
+ style={
368
+ Object {
369
+ "border": "0px",
370
+ "clip": "rect(0px, 0px, 0px, 0px)",
371
+ "height": "1px",
372
+ "margin": "-1px",
373
+ "overflow": "hidden",
374
+ "padding": "0px",
375
+ "position": "absolute",
376
+ "whiteSpace": "nowrap",
377
+ "width": "1px",
378
+ }
379
+ }
380
+ type="checkbox"
369
381
  />
370
- </span>
371
- <span
372
- className="chakra-switch__label css-1y8kf23"
373
- onMouseDown={[Function]}
374
- onTouchStart={[Function]}
375
- >
376
- Test Label
377
- </span>
378
- </label>
382
+ <span
383
+ aria-hidden={true}
384
+ className="chakra-switch__track css-14qxnv8"
385
+ onMouseDown={[Function]}
386
+ onMouseEnter={[Function]}
387
+ onMouseLeave={[Function]}
388
+ onMouseUp={[Function]}
389
+ >
390
+ <span
391
+ className="chakra-switch__thumb css-0"
392
+ />
393
+ </span>
394
+ <span
395
+ className="chakra-switch__label css-1y8kf23"
396
+ onMouseDown={[Function]}
397
+ onTouchStart={[Function]}
398
+ >
399
+ Test Label
400
+ </span>
401
+ </label>
402
+ </div>
379
403
  </div>
380
404
  `;
381
405
 
382
406
  exports[`Toggle Renders the UI snapshot correctly 7`] = `
383
407
  <div
384
- className="css-1xdhyk6"
408
+ className="css-1u8qly9"
385
409
  data-testid="props"
410
+ id="props-wrapper"
386
411
  >
387
- <label
388
- className="chakra-switch css-18x0has"
389
- onClick={[Function]}
412
+ <div
413
+ className="css-0"
390
414
  >
391
- <input
392
- aria-disabled={false}
393
- aria-invalid={false}
394
- aria-label="Test Label"
395
- checked={false}
396
- className="chakra-switch__input"
397
- disabled={false}
398
- id="props"
399
- name="default"
400
- onBlur={[Function]}
401
- onChange={[Function]}
402
- onFocus={[Function]}
403
- onKeyDown={[Function]}
404
- onKeyUp={[Function]}
405
- required={false}
406
- style={
407
- Object {
408
- "border": "0px",
409
- "clip": "rect(0px, 0px, 0px, 0px)",
410
- "height": "1px",
411
- "margin": "-1px",
412
- "overflow": "hidden",
413
- "padding": "0px",
414
- "position": "absolute",
415
- "whiteSpace": "nowrap",
416
- "width": "1px",
417
- }
418
- }
419
- type="checkbox"
420
- />
421
- <span
422
- aria-hidden={true}
423
- className="chakra-switch__track css-14qxnv8"
424
- onMouseDown={[Function]}
425
- onMouseEnter={[Function]}
426
- onMouseLeave={[Function]}
427
- onMouseUp={[Function]}
415
+ <label
416
+ className="chakra-switch css-18x0has"
417
+ onClick={[Function]}
428
418
  >
429
- <span
430
- className="chakra-switch__thumb css-0"
419
+ <input
420
+ aria-disabled={false}
421
+ aria-invalid={false}
422
+ checked={false}
423
+ className="chakra-switch__input"
424
+ disabled={false}
425
+ id="props"
426
+ name="default"
427
+ onBlur={[Function]}
428
+ onChange={[Function]}
429
+ onFocus={[Function]}
430
+ onKeyDown={[Function]}
431
+ onKeyUp={[Function]}
432
+ required={false}
433
+ style={
434
+ Object {
435
+ "border": "0px",
436
+ "clip": "rect(0px, 0px, 0px, 0px)",
437
+ "height": "1px",
438
+ "margin": "-1px",
439
+ "overflow": "hidden",
440
+ "padding": "0px",
441
+ "position": "absolute",
442
+ "whiteSpace": "nowrap",
443
+ "width": "1px",
444
+ }
445
+ }
446
+ type="checkbox"
431
447
  />
432
- </span>
433
- <span
434
- className="chakra-switch__label css-1y8kf23"
435
- onMouseDown={[Function]}
436
- onTouchStart={[Function]}
437
- >
438
- Test Label
439
- </span>
440
- </label>
448
+ <span
449
+ aria-hidden={true}
450
+ className="chakra-switch__track css-14qxnv8"
451
+ onMouseDown={[Function]}
452
+ onMouseEnter={[Function]}
453
+ onMouseLeave={[Function]}
454
+ onMouseUp={[Function]}
455
+ >
456
+ <span
457
+ className="chakra-switch__thumb css-0"
458
+ />
459
+ </span>
460
+ <span
461
+ className="chakra-switch__label css-1y8kf23"
462
+ onMouseDown={[Function]}
463
+ onTouchStart={[Function]}
464
+ >
465
+ Test Label
466
+ </span>
467
+ </label>
468
+ </div>
441
469
  </div>
442
470
  `;