@madgex/design-system 3.0.2 → 3.0.3

package/coverage/js/polyfills/remove.js.html

@@ -7,7 +7,8 @@
     <meta charset="utf-8" />
     <link rel="stylesheet" href="../../prettify.css" />
     <link rel="stylesheet" href="../../base.css" />
-    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="shortcut icon" type="image/x-icon" href="../../favicon.png" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
     <style type='text/css'>
         .coverage-summary .sorter {
             background-image: url(../../sort-arrow-sprite.png);
@@ -84,7 +85,7 @@
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank">istanbul</a>
-                at Wed Jul 07 2021 12:25:30 GMT+0100 (British Summer Time)
+                at Thu Jul 08 2021 15:47:09 GMT+0100 (British Summer Time)
             </div>
         </div>
         <script src="../../prettify.js"></script>

package/coverage/tokens/_config.js.html

@@ -7,7 +7,8 @@
     <meta charset="utf-8" />
     <link rel="stylesheet" href="../prettify.css" />
     <link rel="stylesheet" href="../base.css" />
-    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="shortcut icon" type="image/x-icon" href="../favicon.png" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
     <style type='text/css'>
         .coverage-summary .sorter {
             background-image: url(../sort-arrow-sprite.png);
@@ -552,7 +553,7 @@ const config = <span class="cstat-no" title="statement not covered" >{</span>
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank">istanbul</a>
-                at Wed Jul 07 2021 12:25:30 GMT+0100 (British Summer Time)
+                at Thu Jul 08 2021 15:47:09 GMT+0100 (British Summer Time)
             </div>
         </div>
         <script src="../prettify.js"></script>

package/coverage/tokens/index.html

@@ -7,7 +7,8 @@
     <meta charset="utf-8" />
     <link rel="stylesheet" href="../prettify.css" />
     <link rel="stylesheet" href="../base.css" />
-    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="shortcut icon" type="image/x-icon" href="../favicon.png" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
     <style type='text/css'>
         .coverage-summary .sorter {
             background-image: url(../sort-arrow-sprite.png);
@@ -94,7 +95,7 @@
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank">istanbul</a>
-                at Wed Jul 07 2021 12:25:30 GMT+0100 (British Summer Time)
+                at Thu Jul 08 2021 15:47:09 GMT+0100 (British Summer Time)
             </div>
         </div>
         <script src="../prettify.js"></script>

package/cypress/.eslintrc.js

@@ -1,12 +1,12 @@
 module.exports = {
   plugins: ['cypress'],
   env: {
-    "cypress/globals": true
+    'cypress/globals': true,
   },
   rules: {
-    "import/no-extraneous-dependencies": 0,
+    'import/no-extraneous-dependencies': 0,
     // Cypress uses a .then mechanism to unwrap information, which is not really a promise
-    "promise/always-return": 0,
-    "promise/catch-or-return": 0
-  }
-}
+    'promise/always-return': 0,
+    'promise/catch-or-return': 0,
+  },
+};

package/cypress/fixtures/testuploadfile.txt

@@ -0,0 +1 @@
+I am a file to upload

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

@@ -58,7 +58,7 @@ context('Accordion', () => {
       if (triggerId) {
         cy.get(`#${triggerId}`).should('exist');
       }
-    });;
+    });
     // Alt Icons
     cy.get('[data-test="accordion-trigger-altIcons"] button').not('.mds-display-none').click({ multiple: true });
     cy.get('[data-test="accordion-content-altIcons"]').each((content) => {
@@ -67,7 +67,7 @@ context('Accordion', () => {
       if (triggerId) {
         cy.get(`#${triggerId}`).should('exist');
       }
-    });;
+    });
     // Collapsed
     cy.get('[data-test="accordion-trigger-collapsed"] button').not('.mds-display-none').click({ multiple: true });
     cy.get('[data-test="accordion-content-collapsed"]').each((content) => {
@@ -76,7 +76,7 @@ context('Accordion', () => {
       if (triggerId) {
         cy.get(`#${triggerId}`).should('exist');
       }
-    });;
+    });
     // non-closing
     cy.get('[data-test="accordion-trigger-non-closing"] button').not('.mds-display-none').click({ multiple: true });
     cy.get('[data-test="accordion-content-non-closing"]').each((content) => {
@@ -87,4 +87,41 @@ context('Accordion', () => {
       }
     });
   });
+
+  it('shows accordion when no bp is set', () => {
+    cy.get('[data-test="accordion-trigger-taxonomy"] button').not('.mds-display-none').click();
+    cy.get('[data-test="accordion-content-taxonomy"]').should('be.visible');
+  });
+
+  it('shows accordion when screen is < than bp', () => {
+    cy.get('[data-test="accordion-trigger-mobile"]').should('be.hidden');
+    cy.get('[data-test="accordion-trigger-mobile"]')
+      .should('have.attr', 'data-bp')
+      .then((bp) => {
+        const bpInt = Number.parseInt(bp, 10);
+
+        cy.viewport(bpInt - 10, bpInt - 10);
+        cy.reload();
+        cy.get('[data-test="accordion-trigger-mobile"]').should('be.visible');
+      });
+  });
+
+  it('hide accordion when screen is > than bp', () => {
+    cy.get('[data-test="accordion-trigger-mobile"]')
+      .should('have.attr', 'data-bp')
+      .then((bp) => {
+        const bpInt = Number.parseInt(bp, 10);
+
+        cy.viewport(bpInt + 10, bpInt + 10);
+        cy.reload();
+        cy.get('[data-test="accordion-trigger-mobile"]').should('be.hidden');
+      });
+  });
+
+  it('switches labels when clicked', async () => {
+    cy.get('[data-test="accordion-trigger-taxonomy"] button').as('trigger');
+    cy.get('@trigger').contains('View more categories');
+    cy.get('@trigger').click({ multiple: true });
+    cy.get('@trigger').contains('View less categories');
+  });
 });

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

@@ -4,7 +4,6 @@ context('Button', () => {
   });
 
   it('has no detectable a11y violations on load', () => {
-    // Need to skip others due to contrast issues currently
-    cy.checkA11y('[data-test="button-plain"]');
+    cy.checkA11y('[data-test^="button-"]');
   });
-});
+});

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

@@ -4,8 +4,7 @@ context('Card', () => {
   });
 
   it('has no detectable a11y violations on load', () => {
-    cy.checkA11y('[data-test="card-default"]');
-    cy.checkA11y('[data-test="card-in-list"]');
-    cy.checkA11y('[data-test="card-with-background"]');
+    cy.excludeA11yTests(['heading-order']);
+    cy.checkA11y('[data-test^="card-"]');
   });
 });

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

@@ -6,4 +6,14 @@ context('Icon', () => {
   it('has no detectable a11y violations on load', () => {
     cy.checkA11y('p');
   });
+
+  it('renders icons', () => {
+    cy.document().then((doc) => {
+      const allTestables = doc.querySelectorAll('svg.mds-icon');
+
+      allTestables.forEach((element) => {
+        cy.get(element).should('be.visible');
+      });
+    });
+  });
 });

package/cypress/integration/components/{combobox.spec.js → inputs/combobox.spec.js}

@@ -17,6 +17,12 @@ context('Combobox', () => {
     cy.checkA11y('[data-test="combobox-distance-selection"]');
   });
 
+  it('has attrs set as expected', () => {
+    cy.get('#distance-selection').as('comboboxInput');
+    cy.get('@comboboxInput').attribute('autocomplete').should('equal', 'off');
+    cy.get('@comboboxInput').attribute('aria-autocomplete').should('equal', 'list');
+  });
+
   it('can be navigated with up and down arrows', () => {
     cy.get('[data-test="combobox-distance-selection"] input').first().focus().type('Within');
     cy.get('[data-test="combobox-distance-selection"] input').first().focus().type('{downArrow}');

package/cypress/integration/components/inputs/file-upload.spec.js

@@ -0,0 +1,45 @@
+context('File Upload', () => {
+  beforeEach(() => {
+    cy.visitComponent('file-upload');
+  });
+
+  it('has no detectable a11y violations on load', () => {
+    cy.checkA11y('[data-test="input-file"]');
+    cy.checkA11y('[data-test="input-selected-file"]');
+  });
+
+  it('changes to show the remove option when a file is uploaded', () => {
+    cy.get('[data-test="input-file"]').as('fileInput');
+    cy.get('@fileInput')
+      .find('.mds-file-upload__input-controls > .mds-file-upload__selection-state')
+      .should('be.visible');
+    cy.get('@fileInput')
+      .find('.mds-file-upload__input-controls > .mds-file-upload__selected-state')
+      .should('be.hidden');
+    cy.get('@fileInput').find('.mds-form-control').attachFile('testuploadfile.txt');
+    cy.wait(500);
+    cy.get('@fileInput')
+      .find('.mds-file-upload__input-controls > .mds-file-upload__selected-state')
+      .should('be.visible');
+    cy.get('@fileInput')
+      .find('.mds-file-upload__input-controls > .mds-file-upload__selection-state')
+      .should('be.hidden');
+  });
+
+  it('removes a file when button clicked', () => {
+    cy.get('[data-test="input-selected-file"]').as('fileInput');
+    cy.get('@fileInput')
+      .find('.mds-file-upload__input-controls > .mds-file-upload__selection-state')
+      .should('be.hidden');
+    cy.get('@fileInput')
+      .find('.mds-file-upload__input-controls > .mds-file-upload__selected-state')
+      .should('be.visible');
+    cy.get('@fileInput').find('.mds-file-upload__remove-button').click();
+    cy.get('@fileInput')
+      .find('.mds-file-upload__input-controls > .mds-file-upload__selected-state')
+      .should('be.hidden');
+    cy.get('@fileInput')
+      .find('.mds-file-upload__input-controls > .mds-file-upload__selection-state')
+      .should('be.visible');
+  });
+});

package/cypress/integration/components/{input.spec.js → inputs/input.spec.js}

@@ -15,4 +15,4 @@ context('Input', () => {
     cy.checkA11y('[data-test="input-input-with-placeholder"]');
     cy.checkA11y('[data-test="input-input-with-hidden-label"]');
   });
-});
+});

package/cypress/integration/components/inputs/label.spec.js

@@ -0,0 +1,15 @@
+context('Label', () => {
+  beforeEach(() => {
+    cy.visitComponent('label');
+  });
+
+  it('has no detectable a11y violations on load', () => {
+    cy.document().then((doc) => {
+      const allTestables = doc.querySelectorAll('.mds-form-label');
+
+      allTestables.forEach((element) => {
+        cy.checkA11y(element);
+      });
+    });
+  });
+});

package/cypress/integration/components/inputs/radio.spec.js

@@ -0,0 +1,20 @@
+context('Radio', () => {
+  beforeEach(() => {
+    cy.visitComponent('radio');
+  });
+
+  it('has no detectable a11y violations on load', () => {
+    cy.checkA11y('[data-test="radio-radio-input"]');
+    cy.checkA11y('[data-test="radio-inline-radio-input"]');
+    cy.checkA11y('[data-test="radio-stacked-radio-input-disabled"]');
+  });
+
+  it('checks the radio when label clicked', () => {
+    cy.get('[data-test="radio-radio-input"]').as('radioGroup');
+    cy.get('@radioGroup').find('label').first().click();
+    cy.get('@radioGroup').find('input').first().should('be.checked');
+    cy.get('@radioGroup').find('label').last().click();
+    cy.get('@radioGroup').find('input').first().should('not.be.checked');
+    cy.get('@radioGroup').find('input').last().should('be.checked');
+  });
+});

package/cypress/integration/components/inputs/select.spec.js

@@ -0,0 +1,31 @@
+context('Select', () => {
+  beforeEach(() => {
+    cy.visitComponent('select');
+  });
+
+  it('has no detectable a11y violations on load', () => {
+    cy.checkA11y('[data-test="select-select-input"]');
+    cy.document().then((doc) => {
+      const allTestables = doc.querySelectorAll("[data-test^='select-']");
+
+      allTestables.forEach((element) => {
+        cy.checkA11y(element);
+      });
+    });
+  });
+
+  it('can hide the default option', () => {
+    cy.get('[data-test="select-default-option-hidden"]').as('select');
+    cy.get('@select').find('option').first().should('be.selected').and('have.value', 'option-1');
+  });
+
+  it('can have a custom default option', () => {
+    cy.get('[data-test="select-default-option-custom"]').as('select');
+    cy.get('@select').find('option').first().should('be.selected').and('contain.text', 'All');
+  });
+
+  it('can preselct an option', () => {
+    cy.get('[data-test="select-preselected-input"]').as('select');
+    cy.get('@select').find('option:selected').should('have.value', 'option-2');
+  });
+});

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

@@ -0,0 +1,23 @@
+context('Textarea', () => {
+  beforeEach(() => {
+    cy.visitComponent('textarea');
+  });
+
+  it('has no detectable a11y violations on load', () => {
+    cy.checkA11y('[data-test="textarea-example-textarea"]');
+  });
+
+  it('shows characters remaining', () => {
+    cy.get('[data-test="textarea-example-textarea"]').as('textarea');
+    cy.get('@textarea')
+      .find('.js-character-count-number')
+      .invoke('text')
+      .then((charsRemaining) => {
+        cy.get('@textarea').type('123');
+        cy.get('@textarea')
+          .find('.js-character-count-number')
+          .invoke('text')
+          .should('equal', String(Number.parseInt(charsRemaining, 10) - 3));
+      });
+  });
+});

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

@@ -0,0 +1,65 @@
+context('Modal', () => {
+  beforeEach(() => {
+    cy.visitComponent('modal');
+  });
+
+  it('has no detectable a11y violations on load', () => {
+    cy.checkA11y("[data-modal-id='test-modal']");
+  });
+
+  it('opens a modal when trigger clicked', () => {
+    cy.get("button[data-modal-id='test-modal']").as('trigger');
+    cy.get('#test-modal').as('modalWindow');
+
+    cy.get('@modalWindow').should('be.hidden');
+    cy.get('@trigger').click();
+    cy.get('@modalWindow').should('be.visible');
+  });
+
+  it('has no a11y violations when open', () => {
+    cy.get("button[data-modal-id='test-modal']").as('trigger');
+    cy.get('#test-modal').as('modalWindow');
+    cy.get('@trigger').click();
+    cy.checkA11y('#test-modal');
+  });
+
+  it('close modal if clicking outside of "modal__inner"', () => {
+    cy.get("button[data-modal-id='test-modal']").as('trigger');
+    cy.get('#test-modal').as('modalWindow');
+    cy.get('@trigger').click();
+    cy.get('@modalWindow').should('be.visible');
+    cy.get('@modalWindow').click({ force: true });
+    cy.get('@modalWindow').should('be.hidden');
+  });
+
+  it('close modal if using escape key', () => {
+    cy.get("button[data-modal-id='test-modal']").as('trigger');
+    cy.get('#test-modal').as('modalWindow');
+    cy.get('@trigger').click();
+    cy.get('body').type('{esc}');
+  });
+
+  it('close modal if using close button', () => {
+    // First close button
+    cy.get("button[data-modal-id='test-modal']").as('trigger');
+    cy.get('#test-modal').as('modalWindow');
+    cy.get('@trigger').click();
+    cy.get('@modalWindow').should('be.visible');
+    cy.get('@modalWindow').find('.js-mds-modal-close').first().click();
+    cy.get('@modalWindow').should('be.hidden');
+
+    // Second close button
+    cy.get('@trigger').click();
+    cy.get('@modalWindow').should('be.visible');
+    cy.get('@modalWindow').find('.js-mds-modal-close').last().click();
+    cy.get('@modalWindow').should('be.hidden');
+  });
+
+  it('tab or shift tab keeps you focused on the close button inside the modal', () => {
+    cy.get("button[data-modal-id='test-modal']").as('trigger');
+    cy.get('#test-modal').as('modalWindow');
+    cy.get('@trigger').click();
+    cy.focused().tab().tab().should('have.class', 'js-mds-modal-close');
+    cy.focused().tab({ shift: true }).tab({ shift: true }).should('have.class', 'js-mds-modal-close');
+  });
+});

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

@@ -0,0 +1,35 @@
+context('Notification', () => {
+  beforeEach(() => {
+    cy.visitComponent('notification');
+  });
+
+  it('has no detectable a11y violations on load', () => {
+    cy.document().then((doc) => {
+      const allTestables = doc.querySelectorAll('.js-notification-example');
+
+      allTestables.forEach((element) => {
+        cy.checkA11y(element);
+      });
+    });
+  });
+
+  it('has no detectable a11y violations when clicked', () => {
+    cy.document().then((doc) => {
+      const allTestables = doc.querySelectorAll('.js-notification-example');
+
+      allTestables.forEach((element) => {
+        cy.get(element).click();
+        cy.checkA11y(element);
+      });
+    });
+  });
+
+  it('shows the correct notifications when clicked', () => {
+    cy.get('[data-message-type="success"]').click();
+    cy.get('.mds-message--success').should('be.visible');
+    cy.get('[data-message-type="error"]').click();
+    cy.get('.mds-message--error').should('be.visible');
+    cy.get('[data-message-type="info"]').click();
+    cy.get('.mds-message--info').should('be.visible');
+  });
+});

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

@@ -0,0 +1,36 @@
+context('Popover', () => {
+  beforeEach(() => {
+    cy.visitComponent('popover');
+  });
+
+  it('has no detectable a11y violations on load', () => {
+    cy.document().then((doc) => {
+      const allTestables = doc.querySelectorAll('.js-mds-popover-trigger');
+
+      allTestables.forEach((element) => {
+        cy.checkA11y(element);
+      });
+    });
+  });
+
+  it('has no detectable a11y violations when clicked', () => {
+    cy.excludeA11yTests(['color-contrast']);
+    cy.document().then((doc) => {
+      const allTestables = doc.querySelectorAll('.js-mds-popover-trigger');
+
+      allTestables.forEach((element) => {
+        cy.get(element).click({ force: true });
+        cy.checkA11y(element);
+      });
+    });
+  });
+
+  it('shows the correct notifications when clicked', () => {
+    cy.get('[data-test="button-simple-popover-popover-trigger"]').click();
+    cy.get('#simple-popover-content').should('be.visible');
+    cy.get('[data-test="button-popover-link-popover-trigger"]').click();
+    cy.get('#popover-link-content').should('be.visible');
+    cy.get('[data-test="button-popover-left-popover-trigger"]').click({ force: true });
+    cy.get('#popover-left-content').should('be.visible');
+  });
+});

package/cypress/integration/components/skip-link.spec.js

@@ -0,0 +1,9 @@
+context('Skip Link', () => {
+  beforeEach(() => {
+    cy.visitComponent('skip-link');
+  });
+
+  it('has no detectable a11y violations on load', () => {
+    cy.checkA11y('.mds-skip-to-content');
+  });
+});

package/cypress/plugins/index.js

@@ -11,7 +11,7 @@
 // This function is called when a project is opened or re-opened (e.g. due to
 // the project's config changing)
 
-module.exports = (on, config) => {
+module.exports = (/* on, config */) => {
   // `on` is used to hook into various events Cypress emits
   // `config` is the resolved Cypress config
 };

package/cypress/support/commands.js

@@ -14,6 +14,20 @@ Cypress.Commands.add('visitComponent', (componentName) => {
   cy.visit(`http://localhost:4000/components/preview/${componentName}`);
   cy.injectAxe();
 });
+
+Cypress.Commands.add('excludeA11yTests', (testNames) => {
+  const checks = [];
+
+  testNames.forEach((test) => {
+    checks.push({
+      id: test,
+      enabled: false,
+    });
+  });
+  cy.configureAxe({
+    checks,
+  });
+});
 //
 //
 // -- This is a child command --

package/cypress/support/index.js

@@ -20,3 +20,5 @@ import './commands';
 // Alternatively you can use CommonJS syntax:
 // require('./commands')
 require('cypress-commands');
+require('cypress-plugin-tab');
+require('cypress-file-upload');

package/dist/_tokens/css/_tokens.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 07 Jul 2021 11:25:59 GMT
+ * Generated on Thu, 08 Jul 2021 14:47:40 GMT
  */
 
 :root {