Full cleanup pass

stories/modals/Dialog.stories.js

@@ -0,0 +1,58 @@
+import React, { useState } from "react";
+import Dialog from "../../app/components/modals/Dialog";
+import Button from "../../app/components/buttons/Button";
+
+export default {
+  title: "Components/Modals/Dialog",
+  component: Dialog,
+};
+
+function DialogStoryHost(args) {
+  const [isOpen, setIsOpen] = useState(true);
+
+  return (
+    <div className="p-8">
+      <Button
+        buttonType="filled"
+        palette="default"
+        size="medium"
+        onClick={() => setIsOpen(true)}
+      >
+        Open dialog
+      </Button>
+      <Dialog
+        {...args}
+        isOpen={isOpen}
+        onClose={() => setIsOpen(false)}
+        footer={
+          <>
+            <Button
+              buttonType="outline"
+              palette="default"
+              size="medium"
+              onClick={() => setIsOpen(false)}
+            >
+              Cancel
+            </Button>
+            <Button
+              buttonType="filled"
+              palette="default"
+              size="medium"
+              onClick={() => setIsOpen(false)}
+            >
+              Confirm
+            </Button>
+          </>
+        }
+      />
+    </div>
+  );
+}
+
+export const Default = {
+  render: (args) => <DialogStoryHost {...args} />,
+  args: {
+    title: "Confirm action",
+    description: "This cannot be undone.",
+  },
+};

stories/modals/Popover.stories.js

@@ -0,0 +1,30 @@
+import React from "react";
+import Popover from "../../app/components/modals/Popover";
+import ListItem from "../../app/components/layout/ListItem";
+
+export default {
+  title: "Components/Modals/Popover",
+  component: Popover,
+  parameters: {
+    layout: "centered",
+  },
+};
+
+export const Default = {
+  render: () => (
+    <Popover id="export-menu" menuAriaLabel="Export format">
+      <ListItem
+        showDivider
+        leadingIcon="markdown_copy"
+        label="Download Markdown"
+        onClick={() => {}}
+      />
+      <ListItem
+        showDivider={false}
+        leadingIcon="csv"
+        label="Download CSV"
+        onClick={() => {}}
+      />
+    </Popover>
+  ),
+};