Adds support for HTML dialog object

docs/dialogs.stories.js

@@ -0,0 +1,16 @@
+import { storiesOf } from '@storybook/html'; // eslint-disable-line import/no-extraneous-dependencies
+import { // eslint-disable-line import/no-extraneous-dependencies
+  withKnobs, boolean,
+} from '@storybook/addon-knobs';
+
+const stories = storiesOf('Dialogs', module);
+stories.addDecorator(withKnobs);
+
+stories.add('dialog', () => {
+  const open = boolean('open', true) ? 'open' : '';
+
+  return `<dialog ${open}>
+      <p class="title">Dialog</p>
+      <p>Alert: this is a dialog.</p>
+  </div>`;
+});

package.json

@@ -13,6 +13,7 @@
     "build:cleancss": "cleancss -o css/nes.min.css css/nes.css",
     "storybook": "start-storybook -p 6006",
     "build:storybook": "build-storybook",
+    "build-storybook": "npm run storybook",
     "deploy": "npm run build",
     "semantic-release": "semantic-release",
     "commit": "git-cz",

scss/elements/dialogs.scss

@@ -0,0 +1,33 @@
+dialog {
+  position: relative;
+  padding: 1.5rem 2rem;
+
+  > :last-child {
+    margin-bottom: 0;
+  }
+
+  &::before,
+  &::after {
+    position: absolute;
+    z-index: -1;
+    content: "";
+  }
+
+  &::before {
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+  }
+
+  &::after {
+    top: 2px;
+    right: 2px;
+    bottom: 2px;
+    left: 2px;
+    border-color: $base-color;
+    border-style: solid;
+    border-width: 4px;
+    border-radius: 4px;
+  }
+}