Merge branch 'release/1.4.0'

* release/1.4.0: (27 commits)
  Fix 1.4.0 compare link
  → 1.4.0
  Mention missing changes/additions in 1.4.0
  Limit styleguide color boxes to a maximum width of 256px
  Add “npm run validate” to “Build setup” chapter
  Mention custom categories renderer
  Adjust themes to recent sidebar changes
  Fix validation errors
  Implement custom sidebar menu/renderer
  Mention HTML Validator as new addition
  Remove obsolete links
  Fix html validation errors
  Add html validation script
  Use actual browserlist query in link
  Mention PostCSS as addition
  Update dependencies
  Add PostCSS autoprefixer with “last 2 versions” as browserlist
  Use #!/usr/bin/env bash
  Ignore gemini reports folder
  Also test hover state in button-primary
  ...

.gitignore

@@ -4,3 +4,4 @@ node_modules/
 build/
 styleguide/
 docs/
+gemini/reports

CHANGELOG.md

@@ -1,3 +1,21 @@
+# [1.4.0]
+###### 2017-05-15
+
+###### Added
+- [PostCSS] with [Autoprefixer] and “last 2 versions” as default [browserlist]
+- [HTML Validator] [script](./bin/validate_html) (using [validator.w3.org/nu]) to make sure documented components have valid markup
+- [Custom](./aigis/templates/menu.ejs) categories tree menu renderer for a more flexible theming support
+- [Separate chapter](./src/shared/_typography.scss#L41) for vertical rhythm
+- [Hover state](./tests/buttons/button-primary.js#L10) check in example button-primary test
+- Placeholder logo to styleguide sidebar
+- `!default` to breakpoint variables
+- Text length limit (*forced newline*) of [~70 characters](./aigis/assets/css/styles.css#L40) to styleguide
+
+###### Changed
+- Watch task to run commands also initially
+- Watch task to watch for changes in aigis folder as well
+- Build task to clean beforehand
+
 # [1.3.0]
 ###### 2017-04-25
 
@@ -62,6 +80,7 @@ Lots of new features have been added. 👏
 
 First public release! 🎉
 
+[1.4.0]: https://github.com/gridonic/sass/compare/1.3.0...1.4.0
 [1.3.0]: https://github.com/gridonic/sass/compare/1.2.0...1.3.0
 [1.2.0]: https://github.com/gridonic/sass/compare/1.1.0...1.2.0
 [1.1.0]: https://github.com/gridonic/sass/compare/1.0.0...1.1.0
@@ -80,3 +99,8 @@ First public release! 🎉
 [Node filtering]: https://github.com/maoberlehner/node-sass-magic-importer#node-filtering
 [Module importing]: https://github.com/maoberlehner/node-sass-magic-importer#module-importing
 [Globbing]: https://github.com/maoberlehner/node-sass-magic-importer#globbing
+[Autoprefixer]: https://github.com/postcss/autoprefixer
+[PostCSS]: https://github.com/postcss/postcss
+[browserlist]: http://browserl.ist/?q=last+2+versions
+[HTML Validator]: https://github.com/zrrrzzt/html-validator
+[validator.w3.org/nu]: https://validator.w3.org/nu/

README.md

@@ -51,6 +51,9 @@ npm run docs
 # including the styleguide and the docs
 npm run watch
 
+# checks the markup validity (of the styleguide or the files you’ve specified)
+npm run validate
+
 # run visual regression tests
 npm test
 ```

aigis/README.md

@@ -13,6 +13,3 @@ We are using [Aigis] to generate our styleguides. See the [official docs] for ad
   <a href="https://gridonic.github.io">gridonic.github.io</a> ・
   <a href="https://twitter.com/gridonic">@gridonic</a>
 </p>
-
-[normalize.css]: https://necolas.github.io/normalize.css/
-[include-media]: http://include-media.com/

aigis/assets/css/styles.css

@@ -35,6 +35,11 @@ pre code {
     padding: 1rem;
 }
 
+p,
+li {
+    max-width: 70ch;
+}
+
 :not(pre) > code {
     border: 1px solid rgba(0, 0, 0, 0.125);
     border-radius: 3px;
@@ -59,6 +64,12 @@ pre code {
     width: 320px;
 }
 
+.styleguide-sidebar > .logo {
+    display: block;
+    margin: 0 auto 2em;
+    width: 96px;
+}
+
 .styleguide-sidebar > .tags,
 .styleguide-sidebar > .categories {
     margin: 1.5em 0 2em;
@@ -84,6 +95,7 @@ pre code {
     box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25);
     display: inline-block;
     margin: 1em;
+    max-width: 256px;
     width: 28%;
 }
 
@@ -115,54 +127,65 @@ pre code {
     text-decoration: none;
 }
 
-.styleguide-nav-categories a {
-    display: inline-block;
-    position: relative;
-    text-decoration: none;
-}
-
-.styleguide-nav-categories a::first-letter {
-    text-transform: uppercase;
+.styleguide-tree {
+    line-height: 1.5;
+    text-transform: capitalize;
 }
 
-.styleguide-nav-categories ul {
+.styleguide-tree-branches {
     list-style-type: none;
+    margin: 0 0 0.75em;
     padding: 0;
-    margin: 0;
-}
 
-.styleguide-nav-categories ul ul {
-    padding-bottom: 0.5em;
+    -webkit-user-select: none;
+       -moz-user-select: none;
+        -ms-user-select: none;
+            user-select: none;
 }
 
-.styleguide-nav-categories li li {
-    padding-left: 1em;
+.styleguide-tree-branches > .branch {
+    padding-left: 1.125em;
     position: relative;
 }
 
-.styleguide-nav-categories li li::after,
-.styleguide-nav-categories li li::before {
-    background-color: #000;
-    content: "";
+.styleguide-tree-branch > .expand {
+    background: transparent;
+    border: 0;
+    color: currentColor;
+    cursor: pointer;
+    display: inline-block;
+    left: 0;
+    line-height: inherit;
+    outline: 0;
+    padding: 0;
     position: absolute;
+    text-align: center;
+    top: 0;
+    width: 1.125em;
 }
 
-.styleguide-nav-categories li li::after {
-    height: 1px;
-    left: 2px;
-    top: 0.625em;
-    width: 0.5em;
+.styleguide-tree-branch > .expand::after {
+    content: "\25b8";
+    display: block;
+    position: relative;
+    top: -1px;
 }
 
-.styleguide-nav-categories li li::before {
-    height: 100%;
-    left: 1px;
-    top: 0;
-    width: 1px;
+.styleguide-tree-branch.-open > .expand::after {
+    content: "\25be";
+}
+
+.styleguide-tree-branch:not(.-active) {
+    color: #737373;
 }
 
-.styleguide-nav-categories li li:last-child::before {
-    height: calc(0.625em + 1px);
+.styleguide-tree-branch:not(.-open) > .branches {
+    display: none;
+}
+
+.styleguide-tree-branch:hover > .label,
+.styleguide-tree-branch:hover > .expand {
+    color: #000;
 }
 
 .styleguide-block + .styleguide-block {

aigis/assets/css/themes/dark.css

@@ -28,7 +28,11 @@
     color: #2a2433;
 }
 
-.styleguide-nav-categories li li::after,
-.styleguide-nav-categories li li::before {
-    background-color: rgba(255, 255, 255, 0.125);
+.styleguide-tree-branch:not(.-active) {
+    color: #959595;
+}
+
+.styleguide-tree-branch:hover > .label,
+.styleguide-tree-branch:hover > .expand {
+    color: #fefefe;
 }

aigis/assets/css/themes/light.css

@@ -25,8 +25,3 @@
     border: 1px solid rgba(0, 0, 0, 0.25);
     background-color: rgba(0, 0, 0, 0.125);
 }
-
-.styleguide-nav-categories li li::after,
-.styleguide-nav-categories li li::before {
-    background-color: rgba(0, 0, 0, 0.125);
-}

aigis/assets/js/main.js

@@ -0,0 +1,9 @@
+requirejs(['tree', 'highlight'], function (Tree, HighlightJS) {
+    HighlightJS.initHighlighting();
+
+    var $tree = document.querySelector('[data-tree]');
+
+    if ($tree) {
+        Tree.create($tree);
+    }
+});

aigis/assets/js/tree.js

@@ -0,0 +1,44 @@
+// @see https://developer.mozilla.org/en-US/docs/Web/API/Element/closest
+window.Element&&!Element.prototype.closest&&(Element.prototype.closest=function(e){var t,o=(this.document||this.ownerDocument).querySelectorAll(e),n=this;do for(t=o.length;--t>=0&&o.item(t)!==n;);while(0>t&&(n=n.parentElement));return n});
+
+define(function () {
+    function Tree($el) {
+        $el.addEventListener('click', function (e) {
+            var $button = e.target.closest('[data-expand]');
+            var $branch = e.target.closest('[data-branch]');
+
+            if ($button === null || $branch === null) {
+                return;
+            }
+
+            if (e.altKey) {
+                this.deepToggle($branch);
+            } else {
+                this.toggle($branch);
+            }
+
+            e.preventDefault();
+        }.bind(this));
+    }
+
+    Tree.prototype.deepToggle = function($el) {
+        var $branch = $el;
+        var action = $el.classList.contains('-open') ? 'remove' : 'add';
+
+        do {
+            this.toggle($branch, action);
+        } while ($branch = $branch.querySelector('[data-branch]'));
+    }
+
+    Tree.prototype.toggle = function($el, force, classes) {
+        $el.classList[force ? force : 'toggle'].call(
+            $el.classList, '-open', classes
+        );
+    }
+
+    return {
+        create: function ($el) {
+            return new Tree($el);
+        }
+    }
+});

aigis/config.yml

@@ -42,3 +42,7 @@ insert:
   preview:
     language: html
     extension: html
+
+# See https://github.com/pxgrid/aigis/pull/106
+helper_options:
+  renderTemplateJSON: true

aigis/templates/components.ejs

@@ -4,7 +4,7 @@
 
     <section class="styleguide-block">
         <header class="styleguide-block-header">
-            <h2 class="title" id="<%= component.config.name %>"><%= component.config.name %></h2>
+            <h2 class="title" id="<%= component.config.name.replace(/\s+/g, '-').toLowerCase() %>"><%= component.config.name %></h2>
             <nav class="styleguide-shy styleguide-comma-list">
             <% component.config.tag.forEach((tag, i, tags) => { %>
                 <a class="link" href="<%= root %>tag/<%= tag %>/index.html">

aigis/templates/index.ejs

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
 <head>
     <meta charset="utf-8">
     <meta http-equiv="x-ua-compatible" content="ie=edge">
@@ -19,7 +19,7 @@
     </main>
     <footer class="styleguide-footer">Last update at <%= timestamp %></footer>
 
-    <script src="<%= root %>assets/js/highlight.js"></script>
-    <script src="<%= root %>assets/js/app.js"></script>
+    <script data-main="<%= root %>assets/js/main"
+            src="<%= root %>assets/js/require.js"></script>
 </body>
 </html>

aigis/templates/menu.ejs

@@ -0,0 +1,23 @@
+<% if (Array.isArray(items) && items.length > 0) { %>
+    <ul class="branches styleguide-tree-branches" data-branches>
+    <% items.forEach((item) => { %>
+        <% const submenu =
+            include('./menu', {
+                items: item.children
+            })
+        %>
+
+        <% const hasActive = submenu.indexOf('-active') >= 0 || item.isCurrent %>
+
+        <li class="branch styleguide-tree-branch<% if (hasActive) { %> -active -open<%} %>" data-branch>
+
+            <% if (item.children.length > 0) { %>
+                <button class="expand" data-expand></button>
+            <% } %>
+
+            <a class="label" href="<%= item.href %>"><%= item.name %></a>
+            <%- submenu %>
+        </li>
+    <% }) %>
+    </ul>
+<% } %>

aigis/templates/sidebar.ejs

@@ -1,6 +1,13 @@
+<img class="logo" src="<%= root %>assets/images/logos/sass.svg" alt="Sass">
+
 <h2>Categories</h2>
-<nav class="categories styleguide-nav-categories">
-    <%- helper.renderCollectionTree('category') %>
+<nav class="categories styleguide-nav-categories styleguide-tree" data-tree>
+    <% tree = helper.renderCollectionTree('category'); %>
+    <%-
+        include('./menu', {
+            items: tree.children
+        })
+    %>
 </nav>
 
 <h2>Tags</h2>

bin/gemini

@@ -1,4 +1,4 @@
-#!/bin/bash
+#!/usr/bin/env bash
 PATH=$(npm bin):$PATH;
 
 # @see https://github.com/kimmobrunfeldt/concurrently