@ons/design-system 72.1.0 → 72.1.2

package/components/back-to-top/back-to-top.dom.js

@@ -1,11 +1,11 @@
 import domready from '../../js/domready';
 
 async function backToTop() {
-    const bttElement = [...document.querySelectorAll('.ons-js-back-to-top')];
+    const backToTop = [...document.querySelectorAll('.ons-js-back-to-top')];
 
-    if (bttElement) {
-        const Btt = (await import('./back-to-top')).default;
-        bttElement.forEach((btn) => new Btt(btn));
+    if (backToTop) {
+        const BackToTop = (await import('./back-to-top')).default;
+        backToTop.forEach((btn) => new BackToTop(btn));
     }
 }
 

package/components/back-to-top/back-to-top.js

@@ -1,4 +1,4 @@
-export default class backToTop {
+export default class BackToTop {
     constructor(component) {
         this.component = component;
         this.content = this.component.previousElementSibling;

package/components/browser-banner/_macro.spec.js

@@ -10,22 +10,22 @@ describe('FOR: Macro: Browser-banner', () => {
         describe('WHEN: params are at default state', () => {
             const $ = cheerio.load(renderComponent('browser-banner', {}));
 
-            it('THEN: passes jest-axe checks', async () => {
+            test('THEN: passes jest-axe checks', async () => {
                 const results = await axe($.html());
                 expect(results).toHaveNoViolations();
             });
 
-            it('THEN: has the english default bannerLeadingText', () => {
+            test('THEN: has the english default bannerLeadingText', () => {
                 const bannerLeadingText = $('.ons-browser-banner__lead').text().trim();
                 expect(bannerLeadingText).toBe('This website no longer supports your browser.');
             });
 
-            it('THEN: has the english default bannerCTA', () => {
+            test('THEN: has the english default bannerCTA', () => {
                 const bannerCtaHtml = $('.ons-browser-banner__cta').text().trim();
                 expect(bannerCtaHtml).toBe('You can upgrade your browser to the latest version.');
             });
 
-            it('THEN: has the english default bannerLinkUrl', () => {
+            test('THEN: has the english default bannerLinkUrl', () => {
                 expect($('.ons-browser-banner__link').attr('href')).toBe('https://www.ons.gov.uk/help/browsers');
             });
         });
@@ -33,17 +33,17 @@ describe('FOR: Macro: Browser-banner', () => {
         describe('WHEN: params are at default and language is set to welsh', () => {
             const $ = cheerio.load(renderComponent('browser-banner', { lang: 'cy' }));
 
-            it('THEN: has the welsh default bannerLeadingText', () => {
+            test('THEN: has the welsh default bannerLeadingText', () => {
                 const bannerLeadingText = $('.ons-browser-banner__lead').text().trim();
                 expect(bannerLeadingText).toBe('Nid yw’r wefan hon yn cefnogi eich porwr mwyach.');
             });
 
-            it('THEN: has the welsh default bannerCTA', () => {
+            test('THEN: has the welsh default bannerCTA', () => {
                 const bannerCtaHtml = $('.ons-browser-banner__cta').text().trim();
                 expect(bannerCtaHtml).toBe('Gallwch ddiweddaru eich porwr i’r fersiwn ddiweddaraf.');
             });
 
-            it('THEN: has the welsh default bannerLinkUrl', () => {
+            test('THEN: has the welsh default bannerLinkUrl', () => {
                 expect($('.ons-browser-banner__link').attr('href')).toBe('https://cy.ons.gov.uk/help/browsers');
             });
         });
@@ -51,7 +51,7 @@ describe('FOR: Macro: Browser-banner', () => {
 
     describe('GIVEN: Params: wide', () => {
         describe('WHEN: wide is set to true', () => {
-            it('THEN: has container--wide class', () => {
+            test('THEN: has container--wide class', () => {
                 const $ = cheerio.load(
                     renderComponent('browser-banner', {
                         ...{},
@@ -64,7 +64,7 @@ describe('FOR: Macro: Browser-banner', () => {
         });
 
         describe('WHEN: wide is not set', () => {
-            it('THEN: does not have container--wide class', () => {
+            test('THEN: does not have container--wide class', () => {
                 const $ = cheerio.load(
                     renderComponent('browser-banner', {
                         ...{},
@@ -78,7 +78,7 @@ describe('FOR: Macro: Browser-banner', () => {
 
     describe('GIVEN: Params: fullWidth', () => {
         describe('WHEN: fullWidth is set to true', () => {
-            it('THEN: has container--full-width class', () => {
+            test('THEN: has container--full-width class', () => {
                 const $ = cheerio.load(
                     renderComponent('browser-banner', {
                         ...{},
@@ -91,7 +91,7 @@ describe('FOR: Macro: Browser-banner', () => {
         });
 
         describe('WHEN: fullWidth is not set', () => {
-            it('THEN: does not have container--full-width class', () => {
+            test('THEN: does not have container--full-width class', () => {
                 const $ = cheerio.load(
                     renderComponent('browser-banner', {
                         ...{},

package/components/button/_button.scss

@@ -569,6 +569,6 @@ $button-shadow-size: 3px;
 
     .ons-btn,
     a {
-        margin: 0 1rem 1rem 0;
+        margin: 0 1.5rem 1rem 0;
     }
 }

package/components/button/_macro.njk

@@ -11,7 +11,7 @@
             {# Default icon position before label #}
             {% set iconPosition = "before" %}
         {% endif %}
-    {% elif params.iconType is not defined and params.noIcon is not defined %}
+    {% elif params.iconType is not defined and params.noIcon != true %}
         {% if params.url and params.newWindow %}
             {# CTA link opening in new tab #}
             {% set iconType = "external-link" %}