@khanacademy/perseus 4.0.2 → 6.0.0

package/src/components/__stories__/text-input.stories.tsx

@@ -16,24 +16,18 @@ const defaultObject = {
     onChange: () => {},
 } as const;
 
-export const EmptyPropsObject: React.FC<StoryArgs> = (
-    args,
-): React.ReactElement => {
+export const EmptyPropsObject = (args: StoryArgs): React.ReactElement => {
     return <TextInput {...defaultObject} />;
 };
 
-export const TestValueProvided: React.FC<StoryArgs> = (
-    args,
-): React.ReactElement => {
+export const TestValueProvided = (args: StoryArgs): React.ReactElement => {
     return <TextInput {...defaultObject} value="Test value" />;
 };
 
-export const AriaLabelTextProvided: React.FC<StoryArgs> = (
-    args,
-): React.ReactElement => {
+export const AriaLabelTextProvided = (args: StoryArgs): React.ReactElement => {
     return <TextInput {...defaultObject} labelText="Test label" />;
 };
 
-export const Disabled: React.FC<StoryArgs> = (args): React.ReactElement => {
+export const Disabled = (args: StoryArgs): React.ReactElement => {
     return <TextInput {...defaultObject} disabled={true} />;
 };

package/src/components/__stories__/text-list-editor.stories.tsx

@@ -22,9 +22,7 @@ const defaultObject = {
 
 const ClassName = "framework-perseus orderer";
 
-export const SimpleListOfOptions: React.FC<StoryArgs> = (
-    args,
-): React.ReactElement => {
+export const SimpleListOfOptions = (args: StoryArgs): React.ReactElement => {
     return (
         // @ts-expect-error [FEI-5003] - TS2322 - Type '{ children: Element; class: string; }' is not assignable to type 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>'.
         <div class={ClassName}>

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

@@ -0,0 +1,52 @@
+import {View} from "@khanacademy/wonder-blocks-core";
+import * as React from "react";
+
+import Tooltip, {HorizontalDirection, VerticalDirection} from "../tooltip";
+
+import type {Meta} from "@storybook/react";
+
+const meta: Meta<typeof Tooltip> = {
+    title: "Perseus/Components/Tooltip",
+};
+
+export const Shown = () => {
+    return (
+        <View style={{margin: "20px"}}>
+            Hover over{" "}
+            <Tooltip
+                show={true}
+                horizontalPosition={HorizontalDirection.Left}
+                horizontalAlign={HorizontalDirection.Left}
+                verticalPosition={VerticalDirection.Bottom}
+            >
+                <span>this</span>
+                <View style={{backgroundColor: "white"}}>
+                    You can read so much more if you want...
+                </View>
+            </Tooltip>{" "}
+            to see more information
+        </View>
+    );
+};
+
+export const Hidden = () => {
+    return (
+        <View style={{margin: "20px"}}>
+            Hover over{" "}
+            <Tooltip
+                show={false}
+                horizontalPosition={HorizontalDirection.Left}
+                horizontalAlign={HorizontalDirection.Left}
+                verticalPosition={VerticalDirection.Bottom}
+            >
+                <span>this</span>
+                <View style={{backgroundColor: "white"}}>
+                    You can read so much more if you want...
+                </View>
+            </Tooltip>{" "}
+            to see more information
+        </View>
+    );
+};
+
+export default meta;

package/src/components/__stories__/zoomable-tex.stories.tsx

@@ -12,16 +12,18 @@ export default {
     title: "Perseus/Components/Zoomable Tex",
 } as Story;
 
-const ForceZoomWrapper: React.FC<{
+type Props = {
     children: React.ReactNode;
-}> = ({children}): React.ReactElement => (
+};
+
+const ForceZoomWrapper = ({children}: Props): React.ReactElement => (
     <>
         <h1>Click on equation to zoom/unzoom</h1>
         <div style={{width: "50px"}}>{children}</div>
     </>
 );
 
-export const KaTeX: React.FC<StoryArgs> = (args): React.ReactElement => {
+export const KaTeX = (args: StoryArgs): React.ReactElement => {
     return (
         <ForceZoomWrapper>
             <ZoomableTex children="\sum_{i=1}^\infty\frac{1}{n^2} =\frac{\pi^2}{6}" />
@@ -29,7 +31,7 @@ export const KaTeX: React.FC<StoryArgs> = (args): React.ReactElement => {
     );
 };
 
-export const ComplexKaTeX: React.FC<StoryArgs> = (args): React.ReactElement => {
+export const ComplexKaTeX = (args: StoryArgs): React.ReactElement => {
     return (
         <ForceZoomWrapper>
             {" "}

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

@@ -27,9 +27,7 @@ const computeChildBounds = (
     };
 };
 
-export const ZoomableExample: React.FC<StoryArgs> = (
-    args,
-): React.ReactElement => {
+export const ZoomableExample = (args: StoryArgs): React.ReactElement => {
     return (
         <Zoomable computeChildBounds={computeChildBounds}>
             <span>

package/src/components/__tests__/__snapshots__/sortable.test.tsx.snap

@@ -1,5 +1,101 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Sortable renders a spinner while waiting for the TeX renderer to load: first render: displays a spinner 1`] = `
+<div>
+  <div
+    class="default_xu2jcg-o_O-spinnerContainer_agrn11"
+  >
+    <svg
+      height="96"
+      viewBox="0 0 96 96"
+      width="96"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        class="loadingSpinner_1dvgeb3-o_O-inlineStyles_1kzk0y9"
+        d="M88.38 46.91a3.818 3.818 0 1 1 7.602 0h.006c.008.362.012.725.012 1.09 0 26.51-21.49 48-48 48S0 74.51 0 48 21.49 0 48 0c.365 0 .728.004 1.09.012v.005a3.818 3.818 0 1 1 0 7.602v.032c-.362-.01-.725-.015-1.09-.015C25.708 7.636 7.636 25.708 7.636 48c0 22.292 18.072 40.364 40.364 40.364 22.292 0 40.364-18.072 40.364-40.364 0-.365-.005-.728-.015-1.09h.032z"
+        fill-rule="nonzero"
+      />
+    </svg>
+  </div>
+  <div
+    style="display: none;"
+  >
+    <div
+      class="fake-tex"
+    >
+      1
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Sortable renders a spinner while waiting for the TeX renderer to load: second render: displays the sortable 1`] = `
+<div>
+  <ul
+    class="sortable_13d4756 perseus-sortable"
+  >
+    <li
+      class="card_1s6cuhy-o_O-draggable_12to336-o_O-horizontalCard_9um937 perseus-interactive perseus-sortable-draggable"
+      style="position: static; margin: 0px 5px 0px 0px;"
+    >
+      <div
+        class="perseus-renderer perseus-renderer-responsive"
+      >
+        <div
+          class="paragraph"
+          data-perseus-paragraph-index="0"
+        >
+          <div
+            class="paragraph"
+          >
+            a
+          </div>
+        </div>
+      </div>
+    </li>
+    <li
+      class="card_1s6cuhy-o_O-draggable_12to336-o_O-horizontalCard_9um937 perseus-interactive perseus-sortable-draggable"
+      style="position: static; margin: 0px 5px 0px 0px;"
+    >
+      <div
+        class="perseus-renderer perseus-renderer-responsive"
+      >
+        <div
+          class="paragraph"
+          data-perseus-paragraph-index="0"
+        >
+          <div
+            class="paragraph"
+          >
+            b
+          </div>
+        </div>
+      </div>
+    </li>
+    <li
+      class="card_1s6cuhy-o_O-draggable_12to336-o_O-horizontalCard_9um937 perseus-interactive perseus-sortable-draggable"
+      style="position: static; margin: 0px;"
+    >
+      <div
+        class="perseus-renderer perseus-renderer-responsive"
+      >
+        <div
+          class="paragraph"
+          data-perseus-paragraph-index="0"
+        >
+          <div
+            class="paragraph"
+          >
+            c
+          </div>
+        </div>
+      </div>
+    </li>
+  </ul>
+</div>
+`;
+
 exports[`Sortable should snapshot: first render 1`] = `
 <div>
   <ul
@@ -9,70 +105,58 @@ exports[`Sortable should snapshot: first render 1`] = `
       class="card_1s6cuhy-o_O-draggable_12to336-o_O-horizontalCard_9um937 perseus-interactive perseus-sortable-draggable"
       style="position: static; margin: 0px 5px 0px 0px;"
     >
-      <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"
-            >
-              a
-            </div>
+            a
           </div>
         </div>
-      </span>
+      </div>
     </li>
     <li
       class="card_1s6cuhy-o_O-draggable_12to336-o_O-horizontalCard_9um937 perseus-interactive perseus-sortable-draggable"
       style="position: static; margin: 0px 5px 0px 0px;"
     >
-      <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"
-            >
-              b
-            </div>
+            b
           </div>
         </div>
-      </span>
+      </div>
     </li>
     <li
       class="card_1s6cuhy-o_O-draggable_12to336-o_O-horizontalCard_9um937 perseus-interactive perseus-sortable-draggable"
       style="position: static; margin: 0px;"
     >
-      <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"
-            >
-              c
-            </div>
+            c
           </div>
         </div>
-      </span>
+      </div>
     </li>
   </ul>
 </div>