Add label-image stories to see the widget in action (#772)

## Summary:

While talking with SarahB about the `label-image` widget I realized we don't have a basic `label-image` widget story. 

<img width="800" alt="image" src="https://github.com/Khan/perseus/assets/77138/ea5983a4-ff77-48e1-8a9d-c3a574486a02">

Now we do!

Issue: "none"

## Test plan:

`yarn start`
Navigate to **Perseus** >> **Widgets** >> **Label Image** >> **Question 1** ([here](http://localhost:6006/?path=/story/perseus-widgets-label-image--question-1))

Author: jeremywiebe

Reviewers: nedredmond

Required Reviewers:

Approved By: nedredmond

Checks: ✅ Upload Coverage, ✅ codecov/project, ✅ codecov/patch, ✅ Upload Coverage, ✅ Upload Coverage, ✅ gerald, ⏭  Publish npm snapshot, ✅ Lint, Typecheck, Format, and Test (ubuntu-latest, 16.x), ✅ Extract i18n strings (ubuntu-latest, 16.x), ✅ Jest Coverage (ubuntu-latest, 16.x), ✅ Cypress (ubuntu-latest, 16.x), ✅ Publish Storybook to Chromatic (ubuntu-latest, 16.x), ✅ Check builds for changes in size (ubuntu-latest, 16.x), ✅ Check for .changeset entries for all changed files (ubuntu-latest, 16.x), ✅ gerald, ⏭  Publish npm snapshot, ✅ Extract i18n strings (ubuntu-latest, 16.x), ✅ Lint, Typecheck, Format, and Test (ubuntu-latest, 16.x), ✅ Cypress (ubuntu-latest, 16.x), ✅ Publish Storybook to Chromatic (ubuntu-latest, 16.x), ✅ Check builds for changes in size (ubuntu-latest, 16.x), ✅ Jest Coverage (ubuntu-latest, 16.x), ✅ Check for .changeset entries for all changed files (ubuntu-latest, 16.x), ✅ gerald, ⏭  Publish npm snapshot, ✅ Lint, Typecheck, Format, and Test (ubuntu-latest, 16.x), ✅ Extract i18n strings (ubuntu-latest, 16.x), ✅ Cypress (ubuntu-latest, 16.x), ✅ Publish Storybook to Chromatic (ubuntu-latest, 16.x), ✅ Jest Coverage (ubuntu-latest, 16.x)

Pull Request URL: #772

packages/perseus/src/widgets/__stories__/label-image.stories.tsx

@@ -0,0 +1,30 @@
+import * as React from "react";
+
+import {RendererWithDebugUI} from "../../../../../testing/renderer-with-debug-ui";
+import {question} from "../__testdata__/label-image.testdata";
+
+import type {APIOptions} from "../../types";
+
+type StoryArgs = {
+    isMobile: boolean;
+};
+
+type ImageStory = {
+    title: string;
+    args: StoryArgs;
+};
+
+export const Question1 = (args: StoryArgs): React.ReactElement => {
+    const apiOptions: APIOptions = {
+        isMobile: args.isMobile,
+    };
+
+    return <RendererWithDebugUI question={question} apiOptions={apiOptions} />;
+};
+
+export default {
+    title: "Perseus/Widgets/Label Image",
+    args: {
+        isMobile: false,
+    },
+} as ImageStory;

packages/perseus/src/widgets/__testdata__/label-image.testdata.ts

@@ -0,0 +1,63 @@
+import type {PerseusRenderer} from "../../perseus-types";
+
+export const question: PerseusRenderer = {
+    content:
+        "Carol created a chart and a bar graph to show how many of each type of vehicle were in her supermarket parking lot.\n\nVehicle Type | Number in the parking lot\n:- | :-: \nTrucks| $25$ \nVans | $5$ \nCars| $40$ \nSUVs | $10$ \n\n**Label each bar on the bar graph.**\n\n[[☃ label-image 1]]\n\n",
+    images: {
+        "web+graphie://ka-perseus-graphie.s3.amazonaws.com/1e28332fd2321975639ab50c9ce442e568c18421":
+            {
+                width: 341,
+                height: 310,
+            },
+    },
+    widgets: {
+        "label-image 1": {
+            type: "label-image",
+            alignment: "default",
+            static: false,
+            graded: true,
+            options: {
+                static: false,
+                choices: ["Trucks", "Vans", "Cars", "SUVs"],
+                imageAlt:
+                    "A bar graph with four bar lines that shows the horizontal axis labeled Number in the parking lot and the vertical axis labeled Vehicle Type. The horizontal axis is labeled, from left to right: 0, 10, 20, 30, 40, and 50. The vertical axis has, from the bottom to the top, four unlabeled bar lines as follows: the first unlabeled bar line extends to the middle of 0 and 10, the second unlabeled bar line extends to 40, the third unlabeled bar line extends to the middle of 20 and 30, and fourth unlabeled bar line extends to 10.",
+                imageUrl:
+                    "web+graphie://ka-perseus-graphie.s3.amazonaws.com/56c60c72e96cd353e4a8b5434506cd3a21e717af",
+                imageWidth: 415,
+                imageHeight: 314,
+                markers: [
+                    {
+                        answers: ["SUVs"],
+                        label: "The fourth unlabeled bar line.",
+                        x: 25,
+                        y: 17.7,
+                    },
+                    {
+                        answers: ["Trucks"],
+                        label: "The third unlabeled bar line.",
+                        x: 25,
+                        y: 35.3,
+                    },
+                    {
+                        answers: ["Cars"],
+                        label: "The second unlabeled bar line.",
+                        x: 25,
+                        y: 53,
+                    },
+                    {
+                        answers: ["Vans"],
+                        label: "The first unlabeled bar line.",
+                        x: 25,
+                        y: 70.3,
+                    },
+                ],
+                multipleAnswers: false,
+                hideChoicesFromInstructions: true,
+            },
+            version: {
+                major: 0,
+                minor: 0,
+            },
+        },
+    },
+};