@ons/design-system 46.1.4 → 48.0.1

package/components/button/_button.scss

@@ -209,6 +209,76 @@ $button-shadow-size: 3px;
     }
   }
 
+  &--text-link {
+    vertical-align: baseline;
+  }
+
+  &--text-link & {
+    &__inner {
+      background: transparent;
+      border: none;
+      border-radius: 0;
+      box-shadow: none;
+      color: $color-text-link;
+      font-weight: normal;
+      padding: 0;
+      .ons-svg-icon {
+        fill: $color-text-link;
+      }
+    }
+  }
+
+  &--text-link-inverse & {
+    &__inner {
+      color: $color-white;
+      .ons-svg-icon {
+        fill: $color-white;
+      }
+    }
+  }
+
+  &--text-link:hover &,
+  &--text-link:active &,
+  &--text-link.active & {
+    &__inner {
+      background: none;
+      color: $color-text-link-hover;
+      .ons-svg-icon {
+        fill: $color-text-link-hover;
+      }
+    }
+  }
+
+  &--text-link-inverse:hover &,
+  &--text-link-inverse:active &,
+  &--text-link-inverse.active & {
+    &__inner {
+      color: $color-branded-tint;
+      .ons-svg-icon {
+        fill: $color-branded-tint;
+      }
+    }
+  }
+
+  &--text-link:focus:hover & {
+    &__inner {
+      color: $color-black;
+    }
+  }
+
+  &--text-link:focus &,
+  &--text-link.active:focus &,
+  &--text-link:active:focus & {
+    &__inner {
+      background-color: $color-focus;
+      box-shadow: 0 -2px $color-focus, 0 4px $color-text-link-focus !important;
+      color: $color-text-link-focus;
+      .ons-svg-icon {
+        fill: $color-text-link-focus;
+      }
+    }
+  }
+
   &--ghost &,
   &--mobile & {
     &__inner {
@@ -232,6 +302,7 @@ $button-shadow-size: 3px;
   }
 
   &--ghost,
+  &--text-link,
   &--mobile {
     &:active,
     .active {
@@ -245,6 +316,7 @@ $button-shadow-size: 3px;
   }
 
   &--ghost:focus:hover,
+  &--text-link:focus:hover,
   &--mobile:focus:hover {
     outline: none;
   }
@@ -294,13 +366,15 @@ $button-shadow-size: 3px;
     }
   }
 
-  &--mobile[aria-expanded='true'] {
+  &--mobile[aria-expanded='true'],
+  &--text-link[aria-expanded='true'] {
     .ons-svg-icon {
       transform: rotate(270deg);
     }
   }
 
-  &--mobile {
+  &--mobile,
+  &--text-link {
     .ons-svg-icon {
       transform: rotate(90deg);
     }

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/error/_macro.njk

@@ -14,7 +14,6 @@
     {% call onsPanel({
         "type": "error",
         "id": params.id,
-        "classes": "ons-u-mb-s",
         "dsExample": params.dsExample
     }) %}
        {{ content | safe }}

package/components/header/_header-nav.scss

@@ -70,6 +70,14 @@
 }
 
 .ons-header-service-nav {
+  display: inline-block;
+
+  &--mobile {
+    background: $color-branded-tint;
+    padding: 1rem;
+    width: 100%;
+  }
+
   &__list {
     list-style: none;
     margin: 0;
@@ -79,9 +87,22 @@
   &__item {
     display: inline-block;
     margin: 0 0 0 1rem;
-
+    &--mobile {
+      display: block;
+      margin: 0 0 0.5rem;
+    }
     &:first-child {
       margin-left: 0;
     }
   }
+
+  .ons-language-links {
+    border-top: 1px solid $color-branded;
+    margin: 1.5rem 0 0;
+    padding: 1rem 0 0;
+
+    &__item {
+      margin: 0 0 0.5rem;
+    }
+  }
 }

package/components/header/_header.scss

@@ -44,9 +44,6 @@
       border-top: 3px solid $color-header;
       padding: 0.934rem 0;
     }
-    &--with-description {
-      height: auto;
-    }
   }
   &__title {
     @extend .ons-u-fs-r--b;
@@ -59,13 +56,6 @@
       margin-top: 0.8rem;
     }
 
-    &--with-description {
-      @include mq(m) {
-        margin-bottom: 0;
-        margin-top: 0.5rem;
-      }
-    }
-
     //to allow for differences in size between welsh and english logos
     &-census-logo-en {
       @include mq(xxs) {
@@ -94,7 +84,7 @@
       }
     }
   }
-  &__desc {
+  &__description {
     @extend .ons-u-fs-s;
     @extend .ons-u-fs-r\@s;
 
@@ -105,12 +95,14 @@
       margin: 0 0 1.1rem;
     }
   }
-  // Modifier - Hero variant
-  &--hero {
+  // Modifier - variants
+  &--description {
     .ons-header {
       &__title {
         @extend .ons-u-fs-m;
         @extend .ons-u-fs-xxl\@m;
+
+        margin-bottom: 0;
       }
     }
   }
@@ -135,11 +127,11 @@
     }
     &__grid-top {
       min-height: 36px;
-    }
-    &-service-nav__link {
-      color: $color-white;
-      &:hover {
-        text-decoration: underline solid $color-white 3px;
+      a {
+        color: $color-white;
+        &:hover {
+          text-decoration: underline solid $color-white 3px;
+        }
       }
     }
   }
@@ -157,13 +149,13 @@
   }
 
   .ons-header__logo--large {
-    @include mq(xxs, 399px) {
+    @include mq(xxs, 454px) {
       display: none;
     }
   }
 
   .ons-header__logo--small {
-    @include mq(400px) {
+    @include mq(455px) {
       display: none;
     }
   }