@khanacademy/perseus 0.3.3 → 0.4.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 (60) hide show
  1. package/CHANGELOG.md +31 -0
  2. package/dist/es/index.js +8247 -5609
  3. package/dist/es/index.js.map +1 -1
  4. package/dist/index.js +17900 -15265
  5. package/dist/index.js.map +1 -1
  6. package/dist/strings.js +0 -1
  7. package/package.json +9 -8
  8. package/src/__tests__/__snapshots__/item-renderer_test.jsx.snap +2 -3
  9. package/src/__tests__/__snapshots__/server-item-renderer_test.jsx.snap +2 -3
  10. package/src/__tests__/renderer-api_test.jsx +3 -27
  11. package/src/components/__stories__/svg-image.stories.jsx +11 -0
  12. package/src/components/fixed-to-responsive.jsx +1 -0
  13. package/src/components/highlighting/ui/util.js +2 -2
  14. package/src/components/input-with-examples.jsx +3 -1
  15. package/src/components/svg-image.jsx +10 -7
  16. package/src/components/text-input.jsx +65 -16
  17. package/src/definition-context.js +59 -0
  18. package/src/index.js +5 -1
  19. package/src/interaction-tracker.js +2 -2
  20. package/src/item-renderer.jsx +1 -1
  21. package/src/mixins/provide-keypad.jsx +1 -1
  22. package/src/multi-items/__tests__/__snapshots__/multi-renderer_test.js.snap +438 -523
  23. package/src/multi-items/__tests__/multi-renderer_test.js +9 -9
  24. package/src/renderer.jsx +15 -8
  25. package/src/server-item-renderer.jsx +1 -1
  26. package/src/types.js +3 -4
  27. package/src/util/scroll-utils.js +2 -2
  28. package/src/widgets/__stories__/definition.stories.jsx +44 -0
  29. package/src/widgets/__tests__/__snapshots__/categorizer_test.jsx.snap +76 -8
  30. package/src/widgets/__tests__/__snapshots__/graded-group-set-jipt_test.jsx.snap +6 -9
  31. package/src/widgets/__tests__/__snapshots__/graded-group-set_test.jsx.snap +2 -3
  32. package/src/widgets/__tests__/__snapshots__/grapher_test.jsx.snap +19 -2
  33. package/src/widgets/__tests__/__snapshots__/group_test.jsx.snap +338 -390
  34. package/src/widgets/__tests__/__snapshots__/image_test.jsx.snap +38 -4
  35. package/src/widgets/__tests__/__snapshots__/interactive-graph_test.jsx.snap +114 -12
  36. package/src/widgets/__tests__/__snapshots__/matrix_test.jsx.snap +120 -48
  37. package/src/widgets/__tests__/__snapshots__/numeric-input_test.jsx.snap +8 -12
  38. package/src/widgets/__tests__/__snapshots__/radio_test.jsx.snap +3615 -4517
  39. package/src/widgets/__tests__/graded-group-set-jipt_test.jsx +0 -1
  40. package/src/widgets/__tests__/grapher.cypress.jsx +236 -176
  41. package/src/widgets/__tests__/group_test.jsx +4 -4
  42. package/src/widgets/__tests__/interactive-graph.cypress.jsx +371 -291
  43. package/src/widgets/__tests__/radio_test.jsx +73 -114
  44. package/src/widgets/definition.jsx +34 -32
  45. package/src/widgets/interactive-graph.jsx +4 -4
  46. package/src/widgets/label-image/answer-choices.jsx +1 -1
  47. package/src/widgets/label-image.jsx +1 -1
  48. package/src/widgets/molecule/molecule-drawing.jsx +1 -1
  49. package/src/widgets/numeric-input.jsx +2 -15
  50. package/src/widgets/radio/base-radio.jsx +1 -1
  51. package/src/widgets/radio/choice-icon.jsx +11 -10
  52. package/src/widgets/radio/choice.jsx +164 -396
  53. package/src/widgets/radio/cross-out-button.jsx +3 -5
  54. package/src/widgets/radio/option-status.jsx +4 -5
  55. package/src/widgets/radio/__stories__/cross-out-menu.stories.jsx +0 -59
  56. package/src/widgets/radio/__stories__/cross-out-tooltip.stories.jsx +0 -59
  57. package/src/widgets/radio/__stories__/toggleable-radio-button.stories.jsx +0 -28
  58. package/src/widgets/radio/cross-out-menu-wrapper.jsx +0 -492
  59. package/src/widgets/radio/cross-out-tooltip.jsx +0 -129
  60. package/src/widgets/radio/toggleable-radio-button.jsx +0 -133
@@ -38,8 +38,25 @@ exports[`image widget - isMobile %b should snapshot: first render 1`] = `
38
38
  style="padding-bottom: 82.14%;"
39
39
  />
40
40
  <span
41
- style="background: url(/images/spinner.gif) no-repeat; background-position: center; width: 100%; height: 100%; position: absolute; min-width: 20px;"
42
- />
41
+ style="top: 0px; left: 0px; width: 100%; height: 100%; position: absolute; min-width: 20px; display: flex; justify-content: center; align-content: center;"
42
+ >
43
+ <div
44
+ class="default_xu2jcg-o_O-spinnerContainer_agrn11"
45
+ >
46
+ <svg
47
+ height="48"
48
+ viewBox="0 0 48 48"
49
+ width="48"
50
+ xmlns="http://www.w3.org/2000/svg"
51
+ >
52
+ <path
53
+ class="loadingSpinner_1dvgeb3-o_O-inlineStyles_1kzk0y9"
54
+ d="M44.19 23.455a1.91 1.91 0 1 1 3.801 0h.003c.004.18.006.363.006.545 0 13.255-10.745 24-24 24S0 37.255 0 24 10.745 0 24 0c.182 0 .364.002.545.006V.01a1.91 1.91 0 1 1 0 3.801v.015A20.564 20.564 0 0 0 24 3.818C12.854 3.818 3.818 12.854 3.818 24c0 11.146 9.036 20.182 20.182 20.182 11.146 0 20.182-9.036 20.182-20.182 0-.182-.003-.364-.007-.545h.015z"
55
+ fill-rule="nonzero"
56
+ />
57
+ </svg>
58
+ </div>
59
+ </span>
43
60
  </div>
44
61
  <span
45
62
  class="perseus-sr-only"
@@ -246,8 +263,25 @@ exports[`image widget - isMobile %b should snapshot: first render 2`] = `
246
263
  style="padding-bottom: 82.14%;"
247
264
  />
248
265
  <span
249
- style="background: url(/images/spinner.gif) no-repeat; background-position: center; width: 100%; height: 100%; position: absolute; min-width: 20px;"
250
- />
266
+ style="top: 0px; left: 0px; width: 100%; height: 100%; position: absolute; min-width: 20px; display: flex; justify-content: center; align-content: center;"
267
+ >
268
+ <div
269
+ class="default_xu2jcg-o_O-spinnerContainer_agrn11"
270
+ >
271
+ <svg
272
+ height="48"
273
+ viewBox="0 0 48 48"
274
+ width="48"
275
+ xmlns="http://www.w3.org/2000/svg"
276
+ >
277
+ <path
278
+ class="loadingSpinner_1dvgeb3-o_O-inlineStyles_1kzk0y9"
279
+ d="M44.19 23.455a1.91 1.91 0 1 1 3.801 0h.003c.004.18.006.363.006.545 0 13.255-10.745 24-24 24S0 37.255 0 24 10.745 0 24 0c.182 0 .364.002.545.006V.01a1.91 1.91 0 1 1 0 3.801v.015A20.564 20.564 0 0 0 24 3.818C12.854 3.818 3.818 12.854 3.818 24c0 11.146 9.036 20.182 20.182 20.182 11.146 0 20.182-9.036 20.182-20.182 0-.182-.003-.364-.007-.545h.015z"
280
+ fill-rule="nonzero"
281
+ />
282
+ </svg>
283
+ </div>
284
+ </span>
251
285
  </div>
252
286
  <span
253
287
  class="perseus-sr-only"
@@ -477,8 +477,25 @@ exports[`interactive-graph widget question Shoud render predictably: after inter
477
477
  style="width: 400px; height: 400px;"
478
478
  >
479
479
  <span
480
- style="background: url(/images/spinner.gif) no-repeat; background-position: center; width: 100%; height: 100%; position: absolute; min-width: 20px;"
481
- />
480
+ style="top: 0px; left: 0px; width: 100%; height: 100%; position: absolute; min-width: 20px; display: flex; justify-content: center; align-content: center;"
481
+ >
482
+ <div
483
+ class="default_xu2jcg-o_O-spinnerContainer_agrn11"
484
+ >
485
+ <svg
486
+ height="48"
487
+ viewBox="0 0 48 48"
488
+ width="48"
489
+ xmlns="http://www.w3.org/2000/svg"
490
+ >
491
+ <path
492
+ class="loadingSpinner_1dvgeb3-o_O-inlineStyles_1kzk0y9"
493
+ d="M44.19 23.455a1.91 1.91 0 1 1 3.801 0h.003c.004.18.006.363.006.545 0 13.255-10.745 24-24 24S0 37.255 0 24 10.745 0 24 0c.182 0 .364.002.545.006V.01a1.91 1.91 0 1 1 0 3.801v.015A20.564 20.564 0 0 0 24 3.818C12.854 3.818 3.818 12.854 3.818 24c0 11.146 9.036 20.182 20.182 20.182 11.146 0 20.182-9.036 20.182-20.182 0-.182-.003-.364-.007-.545h.015z"
494
+ fill-rule="nonzero"
495
+ />
496
+ </svg>
497
+ </div>
498
+ </span>
482
499
  </div>
483
500
  <div
484
501
  class="graphie"
@@ -892,8 +909,25 @@ exports[`interactive-graph widget question Shoud render predictably: after inter
892
909
  style="width: 425px; height: 425px;"
893
910
  >
894
911
  <span
895
- style="background: url(/images/spinner.gif) no-repeat; background-position: center; width: 100%; height: 100%; position: absolute; min-width: 20px;"
896
- />
912
+ style="top: 0px; left: 0px; width: 100%; height: 100%; position: absolute; min-width: 20px; display: flex; justify-content: center; align-content: center;"
913
+ >
914
+ <div
915
+ class="default_xu2jcg-o_O-spinnerContainer_agrn11"
916
+ >
917
+ <svg
918
+ height="48"
919
+ viewBox="0 0 48 48"
920
+ width="48"
921
+ xmlns="http://www.w3.org/2000/svg"
922
+ >
923
+ <path
924
+ class="loadingSpinner_1dvgeb3-o_O-inlineStyles_1kzk0y9"
925
+ d="M44.19 23.455a1.91 1.91 0 1 1 3.801 0h.003c.004.18.006.363.006.545 0 13.255-10.745 24-24 24S0 37.255 0 24 10.745 0 24 0c.182 0 .364.002.545.006V.01a1.91 1.91 0 1 1 0 3.801v.015A20.564 20.564 0 0 0 24 3.818C12.854 3.818 3.818 12.854 3.818 24c0 11.146 9.036 20.182 20.182 20.182 11.146 0 20.182-9.036 20.182-20.182 0-.182-.003-.364-.007-.545h.015z"
926
+ fill-rule="nonzero"
927
+ />
928
+ </svg>
929
+ </div>
930
+ </span>
897
931
  </div>
898
932
  <div
899
933
  class="graphie"
@@ -1282,8 +1316,25 @@ exports[`interactive-graph widget question Shoud render predictably: after inter
1282
1316
  style="width: 425px; height: 425px;"
1283
1317
  >
1284
1318
  <span
1285
- style="background: url(/images/spinner.gif) no-repeat; background-position: center; width: 100%; height: 100%; position: absolute; min-width: 20px;"
1286
- />
1319
+ style="top: 0px; left: 0px; width: 100%; height: 100%; position: absolute; min-width: 20px; display: flex; justify-content: center; align-content: center;"
1320
+ >
1321
+ <div
1322
+ class="default_xu2jcg-o_O-spinnerContainer_agrn11"
1323
+ >
1324
+ <svg
1325
+ height="48"
1326
+ viewBox="0 0 48 48"
1327
+ width="48"
1328
+ xmlns="http://www.w3.org/2000/svg"
1329
+ >
1330
+ <path
1331
+ class="loadingSpinner_1dvgeb3-o_O-inlineStyles_1kzk0y9"
1332
+ d="M44.19 23.455a1.91 1.91 0 1 1 3.801 0h.003c.004.18.006.363.006.545 0 13.255-10.745 24-24 24S0 37.255 0 24 10.745 0 24 0c.182 0 .364.002.545.006V.01a1.91 1.91 0 1 1 0 3.801v.015A20.564 20.564 0 0 0 24 3.818C12.854 3.818 3.818 12.854 3.818 24c0 11.146 9.036 20.182 20.182 20.182 11.146 0 20.182-9.036 20.182-20.182 0-.182-.003-.364-.007-.545h.015z"
1333
+ fill-rule="nonzero"
1334
+ />
1335
+ </svg>
1336
+ </div>
1337
+ </span>
1287
1338
  </div>
1288
1339
  <div
1289
1340
  class="graphie"
@@ -2194,8 +2245,25 @@ exports[`interactive-graph widget question Shoud render predictably: first rende
2194
2245
  style="width: 400px; height: 400px;"
2195
2246
  >
2196
2247
  <span
2197
- style="background: url(/images/spinner.gif) no-repeat; background-position: center; width: 100%; height: 100%; position: absolute; min-width: 20px;"
2198
- />
2248
+ style="top: 0px; left: 0px; width: 100%; height: 100%; position: absolute; min-width: 20px; display: flex; justify-content: center; align-content: center;"
2249
+ >
2250
+ <div
2251
+ class="default_xu2jcg-o_O-spinnerContainer_agrn11"
2252
+ >
2253
+ <svg
2254
+ height="48"
2255
+ viewBox="0 0 48 48"
2256
+ width="48"
2257
+ xmlns="http://www.w3.org/2000/svg"
2258
+ >
2259
+ <path
2260
+ class="loadingSpinner_1dvgeb3-o_O-inlineStyles_1kzk0y9"
2261
+ d="M44.19 23.455a1.91 1.91 0 1 1 3.801 0h.003c.004.18.006.363.006.545 0 13.255-10.745 24-24 24S0 37.255 0 24 10.745 0 24 0c.182 0 .364.002.545.006V.01a1.91 1.91 0 1 1 0 3.801v.015A20.564 20.564 0 0 0 24 3.818C12.854 3.818 3.818 12.854 3.818 24c0 11.146 9.036 20.182 20.182 20.182 11.146 0 20.182-9.036 20.182-20.182 0-.182-.003-.364-.007-.545h.015z"
2262
+ fill-rule="nonzero"
2263
+ />
2264
+ </svg>
2265
+ </div>
2266
+ </span>
2199
2267
  </div>
2200
2268
  <div
2201
2269
  class="graphie"
@@ -2609,8 +2677,25 @@ exports[`interactive-graph widget question Shoud render predictably: first rende
2609
2677
  style="width: 425px; height: 425px;"
2610
2678
  >
2611
2679
  <span
2612
- style="background: url(/images/spinner.gif) no-repeat; background-position: center; width: 100%; height: 100%; position: absolute; min-width: 20px;"
2613
- />
2680
+ style="top: 0px; left: 0px; width: 100%; height: 100%; position: absolute; min-width: 20px; display: flex; justify-content: center; align-content: center;"
2681
+ >
2682
+ <div
2683
+ class="default_xu2jcg-o_O-spinnerContainer_agrn11"
2684
+ >
2685
+ <svg
2686
+ height="48"
2687
+ viewBox="0 0 48 48"
2688
+ width="48"
2689
+ xmlns="http://www.w3.org/2000/svg"
2690
+ >
2691
+ <path
2692
+ class="loadingSpinner_1dvgeb3-o_O-inlineStyles_1kzk0y9"
2693
+ d="M44.19 23.455a1.91 1.91 0 1 1 3.801 0h.003c.004.18.006.363.006.545 0 13.255-10.745 24-24 24S0 37.255 0 24 10.745 0 24 0c.182 0 .364.002.545.006V.01a1.91 1.91 0 1 1 0 3.801v.015A20.564 20.564 0 0 0 24 3.818C12.854 3.818 3.818 12.854 3.818 24c0 11.146 9.036 20.182 20.182 20.182 11.146 0 20.182-9.036 20.182-20.182 0-.182-.003-.364-.007-.545h.015z"
2694
+ fill-rule="nonzero"
2695
+ />
2696
+ </svg>
2697
+ </div>
2698
+ </span>
2614
2699
  </div>
2615
2700
  <div
2616
2701
  class="graphie"
@@ -2811,8 +2896,25 @@ exports[`interactive-graph widget question Shoud render predictably: first rende
2811
2896
  style="width: 425px; height: 425px;"
2812
2897
  >
2813
2898
  <span
2814
- style="background: url(/images/spinner.gif) no-repeat; background-position: center; width: 100%; height: 100%; position: absolute; min-width: 20px;"
2815
- />
2899
+ style="top: 0px; left: 0px; width: 100%; height: 100%; position: absolute; min-width: 20px; display: flex; justify-content: center; align-content: center;"
2900
+ >
2901
+ <div
2902
+ class="default_xu2jcg-o_O-spinnerContainer_agrn11"
2903
+ >
2904
+ <svg
2905
+ height="48"
2906
+ viewBox="0 0 48 48"
2907
+ width="48"
2908
+ xmlns="http://www.w3.org/2000/svg"
2909
+ >
2910
+ <path
2911
+ class="loadingSpinner_1dvgeb3-o_O-inlineStyles_1kzk0y9"
2912
+ d="M44.19 23.455a1.91 1.91 0 1 1 3.801 0h.003c.004.18.006.363.006.545 0 13.255-10.745 24-24 24S0 37.255 0 24 10.745 0 24 0c.182 0 .364.002.545.006V.01a1.91 1.91 0 1 1 0 3.801v.015A20.564 20.564 0 0 0 24 3.818C12.854 3.818 3.818 12.854 3.818 24c0 11.146 9.036 20.182 20.182 20.182 11.146 0 20.182-9.036 20.182-20.182 0-.182-.003-.364-.007-.545h.015z"
2913
+ fill-rule="nonzero"
2914
+ />
2915
+ </svg>
2916
+ </div>
2917
+ </span>
2816
2918
  </div>
2817
2919
  <div
2818
2920
  class="graphie"
@@ -91,8 +91,11 @@ exports[`matrix widget should snapshot on mobile: first mobile render 1`] = `
91
91
  class="matrix-input-field"
92
92
  >
93
93
  <input
94
- class="inside"
95
- style="height: 30px; width: 40px; margin: 3px;"
94
+ autocapitalize="off"
95
+ autocomplete="off"
96
+ autocorrect="off"
97
+ class="input_1t4b01j-o_O-LabelMedium_1rew30o-o_O-default_1r2dwp3"
98
+ id="input-13"
96
99
  type="text"
97
100
  value=""
98
101
  />
@@ -101,8 +104,11 @@ exports[`matrix widget should snapshot on mobile: first mobile render 1`] = `
101
104
  class="matrix-input-field"
102
105
  >
103
106
  <input
104
- class="outside"
105
- style="height: 30px; width: 40px; margin: 3px;"
107
+ autocapitalize="off"
108
+ autocomplete="off"
109
+ autocorrect="off"
110
+ class="input_1t4b01j-o_O-LabelMedium_1rew30o-o_O-default_1r2dwp3"
111
+ id="input-14"
106
112
  type="text"
107
113
  value=""
108
114
  />
@@ -111,8 +117,11 @@ exports[`matrix widget should snapshot on mobile: first mobile render 1`] = `
111
117
  class="matrix-input-field"
112
118
  >
113
119
  <input
114
- class="outside"
115
- style="height: 30px; width: 40px; margin: 3px;"
120
+ autocapitalize="off"
121
+ autocomplete="off"
122
+ autocorrect="off"
123
+ class="input_1t4b01j-o_O-LabelMedium_1rew30o-o_O-default_1r2dwp3"
124
+ id="input-15"
116
125
  type="text"
117
126
  value=""
118
127
  />
@@ -121,8 +130,11 @@ exports[`matrix widget should snapshot on mobile: first mobile render 1`] = `
121
130
  class="matrix-input-field"
122
131
  >
123
132
  <input
124
- class="outside"
125
- style="height: 30px; width: 40px; margin: 3px;"
133
+ autocapitalize="off"
134
+ autocomplete="off"
135
+ autocorrect="off"
136
+ class="input_1t4b01j-o_O-LabelMedium_1rew30o-o_O-default_1r2dwp3"
137
+ id="input-16"
126
138
  type="text"
127
139
  value=""
128
140
  />
@@ -135,8 +147,11 @@ exports[`matrix widget should snapshot on mobile: first mobile render 1`] = `
135
147
  class="matrix-input-field"
136
148
  >
137
149
  <input
138
- class="outside"
139
- style="height: 30px; width: 40px; margin: 3px;"
150
+ autocapitalize="off"
151
+ autocomplete="off"
152
+ autocorrect="off"
153
+ class="input_1t4b01j-o_O-LabelMedium_1rew30o-o_O-default_1r2dwp3"
154
+ id="input-17"
140
155
  type="text"
141
156
  value=""
142
157
  />
@@ -145,8 +160,11 @@ exports[`matrix widget should snapshot on mobile: first mobile render 1`] = `
145
160
  class="matrix-input-field"
146
161
  >
147
162
  <input
148
- class="outside"
149
- style="height: 30px; width: 40px; margin: 3px;"
163
+ autocapitalize="off"
164
+ autocomplete="off"
165
+ autocorrect="off"
166
+ class="input_1t4b01j-o_O-LabelMedium_1rew30o-o_O-default_1r2dwp3"
167
+ id="input-18"
150
168
  type="text"
151
169
  value=""
152
170
  />
@@ -155,8 +173,11 @@ exports[`matrix widget should snapshot on mobile: first mobile render 1`] = `
155
173
  class="matrix-input-field"
156
174
  >
157
175
  <input
158
- class="outside"
159
- style="height: 30px; width: 40px; margin: 3px;"
176
+ autocapitalize="off"
177
+ autocomplete="off"
178
+ autocorrect="off"
179
+ class="input_1t4b01j-o_O-LabelMedium_1rew30o-o_O-default_1r2dwp3"
180
+ id="input-19"
160
181
  type="text"
161
182
  value=""
162
183
  />
@@ -165,8 +186,11 @@ exports[`matrix widget should snapshot on mobile: first mobile render 1`] = `
165
186
  class="matrix-input-field"
166
187
  >
167
188
  <input
168
- class="outside"
169
- style="height: 30px; width: 40px; margin: 3px;"
189
+ autocapitalize="off"
190
+ autocomplete="off"
191
+ autocorrect="off"
192
+ class="input_1t4b01j-o_O-LabelMedium_1rew30o-o_O-default_1r2dwp3"
193
+ id="input-20"
170
194
  type="text"
171
195
  value=""
172
196
  />
@@ -179,8 +203,11 @@ exports[`matrix widget should snapshot on mobile: first mobile render 1`] = `
179
203
  class="matrix-input-field"
180
204
  >
181
205
  <input
182
- class="outside"
183
- style="height: 30px; width: 40px; margin: 3px;"
206
+ autocapitalize="off"
207
+ autocomplete="off"
208
+ autocorrect="off"
209
+ class="input_1t4b01j-o_O-LabelMedium_1rew30o-o_O-default_1r2dwp3"
210
+ id="input-21"
184
211
  type="text"
185
212
  value=""
186
213
  />
@@ -189,8 +216,11 @@ exports[`matrix widget should snapshot on mobile: first mobile render 1`] = `
189
216
  class="matrix-input-field"
190
217
  >
191
218
  <input
192
- class="outside"
193
- style="height: 30px; width: 40px; margin: 3px;"
219
+ autocapitalize="off"
220
+ autocomplete="off"
221
+ autocorrect="off"
222
+ class="input_1t4b01j-o_O-LabelMedium_1rew30o-o_O-default_1r2dwp3"
223
+ id="input-22"
194
224
  type="text"
195
225
  value=""
196
226
  />
@@ -199,8 +229,11 @@ exports[`matrix widget should snapshot on mobile: first mobile render 1`] = `
199
229
  class="matrix-input-field"
200
230
  >
201
231
  <input
202
- class="outside"
203
- style="height: 30px; width: 40px; margin: 3px;"
232
+ autocapitalize="off"
233
+ autocomplete="off"
234
+ autocorrect="off"
235
+ class="input_1t4b01j-o_O-LabelMedium_1rew30o-o_O-default_1r2dwp3"
236
+ id="input-23"
204
237
  type="text"
205
238
  value=""
206
239
  />
@@ -209,8 +242,11 @@ exports[`matrix widget should snapshot on mobile: first mobile render 1`] = `
209
242
  class="matrix-input-field"
210
243
  >
211
244
  <input
212
- class="outside"
213
- style="height: 30px; width: 40px; margin: 3px;"
245
+ autocapitalize="off"
246
+ autocomplete="off"
247
+ autocorrect="off"
248
+ class="input_1t4b01j-o_O-LabelMedium_1rew30o-o_O-default_1r2dwp3"
249
+ id="input-24"
214
250
  type="text"
215
251
  value=""
216
252
  />
@@ -313,8 +349,11 @@ exports[`matrix widget should snapshot: first render 1`] = `
313
349
  class="matrix-input-field"
314
350
  >
315
351
  <input
316
- class="inside"
317
- style="height: 30px; width: 40px; margin: 3px;"
352
+ autocapitalize="off"
353
+ autocomplete="off"
354
+ autocorrect="off"
355
+ class="input_1t4b01j-o_O-LabelMedium_1rew30o-o_O-default_1r2dwp3"
356
+ id="input-1"
318
357
  type="text"
319
358
  value=""
320
359
  />
@@ -323,8 +362,11 @@ exports[`matrix widget should snapshot: first render 1`] = `
323
362
  class="matrix-input-field"
324
363
  >
325
364
  <input
326
- class="outside"
327
- style="height: 30px; width: 40px; margin: 3px;"
365
+ autocapitalize="off"
366
+ autocomplete="off"
367
+ autocorrect="off"
368
+ class="input_1t4b01j-o_O-LabelMedium_1rew30o-o_O-default_1r2dwp3"
369
+ id="input-2"
328
370
  type="text"
329
371
  value=""
330
372
  />
@@ -333,8 +375,11 @@ exports[`matrix widget should snapshot: first render 1`] = `
333
375
  class="matrix-input-field"
334
376
  >
335
377
  <input
336
- class="outside"
337
- style="height: 30px; width: 40px; margin: 3px;"
378
+ autocapitalize="off"
379
+ autocomplete="off"
380
+ autocorrect="off"
381
+ class="input_1t4b01j-o_O-LabelMedium_1rew30o-o_O-default_1r2dwp3"
382
+ id="input-3"
338
383
  type="text"
339
384
  value=""
340
385
  />
@@ -343,8 +388,11 @@ exports[`matrix widget should snapshot: first render 1`] = `
343
388
  class="matrix-input-field"
344
389
  >
345
390
  <input
346
- class="outside"
347
- style="height: 30px; width: 40px; margin: 3px;"
391
+ autocapitalize="off"
392
+ autocomplete="off"
393
+ autocorrect="off"
394
+ class="input_1t4b01j-o_O-LabelMedium_1rew30o-o_O-default_1r2dwp3"
395
+ id="input-4"
348
396
  type="text"
349
397
  value=""
350
398
  />
@@ -357,8 +405,11 @@ exports[`matrix widget should snapshot: first render 1`] = `
357
405
  class="matrix-input-field"
358
406
  >
359
407
  <input
360
- class="outside"
361
- style="height: 30px; width: 40px; margin: 3px;"
408
+ autocapitalize="off"
409
+ autocomplete="off"
410
+ autocorrect="off"
411
+ class="input_1t4b01j-o_O-LabelMedium_1rew30o-o_O-default_1r2dwp3"
412
+ id="input-5"
362
413
  type="text"
363
414
  value=""
364
415
  />
@@ -367,8 +418,11 @@ exports[`matrix widget should snapshot: first render 1`] = `
367
418
  class="matrix-input-field"
368
419
  >
369
420
  <input
370
- class="outside"
371
- style="height: 30px; width: 40px; margin: 3px;"
421
+ autocapitalize="off"
422
+ autocomplete="off"
423
+ autocorrect="off"
424
+ class="input_1t4b01j-o_O-LabelMedium_1rew30o-o_O-default_1r2dwp3"
425
+ id="input-6"
372
426
  type="text"
373
427
  value=""
374
428
  />
@@ -377,8 +431,11 @@ exports[`matrix widget should snapshot: first render 1`] = `
377
431
  class="matrix-input-field"
378
432
  >
379
433
  <input
380
- class="outside"
381
- style="height: 30px; width: 40px; margin: 3px;"
434
+ autocapitalize="off"
435
+ autocomplete="off"
436
+ autocorrect="off"
437
+ class="input_1t4b01j-o_O-LabelMedium_1rew30o-o_O-default_1r2dwp3"
438
+ id="input-7"
382
439
  type="text"
383
440
  value=""
384
441
  />
@@ -387,8 +444,11 @@ exports[`matrix widget should snapshot: first render 1`] = `
387
444
  class="matrix-input-field"
388
445
  >
389
446
  <input
390
- class="outside"
391
- style="height: 30px; width: 40px; margin: 3px;"
447
+ autocapitalize="off"
448
+ autocomplete="off"
449
+ autocorrect="off"
450
+ class="input_1t4b01j-o_O-LabelMedium_1rew30o-o_O-default_1r2dwp3"
451
+ id="input-8"
392
452
  type="text"
393
453
  value=""
394
454
  />
@@ -401,8 +461,11 @@ exports[`matrix widget should snapshot: first render 1`] = `
401
461
  class="matrix-input-field"
402
462
  >
403
463
  <input
404
- class="outside"
405
- style="height: 30px; width: 40px; margin: 3px;"
464
+ autocapitalize="off"
465
+ autocomplete="off"
466
+ autocorrect="off"
467
+ class="input_1t4b01j-o_O-LabelMedium_1rew30o-o_O-default_1r2dwp3"
468
+ id="input-9"
406
469
  type="text"
407
470
  value=""
408
471
  />
@@ -411,8 +474,11 @@ exports[`matrix widget should snapshot: first render 1`] = `
411
474
  class="matrix-input-field"
412
475
  >
413
476
  <input
414
- class="outside"
415
- style="height: 30px; width: 40px; margin: 3px;"
477
+ autocapitalize="off"
478
+ autocomplete="off"
479
+ autocorrect="off"
480
+ class="input_1t4b01j-o_O-LabelMedium_1rew30o-o_O-default_1r2dwp3"
481
+ id="input-10"
416
482
  type="text"
417
483
  value=""
418
484
  />
@@ -421,8 +487,11 @@ exports[`matrix widget should snapshot: first render 1`] = `
421
487
  class="matrix-input-field"
422
488
  >
423
489
  <input
424
- class="outside"
425
- style="height: 30px; width: 40px; margin: 3px;"
490
+ autocapitalize="off"
491
+ autocomplete="off"
492
+ autocorrect="off"
493
+ class="input_1t4b01j-o_O-LabelMedium_1rew30o-o_O-default_1r2dwp3"
494
+ id="input-11"
426
495
  type="text"
427
496
  value=""
428
497
  />
@@ -431,8 +500,11 @@ exports[`matrix widget should snapshot: first render 1`] = `
431
500
  class="matrix-input-field"
432
501
  >
433
502
  <input
434
- class="outside"
435
- style="height: 30px; width: 40px; margin: 3px;"
503
+ autocapitalize="off"
504
+ autocomplete="off"
505
+ autocorrect="off"
506
+ class="input_1t4b01j-o_O-LabelMedium_1rew30o-o_O-default_1r2dwp3"
507
+ id="input-12"
436
508
  type="text"
437
509
  value=""
438
510
  />
@@ -99,13 +99,12 @@ exports[`numeric-input widget (options: {"satStyling":false}) question Should re
99
99
  <span>
100
100
  <div>
101
101
  <input
102
- aria-describedby="input-with-examples-bnVtZXJpYy1pbnB1dCAx"
103
102
  aria-label="Your answer:"
104
103
  autocapitalize="off"
105
104
  autocomplete="off"
106
105
  autocorrect="off"
107
- class="perseus-input perseus-interactive perseus-focused perseus-input-size-normal"
108
- spellcheck="false"
106
+ class="input_1t4b01j-o_O-LabelMedium_1rew30o-o_O-default_1r2dwp3-o_O-focused_1z0d9ul"
107
+ id="input-with-examples-bnVtZXJpYy1pbnB1dCAx"
109
108
  type="text"
110
109
  value="1252"
111
110
  />
@@ -311,13 +310,12 @@ exports[`numeric-input widget (options: {"satStyling":false}) question Should re
311
310
  <span>
312
311
  <div>
313
312
  <input
314
- aria-describedby="input-with-examples-bnVtZXJpYy1pbnB1dCAx"
315
313
  aria-label="Your answer:"
316
314
  autocapitalize="off"
317
315
  autocomplete="off"
318
316
  autocorrect="off"
319
- class="perseus-input perseus-interactive perseus-input-size-normal"
320
- spellcheck="false"
317
+ class="input_1t4b01j-o_O-LabelMedium_1rew30o-o_O-default_1r2dwp3"
318
+ id="input-with-examples-bnVtZXJpYy1pbnB1dCAx"
321
319
  type="text"
322
320
  value=""
323
321
  />
@@ -531,13 +529,12 @@ exports[`numeric-input widget (options: {"satStyling":true}) question Should ren
531
529
  <span>
532
530
  <div>
533
531
  <input
534
- aria-describedby="input-with-examples-bnVtZXJpYy1pbnB1dCAx"
535
532
  aria-label="Your answer:"
536
533
  autocapitalize="off"
537
534
  autocomplete="off"
538
535
  autocorrect="off"
539
- class="perseus-input perseus-interactive perseus-focused perseus-input-size-normal"
540
- spellcheck="false"
536
+ class="input_1t4b01j-o_O-LabelMedium_1rew30o-o_O-default_1r2dwp3-o_O-focused_1z0d9ul"
537
+ id="input-with-examples-bnVtZXJpYy1pbnB1dCAx"
541
538
  type="text"
542
539
  value="1252"
543
540
  />
@@ -751,13 +748,12 @@ exports[`numeric-input widget (options: {"satStyling":true}) question Should ren
751
748
  <span>
752
749
  <div>
753
750
  <input
754
- aria-describedby="input-with-examples-bnVtZXJpYy1pbnB1dCAx"
755
751
  aria-label="Your answer:"
756
752
  autocapitalize="off"
757
753
  autocomplete="off"
758
754
  autocorrect="off"
759
- class="perseus-input perseus-interactive perseus-input-size-normal"
760
- spellcheck="false"
755
+ class="input_1t4b01j-o_O-LabelMedium_1rew30o-o_O-default_1r2dwp3"
756
+ id="input-with-examples-bnVtZXJpYy1pbnB1dCAx"
761
757
  type="text"
762
758
  value=""
763
759
  />