@madgex/design-system 3.0.2 → 3.0.3

package/fractal.js

@@ -30,6 +30,7 @@ const icons = require(path.resolve(__dirname, './dist/assets/icons.json')); //es
 
 // import README.MD into homepage docs
 let pkgReadme = fs.readFileSync(path.join(__dirname, 'README.md'), 'utf8');
+
 pkgReadme = pkgReadme.split('\n');
 pkgReadme.shift(0); // drop first line (h1)
 pkgReadme = pkgReadme.join('\n');
@@ -82,6 +83,7 @@ const madgexTheme = mandelbrot({
   styles: ['default', '/assets/css/styles.css'],
   // scripts: ['default', '/assets/theme/js/scripts.js'],
 });
+
 /*
  * Specify a template directory to override any view templates
  */

package/package.json

@@ -2,7 +2,7 @@
   "name": "@madgex/design-system",
   "author": "Madgex",
   "license": "UNLICENSED",
-  "version": "3.0.2",
+  "version": "3.0.3",
   "scripts": {
     "clean": "rimraf dist public tokens/build",
     "commit": "commit",
@@ -10,97 +10,101 @@
     "tokens": "style-dictionary --config ./src/tokens/_config.js build",
     "dev": "cross-env NODE_ENV=development gulp dev",
     "debug": "node --inspect ./node_modules/.bin/gulp dev",
-    "build": "cross-env NODE_ENV=production gulp build",
+    "build": "gulp build",
     "build:icons": "svgo -f src/icons ./dist/assets/icons",
-    "build:webpack": "NODE_ENV=production webpack",
-    "build:fractal": "NODE_ENV=production fractal build",
+    "build:webpack": "webpack",
+    "build:fractal": "fractal build",
     "prepublishOnly": "npm run build",
     "lint": "eslint .",
     "lint-fix": "eslint . --fix",
     "test": "jest",
     "cypress": "cypress run",
-    "cypress:open": "cypress open"
+    "cypress:open": "cypress open",
+    "lint-staged": "lint-staged"
   },
   "repository": {
     "type": "git",
     "url": "https://github.com/madgex/madgex-design-system"
   },
   "dependencies": {
-    "@ctrl/tinycolor": "^2.6.1",
-    "@popperjs/core": "2.4.4",
-    "css-loader": "^3.6.0",
+    "@ctrl/tinycolor": "^3.4.0",
+    "@popperjs/core": "2.9.2",
+    "css-loader": "^5.2.6",
     "document-register-element": "^1.14.3",
     "postcss": "^8.3.5",
     "postcss-cli": "^8.3.1",
-    "postcss-loader": "^6.1.0",
-    "sass-loader": "^10.1.0",
-    "style-dictionary": "^2.10.1",
-    "style-loader": "^0.23.1",
+    "postcss-loader": "^6.1.1",
+    "sass-loader": "^12.1.0",
+    "style-dictionary": "^3.0.1",
+    "style-loader": "^3.0.0",
     "svgxuse": "^1.2.6",
-    "vue": "^2.6.11",
-    "vue-custom-element": "^3.2.14"
+    "vue": "^2.6.14",
+    "vue-custom-element": "^3.3.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.10.5",
-    "@babel/plugin-transform-runtime": "^7.10.5",
-    "@babel/preset-env": "^7.10.4",
-    "@babel/runtime": "^7.10.5",
-    "@commitlint/cli": "^12.0.1",
-    "@commitlint/config-conventional": "^12.0.1",
-    "@commitlint/prompt-cli": "^12.0.1",
+    "@babel/core": "^7.14.6",
+    "@babel/plugin-transform-runtime": "^7.14.5",
+    "@babel/preset-env": "^7.14.7",
+    "@babel/runtime": "^7.14.6",
+    "@commitlint/cli": "^12.1.4",
+    "@commitlint/config-conventional": "^12.1.4",
+    "@commitlint/prompt-cli": "^12.1.4",
     "@frctl/fractal": "^1.5.8",
     "@frctl/mandelbrot": "^1.9.2",
     "@frctl/nunjucks": "^2.0.11",
     "@madgex/eslint-config-madgex": "^1.4.1",
     "@vue/eslint-config-prettier": "^6.0.0",
-    "@vue/test-utils": "^1.0.3",
+    "@vue/test-utils": "^1.2.1",
     "autoprefixer": "^10.2.6",
-    "axe-core": "^3.5.5",
+    "axe-core": "^4.2.3",
     "babel-core": "^7.0.0-bridge.0",
-    "babel-jest": "^24.9.0",
-    "babel-loader": "^8.1.0",
-    "bubleify": "^1.2.1",
+    "babel-jest": "^27.0.6",
+    "babel-loader": "^8.2.2",
+    "bubleify": "^2.0.0",
     "commitizen": "^4.2.4",
     "concurrently": "^6.2.0",
-    "core-js": "^3.6.5",
+    "core-js": "^3.15.2",
     "cross-env": "^7.0.3",
     "cssnano": "^5.0.6",
     "cypress": "^6.9.1",
     "cypress-axe": "^0.12.2",
     "cypress-commands": "^1.1.0",
-    "cz-conventional-changelog": "^2.1.0",
-    "del": "^5.1.0",
-    "eslint": "^7.29.0",
-    "eslint-config-airbnb-base": "^14.2.0",
+    "cypress-file-upload": "^5.0.8",
+    "cypress-plugin-tab": "^1.0.5",
+    "cz-conventional-changelog": "^3.3.0",
+    "del": "^6.0.0",
+    "eslint": "^7.30.0",
+    "eslint-config-airbnb-base": "^14.2.1",
     "eslint-config-prettier": "^7.2.0",
-    "eslint-plugin-cypress": "^2.11.1",
-    "eslint-plugin-import": "^2.22.0",
-    "eslint-plugin-prettier": "^3.1.4",
-    "eslint-plugin-promise": "^4.2.1",
-    "eslint-plugin-vue": "^7.12.1",
+    "eslint-plugin-cypress": "^2.11.3",
+    "eslint-plugin-import": "^2.23.4",
+    "eslint-plugin-prettier": "^3.4.0",
+    "eslint-plugin-promise": "^4.3.1",
+    "eslint-plugin-vue": "^7.13.0",
     "file-loader": "^6.2.0",
-    "flat": "^4.1.0",
-    "globby": "^11.0.1",
+    "flat": "^5.0.2",
+    "globby": "^11.0.4",
     "gulp": "^4.0.2",
-    "husky": "^3.0.9",
-    "jest": "^24.9.0",
-    "jsdom": "^15.2.0",
+    "husky": "^7.0.1",
+    "jest": "^27.0.6",
+    "jsdom": "^16.6.0",
     "link-module-alias": "^1.2.0",
-    "lint-staged": "^9.4.2",
-    "mini-css-extract-plugin": "^1.6.2",
-    "node-sass": "^4.14.1",
-    "nunjucks": "^3.2.2",
-    "prettier": "^2.2.1",
-    "rimraf": "^2.7.1",
+    "lint-staged": "^11.0.0",
+    "mini-css-extract-plugin": "^2.1.0",
+    "node-sass": "^6.0.1",
+    "nunjucks": "^3.2.3",
+    "prettier": "^2.3.2",
+    "rimraf": "^3.0.2",
     "semantic-release": "^17.4.4",
-    "svg-sprite-loader": "^4.3.0",
-    "svgo": "^1.3.2",
+    "svg-sprite-loader": "^6.0.9",
+    "svgo": "^2.3.1",
     "svgo-loader": "^3.0.0",
     "svgstore": "^3.0.0-2",
-    "vue-jest": "^3.0.6",
-    "vue-loader": "^15.9.3",
-    "vue-template-compiler": "^2.6.11",
-    "webpack": "^5.0.0",
+    "vue-jest": "^3.0.7",
+    "vue-loader": "^15.9.7",
+    "vue-loader-plugin": "^1.3.0",
+    "vue-template-compiler": "^2.6.14",
+    "webpack": "^5.43.0",
     "webpack-cli": "^4.7.2",
     "webpack-dev-server": "^3.11.2",
     "webpack-stream": "^6.1.2"
@@ -112,7 +116,8 @@
   },
   "husky": {
     "hooks": {
-      "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
+      "commit-msg": "commitlint -E HUSKY_GIT_PARAMS",
+      "pre-commit": "lint-staged"
     }
   },
   "lint-staged": {

package/server.js

@@ -1,4 +1,4 @@
-const fractal = require('./fractal.js');
+const fractal = require('./fractal');
 
 const server = fractal.web.server();
 

package/src/components/accordion/accordion.config.js

@@ -3,19 +3,16 @@ const tokens = require('../../../dist/_tokens/js/_tokens-module');
 module.exports = {
   title: 'Accordion',
   label: 'Accordion',
+  context: {
+    name: 'Taxonomy',
+    triggerLabel: 'View more categories',
+    triggerLabelActive: 'View less categories',
+    triggerNoJsHidden: true,
+    content:
+      '<dl class="mds-list mds-list--definition mds-list--border"><dt class="mds-list__key">Hours</dt><dd class="mds-list__value">Full time</dd><dt class="mds-list__key">Contract</dt><dd class="mds-list__value">Permanent</dd><dt class="mds-list__key">Industry</dt><dd class="mds-list__value">Accountant, Manager</dd></dl>',
+    id: 'taxonomy',
+  },
   variants: [
-    {
-      name: 'Taxonomy',
-      context: {
-        name: 'Taxonomy',
-        triggerLabel: 'View more categories',
-        triggerLabelActive: 'View less categories',
-        triggerNoJsHidden: true,
-        content:
-          '<dl class="mds-list mds-list--definition mds-list--border"><dt class="mds-list__key">Hours</dt><dd class="mds-list__value">Full time</dd><dt class="mds-list__key">Contract</dt><dd class="mds-list__value">Permanent</dd><dt class="mds-list__key">Industry</dt><dd class="mds-list__value">Accountant, Manager</dd></dl>',
-        id: 'taxonomy',
-      },
-    },
     {
       name: 'Alternative icons',
       context: {

package/src/components/accordion/accordion.js

@@ -14,6 +14,7 @@ const accordion = {
     accordionTriggerList.forEach((trigger) => {
       const accordionContent = trigger.nextElementSibling;
       const isAccordion = accordion.checkBreakpoint(trigger, screenWidth);
+
       if (isAccordion) {
         accordion.setAccordion(trigger, accordionContent);
       } else {
@@ -35,16 +36,19 @@ const accordion = {
         case 'px':
           breakpoint = breakpointValue;
           break;
+
         case 'em':
           fontSize = window.getComputedStyle(document.querySelector('body'))['font-size'];
           conversionValue = breakpointValue * parseFloat(fontSize);
           breakpoint = conversionValue;
           break;
+
         case 'rem':
           fontSize = window.getComputedStyle(document.querySelector('body'))['font-size'];
           conversionValue = breakpointValue * parseFloat(fontSize);
           breakpoint = conversionValue;
           break;
+
         default:
           return true;
       }
@@ -55,6 +59,7 @@ const accordion = {
 
       return true;
     }
+
     return true;
   },
   setAccordion: (accordionTrigger, accordionContent) => {
@@ -63,16 +68,19 @@ const accordion = {
     const labelText = label.innerText;
     const isNonClosing = accordionTrigger.classList.contains(accordionNonClosingClass);
     const triggerButton = accordion.createButton(triggerContainer);
+
     triggerContainer.classList.remove('mds-display-none');
     if (accordionContent.nodeName.toLowerCase() !== 'fieldset') {
       accordionContent.setAttribute('aria-label', labelText);
     }
+
     triggerContainer.innerHTML = '';
     triggerContainer.appendChild(triggerButton);
 
     if (triggerContainer.dataset.expanded) {
       accordion.toggleExpand(triggerButton, triggerContainer, accordionContent, isNonClosing);
     }
+
     triggerButton.addEventListener('click', (elem) => {
       elem.preventDefault();
       accordion.toggleExpand(triggerButton, triggerContainer, accordionContent, isNonClosing);
@@ -81,6 +89,7 @@ const accordion = {
   createButton: (element) => {
     const accordionTriggerSpan = element.querySelector(`.${accordionTriggerClass} > span`);
     const accordionTriggerButton = document.createElement('button');
+
     accordionTriggerButton.className = accordionTriggerButtonClass;
     // can't use multiple arguments in classList.add() due to IE
     accordionTriggerButton.classList.add('mds-button');
@@ -98,9 +107,11 @@ const accordion = {
 
     if (element.dataset.labelinverse) {
       const labelToInverse = element.textContent;
+
       element.textContent = element.dataset.labelinverse;
       element.setAttribute(accordionLabelInverseData, labelToInverse);
     }
+
     return element;
   },
   toggleExpand: (triggerButton, triggerContainer, accordionContent, isNonClosing) => {
@@ -127,6 +138,7 @@ const accordion = {
       triggerContainer.classList.remove(accordionTriggerExpandedClass);
       accordionContent.classList.remove(accordionContentExpandedClass);
     }
+
     accordion.switchLabel(accordionTriggerButtonLabel);
   },
 };

package/src/components/inputs/file-upload/file-upload.js

@@ -9,6 +9,7 @@ const fileUpload = {
   init: () => {
     if (!fileUpload.isBrowserIE()) {
       const fileUploads = Array.from(document.querySelectorAll(fileUploadClass));
+
       fileUploads.forEach((uploader) => {
         uploader.classList.add(supportedClass);
         const fileNameContainer = uploader.querySelector(fileNameContainerClass);

package/src/components/inputs/textarea/character-count.js

@@ -7,11 +7,13 @@ const formControlClass = '.mds-form-control';
 const characterCount = {
   init: () => {
     const elementsWithCharacterCount = Array.from(document.querySelectorAll(characterCountClass));
+
     elementsWithCharacterCount.forEach((element) => {
       const formControl = element.querySelector(formControlClass);
       const maxLength = formControl.getAttribute('maxlength');
       const message = element.querySelector(messageClass);
       const characterCountNumber = element.querySelector(characterCountNumberClass);
+
       formControl.removeAttribute('maxlength');
       characterCount.updateCounter(formControl, maxLength, characterCountNumber, message);
       formControl.addEventListener('keyup', (e) => {
@@ -25,6 +27,7 @@ const characterCount = {
     const newLines = formControl.value.match(/(\r\n|\n|\r)/g);
     const currentCount = formControl.value.length + (newLines ? newLines.length : 0);
     const remainingCount = maxLength - currentCount;
+
     characterCountNumber.textContent = remainingCount;
     if (remainingCount < 0) {
       message.classList.add('mds-form-message--error');

package/src/components/modal/modal.js

@@ -9,6 +9,7 @@ let focusedElementBeforeModal;
 const modals = {
   init: () => {
     const screenWidth = window.innerWidth;
+
     if (screenWidth > breakpoint) {
       const triggersList = Array.from(document.querySelectorAll(`[${modalTrigger}]`));
 
@@ -26,6 +27,7 @@ const modals = {
         const focusableElementsString =
           'a[href], area[href], input:not([disabled]):not([type="hidden"]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, [tabindex="0"], [contenteditable]';
         let focusableElements = modal.querySelectorAll(focusableElementsString);
+
         // Convert NodeList to Array
         focusableElements = Array.prototype.slice.call(focusableElements);
 
@@ -48,7 +50,7 @@ const modals = {
           }
         });
         closeButtons.forEach((closeButton) => {
-          closeButton.addEventListener('click', (elem) => {
+          closeButton.addEventListener('click', (/* elem */) => {
             modals.close(modal, focusedElementBeforeModal, siteContainer);
           });
         });

package/src/components/notification/notification.js

@@ -3,9 +3,11 @@ const componentClass = 'mds-notification';
 const notification = {
   init: (text, type, duration = 3000) => {
     const { body } = document;
+
     notification.hide(body);
 
     const message = document.createElement('div');
+
     message.setAttribute('role', 'alert');
     message.classList.add(componentClass, 'mds-message', `mds-message--${type}`);
     message.innerText = text;
@@ -18,6 +20,7 @@ const notification = {
   },
   hide: (container) => {
     const elementArray = Array.from(container.querySelectorAll(`.${componentClass}`));
+
     elementArray.forEach((elem) => {
       elem.parentNode.removeChild(elem);
     });

package/src/components/skip-link/skip-link.njk

@@ -5,4 +5,14 @@
 {{ MdsSkipLink({
   text: "Skip to main content",
   href: "#main"
-}) }}
+}) }}
+
+<div id="main">
+  <style type="text/css">
+    #main:target {
+      border: 3px solid red;
+      height: 100px;
+    }
+  </style>
+  This is the main content, use the skip link to go to me, I'll show a red border when you focus
+</div>

package/src/components/tabs/tabs.js

@@ -67,15 +67,21 @@ const tabs = {
       element.addEventListener('keydown', (elem) => {
         switch (elem.keyCode) {
           case tabsKeys.left:
+
+          // eslint-disable-next-line no-fallthrough
           case tabsKeys.up:
             elem.preventDefault();
             tabs.moveTab(element, tabsContainer, tabsAll, panelAll, false);
             break;
+
           case tabsKeys.right:
+
+          // eslint-disable-next-line no-fallthrough
           case tabsKeys.down:
             elem.preventDefault();
             tabs.moveTab(element, tabsContainer, tabsAll, panelAll, true);
             break;
+
           default:
             break;
         }
@@ -89,16 +95,19 @@ const tabs = {
     if (element.parentElement.previousSibling) {
       return element.parentElement.previousSibling.querySelector(`.${tabsTabClass}`);
     }
+
     return false;
   },
   getNextTab: (element) => {
     if (element.parentElement.nextSibling) {
       return element.parentElement.nextSibling.querySelector(`.${tabsTabClass}`);
     }
+
     return false;
   },
   getTargetPanel: (element, tabsContainer) => {
     const elementId = element.attributes.href.value;
+
     return tabsContainer.querySelector(elementId);
   },
   getAllPanels: (tabsContainer) => {
@@ -110,9 +119,11 @@ const tabs = {
   moveTab: (element, tabsContainer, tabsAll, panelAll, isNext) => {
     const currentElement = tabs.getSelectedTab(element);
     const targetElement = isNext ? tabs.getNextTab(currentElement) : tabs.getPrevTab(currentElement);
+
     if (targetElement) {
       const targetId = targetElement.attributes.href.value;
       const targetPanel = tabs.getTargetPanel(targetElement, tabsContainer);
+
       tabs.updateTabs(tabsAll, panelAll, targetElement, targetPanel, targetId, false);
     }
   },

package/src/js/fractal-scripts/combobox.js

@@ -2,10 +2,12 @@ const elementName = 'mds-combobox';
 
 function bindToSelect() {
   const el = document.querySelector(`[data-combobox-id="distance-selection"]`);
+
   if (el) {
     const selectInput = el.querySelector('select');
     const options = Array.from(selectInput.querySelectorAll('option'));
     const vueSelect = el.querySelector(elementName);
+
     vueSelect.options = options.slice(1).map((opt) => ({ value: opt.value, label: opt.textContent }));
     // not sure it's needed ?
     // vueSelect.addEventListener('select-option', (event) => {
@@ -19,16 +21,20 @@ function bindToSelect() {
 
 function bindToApi() {
   const el = document.querySelector(`[data-combobox-id="keywords-lookup"]`);
+
   if (el) {
     const vueSelect = el.querySelector(elementName);
+
     vueSelect.filterOptions = false;
     vueSelect.addEventListener('search', (event) => {
       const [searchValue] = event.detail;
+
       if (searchValue) {
         fetch(`https://api.datamuse.com/sug?s=${searchValue}`)
           .then((res) => res.json())
           .then((data) => {
             const options = data.map(({ word }) => ({ value: word, label: word }));
+
             vueSelect.options = options;
             return options;
           })

package/src/js/fractal-scripts/notification.js

@@ -3,14 +3,17 @@ import notification from '../../components/notification/notification';
 const notificationScript = {
   init: () => {
     const elements = Array.from(document.querySelectorAll('.js-notification-example'));
+
     elements.forEach((element) => {
       const trigger = element;
+
       trigger.addEventListener('click', (e) => {
         e.preventDefault();
         e.stopPropagation();
         const triggerEl = e.currentTarget;
         const messageText = triggerEl.innerText;
         const { messageType } = triggerEl.dataset;
+
         notification.init(messageText, messageType);
       });
     });

package/src/js/fractal-scripts/switch-state.js

@@ -3,12 +3,15 @@ import switchState from '../../components/switch-state/switch-state';
 const switchStateScript = {
   init: () => {
     const elements = Array.from(document.querySelectorAll('.js-mds-switch-state'));
+
     elements.forEach((element) => {
       const trigger = element;
+
       trigger.addEventListener('click', (e) => {
         e.preventDefault();
         e.stopPropagation();
         const triggerEl = e.currentTarget;
+
         if (triggerEl.classList.contains('mds-switch-state--default')) {
           switchState.switchToinverse(triggerEl);
         } else if (triggerEl.classList.contains('mds-switch-state--inverse')) {

package/src/js/polyfills/arrayPrototypeFind.js

@@ -1,16 +1,17 @@
+/* eslint-disable no-extend-native ,prefer-rest-params, no-bitwise */
 // https://tc39.github.io/ecma262/#sec-array.prototype.find
 if (!Array.prototype.find) {
   Object.defineProperty(Array.prototype, 'find', {
-    value: function(predicate) {
+    value(predicate) {
       // 1. Let O be ? ToObject(this value).
       if (this == null) {
         throw TypeError('"this" is null or not defined');
       }
 
-      var o = Object(this);
+      const o = Object(this);
 
       // 2. Let len be ? ToLength(? Get(O, "length")).
-      var len = o.length >>> 0;
+      const len = o.length >>> 0;
 
       // 3. If IsCallable(predicate) is false, throw a TypeError exception.
       if (typeof predicate !== 'function') {
@@ -18,10 +19,10 @@ if (!Array.prototype.find) {
       }
 
       // 4. If thisArg was supplied, let T be thisArg; else let T be undefined.
-      var thisArg = arguments[1];
+      const thisArg = arguments[1];
 
       // 5. Let k be 0.
-      var k = 0;
+      let k = 0;
 
       // 6. Repeat, while k < len
       while (k < len) {
@@ -29,10 +30,12 @@ if (!Array.prototype.find) {
         // b. Let kValue be ? Get(O, Pk).
         // c. Let testResult be ToBoolean(? Call(predicate, T, « kValue, k, O »)).
         // d. If testResult is true, return kValue.
-        var kValue = o[k];
+        const kValue = o[k];
+
         if (predicate.call(thisArg, kValue, k, o)) {
           return kValue;
         }
+
         // e. Increase k by 1.
         k++;
       }

package/src/js/polyfills/closest.js

@@ -4,13 +4,14 @@ if (!Element.prototype.matches) {
 
 if (!Element.prototype.closest) {
   // eslint-disable-next-line func-names
-  Element.prototype.closest = function(s) {
+  Element.prototype.closest = function (s) {
     let el = this;
 
     do {
       if (el.matches(s)) return el;
       el = el.parentElement || el.parentNode;
     } while (el !== null && el.nodeType === 1);
+
     return null;
   };
 }

package/src/js/polyfills/objectAssign.js

@@ -1,20 +1,22 @@
 if (typeof Object.assign !== 'function') {
   // Must be writable: true, enumerable: false, configurable: true
   Object.defineProperty(Object, 'assign', {
-    value: function assign(target, varArgs) {
+    value: function assign(target /* , varArgs */) {
       // .length of function is 2
-      'use strict';
+
       if (target === null || target === undefined) {
         throw new TypeError('Cannot convert undefined or null to object');
       }
 
-      var to = Object(target);
+      const to = Object(target);
 
-      for (var index = 1; index < arguments.length; index++) {
-        var nextSource = arguments[index];
+      for (let index = 1; index < arguments.length; index++) {
+        // eslint-disable-next-line prefer-rest-params
+        const nextSource = arguments[index];
 
         if (nextSource !== null && nextSource !== undefined) {
-          for (var nextKey in nextSource) {
+          // eslint-disable-next-line no-restricted-syntax
+          for (const nextKey in nextSource) {
             // Avoid bugs when hasOwnProperty is shadowed
             if (Object.prototype.hasOwnProperty.call(nextSource, nextKey)) {
               to[nextKey] = nextSource[nextKey];
@@ -22,6 +24,7 @@ if (typeof Object.assign !== 'function') {
           }
         }
       }
+
       return to;
     },
     writable: true,

package/tasks/colorTransforms.js

@@ -10,11 +10,13 @@ const TRANSFORM_AMOUNTS = {
 // Replicates Sass lightness($color) function
 function lightness(color) {
   const { l } = color.toHsl();
+
   return l * 100;
 }
 
 function createColorsFromBase({ value: baseColor }) {
   const asTinyColor = new TinyColor(baseColor);
+
   return {
     light: {
       value: asTinyColor.lighten(TRANSFORM_AMOUNTS.LIGHT).toHexString(),
@@ -37,6 +39,7 @@ function transformAllColors(colors) {
       // eslint-disable-next-line no-param-reassign
       builtBrand[name] = { ...createColorsFromBase(color.base), ...color };
     }
+
     return builtBrand;
   }, {});
 }
@@ -45,6 +48,7 @@ function generateBrandAndStatus({ brand, status }) {
   if (status) {
     return { brand: transformAllColors(Object.entries(brand)), status: transformAllColors(Object.entries(status)) };
   }
+
   return { brand: transformAllColors(Object.entries(brand)) };
 }