@ons/design-system 45.0.0 → 45.1.0

package/components/question/_macro.njk

@@ -11,41 +11,78 @@
         {% if params.readDescriptionFirst is defined and params.readDescriptionFirst == true %} 
             <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 %}
-            <div class="ons-question__description">{{ params.description | safe }}</div>
+            <div class="ons-question__description ons-u-mb-m">{{ params.description | safe }}</div>
         {% else %}
             {{ params.description | safe }}
         {% endif %}
     {% endset %}
 
     {% set instHtml %}
-        <div class="ons-question__instruction ons-u-mb-s">{{ params.instruction | safe }}</div>
+        <div class="ons-question__instruction ons-u-mb-m">{{ params.instruction | safe }}</div>
+    {% endset %}
+
+    {% set questionDefinition %}
+        {% from "components/collapsible/_macro.njk" import onsCollapsible %}
+        {% call onsCollapsible({
+            "id": params.definition.id,
+            "titleTag": 'h2',
+            "classes": 'ons-u-mb-m',
+            "title": params.definition.title
+        }) %}
+            {% if params.definition.content %}
+                {{ params.definition.content | safe }}
+            {% endif %}
+        {% endcall %}
+    {% endset %}
+
+    {% set questionGuidance %}
+        {% from "components/panel/_macro.njk" import onsPanel %}
+        {% call onsPanel({
+            "classes": "ons-u-mb-m"
+        }) %}
+            {% if params.guidance.content is defined and params.guidance.content %}
+                {{ params.guidance.content | safe }}
+            {% endif %}
+            {% if params.guidance.lists is defined and params.guidance.lists %}
+                {%- for item in params.guidance.lists -%}
+                    {% if item.listHeading is defined and item.listHeading %}
+                        <h2 class="ons-u-fs-r--b">{{ item.listHeading }}</h2>
+                    {% endif %}
+                    {% if item.listLeadingLine is defined and item.listLeadingLine %}
+                        <p>{{ item.listLeadingLine }}</h2>
+                    {% endif %}
+                    {% from "components/lists/_macro.njk" import onsList %}
+                    {{
+                        onsList({
+                            "itemsList": item.itemsList
+                        })
+                    }}
+                {% endfor -%}
+            {% endif -%}
+        {% endcall %}
     {% endset %}
 
     <div
         {% if params.id is defined and params.id %} id="{{ params.id }}"{% endif %}
-        class="ons-question{% if params.classes is defined and params.classes %} {{ params.classes }}{% endif %}"
+        class="ons-question ons-u-mb-l{% 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 %}
     >
-        {% if params.legendIsQuestionTitle %}
+        {% if params.legendIsQuestionTitle is defined and params.legendIsQuestionTitle %}
             {% from "components/fieldset/_macro.njk" import onsFieldset %}
 
             {# Resolves caller issue in jijna: https://github.com/pallets/jinja/issues/371 #}
             {% set content = caller() %}
-
-            {% call onsFieldset({
-                "legendIsQuestionTitle": params.legendIsQuestionTitle,
-                "legend": titleHtml,
-                "description": descHtml if params.description is defined and params.description else '',
-                "legendClasses": params.legendClasses,
-                "legendTitleClasses": params.legendTitleClasses
-            }) %}
-
-                {% if params.instruction is defined and params.instruction %}
-                    {{- instHtml -}}
-                {% endif %}
-
-                {{ content }}
-            {% endcall %}
+            <div class="ons-question__answer ons-u-mb-m">
+                {% call onsFieldset({
+                    "legendIsQuestionTitle": params.legendIsQuestionTitle,
+                    "legend": titleHtml,
+                    "description": descHtml if params.description is defined and params.description else '',
+                    "legendClasses": params.legendClasses,
+                    "legendTitleClasses": params.legendTitleClasses
+                }) %}
+                    {{ content }}
+                {% endcall %}
+            </div>
 
         {% else %}
             <h1 id="question-title" class="ons-question__title">
@@ -60,8 +97,43 @@
                 {{- instHtml | safe -}}
             {% endif %}
 
-            {{ caller () }}
+            {% if params.definition is defined and params.definition %}
+                {{- questionDefinition | safe -}}
+            {% endif %}
+
+            {% if params.guidance is defined and params.guidance %}
+                {{- questionGuidance | safe -}}
+            {% endif %}
+
+            <div class="ons-question__answer ons-u-mb-m">
+                {{ caller () }}
+            </div>
         {% endif %}
 
+        {% if params.justification is defined and params.justification %}
+            {% from "components/collapsible/_macro.njk" import onsCollapsible %}
+            {% call onsCollapsible({
+                "id": params.justification.id,
+                "titleTag": 'h2',
+                "classes": 'ons-u-mb-m',
+                "title": params.justification.title | default('Why we ask this question')
+            }) %}
+                {{ params.justification.content | safe }}
+            {% endcall %}
+        {% endif %}
     </div>
+
+    {% if params.submitButton is defined and params.submitButton %}
+        {% from "components/button/_macro.njk" import onsButton %}
+
+        {{
+            onsButton({
+                "id": params.submitButton.id,
+                "submitType": params.submitButton.submitType,
+                "text": params.submitButton.text | default ('Save and continue'),
+                "classes": params.submitButton.classes,
+                "attributes": params.submitButton.attributes
+            })
+        }}
+    {% endif %}
 {% endmacro %}

package/components/question/_question.scss

@@ -2,7 +2,8 @@
   margin: 1rem 0 0;
 
   &__title {
-    margin: 0 0 1rem;
+    @extend .ons-u-mb-m;
+
     em,
     .ons-highlight {
       background-color: $color-highlight;
@@ -15,6 +16,13 @@
       padding: 0 0.5rem;
     }
   }
+
+  &__description {
+    p:last-of-type {
+      margin-bottom: 0 !important;
+    }
+  }
+
   &__instruction {
     background-color: $color-instruction-tint;
     border: 5px solid $color-instruction;

package/components/select/_macro.njk

@@ -8,7 +8,8 @@
         "legendClasses": params.legendClasses,
         "dontWrap": params.dontWrap,
         "legendIsQuestionTitle": params.legendIsQuestionTitle,
-        "error": params.error
+        "error": params.error,
+        "inline": params.label.inline
     }) %}
         {{
             onsLabel({

package/components/summary/_macro.njk

@@ -22,7 +22,7 @@
                     {% endif %}
                     {% if group.headers is defined and group.headers and group.rows is defined and group.rows %}
                         <table class="ons-summary__items">
-                            <thead class="ons-u-vh">
+                            <thead {% if group.id is defined and group.id %}id="{{ group.id }}" {% endif %}class="ons-u-vh">
                                 <tr>
                                     {% for header in group.headers %}
                                         <th>{{ header }}</th>
@@ -35,7 +35,7 @@
                                 {% if row.error is defined and row.error %} {% set itemClass = " ons-summary__item--error" %}{% endif %}
                                 {% if row.total is defined and row.total %} {% set itemClass = itemClass + " ons-summary__item--total" %}{% endif %}
 
-                                <tbody class="ons-summary__item{{ itemClass }}">
+                                <tbody {% if row.id is defined and row.id %}id="{{ row.id }}" {% endif %}class="ons-summary__item{{ itemClass }}">
                                     {% if row.errorMessage is defined and row.errorMessage or (row.rowItems | length > 1 and row.rowTitle) %}
                                         <tr class="ons-summary__row">
                                             <th colspan="3" class="ons-summary__row-title ons-u-fs-r">{{ row.errorMessage or row.rowTitle }}</th>
@@ -43,7 +43,7 @@
                                     {% endif %}
 
                                     {% for rowItem in row.rowItems %}
-                                        <tr class="ons-summary__row{{ " ons-summary__row--has-values" if rowItem.valueList else "" }}">
+                                        <tr {% if rowItem.id is defined and rowItem.id %}id="{{ rowItem.id }}" {% endif %}class="ons-summary__row{{ " ons-summary__row--has-values" if rowItem.valueList else "" }}">
                                             <td
                                                 class="ons-summary__item-title"
                                                 {% if rowItem.rowTitleAttributes is defined and rowItem.rowTitleAttributes %}{% for attribute, value in (rowItem.rowTitleAttributes.items() if rowItem.rowTitleAttributes is mapping and rowItem.rowTitleAttributes.items else rowItem.rowTitleAttributes) %}{{attribute}}="{{value}}" {% endfor %}{% endif %}

package/components/table/_macro.njk

@@ -15,7 +15,7 @@
                 <thead class="ons-table__head">
                     <tr class="ons-table__row">
                         {% for th in params.ths %}
-                        <th scope="col" class="ons-table__header{{ '' + params.thClasses if params.thClasses is defined and params.thClasses }}{{ " ons-table__header--numeric" if th.numeric is defined and th.numeric }}"{% if th.ariaSort is defined and th.ariaSort %} aria-sort="{{- th.ariaSort | default('none') -}}"{% endif %}>
+                        <th scope="col" class="ons-table__header{{ ' ' + th.thClasses if th.thClasses is defined and th.thClasses }}{{ " ons-table__header--numeric" if th.numeric is defined and th.numeric }}"{% if th.ariaSort is defined and th.ariaSort %} aria-sort="{{- th.ariaSort | default('none') -}}"{% endif %}>
                             <span {% if 'sortable' in variants %}class="ons-u-vh"{% endif %}>{{- th.value -}}</span>
                             {% if 'sortable' in variants %}
                                 {{
@@ -33,7 +33,7 @@
                     {% for tr in params.trs %}
                     <tr class="ons-table__row{{ " ons-table__row--highlight" if tr.highlight }}" {% if tr.name is defined and tr.name %} name="{{ tr.name }}"{% endif %} {% if tr.id is defined and tr.id %} id="{{ tr.id }}"{% endif %}>
                         {% for td in tr.tds %}
-                        <td class="ons-table__cell {{ '' + td.tdClasses if td.tdClasses is defined and td.tdClasses }}{{ " ons-table__cell--numeric" if td.numeric is defined and td.numeric }}" {% if td.id is defined and td.id %} id="{{ td.id }}"{% endif %} {% if td.name is defined and td.name %} name="{{ td.name }}"{% endif %} {% if td.data is defined and td.data %} data-th="{{ td.data }}"{% endif %} {% if td.dataSort is defined and td.dataSort %} data-sort-value="{{ td.dataSort }}"{% endif %}>
+                        <td class="ons-table__cell{{ ' ' + td.tdClasses if td.tdClasses is defined and td.tdClasses }}{{ " ons-table__cell--numeric" if td.numeric is defined and td.numeric }}" {% if td.id is defined and td.id %} id="{{ td.id }}"{% endif %} {% if td.name is defined and td.name %} name="{{ td.name }}"{% endif %} {% if td.data is defined and td.data %} data-th="{{ td.data }}"{% endif %} {% if td.dataSort is defined and td.dataSort %} data-sort-value="{{ td.dataSort }}"{% endif %}>
                             {% if td.form is defined and td.form %}
                                 <form action="{{ td.form.action }}" method="{{ td.form.method | default('POST')}}">
                                     {{

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();
@@ -164,7 +169,8 @@ export default class Timeout {
       if (!canSetNewExpiry) {
         this.redirect();
       } else {
-        this.closeModalAndRestartTimeout();
+        const newExpiryTimeInMilliseconds = this.convertTimeToMilliSeconds(canSetNewExpiry).toString();
+        this.closeModalAndRestartTimeout(newExpiryTimeInMilliseconds);
       }
     }
   }
@@ -202,7 +208,7 @@ export default class Timeout {
       method: fetchMethod,
       headers: { 'Cache-Control': 'no-cache', 'Content-type': 'application/json; charset=UTF-8' },
     });
-    if (!response.ok) {
+    if (response.status === 401) {
       this.redirect();
       return false;
     }