@khanacademy/perseus 17.0.0 → 17.1.0

package/dist/perseus-types.d.ts

@@ -36,6 +36,7 @@ export type PerseusAnswerArea = {
     tTable: boolean;
     calculator: boolean;
     periodicTable: boolean;
+    periodicTableWithKey?: boolean;
 };
 type Widget<Type extends string, Options> = {
     type: Type;

package/dist/strings.js

@@ -20,6 +20,7 @@ module.exports = [
     i18n.$_("[Marker for question %(number)s]", {}),
     i18n.$_("[Sentence %(number)s]", {}),
     i18n._("**Your answer should be** ", {}),
+    i18n.ngettext("%(num)s answer","%(num)s answers", {}),
     i18n._("a *proper* fraction, like $1/2$ or $6/10$", {}),
     i18n._("a *simplified improper* fraction, like $7/4$", {}),
     i18n._("a *simplified proper* fraction, like $3/5$", {}),

package/dist/widgets/label-image/answer-pill.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { type CSSProperties } from "aphrodite";
+export declare const AnswerPill: (props: {
+    selectedAnswers: readonly string[];
+    showCorrectness?: "correct" | "incorrect";
+    markerRef?: HTMLElement;
+    side: "top" | "bottom" | "left" | "right";
+    onClick: () => void;
+    style?: CSSProperties;
+}) => JSX.Element;

package/dist/widgets/label-image/hide-answers-toggle.d.ts

@@ -0,0 +1,6 @@
+import Switch from "@khanacademy/wonder-blocks-switch";
+import * as React from "react";
+export declare const HideAnswersToggle: (props: {
+    areAnswersHidden: boolean;
+    onChange: React.ComponentPropsWithoutRef<typeof Switch>["onChange"];
+}) => JSX.Element;

package/dist/widgets/label-image/marker.d.ts

@@ -8,20 +8,17 @@ import type { InteractiveMarkerType } from "./types";
 type Props = InteractiveMarkerType & {
     showSelected: boolean;
     showPulsate: boolean;
-    onClick: (e: MouseEvent) => void;
-    onKeyDown: (e: KeyboardEvent) => void;
+    onClick: (e: React.MouseEvent) => void;
+    onKeyDown: (e: React.KeyboardEvent) => void;
+    onFocus: () => void;
+    onBlur: () => void;
+    focused: boolean;
 };
-type State = {
-    isFocused: boolean;
-};
-export default class Marker extends React.Component<Props, State> {
+export default class Marker extends React.Component<Props> {
     _icon: HTMLElement | null | undefined;
     static defaultProps: {
         selected: ReadonlyArray<any>;
     };
-    state: State;
-    handleFocus(): void;
-    handleBlur(): void;
     renderIcon(): React.ReactElement<React.ComponentProps<"div">>;
     render(): React.ReactNode;
 }

package/dist/widgets/label-image/types.d.ts

@@ -7,6 +7,7 @@ export type MarkerType = {
 export type InteractiveMarkerType = MarkerType & {
     selected?: ReadonlyArray<string>;
     showCorrectness?: "correct" | "incorrect";
+    focused?: boolean;
 };
 export type InteractiveMarkerScore = {
     hasAnswers: boolean;

package/dist/widgets/label-image.d.ts

@@ -10,8 +10,10 @@ import * as React from "react";
 import AnswerChoices from "./label-image/answer-choices";
 import Marker from "./label-image/marker";
 import type { InteractiveMarkerType, InteractiveMarkerScore } from "./label-image/types";
+import type { DependencyProps } from "../dependencies";
 import type { ChangeableProps } from "../mixins/changeable";
 import type { APIOptions, PerseusScore } from "../types";
+export type PreferredPopoverDirection = "NONE" | "UP" | "DOWN" | "LEFT" | "RIGHT";
 type MarkersState = {
     markers: ReadonlyArray<InteractiveMarkerType>;
 };
@@ -33,7 +35,7 @@ type Point = {
     x: number;
     y: number;
 };
-type LabelImageProps = ChangeableProps & {
+type LabelImageProps = ChangeableProps & DependencyProps & {
     apiOptions: APIOptions;
     choices: ReadonlyArray<string>;
     imageAlt: string;
@@ -44,12 +46,15 @@ type LabelImageProps = ChangeableProps & {
     multipleAnswers: boolean;
     hideChoicesFromInstructions: boolean;
     questionCompleted: boolean;
+    preferredPopoverDirection?: PreferredPopoverDirection;
 };
 type LabelImageState = {
-    selectedMarkerIndex: number;
+    activeMarkerIndex: number;
     markersInteracted: boolean;
+    focusedMarkerIndex: number;
+    hideAnswers: boolean;
 };
-declare class LabelImage extends React.Component<LabelImageProps, LabelImageState> {
+export declare class LabelImage extends React.Component<LabelImageProps, LabelImageState> {
     _markers: Array<Marker | null | undefined>;
     _selectedMarkerPopup: Popover | null | undefined;
     _answerChoices: AnswerChoices | null | undefined;
@@ -64,7 +69,7 @@ declare class LabelImage extends React.Component<LabelImageProps, LabelImageStat
     /**
      * Determine the image side given a marker position (as percent of size).
      */
-    static imageSideForMarkerPosition(x: number, y: number): "bottom" | "left" | "right" | "top" | "center";
+    static imageSideForMarkerPosition(x: number, y: number, preferredDirection: PreferredPopoverDirection | undefined): "bottom" | "left" | "right" | "top" | "center";
     /**
      * Calculate the next marker to navigate to, from the "this marker".
      *
@@ -73,17 +78,13 @@ declare class LabelImage extends React.Component<LabelImageProps, LabelImageStat
      */
     static navigateToMarkerIndex(navigateDirection: Direction, markers: ReadonlyArray<InteractiveMarkerType>, thisIndex: number): number;
     constructor(props: LabelImageProps);
-    componentDidMount(): void;
-    componentWillUnmount(): void;
     simpleValidate(rubric: LabelImageProps): PerseusScore;
     getUserInput(): MarkersState;
     showRationalesForCurrentlySelectedChoices(rubric: LabelImageProps): void;
     dismissMarkerPopup(): void;
-    handleDocumentClick: (e: MouseEvent) => void;
-    handleDocumentKeyDown: (e: KeyboardEvent) => void;
     handleMarkerChange(index: number, marker: InteractiveMarkerType): void;
-    handleMarkerClick(index: number, e: MouseEvent): void;
-    handleMarkerKeyDown(index: number, e: KeyboardEvent): void;
+    activateMarker(index: number): void;
+    handleMarkerKeyDown(index: number, e: React.KeyboardEvent): void;
     handleAnswerChoicesChangeForMarker(index: number, selection: ReadonlyArray<boolean>): void;
     renderAnswerChoicesForMarker(index: number, marker: InteractiveMarkerType): React.ReactElement<React.ComponentProps<"div">>;
     renderMarkers(): ReadonlyArray<React.ReactNode>;
@@ -93,7 +94,51 @@ declare class LabelImage extends React.Component<LabelImageProps, LabelImageStat
 declare const _default: Readonly<{
     name: string;
     displayName: string;
-    getWidget?: (() => typeof LabelImage) | undefined;
+    getWidget?: (() => React.ForwardRefExoticComponent<Omit<ChangeableProps & Partial<import("../types").PerseusDependenciesV2> & {
+        apiOptions: Readonly<{
+            isArticle?: boolean | undefined;
+            onInputError?: ((widgetId: any, value: string, message?: string | null | undefined) => unknown) | undefined;
+            onFocusChange?: ((newFocusPath: import("../types").FocusPath, oldFocusPath: import("../types").FocusPath, keypadElement?: Element | Text | null | undefined, focusedElement?: HTMLElement | undefined) => unknown) | undefined;
+            GroupMetadataEditor?: React.ComponentType<any> | undefined;
+            showAlignmentOptions?: boolean | undefined;
+            readOnly?: boolean | undefined;
+            answerableCallback?: ((arg1: boolean) => unknown) | undefined;
+            getAnotherHint?: (() => unknown) | undefined;
+            interactionCallback?: (() => unknown) | undefined;
+            groupAnnotator?: ((groupNumber: number, widgetId: string) => React.ReactNode) | undefined;
+            imagePlaceholder?: React.ReactNode;
+            widgetPlaceholder?: React.ReactNode;
+            baseElements?: {
+                Link: React.ComponentType<any>;
+            } | undefined;
+            imagePreloader?: ((dimensions: import("../types").Dimensions) => React.ReactNode) | undefined;
+            trackInteraction?: ((args: {
+                type: string;
+                id: string;
+                correct?: boolean | undefined;
+            } & Partial<import("../types").TrackingGradedGroupExtraArguments> & Partial<import("../types").TrackingSequenceExtraArguments>) => void) | undefined;
+            customKeypad?: boolean | undefined;
+            nativeKeypadProxy?: ((blur: () => void) => import("@khanacademy/math-input").KeypadAPI) | undefined;
+            isMobile?: boolean | undefined;
+            setDrawingAreaAvailable?: ((arg1: boolean) => unknown) | undefined;
+            useDraftEditor?: boolean | undefined;
+            hintProgressColor?: string | undefined;
+            canScrollPage?: boolean | undefined;
+            inModal?: boolean | undefined;
+            crossOutEnabled?: boolean | undefined;
+            editorChangeDelay?: number | undefined;
+        }>;
+        choices: readonly string[];
+        imageAlt: string;
+        imageUrl: string;
+        imageWidth: number;
+        imageHeight: number;
+        markers: readonly InteractiveMarkerType[];
+        multipleAnswers: boolean;
+        hideChoicesFromInstructions: boolean;
+        questionCompleted: boolean;
+        preferredPopoverDirection?: PreferredPopoverDirection | undefined;
+    }, "analytics"> & React.RefAttributes<LabelImage>>) | undefined;
     accessible?: boolean | ((props: any) => boolean) | undefined;
     hidden?: boolean | undefined;
     version?: import("../types").Version | undefined;
@@ -108,6 +153,50 @@ declare const _default: Readonly<{
     propUpgrades?: {
         [key: string]: (arg1: any) => any;
     } | undefined;
-    widget: typeof LabelImage;
+    widget: React.ForwardRefExoticComponent<Omit<ChangeableProps & Partial<import("../types").PerseusDependenciesV2> & {
+        apiOptions: Readonly<{
+            isArticle?: boolean | undefined;
+            onInputError?: ((widgetId: any, value: string, message?: string | null | undefined) => unknown) | undefined;
+            onFocusChange?: ((newFocusPath: import("../types").FocusPath, oldFocusPath: import("../types").FocusPath, keypadElement?: Element | Text | null | undefined, focusedElement?: HTMLElement | undefined) => unknown) | undefined;
+            GroupMetadataEditor?: React.ComponentType<any> | undefined;
+            showAlignmentOptions?: boolean | undefined;
+            readOnly?: boolean | undefined;
+            answerableCallback?: ((arg1: boolean) => unknown) | undefined;
+            getAnotherHint?: (() => unknown) | undefined;
+            interactionCallback?: (() => unknown) | undefined;
+            groupAnnotator?: ((groupNumber: number, widgetId: string) => React.ReactNode) | undefined;
+            imagePlaceholder?: React.ReactNode;
+            widgetPlaceholder?: React.ReactNode;
+            baseElements?: {
+                Link: React.ComponentType<any>;
+            } | undefined;
+            imagePreloader?: ((dimensions: import("../types").Dimensions) => React.ReactNode) | undefined;
+            trackInteraction?: ((args: {
+                type: string;
+                id: string;
+                correct?: boolean | undefined;
+            } & Partial<import("../types").TrackingGradedGroupExtraArguments> & Partial<import("../types").TrackingSequenceExtraArguments>) => void) | undefined;
+            customKeypad?: boolean | undefined;
+            nativeKeypadProxy?: ((blur: () => void) => import("@khanacademy/math-input").KeypadAPI) | undefined;
+            isMobile?: boolean | undefined;
+            setDrawingAreaAvailable?: ((arg1: boolean) => unknown) | undefined;
+            useDraftEditor?: boolean | undefined;
+            hintProgressColor?: string | undefined;
+            canScrollPage?: boolean | undefined;
+            inModal?: boolean | undefined;
+            crossOutEnabled?: boolean | undefined;
+            editorChangeDelay?: number | undefined;
+        }>;
+        choices: readonly string[];
+        imageAlt: string;
+        imageUrl: string;
+        imageWidth: number;
+        imageHeight: number;
+        markers: readonly InteractiveMarkerType[];
+        multipleAnswers: boolean;
+        hideChoicesFromInstructions: boolean;
+        questionCompleted: boolean;
+        preferredPopoverDirection?: PreferredPopoverDirection | undefined;
+    }, "analytics"> & React.RefAttributes<LabelImage>>;
 }>;
 export default _default;

package/package.json

@@ -3,7 +3,7 @@
     "description": "Core Perseus API (includes renderers and widgets)",
     "author": "Khan Academy",
     "license": "MIT",
-    "version": "17.0.0",
+    "version": "17.1.0",
     "publishConfig": {
         "access": "public"
     },
@@ -22,33 +22,36 @@
         "test": "bash -c 'yarn --silent --cwd \"../..\" test ${@:0} $($([[ ${@: -1} = -* ]] || [[ ${@: -1} = bash ]]) && echo $PWD)'"
     },
     "dependencies": {
-        "@khanacademy/kas": "^0.3.6",
-        "@khanacademy/kmath": "^0.1.7",
-        "@khanacademy/math-input": "^16.1.1",
-        "@khanacademy/perseus-core": "1.4.0",
-        "@khanacademy/perseus-linter": "^0.3.9",
-        "@khanacademy/pure-markdown": "^0.2.12",
-        "@khanacademy/simple-markdown": "^0.11.1"
+        "@khanacademy/kas": "^0.3.7",
+        "@khanacademy/kmath": "^0.1.8",
+        "@khanacademy/math-input": "^16.1.2",
+        "@khanacademy/perseus-core": "1.4.1",
+        "@khanacademy/perseus-linter": "^0.3.10",
+        "@khanacademy/pure-markdown": "^0.2.13",
+        "@khanacademy/simple-markdown": "^0.11.2"
     },
     "devDependencies": {
-        "@khanacademy/wonder-blocks-button": "^6.2.2",
+        "@khanacademy/wonder-blocks-button": "^6.2.4",
         "@khanacademy/wonder-blocks-clickable": "^4.0.11",
         "@khanacademy/wonder-blocks-color": "^3.0.0",
         "@khanacademy/wonder-blocks-core": "^6.3.0",
         "@khanacademy/wonder-blocks-data": "^13.0.5",
-        "@khanacademy/wonder-blocks-dropdown": "^3.1.8",
-        "@khanacademy/wonder-blocks-form": "^4.3.16",
+        "@khanacademy/wonder-blocks-dropdown": "^4.0.0",
+        "@khanacademy/wonder-blocks-form": "^4.3.18",
         "@khanacademy/wonder-blocks-i18n": "^2.0.2",
         "@khanacademy/wonder-blocks-layout": "^2.0.24",
-        "@khanacademy/wonder-blocks-link": "^6.0.2",
-        "@khanacademy/wonder-blocks-modal": "^4.0.35",
-        "@khanacademy/wonder-blocks-popover": "^3.0.16",
+        "@khanacademy/wonder-blocks-link": "^6.0.4",
+        "@khanacademy/wonder-blocks-modal": "^4.0.38",
+        "@khanacademy/wonder-blocks-pill": "^1.0.14",
+        "@khanacademy/wonder-blocks-popover": "^3.0.19",
         "@khanacademy/wonder-blocks-progress-spinner": "^2.0.24",
         "@khanacademy/wonder-blocks-spacing": "^4.0.1",
-        "@khanacademy/wonder-blocks-tooltip": "^2.1.18",
+        "@khanacademy/wonder-blocks-switch": "^1.1.8",
+        "@khanacademy/wonder-blocks-tooltip": "^2.1.21",
         "@khanacademy/wonder-blocks-typography": "^2.1.9",
         "@khanacademy/wonder-stuff-core": "^1.5.1",
         "@phosphor-icons/core": "^2.0.2",
+        "@popperjs/core": "^2.10.1",
         "aphrodite": "^1.2.5",
         "classnames": "^1.1.4",
         "create-react-class": "^15.6.3",
@@ -63,27 +66,31 @@
         "prop-types": "^15.6.1",
         "react": "16.14.0",
         "react-dom": "16.14.0",
+        "react-popper": "^2.0.0",
         "underscore": "^1.4.4"
     },
     "peerDependencies": {
-        "@khanacademy/wonder-blocks-button": "^6.2.2",
+        "@khanacademy/wonder-blocks-button": "^6.2.4",
         "@khanacademy/wonder-blocks-clickable": "^4.0.11",
         "@khanacademy/wonder-blocks-color": "^3.0.0",
         "@khanacademy/wonder-blocks-core": "^6.3.0",
         "@khanacademy/wonder-blocks-data": "^13.0.5",
-        "@khanacademy/wonder-blocks-dropdown": "^3.1.8",
-        "@khanacademy/wonder-blocks-form": "^4.3.16",
+        "@khanacademy/wonder-blocks-dropdown": "^4.0.0",
+        "@khanacademy/wonder-blocks-form": "^4.3.18",
         "@khanacademy/wonder-blocks-i18n": "^2.0.2",
         "@khanacademy/wonder-blocks-layout": "^2.0.24",
-        "@khanacademy/wonder-blocks-link": "^6.0.2",
-        "@khanacademy/wonder-blocks-modal": "^4.0.35",
-        "@khanacademy/wonder-blocks-popover": "^3.0.16",
+        "@khanacademy/wonder-blocks-link": "^6.0.4",
+        "@khanacademy/wonder-blocks-modal": "^4.0.38",
+        "@khanacademy/wonder-blocks-pill": "^1.0.14",
+        "@khanacademy/wonder-blocks-popover": "^3.0.19",
         "@khanacademy/wonder-blocks-progress-spinner": "^2.0.24",
         "@khanacademy/wonder-blocks-spacing": "^4.0.1",
-        "@khanacademy/wonder-blocks-tooltip": "^2.1.18",
+        "@khanacademy/wonder-blocks-switch": "^1.1.8",
+        "@khanacademy/wonder-blocks-tooltip": "^2.1.21",
         "@khanacademy/wonder-blocks-typography": "^2.1.9",
         "@khanacademy/wonder-stuff-core": "^1.5.1",
         "@phosphor-icons/core": "^2.0.2",
+        "@popperjs/core": "^2.10.1",
         "aphrodite": "^1.2.5",
         "classnames": "^1.1.4",
         "create-react-class": "^15.6.3",
@@ -93,6 +100,7 @@
         "prop-types": "^15.6.1",
         "react": "16.14.0",
         "react-dom": "16.14.0",
+        "react-popper": "^2.0.0",
         "underscore": "^1.4.4"
     },
     "keywords": []

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

@@ -369,7 +369,7 @@ exports[`renderer snapshots correct answer: correct answer 1`] = `
                 </span>
                 <span
                   aria-hidden="true"
-                  class="svg_aeiopc-o_O-caret_ntkmq-o_O-inlineStyles_13xtep5"
+                  class="svg_1q6jc65-o_O-icon_eocf2p-o_O-caret_ntkmq-o_O-inlineStyles_u7ovp6"
                 />
               </button>
             </div>
@@ -434,7 +434,7 @@ exports[`renderer snapshots incorrect answer: incorrect answer 1`] = `
                 </span>
                 <span
                   aria-hidden="true"
-                  class="svg_aeiopc-o_O-caret_ntkmq-o_O-inlineStyles_13xtep5"
+                  class="svg_1q6jc65-o_O-icon_eocf2p-o_O-caret_ntkmq-o_O-inlineStyles_u7ovp6"
                 />
               </button>
             </div>
@@ -499,7 +499,7 @@ exports[`renderer snapshots initial render: initial render 1`] = `
                 </span>
                 <span
                   aria-hidden="true"
-                  class="svg_aeiopc-o_O-caret_ntkmq-o_O-inlineStyles_13xtep5"
+                  class="svg_1q6jc65-o_O-icon_eocf2p-o_O-caret_ntkmq-o_O-inlineStyles_u7ovp6"
                 />
               </button>
             </div>

package/src/dependencies.ts

@@ -22,6 +22,10 @@ export const getDependencies = (): PerseusDependencies => {
     );
 };
 
+export type DependencyProps = Partial<
+    React.ContextType<typeof DependenciesContext>
+>;
+
 export const DependenciesContext = React.createContext<PerseusDependenciesV2>({
     analytics: {onAnalyticsEvent: async () => {}},
 });

package/src/perseus-types.ts

@@ -73,6 +73,8 @@ export type PerseusAnswerArea = {
     calculator: boolean;
     // The user might benefit from using a Periodic Table of Elements.  Provided on Khan Academy when true
     periodicTable: boolean;
+    // The user might benefit from using a Periodic Table of Elements with key.  Provided on Khan Academy when true
+    periodicTableWithKey?: boolean;
 };
 
 type Widget<Type extends string, Options> = {

package/src/styles/widgets/label-image.less

@@ -5,6 +5,38 @@
             margin: 0;
         }
     }
+    button[id*="perseus-label-image-widget-answer-pill"],
+    div[id*="perseus-label-image-widget-answer-pill"] {
+        // Reset text content.
+        div.paragraph {
+            all: revert;
+        }
+        // Allow for padding around math content. Accounting for the negative margin here:
+        // https://github.com/Khan/perseus/blob/bafd35daee723456bf259a39b88e7638d91c8c3b/packages/perseus/src/renderer.tsx#L1176
+        div.perseus-block-math-inner {
+            margin: -5px 0 !important;
+        }
+    }
+}
+
+// Reset mobile text content for answer pills.
+@media (max-width: 767px) {
+    [id*="perseus-label-image-widget-answer-pill"] {
+        div.paragraph {
+            all: revert;
+        }
+        > div.perseus-renderer-responsive {
+            all: revert;
+        }
+    }
+
+    .framework-perseus.perseus-mobile
+        [id*="perseus-label-image-widget-answer-pill"] {
+        .perseus-renderer > .paragraph,
+        .perseus-renderer > .paragraph .paragraph {
+            all: revert;
+        }
+    }
 }
 
 .framework-perseus:not(.perseus-article).perseus-mobile {

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

@@ -1,12 +1,44 @@
 import * as React from "react";
 
 import {RendererWithDebugUI} from "../../../../../testing/renderer-with-debug-ui";
-import {question} from "../__testdata__/label-image.testdata";
+import {
+    textQuestion,
+    mathQuestion,
+    numberline,
+} from "../__testdata__/label-image.testdata";
 
+import type {PerseusRenderer} from "../../perseus-types";
 import type {APIOptions} from "../../types";
 
+const applyStoryArgs = (
+    question: PerseusRenderer,
+    args: StoryArgs,
+): PerseusRenderer => {
+    const q = {
+        ...question,
+        widgets: {},
+    } as const;
+
+    for (const [widgetId, widget] of Object.entries(question.widgets)) {
+        const modified = {
+            ...widget,
+            options: {
+                ...widget.options,
+                preferredPopoverDirection: args.preferredPopoverDirection,
+            },
+        };
+
+        q.widgets[widgetId] = {
+            ...modified,
+        };
+    }
+
+    return q;
+};
+
 type StoryArgs = {
     isMobile: boolean;
+    preferredPopoverDirection: string;
 };
 
 type ImageStory = {
@@ -14,17 +46,55 @@ type ImageStory = {
     args: StoryArgs;
 };
 
-export const Question1 = (args: StoryArgs): React.ReactElement => {
+export const LabelWidgetWithText = (args: StoryArgs): React.ReactElement => {
+    const apiOptions: APIOptions = {
+        isMobile: args.isMobile,
+    };
+
+    return (
+        <RendererWithDebugUI
+            question={applyStoryArgs(textQuestion, args)}
+            apiOptions={apiOptions}
+        />
+    );
+};
+
+export const LabelWidgetWithMath = (args: StoryArgs): React.ReactElement => {
     const apiOptions: APIOptions = {
         isMobile: args.isMobile,
     };
 
-    return <RendererWithDebugUI question={question} apiOptions={apiOptions} />;
+    return (
+        <RendererWithDebugUI
+            question={applyStoryArgs(mathQuestion, args)}
+            apiOptions={apiOptions}
+        />
+    );
+};
+
+export const LabelImageNumberline = (args: StoryArgs): React.ReactElement => {
+    const apiOptions: APIOptions = {
+        isMobile: args.isMobile,
+    };
+
+    return (
+        <RendererWithDebugUI
+            question={applyStoryArgs(numberline, args)}
+            apiOptions={apiOptions}
+        />
+    );
 };
 
 export default {
     title: "Perseus/Widgets/Label Image",
     args: {
         isMobile: false,
+        preferredPopoverDirection: "NONE",
+    },
+    argTypes: {
+        preferredPopoverDirection: {
+            control: "select",
+            options: ["NONE", "UP", "DOWN", "LEFT", "RIGHT"],
+        },
     },
 } as ImageStory;