@khanacademy/perseus 0.4.3 → 1.1.0

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 (71) hide show
  1. package/.eslintrc.js +6 -1
  2. package/CHANGELOG.md +45 -0
  3. package/dist/es/index.css +15 -8
  4. package/dist/es/index.js +1214 -1404
  5. package/dist/es/index.js.map +1 -1
  6. package/dist/index.css +15 -8
  7. package/dist/index.js +1217 -1411
  8. package/dist/index.js.map +1 -1
  9. package/dist/strings.js +0 -4
  10. package/package.json +9 -8
  11. package/src/components/number-input.jsx +2 -2
  12. package/src/components/simple-keypad-input.jsx +18 -21
  13. package/src/index.js +1 -1
  14. package/src/multi-items/__tests__/__snapshots__/multi-renderer_test.js.snap +426 -135
  15. package/src/multi-items/__tests__/multi-renderer_test.js +9 -9
  16. package/src/perseus-api.jsx +10 -36
  17. package/src/perseus-types.js +18 -145
  18. package/src/styles/constants.js +0 -2
  19. package/src/styles/perseus-renderer.less +8 -2
  20. package/src/styles/variables.less +0 -2
  21. package/src/styles/widgets/passage.less +9 -5
  22. package/src/types.js +18 -35
  23. package/src/util/answer-types.js +2 -3
  24. package/src/util/math.js +3 -10
  25. package/src/util.js +0 -6
  26. package/src/version.js +1 -1
  27. package/src/widgets/__stories__/numeric-input.stories.jsx +43 -2
  28. package/src/widgets/__testdata__/base-radio_testdata.js +22 -0
  29. package/src/widgets/__tests__/__snapshots__/definition_test.js.snap +4 -4
  30. package/src/widgets/__tests__/__snapshots__/group_test.jsx.snap +291 -130
  31. package/src/widgets/__tests__/__snapshots__/radio_test.jsx.snap +3293 -1415
  32. package/src/widgets/__tests__/group_test.jsx +4 -4
  33. package/src/widgets/__tests__/numeric-input_test.jsx +12 -8
  34. package/src/widgets/__tests__/passage_test.jsx +81 -0
  35. package/src/widgets/__tests__/radio/base-radio_test.jsx +291 -41
  36. package/src/widgets/__tests__/radio/choice-icon_test.jsx +67 -0
  37. package/src/widgets/__tests__/radio/choice_test.jsx +302 -0
  38. package/src/widgets/__tests__/radio/focus-ring_test.jsx +23 -0
  39. package/src/widgets/__tests__/radio/option-status_test.jsx +65 -0
  40. package/src/widgets/__tests__/radio_test.jsx +39 -15
  41. package/src/widgets/definition.jsx +1 -1
  42. package/src/widgets/group.jsx +84 -102
  43. package/src/widgets/input-number.jsx +6 -1
  44. package/src/widgets/numeric-input.jsx +87 -80
  45. package/src/widgets/passage/__tests__/passage-markdown_test.jsx +0 -9
  46. package/src/widgets/passage/get-line-height-for-node.js +4 -5
  47. package/src/widgets/passage/passage-markdown.jsx +176 -120
  48. package/src/widgets/passage.jsx +48 -46
  49. package/src/widgets/radio/__stories__/base-radio.stories.jsx +164 -17
  50. package/src/widgets/radio/__stories__/choice-icon.stories.jsx +202 -111
  51. package/src/widgets/radio/__stories__/choice-none-above.stories.jsx +21 -6
  52. package/src/widgets/radio/__stories__/choice.stories.jsx +138 -0
  53. package/src/widgets/radio/__stories__/focus-ring.stories.jsx +29 -23
  54. package/src/widgets/radio/__stories__/option-status.stories.jsx +93 -99
  55. package/src/widgets/radio/base-radio.jsx +485 -556
  56. package/src/widgets/radio/choice-a11y-text.js +62 -0
  57. package/src/widgets/radio/choice-icon/choice-icon.jsx +87 -0
  58. package/src/widgets/radio/choice-icon/cross-out-line.jsx +55 -0
  59. package/src/widgets/radio/choice-icon/library-choice-icon.jsx +214 -0
  60. package/src/widgets/radio/choice-icon/sat-choice-icon.jsx +120 -0
  61. package/src/widgets/radio/choice-icon/shared-styles.js +17 -0
  62. package/src/widgets/radio/choice-none-above.jsx +49 -40
  63. package/src/widgets/radio/choice.jsx +319 -347
  64. package/src/widgets/radio/choice.jsx.fixture.js +0 -18
  65. package/src/widgets/radio/focus-ring.jsx +29 -22
  66. package/src/widgets/radio/option-status.jsx +58 -36
  67. package/src/widgets/radio/widget.jsx +181 -136
  68. package/src/widgets/radio.jsx +16 -17
  69. package/src/widgets/radio/__stories__/cross-out-button.stories.jsx +0 -64
  70. package/src/widgets/radio/choice-icon.jsx +0 -469
  71. package/src/widgets/radio/cross-out-button.jsx +0 -134
package/src/widgets/__tests__/__snapshots__/group_test.jsx.snap CHANGED
@@ -128,6 +128,7 @@ exports[`group widget should snapshot: initial render 1`] = `
128
128
  Choose 1 answer:
129
129
  </legend>
130
130
  <div
131
+ aria-hidden="true"
131
132
  class="instructions instructions_125m8j1"
132
133
  >
133
134
  Choose 1 answer:
@@ -145,45 +146,77 @@ exports[`group widget should snapshot: initial render 1`] = `
145
146
  <div
146
147
  style="display: flex; flex-direction: row; width: 100%; opacity: 1;"
147
148
  >
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"
149
+ <div
150
+ class="perseus-sr-only"
156
151
  >
157
- <div
158
- style="display: flex; flex-direction: row; justify-content: center; align-content: center; padding-top: 8px; padding-bottom: 8px;"
152
+ <input
153
+ id="choice-5"
154
+ tabindex="-1"
155
+ type="radio"
156
+ />
157
+ <label
158
+ for="choice-5"
159
159
  >
160
- <span>
160
+ (Choice A)
161
+  
162
+ <span
163
+ class="mock-KatexProvider"
164
+ >
161
165
  <div
162
- class="iconWrapper_17y0hv9"
166
+ class="perseus-renderer perseus-renderer-responsive"
163
167
  >
164
- <span
165
- class="ring_en36io"
166
- style="border-color: transparent;"
168
+ <div
169
+ class="paragraph perseus-paragraph-centered"
170
+ data-perseus-paragraph-index="0"
167
171
  >
168
172
  <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);"
173
+ class="perseus-block-math"
172
174
  >
173
175
  <div
174
- class="perseus-sr-only"
176
+ class="perseus-block-math-inner"
177
+ style="overflow-x: auto; overflow-y: hidden; padding-top: 10px; padding-bottom: 10px; margin-top: -10px; margin-bottom: -10px;"
175
178
  >
176
- (Choice A)
177
- </div>
178
- <div
179
- aria-hidden="true"
180
- >
181
- A
179
+ <span
180
+ class="mock-TeX"
181
+ >
182
+ 45
183
+ </span>
182
184
  </div>
183
185
  </div>
184
- </span>
186
+ </div>
185
187
  </div>
186
188
  </span>
189
+ </label>
190
+ </div>
191
+ <button
192
+ aria-disabled="false"
193
+ aria-hidden="true"
194
+ aria-label=""
195
+ class="button_vr44p2-o_O-reset_152ygtm-o_O-link_13xlah4-o_O-inlineStyles_bc4egv description description_psmgei"
196
+ tabindex="0"
197
+ type="button"
198
+ >
199
+ <div
200
+ style="display: flex; flex-direction: row; justify-content: center; align-content: center; padding-top: 8px; padding-bottom: 8px;"
201
+ >
202
+ <div
203
+ class="iconWrapper_17y0hv9"
204
+ >
205
+ <span
206
+ class="ring_ya75gi"
207
+ data-test-id="focus-ring"
208
+ style="border-color: transparent; border-radius: 50%;"
209
+ >
210
+ <div
211
+ class="circle_1tys2th"
212
+ data-is-radio-icon="true"
213
+ data-test-id="choice-icon__library-choice-icon"
214
+ style="border-color: rgba(33,36,44,0.64); color: rgba(33, 36, 44, 0.64); border-radius: 24px;"
215
+ >
216
+ A
217
+ </div>
218
+ </span>
219
+ </div>
187
220
  <span
188
221
  style="padding-left: 12px; text-align: left; flex: 1; padding-top: 4px;"
189
222
  >
@@ -232,45 +265,77 @@ exports[`group widget should snapshot: initial render 1`] = `
232
265
  <div
233
266
  style="display: flex; flex-direction: row; width: 100%; opacity: 1;"
234
267
  >
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"
268
+ <div
269
+ class="perseus-sr-only"
243
270
  >
244
- <div
245
- style="display: flex; flex-direction: row; justify-content: center; align-content: center; padding-top: 8px; padding-bottom: 8px;"
271
+ <input
272
+ id="choice-6"
273
+ tabindex="-1"
274
+ type="radio"
275
+ />
276
+ <label
277
+ for="choice-6"
246
278
  >
247
- <span>
279
+ (Choice B)
280
+  
281
+ <span
282
+ class="mock-KatexProvider"
283
+ >
248
284
  <div
249
- class="iconWrapper_17y0hv9"
285
+ class="perseus-renderer perseus-renderer-responsive"
250
286
  >
251
- <span
252
- class="ring_en36io"
253
- style="border-color: transparent;"
287
+ <div
288
+ class="paragraph perseus-paragraph-centered"
289
+ data-perseus-paragraph-index="0"
254
290
  >
255
291
  <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);"
292
+ class="perseus-block-math"
259
293
  >
260
294
  <div
261
- class="perseus-sr-only"
262
- >
263
- (Choice B)
264
- </div>
265
- <div
266
- aria-hidden="true"
295
+ class="perseus-block-math-inner"
296
+ style="overflow-x: auto; overflow-y: hidden; padding-top: 10px; padding-bottom: 10px; margin-top: -10px; margin-bottom: -10px;"
267
297
  >
268
- B
298
+ <span
299
+ class="mock-TeX"
300
+ >
301
+ 42
302
+ </span>
269
303
  </div>
270
304
  </div>
271
- </span>
305
+ </div>
272
306
  </div>
273
307
  </span>
308
+ </label>
309
+ </div>
310
+ <button
311
+ aria-disabled="false"
312
+ aria-hidden="true"
313
+ aria-label=""
314
+ class="button_vr44p2-o_O-reset_152ygtm-o_O-link_13xlah4-o_O-inlineStyles_bc4egv description description_psmgei"
315
+ tabindex="0"
316
+ type="button"
317
+ >
318
+ <div
319
+ style="display: flex; flex-direction: row; justify-content: center; align-content: center; padding-top: 8px; padding-bottom: 8px;"
320
+ >
321
+ <div
322
+ class="iconWrapper_17y0hv9"
323
+ >
324
+ <span
325
+ class="ring_ya75gi"
326
+ data-test-id="focus-ring"
327
+ style="border-color: transparent; border-radius: 50%;"
328
+ >
329
+ <div
330
+ class="circle_1tys2th"
331
+ data-is-radio-icon="true"
332
+ data-test-id="choice-icon__library-choice-icon"
333
+ style="border-color: rgba(33,36,44,0.64); color: rgba(33, 36, 44, 0.64); border-radius: 24px;"
334
+ >
335
+ B
336
+ </div>
337
+ </span>
338
+ </div>
274
339
  <span
275
340
  style="padding-left: 12px; text-align: left; flex: 1; padding-top: 4px;"
276
341
  >
@@ -319,45 +384,77 @@ exports[`group widget should snapshot: initial render 1`] = `
319
384
  <div
320
385
  style="display: flex; flex-direction: row; width: 100%; opacity: 1;"
321
386
  >
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"
387
+ <div
388
+ class="perseus-sr-only"
330
389
  >
331
- <div
332
- style="display: flex; flex-direction: row; justify-content: center; align-content: center; padding-top: 8px; padding-bottom: 8px;"
390
+ <input
391
+ id="choice-7"
392
+ tabindex="-1"
393
+ type="radio"
394
+ />
395
+ <label
396
+ for="choice-7"
333
397
  >
334
- <span>
398
+ (Choice C)
399
+  
400
+ <span
401
+ class="mock-KatexProvider"
402
+ >
335
403
  <div
336
- class="iconWrapper_17y0hv9"
404
+ class="perseus-renderer perseus-renderer-responsive"
337
405
  >
338
- <span
339
- class="ring_en36io"
340
- style="border-color: transparent;"
406
+ <div
407
+ class="paragraph perseus-paragraph-centered"
408
+ data-perseus-paragraph-index="0"
341
409
  >
342
410
  <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);"
411
+ class="perseus-block-math"
346
412
  >
347
413
  <div
348
- class="perseus-sr-only"
414
+ class="perseus-block-math-inner"
415
+ style="overflow-x: auto; overflow-y: hidden; padding-top: 10px; padding-bottom: 10px; margin-top: -10px; margin-bottom: -10px;"
349
416
  >
350
- (Choice C)
351
- </div>
352
- <div
353
- aria-hidden="true"
354
- >
355
- C
417
+ <span
418
+ class="mock-TeX"
419
+ >
420
+ 30
421
+ </span>
356
422
  </div>
357
423
  </div>
358
- </span>
424
+ </div>
359
425
  </div>
360
426
  </span>
427
+ </label>
428
+ </div>
429
+ <button
430
+ aria-disabled="false"
431
+ aria-hidden="true"
432
+ aria-label=""
433
+ class="button_vr44p2-o_O-reset_152ygtm-o_O-link_13xlah4-o_O-inlineStyles_bc4egv description description_psmgei"
434
+ tabindex="0"
435
+ type="button"
436
+ >
437
+ <div
438
+ style="display: flex; flex-direction: row; justify-content: center; align-content: center; padding-top: 8px; padding-bottom: 8px;"
439
+ >
440
+ <div
441
+ class="iconWrapper_17y0hv9"
442
+ >
443
+ <span
444
+ class="ring_ya75gi"
445
+ data-test-id="focus-ring"
446
+ style="border-color: transparent; border-radius: 50%;"
447
+ >
448
+ <div
449
+ class="circle_1tys2th"
450
+ data-is-radio-icon="true"
451
+ data-test-id="choice-icon__library-choice-icon"
452
+ style="border-color: rgba(33,36,44,0.64); color: rgba(33, 36, 44, 0.64); border-radius: 24px;"
453
+ >
454
+ C
455
+ </div>
456
+ </span>
457
+ </div>
361
458
  <span
362
459
  style="padding-left: 12px; text-align: left; flex: 1; padding-top: 4px;"
363
460
  >
@@ -406,45 +503,77 @@ exports[`group widget should snapshot: initial render 1`] = `
406
503
  <div
407
504
  style="display: flex; flex-direction: row; width: 100%; opacity: 1;"
408
505
  >
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"
506
+ <div
507
+ class="perseus-sr-only"
417
508
  >
418
- <div
419
- style="display: flex; flex-direction: row; justify-content: center; align-content: center; padding-top: 8px; padding-bottom: 8px;"
509
+ <input
510
+ id="choice-8"
511
+ tabindex="-1"
512
+ type="radio"
513
+ />
514
+ <label
515
+ for="choice-8"
420
516
  >
421
- <span>
517
+ (Choice D)
518
+  
519
+ <span
520
+ class="mock-KatexProvider"
521
+ >
422
522
  <div
423
- class="iconWrapper_17y0hv9"
523
+ class="perseus-renderer perseus-renderer-responsive"
424
524
  >
425
- <span
426
- class="ring_en36io"
427
- style="border-color: transparent;"
525
+ <div
526
+ class="paragraph perseus-paragraph-centered"
527
+ data-perseus-paragraph-index="0"
428
528
  >
429
529
  <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);"
530
+ class="perseus-block-math"
433
531
  >
434
532
  <div
435
- class="perseus-sr-only"
436
- >
437
- (Choice D)
438
- </div>
439
- <div
440
- aria-hidden="true"
533
+ class="perseus-block-math-inner"
534
+ style="overflow-x: auto; overflow-y: hidden; padding-top: 10px; padding-bottom: 10px; margin-top: -10px; margin-bottom: -10px;"
441
535
  >
442
- D
536
+ <span
537
+ class="mock-TeX"
538
+ >
539
+ 18
540
+ </span>
443
541
  </div>
444
542
  </div>
445
- </span>
543
+ </div>
446
544
  </div>
447
545
  </span>
546
+ </label>
547
+ </div>
548
+ <button
549
+ aria-disabled="false"
550
+ aria-hidden="true"
551
+ aria-label=""
552
+ class="button_vr44p2-o_O-reset_152ygtm-o_O-link_13xlah4-o_O-inlineStyles_bc4egv description description_psmgei"
553
+ tabindex="0"
554
+ type="button"
555
+ >
556
+ <div
557
+ style="display: flex; flex-direction: row; justify-content: center; align-content: center; padding-top: 8px; padding-bottom: 8px;"
558
+ >
559
+ <div
560
+ class="iconWrapper_17y0hv9"
561
+ >
562
+ <span
563
+ class="ring_ya75gi"
564
+ data-test-id="focus-ring"
565
+ style="border-color: transparent; border-radius: 50%;"
566
+ >
567
+ <div
568
+ class="circle_1tys2th"
569
+ data-is-radio-icon="true"
570
+ data-test-id="choice-icon__library-choice-icon"
571
+ style="border-color: rgba(33,36,44,0.64); color: rgba(33, 36, 44, 0.64); border-radius: 24px;"
572
+ >
573
+ D
574
+ </div>
575
+ </span>
576
+ </div>
448
577
  <span
449
578
  style="padding-left: 12px; text-align: left; flex: 1; padding-top: 4px;"
450
579
  >
@@ -493,45 +622,77 @@ exports[`group widget should snapshot: initial render 1`] = `
493
622
  <div
494
623
  style="display: flex; flex-direction: row; width: 100%; opacity: 1;"
495
624
  >
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"
625
+ <div
626
+ class="perseus-sr-only"
504
627
  >
505
- <div
506
- style="display: flex; flex-direction: row; justify-content: center; align-content: center; padding-top: 8px; padding-bottom: 8px;"
628
+ <input
629
+ id="choice-9"
630
+ tabindex="-1"
631
+ type="radio"
632
+ />
633
+ <label
634
+ for="choice-9"
507
635
  >
508
- <span>
636
+ (Choice E)
637
+  
638
+ <span
639
+ class="mock-KatexProvider"
640
+ >
509
641
  <div
510
- class="iconWrapper_17y0hv9"
642
+ class="perseus-renderer perseus-renderer-responsive"
511
643
  >
512
- <span
513
- class="ring_en36io"
514
- style="border-color: transparent;"
644
+ <div
645
+ class="paragraph perseus-paragraph-centered"
646
+ data-perseus-paragraph-index="0"
515
647
  >
516
648
  <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);"
649
+ class="perseus-block-math"
520
650
  >
521
651
  <div
522
- class="perseus-sr-only"
523
- >
524
- (Choice E)
525
- </div>
526
- <div
527
- aria-hidden="true"
652
+ class="perseus-block-math-inner"
653
+ style="overflow-x: auto; overflow-y: hidden; padding-top: 10px; padding-bottom: 10px; margin-top: -10px; margin-bottom: -10px;"
528
654
  >
529
- E
655
+ <span
656
+ class="mock-TeX"
657
+ >
658
+ 15
659
+ </span>
530
660
  </div>
531
661
  </div>
532
- </span>
662
+ </div>
533
663
  </div>
534
664
  </span>
665
+ </label>
666
+ </div>
667
+ <button
668
+ aria-disabled="false"
669
+ aria-hidden="true"
670
+ aria-label=""
671
+ class="button_vr44p2-o_O-reset_152ygtm-o_O-link_13xlah4-o_O-inlineStyles_bc4egv description description_psmgei"
672
+ tabindex="0"
673
+ type="button"
674
+ >
675
+ <div
676
+ style="display: flex; flex-direction: row; justify-content: center; align-content: center; padding-top: 8px; padding-bottom: 8px;"
677
+ >
678
+ <div
679
+ class="iconWrapper_17y0hv9"
680
+ >
681
+ <span
682
+ class="ring_ya75gi"
683
+ data-test-id="focus-ring"
684
+ style="border-color: transparent; border-radius: 50%;"
685
+ >
686
+ <div
687
+ class="circle_1tys2th"
688
+ data-is-radio-icon="true"
689
+ data-test-id="choice-icon__library-choice-icon"
690
+ style="border-color: rgba(33,36,44,0.64); color: rgba(33, 36, 44, 0.64); border-radius: 24px;"
691
+ >
692
+ E
693
+ </div>
694
+ </span>
695
+ </div>
535
696
  <span
536
697
  style="padding-left: 12px; text-align: left; flex: 1; padding-top: 4px;"
537
698
  >