@khanacademy/perseus 5.0.0 → 6.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 (113) hide show
  1. package/CHANGELOG.md +42 -0
  2. package/dist/components/fixed-to-responsive.d.ts +27 -1
  3. package/dist/components/fixed-to-responsive.js.flow +27 -1
  4. package/dist/components/graph.d.ts +42 -26
  5. package/dist/components/graph.js.flow +42 -28
  6. package/dist/components/graphie.d.ts +34 -22
  7. package/dist/components/graphie.js.flow +37 -24
  8. package/dist/components/hud.d.ts +8 -14
  9. package/dist/components/hud.js.flow +7 -14
  10. package/dist/components/inline-icon.d.ts +9 -19
  11. package/dist/components/inline-icon.js.flow +26 -13
  12. package/dist/components/lint.d.ts +41 -13
  13. package/dist/components/lint.js.flow +42 -13
  14. package/dist/components/math-output.d.ts +15 -11
  15. package/dist/components/math-output.js.flow +15 -11
  16. package/dist/components/sortable.d.ts +17 -9
  17. package/dist/components/sortable.js.flow +22 -9
  18. package/dist/components/svg-image.d.ts +5 -3
  19. package/dist/components/svg-image.js.flow +5 -3
  20. package/dist/components/tooltip.d.ts +45 -4
  21. package/dist/components/tooltip.js.flow +44 -31
  22. package/dist/es/index.css +0 -3
  23. package/dist/es/index.js +477 -648
  24. package/dist/es/index.js.map +1 -1
  25. package/dist/index.css +0 -3
  26. package/dist/index.js +481 -645
  27. package/dist/index.js.map +1 -1
  28. package/dist/perseus-types.d.ts +11 -9
  29. package/dist/perseus-types.js.flow +11 -9
  30. package/dist/renderer.d.ts +2 -2
  31. package/dist/renderer.js.flow +1 -3
  32. package/dist/styles/shared.d.ts +0 -1
  33. package/dist/styles/shared.js.flow +0 -1
  34. package/dist/types.d.ts +0 -10
  35. package/dist/types.js.flow +0 -13
  36. package/dist/util/a11y.d.ts +0 -1
  37. package/dist/util/a11y.js.flow +0 -1
  38. package/dist/util/interactive.d.ts +2 -0
  39. package/dist/util/interactive.js.flow +2 -0
  40. package/dist/util.d.ts +3 -3
  41. package/dist/util.js.flow +4 -3
  42. package/dist/widgets/grapher.d.ts +1 -1
  43. package/dist/widgets/grapher.js.flow +12 -3
  44. package/dist/widgets/matcher.d.ts +7 -3
  45. package/dist/widgets/matcher.js.flow +7 -3
  46. package/dist/widgets/number-line.d.ts +1 -1
  47. package/dist/widgets/number-line.js.flow +1 -1
  48. package/package.json +2 -2
  49. package/src/__tests__/__snapshots__/item-renderer.test.tsx.snap +151 -159
  50. package/src/__tests__/__snapshots__/renderer.test.tsx.snap +358 -394
  51. package/src/__tests__/__snapshots__/server-item-renderer.test.tsx.snap +169 -189
  52. package/src/components/__stories__/lint.stories.tsx +56 -21
  53. package/src/components/__stories__/sortable.stories.tsx +5 -5
  54. package/src/components/__stories__/tooltip.stories.tsx +52 -0
  55. package/src/components/__tests__/__snapshots__/sortable.test.tsx.snap +114 -30
  56. package/src/components/__tests__/__snapshots__/sorter.test.tsx.snap +172 -204
  57. package/src/components/__tests__/sortable.test.tsx +54 -16
  58. package/src/components/__tests__/sorter.test.tsx +12 -9
  59. package/src/components/fixed-to-responsive.tsx +43 -38
  60. package/src/components/graph.tsx +95 -81
  61. package/src/components/graphie.tsx +62 -32
  62. package/src/components/hud.tsx +104 -115
  63. package/src/components/inline-icon.tsx +15 -32
  64. package/src/components/input-with-examples.tsx +4 -4
  65. package/src/components/lint.tsx +47 -41
  66. package/src/components/math-output.tsx +17 -11
  67. package/src/components/simple-keypad-input.tsx +2 -2
  68. package/src/components/sortable.tsx +134 -94
  69. package/src/components/svg-image.tsx +10 -11
  70. package/src/components/tooltip.tsx +189 -171
  71. package/src/interactive2/types.ts +2 -2
  72. package/src/multi-items/__tests__/__snapshots__/multi-renderer.test.tsx.snap +708 -764
  73. package/src/perseus-types.ts +13 -9
  74. package/src/renderer.tsx +11 -22
  75. package/src/types.ts +0 -18
  76. package/src/util/interactive.ts +18 -5
  77. package/src/util/tex.ts +13 -77
  78. package/src/util.ts +3 -4
  79. package/src/widgets/__tests__/__snapshots__/categorizer.test.ts.snap +717 -773
  80. package/src/widgets/__tests__/__snapshots__/cs-program.test.ts.snap +28 -36
  81. package/src/widgets/__tests__/__snapshots__/definition.test.ts.snap +52 -60
  82. package/src/widgets/__tests__/__snapshots__/dropdown.test.ts.snap +100 -108
  83. package/src/widgets/__tests__/__snapshots__/explanation.test.ts.snap +212 -260
  84. package/src/widgets/__tests__/__snapshots__/graded-group-set-jipt.test.ts.snap +613 -641
  85. package/src/widgets/__tests__/__snapshots__/graded-group-set.test.ts.snap +249 -261
  86. package/src/widgets/__tests__/__snapshots__/graded-group.test.ts.snap +671 -735
  87. package/src/widgets/__tests__/__snapshots__/grapher.test.ts.snap +2676 -2684
  88. package/src/widgets/__tests__/__snapshots__/group.test.tsx.snap +938 -1002
  89. package/src/widgets/__tests__/__snapshots__/iframe.test.ts.snap +28 -36
  90. package/src/widgets/__tests__/__snapshots__/image.test.ts.snap +227 -255
  91. package/src/widgets/__tests__/__snapshots__/input-number.test.ts.snap +353 -357
  92. package/src/widgets/__tests__/__snapshots__/interaction.test.ts.snap +255 -259
  93. package/src/widgets/__tests__/__snapshots__/interactive-graph.test.ts.snap +2401 -2433
  94. package/src/widgets/__tests__/__snapshots__/matcher.test.tsx.snap +600 -756
  95. package/src/widgets/__tests__/__snapshots__/matrix.test.ts.snap +420 -428
  96. package/src/widgets/__tests__/__snapshots__/number-line.test.ts.snap +762 -770
  97. package/src/widgets/__tests__/__snapshots__/numeric-input.test.ts.snap +373 -393
  98. package/src/widgets/__tests__/__snapshots__/orderer.test.ts.snap +116 -148
  99. package/src/widgets/__tests__/__snapshots__/passage-ref.test.ts.snap +289 -301
  100. package/src/widgets/__tests__/__snapshots__/passage.test.tsx.snap +1679 -1711
  101. package/src/widgets/__tests__/__snapshots__/radio.test.ts.snap +2692 -2960
  102. package/src/widgets/__tests__/__snapshots__/video.test.ts.snap +90 -98
  103. package/src/widgets/__tests__/matcher.test.tsx +33 -9
  104. package/src/widgets/expression.tsx +9 -6
  105. package/src/widgets/grapher.tsx +3 -3
  106. package/src/widgets/image.tsx +2 -2
  107. package/src/widgets/interactive-graph.tsx +5 -5
  108. package/src/widgets/matcher.tsx +43 -24
  109. package/src/widgets/number-line.tsx +1 -1
  110. package/src/widgets/simulator.tsx +4 -6
  111. package/{tsconfig.json → tsconfig-build.json} +6 -6
  112. package/tsconfig-build.tsbuildinfo +1 -0
  113. package/tsconfig.tsbuildinfo +0 -1
package/src/widgets/__tests__/__snapshots__/graded-group-set.test.ts.snap CHANGED
@@ -2,319 +2,307 @@
2
2
 
3
3
  exports[`graded group widget should snapshot 1`] = `
4
4
  <div>
5
- <span
6
- class="mock-KatexProvider"
5
+ <div
6
+ class="perseus-renderer perseus-renderer-responsive"
7
7
  >
8
8
  <div
9
- class="perseus-renderer perseus-renderer-responsive"
9
+ class="paragraph"
10
+ data-perseus-paragraph-index="0"
11
+ >
12
+ <h1>
13
+ Section 1: Adding tenths less than one
14
+ </h1>
15
+ </div>
16
+ <div
17
+ class="paragraph"
18
+ data-perseus-paragraph-index="1"
10
19
  >
11
20
  <div
12
21
  class="paragraph"
13
- data-perseus-paragraph-index="0"
14
- >
15
- <h1>
16
- Section 1: Adding tenths less than one
17
- </h1>
18
- </div>
19
- <div
20
- class="paragraph"
21
- data-perseus-paragraph-index="1"
22
22
  >
23
23
  <div
24
- class="paragraph"
24
+ class="perseus-widget-container widget-nohighlight widget-block"
25
25
  >
26
26
  <div
27
- class="perseus-widget-container widget-nohighlight widget-block"
27
+ class="container_14sgdtb"
28
28
  >
29
29
  <div
30
- class="container_14sgdtb"
30
+ class="top_cjo0m2"
31
31
  >
32
32
  <div
33
- class="top_cjo0m2"
33
+ class="title_vo78fw"
34
34
  >
35
- <div
36
- class="title_vo78fw"
37
- >
38
- Problem 1a
39
- </div>
40
- <div
41
- class="spacer_bc4egv"
42
- />
43
- <ul
44
- class="indicatorContainer_rjg7c2"
35
+ Problem 1a
36
+ </div>
37
+ <div
38
+ class="spacer_bc4egv"
39
+ />
40
+ <ul
41
+ class="indicatorContainer_rjg7c2"
42
+ >
43
+ <li
44
+ aria-label="Skip to Problem 1a"
45
+ class="indicator_qk5jgn-o_O-selectedIndicator_14jsc6v"
46
+ role="button"
47
+ tabindex="0"
45
48
  >
46
- <li
47
- aria-label="Skip to Problem 1a"
48
- class="indicator_qk5jgn-o_O-selectedIndicator_14jsc6v"
49
- role="button"
50
- tabindex="0"
49
+ <span
50
+ class="srOnly_19bpjuy"
51
51
  >
52
- <span
53
- class="srOnly_19bpjuy"
54
- >
55
- Current
56
- </span>
57
- </li>
58
- <li
59
- aria-label="Skip to Problem 1b"
60
- class="indicator_qk5jgn"
61
- role="button"
62
- tabindex="0"
63
- />
64
- <li
65
- aria-label="Skip to Problem 1c"
66
- class="indicator_qk5jgn"
67
- role="button"
68
- tabindex="0"
69
- />
70
- </ul>
71
- </div>
52
+ Current
53
+ </span>
54
+ </li>
55
+ <li
56
+ aria-label="Skip to Problem 1b"
57
+ class="indicator_qk5jgn"
58
+ role="button"
59
+ tabindex="0"
60
+ />
61
+ <li
62
+ aria-label="Skip to Problem 1c"
63
+ class="indicator_qk5jgn"
64
+ role="button"
65
+ tabindex="0"
66
+ />
67
+ </ul>
68
+ </div>
69
+ <div
70
+ class="perseus-graded-group"
71
+ >
72
72
  <div
73
- class="perseus-graded-group"
73
+ class="perseus-renderer perseus-renderer-responsive"
74
74
  >
75
- <span
76
- class="mock-KatexProvider"
75
+ <div
76
+ class="paragraph"
77
+ data-perseus-paragraph-index="0"
77
78
  >
78
79
  <div
79
- class="perseus-renderer perseus-renderer-responsive"
80
+ class="paragraph"
80
81
  >
81
- <div
82
- class="paragraph"
83
- data-perseus-paragraph-index="0"
82
+ <span
83
+ style="white-space: nowrap;"
84
84
  >
85
- <div
86
- class="paragraph"
85
+ <span />
86
+ <span
87
+ class="mock-TeX"
87
88
  >
88
- <span
89
- style="white-space: nowrap;"
90
- >
91
- <span />
92
- <span
93
- class="mock-TeX"
94
- >
95
- 0.5 + 0.4 =
96
- </span>
97
- <span />
98
- </span>
99
-
100
- <div
101
- class="perseus-widget-container widget-nohighlight widget-inline-block"
102
- >
89
+ 0.5 + 0.4 =
90
+ </span>
91
+ <span />
92
+ </span>
93
+
94
+ <div
95
+ class="perseus-widget-container widget-nohighlight widget-inline-block"
96
+ >
97
+ <div>
98
+ <span>
103
99
  <div>
104
- <span>
105
- <div>
106
- <input
107
- aria-label="Your answer:"
108
- autocapitalize="off"
109
- autocomplete="off"
110
- autocorrect="off"
111
- class="input_1t4b01j-o_O-LabelMedium_1rew30o-o_O-default_1r2dwp3-o_O-input_19vw1dn"
112
- id="input-with-examples-bnVtZXJpYy1pbnB1dCAx"
113
- type="text"
114
- value=""
100
+ <input
101
+ aria-label="Your answer:"
102
+ autocapitalize="off"
103
+ autocomplete="off"
104
+ autocorrect="off"
105
+ class="input_1t4b01j-o_O-LabelMedium_1rew30o-o_O-default_1r2dwp3-o_O-input_19vw1dn"
106
+ id="input-with-examples-bnVtZXJpYy1pbnB1dCAx"
107
+ type="text"
108
+ value=""
109
+ />
110
+ </div>
111
+ <div
112
+ style="position: relative; height: 0px; display: none;"
113
+ >
114
+ <div
115
+ class="tooltipContainer"
116
+ style="position: absolute; left: 0px;"
117
+ >
118
+ <div
119
+ style="display: block; position: relative; visibility: visible; left: 0px; top: -1px; width: 12px; height: 11px; margin-top: -1px; margin-bottom: -2px; z-index: 10;"
120
+ >
121
+ <div
122
+ style="display: block; height: 0px; width: 0px; position: absolute; left: 0px; top: -1px; border-right: 12px solid transparent; border-bottom: 12px solid #ccc;"
123
+ />
124
+ <div
125
+ style="display: block; height: 0px; width: 0px; position: absolute; left: 1px; top: 1px; border-right: 10px solid transparent; border-bottom: 10px solid white;"
115
126
  />
116
127
  </div>
117
128
  <div
118
- style="position: relative; height: 0px; display: none;"
129
+ class="perseus-formats-tooltip preview-measure"
130
+ style="position: relative; top: 0px; left: 0px; border: 1px solid #ccc; box-shadow: 0 1px 3px #ccc; z-index: 9;"
119
131
  >
120
132
  <div
121
- class="tooltipContainer"
122
- style="position: absolute; left: 0px;"
133
+ id="input-with-examples-bnVtZXJpYy1pbnB1dCAx"
123
134
  >
124
135
  <div
125
- style="display: block; position: relative; visibility: visible; left: 0px; top: -1px; width: 12px; height: 11px; margin-top: -1px; margin-bottom: -2px; z-index: 10;"
136
+ class="perseus-renderer perseus-renderer-responsive"
126
137
  >
127
138
  <div
128
- style="display: block; height: 0px; width: 0px; position: absolute; left: 0px; top: -1px; border-right: 12px solid transparent; border-bottom: 12px solid #ccc;"
129
- />
130
- <div
131
- style="display: block; height: 0px; width: 0px; position: absolute; left: 1px; top: 1px; border-right: 10px solid transparent; border-bottom: 10px solid white;"
132
- />
133
- </div>
134
- <div
135
- class="perseus-formats-tooltip preview-measure"
136
- style="position: relative; top: 0px; left: 0px; border: 1px solid #ccc; box-shadow: 0 1px 3px #ccc; z-index: 9;"
137
- >
138
- <div
139
- id="input-with-examples-bnVtZXJpYy1pbnB1dCAx"
139
+ class="paragraph"
140
+ data-perseus-paragraph-index="0"
140
141
  >
141
- <span
142
- class="mock-KatexProvider"
143
- >
144
- <div
145
- class="perseus-renderer perseus-renderer-responsive"
146
- >
147
- <div
148
- class="paragraph"
149
- data-perseus-paragraph-index="0"
142
+ <ul>
143
+ <li>
144
+ <strong>
145
+ Your answer should be
146
+ </strong>
147
+ </li>
148
+ <li>
149
+ an integer, like
150
+ <span
151
+ style="white-space: nowrap;"
152
+ >
153
+ <span />
154
+ <span
155
+ class="mock-TeX"
156
+ >
157
+ 6
158
+ </span>
159
+ <span />
160
+ </span>
161
+ </li>
162
+ <li>
163
+ a
164
+ <em>
165
+ simplified proper
166
+ </em>
167
+ fraction, like
168
+ <span
169
+ style="white-space: nowrap;"
170
+ >
171
+ <span />
172
+ <span
173
+ class="mock-TeX"
174
+ >
175
+ 3/5
176
+ </span>
177
+ <span />
178
+ </span>
179
+ </li>
180
+ <li>
181
+ a
182
+ <em>
183
+ simplified improper
184
+ </em>
185
+ fraction, like
186
+ <span
187
+ style="white-space: nowrap;"
188
+ >
189
+ <span />
190
+ <span
191
+ class="mock-TeX"
192
+ >
193
+ 7/4
194
+ </span>
195
+ <span />
196
+ </span>
197
+ </li>
198
+ <li>
199
+ a mixed number, like
200
+ <span
201
+ style="white-space: nowrap;"
150
202
  >
151
- <ul>
152
- <li>
153
- <strong>
154
- Your answer should be
155
- </strong>
156
- </li>
157
- <li>
158
- an integer, like
159
- <span
160
- style="white-space: nowrap;"
161
- >
162
- <span />
163
- <span
164
- class="mock-TeX"
165
- >
166
- 6
167
- </span>
168
- <span />
169
- </span>
170
- </li>
171
- <li>
172
- a
173
- <em>
174
- simplified proper
175
- </em>
176
- fraction, like
177
- <span
178
- style="white-space: nowrap;"
179
- >
180
- <span />
181
- <span
182
- class="mock-TeX"
183
- >
184
- 3/5
185
- </span>
186
- <span />
187
- </span>
188
- </li>
189
- <li>
190
- a
191
- <em>
192
- simplified improper
193
- </em>
194
- fraction, like
195
- <span
196
- style="white-space: nowrap;"
197
- >
198
- <span />
199
- <span
200
- class="mock-TeX"
201
- >
202
- 7/4
203
- </span>
204
- <span />
205
- </span>
206
- </li>
207
- <li>
208
- a mixed number, like
209
- <span
210
- style="white-space: nowrap;"
211
- >
212
- <span />
213
- <span
214
- class="mock-TeX"
215
- >
216
- 1\\ 3/4
217
- </span>
218
- <span />
219
- </span>
220
- </li>
221
- <li>
222
- an
223
- <em>
224
- exact
225
- </em>
226
- decimal, like
227
- <span
228
- style="white-space: nowrap;"
229
- >
230
- <span />
231
- <span
232
- class="mock-TeX"
233
- >
234
- 0.75
235
- </span>
236
- <span />
237
- </span>
238
- </li>
239
- <li>
240
- a multiple of pi, like
241
- <span
242
- style="white-space: nowrap;"
243
- >
244
- <span />
245
- <span
246
- class="mock-TeX"
247
- >
248
- 12\\ \\text{pi}
249
- </span>
250
- <span />
251
- </span>
252
- or
253
- <span
254
- style="white-space: nowrap;"
255
- >
256
- <span />
257
- <span
258
- class="mock-TeX"
259
- >
260
- 2/3\\ \\text{pi}
261
- </span>
262
- <span />
263
- </span>
264
- </li>
265
- </ul>
266
- </div>
267
- </div>
268
- </span>
203
+ <span />
204
+ <span
205
+ class="mock-TeX"
206
+ >
207
+ 1\\ 3/4
208
+ </span>
209
+ <span />
210
+ </span>
211
+ </li>
212
+ <li>
213
+ an
214
+ <em>
215
+ exact
216
+ </em>
217
+ decimal, like
218
+ <span
219
+ style="white-space: nowrap;"
220
+ >
221
+ <span />
222
+ <span
223
+ class="mock-TeX"
224
+ >
225
+ 0.75
226
+ </span>
227
+ <span />
228
+ </span>
229
+ </li>
230
+ <li>
231
+ a multiple of pi, like
232
+ <span
233
+ style="white-space: nowrap;"
234
+ >
235
+ <span />
236
+ <span
237
+ class="mock-TeX"
238
+ >
239
+ 12\\ \\text{pi}
240
+ </span>
241
+ <span />
242
+ </span>
243
+ or
244
+ <span
245
+ style="white-space: nowrap;"
246
+ >
247
+ <span />
248
+ <span
249
+ class="mock-TeX"
250
+ >
251
+ 2/3\\ \\text{pi}
252
+ </span>
253
+ <span />
254
+ </span>
255
+ </li>
256
+ </ul>
269
257
  </div>
270
258
  </div>
271
259
  </div>
272
260
  </div>
273
- </span>
261
+ </div>
274
262
  </div>
275
- </div>
263
+ </span>
276
264
  </div>
277
265
  </div>
278
266
  </div>
279
- </span>
280
- <p
281
- aria-live="polite"
282
- role="status"
283
- />
284
- <button
285
- aria-disabled="false"
286
- class="button_vr44p2-o_O-shared_lwskrm-o_O-default_1w5v67"
287
- role="button"
288
- type="button"
289
- >
290
- <span
291
- class="text_f1191h-o_O-LabelLarge_5s82ln-o_O-text_m8a8ki"
292
- >
293
- Check
294
- </span>
295
- </button>
296
- <button
297
- class="showHintLink_oak3yy"
298
- tabindex="0"
299
- >
300
- Explain
301
- </button>
267
+ </div>
302
268
  </div>
269
+ <p
270
+ aria-live="polite"
271
+ role="status"
272
+ />
273
+ <button
274
+ aria-disabled="false"
275
+ class="button_vr44p2-o_O-shared_lwskrm-o_O-default_1w5v67"
276
+ role="button"
277
+ type="button"
278
+ >
279
+ <span
280
+ class="text_f1191h-o_O-LabelLarge_5s82ln-o_O-text_m8a8ki"
281
+ >
282
+ Check
283
+ </span>
284
+ </button>
285
+ <button
286
+ class="showHintLink_oak3yy"
287
+ tabindex="0"
288
+ >
289
+ Explain
290
+ </button>
303
291
  </div>
304
292
  </div>
305
293
  </div>
306
294
  </div>
295
+ </div>
296
+ <div
297
+ class="paragraph"
298
+ data-perseus-paragraph-index="2"
299
+ >
307
300
  <div
308
301
  class="paragraph"
309
- data-perseus-paragraph-index="2"
310
302
  >
311
- <div
312
- class="paragraph"
313
- >
314
- Beautiful, let's move on to problems with whole numbers and tenths.
315
- </div>
303
+ Beautiful, let's move on to problems with whole numbers and tenths.
316
304
  </div>
317
305
  </div>
318
- </span>
306
+ </div>
319
307
  </div>
320
308
  `;