@ons/design-system 70.0.7 → 70.0.9

package/components/autosuggest/example-autosuggest-country-multiple.njk

@@ -2,32 +2,32 @@
 
 <div class="ons-grid ons-grid--gutterless">
     <div class="ons-grid__col ons-col-8@m">
-
-        {{ onsAutosuggest({
-            "id": "country-of-birth-autosuggest-multiple",
-            "input": {
-                "label": {
-                    "text": "Passport",
-                    "id": "country-of-birth-label-multiple",
-                    "description": "Enter your own answer or select from suggestions. You can enter multiple countries if you have a passport for more than one."
+        {{
+            onsAutosuggest({
+                "id": "country-of-birth-autosuggest-multiple",
+                "input": {
+                    "label": {
+                        "text": "Passport",
+                        "id": "country-of-birth-label-multiple",
+                        "description": "Enter your own answer or select from suggestions. You can enter multiple countries if you have a passport for more than one."
+                    },
+                    "autocomplete": "off"
                 },
-                "autocomplete": "off"
-            },
-            "instructions": "Use up and down keys to navigate suggestions once you\'ve typed more than two characters. Use the enter key to select a suggestion. Touch device users, explore by touch or with swipe gestures.",
-            "ariaYouHaveSelected": "You have selected",
-            "ariaMinChars": "Enter 3 or more characters for suggestions.",
-            "ariaOneResult": "There is one suggestion available.",
-            "ariaNResults": "There are {n} suggestions available.",
-            "ariaLimitedResults": "Results have been limited to 10 suggestions. Type more characters to improve your search",
-            "moreResults": "Continue entering to improve suggestions",
-            "resultsTitle": "Suggestions",
-            "resultsTitleId": "country-of-birth-suggestions",
-            "allowMultiple": true,
-            "autosuggestData": "/examples/data/country-of-birth.json",
-            "noResults": "No suggestions found. You can enter your own answer",
-            "typeMore": "Continue entering to get suggestions",
-            "language": "en"
-        }) }}
-
+                "instructions": "Use up and down keys to navigate suggestions once you\'ve typed more than two characters. Use the enter key to select a suggestion. Touch device users, explore by touch or with swipe gestures.",
+                "ariaYouHaveSelected": "You have selected",
+                "ariaMinChars": "Enter 3 or more characters for suggestions.",
+                "ariaOneResult": "There is one suggestion available.",
+                "ariaNResults": "There are {n} suggestions available.",
+                "ariaLimitedResults": "Results have been limited to 10 suggestions. Type more characters to improve your search",
+                "moreResults": "Continue entering to improve suggestions",
+                "resultsTitle": "Suggestions",
+                "resultsTitleId": "country-of-birth-suggestions",
+                "allowMultiple": true,
+                "autosuggestData": "/examples/data/country-of-birth.json",
+                "noResults": "No suggestions found. You can enter your own answer",
+                "typeMore": "Continue entering to get suggestions",
+                "language": "en"
+            })
+        }}
     </div>
 </div>

package/components/autosuggest/example-autosuggest-country.njk

@@ -2,30 +2,30 @@
 
 <div class="ons-grid ons-grid--gutterless">
     <div class="ons-grid__col ons-col-8@m">
-
-        {{ onsAutosuggest({
-            "id": "country-of-birth-autosuggest",
-            "input": {
-                "label": {
-                    "text": "Current name of country",
-                    "description": "Enter your own answer or select from suggestions",
-                    "id": "country-of-birth-label"
+        {{
+            onsAutosuggest({
+                "id": "country-of-birth-autosuggest",
+                "input": {
+                    "label": {
+                        "text": "Current name of country",
+                        "description": "Enter your own answer or select from suggestions",
+                        "id": "country-of-birth-label"
+                    },
+                    "autocomplete": "off"
                 },
-                "autocomplete": "off"
-            },
-            "instructions": "Use up and down keys to navigate suggestions once you\'ve typed more than two characters. Use the enter key to select a suggestion. Touch device users, explore by touch or with swipe gestures.",
-            "ariaYouHaveSelected": "You have selected",
-            "ariaMinChars": "Enter 3 or more characters for suggestions.",
-            "ariaOneResult": "There is one suggestion available.",
-            "ariaNResults": "There are {n} suggestions available.",
-            "ariaLimitedResults": "Results have been limited to 10 suggestions. Type more characters to improve your search",
-            "moreResults": "Continue entering to improve suggestions",
-            "resultsTitle": "Suggestions",
-            "resultsTitleId": "country-of-birth-suggestions",
-            "autosuggestData": "/examples/data/country-of-birth.json",
-            "noResults": "No suggestions found. You can enter your own answer",
-            "typeMore": "Continue entering to get suggestions"
-        }) }}
-
+                "instructions": "Use up and down keys to navigate suggestions once you\'ve typed more than two characters. Use the enter key to select a suggestion. Touch device users, explore by touch or with swipe gestures.",
+                "ariaYouHaveSelected": "You have selected",
+                "ariaMinChars": "Enter 3 or more characters for suggestions.",
+                "ariaOneResult": "There is one suggestion available.",
+                "ariaNResults": "There are {n} suggestions available.",
+                "ariaLimitedResults": "Results have been limited to 10 suggestions. Type more characters to improve your search",
+                "moreResults": "Continue entering to improve suggestions",
+                "resultsTitle": "Suggestions",
+                "resultsTitleId": "country-of-birth-suggestions",
+                "autosuggestData": "/examples/data/country-of-birth.json",
+                "noResults": "No suggestions found. You can enter your own answer",
+                "typeMore": "Continue entering to get suggestions"
+            })
+        }}
     </div>
 </div>

package/components/autosuggest/fuse-config.js

@@ -1,22 +1,22 @@
 import Fuse from 'fuse.js';
 
 export default function runFuse(query, data, searchFields) {
-  const options = {
-    shouldSort: true,
-    threshold: 0.2,
-    keys: [
-      {
-        name: searchFields,
-        weight: 0.9,
-      },
-      {
-        name: 'tags',
-        weight: 0.1,
-      },
-    ],
-  };
+    const options = {
+        shouldSort: true,
+        threshold: 0.2,
+        keys: [
+            {
+                name: searchFields,
+                weight: 0.9,
+            },
+            {
+                name: 'tags',
+                weight: 0.1,
+            },
+        ],
+    };
 
-  const fuse = new Fuse(data, options);
-  let result = fuse.search(query);
-  return result;
+    const fuse = new Fuse(data, options);
+    let result = fuse.search(query);
+    return result;
 }

package/components/back-to-top/_back-to-top.scss

@@ -1,34 +1,34 @@
 .ons-back-to-top {
-  &__description {
-    margin-left: 0.2rem;
-  }
+    &__description {
+        margin-left: 0.2rem;
+    }
 
-  &__enabled {
-    background: none;
-    width: fit-content;
-    padding: 0.5em 0;
-  }
+    &__enabled {
+        background: none;
+        width: fit-content;
+        padding: 0.5em 0;
+    }
 
-  &__sticky {
-    bottom: -1px;
-    position: fixed;
-    z-index: 10;
-    background: var(--ons-color-grey-15);
-    width: 100%;
-    height: fit-content;
-    left: 0;
+    &__sticky {
+        bottom: -1px;
+        position: fixed;
+        z-index: 10;
+        background: var(--ons-color-grey-15);
+        width: 100%;
+        height: fit-content;
+        left: 0;
 
-    > .ons-back-to-top__link {
-      width: 100%;
-      padding: 0.7em 0;
-      position: relative;
-      display: block;
-      color: var(--ons-color-black);
+        > .ons-back-to-top__link {
+            width: 100%;
+            padding: 0.7em 0;
+            position: relative;
+            display: block;
+            color: var(--ons-color-black);
 
-      &:focus {
-        box-shadow: none;
-        text-decoration: underline solid var(--ons-color-text-link-focus) 4px;
-      }
+            &:focus {
+                box-shadow: none;
+                text-decoration: underline solid var(--ons-color-text-link-focus) 4px;
+            }
+        }
     }
-  }
 }

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

@@ -6,55 +6,55 @@ import axe from '../../tests/helpers/axe';
 import { renderComponent } from '../../tests/helpers/rendering';
 
 describe('macro: back-to-top', () => {
-  it('passes jest-axe checks', async () => {
-    const $ = cheerio.load(
-      renderComponent('back-to-top', {
-        description: 'Back to top',
-        anchor: 'example-target',
-      }),
-    );
-
-    const results = await axe($.html());
-    expect(results).toHaveNoViolations();
-  });
-
-  it('has back to top link with the provided description', async () => {
-    const $ = cheerio.load(
-      renderComponent('back-to-top', {
-        description: 'Scroll to top',
-        anchor: 'example-target',
-      }),
-    );
-    expect($('.ons-back-to-top .ons-back-to-top__link').text().trim()).toBe('Scroll to top');
-  });
-
-  it('has back to top link with the provided anchor', async () => {
-    const $ = cheerio.load(
-      renderComponent('back-to-top', {
-        description: 'Back to top',
-        anchor: 'example-target',
-      }),
-    );
-
-    expect($('.ons-back-to-top .ons-back-to-top__link').attr('href')).toBe('#example-target');
-  });
-
-  it('has back to top link with the default description if no description provided', async () => {
-    const $ = cheerio.load(
-      renderComponent('back-to-top', {
-        anchor: 'example-target',
-      }),
-    );
-
-    expect($('.ons-back-to-top .ons-back-to-top__link').text().trim()).toBe('Back to top');
-  });
-
-  it('has back to top link with the default anchor if no anchor provided', async () => {
-    const renderedComponent = renderComponent('back-to-top', {
-      description: 'Back to top',
+    it('passes jest-axe checks', async () => {
+        const $ = cheerio.load(
+            renderComponent('back-to-top', {
+                description: 'Back to top',
+                anchor: 'example-target',
+            }),
+        );
+
+        const results = await axe($.html());
+        expect(results).toHaveNoViolations();
     });
-    const $ = cheerio.load(renderedComponent);
 
-    expect($('.ons-back-to-top .ons-back-to-top__link').attr('href')).toBe('#top');
-  });
+    it('has back to top link with the provided description', async () => {
+        const $ = cheerio.load(
+            renderComponent('back-to-top', {
+                description: 'Scroll to top',
+                anchor: 'example-target',
+            }),
+        );
+        expect($('.ons-back-to-top .ons-back-to-top__link').text().trim()).toBe('Scroll to top');
+    });
+
+    it('has back to top link with the provided anchor', async () => {
+        const $ = cheerio.load(
+            renderComponent('back-to-top', {
+                description: 'Back to top',
+                anchor: 'example-target',
+            }),
+        );
+
+        expect($('.ons-back-to-top .ons-back-to-top__link').attr('href')).toBe('#example-target');
+    });
+
+    it('has back to top link with the default description if no description provided', async () => {
+        const $ = cheerio.load(
+            renderComponent('back-to-top', {
+                anchor: 'example-target',
+            }),
+        );
+
+        expect($('.ons-back-to-top .ons-back-to-top__link').text().trim()).toBe('Back to top');
+    });
+
+    it('has back to top link with the default anchor if no anchor provided', async () => {
+        const renderedComponent = renderComponent('back-to-top', {
+            description: 'Back to top',
+        });
+        const $ = cheerio.load(renderedComponent);
+
+        expect($('.ons-back-to-top .ons-back-to-top__link').attr('href')).toBe('#top');
+    });
 });

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

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

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

@@ -1,58 +1,58 @@
 export default class backToTop {
-  constructor(component) {
-    this.component = component;
-    this.content = this.component.previousElementSibling;
-    this.target = document.getElementById(this.component.firstElementChild.href.split('#')[1]);
-    this.contentleft;
-    this.updateContentDetails();
-
-    this.handleScroll = this.handleScroll.bind(this);
-    window.addEventListener('scroll', this.handleScroll);
-
-    window.addEventListener('resize', () => {
-      this.setEnabled();
-      this.updateContentDetails();
-      this.handleScroll();
-    });
-
-    this.component.addEventListener('click', () => {
-      this.component.firstElementChild.blur();
-    });
-  }
-
-  handleScroll() {
-    let scrollPosition = window.scrollY + window.innerHeight;
-
-    if (this.target) {
-      scrollPosition = -this.target.getBoundingClientRect().top + window.innerHeight;
+    constructor(component) {
+        this.component = component;
+        this.content = this.component.previousElementSibling;
+        this.target = document.getElementById(this.component.firstElementChild.href.split('#')[1]);
+        this.contentleft;
+        this.updateContentDetails();
+
+        this.handleScroll = this.handleScroll.bind(this);
+        window.addEventListener('scroll', this.handleScroll);
+
+        window.addEventListener('resize', () => {
+            this.setEnabled();
+            this.updateContentDetails();
+            this.handleScroll();
+        });
+
+        this.component.addEventListener('click', () => {
+            this.component.firstElementChild.blur();
+        });
     }
 
-    const contentRect = this.content.getBoundingClientRect();
-    const windowHeight = window.innerHeight;
-    const contentBottom = contentRect.bottom;
+    handleScroll() {
+        let scrollPosition = window.scrollY + window.innerHeight;
 
-    const stickyThreshold = windowHeight * 2;
-    if (scrollPosition > stickyThreshold && windowHeight < contentBottom) {
-      this.setSticky();
-    } else {
-      this.setEnabled();
+        if (this.target) {
+            scrollPosition = -this.target.getBoundingClientRect().top + window.innerHeight;
+        }
+
+        const contentRect = this.content.getBoundingClientRect();
+        const windowHeight = window.innerHeight;
+        const contentBottom = contentRect.bottom;
+
+        const stickyThreshold = windowHeight * 2;
+        if (scrollPosition > stickyThreshold && windowHeight < contentBottom) {
+            this.setSticky();
+        } else {
+            this.setEnabled();
+        }
+    }
+
+    setSticky() {
+        this.component.classList.remove('ons-back-to-top__enabled');
+        this.component.classList.add('ons-back-to-top__sticky');
+        this.component.firstElementChild.children[0].style.marginLeft = `${this.contentleft}px`;
+    }
+
+    setEnabled() {
+        this.updateContentDetails();
+        this.component.classList.remove('ons-back-to-top__sticky');
+        this.component.classList.add('ons-back-to-top__enabled');
+        this.component.firstElementChild.children[0].style.marginLeft = '';
+    }
+
+    updateContentDetails() {
+        this.contentleft = this.component.getBoundingClientRect().left;
     }
-  }
-
-  setSticky() {
-    this.component.classList.remove('ons-back-to-top__enabled');
-    this.component.classList.add('ons-back-to-top__sticky');
-    this.component.firstElementChild.children[0].style.marginLeft = `${this.contentleft}px`;
-  }
-
-  setEnabled() {
-    this.updateContentDetails();
-    this.component.classList.remove('ons-back-to-top__sticky');
-    this.component.classList.add('ons-back-to-top__enabled');
-    this.component.firstElementChild.children[0].style.marginLeft = '';
-  }
-
-  updateContentDetails() {
-    this.contentleft = this.component.getBoundingClientRect().left;
-  }
 }