From 5b2acbc5b70834c8819a8049f5dd3663f108eb97 Mon Sep 17 00:00:00 2001
From: Bruno Quaresma <bruno@coder.com>
Date: Fri, 8 Mar 2024 09:08:44 -0300
Subject: [PATCH] chore(site): add FileUpload stories (#12456)

Related to https://github.com/coder/coder/issues/12260
---
 .../FileUpload/FileUpload.stories.tsx         | 35 +++++++++++++++++++
 site/src/components/FileUpload/FileUpload.tsx | 21 ++++++++---
 2 files changed, 51 insertions(+), 5 deletions(-)
 create mode 100644 site/src/components/FileUpload/FileUpload.stories.tsx

diff --git a/site/src/components/FileUpload/FileUpload.stories.tsx b/site/src/components/FileUpload/FileUpload.stories.tsx
new file mode 100644
index 0000000000..be49f25d92
--- /dev/null
+++ b/site/src/components/FileUpload/FileUpload.stories.tsx
@@ -0,0 +1,35 @@
+import Link from "@mui/material/Link";
+import type { Meta, StoryObj } from "@storybook/react";
+import { FileUpload } from "./FileUpload";
+
+const meta: Meta<typeof FileUpload> = {
+  title: "components/FileUpload",
+  component: FileUpload,
+  args: {
+    title: "Upload template",
+    description: (
+      <>
+        The template has to be a .tar or .zip file. You can also use our{" "}
+        <Link href="/starter-templates">starter templates</Link> to getting
+        started with Coder.
+      </>
+    ),
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof FileUpload>;
+
+export const Default: Story = {};
+
+export const Uploading: Story = {
+  args: {
+    isUploading: true,
+  },
+};
+
+export const WithFile: Story = {
+  args: {
+    file: new File([], "template.zip"),
+  },
+};
diff --git a/site/src/components/FileUpload/FileUpload.tsx b/site/src/components/FileUpload/FileUpload.tsx
index c6feb07189..79e0a3b4f2 100644
--- a/site/src/components/FileUpload/FileUpload.tsx
+++ b/site/src/components/FileUpload/FileUpload.tsx
@@ -64,11 +64,13 @@ export const FileUpload: FC<FileUploadProps> = ({
         {...fileDrop}
       >
         <Stack alignItems="center" spacing={1}>
-          {isUploading ? (
-            <CircularProgress size={32} />
-          ) : (
-            <UploadIcon css={styles.icon} />
-          )}
+          <div css={styles.iconWrapper}>
+            {isUploading ? (
+              <CircularProgress size={32} />
+            ) : (
+              <UploadIcon css={styles.icon} />
+            )}
+          </div>
 
           <Stack alignItems="center" spacing={0.5}>
             <span css={styles.title}>{title}</span>
@@ -155,6 +157,15 @@ const styles = {
     opacity: 0.75,
   },
 
+  // Used to maintain the size of icon and spinner
+  iconWrapper: {
+    width: 64,
+    height: 64,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+  },
+
   icon: {
     fontSize: 64,
   },