feat: Added storybook docs (#107)

.npmignore

@@ -1,3 +1,5 @@
 docs/
 gulpfile.js
-screwdriver.yaml
+screwdriver.yaml
+.storybook
+stories

.storybook/main.js

@@ -0,0 +1,15 @@
+module.exports = {
+  "stories": [
+    "../stories/**/*.stories.mdx",
+    "../stories/**/*.stories.@(js|jsx|ts|tsx)"
+  ],
+  "addons": [
+    "@storybook/addon-docs",
+    "@storybook/addon-links",
+    "@storybook/addon-viewport",
+    // "@storybook/addon-backgrounds",
+    // "@storybook/addon-essentials",
+    "@storybook/addon-controls",
+    "@storybook/addon-actions",
+  ]
+}

.storybook/preview.js

@@ -0,0 +1,7 @@
+import '../css/denali.css';
+import '../docs/fonts/denali-icon-font.css';
+
+export const parameters = {
+  actions: { argTypesRegex: "^on[A-Z].*" },
+  docs: { page: null },
+};

package.json

@@ -9,24 +9,34 @@
   "scripts": {
     "start": "gulp serve",
     "test": "mocha",
-    "semantic-release": "semantic-release pre && npm publish && semantic-release post"
+    "semantic-release": "semantic-release pre && npm publish && semantic-release post",
+    "storybook": "start-storybook -p 6006",
+    "build-storybook": "build-storybook -o ./docs-storybook"
   },
   "repository": {
     "type": "git",
     "url": "[email protected]:denali-design/denali-css.git"
   },
   "devDependencies": {
+    "@babel/core": "^7.11.6",
+    "@storybook/addon-actions": "^6.0.26",
+    "@storybook/addon-essentials": "^6.0.26",
+    "@storybook/addon-links": "^6.0.26",
+    "@storybook/html": "^6.0.26",
+    "babel-loader": "^8.1.0",
     "browser-sync": "^2.26.12",
     "gulp": "^4.0.2",
     "gulp-connect-php": "^1.0.3",
     "gulp-rename": "^1.4.0",
     "gulp-sass": "^4.0.2",
-    "mocha": "^7.2.0"
+    "mocha": "^7.2.0",
+    "react-is": "^16.13.1"
   },
   "release": {
     "debug": false,
     "verifyConditions": {
       "path": "./node_modules/semantic-release/src/lib/plugin-noop.js"
     }
-  }
+  },
+  "dependencies": {}
 }

stories/Introduction.stories.mdx

@@ -0,0 +1,120 @@
+import { Meta } from '@storybook/addon-docs/blocks';
+
+<Meta title="Example/Introduction" />
+
+<style>{`
+  .subheading {
+    --mediumdark: '#999999';
+    font-weight: 900;
+    font-size: 13px;
+    color: #999;
+    letter-spacing: 6px;
+    line-height: 24px;
+    text-transform: uppercase;
+    margin-bottom: 12px;
+    margin-top: 40px;
+  }
+
+  .link-list {
+    display: grid;
+    grid-template-columns: 1fr;
+    grid-template-rows: 1fr 1fr;
+    row-gap: 10px;
+  }
+
+  @media (min-width: 620px) {
+    .link-list {
+      row-gap: 20px;
+      column-gap: 20px;
+      grid-template-columns: 1fr 1fr;
+    }
+  }
+
+  @media all and (-ms-high-contrast:none) {
+  .link-list {
+      display: -ms-grid;
+      -ms-grid-columns: 1fr 1fr;
+      -ms-grid-rows: 1fr 1fr;
+    }
+  }
+
+  .link-item {
+    display: block;
+    padding: 20px 30px 20px 15px;
+    border: 1px solid #00000010;
+    border-radius: 5px;
+    transition: background 150ms ease-out, border 150ms ease-out, transform 150ms ease-out;
+    color: #333333;
+    display: flex;
+    align-items: flex-start;
+  }
+
+  .link-item:hover {
+    border-color: #1EA7FD50;
+    transform: translate3d(0, -3px, 0);
+    box-shadow: rgba(0, 0, 0, 0.08) 0 3px 10px 0;
+  }
+
+  .link-item:active {
+    border-color: #1EA7FD;
+    transform: translate3d(0, 0, 0);
+  }
+
+  .link-item strong {
+    font-weight: 700;
+    display: block;
+    margin-bottom: 2px;
+  }
+  
+  .link-item img {
+    height: 40px;
+    width: 40px;
+    margin-right: 15px;
+    flex: none;
+  }
+
+  .link-item span {
+    font-size: 14px;
+    line-height: 20px;
+  }
+
+  .tip {
+    display: inline-block;
+    border-radius: 1em;
+    font-size: 11px;
+    line-height: 12px;
+    font-weight: 700;
+    background: #E7FDD8;
+    color: #66BF3C;
+    padding: 4px 12px;
+    margin-right: 10px;
+    vertical-align: top;
+  }
+
+  .tip-wrapper {
+    font-size: 13px;
+    line-height: 20px;
+    margin-top: 40px;
+    margin-bottom: 40px;
+  }
+
+  .tip-wrapper code {
+    font-size: 12px;
+    display: inline-block;
+  }
+
+  
+`}</style>
+
+# Welcome to Storybook
+
+Storybook helps you build UI components in isolation from your app's business logic, data, and context.
+That makes it easy to develop hard-to-reach states. Save these UI states as **stories** to revisit during development, testing, or QA.
+
+Browse example stories now by navigating to them in the sidebar.
+View their code in the `src/storybook-examples` directory to learn how they work.
+We recommend building UIs with a [**component-driven**](https://componentdriven.org) process starting with atomic components and ending with pages.
+
+<div class="tip-wrapper">
+  <span class="tip">Tip</span>Edit the Markdown in <code>src/storybook-examples/welcome.mdx</code>
+</div>

stories/alert.stories.js

@@ -0,0 +1,81 @@
+export default {
+  title: 'Components/Alert',
+};
+
+export const Block = ({ title, description, icon, status }) => {
+  return (
+    `<div class="alert is-block is-${status}">
+      <span class="d-icon d-${icon}"></span>
+      <div>
+        <h5>${title}</h5>
+        <p>${description}</p>
+      </div>
+      <span class="link close is-secondary"><span class="d-icon d-close is-sub"></span></span>
+    </div>`
+  );
+};
+
+Block.argTypes = {
+  title: { 
+    defaultValue: 'This is a title',
+    control: 'text',
+  },
+  description: { 
+    defaultValue: 'This is a description for the alert context.',
+    control: 'text',
+  },
+  icon: { 
+    defaultValue: 'domain',
+    control: 'text',
+  },
+  status: {
+    defaultValue: 'default',
+    control: { 
+      type: 'select',
+      options: ['default', 'info', 'success', 'warning', 'danger'],
+    },
+  },
+};
+
+export const inline = () => {
+  return (
+    `<div class="alert is-inline">
+      <p><span class="is-bold">Title</span> Do not use for Production or CI/CD (Screwdriver)</p>
+    </div>`
+  );
+};
+
+export const Notification = ({ title, description, icon, status }) => {
+  return (
+    `<div class="alert is-${status}">
+      <span class="d-icon d-${icon}"></span>
+      <div>
+        <h5>${title}</h5>
+        <p>${description}</p>
+      </div>
+      <span class="link close is-secondary"><span class="d-icon d-close is-sub"></span></span>
+    </div>`
+  );
+};
+
+Notification.argTypes = {
+  title: { 
+    defaultValue: 'This is a title',
+    control: 'text',
+  },
+  description: { 
+    defaultValue: 'This is a description for the alert context.',
+    control: 'text',
+  },
+  icon: { 
+    defaultValue: 'domain',
+    control: 'text',
+  },
+  status: {
+    defaultValue: 'default',
+    control: { 
+      type: 'select',
+      options: ['default', 'info', 'success', 'warning', 'danger'],
+    },
+  },
+};

stories/template.stories.js

@@ -0,0 +1,49 @@
+import { action } from '@storybook/addon-actions';
+import { linkTo } from '@storybook/addon-links';
+
+export default {
+  title: 'Example/Template',
+  argTypes: {
+    children: { control: 'text' },
+  },
+};
+
+const Template = ({ onClick, children }) => {
+  const btn = document.createElement('button');
+  btn.type = 'button2';
+  btn.innerText = children;
+  btn.addEventListener('click', onClick);
+  return btn;
+};
+
+export const Text = Template.bind({});
+Text.args = {
+  children: 'Button',
+  onClick: action('onClick'),
+};
+
+export const Emoji = Template.bind({});
+Emoji.args = {
+  children: '😀 😎 👍 💯',
+};
+
+export const TextWithAction = () => {
+  const btn = document.createElement('button');
+  btn.type = 'button';
+  btn.innerText = 'Trigger Action';
+  btn.addEventListener('click', () => action('This was clicked')());
+  return btn;
+};
+
+TextWithAction.storyName = 'With an action';
+TextWithAction.parameters = { notes: 'My notes on a button with emojis' };
+
+export const ButtonWithLinkToAnotherStory = () => {
+  const btn = document.createElement('button');
+  btn.type = 'button';
+  btn.innerText = 'Go to Welcome Story';
+  btn.addEventListener('click', linkTo('example-introduction--page'));
+  return btn;
+};
+
+ButtonWithLinkToAnotherStory.storyName = 'button with link to another story';