feat(design-system): convert popover story

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>
+  );
+};

src/design-system/atoms/popover/Popover.story.tsx

@@ -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>
-    );
-});