@madgex/design-system 3.0.2 → 3.0.3

package/tasks/createMacroIndex.js

@@ -34,6 +34,7 @@ async function createMacroIndex(cb) {
     };
   });
   let template = `{# automatically generated by the Design System build - do not edit #}\n\n`;
+
   template += componentList
     .map((component) =>
       component.macros.map((macroName) => `{% from '${component.path}' import ${macroName} %}`).join('\n')

package/tasks/css.js

@@ -59,16 +59,19 @@ async function cssWebpack(srcFilePath, distFilePath, hashFilePath = false, filen
       },
       (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');
       }
     );

package/tasks/fractal.js

@@ -12,6 +12,7 @@ function fractalStart() {
   const server = fractal.web.server({
     sync: true,
   });
+
   server.on('error', (err) => logger.error(err.message));
   return server.start().then(() => {
     return logger.success(`Fractal server is now running at ${server.urls.sync.local}`);
@@ -24,6 +25,7 @@ function fractalBuild() {
   // 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();
+
   builder.on('progress', (completed, total) => logger.update(`Exported ${completed} of ${total} items`, 'info'));
   builder.on('error', (err) => logger.error(err.message));
   return builder.build().then(() => {

package/tasks/js-bundle.js

@@ -1,6 +1,6 @@
 const path = require('path');
 const webpack = require('webpack');
-const VueLoaderPlugin = require('vue-loader/lib/plugin');
+const VueLoaderPlugin = require('vue-loader-plugin');
 
 async function runWebpack() {
   return new Promise((resolve, reject) => {
@@ -29,19 +29,23 @@ async function runWebpack() {
             },
           ],
         },
-        plugins: [new VueLoaderPlugin(), new webpack.EnvironmentPlugin(['NODE_ENV'])],
+        plugins: [new VueLoaderPlugin(), new webpack.EnvironmentPlugin({ NODE_ENV: 'production' })],
       },
       (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');
       }
     );

package/tasks/svgsprite.js

@@ -1,35 +1,37 @@
 const path = require('path');
 const fs = require('fs');
-const SVGO = require('svgo');
+const { optimize } = 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({
+const svgoOptions = {
   plugins: [
     {
-      cleanupIDs: {
+      name: 'cleanupIDs',
+      params: {
         prefix: `${prefix}-`,
         minify: true,
       },
     },
-    { removeDoctype: true },
-    { removeComments: true },
-    { removeTitle: true },
-    { removeDesc: true },
-    { removeUselessDefs: true },
-    { removeEditorsNSData: true },
-    { cleanupAttrs: true },
-    { cleanupNumericValues: true },
-    { removeViewBox: false },
-    { removeDimensions: true },
+    { name: 'removeDoctype', params: true },
+    { name: 'removeComments', params: true },
+    { name: 'removeTitle', params: true },
+    { name: 'removeDesc', params: true },
+    { name: 'removeUselessDefs', params: true },
+    { name: 'removeEditorsNSData', params: true },
+    { name: 'cleanupAttrs', params: true },
+    { name: 'cleanupNumericValues', params: true },
+    { name: 'removeViewBox', params: false },
+    { name: 'removeDimensions', params: true },
     {
-      removeAttrs: {
+      name: 'removeAttrs',
+      params: {
         attrs: 'fill',
       },
     },
   ],
-});
+};
 
 let files = [];
 const icons = [];
@@ -39,17 +41,25 @@ async function createSvgStack() {
   return new Promise((resolve, reject) => {
     files = fs.readdirSync(filepath);
     files.forEach((file) => {
-      svgoOptions
-        .optimize(fs.readFileSync(`${path.resolve(__dirname, filepath)}/${file}`, { encoding: 'utf8' }), {
-          path: `${path.resolve(__dirname, filepath)}\\${file}`,
-        })
+      // eslint-disable-next-line promise/param-names
+      new Promise((res) => {
+        const svgdata = fs.readFileSync(`${path.resolve(__dirname, filepath, file)}`, { encoding: 'utf8' });
+        const result = optimize(svgdata, {
+          path: `${path.resolve(__dirname, filepath, file)}`,
+          ...svgoOptions,
+        });
+
+        res(result);
+      })
         .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));
+            fs.writeFileSync(`${path.resolve(__dirname, '../dist/assets', 'icons.svg')}`, sprites);
+            fs.writeFileSync(`${path.resolve(__dirname, '../dist/assets', 'icons.json')}`, JSON.stringify(icons));
           });
         })
         .catch((err) => {

package/tasks/tokens.js

@@ -13,6 +13,7 @@ async function transformBaseTokens(filePath) {
   const transformed = JSON.stringify(transformTokens(JSON.parse(baseTokens)), null, '  ')
     // Add a space after every key, before the `:`
     .replace(/: "(?:[^"]+|\\")*",?$/gm, ' $&');
+
   return writeFileAsync(filePath, transformed);
 }
 
@@ -20,6 +21,7 @@ async function tokens() {
   try {
     await transformBaseTokens(path.resolve(__dirname, '../src/tokens/color.json'));
     const StyleDictionary = StyleDictionaryPackage.extend(path.resolve(__dirname, '../src/tokens/_config'));
+
     await registerTransforms(StyleDictionary);
     await StyleDictionary.buildAllPlatforms();
   } catch (e) {

package/__tests__/unit/src/components/accordion.spec.js

@@ -1,88 +0,0 @@
-import accordion from '../../../../src/components/accordion/accordion';
-
-// document.querySelector = jest.fn().mockReturnValue('<body style="font-size: 16px;"><div id="root"></div></body>');
-window.getComputedStyle = jest.fn().mockReturnValue({ 'font-size': '16px' });
-
-describe('Accordion - checkBreakpoint', () => {
-  const element = {
-    dataset: {
-      bp: '',
-    },
-  };
-  beforeEach(() => {});
-  it('shows accordion when no bp is set', async () => {
-    element.dataset.bp = false;
-    expect.assertions(1);
-    const isAccordion = accordion.checkBreakpoint(element, '800');
-    expect(isAccordion).toBe(true);
-  });
-  it('shows accordion when screen is < than bp', async () => {
-    element.dataset.bp = '500px';
-    expect.assertions(1);
-    const isAccordion = accordion.checkBreakpoint(element, '300');
-    expect(isAccordion).toBe(true);
-  });
-  it('hide accordion when screen is > than bp (px)', async () => {
-    element.dataset.bp = '500px';
-    expect.assertions(1);
-    const isAccordion = accordion.checkBreakpoint(element, '800');
-    expect(isAccordion).toBe(false);
-  });
-  it('hide accordion when screen is > than bp (rem)', async () => {
-    element.dataset.bp = '34rem';
-    expect.assertions(1);
-    const isAccordion = accordion.checkBreakpoint(element, '800');
-    expect(isAccordion).toBe(false);
-  });
-  it('hide accordion when screen is > than bp (em)', async () => {
-    element.dataset.bp = '34em';
-    expect.assertions(1);
-    const isAccordion = accordion.checkBreakpoint(element, '800');
-    expect(isAccordion).toBe(false);
-  });
-  it('shows accordion when unit is not supported', async () => {
-    element.dataset.bp = '34pt';
-    expect.assertions(1);
-    const isAccordion = accordion.checkBreakpoint(element, '800');
-    expect(isAccordion).toBe(true);
-  });
-});
-
-describe('Accordion - createButton', () => {
-  const element = document.createElement('div');
-  element.classList.add('mds-accordion-trigger');
-  element.innerHTML = '<span>this is the span</span>';
-  beforeEach(() => {});
-  it('created the button and contains correct attrs', async () => {
-    expect.assertions(2);
-    const accordionTriggerButton = accordion.createButton(element);
-    expect(accordionTriggerButton.innerHTML).toContain('this is the span');
-    expect(accordionTriggerButton.classList).toEqual(expect.objectContaining({ '0': 'mds-accordion-trigger__button' }));
-  });
-});
-
-describe('Accordion - switchLabel', () => {
-  const element = document.createElement('span');
-  element.dataset.labelinverse = 'view less';
-  element.textContent = 'view more';
-  beforeEach(() => {});
-  it('switches labels', async () => {
-    expect.assertions(1);
-    accordion.switchLabel(element);
-    expect(element.textContent).toBe('view less');
-  });
-});
-
-describe('Accordion - setAccordion', () => {
-  const accordionTrigger = document.createElement('div');
-  accordionTrigger.classList.add('mds-accordion-trigger');
-  accordionTrigger.innerHTML = '<span><span class="mds-accordion-trigger__label">label</span></span>';
-  const accordionContent = document.createElement('div');
-  accordionContent.classList.add('mds-accordion-content');
-  beforeEach(() => {});
-  it('set accordion button', async () => {
-    expect.assertions(1);
-    accordion.setAccordion(accordionTrigger, accordionContent);
-    expect(accordionTrigger.textContent).toContain('label');
-  });
-});

package/__tests__/unit/src/components/modal.spec.js

@@ -1,87 +0,0 @@
-import modals from '../../../../src/components/modal/modal';
-
-if (window.document) {
-  window.document.createRange = () => ({
-    setStart: () => {},
-    setEnd: () => {},
-    commonAncestorContainer: {
-      nodeName: 'BODY',
-      ownerDocument: document,
-    },
-  });
-}
-
-document.body.innerHTML = `
-<div id="site-container">
-  <button id="modal-trigger" class="js-mds-modal-trigger" data-modal-id="test-modal">Open Modal</button>
-</div>
-<div class="mds-modal" role="dialog" id="test-modal" aria-labelledby="modal-label" data-site-container="site-container">
-  <div class="mds-modal__inner">
-    <button id="close-button" type="button" class="js-mds-modal-close mds-modal-default-close-button">Close</button>
-    <h1 id="modal-label">Hello!</h1>
-  </div>
-</div>`;
-const modalActiveClass = 'mds-modal--active';
-const trigger = document.getElementById('modal-trigger');
-const modal = document.getElementById('test-modal');
-const closeButton = document.getElementById('close-button');
-const siteContainer = document.getElementById('site-container');
-// const modalDefaultCloseButtonClass = 'mds-modal-default-close-button';
-
-beforeEach(() => {
-  trigger.focus();
-  modal.classList.remove(modalActiveClass);
-  siteContainer.removeAttribute('aria-hidden');
-  modals.init();
-});
-afterEach(() => {
-  document.body.innerHTML = '';
-});
-
-describe('modal - clicking on trigger', () => {
-  it('add active class to modal, move focus to focusable element in modal and aria-hidden="true" to site container', () => {
-    expect.assertions(3);
-    trigger.click();
-    expect(modal.classList.contains(modalActiveClass)).toBe(true);
-    expect(document.activeElement).toEqual(closeButton);
-    expect(siteContainer.getAttribute('aria-hidden')).toBe('true');
-  });
-});
-
-describe('modal - close modal', () => {
-  it('close modal if clicking outside of "modal__inner"', () => {
-    expect.assertions(3);
-    trigger.click(); // opening modal first
-    modal.click();
-    expect(modal.classList.contains(modalActiveClass)).toBe(false);
-    expect(document.activeElement).toEqual(trigger);
-    expect(siteContainer.getAttribute('aria-hidden')).toBe(null);
-  });
-  it('close modal if using escape key', () => {
-    expect.assertions(3);
-    trigger.click();
-    modal.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' }));
-    expect(modal.classList.contains(modalActiveClass)).toBe(false);
-    expect(document.activeElement).toEqual(trigger);
-    expect(siteContainer.getAttribute('aria-hidden')).toBe(null);
-  });
-  it('close modal if using close button', () => {
-    expect.assertions(3);
-    trigger.click();
-    closeButton.click();
-    expect(modal.classList.contains(modalActiveClass)).toBe(false);
-    expect(document.activeElement).toEqual(trigger);
-    expect(siteContainer.getAttribute('aria-hidden')).toBe(null);
-  });
-});
-
-describe('modal - trap focus', () => {
-  it('tab or shift tab keeps you focused on the close button inside the modal', () => {
-    expect.assertions(2);
-    trigger.click(); // opening modal first
-    modal.dispatchEvent(new KeyboardEvent('keydown', { key: 'Tab' }));
-    expect(document.activeElement).toEqual(closeButton);
-    modal.dispatchEvent(new KeyboardEvent('keydown', { shiftKey: true, key: 'Tab' }));
-    expect(document.activeElement).toEqual(closeButton);
-  });
-});

package/__tests__/unit/src/components/switch-state.spec.js

@@ -1,21 +0,0 @@
-import switchState from '../../../../src/components/switch-state/switch-state';
-
-describe('Switch State', () => {
-  let element = document.createElement('div');
-  element.innerHTML = `<button class="mds-switch-state js-mds-switch-state mds-switch-state--default">
-                        <span class="mds-switch-state--default">this is default</span>
-                        <span class="mds-switch-state--inverse">this is inverse</span>
-                      </button>`;
-  it('setToinverse to be true', async () => {
-    expect.assertions(2);
-    switchState.switchToinverse(element);
-    expect(element.classList.contains('mds-switch-state--inverse')).toBe(true);
-    expect(element.classList.contains('mds-switch-state--default')).toBe(false);
-  });
-  it('setTodefault to be true', async () => {
-    expect.assertions(2);
-    switchState.switchTodefault(element);
-    expect(element.classList.contains('mds-switch-state--default')).toBe(true);
-    expect(element.classList.contains('mds-switch-state--inverse')).toBe(false);
-  });
-});

package/cypress/integration/components/textarea.spec.js

@@ -1,9 +0,0 @@
-context('Textarea', () => {
-  beforeEach(() => {
-    cy.visitComponent('textarea');
-  });
-
-  it('has no detectable a11y violations on load', () => {
-    cy.checkA11y('[data-test="textarea-example-textarea"]');
-  });
-});