chore(deps): Moving to fermium, libraries updated

.github/workflows/ci.yml

@@ -15,7 +15,7 @@ jobs:
       - uses: actions/checkout@v2
       - uses: actions/setup-node@v2
         with:
-          node-version: '12'
+          node-version: '14'
       - name: Test
         run: ./scripts/audit.sh
   tests:
@@ -25,7 +25,7 @@ jobs:
       - uses: actions/checkout@v2
       - uses: actions/setup-node@v2
         with:
-          node-version: '12'
+          node-version: '14'
       - name: Install dependencies
         run: yarn install --frozen-lockfile
       - name: Build icons
@@ -41,7 +41,7 @@ jobs:
       - uses: actions/checkout@v2
       - uses: actions/setup-node@v2
         with:
-          node-version: '12'
+          node-version: '14'
       - name: Install dependencies
         run: yarn install --frozen-lockfile
       - name: Build presets
@@ -56,7 +56,7 @@ jobs:
       - uses: actions/checkout@v2
       - uses: actions/setup-node@v2
         with:
-          node-version: '12'
+          node-version: '14'
       - name: Install dependencies
         run: yarn install --frozen-lockfile
       - name: Build icons
@@ -80,7 +80,7 @@ jobs:
       - uses: actions/checkout@v2
       - uses: actions/setup-node@v2
         with:
-          node-version: '12'
+          node-version: '14'
       - name: Install dependencies
         run: yarn install --frozen-lockfile
       - name: Build icons

.nvmrc

@@ -1 +1 @@
-lts/erbium
+lts/fermium

README.md

@@ -14,7 +14,7 @@ All library elements are accompanied with
 
 ## Requirements
 
-ECL is using Erbium, node v12.22.2. Please ensure a match before proceeding with the installation of ECL dependencies or ones in ECL Builder.
+ECL is using Fermium, node v14 but it keeps compatibility with Erbium, node v12. Please ensure a match before proceeding with the installation of ECL dependencies or ones in ECL Builder.
 
 ## Documentation
 

package.json

@@ -34,9 +34,9 @@
   "devDependencies": {
     "@babel/eslint-parser": "7.16.5",
     "@babel/plugin-proposal-export-default-from": "7.16.7",
-    "@babel/plugin-transform-runtime": "7.16.7",
-    "@size-limit/preset-big-lib": "4.12.0",
-    "babel-jest": "26.6.3",
+    "@babel/plugin-transform-runtime": "7.16.8",
+    "@size-limit/preset-big-lib": "7.0.5",
+    "babel-jest": "27.4.6",
     "classnames": "2.3.1",
     "eslint": "8.6.0",
     "eslint-config-airbnb": "19.0.4",
@@ -50,12 +50,12 @@
     "eslint-plugin-react-hooks": "4.3.0",
     "glob": "7.2.0",
     "husky": "7.0.4",
-    "jest": "26.6.3",
+    "jest": "27.4.7",
     "lerna": "4.0.0",
     "lerna-changelog": "2.2.0",
-    "lint-staged": "12.1.5",
-    "netlify-cli": "8.6.5",
-    "node-fetch": "2.6.1",
+    "lint-staged": "12.1.7",
+    "netlify-cli": "8.6.23",
+    "node-fetch": "3.1.0",
     "npm-run-all": "4.1.5",
     "patch-package": "6.4.7",
     "postinstall-postinstall": "2.1.0",
@@ -73,35 +73,14 @@
     "stylelint-config-standard-scss": "3.0.0",
     "stylelint-order": "5.0.0",
     "stylelint-scss": "4.1.0",
-    "stylelint-selector-bem-pattern": "2.1.1",
     "svg4everybody": "2.1.9"
   },
   "resolutions": {
-    "bl": ">=4.0.3",
     "serialize-javascript": ">=3.1.0",
-    "semver": ">=4.3.2",
-    "ssri": ">=6.0.1",
-    "hosted-git-info": ">=3.0.8",
-    "lodash": ">=4.17.21",
-    "ua-parser-js": ">=0.7.24",
-    "immer": ">=9.0.6",
-    "merge": ">=2.1.1",
-    "browserslist": ">=4.16.5",
-    "xmlhttprequest-ssl": ">=1.6.2",
-    "handlebars": ">=4.7.7",
-    "normalize-url": ">=4.5.1 <5.0.0",
-    "css-what": ">=5.0.1",
     "trim": ">=0.0.3",
     "glob-parent": ">=5.1.2",
-    "trim-newlines": ">=3.0.1 <4.0.0",
-    "prismjs": ">=1.24.0",
-    "tar": ">=3.2.3 <4.0.0 || >=4.4.15  <5.0.0 || >=5.0.7 <6.0.0 ||  >=6.1.2",
-    "set-value": ">=4.0.1",
-    "nth-check": ">=2.0.1",
-    "axios": ">=0.21.2",
-    "tmpl": ">=1.0.5",
-    "semver-regex": ">=3.1.3",
-    "strip-ansi": "6.0.1"
+    "strip-ansi": "6.0.1",
+    "follow-redirects": ">=1.14.7"
   },
   "engines": {
     "node": ">=12.0.0",
@@ -131,7 +110,8 @@
     "src/website"
   ],
   "jest": {
-    "verbose": true
+    "verbose": true,
+    "testEnvironment": "jsdom"
   },
   "apps": {
     "storybook-ec": {

src/implementations/vanilla/components/gallery/package.json

@@ -12,7 +12,7 @@
     "@ecl/dom-utils": "^3.1.3",
     "@ecl/theme-dev": "^3.1.3",
     "@ecl/vanilla-utility-media": "^3.1.3",
-    "focus-trap": "6.7.1"
+    "focus-trap": "6.7.2"
   },
   "publishConfig": {
     "access": "public"

src/implementations/vanilla/components/site-header-core/package.json

@@ -12,7 +12,7 @@
     "@ecl/dom-utils": "^3.1.3",
     "@ecl/theme-dev": "^3.1.3",
     "@ecl/vanilla-layout-grid": "^3.1.3",
-    "focus-trap": "6.7.1"
+    "focus-trap": "6.7.2"
   },
   "publishConfig": {
     "access": "public"

src/implementations/vanilla/components/site-header-harmonised/package.json

@@ -12,7 +12,7 @@
     "@ecl/dom-utils": "^3.1.3",
     "@ecl/theme-dev": "^3.1.3",
     "@ecl/vanilla-layout-grid": "^3.1.3",
-    "focus-trap": "6.7.1"
+    "focus-trap": "6.7.2"
   },
   "publishConfig": {
     "access": "public"

src/implementations/vanilla/components/site-header-standardised/package.json

@@ -12,7 +12,7 @@
     "@ecl/dom-utils": "^3.1.3",
     "@ecl/theme-dev": "^3.1.3",
     "@ecl/vanilla-layout-grid": "^3.1.3",
-    "focus-trap": "6.7.1"
+    "focus-trap": "6.7.2"
   },
   "publishConfig": {
     "access": "public"

src/playground/addons/storybook-addon-code/package.json

@@ -6,9 +6,9 @@
   "private": true,
   "dependencies": {
     "@ecl/builder": "^3.1.3",
-    "@storybook/addons": "6.4.9",
-    "@storybook/components": "6.4.9",
-    "@storybook/theming": "6.4.9",
+    "@storybook/addons": "6.4.12",
+    "@storybook/components": "6.4.12",
+    "@storybook/theming": "6.4.12",
     "js-beautify": "1.14.0",
     "prop-types": "15.8.1",
     "react": "17.0.2",

src/playground/addons/storybook-addon-notes/index.js

@@ -1,40 +1,42 @@
 /* eslint-disable no-param-reassign */
 import addons, { makeDecorator } from '@storybook/addons';
-import marked from 'marked';
+import { marked } from 'marked';
 import Prism from 'prismjs';
 import he from 'he';
 
 // Manually import extra languages
+import 'prismjs/components/prism-markup-templating';
 import 'prismjs/components/prism-bash';
 import 'prismjs/components/prism-twig';
 
 // Create custom marked renderer
-const renderer = new marked.Renderer();
-renderer.code = function customCode(code, infostring, escaped) {
-  const lang = (infostring || '').match(/\S*/)[0];
+const renderer = {
+  code(code, infostring, escaped) {
+    const lang = (infostring || '').match(/\S*/)[0];
 
-  if (!lang) {
-    return `<pre><code>${escaped ? code : escape(code, true)}</code></pre>`;
-  }
+    if (!lang) {
+      return `<pre><code>${escaped ? code : escape(code, true)}</code></pre>`;
+    }
 
-  const highlightedCode = Prism.highlight(code, Prism.languages[lang], lang);
-  if (highlightedCode !== undefined && highlightedCode !== code) {
-    escaped = true;
-    code = highlightedCode;
-  }
+    const highlightedCode = Prism.highlight(code, Prism.languages[lang], lang);
+    if (highlightedCode !== undefined && highlightedCode !== code) {
+      escaped = true;
+      code = highlightedCode;
+    }
 
-  const htmlLang = this.options.langPrefix + escape(lang, true);
-  // Due to the format produced by JSON.stringify.
-  if (infostring === 'twig') {
-    code = code.replace(
-      /(<span class="token punctuation")>\.(<\/span>)/g,
-      '$1 style="visibility:hidden">.$2'
-    );
-  }
+    const htmlLang = this.options.langPrefix + escape(lang, true);
+    // Due to the format produced by JSON.stringify.
+    if (infostring === 'twig') {
+      code = code.replace(
+        /(<span class="token punctuation")>\.(<\/span>)/g,
+        '$1 style="visibility:hidden">.$2'
+      );
+    }
 
-  return `<pre class="${htmlLang}"><code class="${htmlLang}">${
-    escaped ? code : escape(code, true)
-  }</code></pre>\n`;
+    return `<pre class="${htmlLang}"><code class="${htmlLang}">${
+      escaped ? code : escape(code, true)
+    }</code></pre>\n`;
+  },
 };
 
 function renderMarkdown(text, options, json) {
@@ -85,8 +87,9 @@ function renderMarkdown(text, options, json) {
     // eslint-disable-next-line prefer-template
     text = preTwig + "twig' with \n" + specs + postTwig + ' %}\n```';
   }
+  marked.use({ renderer });
 
-  return marked(text, { ...marked.defaults, renderer, ...options });
+  return marked.parse(text);
 }
 
 export const withNotes = makeDecorator({

src/playground/addons/storybook-addon-notes/package.json

@@ -7,10 +7,10 @@
   "dependencies": {
     "@emotion/react": "11.7.1",
     "@emotion/styled": "11.6.0",
-    "@storybook/addons": "6.4.9",
+    "@storybook/addons": "6.4.12",
     "he": "1.2.0",
-    "marked": "2.1.3",
-    "prismjs": "1.25.0",
+    "marked": "4.0.10",
+    "prismjs": "1.26.0",
     "prop-types": "15.8.1",
     "react": "17.0.2",
     "react-dom": "17.0.2"

src/playground/addons/storybook-addon-system-switcher/package.json

@@ -9,9 +9,9 @@
   ],
   "dependencies": {
     "@ecl/builder": "^3.1.3",
-    "@storybook/addons": "6.4.9",
-    "@storybook/api": "6.4.9",
-    "@storybook/components": "6.4.9",
+    "@storybook/addons": "6.4.12",
+    "@storybook/api": "6.4.12",
+    "@storybook/components": "6.4.12",
     "react": "17.0.2",
     "react-dom": "17.0.2"
   }

src/playground/ec/package.json

@@ -11,15 +11,15 @@
   },
   "devDependencies": {
     "@babel/core": "7.16.7",
-    "@babel/preset-env": "7.16.7",
+    "@babel/preset-env": "7.16.8",
     "@babel/preset-react": "7.16.7",
     "@babel/runtime": "7.16.7",
-    "@storybook/addon-a11y": "6.4.9",
-    "@storybook/addon-controls": "6.4.9",
+    "@storybook/addon-a11y": "6.4.12",
+    "@storybook/addon-controls": "6.4.12",
     "@storybook/addon-cssresources": "6.2.9",
-    "@storybook/addon-docs": "6.4.9",
-    "@storybook/addon-viewport": "6.4.9",
-    "@storybook/html": "6.4.9",
+    "@storybook/addon-docs": "6.4.12",
+    "@storybook/addon-viewport": "6.4.12",
+    "@storybook/html": "6.4.12",
     "babel-loader": "8.2.3",
     "browser-update": "3.3.37",
     "core-js": "3.20.2",

src/playground/eu/package.json

@@ -11,15 +11,15 @@
   },
   "devDependencies": {
     "@babel/core": "7.16.7",
-    "@babel/preset-env": "7.16.7",
+    "@babel/preset-env": "7.16.8",
     "@babel/preset-react": "7.16.7",
     "@babel/runtime": "7.16.7",
-    "@storybook/addon-a11y": "6.4.9",
-    "@storybook/addon-controls": "6.4.9",
+    "@storybook/addon-a11y": "6.4.12",
+    "@storybook/addon-controls": "6.4.12",
     "@storybook/addon-cssresources": "6.2.9",
-    "@storybook/addon-docs": "6.4.9",
-    "@storybook/addon-viewport": "6.4.9",
-    "@storybook/html": "6.4.9",
+    "@storybook/addon-docs": "6.4.12",
+    "@storybook/addon-viewport": "6.4.12",
+    "@storybook/html": "6.4.12",
     "babel-loader": "8.2.3",
     "browser-update": "3.3.37",
     "core-js": "3.20.2",

src/resources/icons-ec/package.json

@@ -15,7 +15,7 @@
   "devDependencies": {
     "rimraf": "3.0.2",
     "svg-sprite": "1.5.3",
-    "svgo": "1.3.2",
+    "svgo": "2.8.0",
     "xml2js": "0.4.23"
   },
   "publishConfig": {

src/resources/icons-ec/scripts/clean-svg.js

@@ -2,18 +2,16 @@ const fs = require('fs');
 const mkdirp = require('mkdirp');
 const glob = require('glob');
 const path = require('path');
-const SVGO = require('svgo');
+const { loadConfig, optimize } = require('svgo');
 const xml2js = require('xml2js');
-const svgoConfig = require('./config/svgo');
-
-const svgo = new SVGO(svgoConfig);
 
 const src = path.resolve(__dirname, '../src');
 const out = path.resolve(__dirname, '../dist/svg');
 
-glob.sync('**/*.svg', { cwd: src }).forEach((file) => {
+glob.sync('**/*.svg', { cwd: src }).forEach(async (file) => {
   const filepath = path.resolve(src, file);
   const outputPath = path.resolve(out, file);
+  await loadConfig('./scripts/config/svgo');
 
   fs.readFile(filepath, 'utf8', (err, data) => {
     if (err) {
@@ -31,10 +29,10 @@ glob.sync('**/*.svg', { cwd: src }).forEach((file) => {
       const xml = builder.buildObject(clone);
 
       // Clean SVG
-      svgo.optimize(xml, { path: filepath }).then((svgoResult) => {
-        mkdirp.sync(path.dirname(outputPath));
-        fs.writeFileSync(outputPath, svgoResult.data, 'utf8');
-      });
+      const svg = optimize(xml, { path: filepath });
+      const optimizedSvgString = svg.data;
+      mkdirp.sync(path.dirname(outputPath));
+      fs.writeFileSync(outputPath, optimizedSvgString, 'utf8');
     });
   });
 });

src/resources/icons-eu/package.json

@@ -15,7 +15,7 @@
   "devDependencies": {
     "rimraf": "3.0.2",
     "svg-sprite": "1.5.3",
-    "svgo": "1.3.2",
+    "svgo": "2.8.0",
     "xml2js": "0.4.23"
   },
   "publishConfig": {