full dialog build + script fix

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,7 +13,8 @@
     "build:cleancss": "cleancss -o css/nes.min.css css/nes.css",
     "deploy": "npm run build",
     "storybook": "start-storybook -p 6006",
-    "build:storybook": "build-storybook"
+    "build:storybook": "build-storybook",
+    "build-storybook": "npm run storybook"
   },
   "repository": {
     "type": "git",

scss/elements/dialogs.scss

@@ -0,0 +1,52 @@
+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;
+  }
+
+  &.is-center.is-dark {
+    color: $background-color;
+    background-color: $base-color;
+    // &::before {
+    //   background-color: $base-color;
+    // }
+
+    // &::after {
+    //   border-color: #fff;
+    // }
+
+    // &.with-title {
+    //   > .title {
+    //     color: $background-color;
+    //     background-color: $base-color;
+    //   }
+    // }
+  }
+}