From eca859ad60f399a13415894dd8f01426c6347bc9 Mon Sep 17 00:00:00 2001
From: Presley <presley@coder.com>
Date: Tue, 19 Apr 2022 15:30:37 +0000
Subject: [PATCH 1/6] Rename CloseIcon

---
 site/src/components/Form/FormCloseButton.tsx           | 2 +-
 site/src/components/Icons/{Close.tsx => CloseIcon.tsx} | 0
 2 files changed, 1 insertion(+), 1 deletion(-)
 rename site/src/components/Icons/{Close.tsx => CloseIcon.tsx} (100%)

diff --git a/site/src/components/Form/FormCloseButton.tsx b/site/src/components/Form/FormCloseButton.tsx
index 9a04a3171d468..d97cf9437717f 100644
--- a/site/src/components/Form/FormCloseButton.tsx
+++ b/site/src/components/Form/FormCloseButton.tsx
@@ -2,7 +2,7 @@ import IconButton from "@material-ui/core/IconButton"
 import { makeStyles } from "@material-ui/core/styles"
 import Typography from "@material-ui/core/Typography"
 import React, { useEffect } from "react"
-import { CloseIcon } from "../Icons/Close"
+import { CloseIcon } from "../Icons/CloseIcon"
 
 export interface FormCloseButtonProps {
   onClose: () => void
diff --git a/site/src/components/Icons/Close.tsx b/site/src/components/Icons/CloseIcon.tsx
similarity index 100%
rename from site/src/components/Icons/Close.tsx
rename to site/src/components/Icons/CloseIcon.tsx

From 4ed892d336049c3af66093e21b4e34e928324518 Mon Sep 17 00:00:00 2001
From: Presley <presley@coder.com>
Date: Tue, 19 Apr 2022 15:33:34 +0000
Subject: [PATCH 2/6] Rename FileCopyIcon, take out of index

---
 site/src/components/Button/CopyButton.tsx                    | 4 ++--
 site/src/components/Icons/{FileCopy.tsx => FileCopyIcon.tsx} | 2 +-
 site/src/components/Icons/index.ts                           | 1 -
 3 files changed, 3 insertions(+), 4 deletions(-)
 rename site/src/components/Icons/{FileCopy.tsx => FileCopyIcon.tsx} (91%)

diff --git a/site/src/components/Button/CopyButton.tsx b/site/src/components/Button/CopyButton.tsx
index 4608111bb7a62..be2ecc01f2ee6 100644
--- a/site/src/components/Button/CopyButton.tsx
+++ b/site/src/components/Button/CopyButton.tsx
@@ -3,7 +3,7 @@ import { makeStyles } from "@material-ui/core/styles"
 import Tooltip from "@material-ui/core/Tooltip"
 import Check from "@material-ui/icons/Check"
 import React, { useState } from "react"
-import { FileCopy } from "../Icons"
+import { FileCopyIcon } from "../Icons/FileCopyIcon"
 
 interface CopyButtonProps {
   text: string
@@ -38,7 +38,7 @@ export const CopyButton: React.FC<CopyButtonProps> = ({ className = "", text })
     <Tooltip title="Copy to Clipboard" placement="top">
       <div className={`${styles.copyButtonWrapper} ${className}`}>
         <Button className={styles.copyButton} onClick={copyToClipboard} size="small">
-          {isCopied ? <Check className={styles.fileCopyIcon} /> : <FileCopy className={styles.fileCopyIcon} />}
+          {isCopied ? <Check className={styles.fileCopyIcon} /> : <FileCopyIcon className={styles.fileCopyIcon} />}
         </Button>
       </div>
     </Tooltip>
diff --git a/site/src/components/Icons/FileCopy.tsx b/site/src/components/Icons/FileCopyIcon.tsx
similarity index 91%
rename from site/src/components/Icons/FileCopy.tsx
rename to site/src/components/Icons/FileCopyIcon.tsx
index d8f33f101ef5f..f4269405c4117 100644
--- a/site/src/components/Icons/FileCopy.tsx
+++ b/site/src/components/Icons/FileCopyIcon.tsx
@@ -1,7 +1,7 @@
 import SvgIcon from "@material-ui/core/SvgIcon"
 import React from "react"
 
-export const FileCopy: typeof SvgIcon = (props) => (
+export const FileCopyIcon: typeof SvgIcon = (props) => (
   <SvgIcon {...props} viewBox="0 0 20 20">
     <path
       d="M12.7412 2.2807H4.32014C3.5447 2.2807 2.91663 2.90877 2.91663 3.68421V13.5088H4.32014V3.68421H12.7412V2.2807ZM14.8465 5.08772H7.12716C6.35172 5.08772 5.72365 5.71579 5.72365 6.49123V16.3158C5.72365 17.0912 6.35172 17.7193 7.12716 17.7193H14.8465C15.6219 17.7193 16.25 17.0912 16.25 16.3158V6.49123C16.25 5.71579 15.6219 5.08772 14.8465 5.08772ZM14.8465 16.3158H7.12716V6.49123H14.8465V16.3158Z"
diff --git a/site/src/components/Icons/index.ts b/site/src/components/Icons/index.ts
index bb6950f2f1da9..17f48ebaa4a98 100644
--- a/site/src/components/Icons/index.ts
+++ b/site/src/components/Icons/index.ts
@@ -1,5 +1,4 @@
 export { CoderIcon } from "./CoderIcon"
-export * from "./FileCopy"
 export { Logo } from "./Logo"
 export * from "./Logout"
 export { WorkspacesIcon } from "./WorkspacesIcon"

From ff6ce60198753f04fda9a6cffb2d1e8babd5d11c Mon Sep 17 00:00:00 2001
From: Presley <presley@coder.com>
Date: Tue, 19 Apr 2022 15:35:46 +0000
Subject: [PATCH 3/6] Rename LogoutIcon and remove from index

---
 site/src/components/Icons/{Logout.tsx => LogoutIcon.tsx} | 0
 site/src/components/Icons/index.ts                       | 1 -
 site/src/components/Navbar/UserDropdown/index.tsx        | 2 +-
 3 files changed, 1 insertion(+), 2 deletions(-)
 rename site/src/components/Icons/{Logout.tsx => LogoutIcon.tsx} (100%)

diff --git a/site/src/components/Icons/Logout.tsx b/site/src/components/Icons/LogoutIcon.tsx
similarity index 100%
rename from site/src/components/Icons/Logout.tsx
rename to site/src/components/Icons/LogoutIcon.tsx
diff --git a/site/src/components/Icons/index.ts b/site/src/components/Icons/index.ts
index 17f48ebaa4a98..c135b8db26e79 100644
--- a/site/src/components/Icons/index.ts
+++ b/site/src/components/Icons/index.ts
@@ -1,4 +1,3 @@
 export { CoderIcon } from "./CoderIcon"
 export { Logo } from "./Logo"
-export * from "./Logout"
 export { WorkspacesIcon } from "./WorkspacesIcon"
diff --git a/site/src/components/Navbar/UserDropdown/index.tsx b/site/src/components/Navbar/UserDropdown/index.tsx
index e220bd12da2a7..c911bea88f264 100644
--- a/site/src/components/Navbar/UserDropdown/index.tsx
+++ b/site/src/components/Navbar/UserDropdown/index.tsx
@@ -10,7 +10,7 @@ import { Link } from "react-router-dom"
 import { UserResponse } from "../../../api/types"
 import { BorderedMenu } from "../../BorderedMenu/BorderedMenu"
 import { CloseDropdown, OpenDropdown } from "../../DropdownArrows/DropdownArrows"
-import { LogoutIcon } from "../../Icons"
+import { LogoutIcon } from "../../Icons/LogoutIcon"
 import { DocsIcon } from "../../Icons/DocsIcon"
 import { UserAvatar } from "../../User"
 import { UserProfileCard } from "../../User/UserProfileCard"

From b6b21a9cc51d52e2d4cdb56107a3a6de3593e9ae Mon Sep 17 00:00:00 2001
From: Presley <presley@coder.com>
Date: Tue, 19 Apr 2022 15:45:13 +0000
Subject: [PATCH 4/6] Delete icons index files

---
 site/src/components/Icons/index.test.tsx      | 21 -------------------
 site/src/components/Icons/index.ts            |  3 ---
 .../components/Navbar/NavbarView/index.tsx    |  2 +-
 site/src/components/SignIn/Welcome.tsx        |  2 +-
 4 files changed, 2 insertions(+), 26 deletions(-)
 delete mode 100644 site/src/components/Icons/index.test.tsx
 delete mode 100644 site/src/components/Icons/index.ts

diff --git a/site/src/components/Icons/index.test.tsx b/site/src/components/Icons/index.test.tsx
deleted file mode 100644
index 31a0e98f82f56..0000000000000
--- a/site/src/components/Icons/index.test.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import SvgIcon from "@material-ui/core/SvgIcon"
-import React from "react"
-import { render } from "./../../test_helpers"
-import * as Icons from "./index"
-
-const getAllIcons = (): [string, typeof SvgIcon][] => {
-  let k: keyof typeof Icons
-  const ret: [string, typeof SvgIcon][] = []
-  for (k in Icons) {
-    ret.push([k, Icons[k]])
-  }
-  return ret
-}
-
-describe("Icons", () => {
-  const allIcons = getAllIcons()
-
-  it.each(allIcons)(`rendering icon %p`, (_name, Icon) => {
-    render(<Icon />)
-  })
-})
diff --git a/site/src/components/Icons/index.ts b/site/src/components/Icons/index.ts
deleted file mode 100644
index c135b8db26e79..0000000000000
--- a/site/src/components/Icons/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export { CoderIcon } from "./CoderIcon"
-export { Logo } from "./Logo"
-export { WorkspacesIcon } from "./WorkspacesIcon"
diff --git a/site/src/components/Navbar/NavbarView/index.tsx b/site/src/components/Navbar/NavbarView/index.tsx
index 58a9b387f9285..ef7d62ab55d14 100644
--- a/site/src/components/Navbar/NavbarView/index.tsx
+++ b/site/src/components/Navbar/NavbarView/index.tsx
@@ -6,7 +6,7 @@ import { NavLink } from "react-router-dom"
 import { UserResponse } from "../../../api/types"
 import { navHeight } from "../../../theme/constants"
 import { AdminDropdown } from "../../AdminDropdown/AdminDropdown"
-import { Logo } from "../../Icons"
+import { Logo } from "../../Icons/Logo"
 import { UserDropdown } from "../UserDropdown"
 
 export interface NavbarViewProps {
diff --git a/site/src/components/SignIn/Welcome.tsx b/site/src/components/SignIn/Welcome.tsx
index 5b4710670c2c1..309265f5994c3 100644
--- a/site/src/components/SignIn/Welcome.tsx
+++ b/site/src/components/SignIn/Welcome.tsx
@@ -1,7 +1,7 @@
 import { makeStyles } from "@material-ui/core/styles"
 import Typography from "@material-ui/core/Typography"
 import React from "react"
-import { CoderIcon } from "../Icons"
+import { CoderIcon } from "../Icons/CoderIcon"
 
 export const Welcome: React.FC = () => {
   const styles = useStyles()

From f39800320e65eb62dd8f38a2b06c46a547eb24fc Mon Sep 17 00:00:00 2001
From: Presley <presley@coder.com>
Date: Tue, 19 Apr 2022 16:01:03 +0000
Subject: [PATCH 5/6] Add icon stories

---
 site/src/components/Icons/BuildingIcon.stories.tsx  | 13 +++++++++++++
 site/src/components/Icons/CloseIcon.stories.tsx     | 13 +++++++++++++
 site/src/components/Icons/CoderIcon.stories.tsx     | 13 +++++++++++++
 site/src/components/Icons/DocsIcon.stories.tsx      | 13 +++++++++++++
 site/src/components/Icons/ErrorIcon.stories.tsx     | 13 +++++++++++++
 site/src/components/Icons/FileCopyIcon.stories.tsx  | 13 +++++++++++++
 site/src/components/Icons/Logo.stories.tsx          | 13 +++++++++++++
 site/src/components/Icons/LogoutIcon.stories.tsx    | 13 +++++++++++++
 .../components/Icons/UsersOutlinedIcon.stories.tsx  | 13 +++++++++++++
 .../src/components/Icons/WorkspacesIcon.stories.tsx | 13 +++++++++++++
 10 files changed, 130 insertions(+)
 create mode 100644 site/src/components/Icons/BuildingIcon.stories.tsx
 create mode 100644 site/src/components/Icons/CloseIcon.stories.tsx
 create mode 100644 site/src/components/Icons/CoderIcon.stories.tsx
 create mode 100644 site/src/components/Icons/DocsIcon.stories.tsx
 create mode 100644 site/src/components/Icons/ErrorIcon.stories.tsx
 create mode 100644 site/src/components/Icons/FileCopyIcon.stories.tsx
 create mode 100644 site/src/components/Icons/Logo.stories.tsx
 create mode 100644 site/src/components/Icons/LogoutIcon.stories.tsx
 create mode 100644 site/src/components/Icons/UsersOutlinedIcon.stories.tsx
 create mode 100644 site/src/components/Icons/WorkspacesIcon.stories.tsx

diff --git a/site/src/components/Icons/BuildingIcon.stories.tsx b/site/src/components/Icons/BuildingIcon.stories.tsx
new file mode 100644
index 0000000000000..5f490d4755da3
--- /dev/null
+++ b/site/src/components/Icons/BuildingIcon.stories.tsx
@@ -0,0 +1,13 @@
+import { Story } from "@storybook/react"
+import React from "react"
+import { BuildingIcon } from "./BuildingIcon"
+
+export default {
+  title: "icons/BuildingIcon",
+  component: BuildingIcon,
+}
+
+const Template: Story = (args) => <BuildingIcon {...args} />
+
+export const Example = Template.bind({})
+Example.args = {}
diff --git a/site/src/components/Icons/CloseIcon.stories.tsx b/site/src/components/Icons/CloseIcon.stories.tsx
new file mode 100644
index 0000000000000..e352cd50864cd
--- /dev/null
+++ b/site/src/components/Icons/CloseIcon.stories.tsx
@@ -0,0 +1,13 @@
+import { Story } from "@storybook/react"
+import React from "react"
+import { CloseIcon } from "./CloseIcon"
+
+export default {
+  title: "icons/CloseIcon",
+  component: CloseIcon,
+}
+
+const Template: Story = (args) => <CloseIcon {...args} />
+
+export const Example = Template.bind({})
+Example.args = {}
diff --git a/site/src/components/Icons/CoderIcon.stories.tsx b/site/src/components/Icons/CoderIcon.stories.tsx
new file mode 100644
index 0000000000000..8581d663ed607
--- /dev/null
+++ b/site/src/components/Icons/CoderIcon.stories.tsx
@@ -0,0 +1,13 @@
+import { Story } from "@storybook/react"
+import React from "react"
+import { CoderIcon } from "./CoderIcon"
+
+export default {
+  title: "icons/CoderIcon",
+  component: CoderIcon,
+}
+
+const Template: Story = (args) => <CoderIcon {...args} />
+
+export const Example = Template.bind({})
+Example.args = {}
diff --git a/site/src/components/Icons/DocsIcon.stories.tsx b/site/src/components/Icons/DocsIcon.stories.tsx
new file mode 100644
index 0000000000000..fa50b9a7ca8ae
--- /dev/null
+++ b/site/src/components/Icons/DocsIcon.stories.tsx
@@ -0,0 +1,13 @@
+import { Story } from "@storybook/react"
+import React from "react"
+import { DocsIcon } from "./DocsIcon"
+
+export default {
+  title: "icons/DocsIcon",
+  component: DocsIcon,
+}
+
+const Template: Story = (args) => <DocsIcon {...args} />
+
+export const Example = Template.bind({})
+Example.args = {}
diff --git a/site/src/components/Icons/ErrorIcon.stories.tsx b/site/src/components/Icons/ErrorIcon.stories.tsx
new file mode 100644
index 0000000000000..cddba329e6a59
--- /dev/null
+++ b/site/src/components/Icons/ErrorIcon.stories.tsx
@@ -0,0 +1,13 @@
+import { Story } from "@storybook/react"
+import React from "react"
+import { ErrorIcon } from "./ErrorIcon"
+
+export default {
+  title: "icons/ErrorIcon",
+  component: ErrorIcon,
+}
+
+const Template: Story = (args) => <ErrorIcon {...args} />
+
+export const Example = Template.bind({})
+Example.args = {}
diff --git a/site/src/components/Icons/FileCopyIcon.stories.tsx b/site/src/components/Icons/FileCopyIcon.stories.tsx
new file mode 100644
index 0000000000000..c67afad36b953
--- /dev/null
+++ b/site/src/components/Icons/FileCopyIcon.stories.tsx
@@ -0,0 +1,13 @@
+import { Story } from "@storybook/react"
+import React from "react"
+import { FileCopyIcon } from "./FileCopyIcon"
+
+export default {
+  title: "icons/FileCopyIcon",
+  component: FileCopyIcon,
+}
+
+const Template: Story = (args) => <FileCopyIcon {...args} />
+
+export const Example = Template.bind({})
+Example.args = {}
diff --git a/site/src/components/Icons/Logo.stories.tsx b/site/src/components/Icons/Logo.stories.tsx
new file mode 100644
index 0000000000000..7bc33230a8db3
--- /dev/null
+++ b/site/src/components/Icons/Logo.stories.tsx
@@ -0,0 +1,13 @@
+import { Story } from "@storybook/react"
+import React from "react"
+import { Logo } from "./Logo"
+
+export default {
+  title: "icons/Logo",
+  component: Logo,
+}
+
+const Template: Story = (args) => <Logo fill="black" {...args} />
+
+export const Example = Template.bind({})
+Example.args = {}
diff --git a/site/src/components/Icons/LogoutIcon.stories.tsx b/site/src/components/Icons/LogoutIcon.stories.tsx
new file mode 100644
index 0000000000000..e886d0f41cf95
--- /dev/null
+++ b/site/src/components/Icons/LogoutIcon.stories.tsx
@@ -0,0 +1,13 @@
+import { Story } from "@storybook/react"
+import React from "react"
+import { LogoutIcon } from "./LogoutIcon"
+
+export default {
+  title: "icons/LogoutIcon",
+  component: LogoutIcon,
+}
+
+const Template: Story = (args) => <LogoutIcon {...args} />
+
+export const Example = Template.bind({})
+Example.args = {}
diff --git a/site/src/components/Icons/UsersOutlinedIcon.stories.tsx b/site/src/components/Icons/UsersOutlinedIcon.stories.tsx
new file mode 100644
index 0000000000000..ad2119e17314f
--- /dev/null
+++ b/site/src/components/Icons/UsersOutlinedIcon.stories.tsx
@@ -0,0 +1,13 @@
+import { Story } from "@storybook/react"
+import React from "react"
+import { UsersOutlinedIcon } from "./UsersOutlinedIcon"
+
+export default {
+  title: "icons/UsersOutlinedIcon",
+  component: UsersOutlinedIcon,
+}
+
+const Template: Story = (args) => <UsersOutlinedIcon {...args} />
+
+export const Example = Template.bind({})
+Example.args = {}
diff --git a/site/src/components/Icons/WorkspacesIcon.stories.tsx b/site/src/components/Icons/WorkspacesIcon.stories.tsx
new file mode 100644
index 0000000000000..2e44efcf2b7af
--- /dev/null
+++ b/site/src/components/Icons/WorkspacesIcon.stories.tsx
@@ -0,0 +1,13 @@
+import { Story } from "@storybook/react"
+import React from "react"
+import { WorkspacesIcon } from "./WorkspacesIcon"
+
+export default {
+  title: "icons/WorkspacesIcon",
+  component: WorkspacesIcon,
+}
+
+const Template: Story = (args) => <WorkspacesIcon {...args} />
+
+export const Example = Template.bind({})
+Example.args = {}

From 7f97a5e9266a78e76709b94b9c734829ca246d3d Mon Sep 17 00:00:00 2001
From: Presley <presley@coder.com>
Date: Tue, 19 Apr 2022 16:04:19 +0000
Subject: [PATCH 6/6] Lint

---
 site/src/components/Navbar/UserDropdown/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/site/src/components/Navbar/UserDropdown/index.tsx b/site/src/components/Navbar/UserDropdown/index.tsx
index c911bea88f264..23f3aee71e734 100644
--- a/site/src/components/Navbar/UserDropdown/index.tsx
+++ b/site/src/components/Navbar/UserDropdown/index.tsx
@@ -10,8 +10,8 @@ import { Link } from "react-router-dom"
 import { UserResponse } from "../../../api/types"
 import { BorderedMenu } from "../../BorderedMenu/BorderedMenu"
 import { CloseDropdown, OpenDropdown } from "../../DropdownArrows/DropdownArrows"
-import { LogoutIcon } from "../../Icons/LogoutIcon"
 import { DocsIcon } from "../../Icons/DocsIcon"
+import { LogoutIcon } from "../../Icons/LogoutIcon"
 import { UserAvatar } from "../../User"
 import { UserProfileCard } from "../../User/UserProfileCard"