@ons/design-system 46.1.2 → 47.0.0

package/components/document-list/_macro.njk

@@ -0,0 +1,114 @@
+{% macro onsDocumentList(params) %}
+    <ul{% if params.id is defined and params.id %} id="{{ params.id }}"{% endif %} class="ons-document-list{{ ' ' + params.classes if params.classes is defined and params.classes else '' }}"{% 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 %}>
+        {% for document in (params.documents if params.documents is iterable else params.documents.items()) %}
+
+        <li class="ons-document-list__item{{ ' ons-document-list__item--featured' if document.featured is defined and document.featured }}{{ ' ons-document-list__item--full-width' if document.fullWidth is defined and document.fullWidth == true }}{{ ' ' + document.classes if document.classes is defined and document.classes else '' }}"{% if document.attributes is defined and document.attributes %}{% for attribute, value in (document.attributes.items() if document.attributes is mapping and document.attributes.items else document.attributes) %} {{attribute}}="{{value}}"{% endfor %}{% endif %}>
+
+            {% if document.fullWidth is defined and document.fullWidth == true %}
+
+                <div class="ons-container{{ ' ons-container--wide' if document.wide is defined and document.wide == true }}">
+
+            {% endif %}
+
+                    {% if document.thumbnail is defined or document.thumbnail == true %}
+
+                        <div class="ons-document-list__item-image{%- if document.metadata.file is defined and document.metadata.file %} ons-document-list__item-image--file{% endif %}" aria-hidden="true">
+                            <a class="ons-document-list__image-link{{ ' ons-document-list__image-link--placeholder' if not document.thumbnail.smallSrc }}" href="{{ document.url }}" tabindex="-1">
+                                {% if document.thumbnail.smallSrc is defined and document.thumbnail.smallSrc and document.thumbnail.largeSrc is defined and document.thumbnail.largeSrc %}
+                                    <img srcset="{{ document.thumbnail.smallSrc }} 1x, {{ document.thumbnail.largeSrc }} 2x" src="{{ document.thumbnail.smallSrc }}" alt="" loading="lazy">
+                                {% endif %}
+                            </a>
+                        </div>
+
+                    {% endif %}
+
+                    <div class="ons-document-list__item-content">
+
+                        <div class="ons-document-list__item-header{{ ' ons-document-list__item-header--reverse' if document.showMetadataFirst is defined and document.showMetadataFirst == true }}">
+
+                            {% set titleTag = params.titleTag | default("h2") %}
+
+                            <{{ titleTag }} class="ons-document-list__item-title ons-u-fs-m ons-u-mt-no ons-u-mb-xs">
+                                <a href="{{ document.url }}">{{ document.title }}
+                                {%- if document.metadata is defined and document.metadata and document.metadata.file is defined and document.metadata.file %}
+                                <span class="ons-u-vh">,
+
+                                    {% set fileMetadataItems = [] %}
+
+                                    {% if document.metadata.file.fileType is defined and document.metadata.file.fileType %}{% set fileMetadataItems = (fileMetadataItems.push(document.metadata.file.fileType + ' document download'), fileMetadataItems) %}{% endif %}
+                                    {% if document.metadata.file.fileSize is defined and document.metadata.file.fileSize %}{% set fileMetadataItems = (fileMetadataItems.push(document.metadata.file.fileSize), fileMetadataItems) %}{% endif %}
+                                    {% if document.metadata.file.filePages is defined and document.metadata.file.filePages %}{% set fileMetadataItems = (fileMetadataItems.push(document.metadata.file.filePages), fileMetadataItems) %}{% endif %}
+
+                                    {{ fileMetadataItems | join(', ') }}
+
+                                {% endif -%}
+
+                                </span></a>
+                            </{{ titleTag }}>
+
+                            {%- if document.metadata is defined and document.metadata %}
+
+                                <ul class="ons-document-list__item-metadata{% if document.description is defined and document.description %} ons-u-mb-xs{% else %} ons-u-mb-no{% endif %}">
+
+                                    {%- if document.metadata.date is defined and document.metadata.date %}
+                                        <li class="ons-document-list__item-attribute">
+                                            {% if document.metadata.date -%}
+                                                {% set prefixClasses = "ons-u-fw-b" if document.metadata.date.showPrefix is defined and document.metadata.date.showPrefix == true else "ons-u-vh" %}
+                                                <span class="{{ prefixClasses }}">{{ document.metadata.date.prefix | default("Published") }}: </span>
+                                            {%- endif -%}
+                                            {% if document.metadata.date.iso is defined and document.metadata.date.iso -%}
+                                                <time datetime="{{ document.metadata.date.iso }}">{{ document.metadata.date.short }}</time>
+                                            {%- endif %}
+                                        </li>
+                                    {% endif %}
+
+                                    {%- if document.metadata.type is defined and document.metadata.type and document.metadata.type.text is defined and document.metadata.type.text %}
+                                        <li class="ons-document-list__item-attribute{%- if document.metadata.file is defined and document.metadata.file %} ons-u-mr-no{% endif %}">
+                                            {%- if document.metadata.type.url is defined and document.metadata.type.url %}
+                                                <a class="ons-document-list__attribute-link" href="{{ document.metadata.type.url }}">
+                                            {% endif %}
+                                                    <span {% if not document.metadata.file and not document.metadata.type.url %}class="ons-u-fw-b"{% endif %}>{{ document.metadata.type.text }}{%- if document.metadata.type.ref is defined and document.metadata.type.ref %}: {% elif document.metadata.file is defined and document.metadata.file %},{% endif %}</span>
+                                            {%- if document.metadata.type.url is defined and document.metadata.type.url %}
+                                                </a>
+                                            {% endif %}
+                                            {%- if document.metadata.type.ref is defined and document.metadata.type.ref %}
+                                                <span>{{ document.metadata.type.ref }}</span>
+                                            {% endif %}
+                                        </li>
+                                    {% endif %}
+
+                                    {%- if document.metadata.file is defined and document.metadata.file and document.metadata.file.fileType is defined and document.metadata.file.fileType %}
+
+                                        <li class="ons-document-list__item-attribute" aria-hidden="true">
+                                            {% set fileMetadataItems = [] %}
+
+                                            {% if document.metadata.file.fileType is defined and document.metadata.file.fileType %}{% set fileMetadataItems = (fileMetadataItems.push(document.metadata.file.fileType), fileMetadataItems) %}{% endif %}
+                                            {% if document.metadata.file.fileSize is defined and document.metadata.file.fileSize %}{% set fileMetadataItems = (fileMetadataItems.push(document.metadata.file.fileSize), fileMetadataItems) %}{% endif %}
+                                            {% if document.metadata.file.filePages is defined and document.metadata.file.filePages %}{% set fileMetadataItems = (fileMetadataItems.push(document.metadata.file.filePages), fileMetadataItems) %}{% endif %}
+
+                                            {{ fileMetadataItems | join(', ') }}
+                                        </li>
+
+                                    {% endif -%}
+                                </ul>
+
+                            {% endif %}
+                        </div>
+
+                        {% if document.description is defined and document.description %}
+                            <div class="ons-document-list__item-description">{{ document.description | safe }}</div>
+                        {% endif %}
+
+                    </div>
+
+            {% if document.fullWidth is defined and document.fullWidth == true %}
+
+                </div>
+
+            {% endif %}
+
+        </li>
+        {% endfor %}
+    </ul>
+
+{% endmacro %}

package/components/document-list/document-list.scss

@@ -0,0 +1,182 @@
+.ons-document-list {
+  @extend .ons-list--bare;
+
+  margin-bottom: 0;
+
+  &__item {
+    border-bottom: 1px solid $color-borders-list;
+    margin: 0 0 1.5rem;
+    padding: 0 0 1.5rem;
+
+    @include mq(xs) {
+      align-items: flex-start;
+      display: flex;
+    }
+
+    &:last-of-type {
+      border-bottom: 0;
+      margin: 0;
+    }
+  }
+
+  &__item-image {
+    flex: 0 0 auto;
+    margin-bottom: 1rem;
+    width: 136px;
+
+    @include mq(xs) {
+      margin-right: 1.5rem;
+    }
+
+    @include mq(m) {
+      margin-bottom: 0;
+    }
+  }
+
+  &__item-image & {
+    &__image-link {
+      &--placeholder {
+        height: 96px;
+      }
+    }
+  }
+
+  &__item-image--file {
+    width: 96px;
+  }
+
+  &__item-image--file & {
+    &__image-link {
+      border-color: $color-borders-document-image;
+
+      &--placeholder {
+        height: 136px;
+      }
+    }
+  }
+
+  &__image-link {
+    border: 2px solid transparent;
+    box-sizing: content-box;
+    display: block;
+    width: 100%;
+
+    &:focus {
+      background-color: $color-placeholder !important;
+      border: 2px solid $color-borders-document-image-focus;
+      box-shadow: none;
+      outline: 4px solid $color-focus !important;
+      outline-offset: 0;
+    }
+
+    &--placeholder {
+      background-clip: padding-box;
+      background-color: $color-borders-document-image;
+      background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3e%3cpath fill='%23fff' d='M0 19.39c.49-1 1-2 1.55-2.93A31.59 31.59 0 0 1 0 11.72v7.67ZM3 0S0 0 0 3.7v2a34.85 34.85 0 0 0 2.17 9.76A31.2 31.2 0 0 1 8.3 8.3c4.84-4.16 11.36-7 20.21-8.29Zm28.84 2c-10.11 1-17 3.86-22 8.1a29.78 29.78 0 0 0-6.49 8C7.26 25.65 14.66 31.19 27 32h1.21A3.71 3.71 0 0 0 32 27.91V2a.41.41 0 0 1-.16 0Zm-26 21.49a25.94 25.94 0 0 1-3-4.4A48 48 0 0 0 0 25.71V32h20.23a26.41 26.41 0 0 1-14.39-8.49Z'/%3e%3c/svg%3e");
+      background-position: center;
+      background-repeat: no-repeat;
+      background-size: 32px 32px;
+      height: 100%;
+    }
+  }
+
+  &__item-metadata {
+    @extend .ons-list--bare;
+
+    line-height: 1.2 !important;
+  }
+
+  &__item-attribute {
+    color: $color-text-metadata;
+    display: inline-block;
+    margin: 0 1rem 0 0;
+
+    @extend .ons-u-fs-s;
+  }
+
+  &__attribute-link {
+    color: inherit;
+
+    &:hover {
+      color: $color-text-metadata;
+      text-decoration: underline solid $color-text-metadata 2px;
+    }
+  }
+
+  &__item-description {
+    margin-bottom: 0;
+    max-width: 660px; // Equivalent to 8 Columns
+
+    p:last-of-type {
+      margin-bottom: 0;
+    }
+  }
+}
+
+// Featured document
+.ons-document-list {
+  &__item {
+    &--featured {
+      background-color: $color-banner-bg;
+      border-bottom: none;
+      display: block;
+      padding: 2rem;
+
+      @include mq(m) {
+        align-items: flex-start;
+        display: flex;
+
+        .ons-container {
+          display: flex;
+        }
+      }
+
+      // Increase thumbnail image size
+      .ons-document-list__item-image {
+        width: 248px;
+
+        & &__image-link {
+          &--placeholder {
+            height: 96px;
+          }
+        }
+
+        @include mq(m) {
+          margin-right: 2.5rem;
+          width: 379px;
+
+          & &__image-link {
+            &--placeholder {
+              height: 248px;
+            }
+          }
+        }
+      }
+
+      // Show metadata above title
+      .ons-document-list__item-header {
+        &--reverse {
+          display: flex;
+          flex-direction: column-reverse;
+          margin-bottom: 0.5rem;
+        }
+      }
+
+      // Increase font size
+      .ons-document-list__item-title {
+        @extend .ons-u-fs-l;
+      }
+
+      // If featured item is first in same list
+      & + .ons-document-list__item {
+        border-top: none;
+        margin-top: 0;
+      }
+    }
+
+    // If featured item is full width
+    &--full-width {
+      padding: 2rem 0;
+    }
+  }
+}

package/components/download-resources/_download-resources.scss

@@ -1,8 +1,9 @@
 .ons-adv-filter {
   &__gallery {
-    border-top: 1px solid $color-grey-15;
+    border-top: 1px solid $color-borders-list;
     margin-left: 0;
     padding-left: 0;
+    padding-top: 1.5rem;
   }
 
   &__item {
@@ -137,14 +138,6 @@ body:not(.ons-js-enabled) {
   }
 }
 
-.ons-filter__item {
-  border-bottom: 1px solid $color-grey-15;
-  display: block; // Accessible way of removing bullets (don’t use list-style-type: none; https://github.com/jensimmons/cssremedy/issues/15#issuecomment-462174177)
-  margin-bottom: 0; // Reset default margin bottom on list items
-  padding-bottom: 1.5rem;
-  padding-top: 1.5rem;
-}
-
 // Prevent scrollbars on body
 .ons-no-scroll {
   overflow-y: hidden;

package/components/download-resources/download-resources.js

@@ -920,8 +920,8 @@ Math.easeInOutQuad = function(t, b, c, d) {
   }
 
   function getInputListLabel(section, inputs) {
-    let counter = 0;
-    label = '';
+    let counter = 0,
+      label = '';
     for (let i = 0; i < inputs.length; i++) {
       if (inputs[i].checked) {
         let labelElement = inputs[i].parentNode.getElementsByTagName('label');

package/components/input/_macro.njk

@@ -153,9 +153,8 @@
             "id": params.fieldId,
             "classes": params.fieldClasses,
             "dontWrap": params.dontWrap,
-            "legendIsQuestionTitle": params.legendIsQuestionTitle,
             "error": params.error,
-            "inline": params.label.inline
+            "inline": params.label.inline if params.label is defined and params.label else ''
         }) %}
             {% if charCheckField is defined and charCheckField %}
                 {{ charCheckField | safe }}

package/components/select/_macro.njk

@@ -7,9 +7,8 @@
         "classes": params.fieldClases,
         "legendClasses": params.legendClasses,
         "dontWrap": params.dontWrap,
-        "legendIsQuestionTitle": params.legendIsQuestionTitle,
         "error": params.error,
-        "inline": params.label.inline
+        "inline": params.label.inline if params.label is defined and params.label else ''
     }) %}
         {{
             onsLabel({

package/components/textarea/_macro.njk

@@ -68,7 +68,6 @@
             "id": params.fieldId,
             "classes": params.fieldClasses,
             "dontWrap": params.dontWrap,
-            "legendIsQuestionTitle": params.legendIsQuestionTitle,
             "error": params.error
         }) %}
             {{ field | safe }}

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

@@ -8,6 +8,9 @@ export default class TimeoutModal {
     this.initialExpiryTime = initialExpiryTime;
     this.continueButton = context.querySelector('.ons-js-modal-btn');
     this.modalVisibleInMilliseconds = context.getAttribute('data-show-modal-time') * 1000;
+    this.expiryTime = '';
+    this.expiryTimeInMilliseconds = 0;
+    this.shouldRestartCheck = false;
 
     // Create modal instance
     this.modal = new Modal(this.context);
@@ -27,30 +30,52 @@ export default class TimeoutModal {
   startTimeout() {
     clearTimeout(this.showModalTimeout);
     if (this.initialExpiryTime) {
-      this.totalMilliseconds = this.timeout.expiryTimeInMilliseconds;
+      this.expiryTime = this.timeout.expiryTime;
+      this.expiryTimeInMilliseconds = this.timeout.convertTimeToMilliSeconds(this.expiryTime);
     } else {
       // For demo purposes
-      this.totalMilliseconds = 60000;
+      this.expiryTimeInMilliseconds = 60000;
     }
     this.showModalTimeout = setTimeout(
       this.openModalAndStartCountdown.bind(this),
-      this.totalMilliseconds - this.modalVisibleInMilliseconds,
+      this.expiryTimeInMilliseconds - this.modalVisibleInMilliseconds,
     );
   }
 
   async openModalAndStartCountdown() {
-    const modalWillOpen = await this.timeout.hasExpiryTimeResetInAnotherTab();
+    const modalWillOpen = await this.hasExpiryTimeResetInAnotherTab();
     if (modalWillOpen && !this.modal.isDialogOpen()) {
       this.modal.openDialog();
       this.timeout.startUiCountdown();
+
+      this.shouldRestartCheck = setInterval(async () => {
+        await this.hasExpiryTimeResetInAnotherTab();
+      }, 20000);
     }
   }
 
-  closeModalAndRestartTimeout() {
+  async hasExpiryTimeResetInAnotherTab() {
+    const checkExpiryTime = await this.timeout.getExpiryTime();
+    if (checkExpiryTime.substring(0, 19) != this.timeout.expiryTime.substring(0, 19)) {
+      // Substring is required as endpoint can at random return milliseconds with expiry time
+      this.expiryTime = checkExpiryTime;
+      this.expiryTimeInMilliseconds = this.timeout.convertTimeToMilliSeconds(checkExpiryTime);
+      this.closeModalAndRestartTimeout(this.expiryTimeInMilliseconds);
+    } else {
+      return true;
+    }
+  }
+
+  async closeModalAndRestartTimeout(time) {
+    clearInterval(this.shouldRestartCheck);
+
+    if (typeof timeInMilliSeconds !== 'string') {
+      time = false;
+    }
     if (this.modal.isDialogOpen()) {
       this.modal.closeDialog();
     }
-    this.timeout.restartTimeout();
+    await this.timeout.restartTimeout(time);
     this.startTimeout();
   }
 

package/components/upload/_macro.njk

@@ -19,7 +19,6 @@
         "id": params.fieldId,
         "classes": params.fieldClasses,
         "dontWrap": params.dontWrap,
-        "legendIsQuestionTitle": params.legendIsQuestionTitle,
         "error": params.error
     }) %}
         {{ field | safe }}