Limit colorset for locked figures (#1210)

## Summary: Limit locked figures colorset as per this slack conversation. Issue: https://khanacademy.atlassian.net/browse/LEMS-1931 ## Test plan: `yarn jest packages/perseus/src/widgets/__tests__/interactive-graph.test.ts` Storybook pages http://localhost:6006/?path=/docs/perseus-editor-widgets-interactive-graph-editor--docs http://localhost:6006/?path=/docs/perseus-widgets-interactive-graph--docs <img width="391" alt="Screenshot 2024-04-24 at 10 38 53 AM" src="https://github.com/Khan/perseus/assets/13231763/5516f6d9-5144-486f-9ce3-27d657741c81"> Author: nishasy Reviewers: jeremywiebe, handeyeco, nishasy, mark-fitzgerald Required Reviewers: Approved By: jeremywiebe, handeyeco Checks: ✅ codecov/project, ✅ codecov/patch, ✅ Upload Coverage, ✅ Publish npm snapshot (ubuntu-latest, 20.x), ✅ Extract i18n strings (ubuntu-latest, 20.x), ✅ Check builds for changes in size (ubuntu-latest, 20.x), ✅ Jest Coverage (ubuntu-latest, 20.x), ✅ Cypress (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: #1210
Khan · Apr 26, 2024 · 2d3c3b4 · 2d3c3b4
1 parent 0b08003
commit 2d3c3b4
Show file tree

Hide file tree

Showing 13 changed files with 82 additions and 85 deletions.
diff --git a/.changeset/gorgeous-phones-float.md b/.changeset/gorgeous-phones-float.md
@@ -0,0 +1,6 @@
+---
+"@khanacademy/perseus": minor
+"@khanacademy/perseus-editor": minor
+---
+
+Limit color set for locked figures in Interactive Graph
diff --git a/packages/perseus-editor/src/components/__stories__/color-select.stories.tsx b/packages/perseus-editor/src/components/__stories__/color-select.stories.tsx
@@ -1,6 +1,7 @@
 import * as React from "react";
 
 import ColorSelect from "../color-select";
+import {getDefaultFigureForType} from "../util";
 
 import type {LockedFigureColor} from "@khanacademy/perseus";
 import type {Meta} from "@storybook/react";
@@ -14,17 +15,19 @@ export const Default = (args): React.ReactElement => {
     return <ColorSelect {...args} />;
 };
 
+const defaultColor = getDefaultFigureForType("point").color;
+
 // Set the default values in the control panel.
 Default.args = {
     id: "color-select",
-    selectedValue: "blue",
+    selectedValue: defaultColor,
     onChange: () => {},
 };
 
 export const Controlled = {
     render: function Render() {
         const [selectedValue, setSelectedValue] =
-            React.useState<LockedFigureColor>("blue");
+            React.useState<LockedFigureColor>(defaultColor);
 
         const handleColorChange = (color: LockedFigureColor) => {
             setSelectedValue(color);

diff --git a/packages/perseus-editor/src/components/__stories__/color-swatch.stories.tsx b/packages/perseus-editor/src/components/__stories__/color-swatch.stories.tsx
@@ -1,6 +1,7 @@
 import * as React from "react";
 
 import ColorSwatch from "../color-swatch";
+import {getDefaultFigureForType} from "../util";
 
 import type {Meta} from "@storybook/react";
 
@@ -15,6 +16,6 @@ export const Default = (args): React.ReactElement => {
 
 // Set the default values in the control panel.
 Default.args = {
-    color: "blue",
+    color: getDefaultFigureForType("point").color,
     filled: true,
 };
diff --git a/packages/perseus-editor/src/components/__tests__/locked-point-settings.test.tsx b/packages/perseus-editor/src/components/__tests__/locked-point-settings.test.tsx
@@ -18,7 +18,7 @@ describe("LockedPointSettings", () => {
         );
 
         const titleText = screen.getByText("Point (0, 0)");
-        const colorSwatch = screen.getByLabelText("Color: blue, filled");
+        const colorSwatch = screen.getByLabelText("Color: green, filled");
 
         // Assert
         expect(titleText).toBeInTheDocument();

diff --git a/packages/perseus-editor/src/components/__tests__/util.test.ts b/packages/perseus-editor/src/components/__tests__/util.test.ts
@@ -44,7 +44,7 @@ describe("getDefaultFigureForType", () => {
         expect(figure).toEqual({
             type: "point",
             coord: [0, 0],
-            color: "blue",
+            color: "green",
             filled: true,
         });
     });
@@ -58,17 +58,17 @@ describe("getDefaultFigureForType", () => {
                 {
                     type: "point",
                     coord: [0, 0],
-                    color: "blue",
+                    color: "green",
                     filled: true,
                 },
                 {
                     type: "point",
                     coord: [2, 2],
-                    color: "blue",
+                    color: "green",
                     filled: true,
                 },
             ],
-            color: "blue",
+            color: "green",
             lineStyle: "solid",
             showArrows: false,
             showStartPoint: false,

diff --git a/packages/perseus-editor/src/components/locked-line-settings.tsx b/packages/perseus-editor/src/components/locked-line-settings.tsx
@@ -35,7 +35,7 @@ const LockedLineSettings = (props: Props) => {
     const {
         kind,
         points,
-        color: lineColor = "blue",
+        color: lineColor,
         lineStyle = "solid",
         showArrows,
         showStartPoint,
@@ -133,7 +133,7 @@ const LockedLineSettings = (props: Props) => {
                         {/* Line color settings */}
                         <ColorSelect
                             id={colorSelectId}
-                            selectedValue={lineColor || "blue"}
+                            selectedValue={lineColor}
                             onChange={handleColorChange}
                         />
                         <Strut size={spacing.medium_16} />

diff --git a/packages/perseus-editor/src/components/locked-point-settings.tsx b/packages/perseus-editor/src/components/locked-point-settings.tsx
@@ -170,7 +170,7 @@ const LockedPointSettings = (props: Props) => {
                         <>
                             <ColorSelect
                                 id={colorSelectId}
-                                selectedValue={pointColor || "blue"}
+                                selectedValue={pointColor}
                                 onChange={handleColorChange}
                             />
                             <Strut size={spacing.xSmall_8} />

diff --git a/packages/perseus-editor/src/components/util.ts b/packages/perseus-editor/src/components/util.ts
@@ -52,6 +52,8 @@ export function getValidNumberFromString(value: string) {
     return isNaN(parsed) ? 0 : parsed;
 }
 
+const DEFAULT_COLOR = "green";
+
 export function getDefaultFigureForType(type: "point"): LockedPointType;
 export function getDefaultFigureForType(type: "line"): LockedLineType;
 export function getDefaultFigureForType(type: LockedFigureType): LockedFigure;
@@ -61,7 +63,7 @@ export function getDefaultFigureForType(type: LockedFigureType): LockedFigure {
             return {
                 type: "point",
                 coord: [0, 0],
-                color: "blue",
+                color: DEFAULT_COLOR,
                 filled: true,
             };
         case "line":
@@ -75,7 +77,7 @@ export function getDefaultFigureForType(type: LockedFigureType): LockedFigure {
                         coord: [2, 2],
                     },
                 ],
-                color: "blue",
+                color: DEFAULT_COLOR,
                 lineStyle: "solid",
                 showArrows: false,
                 showStartPoint: false,

diff --git a/packages/perseus-editor/src/widgets/__stories__/interactive-graph-editor.stories.tsx b/packages/perseus-editor/src/widgets/__stories__/interactive-graph-editor.stories.tsx
@@ -1,6 +1,7 @@
 import * as React from "react";
 
 import {flags} from "../../__stories__/flags-for-api-options";
+import {getDefaultFigureForType} from "../../components/util";
 import InteractiveGraphEditor from "../interactive-graph-editor";
 
 import InteractiveGraphEditorArgTypes from "./interactive-graph-editor.argtypes";
@@ -19,11 +20,7 @@ const mafsOptions = {
     },
 };
 
-const defaultPointProps = {
-    type: "point",
-    color: "blue",
-    filled: true,
-};
+const defaultPointProps = getDefaultFigureForType("point");
 
 export default {
     title: "PerseusEditor/Widgets/Interactive Graph Editor",
@@ -156,7 +153,7 @@ export const WithLockedLines: StoryComponentType = {
                         {...defaultPointProps, coord: [0, 2]},
                         {...defaultPointProps, coord: [2, 3]},
                     ],
-                    color: "blue",
+                    color: "green",
                     lineStyle: "solid",
                     showArrows: false,
                     showStartPoint: false,
@@ -179,10 +176,10 @@ export const WithLockedLines: StoryComponentType = {
                     type: "line",
                     kind: "segment",
                     points: [
-                        {...defaultPointProps, color: "green", coord: [0, -2]},
-                        {...defaultPointProps, color: "green", coord: [4, 0]},
+                        {...defaultPointProps, color: "grayH", coord: [0, -2]},
+                        {...defaultPointProps, color: "grayH", coord: [4, 0]},
                     ],
-                    color: "green",
+                    color: "grayH",
                     lineStyle: "solid",
                     showArrows: true,
                     showStartPoint: true,

diff --git a/packages/perseus/src/perseus-types.ts b/packages/perseus/src/perseus-types.ts
@@ -655,33 +655,21 @@ export type PerseusInteractiveGraphWidgetOptions = {
     lockedFigures?: ReadonlyArray<LockedFigure>;
 };
 
-// TODO: If/when these colors are added to Wonder Blocks, we should remove
-// them from here and use Wonder Blocks everywhere else instead.
 const lockedFigureColorNames = [
-    "blue",
     "green",
-    "gray",
     "grayH",
-    "grayI",
     "purple",
-    "purpleD",
     "pink",
-    "orange",
     "red",
 ] as const;
 
 export type LockedFigureColor = (typeof lockedFigureColorNames)[number];
 
 export const lockedFigureColors: Record<LockedFigureColor, string> = {
-    blue: "#3D7586",
     green: "#447A53",
-    gray: "#5D5F66",
     grayH: "#3B3D45",
-    grayI: "#21242C",
     purple: "#594094",
-    purpleD: "#8351E8",
     pink: "#B25071",
-    orange: "#946700",
     red: "#D92916",
 } as const;