Introduce a ToggleableCaret icon (#1284)

## Summary:

I was starting to build this exact toggleable icon again so I've extracted the first usage into the `ToggleableCaret` component. A follow-up PR will use it in a new location.
 

https://github.com/Khan/perseus/assets/77138/7895463c-e86d-4cb5-ac0f-76f95edfb59b



Issue: "none"

## Test plan:

`yarn start`
Navigate to the `ToggleableCaret` story

Watch for a few hours and be amazed! ✨

Author: jeremywiebe

Reviewers: mark-fitzgerald, nishasy

Required Reviewers:

Approved By: mark-fitzgerald

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

Pull Request URL: #1284

.changeset/wild-files-begin.md

@@ -0,0 +1,5 @@
+---
+"@khanacademy/perseus-editor": minor
+---
+
+Add ToggleableCaret component and use in TexErrorView

packages/perseus-editor/package.json

@@ -44,6 +44,7 @@
         "@khanacademy/wonder-blocks-switch": "1.1.16",
         "@khanacademy/wonder-blocks-tooltip": "2.3.1",
         "@khanacademy/wonder-blocks-tokens": "1.3.0",
+        "@khanacademy/wonder-blocks-timing": "5.0.0",
         "@khanacademy/wonder-blocks-typography": "2.1.11",
         "@khanacademy/wonder-stuff-core": "1.5.2",
         "@phosphor-icons/core": "^2.0.2",
@@ -69,6 +70,7 @@
         "@khanacademy/wonder-blocks-icon": "4.1.0",
         "@khanacademy/wonder-blocks-icon-button": "5.2.1",
         "@khanacademy/wonder-blocks-switch": "1.1.16",
+        "@khanacademy/wonder-blocks-timing": "5.0.0",
         "@khanacademy/wonder-blocks-tooltip": "2.3.1",
         "@khanacademy/wonder-blocks-tokens": "1.3.0",
         "@khanacademy/wonder-blocks-typography": "2.1.11",

packages/perseus-editor/src/components/__stories__/toggleable-caret.stories.tsx

@@ -0,0 +1,31 @@
+import {SchedulePolicy, useInterval} from "@khanacademy/wonder-blocks-timing";
+import * as React from "react";
+
+import ToggleableCaret from "../toggleable-caret";
+
+import type {StoryObj, Meta} from "@storybook/react";
+
+type Story = StoryObj<typeof ToggleableCaret>;
+
+export default {
+    title: "PerseusEditor/Components/Toggleable Caret",
+    component: ToggleableCaret,
+} satisfies Meta;
+
+export function Transitions() {
+    const [expanded, setExpanded] = React.useState(false);
+    const toggler = React.useCallback(() => {
+        setExpanded(!expanded);
+    }, [setExpanded, expanded]);
+    useInterval(toggler, 500, {schedulePolicy: SchedulePolicy.Immediately});
+
+    return <ToggleableCaret isExpanded={expanded} />;
+}
+
+export const Expanded: Story = {
+    args: {isExpanded: true},
+};
+
+export const Collapsed: Story = {
+    args: {isExpanded: false},
+};

packages/perseus-editor/src/components/toggleable-caret.tsx

@@ -0,0 +1,30 @@
+import {PhosphorIcon} from "@khanacademy/wonder-blocks-icon";
+import caretRight from "@phosphor-icons/core/bold/caret-right-bold.svg";
+import {StyleSheet} from "aphrodite";
+import * as React from "react";
+
+type Props = {
+    isExpanded: boolean;
+};
+
+/**
+ * Displays a caret in either expanded or collapsed state. For use in headings
+ * that collapse a region.
+ */
+function ToggleableCaret(props: Props) {
+    const iconStyle = props.isExpanded ? styles.expanded : styles.collapsed;
+
+    return <PhosphorIcon icon={caretRight} style={iconStyle} />;
+}
+
+const styles = StyleSheet.create({
+    collapsed: {
+        transition: ".15s",
+    },
+    expanded: {
+        transform: "rotate(90deg)",
+        transition: ".15s",
+    },
+});
+
+export default ToggleableCaret;

packages/perseus-editor/src/tex-error-view.tsx

@@ -1,9 +1,9 @@
 import {View} from "@khanacademy/wonder-blocks-core";
-import {PhosphorIcon} from "@khanacademy/wonder-blocks-icon";
-import caretRight from "@phosphor-icons/core/bold/caret-right-bold.svg";
 import {StyleSheet} from "aphrodite";
 import * as React from "react";
 
+import ToggleableCaret from "./components/toggleable-caret";
+
 type Props = {
     errorList: ReadonlyArray<{math: string; message: string}>;
 };
@@ -28,14 +28,10 @@ class TexErrorView extends React.Component<Props, State> {
         const {errorList} = this.props;
         const {showErrors} = this.state;
 
-        const iconStyle = showErrors
-            ? styles.iconExpanded
-            : styles.iconCollapsed;
-
         return (
             <View style={styles.errorContainer}>
                 <View style={styles.title} onClick={this.handleToggleTexErrors}>
-                    <PhosphorIcon icon={caretRight} style={iconStyle} />
+                    <ToggleableCaret isExpanded={showErrors} />
                     &nbsp; TeX Errors ({errorList.length})
                 </View>
                 {showErrors && (
@@ -78,13 +74,6 @@ const styles = StyleSheet.create({
     error: {
         padding: "4px 10px",
     },
-    iconCollapsed: {
-        transition: ".15s",
-    },
-    iconExpanded: {
-        transform: "rotate(90deg)",
-        transition: ".15s",
-    },
 });
 
 export default TexErrorView;