@ons/design-system 43.0.0 → 44.1.1

package/components/checkboxes/_checkbox.scss

@@ -124,7 +124,7 @@ $checkbox-padding: 11px;
   }
 
   &__input:focus + &__label::before {
-    @extend .ons-input:focus;
+    @extend %ons-input-focus;
   }
 
   &__input:not(:checked) ~ &__other {

package/components/checkboxes/_macro.njk

@@ -40,9 +40,9 @@
                 {% endif %}
                 {% if checkbox.other is defined and checkbox.other %}
                     {% set otherClass = " ons-js-other" %}
-                {% endif %}
-                {% if checkbox.other.selectAllChildren is defined and checkbox.other.selectAllChildren == true %}
-                    {% set otherClass = otherClass + " ons-js-select-all-children" %}
+                    {% if checkbox.other.selectAllChildren is defined and checkbox.other.selectAllChildren == true %}
+                        {% set otherClass = otherClass + " ons-js-select-all-children" %}
+                    {% endif %}
                 {% endif %}
                 <span class="ons-checkboxes__item{{ " ons-checkboxes__item--no-border" if params.borderless }}">
                     {% set config = {

package/components/collapsible/_collapsible.scss

@@ -17,7 +17,7 @@ $collapsible-caret-width: 1.5rem;
 
       &:focus {
         .ons-collapsible__title {
-          @extend a:focus;
+          @extend %a-focus;
           // extend collapsible focus background behind caret
           margin-left: -$collapsible-caret-width;
           padding-left: $collapsible-caret-width;

package/components/field/_field-group.scss

@@ -4,7 +4,6 @@
   .ons-field {
     display: inline-block;
     font-size: 1rem;
-    margin-bottom: 1.5rem;
     margin-top: 0;
     vertical-align: top;
 

package/components/fieldset/_macro.njk

@@ -21,7 +21,7 @@
                         {{- params.legend | safe -}}
                     {% endif %}
                     {% if params.description is defined and params.description %}
-                        <span class="ons-fieldset__description {% if params.legendIsQuestionTitle %}ons-fieldset__description--title{% endif %}">{{ params.description | safe }}</span>
+                        <div class="ons-fieldset__description {% if params.legendIsQuestionTitle %}ons-fieldset__description--title{% endif %}">{{ params.description | safe }}</div>
                     {% endif %}
                 </legend>
                 {{ caller() }}

package/components/header/_header.scss

@@ -5,6 +5,7 @@
   -moz-osx-font-smoothing: grayscale;
   margin: 0;
   position: relative;
+
   & &__title--svg-logo {
     display: block;
     fill: $color-white;
@@ -38,9 +39,6 @@
     background: $color-header;
     padding: 0.56rem 0;
 
-    @include mq(m) {
-      height: 95px;
-    }
     &--border {
       border-bottom: 3px solid $color-header;
       border-top: 3px solid $color-header;
@@ -57,12 +55,14 @@
     color: $color-white;
 
     @include mq(m) {
+      margin-bottom: 1rem;
       margin-top: 0.8rem;
     }
 
     &--with-description,
     &--with-button {
       @include mq(m) {
+        margin-bottom: 0;
         margin-top: 0.45rem;
       }
     }

package/components/header/_macro.njk

@@ -87,7 +87,7 @@
                                 })
                             }}
                         {% else %}
-                            <{{ title_tag }} class="ons-header__title{% if params.desc is defined and params.desc %} header__title--with-description{% endif %}{% if params.button is defined and params.button %} header__title--with-button{% endif %}">{{ params.title }}</{{ title_tag }}>
+                            <{{ title_tag }} class="ons-header__title{% if params.desc is defined and params.desc %} ons-header__title--with-description{% endif %}{% if params.button is defined and params.button %} ons-header__title--with-button{% endif %}">{{ params.title }}</{{ title_tag }}>
                         {% endif %}
                         {% if params.titleLogoHref is defined and params.titleLogoHref %}</a>{% endif %}
                     </div>
@@ -95,7 +95,7 @@
                         <div class="ons-grid__col ons-col-auto ons-u-flex-no-shrink ons-u-d-no@xxs@m">
                             {{ onsButton({
                                 "text": params.button.text,
-                                "classes": "ons-u-d-no@xxs@m ons-u-mt-xs@m",
+                                "classes": "ons-u-d-no@xxs@m",
                                 "variants": "ghost",
                                 "name": params.button.name,
                                 "attributes": params.button.attributes,

package/components/input/_input.scss

@@ -1,3 +1,8 @@
+%ons-input-focus {
+  box-shadow: 0 0 0 3px $color-focus, inset 0 0 0 1px $color-input;
+  outline: none;
+}
+
 .ons-input {
   border: $input-border-width solid $color-input;
   border-radius: $input-radius;
@@ -31,8 +36,7 @@
   }
 
   &:focus {
-    box-shadow: 0 0 0 3px $color-focus, inset 0 0 0 1px $color-input;
-    outline: none;
+    @extend %ons-input-focus;
   }
 
   &:disabled {

package/components/input/_macro.njk

@@ -127,7 +127,7 @@
         {% call onsMutuallyExclusive({
             "id": params.fieldId,
             "legend": params.legend,
-            "legendClasses": params.legendClasses ~ "ons-js-input-legend",
+            "legendClasses": params.legendClasses ~ " ons-js-input-legend",
             "description": params.description,
             "dontWrap": params.dontWrap,
             "legendIsQuestionTitle": params.legendIsQuestionTitle,

package/components/message/_message.scss

@@ -1,5 +1,7 @@
+@use 'sass:math';
+
 .ons-message {
-  border-radius: $grid-gutters / 2;
+  border-radius: math.div($grid-gutters, 2);
   margin-bottom: 2rem;
 
   &--sent {

package/components/modal/_macro.njk

@@ -0,0 +1,23 @@
+{% macro onsModal(params) %}    
+    {% set modalID = params.id | default('dialog') %}
+    <dialog class="ons-modal ons-js-modal {{ params.classes }}"
+        id="{{ modalID }}"
+        role="dialog"
+        aria-labelledby="ons-modal-title"
+        {% if params.attributes is defined and params.attributes %}{% for attribute, value in (params.attributes.items() if params.attributes is mapping and params.attributes.items else params.attributes) %} {{attribute}}="{{value}}"{% endfor %}{% endif %}
+    >
+        <h1 id="ons-modal-title" class="ons-modal__title">
+            {{ params.title }}
+        </h1>
+        <div class="ons-modal__body">
+            {{ (params.body if params else "") | safe }}{{ caller() if caller }}
+        </div>
+        {% if params.btnText %}
+            {% from "components/button/_macro.njk" import onsButton %}
+            {{ onsButton({
+                "text": params.btnText,
+                "classes": "ons-js-modal-btn ons-u-mt-s"
+            }) }}
+        {% endif %}
+    </dialog>
+{% endmacro %}

package/components/modal/_modal.scss

@@ -0,0 +1,32 @@
+$backdrop-colour: rgba(0, 0, 0, 0.8);
+
+.ons-modal {
+  border: none;
+  border-radius: 0.4rem;
+  box-shadow: 0 0 7px 0 #000;
+  display: none;
+  margin-left: 2rem;
+  margin-right: 2rem;
+  max-width: 500px;
+  padding: 2rem;
+  width: auto;
+
+  @media screen and (min-width: 600px) {
+    margin-left: auto;
+    margin-right: auto;
+    width: 100%;
+  }
+
+  &::backdrop {
+    backdrop-filter: blur(3px);
+    background: $backdrop-colour;
+  }
+
+  & + .backdrop {
+    background: $backdrop-colour;
+  }
+}
+
+.ons-modal-overlay {
+  overflow: hidden;
+}

package/components/modal/modal.dom.js

@@ -0,0 +1,14 @@
+import domready from '../../js/domready';
+
+async function modals() {
+  const modals = [...document.querySelectorAll('.ons-js-modal')];
+  const timeouts = [...document.querySelectorAll('.ons-js-timeout-modal')];
+
+  if (modals.length && !timeouts.length) {
+    const Modal = (await import('./modal')).default;
+
+    modals.forEach(component => new Modal(component));
+  }
+}
+
+domready(modals);

package/components/modal/modal.js

@@ -0,0 +1,104 @@
+import dialogPolyfill from 'dialog-polyfill';
+
+const overLayClass = 'ons-modal-overlay';
+
+export default class Modal {
+  constructor(component) {
+    this.component = component;
+    this.launcher = document.querySelector(`[data-modal-id=${component.id}]`);
+    this.closeButton = component.querySelector('.ons-js-modal-btn');
+    this.lastFocusedEl = null;
+
+    this.initialise();
+  }
+
+  initialise() {
+    if (!this.dialogSupported()) {
+      /* istanbul ignore next */
+      return;
+    }
+
+    if (this.launcher) {
+      this.launcher.addEventListener('click', this.openDialog.bind(this));
+    }
+
+    if (this.closeButton) {
+      this.closeButton.addEventListener('click', this.closeDialog.bind(this));
+    }
+  }
+
+  dialogSupported() {
+    if (typeof HTMLDialogElement === 'function') {
+      return true;
+    } else {
+      try {
+        dialogPolyfill.registerDialog(this.component);
+        return true;
+      } catch (error) {
+        /* istanbul ignore next */
+        return false;
+      }
+    }
+  }
+
+  openDialog(event) {
+    if (!this.isDialogOpen()) {
+      this.component.classList.add('ons-u-db');
+      document.querySelector('body').className += ' ' + overLayClass;
+      this.makePageContentInert();
+      this.saveLastFocusedEl();
+      if (event) {
+        const modal = document.getElementById(event.target.getAttribute('data-modal-id'));
+        modal.showModal();
+      } else {
+        this.component.showModal();
+      }
+    }
+  }
+
+  saveLastFocusedEl() {
+    this.lastFocusedEl = document.activeElement;
+    if (!this.lastFocusedEl || this.lastFocusedEl === document.body) {
+      this.lastFocusedEl = null;
+    } else if (document.querySelector) {
+      this.lastFocusedEl = document.querySelector(':focus');
+    }
+  }
+
+  setFocusOnLastFocusedEl(lastFocusedEl) {
+    if (lastFocusedEl) {
+      lastFocusedEl.focus();
+    }
+  }
+
+  makePageContentInert() {
+    if (document.querySelector('.ons-page')) {
+      document.querySelector('.ons-page').inert = true;
+      document.querySelector('.ons-page').setAttribute('aria-hidden', 'true');
+    }
+  }
+
+  removeInertFromPageContent() {
+    if (document.querySelector('.ons-page')) {
+      document.querySelector('.ons-page').inert = false;
+      document.querySelector('.ons-page').setAttribute('aria-hidden', 'false');
+    }
+  }
+
+  isDialogOpen() {
+    return this.component['open'];
+  }
+
+  closeDialog(event) {
+    if (this.isDialogOpen()) {
+      if (event) {
+        event.preventDefault();
+      }
+      this.component.classList.remove('ons-u-db');
+      document.querySelector('body').classList.remove(overLayClass);
+      this.component.close();
+      this.setFocusOnLastFocusedEl(this.lastFocusedEl);
+      this.removeInertFromPageContent();
+    }
+  }
+}

package/components/question/_macro.njk

@@ -9,9 +9,9 @@
 
     {% set descHtml %}
         {% if params.readDescriptionFirst is defined and params.readDescriptionFirst == true %} 
-            <span aria-hidden="true" {% if params.legendIsQuestionTitle is not defined %}class="ons-question__description"{% endif %}>{{ params.description | safe }}</span>
+            <div aria-hidden="true" {% if params.legendIsQuestionTitle is not defined %}class="ons-question__description"{% endif %}>{{ params.description | safe }}</div>
         {% elif params.legendIsQuestionTitle is not defined %}
-            <span class="ons-question__description">{{ params.description | safe }}</span>
+            <div class="ons-question__description">{{ params.description | safe }}</div>
         {% else %}
             {{ params.description | safe }}
         {% endif %}

package/components/radios/_macro.njk

@@ -21,10 +21,15 @@
             {% endif %}
             <span class="ons-radios__item{{ " ons-radios__item--no-border" if params.borderless }}">
                 <span class="ons-radio{{ " ons-radio--no-border" if params.borderless }}">
+                {%  if radio.other is defined and radio.other and radio.other.selectAllChildren is defined and radio.other.selectAllChildren == true %}
+                    {% set selectAllClass = ' ons-js-select-all-children' %}
+                {% else %}
+                    {% set selectAllClass = '' %}
+                {% endif %}
                     <input
                             type="radio"
                             id="{{ radio.id }}"
-                            class="ons-radio__input ons-js-radio{{ ' ' + radio.classes if radio.classes else '' }}{{ ' ons-js-other' if radio.other else '' }}{{ ' ons-js-select-all-children' if radio.other.selectAllChildren == true else '' }}"
+                            class="ons-radio__input ons-js-radio{{ ' ' + radio.classes if radio.classes else '' }}{{ ' ons-js-other' if radio.other else '' }}{{ selectAllClass }}"
                             value="{{ radio.value }}"
                             name="{{ params.name }}"
                             {% if (radio.checked is defined and radio.checked) or (params.value is defined and params.value == radio.value) %} checked {% endif %}
@@ -39,7 +44,6 @@
                             "classes": "ons-radio__label " + radio.label.classes | default(''),
                             "description": radio.label.description
                         }) }}
-
                     {% if radio.other is defined and radio.other %}
                         {% set otherType = radio.other.otherType | default('input') %}
                         <span class="ons-radio__other{{ " " + 'ons-radio__other--open' if radio.other.open else "" }}" id="{{ radio.id }}-other-wrap">

package/components/summary/_summary.scss

@@ -1,3 +1,5 @@
+@use 'sass:math';
+
 $summary-row-spacing: 1rem;
 $summary-col-spacing: 1rem;
 $hub-row-spacing: 1.3rem;
@@ -101,8 +103,8 @@ $hub-row-spacing: 1.3rem;
       padding-right: $summary-col-spacing;
 
       @include mq('s') {
-        padding-left: $summary-col-spacing / 2;
-        padding-right: $summary-col-spacing / 2;
+        padding-left: math.div($summary-col-spacing, 2);
+        padding-right: math.div($summary-col-spacing, 2);
 
         &:first-child {
           padding-left: $summary-col-spacing;

package/components/table/_table.scss

@@ -211,7 +211,7 @@
         }
 
         &:focus {
-          @extend a:focus;
+          @extend %a-focus;
           .ons-svg-icon {
             fill: $color-black;
           }

package/components/timeout-modal/_macro.njk

@@ -0,0 +1,26 @@
+{% from "components/modal/_macro.njk" import onsModal %}
+{% macro onsTimeoutModal(params) %}    
+    {% call onsModal({
+            "title": params.title,
+            "btnText": params.btnText,
+            "classes": "ons-js-timeout-modal",
+            "attributes": {
+                "data-redirect-url": params.redirectUrl,
+                "data-timeout-time": params.serverTimeoutTime,
+                "data-show-modal-time": params.showModalTimeInSeconds,
+                "data-server-session-expiry-endpoint": params.serverSessionExpiryEndpoint,
+                "data-countdown-text": params.countdownText,
+                "data-redirecting-text": params.redirectingText,
+                "data-minutes-text-singular": params.minutesTextSingular,
+                "data-minutes-text-plural": params.minutesTextPlural,
+                "data-seconds-text-singular": params.secondsTextSingular,
+                "data-seconds-text-plural": params.secondsTextPlural,
+                "aria-describedby": "timeout-time-remaining"
+            }
+        })
+    %}
+        <p>{{ params.textFirstLine }}</p>
+        <p class="ons-js-timeout-timer" aria-hidden="true" aria-relevant="additions"></p>
+        <p class="ons-js-timeout-timer-acc ons-u-vh" role="status" id="timeout-time-remaining"></p>
+    {% endcall %}
+{% endmacro %}

package/components/timeout-modal/timeout.dom.js

@@ -0,0 +1,16 @@
+import domready from '../../js/domready';
+
+async function modals() {
+  const timeouts = [...document.querySelectorAll('.ons-js-timeout-modal')];
+
+  if (timeouts.length) {
+    const Timeout = (await import('./timeout')).default;
+
+    timeouts.forEach(context => {
+      let url = context.getAttribute('data-server-session-expiry-endpoint');
+      new Timeout(context, url);
+    });
+  }
+}
+
+domready(modals);