Show line style in locked line summary (#1265)

## Summary:
Create a LineSwatch component so we can show the line styles
in the LockedLineSettings summary.

[Design convo here](https://khanacademy.slack.com/archives/C067UM1QAR4/p1715280767285859)

Issue: none

## Test plan:
`yarn jest`

Storybook
- http://localhost:6006/?path=/docs/perseuseditor-components-locked-line-settings--docs
- http://localhost:6006/?path=/story/perseuseditor-editorpage--mafs-with-locked-figures

| Solid | Dashed |
| --- | --- |
| <img width="377" alt="Screenshot 2024-05-14 at 12 05 24 PM" src="https://github.com/Khan/perseus/assets/13231763/770e4b07-df6b-4984-862f-d2f31a086675"> | <img width="385" alt="Screenshot 2024-05-14 at 12 05 18 PM" src="https://github.com/Khan/perseus/assets/13231763/256a5a32-ced3-4c88-a2a2-ca30a0d13cfb"> |

Author: nishasy

Reviewers: jeremywiebe, nishasy

Required Reviewers:

Approved By: jeremywiebe

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

Pull Request URL: #1265

.changeset/neat-shoes-poke.md

@@ -0,0 +1,5 @@
+---
+"@khanacademy/perseus-editor": minor
+---
+
+LockedLineSettings summary now uses a line swatch instead of a color swatch

packages/perseus-editor/src/components/__stories__/locked-line-settings.stories.tsx

@@ -0,0 +1,51 @@
+import * as React from "react";
+
+import LockedLineSettings from "../locked-line-settings";
+import {getDefaultFigureForType} from "../util";
+
+import type {Meta, StoryObj} from "@storybook/react";
+
+export default {
+    title: "PerseusEditor/Components/Locked Line Settings",
+    component: LockedLineSettings,
+} as Meta<typeof LockedLineSettings>;
+
+export const Default = (args): React.ReactElement => {
+    return <LockedLineSettings {...args} />;
+};
+
+type StoryComponentType = StoryObj<typeof LockedLineSettings>;
+
+// Set the default values in the control panel.
+Default.args = {
+    ...getDefaultFigureForType("line"),
+    onChangeProps: () => {},
+    onRemove: () => {},
+};
+
+export const Controlled: StoryComponentType = {
+    render: function Render() {
+        const [props, setProps] = React.useState({
+            ...getDefaultFigureForType("line"),
+            onRemove: () => {},
+        });
+
+        const handlePropsUpdate = (newProps) => {
+            setProps({
+                ...props,
+                ...newProps,
+            });
+        };
+
+        return (
+            <LockedLineSettings {...props} onChangeProps={handlePropsUpdate} />
+        );
+    },
+};
+
+Controlled.parameters = {
+    chromatic: {
+        // Disabling because this is testing behavior, not visuals.
+        disableSnapshot: true,
+    },
+};

packages/perseus-editor/src/components/__tests__/locked-line-settings.test.tsx

@@ -50,4 +50,43 @@ describe("LockedPointSettings", () => {
         const titleText = screen.getByText("Ray (0, 0), (2, 2)");
         expect(titleText).toBeInTheDocument();
     });
+
+    test("should show the line's color and style by default", () => {
+        // Arrange
+        render(<LockedLineSettings {...defaultProps} />, {
+            wrapper: RenderStateRoot,
+        });
+
+        // Act
+        const lineSwatch = screen.getByLabelText("grayH, solid");
+
+        // Assert
+        expect(lineSwatch).toBeInTheDocument();
+    });
+
+    test("should change the line color label to new color", () => {
+        // Arrange
+        render(<LockedLineSettings {...defaultProps} color="green" />, {
+            wrapper: RenderStateRoot,
+        });
+
+        // Act
+        const lineSwatch = screen.getByLabelText("green, solid");
+
+        // Assert
+        expect(lineSwatch).toBeInTheDocument();
+    });
+
+    test("should change the line label to dashed for dashed style", () => {
+        // Arrange
+        render(<LockedLineSettings {...defaultProps} lineStyle="dashed" />, {
+            wrapper: RenderStateRoot,
+        });
+
+        // Act
+        const lineSwatch = screen.getByLabelText("grayH, dashed");
+
+        // Assert
+        expect(lineSwatch).toBeInTheDocument();
+    });
 });

packages/perseus-editor/src/components/line-swatch.tsx

@@ -0,0 +1,44 @@
+import {lockedFigureColors, type LockedFigureColor} from "@khanacademy/perseus";
+import {View} from "@khanacademy/wonder-blocks-core";
+import {color as wbColor, spacing} from "@khanacademy/wonder-blocks-tokens";
+import {StyleSheet} from "aphrodite";
+import * as React from "react";
+
+type Props = {
+    color: LockedFigureColor;
+    lineStyle: "solid" | "dashed";
+};
+
+const LineSwatch = (props: Props) => {
+    const {color, lineStyle} = props;
+
+    return (
+        <View style={styles.container}>
+            <View
+                aria-label={`${color}, ${lineStyle}`}
+                style={[
+                    styles.lineSwatch,
+                    {
+                        border: `5px ${lineStyle} ${lockedFigureColors[color]}`,
+                    },
+                ]}
+            />
+        </View>
+    );
+};
+
+const styles = StyleSheet.create({
+    container: {
+        backgroundColor: wbColor.white,
+        justifyContent: "center",
+        padding: spacing.xSmall_8,
+        borderRadius: spacing.xxxSmall_4,
+    },
+    lineSwatch: {
+        // Add a white outline so that the color swatch is visible when
+        // the dropdown option is highlighted with its blue background.
+        width: 40,
+    },
+});
+
+export default LineSwatch;

packages/perseus-editor/src/components/locked-line-settings.tsx

@@ -13,7 +13,7 @@ import {StyleSheet} from "aphrodite";
 import * as React from "react";
 
 import ColorSelect from "./color-select";
-import ColorSwatch from "./color-swatch";
+import LineSwatch from "./line-swatch";
 import LockedFigureSettingsAccordion from "./locked-figure-settings-accordion";
 import LockedFigureSettingsActions from "./locked-figure-settings-actions";
 import LockedPointSettings from "./locked-point-settings";
@@ -91,7 +91,7 @@ const LockedLineSettings = (props: Props) => {
                 <View style={styles.row}>
                     <LabelLarge>{lineLabel}</LabelLarge>
                     <Strut size={spacing.xSmall_8} />
-                    <ColorSwatch color={lineColor} />
+                    <LineSwatch color={lineColor} lineStyle={lineStyle} />
                 </View>
             }
         >