@khanacademy/perseus 0.4.2 → 1.0.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 (50) hide show
  1. package/.eslintrc.js +11 -0
  2. package/CHANGELOG.md +47 -0
  3. package/dist/es/index.js +1078 -1299
  4. package/dist/es/index.js.map +1 -1
  5. package/dist/index.js +1077 -1304
  6. package/dist/index.js.map +1 -1
  7. package/dist/strings.js +0 -4
  8. package/package.json +9 -8
  9. package/src/multi-items/__tests__/__snapshots__/multi-renderer_test.js.snap +110 -110
  10. package/src/perseus-api.jsx +10 -36
  11. package/src/perseus-types.js +0 -138
  12. package/src/styles/constants.js +0 -2
  13. package/src/styles/variables.less +0 -2
  14. package/src/types.js +18 -35
  15. package/src/util.js +0 -6
  16. package/src/version.js +1 -1
  17. package/src/widgets/__testdata__/base-radio_testdata.js +22 -0
  18. package/src/widgets/__tests__/__snapshots__/group_test.jsx.snap +110 -110
  19. package/src/widgets/__tests__/__snapshots__/radio_test.jsx.snap +1136 -1160
  20. package/src/widgets/__tests__/radio/base-radio_test.jsx +243 -41
  21. package/src/widgets/__tests__/radio/choice-icon_test.jsx +67 -0
  22. package/src/widgets/__tests__/radio/choice_test.jsx +201 -0
  23. package/src/widgets/__tests__/radio/focus-ring_test.jsx +23 -0
  24. package/src/widgets/__tests__/radio/option-status_test.jsx +65 -0
  25. package/src/widgets/passage/__tests__/passage-markdown_test.jsx +0 -9
  26. package/src/widgets/passage/get-line-height-for-node.js +4 -5
  27. package/src/widgets/passage/passage-markdown.jsx +176 -120
  28. package/src/widgets/passage.jsx +48 -46
  29. package/src/widgets/radio/__stories__/base-radio.stories.jsx +164 -17
  30. package/src/widgets/radio/__stories__/choice-icon.stories.jsx +202 -111
  31. package/src/widgets/radio/__stories__/choice-none-above.stories.jsx +21 -6
  32. package/src/widgets/radio/__stories__/choice.stories.jsx +138 -0
  33. package/src/widgets/radio/__stories__/focus-ring.stories.jsx +29 -23
  34. package/src/widgets/radio/__stories__/option-status.stories.jsx +93 -99
  35. package/src/widgets/radio/base-radio.jsx +483 -556
  36. package/src/widgets/radio/choice-icon/choice-icon.jsx +155 -0
  37. package/src/widgets/radio/choice-icon/cross-out-line.jsx +55 -0
  38. package/src/widgets/radio/choice-icon/library-choice-icon.jsx +219 -0
  39. package/src/widgets/radio/choice-icon/sat-choice-icon.jsx +129 -0
  40. package/src/widgets/radio/choice-icon/shared-styles.js +17 -0
  41. package/src/widgets/radio/choice-none-above.jsx +49 -40
  42. package/src/widgets/radio/choice.jsx +282 -353
  43. package/src/widgets/radio/choice.jsx.fixture.js +0 -18
  44. package/src/widgets/radio/focus-ring.jsx +29 -22
  45. package/src/widgets/radio/option-status.jsx +58 -36
  46. package/src/widgets/radio/widget.jsx +181 -136
  47. package/src/widgets/radio.jsx +16 -17
  48. package/src/widgets/radio/__stories__/cross-out-button.stories.jsx +0 -64
  49. package/src/widgets/radio/choice-icon.jsx +0 -469
  50. package/src/widgets/radio/cross-out-button.jsx +0 -134
package/src/util.js CHANGED
@@ -92,14 +92,8 @@ function inputPathsEqual(
92
92
  );
93
93
  }
94
94
 
95
- // Keep `rWidgetRule` in sync with `WIDGET_RE`
96
- // in content_internal/perseus_traversal.py
97
- // sync-start:widget-id-regex 1271666319 services/content-editing/perseus/translation/content_traversal.go
98
- // sync-start:widget-id-regex 680240484 services/static/javascript/perseus-merged-editor-package/editor.jsx
99
- // sync-start:widget-id-regex 1400368396 content_internal/perseus_traversal.py
100
95
  const rWidgetRule: RegExp = /^\[\[\u2603 (([a-z-]+) ([0-9]+))\]\]/;
101
96
  const rTypeFromWidgetId: RegExp = /^([a-z-]+) ([0-9]+)$/;
102
- // sync-end:widget-id-regex
103
97
 
104
98
  const rWidgetParts: RegExp = new RegExp(rWidgetRule.source + "$");
105
99
  const snowman = "\u2603";
package/src/version.js CHANGED
@@ -1,7 +1,7 @@
1
1
  // @flow
2
2
  export default {
3
3
  apiVersion: {
4
- major: 11,
4
+ major: 12,
5
5
  minor: 0,
6
6
  },
7
7
  itemDataVersion: {
package/src/widgets/__testdata__/base-radio_testdata.js ADDED
@@ -0,0 +1,22 @@
1
+ // @flow
2
+ import type {ChoiceType} from "../radio/base-radio.jsx";
3
+
4
+ export function generateChoice(options: $Partial<ChoiceType>): ChoiceType {
5
+ const base = {
6
+ checked: false,
7
+ crossedOut: false,
8
+ content: "",
9
+ rationale: "",
10
+ hasRationale: false,
11
+ showRationale: false,
12
+ showCorrectness: false,
13
+ correct: false,
14
+ isNoneOfTheAbove: false,
15
+ highlighted: false,
16
+ previouslyAnswered: false,
17
+ revealNoneOfTheAbove: false,
18
+ disabled: false,
19
+ };
20
+
21
+ return {...base, ...options};
22
+ }
package/src/widgets/__tests__/__snapshots__/group_test.jsx.snap CHANGED
@@ -157,33 +157,33 @@ exports[`group widget should snapshot: initial render 1`] = `
157
157
  <div
158
158
  style="display: flex; flex-direction: row; justify-content: center; align-content: center; padding-top: 8px; padding-bottom: 8px;"
159
159
  >
160
- <span>
161
- <div
162
- class="iconWrapper_17y0hv9"
160
+ <div
161
+ class="iconWrapper_17y0hv9"
162
+ >
163
+ <span
164
+ class="ring_ya75gi"
165
+ data-test-id="focus-ring"
166
+ style="border-color: transparent; border-radius: 50%;"
163
167
  >
164
- <span
165
- class="ring_en36io"
166
- style="border-color: transparent;"
168
+ <div
169
+ class="circle_1tys2th"
170
+ data-is-radio-icon="true"
171
+ data-test-id="choice-icon__library-choice-icon"
172
+ style="border-color: rgba(33,36,44,0.64); color: rgba(33, 36, 44, 0.64); border-radius: 24px;"
167
173
  >
168
174
  <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);"
175
+ class="perseus-sr-only"
172
176
  >
173
- <div
174
- class="perseus-sr-only"
175
- >
176
- (Choice A)
177
- </div>
178
- <div
179
- aria-hidden="true"
180
- >
181
- A
182
- </div>
177
+ (Choice A)
183
178
  </div>
184
- </span>
185
- </div>
186
- </span>
179
+ <div
180
+ aria-hidden="true"
181
+ >
182
+ A
183
+ </div>
184
+ </div>
185
+ </span>
186
+ </div>
187
187
  <span
188
188
  style="padding-left: 12px; text-align: left; flex: 1; padding-top: 4px;"
189
189
  >
@@ -244,33 +244,33 @@ exports[`group widget should snapshot: initial render 1`] = `
244
244
  <div
245
245
  style="display: flex; flex-direction: row; justify-content: center; align-content: center; padding-top: 8px; padding-bottom: 8px;"
246
246
  >
247
- <span>
248
- <div
249
- class="iconWrapper_17y0hv9"
247
+ <div
248
+ class="iconWrapper_17y0hv9"
249
+ >
250
+ <span
251
+ class="ring_ya75gi"
252
+ data-test-id="focus-ring"
253
+ style="border-color: transparent; border-radius: 50%;"
250
254
  >
251
- <span
252
- class="ring_en36io"
253
- style="border-color: transparent;"
255
+ <div
256
+ class="circle_1tys2th"
257
+ data-is-radio-icon="true"
258
+ data-test-id="choice-icon__library-choice-icon"
259
+ style="border-color: rgba(33,36,44,0.64); color: rgba(33, 36, 44, 0.64); border-radius: 24px;"
254
260
  >
255
261
  <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);"
262
+ class="perseus-sr-only"
259
263
  >
260
- <div
261
- class="perseus-sr-only"
262
- >
263
- (Choice B)
264
- </div>
265
- <div
266
- aria-hidden="true"
267
- >
268
- B
269
- </div>
264
+ (Choice B)
270
265
  </div>
271
- </span>
272
- </div>
273
- </span>
266
+ <div
267
+ aria-hidden="true"
268
+ >
269
+ B
270
+ </div>
271
+ </div>
272
+ </span>
273
+ </div>
274
274
  <span
275
275
  style="padding-left: 12px; text-align: left; flex: 1; padding-top: 4px;"
276
276
  >
@@ -331,33 +331,33 @@ exports[`group widget should snapshot: initial render 1`] = `
331
331
  <div
332
332
  style="display: flex; flex-direction: row; justify-content: center; align-content: center; padding-top: 8px; padding-bottom: 8px;"
333
333
  >
334
- <span>
335
- <div
336
- class="iconWrapper_17y0hv9"
334
+ <div
335
+ class="iconWrapper_17y0hv9"
336
+ >
337
+ <span
338
+ class="ring_ya75gi"
339
+ data-test-id="focus-ring"
340
+ style="border-color: transparent; border-radius: 50%;"
337
341
  >
338
- <span
339
- class="ring_en36io"
340
- style="border-color: transparent;"
342
+ <div
343
+ class="circle_1tys2th"
344
+ data-is-radio-icon="true"
345
+ data-test-id="choice-icon__library-choice-icon"
346
+ style="border-color: rgba(33,36,44,0.64); color: rgba(33, 36, 44, 0.64); border-radius: 24px;"
341
347
  >
342
348
  <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);"
349
+ class="perseus-sr-only"
346
350
  >
347
- <div
348
- class="perseus-sr-only"
349
- >
350
- (Choice C)
351
- </div>
352
- <div
353
- aria-hidden="true"
354
- >
355
- C
356
- </div>
351
+ (Choice C)
357
352
  </div>
358
- </span>
359
- </div>
360
- </span>
353
+ <div
354
+ aria-hidden="true"
355
+ >
356
+ C
357
+ </div>
358
+ </div>
359
+ </span>
360
+ </div>
361
361
  <span
362
362
  style="padding-left: 12px; text-align: left; flex: 1; padding-top: 4px;"
363
363
  >
@@ -418,33 +418,33 @@ exports[`group widget should snapshot: initial render 1`] = `
418
418
  <div
419
419
  style="display: flex; flex-direction: row; justify-content: center; align-content: center; padding-top: 8px; padding-bottom: 8px;"
420
420
  >
421
- <span>
422
- <div
423
- class="iconWrapper_17y0hv9"
421
+ <div
422
+ class="iconWrapper_17y0hv9"
423
+ >
424
+ <span
425
+ class="ring_ya75gi"
426
+ data-test-id="focus-ring"
427
+ style="border-color: transparent; border-radius: 50%;"
424
428
  >
425
- <span
426
- class="ring_en36io"
427
- style="border-color: transparent;"
429
+ <div
430
+ class="circle_1tys2th"
431
+ data-is-radio-icon="true"
432
+ data-test-id="choice-icon__library-choice-icon"
433
+ style="border-color: rgba(33,36,44,0.64); color: rgba(33, 36, 44, 0.64); border-radius: 24px;"
428
434
  >
429
435
  <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);"
436
+ class="perseus-sr-only"
433
437
  >
434
- <div
435
- class="perseus-sr-only"
436
- >
437
- (Choice D)
438
- </div>
439
- <div
440
- aria-hidden="true"
441
- >
442
- D
443
- </div>
438
+ (Choice D)
444
439
  </div>
445
- </span>
446
- </div>
447
- </span>
440
+ <div
441
+ aria-hidden="true"
442
+ >
443
+ D
444
+ </div>
445
+ </div>
446
+ </span>
447
+ </div>
448
448
  <span
449
449
  style="padding-left: 12px; text-align: left; flex: 1; padding-top: 4px;"
450
450
  >
@@ -505,33 +505,33 @@ exports[`group widget should snapshot: initial render 1`] = `
505
505
  <div
506
506
  style="display: flex; flex-direction: row; justify-content: center; align-content: center; padding-top: 8px; padding-bottom: 8px;"
507
507
  >
508
- <span>
509
- <div
510
- class="iconWrapper_17y0hv9"
508
+ <div
509
+ class="iconWrapper_17y0hv9"
510
+ >
511
+ <span
512
+ class="ring_ya75gi"
513
+ data-test-id="focus-ring"
514
+ style="border-color: transparent; border-radius: 50%;"
511
515
  >
512
- <span
513
- class="ring_en36io"
514
- style="border-color: transparent;"
516
+ <div
517
+ class="circle_1tys2th"
518
+ data-is-radio-icon="true"
519
+ data-test-id="choice-icon__library-choice-icon"
520
+ style="border-color: rgba(33,36,44,0.64); color: rgba(33, 36, 44, 0.64); border-radius: 24px;"
515
521
  >
516
522
  <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);"
523
+ class="perseus-sr-only"
520
524
  >
521
- <div
522
- class="perseus-sr-only"
523
- >
524
- (Choice E)
525
- </div>
526
- <div
527
- aria-hidden="true"
528
- >
529
- E
530
- </div>
525
+ (Choice E)
531
526
  </div>
532
- </span>
533
- </div>
534
- </span>
527
+ <div
528
+ aria-hidden="true"
529
+ >
530
+ E
531
+ </div>
532
+ </div>
533
+ </span>
534
+ </div>
535
535
  <span
536
536
  style="padding-left: 12px; text-align: left; flex: 1; padding-top: 4px;"
537
537
  >