refactor: Rename Icons and add stories (#1080)

* Rename CloseIcon

* Rename FileCopyIcon, take out of index

* Rename LogoutIcon and remove from index

* Delete icons index files

* Add icon stories

* Lint

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>

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

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 = {}

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 = {}

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 = {}

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 = {}

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 = {}

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 = {}

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"

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 = {}

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 = {}

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 = {}

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 = {}

site/src/components/Icons/index.test.tsx

@@ -1,21 +0,0 @@
-import SvgIcon from "@material-ui/core/SvgIcon"
-import React from "react"
-import { render } from "../../testHelpers"
-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 />)
-  })
-})

site/src/components/Icons/index.ts

@@ -1,5 +0,0 @@
-export { CoderIcon } from "./CoderIcon"
-export * from "./FileCopy"
-export { Logo } from "./Logo"
-export * from "./Logout"
-export { WorkspacesIcon } from "./WorkspacesIcon"

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 {

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"
 import { DocsIcon } from "../../Icons/DocsIcon"
+import { LogoutIcon } from "../../Icons/LogoutIcon"
 import { UserAvatar } from "../../User"
 import { UserProfileCard } from "../../User/UserProfileCard"
 

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()