@ons/design-system 44.1.2 → 45.0.3

package/components/access-code/uac.scss

@@ -1,19 +1,19 @@
 .ons-uac {
   &__input {
-    font-family: $font-mono;
+    font-family: $font-mono !important;
     font-weight: 700;
     letter-spacing: 0.14em;
     text-transform: uppercase;
     width: 15.1em;
 
     @media all and (min-width: 375px) {
-      font-size: 20px;
-      width: 15.1em;
+      font-size: 20px !important;
+      width: 15.1em !important;
     }
 
     @media all and (max-width: 374px) {
       letter-spacing: 0;
-      max-width: 12.6em;
+      max-width: 12.6em !important;
     }
 
     @media all and (max-width: 299px) {
@@ -21,7 +21,7 @@
     }
 
     @include mq('s') {
-      font-size: 24px;
+      font-size: 24px !important;
       max-width: 14.9em;
       width: 14.9em !important;
     }

package/components/autosuggest/autosuggest.ui.js

@@ -1,6 +1,6 @@
 import abortableFetch from '../../js/abortable-fetch';
 import { sanitiseAutosuggestText } from './autosuggest.helpers';
-import queryJson from './code.list.searcher';
+import runFuse from './fuse-config';
 
 export const baseClass = 'ons-js-autosuggest';
 
@@ -295,7 +295,7 @@ export default class AutosuggestUI {
 
   async fetchSuggestions(sanitisedQuery, data) {
     this.abortFetch();
-    const results = await queryJson(sanitisedQuery, data, this.lang, this.resultLimit);
+    const results = await runFuse(sanitisedQuery, data, this.lang, this.resultLimit);
     results.forEach(result => {
       result.sanitisedText = sanitiseAutosuggestText(result[this.lang], this.sanitisedQueryReplaceChars);
     });

package/components/autosuggest/{code.list.searcher.js → fuse-config.js}

@@ -1,11 +1,9 @@
 import Fuse from 'fuse.js';
 
-export default function queryJson(query, data, searchFields) {
+export default function runFuse(query, data, searchFields) {
   const options = {
     shouldSort: true,
     threshold: 0.2,
-    location: 1,
-    distance: 1000,
     keys: [
       {
         name: searchFields,

package/components/checkboxes/_checkbox-macro.njk

@@ -62,7 +62,7 @@
                             "dontWrap": true,
                             "value": params.other.value
                         })
-                    }}            
+                    }}
                 {% elif otherType == "checkboxes" %}
                     {% from "components/checkboxes/_macro.njk" import onsCheckboxes %}
                     {{

package/components/checkboxes/_macro.njk

@@ -72,7 +72,7 @@
                                 "otherType": checkbox.other.otherType,
                                 "options": checkbox.other.options,
                                 "width": checkbox.other.width,
-                                "classes": checkbox.other.classes | default('') + exclusiveClass | default(''),
+                                "classes": ("ons-input--error" if params.error else "") + checkbox.other.classes | default('') + exclusiveClass | default(''),
                                 "attributes": checkbox.other.attributes,
                                 "label": {
                                     "text": checkbox.other.label.text

package/components/fieldset/_macro.njk

@@ -12,7 +12,7 @@
                 class="ons-fieldset{% if params.classes is defined and params.classes %} {{ params.classes }}{% endif %}"
                 {% 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 }}{% if value is defined and value %}="{{ value }}"{% endif %} {% endfor %}{% endif %}
             >
-                <legend class="ons-fieldset__legend{% if params.legendClasses is defined and params.legendClasses %} {{ params.legendClasses }}{% endif %}">
+                <legend class="ons-fieldset__legend{% if params.legendIsQuestionTitle is defined and params.legendIsQuestionTitle %} ons-u-mb-no{% endif %}{% if params.legendClasses is defined and params.legendClasses %} {{ params.legendClasses }}{% endif %}">
                     {% if params.legendIsQuestionTitle %}
                         <h1 id="fieldset-legend-title" class="ons-fieldset__legend-title {% if params.legendTitleClasses is defined and params.legendTitleClasses %}{{ params.legendTitleClasses }}{% endif %}">
                             {{- params.legend | safe -}}

package/components/header/_header.scss

@@ -59,11 +59,10 @@
       margin-top: 0.8rem;
     }
 
-    &--with-description,
-    &--with-button {
+    &--with-description {
       @include mq(m) {
         margin-bottom: 0;
-        margin-top: 0.45rem;
+        margin-top: 0.5rem;
       }
     }
 
@@ -103,7 +102,7 @@
     margin: 0;
 
     @include mq(m) {
-      margin: 0 0 1rem;
+      margin: 0 0 1.1rem;
     }
   }
   // Modifier - Hero variant

package/components/header/_macro.njk

@@ -44,7 +44,7 @@
                     </div>
 
                     {% if params.language is defined and params.language or params.serviceLinks is defined and params.serviceLinks %}
-                        <div class="ons-header__links grid__col col-auto">
+                        <div class="ons-header__links ons-grid__col ons-col-auto">
                             {% if params.language is defined and params.language %}
                                 <div class="ons-grid__col ons-col-auto">
                                     {% from "components/language-selector/_macro.njk" import onsLanguageSelector %}
@@ -52,7 +52,7 @@
                                 </div>
                             {% endif %}
                             {% if params.serviceLinks is defined and params.serviceLinks %}
-                                <div class="ons-grid__col col-auto ons-u-d-no@xxs@m">
+                                <div class="ons-grid__col ons-col-auto ons-u-d-no@xxs@m">
                                     <nav class="ons-header-service-nav {{ params.serviceLinks.classes }}" aria-label="{{ params.serviceLinks.ariaLabel | default("Service links navigation") }}">
                                         <ul class="ons-header-service-nav__list" aria-label="{{ params.serviceLinks.ariaListLabel | default("Service Links") }}">
                                             {% for item in (params.serviceLinks.itemsList if params.serviceLinks.itemsList is iterable else params.serviceLinks.itemsList.items()) %}

package/components/highlight/_highlight.scss

@@ -0,0 +1,5 @@
+.ons-highlight {
+  background-color: $color-highlight;
+  font-style: normal;
+  padding: 0 2px;
+}

package/components/input/_input.scss

@@ -45,8 +45,8 @@
   }
 
   &--error:not(:focus) {
-    border: 1px solid $color-ruby-red;
-    box-shadow: inset 0 0 0 1px $color-ruby-red;
+    border: 1px solid $color-errors;
+    box-shadow: inset 0 0 0 1px $color-errors;
   }
 
   &--with-description {

package/components/metadata/_macro.njk

@@ -1,5 +1,5 @@
 {% macro onsMetadata(params) %}
-  <dl class="ons-metadata metadata__list ons-grid ons-grid--gutterless ons-u-cf ons-u-mb-l"{% if params.id is defined and params.id %} id="{{ params.id }}" {% endif %}{% if params.metadataLabel is defined and params.metadataLabel %} title="{{ params.metadataLabel }}" aria-label="{{ params.metadataLabel }}"{% endif %}>
+  <dl class="ons-metadata ons-metadata__list ons-grid ons-grid--gutterless ons-u-cf{{ (' ' + params.classes) if params.classes is defined and params.classes }}"{% if params.id is defined and params.id %} id="{{ params.id }}" {% endif %}{% if params.metadataLabel is defined and params.metadataLabel %} title="{{ params.metadataLabel }}" aria-label="{{ params.metadataLabel }}"{% endif %}>
     {% for item in (params.itemsList if params.itemsList is iterable else params.itemsList.items()) %}
       {% if item.term | length %}
           <dt class="ons-metadata__term ons-grid__col ons-col-{{ params.termCol }}@m">{{ item.term }}</dt>

package/components/metadata/_metadata.scss

@@ -1,6 +1,6 @@
 .ons-metadata {
   &__list {
-    margin: 0;
+    margin: 0 0 2rem;
   }
 
   &__term {

package/components/radios/_macro.njk

@@ -55,7 +55,7 @@
                                         "name": radio.other.name,
                                         "type": radio.other.type,
                                         "required": radio.other.required,
-                                        "classes": radio.other.classes | default(''),
+                                        "classes": ("ons-input--error" if params.error else "") + radio.other.classes | default(''),
                                         "width": radio.other.width | default('auto'),
                                         "attributes": radio.other.attributes,
                                         "label": {
@@ -74,7 +74,7 @@
                                         "id": radio.other.id,
                                         "name": radio.other.name,
                                         "options": radio.other.options,
-                                        "classes": radio.other.classes,
+                                        "classes": ("ons-input--error" if params.error else "") + radio.other.classes | default(''),
                                         "label": {
                                             "id": radio.other.id + "-label",
                                             "text": radio.other.label.text,

package/components/table-of-contents/_macro.njk

@@ -1,14 +1,14 @@
 {% macro onsTableOfContents(params) %}
   {% from "components/lists/_macro.njk" import onsList %}
   {% from "components/skip-to-content/_macro.njk" import onsSkipToContent %}
-  
-  {% if params.skipLink is defined and params.skipLink %}
-    <aside class="ons-toc-container" role="complementary">
+
+  <aside class="ons-toc-container" role="complementary">
+    {% if params.skipLink is defined and params.skipLink %}
       {{
-          onsSkipToContent({
-              "url": params.skipLink.url,
-              "text": params.skipLink.text
-          })
+        onsSkipToContent({
+          "url": params.skipLink.url,
+          "text": params.skipLink.text
+        })
       }}
     {% endif %}
 

package/components/textarea/_macro.njk

@@ -6,7 +6,7 @@
 
 
     {% set field %}
-        {% set textareaExlusiveClass = " ons-js-exclusive-group-item" if params.mutuallyExclusive else "" %}
+        {% set textareaExclusiveClass = " ons-js-exclusive-group-item" if params.mutuallyExclusive else "" %}
 
         {% if params.label is defined and params.label %}
             {{ onsLabel({
@@ -19,7 +19,7 @@
 
         <textarea
             id="{{ params.id }}"
-            class="ons-input ons-input--textarea {% if params.error is defined and params.error %} ons-input--error {% endif %}{% if params.charCheckLimit is defined and params.charCheckLimit and params.charCheckLimit.limit is defined and params.charCheckLimit.limit %} ons-js-char-limit-input{% endif %}{{ textareaExlusiveClass }} {{ params.classes }} {% if params.width is defined and params.width %}ons-input--w-{{ params.width }}{% endif %}"
+            class="ons-input ons-input--textarea {% if params.error is defined and params.error %} ons-input--error {% endif %}{% if params.charCheckLimit is defined and params.charCheckLimit and params.charCheckLimit.limit is defined and params.charCheckLimit.limit %} ons-js-char-limit-input{% endif %}{{ textareaExclusiveClass }} {{ params.classes }} {% if params.width is defined and params.width %}ons-input--w-{{ params.width }}{% endif %}"
             name="{{ params.name }}"
             rows="{{ params.rows | default(8) }}"
             {% if params.charCheckLimit is defined and params.charCheckLimit and params.charCheckLimit.limit is defined and params.charCheckLimit.limit %}

package/components/timeout-modal/_macro.njk

@@ -6,7 +6,7 @@
             "classes": "ons-js-timeout-modal",
             "attributes": {
                 "data-redirect-url": params.redirectUrl,
-                "data-timeout-time": params.serverTimeoutTime,
+                "data-server-session-expires-at": params.sessionExpiresAt,
                 "data-show-modal-time": params.showModalTimeInSeconds,
                 "data-server-session-expiry-endpoint": params.serverSessionExpiryEndpoint,
                 "data-countdown-text": params.countdownText,

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

@@ -8,7 +8,8 @@ async function modals() {
 
     timeouts.forEach(context => {
       let url = context.getAttribute('data-server-session-expiry-endpoint');
-      new Timeout(context, url);
+      let time = context.getAttribute('data-server-session-expires-at');
+      new Timeout(context, url, time);
     });
   }
 }

package/components/timeout-modal/timeout.js

@@ -34,7 +34,12 @@ export default class Timeout {
   }
 
   async initialise() {
-    this.expiryTime = await this.setNewExpiryTime();
+    if (this.initialExpiryTime && this.sessionExpiryEndpoint) {
+      this.expiryTime = this.initialExpiryTime;
+    } else {
+      this.expiryTime = await this.setNewExpiryTime();
+    }
+
     this.expiryTimeInMilliseconds = this.convertTimeToMilliSeconds(this.expiryTime);
 
     this.bindEventListeners();