@madgex/design-system 1.24.2 → 1.26.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@madgex/design-system",
-  "version": "1.24.2",
+  "version": "1.26.0",
   "scripts": {
     "clean": "rimraf dist public tokens/build",
     "commit": "commit",
@@ -21,60 +21,58 @@
     "url": "https://github.com/madgex/madgex-design-system"
   },
   "dependencies": {
+    "css-loader": "^3.2.0",
+    "mini-css-extract-plugin": "^0.8.0",
+    "ncp": "^2.0.0",
     "node-sass": "^4.12.0",
-    "style-dictionary": "^2.8.1",
+    "postcss": "^7.0.18",
+    "postcss-cli": "^6.1.3",
+    "postcss-loader": "^3.0.0",
+    "sass-loader": "^7.3.1",
+    "style-dictionary": "^2.8.2",
+    "style-loader": "^0.23.1",
     "svgxuse": "^1.2.6"
   },
   "devDependencies": {
-    "@babel/core": "^7.5.5",
-    "@babel/plugin-transform-runtime": "^7.5.5",
-    "@babel/preset-env": "^7.5.5",
-    "@babel/runtime": "^7.5.5",
-    "@commitlint/cli": "^8.1.0",
-    "@commitlint/config-conventional": "^8.1.0",
-    "@commitlint/prompt-cli": "^8.1.0",
+    "@babel/core": "^7.6.4",
+    "@babel/plugin-transform-runtime": "^7.6.2",
+    "@babel/preset-env": "^7.6.3",
+    "@babel/runtime": "^7.6.3",
+    "@commitlint/cli": "^8.2.0",
+    "@commitlint/config-conventional": "^8.2.0",
+    "@commitlint/prompt-cli": "^8.2.0",
     "@frctl/fractal": "^1.2.0",
     "@frctl/mandelbrot": "^1.2.1",
     "@frctl/nunjucks": "^2.0.1",
     "@madgex/eslint-config-madgex": "^1.2.0",
-    "autoprefixer": "^9.6.1",
+    "autoprefixer": "^9.6.5",
     "babel-jest": "^24.9.0",
     "babel-loader": "^8.0.6",
     "commitizen": "^3.1.2",
-    "concurrently": "^4.1.1",
-    "core-js": "^3.1.4",
-    "css-loader": "^3.1.0",
+    "concurrently": "^4.1.2",
+    "core-js": "^3.3.2",
     "cssnano": "^4.1.10",
     "cz-conventional-changelog": "^2.1.0",
-    "del": "^5.0.0",
-    "file-loader": "^4.1.0",
+    "del": "^5.1.0",
+    "file-loader": "^4.2.0",
     "flat": "^4.1.0",
-    "glob": "^7.1.4",
     "gulp": "^4.0.2",
-    "gulp-autoprefixer": "^7.0.0",
-    "gulp-rename": "^1.4.0",
-    "gulp-sass": "^4.0.2",
-    "gulp-svgmin": "^2.2.0",
-    "gulp-svgstore": "^7.0.1",
-    "gulp-tap": "^1.0.1",
-    "husky": "^3.0.2",
+    "husky": "^3.0.9",
     "jest": "^24.9.0",
     "jsdom": "^15.2.0",
-    "lint-staged": "^9.2.1",
+    "link-module-alias": "^1.2.0",
+    "lint-staged": "^9.4.2",
     "mini-css-extract-plugin": "^0.8.0",
-    "postcss": "^7.0.17",
-    "postcss-cli": "^6.1.3",
-    "postcss-loader": "^3.0.0",
-    "rimraf": "^2.6.3",
-    "sass-loader": "^7.1.0",
-    "semantic-release": "^15.13.19",
-    "style-loader": "^0.23.1",
+    "node-sass": "^4.12.0",
+    "rimraf": "^2.7.1",
+    "semantic-release": "^15.13.24",
     "svg-sprite-loader": "^4.1.6",
     "svgo": "^1.3.0",
     "svgo-loader": "^2.2.1",
-    "webpack": "^4.39.0",
-    "webpack-cli": "^3.3.6",
-    "webpack-dev-server": "^3.7.2",
+    "svgstore": "^3.0.0-2",
+    "webpack": "^4.41.2",
+    "webpack-cli": "^3.3.9",
+    "webpack-dev-server": "^3.8.2",
     "webpack-stream": "^5.2.1"
   },
   "config": {

package/src/components/pagination/README.md

@@ -0,0 +1,20 @@
+## Parameters
+
+- `name`: name of the component, used for accessibility purpose, should be descriptive (i.e. lister pagination)
+- `classes`: add extra CSS classes to the component
+- `hideIcons`: hide caret icons
+- `prevLabel`: label of the previous link
+- `prevUrl`: url of the previous link
+- `prevVisHiddenLabel`: hidden label for accessibility purpose
+- `prevExtraLabel`: extra label of the previous link (i.e. title of the page)
+- `nextLabel`: label of the next link
+- `nextUrl`: url of the next link
+- `nextVisHiddenLabel`: hidden label for accessibility purpose
+- `nextExtraLabel`: extra label of the next link (i.e. title of the page)
+- `backToLabel`: label of the "back to" link
+- `backToUrl`: url of the "back to" link
+
+
+## Accessibility
+
+use the hidden labels to give more information about the links, i.e. adding "job" to the Previous link, so that the screen reader will read: "Previous job"

package/src/components/pagination/_macro.njk

@@ -0,0 +1,3 @@
+{% macro MdsPagination(params) %}
+    {%- include "./_template.njk" -%}
+{% endmacro %}

package/src/components/pagination/_template.njk

@@ -0,0 +1,49 @@
+{% from "../icons/_macro.njk" import MdsIcon %}
+
+<nav aria-label="{{ params.name }}">
+  <ul class="mds-pagination mds-text-align-right mds-clearfix{% if params.classes %} {{params.classes}}{% endif %}">
+    {% if params.backToLabel and params.backToUrl -%}
+      <li class="mds-float-left">
+        <a href="{{ params.backToUrl }}" class="mds-pagination__link mds-pagination__link--back" aria-label="{{- params.backToLabel -}}">
+          {% if not params.hideIcons -%}
+            {{ MdsIcon({
+              iconName: 'chevron-left',
+              classes: 'mds-icon--before'
+            }) -}}
+          {%- endif %}
+          {{ params.backToLabel }}
+        </a>
+      </li>
+    {%- endif %}
+    {% if params.prevLabel and params.prevUrl -%}
+      <li class="mds-float-left">
+        <a href="{{ params.prevUrl }}" class="mds-pagination__link mds-pagination__link--background" aria-label="{{ params.prevLabel }} {{ params.prevVisHiddenLabel }} - {{ params.prevExtraLabel | truncate(40, false) }}">
+          {% if not params.hideIcons -%}
+            {{ MdsIcon({
+              iconName: 'chevron-left',
+              classes: 'mds-icon--before'
+            }) }}
+          {%- endif -%}
+          <span>{{- params.prevLabel -}}</span>
+          {%- if params.prevVisHiddenLabel -%}<span class="mds-visually-hidden">{{- params.prevVisHiddenLabel -}}</span>{%- endif -%}
+          {%- if params.prevExtraLabel -%}<strong class="mds-pagination__extra-label mds-padding-left-b3">{{ params.prevExtraLabel | truncate(40, false) }}</strong>{%- endif %}
+        </a>
+      </li>
+    {%- endif %}
+    {% if params.nextLabel and params.nextUrl -%}
+      <li>
+        <a href="{{ params.nextUrl }}" class="mds-pagination__link mds-pagination__link--background" aria-label="{{ params.nextLabel }} {{ params.nextVisHiddenLabel }} - {{ params.nextExtraLabel | truncate(40, false) }}">
+            {%- if params.nextExtraLabel -%}<strong class="mds-pagination__extra-label mds-margin-right-b3">{{ params.nextExtraLabel | truncate(40, false) }}</strong>{%- endif -%}
+            <span>{{- params.nextLabel -}}</span>
+            {%- if params.nextVisHiddenLabel -%}<span class="mds-visually-hidden">{{- params.nextVisHiddenLabel -}}</span>{%- endif -%}
+            {% if not params.hideIcons -%}
+              {{ MdsIcon({
+                iconName: 'chevron-right',
+                classes: 'mds-icon--after'
+              }) }}
+            {%- endif %}
+        </a>
+      </li>
+    {%- endif %}
+  </ul>
+</nav>

package/src/components/pagination/pagination.config.js

@@ -0,0 +1,48 @@
+module.exports = {
+  title: 'Pagination',
+  label: 'Pagination',
+  context: {
+    name: 'Job details pagination',
+    nextLabel: 'Next',
+    nextUrl: '/next-page',
+  },
+  variants: [
+    {
+      name: 'Job Detail',
+      context: {
+        prevLabel: 'Previous',
+        prevUrl: '/prev-page',
+        nextLabel: 'Next',
+        nextUrl: '/next-page',
+      },
+    },
+    {
+      name: 'Job Detail',
+      context: {
+        classes: 'mds-font-long-primer',
+        nextLabel: 'Next',
+        nextUrl: '/next-page',
+        nextVisHiddenLabel: 'Job',
+        nextExtraLabel: 'Customer Service, Special-Agent Assistant Part-Time',
+        backToLabel: 'Results',
+        backToUrl: '/results/',
+      },
+    },
+    {
+      name: 'Job Detail',
+      context: {
+        classes: 'mds-font-long-primer',
+        prevLabel: 'Previous',
+        prevUrl: '/prev-page',
+        prevVisHiddenLabel: 'Job',
+        prevExtraLabel: 'Part Time Sales Assistant',
+        nextLabel: 'Next',
+        nextUrl: '/next-page',
+        nextVisHiddenLabel: 'Job',
+        nextExtraLabel: 'Customer Service, Special-Agent Assistant Part-Time',
+        backToLabel: 'Results',
+        backToUrl: '/results/',
+      },
+    },
+  ],
+};

package/src/components/pagination/pagination.njk

@@ -0,0 +1,17 @@
+{% from "./pagination/_macro.njk" import MdsPagination %}
+
+{{ MdsPagination({
+  name: name,
+  classes: classes,
+  hideIcons: hideIcons,
+  prevLabel: prevLabel,
+  prevUrl: prevUrl,
+  prevVisHiddenLabel: prevVisHiddenLabel,
+  prevExtraLabel: prevExtraLabel,
+  nextLabel: nextLabel,
+  nextUrl: nextUrl,
+  nextVisHiddenLabel: nextVisHiddenLabel,
+  nextExtraLabel: nextExtraLabel,
+  backToLabel: backToLabel,
+  backToUrl: backToUrl
+}) }}

package/src/components/pagination/pagination.scss

@@ -0,0 +1,35 @@
+.mds-pagination {
+  text-align: right;
+  width: 100%;
+  @extend .mds-surface;
+}
+
+.mds-pagination__link{
+  display: inline-block;
+  padding: $mds-size-baseline * 3;
+
+  &--back{
+    @include mq($from: $mds-size-breakpoint-sm) {
+      border-right: $mds-size-border-width solid $mds-color-border;
+    }
+  }
+
+  &--background{
+    &:hover,
+    &:focus {
+      background-color: $mds-color-neutral-lightest;
+      & > span,
+      & > strong{
+        text-decoration: underline;
+      }
+    }
+  }
+}
+
+.mds-pagination__extra-label{
+  display: none;
+
+  @include mq($from: $mds-size-breakpoint-lg) {
+    display: inline;
+  }
+}

package/src/scss/components/__index.scss

@@ -5,4 +5,5 @@
 @import '../../components/tabs/tabs';
 @import '../../components/input/input';
 @import '../../components/textarea/textarea';
-@import '../../components/accordion/accordion';
+@import '../../components/accordion/accordion';
+@import '../../components/pagination/pagination';

package/src/scss/helpers/__index.scss

@@ -5,4 +5,4 @@
 @import 'display';
 @import 'borders';
 @import 'edited-text';
-@import 'width';
+@import 'width';

package/src/scss/index.scss

@@ -1,3 +1,3 @@
-@import '../../dist/_tokens/scss/tokens';
+@import '~../../dist/_tokens/scss/tokens';
 
 @import './import.scss';

package/src/tokens/_config.js

@@ -1,10 +1,12 @@
+const path = require('path');
+
 const config = {
-  source: ['src/tokens/**/*.json'],
+  source: [path.resolve(__dirname, '../tokens/*.json'), path.resolve(__dirname, '../tokens/overrides/override.json')],
   platforms: {
     'css-variables': {
       // transformGroup: 'css',
       transforms: ['attribute/cti', 'name/cti/kebab', 'time/seconds', 'content/icon', 'color/css'],
-      buildPath: 'dist/_tokens/css/',
+      buildPath: `${path.resolve(__dirname, '../../dist/_tokens/css/')}/`,
       prefix: 'mds',
       files: [
         {
@@ -15,9 +17,9 @@ const config = {
     },
     'scss-variables': {
       // transformGroup: 'web',
-      // transforms: ['size/px'],
+      // transforms: ['size/px']
       transforms: ['attribute/cti', 'name/cti/kebab', 'color/css', 'color/scssColorFunctions'],
-      buildPath: 'dist/_tokens/scss/',
+      buildPath: `${path.resolve(__dirname, '../../dist/_tokens/scss/')}/`,
       prefix: 'mds',
       files: [
         {
@@ -29,7 +31,7 @@ const config = {
     },
     sketch: {
       transformGroup: 'web',
-      buildPath: 'dist/_tokens/sketch/',
+      buildPath: `${path.resolve(__dirname, '../../dist/_tokens/sketch/')}/`,
       prefix: 'mds',
       files: [
         {
@@ -66,7 +68,7 @@ const config = {
     // },
     'js-module': {
       transformGroup: 'js',
-      buildPath: 'dist/_tokens/js/',
+      buildPath: `${path.resolve(__dirname, '../../dist/_tokens/js/')}/`,
       prefix: 'mds',
       files: [
         {

package/src/tokens/overrides/override.json

@@ -0,0 +1 @@
+{}

package/src/tokens/size.json

@@ -57,4 +57,4 @@
       "lg": {"value" : "32px"}
     }
   }
-}
+}

package/tasks/css.js

@@ -0,0 +1,97 @@
+const path = require('path');
+const del = require('del');
+const webpack = require('webpack');
+const autoprefixer = require('autoprefixer');
+const cssnano = require('cssnano');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+
+async function runWebpack(localSrcFilePath) {
+  return new Promise((resolve, reject) => {
+    webpack(
+      {
+        entry: `${localSrcFilePath}/index.scss`,
+        output: {
+          path: path.resolve(__dirname, '../dist/css'),
+        },
+        plugins: [
+          new MiniCssExtractPlugin({
+            filename: `index.css`,
+          }),
+        ],
+        module: {
+          rules: [
+            {
+              test: /\.(sa|sc|c)ss$/,
+              use: [
+                {
+                  loader: MiniCssExtractPlugin.loader,
+                  options: {
+                    publicPath: path.resolve(__dirname, '../dist/css'),
+                  },
+                },
+                {
+                  loader: 'css-loader',
+                },
+                {
+                  loader: 'postcss-loader',
+                  options: {
+                    plugins: [autoprefixer(), cssnano()],
+                  },
+                },
+                {
+                  loader: 'sass-loader',
+                  options: {
+                    outputStyle: 'compressed',
+                    precision: 10,
+                  },
+                },
+              ],
+            },
+          ],
+        },
+      },
+      (err, stats) => {
+        const info = stats.toJson();
+        if (err || stats.hasErrors()) {
+          if (err) {
+            console.error(err);
+            reject(err);
+          }
+          if (stats.hasErrors()) {
+            console.error(info.errors);
+            reject(err);
+          }
+        }
+        resolve('webpack compiled');
+      }
+    );
+  });
+}
+async function css() {
+  const localSrcFilePath = path.resolve(__dirname, '../src/scss');
+  await runWebpack(localSrcFilePath);
+  await del(path.resolve(__dirname, '../dist/css/main.js'), {
+    force: true,
+  });
+}
+
+// sass(src, dist); // outputStyle: 'compressed', precision: 10,
+// autoprefixer();
+// rename('index.css');
+// gulp.dest('dist/css');
+
+// return gulp
+//   .src('src/scss/index.scss')
+//   .pipe(
+//     sass.sync({
+//       outputStyle: 'compressed',
+//       precision: 10,
+//       includePaths: ['./node_modules'],
+//     })
+//   )
+//   .on('error', sass.logError)
+//   .pipe(autoprefixer())
+//   .pipe(rename('index.css'))
+//   .pipe(gulp.dest('dist/css'));
+
+exports.css = css;

package/{gulp-tasks → tasks}/fractal.js

@@ -1,9 +1,12 @@
 /*
  * An example of a Gulp task that starts a Fractal development server.
  */
+const path = require('path');
+
+const fractalInitFile = path.resolve(__dirname, '../fractal.js');
 
 function fractalStart() {
-  const fractal = require('../fractal.js');
+  const fractal = require(fractalInitFile); // eslint-disable-line
   // import the Fractal instance configured in the fractal.js file
   const logger = fractal.cli.console; // make use of Fractal's console object for logging
   const server = fractal.web.server({
@@ -16,9 +19,8 @@ function fractalStart() {
 }
 
 function fractalBuild() {
-  delete require.cache[require.resolve('../fractal.js')]; // eslint-disable-line
-  delete require.cache[require.resolve('../dist/assets/icons.json')]; // eslint-disable-line
-  const fractal = require('../fractal.js');
+  delete require.cache[require.resolve(fractalInitFile)]; // eslint-disable-line
+  const fractal = require(fractalInitFile); // eslint-disable-line
   // import the Fractal instance configured in the fractal.js file
   const logger = fractal.cli.console; // make use of Fractal's console object for logging
   const builder = fractal.web.builder();

package/tasks/js-bundle.js

@@ -0,0 +1,44 @@
+const path = require('path');
+const webpack = require('webpack');
+
+async function runWebpack() {
+  return new Promise((resolve, reject) => {
+    webpack(
+      {
+        entry: [path.resolve(__dirname, '../src/js/index.js'), path.resolve(__dirname, '../src/js/index-polyfills.js')],
+        output: {
+          filename: 'index.js',
+          path: path.resolve(__dirname, '../dist/js'),
+        },
+        module: {
+          rules: [
+            {
+              test: /\.js$/,
+              exclude: /node_modules/,
+              loader: 'babel-loader',
+            },
+          ],
+        },
+      },
+      (err, stats) => {
+        const info = stats.toJson();
+        if (err || stats.hasErrors()) {
+          if (err) {
+            console.error(err);
+          }
+          if (stats.hasErrors()) {
+            console.error(info.errors);
+          }
+          reject(err);
+        }
+        resolve('Webpack has compiled');
+      }
+    );
+  });
+}
+
+async function jsbundle() {
+  await runWebpack();
+}
+
+exports.jsbundle = jsbundle;

package/tasks/svgsprite.js

@@ -0,0 +1,69 @@
+/* eslint-disable promise/no-promise-in-callback: 0; */
+
+const path = require('path');
+const fs = require('fs');
+const SVGO = require('svgo');
+const svgstore = require('svgstore');
+
+const filepath = path.resolve(__dirname, '../src/icons/');
+const prefix = path.basename(filepath, path.extname(filepath));
+const svgoOptions = new SVGO({
+  plugins: [
+    {
+      cleanupIDs: {
+        prefix: `${prefix}-`,
+        minify: true,
+      },
+    },
+    { removeDoctype: true },
+    { removeComments: true },
+    { removeTitle: true },
+    { removeDesc: true },
+    { removeUselessDefs: true },
+    { removeEditorsNSData: true },
+    { cleanupAttrs: true },
+    { cleanupNumericValues: true },
+    { removeViewBox: false },
+    { removeDimensions: true },
+    {
+      removeAttrs: {
+        attrs: 'fill',
+      },
+    },
+  ],
+});
+
+let files = [];
+const icons = [];
+const sprites = svgstore();
+
+async function createSvgStack() {
+  return new Promise((resolve, reject) => {
+    files = fs.readdirSync(filepath);
+    files.map((file) => {
+      svgoOptions
+        .optimize(fs.readFileSync(`${path.resolve(__dirname, filepath)}/${file}`, { encoding: 'utf8' }), {
+          path: `${path.resolve(__dirname, filepath)}\\${file}`,
+        })
+        .then((icon) => {
+          const fileName = path.parse(file).name;
+          sprites.add(fileName, icon.data);
+          return fs.mkdir(path.resolve(__dirname, '../dist/assets'), { recursive: true }, async () => {
+            icons.push({ name: fileName });
+            fs.writeFileSync(`${path.resolve(__dirname, '../dist/assets')}/icons.svg`, sprites);
+            fs.writeFileSync(`${path.resolve(__dirname, '../dist/assets')}/icons.json`, JSON.stringify(icons));
+          });
+        })
+        .catch((err) => {
+          reject(err);
+        });
+      resolve('SVG Stack compiled');
+    });
+  });
+}
+
+async function svgsprite() {
+  await createSvgStack();
+}
+
+exports.svgsprite = svgsprite;

package/tasks/tokens.js

@@ -0,0 +1,34 @@
+const path = require('path');
+
+let StyleDictionary;
+
+function registerTransforms() {
+  return new Promise((resolve) => {
+    StyleDictionary.registerTransform({
+      name: 'color/scssColorFunctions',
+      type: 'value',
+      matcher(prop) {
+        return prop.attributes.category === 'color' && prop.scssColorFunction;
+      },
+      transformer(prop) {
+        return prop.scssColorFunction;
+      },
+    });
+    resolve('Transform registered');
+  });
+}
+
+async function tokens() {
+  // Calling this ooutside of the tokens functions stores the extend in memory
+  // meaning external hooks cannot use it for programatic overrides
+
+  StyleDictionary = require('style-dictionary').extend(path.resolve(__dirname, '../src/tokens/_config'));
+  try {
+    await registerTransforms();
+    await StyleDictionary.buildAllPlatforms();
+  } catch (e) {
+    console.error(e);
+  }
+}
+
+exports.tokens = tokens;

package/gulp-tasks/css.js

@@ -1,22 +0,0 @@
-const gulp = require('gulp');
-const sass = require('gulp-sass');
-const rename = require('gulp-rename');
-const autoprefixer = require('gulp-autoprefixer');
-
-function css() {
-  return gulp
-    .src('src/scss/index.scss')
-    .pipe(
-      sass.sync({
-        outputStyle: 'compressed',
-        precision: 10,
-        includePaths: ['./node_modules'],
-      })
-    )
-    .on('error', sass.logError)
-    .pipe(autoprefixer())
-    .pipe(rename('index.css'))
-    .pipe(gulp.dest('dist/css'));
-}
-
-exports.css = css;