@khanacademy/perseus 0.4.3 → 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.
- package/.eslintrc.js +6 -1
- package/CHANGELOG.md +34 -0
- package/dist/es/index.js +1078 -1299
- package/dist/es/index.js.map +1 -1
- package/dist/index.js +1077 -1304
- package/dist/index.js.map +1 -1
- package/dist/strings.js +0 -4
- package/package.json +9 -8
- package/src/multi-items/__tests__/__snapshots__/multi-renderer_test.js.snap +110 -110
- package/src/perseus-api.jsx +10 -36
- package/src/perseus-types.js +0 -138
- package/src/styles/constants.js +0 -2
- package/src/styles/variables.less +0 -2
- package/src/types.js +18 -35
- package/src/util.js +0 -6
- package/src/version.js +1 -1
- package/src/widgets/__testdata__/base-radio_testdata.js +22 -0
- package/src/widgets/__tests__/__snapshots__/group_test.jsx.snap +110 -110
- package/src/widgets/__tests__/__snapshots__/radio_test.jsx.snap +1136 -1160
- package/src/widgets/__tests__/radio/base-radio_test.jsx +243 -41
- package/src/widgets/__tests__/radio/choice-icon_test.jsx +67 -0
- package/src/widgets/__tests__/radio/choice_test.jsx +201 -0
- package/src/widgets/__tests__/radio/focus-ring_test.jsx +23 -0
- package/src/widgets/__tests__/radio/option-status_test.jsx +65 -0
- package/src/widgets/passage/__tests__/passage-markdown_test.jsx +0 -9
- package/src/widgets/passage/get-line-height-for-node.js +4 -5
- package/src/widgets/passage/passage-markdown.jsx +176 -120
- package/src/widgets/passage.jsx +48 -46
- package/src/widgets/radio/__stories__/base-radio.stories.jsx +164 -17
- package/src/widgets/radio/__stories__/choice-icon.stories.jsx +202 -111
- package/src/widgets/radio/__stories__/choice-none-above.stories.jsx +21 -6
- package/src/widgets/radio/__stories__/choice.stories.jsx +138 -0
- package/src/widgets/radio/__stories__/focus-ring.stories.jsx +29 -23
- package/src/widgets/radio/__stories__/option-status.stories.jsx +93 -99
- package/src/widgets/radio/base-radio.jsx +483 -556
- package/src/widgets/radio/choice-icon/choice-icon.jsx +155 -0
- package/src/widgets/radio/choice-icon/cross-out-line.jsx +55 -0
- package/src/widgets/radio/choice-icon/library-choice-icon.jsx +219 -0
- package/src/widgets/radio/choice-icon/sat-choice-icon.jsx +129 -0
- package/src/widgets/radio/choice-icon/shared-styles.js +17 -0
- package/src/widgets/radio/choice-none-above.jsx +49 -40
- package/src/widgets/radio/choice.jsx +282 -353
- package/src/widgets/radio/choice.jsx.fixture.js +0 -18
- package/src/widgets/radio/focus-ring.jsx +29 -22
- package/src/widgets/radio/option-status.jsx +58 -36
- package/src/widgets/radio/widget.jsx +181 -136
- package/src/widgets/radio.jsx +16 -17
- package/src/widgets/radio/__stories__/cross-out-button.stories.jsx +0 -64
- package/src/widgets/radio/choice-icon.jsx +0 -469
- package/src/widgets/radio/cross-out-button.jsx +0 -134
package/dist/strings.js
CHANGED
|
@@ -36,8 +36,6 @@ module.exports = [
|
|
|
36
36
|
i18n._("an integer, like $6$", {}),
|
|
37
37
|
i18n._("Beginning of reading passage footnotes.", {}),
|
|
38
38
|
i18n._("Beginning of reading passage.", {}),
|
|
39
|
-
i18n._("Bring back", {}),
|
|
40
|
-
i18n._("Bring back Choice %(letter)s", {}),
|
|
41
39
|
i18n._("Check", {}),
|
|
42
40
|
i18n._("Check your significant figures.", {}),
|
|
43
41
|
i18n._("Check your units.", {}),
|
|
@@ -54,8 +52,6 @@ module.exports = [
|
|
|
54
52
|
i18n._("Correct (but you crossed it out)", {}),
|
|
55
53
|
i18n._("Correct (selected)", {}),
|
|
56
54
|
i18n._("Correct!", {}),
|
|
57
|
-
i18n._("Cross out", {}),
|
|
58
|
-
i18n._("Cross out Choice %(letter)s", {}),
|
|
59
55
|
// I18N: As in the command, "Dilate the polygon"
|
|
60
56
|
i18n._("Dilate", {}),
|
|
61
57
|
i18n._("dilation", {}),
|
package/package.json
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
"description": "Core Perseus API (includes renderers and widgets)",
|
|
4
4
|
"author": "Khan Academy",
|
|
5
5
|
"license": "MIT",
|
|
6
|
-
"version": "0.
|
|
6
|
+
"version": "1.0.0",
|
|
7
7
|
"publishConfig": {
|
|
8
8
|
"access": "public"
|
|
9
9
|
},
|
|
@@ -21,12 +21,12 @@
|
|
|
21
21
|
"test": "bash -c 'yarn --silent --cwd \"../..\" test ${@:0} $($([[ ${@: -1} = -* ]] || [[ ${@: -1} = bash ]]) && echo $PWD)'"
|
|
22
22
|
},
|
|
23
23
|
"dependencies": {
|
|
24
|
-
"@khanacademy/kas": "^0.2.
|
|
25
|
-
"@khanacademy/kmath": "^0.0.
|
|
26
|
-
"@khanacademy/math-input": "^0.6.
|
|
27
|
-
"@khanacademy/perseus-linter": "^0.2.
|
|
28
|
-
"@khanacademy/pure-markdown": "^0.1.
|
|
29
|
-
"@khanacademy/simple-markdown": "^0.8.
|
|
24
|
+
"@khanacademy/kas": "^0.2.7",
|
|
25
|
+
"@khanacademy/kmath": "^0.0.8",
|
|
26
|
+
"@khanacademy/math-input": "^0.6.3",
|
|
27
|
+
"@khanacademy/perseus-linter": "^0.2.3",
|
|
28
|
+
"@khanacademy/pure-markdown": "^0.1.3",
|
|
29
|
+
"@khanacademy/simple-markdown": "^0.8.6",
|
|
30
30
|
"mathquill": "git+https://git@github.com/Khan/mathquill.git#a9ae54e057c5c1acc8244a5627acbff29901d992"
|
|
31
31
|
},
|
|
32
32
|
"devDependencies": {
|
|
@@ -54,8 +54,9 @@
|
|
|
54
54
|
"eslint-plugin-import": "^2.26.0",
|
|
55
55
|
"intersection-observer": "^0.12.0",
|
|
56
56
|
"jquery": "^2.1.1",
|
|
57
|
+
"katex": "^0.11.1",
|
|
57
58
|
"lodash.debounce": "^4.0.8",
|
|
58
|
-
"perseus-build-settings": "^0.0.
|
|
59
|
+
"perseus-build-settings": "^0.0.5",
|
|
59
60
|
"prop-types": "^15.6.1",
|
|
60
61
|
"react": "16.14.0",
|
|
61
62
|
"react-dom": "16.14.0",
|
|
@@ -152,33 +152,33 @@ exports[`multi-item renderer should snapshot: initial render 1`] = `
|
|
|
152
152
|
<div
|
|
153
153
|
style="display: flex; flex-direction: row; justify-content: center; align-content: center; padding-top: 8px; padding-bottom: 8px;"
|
|
154
154
|
>
|
|
155
|
-
<
|
|
156
|
-
|
|
157
|
-
|
|
155
|
+
<div
|
|
156
|
+
class="iconWrapper_17y0hv9"
|
|
157
|
+
>
|
|
158
|
+
<span
|
|
159
|
+
class="ring_ya75gi"
|
|
160
|
+
data-test-id="focus-ring"
|
|
161
|
+
style="border-color: transparent; border-radius: 50%;"
|
|
158
162
|
>
|
|
159
|
-
<
|
|
160
|
-
class="
|
|
161
|
-
|
|
163
|
+
<div
|
|
164
|
+
class="circle_1tys2th"
|
|
165
|
+
data-is-radio-icon="true"
|
|
166
|
+
data-test-id="choice-icon__library-choice-icon"
|
|
167
|
+
style="border-color: rgba(33,36,44,0.64); color: rgba(33, 36, 44, 0.64); border-radius: 24px;"
|
|
162
168
|
>
|
|
163
169
|
<div
|
|
164
|
-
class="
|
|
165
|
-
data-is-radio-icon="true"
|
|
166
|
-
style="border-color: rgba(33,36,44,0.64); color: rgba(33, 36, 44, 0.64);"
|
|
170
|
+
class="perseus-sr-only"
|
|
167
171
|
>
|
|
168
|
-
|
|
169
|
-
class="perseus-sr-only"
|
|
170
|
-
>
|
|
171
|
-
(Choice A)
|
|
172
|
-
</div>
|
|
173
|
-
<div
|
|
174
|
-
aria-hidden="true"
|
|
175
|
-
>
|
|
176
|
-
A
|
|
177
|
-
</div>
|
|
172
|
+
(Choice A)
|
|
178
173
|
</div>
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
174
|
+
<div
|
|
175
|
+
aria-hidden="true"
|
|
176
|
+
>
|
|
177
|
+
A
|
|
178
|
+
</div>
|
|
179
|
+
</div>
|
|
180
|
+
</span>
|
|
181
|
+
</div>
|
|
182
182
|
<span
|
|
183
183
|
style="padding-left: 12px; text-align: left; flex: 1; padding-top: 4px;"
|
|
184
184
|
>
|
|
@@ -265,33 +265,33 @@ exports[`multi-item renderer should snapshot: initial render 1`] = `
|
|
|
265
265
|
<div
|
|
266
266
|
style="display: flex; flex-direction: row; justify-content: center; align-content: center; padding-top: 8px; padding-bottom: 8px;"
|
|
267
267
|
>
|
|
268
|
-
<
|
|
269
|
-
|
|
270
|
-
|
|
268
|
+
<div
|
|
269
|
+
class="iconWrapper_17y0hv9"
|
|
270
|
+
>
|
|
271
|
+
<span
|
|
272
|
+
class="ring_ya75gi"
|
|
273
|
+
data-test-id="focus-ring"
|
|
274
|
+
style="border-color: transparent; border-radius: 50%;"
|
|
271
275
|
>
|
|
272
|
-
<
|
|
273
|
-
class="
|
|
274
|
-
|
|
276
|
+
<div
|
|
277
|
+
class="circle_1tys2th"
|
|
278
|
+
data-is-radio-icon="true"
|
|
279
|
+
data-test-id="choice-icon__library-choice-icon"
|
|
280
|
+
style="border-color: rgba(33,36,44,0.64); color: rgba(33, 36, 44, 0.64); border-radius: 24px;"
|
|
275
281
|
>
|
|
276
282
|
<div
|
|
277
|
-
class="
|
|
278
|
-
data-is-radio-icon="true"
|
|
279
|
-
style="border-color: rgba(33,36,44,0.64); color: rgba(33, 36, 44, 0.64);"
|
|
283
|
+
class="perseus-sr-only"
|
|
280
284
|
>
|
|
281
|
-
|
|
282
|
-
class="perseus-sr-only"
|
|
283
|
-
>
|
|
284
|
-
(Choice B)
|
|
285
|
-
</div>
|
|
286
|
-
<div
|
|
287
|
-
aria-hidden="true"
|
|
288
|
-
>
|
|
289
|
-
B
|
|
290
|
-
</div>
|
|
285
|
+
(Choice B)
|
|
291
286
|
</div>
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
287
|
+
<div
|
|
288
|
+
aria-hidden="true"
|
|
289
|
+
>
|
|
290
|
+
B
|
|
291
|
+
</div>
|
|
292
|
+
</div>
|
|
293
|
+
</span>
|
|
294
|
+
</div>
|
|
295
295
|
<span
|
|
296
296
|
style="padding-left: 12px; text-align: left; flex: 1; padding-top: 4px;"
|
|
297
297
|
>
|
|
@@ -378,33 +378,33 @@ exports[`multi-item renderer should snapshot: initial render 1`] = `
|
|
|
378
378
|
<div
|
|
379
379
|
style="display: flex; flex-direction: row; justify-content: center; align-content: center; padding-top: 8px; padding-bottom: 8px;"
|
|
380
380
|
>
|
|
381
|
-
<
|
|
382
|
-
|
|
383
|
-
|
|
381
|
+
<div
|
|
382
|
+
class="iconWrapper_17y0hv9"
|
|
383
|
+
>
|
|
384
|
+
<span
|
|
385
|
+
class="ring_ya75gi"
|
|
386
|
+
data-test-id="focus-ring"
|
|
387
|
+
style="border-color: transparent; border-radius: 50%;"
|
|
384
388
|
>
|
|
385
|
-
<
|
|
386
|
-
class="
|
|
387
|
-
|
|
389
|
+
<div
|
|
390
|
+
class="circle_1tys2th"
|
|
391
|
+
data-is-radio-icon="true"
|
|
392
|
+
data-test-id="choice-icon__library-choice-icon"
|
|
393
|
+
style="border-color: rgba(33,36,44,0.64); color: rgba(33, 36, 44, 0.64); border-radius: 24px;"
|
|
388
394
|
>
|
|
389
395
|
<div
|
|
390
|
-
class="
|
|
391
|
-
data-is-radio-icon="true"
|
|
392
|
-
style="border-color: rgba(33,36,44,0.64); color: rgba(33, 36, 44, 0.64);"
|
|
396
|
+
class="perseus-sr-only"
|
|
393
397
|
>
|
|
394
|
-
|
|
395
|
-
class="perseus-sr-only"
|
|
396
|
-
>
|
|
397
|
-
(Choice C)
|
|
398
|
-
</div>
|
|
399
|
-
<div
|
|
400
|
-
aria-hidden="true"
|
|
401
|
-
>
|
|
402
|
-
C
|
|
403
|
-
</div>
|
|
398
|
+
(Choice C)
|
|
404
399
|
</div>
|
|
405
|
-
|
|
406
|
-
|
|
407
|
-
|
|
400
|
+
<div
|
|
401
|
+
aria-hidden="true"
|
|
402
|
+
>
|
|
403
|
+
C
|
|
404
|
+
</div>
|
|
405
|
+
</div>
|
|
406
|
+
</span>
|
|
407
|
+
</div>
|
|
408
408
|
<span
|
|
409
409
|
style="padding-left: 12px; text-align: left; flex: 1; padding-top: 4px;"
|
|
410
410
|
>
|
|
@@ -491,33 +491,33 @@ exports[`multi-item renderer should snapshot: initial render 1`] = `
|
|
|
491
491
|
<div
|
|
492
492
|
style="display: flex; flex-direction: row; justify-content: center; align-content: center; padding-top: 8px; padding-bottom: 8px;"
|
|
493
493
|
>
|
|
494
|
-
<
|
|
495
|
-
|
|
496
|
-
|
|
494
|
+
<div
|
|
495
|
+
class="iconWrapper_17y0hv9"
|
|
496
|
+
>
|
|
497
|
+
<span
|
|
498
|
+
class="ring_ya75gi"
|
|
499
|
+
data-test-id="focus-ring"
|
|
500
|
+
style="border-color: transparent; border-radius: 50%;"
|
|
497
501
|
>
|
|
498
|
-
<
|
|
499
|
-
class="
|
|
500
|
-
|
|
502
|
+
<div
|
|
503
|
+
class="circle_1tys2th"
|
|
504
|
+
data-is-radio-icon="true"
|
|
505
|
+
data-test-id="choice-icon__library-choice-icon"
|
|
506
|
+
style="border-color: rgba(33,36,44,0.64); color: rgba(33, 36, 44, 0.64); border-radius: 24px;"
|
|
501
507
|
>
|
|
502
508
|
<div
|
|
503
|
-
class="
|
|
504
|
-
data-is-radio-icon="true"
|
|
505
|
-
style="border-color: rgba(33,36,44,0.64); color: rgba(33, 36, 44, 0.64);"
|
|
509
|
+
class="perseus-sr-only"
|
|
506
510
|
>
|
|
507
|
-
|
|
508
|
-
class="perseus-sr-only"
|
|
509
|
-
>
|
|
510
|
-
(Choice D)
|
|
511
|
-
</div>
|
|
512
|
-
<div
|
|
513
|
-
aria-hidden="true"
|
|
514
|
-
>
|
|
515
|
-
D
|
|
516
|
-
</div>
|
|
511
|
+
(Choice D)
|
|
517
512
|
</div>
|
|
518
|
-
|
|
519
|
-
|
|
520
|
-
|
|
513
|
+
<div
|
|
514
|
+
aria-hidden="true"
|
|
515
|
+
>
|
|
516
|
+
D
|
|
517
|
+
</div>
|
|
518
|
+
</div>
|
|
519
|
+
</span>
|
|
520
|
+
</div>
|
|
521
521
|
<span
|
|
522
522
|
style="padding-left: 12px; text-align: left; flex: 1; padding-top: 4px;"
|
|
523
523
|
>
|
|
@@ -604,33 +604,33 @@ exports[`multi-item renderer should snapshot: initial render 1`] = `
|
|
|
604
604
|
<div
|
|
605
605
|
style="display: flex; flex-direction: row; justify-content: center; align-content: center; padding-top: 8px; padding-bottom: 8px;"
|
|
606
606
|
>
|
|
607
|
-
<
|
|
608
|
-
|
|
609
|
-
|
|
607
|
+
<div
|
|
608
|
+
class="iconWrapper_17y0hv9"
|
|
609
|
+
>
|
|
610
|
+
<span
|
|
611
|
+
class="ring_ya75gi"
|
|
612
|
+
data-test-id="focus-ring"
|
|
613
|
+
style="border-color: transparent; border-radius: 50%;"
|
|
610
614
|
>
|
|
611
|
-
<
|
|
612
|
-
class="
|
|
613
|
-
|
|
615
|
+
<div
|
|
616
|
+
class="circle_1tys2th"
|
|
617
|
+
data-is-radio-icon="true"
|
|
618
|
+
data-test-id="choice-icon__library-choice-icon"
|
|
619
|
+
style="border-color: rgba(33,36,44,0.64); color: rgba(33, 36, 44, 0.64); border-radius: 24px;"
|
|
614
620
|
>
|
|
615
621
|
<div
|
|
616
|
-
class="
|
|
617
|
-
data-is-radio-icon="true"
|
|
618
|
-
style="border-color: rgba(33,36,44,0.64); color: rgba(33, 36, 44, 0.64);"
|
|
622
|
+
class="perseus-sr-only"
|
|
619
623
|
>
|
|
620
|
-
|
|
621
|
-
class="perseus-sr-only"
|
|
622
|
-
>
|
|
623
|
-
(Choice E)
|
|
624
|
-
</div>
|
|
625
|
-
<div
|
|
626
|
-
aria-hidden="true"
|
|
627
|
-
>
|
|
628
|
-
E
|
|
629
|
-
</div>
|
|
624
|
+
(Choice E)
|
|
630
625
|
</div>
|
|
631
|
-
|
|
632
|
-
|
|
633
|
-
|
|
626
|
+
<div
|
|
627
|
+
aria-hidden="true"
|
|
628
|
+
>
|
|
629
|
+
E
|
|
630
|
+
</div>
|
|
631
|
+
</div>
|
|
632
|
+
</span>
|
|
633
|
+
</div>
|
|
634
634
|
<span
|
|
635
635
|
style="padding-left: 12px; text-align: left; flex: 1; padding-top: 4px;"
|
|
636
636
|
>
|
package/src/perseus-api.jsx
CHANGED
|
@@ -123,38 +123,9 @@ export const ApiOptions = {
|
|
|
123
123
|
// values. For now, though, you must either specify all fields
|
|
124
124
|
// of `styling`, or omit the `styling` option entirely.
|
|
125
125
|
styling: PropTypes.shape({
|
|
126
|
-
//
|
|
127
|
-
//
|
|
128
|
-
|
|
129
|
-
// "legacy" was the version of the widget display after XOM but
|
|
130
|
-
// before we started adding MCR styles. It doesn't have support
|
|
131
|
-
// for rationales. It has since been removed.
|
|
132
|
-
//
|
|
133
|
-
// "intermediate" is a design which adds several new additions
|
|
134
|
-
// to the "legacy" styles such as:
|
|
135
|
-
// 1. Using the XOM "desktop" styles (with a visible check icon
|
|
136
|
-
// and lines in between choices) on mobile devices.
|
|
137
|
-
// 2. Designs for rationales
|
|
138
|
-
// 3. Using the single-select styles for multi-select styles
|
|
139
|
-
//
|
|
140
|
-
// "final" is a design which will build off of the
|
|
141
|
-
// "intermediate" designs and adds some improved designs as well
|
|
142
|
-
// as:
|
|
143
|
-
// 1. a/b/c/d/etc. letters inside of the prompt check box
|
|
144
|
-
// 2. New iconography and styles to indicate choice correctness
|
|
145
|
-
//
|
|
146
|
-
// The "legacy" and "intermediate" designs will be A/B tested
|
|
147
|
-
// against each other to ensure that its changes don't cause
|
|
148
|
-
// problems due to the new designs. Once the "intermediate"
|
|
149
|
-
// designs are finished, they will be A/B tested against the
|
|
150
|
-
// "final" designs.
|
|
151
|
-
//
|
|
152
|
-
// If no flag is provided, "legacy" styles will be shown.
|
|
153
|
-
//
|
|
154
|
-
// TODO(emily): Remove this by Aug 1, 2017, at which point all
|
|
155
|
-
// callsites should have been switched to using the "final"
|
|
156
|
-
// designs.
|
|
157
|
-
radioStyleVersion: PropTypes.oneOf(["intermediate", "final"]),
|
|
126
|
+
// TODO(Nicole): Remove this after landing wonderblock-ifying
|
|
127
|
+
// the radio widget
|
|
128
|
+
primaryProductColor: PropTypes.string,
|
|
158
129
|
}),
|
|
159
130
|
|
|
160
131
|
// The color used for the hint progress indicator (eg. 1 / 3)
|
|
@@ -214,7 +185,12 @@ export const ApiOptions = {
|
|
|
214
185
|
setDrawingAreaAvailable?: (...a: $ReadOnlyArray<any>) => mixed,
|
|
215
186
|
showAlignmentOptions: boolean,
|
|
216
187
|
staticRender: boolean,
|
|
217
|
-
styling?: {
|
|
188
|
+
styling?: {
|
|
189
|
+
// TODO(Nicole): Remove this after landing wonderblock-ifying
|
|
190
|
+
// the radio widget
|
|
191
|
+
primaryProductColor?: string,
|
|
192
|
+
...
|
|
193
|
+
},
|
|
218
194
|
trackInteraction?: (...a: $ReadOnlyArray<any>) => mixed,
|
|
219
195
|
useDraftEditor?: boolean,
|
|
220
196
|
widgetPlaceholder?: any,
|
|
@@ -241,9 +217,7 @@ export const ApiOptions = {
|
|
|
241
217
|
},
|
|
242
218
|
setDrawingAreaAvailable: function () {},
|
|
243
219
|
useDraftEditor: false,
|
|
244
|
-
styling: {
|
|
245
|
-
radioStyleVersion: "final",
|
|
246
|
-
},
|
|
220
|
+
styling: {},
|
|
247
221
|
canScrollPage: false,
|
|
248
222
|
inModal: false,
|
|
249
223
|
crossOutEnabled: false,
|