@khanacademy/perseus 4.0.2 → 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 (249) hide show
  1. package/CHANGELOG.md +57 -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/highlighting/highlightable-content.d.ts +4 -4
  9. package/dist/components/highlighting/highlightable-content.js.flow +4 -7
  10. package/dist/components/highlighting/ui/highlight-renderer.d.ts +6 -6
  11. package/dist/components/highlighting/ui/highlight-renderer.js.flow +6 -8
  12. package/dist/components/highlighting/ui/highlight-set-renderer.d.ts +5 -5
  13. package/dist/components/highlighting/ui/highlight-set-renderer.js.flow +5 -8
  14. package/dist/components/highlighting/ui/highlight-tooltip.d.ts +2 -2
  15. package/dist/components/highlighting/ui/highlight-tooltip.js.flow +2 -4
  16. package/dist/components/highlighting/ui/highlighting-ui.d.ts +2 -2
  17. package/dist/components/highlighting/ui/highlighting-ui.js.flow +2 -2
  18. package/dist/components/highlighting/ui/selection-tracker.d.ts +5 -5
  19. package/dist/components/highlighting/ui/selection-tracker.js.flow +5 -7
  20. package/dist/components/highlighting/word-indexer.d.ts +2 -2
  21. package/dist/components/highlighting/word-indexer.js.flow +2 -2
  22. package/dist/components/hud.d.ts +8 -14
  23. package/dist/components/hud.js.flow +7 -14
  24. package/dist/components/inline-icon.d.ts +27 -3
  25. package/dist/components/inline-icon.js.flow +26 -3
  26. package/dist/components/lint.d.ts +41 -13
  27. package/dist/components/lint.js.flow +42 -13
  28. package/dist/components/math-output.d.ts +15 -11
  29. package/dist/components/math-output.js.flow +15 -11
  30. package/dist/components/simple-keypad-input.d.ts +1 -1
  31. package/dist/components/simple-keypad-input.js.flow +1 -1
  32. package/dist/components/sortable.d.ts +17 -9
  33. package/dist/components/sortable.js.flow +22 -9
  34. package/dist/components/svg-image.d.ts +5 -3
  35. package/dist/components/svg-image.js.flow +5 -3
  36. package/dist/components/tex-buttons.d.ts +2 -2
  37. package/dist/components/tex-buttons.js.flow +2 -2
  38. package/dist/components/tooltip.d.ts +45 -4
  39. package/dist/components/tooltip.js.flow +44 -31
  40. package/dist/error-boundary.d.ts +4 -4
  41. package/dist/error-boundary.js.flow +4 -6
  42. package/dist/es/index.css +0 -3
  43. package/dist/es/index.js +484 -658
  44. package/dist/es/index.js.map +1 -1
  45. package/dist/index.css +0 -3
  46. package/dist/index.js +488 -655
  47. package/dist/index.js.map +1 -1
  48. package/dist/perseus-types.d.ts +11 -10
  49. package/dist/perseus-types.js.flow +11 -10
  50. package/dist/renderer.d.ts +2 -2
  51. package/dist/renderer.js.flow +1 -3
  52. package/dist/styles/shared.d.ts +0 -1
  53. package/dist/styles/shared.js.flow +0 -1
  54. package/dist/types.d.ts +0 -10
  55. package/dist/types.js.flow +0 -13
  56. package/dist/util/a11y.d.ts +0 -1
  57. package/dist/util/a11y.js.flow +0 -1
  58. package/dist/util/interactive.d.ts +2 -0
  59. package/dist/util/interactive.js.flow +2 -0
  60. package/dist/util.d.ts +3 -3
  61. package/dist/util.js.flow +4 -3
  62. package/dist/widgets/__stories__/test-keypad-context-wrapper.d.ts +2 -2
  63. package/dist/widgets/__stories__/test-keypad-context-wrapper.js.flow +2 -4
  64. package/dist/widgets/expression.d.ts +2 -2
  65. package/dist/widgets/expression.js.flow +2 -2
  66. package/dist/widgets/grapher.d.ts +1 -1
  67. package/dist/widgets/grapher.js.flow +12 -3
  68. package/dist/widgets/interaction/element-container.d.ts +5 -4
  69. package/dist/widgets/interaction/element-container.js.flow +6 -11
  70. package/dist/widgets/label-image/marker.d.ts +4 -4
  71. package/dist/widgets/label-image/marker.js.flow +4 -6
  72. package/dist/widgets/matcher.d.ts +7 -3
  73. package/dist/widgets/matcher.js.flow +7 -3
  74. package/dist/widgets/number-line.d.ts +1 -1
  75. package/dist/widgets/number-line.js.flow +1 -1
  76. package/dist/widgets/numeric-input.d.ts +0 -2
  77. package/dist/widgets/numeric-input.js.flow +0 -4
  78. package/dist/widgets/radio/base-radio.d.ts +7 -1
  79. package/dist/widgets/radio/base-radio.js.flow +7 -1
  80. package/dist/widgets/radio/choice-icon/choice-icon.d.ts +1 -1
  81. package/dist/widgets/radio/choice-icon/choice-icon.js.flow +1 -1
  82. package/dist/widgets/radio/choice-icon/cross-out-line.d.ts +2 -2
  83. package/dist/widgets/radio/choice-icon/cross-out-line.js.flow +2 -2
  84. package/dist/widgets/radio/focus-ring.d.ts +8 -1
  85. package/dist/widgets/radio/focus-ring.js.flow +8 -1
  86. package/dist/widgets/radio/option-status.d.ts +2 -2
  87. package/dist/widgets/radio/option-status.js.flow +2 -2
  88. package/dist/widgets/video-transcript-link.d.ts +1 -1
  89. package/dist/widgets/video-transcript-link.js.flow +1 -1
  90. package/package.json +4 -4
  91. package/src/__stories__/item-renderer.stories.tsx +2 -6
  92. package/src/__stories__/server-item-renderer.stories.tsx +2 -6
  93. package/src/__tests__/__snapshots__/item-renderer.test.tsx.snap +151 -159
  94. package/src/__tests__/__snapshots__/renderer.test.tsx.snap +358 -394
  95. package/src/__tests__/__snapshots__/server-item-renderer.test.tsx.snap +169 -189
  96. package/src/components/__stories__/button-group.stories.tsx +2 -6
  97. package/src/components/__stories__/fixed-to-responsive.stories.tsx +14 -16
  98. package/src/components/__stories__/graph.stories.tsx +3 -5
  99. package/src/components/__stories__/graphie.stories.tsx +3 -5
  100. package/src/components/__stories__/hud.stories.tsx +2 -6
  101. package/src/components/__stories__/icon.stories.tsx +1 -1
  102. package/src/components/__stories__/image-loader.stories.tsx +4 -4
  103. package/src/components/__stories__/info-tip.stories.tsx +2 -6
  104. package/src/components/__stories__/inline-icon.stories.tsx +4 -8
  105. package/src/components/__stories__/input-with-examples.stories.tsx +6 -10
  106. package/src/components/__stories__/lint.stories.tsx +62 -27
  107. package/src/components/__stories__/math-input.stories.tsx +4 -8
  108. package/src/components/__stories__/math-output.stories.tsx +3 -5
  109. package/src/components/__stories__/multi-button-group.stories.tsx +2 -6
  110. package/src/components/__stories__/number-input.stories.tsx +6 -8
  111. package/src/components/__stories__/prop-check-box.stories.tsx +9 -9
  112. package/src/components/__stories__/range-input.stories.tsx +4 -6
  113. package/src/components/__stories__/simple-keypad-input.stories.tsx +2 -4
  114. package/src/components/__stories__/sortable.stories.tsx +20 -20
  115. package/src/components/__stories__/stub-tag-editor.stories.tsx +5 -9
  116. package/src/components/__stories__/svg-image.stories.tsx +10 -18
  117. package/src/components/__stories__/tex.stories.tsx +1 -3
  118. package/src/components/__stories__/text-buttons.stories.tsx +10 -22
  119. package/src/components/__stories__/text-input.stories.tsx +4 -10
  120. package/src/components/__stories__/text-list-editor.stories.tsx +1 -3
  121. package/src/components/__stories__/tooltip.stories.tsx +52 -0
  122. package/src/components/__stories__/zoomable-tex.stories.tsx +6 -4
  123. package/src/components/__stories__/zoomable.stories.tsx +1 -3
  124. package/src/components/__tests__/__snapshots__/sortable.test.tsx.snap +114 -30
  125. package/src/components/__tests__/__snapshots__/sorter.test.tsx.snap +172 -204
  126. package/src/components/__tests__/sortable.test.tsx +54 -16
  127. package/src/components/__tests__/sorter.test.tsx +12 -9
  128. package/src/components/fixed-to-responsive.tsx +43 -38
  129. package/src/components/graph.tsx +95 -81
  130. package/src/components/graphie.tsx +62 -32
  131. package/src/components/highlighting/highlightable-content.tsx +4 -7
  132. package/src/components/highlighting/ui/highlight-renderer.tsx +6 -9
  133. package/src/components/highlighting/ui/highlight-set-renderer.tsx +5 -8
  134. package/src/components/highlighting/ui/highlight-tooltip.tsx +2 -2
  135. package/src/components/highlighting/ui/highlighting-ui.tsx +2 -2
  136. package/src/components/highlighting/ui/selection-tracker.tsx +5 -8
  137. package/src/components/highlighting/word-indexer.tsx +2 -2
  138. package/src/components/hud.tsx +104 -115
  139. package/src/components/inline-icon.tsx +17 -34
  140. package/src/components/input-with-examples.tsx +4 -4
  141. package/src/components/lint.tsx +47 -41
  142. package/src/components/math-output.tsx +17 -11
  143. package/src/components/simple-keypad-input.tsx +4 -4
  144. package/src/components/sortable.tsx +134 -94
  145. package/src/components/svg-image.tsx +10 -11
  146. package/src/components/tex-buttons.tsx +2 -2
  147. package/src/components/tooltip.tsx +189 -171
  148. package/src/components/visibility-observer/__stories__/visibility-observer.stories.tsx +1 -3
  149. package/src/error-boundary.tsx +4 -7
  150. package/src/interactive2/types.ts +2 -2
  151. package/src/multi-items/__stories__/multi-renderer.stories.tsx +1 -1
  152. package/src/multi-items/__tests__/__snapshots__/multi-renderer.test.tsx.snap +708 -764
  153. package/src/multi-items/__tests__/multi-renderer.test.tsx +2 -3
  154. package/src/perseus-types.ts +13 -12
  155. package/src/renderer.tsx +11 -22
  156. package/src/types.ts +0 -18
  157. package/src/util/graphie.ts +3 -3
  158. package/src/util/interactive.ts +18 -5
  159. package/src/util/tex.ts +13 -77
  160. package/src/util.ts +3 -4
  161. package/src/widgets/__stories__/categorizer.stories.tsx +1 -1
  162. package/src/widgets/__stories__/cs-program.stories.tsx +1 -1
  163. package/src/widgets/__stories__/definition.stories.tsx +3 -7
  164. package/src/widgets/__stories__/dropdown.stories.tsx +1 -1
  165. package/src/widgets/__stories__/explanation.stories.tsx +2 -2
  166. package/src/widgets/__stories__/expression.stories.tsx +5 -11
  167. package/src/widgets/__stories__/graded-group-set.stories.tsx +1 -1
  168. package/src/widgets/__stories__/graded-group.stories.tsx +1 -1
  169. package/src/widgets/__stories__/grapher.stories.tsx +7 -21
  170. package/src/widgets/__stories__/group.stories.tsx +1 -1
  171. package/src/widgets/__stories__/iframe.stories.tsx +1 -1
  172. package/src/widgets/__stories__/image.stories.tsx +1 -1
  173. package/src/widgets/__stories__/input-number.stories.tsx +3 -12
  174. package/src/widgets/__stories__/interaction.stories.tsx +1 -1
  175. package/src/widgets/__stories__/interactive-graph.stories.tsx +9 -9
  176. package/src/widgets/__stories__/matcher.stories.tsx +1 -1
  177. package/src/widgets/__stories__/matrix.stories.tsx +1 -1
  178. package/src/widgets/__stories__/number-line.stories.tsx +1 -1
  179. package/src/widgets/__stories__/numeric-input.stories.tsx +3 -5
  180. package/src/widgets/__stories__/orderer.stories.tsx +1 -1
  181. package/src/widgets/__stories__/passage-ref.stories.tsx +2 -2
  182. package/src/widgets/__stories__/passage.stories.tsx +3 -9
  183. package/src/widgets/__stories__/radio.stories.tsx +3 -5
  184. package/src/widgets/__stories__/sorter.stories.tsx +1 -1
  185. package/src/widgets/__stories__/test-keypad-context-wrapper.tsx +2 -4
  186. package/src/widgets/__stories__/transformer.stories.tsx +1 -1
  187. package/src/widgets/__stories__/unit.stories.tsx +1 -3
  188. package/src/widgets/__stories__/video-transcript-link.stories.tsx +2 -6
  189. package/src/widgets/__stories__/video.stories.tsx +1 -1
  190. package/src/widgets/__testdata__/group.testdata.ts +0 -2
  191. package/src/widgets/__tests__/__snapshots__/categorizer.test.ts.snap +717 -773
  192. package/src/widgets/__tests__/__snapshots__/cs-program.test.ts.snap +28 -36
  193. package/src/widgets/__tests__/__snapshots__/definition.test.ts.snap +52 -60
  194. package/src/widgets/__tests__/__snapshots__/dropdown.test.ts.snap +100 -108
  195. package/src/widgets/__tests__/__snapshots__/explanation.test.ts.snap +212 -260
  196. package/src/widgets/__tests__/__snapshots__/graded-group-set-jipt.test.ts.snap +613 -641
  197. package/src/widgets/__tests__/__snapshots__/graded-group-set.test.ts.snap +249 -261
  198. package/src/widgets/__tests__/__snapshots__/graded-group.test.ts.snap +671 -735
  199. package/src/widgets/__tests__/__snapshots__/grapher.test.ts.snap +2676 -2684
  200. package/src/widgets/__tests__/__snapshots__/group.test.tsx.snap +938 -1002
  201. package/src/widgets/__tests__/__snapshots__/iframe.test.ts.snap +28 -36
  202. package/src/widgets/__tests__/__snapshots__/image.test.ts.snap +227 -255
  203. package/src/widgets/__tests__/__snapshots__/input-number.test.ts.snap +353 -357
  204. package/src/widgets/__tests__/__snapshots__/interaction.test.ts.snap +255 -259
  205. package/src/widgets/__tests__/__snapshots__/interactive-graph.test.ts.snap +2401 -2433
  206. package/src/widgets/__tests__/__snapshots__/matcher.test.tsx.snap +600 -756
  207. package/src/widgets/__tests__/__snapshots__/matrix.test.ts.snap +420 -428
  208. package/src/widgets/__tests__/__snapshots__/number-line.test.ts.snap +762 -770
  209. package/src/widgets/__tests__/__snapshots__/numeric-input.test.ts.snap +373 -393
  210. package/src/widgets/__tests__/__snapshots__/orderer.test.ts.snap +116 -148
  211. package/src/widgets/__tests__/__snapshots__/passage-ref.test.ts.snap +289 -301
  212. package/src/widgets/__tests__/__snapshots__/passage.test.tsx.snap +1679 -1711
  213. package/src/widgets/__tests__/__snapshots__/radio.test.ts.snap +2692 -2960
  214. package/src/widgets/__tests__/__snapshots__/video.test.ts.snap +90 -98
  215. package/src/widgets/__tests__/group.test.tsx +0 -2
  216. package/src/widgets/__tests__/matcher.test.tsx +33 -9
  217. package/src/widgets/__tests__/radio/focus-ring.test.tsx +0 -1
  218. package/src/widgets/expression.tsx +12 -9
  219. package/src/widgets/grapher.tsx +3 -3
  220. package/src/widgets/image.tsx +2 -2
  221. package/src/widgets/interaction/element-container.tsx +7 -8
  222. package/src/widgets/interactive-graph.tsx +5 -5
  223. package/src/widgets/label-image/__stories__/answer-choices.stories.tsx +2 -4
  224. package/src/widgets/label-image/__stories__/marker.stories.tsx +9 -19
  225. package/src/widgets/label-image/marker.tsx +4 -4
  226. package/src/widgets/matcher.tsx +43 -24
  227. package/src/widgets/number-line.tsx +1 -1
  228. package/src/widgets/numeric-input.tsx +0 -3
  229. package/src/widgets/passage/passage-markdown.tsx +2 -2
  230. package/src/widgets/radio/__stories__/base-radio.stories.tsx +11 -19
  231. package/src/widgets/radio/__stories__/choice-icon.stories.tsx +9 -11
  232. package/src/widgets/radio/__stories__/choice-none-above.stories.tsx +1 -1
  233. package/src/widgets/radio/__stories__/choice.stories.tsx +4 -4
  234. package/src/widgets/radio/__stories__/focus-ring.stories.tsx +1 -1
  235. package/src/widgets/radio/__stories__/option-status.stories.tsx +2 -4
  236. package/src/widgets/radio/base-radio.tsx +1 -1
  237. package/src/widgets/radio/choice-icon/choice-icon.tsx +5 -5
  238. package/src/widgets/radio/choice-icon/cross-out-line.tsx +1 -3
  239. package/src/widgets/radio/choice-none-above.tsx +2 -2
  240. package/src/widgets/radio/choice.tsx +1 -3
  241. package/src/widgets/radio/focus-ring.tsx +1 -1
  242. package/src/widgets/radio/option-status.tsx +2 -4
  243. package/src/widgets/radio/widget.tsx +0 -1
  244. package/src/widgets/reaction-diagram.tsx +2 -2
  245. package/src/widgets/simulator.tsx +4 -6
  246. package/src/widgets/video-transcript-link.tsx +1 -1
  247. package/{tsconfig.json → tsconfig-build.json} +6 -6
  248. package/tsconfig-build.tsbuildinfo +1 -0
  249. package/tsconfig.tsbuildinfo +0 -1
package/src/widgets/__tests__/__snapshots__/explanation.test.ts.snap CHANGED
@@ -2,472 +2,424 @@
2
2
 
3
3
  exports[`Explanation should snapshot for article when expanded: expanded 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"
10
11
  >
11
12
  <div
12
13
  class="paragraph"
13
- data-perseus-paragraph-index="0"
14
14
  >
15
+ Here's the explanation
16
+
15
17
  <div
16
- class="paragraph"
18
+ class="perseus-widget-container widget-nohighlight widget-inline"
17
19
  >
18
- Here's the explanation
19
-
20
20
  <div
21
- class="perseus-widget-container widget-nohighlight widget-inline"
21
+ class="container_167wsvl"
22
22
  >
23
23
  <div
24
- class="container_167wsvl"
24
+ class="linkContainer_36rlri-o_O-articleLink_17wlykh"
25
25
  >
26
- <div
27
- class="linkContainer_36rlri-o_O-articleLink_17wlykh"
26
+ <a
27
+ aria-expanded="true"
28
+ class="explanationLink_7n4oib"
29
+ href="javascript:void(0)"
30
+ role="button"
28
31
  >
29
- <a
30
- aria-expanded="true"
31
- class="explanationLink_7n4oib"
32
- href="javascript:void(0)"
33
- role="button"
34
- >
35
- [Hide explanation!]
36
- </a>
37
- </div>
32
+ [Hide explanation!]
33
+ </a>
34
+ </div>
35
+ <div
36
+ class="content_z5b02x-o_O-contentExpanded_1c06cap"
37
+ >
38
38
  <div
39
- class="content_z5b02x-o_O-contentExpanded_1c06cap"
39
+ class="perseus-renderer perseus-renderer-responsive"
40
40
  >
41
- <span
42
- class="mock-KatexProvider"
41
+ <div
42
+ class="paragraph"
43
+ data-perseus-paragraph-index="0"
43
44
  >
44
45
  <div
45
- class="perseus-renderer perseus-renderer-responsive"
46
+ class="paragraph"
46
47
  >
47
- <div
48
- class="paragraph"
49
- data-perseus-paragraph-index="0"
50
- >
51
- <div
52
- class="paragraph"
53
- >
54
- This is an explanation
55
- </div>
56
- </div>
48
+ This is an explanation
57
49
  </div>
58
- </span>
50
+ </div>
59
51
  </div>
60
52
  </div>
61
53
  </div>
62
-
63
- Did you get that?
64
54
  </div>
55
+
56
+ Did you get that?
65
57
  </div>
66
58
  </div>
67
- </span>
59
+ </div>
68
60
  </div>
69
61
  `;
70
62
 
71
63
  exports[`Explanation should snapshot for article+mobile when expanded: expanded 1`] = `
72
64
  <div>
73
- <span
74
- class="mock-KatexProvider"
65
+ <div
66
+ class="perseus-renderer perseus-renderer-responsive"
75
67
  >
76
68
  <div
77
- class="perseus-renderer perseus-renderer-responsive"
69
+ class="paragraph"
70
+ data-perseus-paragraph-index="0"
78
71
  >
79
72
  <div
80
73
  class="paragraph"
81
- data-perseus-paragraph-index="0"
82
74
  >
75
+ Here's the explanation
76
+
83
77
  <div
84
- class="paragraph"
78
+ class="perseus-widget-container widget-nohighlight widget-inline"
85
79
  >
86
- Here's the explanation
87
-
88
80
  <div
89
- class="perseus-widget-container widget-nohighlight widget-inline"
81
+ class="container_167wsvl"
90
82
  >
91
83
  <div
92
- class="container_167wsvl"
84
+ class="linkContainer_36rlri"
93
85
  >
94
- <div
95
- class="linkContainer_36rlri"
86
+ <a
87
+ aria-expanded="true"
88
+ class="mobileExplanationLink_his27d"
89
+ href="javascript:void(0)"
90
+ role="button"
96
91
  >
97
- <a
98
- aria-expanded="true"
99
- class="mobileExplanationLink_his27d"
100
- href="javascript:void(0)"
101
- role="button"
102
- >
103
- Hide explanation!
104
- </a>
105
- <svg
106
- class="disclosureArrow_12nx0hv"
107
- >
108
- <polygon
109
- points="0,14 30,14 15,0"
110
- style="fill: #F0F1F2;"
111
- />
112
- </svg>
113
- </div>
92
+ Hide explanation!
93
+ </a>
94
+ <svg
95
+ class="disclosureArrow_12nx0hv"
96
+ >
97
+ <polygon
98
+ points="0,14 30,14 15,0"
99
+ style="fill: #F0F1F2;"
100
+ />
101
+ </svg>
102
+ </div>
103
+ <div
104
+ class="content_z5b02x-o_O-contentMobile_1wvx5oh-o_O-contentExpandedMobile_knze7z"
105
+ >
114
106
  <div
115
- class="content_z5b02x-o_O-contentMobile_1wvx5oh-o_O-contentExpandedMobile_knze7z"
107
+ class="perseus-renderer perseus-renderer-responsive"
116
108
  >
117
- <span
118
- class="mock-KatexProvider"
109
+ <div
110
+ class="paragraph"
111
+ data-perseus-paragraph-index="0"
119
112
  >
120
113
  <div
121
- class="perseus-renderer perseus-renderer-responsive"
114
+ class="paragraph"
122
115
  >
123
- <div
124
- class="paragraph"
125
- data-perseus-paragraph-index="0"
126
- >
127
- <div
128
- class="paragraph"
129
- >
130
- This is an explanation
131
- </div>
132
- </div>
116
+ This is an explanation
133
117
  </div>
134
- </span>
118
+ </div>
135
119
  </div>
136
120
  </div>
137
121
  </div>
138
-
139
- Did you get that?
140
122
  </div>
123
+
124
+ Did you get that?
141
125
  </div>
142
126
  </div>
143
- </span>
127
+ </div>
144
128
  </div>
145
129
  `;
146
130
 
147
131
  exports[`Explanation should snapshot for article+mobile: initial render 1`] = `
148
132
  <div>
149
- <span
150
- class="mock-KatexProvider"
133
+ <div
134
+ class="perseus-renderer perseus-renderer-responsive"
151
135
  >
152
136
  <div
153
- class="perseus-renderer perseus-renderer-responsive"
137
+ class="paragraph"
138
+ data-perseus-paragraph-index="0"
154
139
  >
155
140
  <div
156
141
  class="paragraph"
157
- data-perseus-paragraph-index="0"
158
142
  >
143
+ Here's the explanation
144
+
159
145
  <div
160
- class="paragraph"
146
+ class="perseus-widget-container widget-nohighlight widget-inline"
161
147
  >
162
- Here's the explanation
163
-
164
148
  <div
165
- class="perseus-widget-container widget-nohighlight widget-inline"
149
+ class="container_167wsvl"
166
150
  >
167
151
  <div
168
- class="container_167wsvl"
152
+ class="linkContainer_36rlri"
169
153
  >
170
- <div
171
- class="linkContainer_36rlri"
154
+ <a
155
+ aria-expanded="false"
156
+ class="mobileExplanationLink_his27d"
157
+ href="javascript:void(0)"
158
+ role="button"
172
159
  >
173
- <a
174
- aria-expanded="false"
175
- class="mobileExplanationLink_his27d"
176
- href="javascript:void(0)"
177
- role="button"
178
- >
179
- Explanation
180
- </a>
181
- </div>
160
+ Explanation
161
+ </a>
182
162
  </div>
183
163
  </div>
184
-
185
- Did you get that?
186
164
  </div>
165
+
166
+ Did you get that?
187
167
  </div>
188
168
  </div>
189
- </span>
169
+ </div>
190
170
  </div>
191
171
  `;
192
172
 
193
173
  exports[`Explanation should snapshot for article: initial render 1`] = `
194
174
  <div>
195
- <span
196
- class="mock-KatexProvider"
175
+ <div
176
+ class="perseus-renderer perseus-renderer-responsive"
197
177
  >
198
178
  <div
199
- class="perseus-renderer perseus-renderer-responsive"
179
+ class="paragraph"
180
+ data-perseus-paragraph-index="0"
200
181
  >
201
182
  <div
202
183
  class="paragraph"
203
- data-perseus-paragraph-index="0"
204
184
  >
185
+ Here's the explanation
186
+
205
187
  <div
206
- class="paragraph"
188
+ class="perseus-widget-container widget-nohighlight widget-inline"
207
189
  >
208
- Here's the explanation
209
-
210
190
  <div
211
- class="perseus-widget-container widget-nohighlight widget-inline"
191
+ class="container_167wsvl"
212
192
  >
213
193
  <div
214
- class="container_167wsvl"
194
+ class="linkContainer_36rlri-o_O-articleLink_17wlykh"
215
195
  >
216
- <div
217
- class="linkContainer_36rlri-o_O-articleLink_17wlykh"
196
+ <a
197
+ aria-expanded="false"
198
+ class="explanationLink_7n4oib"
199
+ href="javascript:void(0)"
200
+ role="button"
218
201
  >
219
- <a
220
- aria-expanded="false"
221
- class="explanationLink_7n4oib"
222
- href="javascript:void(0)"
223
- role="button"
224
- >
225
- [Explanation]
226
- </a>
227
- </div>
202
+ [Explanation]
203
+ </a>
228
204
  </div>
229
205
  </div>
230
-
231
- Did you get that?
232
206
  </div>
207
+
208
+ Did you get that?
233
209
  </div>
234
210
  </div>
235
- </span>
211
+ </div>
236
212
  </div>
237
213
  `;
238
214
 
239
215
  exports[`Explanation should snapshot for mobile when expanded: expanded 1`] = `
240
216
  <div>
241
- <span
242
- class="mock-KatexProvider"
217
+ <div
218
+ class="perseus-renderer perseus-renderer-responsive"
243
219
  >
244
220
  <div
245
- class="perseus-renderer perseus-renderer-responsive"
221
+ class="paragraph"
222
+ data-perseus-paragraph-index="0"
246
223
  >
247
224
  <div
248
225
  class="paragraph"
249
- data-perseus-paragraph-index="0"
250
226
  >
227
+ Here's the explanation
228
+
251
229
  <div
252
- class="paragraph"
230
+ class="perseus-widget-container widget-nohighlight widget-inline"
253
231
  >
254
- Here's the explanation
255
-
256
232
  <div
257
- class="perseus-widget-container widget-nohighlight widget-inline"
233
+ class="container_167wsvl"
258
234
  >
259
235
  <div
260
- class="container_167wsvl"
236
+ class="linkContainer_36rlri"
261
237
  >
262
- <div
263
- class="linkContainer_36rlri"
238
+ <a
239
+ aria-expanded="true"
240
+ class="mobileExplanationLink_his27d"
241
+ href="javascript:void(0)"
242
+ role="button"
264
243
  >
265
- <a
266
- aria-expanded="true"
267
- class="mobileExplanationLink_his27d"
268
- href="javascript:void(0)"
269
- role="button"
270
- >
271
- Hide explanation!
272
- </a>
273
- <svg
274
- class="disclosureArrow_12nx0hv"
275
- >
276
- <polygon
277
- points="0,14 30,14 15,0"
278
- style="fill: #F0F1F2;"
279
- />
280
- </svg>
281
- </div>
244
+ Hide explanation!
245
+ </a>
246
+ <svg
247
+ class="disclosureArrow_12nx0hv"
248
+ >
249
+ <polygon
250
+ points="0,14 30,14 15,0"
251
+ style="fill: #F0F1F2;"
252
+ />
253
+ </svg>
254
+ </div>
255
+ <div
256
+ class="content_z5b02x-o_O-contentMobile_1wvx5oh-o_O-contentExpandedMobile_knze7z"
257
+ >
282
258
  <div
283
- class="content_z5b02x-o_O-contentMobile_1wvx5oh-o_O-contentExpandedMobile_knze7z"
259
+ class="perseus-renderer perseus-renderer-responsive"
284
260
  >
285
- <span
286
- class="mock-KatexProvider"
261
+ <div
262
+ class="paragraph"
263
+ data-perseus-paragraph-index="0"
287
264
  >
288
265
  <div
289
- class="perseus-renderer perseus-renderer-responsive"
266
+ class="paragraph"
290
267
  >
291
- <div
292
- class="paragraph"
293
- data-perseus-paragraph-index="0"
294
- >
295
- <div
296
- class="paragraph"
297
- >
298
- This is an explanation
299
- </div>
300
- </div>
268
+ This is an explanation
301
269
  </div>
302
- </span>
270
+ </div>
303
271
  </div>
304
272
  </div>
305
273
  </div>
306
-
307
- Did you get that?
308
274
  </div>
275
+
276
+ Did you get that?
309
277
  </div>
310
278
  </div>
311
- </span>
279
+ </div>
312
280
  </div>
313
281
  `;
314
282
 
315
283
  exports[`Explanation should snapshot for mobile: initial render 1`] = `
316
284
  <div>
317
- <span
318
- class="mock-KatexProvider"
285
+ <div
286
+ class="perseus-renderer perseus-renderer-responsive"
319
287
  >
320
288
  <div
321
- class="perseus-renderer perseus-renderer-responsive"
289
+ class="paragraph"
290
+ data-perseus-paragraph-index="0"
322
291
  >
323
292
  <div
324
293
  class="paragraph"
325
- data-perseus-paragraph-index="0"
326
294
  >
295
+ Here's the explanation
296
+
327
297
  <div
328
- class="paragraph"
298
+ class="perseus-widget-container widget-nohighlight widget-inline"
329
299
  >
330
- Here's the explanation
331
-
332
300
  <div
333
- class="perseus-widget-container widget-nohighlight widget-inline"
301
+ class="container_167wsvl"
334
302
  >
335
303
  <div
336
- class="container_167wsvl"
304
+ class="linkContainer_36rlri"
337
305
  >
338
- <div
339
- class="linkContainer_36rlri"
306
+ <a
307
+ aria-expanded="false"
308
+ class="mobileExplanationLink_his27d"
309
+ href="javascript:void(0)"
310
+ role="button"
340
311
  >
341
- <a
342
- aria-expanded="false"
343
- class="mobileExplanationLink_his27d"
344
- href="javascript:void(0)"
345
- role="button"
346
- >
347
- Explanation
348
- </a>
349
- </div>
312
+ Explanation
313
+ </a>
350
314
  </div>
351
315
  </div>
352
-
353
- Did you get that?
354
316
  </div>
317
+
318
+ Did you get that?
355
319
  </div>
356
320
  </div>
357
- </span>
321
+ </div>
358
322
  </div>
359
323
  `;
360
324
 
361
325
  exports[`Explanation should snapshot when expanded: expanded 1`] = `
362
326
  <div>
363
- <span
364
- class="mock-KatexProvider"
327
+ <div
328
+ class="perseus-renderer perseus-renderer-responsive"
365
329
  >
366
330
  <div
367
- class="perseus-renderer perseus-renderer-responsive"
331
+ class="paragraph"
332
+ data-perseus-paragraph-index="0"
368
333
  >
369
334
  <div
370
335
  class="paragraph"
371
- data-perseus-paragraph-index="0"
372
336
  >
337
+ Here's the explanation
338
+
373
339
  <div
374
- class="paragraph"
340
+ class="perseus-widget-container widget-nohighlight widget-inline"
375
341
  >
376
- Here's the explanation
377
-
378
342
  <div
379
- class="perseus-widget-container widget-nohighlight widget-inline"
343
+ class="container_167wsvl"
380
344
  >
381
345
  <div
382
- class="container_167wsvl"
346
+ class="linkContainer_36rlri-o_O-exerciseLink_574wt1"
383
347
  >
384
- <div
385
- class="linkContainer_36rlri-o_O-exerciseLink_574wt1"
348
+ <a
349
+ aria-expanded="true"
350
+ class="explanationLink_7n4oib"
351
+ href="javascript:void(0)"
352
+ role="button"
386
353
  >
387
- <a
388
- aria-expanded="true"
389
- class="explanationLink_7n4oib"
390
- href="javascript:void(0)"
391
- role="button"
392
- >
393
- [Hide explanation!]
394
- </a>
395
- </div>
354
+ [Hide explanation!]
355
+ </a>
356
+ </div>
357
+ <div
358
+ class="content_z5b02x-o_O-contentExpanded_1c06cap"
359
+ >
396
360
  <div
397
- class="content_z5b02x-o_O-contentExpanded_1c06cap"
361
+ class="perseus-renderer perseus-renderer-responsive"
398
362
  >
399
- <span
400
- class="mock-KatexProvider"
363
+ <div
364
+ class="paragraph"
365
+ data-perseus-paragraph-index="0"
401
366
  >
402
367
  <div
403
- class="perseus-renderer perseus-renderer-responsive"
368
+ class="paragraph"
404
369
  >
405
- <div
406
- class="paragraph"
407
- data-perseus-paragraph-index="0"
408
- >
409
- <div
410
- class="paragraph"
411
- >
412
- This is an explanation
413
- </div>
414
- </div>
370
+ This is an explanation
415
371
  </div>
416
- </span>
372
+ </div>
417
373
  </div>
418
374
  </div>
419
375
  </div>
420
-
421
- Did you get that?
422
376
  </div>
377
+
378
+ Did you get that?
423
379
  </div>
424
380
  </div>
425
- </span>
381
+ </div>
426
382
  </div>
427
383
  `;
428
384
 
429
385
  exports[`Explanation should snapshot: initial render 1`] = `
430
386
  <div>
431
- <span
432
- class="mock-KatexProvider"
387
+ <div
388
+ class="perseus-renderer perseus-renderer-responsive"
433
389
  >
434
390
  <div
435
- class="perseus-renderer perseus-renderer-responsive"
391
+ class="paragraph"
392
+ data-perseus-paragraph-index="0"
436
393
  >
437
394
  <div
438
395
  class="paragraph"
439
- data-perseus-paragraph-index="0"
440
396
  >
397
+ Here's the explanation
398
+
441
399
  <div
442
- class="paragraph"
400
+ class="perseus-widget-container widget-nohighlight widget-inline"
443
401
  >
444
- Here's the explanation
445
-
446
402
  <div
447
- class="perseus-widget-container widget-nohighlight widget-inline"
403
+ class="container_167wsvl"
448
404
  >
449
405
  <div
450
- class="container_167wsvl"
406
+ class="linkContainer_36rlri-o_O-exerciseLink_574wt1"
451
407
  >
452
- <div
453
- class="linkContainer_36rlri-o_O-exerciseLink_574wt1"
408
+ <a
409
+ aria-expanded="false"
410
+ class="explanationLink_7n4oib"
411
+ href="javascript:void(0)"
412
+ role="button"
454
413
  >
455
- <a
456
- aria-expanded="false"
457
- class="explanationLink_7n4oib"
458
- href="javascript:void(0)"
459
- role="button"
460
- >
461
- [Explanation]
462
- </a>
463
- </div>
414
+ [Explanation]
415
+ </a>
464
416
  </div>
465
417
  </div>
466
-
467
- Did you get that?
468
418
  </div>
419
+
420
+ Did you get that?
469
421
  </div>
470
422
  </div>
471
- </span>
423
+ </div>
472
424
  </div>
473
425
  `;