chore: add stories for DropdownArrow (#11764)

aslilac · web-flow · commit 31a6a5dc6d05 · 2024-01-23T16:02:57.000-07:00
diff --git a/site/src/components/DropdownArrow/DropdownArrow.stories.tsx 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
@@ -1,28 +1,38 @@
 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;
   color?: string;
   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>>;
