From 09929eda38233de85bbbf9bd04cc38dbf847e759 Mon Sep 17 00:00:00 2001 From: Toni Fisler Date: Tue, 27 Mar 2018 14:56:37 +0200 Subject: [PATCH 1/6] remove options for font icons --- generators/app/index.js | 15 +++------------ 1 file changed, 3 insertions(+), 12 deletions(-) diff --git a/generators/app/index.js b/generators/app/index.js index 9efbc0a..14ab706 100644 --- a/generators/app/index.js +++ b/generators/app/index.js @@ -68,18 +68,6 @@ module.exports = class extends Generator { value: 'changelog', checked: true }] - }, { - type: 'list', - name: 'icons', - message: 'How should your icons be generated?', - default: 'svg', - choices: [{ - name: 'I want the SVG icons goodness', - value: 'svg' - }, { - name: 'Gimme good old font icons.', - value: 'font' - }] }, { type: 'input', name: 'src', @@ -109,6 +97,9 @@ module.exports = class extends Generator { answers.humans = hasOption('humans'); answers.changelog = hasOption('changelog'); + // Store 'svg' for icons, maybe we'll add a FontAwesome option later. + answers.icon = 'svg'; + // Make sure we have a "/" at the end of the paths if (answers.src.slice(-1) !== '/') { answers.src += '/'; From 81ec517dab3128c5e79360aac88b2d6f72c247b6 Mon Sep 17 00:00:00 2001 From: Toni Fisler Date: Tue, 27 Mar 2018 15:25:16 +0200 Subject: [PATCH 2/6] improve variant generator for new Toolbox --- generators/variant/index.js | 20 ++++++++++++++------ 1 file changed, 14 insertions(+), 6 deletions(-) diff --git a/generators/variant/index.js b/generators/variant/index.js index 0e06ee2..2ae806b 100644 --- a/generators/variant/index.js +++ b/generators/variant/index.js @@ -78,21 +78,29 @@ module.exports = class extends Generator { } async writing() { - const variant = this.props.variant.toLowerCase(); + const variant = { + name: slug(this.props.variant, { lower: true }), + title: this.props.variant, + notes: `The ${this.props.variant} variant.\n`, + background: '', + wrapper: '', + }; - const componentPath = `${this.promptValues.src}components/${this.props.component.category}/${this.props.component.component}/`; + const variantPath = `${this.promptValues.src}components/${this.props.component.category}/${this.props.component.component}/${this.props.component.component}`; // Generate Twig file this.fs.write( - this.destinationPath(`${componentPath}/${this.props.component.component}-${variant}.twig`), - `\n` + this.destinationPath(`${variantPath}-${variant.name}.twig`), + `\n` ); // Generate Config in YAML file - const config = yaml.readSync(this.destinationPath(`${componentPath}/${this.props.component.component}.yml`)); + const configPath = this.destinationPath(`${variantPath}.yml`); + const config = yaml.readSync(configPath); config.variants = config.variants ? [...config.variants, variant] : [variant]; - yaml.write(this.destinationPath(`${componentPath}/${this.props.component.component}.yml`), config); + + yaml.write(configPath, config); } }; From 5b121593d97860010078a2edc72319ff303d806e Mon Sep 17 00:00:00 2001 From: Toni Fisler Date: Tue, 27 Mar 2018 15:29:24 +0200 Subject: [PATCH 3/6] log update of yml variant file --- generators/variant/index.js | 1 + 1 file changed, 1 insertion(+) diff --git a/generators/variant/index.js b/generators/variant/index.js index 2ae806b..7f8a151 100644 --- a/generators/variant/index.js +++ b/generators/variant/index.js @@ -101,6 +101,7 @@ module.exports = class extends Generator { config.variants = config.variants ? [...config.variants, variant] : [variant]; yaml.write(configPath, config); + this.log(chalk.yellow(` update `) + `${variantPath}.yml`); } }; From d86d02363457993c89a87e9288ff39dfed1095aa Mon Sep 17 00:00:00 2001 From: Toni Fisler Date: Tue, 27 Mar 2018 16:04:37 +0200 Subject: [PATCH 4/6] fix generate command --- generators/generate/index.js | 27 +++++++++++++++++++-------- 1 file changed, 19 insertions(+), 8 deletions(-) diff --git a/generators/generate/index.js b/generators/generate/index.js index f5801ac..1db54a7 100644 --- a/generators/generate/index.js +++ b/generators/generate/index.js @@ -4,6 +4,7 @@ const chalk = require('chalk'); const slug = require('slug'); const pathExists = require('path-exists'); const fs = require('fs'); +const yaml = require('node-yaml'); module.exports = class extends Generator { constructor(args, opts) { @@ -55,7 +56,8 @@ module.exports = class extends Generator { async writing() { if (this.props.type !== 'doc') { - const componentPath = `${this.promptValues.src}components/${this.props.type}/${this.props.slug}/`; + const componentPath = `${this.promptValues.src}components/${this.props.type}/${this.props.slug}`; + const filePath = `${componentPath}/${this.props.slug}`; // Kill process if the component is already created if (pathExists.sync(this.destinationPath(componentPath))) { @@ -64,21 +66,30 @@ module.exports = class extends Generator { } // Generate Twig file - this.fs.write( - this.destinationPath(`${componentPath}/${this.props.slug}.twig`), + await this.fs.write( + this.destinationPath(`${filePath}.twig`), `\n` ); // Generate YAML file - this.fs.write( - this.destinationPath(`${componentPath}/${this.props.slug}.yml`), - `title: ${this.props.name}\nname: ${this.props.slug}` - ); + const config = { + name: this.props.slug, + title: this.props.name, + notes: `Describe the ${this.props.slug} component here.\n`, + wrapper: '', + background: '', + }; + + if (!fs.existsSync(componentPath)) { + await fs.mkdirSync(componentPath); + } + await yaml.write(this.destinationPath(`${filePath}.yml`), config); + this.log(chalk.green(` create`) + ` ${filePath}.yml`); if (this.props.type !== 'pages') { // Generate SCSS file this.fs.write( - this.destinationPath(`${componentPath}/${this.props.slug}.scss`), + this.destinationPath(`${filePath}.scss`), '@charset \'utf-8\';\n' ); From 7cdb18a2a4c4fa6f0c7e4c829f6cdd4230f460ee Mon Sep 17 00:00:00 2001 From: Toni Fisler Date: Wed, 20 Jun 2018 16:21:01 +0200 Subject: [PATCH 5/6] use last versions of bootstrap and toolbox-utils by default --- generators/app/templates/_packages.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/generators/app/templates/_packages.json b/generators/app/templates/_packages.json index 101d014..9552a70 100644 --- a/generators/app/templates/_packages.json +++ b/generators/app/templates/_packages.json @@ -1,6 +1,6 @@ { "base": [ - "bootstrap@^4.0.0", - "toolbox-utils@latest" + "bootstrap", + "toolbox-utils" ] } From e5ed05ec1eb25acbf9ce8630583fd496955a4537 Mon Sep 17 00:00:00 2001 From: Toni Fisler Date: Wed, 20 Jun 2018 18:01:30 +0200 Subject: [PATCH 6/6] start working on some improvements --- generators/app/index.js | 4 +++ generators/app/templates/_package.json | 27 ++++++++++++++++--- .../app/templates/config/_bootstrap.scss | 2 +- generators/generate/index.js | 1 + generators/variant/index.js | 10 ++++--- 5 files changed, 35 insertions(+), 9 deletions(-) diff --git a/generators/app/index.js b/generators/app/index.js index be44a5c..c19d087 100644 --- a/generators/app/index.js +++ b/generators/app/index.js @@ -220,6 +220,10 @@ module.exports = class extends Generator { fromSrcToTop: this.props.fromSrcToTop } ); + const that = this; + curl.request({url: 'https://raw.githubusercontent.com/twbs/bootstrap/v4-dev/scss/_variables.scss'}, function (err, data) { + that.fs.write(that.destinationPath(`${that.props.src}config/bootstrap-variables.scss`), data); + }); } this.fs.write(this.destinationPath(`${this.props.src}config/styleguide.scss`), "@charset 'utf-8';\n\n@import 'variables';\n"); diff --git a/generators/app/templates/_package.json b/generators/app/templates/_package.json index ea0bce0..6ddecf2 100644 --- a/generators/app/templates/_package.json +++ b/generators/app/templates/_package.json @@ -37,9 +37,14 @@ "<%= assets %>config/bootstrap-variables.scss" ], "plugins": [ - "stylelint-order" + "stylelint-order", + "stylelint-a11y", + "stylelint-declaration-block-no-ignored-properties", + "stylelint-high-performance-animation", + "stylelint-scss", + "stylelint-declaration-strict-value" ], - "extends": "stylelint-config-standard", + "extends": "stylelint-config-recommended-scss", "rules": { "at-rule-no-vendor-prefix": true, "media-feature-name-no-vendor-prefix": true, @@ -47,6 +52,15 @@ "selector-no-vendor-prefix": true, "value-no-vendor-prefix": true, "selector-pseudo-element-colon-notation": "single", + "plugin/no-low-performance-animation-properties": true, + "plugin/declaration-block-no-ignored-properties": true, + "scale-unlimited/declaration-strict-value": [ + ["/color/", "fill", "stroke", "font-size"], { + "ignoreKeywords": { + "": ["currentColor", "transparent", "inherit"], + "font-size": ["currentColor", "inherit"] + } + }], "order/order": [ "custom-properties", "dollar-variables", @@ -57,7 +71,7 @@ "order/properties-order": [ "content", "display", - "flex", + "/flex/", "position", "top", "right", @@ -78,7 +92,12 @@ "color", "transform", "transition" - ] + ], + "a11y/media-prefers-reduced-motion": [true, { "severity": "warning" }], + "a11y/no-outline-none": [true, { "severity": "warning" }], + "a11y/font-size-is-readable": [true, { "severity": "warning" }], + "a11y/no-obsolete-element": [true, { "severity": "warning" }], + "a11y/no-text-align-justify": [true, { "severity": "warning" }] } } } diff --git a/generators/app/templates/config/_bootstrap.scss b/generators/app/templates/config/_bootstrap.scss index b44625c..5817f97 100755 --- a/generators/app/templates/config/_bootstrap.scss +++ b/generators/app/templates/config/_bootstrap.scss @@ -1,5 +1,5 @@ /*! - * Bootstrap v4.0.0 (https://getbootstrap.com) + * Bootstrap v4.1.1 (https://getbootstrap.com/) * Copyright 2011-2018 The Bootstrap Authors * Copyright 2011-2018 Twitter, Inc. * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) diff --git a/generators/generate/index.js b/generators/generate/index.js index 432b424..d0b0e91 100644 --- a/generators/generate/index.js +++ b/generators/generate/index.js @@ -4,6 +4,7 @@ const chalk = require('chalk'); const pathExists = require('path-exists'); const fs = require('fs'); const yaml = require('node-yaml'); +const slug = require('slug'); const checkUpdate = require('../check-update'); diff --git a/generators/variant/index.js b/generators/variant/index.js index 2911399..8e5cdd1 100644 --- a/generators/variant/index.js +++ b/generators/variant/index.js @@ -5,6 +5,7 @@ const pathExists = require('path-exists'); const fs = require('fs'); const autocomplete = require('inquirer-autocomplete-prompt'); const yaml = require('node-yaml'); +const slug = require('slug'); const checkUpdate = require('../check-update'); @@ -82,10 +83,11 @@ module.exports = class extends Generator { } async writing() { + const slugName = slug(this.props.variant, {lower: true}); const variant = { - name: slug(this.props.variant, { lower: true }), + name: slugName, title: this.props.variant, - notes: `\n`, + notes: `Describe the ${slugName} variant here.\n`, background: '', wrapper: '', }; @@ -102,8 +104,8 @@ module.exports = class extends Generator { const configPath = this.destinationPath(`${variantPath}.yml`); const config = yaml.readSync(configPath); - config.variants = config.variants ? [...config.variants, variantObject] : [variantObject]; - yaml.write(this.destinationPath(`${componentPath}/${this.props.component.component}.yml`), config); + config.variants = config.variants ? [...config.variants, variant] : [variant]; + yaml.write(this.destinationPath(configPath), config); } };