Merge pull request #11 from etchteam/feature/etch-340-modal

feat: modal

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

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>
+  `,
+};

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'],
+      },
+    ],
   },
 };

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');

styles/tokens/color.css

@@ -1,4 +1,5 @@
-:root {
+:root,
+::backdrop {
   --diamond-color-white: #fff;
 
   --diamond-color-grey-100: #e6e6e6;

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)