@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__/image.test.ts.snap CHANGED
@@ -2,111 +2,99 @@
2
2
 
3
3
  exports[`image widget - isMobile %b should snapshot: first render 1`] = `
4
4
  <div>
5
- <span
6
- class="mock-KatexProvider"
5
+ <div
6
+ class="perseus-renderer perseus-renderer-responsive perseus-renderer-two-columns"
7
7
  >
8
8
  <div
9
- class="perseus-renderer perseus-renderer-responsive perseus-renderer-two-columns"
9
+ class="paragraph"
10
+ data-perseus-paragraph-index="0"
10
11
  >
11
12
  <div
12
- class="paragraph"
13
- data-perseus-paragraph-index="0"
13
+ class="perseus-two-columns"
14
14
  >
15
15
  <div
16
- class="perseus-two-columns"
16
+ class="perseus-column"
17
17
  >
18
18
  <div
19
- class="perseus-column"
19
+ class="perseus-column-content"
20
20
  >
21
21
  <div
22
- class="perseus-column-content"
22
+ class="paragraph"
23
23
  >
24
24
  <div
25
- class="paragraph"
25
+ class="perseus-widget-container widget-nohighlight widget-block"
26
26
  >
27
27
  <div
28
- class="perseus-widget-container widget-nohighlight widget-block"
28
+ class="perseus-image-widget"
29
29
  >
30
30
  <div
31
- class="perseus-image-widget"
31
+ class="fixed-to-responsive svg-image"
32
+ style="max-width: 420px; max-height: 345px;"
32
33
  >
33
34
  <div
34
- class="fixed-to-responsive svg-image"
35
- style="max-width: 420px; max-height: 345px;"
35
+ style="padding-bottom: 82.14%;"
36
+ />
37
+ <span
38
+ style="top: 0px; left: 0px; width: 100%; height: 100%; position: absolute; min-width: 20px; display: flex; justify-content: center; align-content: center;"
36
39
  >
37
40
  <div
38
- style="padding-bottom: 82.14%;"
39
- />
40
- <span
41
- style="top: 0px; left: 0px; width: 100%; height: 100%; position: absolute; min-width: 20px; display: flex; justify-content: center; align-content: center;"
41
+ class="default_xu2jcg-o_O-spinnerContainer_agrn11"
42
42
  >
43
- <div
44
- class="default_xu2jcg-o_O-spinnerContainer_agrn11"
43
+ <svg
44
+ height="48"
45
+ viewBox="0 0 48 48"
46
+ width="48"
47
+ xmlns="http://www.w3.org/2000/svg"
45
48
  >
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>
60
- </div>
61
- <span
62
- class="perseus-sr-only"
49
+ <path
50
+ class="loadingSpinner_1dvgeb3-o_O-inlineStyles_1kzk0y9"
51
+ 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"
52
+ fill-rule="nonzero"
53
+ />
54
+ </svg>
55
+ </div>
56
+ </span>
57
+ </div>
58
+ <span
59
+ class="perseus-sr-only"
60
+ >
61
+ <div
62
+ class="perseus-renderer perseus-renderer-responsive"
63
63
  >
64
- <span
65
- class="mock-KatexProvider"
64
+ <div
65
+ class="paragraph"
66
+ data-perseus-paragraph-index="0"
66
67
  >
67
68
  <div
68
- class="perseus-renderer perseus-renderer-responsive"
69
+ class="paragraph"
69
70
  >
70
- <div
71
- class="paragraph"
72
- data-perseus-paragraph-index="0"
73
- >
74
- <div
75
- class="paragraph"
76
- >
77
- An array of isosceles triangles. A triangle has height A. Two smaller triangle, one with height B and one with height C, have approximately the same combined height as A.
78
- </div>
79
- </div>
71
+ An array of isosceles triangles. A triangle has height A. Two smaller triangle, one with height B and one with height C, have approximately the same combined height as A.
80
72
  </div>
81
- </span>
82
- </span>
73
+ </div>
74
+ </div>
75
+ </span>
76
+ <div
77
+ class="perseus-image-caption has-title"
78
+ >
83
79
  <div
84
- class="perseus-image-caption has-title"
80
+ class="caption_4bstk7"
85
81
  >
86
82
  <div
87
- class="caption_4bstk7"
83
+ class="perseus-renderer perseus-renderer-responsive"
88
84
  >
89
- <span
90
- class="mock-KatexProvider"
85
+ <div
86
+ class="paragraph"
87
+ data-perseus-paragraph-index="0"
91
88
  >
92
89
  <div
93
- class="perseus-renderer perseus-renderer-responsive"
90
+ class="paragraph"
94
91
  >
95
- <div
96
- class="paragraph"
97
- data-perseus-paragraph-index="0"
98
- >
99
- <div
100
- class="paragraph"
101
- >
102
- <strong>
103
- Image Title.
104
- </strong>
105
- Image Caption
106
- </div>
107
- </div>
92
+ <strong>
93
+ Image Title.
94
+ </strong>
95
+ Image Caption
108
96
  </div>
109
- </span>
97
+ </div>
110
98
  </div>
111
99
  </div>
112
100
  </div>
@@ -114,291 +102,275 @@ exports[`image widget - isMobile %b should snapshot: first render 1`] = `
114
102
  </div>
115
103
  </div>
116
104
  </div>
105
+ </div>
106
+ <div
107
+ class="perseus-column"
108
+ >
117
109
  <div
118
- class="perseus-column"
110
+ class="perseus-column-content"
119
111
  >
120
112
  <div
121
- class="perseus-column-content"
113
+ class="paragraph"
122
114
  >
123
- <div
124
- class="paragraph"
115
+ A quilter wants to make the design shown at left using the Golden Ratio. Specifically, he wants the ratio of the triangle heights
116
+ <span
117
+ style="white-space: nowrap;"
125
118
  >
126
- A quilter wants to make the design shown at left using the Golden Ratio. Specifically, he wants the ratio of the triangle heights
119
+ <span />
127
120
  <span
128
- style="white-space: nowrap;"
121
+ class="mock-TeX"
129
122
  >
130
- <span />
131
- <span
132
- class="mock-TeX"
133
- >
134
- A:B
135
- </span>
136
- <span />
123
+ A:B
137
124
  </span>
138
- and
125
+ <span />
126
+ </span>
127
+ and
128
+ <span
129
+ style="white-space: nowrap;"
130
+ >
131
+ <span />
139
132
  <span
140
- style="white-space: nowrap;"
133
+ class="mock-TeX"
141
134
  >
142
- <span />
143
- <span
144
- class="mock-TeX"
145
- >
146
- B:C
147
- </span>
148
- <span />
135
+ B:C
149
136
  </span>
150
- to each equal
137
+ <span />
138
+ </span>
139
+ to each equal
140
+ <span
141
+ style="white-space: nowrap;"
142
+ >
143
+ <span />
151
144
  <span
152
- style="white-space: nowrap;"
145
+ class="mock-TeX"
153
146
  >
154
- <span />
155
- <span
156
- class="mock-TeX"
157
- >
158
- 1.62
159
- </span>
160
- <span />
147
+ 1.62
161
148
  </span>
162
- . If the quilter makes the triangle height
149
+ <span />
150
+ </span>
151
+ . If the quilter makes the triangle height
152
+ <span
153
+ style="white-space: nowrap;"
154
+ >
155
+ <span />
163
156
  <span
164
- style="white-space: nowrap;"
157
+ class="mock-TeX"
165
158
  >
166
- <span />
167
- <span
168
- class="mock-TeX"
169
- >
170
- A=8\\ \\text{in}
171
- </span>
172
- <span />
159
+ A=8\\ \\text{in}
173
160
  </span>
174
- , approximately how tall should he make triangle height
161
+ <span />
162
+ </span>
163
+ , approximately how tall should he make triangle height
164
+ <span
165
+ style="white-space: nowrap;"
166
+ >
167
+ <span />
175
168
  <span
176
- style="white-space: nowrap;"
169
+ class="mock-TeX"
177
170
  >
178
- <span />
179
- <span
180
- class="mock-TeX"
181
- >
182
- C
183
- </span>
184
- <span />
171
+ C
185
172
  </span>
186
- ?
187
- </div>
173
+ <span />
174
+ </span>
175
+ ?
188
176
  </div>
189
177
  </div>
190
178
  </div>
191
179
  </div>
192
180
  </div>
193
- </span>
181
+ </div>
194
182
  </div>
195
183
  `;
196
184
 
197
185
  exports[`image widget - isMobile %b should snapshot: first render 2`] = `
198
186
  <div>
199
- <span
200
- class="mock-KatexProvider"
187
+ <div
188
+ class="perseus-renderer perseus-renderer-responsive perseus-renderer-two-columns"
201
189
  >
202
190
  <div
203
- class="perseus-renderer perseus-renderer-responsive perseus-renderer-two-columns"
191
+ class="paragraph"
192
+ data-perseus-paragraph-index="0"
204
193
  >
205
194
  <div
206
- class="paragraph"
207
- data-perseus-paragraph-index="0"
195
+ class="perseus-two-columns"
208
196
  >
209
197
  <div
210
- class="perseus-two-columns"
198
+ class="perseus-column"
211
199
  >
212
200
  <div
213
- class="perseus-column"
201
+ class="perseus-column-content"
214
202
  >
215
203
  <div
216
- class="perseus-column-content"
204
+ class="paragraph"
217
205
  >
218
206
  <div
219
- class="paragraph"
207
+ class="perseus-widget-container widget-nohighlight widget-block"
220
208
  >
221
209
  <div
222
- class="perseus-widget-container widget-nohighlight widget-block"
210
+ class="perseus-image-widget"
223
211
  >
224
212
  <div
225
- class="perseus-image-widget"
213
+ class="perseus-image-title"
226
214
  >
227
215
  <div
228
- class="perseus-image-title"
216
+ class="perseus-renderer perseus-renderer-responsive"
229
217
  >
230
- <span
231
- class="mock-KatexProvider"
218
+ <div
219
+ class="paragraph"
220
+ data-perseus-paragraph-index="0"
232
221
  >
233
222
  <div
234
- class="perseus-renderer perseus-renderer-responsive"
223
+ class="paragraph"
235
224
  >
236
- <div
237
- class="paragraph"
238
- data-perseus-paragraph-index="0"
239
- >
240
- <div
241
- class="paragraph"
242
- >
243
- Image Title
244
- </div>
245
- </div>
225
+ Image Title
246
226
  </div>
247
- </span>
227
+ </div>
248
228
  </div>
229
+ </div>
230
+ <div
231
+ class="fixed-to-responsive svg-image"
232
+ style="max-width: 420px; max-height: 345px;"
233
+ >
249
234
  <div
250
- class="fixed-to-responsive svg-image"
251
- style="max-width: 420px; max-height: 345px;"
235
+ style="padding-bottom: 82.14%;"
236
+ />
237
+ <span
238
+ style="top: 0px; left: 0px; width: 100%; height: 100%; position: absolute; min-width: 20px; display: flex; justify-content: center; align-content: center;"
252
239
  >
253
240
  <div
254
- style="padding-bottom: 82.14%;"
255
- />
256
- <span
257
- style="top: 0px; left: 0px; width: 100%; height: 100%; position: absolute; min-width: 20px; display: flex; justify-content: center; align-content: center;"
241
+ class="default_xu2jcg-o_O-spinnerContainer_agrn11"
258
242
  >
259
- <div
260
- class="default_xu2jcg-o_O-spinnerContainer_agrn11"
243
+ <svg
244
+ height="48"
245
+ viewBox="0 0 48 48"
246
+ width="48"
247
+ xmlns="http://www.w3.org/2000/svg"
261
248
  >
262
- <svg
263
- height="48"
264
- viewBox="0 0 48 48"
265
- width="48"
266
- xmlns="http://www.w3.org/2000/svg"
267
- >
268
- <path
269
- class="loadingSpinner_1dvgeb3-o_O-inlineStyles_1kzk0y9"
270
- 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"
271
- fill-rule="nonzero"
272
- />
273
- </svg>
274
- </div>
275
- </span>
276
- </div>
277
- <span
278
- class="perseus-sr-only"
249
+ <path
250
+ class="loadingSpinner_1dvgeb3-o_O-inlineStyles_1kzk0y9"
251
+ 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"
252
+ fill-rule="nonzero"
253
+ />
254
+ </svg>
255
+ </div>
256
+ </span>
257
+ </div>
258
+ <span
259
+ class="perseus-sr-only"
260
+ >
261
+ <div
262
+ class="perseus-renderer perseus-renderer-responsive"
279
263
  >
280
- <span
281
- class="mock-KatexProvider"
264
+ <div
265
+ class="paragraph"
266
+ data-perseus-paragraph-index="0"
282
267
  >
283
268
  <div
284
- class="perseus-renderer perseus-renderer-responsive"
269
+ class="paragraph"
285
270
  >
286
- <div
287
- class="paragraph"
288
- data-perseus-paragraph-index="0"
289
- >
290
- <div
291
- class="paragraph"
292
- >
293
- An array of isosceles triangles. A triangle has height A. Two smaller triangle, one with height B and one with height C, have approximately the same combined height as A.
294
- </div>
295
- </div>
271
+ An array of isosceles triangles. A triangle has height A. Two smaller triangle, one with height B and one with height C, have approximately the same combined height as A.
296
272
  </div>
297
- </span>
298
- </span>
273
+ </div>
274
+ </div>
275
+ </span>
276
+ <div
277
+ class="perseus-image-caption"
278
+ >
299
279
  <div
300
- class="perseus-image-caption"
280
+ class="perseus-renderer perseus-renderer-responsive"
301
281
  >
302
- <span
303
- class="mock-KatexProvider"
282
+ <div
283
+ class="paragraph"
284
+ data-perseus-paragraph-index="0"
304
285
  >
305
286
  <div
306
- class="perseus-renderer perseus-renderer-responsive"
287
+ class="paragraph"
307
288
  >
308
- <div
309
- class="paragraph"
310
- data-perseus-paragraph-index="0"
311
- >
312
- <div
313
- class="paragraph"
314
- >
315
- Image Caption
316
- </div>
317
- </div>
289
+ Image Caption
318
290
  </div>
319
- </span>
291
+ </div>
320
292
  </div>
321
293
  </div>
322
294
  </div>
323
295
  </div>
324
296
  </div>
325
297
  </div>
298
+ </div>
299
+ <div
300
+ class="perseus-column"
301
+ >
326
302
  <div
327
- class="perseus-column"
303
+ class="perseus-column-content"
328
304
  >
329
305
  <div
330
- class="perseus-column-content"
306
+ class="paragraph"
331
307
  >
332
- <div
333
- class="paragraph"
308
+ A quilter wants to make the design shown at left using the Golden Ratio. Specifically, he wants the ratio of the triangle heights
309
+ <span
310
+ style="white-space: nowrap;"
334
311
  >
335
- A quilter wants to make the design shown at left using the Golden Ratio. Specifically, he wants the ratio of the triangle heights
312
+ <span />
336
313
  <span
337
- style="white-space: nowrap;"
314
+ class="mock-TeX"
338
315
  >
339
- <span />
340
- <span
341
- class="mock-TeX"
342
- >
343
- A:B
344
- </span>
345
- <span />
316
+ A:B
346
317
  </span>
347
- and
318
+ <span />
319
+ </span>
320
+ and
321
+ <span
322
+ style="white-space: nowrap;"
323
+ >
324
+ <span />
348
325
  <span
349
- style="white-space: nowrap;"
326
+ class="mock-TeX"
350
327
  >
351
- <span />
352
- <span
353
- class="mock-TeX"
354
- >
355
- B:C
356
- </span>
357
- <span />
328
+ B:C
358
329
  </span>
359
- to each equal
330
+ <span />
331
+ </span>
332
+ to each equal
333
+ <span
334
+ style="white-space: nowrap;"
335
+ >
336
+ <span />
360
337
  <span
361
- style="white-space: nowrap;"
338
+ class="mock-TeX"
362
339
  >
363
- <span />
364
- <span
365
- class="mock-TeX"
366
- >
367
- 1.62
368
- </span>
369
- <span />
340
+ 1.62
370
341
  </span>
371
- . If the quilter makes the triangle height
342
+ <span />
343
+ </span>
344
+ . If the quilter makes the triangle height
345
+ <span
346
+ style="white-space: nowrap;"
347
+ >
348
+ <span />
372
349
  <span
373
- style="white-space: nowrap;"
350
+ class="mock-TeX"
374
351
  >
375
- <span />
376
- <span
377
- class="mock-TeX"
378
- >
379
- A=8\\ \\text{in}
380
- </span>
381
- <span />
352
+ A=8\\ \\text{in}
382
353
  </span>
383
- , approximately how tall should he make triangle height
354
+ <span />
355
+ </span>
356
+ , approximately how tall should he make triangle height
357
+ <span
358
+ style="white-space: nowrap;"
359
+ >
360
+ <span />
384
361
  <span
385
- style="white-space: nowrap;"
362
+ class="mock-TeX"
386
363
  >
387
- <span />
388
- <span
389
- class="mock-TeX"
390
- >
391
- C
392
- </span>
393
- <span />
364
+ C
394
365
  </span>
395
- ?
396
- </div>
366
+ <span />
367
+ </span>
368
+ ?
397
369
  </div>
398
370
  </div>
399
371
  </div>
400
372
  </div>
401
373
  </div>
402
- </span>
374
+ </div>
403
375
  </div>
404
376
  `;