From d0afb1488e9a768802255d876c85173d9de71bba Mon Sep 17 00:00:00 2001
From: Katalina Okano <git@kat.cafe>
Date: Sat, 10 Oct 2020 03:54:58 -0400
Subject: [PATCH] feat(design-system): convert popover story

---
 .../atoms/popover/Popover.stories.tsx         | 34 +++++++++++++++++++
 .../atoms/popover/Popover.story.tsx           | 29 ----------------
 2 files changed, 34 insertions(+), 29 deletions(-)
 create mode 100644 src/design-system/atoms/popover/Popover.stories.tsx
 delete mode 100644 src/design-system/atoms/popover/Popover.story.tsx

diff --git a/src/design-system/atoms/popover/Popover.stories.tsx b/src/design-system/atoms/popover/Popover.stories.tsx
new file mode 100644
index 0000000..db70dc6
--- /dev/null
+++ b/src/design-system/atoms/popover/Popover.stories.tsx
@@ -0,0 +1,34 @@
+import * as React from "react";
+import { Button } from "roleypoly/src/design-system/atoms/button";
+import { Popover as PopoverComponent } from "./Popover";
+
+export default {
+  title: "Atoms/Popover",
+  argTypes: {
+    canDefocus: { control: "boolean" },
+  },
+  args: {
+    canDefocus: true,
+  },
+};
+
+export const Popover = ({ canDefocus }) => {
+  const [isOpen, setIsOpen] = React.useState(false);
+
+  return (
+    <div style={{ padding: 50 }}>
+      <Button size="small" onClick={() => setIsOpen(!isOpen)}>
+        {!isOpen ? "Open" : "Close"} me!
+      </Button>
+      <PopoverComponent
+        position="top right"
+        active={isOpen}
+        onExit={() => setIsOpen(false)}
+        canDefocus={canDefocus}
+        headContent={<>Hello c:</>}
+      >
+        stuff
+      </PopoverComponent>
+    </div>
+  );
+};
diff --git a/src/design-system/atoms/popover/Popover.story.tsx b/src/design-system/atoms/popover/Popover.story.tsx
deleted file mode 100644
index a759da6..0000000
--- a/src/design-system/atoms/popover/Popover.story.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import * as React from 'react';
-import { atomStories } from 'atoms/atoms.story';
-import { Button } from 'atoms/button';
-import { Popover } from './Popover';
-import { boolean } from '@storybook/addon-knobs';
-
-const story = atomStories('Popover', module);
-
-story.add('Popover', () => {
-    const canDefocus = boolean('Can Defocus?', true);
-    const [isOpen, setIsOpen] = React.useState(false);
-
-    return (
-        <div style={{ padding: 50 }}>
-            <Button size="small" onClick={() => setIsOpen(!isOpen)}>
-                {!isOpen ? 'Open' : 'Close'} me!
-            </Button>
-            <Popover
-                position="top right"
-                active={isOpen}
-                onExit={() => setIsOpen(false)}
-                canDefocus={canDefocus}
-                headContent={<>Hello c:</>}
-            >
-                stuff
-            </Popover>
-        </div>
-    );
-});