Merge branch 'release/1.4.1'

* release/1.4.1:
  ➡️ 1.4.1
  HTML validation should print while processing files not at the end
  Add home link to styleguide sidebar
  Rename npm script “validate” to “test:html” and update relevant docs
  Fix tree.deepToggle() toggling only first element
  Improve sidebar expand button styles

CHANGELOG.md

@@ -1,3 +1,16 @@
+# [1.4.1]
+###### 2017-05-18
+
+###### Changed
+- Renamed `npm run validate` to `npm run test:html`
+- Renamed `npm run test` to `npm run test:visual`
+- Renamed `npm run test:update` to `npm run test:visual:update`
+- `npm run test` to run `npm run test:html && npm run test:visual`
+
+###### Fixed
+- `Tree.deepToggle()` toggling only first element
+- HTML validation not printing results while processing files
+
 # [1.4.0]
 ###### 2017-05-15
 
@@ -80,6 +93,7 @@ Lots of new features have been added. 👏
 
 First public release! 🎉
 
+[1.4.1]: https://github.com/gridonic/sass/compare/1.4.0...1.4.1
 [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

README.md

@@ -51,11 +51,15 @@ npm run docs
 # including the styleguide and the docs
 npm run watch
 
+# run visual regression tests and markup validation after css has been build
+# and styleguide has been generated
+npm run test
+
 # checks the markup validity (of the styleguide or the files you’ve specified)
-npm run validate
+npm run test:html
 
-# run visual regression tests
-npm test
+# run visual regression tests only (doesn’t build and update styleguide beforehand)
+npm run test:visual
 ```
 
 #  

aigis/assets/css/styles.css

@@ -65,8 +65,15 @@ li {
 }
 
 .styleguide-sidebar > .logo {
+    background-image: url("../images/logos/sass.svg");
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: contain;
     display: block;
-    margin: 0 auto 2em;
+    font-size: 0;
+    height: 96px;
+    margin: 0 auto 2rem;
+    text-decoration: none;
     width: 96px;
 }
 
@@ -153,7 +160,7 @@ li {
     border: 0;
     color: currentColor;
     cursor: pointer;
-    display: inline-block;
+    font-size: inherit;
     left: 0;
     line-height: inherit;
     outline: 0;

aigis/assets/js/tree.js

@@ -11,8 +11,10 @@ define(function () {
                 return;
             }
 
+            var action = $branch.classList.contains('-open') ? 'remove' : 'add';
+
             if (e.altKey) {
-                this.deepToggle($branch);
+                this.deepToggle($branch, action);
             } else {
                 this.toggle($branch);
             }
@@ -21,13 +23,14 @@ define(function () {
         }.bind(this));
     }
 
-    Tree.prototype.deepToggle = function($el) {
-        var $branch = $el;
-        var action = $el.classList.contains('-open') ? 'remove' : 'add';
+    Tree.prototype.deepToggle = function($el, action) {
+        var $targets = $el.querySelectorAll('[data-branch]');
+
+        for (var i = 0; i < $targets.length; i++) {
+            this.deepToggle($targets[i], action);
+        }
 
-        do {
-            this.toggle($branch, action);
-        } while ($branch = $branch.querySelector('[data-branch]'));
+        this.toggle($el, action);
     }
 
     Tree.prototype.toggle = function($el, force, classes) {

aigis/templates/sidebar.ejs

@@ -1,4 +1,4 @@
-<img class="logo" src="<%= root %>assets/images/logos/sass.svg" alt="Sass">
+<a class="logo" href="<%= root %>index.html">Home</a>
 
 <h2>Categories</h2>
 <nav class="categories styleguide-nav-categories styleguide-tree" data-tree>

bin/validate_html

@@ -3,55 +3,53 @@ const globby = require('globby');
 const validator = require('html-validator');
 const fse = require('fs-extra');
 const indent = require('indent-string');
+const figures = require('figures');
 const _ = require('chalk');
 
 function readPaths(paths) {
     return Promise.all(paths.map(path => fse.readFile(path)));
 }
 
-function validateInputs(inputs) {
-    return Promise.all(inputs.map(data => validator({
-        data
-    })));
-}
-
-function processResults(results, paths) {
-    return new Promise((resolve, reject) => {
-        let errors = 0;
-        let warnings = 0;
-        let passed = 0;
-
-        console.log(`\n${_.underline(`Validating ${paths.length} files:`)}\n`);
+function validateInputs(inputs, paths) {
+    console.log(`\n${_.underline(`Validating ${paths.length} files:`)}\n`);
 
-        results.forEach((raw, index) => {
-            const result = JSON.parse(raw);
-            const path = paths[index];
-
-            if (result.messages.length < 1) {
-                passed += 1;
+    return Promise.all(
+        inputs.map(
+            (data, index) => validator({ data: data }).then(
+                (raw) => printResult(JSON.parse(raw).messages, paths[index])
+            )
+        )
+    );
+}
 
-                console.log(`[${_.green('✓')}] ${path}`);
-            }
+function printResult(messages, path) {
+    if (messages.length < 1) {
+        console.log(`${_.green(figures.tick)}  ${path}`);
+        return 0;
+    }
 
-            result.messages.forEach((message) => {
-                if (message.type === 'error') {
-                    errors += 1;
+    const details = messages.map(
+        ({ message }) => `${indent(`${figures.bullet} ${message}\n`, 3)}`
+    ).join('');
 
-                    console.log(`[${_.red('x')}] ${path}`);
-                } else {
-                    warnings += 1;
+    // We have errors…
+    if (messages.find(({ type }) => type === 'error')) {
+        console.log(`${_.red(figures.cross)}  ${path}\n\n${details}`);
+        return 1;
+    }
 
-                    console.log(`[${_.yellow('?')}] ${path}`);
-                }
+    console.log(`${_.yellow(figures.warning)}  ${path}\n\n${details}`);
+    return 2;
+}
 
-                console.log(`\n${indent(message.message, 4)}\n`);
-            });
-        });
+function printSummary(results) {
+    return new Promise((resolve, reject) => {
+        const errors = results.filter(code => code === 1).length;
 
         console.log(
             `\nTotal: ${_.red(errors)} errors,`,
-            `${_.yellow(warnings)} warnings,`,
-            `${_.green(passed)} passed.\n`
+            `${_.yellow(results.filter(code => code === 2).length)} warnings,`,
+            `${_.green(results.filter(code => code === 0).length)} passed.\n`
         );
 
         if (errors > 0) {
@@ -63,10 +61,9 @@ function processResults(results, paths) {
 }
 
 globby(process.argv.splice(2))
-    .then(paths =>
-        readPaths(paths)
-            .then(inputs => validateInputs(inputs))
-            .then(results => processResults(results, paths))
+    .then(paths => readPaths(paths)
+        .then(inputs => validateInputs(inputs, paths))
+        .then(results => printSummary(results))
     ).catch((error) => {
         if (error) {
             console.error(error);

gemini/README.md

@@ -21,7 +21,7 @@ If you run the test out-of-the-box<sup>1</sup> it should **pass** 👍.
 
 If you make *any changes* to the styles of that component, that will *affect the visual appearance*, the test will **fail** 👎.
 
-In case the new styles are *correct* and should be the *new master* version, you need to *update the reference images* that Gemini has created for the test. Therefor simply run `yarn test:update`.
+In case the new styles are *correct* and should be the *new master* version, you need to *update the reference images* that Gemini has created for the test. Therefor simply run `npm run test:visual:update`.
 
 ℹ️ See the [official documentation] for additional information and instructions.
 
@@ -31,11 +31,11 @@ In case the new styles are *correct* and should be the *new master* version, you
 ## Commands
 
 ```bash
-# run visual regression tests
-yarn test
+# run visual regression tests (doesn’t update styleguide beforehand)
+npm run test:visual
 
 # capture or update reference images
-yarn test:update
+npm run test:visual:update
 ```
 
 *Note:* All commands above internally use the [`./bin/gemini`](../bin/gemini) bash script. Every parameter you add to those scripts will be passed directly to the real Gemini binary.
@@ -44,14 +44,14 @@ For example:
 
 ```bash
 # run tests with different root url
-yarn test -- --root-url http://example.com
+npm run test:visual -- --root-url http://example.com
 
 # produce an html file with reference image, current image and differences
 # between them, for each state in each browser.
-yarn test -- --reporter html
+npm run test:visual -- --reporter html
 
 # only run tests belonging to the buttons group
-yarn test -- --grep /buttons/
+npm run test:visual -- --grep /buttons/
 ```
 
 ℹ️ See [Gemini commands] and [Gemini configuration#Overriding settings] for additional information and instructions.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gridonic/sass",
-  "version": "1.4.0",
+  "version": "1.4.1",
   "description": "Our Sass foundation.",
   "main": "./src/styles.scss",
   "scripts": {
@@ -13,11 +13,11 @@
     "prebuild": "npm run clean",
     "prestyleguide": "npm run build",
     "pretest": "npm run styleguide",
-    "prevalidate": "npm run styleguide",
     "styleguide": "aigis run -c ./aigis/config.yml",
-    "test": "./bin/gemini test",
-    "test:update": "./bin/gemini update",
-    "validate": "./bin/validate_html styleguide/**/*.html",
+    "test": "npm run test:html && npm run test:visual",
+    "test:html": "./bin/validate_html styleguide/**/*.html",
+    "test:visual": "./bin/gemini test",
+    "test:visual:update": "./bin/gemini update",
     "watch": "onchange ./src/**/*.scss ./aigis -w -i -- concurrently 'npm run styleguide' 'npm run docs'"
   },
   "author": "Gridonic <hello@gridonic.ch>",
@@ -26,6 +26,7 @@
     "autoprefixer": "^7.0.1",
     "chalk": "^1.1.3",
     "concurrently": "^3.4.0",
+    "figures": "^2.0.0",
     "fs-extra": "^3.0.1",
     "gemini": "^4.18.1",
     "globby": "^6.1.0",

yarn.lock

@@ -1269,7 +1269,7 @@ es6-promise@^4.0.5:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/es6-promise/-/es6-promise-4.1.0.tgz#dda03ca8f9f89bc597e689842929de7ba8cebdf0"
 
-escape-string-regexp@^1.0.0, escape-string-regexp@^1.0.2:
+escape-string-regexp@^1.0.0, escape-string-regexp@^1.0.2, escape-string-regexp@^1.0.5:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4"
 
@@ -1365,6 +1365,12 @@ fd-slicer@~1.0.1:
   dependencies:
     pend "~1.2.0"
 
+figures@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/figures/-/figures-2.0.0.tgz#3ab1a2d2a62c8bfb431a0c94cb797a2fce27c962"
+  dependencies:
+    escape-string-regexp "^1.0.5"
+
 filename-regex@^2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/filename-regex/-/filename-regex-2.0.1.tgz#c1c4b9bee3e09725ddb106b75c1e301fe2f18b26"