@khanacademy/perseus 4.0.2 → 6.0.0

package/src/__tests__/__snapshots__/server-item-renderer.test.tsx.snap

@@ -4,191 +4,183 @@ exports[`server item renderer should snapshot: initial render 1`] = `
 <div>
   <div>
     <div>
-      <span
-        class="mock-KatexProvider"
+      <div
+        class="perseus-renderer perseus-renderer-responsive"
       >
         <div
-          class="perseus-renderer perseus-renderer-responsive"
+          class="paragraph"
+          data-perseus-paragraph-index="0"
         >
           <div
             class="paragraph"
-            data-perseus-paragraph-index="0"
           >
-            <div
-              class="paragraph"
+            Enter the number 
+            <span
+              style="white-space: nowrap;"
             >
-              Enter the number 
+              <span />
               <span
-                style="white-space: nowrap;"
-              >
-                <span />
-                <span
-                  class="mock-TeX"
-                />
-                <span />
-              </span>
-              -42
+                class="mock-TeX"
+              />
+              <span />
+            </span>
+            -42
+            <span
+              style="white-space: nowrap;"
+            >
+              <span />
               <span
-                style="white-space: nowrap;"
-              >
-                <span />
-                <span
-                  class="mock-TeX"
-                />
-                <span />
-              </span>
-               in the box: 
-              <div
-                class="perseus-widget-container widget-nohighlight widget-inline-block"
-              >
-                <span>
-                  <div>
-                    <input
-                      autocapitalize="off"
-                      autocomplete="off"
-                      autocorrect="off"
-                      class="input_1t4b01j-o_O-LabelMedium_1rew30o-o_O-default_1r2dwp3-o_O-default_1gznapd-o_O-leftAlign_7jg4r4"
-                      id="input-with-examples-aW5wdXQtbnVtYmVyIDE"
-                      type="text"
-                      value=""
-                    />
-                  </div>
+                class="mock-TeX"
+              />
+              <span />
+            </span>
+             in the box: 
+            <div
+              class="perseus-widget-container widget-nohighlight widget-inline-block"
+            >
+              <span>
+                <div>
+                  <input
+                    autocapitalize="off"
+                    autocomplete="off"
+                    autocorrect="off"
+                    class="input_1t4b01j-o_O-LabelMedium_1rew30o-o_O-default_1r2dwp3-o_O-default_1gznapd-o_O-leftAlign_7jg4r4"
+                    id="input-with-examples-aW5wdXQtbnVtYmVyIDE"
+                    type="text"
+                    value=""
+                  />
+                </div>
+                <div
+                  style="position: relative; height: 0px; display: none;"
+                >
                   <div
-                    style="position: relative; height: 0px; display: none;"
+                    class="tooltipContainer"
+                    style="position: absolute; left: 0px;"
                   >
                     <div
-                      class="tooltipContainer"
-                      style="position: absolute; left: 0px;"
+                      style="display: block; position: relative; visibility: visible; left: 0px; top: -1px; width: 12px; height: 11px; margin-top: -1px; margin-bottom: -2px; z-index: 10;"
                     >
                       <div
-                        style="display: block; position: relative; visibility: visible; left: 0px; top: -1px; width: 12px; height: 11px; margin-top: -1px; margin-bottom: -2px; z-index: 10;"
-                      >
-                        <div
-                          style="display: block; height: 0px; width: 0px; position: absolute; left: 0px; top: -1px; border-right: 12px solid transparent; border-bottom: 12px solid #ccc;"
-                        />
-                        <div
-                          style="display: block; height: 0px; width: 0px; position: absolute; left: 1px; top: 1px; border-right: 10px solid transparent; border-bottom: 10px solid white;"
-                        />
-                      </div>
+                        style="display: block; height: 0px; width: 0px; position: absolute; left: 0px; top: -1px; border-right: 12px solid transparent; border-bottom: 12px solid #ccc;"
+                      />
                       <div
-                        class="perseus-formats-tooltip preview-measure"
-                        style="position: relative; top: 0px; left: 0px; border: 1px solid #ccc; box-shadow: 0 1px 3px #ccc; z-index: 9;"
+                        style="display: block; height: 0px; width: 0px; position: absolute; left: 1px; top: 1px; border-right: 10px solid transparent; border-bottom: 10px solid white;"
+                      />
+                    </div>
+                    <div
+                      class="perseus-formats-tooltip preview-measure"
+                      style="position: relative; top: 0px; left: 0px; border: 1px solid #ccc; box-shadow: 0 1px 3px #ccc; z-index: 9;"
+                    >
+                      <div
+                        id="input-with-examples-aW5wdXQtbnVtYmVyIDE"
                       >
                         <div
-                          id="input-with-examples-aW5wdXQtbnVtYmVyIDE"
+                          class="perseus-renderer perseus-renderer-responsive"
                         >
-                          <span
-                            class="mock-KatexProvider"
+                          <div
+                            class="paragraph"
+                            data-perseus-paragraph-index="0"
                           >
-                            <div
-                              class="perseus-renderer perseus-renderer-responsive"
-                            >
-                              <div
-                                class="paragraph"
-                                data-perseus-paragraph-index="0"
-                              >
-                                <ul>
-                                  <li>
-                                    <strong>
-                                      Your answer should be
-                                    </strong>
-                                  </li>
-                                  <li>
-                                    an integer, like 
-                                    <span
-                                      style="white-space: nowrap;"
-                                    >
-                                      <span />
-                                      <span
-                                        class="mock-TeX"
-                                      >
-                                        6
-                                      </span>
-                                      <span />
-                                    </span>
-                                  </li>
-                                  <li>
-                                    an 
-                                    <em>
-                                      exact
-                                    </em>
-                                     decimal, like 
-                                    <span
-                                      style="white-space: nowrap;"
-                                    >
-                                      <span />
-                                      <span
-                                        class="mock-TeX"
-                                      >
-                                        0.75
-                                      </span>
-                                      <span />
-                                    </span>
-                                  </li>
-                                  <li>
-                                    a 
-                                    <em>
-                                      simplified proper
-                                    </em>
-                                     fraction, like 
-                                    <span
-                                      style="white-space: nowrap;"
-                                    >
-                                      <span />
-                                      <span
-                                        class="mock-TeX"
-                                      >
-                                        3/5
-                                      </span>
-                                      <span />
-                                    </span>
-                                  </li>
-                                  <li>
-                                    a 
-                                    <em>
-                                      simplified improper
-                                    </em>
-                                     fraction, like 
-                                    <span
-                                      style="white-space: nowrap;"
-                                    >
-                                      <span />
-                                      <span
-                                        class="mock-TeX"
-                                      >
-                                        7/4
-                                      </span>
-                                      <span />
-                                    </span>
-                                  </li>
-                                  <li>
-                                    a mixed number, like 
-                                    <span
-                                      style="white-space: nowrap;"
-                                    >
-                                      <span />
-                                      <span
-                                        class="mock-TeX"
-                                      >
-                                        1\\ 3/4
-                                      </span>
-                                      <span />
-                                    </span>
-                                  </li>
-                                </ul>
-                              </div>
-                            </div>
-                          </span>
+                            <ul>
+                              <li>
+                                <strong>
+                                  Your answer should be
+                                </strong>
+                              </li>
+                              <li>
+                                an integer, like 
+                                <span
+                                  style="white-space: nowrap;"
+                                >
+                                  <span />
+                                  <span
+                                    class="mock-TeX"
+                                  >
+                                    6
+                                  </span>
+                                  <span />
+                                </span>
+                              </li>
+                              <li>
+                                an 
+                                <em>
+                                  exact
+                                </em>
+                                 decimal, like 
+                                <span
+                                  style="white-space: nowrap;"
+                                >
+                                  <span />
+                                  <span
+                                    class="mock-TeX"
+                                  >
+                                    0.75
+                                  </span>
+                                  <span />
+                                </span>
+                              </li>
+                              <li>
+                                a 
+                                <em>
+                                  simplified proper
+                                </em>
+                                 fraction, like 
+                                <span
+                                  style="white-space: nowrap;"
+                                >
+                                  <span />
+                                  <span
+                                    class="mock-TeX"
+                                  >
+                                    3/5
+                                  </span>
+                                  <span />
+                                </span>
+                              </li>
+                              <li>
+                                a 
+                                <em>
+                                  simplified improper
+                                </em>
+                                 fraction, like 
+                                <span
+                                  style="white-space: nowrap;"
+                                >
+                                  <span />
+                                  <span
+                                    class="mock-TeX"
+                                  >
+                                    7/4
+                                  </span>
+                                  <span />
+                                </span>
+                              </li>
+                              <li>
+                                a mixed number, like 
+                                <span
+                                  style="white-space: nowrap;"
+                                >
+                                  <span />
+                                  <span
+                                    class="mock-TeX"
+                                  >
+                                    1\\ 3/4
+                                  </span>
+                                  <span />
+                                </span>
+                              </li>
+                            </ul>
+                          </div>
                         </div>
                       </div>
                     </div>
                   </div>
-                </span>
-              </div>
+                </div>
+              </span>
             </div>
           </div>
         </div>
-      </span>
+      </div>
     </div>
     <div
       class="hintsContainer_1g61p95"
@@ -211,24 +203,20 @@ exports[`server item renderer should snapshot: initial render 1`] = `
           >
             1 / 3
           </span>
-          <span
-            class="mock-KatexProvider"
+          <div
+            class="perseus-renderer perseus-renderer-responsive"
           >
             <div
-              class="perseus-renderer perseus-renderer-responsive"
+              class="paragraph"
+              data-perseus-paragraph-index="0"
             >
               <div
                 class="paragraph"
-                data-perseus-paragraph-index="0"
               >
-                <div
-                  class="paragraph"
-                >
-                  Hint #1
-                </div>
+                Hint #1
               </div>
             </div>
-          </span>
+          </div>
         </div>
         <div
           class="perseus-hint-renderer"
@@ -245,24 +233,20 @@ exports[`server item renderer should snapshot: initial render 1`] = `
           >
             2 / 3
           </span>
-          <span
-            class="mock-KatexProvider"
+          <div
+            class="perseus-renderer perseus-renderer-responsive"
           >
             <div
-              class="perseus-renderer perseus-renderer-responsive"
+              class="paragraph"
+              data-perseus-paragraph-index="0"
             >
               <div
                 class="paragraph"
-                data-perseus-paragraph-index="0"
               >
-                <div
-                  class="paragraph"
-                >
-                  Hint #2
-                </div>
+                Hint #2
               </div>
             </div>
-          </span>
+          </div>
         </div>
         <div
           class="perseus-hint-renderer last-hint last-rendered"
@@ -279,24 +263,20 @@ exports[`server item renderer should snapshot: initial render 1`] = `
           >
             3 / 3
           </span>
-          <span
-            class="mock-KatexProvider"
+          <div
+            class="perseus-renderer perseus-renderer-responsive"
           >
             <div
-              class="perseus-renderer perseus-renderer-responsive"
+              class="paragraph"
+              data-perseus-paragraph-index="0"
             >
               <div
                 class="paragraph"
-                data-perseus-paragraph-index="0"
               >
-                <div
-                  class="paragraph"
-                >
-                  Hint #3
-                </div>
+                Hint #3
               </div>
             </div>
-          </span>
+          </div>
         </div>
       </div>
     </div>

package/src/components/__stories__/button-group.stories.tsx

@@ -30,9 +30,7 @@ const HarnassedButtonGroup = (
     );
 };
 
-export const ButtonsWithNoTitles: React.FC<StoryArgs> = (
-    args,
-): React.ReactElement => {
+export const ButtonsWithNoTitles = (args: StoryArgs): React.ReactElement => {
     return (
         <HarnassedButtonGroup
             buttons={[
@@ -44,9 +42,7 @@ export const ButtonsWithNoTitles: React.FC<StoryArgs> = (
     );
 };
 
-export const ButtonsWithTitles: React.FC<StoryArgs> = (
-    args,
-): React.ReactElement => {
+export const ButtonsWithTitles = (args: StoryArgs): React.ReactElement => {
     return (
         <HarnassedButtonGroup
             buttons={[

package/src/components/__stories__/fixed-to-responsive.stories.tsx

@@ -21,8 +21,8 @@ export default {
     title: "Perseus/Components/Fixed to Responsive",
 } as Story;
 
-export const SmallImageWithSmallContainer: React.FC<StoryArgs> = (
-    args,
+export const SmallImageWithSmallContainer = (
+    args: StoryArgs,
 ): React.ReactElement => {
     return (
         <FixedToResponsive width={width} height={sizeSmall}>
@@ -36,8 +36,8 @@ export const SmallImageWithSmallContainer: React.FC<StoryArgs> = (
     );
 };
 
-export const SmallImageWithMediumContainer: React.FC<StoryArgs> = (
-    args,
+export const SmallImageWithMediumContainer = (
+    args: StoryArgs,
 ): React.ReactElement => {
     return (
         <FixedToResponsive width={width} height={sizeMedium}>
@@ -51,8 +51,8 @@ export const SmallImageWithMediumContainer: React.FC<StoryArgs> = (
     );
 };
 
-export const LargeImageWithLargeContainer: React.FC<StoryArgs> = (
-    args,
+export const LargeImageWithLargeContainer = (
+    args: StoryArgs,
 ): React.ReactElement => {
     return (
         <FixedToResponsive width={width} height={sizeLarge}>
@@ -66,8 +66,8 @@ export const LargeImageWithLargeContainer: React.FC<StoryArgs> = (
     );
 };
 
-export const LargeImageWithSmallerContainer: React.FC<StoryArgs> = (
-    args,
+export const LargeImageWithSmallerContainer = (
+    args: StoryArgs,
 ): React.ReactElement => {
     return (
         <FixedToResponsive width={width} height={sizeSmall}>
@@ -81,9 +81,9 @@ export const LargeImageWithSmallerContainer: React.FC<StoryArgs> = (
     );
 };
 
-export const TwoOverlayedImagesInsteadOneResponsiveContainer: React.FC<
-    StoryArgs
-> = (args): React.ReactElement => {
+export const TwoOverlayedImagesInsteadOneResponsiveContainer = (
+    args: StoryArgs,
+): React.ReactElement => {
     return (
         <FixedToResponsive width={width} height={sizeSmall}>
             <img
@@ -104,8 +104,8 @@ export const TwoOverlayedImagesInsteadOneResponsiveContainer: React.FC<
     );
 };
 
-export const HeightConstrainingAnImage: React.FC<StoryArgs> = (
-    args,
+export const HeightConstrainingAnImage = (
+    args: StoryArgs,
 ): React.ReactElement => {
     return (
         <FixedToResponsive
@@ -123,9 +123,7 @@ export const HeightConstrainingAnImage: React.FC<StoryArgs> = (
     );
 };
 
-export const AllowingFullBleed: React.FC<StoryArgs> = (
-    args,
-): React.ReactElement => {
+export const AllowingFullBleed = (args: StoryArgs): React.ReactElement => {
     return (
         <FixedToResponsive
             width={width}

package/src/components/__stories__/graph.stories.tsx

@@ -15,15 +15,13 @@ export default {
     title: "Perseus/Components/Graph",
 } as Story;
 
-export const SquareBoxSizeAndOtherwiseEmpty: React.FC<StoryArgs> = (
-    args,
+export const SquareBoxSizeAndOtherwiseEmpty = (
+    args: StoryArgs,
 ): React.ReactElement => {
     return <Graph box={[size, size]} />;
 };
 
-export const LabeledSquaredBox: React.FC<StoryArgs> = (
-    args,
-): React.ReactElement => {
+export const LabeledSquaredBox = (args: StoryArgs): React.ReactElement => {
     return (
         <Graph box={[size, size]} labels={["First label", "Second label"]} />
     );

package/src/components/__stories__/graphie.stories.tsx

@@ -16,8 +16,8 @@ export default {
     title: "Perseus/Components/Graphie",
 } as Story;
 
-export const SquareBoxSizeAndOtherwiseEmpty: React.FC<StoryArgs> = (
-    args,
+export const SquareBoxSizeAndOtherwiseEmpty = (
+    args: StoryArgs,
 ): React.ReactElement => {
     return (
         <Graphie
@@ -28,8 +28,6 @@ export const SquareBoxSizeAndOtherwiseEmpty: React.FC<StoryArgs> = (
     );
 };
 
-export const PieChartGraphieLabels: React.FC<StoryArgs> = (
-    args,
-): React.ReactElement => {
+export const PieChartGraphieLabels = (args: StoryArgs): React.ReactElement => {
     return <ItemRendererWithDebugUI item={itemWithPieChart} />;
 };

package/src/components/__stories__/hud.stories.tsx

@@ -12,9 +12,7 @@ export default {
     title: "Perseus/Components/HUD",
 } as Story;
 
-export const TestMessageDisabled: React.FC<StoryArgs> = (
-    args,
-): React.ReactElement => {
+export const TestMessageDisabled = (args: StoryArgs): React.ReactElement => {
     return (
         <Hud
             fixedPosition={false}
@@ -25,9 +23,7 @@ export const TestMessageDisabled: React.FC<StoryArgs> = (
     );
 };
 
-export const TestMessageEnabled: React.FC<StoryArgs> = (
-    args,
-): React.ReactElement => {
+export const TestMessageEnabled = (args: StoryArgs): React.ReactElement => {
     return (
         <Hud
             fixedPosition={false}

package/src/components/__stories__/icon.stories.tsx

@@ -54,7 +54,7 @@ export default {
     },
 } as Story;
 
-export const Icon: React.FC<StoryArgs> = (args): React.ReactElement => (
+export const Icon = (args: StoryArgs): React.ReactElement => (
     <IconComponent
         style={{display: "block"}}
         icon={IconPaths.iconCheck}

package/src/components/__stories__/image-loader.stories.tsx

@@ -15,7 +15,7 @@ export default {
     title: "Perseus/Components/Image Loader",
 } as Story;
 
-export const SvgImage: React.FC<StoryArgs> = (args): React.ReactElement => {
+export const SvgImage = (args: StoryArgs): React.ReactElement => {
     return (
         <ImageLoader
             src={svgUrl}
@@ -29,7 +29,7 @@ export const SvgImage: React.FC<StoryArgs> = (args): React.ReactElement => {
     );
 };
 
-export const PngImage: React.FC<StoryArgs> = (args): React.ReactElement => {
+export const PngImage = (args: StoryArgs): React.ReactElement => {
     return (
         <ImageLoader
             src={imgUrl}
@@ -43,8 +43,8 @@ export const PngImage: React.FC<StoryArgs> = (args): React.ReactElement => {
     );
 };
 
-export const InvalidImageWithChildrenForFailedLoading: React.FC<StoryArgs> = (
-    args,
+export const InvalidImageWithChildrenForFailedLoading = (
+    args: StoryArgs,
 ): React.ReactElement => {
     return (
         <ImageLoader