@khanacademy/perseus 10.0.1 → 10.1.0

package/package.json

@@ -3,7 +3,7 @@
     "description": "Core Perseus API (includes renderers and widgets)",
     "author": "Khan Academy",
     "license": "MIT",
-    "version": "10.0.1",
+    "version": "10.1.0",
     "publishConfig": {
         "access": "public"
     },
@@ -23,7 +23,7 @@
     "dependencies": {
         "@khanacademy/kas": "^0.3.1",
         "@khanacademy/kmath": "^0.1.2",
-        "@khanacademy/math-input": "^10.1.0",
+        "@khanacademy/math-input": "^10.1.1",
         "@khanacademy/perseus-core": "0.2.0",
         "@khanacademy/perseus-linter": "^0.3.2",
         "@khanacademy/pure-markdown": "^0.2.4",

package/src/__tests__/__snapshots__/renderer.test.tsx.snap

@@ -230,7 +230,7 @@ exports[`renderer rendering should render block math on mobile 1`] = `
           style="overflow-x: auto; overflow-y: hidden; margin-top: -10px; margin-bottom: -10px; transform: translate3d(0,0,0); padding: 10px 16px 10px 16px;"
         >
           <span
-            style="display: block; width: 100%; transform: scale(1, 1)  translate(0, 8px); transform-origin: 0 0; opacity: 0;"
+            style="display: block; width: 100%; transform: scale(1, 1); transform-origin: 0 0; opacity: 1;"
           >
             <span
               class="mock-TeX"

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

@@ -10,6 +10,11 @@ type Story = {
 
 export default {
     title: "Perseus/Components/Zoomable",
+    argTypes: {
+        disableEntranceAnimation: {
+            control: {type: "boolean"},
+        },
+    },
 } as Story;
 
 type Bounds = {
@@ -29,7 +34,10 @@ const computeChildBounds = (
 
 export const ZoomableExample = (args: StoryArgs): React.ReactElement => {
     return (
-        <Zoomable computeChildBounds={computeChildBounds}>
+        <Zoomable
+            computeChildBounds={computeChildBounds}
+            disableEntranceAnimation={!!args.disableEntranceAnimation}
+        >
             <span>
                 Here's some zoomed-out content.
                 <br />

package/src/components/zoomable-tex.tsx

@@ -59,6 +59,8 @@ export default class ZoomableTeX extends React.Component<Props, State> {
             <Zoomable
                 readyToMeasure={this.state.isRendered}
                 computeChildBounds={computeMathBounds}
+                animateHeight={false}
+                disableEntranceAnimation={true}
             >
                 <AssetContext.Consumer>
                     {({setAssetStatus}) => (

package/src/components/zoomable.tsx

@@ -14,6 +14,8 @@ type Bounds = {
 type Props = {
     children: React.ReactNode;
     animateHeight: boolean;
+
+    disableEntranceAnimation: boolean;
     /**
      * Optional function that allows customizations in zooming.
      *
@@ -35,6 +37,7 @@ type DefaultProps = {
     animateHeight: Props["animateHeight"];
     computeChildBounds: Props["computeChildBounds"];
     readyToMeasure: Props["readyToMeasure"];
+    disableEntranceAnimation: Props["disableEntranceAnimation"];
 };
 
 type State = {
@@ -60,6 +63,7 @@ class Zoomable extends React.Component<Props, State> {
     static defaultProps: DefaultProps = {
         animateHeight: false,
         readyToMeasure: true,
+        disableEntranceAnimation: false,
         computeChildBounds: (parentNode) => {
             const firstChild = parentNode.firstElementChild;
 
@@ -245,7 +249,7 @@ class Zoomable extends React.Component<Props, State> {
     render(): React.ReactNode {
         const {visible, scale, compactHeight, expandedHeight, zoomed} =
             this.state;
-        const {animateHeight} = this.props;
+        const {animateHeight, disableEntranceAnimation} = this.props;
 
         const property = animateHeight
             ? "opacity transform height"
@@ -261,7 +265,10 @@ class Zoomable extends React.Component<Props, State> {
             : {};
 
         // Do a fancy little slide as we fade the contents in the first time.
-        const translateOffset = visible ? "" : " translate(0, 8px)";
+        const shouldSlide = !disableEntranceAnimation && !visible;
+        const translateOffset = shouldSlide ? " translate(0, 8px)" : "";
+        const opacity = shouldSlide ? 0 : 1;
+
         const scaleString = (scale ?? 1).toString();
         const transform = zoomed
             ? `scale(1, 1) ${translateOffset}`
@@ -273,7 +280,7 @@ class Zoomable extends React.Component<Props, State> {
             height: zoomed ? expandedHeight : compactHeight,
             transform: transform,
             transformOrigin: "0 0",
-            opacity: visible ? 1 : 0,
+            opacity: opacity,
             WebkitTapHighlightColor: "transparent",
             ...transitionStyle,
         } as const;

package/src/styles/widgets/image.less

@@ -1,7 +1,39 @@
 .perseus-image-widget {
+    margin: 0;
+
     .perseus-image-title {
         text-align: center;
     }
+
+    .perseus-image-caption {
+        color: rgba(33, 36, 44, 0.7);
+        max-width: 420px;
+        padding-left: 16px;
+        position: relative;
+
+        // This offsets the paragraph's padding
+        // So that the caption sits much closer
+        // to the image
+        top: -12px;
+
+        &::before {
+            content: "";
+            position: absolute;
+            top: 0;
+            bottom: 0;
+            left: 0;
+            margin-left: 4px;
+            width: 1px;
+            background-color: rgba(33, 36, 44, 0.5);
+
+            border: 1px solid rgba(33, 36, 44, 0.5);
+            border-radius: 2px;
+        }
+        .paragraph {
+            font-size: 14px;
+            padding-right: 12px;
+        }
+    }
 }
 
 .perseus-image-editor {

package/src/widgets/__stories__/image.stories.tsx

@@ -43,6 +43,7 @@ export const Question1 = (args: StoryArgs): React.ReactElement => {
             },
         },
     } as const;
+
     return (
         <RendererWithDebugUI
             question={questionWithArgs}
@@ -51,6 +52,42 @@ export const Question1 = (args: StoryArgs): React.ReactElement => {
     );
 };
 
+export const Question2 = (args: StoryArgs): React.ReactElement => {
+    const apiOptions: APIOptions = {
+        isMobile: args.isMobile,
+    };
+    const imageOptions = question.widgets["image 1"].options;
+
+    const questionWithCaptionAndArgs = {
+        ...question,
+        widgets: {
+            ...question.widgets,
+            "image 1": {
+                ...question.widgets["image 1"],
+                options:
+                    // `options` is nullable so we have handle it explicitly
+                    // to avoid spreading `null` and generating
+                    // hard-to-understand type errors about missing keys
+                    // in object literal.
+                    imageOptions != null
+                        ? {
+                              ...imageOptions,
+                              title: args.title,
+                              caption:
+                                  "There is neither happiness nor unhappiness in this world; there is only the comparison of one state with another. Only a man who has felt ultimate despair is capable of feeling ultimate bliss. It is necessary to have wished for death in order to know how good it is to live.....the sum of all human wisdom will be contained in these two words: Wait and Hope",
+                          }
+                        : null,
+            },
+        },
+    } as const;
+    return (
+        <RendererWithDebugUI
+            question={questionWithCaptionAndArgs}
+            apiOptions={apiOptions}
+        />
+    );
+};
+
 export default {
     title: "Perseus/Widgets/Image",
     args: {

package/src/widgets/__tests__/__snapshots__/categorizer.test.ts.snap

@@ -30,7 +30,7 @@ exports[`categorizer widget should snapshot on mobile: first mobile render 1`] =
           style="overflow-x: auto; overflow-y: hidden; margin-top: -10px; margin-bottom: -10px; transform: translate3d(0,0,0); padding: 10px 16px 10px 16px;"
         >
           <span
-            style="display: block; width: 100%; transform: scale(1, 1)  translate(0, 8px); transform-origin: 0 0; opacity: 0;"
+            style="display: block; width: 100%; transform: scale(1, 1); transform-origin: 0 0; opacity: 1;"
           >
             <span
               class="mock-TeX"

package/src/widgets/__tests__/__snapshots__/group.test.tsx.snap

@@ -1144,7 +1144,7 @@ exports[`group widget should snapshot: initial render 1`] = `
                         <div
                           class="perseus-widget-container widget-nohighlight widget-block"
                         >
-                          <div
+                          <figure
                             class="perseus-image-widget"
                           >
                             <div
@@ -1193,7 +1193,7 @@ exports[`group widget should snapshot: initial render 1`] = `
                                 </div>
                               </div>
                             </span>
-                          </div>
+                          </figure>
                         </div>
                       </div>
                     </div>

package/src/widgets/__tests__/__snapshots__/image.test.ts.snap

@@ -24,7 +24,7 @@ exports[`image widget - isMobile %b should snapshot: first render 1`] = `
               <div
                 class="perseus-widget-container widget-nohighlight widget-block"
               >
-                <div
+                <figure
                   class="perseus-image-widget"
                 >
                   <div
@@ -73,12 +73,10 @@ exports[`image widget - isMobile %b should snapshot: first render 1`] = `
                       </div>
                     </div>
                   </span>
-                  <div
+                  <figcaption
                     class="perseus-image-caption has-title"
                   >
-                    <div
-                      class="caption_4bstk7"
-                    >
+                    <div>
                       <div
                         class="perseus-renderer perseus-renderer-responsive"
                       >
@@ -97,8 +95,8 @@ exports[`image widget - isMobile %b should snapshot: first render 1`] = `
                         </div>
                       </div>
                     </div>
-                  </div>
-                </div>
+                  </figcaption>
+                </figure>
               </div>
             </div>
           </div>
@@ -206,7 +204,7 @@ exports[`image widget - isMobile %b should snapshot: first render 2`] = `
               <div
                 class="perseus-widget-container widget-nohighlight widget-block"
               >
-                <div
+                <figure
                   class="perseus-image-widget"
                 >
                   <div
@@ -273,7 +271,7 @@ exports[`image widget - isMobile %b should snapshot: first render 2`] = `
                       </div>
                     </div>
                   </span>
-                  <div
+                  <figcaption
                     class="perseus-image-caption"
                   >
                     <div
@@ -290,8 +288,8 @@ exports[`image widget - isMobile %b should snapshot: first render 2`] = `
                         </div>
                       </div>
                     </div>
-                  </div>
-                </div>
+                  </figcaption>
+                </figure>
               </div>
             </div>
           </div>

package/src/widgets/__tests__/__snapshots__/matrix.test.ts.snap

@@ -42,7 +42,7 @@ exports[`matrix widget should snapshot on mobile: first mobile render 1`] = `
           style="overflow-x: auto; overflow-y: hidden; margin-top: -10px; margin-bottom: -10px; transform: translate3d(0,0,0); padding: 10px 16px 10px 16px;"
         >
           <span
-            style="display: block; width: 100%; transform: scale(1, 1)  translate(0, 8px); transform-origin: 0 0; opacity: 0;"
+            style="display: block; width: 100%; transform: scale(1, 1); transform-origin: 0 0; opacity: 1;"
           >
             <span
               class="mock-TeX"

package/src/widgets/__tests__/__snapshots__/number-line.test.ts.snap

@@ -18,7 +18,7 @@ exports[`number-line widget should snapshot on mobile: first mobile render 1`] =
           style="overflow-x: auto; overflow-y: hidden; margin-top: -10px; margin-bottom: -10px; transform: translate3d(0,0,0); padding: 10px 16px 10px 16px;"
         >
           <span
-            style="display: block; width: 100%; transform: scale(1, 1)  translate(0, 8px); transform-origin: 0 0; opacity: 0;"
+            style="display: block; width: 100%; transform: scale(1, 1); transform-origin: 0 0; opacity: 1;"
           >
             <span
               class="mock-TeX"

package/src/widgets/image.tsx

@@ -1,6 +1,5 @@
 /* eslint-disable react/sort-comp */
 import {linterContextDefault} from "@khanacademy/perseus-linter";
-import {StyleSheet, css} from "aphrodite";
 import classNames from "classnames";
 import * as React from "react";
 import _ from "underscore";
@@ -8,8 +7,6 @@ import _ from "underscore";
 import SvgImage from "../components/svg-image";
 import * as Changeable from "../mixins/changeable";
 import Renderer from "../renderer";
-import {baseUnitPx} from "../styles/constants";
-import mediaQueries from "../styles/media-queries";
 
 import type {Range, PerseusImageWidgetOptions} from "../perseus-types";
 import type {
@@ -200,9 +197,8 @@ class ImageWidget extends React.Component<Props> {
                 const minWidth = isImageFullWidth ? null : "0 !important";
 
                 titleAndCaption = (
-                    <div className={className}>
+                    <figcaption className={className}>
                         <div
-                            className={css(styles.caption)}
                             style={{
                                 // @ts-expect-error - TS2322 - Type 'string | null' is not assignable to type 'MinWidth<string | number> | undefined'.
                                 minWidth: minWidth,
@@ -214,16 +210,16 @@ class ImageWidget extends React.Component<Props> {
                                 linterContext={this.props.linterContext}
                             />
                         </div>
-                    </div>
+                    </figcaption>
                 );
             }
 
             return (
-                <div className="perseus-image-widget">
+                <figure className="perseus-image-widget">
                     {image}
                     {alt}
                     {titleAndCaption}
-                </div>
+                </figure>
             );
         }
         let title;
@@ -243,23 +239,23 @@ class ImageWidget extends React.Component<Props> {
 
         if (this.props.caption) {
             caption = (
-                <div className="perseus-image-caption">
+                <figcaption className="perseus-image-caption">
                     <Renderer
                         content={this.props.caption}
                         apiOptions={apiOptions}
                         linterContext={this.props.linterContext}
                     />
-                </div>
+                </figcaption>
             );
         }
 
         return (
-            <div className="perseus-image-widget">
+            <figure className="perseus-image-widget">
                 {title}
                 {image}
                 {alt}
                 {caption}
-            </div>
+            </figure>
         );
     }
 
@@ -273,25 +269,6 @@ class ImageWidget extends React.Component<Props> {
     }
 }
 
-const styles = StyleSheet.create({
-    caption: {
-        display: "inline-block",
-        marginTop: baseUnitPx,
-        maxWidth: 640,
-
-        [mediaQueries.lgOrSmaller]: {
-            // TODO(david): This maxWidth is not being used because
-            //     it's overriden by the 512px max-width we have on
-            //     paragraphs.
-            maxWidth: 540,
-        },
-
-        [mediaQueries.smOrSmaller]: {
-            maxWidth: 450,
-        },
-    },
-});
-
 export default {
     name: "image",
     // This widget's accessibility depends on its contents: if the image has