From 8ed078595535b8bc31059bb8b651c3b44c756b0a Mon Sep 17 00:00:00 2001
From: Gavyn McKenzie <gavyn@etch.co>
Date: Fri, 2 Feb 2024 15:54:11 +0000
Subject: [PATCH] feat: modal

---
 components/composition/Dialog/Dialog.css      | 42 +++++++++++++++
 .../composition/Dialog/Dialog.stories.ts      | 54 +++++++++++++++++++
 stylelint.config.cjs                          | 12 +++++
 styles/diamond-ui.css                         |  4 +-
 styles/tokens/color.css                       |  3 +-
 styles/tokens/transition.css                  |  3 +-
 6 files changed, 115 insertions(+), 3 deletions(-)
 create mode 100644 components/composition/Dialog/Dialog.css
 create mode 100644 components/composition/Dialog/Dialog.stories.ts

diff --git a/components/composition/Dialog/Dialog.css b/components/composition/Dialog/Dialog.css
new file mode 100644
index 0000000..a698cc3
--- /dev/null
+++ b/components/composition/Dialog/Dialog.css
@@ -0,0 +1,42 @@
+dialog {
+  background: none;
+  border: 0 none;
+  opacity: 0;
+  padding: 0;
+  transform: translateY(1rem);
+  transition:
+    opacity var(--diamond-transition),
+    display var(--diamond-transition) allow-discrete,
+    overlay var(--diamond-transition) allow-discrete,
+    transform var(--diamond-transition);
+
+  &::backdrop {
+    background-color: var(--diamond-backdrop, var(--diamond-color-grey-600));
+    opacity: 0;
+    transition:
+      opacity var(--diamond-transition),
+      display var(--diamond-transition) allow-discrete,
+      overlay var(--diamond-transition) allow-discrete;
+  }
+
+  &[open] {
+    opacity: 1;
+    transform: none;
+    transition-delay: calc(var(--diamond-transition-duration) * 0.5);
+  }
+
+  &[open]::backdrop {
+    opacity: var(--diamond-backdrop-opacity, 0.4);
+  }
+}
+
+@starting-style {
+  dialog[open] {
+    opacity: 0;
+    transform: translateY(1rem);
+  }
+
+  dialog[open]::backdrop {
+    opacity: 0;
+  }
+}
diff --git a/components/composition/Dialog/Dialog.stories.ts b/components/composition/Dialog/Dialog.stories.ts
new file mode 100644
index 0000000..f6f1af8
--- /dev/null
+++ b/components/composition/Dialog/Dialog.stories.ts
@@ -0,0 +1,54 @@
+import { StoryObj } from '@storybook/web-components';
+import { html } from 'lit';
+
+import '../../canvas/Card/Card';
+
+const description = `
+The Diamond Dialog provides an unopinionated area for any content
+to be placed on top of the main app content.
+
+Other than the backdrop, it does not provide any styles. Recommended
+to be used with a wrap and a card.
+`;
+
+export default {
+  component: 'diamond-dialog',
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      story: {
+        inline: false,
+        height: '22rem',
+      },
+      description: {
+        component: description,
+      },
+    },
+  },
+};
+
+export const Dialog: StoryObj = {
+  render: () => html`
+    <button id="toggle">Open dialog</button>
+    <dialog>
+      <diamond-wrap size="xs" gutter="none">
+        <diamond-card border radius>
+          <h3>Modal title</h3>
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+            eiusmod tempor incididunt ut labore et dolore magna aliqua.
+          </p>
+          <form method="dialog">
+            <button>Close</button>
+          </form>
+        </diamond-card>
+      </diamond-wrap>
+    </dialog>
+    <script>
+      document.getElementById('toggle').addEventListener('click', () => {
+        document.querySelector('dialog').showModal();
+      });
+      document.querySelector('dialog').showModal();
+    </script>
+  `,
+};
diff --git a/stylelint.config.cjs b/stylelint.config.cjs
index 283ffbd..0c9e4cf 100644
--- a/stylelint.config.cjs
+++ b/stylelint.config.cjs
@@ -7,5 +7,17 @@ module.exports = {
         ignore: ['attribute'],
       },
     ],
+    'scss/at-rule-no-unknown': [
+      true,
+      {
+        ignoreAtRules: ['starting-style'],
+      },
+    ],
+    'at-rule-no-unknown': [
+      true,
+      {
+        ignoreAtRules: ['starting-style'],
+      },
+    ],
   },
 };
diff --git a/styles/diamond-ui.css b/styles/diamond-ui.css
index fbe8926..a3381ff 100644
--- a/styles/diamond-ui.css
+++ b/styles/diamond-ui.css
@@ -2,5 +2,7 @@
 @import url('./tokens.css');
 @import url('./base.css');
 
-@import url('../components/canvas/Card/Card.css');
+@import url('../components/composition/Dialog/Dialog.css');
 @import url('../components/composition/Wrap/Wrap.css');
+
+@import url('../components/canvas/Card/Card.css');
diff --git a/styles/tokens/color.css b/styles/tokens/color.css
index 3e35807..771ef58 100644
--- a/styles/tokens/color.css
+++ b/styles/tokens/color.css
@@ -1,4 +1,5 @@
-:root {
+:root,
+::backdrop {
   --diamond-color-white: #fff;
 
   --diamond-color-grey-100: #e6e6e6;
diff --git a/styles/tokens/transition.css b/styles/tokens/transition.css
index 0917999..d2eb66a 100644
--- a/styles/tokens/transition.css
+++ b/styles/tokens/transition.css
@@ -1,4 +1,5 @@
-:root {
+:root,
+::backdrop {
   --diamond-transition-duration: 0.2s;
   --diamond-transition-timing: ease-in-out;
   --diamond-transition: var(--diamond-transition-duration)