From ea1ff794de1cf66f3eb7a3e20ad1d4198cbcfad7 Mon Sep 17 00:00:00 2001
From: McKayla Washburn <mckayla@hey.com>
Date: Mon, 22 Jan 2024 23:41:45 +0000
Subject: [PATCH] chore: add stories for `DropdownArrow`

---
 .../DropdownArrow/DropdownArrow.stories.tsx   | 17 +++++++++++
 .../DropdownArrow/DropdownArrow.tsx           | 30 ++++++++++++-------
 2 files changed, 37 insertions(+), 10 deletions(-)
 create mode 100644 site/src/components/DropdownArrow/DropdownArrow.stories.tsx

diff --git a/site/src/components/DropdownArrow/DropdownArrow.stories.tsx b/site/src/components/DropdownArrow/DropdownArrow.stories.tsx
new file mode 100644
index 0000000000000..b7ef74d0f1304
--- /dev/null
+++ b/site/src/components/DropdownArrow/DropdownArrow.stories.tsx
@@ -0,0 +1,17 @@
+import { type Meta, type StoryObj } from "@storybook/react";
+import { chromatic } from "testHelpers/chromatic";
+import { DropdownArrow } from "./DropdownArrow";
+
+const meta: Meta<typeof DropdownArrow> = {
+  title: "components/DropdownArrow",
+  parameters: { chromatic },
+  component: DropdownArrow,
+  args: {},
+};
+
+export default meta;
+type Story = StoryObj<typeof DropdownArrow>;
+
+export const Open: Story = {};
+export const Close: Story = { args: { close: true } };
+export const WithColor: Story = { args: { color: "#f00" } };
diff --git a/site/src/components/DropdownArrow/DropdownArrow.tsx b/site/src/components/DropdownArrow/DropdownArrow.tsx
index 69b8d677e1a96..a70b3bf725e05 100644
--- a/site/src/components/DropdownArrow/DropdownArrow.tsx
+++ b/site/src/components/DropdownArrow/DropdownArrow.tsx
@@ -1,7 +1,7 @@
 import KeyboardArrowDown from "@mui/icons-material/KeyboardArrowDown";
 import KeyboardArrowUp from "@mui/icons-material/KeyboardArrowUp";
+import { type Interpolation, type Theme } from "@emotion/react";
 import { type FC } from "react";
-import { type Theme } from "@emotion/react";
 
 interface ArrowProps {
   margin?: boolean;
@@ -9,20 +9,30 @@ interface ArrowProps {
   close?: boolean;
 }
 
-export const DropdownArrow: FC<ArrowProps> = (props) => {
-  const { margin = true, color, close } = props;
-
+export const DropdownArrow: FC<ArrowProps> = ({
+  margin = true,
+  color,
+  close,
+}) => {
   const Arrow = close ? KeyboardArrowUp : KeyboardArrowDown;
 
   return (
     <Arrow
       aria-label={close ? "close-dropdown" : "open-dropdown"}
-      css={(theme: Theme) => ({
-        color: color ?? theme.palette.primary.contrastText,
-        marginLeft: margin ? 8 : 0,
-        width: 16,
-        height: 16,
-      })}
+      css={[styles.base, margin && styles.withMargin]}
+      style={{ color }}
     />
   );
 };
+
+const styles = {
+  base: (theme) => ({
+    color: theme.palette.primary.contrastText,
+    width: 16,
+    height: 16,
+  }),
+
+  withMargin: {
+    marginLeft: 8,
+  },
+} satisfies Record<string, Interpolation<Theme>>;