@khanacademy/perseus 5.0.0 → 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__/lint.stories.tsx

@@ -1,16 +1,16 @@
 import * as React from "react";
 
-type StoryArgs = Record<any, any>;
+import Lint from "../lint";
 
-type Story = {
-    title: string;
+import type {Meta} from "@storybook/react";
+
+const meta: Meta<typeof Lint> = {
+    title: "Perseus/Components/Lint",
 };
 
-import Lint from "../lint";
+export default meta;
 
-export default {
-    title: "Perseus/Components/Lint",
-} as Story;
+type StoryArgs = Record<any, any>;
 
 const defaultObject = {
     children: <div>This is the sample lint child</div>,
@@ -19,33 +19,68 @@ const defaultObject = {
     ruleName: "Test rule",
 } as const;
 
+const Container = ({children}: {children: React.ReactNode}) => {
+    return (
+        <div
+            style={{
+                width: "250px",
+                padding: "8px",
+                margin: "20px",
+                border: "solid 1px grey",
+            }}
+        >
+            {children}
+        </div>
+    );
+};
+
 export const DefaultLintContainerAndMessage = (
     args: StoryArgs,
 ): React.ReactElement => {
-    return <Lint {...defaultObject} />;
+    return (
+        <Container>
+            <Lint {...defaultObject} />
+        </Container>
+    );
 };
-export const Severity1DefaultLintAndMessage = (
-    args: StoryArgs,
-): React.ReactElement => {
-    return <Lint {...defaultObject} severity={1} />;
+export const LintSeverity1Error = (args: StoryArgs): React.ReactElement => {
+    return (
+        <Container>
+            <Lint {...defaultObject} severity={1} />
+        </Container>
+    );
 };
-export const Severity2DefaultLintAndMessage = (
-    args: StoryArgs,
-): React.ReactElement => {
-    return <Lint {...defaultObject} severity={2} />;
+export const LintSeverity2Warning = (args: StoryArgs): React.ReactElement => {
+    return (
+        <Container>
+            <Lint {...defaultObject} severity={2} />
+        </Container>
+    );
 };
-export const Severity3DefaultLintAndMessage = (
+export const LintSeverity3Recommendation = (
     args: StoryArgs,
 ): React.ReactElement => {
-    return <Lint {...defaultObject} severity={3} />;
+    return (
+        <Container>
+            <Lint {...defaultObject} severity={3} />
+        </Container>
+    );
 };
-export const Severity4DefaultLintAndMessage = (
+export const LintSeverity4OfflineReportingOnly = (
     args: StoryArgs,
 ): React.ReactElement => {
-    return <Lint {...defaultObject} severity={4} />;
+    return (
+        <Container>
+            <Lint {...defaultObject} severity={4} />
+        </Container>
+    );
 };
 export const InlineLintContainerAndMessage = (
     args: StoryArgs,
 ): React.ReactElement => {
-    return <Lint {...defaultObject} inline={true} />;
+    return (
+        <Container>
+            <Lint {...defaultObject} inline={true} />
+        </Container>
+    );
 };

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

@@ -1,6 +1,6 @@
 import * as React from "react";
 
-import Sortable from "../sortable";
+import Sortable, {Layout} from "../sortable";
 
 type StoryArgs = Record<any, any>;
 
@@ -19,9 +19,9 @@ export const SortableHorizontalExample = (
 ): React.ReactElement => {
     return (
         <Sortable
-            layout="horizontal"
+            layout={Layout.HORIZONTAL}
             options={["a", "b", "c"]}
-            waitForKatexLoad={false}
+            waitForTexRendererToLoad={false}
         />
     );
 };
@@ -31,9 +31,9 @@ export const SortableVerticalExample = (
 ): React.ReactElement => {
     return (
         <Sortable
-            layout="vertical"
+            layout={Layout.VERTICAL}
             options={["a", "b", "c"]}
-            waitForKatexLoad={false}
+            waitForTexRendererToLoad={false}
         />
     );
 };

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;