From 377afbb1f295b320ab1c30f0ad4b2b1390e51699 Mon Sep 17 00:00:00 2001 From: David Moulton Date: Tue, 15 Jan 2019 16:53:24 +0000 Subject: [PATCH 01/40] Add config manager module as a dependency --- package-lock.json | 183 +++++++++++++++++----------------------------- package.json | 3 + 2 files changed, 72 insertions(+), 114 deletions(-) diff --git a/package-lock.json b/package-lock.json index c24494fe..705482cf 100644 --- a/package-lock.json +++ b/package-lock.json @@ -936,6 +936,22 @@ "through2": "^2.0.3" } }, + "@libero/pattern-library-config-manager": { + "version": "0.0.3", + "resolved": "https://registry.npmjs.org/@libero/pattern-library-config-manager/-/pattern-library-config-manager-0.0.3.tgz", + "integrity": "sha512-A/NJcpKm3ThWH4Qtj23lg/sL/DCOS1ZezCV6ct98+HcllKGCJeQ2+O9hbjgk9cyyU3RSGmQMAmU9Sl2j3ZSbtg==", + "requires": { + "chai": "^4.2.0", + "chai-as-promised": "^7.1.1", + "color": "^3.1.0", + "deep-iterator": "^1.1.0", + "deepmerge": "^2.2.1", + "flat": "^4.1.0", + "jexl": "^1.1.4", + "mocha": "^5.2.0", + "sinon": "^7.1.1" + } + }, "@mrmlnc/readdir-enhanced": { "version": "2.2.1", "resolved": "https://registry.npmjs.org/@mrmlnc/readdir-enhanced/-/readdir-enhanced-2.2.1.tgz", @@ -956,7 +972,6 @@ "version": "1.3.0", "resolved": "https://registry.npmjs.org/@sinonjs/commons/-/commons-1.3.0.tgz", "integrity": "sha512-j4ZwhaHmwsCb4DlDOIWnI5YyKDNMoNThsmwEpfHx6a1EpsGZ9qYLxP++LMlmBRjtGptGHFsGItJ768snllFWpA==", - "dev": true, "requires": { "type-detect": "4.0.8" } @@ -965,7 +980,6 @@ "version": "3.0.0", "resolved": "https://registry.npmjs.org/@sinonjs/formatio/-/formatio-3.0.0.tgz", "integrity": "sha512-vdjoYLDptCgvtJs57ULshak3iJe4NW3sJ3g36xVDGff5AE8P30S6A093EIEPjdi2noGhfuNOEkbxt3J3awFW1w==", - "dev": true, "requires": { "@sinonjs/samsam": "2.1.0" }, @@ -974,7 +988,6 @@ "version": "2.1.0", "resolved": "https://registry.npmjs.org/@sinonjs/samsam/-/samsam-2.1.0.tgz", "integrity": "sha512-5x2kFgJYupaF1ns/RmharQ90lQkd2ELS8A9X0ymkAAdemYHGtI2KiUHG8nX2WU0T1qgnOU5YMqnBM2V7NUanNw==", - "dev": true, "requires": { "array-from": "^2.1.1" } @@ -984,8 +997,7 @@ "@sinonjs/samsam": { "version": "2.1.2", "resolved": "https://registry.npmjs.org/@sinonjs/samsam/-/samsam-2.1.2.tgz", - "integrity": "sha512-ZwTHAlC9akprWDinwEPD4kOuwaYZlyMwVJIANsKNC3QVp0AHB04m7RnB4eqeWfgmxw8MGTzS9uMaw93Z3QcZbw==", - "dev": true + "integrity": "sha512-ZwTHAlC9akprWDinwEPD4kOuwaYZlyMwVJIANsKNC3QVp0AHB04m7RnB4eqeWfgmxw8MGTzS9uMaw93Z3QcZbw==" }, "abbrev": { "version": "1.1.1", @@ -1194,8 +1206,7 @@ "array-from": { "version": "2.1.1", "resolved": "https://registry.npmjs.org/array-from/-/array-from-2.1.1.tgz", - "integrity": "sha1-z+nYwmYoudxa7MYqn12PHzUsEZU=", - "dev": true + "integrity": "sha1-z+nYwmYoudxa7MYqn12PHzUsEZU=" }, "array-initial": { "version": "1.1.0", @@ -1314,8 +1325,7 @@ "assertion-error": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/assertion-error/-/assertion-error-1.1.0.tgz", - "integrity": "sha512-jgsaNduz+ndvGyFt3uSuWqvy4lCnIJiovtouQN5JZHOKCS2QuhEdbcQHFhVksz2N2U9hXJo8odG7ETyWlEeuDw==", - "dev": true + "integrity": "sha512-jgsaNduz+ndvGyFt3uSuWqvy4lCnIJiovtouQN5JZHOKCS2QuhEdbcQHFhVksz2N2U9hXJo8odG7ETyWlEeuDw==" }, "assign-symbols": { "version": "1.0.0", @@ -1434,7 +1444,6 @@ "version": "6.26.0", "resolved": "https://registry.npmjs.org/babel-runtime/-/babel-runtime-6.26.0.tgz", "integrity": "sha1-llxwWGaOgrVde/4E/yM3vItWR/4=", - "dev": true, "requires": { "core-js": "^2.4.0", "regenerator-runtime": "^0.11.0" @@ -1472,8 +1481,7 @@ "balanced-match": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz", - "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=", - "dev": true + "integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c=" }, "base": { "version": "0.11.2", @@ -1597,7 +1605,6 @@ "version": "1.1.11", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==", - "dev": true, "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -1635,8 +1642,7 @@ "browser-stdout": { "version": "1.3.1", "resolved": "https://registry.npmjs.org/browser-stdout/-/browser-stdout-1.3.1.tgz", - "integrity": "sha512-qhAVI1+Av2X7qelOfAIYwXONood6XlZE/fXaBSmW/T5SzLAmCgzi+eiWE7fUvbHaeNBQH13UftjpXxsfLkMpgw==", - "dev": true + "integrity": "sha512-qhAVI1+Av2X7qelOfAIYwXONood6XlZE/fXaBSmW/T5SzLAmCgzi+eiWE7fUvbHaeNBQH13UftjpXxsfLkMpgw==" }, "browser-sync": { "version": "2.26.3", @@ -1920,7 +1926,7 @@ }, "camelcase-keys": { "version": "2.1.0", - "resolved": "http://registry.npmjs.org/camelcase-keys/-/camelcase-keys-2.1.0.tgz", + "resolved": "https://registry.npmjs.org/camelcase-keys/-/camelcase-keys-2.1.0.tgz", "integrity": "sha1-MIvur/3ygRkFHvodkyITyRuPkuc=", "dev": true, "requires": { @@ -1950,7 +1956,6 @@ "version": "4.2.0", "resolved": "https://registry.npmjs.org/chai/-/chai-4.2.0.tgz", "integrity": "sha512-XQU3bhBukrOsQCuwZndwGcCVQHyZi53fQ6Ys1Fym7E4olpIqqZZhhoFJoaKVvV17lWQoXYwgWN2nF5crA8J2jw==", - "dev": true, "requires": { "assertion-error": "^1.1.0", "check-error": "^1.0.2", @@ -1964,7 +1969,6 @@ "version": "7.1.1", "resolved": "https://registry.npmjs.org/chai-as-promised/-/chai-as-promised-7.1.1.tgz", "integrity": "sha512-azL6xMoi+uxu6z4rhWQ1jbdUhOMhis2PvscD/xjLqNMkv3BPPp2JyyuTHOrf9BOosGpNQ11v6BKv/g57RXbiaA==", - "dev": true, "requires": { "check-error": "^1.0.2" } @@ -2009,8 +2013,7 @@ "check-error": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/check-error/-/check-error-1.0.2.tgz", - "integrity": "sha1-V00xLt2Iu13YkS6Sht1sCu1KrII=", - "dev": true + "integrity": "sha1-V00xLt2Iu13YkS6Sht1sCu1KrII=" }, "chokidar": { "version": "2.0.4", @@ -2180,7 +2183,6 @@ "version": "3.1.0", "resolved": "https://registry.npmjs.org/color/-/color-3.1.0.tgz", "integrity": "sha512-CwyopLkuRYO5ei2EpzpIh6LqJMt6Mt+jZhO5VI5f/wJLZriXQE32/SSqzmrh+QB+AZT81Cj8yv+7zwToW8ahZg==", - "dev": true, "requires": { "color-convert": "^1.9.1", "color-string": "^1.5.2" @@ -2190,7 +2192,6 @@ "version": "1.9.2", "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.2.tgz", "integrity": "sha512-3NUJZdhMhcdPn8vJ9v2UQJoH0qqoGUkYTgFEPZaPjEtwmmKUfNV46zZmgB2M5M4DCEQHMaCfWHCxiBflLm04Tg==", - "dev": true, "requires": { "color-name": "1.1.1" } @@ -2198,14 +2199,12 @@ "color-name": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.1.tgz", - "integrity": "sha1-SxQVMEz1ACjqgWQ2Q72C6gWANok=", - "dev": true + "integrity": "sha1-SxQVMEz1ACjqgWQ2Q72C6gWANok=" }, "color-string": { "version": "1.5.3", "resolved": "https://registry.npmjs.org/color-string/-/color-string-1.5.3.tgz", "integrity": "sha512-dC2C5qeWoYkxki5UAXapdjqO672AM4vZuPGRQfO8b5HKuKGBbKWpITyDYN7TOFKvRW7kOgAn3746clDBMDJyQw==", - "dev": true, "requires": { "color-name": "^1.0.0", "simple-swizzle": "^0.2.2" @@ -2229,8 +2228,7 @@ "commander": { "version": "2.15.1", "resolved": "http://registry.npmjs.org/commander/-/commander-2.15.1.tgz", - "integrity": "sha512-VlfT9F3V0v+jr4yxPc5gg9s62/fIVWsd2Bk2iD435um1NlGMYdVCq+MjcXnhYq2icNOizHr1kK+5TI6H0Hy0ag==", - "dev": true + "integrity": "sha512-VlfT9F3V0v+jr4yxPc5gg9s62/fIVWsd2Bk2iD435um1NlGMYdVCq+MjcXnhYq2icNOizHr1kK+5TI6H0Hy0ag==" }, "commondir": { "version": "1.0.1", @@ -2259,8 +2257,7 @@ "concat-map": { "version": "0.0.1", "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz", - "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=", - "dev": true + "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=" }, "concat-stream": { "version": "1.6.2", @@ -2329,8 +2326,7 @@ "core-js": { "version": "2.5.7", "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.5.7.tgz", - "integrity": "sha512-RszJCAxg/PP6uzXVXL6BsxSXx/B05oJAQ2vkJRjyjrEcNVycaqOmNb5OTxZPE3xa5gwZduqza6L9JOCenh/Ecw==", - "dev": true + "integrity": "sha512-RszJCAxg/PP6uzXVXL6BsxSXx/B05oJAQ2vkJRjyjrEcNVycaqOmNb5OTxZPE3xa5gwZduqza6L9JOCenh/Ecw==" }, "core-util-is": { "version": "1.0.2", @@ -2506,7 +2502,6 @@ "version": "3.0.1", "resolved": "https://registry.npmjs.org/deep-eql/-/deep-eql-3.0.1.tgz", "integrity": "sha512-+QeIQyN5ZuO+3Uk5DYh6/1eKO0m0YmJFGNmFHGACpf1ClL1nmlV/p4gNgbl2pJGxgXb4faqo6UE+M5ACEMyVcw==", - "dev": true, "requires": { "type-detect": "^4.0.0" } @@ -2515,7 +2510,6 @@ "version": "1.1.0", "resolved": "https://registry.npmjs.org/deep-iterator/-/deep-iterator-1.1.0.tgz", "integrity": "sha1-NSJxc7OL4BtYDW98MnMrH9F2kII=", - "dev": true, "requires": { "babel-runtime": "^6.20.0" } @@ -2523,8 +2517,7 @@ "deepmerge": { "version": "2.2.1", "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-2.2.1.tgz", - "integrity": "sha512-R9hc1Xa/NOBi9WRVUWg19rl1UB7Tt4kuPd+thNJgFZoxXsTz7ncaPaeIm+40oSGuP33DfMb4sZt1QIGiJzC4EA==", - "dev": true + "integrity": "sha512-R9hc1Xa/NOBi9WRVUWg19rl1UB7Tt4kuPd+thNJgFZoxXsTz7ncaPaeIm+40oSGuP33DfMb4sZt1QIGiJzC4EA==" }, "default-compare": { "version": "1.0.0", @@ -2666,8 +2659,7 @@ "diff": { "version": "3.5.0", "resolved": "https://registry.npmjs.org/diff/-/diff-3.5.0.tgz", - "integrity": "sha512-A46qtFgd+g7pDZinpnwiRJtxbC1hpgf0uzP3iG89scHk0AUC7A1TGxf5OiiOUv/JMZR8GOt8hL900hV0bOy5xA==", - "dev": true + "integrity": "sha512-A46qtFgd+g7pDZinpnwiRJtxbC1hpgf0uzP3iG89scHk0AUC7A1TGxf5OiiOUv/JMZR8GOt8hL900hV0bOy5xA==" }, "dir-glob": { "version": "2.0.0", @@ -3039,8 +3031,7 @@ "escape-string-regexp": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz", - "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=", - "dev": true + "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=" }, "esprima": { "version": "4.0.1", @@ -3486,7 +3477,6 @@ "version": "4.1.0", "resolved": "https://registry.npmjs.org/flat/-/flat-4.1.0.tgz", "integrity": "sha512-Px/TiLIznH7gEDlPXcUD4KnBusa6kR6ayRUVcnEAbreRIuhkqow/mun59BuRXwoYk7ZQOLW1ZM05ilIvK38hFw==", - "dev": true, "requires": { "is-buffer": "~2.0.3" }, @@ -3494,8 +3484,7 @@ "is-buffer": { "version": "2.0.3", "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-2.0.3.tgz", - "integrity": "sha512-U15Q7MXTuZlrbymiz95PJpZxu8IlipAp4dtS3wOdgPXx3mqBnslrWU14kxfHB+Py/+2PVKSr37dMAgM2A4uArw==", - "dev": true + "integrity": "sha512-U15Q7MXTuZlrbymiz95PJpZxu8IlipAp4dtS3wOdgPXx3mqBnslrWU14kxfHB+Py/+2PVKSr37dMAgM2A4uArw==" } } }, @@ -3710,8 +3699,7 @@ "fs.realpath": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz", - "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8=", - "dev": true + "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8=" }, "fsevents": { "version": "1.2.4", @@ -4294,8 +4282,7 @@ "get-func-name": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/get-func-name/-/get-func-name-2.0.0.tgz", - "integrity": "sha1-6td0q+5y4gQJQzoGY2YCPdaIekE=", - "dev": true + "integrity": "sha1-6td0q+5y4gQJQzoGY2YCPdaIekE=" }, "get-stdin": { "version": "4.0.1", @@ -4305,7 +4292,7 @@ }, "get-stream": { "version": "3.0.0", - "resolved": "http://registry.npmjs.org/get-stream/-/get-stream-3.0.0.tgz", + "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-3.0.0.tgz", "integrity": "sha1-jpQ9E1jcN1VQVOy+LtsFqhdO3hQ=", "dev": true }, @@ -4591,8 +4578,7 @@ "growl": { "version": "1.10.5", "resolved": "https://registry.npmjs.org/growl/-/growl-1.10.5.tgz", - "integrity": "sha512-qBr4OuELkhPenW6goKVXiv47US3clb3/IbuWF9KNKEijAy9oeHxU9IgzjvJhHkUzhaj7rOUD7+YGWqUjLp5oSA==", - "dev": true + "integrity": "sha512-qBr4OuELkhPenW6goKVXiv47US3clb3/IbuWF9KNKEijAy9oeHxU9IgzjvJhHkUzhaj7rOUD7+YGWqUjLp5oSA==" }, "gulp": { "version": "4.0.0", @@ -4977,8 +4963,7 @@ "has-flag": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz", - "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=", - "dev": true + "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=" }, "has-symbols": { "version": "1.0.0", @@ -5027,8 +5012,7 @@ "he": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/he/-/he-1.1.1.tgz", - "integrity": "sha1-k0EP0hsAlzUVH4howvJx80J+I/0=", - "dev": true + "integrity": "sha1-k0EP0hsAlzUVH4howvJx80J+I/0=" }, "home-or-tmp": { "version": "3.0.0", @@ -5234,7 +5218,6 @@ "version": "1.0.6", "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz", "integrity": "sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=", - "dev": true, "requires": { "once": "^1.3.0", "wrappy": "1" @@ -5243,8 +5226,7 @@ "inherits": { "version": "2.0.3", "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz", - "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=", - "dev": true + "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=" }, "ini": { "version": "1.3.5", @@ -5348,7 +5330,7 @@ }, "is-builtin-module": { "version": "1.0.0", - "resolved": "http://registry.npmjs.org/is-builtin-module/-/is-builtin-module-1.0.0.tgz", + "resolved": "https://registry.npmjs.org/is-builtin-module/-/is-builtin-module-1.0.0.tgz", "integrity": "sha1-VAVy0096wxGfj3bDDLwbHgN6/74=", "dev": true, "requires": { @@ -5645,8 +5627,7 @@ "isarray": { "version": "0.0.1", "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz", - "integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8=", - "dev": true + "integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8=" }, "isexe": { "version": "2.0.0", @@ -5680,8 +5661,7 @@ "jexl": { "version": "1.1.4", "resolved": "https://registry.npmjs.org/jexl/-/jexl-1.1.4.tgz", - "integrity": "sha1-Nc+G+IHqIZ0eIVx6QeLnR85u6KY=", - "dev": true + "integrity": "sha1-Nc+G+IHqIZ0eIVx6QeLnR85u6KY=" }, "js-base64": { "version": "2.4.8", @@ -5801,8 +5781,7 @@ "just-extend": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/just-extend/-/just-extend-3.0.0.tgz", - "integrity": "sha512-Fu3T6pKBuxjWT/p4DkqGHFRsysc8OauWr4ZRTY9dIx07Y9O0RkoR5jcv28aeD1vuAwhm3nLkDurwLXoALp4DpQ==", - "dev": true + "integrity": "sha512-Fu3T6pKBuxjWT/p4DkqGHFRsysc8OauWr4ZRTY9dIx07Y9O0RkoR5jcv28aeD1vuAwhm3nLkDurwLXoALp4DpQ==" }, "kind-of": { "version": "6.0.2", @@ -5909,7 +5888,7 @@ }, "load-json-file": { "version": "1.1.0", - "resolved": "http://registry.npmjs.org/load-json-file/-/load-json-file-1.1.0.tgz", + "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-1.1.0.tgz", "integrity": "sha1-lWkFcI1YtLq0wiYbBPWfMcmTdMA=", "dev": true, "requires": { @@ -6044,8 +6023,7 @@ "lodash.get": { "version": "4.4.2", "resolved": "https://registry.npmjs.org/lodash.get/-/lodash.get-4.4.2.tgz", - "integrity": "sha1-LRd/ZS+jHpObRDjVNBSZ36OCXpk=", - "dev": true + "integrity": "sha1-LRd/ZS+jHpObRDjVNBSZ36OCXpk=" }, "lodash.isfinite": { "version": "3.3.2", @@ -6108,8 +6086,7 @@ "lolex": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/lolex/-/lolex-3.0.0.tgz", - "integrity": "sha512-hcnW80h3j2lbUfFdMArd5UPA/vxZJ+G8vobd+wg3nVEQA0EigStbYcrG030FJxL6xiDDPEkoMatV9xIh5OecQQ==", - "dev": true + "integrity": "sha512-hcnW80h3j2lbUfFdMArd5UPA/vxZJ+G8vobd+wg3nVEQA0EigStbYcrG030FJxL6xiDDPEkoMatV9xIh5OecQQ==" }, "longest-streak": { "version": "2.0.2", @@ -6266,7 +6243,7 @@ }, "meow": { "version": "3.7.0", - "resolved": "http://registry.npmjs.org/meow/-/meow-3.7.0.tgz", + "resolved": "https://registry.npmjs.org/meow/-/meow-3.7.0.tgz", "integrity": "sha1-cstmi0JSKCkKu/qFaJJYcwioAfs=", "dev": true, "requires": { @@ -6341,7 +6318,7 @@ }, "minimist": { "version": "1.2.0", - "resolved": "http://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz", + "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz", "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=", "dev": true }, @@ -6384,18 +6361,16 @@ }, "mkdirp": { "version": "0.5.1", - "resolved": "http://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz", + "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz", "integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=", - "dev": true, "requires": { "minimist": "0.0.8" }, "dependencies": { "minimist": { "version": "0.0.8", - "resolved": "http://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz", - "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=", - "dev": true + "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz", + "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=" } } }, @@ -6403,7 +6378,6 @@ "version": "5.2.0", "resolved": "https://registry.npmjs.org/mocha/-/mocha-5.2.0.tgz", "integrity": "sha512-2IUgKDhc3J7Uug+FxMXuqIyYzH7gJjXECKe/w43IGgQHTSj3InJi+yAA7T24L9bQMRKiUEHxEX37G5JpVUGLcQ==", - "dev": true, "requires": { "browser-stdout": "1.3.1", "commander": "2.15.1", @@ -6422,7 +6396,6 @@ "version": "3.1.0", "resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz", "integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==", - "dev": true, "requires": { "ms": "2.0.0" } @@ -6431,7 +6404,6 @@ "version": "7.1.2", "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.2.tgz", "integrity": "sha512-MJTUg1kjuLeQCJ+ccE4Vpa6kKVXkPYJ2mOCQyUuKLcLQsdrMCpBPUi8qVE6+YuaJkozeA9NusTAw3hLr8Xe5EQ==", - "dev": true, "requires": { "fs.realpath": "^1.0.0", "inflight": "^1.0.4", @@ -6445,7 +6417,6 @@ "version": "3.0.4", "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz", "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==", - "dev": true, "requires": { "brace-expansion": "^1.1.7" } @@ -6454,7 +6425,6 @@ "version": "5.4.0", "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.4.0.tgz", "integrity": "sha512-zjaXglF5nnWpsq470jSv6P9DwPvgLkuapYmfDm3JWOm0vkNTVF2tI4UrN2r6jH1qM/uc/WtxYY1hYoA2dOKj5w==", - "dev": true, "requires": { "has-flag": "^3.0.0" } @@ -6464,8 +6434,7 @@ "ms": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz", - "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=", - "dev": true + "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=" }, "mute-stdout": { "version": "1.0.1", @@ -6526,7 +6495,6 @@ "version": "1.4.6", "resolved": "https://registry.npmjs.org/nise/-/nise-1.4.6.tgz", "integrity": "sha512-1GedetLKzmqmgwabuMSqPsT7oumdR77SBpDfNNJhADRIeA3LN/2RVqR4fFqwvzhAqcTef6PPCzQwITE/YQ8S8A==", - "dev": true, "requires": { "@sinonjs/formatio": "3.0.0", "just-extend": "^3.0.0", @@ -6538,8 +6506,7 @@ "lolex": { "version": "2.7.5", "resolved": "https://registry.npmjs.org/lolex/-/lolex-2.7.5.tgz", - "integrity": "sha512-l9x0+1offnKKIzYVjyXU2SiwhXDLekRzKyhnbyldPHvC7BvLPVpdNUNR2KeMAiCN2D/kLNttZgQD5WjSxuBx3Q==", - "dev": true + "integrity": "sha512-l9x0+1offnKKIzYVjyXU2SiwhXDLekRzKyhnbyldPHvC7BvLPVpdNUNR2KeMAiCN2D/kLNttZgQD5WjSxuBx3Q==" } } }, @@ -6565,7 +6532,7 @@ "dependencies": { "semver": { "version": "5.3.0", - "resolved": "http://registry.npmjs.org/semver/-/semver-5.3.0.tgz", + "resolved": "https://registry.npmjs.org/semver/-/semver-5.3.0.tgz", "integrity": "sha1-myzl094C0XxgEq0yaqa00M9U+U8=", "dev": true } @@ -6868,7 +6835,6 @@ "version": "1.3.3", "resolved": "https://registry.npmjs.org/once/-/once-1.3.3.tgz", "integrity": "sha1-suJhVXzkwxTsgwTz+oJmPkKXyiA=", - "dev": true, "requires": { "wrappy": "1" } @@ -6931,7 +6897,7 @@ }, "os-homedir": { "version": "1.0.2", - "resolved": "http://registry.npmjs.org/os-homedir/-/os-homedir-1.0.2.tgz", + "resolved": "https://registry.npmjs.org/os-homedir/-/os-homedir-1.0.2.tgz", "integrity": "sha1-/7xJiDNuDoM94MFox+8VISGqf7M=", "dev": true }, @@ -6946,7 +6912,7 @@ }, "os-tmpdir": { "version": "1.0.2", - "resolved": "http://registry.npmjs.org/os-tmpdir/-/os-tmpdir-1.0.2.tgz", + "resolved": "https://registry.npmjs.org/os-tmpdir/-/os-tmpdir-1.0.2.tgz", "integrity": "sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ=", "dev": true }, @@ -7112,9 +7078,8 @@ }, "path-is-absolute": { "version": "1.0.1", - "resolved": "http://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz", - "integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18=", - "dev": true + "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz", + "integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18=" }, "path-is-inside": { "version": "1.0.2", @@ -7153,7 +7118,6 @@ "version": "1.7.0", "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-1.7.0.tgz", "integrity": "sha1-Wf3g9DW62suhA6hOnTvGTpa5k30=", - "dev": true, "requires": { "isarray": "0.0.1" } @@ -7180,8 +7144,7 @@ "pathval": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/pathval/-/pathval-1.1.0.tgz", - "integrity": "sha1-uULm1L3mUwBe9rcTYd74cn0GReA=", - "dev": true + "integrity": "sha1-uULm1L3mUwBe9rcTYd74cn0GReA=" }, "performance-now": { "version": "2.1.0", @@ -7191,7 +7154,7 @@ }, "pify": { "version": "2.3.0", - "resolved": "http://registry.npmjs.org/pify/-/pify-2.3.0.tgz", + "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz", "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=", "dev": true }, @@ -7815,8 +7778,7 @@ "regenerator-runtime": { "version": "0.11.1", "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz", - "integrity": "sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg==", - "dev": true + "integrity": "sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg==" }, "regenerator-transform": { "version": "0.13.3", @@ -8218,7 +8180,7 @@ }, "safe-regex": { "version": "1.1.0", - "resolved": "http://registry.npmjs.org/safe-regex/-/safe-regex-1.1.0.tgz", + "resolved": "https://registry.npmjs.org/safe-regex/-/safe-regex-1.1.0.tgz", "integrity": "sha1-QKNmnzsHfR6UPURinhV91IAjvy4=", "dev": true, "requires": { @@ -8280,7 +8242,7 @@ "dependencies": { "source-map": { "version": "0.4.4", - "resolved": "http://registry.npmjs.org/source-map/-/source-map-0.4.4.tgz", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.4.4.tgz", "integrity": "sha1-66T12pwNyZneaAMti092FzZSA2s=", "dev": true, "requires": { @@ -8426,7 +8388,6 @@ "version": "0.2.2", "resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz", "integrity": "sha1-pNprY1/8zMoz9w0Xy5JZLeleVXo=", - "dev": true, "requires": { "is-arrayish": "^0.3.1" }, @@ -8434,8 +8395,7 @@ "is-arrayish": { "version": "0.3.2", "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.2.tgz", - "integrity": "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==", - "dev": true + "integrity": "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==" } } }, @@ -8443,7 +8403,6 @@ "version": "7.1.1", "resolved": "https://registry.npmjs.org/sinon/-/sinon-7.1.1.tgz", "integrity": "sha512-iYagtjLVt1vN3zZY7D8oH7dkjNJEjLjyuzy8daX5+3bbQl8gaohrheB9VfH1O3L6LKuue5WTJvFluHiuZ9y3nQ==", - "dev": true, "requires": { "@sinonjs/commons": "^1.2.0", "@sinonjs/formatio": "^3.0.0", @@ -8460,7 +8419,6 @@ "version": "5.5.0", "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz", "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==", - "dev": true, "requires": { "has-flag": "^3.0.0" } @@ -9006,7 +8964,7 @@ }, "strip-eof": { "version": "1.0.0", - "resolved": "http://registry.npmjs.org/strip-eof/-/strip-eof-1.0.0.tgz", + "resolved": "https://registry.npmjs.org/strip-eof/-/strip-eof-1.0.0.tgz", "integrity": "sha1-u0P/VZim6wXYm1n80SnJgzE2Br8=", "dev": true }, @@ -9650,7 +9608,7 @@ }, "tar": { "version": "2.2.1", - "resolved": "http://registry.npmjs.org/tar/-/tar-2.2.1.tgz", + "resolved": "https://registry.npmjs.org/tar/-/tar-2.2.1.tgz", "integrity": "sha1-jk0qJWwOIYXGsYrWlK7JaLg8sdE=", "dev": true, "requires": { @@ -9662,8 +9620,7 @@ "text-encoding": { "version": "0.6.4", "resolved": "http://registry.npmjs.org/text-encoding/-/text-encoding-0.6.4.tgz", - "integrity": "sha1-45mpgiV6J22uQou5KEXLcb3CbRk=", - "dev": true + "integrity": "sha1-45mpgiV6J22uQou5KEXLcb3CbRk=" }, "textextensions": { "version": "2.4.0", @@ -9889,8 +9846,7 @@ "type-detect": { "version": "4.0.8", "resolved": "https://registry.npmjs.org/type-detect/-/type-detect-4.0.8.tgz", - "integrity": "sha512-0fr/mIH1dlO+x7TlcMy+bIDqKPsw/70tVyeHW787goQjhmqaZe10uwLujubK9q9Lg6Fiho1KUKDYz0Z7k7g5/g==", - "dev": true + "integrity": "sha512-0fr/mIH1dlO+x7TlcMy+bIDqKPsw/70tVyeHW787goQjhmqaZe10uwLujubK9q9Lg6Fiho1KUKDYz0Z7k7g5/g==" }, "typedarray": { "version": "0.0.6", @@ -10466,7 +10422,7 @@ }, "wrap-ansi": { "version": "2.1.0", - "resolved": "http://registry.npmjs.org/wrap-ansi/-/wrap-ansi-2.1.0.tgz", + "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-2.1.0.tgz", "integrity": "sha1-2Pw9KE3QV5T+hJc8rs3Rz4JP3YU=", "dev": true, "requires": { @@ -10477,8 +10433,7 @@ "wrappy": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz", - "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=", - "dev": true + "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=" }, "write": { "version": "0.2.1", diff --git a/package.json b/package.json index 298b5a10..887fb050 100644 --- a/package.json +++ b/package.json @@ -37,5 +37,8 @@ }, "engines": { "node": ">=10.12" + }, + "dependencies": { + "@libero/pattern-library-config-manager": "0.0.3" } } From 10607d172e1f2f7c747c59cab8be4c9c62f1c585 Mon Sep 17 00:00:00 2001 From: David Moulton Date: Wed, 16 Jan 2019 15:31:51 +0000 Subject: [PATCH 02/40] Update Gulp file to use @libero/pattern-library-config-manager from npm --- gulpfile.babel.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/gulpfile.babel.js b/gulpfile.babel.js index 9e2a2801..22d8475d 100644 --- a/gulpfile.babel.js +++ b/gulpfile.babel.js @@ -1,6 +1,6 @@ import browserSync from 'browser-sync'; import del from 'del'; -import distributeConfig from './libero-config/bin/distributeConfig'; +import distributeConfig from '@libero/pattern-library-config-manager'; import flatten from 'gulp-flatten'; import gulp from 'gulp'; import minimist from 'minimist'; From 72ec0a0aee8c59a4579d0cfe4916315852af1519 Mon Sep 17 00:00:00 2001 From: David Moulton Date: Wed, 16 Jan 2019 15:45:54 +0000 Subject: [PATCH 03/40] Update config manager dependency --- package-lock.json | 6 +++--- package.json | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/package-lock.json b/package-lock.json index 705482cf..7d969616 100644 --- a/package-lock.json +++ b/package-lock.json @@ -937,9 +937,9 @@ } }, "@libero/pattern-library-config-manager": { - "version": "0.0.3", - "resolved": "https://registry.npmjs.org/@libero/pattern-library-config-manager/-/pattern-library-config-manager-0.0.3.tgz", - "integrity": "sha512-A/NJcpKm3ThWH4Qtj23lg/sL/DCOS1ZezCV6ct98+HcllKGCJeQ2+O9hbjgk9cyyU3RSGmQMAmU9Sl2j3ZSbtg==", + "version": "0.0.4", + "resolved": "https://registry.npmjs.org/@libero/pattern-library-config-manager/-/pattern-library-config-manager-0.0.4.tgz", + "integrity": "sha512-x1yh1FOZhJWIZ537F9x11KI8Y82a+BWI85NA7nCcycdYFYTcUo1iTd5nfdgFc56CKX5CYt+HAOpxu2djUlYXOg==", "requires": { "chai": "^4.2.0", "chai-as-promised": "^7.1.1", diff --git a/package.json b/package.json index 887fb050..2f8ade99 100644 --- a/package.json +++ b/package.json @@ -39,6 +39,6 @@ "node": ">=10.12" }, "dependencies": { - "@libero/pattern-library-config-manager": "0.0.3" + "@libero/pattern-library-config-manager": "0.0.4" } } From dbe12c1f2c2ea8679005bf5be267695d202fe055 Mon Sep 17 00:00:00 2001 From: David Moulton Date: Wed, 16 Jan 2019 16:23:52 +0000 Subject: [PATCH 04/40] Update config manager dependency --- package-lock.json | 6 +++--- package.json | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/package-lock.json b/package-lock.json index 7d969616..2725bd1f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -937,9 +937,9 @@ } }, "@libero/pattern-library-config-manager": { - "version": "0.0.4", - "resolved": "https://registry.npmjs.org/@libero/pattern-library-config-manager/-/pattern-library-config-manager-0.0.4.tgz", - "integrity": "sha512-x1yh1FOZhJWIZ537F9x11KI8Y82a+BWI85NA7nCcycdYFYTcUo1iTd5nfdgFc56CKX5CYt+HAOpxu2djUlYXOg==", + "version": "0.0.5", + "resolved": "https://registry.npmjs.org/@libero/pattern-library-config-manager/-/pattern-library-config-manager-0.0.5.tgz", + "integrity": "sha512-6L4ATYejHfeSHCaHJMmxoRBtMbuXZKYil8hiX73cPKswZ7eWLmS+Tz5bQ20+oa5CrVY131UV9Oa3jXpudkaS3g==", "requires": { "chai": "^4.2.0", "chai-as-promised": "^7.1.1", diff --git a/package.json b/package.json index 2f8ade99..775dda0f 100644 --- a/package.json +++ b/package.json @@ -39,6 +39,6 @@ "node": ">=10.12" }, "dependencies": { - "@libero/pattern-library-config-manager": "0.0.4" + "@libero/pattern-library-config-manager": "0.0.5" } } From b784334f6cd04d12cc8760827a1de610ca56afa0 Mon Sep 17 00:00:00 2001 From: David Moulton Date: Wed, 16 Jan 2019 16:40:43 +0000 Subject: [PATCH 05/40] Update config manager dependency --- package-lock.json | 6 +++--- package.json | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/package-lock.json b/package-lock.json index 2725bd1f..85284238 100644 --- a/package-lock.json +++ b/package-lock.json @@ -937,9 +937,9 @@ } }, "@libero/pattern-library-config-manager": { - "version": "0.0.5", - "resolved": "https://registry.npmjs.org/@libero/pattern-library-config-manager/-/pattern-library-config-manager-0.0.5.tgz", - "integrity": "sha512-6L4ATYejHfeSHCaHJMmxoRBtMbuXZKYil8hiX73cPKswZ7eWLmS+Tz5bQ20+oa5CrVY131UV9Oa3jXpudkaS3g==", + "version": "0.0.6", + "resolved": "https://registry.npmjs.org/@libero/pattern-library-config-manager/-/pattern-library-config-manager-0.0.6.tgz", + "integrity": "sha512-3hptW9h6X2vDTq1xZku9LcaCaKZo3JWHIyDAwiPHQEfLDdoPoKsl1w5nrLi8acrBtrapaIhIdHLRXjokiWNgXw==", "requires": { "chai": "^4.2.0", "chai-as-promised": "^7.1.1", diff --git a/package.json b/package.json index 775dda0f..dfd996fb 100644 --- a/package.json +++ b/package.json @@ -39,6 +39,6 @@ "node": ">=10.12" }, "dependencies": { - "@libero/pattern-library-config-manager": "0.0.5" + "@libero/pattern-library-config-manager": "0.0.6" } } From cbe75ada32352052d226e0501ca99245d7d62a24 Mon Sep 17 00:00:00 2001 From: David Moulton Date: Wed, 16 Jan 2019 16:43:17 +0000 Subject: [PATCH 06/40] Delete obsolete built-in config generation --- libero-config/.babelrc | 1 - libero-config/bin/ConfigDistributor.js | 130 ------------------------ libero-config/bin/ConfigGenerator.js | 84 --------------- libero-config/bin/distributeConfig.js | 37 ------- libero-config/bin/isMergeableObject.js | 21 ---- libero-config/config--libero-default.js | 78 -------------- libero-config/configRegister.json | 5 - 7 files changed, 356 deletions(-) delete mode 100644 libero-config/.babelrc delete mode 100644 libero-config/bin/ConfigDistributor.js delete mode 100644 libero-config/bin/ConfigGenerator.js delete mode 100644 libero-config/bin/distributeConfig.js delete mode 100644 libero-config/bin/isMergeableObject.js delete mode 100644 libero-config/config--libero-default.js delete mode 100644 libero-config/configRegister.json diff --git a/libero-config/.babelrc b/libero-config/.babelrc deleted file mode 100644 index 0967ef42..00000000 --- a/libero-config/.babelrc +++ /dev/null @@ -1 +0,0 @@ -{} diff --git a/libero-config/bin/ConfigDistributor.js b/libero-config/bin/ConfigDistributor.js deleted file mode 100644 index 407b70db..00000000 --- a/libero-config/bin/ConfigDistributor.js +++ /dev/null @@ -1,130 +0,0 @@ -const Color = require('color'); -const deepIterator = require('deep-iterator').default; -const flatten = require('flat'); -const fs = require('fs'); -const path = require('path'); -const {promisify} = require('util'); - -const writeFileAsync = promisify(fs.writeFile); - -/** - * Distributes specified config to appropriate layers (sass, js, templates) - * @type {module.ConfigDistributor} - */ -module.exports = class ConfigDistributor { - - constructor() { - this.paths = { - out: { - sassVariablesPath: '/source/css/sass/variables', - jsonFileName: '/source/js/derivedConfig.json' - } - }; - } - - distribute(configPaths, configGenerator) { - - console.log('Distributing config...'); - - return configGenerator.generateConfig(configPaths) - .then((config) => { - return Promise.all( - [ - this.distributeToSass(config.layerAllocations.sass, config.data), - this.distributeToJs(config.layerAllocations.js, config.data), - ] - ) - }) - .catch(err => { - console.error(err.message); - process.exit(1); - }); - } - - distributeToJs(allocations, data) { - return ConfigDistributor.writeFile( - ConfigDistributor.processForJs(allocations, data), - this.paths.out.jsonFileName - ); - } - - distributeToSass(allocations, data) { - - const fileWritePromises = []; - - // Each allocation is written to a separate file - allocations.forEach((allocation) => { - const dataForAllocation = {}; - dataForAllocation[allocation] = data[allocation]; - const processedItemData = ConfigDistributor.processForSass(dataForAllocation); - const outFileName = path.join(this.paths.out.sassVariablesPath, `_${allocation}.scss`); - fileWritePromises.push( - new Promise((resolve) => { - resolve(ConfigDistributor.writeFile(processedItemData, outFileName)); - }) - ); - }); - - return Promise.all(fileWritePromises).catch(err => { throw err; } ); - - } - - static processForJs(allocations, data) { - const processed = {}; - allocations.forEach((allocation) => { - processed[allocation] = data[allocation]; - }); - return JSON.stringify(processed); - } - - static processForSass(data) { - const deepData = deepIterator(data); - for (let {parent, key, value} of deepData) { - if (value instanceof Color) { - parent[key] = value.rgb().string(); - } - } - - return Object.entries(flatten(data, {delimiter: '-'})) - .reduce((carry, pair) => { - let [key, value] = pair; - - if (key.endsWith('_in_px')) { - key = key.substring(0, key.length - 6); - value = `${value}px`; - } - - return `${carry}$${key}: ${value};\n`; - }, ''); - } - - static writeDirectory(path) { - return new Promise((resolve, reject) => { - fs.mkdir(path, { recursive: true}, (err) => { - if (err) { - reject(err); - } - resolve(); - }); - }); - } - - static async writeFile(data, outPath) { - let projectRootPath = process.cwd(); - const matched = projectRootPath.match(/^.*\/libero-config\/bin.*$/); - if (matched) { - projectRootPath = path.resolve(path.join(process.cwd(), '../..')); - } - const outPathDirectoryComponent = outPath.substring(0, outPath.lastIndexOf('/') + 1); - const fullDirectoryPath = path.join(projectRootPath, outPathDirectoryComponent); - await this.writeDirectory(fullDirectoryPath); - - const filenameComponent = outPath.substring(outPath.lastIndexOf('/') + 1); - return writeFileAsync(path.join(fullDirectoryPath, filenameComponent), data) - .then(() => { - console.log(`Written config to ${path.join(outPathDirectoryComponent, filenameComponent)}`); - }) - .catch(err => { throw err }); - } - -}; diff --git a/libero-config/bin/ConfigGenerator.js b/libero-config/bin/ConfigGenerator.js deleted file mode 100644 index f982d91c..00000000 --- a/libero-config/bin/ConfigGenerator.js +++ /dev/null @@ -1,84 +0,0 @@ -const deepIterator = require('deep-iterator').default; -const deepMerge = require('deepmerge'); -const isMergeableObject = require('./isMergeableObject'); -const jexl = require('jexl'); - -/** - * Generates one fully merged config file from multiple sources - * @type {module.ConfigGenerator} - */ -module.exports = class ConfigGenerator { - - constructor() {} - - loadConfigs(configPaths, pathPrefix) { - if (!Array.isArray(configPaths)) { - throw new Error('loadConfigs must he supplied with an array'); - } - - const configs = []; - const prefix = pathPrefix || '../'; - configPaths.forEach((configPath) => { - const path = `${prefix}${configPath}`; - - delete require.cache[require.resolve(path)]; - configs.push(require(path)); - }); - - return configs; - } - - getPropertyFromAllConfigs(property, configs) { - return configs.map((config) => { - return config[property] || {}; - }); - } - - getDataFromConfigs(configs) { - return this.getPropertyFromAllConfigs('data', configs); - } - - getAllocationsFromAllConfigs(configs) { - return this.getPropertyFromAllConfigs('layerAllocations', configs); - } - - allocateToLayers(configs) { - const accumulatedAllocations = deepMerge.all(this.getAllocationsFromAllConfigs(configs)); - Object.keys(accumulatedAllocations).forEach((key) => { - accumulatedAllocations[key] = Array.from(new Set(accumulatedAllocations[key])); - }); - return accumulatedAllocations; - } - - mergeConfigs(configs) { - return deepMerge.all(this.getDataFromConfigs(configs), { isMergeableObject }); - } - - async generateConfig(configPaths) { - const configs = this.loadConfigs(configPaths); - const mergedConfig = this.mergeConfigs(configs); - const data = await ConfigGenerator.processDeferredConfig(mergedConfig); - - return { - data: data, - layerAllocations: this.allocateToLayers(configs) - }; - } - - static async processExpression(expression, context) { - const normalised = expression.replace('!expression', ''); - return await jexl.eval(normalised, context); - } - - static async processDeferredConfig(config) { - const deepData = deepIterator(config); - for (let {parent, key, value} of deepData) { - if (typeof value === 'string' && value.indexOf('!expression ') > -1) { - parent[key] = await ConfigGenerator.processExpression(value, config); - } - } - - return config; - } - -}; diff --git a/libero-config/bin/distributeConfig.js b/libero-config/bin/distributeConfig.js deleted file mode 100644 index 2906acb0..00000000 --- a/libero-config/bin/distributeConfig.js +++ /dev/null @@ -1,37 +0,0 @@ -const ConfigGenerator = require('./ConfigGenerator'); -const ConfigDistributor = require('./ConfigDistributor'); -const fs = require('fs'); -const path = require('path'); -const {promisify} = require('util'); - -const readFileAsync = promisify(fs.readFile); - -const configSpecFilepath = path.join(path.resolve(__dirname, '..'), 'configRegister.json'); - -function useConfigSpec(rawData) { - const data = JSON.parse((rawData)); - const configPaths = data.configPaths; - - // Combine all configs specified in configPaths into one config - const configGenerator = new ConfigGenerator(configPaths); - - // Distribute defined parts of the config to specified technology layers - const configDistributor = new ConfigDistributor(); - return configDistributor.distribute(configPaths, configGenerator) - .catch((err) => { throw err; }); -} - -function distribute() { - return readFileAsync(configSpecFilepath) - .then(useConfigSpec) - .catch((err) => { - throw err; - }); -} - -module.exports = distribute; - -if (require.main === module) { - distribute(); -} - diff --git a/libero-config/bin/isMergeableObject.js b/libero-config/bin/isMergeableObject.js deleted file mode 100644 index 7c1dbb8a..00000000 --- a/libero-config/bin/isMergeableObject.js +++ /dev/null @@ -1,21 +0,0 @@ -const Color = require('color'); - -module.exports = function isMergeableObject(value) { - - // isNonNullObject and isNonNullObject copied from private deepmerge functions - - function isNonNullObject(value) { - return !!value && typeof value === 'object' - } - - function isSpecial(value) { - const stringValue = Object.prototype.toString.call(value); - - return stringValue === '[object RegExp]' - || stringValue === '[object Date]'; - } - - return isNonNullObject(value) && - !isSpecial(value) && - !(value instanceof Color); -}; diff --git a/libero-config/config--libero-default.js b/libero-config/config--libero-default.js deleted file mode 100644 index 348895dd..00000000 --- a/libero-config/config--libero-default.js +++ /dev/null @@ -1,78 +0,0 @@ -const Color = require('color'); - -const config = { data: {}, layerAllocations: {} }; - -config.data.baselinegrid = {space: {}}; -config.data.baselinegrid.space.extra_small_in_px = 12; -config.data.baselinegrid.space.small_in_px = '!expression baselinegrid.space.extra_small_in_px * 2'; -config.data.baselinegrid.space.smallish_in_px = '!expression baselinegrid.space.small_in_px * 1.5'; -config.data.baselinegrid.space.medium_in_px = '!expression baselinegrid.space.small_in_px * 2'; -config.data.baselinegrid.space.large_in_px = '!expression baselinegrid.space.small_in_px * 3'; -config.data.baselinegrid.space.extra_large_in_px = '!expression baselinegrid.space.small_in_px * 5'; - -config.data.breakpoint = {site: {}}; -config.data.breakpoint.site.x_small_in_px = 320; -config.data.breakpoint.site.small_in_px = 480; -config.data.breakpoint.site.medium_in_px = 730; -config.data.breakpoint.site.wide_in_px = 900; -config.data.breakpoint.site.x_wide_in_px = 1200; - -config.data.grid = {}; -config.data.grid.max_width_in_px = 1114; - -config.data.color = { primary: {}, text: {} }; -config.data.color.background = Color('#fff'); -config.data.color.primary.normal = Color('#0288d1'); -config.data.color.primary.light = Color('#b3e5fc'); -config.data.color.primary.dark = Color('#0277bd'); -config.data.color.text.normal = Color('#212121'); -config.data.color.text.reverse = Color('#fff'); -config.data.color.text.secondary = Color('#888'); -config.data.color.text.secondary__reverse = Color('#9e9e9e'); -config.data.color.text.placeholder = Color('#bdbdbd'); -config.data.color.text.dividers = Color('#e0e0e0'); -config.data.color.text.dividers__reverse = Color('#616161'); -config.data.color.text.ui_background = Color('#fff'); -config.data.color.text.ui_background_hue = Color('#f5f5f5'); -config.data.color.text.ui_code = Color('#f7f7f7'); -config.data.color.text.ui_background__reverse = Color('#212121'); -config.data.color.text.ui_background_hue__reverse = Color('#333'); -config.data.color.information = Color('#0288d1'); -config.data.color.success = Color('#629f43'); -config.data.color.success_dark = Color('#569037'); -config.data.color.attention = Color('#cf0c4e'); -config.data.color.warning = Color('#e65100'); - -config.data.content_header = { title: { size: {} } }; -config.data.content_header.title.size.xx_small_in_px = 18; -config.data.content_header.title.size.x_small_in_px = 20; -config.data.content_header.title.size.small_in_px = 26; -config.data.content_header.title.size.medium_in_px = 30; -config.data.content_header.title.size.large_in_px = 36; -config.data.content_header.title.size.x_large_in_px = 41; -config.data.content_header.title.size.xx_large_in_px = 46; -config.data.content_header.title.size.xxx_large_in_px = 52; - -config.data.font = { size: {}, letterspacing: {} }; -config.data.font.primary = '"Noto Serif", serif'; -config.data.font.secondary = '"Noto Sans", Arial, Helvetica, sans-serif'; -config.data.font.monospace = '"Courier 10 Pitch", Courier, monospace'; -config.data.font.size.base_in_px = 16; -config.data.font.size.h1_in_px = 36; -config.data.font.size.h2_in_px = 26; -config.data.font.size.h3_in_px = 22; -config.data.font.size.h4_in_px = 20; -config.data.font.size.h5_in_px = 18; -config.data.font.size.h6_in_px = 16; -config.data.font.size.caption_in_px = 13; -config.data.font.size.label_in_px = 11; -config.data.font.letterspacing.label_in_px = 0.5; - -// Specify the top level properties to be distributed to layers (sass, js & templates) -config.layerAllocations = { - sass: ['baselinegrid', 'breakpoint', 'color', 'content_header', 'font', 'grid'], - js: ['breakpoint'], - // template: ['breakpoint'] -}; - -module.exports = config; diff --git a/libero-config/configRegister.json b/libero-config/configRegister.json deleted file mode 100644 index 042fd8c2..00000000 --- a/libero-config/configRegister.json +++ /dev/null @@ -1,5 +0,0 @@ -{ - "configPaths": [ - "config--libero-default.js" - ] -} From a5e2768f0c6957d1bff3e6a7af9c0a59468887c7 Mon Sep 17 00:00:00 2001 From: David Moulton Date: Thu, 17 Jan 2019 09:50:44 +0000 Subject: [PATCH 07/40] Remove references to obsolete built-in config generation --- Dockerfile | 1 - README.md | 3 - docker-compose.override.yml | 1 - gulpfile.babel.js | 5 +- test/libero-config/ConfigDistributor.spec.js | 86 --------- test/libero-config/ConfigGenerator.spec.js | 165 ------------------ .../fixtures/configFixtureStandAlone.js | 22 --- test/libero-config/fixtures/configFixtures.js | 125 ------------- 8 files changed, 3 insertions(+), 405 deletions(-) delete mode 100644 test/libero-config/ConfigDistributor.spec.js delete mode 100644 test/libero-config/ConfigGenerator.spec.js delete mode 100644 test/libero-config/fixtures/configFixtureStandAlone.js delete mode 100644 test/libero-config/fixtures/configFixtures.js diff --git a/Dockerfile b/Dockerfile index 6a6e3de3..93d97c11 100644 --- a/Dockerfile +++ b/Dockerfile @@ -26,7 +26,6 @@ COPY .babelrc \ .stylelintrc \ gulpfile.babel.js \ ./ -COPY libero-config/ libero-config/ COPY --from=npm /app/node_modules/ node_modules/ COPY test/ test/ COPY source/ source/ diff --git a/README.md b/README.md index 96b6c901..e089ee51 100644 --- a/README.md +++ b/README.md @@ -8,9 +8,6 @@ Developer quick start: running `docker-compose down --volumes && docker-compose #### Uses of configuration Configuration is used to be the single source of truth for knowledge that needs to be shared across across front end technology boundaries. For example, media query breakpoint values need to exist in the styling layer, but they are also often needed by JavaScript. Note that for flexibility all configuration could be maintained using this system in order to make it easier to later distribute configuration if it suddenly becomes necessary. - -#### Anatomy of configuration -(All config file code examples are taken from `/libero-config/config--libero-default.js`.) ##### Simple example `config.data` is where you define your configuration data. diff --git a/docker-compose.override.yml b/docker-compose.override.yml index 6d508e1a..dff74338 100644 --- a/docker-compose.override.yml +++ b/docker-compose.override.yml @@ -7,7 +7,6 @@ services: target: gulp command: bash -c "npx gulp assemble --environment=development --sass-lint=${LINT_SASS} && npx gulp watch --environment=development --sass-lint=${LINT_SASS}" volumes: - - ./libero-config:/app/libero-config - ./source:/app/source watch-build: build: diff --git a/gulpfile.babel.js b/gulpfile.babel.js index 22d8475d..7b040854 100644 --- a/gulpfile.babel.js +++ b/gulpfile.babel.js @@ -206,9 +206,10 @@ const watchSass = () => gulp.watch(config.files.src.sass, build); const watchSassTests = () => gulp.watch(config.files.test.sass, build); -const watchSharedConfig = () => gulp.watch('libero-config/**/*', distributeSharedConfig); +// TODO: replace with new watcher once config override arrangement decided +// const watchSharedConfig = () => gulp.watch('libero-config/**/*', distributeSharedConfig); -export const watch = gulp.parallel(watchSass, watchSassTests, watchSharedConfig); +export const watch = gulp.parallel(watchSass, watchSassTests/*, watchSharedConfig */); // Server diff --git a/test/libero-config/ConfigDistributor.spec.js b/test/libero-config/ConfigDistributor.spec.js deleted file mode 100644 index c3f2079b..00000000 --- a/test/libero-config/ConfigDistributor.spec.js +++ /dev/null @@ -1,86 +0,0 @@ -const chai = require('chai'); -const chaiAsPromised = require('chai-as-promised'); -const sinon = require('sinon'); - -const fixtures = require('./fixtures/configFixtures'); -const ConfigDistributor = require('../../libero-config/bin/ConfigDistributor'); - -const spy = sinon.spy; - -chai.use(chaiAsPromised); -const expect = chai.expect; - -const standAloneConfigFixtureFilePath = './fixtures/configFixtureStandAlone'; -const standAloneConfigFixture = require(standAloneConfigFixtureFilePath); - -describe('A DistributeConfig class', () => { - - context('instantiated object', () => { - - let configDistributor; - - beforeEach(() => { - configDistributor = new ConfigDistributor(); - }); - - describe('distribute method', () => { - - let configPaths; - - it('initiates config generation with the config paths supplied', () => { - const configGeneratorMock = { - generateConfig: () => { - return Promise.resolve(standAloneConfigFixture); - }, - }; - spy(configGeneratorMock, 'generateConfig'); - - const configPaths = fixtures.configPaths; - return configDistributor.distribute(configPaths, configGeneratorMock).then(() => { - expect(configGeneratorMock.generateConfig.calledOnceWithExactly(configPaths)).to.be.true; - }); - }); - - }); - - }); - - describe('processForSass static method', () => { - - context('when supplied with a JavaScript object defining data for SASS variables', () => { - - let sassConfigFixture; - - beforeEach(() => { - sassConfigFixture = fixtures.sassConfigToProcess.input; - }); - - it('correctly converts the JavaScript into a string wrapping corresponding SASS variable declarations', () => { - const processed = ConfigDistributor.processForSass(sassConfigFixture); - expect(processed).to.deep.equal(fixtures.sassConfigToProcess.expected); - }); - - }); - - }); - - describe('processForJs static method', () => { - - context('when supplied with a JavaScript object defining data for the JavaScript layer', () => { - - let jsConfigFixture; - - beforeEach(() => { - jsConfigFixture = fixtures.jsConfigToProcess.input; - }); - - it('correctly converts the JavaScript into the appropriate JSON', () => { - const processed = ConfigDistributor.processForJs(['breakpoints'], jsConfigFixture); - expect(processed).to.deep.equal(JSON.stringify(fixtures.jsConfigToProcess.input)); - }); - - }); - - }); - -}); diff --git a/test/libero-config/ConfigGenerator.spec.js b/test/libero-config/ConfigGenerator.spec.js deleted file mode 100644 index a69bcdf4..00000000 --- a/test/libero-config/ConfigGenerator.spec.js +++ /dev/null @@ -1,165 +0,0 @@ -const chai = require('chai'); -const chaiAsPromised = require('chai-as-promised'); - -const expect = chai.expect; -chai.use(chaiAsPromised); - -const Color = require('color'); - -const fixtures = require('./fixtures/configFixtures'); -const ConfigGenerator = require('../../libero-config/bin/ConfigGenerator'); - -describe('A ConfigGenerator class', () => { - - context('instansiated object', () => { - - let configGenerator; - - beforeEach(() => { - configGenerator = new ConfigGenerator(); - }); - - describe('loadConfigs method', () => { - - context('when not supplied an array', () => { - - it('throws with the message "loadConfigs must he supplied with an array"', () => { - expect(() => { - configGenerator.loadConfigs(null); - }).to.throw('loadConfigs must he supplied with an array'); - }); - - }); - - context('when supplied an array', () => { - - it('does not throw with the message "loadConfigs must he supplied with an array"', () => { - expect(() => { - configGenerator.loadConfigs([]); - }).not.to.throw('loadConfigs must he supplied with an array'); - }); - - context('when a value in the supplied array does not resolve to a file system path', () => { - - it('throws with the message saying the module cannot be found', () => { - expect(() => { - configGenerator.loadConfigs(['./path/to/non-existant/file']); - }).to.throw(/Cannot find module/); - }); - - }); - - context('when all values in the supplied array resolve to a file system path', () => { - - it('does not throw', () => { - expect(() => { - configGenerator.loadConfigs(['configFixtures.js'], `${__dirname}/fixtures/`); - }).not.to.throw(); - }); - - }); - - }); - - }); - - describe('mergeConfigs method', () => { - - let firstConfig; - let secondConfig; - let merged; - - beforeEach(() => { - firstConfig = fixtures.configsToMerge.firstConfig; - secondConfig = fixtures.configsToMerge.secondConfig; - merged = configGenerator.mergeConfigs([firstConfig, secondConfig]); - - }); - - it('performs a deep merge using a list of config objects', () => { - expect(merged.objects).to.have.lengthOf(6); - expect(merged.objects[0]).to.deep.equal(firstConfig.data.objects[0]); - expect(merged.objects[1]).to.deep.equal(firstConfig.data.objects[1]); - expect(merged.objects[2]).to.deep.equal(firstConfig.data.objects[2]); - expect(merged.objects[3]).to.deep.equal(secondConfig.data.objects[0]); - expect(merged.objects[4]).to.deep.equal(secondConfig.data.objects[1]); - expect(merged.objects[5]).to.deep.equal(secondConfig.data.objects[2]); - expect(merged.objects[6]).to.deep.equal(secondConfig.data.objects[3]); - expect(merged.additionalProperty).to.equal(secondConfig.data.additionalProperty); - }); - - it('ignores instances of Color', () => { - expect(merged.color).to.be.an.instanceOf(Color); - }); - - context('when passed object properties that would cause a merge conflict', () => { - - it('the one passed last wins', () => { - expect(merged.clash).to.equal(secondConfig.data.clash); - }); - - }); - - }); - - describe('allocateToLayers method', () => { - - let allConfigsAllocations; - let mergedAllocations; - - beforeEach(() => { - allConfigsAllocations = fixtures.configLayerAllocations; - mergedAllocations = configGenerator.allocateToLayers(allConfigsAllocations); - }); - - it('correctly merges allocations from all configs', () => { - expect(mergedAllocations.sass).to.be.an('array').that.has.a.lengthOf(3); - expect(mergedAllocations.sass).to.include('breakpoints'); - expect(mergedAllocations.sass).to.include('colors'); - expect(mergedAllocations.sass).to.include('grid'); - - expect(mergedAllocations.js).to.be.an('array').that.has.a.lengthOf(2); - expect(mergedAllocations.js).to.include('breakpoints'); - expect(mergedAllocations.js).to.include('colors'); - - expect(mergedAllocations.template).to.be.an('array').that.has.a.lengthOf(1); - expect(mergedAllocations.template).to.include('grid'); - }); - - }); - - }); - - describe('processDeferredConfig static method', () => { - - let configWithNoDeferrals; - let configWithDeferrals; - - beforeEach(() => { - configWithNoDeferrals = fixtures.configWithNoDeferrals; - configWithDeferrals = fixtures.configWithDeferrals; - }); - - context('when passed config containing a value beginning "!expression"', () => { - - it('evaluates that expression within the context of config', () => { - return expect( - ConfigGenerator.processDeferredConfig(configWithDeferrals), - ).to.eventually.have.own.property('derivedValue', 300); - }); - - }); - - context('when passed config containing a value not beginning "!expression"', () => { - - it('passes that value through unchanged', () => { - return expect( - ConfigGenerator.processDeferredConfig(configWithDeferrals), - ).to.eventually.have.own.property('rootValue', 10); - }); - - }); - - }); - -}); diff --git a/test/libero-config/fixtures/configFixtureStandAlone.js b/test/libero-config/fixtures/configFixtureStandAlone.js deleted file mode 100644 index 2128588f..00000000 --- a/test/libero-config/fixtures/configFixtureStandAlone.js +++ /dev/null @@ -1,22 +0,0 @@ -const Color = require('color'); - -const config = {data: {}}; - -config.data.baselinegrid = {space: {}}; -config.data.baselinegrid.space.extra_small_in_px = 12; -config.data.baselinegrid.space.small_in_px = '!expression baselinegrid.space.extra_small_in_px * 2'; - -config.data.breakpoints = {site: {}}; -config.data.breakpoints.site.x_small = 320; -config.data.breakpoints.site.small = 480; - -config.data.color = {primary: {}, text: {}}; -config.data.color.text.normal = Color('#212121'); - -config.layerAllocations = { - sass: ['baselinegrid', 'breakpoints', 'color'], - js: ['color', 'breakpoints'], - template: ['breakpoints'], -}; - -module.exports = config; diff --git a/test/libero-config/fixtures/configFixtures.js b/test/libero-config/fixtures/configFixtures.js deleted file mode 100644 index 5e68e659..00000000 --- a/test/libero-config/fixtures/configFixtures.js +++ /dev/null @@ -1,125 +0,0 @@ -const Color = require('color'); - -const firstGenericConfig = { - data: { - clash: 'config 1 clashing value', - objects: [ - { - id: 1, - }, - { - id: 2, - }, - { - id: 3, - }, - ], - color: Color('#663399'), - }, -}; - -const secondGenericConfig = { - data: { - clash: 'config 2 clashing value', - additionalProperty: 'I am only in one of the configs', - objects: [ - { - id: 4, - }, - { - id: 5, - }, - { - id: 6, - }, - ], - }, -}; - -module.exports = { - - configPaths: [ - './config--libero', - './config--custom', - ], - - configWithNoDeferrals: { - stringProperty: 'string property', - nestedStringProperty: { - nested: { - string: { - property: 'nested string property value', - }, - }, - }, - }, - - configWithDeferrals: { - rootValue: 10, - derivedValue: '!expression rootValue * 30', - }, - - configsToMerge: { - firstConfig: firstGenericConfig, - secondConfig: secondGenericConfig, - }, - - configsWithData: { - firstConfig: firstGenericConfig, - secondConfig: secondGenericConfig, - }, - - configLayerAllocations: [ - { - layerAllocations: { - sass: ['breakpoints', 'colors'], - js: ['breakpoints'], - template: ['grid'], - }, - }, - { - layerAllocations: { - sass: ['breakpoints', 'colors', 'grid'], - js: ['breakpoints', 'colors'], - }, - }, - ], - - sassConfigToProcess: { - input: { - breakpoints: { - site: { - 'x_small': 320, - small: 480, - medium: 730, - wide: 900, - 'x_wide': 1400, - 'xx_wide': 1600, - }, - }, - }, - expected: '$breakpoints-site-x_small: 320;\n' - + '$breakpoints-site-small: 480;\n' - + '$breakpoints-site-medium: 730;\n' - + '$breakpoints-site-wide: 900;\n' - + '$breakpoints-site-x_wide: 1400;\n' - + '$breakpoints-site-xx_wide: 1600;\n', - }, - - jsConfigToProcess: { - input: { - breakpoints: { - site: { - 'x_small': 320, - small: 480, - medium: 730, - wide: 900, - 'x_wide': 1400, - 'xx_wide': 1600, - }, - }, - }, - - }, - -}; From b2e4a32046d3d203c6481014049be9fe765f8a22 Mon Sep 17 00:00:00 2001 From: David Moulton Date: Thu, 17 Jan 2019 14:05:47 +0000 Subject: [PATCH 08/40] Add font-size mixin with tests --- source/css/sass/mixins/_typography.scss | 34 +++++++--- test/sass/mixins/typography.spec.scss | 89 +++++++++++++++++++++++++ 2 files changed, 113 insertions(+), 10 deletions(-) create mode 100644 test/sass/mixins/typography.spec.scss diff --git a/source/css/sass/mixins/_typography.scss b/source/css/sass/mixins/_typography.scss index b9c8a0df..eeb3df07 100644 --- a/source/css/sass/mixins/_typography.scss +++ b/source/css/sass/mixins/_typography.scss @@ -4,8 +4,22 @@ @import "../variables/font"; @import "spacing"; +@mixin font-size($size, $map: $font) { + $font-size: $size; + @if map_has_key($map, $size) { + $font-size: map_get($map, $size); + } + + @if type_of($font-size) != "number" or not unitless($font-size / 1px) { + @include _error("Font size must be set using a 'px'-suffixed string."); + } @else { + @include rem(font-size, $font-size); + } + +} + @mixin set-font-size-and-vertical-height($font-size, $vertical-height: $baselinegrid-space-small) { - @include rem(font-size, $font-size); + @include font-size(font-size, $font-size); line-height: $vertical-height / $font-size; } @@ -16,37 +30,37 @@ @mixin h1-typography() { @include _heading-base-typography(); - @include set-font-size-and-vertical-height($font-size-h1, 48px); + @include set-font-size-and-vertical-height(size-h1, 48px); } @mixin h2-typography() { @include _heading-base-typography(); - @include set-font-size-and-vertical-height($font-size-h2, 30px); + @include set-font-size-and-vertical-height(size-h2, 30px); } @mixin h3-typography() { @include _heading-base-typography(); - @include set-font-size-and-vertical-height($font-size-h3); + @include set-font-size-and-vertical-height(size-h3); } @mixin h4-typography() { @include _heading-base-typography(); - @include set-font-size-and-vertical-height($font-size-h4); + @include set-font-size-and-vertical-height(size-h4); } @mixin h5-typography() { @include _heading-base-typography(); - @include set-font-size-and-vertical-height($font-size-h5); + @include set-font-size-and-vertical-height(size-h5); } @mixin h6-typography() { @include _heading-base-typography(); - @include set-font-size-and-vertical-height($font-size-h6); + @include set-font-size-and-vertical-height(size-h6); } @mixin body-typography() { font-family: $font-primary; - @include set-font-size-and-vertical-height($font-size-base); + @include set-font-size-and-vertical-height(size-base); font-weight: normal; } @@ -71,8 +85,8 @@ color: $color; font-family: $font-secondary; font-weight: normal; - @include set-font-size-and-vertical-height($font-size-label); - letter-spacing: #{$font-letterspacing-label}; + @include set-font-size-and-vertical-height(size-label); + letter-spacing: #{letterspacing-label}; @if $uppercase { text-transform: uppercase; } diff --git a/test/sass/mixins/typography.spec.scss b/test/sass/mixins/typography.spec.scss new file mode 100644 index 00000000..15cb8cff --- /dev/null +++ b/test/sass/mixins/typography.spec.scss @@ -0,0 +1,89 @@ +@import "../test"; +@import "../../../source/css/sass/mixins/typography"; + +@include describe("@mixin font-size") { + + @include it("sets the font size using the map's value when the argument is a map key") { + + @include assert() { + + $fixture: ( + some-size: 16px, + ); + + @include output { + @include font-size(some-size, $fixture); + } + + @include expect { + font-size: 16px; + font-size: 1rem; + } + + } + + } + + @include it("sets the font size using the argument directly when it's not a map key") { + + @include assert() { + + $fixture: ( + some-size: 16px, + ); + + @include output { + @include font-size(32px, $fixture); + } + + @include expect { + font-size: 32px; + font-size: 2rem; + } + + } + + } + + @include it("errors if the argument does not resolve to a string") { + + @include assert() { + + $fixture: ( + some-key: (one, two, three, px,), + ); + + @include output { + @include font-size(some-key, $fixture); + } + + @include expect { + _error: "Font size must be set using a 'px'-suffixed string."; + } + + } + + } + + @include it("errors if the argument does not resolve to a 'px'-suffixed string") { + + @include assert() { + + $fixture: ( + some-key: i-do-not-have-a-px-suffix, + ); + + @include output { + @include font-size(some-key, $fixture); + } + + @include expect { + _error: "Font size must be set using a 'px'-suffixed string."; + } + + } + + } + + +} From 64285cf721d94df878ed507b0857c8933cdc14c6 Mon Sep 17 00:00:00 2001 From: David Moulton Date: Fri, 18 Jan 2019 11:19:28 +0000 Subject: [PATCH 09/40] Update config manager to latest version for it sass string export change --- package-lock.json | 6 +++--- package.json | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/package-lock.json b/package-lock.json index 85284238..4d41c843 100644 --- a/package-lock.json +++ b/package-lock.json @@ -937,9 +937,9 @@ } }, "@libero/pattern-library-config-manager": { - "version": "0.0.6", - "resolved": "https://registry.npmjs.org/@libero/pattern-library-config-manager/-/pattern-library-config-manager-0.0.6.tgz", - "integrity": "sha512-3hptW9h6X2vDTq1xZku9LcaCaKZo3JWHIyDAwiPHQEfLDdoPoKsl1w5nrLi8acrBtrapaIhIdHLRXjokiWNgXw==", + "version": "0.0.7", + "resolved": "https://registry.npmjs.org/@libero/pattern-library-config-manager/-/pattern-library-config-manager-0.0.7.tgz", + "integrity": "sha512-v1GnXXEUetLPoUgHa/4qCxcjrf9g+LOGdiDdP9fnsvGa5pSKf+HqEyWAUJCx/J8HkhQ66oYVkab2endBnXnY4w==", "requires": { "chai": "^4.2.0", "chai-as-promised": "^7.1.1", diff --git a/package.json b/package.json index dfd996fb..0f8b82f3 100644 --- a/package.json +++ b/package.json @@ -39,6 +39,6 @@ "node": ">=10.12" }, "dependencies": { - "@libero/pattern-library-config-manager": "0.0.6" + "@libero/pattern-library-config-manager": "0.0.7" } } From ee4be3218621b971b9adc221b47080a6d9c92760 Mon Sep 17 00:00:00 2001 From: David Moulton Date: Fri, 18 Jan 2019 11:30:05 +0000 Subject: [PATCH 10/40] Add font-family mixin with tests --- source/css/sass/mixins/_typography.scss | 17 +++++++--- test/sass/mixins/typography.spec.scss | 41 +++++++++++++++++++++++++ 2 files changed, 54 insertions(+), 4 deletions(-) diff --git a/source/css/sass/mixins/_typography.scss b/source/css/sass/mixins/_typography.scss index eeb3df07..4fc3287d 100644 --- a/source/css/sass/mixins/_typography.scss +++ b/source/css/sass/mixins/_typography.scss @@ -18,13 +18,22 @@ } +@mixin font-family($designation, $map: $font) { + $font-family: ""; + @if map_has_key($map, $designation) { + font-family: #{map_get($map, $designation)}; + } @else { + @include _error("Font family key `#{$designation}` not found in map"); + } +} + @mixin set-font-size-and-vertical-height($font-size, $vertical-height: $baselinegrid-space-small) { @include font-size(font-size, $font-size); line-height: $vertical-height / $font-size; } @mixin _heading-base-typography() { - font-family: $font-secondary; + @include font-family(secondary); font-weight: 600; } @@ -59,13 +68,13 @@ } @mixin body-typography() { - font-family: $font-primary; + @include font-family(primary); @include set-font-size-and-vertical-height(size-base); font-weight: normal; } @mixin small-typography() { - font-family: $font-primary; + @include font-family(primary); font-style: normal; @include set-font-size-and-vertical-height(11px); } @@ -83,7 +92,7 @@ @mixin _label-typography($color, $uppercase: true) { color: $color; - font-family: $font-secondary; + @include font-family(secondary); font-weight: normal; @include set-font-size-and-vertical-height(size-label); letter-spacing: #{letterspacing-label}; diff --git a/test/sass/mixins/typography.spec.scss b/test/sass/mixins/typography.spec.scss index 15cb8cff..fd4fe396 100644 --- a/test/sass/mixins/typography.spec.scss +++ b/test/sass/mixins/typography.spec.scss @@ -85,5 +85,46 @@ } +} + +@include describe("@mixin font-family") { + + @include it("sets the font family using the map's value when the argument is a map key") { + + @include assert() { + + $fixture: ( + some-font-family: '"Noto Sans", Arial, Helvetica, sans-serif', + ); + + @include output { + @include font-family(some-font-family, $fixture); + } + + @include expect { + font-family: "Noto Sans", Arial, Helvetica, sans-serif; + } + + } + + } + + @include it("errors when the argument is not a map key") { + + @include assert() { + + $fixture: (); + + @include output { + @include font-family(non-existent-key, $fixture); + } + + @include expect { + _error: "Font family key `non-existent-key` not found in map"; + } + + } + + } } From abe72e0547ed6d843f4f5281ac8584487c8370f6 Mon Sep 17 00:00:00 2001 From: David Moulton Date: Fri, 18 Jan 2019 11:42:13 +0000 Subject: [PATCH 11/40] Introduce get-font-size sass function --- source/css/sass/functions/_types.scss | 11 ++++++++++- source/css/sass/mixins/_types.scss | 3 ++- 2 files changed, 12 insertions(+), 2 deletions(-) diff --git a/source/css/sass/functions/_types.scss b/source/css/sass/functions/_types.scss index 10f19ba4..5ce09e77 100644 --- a/source/css/sass/functions/_types.scss +++ b/source/css/sass/functions/_types.scss @@ -1,5 +1,14 @@ @import "../variables/font"; @import "../vendor/sass-rem/rem"; -$rem-baseline: $font-size-base; +@function get-font-size($designation) { + @if map_has_key($font, $designation) { + @return map_get($font, $designation); + } + + @error "Key #{$designation} not found in the $font map."; +} + +//$rem-baseline: $font-size-base; +$rem-baseline: get-font-size(size-base); $rem-fallback: true; diff --git a/source/css/sass/mixins/_types.scss b/source/css/sass/mixins/_types.scss index b507c2a2..333b4c83 100644 --- a/source/css/sass/mixins/_types.scss +++ b/source/css/sass/mixins/_types.scss @@ -1,7 +1,8 @@ +@import "../functions/types"; @import "../variables/font"; @import "../vendor/sass-rem/rem"; -$rem-baseline: $font-size-base; +$rem-baseline: get-font-size(size-base); $rem-fallback: true; // Overridden to apply https://github.com/pierreburel/sass-rem/pull/12 From dcd8988b3b1ead23b0fca5a8aff833cf22b4f6ce Mon Sep 17 00:00:00 2001 From: David Moulton Date: Fri, 18 Jan 2019 11:46:28 +0000 Subject: [PATCH 12/40] Improve test fixture --- test/sass/mixins/typography.spec.scss | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/test/sass/mixins/typography.spec.scss b/test/sass/mixins/typography.spec.scss index fd4fe396..fe470888 100644 --- a/test/sass/mixins/typography.spec.scss +++ b/test/sass/mixins/typography.spec.scss @@ -1,5 +1,6 @@ @import "../test"; -@import "../../../source/css/sass/mixins/typography"; +//@import "../../../source/css/sass/mixins/typography"; +@import "../../../source/css/sass/mixins/typography-staging"; @include describe("@mixin font-size") { @@ -70,7 +71,7 @@ @include assert() { $fixture: ( - some-key: i-do-not-have-a-px-suffix, + some-key: i-do-not-have-a-px-suffix-but-i-do-end-in-rem, ); @include output { From 166c0eff6e601afbf878bcccbf21c5ee620b32fb Mon Sep 17 00:00:00 2001 From: David Moulton Date: Fri, 18 Jan 2019 11:47:54 +0000 Subject: [PATCH 13/40] Reset reference to a subject under test (sass) --- test/sass/mixins/typography.spec.scss | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/test/sass/mixins/typography.spec.scss b/test/sass/mixins/typography.spec.scss index fe470888..b86099e2 100644 --- a/test/sass/mixins/typography.spec.scss +++ b/test/sass/mixins/typography.spec.scss @@ -1,6 +1,5 @@ @import "../test"; -//@import "../../../source/css/sass/mixins/typography"; -@import "../../../source/css/sass/mixins/typography-staging"; +@import "../../../source/css/sass/mixins/typography"; @include describe("@mixin font-size") { From e83c283b87d6f94cd88cbc3773faf33644986201 Mon Sep 17 00:00:00 2001 From: David Moulton Date: Fri, 18 Jan 2019 15:32:13 +0000 Subject: [PATCH 14/40] Update .gitignore to ignore .sass-cache/ everywhere --- .gitignore | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.gitignore b/.gitignore index 85a164a2..8044e73f 100644 --- a/.gitignore +++ b/.gitignore @@ -1,4 +1,4 @@ -/.sass-cache/ +/**/*.sass-cache/ /export/ /node_modules/ /pattern-library-*.tar.gz From e9a7fa594ddc01895980dacd9d4d7e29a6a78a15 Mon Sep 17 00:00:00 2001 From: David Moulton Date: Fri, 18 Jan 2019 15:42:22 +0000 Subject: [PATCH 15/40] Improve font-family mixin --- source/css/sass/functions/_maps.scss | 8 ++++++++ source/css/sass/mixins/_typography.scss | 15 +++++++++------ test/sass/mixins/typography.spec.scss | 2 +- 3 files changed, 18 insertions(+), 7 deletions(-) create mode 100644 source/css/sass/functions/_maps.scss diff --git a/source/css/sass/functions/_maps.scss b/source/css/sass/functions/_maps.scss new file mode 100644 index 00000000..959cfda8 --- /dev/null +++ b/source/css/sass/functions/_maps.scss @@ -0,0 +1,8 @@ +@function get-value-from-map($map, $key) { + + @if type_of($map) == "map" and map_has_key($map, $key) { + @return map_get($map, $key); + } + + @return "[Not found]"; +} diff --git a/source/css/sass/mixins/_typography.scss b/source/css/sass/mixins/_typography.scss index 4fc3287d..1d270b30 100644 --- a/source/css/sass/mixins/_typography.scss +++ b/source/css/sass/mixins/_typography.scss @@ -1,10 +1,13 @@ +@import "../functions/maps"; @import "../mixins/types"; @import "../variables/baselinegrid"; @import "../variables/color"; @import "../variables/font"; @import "spacing"; -@mixin font-size($size, $map: $font) { +$_default-font-map: $font; + +@mixin font-size($size, $map: $_default-font-map) { $font-size: $size; @if map_has_key($map, $size) { $font-size: map_get($map, $size); @@ -18,12 +21,12 @@ } -@mixin font-family($designation, $map: $font) { - $font-family: ""; - @if map_has_key($map, $designation) { - font-family: #{map_get($map, $designation)}; - } @else { +@mixin font-family($designation, $map: $_default-font-map) { + $font-family: get-value-from-map($map, $designation); + @if $font-family == "[Not found]" { @include _error("Font family key `#{$designation}` not found in map"); + } @else { + font-family: unquote($font-family); } } diff --git a/test/sass/mixins/typography.spec.scss b/test/sass/mixins/typography.spec.scss index b86099e2..12fd2ca0 100644 --- a/test/sass/mixins/typography.spec.scss +++ b/test/sass/mixins/typography.spec.scss @@ -113,7 +113,7 @@ @include assert() { - $fixture: (); + $fixture: (one: two); @include output { @include font-family(non-existent-key, $fixture); From ff959a072a93160e6680f526b0916430e13f8a07 Mon Sep 17 00:00:00 2001 From: David Moulton Date: Fri, 18 Jan 2019 16:04:11 +0000 Subject: [PATCH 16/40] Tweak style lint rules --- .stylelintrc | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/.stylelintrc b/.stylelintrc index 3f4b6a1d..31ca2937 100644 --- a/.stylelintrc +++ b/.stylelintrc @@ -15,6 +15,12 @@ "color-hex-length": "short", "color-no-invalid-hex": true, "comment-empty-line-before": "always", + "declaration-block-no-duplicate-properties": [ + true, + { + "ignore": ["consecutive-duplicates-with-different-values"] + } + ], "declaration-block-semicolon-newline-after": "always", "declaration-block-semicolon-space-before": "never", "declaration-block-trailing-semicolon": "always", From 632e74ad2d9e99a611a1a787934ebe46ad6c1a3f Mon Sep 17 00:00:00 2001 From: David Moulton Date: Fri, 18 Jan 2019 16:05:08 +0000 Subject: [PATCH 17/40] Use css custom properties in font-family mixin --- source/css/sass/mixins/_typography.scss | 1 + test/sass/mixins/typography.spec.scss | 1 + 2 files changed, 2 insertions(+) diff --git a/source/css/sass/mixins/_typography.scss b/source/css/sass/mixins/_typography.scss index 1d270b30..05dfaa2a 100644 --- a/source/css/sass/mixins/_typography.scss +++ b/source/css/sass/mixins/_typography.scss @@ -27,6 +27,7 @@ $_default-font-map: $font; @include _error("Font family key `#{$designation}` not found in map"); } @else { font-family: unquote($font-family); + font-family: var(--font#{$designation}); } } diff --git a/test/sass/mixins/typography.spec.scss b/test/sass/mixins/typography.spec.scss index 12fd2ca0..5d23d621 100644 --- a/test/sass/mixins/typography.spec.scss +++ b/test/sass/mixins/typography.spec.scss @@ -103,6 +103,7 @@ @include expect { font-family: "Noto Sans", Arial, Helvetica, sans-serif; + font-family: var(--font-some-font-family); } } From 79bd471717b1d966376e1a19a93f745564abbbe7 Mon Sep 17 00:00:00 2001 From: David Moulton Date: Mon, 21 Jan 2019 10:23:44 +0000 Subject: [PATCH 18/40] Improve font-size mixin, allow rem-based numbers --- source/css/sass/functions/_types.scss | 14 +++ source/css/sass/mixins/_typography.scss | 11 ++- test/sass/mixins/typography.spec.scss | 109 ++++++++++++++++-------- 3 files changed, 97 insertions(+), 37 deletions(-) diff --git a/source/css/sass/functions/_types.scss b/source/css/sass/functions/_types.scss index 5ce09e77..fa291447 100644 --- a/source/css/sass/functions/_types.scss +++ b/source/css/sass/functions/_types.scss @@ -9,6 +9,20 @@ @error "Key #{$designation} not found in the $font map."; } +@function is-a-px-number($candidate) { + $passed: type_of($candidate) == "number"; + $passed: $passed and type_of($candidate / 1px); + $passed: $passed and unitless($candidate / 1px); + @return $passed; +} + +@function is-a-rem-number($candidate) { + $passed: type_of($candidate) == "number"; + $passed: $passed and type_of($candidate / 1rem); + $passed: $passed and unitless($candidate / 1rem); + @return $passed; +} + //$rem-baseline: $font-size-base; $rem-baseline: get-font-size(size-base); $rem-fallback: true; diff --git a/source/css/sass/mixins/_typography.scss b/source/css/sass/mixins/_typography.scss index 05dfaa2a..1e582ef4 100644 --- a/source/css/sass/mixins/_typography.scss +++ b/source/css/sass/mixins/_typography.scss @@ -8,15 +8,20 @@ $_default-font-map: $font; @mixin font-size($size, $map: $_default-font-map) { + $font-size: $size; @if map_has_key($map, $size) { $font-size: map_get($map, $size); } - @if type_of($font-size) != "number" or not unitless($font-size / 1px) { - @include _error("Font size must be set using a 'px'-suffixed string."); - } @else { + @if is-a-px-number($font-size) or is-a-rem-number($font-size) { @include rem(font-size, $font-size); + @if map_has_key($map, $size) { + font-size: var(--font-#{$size}); + } + + } @else { + @include _error("Font size must be set using a 'px'-suffixed number or a 'rem'-suffixed number."); } } diff --git a/test/sass/mixins/typography.spec.scss b/test/sass/mixins/typography.spec.scss index 5d23d621..ae287c5c 100644 --- a/test/sass/mixins/typography.spec.scss +++ b/test/sass/mixins/typography.spec.scss @@ -18,69 +18,110 @@ @include expect { font-size: 16px; font-size: 1rem; + font-size: var(--font-some-size); } } } +} - @include it("sets the font size using the argument directly when it's not a map key") { +@include it("sets the font size using the argument directly when it's not a map key") { - @include assert() { + @include assert() { - $fixture: ( - some-size: 16px, - ); + $fixture: ( + some-size: 16px, + ); - @include output { - @include font-size(32px, $fixture); - } + @include output { + @include font-size(32px, $fixture); + } - @include expect { - font-size: 32px; - font-size: 2rem; - } + @include expect { + font-size: 32px; + font-size: 2rem; + } + + } +} + +@include it("can accommodate rem numbers") { + + @include assert() { + + $fixture: ( + some-size: 1rem, + ); + + @include output { + @include font-size(2rem, $fixture); + } + + @include expect { + font-size: 32px; + font-size: 2rem; } } - @include it("errors if the argument does not resolve to a string") { +} - @include assert() { +@include it("can accommodate px numbers") { - $fixture: ( - some-key: (one, two, three, px,), - ); + @include assert() { - @include output { - @include font-size(some-key, $fixture); - } + $fixture: ( + some-size: 16px, + ); - @include expect { - _error: "Font size must be set using a 'px'-suffixed string."; - } + @include output { + @include font-size(32px, $fixture); + } + @include expect { + font-size: 32px; + font-size: 2rem; } } - @include it("errors if the argument does not resolve to a 'px'-suffixed string") { +} +@include it("errors if the argument does not resolve to a number") { - @include assert() { + @include assert() { - $fixture: ( - some-key: i-do-not-have-a-px-suffix-but-i-do-end-in-rem, - ); + $fixture: ( + some-key: (one, two, three, px), + ); - @include output { - @include font-size(some-key, $fixture); - } + @include output { + @include font-size(some-key, $fixture); + } - @include expect { - _error: "Font size must be set using a 'px'-suffixed string."; - } + @include expect { + _error: "Font size must be set using a 'px'-suffixed number or a 'rem'-suffixed number."; + } + + } + +} + +@include it("errors if the argument does not resolve to a 'px'-suffixed number") { + + @include assert() { + + $fixture: ( + some-key: a-string-i-do-not-have-a-px-suffix-but-i-do-end-in-rem, + ); + + @include output { + @include font-size(some-key, $fixture); + } + @include expect { + _error: "Font size must be set using a 'px'-suffixed number or a 'rem'-suffixed number.§"; } } From 5d6424627f7626fbc686a199642d79cf10dd6981 Mon Sep 17 00:00:00 2001 From: David Moulton Date: Mon, 21 Jan 2019 11:35:58 +0000 Subject: [PATCH 19/40] Add set-color mixin --- source/css/sass/mixins/_colors.scss | 24 +++++++++ test/sass/mixins/colors.spec.scss | 79 +++++++++++++++++++++++++++++ 2 files changed, 103 insertions(+) create mode 100644 source/css/sass/mixins/_colors.scss create mode 100644 test/sass/mixins/colors.spec.scss diff --git a/source/css/sass/mixins/_colors.scss b/source/css/sass/mixins/_colors.scss new file mode 100644 index 00000000..046f39b2 --- /dev/null +++ b/source/css/sass/mixins/_colors.scss @@ -0,0 +1,24 @@ +@import "../variables/color"; +@import "../variables/custom-properties--color"; +@import "../mixins/validation"; + +@mixin _set-color-based-property($property, $color, $map) { + $value: $color; + @if map_has_key($map, $color) { + $value: map_get($map, $color); + } + + @if type_of($value) == "color" { + #{$property}: $value; + @if map_has_key($map, $color) { + #{$property}: var(--color-#{$color}); + } + } @else { + @include _error("Trying to set a non-color value to property `#{$property}`"); + } + +} + +@mixin set-color($designation, $map: $color) { + @include _set-color-based-property(color, $designation, $map); +} diff --git a/test/sass/mixins/colors.spec.scss b/test/sass/mixins/colors.spec.scss new file mode 100644 index 00000000..0d3bd934 --- /dev/null +++ b/test/sass/mixins/colors.spec.scss @@ -0,0 +1,79 @@ +@import "../test"; +@import "../../../source/css/sass/mixins/colors"; + +@include describe("@mixin set-color") { + + @include it("sets the color using the map's value when the argument is a map key, and the corresponding value is a color") { + + @include assert() { + + $fixture: ( + some-color: rgba(11, 22, 33, 0.44), + ); + + @include output { + @include set-color(some-color, $fixture); + } + + @include expect { + color: rgba(11, 22, 33, 0.44); + color: var(--color-#{some-color}); + } + + } + + } + + @include it("sets the color directly when the argument is a color value") { + + @include assert() { + + @include output { + @include set-color(rgb(55, 55, 55)); + } + + @include expect { + color: rgb(55, 55, 55); + } + + } + + } + + @include it("errors if the argument is a map key resolving to a non-color value") { + + @include assert() { + + $fixture: (unused-key: unused-value); + + @include output { + @include set-color(not-a-color, $fixture); + } + + @include expect { + _error: "Trying to set a non-color value to property `color`"; + } + + } + + } + + @include it("errors if the argument is neither a map key nor a color value") { + + @include assert() { + + $fixture: (key-to-not-a-color: not-a-color); + + @include output { + @include set-color(key-to-not-a-color, $fixture); + } + + @include expect { + _error: "Trying to set a non-color value to property `color`"; + } + + } + + } + +} From 95fb46ccbae067f3be0cbd884f578083ffa8c7f4 Mon Sep 17 00:00:00 2001 From: David Moulton Date: Mon, 21 Jan 2019 11:45:51 +0000 Subject: [PATCH 20/40] Add set-background-color mixin --- source/css/sass/mixins/_colors.scss | 4 ++ test/sass/mixins/colors.spec.scss | 78 +++++++++++++++++++++++++++++ 2 files changed, 82 insertions(+) diff --git a/source/css/sass/mixins/_colors.scss b/source/css/sass/mixins/_colors.scss index 046f39b2..dfb7e93b 100644 --- a/source/css/sass/mixins/_colors.scss +++ b/source/css/sass/mixins/_colors.scss @@ -22,3 +22,7 @@ @mixin set-color($designation, $map: $color) { @include _set-color-based-property(color, $designation, $map); } + +@mixin set-background-color($designation, $map: $color) { + @include _set-color-based-property(background-color, $designation, $map); +} diff --git a/test/sass/mixins/colors.spec.scss b/test/sass/mixins/colors.spec.scss index 0d3bd934..ef14f8cf 100644 --- a/test/sass/mixins/colors.spec.scss +++ b/test/sass/mixins/colors.spec.scss @@ -77,3 +77,81 @@ } } + +@include describe("@mixin set-background-color") { + + @include it("sets the background-color using the map's value when the argument is a map key, and the corresponding value is a color") { + + @include assert() { + + $fixture: ( + some-color: rgba(11, 22, 33, 0.44), + ); + + @include output { + @include set-background-color(some-color, $fixture); + } + + @include expect { + background-color: rgba(11, 22, 33, 0.44); + background-color: var(--color-#{some-color}); + } + + } + + } + + @include it("sets the background-color directly when the argument is a color value") { + + @include assert() { + + @include output { + @include set-background-color(rgb(55, 55, 55)); + } + + @include expect { + background-color: rgb(55, 55, 55); + } + + } + + } + + @include it("errors if the argument is a map key resolving to a non-color value") { + + @include assert() { + + $fixture: (unused-key: unused-value); + + @include output { + @include set-background-color(not-a-color, $fixture); + } + + @include expect { + _error: "Trying to set a non-color value to property `background-color`"; + } + + } + + } + + @include it("errors if the argument is neither a map key nor a color value") { + + @include assert() { + + $fixture: (key-to-not-a-color: not-a-color); + + @include output { + @include set-background-color(key-to-not-a-color, $fixture); + } + + @include expect { + _error: "Trying to set a non-color value to property `background-color`"; + } + + } + + } + +} + From 28edc84b1f9d35c08f2e045edb0b992b003b3c4c Mon Sep 17 00:00:00 2001 From: David Moulton Date: Mon, 21 Jan 2019 13:24:36 +0000 Subject: [PATCH 21/40] Improve internals of color handling --- source/css/sass/functions/_maps.scss | 8 ++++++++ source/css/sass/mixins/_colors.scss | 6 ++---- 2 files changed, 10 insertions(+), 4 deletions(-) diff --git a/source/css/sass/functions/_maps.scss b/source/css/sass/functions/_maps.scss index 959cfda8..c27cd06d 100644 --- a/source/css/sass/functions/_maps.scss +++ b/source/css/sass/functions/_maps.scss @@ -6,3 +6,11 @@ @return "[Not found]"; } + +@function get-value-from-map-with-default($map, $keyOrDefault) { + $value: get-value-from-map($map, $keyOrDefault); + @if $value == "[Not found]" { + $value: $keyOrDefault; + } + @return $value; +} diff --git a/source/css/sass/mixins/_colors.scss b/source/css/sass/mixins/_colors.scss index dfb7e93b..55108e81 100644 --- a/source/css/sass/mixins/_colors.scss +++ b/source/css/sass/mixins/_colors.scss @@ -1,12 +1,10 @@ @import "../variables/color"; @import "../variables/custom-properties--color"; +@import "../functions/colors"; @import "../mixins/validation"; @mixin _set-color-based-property($property, $color, $map) { - $value: $color; - @if map_has_key($map, $color) { - $value: map_get($map, $color); - } + $value: get-color-value-from-map($color, $map); @if type_of($value) == "color" { #{$property}: $value; From 1aff1256e973278d6537f081dc27aa965e3c5d19 Mon Sep 17 00:00:00 2001 From: David Moulton Date: Mon, 21 Jan 2019 14:39:59 +0000 Subject: [PATCH 22/40] Bug fix in @font-family mixin --- source/css/sass/mixins/_typography.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/source/css/sass/mixins/_typography.scss b/source/css/sass/mixins/_typography.scss index 1e582ef4..f1edc198 100644 --- a/source/css/sass/mixins/_typography.scss +++ b/source/css/sass/mixins/_typography.scss @@ -32,7 +32,7 @@ $_default-font-map: $font; @include _error("Font family key `#{$designation}` not found in map"); } @else { font-family: unquote($font-family); - font-family: var(--font#{$designation}); + font-family: var(--font-#{$designation}); } } From bdc688180fce5b596546c258dec2c1ca4a3c9427 Mon Sep 17 00:00:00 2001 From: David Moulton Date: Mon, 21 Jan 2019 14:44:51 +0000 Subject: [PATCH 23/40] Improve test wording --- test/sass/mixins/typography.spec.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/test/sass/mixins/typography.spec.scss b/test/sass/mixins/typography.spec.scss index ae287c5c..46828d8b 100644 --- a/test/sass/mixins/typography.spec.scss +++ b/test/sass/mixins/typography.spec.scss @@ -108,7 +108,7 @@ } -@include it("errors if the argument does not resolve to a 'px'-suffixed number") { +@include it("errors if the argument does not resolve to a 'px'-suffixed or 'rem'-suffixed number") { @include assert() { @@ -121,7 +121,7 @@ } @include expect { - _error: "Font size must be set using a 'px'-suffixed number or a 'rem'-suffixed number.§"; + _error: "Font size must be set using a 'px'-suffixed number or a 'rem'-suffixed number."; } } From 9f2cb7fdb8fb9dcd69afec4423b6a46c9e45809b Mon Sep 17 00:00:00 2001 From: David Moulton Date: Mon, 21 Jan 2019 14:45:44 +0000 Subject: [PATCH 24/40] Parameter order --- source/css/sass/mixins/_colors.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/source/css/sass/mixins/_colors.scss b/source/css/sass/mixins/_colors.scss index 55108e81..52525e7e 100644 --- a/source/css/sass/mixins/_colors.scss +++ b/source/css/sass/mixins/_colors.scss @@ -1,10 +1,10 @@ @import "../variables/color"; @import "../variables/custom-properties--color"; -@import "../functions/colors"; +@import "../functions/maps"; @import "../mixins/validation"; @mixin _set-color-based-property($property, $color, $map) { - $value: get-color-value-from-map($color, $map); + $value: get-value-from-map-with-default($map, $color); @if type_of($value) == "color" { #{$property}: $value; From c42e421becda36248a1cd548f6b60ce880e4d865 Mon Sep 17 00:00:00 2001 From: David Moulton Date: Mon, 21 Jan 2019 15:57:54 +0000 Subject: [PATCH 25/40] Rework label-content-typography mixin with tests --- source/css/sass/functions/_colors.scss | 6 ++++++ source/css/sass/mixins/_typography.scss | 12 +++++++++--- 2 files changed, 15 insertions(+), 3 deletions(-) create mode 100644 source/css/sass/functions/_colors.scss diff --git a/source/css/sass/functions/_colors.scss b/source/css/sass/functions/_colors.scss new file mode 100644 index 00000000..460e28c8 --- /dev/null +++ b/source/css/sass/functions/_colors.scss @@ -0,0 +1,6 @@ +@import "../variables/color"; +@import "maps"; + +@function get-color($name, $map: $color) { + @return get-value-from-map($map, $name); +} diff --git a/source/css/sass/mixins/_typography.scss b/source/css/sass/mixins/_typography.scss index f1edc198..9fee7ae1 100644 --- a/source/css/sass/mixins/_typography.scss +++ b/source/css/sass/mixins/_typography.scss @@ -1,4 +1,5 @@ @import "../functions/maps"; +@import "../functions/colors"; @import "../mixins/types"; @import "../variables/baselinegrid"; @import "../variables/color"; @@ -110,10 +111,15 @@ $_default-font-map: $font; } } -@mixin label-content-typography($color: $color-text-secondary, $uppercase: true) { - @include _label-typography($color, $uppercase); +@mixin label-content-typography($color: text-secondary, $uppercase: true, $map: $color) { + $col: get-color($color, $map); + @if $col != "[Not found]" { + @include _label-typography($col, $uppercase); + } @else { + @include _error("Can't resolve `#{$color}` in the color map"); + } } @mixin label-subject-typography() { - @include _label-typography($color-primary-normal); + @include _label-typography(get-color(primay-normal)); } From 12bcaf4db1b86c69cb1383aee6c1a17a447f3cc4 Mon Sep 17 00:00:00 2001 From: David Moulton Date: Mon, 21 Jan 2019 16:54:42 +0000 Subject: [PATCH 26/40] Minor improvements and tests --- source/css/sass/functions/_maps.scss | 2 +- source/css/sass/mixins/_colors.scss | 2 +- source/css/sass/mixins/_typography.scss | 7 +---- test/sass/mixins/typography.spec.scss | 40 +++++++++++++++++++++++++ 4 files changed, 43 insertions(+), 8 deletions(-) diff --git a/source/css/sass/functions/_maps.scss b/source/css/sass/functions/_maps.scss index c27cd06d..c13c93ef 100644 --- a/source/css/sass/functions/_maps.scss +++ b/source/css/sass/functions/_maps.scss @@ -7,7 +7,7 @@ @return "[Not found]"; } -@function get-value-from-map-with-default($map, $keyOrDefault) { +@function get-value-from-map-or-pass-through($map, $keyOrDefault) { $value: get-value-from-map($map, $keyOrDefault); @if $value == "[Not found]" { $value: $keyOrDefault; diff --git a/source/css/sass/mixins/_colors.scss b/source/css/sass/mixins/_colors.scss index 52525e7e..c3e906a5 100644 --- a/source/css/sass/mixins/_colors.scss +++ b/source/css/sass/mixins/_colors.scss @@ -4,7 +4,7 @@ @import "../mixins/validation"; @mixin _set-color-based-property($property, $color, $map) { - $value: get-value-from-map-with-default($map, $color); + $value: get-value-from-map-or-pass-through($map, $color); @if type_of($value) == "color" { #{$property}: $value; diff --git a/source/css/sass/mixins/_typography.scss b/source/css/sass/mixins/_typography.scss index 9fee7ae1..7769aff1 100644 --- a/source/css/sass/mixins/_typography.scss +++ b/source/css/sass/mixins/_typography.scss @@ -9,12 +9,7 @@ $_default-font-map: $font; @mixin font-size($size, $map: $_default-font-map) { - - $font-size: $size; - @if map_has_key($map, $size) { - $font-size: map_get($map, $size); - } - + $font-size: get-value-from-map-or-pass-through($map, $size); @if is-a-px-number($font-size) or is-a-rem-number($font-size) { @include rem(font-size, $font-size); @if map_has_key($map, $size) { diff --git a/test/sass/mixins/typography.spec.scss b/test/sass/mixins/typography.spec.scss index 46828d8b..c59e5f49 100644 --- a/test/sass/mixins/typography.spec.scss +++ b/test/sass/mixins/typography.spec.scss @@ -170,3 +170,43 @@ } } + +@include describe("@mixin label-content-typography") { + + @include it("Errors if the color argument supplied is not found in the color map") { + + @include assert() { + + $fixture: (some-key: some-value); + + @include output { + @include label-content-typography(not-a-color-map-key, true, $fixture); + } + + @include expect { + _error: "Can't resolve `not-a-color-map-key` in the color map"; + } + + } + + } + + @include it("Doesn't error if the color argument supplied is found in the color map") { + + @include assert() { + + $fixture: (some-color: red); + + @include output { + @include label-content-typography(some-color, true, $fixture); + } + + @include contains { + color: red; + } + + } + + } + +} From 41e393a667705751395ce1144b36412d30e18fc2 Mon Sep 17 00:00:00 2001 From: David Moulton Date: Tue, 22 Jan 2019 09:36:09 +0000 Subject: [PATCH 27/40] Improve test wording --- test/sass/mixins/typography.spec.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/sass/mixins/typography.spec.scss b/test/sass/mixins/typography.spec.scss index c59e5f49..ec9fcccc 100644 --- a/test/sass/mixins/typography.spec.scss +++ b/test/sass/mixins/typography.spec.scss @@ -191,7 +191,7 @@ } - @include it("Doesn't error if the color argument supplied is found in the color map") { + @include it("Sets the color to be the value of the key in the color map if the color argument supplied is found in the color map") { @include assert() { From 293fd043377f684cc1b0b70d0d9c8bf368f03895 Mon Sep 17 00:00:00 2001 From: David Moulton Date: Tue, 22 Jan 2019 09:40:33 +0000 Subject: [PATCH 28/40] Nesting --- test/sass/mixins/typography.spec.scss | 118 +++++++++++++------------- 1 file changed, 59 insertions(+), 59 deletions(-) diff --git a/test/sass/mixins/typography.spec.scss b/test/sass/mixins/typography.spec.scss index ec9fcccc..0ac43dfa 100644 --- a/test/sass/mixins/typography.spec.scss +++ b/test/sass/mixins/typography.spec.scss @@ -24,108 +24,108 @@ } } -} -@include it("sets the font size using the argument directly when it's not a map key") { + @include it("sets the font size using the argument directly when it's not a map key") { - @include assert() { + @include assert() { - $fixture: ( - some-size: 16px, - ); + $fixture: ( + some-size: 16px, + ); - @include output { - @include font-size(32px, $fixture); - } + @include output { + @include font-size(32px, $fixture); + } + + @include expect { + font-size: 32px; + font-size: 2rem; + } - @include expect { - font-size: 32px; - font-size: 2rem; } } -} - -@include it("can accommodate rem numbers") { + @include it("can accommodate rem numbers") { - @include assert() { + @include assert() { - $fixture: ( + $fixture: ( some-size: 1rem, - ); + ); - @include output { - @include font-size(2rem, $fixture); - } + @include output { + @include font-size(2rem, $fixture); + } + + @include expect { + font-size: 32px; + font-size: 2rem; + } - @include expect { - font-size: 32px; - font-size: 2rem; } } -} - -@include it("can accommodate px numbers") { + @include it("can accommodate px numbers") { - @include assert() { + @include assert() { - $fixture: ( + $fixture: ( some-size: 16px, - ); + ); - @include output { - @include font-size(32px, $fixture); - } + @include output { + @include font-size(32px, $fixture); + } + + @include expect { + font-size: 32px; + font-size: 2rem; + } - @include expect { - font-size: 32px; - font-size: 2rem; } } + @include it("errors if the argument does not resolve to a number") { -} -@include it("errors if the argument does not resolve to a number") { + @include assert() { - @include assert() { + $fixture: ( + some-key: (one, two, three, px), + ); - $fixture: ( - some-key: (one, two, three, px), - ); + @include output { + @include font-size(some-key, $fixture); + } - @include output { - @include font-size(some-key, $fixture); - } + @include expect { + _error: "Font size must be set using a 'px'-suffixed number or a 'rem'-suffixed number."; + } - @include expect { - _error: "Font size must be set using a 'px'-suffixed number or a 'rem'-suffixed number."; } } -} + @include it("errors if the argument does not resolve to a 'px'-suffixed or 'rem'-suffixed number") { -@include it("errors if the argument does not resolve to a 'px'-suffixed or 'rem'-suffixed number") { + @include assert() { - @include assert() { + $fixture: ( + some-key: a-string-i-do-not-have-a-px-suffix-but-i-do-end-in-rem, + ); - $fixture: ( - some-key: a-string-i-do-not-have-a-px-suffix-but-i-do-end-in-rem, - ); + @include output { + @include font-size(some-key, $fixture); + } - @include output { - @include font-size(some-key, $fixture); - } + @include expect { + _error: "Font size must be set using a 'px'-suffixed number or a 'rem'-suffixed number."; + } - @include expect { - _error: "Font size must be set using a 'px'-suffixed number or a 'rem'-suffixed number."; } } - } @include describe("@mixin font-family") { From f95141942d490e962a0d7ef46dcbbf82ca4d45f1 Mon Sep 17 00:00:00 2001 From: David Moulton Date: Tue, 22 Jan 2019 11:08:15 +0000 Subject: [PATCH 29/40] Consolidate heading typography mixins; use heading css custom properties --- source/css/sass/_normalize.scss | 8 +- source/css/sass/mixins/_typography.scss | 45 +++---- test/sass/mixins/typography.spec.scss | 154 +++++++++++++++++++++++- 3 files changed, 179 insertions(+), 28 deletions(-) diff --git a/source/css/sass/_normalize.scss b/source/css/sass/_normalize.scss index 38fd0dda..7c7ec591 100644 --- a/source/css/sass/_normalize.scss +++ b/source/css/sass/_normalize.scss @@ -32,22 +32,22 @@ h2 { } h3 { - @include h3-typography(); + @include heading-level-typography(3); @include h3-spacing(); } h4 { - @include h4-typography(); + @include heading-level-typography(4); @include h4-spacing(); } h5 { - @include h5-typography(); + @include heading-level-typography(5); @include h5-spacing(); } h6 { - @include h6-typography(); + @include heading-level-typography(6); @include h6-spacing(); } diff --git a/source/css/sass/mixins/_typography.scss b/source/css/sass/mixins/_typography.scss index 7769aff1..2ce7f8dc 100644 --- a/source/css/sass/mixins/_typography.scss +++ b/source/css/sass/mixins/_typography.scss @@ -32,8 +32,10 @@ $_default-font-map: $font; } } -@mixin set-font-size-and-vertical-height($font-size, $vertical-height: $baselinegrid-space-small) { - @include font-size(font-size, $font-size); +// FIX: Reinstate once baseline grid mixins in place +//@mixin set-font-size-and-vertical-height($font-size, $vertical-height: $baselinegrid-space-small) { +@mixin set-font-size-and-vertical-height($font-size, $vertical-height: 24px, $map: $font) { + @include font-size($font-size, $map); line-height: $vertical-height / $font-size; } @@ -42,34 +44,33 @@ $_default-font-map: $font; font-weight: 600; } -@mixin h1-typography() { - @include _heading-base-typography(); - @include set-font-size-and-vertical-height(size-h1, 48px); -} - -@mixin h2-typography() { - @include _heading-base-typography(); - @include set-font-size-and-vertical-height(size-h2, 30px); -} +// FIX: Tie $line-height to a variable +@mixin heading-level-typography($level, /*$line-height: 24px, */$map: $font) { + @if type_of($level) != "number" or not unitless($level) or $level < 1 or $level > 6 { + @include _error("Invalid heading level `#{$level}` supplied"); + } @else { -@mixin h3-typography() { - @include _heading-base-typography(); - @include set-font-size-and-vertical-height(size-h3); -} + $key: size-h#{$level}; + @if map_has_key($map, $key) { + $font-size: map_get($map, $key); + @include _heading-base-typography(); + @include set-font-size-and-vertical-height($font-size, 48px, $map); + font-size: var(--font-#{$key}); + } @else { + @include _error("Font map is missing the definition of h#{$level} font size"); + } -@mixin h4-typography() { - @include _heading-base-typography(); - @include set-font-size-and-vertical-height(size-h4); + } } -@mixin h5-typography() { +@mixin h1-typography() { @include _heading-base-typography(); - @include set-font-size-and-vertical-height(size-h5); + @include set-font-size-and-vertical-height(size-h1, 48px); } -@mixin h6-typography() { +@mixin h2-typography() { @include _heading-base-typography(); - @include set-font-size-and-vertical-height(size-h6); + @include set-font-size-and-vertical-height(size-h2, 30px); } @mixin body-typography() { diff --git a/test/sass/mixins/typography.spec.scss b/test/sass/mixins/typography.spec.scss index 0ac43dfa..0f4effc7 100644 --- a/test/sass/mixins/typography.spec.scss +++ b/test/sass/mixins/typography.spec.scss @@ -7,12 +7,13 @@ @include assert() { - $fixture: ( + $fixture-map: ( some-size: 16px, ); + $fixture-line-height: 24px; @include output { - @include font-size(some-size, $fixture); + @include font-size(some-size, $fixture-map); } @include expect { @@ -210,3 +211,152 @@ } } + +@include describe("@mixin heading-level-typography") { + + $fixture: ( + size-h1: 10px, + size-h2: 20px, + size-h3: 30px, + size-h4: 40px, + size-h5: 50px, + size-h6: 60px, + // invalid heading size in order to verify the mixin doesn't use it + size-h7: 70px, + ); + + @include it("sets the h1 font size when supplied level 1") { + + @include assert() { + + @include output { + @include heading-level-typography(1, $fixture); + } + + @include contains { + font-size: 10px; + font-size: var(--font-size-h1); + } + + } + + } + + @include it("sets the h1 font size when supplied level 2") { + + @include assert() { + + @include output { + @include heading-level-typography(2, $fixture); + } + + @include contains { + font-size: 20px; + font-size: var(--font-size-h2); + } + + } + + } + + @include it("sets the h1 font size when supplied level 3") { + + @include assert() { + + @include output { + @include heading-level-typography(3, $fixture); + } + + @include contains { + font-size: 30px; + font-size: var(--font-size-h3); + } + + } + + } + + @include it("sets the h1 font size when supplied level 4") { + + @include assert() { + + @include output { + @include heading-level-typography(4, $fixture); + } + + @include contains { + font-size: 40px; + font-size: var(--font-size-h4); + } + + } + + } + + @include it("sets the h5 font size when supplied level 5") { + + @include assert() { + + @include output { + @include heading-level-typography(5, $fixture); + } + + @include contains { + font-size: 50px; + font-size: var(--font-size-h5); + } + + } + + } + + @include it("sets the h6 font size when supplied level 6") { + + @include assert() { + + @include output { + @include heading-level-typography(6, $fixture); + } + + @include contains { + font-size: 60px; + font-size: var(--font-size-h6); + } + + } + + } + + @include it("errors if supplied a heading level argument not between 1 and 6 inclusive") { + + @include assert() { + + @include output { + @include heading-level-typography(7, $fixture); + } + + @include expect() { + _error: "Invalid heading level `7` supplied"; + } + + } + + } + + @include it("errors a valid headling level lacks a font size defninition in the map") { + + @include assert() { + + @include output { + @include heading-level-typography(1, (size-h2: 20px)); + } + + @include expect() { + _error: "Font map is missing the definition of h1 font size"; + } + + } + + } + +} From 3c6520dd5c20ad51bd526f9817db6ae46e687ef0 Mon Sep 17 00:00:00 2001 From: David Moulton Date: Tue, 22 Jan 2019 11:24:46 +0000 Subject: [PATCH 30/40] Streamline sass heading mixin a bit --- source/css/sass/_normalize.scss | 4 ++-- source/css/sass/mixins/_typography.scss | 25 ++++++++++--------------- test/sass/mixins/typography.spec.scss | 24 ++++++++++++------------ 3 files changed, 24 insertions(+), 29 deletions(-) diff --git a/source/css/sass/_normalize.scss b/source/css/sass/_normalize.scss index 7c7ec591..7b73fd47 100644 --- a/source/css/sass/_normalize.scss +++ b/source/css/sass/_normalize.scss @@ -22,12 +22,12 @@ body { } h1 { - @include h1-typography(); + @include heading-level-typography(1, 48px); @include h1-spacing(); } h2 { - @include h2-typography(); + @include heading-level-typography(1, 30px); @include h2-spacing(); } diff --git a/source/css/sass/mixins/_typography.scss b/source/css/sass/mixins/_typography.scss index 2ce7f8dc..13b115de 100644 --- a/source/css/sass/mixins/_typography.scss +++ b/source/css/sass/mixins/_typography.scss @@ -7,7 +7,12 @@ @import "spacing"; $_default-font-map: $font; +$_default-color-map: $color; +/* TODO: Consider a `strict` param that would use get-value-from-map rather than get-value-from-map-or-pass-through. + + This may allow better centralisation of the core bits of what happens when the key is not found in the map + */ @mixin font-size($size, $map: $_default-font-map) { $font-size: get-value-from-map-or-pass-through($map, $size); @if is-a-px-number($font-size) or is-a-rem-number($font-size) { @@ -34,7 +39,7 @@ $_default-font-map: $font; // FIX: Reinstate once baseline grid mixins in place //@mixin set-font-size-and-vertical-height($font-size, $vertical-height: $baselinegrid-space-small) { -@mixin set-font-size-and-vertical-height($font-size, $vertical-height: 24px, $map: $font) { +@mixin set-font-size-and-vertical-height($font-size, $vertical-height: 24px, $map: $_default-font-map) { @include font-size($font-size, $map); line-height: $vertical-height / $font-size; } @@ -44,8 +49,8 @@ $_default-font-map: $font; font-weight: 600; } -// FIX: Tie $line-height to a variable -@mixin heading-level-typography($level, /*$line-height: 24px, */$map: $font) { +// FIX: Tie $line-height to a variable once baseline grid mixins in place +@mixin heading-level-typography($level, $line-height: 24px, $map: $_default-font-map) { @if type_of($level) != "number" or not unitless($level) or $level < 1 or $level > 6 { @include _error("Invalid heading level `#{$level}` supplied"); } @else { @@ -54,7 +59,7 @@ $_default-font-map: $font; @if map_has_key($map, $key) { $font-size: map_get($map, $key); @include _heading-base-typography(); - @include set-font-size-and-vertical-height($font-size, 48px, $map); + @include set-font-size-and-vertical-height($font-size, $line-height, $map); font-size: var(--font-#{$key}); } @else { @include _error("Font map is missing the definition of h#{$level} font size"); @@ -63,16 +68,6 @@ $_default-font-map: $font; } } -@mixin h1-typography() { - @include _heading-base-typography(); - @include set-font-size-and-vertical-height(size-h1, 48px); -} - -@mixin h2-typography() { - @include _heading-base-typography(); - @include set-font-size-and-vertical-height(size-h2, 30px); -} - @mixin body-typography() { @include font-family(primary); @include set-font-size-and-vertical-height(size-base); @@ -107,7 +102,7 @@ $_default-font-map: $font; } } -@mixin label-content-typography($color: text-secondary, $uppercase: true, $map: $color) { +@mixin label-content-typography($color: text-secondary, $uppercase: true, $map: $_default-color-map) { $col: get-color($color, $map); @if $col != "[Not found]" { @include _label-typography($col, $uppercase); diff --git a/test/sass/mixins/typography.spec.scss b/test/sass/mixins/typography.spec.scss index 0f4effc7..2e16a847 100644 --- a/test/sass/mixins/typography.spec.scss +++ b/test/sass/mixins/typography.spec.scss @@ -7,13 +7,12 @@ @include assert() { - $fixture-map: ( + $fixture: ( some-size: 16px, ); - $fixture-line-height: 24px; @include output { - @include font-size(some-size, $fixture-map); + @include font-size(some-size, $fixture); } @include expect { @@ -214,7 +213,7 @@ @include describe("@mixin heading-level-typography") { - $fixture: ( + $fixture-map: ( size-h1: 10px, size-h2: 20px, size-h3: 30px, @@ -224,13 +223,14 @@ // invalid heading size in order to verify the mixin doesn't use it size-h7: 70px, ); + $fixture-line-height: 24px; @include it("sets the h1 font size when supplied level 1") { @include assert() { @include output { - @include heading-level-typography(1, $fixture); + @include heading-level-typography(1, $fixture-line-height, $fixture-map); } @include contains { @@ -247,7 +247,7 @@ @include assert() { @include output { - @include heading-level-typography(2, $fixture); + @include heading-level-typography(2, $fixture-line-height, $fixture-map); } @include contains { @@ -264,7 +264,7 @@ @include assert() { @include output { - @include heading-level-typography(3, $fixture); + @include heading-level-typography(3, $fixture-line-height, $fixture-map); } @include contains { @@ -281,7 +281,7 @@ @include assert() { @include output { - @include heading-level-typography(4, $fixture); + @include heading-level-typography(4, $fixture-line-height, $fixture-map); } @include contains { @@ -298,7 +298,7 @@ @include assert() { @include output { - @include heading-level-typography(5, $fixture); + @include heading-level-typography(5, $fixture-line-height, $fixture-map); } @include contains { @@ -315,7 +315,7 @@ @include assert() { @include output { - @include heading-level-typography(6, $fixture); + @include heading-level-typography(6, $fixture-line-height, $fixture-map); } @include contains { @@ -332,7 +332,7 @@ @include assert() { @include output { - @include heading-level-typography(7, $fixture); + @include heading-level-typography(7, $fixture-line-height, $fixture-map); } @include expect() { @@ -348,7 +348,7 @@ @include assert() { @include output { - @include heading-level-typography(1, (size-h2: 20px)); + @include heading-level-typography(1, $fixture-line-height, (size-h2: 20px)); } @include expect() { From 72a805112681dea99bc678ab8e81299e63975074 Mon Sep 17 00:00:00 2001 From: David Moulton Date: Tue, 22 Jan 2019 11:28:22 +0000 Subject: [PATCH 31/40] Update normalise to use function to get a map-defined color --- source/css/sass/_normalize.scss | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/source/css/sass/_normalize.scss b/source/css/sass/_normalize.scss index 7b73fd47..143d292e 100644 --- a/source/css/sass/_normalize.scss +++ b/source/css/sass/_normalize.scss @@ -2,6 +2,7 @@ @import "mixins/typography"; @import "variables/color"; @import "vendor/normalize.css/normalize"; +@import "functions/colors"; *, *:before, @@ -15,8 +16,8 @@ body { } body { - background-color: $color-background; - color: $color-text-normal; + background-color: get-color(background); + color: get-color(normal); text-rendering: optimizeLegibility; @include body-typography(); } @@ -56,7 +57,7 @@ p { } a { - color: $color-primary-normal; + color: get-color(primary-normal); text-decoration: none; } From 53081db2937cfd22702af6dcd8322dc38ff89296 Mon Sep 17 00:00:00 2001 From: David Moulton Date: Tue, 22 Jan 2019 11:37:55 +0000 Subject: [PATCH 32/40] Add function to get baseline grid measures from map --- source/css/sass/functions/_baselinegrid.scss | 6 ++++++ source/css/sass/mixins/_typography.scss | 7 +++---- 2 files changed, 9 insertions(+), 4 deletions(-) create mode 100644 source/css/sass/functions/_baselinegrid.scss diff --git a/source/css/sass/functions/_baselinegrid.scss b/source/css/sass/functions/_baselinegrid.scss new file mode 100644 index 00000000..4859b9bc --- /dev/null +++ b/source/css/sass/functions/_baselinegrid.scss @@ -0,0 +1,6 @@ +@import "../variables/baselinegrid"; +@import "maps"; + +@function get-baselinegrid-measure ($name, $map: $baselinegrid) { + @return get-value-from-map($map, $name); +} diff --git a/source/css/sass/mixins/_typography.scss b/source/css/sass/mixins/_typography.scss index 13b115de..0b0bd765 100644 --- a/source/css/sass/mixins/_typography.scss +++ b/source/css/sass/mixins/_typography.scss @@ -1,4 +1,5 @@ @import "../functions/maps"; +@import "../functions/baselinegrid"; @import "../functions/colors"; @import "../mixins/types"; @import "../variables/baselinegrid"; @@ -37,9 +38,7 @@ $_default-color-map: $color; } } -// FIX: Reinstate once baseline grid mixins in place -//@mixin set-font-size-and-vertical-height($font-size, $vertical-height: $baselinegrid-space-small) { -@mixin set-font-size-and-vertical-height($font-size, $vertical-height: 24px, $map: $_default-font-map) { +@mixin set-font-size-and-vertical-height($font-size, $vertical-height: get-baselinegrid-measure(small), $map: $_default-font-map) { @include font-size($font-size, $map); line-height: $vertical-height / $font-size; } @@ -50,7 +49,7 @@ $_default-color-map: $color; } // FIX: Tie $line-height to a variable once baseline grid mixins in place -@mixin heading-level-typography($level, $line-height: 24px, $map: $_default-font-map) { +@mixin heading-level-typography($level, $line-height: get-baselinegrid-measure(small), $map: $_default-font-map) { @if type_of($level) != "number" or not unitless($level) or $level < 1 or $level > 6 { @include _error("Invalid heading level `#{$level}` supplied"); } @else { From e0bd4f326c18d023dd37e9dc31a567182fd45f2c Mon Sep 17 00:00:00 2001 From: David Moulton Date: Tue, 22 Jan 2019 11:46:34 +0000 Subject: [PATCH 33/40] Remove obsolete comment --- source/css/sass/mixins/_typography.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/source/css/sass/mixins/_typography.scss b/source/css/sass/mixins/_typography.scss index 0b0bd765..126bfae7 100644 --- a/source/css/sass/mixins/_typography.scss +++ b/source/css/sass/mixins/_typography.scss @@ -48,7 +48,6 @@ $_default-color-map: $color; font-weight: 600; } -// FIX: Tie $line-height to a variable once baseline grid mixins in place @mixin heading-level-typography($level, $line-height: get-baselinegrid-measure(small), $map: $_default-font-map) { @if type_of($level) != "number" or not unitless($level) or $level < 1 or $level > 6 { @include _error("Invalid heading level `#{$level}` supplied"); From 30ab5ce1ce1f2f12708f9da98523b2de6ee7dee7 Mon Sep 17 00:00:00 2001 From: David Moulton Date: Tue, 22 Jan 2019 11:55:28 +0000 Subject: [PATCH 34/40] Add function to get breakpoint from the breakpoint map --- source/css/sass/functions/_breakpoints.scss | 6 ++++++ source/css/sass/mixins/_media-query.scss | 14 ++++++++------ 2 files changed, 14 insertions(+), 6 deletions(-) create mode 100644 source/css/sass/functions/_breakpoints.scss diff --git a/source/css/sass/functions/_breakpoints.scss b/source/css/sass/functions/_breakpoints.scss new file mode 100644 index 00000000..ac1172d3 --- /dev/null +++ b/source/css/sass/functions/_breakpoints.scss @@ -0,0 +1,6 @@ +@import "../variables/breakpoint"; +@import "maps"; + +@function get-breakpoint($name, $map: $breakpoint) { + @return get-value-from-map($map, $name); +} diff --git a/source/css/sass/mixins/_media-query.scss b/source/css/sass/mixins/_media-query.scss index a1dbc103..3f67ece7 100644 --- a/source/css/sass/mixins/_media-query.scss +++ b/source/css/sass/mixins/_media-query.scss @@ -1,14 +1,16 @@ @import "../variables/breakpoint"; @import "../variables/font"; +@import "../functions/breakpoints"; +@import "types"; -$mq-base-font-size: $font-size-base; +$mq-base-font-size: get-font-size(size-base); $mq-breakpoints: ( - x-small: $breakpoint-site-x_small, - small: $breakpoint-site-small, - medium: $breakpoint-site-medium, - wide: $breakpoint-site-wide, - x-wide: $breakpoint-site-x_wide, + x-small: get-breakpoint(site-x_small), + small: get-breakpoint(site-small), + medium: get-breakpoint(site-medium), + wide: get-breakpoint(site-wide), + x-wide: get-breakpoint(site-x_wide), ); @import "../vendor/sass-mq/_mq"; From 0e2e0177faea1c8c8ecce49f2fc141af25837255 Mon Sep 17 00:00:00 2001 From: David Moulton Date: Tue, 22 Jan 2019 12:19:12 +0000 Subject: [PATCH 35/40] Use updated config names --- package-lock.json | 6 +++--- package.json | 2 +- source/css/sass/mixins/_media-query.scss | 10 +++++----- source/css/sass/mixins/_typography.scss | 8 ++++---- 4 files changed, 13 insertions(+), 13 deletions(-) diff --git a/package-lock.json b/package-lock.json index 4d41c843..e4e20ac0 100644 --- a/package-lock.json +++ b/package-lock.json @@ -937,9 +937,9 @@ } }, "@libero/pattern-library-config-manager": { - "version": "0.0.7", - "resolved": "https://registry.npmjs.org/@libero/pattern-library-config-manager/-/pattern-library-config-manager-0.0.7.tgz", - "integrity": "sha512-v1GnXXEUetLPoUgHa/4qCxcjrf9g+LOGdiDdP9fnsvGa5pSKf+HqEyWAUJCx/J8HkhQ66oYVkab2endBnXnY4w==", + "version": "0.0.8", + "resolved": "https://registry.npmjs.org/@libero/pattern-library-config-manager/-/pattern-library-config-manager-0.0.8.tgz", + "integrity": "sha512-gmX+9dbqKmQU3mUVl1OVsSfIG0y0TYegCPj+3prKjmcpXvGzf8Aej7go4HWrs4nSjAdpWu32JqdciMyAcssdkQ==", "requires": { "chai": "^4.2.0", "chai-as-promised": "^7.1.1", diff --git a/package.json b/package.json index 0f8b82f3..a511d37f 100644 --- a/package.json +++ b/package.json @@ -39,6 +39,6 @@ "node": ">=10.12" }, "dependencies": { - "@libero/pattern-library-config-manager": "0.0.7" + "@libero/pattern-library-config-manager": "0.0.8" } } diff --git a/source/css/sass/mixins/_media-query.scss b/source/css/sass/mixins/_media-query.scss index 3f67ece7..cc6c1eb8 100644 --- a/source/css/sass/mixins/_media-query.scss +++ b/source/css/sass/mixins/_media-query.scss @@ -6,11 +6,11 @@ $mq-base-font-size: get-font-size(size-base); $mq-breakpoints: ( - x-small: get-breakpoint(site-x_small), - small: get-breakpoint(site-small), - medium: get-breakpoint(site-medium), - wide: get-breakpoint(site-wide), - x-wide: get-breakpoint(site-x_wide), + x-small: get-breakpoint(x_small), + small: get-breakpoint(small), + medium: get-breakpoint(medium), + wide: get-breakpoint(wide), + x-wide: get-breakpoint(x_wide), ); @import "../vendor/sass-mq/_mq"; diff --git a/source/css/sass/mixins/_typography.scss b/source/css/sass/mixins/_typography.scss index 126bfae7..a2b3e6e2 100644 --- a/source/css/sass/mixins/_typography.scss +++ b/source/css/sass/mixins/_typography.scss @@ -44,7 +44,7 @@ $_default-color-map: $color; } @mixin _heading-base-typography() { - @include font-family(secondary); + @include font-family(family-secondary); font-weight: 600; } @@ -67,13 +67,13 @@ $_default-color-map: $color; } @mixin body-typography() { - @include font-family(primary); + @include font-family(family-primary); @include set-font-size-and-vertical-height(size-base); font-weight: normal; } @mixin small-typography() { - @include font-family(primary); + @include font-family(family-primary); font-style: normal; @include set-font-size-and-vertical-height(11px); } @@ -91,7 +91,7 @@ $_default-color-map: $color; @mixin _label-typography($color, $uppercase: true) { color: $color; - @include font-family(secondary); + @include font-family(family-secondary); font-weight: normal; @include set-font-size-and-vertical-height(size-label); letter-spacing: #{letterspacing-label}; From 05cf864d2edf05d23d688fc83823b6cbb710bf89 Mon Sep 17 00:00:00 2001 From: David Moulton Date: Tue, 22 Jan 2019 12:45:57 +0000 Subject: [PATCH 36/40] Add tests for set-font-size-and-vertical-height --- source/css/sass/mixins/_typography.scss | 7 ++- test/sass/mixins/typography.spec.scss | 81 +++++++++++++++++++++++++ 2 files changed, 87 insertions(+), 1 deletion(-) diff --git a/source/css/sass/mixins/_typography.scss b/source/css/sass/mixins/_typography.scss index a2b3e6e2..9011afe5 100644 --- a/source/css/sass/mixins/_typography.scss +++ b/source/css/sass/mixins/_typography.scss @@ -40,7 +40,12 @@ $_default-color-map: $color; @mixin set-font-size-and-vertical-height($font-size, $vertical-height: get-baselinegrid-measure(small), $map: $_default-font-map) { @include font-size($font-size, $map); - line-height: $vertical-height / $font-size; + + @if map_has_key($map, $font-size) { + line-height: $vertical-height / map_get($map, $font-size); + } @else { + line-height: $vertical-height / $font-size; + } } @mixin _heading-base-typography() { diff --git a/test/sass/mixins/typography.spec.scss b/test/sass/mixins/typography.spec.scss index 2e16a847..d6664f1e 100644 --- a/test/sass/mixins/typography.spec.scss +++ b/test/sass/mixins/typography.spec.scss @@ -360,3 +360,84 @@ } } + +@include describe("@mixin set-font-size-and-vertical-height") { + + @include it("sets the font size when directly supplied") { + + @include assert() { + + @include output { + @include set-font-size-and-vertical-height(32px); + } + + @include contains { + font-size: 32px; + font-size: 2rem; + } + + } + + } + + @include it("sets the font size when supplied via the a map") { + + @include assert() { + + $fixture-map: (base-size: 16px); + $fixture-desired-height: 32px; + + @include output { + @include set-font-size-and-vertical-height(base-size, $fixture-desired-height, $fixture-map); + } + + @include contains { + font-size: 16px; + font-size: 1rem; + font-size: var(--font-base-size); + } + + } + + } + + @include it("correctly calculates the line height in order to obtain the supplied vertical height, taking into account the font size when supplied directly") { + + @include it("sets the font size when directly supplied") { + + @include assert() { + + @include output { + @include set-font-size-and-vertical-height(32px, 40px); + } + + @include contains { + line-height: 1.25; + } + + } + + } + + } + + @include it("correctly calculates the line height in order to obtain the supplied vertical height, taking into account the font size when supplied via a map") { + + @include assert() { + + $fixture-map: (base-size: 16px); + $fixture-desired-height: 32px; + + @include output { + @include set-font-size-and-vertical-height(base-size, $fixture-desired-height, $fixture-map); + } + + @include contains { + line-height: 2; + } + + } + + } + +} From d270ac88915eb36a2236d2ea051b1ae02ed61e4d Mon Sep 17 00:00:00 2001 From: David Moulton Date: Wed, 23 Jan 2019 16:17:23 +0000 Subject: [PATCH 37/40] Simplify, and add tests for, blg-spacing mixin --- source/css/sass/mixins/_spacing.scss | 41 +++--- test/sass/mixins/spacing.spec.scss | 184 +++++++++++++++++++++++++++ 2 files changed, 200 insertions(+), 25 deletions(-) diff --git a/source/css/sass/mixins/_spacing.scss b/source/css/sass/mixins/_spacing.scss index b02871a9..08588b6b 100644 --- a/source/css/sass/mixins/_spacing.scss +++ b/source/css/sass/mixins/_spacing.scss @@ -2,11 +2,14 @@ @import "sizes"; @import "types"; @import "../functions/validation"; +@import "../functions/baselinegrid"; @import "../mixins/media-query"; @import "../variables/baselinegrid"; @import "../variables/breakpoint"; @import "../variables/grid"; +$_default-baselinegrid-map: $baselinegrid; + @mixin _when-left-to-right { html[dir="ltr"] &:not([dir]), &[dir="ltr"] { @@ -189,33 +192,21 @@ } // blg stands for "baseline grid" +@mixin blg-spacing($dimension, $level, $type: "padding", $map: $_default-baselinegrid-map) { -@mixin blg-spacing($dimension, $level, $type: "padding") { - @if $type == "padding" { - @if $level == "extra-small" { - @include padding($baselinegrid-space-extra-small, $dimension); - } @else if $level == "small" { - @include padding($baselinegrid-space-small, $dimension); - } @else if $level == "smallish" { - @include padding($baselinegrid-space-smallish, $dimension); - } @else if $level == "medium" { - @include padding($baselinegrid-space-medium, $dimension); - } @else if $level == "large" { - @include padding($baselinegrid-space-large, $dimension); - } - } @else if $type == "margin" { - @if $level == "extra-small" { - @include margin($baselinegrid-space-extra-small, $dimension); - } @else if $level == "small" { - @include margin($baselinegrid-space-small, $dimension); - } @else if $level == "smallish" { - @include margin($baselinegrid-space-smallish, $dimension); - } @else if $level == "medium" { - @include margin($baselinegrid-space-medium, $dimension); - } @else if $level == "large" { - @include margin($baselinegrid-space-large, $dimension); - } + $baselinegrid-measure: get-baselinegrid-measure($level, $map); + @if $baselinegrid-measure == "[Not found]" { + @include _error("Expected supplied level `#{$level}` to be a baselinegrid map key"); } + + @if $type == "margin" { + @include margin($baselinegrid-measure, $dimension); + } @else if $type == "padding" { + @include padding($baselinegrid-measure, $dimension); + } @else { + @include _error("Supplied type was neither margin nor padding: got `#{$type}`"); + } + } @mixin blg-pad-top--small-to-medium { diff --git a/test/sass/mixins/spacing.spec.scss b/test/sass/mixins/spacing.spec.scss index 7f97d511..ab0249df 100644 --- a/test/sass/mixins/spacing.spec.scss +++ b/test/sass/mixins/spacing.spec.scss @@ -2523,3 +2523,187 @@ } } + +@include describe("@mixin blg-spacing") { + + $fixture-map: ( + space-extra_small: 16px, + space-small: 32px, + space-smallish: 48px, + space-medium: 64px, + space-large: 80px, + space-extra_large: 96px, + ); + $fixture-dimension: block-start; + $fixture-level: space-small; + $fixture-type: padding; + + $rem-number-by-level: ( + space-extra_small: 1rem, + space-small: 2rem, + space-smallish: 3rem, + space-medium: 4rem, + space-large: 5rem, + space-extra_large: 6rem, + ); + + @include it("errors if the type supplied is neither padding nor margin") { + + @include assert() { + + @include output { + @include blg-spacing($fixture-dimension, $fixture-level, neither-padding-nor-margin, $fixture-map); + } + + @include contains { + _error: "Supplied type was neither margin nor padding: got `neither-padding-nor-margin`"; + } + + } + + } + + @include it("errors if the level supplied is not a key in the map") { + + @include assert() { + + @include output { + @include blg-spacing($fixture-dimension, not-a-map-key, $fixture-type, $fixture-map); + } + + @include contains { + _error: "Expected supplied level `not-a-map-key` to be a baselinegrid map key"; + } + + } + + } + + @include it("sets padding-block-start correctly when given padding as the type and block-start as the dimension") { + + @include assert() { + @include output() { + @include blg-spacing(block-start, $fixture-level, padding, $fixture-map); + } + + @include contains() { + padding-block-start: map_get($rem-number-by-level, $fixture-level); + } + + } + + } + + @include it("sets margin-block-start correctly when given margin as the type and block-start as the dimension") { + + @include assert() { + + @include output { + @include blg-spacing(block-start, $fixture-level, margin, $fixture-map); + } + + @include contains { + margin-block-start: map_get($rem-number-by-level, $fixture-level); + } + + } + + } + + @include it("sets the spacing quantity as extra-small when supplied with the level extra-small") { + + @include assert() { + + @include output { + @include blg-spacing($fixture-dimension, space-extra-small, $fixture-type, $fixture-map); + } + + @include contains { + #{$fixture-type}-#{$fixture-dimension}: map_get($rem-number-by-level, space-extra-small); + } + + } + + } + + @include it("sets the spacing quantity as small when supplied with the level small") { + + @include assert() { + + @include output { + @include blg-spacing($fixture-dimension, space-small, $fixture-type, $fixture-map); + } + + @include contains { + #{$fixture-type}-#{$fixture-dimension}: map_get($rem-number-by-level, space-small); + } + + } + + } + + @include it("sets the spacing quantity as smallish when supplied with the level smallish") { + + @include assert() { + + @include output { + @include blg-spacing($fixture-dimension, space-smallish, $fixture-type, $fixture-map); + } + + @include contains { + #{$fixture-type}-#{$fixture-dimension}: map_get($rem-number-by-level, space-smallish); + } + + } + + } + + @include it("sets the spacing quantity as medium when supplied with the level medium") { + + @include assert() { + + @include output { + @include blg-spacing($fixture-dimension, space-medium, $fixture-type, $fixture-map); + } + + @include contains { + #{$fixture-type}-#{$fixture-dimension}: map_get($rem-number-by-level, space-medium); + } + + } + + } + + @include it("sets the spacing quantity as large when supplied with the level large") { + + @include assert() { + + @include output { + @include blg-spacing($fixture-dimension, space-large, $fixture-type, $fixture-map); + } + + @include contains { + #{$fixture-type}-#{$fixture-dimension}: map_get($rem-number-by-level, space-large); + } + + } + + } + + @include it("sets the spacing quantity as extra large when supplied with the level extra large") { + + @include assert() { + + @include output { + @include blg-spacing($fixture-dimension, space-extra-large, $fixture-type, $fixture-map); + } + + @include contains { + #{$fixture-type}-#{$fixture-dimension}: map_get($rem-number-by-level, space-extra-large); + } + + } + + } + +} From fc5efca6a4168bc184090d70a8a244d95643550f Mon Sep 17 00:00:00 2001 From: David Moulton Date: Wed, 23 Jan 2019 16:32:44 +0000 Subject: [PATCH 38/40] Add accessor for grid map --- source/css/sass/functions/_grid.scss | 6 ++++++ source/css/sass/mixins/_spacing.scss | 3 ++- 2 files changed, 8 insertions(+), 1 deletion(-) create mode 100644 source/css/sass/functions/_grid.scss diff --git a/source/css/sass/functions/_grid.scss b/source/css/sass/functions/_grid.scss new file mode 100644 index 00000000..3a95633d --- /dev/null +++ b/source/css/sass/functions/_grid.scss @@ -0,0 +1,6 @@ +@import "../variables/grid"; +@import "maps"; + +@function get-grid-measure ($name, $map: $grid) { + @return get-value-from-map($map, $name); +} diff --git a/source/css/sass/mixins/_spacing.scss b/source/css/sass/mixins/_spacing.scss index 08588b6b..8b05a1d2 100644 --- a/source/css/sass/mixins/_spacing.scss +++ b/source/css/sass/mixins/_spacing.scss @@ -3,6 +3,7 @@ @import "types"; @import "../functions/validation"; @import "../functions/baselinegrid"; +@import "../functions/grid"; @import "../mixins/media-query"; @import "../variables/baselinegrid"; @import "../variables/breakpoint"; @@ -328,7 +329,7 @@ $_default-baselinegrid-map: $baselinegrid; @mixin wrapper() { box-sizing: content-box; - @include max-inline-size($grid-max_width); + @include max-inline-size(get-grid-measure(max_width)); margin: auto; @include padding(7%, "inline"); From 589200f0211a53f1909237a608ce6ede680d258d Mon Sep 17 00:00:00 2001 From: David Moulton Date: Wed, 23 Jan 2019 16:35:10 +0000 Subject: [PATCH 39/40] Remove parentheses from spacing mixin signatures that don't take params --- source/css/sass/mixins/_spacing.scss | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/source/css/sass/mixins/_spacing.scss b/source/css/sass/mixins/_spacing.scss index 8b05a1d2..1d818287 100644 --- a/source/css/sass/mixins/_spacing.scss +++ b/source/css/sass/mixins/_spacing.scss @@ -280,54 +280,54 @@ $_default-baselinegrid-map: $baselinegrid; } -@mixin blg-column-container() { +@mixin blg-column-container { @include blg-margin-bottom--medium-to-large(); } -@mixin h1-spacing() { +@mixin h1-spacing { margin: 0; } -@mixin h2-spacing() { +@mixin h2-spacing { margin: 0; @include padding(21px, "block-end"); @include padding(21px, "block-start"); } -@mixin h3-spacing() { +@mixin h3-spacing { margin: 0; @include blg-spacing("block-start", "extra-small"); @include blg-spacing("block-end", "extra-small"); } -@mixin h4-spacing() { +@mixin h4-spacing { margin: 0; @include blg-spacing("block-start", "extra-small"); @include blg-spacing("block-end", "extra-small"); } -@mixin h5-spacing() { +@mixin h5-spacing { margin: 0; @include blg-spacing("block-start", "extra-small"); @include blg-spacing("block-end", "extra-small"); } -@mixin h6-spacing() { +@mixin h6-spacing { margin: 0; @include padding(10px, "block-start"); @include padding(14px, "block-end"); } -@mixin body-spacing() { +@mixin body-spacing { margin: 0; @include blg-spacing("block-end", "small", "margin"); } -@mixin small-spacing() { +@mixin small-spacing { @include blg-spacing("block-end", "small"); } -@mixin wrapper() { +@mixin wrapper { box-sizing: content-box; @include max-inline-size(get-grid-measure(max_width)); margin: auto; From a9a6b965e1db5c0d9dc34af59ffe26d4a1bc29aa Mon Sep 17 00:00:00 2001 From: David Moulton Date: Wed, 20 Mar 2019 15:04:09 +0000 Subject: [PATCH 40/40] Fix sass import loop --- source/css/sass/functions/_types.scss | 1 - source/css/sass/mixins/_types.scss | 3 --- 2 files changed, 4 deletions(-) diff --git a/source/css/sass/functions/_types.scss b/source/css/sass/functions/_types.scss index 097c8b38..85d3acf5 100644 --- a/source/css/sass/functions/_types.scss +++ b/source/css/sass/functions/_types.scss @@ -1,4 +1,3 @@ -@import "../mixins/types"; @import "../variables/font"; @function get-font-size($designation) { diff --git a/source/css/sass/mixins/_types.scss b/source/css/sass/mixins/_types.scss index 333b4c83..c2fe0564 100644 --- a/source/css/sass/mixins/_types.scss +++ b/source/css/sass/mixins/_types.scss @@ -2,9 +2,6 @@ @import "../variables/font"; @import "../vendor/sass-rem/rem"; -$rem-baseline: get-font-size(size-base); -$rem-fallback: true; - // Overridden to apply https://github.com/pierreburel/sass-rem/pull/12 @mixin rem($properties, $values...) {