chore(site): add FileUpload stories (#12456)

BrunoQuaresma · web-flow · commit 5b2acbc5b708 · 2024-03-08T09:08:44.000-03:00
Related to #12260
diff --git a/site/src/components/FileUpload/FileUpload.stories.tsx 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
@@ -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,
   },
