From 18d1c17db1a3673b50dcd836de801838ff4a5624 Mon Sep 17 00:00:00 2001
From: Bruno Quaresma <bruno@coder.com>
Date: Fri, 8 Mar 2024 08:06:56 -0300
Subject: [PATCH] chore(site): add storybook for BuildAvatar and BuildIcon
 (#12455)

Related to https://github.com/coder/coder/issues/12260
---
 .../BuildAvatar/BuildAvatar.stories.tsx       | 137 ++++++++++++++++++
 .../BuildIcon/BuildIcon.stories.tsx           |  28 ++++
 2 files changed, 165 insertions(+)
 create mode 100644 site/src/components/BuildAvatar/BuildAvatar.stories.tsx
 create mode 100644 site/src/components/BuildIcon/BuildIcon.stories.tsx

diff --git a/site/src/components/BuildAvatar/BuildAvatar.stories.tsx b/site/src/components/BuildAvatar/BuildAvatar.stories.tsx
new file mode 100644
index 0000000000..c61662c079
--- /dev/null
+++ b/site/src/components/BuildAvatar/BuildAvatar.stories.tsx
@@ -0,0 +1,137 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { MockWorkspaceBuild } from "testHelpers/entities";
+import { BuildAvatar } from "./BuildAvatar";
+
+const meta: Meta<typeof BuildAvatar> = {
+  title: "components/BuildAvatar",
+  component: BuildAvatar,
+  args: {
+    build: MockWorkspaceBuild,
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof BuildAvatar>;
+
+export const XSSize: Story = {
+  args: {
+    size: "xs",
+  },
+};
+
+export const SMSize: Story = {
+  args: {
+    size: "sm",
+  },
+};
+
+export const MDSize: Story = {
+  args: {
+    size: "md",
+  },
+};
+
+export const XLSize: Story = {
+  args: {
+    size: "xl",
+  },
+};
+
+export const Start: Story = {
+  args: {
+    build: {
+      ...MockWorkspaceBuild,
+      transition: "start",
+    },
+  },
+};
+
+export const Stop: Story = {
+  args: {
+    build: {
+      ...MockWorkspaceBuild,
+      transition: "stop",
+    },
+  },
+};
+
+export const Delete: Story = {
+  args: {
+    build: {
+      ...MockWorkspaceBuild,
+      transition: "delete",
+    },
+  },
+};
+
+export const Succeeded: Story = {
+  args: {
+    build: {
+      ...MockWorkspaceBuild,
+      job: {
+        ...MockWorkspaceBuild.job,
+        status: "succeeded",
+      },
+    },
+  },
+};
+
+export const Pending: Story = {
+  args: {
+    build: {
+      ...MockWorkspaceBuild,
+      job: {
+        ...MockWorkspaceBuild.job,
+        status: "pending",
+      },
+    },
+  },
+};
+
+export const Running: Story = {
+  args: {
+    build: {
+      ...MockWorkspaceBuild,
+      job: {
+        ...MockWorkspaceBuild.job,
+        status: "running",
+      },
+    },
+  },
+};
+
+export const Failed: Story = {
+  args: {
+    build: {
+      ...MockWorkspaceBuild,
+      job: {
+        ...MockWorkspaceBuild.job,
+        status: "failed",
+      },
+    },
+  },
+};
+
+export const Canceling: Story = {
+  args: {
+    build: {
+      ...MockWorkspaceBuild,
+      job: {
+        ...MockWorkspaceBuild.job,
+        status: "canceling",
+      },
+    },
+  },
+};
+
+export const Canceled: Story = {
+  args: {
+    build: {
+      ...MockWorkspaceBuild,
+      job: {
+        ...MockWorkspaceBuild.job,
+        status: "canceled",
+      },
+    },
+  },
+};
diff --git a/site/src/components/BuildIcon/BuildIcon.stories.tsx b/site/src/components/BuildIcon/BuildIcon.stories.tsx
new file mode 100644
index 0000000000..1b80dbb31b
--- /dev/null
+++ b/site/src/components/BuildIcon/BuildIcon.stories.tsx
@@ -0,0 +1,28 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { BuildIcon } from "./BuildIcon";
+
+const meta: Meta<typeof BuildIcon> = {
+  title: "components/BuildIcon",
+  component: BuildIcon,
+};
+
+export default meta;
+type Story = StoryObj<typeof BuildIcon>;
+
+export const Start: Story = {
+  args: {
+    transition: "start",
+  },
+};
+
+export const Stop: Story = {
+  args: {
+    transition: "stop",
+  },
+};
+
+export const Delete: Story = {
+  args: {
+    transition: "delete",
+  },
+};