Add and organize stories

presleyp · presleyp · commit 6bb47e02260d · 2022-04-07T21:20:05.000Z
diff --git a/site/src/components/BorderedMenu/BorderedMenu.stories.tsx b/site/src/components/BorderedMenu/BorderedMenu.stories.tsx
@@ -0,0 +1,39 @@
+import { Story } from "@storybook/react"
+import React from "react"
+import { BorderedMenu, BorderedMenuProps } from "."
+import { BuildingIcon } from "../Icons/BuildingIcon"
+import { UsersOutlinedIcon } from "../Icons/UsersOutlinedIcon"
+import { BorderedMenuRow } from "./BorderedMenuRow"
+
+export default {
+  title: "Navbar/BorderedMenu",
+  component: BorderedMenu,
+}
+
+const Template: Story<BorderedMenuProps> = (args: BorderedMenuProps) => (
+  <BorderedMenu {...args}>
+    <BorderedMenuRow
+      title="Item 1"
+      description="Here's a description"
+      Icon={BuildingIcon}
+    />
+    <BorderedMenuRow
+      active
+      title="Item 2"
+      description="This BorderedMenuRow is active"
+      Icon={UsersOutlinedIcon}
+     />
+  </BorderedMenu>
+)
+
+export const AdminVariant = Template.bind({})
+AdminVariant.args = {
+  variant: "admin-dropdown",
+  open: true
+}
+
+export const UserVariant = Template.bind({})
+UserVariant.args = {
+  variant: "user-dropdown",
+  open: true
+}
diff --git a/site/src/components/BorderedMenu/index.tsx b/site/src/components/BorderedMenu/index.tsx
@@ -4,7 +4,7 @@ import React from "react"
 
 type BorderedMenuVariant = "admin-dropdown" | "user-dropdown"
 
-type BorderedMenuProps = Omit<PopoverProps, "variant"> & {
+export type BorderedMenuProps = Omit<PopoverProps, "variant"> & {
   variant?: BorderedMenuVariant
 }
 
diff --git a/site/src/components/Navbar/AdminDropdown/AdminDropdown.stories.tsx b/site/src/components/Navbar/AdminDropdown/AdminDropdown.stories.tsx
@@ -0,0 +1,17 @@
+import Box from "@material-ui/core/Box"
+import { Story } from "@storybook/react"
+import React from "react"
+import { AdminDropdown } from "."
+
+export default {
+  title: "Navbar/AdminDropdown",
+  component: AdminDropdown,
+}
+
+const Template: Story = () => (
+  <Box style={{ backgroundColor: "#000", width: 100 }}>
+    <AdminDropdown />
+  </Box>
+)
+
+export const Example = Template.bind({})
diff --git a/site/src/components/Navbar/NavbarView/NavbarView.stories.tsx b/site/src/components/Navbar/NavbarView/NavbarView.stories.tsx
@@ -3,7 +3,7 @@ import React from "react"
 import { NavbarView, NavbarViewProps } from "."
 
 export default {
-  title: "Page/NavbarView",
+  title: "Navbar/NavbarView",
   component: NavbarView,
   argTypes: {
     onSignOut: { action: "Sign Out" },
@@ -12,8 +12,16 @@ export default {
 
 const Template: Story<NavbarViewProps> = (args: NavbarViewProps) => <NavbarView {...args} />
 
-export const Primary = Template.bind({})
-Primary.args = {
+export const ForAdmin = Template.bind({})
+ForAdmin.args = {
+  user: { id: "1", username: "Administrator", email: "admin@coder.com", created_at: "dawn" },
+  onSignOut: () => {
+    return Promise.resolve()
+  },
+}
+
+export const ForMember = Template.bind({})
+ForMember.args = {
   user: { id: "1", username: "CathyCoder", email: "cathy@coder.com", created_at: "dawn" },
   onSignOut: () => {
     return Promise.resolve()
diff --git a/site/src/components/Navbar/UserDropdown/UserDropdown.stories.tsx b/site/src/components/Navbar/UserDropdown/UserDropdown.stories.tsx
@@ -4,7 +4,7 @@ import React from "react"
 import { UserDropdown, UserDropdownProps } from "."
 
 export default {
-  title: "Page/UserDropdown",
+  title: "Navbar/UserDropdown",
   component: UserDropdown,
   argTypes: {
     onSignOut: { action: "Sign Out" },

Original file line number	Diff line number	Diff line change
`@@ -4,7 +4,7 @@ import React from "react"`
`4`	`4`
`5`	`5`	`type BorderedMenuVariant = "admin-dropdown" \| "user-dropdown"`
`6`	`6`
`7`		`-type BorderedMenuProps = Omit<PopoverProps, "variant"> & {`
	`7`	`+export type BorderedMenuProps = Omit<PopoverProps, "variant"> & {`
`8`	`8`	`variant?: BorderedMenuVariant`
`9`	`9`	`}`
`10`	`10`