feat(alert bars): alert bars from spec

Author: CITguy

_config.yml

@@ -77,29 +77,3 @@ deploy:
   repo: [email protected]:rackerlabs/helix-ui.git
   branch: gh-pages
   message: "Docs Updated: {{ now('YYYY-MM-DD HH:mm:ss') }}"
-
-
-# Additional Configurations
-nav:
-  guides:
-    Installing: /install
-  components:
-    Alerts: /alerts
-    Badges: /badges
-    Blockquotes: /blockquotes
-    Breadcrumbs: /breadcrumbs
-    Buttons: /buttons
-    Code: /code
-    Dropdowns: /dropdowns
-    Forms: /forms
-    Grid: /grid
-    Lists: /lists
-    Modals: /modals
-    Navigation: /navigation
-    Pagination: /pagination
-    Popovers: /popovers
-    "Progress Bars": /progressbars
-    Tables: /tables
-    Tabs: /tabs
-    Tooltips: /tooltips
-    Typography: /typography

bin/server.js

@@ -3,6 +3,21 @@
 
 const browserSync = require('browser-sync').create();
 const { hexo, config } = require('./hexo');
+const webpack = require('./webpack').compiler;
+
+function runWebpack () {
+    webpack.run((err, stats) => {
+        if (err || stats.hasErrors()) {
+            // Handle errors here
+            console.log('there was an error running webpack');
+        }
+
+        console.log(stats.toString({
+            chunks: false,  // Makes the build much quieter
+            colors: true    // Shows colors in the console
+        }))
+    });
+}//runWebpack()
 
 function initServer () {
     const serverRoutes = {}
@@ -15,12 +30,12 @@ function initServer () {
             `${config.public_dir}/**/*`,
             {
                 match: [
-                    'source/**/*',
-                    'themes/**/*'
+                    `(source|themes)/**/*`
                 ],
                 fn: (evt, file) => {
                     // force regeneration of hexo assets on change of source or theme
-                    hexo.call('generate', { force: true });
+                    hexo.call('generate', { force: true })
+                        .then(runWebpack);
                 }
             }
         ],
@@ -40,7 +55,9 @@ hexo.init().then(() => {
     hexo.call('clean')
         .then(() => {
             // MUST have empty obj as 2nd arg or the call will fail
-            return hexo.call('generate', {});
+            return hexo.call('generate', {}).then(() => {
+                runWebpack();
+            });
         })
         .then(initServer)
         .catch((err) => {

bin/webpack.js

@@ -0,0 +1,42 @@
+'use strict';
+
+// REF: https://webpack.js.org/api/node/
+
+const path = require('path');
+const webpack = require('webpack');
+
+const rootPath = path.resolve(__dirname, '..');
+const sourcePath = `${rootPath}/source`;
+const publicPath = `${rootPath}/public`;
+
+const config = {
+    entry: {
+        'helix-ui': `${sourcePath}/scripts/_helix-ui.js`,
+        'explorer': `${sourcePath}/scripts/_explorer.js`
+    },
+    output: {
+        path: `${publicPath}/scripts`,
+        filename: '[name].js'
+    },
+    module: {
+        rules: [
+            {
+                test: /\.svg$/,
+                use: 'svg-inline-loader',
+            },
+            {
+                test: /\.js$/,
+                exclude: /(node_modules|bower_components)/,
+                use: {
+                    loader: 'babel-loader',
+                    options: {
+                        presets: ['es2015']
+                    }
+                }
+            }
+        ]
+    },
+    plugins: []
+};
+
+exports.compiler = webpack(config);

package.json

@@ -14,6 +14,9 @@
     "hexo-server": "^0.2.1"
   },
   "devDependencies": {
+    "babel-core": "^6.26.0",
+    "babel-loader": "^7.1.2",
+    "babel-preset-es2015": "^6.24.1",
     "browser-sync": "2.x",
     "clean-css": "4.1.3",
     "gulp": "3.x",
@@ -22,7 +25,9 @@
     "js-yaml": "^3.9.1",
     "less": "2.x",
     "less-plugin-clean-css": "^1.5.1",
-    "lodash": "4.x"
+    "lodash": "4.x",
+    "svg-inline-loader": "^0.8.0",
+    "webpack": "^3.5.5"
   },
   "scripts": {
     "clean": "rm -fr node_modules",

source/_data/icons.yml

@@ -0,0 +1,36 @@
+- angle-down
+- angle-left
+- angle-right
+- angle-up
+- calendar
+- checkmark
+- cog
+- envelope
+- exclamation-circle
+- exclamation-triangle
+- fanatiguy
+- info-circle
+- input-file
+- input-number
+- input-time
+- input-url
+- kbd-arrow-down
+- kbd-arrow-left
+- kbd-arrow-right
+- kbd-arrow-up
+- kbd-capslock
+- kbd-command
+- kbd-delete
+- kbd-eject
+- kbd-option
+- kbd-return
+- kbd-shift
+- kbd-space
+- kbd-tab
+- lock
+- phone
+- plus-or-minus
+- search
+- support
+- times
+- times-circle

source/_data/nav.yml

@@ -0,0 +1,23 @@
+guides:
+  Installing: /install
+components:
+  Alerts: /alerts
+  Badges: /badges
+  Blockquotes: /blockquotes
+  Breadcrumbs: /breadcrumbs
+  Buttons: /buttons
+  Code: /code
+  Dropdowns: /dropdowns
+  Forms: /forms
+  Grid: /grid
+  Icons: /icons
+  Lists: /lists
+  Modals: /modals
+  Navigation: /navigation
+  Pagination: /pagination
+  Popovers: /popovers
+  "Progress Bars": /progressbars
+  Tables: /tables
+  Tabs: /tabs
+  Tooltips: /tooltips
+  Typography: /typography

source/components/alerts/_alerts.less

@@ -0,0 +1,80 @@
+.hxAlerts {
+  //reserved for future styling
+}
+
+.hxAlert {
+  background-color: @blue-100;
+  color: @gray-1000;
+  display: flex;
+  font-weight: 300;
+  line-height: 1.25em;
+
+  & > * {
+    padding-bottom: 0.875em;
+    padding-top: 0.875em;
+  }
+
+  &--error {
+    background-color: @red-900;
+    color: @gray-0;
+  }
+
+  &--warning {
+    background-color: @yellow-700;
+  }
+
+  &--success {
+    background-color: @green-700;
+    color: @gray-0;
+  }
+
+  &__icon {
+    flex-grow: 0;
+    flex-shrink: 0;
+    flex-basis: 1em;
+    margin-left: 1em;
+  }
+
+  &__text {
+    flex-grow: 1;
+    margin-left: 1em;
+  }
+
+  &__status {
+    font-weight: 500;
+    text-transform: uppercase;
+
+    &:after {
+      content: ":";
+    }
+  }
+
+  &__action {
+    margin-left: 1em;
+    text-align: right;
+    
+    a {
+      color: inherit;
+      font-weight: 500;
+      text-transform: uppercase;
+
+      &:hover {
+        color: inherit;
+        text-decoration: underline;
+      }
+    }
+  }
+
+  &__dismiss {
+    background-color: transparent;
+    border: none;
+    display: flex;
+    flex-direction: column;
+    padding: 0.875em 1em;
+
+    hx-icon {
+      height: 0.75em;
+      width: 0.75em;
+    }
+  }
+}