@khanacademy/perseus 2.0.1 → 3.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 (45) hide show
  1. package/CHANGELOG.md +17 -0
  2. package/dist/es/index.css +2 -66
  3. package/dist/es/index.js +18698 -18817
  4. package/dist/es/index.js.map +1 -1
  5. package/dist/index.css +2 -66
  6. package/dist/index.js +18750 -18869
  7. package/dist/index.js.map +1 -1
  8. package/package.json +34 -34
  9. package/src/components/graph.jsx +0 -2
  10. package/src/components/math-input.jsx +163 -152
  11. package/src/components/tex-buttons.jsx +7 -9
  12. package/src/components/tooltip.jsx +0 -3
  13. package/src/components/zoomable.jsx +0 -10
  14. package/src/hint-renderer.jsx +4 -7
  15. package/src/interactive2/movable-point.jsx +0 -4
  16. package/src/interactive2/wrapped-ellipse.js +0 -1
  17. package/src/perseus-api.jsx +0 -7
  18. package/src/styles/articles.less +0 -4
  19. package/src/styles/khan-exercise.css +1 -33
  20. package/src/styles/perseus-renderer.less +1 -10
  21. package/src/styles/widgets/expression.less +0 -2
  22. package/src/styles/widgets/orderer.less +1 -1
  23. package/src/styles/widgets/plotter.less +0 -4
  24. package/src/styles/widgets/sortable.less +0 -14
  25. package/src/types.js +0 -6
  26. package/src/widgets/__stories__/unit.stories.jsx +0 -16
  27. package/src/widgets/__tests__/__snapshots__/input-number_test.jsx.snap +0 -481
  28. package/src/widgets/__tests__/__snapshots__/number-line_test.jsx.snap +1 -1
  29. package/src/widgets/__tests__/__snapshots__/unit_test.jsx.snap +20 -0
  30. package/src/widgets/__tests__/__snapshots__/video_test.jsx.snap +2 -2
  31. package/src/widgets/__tests__/expression_test.jsx +0 -10
  32. package/src/widgets/__tests__/input-number_test.jsx +0 -8
  33. package/src/widgets/__tests__/numeric-input_test.jsx +0 -11
  34. package/src/widgets/__tests__/unit_test.jsx +146 -121
  35. package/src/widgets/expression.jsx +2 -25
  36. package/src/widgets/input-number.jsx +2 -12
  37. package/src/widgets/matrix.jsx +4 -20
  38. package/src/widgets/number-line.jsx +0 -3
  39. package/src/widgets/numeric-input.jsx +1 -8
  40. package/src/widgets/radio/choice.jsx +2 -11
  41. package/src/widgets/simulator.jsx +2 -8
  42. package/src/widgets/table.jsx +0 -8
  43. package/src/widgets/transformer.jsx +0 -4
  44. package/src/widgets/unit.jsx +36 -51
  45. package/src/widgets/__tests__/__snapshots__/expression_test.jsx.snap +0 -38
package/src/widgets/__tests__/__snapshots__/input-number_test.jsx.snap CHANGED
@@ -1,486 +1,5 @@
1
1
  // Jest Snapshot v1, https://goo.gl/fbAQLP
2
2
 
3
- exports[`rendering static renders: static render 1`] = `
4
- <div>
5
- <span
6
- class="mock-KatexProvider"
7
- >
8
- <div
9
- class="perseus-renderer perseus-renderer-responsive"
10
- >
11
- <div
12
- class="paragraph"
13
- data-perseus-paragraph-index="0"
14
- >
15
- <div
16
- class="paragraph"
17
- >
18
- Akshat works in a hospital lab.
19
- </div>
20
- </div>
21
- <div
22
- class="paragraph"
23
- data-perseus-paragraph-index="1"
24
- >
25
- <div
26
- class="paragraph"
27
- >
28
- To project blood quantities, he wants to know the probability that more than
29
- <span
30
- style="white-space: nowrap;"
31
- >
32
- <span />
33
- <span
34
- class="mock-TeX"
35
- >
36
- 1
37
- </span>
38
- <span />
39
- </span>
40
- of the next
41
- <span
42
- style="white-space: nowrap;"
43
- >
44
- <span />
45
- <span
46
- class="mock-TeX"
47
- >
48
- 7
49
- </span>
50
- <span />
51
- </span>
52
- donors will have type-A blood. From his previous work, Sorin knows that
53
- <span
54
- style="white-space: nowrap;"
55
- >
56
- <span />
57
- <span
58
- class="mock-TeX"
59
- >
60
- \\dfrac14
61
- </span>
62
- <span />
63
- </span>
64
- of donors have type-A blood.
65
- </div>
66
- </div>
67
- <div
68
- class="paragraph"
69
- data-perseus-paragraph-index="2"
70
- >
71
- <div
72
- class="paragraph"
73
- >
74
- Akshat uses a computer to produce many samples that simulate the next
75
- <span
76
- style="white-space: nowrap;"
77
- >
78
- <span />
79
- <span
80
- class="mock-TeX"
81
- >
82
- 7
83
- </span>
84
- <span />
85
- </span>
86
- donors. The first
87
- <span
88
- style="white-space: nowrap;"
89
- >
90
- <span />
91
- <span
92
- class="mock-TeX"
93
- >
94
- 8
95
- </span>
96
- <span />
97
- </span>
98
- samples are shown in the table below where "
99
- <span
100
- style="white-space: nowrap;"
101
- >
102
- <span />
103
- <span
104
- class="mock-TeX"
105
- >
106
- \\text{\\red{A}}
107
- </span>
108
- <span />
109
- </span>
110
- " represents a donor
111
- <em>
112
- with
113
- </em>
114
- type-A blood, and "
115
- <span
116
- style="white-space: nowrap;"
117
- >
118
- <span />
119
- <span
120
- class="mock-TeX"
121
- >
122
- \\text{\\blue{Z}}
123
- </span>
124
- <span />
125
- </span>
126
- " represents a donor
127
- <em>
128
- without
129
- </em>
130
- type-A blood.
131
- </div>
132
- </div>
133
- <div
134
- class="paragraph"
135
- data-perseus-paragraph-index="3"
136
- >
137
- <div
138
- class="paragraph"
139
- >
140
- <strong>
141
- Based on the samples below, estimate the probability that more than
142
- <span
143
- style="white-space: nowrap;"
144
- >
145
- <span />
146
- <span
147
- class="mock-TeX"
148
- >
149
- 1
150
- </span>
151
- <span />
152
- </span>
153
- of the next
154
- <span
155
- style="white-space: nowrap;"
156
- >
157
- <span />
158
- <span
159
- class="mock-TeX"
160
- >
161
- 7
162
- </span>
163
- <span />
164
- </span>
165
- donors will have type-A blood.
166
- </strong>
167
- If necessary, round your answer to the nearest hundredth.
168
- <div
169
- class="perseus-widget-container widget-nohighlight widget-inline-block"
170
- >
171
- <span
172
- class="math-output perseus-input perseus-interactive"
173
- >
174
- <div
175
- style="text-align: center;"
176
- >
177
- <span
178
- class="mock-TeX"
179
- />
180
- </div>
181
- </span>
182
- </div>
183
- </div>
184
- </div>
185
- <div
186
- class="paragraph"
187
- data-perseus-paragraph-index="4"
188
- >
189
- <div
190
- class="paragraph"
191
- >
192
- <em>
193
- Note: This a small sample to practice with. A larger sample could give a much better estimate.
194
- </em>
195
- </div>
196
- </div>
197
- <div
198
- class="paragraph"
199
- data-perseus-paragraph-index="5"
200
- >
201
- <table>
202
- <thead>
203
- <tr>
204
- <th
205
- scope="col"
206
- style="text-align: center;"
207
- />
208
- <th
209
- scope="col"
210
- style="text-align: center;"
211
- >
212
- Sample
213
- </th>
214
- <th
215
- scope="col"
216
- />
217
- </tr>
218
- </thead>
219
- <tbody>
220
- <tr>
221
- <td
222
- style="text-align: center;"
223
- >
224
- <span
225
- style="white-space: nowrap;"
226
- >
227
- <span />
228
- <span
229
- class="mock-TeX"
230
- >
231
- 1
232
- </span>
233
- <span />
234
- </span>
235
- </td>
236
- <td
237
- style="text-align: center;"
238
- >
239
- <span
240
- style="white-space: nowrap;"
241
- >
242
- <span />
243
- <span
244
- class="mock-TeX"
245
- >
246
- \\text{\\blue{Z}, \\blue{Z}, \\blue{Z}, \\blue{Z}, \\red{A}, \\blue{Z}, \\blue{Z}}
247
- </span>
248
- <span />
249
- </span>
250
- </td>
251
- </tr>
252
- <tr>
253
- <td
254
- style="text-align: center;"
255
- >
256
- <span
257
- style="white-space: nowrap;"
258
- >
259
- <span />
260
- <span
261
- class="mock-TeX"
262
- >
263
- 2
264
- </span>
265
- <span />
266
- </span>
267
- </td>
268
- <td
269
- style="text-align: center;"
270
- >
271
- <span
272
- style="white-space: nowrap;"
273
- >
274
- <span />
275
- <span
276
- class="mock-TeX"
277
- >
278
- \\text{\\blue{Z}, \\blue{Z}, \\blue{Z}, \\blue{Z}, \\blue{Z}, \\blue{Z}, \\blue{Z}}
279
- </span>
280
- <span />
281
- </span>
282
- </td>
283
- </tr>
284
- <tr>
285
- <td
286
- style="text-align: center;"
287
- >
288
- <span
289
- style="white-space: nowrap;"
290
- >
291
- <span />
292
- <span
293
- class="mock-TeX"
294
- >
295
- 3
296
- </span>
297
- <span />
298
- </span>
299
- </td>
300
- <td
301
- style="text-align: center;"
302
- >
303
- <span
304
- style="white-space: nowrap;"
305
- >
306
- <span />
307
- <span
308
- class="mock-TeX"
309
- >
310
- \\text{\\blue{Z}, \\blue{Z}, \\red{A}, \\blue{Z}, \\blue{Z}, \\blue{Z}, \\blue{Z}}
311
- </span>
312
- <span />
313
- </span>
314
- </td>
315
- </tr>
316
- <tr>
317
- <td
318
- style="text-align: center;"
319
- >
320
- <span
321
- style="white-space: nowrap;"
322
- >
323
- <span />
324
- <span
325
- class="mock-TeX"
326
- >
327
- 4
328
- </span>
329
- <span />
330
- </span>
331
- </td>
332
- <td
333
- style="text-align: center;"
334
- >
335
- <span
336
- style="white-space: nowrap;"
337
- >
338
- <span />
339
- <span
340
- class="mock-TeX"
341
- >
342
- \\text{\\red{A}, \\red{A}, \\blue{Z}, \\blue{Z}, \\blue{Z}, \\blue{Z}, \\blue{Z}}
343
- </span>
344
- <span />
345
- </span>
346
- </td>
347
- </tr>
348
- <tr>
349
- <td
350
- style="text-align: center;"
351
- >
352
- <span
353
- style="white-space: nowrap;"
354
- >
355
- <span />
356
- <span
357
- class="mock-TeX"
358
- >
359
- 5
360
- </span>
361
- <span />
362
- </span>
363
- </td>
364
- <td
365
- style="text-align: center;"
366
- >
367
- <span
368
- style="white-space: nowrap;"
369
- >
370
- <span />
371
- <span
372
- class="mock-TeX"
373
- >
374
- \\text{\\blue{Z}, \\blue{Z}, \\blue{Z}, \\blue{Z}, \\blue{Z}, \\red{A}, \\red{A}}
375
- </span>
376
- <span />
377
- </span>
378
- </td>
379
- </tr>
380
- <tr>
381
- <td
382
- style="text-align: center;"
383
- >
384
- <span
385
- style="white-space: nowrap;"
386
- >
387
- <span />
388
- <span
389
- class="mock-TeX"
390
- >
391
- 6
392
- </span>
393
- <span />
394
- </span>
395
- </td>
396
- <td
397
- style="text-align: center;"
398
- >
399
- <span
400
- style="white-space: nowrap;"
401
- >
402
- <span />
403
- <span
404
- class="mock-TeX"
405
- >
406
- \\text{\\blue{Z}, \\red{A}, \\red{A}, \\blue{Z}, \\blue{Z}, \\blue{Z}, \\blue{Z}}
407
- </span>
408
- <span />
409
- </span>
410
- </td>
411
- </tr>
412
- <tr>
413
- <td
414
- style="text-align: center;"
415
- >
416
- <span
417
- style="white-space: nowrap;"
418
- >
419
- <span />
420
- <span
421
- class="mock-TeX"
422
- >
423
- 7
424
- </span>
425
- <span />
426
- </span>
427
- </td>
428
- <td
429
- style="text-align: center;"
430
- >
431
- <span
432
- style="white-space: nowrap;"
433
- >
434
- <span />
435
- <span
436
- class="mock-TeX"
437
- >
438
- \\text{\\blue{Z}, \\red{A}, \\blue{Z}, \\blue{Z}, \\blue{Z}, \\red{A}, \\blue{Z}}
439
- </span>
440
- <span />
441
- </span>
442
- </td>
443
- </tr>
444
- <tr>
445
- <td
446
- style="text-align: center;"
447
- >
448
- <span
449
- style="white-space: nowrap;"
450
- >
451
- <span />
452
- <span
453
- class="mock-TeX"
454
- >
455
- 8
456
- </span>
457
- <span />
458
- </span>
459
- </td>
460
- <td
461
- style="text-align: center;"
462
- >
463
- <span
464
- style="white-space: nowrap;"
465
- >
466
- <span />
467
- <span
468
- class="mock-TeX"
469
- >
470
- \\text{\\blue{Z}, \\blue{Z}, \\blue{Z}, \\blue{Z}, \\red{A}, \\blue{Z}, \\blue{Z}}
471
- </span>
472
- <span />
473
- </span>
474
- </td>
475
- </tr>
476
- </tbody>
477
- </table>
478
- </div>
479
- </div>
480
- </span>
481
- </div>
482
- `;
483
-
484
3
  exports[`rendering supports mobile rendering: mobile render 1`] = `
485
4
  <div>
486
5
  <span
package/src/widgets/__tests__/__snapshots__/number-line_test.jsx.snap CHANGED
@@ -236,7 +236,7 @@ exports[`number-line widget should snapshot on mobile: first mobile render 1`] =
236
236
  style="position: absolute; left: 0px; top: 0px;"
237
237
  >
238
238
  <div
239
- style="position: absolute; width: 24px; height: 24px; left: 17.999999999999993px; top: 28px; webkit-filter: drop-shadow(0px 0px 5px rgba(0, 0, 0, 0.5)); filter: drop-shadow(0px 0px 5px rgba(0, 0, 0, 0.5)); transform: translateX(0px) translateY(0px) translateZ(0);"
239
+ style="position: absolute; width: 24px; height: 24px; left: 17.999999999999993px; top: 28px; filter: drop-shadow(0px 0px 5px rgba(0, 0, 0, 0.5)); transform: translateX(0px) translateY(0px) translateZ(0);"
240
240
  >
241
241
  <svg
242
242
  height="24"
package/src/widgets/__tests__/__snapshots__/unit_test.jsx.snap ADDED
@@ -0,0 +1,20 @@
1
+ // Jest Snapshot v1, https://goo.gl/fbAQLP
2
+
3
+ exports[`Unit Widget renders: initial render 1`] = `
4
+ <div>
5
+ <div
6
+ class="old-unit-input"
7
+ >
8
+ <input
9
+ class="perseus-interactive"
10
+ value=""
11
+ />
12
+ <div
13
+ class="error"
14
+ style="display: none;"
15
+ >
16
+ I don't understand that
17
+ </div>
18
+ </div>
19
+ </div>
20
+ `;
package/src/widgets/__tests__/__snapshots__/video_test.jsx.snap CHANGED
@@ -63,7 +63,7 @@ exports[`video widget should snapshot on mobile: first mobile render 1`] = `
63
63
  class="default_xu2jcg-o_O-inlineStyles_sc01dy"
64
64
  />
65
65
  <a
66
- class="shared_ken7mo-o_O-resting_nelfll visited-no-recolor"
66
+ class="shared_htyo3s-o_O-resting_nelfll visited-no-recolor"
67
67
  href="/transcript/videoNotFound"
68
68
  rel="noopener noreferrer"
69
69
  target="_blank"
@@ -143,7 +143,7 @@ exports[`video widget should snapshot: first render 1`] = `
143
143
  class="default_xu2jcg-o_O-inlineStyles_sc01dy"
144
144
  />
145
145
  <a
146
- class="shared_ken7mo-o_O-resting_nelfll visited-no-recolor"
146
+ class="shared_htyo3s-o_O-resting_nelfll visited-no-recolor"
147
147
  href="/transcript/videoNotFound"
148
148
  rel="noopener noreferrer"
149
149
  target="_blank"
package/src/widgets/__tests__/expression_test.jsx CHANGED
@@ -288,16 +288,6 @@ describe("rendering", () => {
288
288
  const mobileInput = await screen.findByRole("textbox");
289
289
  expect(mobileInput).toBeVisible();
290
290
  });
291
-
292
- it("static renders", () => {
293
- // arrange and act
294
- const {container} = renderQuestion(expressionItem2.question, {
295
- staticRender: true,
296
- });
297
-
298
- // Assert
299
- expect(container).toMatchSnapshot("static render");
300
- });
301
291
  });
302
292
 
303
293
  describe("interaction", () => {
package/src/widgets/__tests__/input-number_test.jsx CHANGED
@@ -304,14 +304,6 @@ describe("rendering", () => {
304
304
 
305
305
  expect(container).toMatchSnapshot("mobile render");
306
306
  });
307
-
308
- it("static renders", () => {
309
- const {container} = renderQuestion(question, {
310
- staticRender: true,
311
- });
312
-
313
- expect(container).toMatchSnapshot("static render");
314
- });
315
307
  });
316
308
 
317
309
  describe("focus state", () => {
package/src/widgets/__tests__/numeric-input_test.jsx CHANGED
@@ -390,17 +390,6 @@ describe("Numeric input widget", () => {
390
390
  expect(renderer).toHaveBeenAnsweredCorrectly();
391
391
  });
392
392
 
393
- it("supports being static", () => {
394
- // Arrange
395
- renderQuestion(multipleAnswersWithDecimals, {
396
- staticRender: true,
397
- });
398
-
399
- // Assert
400
- const element = screen.queryByRole("textbox", {hidden: true});
401
- expect(element).toBeNull();
402
- });
403
-
404
393
  it("styles differently on mobile", () => {
405
394
  const {container} = renderQuestion(multipleAnswersWithDecimals, {
406
395
  // I wish this was more clear but this is how mobile