@khanacademy/perseus 0.3.4 → 0.4.1

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 (52) hide show
  1. package/CHANGELOG.md +30 -0
  2. package/dist/es/index.css +436 -1
  3. package/dist/es/index.js +8232 -5591
  4. package/dist/es/index.js.map +1 -1
  5. package/dist/index.css +436 -1
  6. package/dist/index.js +17876 -15237
  7. package/dist/index.js.map +1 -1
  8. package/dist/strings.js +0 -1
  9. package/package.json +9 -8
  10. package/src/__tests__/__snapshots__/item-renderer_test.jsx.snap +2 -3
  11. package/src/__tests__/__snapshots__/server-item-renderer_test.jsx.snap +2 -3
  12. package/src/__tests__/renderer-api_test.jsx +3 -27
  13. package/src/components/__stories__/svg-image.stories.jsx +11 -0
  14. package/src/components/fixed-to-responsive.jsx +1 -0
  15. package/src/components/input-with-examples.jsx +3 -1
  16. package/src/components/svg-image.jsx +10 -7
  17. package/src/components/text-input.jsx +65 -16
  18. package/src/definition-context.js +59 -0
  19. package/src/index.js +5 -1
  20. package/src/multi-items/__tests__/__snapshots__/multi-renderer_test.js.snap +438 -523
  21. package/src/multi-items/__tests__/multi-renderer_test.js +9 -9
  22. package/src/renderer.jsx +13 -6
  23. package/src/types.js +3 -4
  24. package/src/widgets/__stories__/definition.stories.jsx +44 -0
  25. package/src/widgets/__tests__/__snapshots__/categorizer_test.jsx.snap +76 -8
  26. package/src/widgets/__tests__/__snapshots__/graded-group-set-jipt_test.jsx.snap +6 -9
  27. package/src/widgets/__tests__/__snapshots__/graded-group-set_test.jsx.snap +2 -3
  28. package/src/widgets/__tests__/__snapshots__/grapher_test.jsx.snap +19 -2
  29. package/src/widgets/__tests__/__snapshots__/group_test.jsx.snap +338 -390
  30. package/src/widgets/__tests__/__snapshots__/image_test.jsx.snap +38 -4
  31. package/src/widgets/__tests__/__snapshots__/interactive-graph_test.jsx.snap +114 -12
  32. package/src/widgets/__tests__/__snapshots__/matrix_test.jsx.snap +120 -48
  33. package/src/widgets/__tests__/__snapshots__/numeric-input_test.jsx.snap +8 -12
  34. package/src/widgets/__tests__/__snapshots__/radio_test.jsx.snap +3615 -4517
  35. package/src/widgets/__tests__/graded-group-set-jipt_test.jsx +0 -1
  36. package/src/widgets/__tests__/grapher.cypress.jsx +236 -176
  37. package/src/widgets/__tests__/group_test.jsx +4 -4
  38. package/src/widgets/__tests__/interactive-graph.cypress.jsx +371 -291
  39. package/src/widgets/__tests__/radio_test.jsx +73 -114
  40. package/src/widgets/definition.jsx +34 -29
  41. package/src/widgets/numeric-input.jsx +2 -15
  42. package/src/widgets/radio/base-radio.jsx +1 -1
  43. package/src/widgets/radio/choice-icon.jsx +11 -10
  44. package/src/widgets/radio/choice.jsx +164 -396
  45. package/src/widgets/radio/cross-out-button.jsx +3 -5
  46. package/src/widgets/radio/option-status.jsx +4 -5
  47. package/src/widgets/radio/__stories__/cross-out-menu.stories.jsx +0 -59
  48. package/src/widgets/radio/__stories__/cross-out-tooltip.stories.jsx +0 -59
  49. package/src/widgets/radio/__stories__/toggleable-radio-button.stories.jsx +0 -28
  50. package/src/widgets/radio/cross-out-menu-wrapper.jsx +0 -492
  51. package/src/widgets/radio/cross-out-tooltip.jsx +0 -129
  52. package/src/widgets/radio/toggleable-radio-button.jsx +0 -133
package/src/widgets/__tests__/__snapshots__/group_test.jsx.snap CHANGED
@@ -32,8 +32,25 @@ exports[`group widget should snapshot: initial render 1`] = `
32
32
  style="padding-bottom: 112.14999999999999%;"
33
33
  />
34
34
  <span
35
- style="background: url(/images/spinner.gif) no-repeat; background-position: center; width: 100%; height: 100%; position: absolute; min-width: 20px;"
36
- />
35
+ style="top: 0px; left: 0px; width: 100%; height: 100%; position: absolute; min-width: 20px; display: flex; justify-content: center; align-content: center;"
36
+ >
37
+ <div
38
+ class="default_xu2jcg-o_O-spinnerContainer_agrn11"
39
+ >
40
+ <svg
41
+ height="48"
42
+ viewBox="0 0 48 48"
43
+ width="48"
44
+ xmlns="http://www.w3.org/2000/svg"
45
+ >
46
+ <path
47
+ class="loadingSpinner_1dvgeb3-o_O-inlineStyles_1kzk0y9"
48
+ d="M44.19 23.455a1.91 1.91 0 1 1 3.801 0h.003c.004.18.006.363.006.545 0 13.255-10.745 24-24 24S0 37.255 0 24 10.745 0 24 0c.182 0 .364.002.545.006V.01a1.91 1.91 0 1 1 0 3.801v.015A20.564 20.564 0 0 0 24 3.818C12.854 3.818 3.818 12.854 3.818 24c0 11.146 9.036 20.182 20.182 20.182 11.146 0 20.182-9.036 20.182-20.182 0-.182-.003-.364-.007-.545h.015z"
49
+ fill-rule="nonzero"
50
+ />
51
+ </svg>
52
+ </div>
53
+ </span>
37
54
  </div>
38
55
  </div>
39
56
  </div>
@@ -117,524 +134,440 @@ exports[`group widget should snapshot: initial render 1`] = `
117
134
  </div>
118
135
  <ul
119
136
  class="perseus-widget-radio perseus-rendered-radio radio_zdxht7-o_O-responsiveRadioContainer_1ybwre2"
137
+ style="list-style: none;"
120
138
  >
121
139
  <li
122
140
  class="aboveScratchpad_1x0jb4k-o_O-item_dswvvi-o_O-responsiveItem_85oyrd perseus-radio-option"
123
141
  >
124
- <div>
142
+ <div
143
+ style="flex-direction: column;"
144
+ >
125
145
  <div
126
- class="wrapper_e7hn5"
146
+ style="display: flex; flex-direction: row; width: 100%; opacity: 1;"
127
147
  >
128
- <div
129
- class="slidingContent_1b7d4h4"
148
+ <button
149
+ aria-checked="false"
150
+ aria-disabled="false"
151
+ aria-label="Select Choice A"
152
+ class="button_vr44p2-o_O-reset_152ygtm-o_O-link_13xlah4-o_O-inlineStyles_bc4egv description description_psmgei"
153
+ role="checkbox"
154
+ tabindex="0"
155
+ type="button"
130
156
  >
131
157
  <div
132
- class="content_1rmtpuj"
158
+ style="display: flex; flex-direction: row; justify-content: center; align-content: center; padding-top: 8px; padding-bottom: 8px;"
133
159
  >
134
- <label
135
- class="checkbox-label label_1ekb3l0-o_O-responsiveLabel_19cgmwo"
136
- for="perseus_radio_9-choice-0"
137
- style="opacity: 1;"
138
- >
160
+ <span>
139
161
  <div
140
- class="description description_psmgei"
162
+ class="iconWrapper_17y0hv9"
141
163
  >
142
- <div
143
- class="checkbox-and-option intermediateResponsiveCheckbox_tqugjn"
164
+ <span
165
+ class="ring_en36io"
166
+ style="border-color: transparent;"
144
167
  >
145
- <span
146
- class="checkbox perseusInteractive_18kcvhx-o_O-choiceIconWrapper_1htut3f"
168
+ <div
169
+ class="libraryCircle_1ytyy5d"
170
+ data-is-radio-icon="true"
171
+ style="border-color: rgba(33,36,44,0.64); color: rgba(33, 36, 44, 0.64);"
147
172
  >
148
- <input
149
- class="perseusSrOnly_19bpjuy"
150
- id="perseus_radio_9-choice-0"
151
- name="perseus_radio_9"
152
- type="radio"
153
- />
154
173
  <div
155
- class="iconWrapper_17y0hv9"
174
+ class="perseus-sr-only"
156
175
  >
157
- <span
158
- class="ring_en36io"
159
- style="border-color: transparent;"
160
- >
161
- <div
162
- class="libraryCircle_1ytyy5d"
163
- data-is-radio-icon="true"
164
- style="border-color: #888d93; color: rgb(136, 141, 147);"
165
- >
166
- <div
167
- class="perseus-sr-only"
168
- >
169
- (Choice A)
170
- </div>
171
- <div
172
- aria-hidden="true"
173
- >
174
- A
175
- </div>
176
- </div>
177
- </span>
176
+ (Choice A)
178
177
  </div>
179
- </span>
180
- <span
181
- class="perseus-radio-option-content perseus-interactive"
182
- style="cursor: default;"
178
+ <div
179
+ aria-hidden="true"
180
+ >
181
+ A
182
+ </div>
183
+ </div>
184
+ </span>
185
+ </div>
186
+ </span>
187
+ <span
188
+ style="padding-left: 12px; text-align: left; flex: 1; padding-top: 4px;"
189
+ >
190
+ <div />
191
+ <div>
192
+ <span
193
+ class="mock-KatexProvider"
194
+ >
195
+ <div
196
+ class="perseus-renderer perseus-renderer-responsive"
183
197
  >
184
198
  <div
185
- class="optionStatusContainer_uhlm2"
186
- />
187
- <div>
188
- <span
189
- class="mock-KatexProvider"
199
+ class="paragraph perseus-paragraph-centered"
200
+ data-perseus-paragraph-index="0"
201
+ >
202
+ <div
203
+ class="perseus-block-math"
190
204
  >
191
205
  <div
192
- class="perseus-renderer perseus-renderer-responsive"
206
+ class="perseus-block-math-inner"
207
+ style="overflow-x: auto; overflow-y: hidden; padding-top: 10px; padding-bottom: 10px; margin-top: -10px; margin-bottom: -10px;"
193
208
  >
194
- <div
195
- class="paragraph perseus-paragraph-centered"
196
- data-perseus-paragraph-index="0"
209
+ <span
210
+ class="mock-TeX"
197
211
  >
198
- <div
199
- class="perseus-block-math"
200
- >
201
- <div
202
- class="perseus-block-math-inner"
203
- style="overflow-x: auto; overflow-y: hidden; padding-top: 10px; padding-bottom: 10px; margin-top: -10px; margin-bottom: -10px;"
204
- >
205
- <span
206
- class="mock-TeX"
207
- >
208
- 45
209
- </span>
210
- </div>
211
- </div>
212
- </div>
212
+ 45
213
+ </span>
213
214
  </div>
214
- </span>
215
+ </div>
215
216
  </div>
216
- </span>
217
- </div>
217
+ </div>
218
+ </span>
218
219
  </div>
219
- </label>
220
+ </span>
220
221
  </div>
221
- </div>
222
+ </button>
222
223
  </div>
223
224
  </div>
224
225
  </li>
225
226
  <li
226
227
  class="aboveScratchpad_1x0jb4k-o_O-item_dswvvi-o_O-responsiveItem_85oyrd perseus-radio-option"
227
228
  >
228
- <div>
229
+ <div
230
+ style="flex-direction: column;"
231
+ >
229
232
  <div
230
- class="wrapper_e7hn5"
233
+ style="display: flex; flex-direction: row; width: 100%; opacity: 1;"
231
234
  >
232
- <div
233
- class="slidingContent_1b7d4h4"
235
+ <button
236
+ aria-checked="false"
237
+ aria-disabled="false"
238
+ aria-label="Select Choice B"
239
+ class="button_vr44p2-o_O-reset_152ygtm-o_O-link_13xlah4-o_O-inlineStyles_bc4egv description description_psmgei"
240
+ role="checkbox"
241
+ tabindex="0"
242
+ type="button"
234
243
  >
235
244
  <div
236
- class="content_1rmtpuj"
245
+ style="display: flex; flex-direction: row; justify-content: center; align-content: center; padding-top: 8px; padding-bottom: 8px;"
237
246
  >
238
- <label
239
- class="checkbox-label label_1ekb3l0-o_O-responsiveLabel_19cgmwo"
240
- for="perseus_radio_9-choice-1"
241
- style="opacity: 1;"
242
- >
247
+ <span>
243
248
  <div
244
- class="description description_psmgei"
249
+ class="iconWrapper_17y0hv9"
245
250
  >
246
- <div
247
- class="checkbox-and-option intermediateResponsiveCheckbox_tqugjn"
251
+ <span
252
+ class="ring_en36io"
253
+ style="border-color: transparent;"
248
254
  >
249
- <span
250
- class="checkbox perseusInteractive_18kcvhx-o_O-choiceIconWrapper_1htut3f"
255
+ <div
256
+ class="libraryCircle_1ytyy5d"
257
+ data-is-radio-icon="true"
258
+ style="border-color: rgba(33,36,44,0.64); color: rgba(33, 36, 44, 0.64);"
251
259
  >
252
- <input
253
- class="perseusSrOnly_19bpjuy"
254
- id="perseus_radio_9-choice-1"
255
- name="perseus_radio_9"
256
- type="radio"
257
- />
258
260
  <div
259
- class="iconWrapper_17y0hv9"
261
+ class="perseus-sr-only"
260
262
  >
261
- <span
262
- class="ring_en36io"
263
- style="border-color: transparent;"
264
- >
265
- <div
266
- class="libraryCircle_1ytyy5d"
267
- data-is-radio-icon="true"
268
- style="border-color: #888d93; color: rgb(136, 141, 147);"
269
- >
270
- <div
271
- class="perseus-sr-only"
272
- >
273
- (Choice B)
274
- </div>
275
- <div
276
- aria-hidden="true"
277
- >
278
- B
279
- </div>
280
- </div>
281
- </span>
263
+ (Choice B)
282
264
  </div>
283
- </span>
284
- <span
285
- class="perseus-radio-option-content perseus-interactive"
286
- style="cursor: default;"
265
+ <div
266
+ aria-hidden="true"
267
+ >
268
+ B
269
+ </div>
270
+ </div>
271
+ </span>
272
+ </div>
273
+ </span>
274
+ <span
275
+ style="padding-left: 12px; text-align: left; flex: 1; padding-top: 4px;"
276
+ >
277
+ <div />
278
+ <div>
279
+ <span
280
+ class="mock-KatexProvider"
281
+ >
282
+ <div
283
+ class="perseus-renderer perseus-renderer-responsive"
287
284
  >
288
285
  <div
289
- class="optionStatusContainer_uhlm2"
290
- />
291
- <div>
292
- <span
293
- class="mock-KatexProvider"
286
+ class="paragraph perseus-paragraph-centered"
287
+ data-perseus-paragraph-index="0"
288
+ >
289
+ <div
290
+ class="perseus-block-math"
294
291
  >
295
292
  <div
296
- class="perseus-renderer perseus-renderer-responsive"
293
+ class="perseus-block-math-inner"
294
+ style="overflow-x: auto; overflow-y: hidden; padding-top: 10px; padding-bottom: 10px; margin-top: -10px; margin-bottom: -10px;"
297
295
  >
298
- <div
299
- class="paragraph perseus-paragraph-centered"
300
- data-perseus-paragraph-index="0"
296
+ <span
297
+ class="mock-TeX"
301
298
  >
302
- <div
303
- class="perseus-block-math"
304
- >
305
- <div
306
- class="perseus-block-math-inner"
307
- style="overflow-x: auto; overflow-y: hidden; padding-top: 10px; padding-bottom: 10px; margin-top: -10px; margin-bottom: -10px;"
308
- >
309
- <span
310
- class="mock-TeX"
311
- >
312
- 42
313
- </span>
314
- </div>
315
- </div>
316
- </div>
299
+ 42
300
+ </span>
317
301
  </div>
318
- </span>
302
+ </div>
319
303
  </div>
320
- </span>
321
- </div>
304
+ </div>
305
+ </span>
322
306
  </div>
323
- </label>
307
+ </span>
324
308
  </div>
325
- </div>
309
+ </button>
326
310
  </div>
327
311
  </div>
328
312
  </li>
329
313
  <li
330
314
  class="aboveScratchpad_1x0jb4k-o_O-item_dswvvi-o_O-responsiveItem_85oyrd perseus-radio-option"
331
315
  >
332
- <div>
316
+ <div
317
+ style="flex-direction: column;"
318
+ >
333
319
  <div
334
- class="wrapper_e7hn5"
320
+ style="display: flex; flex-direction: row; width: 100%; opacity: 1;"
335
321
  >
336
- <div
337
- class="slidingContent_1b7d4h4"
322
+ <button
323
+ aria-checked="false"
324
+ aria-disabled="false"
325
+ aria-label="Select Choice C"
326
+ class="button_vr44p2-o_O-reset_152ygtm-o_O-link_13xlah4-o_O-inlineStyles_bc4egv description description_psmgei"
327
+ role="checkbox"
328
+ tabindex="0"
329
+ type="button"
338
330
  >
339
331
  <div
340
- class="content_1rmtpuj"
332
+ style="display: flex; flex-direction: row; justify-content: center; align-content: center; padding-top: 8px; padding-bottom: 8px;"
341
333
  >
342
- <label
343
- class="checkbox-label label_1ekb3l0-o_O-responsiveLabel_19cgmwo"
344
- for="perseus_radio_9-choice-2"
345
- style="opacity: 1;"
346
- >
334
+ <span>
347
335
  <div
348
- class="description description_psmgei"
336
+ class="iconWrapper_17y0hv9"
349
337
  >
350
- <div
351
- class="checkbox-and-option intermediateResponsiveCheckbox_tqugjn"
338
+ <span
339
+ class="ring_en36io"
340
+ style="border-color: transparent;"
352
341
  >
353
- <span
354
- class="checkbox perseusInteractive_18kcvhx-o_O-choiceIconWrapper_1htut3f"
342
+ <div
343
+ class="libraryCircle_1ytyy5d"
344
+ data-is-radio-icon="true"
345
+ style="border-color: rgba(33,36,44,0.64); color: rgba(33, 36, 44, 0.64);"
355
346
  >
356
- <input
357
- class="perseusSrOnly_19bpjuy"
358
- id="perseus_radio_9-choice-2"
359
- name="perseus_radio_9"
360
- type="radio"
361
- />
362
347
  <div
363
- class="iconWrapper_17y0hv9"
348
+ class="perseus-sr-only"
364
349
  >
365
- <span
366
- class="ring_en36io"
367
- style="border-color: transparent;"
368
- >
369
- <div
370
- class="libraryCircle_1ytyy5d"
371
- data-is-radio-icon="true"
372
- style="border-color: #888d93; color: rgb(136, 141, 147);"
373
- >
374
- <div
375
- class="perseus-sr-only"
376
- >
377
- (Choice C)
378
- </div>
379
- <div
380
- aria-hidden="true"
381
- >
382
- C
383
- </div>
384
- </div>
385
- </span>
350
+ (Choice C)
386
351
  </div>
387
- </span>
388
- <span
389
- class="perseus-radio-option-content perseus-interactive"
390
- style="cursor: default;"
352
+ <div
353
+ aria-hidden="true"
354
+ >
355
+ C
356
+ </div>
357
+ </div>
358
+ </span>
359
+ </div>
360
+ </span>
361
+ <span
362
+ style="padding-left: 12px; text-align: left; flex: 1; padding-top: 4px;"
363
+ >
364
+ <div />
365
+ <div>
366
+ <span
367
+ class="mock-KatexProvider"
368
+ >
369
+ <div
370
+ class="perseus-renderer perseus-renderer-responsive"
391
371
  >
392
372
  <div
393
- class="optionStatusContainer_uhlm2"
394
- />
395
- <div>
396
- <span
397
- class="mock-KatexProvider"
373
+ class="paragraph perseus-paragraph-centered"
374
+ data-perseus-paragraph-index="0"
375
+ >
376
+ <div
377
+ class="perseus-block-math"
398
378
  >
399
379
  <div
400
- class="perseus-renderer perseus-renderer-responsive"
380
+ class="perseus-block-math-inner"
381
+ style="overflow-x: auto; overflow-y: hidden; padding-top: 10px; padding-bottom: 10px; margin-top: -10px; margin-bottom: -10px;"
401
382
  >
402
- <div
403
- class="paragraph perseus-paragraph-centered"
404
- data-perseus-paragraph-index="0"
383
+ <span
384
+ class="mock-TeX"
405
385
  >
406
- <div
407
- class="perseus-block-math"
408
- >
409
- <div
410
- class="perseus-block-math-inner"
411
- style="overflow-x: auto; overflow-y: hidden; padding-top: 10px; padding-bottom: 10px; margin-top: -10px; margin-bottom: -10px;"
412
- >
413
- <span
414
- class="mock-TeX"
415
- >
416
- 30
417
- </span>
418
- </div>
419
- </div>
420
- </div>
386
+ 30
387
+ </span>
421
388
  </div>
422
- </span>
389
+ </div>
423
390
  </div>
424
- </span>
425
- </div>
391
+ </div>
392
+ </span>
426
393
  </div>
427
- </label>
394
+ </span>
428
395
  </div>
429
- </div>
396
+ </button>
430
397
  </div>
431
398
  </div>
432
399
  </li>
433
400
  <li
434
401
  class="aboveScratchpad_1x0jb4k-o_O-item_dswvvi-o_O-responsiveItem_85oyrd perseus-radio-option"
435
402
  >
436
- <div>
403
+ <div
404
+ style="flex-direction: column;"
405
+ >
437
406
  <div
438
- class="wrapper_e7hn5"
407
+ style="display: flex; flex-direction: row; width: 100%; opacity: 1;"
439
408
  >
440
- <div
441
- class="slidingContent_1b7d4h4"
409
+ <button
410
+ aria-checked="false"
411
+ aria-disabled="false"
412
+ aria-label="Select Choice D"
413
+ class="button_vr44p2-o_O-reset_152ygtm-o_O-link_13xlah4-o_O-inlineStyles_bc4egv description description_psmgei"
414
+ role="checkbox"
415
+ tabindex="0"
416
+ type="button"
442
417
  >
443
418
  <div
444
- class="content_1rmtpuj"
419
+ style="display: flex; flex-direction: row; justify-content: center; align-content: center; padding-top: 8px; padding-bottom: 8px;"
445
420
  >
446
- <label
447
- class="checkbox-label label_1ekb3l0-o_O-responsiveLabel_19cgmwo"
448
- for="perseus_radio_9-choice-3"
449
- style="opacity: 1;"
450
- >
421
+ <span>
451
422
  <div
452
- class="description description_psmgei"
423
+ class="iconWrapper_17y0hv9"
453
424
  >
454
- <div
455
- class="checkbox-and-option intermediateResponsiveCheckbox_tqugjn"
425
+ <span
426
+ class="ring_en36io"
427
+ style="border-color: transparent;"
456
428
  >
457
- <span
458
- class="checkbox perseusInteractive_18kcvhx-o_O-choiceIconWrapper_1htut3f"
429
+ <div
430
+ class="libraryCircle_1ytyy5d"
431
+ data-is-radio-icon="true"
432
+ style="border-color: rgba(33,36,44,0.64); color: rgba(33, 36, 44, 0.64);"
459
433
  >
460
- <input
461
- class="perseusSrOnly_19bpjuy"
462
- id="perseus_radio_9-choice-3"
463
- name="perseus_radio_9"
464
- type="radio"
465
- />
466
434
  <div
467
- class="iconWrapper_17y0hv9"
435
+ class="perseus-sr-only"
468
436
  >
469
- <span
470
- class="ring_en36io"
471
- style="border-color: transparent;"
472
- >
473
- <div
474
- class="libraryCircle_1ytyy5d"
475
- data-is-radio-icon="true"
476
- style="border-color: #888d93; color: rgb(136, 141, 147);"
477
- >
478
- <div
479
- class="perseus-sr-only"
480
- >
481
- (Choice D)
482
- </div>
483
- <div
484
- aria-hidden="true"
485
- >
486
- D
487
- </div>
488
- </div>
489
- </span>
437
+ (Choice D)
490
438
  </div>
491
- </span>
492
- <span
493
- class="perseus-radio-option-content perseus-interactive"
494
- style="cursor: default;"
439
+ <div
440
+ aria-hidden="true"
441
+ >
442
+ D
443
+ </div>
444
+ </div>
445
+ </span>
446
+ </div>
447
+ </span>
448
+ <span
449
+ style="padding-left: 12px; text-align: left; flex: 1; padding-top: 4px;"
450
+ >
451
+ <div />
452
+ <div>
453
+ <span
454
+ class="mock-KatexProvider"
455
+ >
456
+ <div
457
+ class="perseus-renderer perseus-renderer-responsive"
495
458
  >
496
459
  <div
497
- class="optionStatusContainer_uhlm2"
498
- />
499
- <div>
500
- <span
501
- class="mock-KatexProvider"
460
+ class="paragraph perseus-paragraph-centered"
461
+ data-perseus-paragraph-index="0"
462
+ >
463
+ <div
464
+ class="perseus-block-math"
502
465
  >
503
466
  <div
504
- class="perseus-renderer perseus-renderer-responsive"
467
+ class="perseus-block-math-inner"
468
+ style="overflow-x: auto; overflow-y: hidden; padding-top: 10px; padding-bottom: 10px; margin-top: -10px; margin-bottom: -10px;"
505
469
  >
506
- <div
507
- class="paragraph perseus-paragraph-centered"
508
- data-perseus-paragraph-index="0"
470
+ <span
471
+ class="mock-TeX"
509
472
  >
510
- <div
511
- class="perseus-block-math"
512
- >
513
- <div
514
- class="perseus-block-math-inner"
515
- style="overflow-x: auto; overflow-y: hidden; padding-top: 10px; padding-bottom: 10px; margin-top: -10px; margin-bottom: -10px;"
516
- >
517
- <span
518
- class="mock-TeX"
519
- >
520
- 18
521
- </span>
522
- </div>
523
- </div>
524
- </div>
473
+ 18
474
+ </span>
525
475
  </div>
526
- </span>
476
+ </div>
527
477
  </div>
528
- </span>
529
- </div>
478
+ </div>
479
+ </span>
530
480
  </div>
531
- </label>
481
+ </span>
532
482
  </div>
533
- </div>
483
+ </button>
534
484
  </div>
535
485
  </div>
536
486
  </li>
537
487
  <li
538
488
  class="aboveScratchpad_1x0jb4k-o_O-item_dswvvi-o_O-responsiveItem_85oyrd perseus-radio-option"
539
489
  >
540
- <div>
490
+ <div
491
+ style="flex-direction: column;"
492
+ >
541
493
  <div
542
- class="wrapper_e7hn5"
494
+ style="display: flex; flex-direction: row; width: 100%; opacity: 1;"
543
495
  >
544
- <div
545
- class="slidingContent_1b7d4h4"
496
+ <button
497
+ aria-checked="false"
498
+ aria-disabled="false"
499
+ aria-label="Select Choice E"
500
+ class="button_vr44p2-o_O-reset_152ygtm-o_O-link_13xlah4-o_O-inlineStyles_bc4egv description description_psmgei"
501
+ role="checkbox"
502
+ tabindex="0"
503
+ type="button"
546
504
  >
547
505
  <div
548
- class="content_1rmtpuj"
506
+ style="display: flex; flex-direction: row; justify-content: center; align-content: center; padding-top: 8px; padding-bottom: 8px;"
549
507
  >
550
- <label
551
- class="checkbox-label label_1ekb3l0-o_O-responsiveLabel_19cgmwo"
552
- for="perseus_radio_9-choice-4"
553
- style="opacity: 1;"
554
- >
508
+ <span>
555
509
  <div
556
- class="description description_psmgei"
510
+ class="iconWrapper_17y0hv9"
557
511
  >
558
- <div
559
- class="checkbox-and-option intermediateResponsiveCheckbox_tqugjn"
512
+ <span
513
+ class="ring_en36io"
514
+ style="border-color: transparent;"
560
515
  >
561
- <span
562
- class="checkbox perseusInteractive_18kcvhx-o_O-choiceIconWrapper_1htut3f"
516
+ <div
517
+ class="libraryCircle_1ytyy5d"
518
+ data-is-radio-icon="true"
519
+ style="border-color: rgba(33,36,44,0.64); color: rgba(33, 36, 44, 0.64);"
563
520
  >
564
- <input
565
- class="perseusSrOnly_19bpjuy"
566
- id="perseus_radio_9-choice-4"
567
- name="perseus_radio_9"
568
- type="radio"
569
- />
570
521
  <div
571
- class="iconWrapper_17y0hv9"
522
+ class="perseus-sr-only"
572
523
  >
573
- <span
574
- class="ring_en36io"
575
- style="border-color: transparent;"
576
- >
577
- <div
578
- class="libraryCircle_1ytyy5d"
579
- data-is-radio-icon="true"
580
- style="border-color: #888d93; color: rgb(136, 141, 147);"
581
- >
582
- <div
583
- class="perseus-sr-only"
584
- >
585
- (Choice E)
586
- </div>
587
- <div
588
- aria-hidden="true"
589
- >
590
- E
591
- </div>
592
- </div>
593
- </span>
524
+ (Choice E)
594
525
  </div>
595
- </span>
596
- <span
597
- class="perseus-radio-option-content perseus-interactive"
598
- style="cursor: default;"
526
+ <div
527
+ aria-hidden="true"
528
+ >
529
+ E
530
+ </div>
531
+ </div>
532
+ </span>
533
+ </div>
534
+ </span>
535
+ <span
536
+ style="padding-left: 12px; text-align: left; flex: 1; padding-top: 4px;"
537
+ >
538
+ <div />
539
+ <div>
540
+ <span
541
+ class="mock-KatexProvider"
542
+ >
543
+ <div
544
+ class="perseus-renderer perseus-renderer-responsive"
599
545
  >
600
546
  <div
601
- class="optionStatusContainer_uhlm2"
602
- />
603
- <div>
604
- <span
605
- class="mock-KatexProvider"
547
+ class="paragraph perseus-paragraph-centered"
548
+ data-perseus-paragraph-index="0"
549
+ >
550
+ <div
551
+ class="perseus-block-math"
606
552
  >
607
553
  <div
608
- class="perseus-renderer perseus-renderer-responsive"
554
+ class="perseus-block-math-inner"
555
+ style="overflow-x: auto; overflow-y: hidden; padding-top: 10px; padding-bottom: 10px; margin-top: -10px; margin-bottom: -10px;"
609
556
  >
610
- <div
611
- class="paragraph perseus-paragraph-centered"
612
- data-perseus-paragraph-index="0"
557
+ <span
558
+ class="mock-TeX"
613
559
  >
614
- <div
615
- class="perseus-block-math"
616
- >
617
- <div
618
- class="perseus-block-math-inner"
619
- style="overflow-x: auto; overflow-y: hidden; padding-top: 10px; padding-bottom: 10px; margin-top: -10px; margin-bottom: -10px;"
620
- >
621
- <span
622
- class="mock-TeX"
623
- >
624
- 15
625
- </span>
626
- </div>
627
- </div>
628
- </div>
560
+ 15
561
+ </span>
629
562
  </div>
630
- </span>
563
+ </div>
631
564
  </div>
632
- </span>
633
- </div>
565
+ </div>
566
+ </span>
634
567
  </div>
635
- </label>
568
+ </span>
636
569
  </div>
637
- </div>
570
+ </button>
638
571
  </div>
639
572
  </div>
640
573
  </li>
@@ -703,13 +636,12 @@ exports[`group widget should snapshot: initial render 1`] = `
703
636
  <span>
704
637
  <div>
705
638
  <input
706
- aria-describedby="input-with-examples-bnVtZXJpYy1pbnB1dCAx"
707
639
  aria-label="value rounded to the nearest ten"
708
640
  autocapitalize="off"
709
641
  autocomplete="off"
710
642
  autocorrect="off"
711
- class="perseus-input perseus-interactive perseus-input-size-normal"
712
- spellcheck="false"
643
+ class="input_1t4b01j-o_O-LabelMedium_1rew30o-o_O-default_1r2dwp3"
644
+ id="input-with-examples-bnVtZXJpYy1pbnB1dCAx"
713
645
  type="text"
714
646
  value=""
715
647
  />
@@ -914,13 +846,12 @@ exports[`group widget should snapshot: initial render 1`] = `
914
846
  <span>
915
847
  <div>
916
848
  <input
917
- aria-describedby="input-with-examples-bnVtZXJpYy1pbnB1dCAy"
918
849
  aria-label="value rounded to the nearest hundred"
919
850
  autocapitalize="off"
920
851
  autocomplete="off"
921
852
  autocorrect="off"
922
- class="perseus-input perseus-interactive perseus-input-size-normal"
923
- spellcheck="false"
853
+ class="input_1t4b01j-o_O-LabelMedium_1rew30o-o_O-default_1r2dwp3"
854
+ id="input-with-examples-bnVtZXJpYy1pbnB1dCAy"
924
855
  type="text"
925
856
  value=""
926
857
  />
@@ -1107,8 +1038,25 @@ exports[`group widget should snapshot: initial render 1`] = `
1107
1038
  style="padding-bottom: 21.05%;"
1108
1039
  />
1109
1040
  <span
1110
- style="background: url(/images/spinner.gif) no-repeat; background-position: center; width: 100%; height: 100%; position: absolute; min-width: 20px;"
1111
- />
1041
+ style="top: 0px; left: 0px; width: 100%; height: 100%; position: absolute; min-width: 20px; display: flex; justify-content: center; align-content: center;"
1042
+ >
1043
+ <div
1044
+ class="default_xu2jcg-o_O-spinnerContainer_agrn11"
1045
+ >
1046
+ <svg
1047
+ height="48"
1048
+ viewBox="0 0 48 48"
1049
+ width="48"
1050
+ xmlns="http://www.w3.org/2000/svg"
1051
+ >
1052
+ <path
1053
+ class="loadingSpinner_1dvgeb3-o_O-inlineStyles_1kzk0y9"
1054
+ d="M44.19 23.455a1.91 1.91 0 1 1 3.801 0h.003c.004.18.006.363.006.545 0 13.255-10.745 24-24 24S0 37.255 0 24 10.745 0 24 0c.182 0 .364.002.545.006V.01a1.91 1.91 0 1 1 0 3.801v.015A20.564 20.564 0 0 0 24 3.818C12.854 3.818 3.818 12.854 3.818 24c0 11.146 9.036 20.182 20.182 20.182 11.146 0 20.182-9.036 20.182-20.182 0-.182-.003-.364-.007-.545h.015z"
1055
+ fill-rule="nonzero"
1056
+ />
1057
+ </svg>
1058
+ </div>
1059
+ </span>
1112
1060
  </div>
1113
1061
  <span
1114
1062
  class="perseus-sr-only"