@khanacademy/perseus 10.0.1 → 11.0.0

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

@@ -8,7 +8,7 @@ import {
 } from "../__testdata__/expression.testdata";
 import expressionExport from "../expression";
 
-import TestKeypadContext from "./test-keypad-context-wrapper";
+import TestKeypadContextWrapper from "./test-keypad-context-wrapper";
 
 import type {PerseusItem} from "../../perseus-types";
 
@@ -28,7 +28,7 @@ type WrappedKeypadContextProps = {
 
 const WrappedKeypadContext = (props: WrappedKeypadContextProps) => {
     return (
-        <TestKeypadContext>
+        <TestKeypadContextWrapper>
             <KeypadContext.Consumer>
                 {({keypadElement, setRenderer, scrollableElement}) => {
                     return (
@@ -41,7 +41,7 @@ const WrappedKeypadContext = (props: WrappedKeypadContextProps) => {
                     );
                 }}
             </KeypadContext.Consumer>
-        </TestKeypadContext>
+        </TestKeypadContextWrapper>
     );
 };
 

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