From c980b384ccfbd3737c74f4617fa54fc385f97bdf Mon Sep 17 00:00:00 2001 From: Sebastian Prein Date: Mon, 15 May 2017 10:15:46 +0200 Subject: [PATCH 1/6] Improve sidebar expand button styles --- aigis/assets/css/styles.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/aigis/assets/css/styles.css b/aigis/assets/css/styles.css index 4e2df96..8f6856f 100644 --- a/aigis/assets/css/styles.css +++ b/aigis/assets/css/styles.css @@ -153,7 +153,7 @@ li { border: 0; color: currentColor; cursor: pointer; - display: inline-block; + font-size: inherit; left: 0; line-height: inherit; outline: 0; From 080ea4b4e4a63f6f7f271bbb531b6b8f83720e7f Mon Sep 17 00:00:00 2001 From: Sebastian Prein Date: Mon, 15 May 2017 23:04:03 +0200 Subject: [PATCH 2/6] Fix tree.deepToggle() toggling only first element --- aigis/assets/js/tree.js | 17 ++++++++++------- 1 file changed, 10 insertions(+), 7 deletions(-) diff --git a/aigis/assets/js/tree.js b/aigis/assets/js/tree.js index 60da24a..2529f45 100644 --- a/aigis/assets/js/tree.js +++ b/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) { From 10313773add8ed971db68e282fc00ee4009e839f Mon Sep 17 00:00:00 2001 From: Sebastian Prein Date: Tue, 16 May 2017 09:36:58 +0200 Subject: [PATCH 3/6] =?UTF-8?q?Rename=20npm=20script=20=E2=80=9Cvalidate?= =?UTF-8?q?=E2=80=9D=20to=20=E2=80=9Ctest:html=E2=80=9D=20and=20update=20r?= =?UTF-8?q?elevant=20docs?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 10 +++++++--- gemini/README.md | 14 +++++++------- package.json | 8 ++++---- 3 files changed, 18 insertions(+), 14 deletions(-) diff --git a/README.md b/README.md index e393c79..98f781b 100644 --- a/README.md +++ b/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 ``` # diff --git a/gemini/README.md b/gemini/README.md index adfad29..9d2fbd7 100644 --- a/gemini/README.md +++ b/gemini/README.md @@ -21,7 +21,7 @@ If you run the test out-of-the-box1 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. diff --git a/package.json b/package.json index 4575a01..0445566 100644 --- a/package.json +++ b/package.json @@ -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 ", From 9f8c0586d6aefc701df16fac5f012f5da5084b7b Mon Sep 17 00:00:00 2001 From: Sebastian Prein Date: Tue, 16 May 2017 10:14:52 +0200 Subject: [PATCH 4/6] Add home link to styleguide sidebar --- aigis/assets/css/styles.css | 9 ++++++++- aigis/templates/sidebar.ejs | 2 +- 2 files changed, 9 insertions(+), 2 deletions(-) diff --git a/aigis/assets/css/styles.css b/aigis/assets/css/styles.css index 8f6856f..86d59c1 100644 --- a/aigis/assets/css/styles.css +++ b/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; } diff --git a/aigis/templates/sidebar.ejs b/aigis/templates/sidebar.ejs index 0405f7e..5dd4a04 100644 --- a/aigis/templates/sidebar.ejs +++ b/aigis/templates/sidebar.ejs @@ -1,4 +1,4 @@ - +

Categories