@ons/design-system 47.0.0 → 48.0.0

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/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;
     }
   }

package/components/header/_macro.njk

@@ -11,7 +11,7 @@
         {% set currentLanguageISOCode = currentLanguage.ISOCode %}
     {% endif %}
 
-    <header class="ons-header {{ params.classes if params.classes }}" role="banner">
+    <header class="ons-header {% if params.variants is not string %}{% for variant in params.variants %} ons-header--{{ variant }}{% endfor %}{% else %} ons-header--{{ params.variants }}{% endif %}" role="banner">
         {% if params.phase is defined and params.phase %}
             {% from "components/phase-banner/_macro.njk" import onsPhaseBanner %}
             {{ onsPhaseBanner(params.phase) }}
@@ -19,7 +19,6 @@
         <div class="ons-header__top">
             <div class="ons-container{{ ' ons-container--full-width' if params.fullWidth }}{{ ' ons-container--wide' if params.wide }}">
                 <div class="ons-header__grid-top ons-grid ons-grid--gutterless ons-grid--flex ons-grid--between ons-grid--vertical-center ons-grid--no-wrap{{ ' ons-header__grid-top-tall' if params.customHeaderLogo is defined and params.customHeaderLogo }}">
-
                     <div class="ons-grid__col ons-col-auto">
                         <div class="ons-header__logo--large">
                             {%-if params.logoHref is defined and params.logoHref %}<a class="ons-header__logo-link" href="{{ params.logoHref }}">{% endif -%}
@@ -42,20 +41,28 @@
                             {% if params.logoHref is defined and params.logoHref %}</a>{% endif %}
                         </div>
                     </div>
-
                     {% if params.language is defined and params.language or params.serviceLinks is defined and params.serviceLinks %}
                         <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">
+                                <div class="ons-grid__col ons-col-auto {{ ' ons-u-mr-s ons-u-d-no@xxs@xs' if params.serviceLinks is defined and params.serviceLinks else '' }}">
                                     {% from "components/language-selector/_macro.njk" import onsLanguageSelector %}
                                     {{ onsLanguageSelector(params.language) }}
                                 </div>
                             {% endif %}
                             {% if params.serviceLinks is defined and params.serviceLinks %}
-                                <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") }}">
+                                {% if params.serviceLinks.itemsList | length == 1 and params.language is defined and params.language %}
+                                    {% set breakpoint = 'xs' %}
+                                    {% set controlVisibility = true %}
+                                {% elif params.serviceLinks.itemsList | length > 1 %}
+                                    {% set breakpoint = 'm' %}
+                                    {% set controlVisibility = true %}
+                                {% else %}
+                                    {% set controlVisibility = false %}
+                                {% endif %}
+                                <div class="ons-grid__col ons-col-auto{% if controlVisibility == true %} ons-u-d-no@xxs@{{ breakpoint }}{% endif %}">
+                                    <nav class="ons-header-service-nav ons{{ 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()) %}
+                                            {% for item in (params.serviceLinks.itemsList if params.serviceLinks.itemsList is iterable else params.serviceLinks.itemsList.items()) %}                                                
                                                 <li class="ons-header-service-nav__item">
                                                     <a
                                                         href="{{ item.url }}"
@@ -67,13 +74,55 @@
                                         </ul>
                                     </nav>
                                 </div>
+                                {% if params.serviceLinks.itemsList | length > 1  or params.language is defined and params.language %}
+                                    {% if params.variants == 'internal' %}
+                                        {% set buttonVariant = ["text-link", "text-link-inverse"] %}
+                                    {% else %}
+                                        {% set buttonVariant = "text-link" %}
+                                    {% endif %}
+                                    <div class="ons-grid__col ons-col-auto ons-u-d-no@{{ breakpoint }}">
+                                        {{ onsButton({
+                                            "text": params.serviceLinks.toggleServicesButton.text | default("Menu") ,
+                                            "classes": "ons-u-d-no ons-js-toggle-services",
+                                            "buttonStyle": "mobile",
+                                            "variants": buttonVariant,
+                                            "attributes": {
+                                                "aria-label": params.serviceLinks.toggleServicesButton.ariaLabel | default("Toggle menu") ,
+                                                "aria-controls": params.serviceLinks.id,
+                                                "aria-haspopup": "true",
+                                                "aria-expanded": "false"
+                                            }
+                                        }) }}
+                                    </div>
+                                {% endif %}
                             {% endif %}
                         </div>
                     {% endif %}
                 </div>
             </div>
+            {% if params.serviceLinks is defined and params.serviceLinks %}
+                <nav class="ons-header-service-nav ons-header-service-nav--mobile ons-u-d-no ons-js-services-mobile-nav" id="{{ params.serviceLinks.id }}" 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()) %}                                                
+                            <li class="ons-header-service-nav__item ons-header-service-nav__item--mobile">
+                                <a
+                                    href="{{ item.url }}"
+                                    class="ons-header-service-nav__link"
+                                    {% if item.id is defined and item.id %} id="{{ item.id }}"{% endif %}
+                                >{{ item.title }}</a>
+                            </li>
+                        {% endfor %}
+                        {% if params.language is defined and params.language %}
+                            <div class="ons-u-d-no@xs">
+                                {% from "components/language-selector/_macro.njk" import onsLanguageSelector %}
+                                {{ onsLanguageSelector(params.language) }}
+                            </div>
+                        {% endif %}
+                    </ul>
+                </nav>
+            {% endif %}
         </div>
-        <div class="ons-header__main{% if params.desc is defined and params.desc %} ons-header__main--with-description{% endif %}">
+        <div class="ons-header__main">
             <div class="ons-container{{ ' ons-container--full-width' if params.fullWidth }}{{ ' ons-container--wide' if params.wide }}">
                 <div class="ons-grid ons-grid--gutterless ons-grid--flex ons-grid--between ons-grid--vertical-center ons-grid--no-wrap">
                     <div class="ons-grid__col ons-col-auto ons-u-flex-shrink{% if params.titleLogo == 'census-logo-en' %} ons-header__title-census-logo-en{% endif %}">
@@ -87,9 +136,12 @@
                                 })
                             }}
                         {% else %}
-                            <{{ 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 }}>
+                            <{{ title_tag }} class="ons-header__title">{{ params.title }}</{{ title_tag }}>
                         {% endif %}
                         {% if params.titleLogoHref is defined and params.titleLogoHref %}</a>{% endif %}
+                        {% if params.description is defined and params.description %}
+                            <p class="ons-header__description">{{ params.description }}</p>
+                        {% endif %}
                     </div>
                     {% if params.button is defined and params.button %}
                         <div class="ons-grid__col ons-col-auto ons-u-flex-no-shrink ons-u-d-no@xxs@m">
@@ -105,7 +157,7 @@
                             }) }}
                         </div>
                     {% endif %}
-                    {% if params.toggleButton is defined and params.toggleButton or params.autosuggest is defined and params.autosuggest %}
+                    {% if params.navigation.toggleButton is defined and params.navigation.toggleButton or params.autosuggest is defined and params.autosuggest %}
                         <div class="ons-grid__col ons-col-auto ons-u-flex-no-shrink ons-u-d-no@m">
                             {% if params.autosuggest is defined and params.autosuggest and isPatternLib is defined and isPatternLib %}
                                 <span class="ons-grid ons-u-d-no@xxs@xs">
@@ -124,14 +176,14 @@
                                     }) }}
                                 </span>
                             {% endif %}
-                            {% if params.toggleButton is defined and params.toggleButton %}
+                            {% if params.navigation.toggleButton is defined and params.navigation.toggleButton %}
                                 {{ onsButton({
-                                    "text": params.toggleButton.text,
+                                    "text": params.navigation.toggleButton.text | default("Menu"),
                                     "classes": "ons-u-ml-xs ons-u-d-no ons-js-toggle-main",
                                     "buttonStyle": "mobile",
                                     "variants": ["mobile", "ghost"],
                                     "attributes": {
-                                        "aria-label": params.toggleButton.ariaLabel | default("Toggle main menu") ,
+                                        "aria-label": params.navigation.toggleButton.ariaLabel | default("Toggle menu") ,
                                         "aria-controls": params.navigation.id,
                                         "aria-haspopup": "true",
                                         "aria-expanded": "false"
@@ -141,9 +193,6 @@
                         </div>
                     {% endif %}
                 </div>
-                {% if params.desc is defined and params.desc %}
-                    <p class="ons-header__desc">{{ params.desc }}</p>
-                {% endif %}
             </div>
         </div>
         {% if params.navigation is defined and params.navigation %}

package/components/header/header-nav.dom.js

@@ -4,6 +4,9 @@ domready(async () => {
   const toggleMainBtn = document.querySelector('.ons-js-toggle-main');
   const navEl = document.querySelector('.ons-js-header-nav');
   const navHideClass = 'ons-u-d-no@xxs@m';
+  const toggleServicesBtn = document.querySelector('.ons-js-toggle-services');
+  const servicesEl = document.querySelector('.ons-js-services-mobile-nav');
+  const servicesHideClass = 'ons-u-d-no';
   const toggleSearchBtn = document.querySelector('.ons-js-toggle-search');
   const searchEl = document.querySelector('.ons-js-header-search');
   const searchHideClass = 'ons-u-d-no@xs@m';
@@ -19,4 +22,10 @@ domready(async () => {
 
     new searchToggle(toggleSearchBtn, searchEl, searchHideClass).registerEvents();
   }
+
+  if (toggleServicesBtn) {
+    const servicesToggle = (await import('./header-nav')).default;
+
+    new servicesToggle(toggleServicesBtn, servicesEl, servicesHideClass).registerEvents();
+  }
 });

package/components/header/header-nav.js

@@ -11,7 +11,6 @@ export default class NavToggle {
     this.nav = nav;
     this.hideClass = hideClass;
     this.toggle.classList.remove('ons-u-d-no');
-
     this.setAria();
     onViewportChange(this.setAria.bind(this));
   }
@@ -56,7 +55,11 @@ export default class NavToggle {
     } else if (hasAria) {
       this.toggle.removeAttribute(attrExpanded);
       this.nav.removeAttribute(attrHidden);
-      this.nav.classList.remove(this.hideClass);
+      if (this.hideClass !== 'ons-u-d-no') {
+        this.nav.classList.remove(this.hideClass);
+      } else {
+        this.closeNav();
+      }
     }
   }
 }

package/components/lists/_macro.njk

@@ -38,21 +38,19 @@
                         {% set itemText = item.title %}
                     {% endif %}
 
-                    {%- if item.index is defined and item.index or item.prefix is defined and item.prefix or (params.iconPosition is defined and params.iconPosition == 'before') -%}
+                    {%- if item.prefix is defined and item.prefix or (params.iconPosition is defined and params.iconPosition == 'before') -%}
                         <span class="ons-list__prefix"{% if listEl != 'ol' %} aria-hidden="true"{% endif %}>
-                        {%- if item.prefix is defined and item.prefix -%}
-                            {{- item.prefix -}}.
-                        {%- elif (item.index is defined and item.index and listEl != 'ol') or (item.index is defined and item.index and listEl == 'ol' and 'bare' in variants) -%}
-                            {{- loop.index -}}.
-                        {% elif params.iconPosition is defined and params.iconPosition == 'before' %}
-                            {% from "components/icons/_macro.njk" import onsIcon %}
-                            {{
-                                onsIcon({
-                                    "iconType": iconType,
-                                    "iconSize": params.iconSize
-                                })
-                            }}
-                        {%- endif -%}
+                            {%- if item.prefix is defined and item.prefix -%}
+                                {{- item.prefix -}}.
+                            {% elif params.iconPosition is defined and params.iconPosition == 'before' %}
+                                {% from "components/icons/_macro.njk" import onsIcon %}
+                                {{
+                                    onsIcon({
+                                        "iconType": iconType,
+                                        "iconSize": params.iconSize
+                                    })
+                                }}
+                            {%- endif -%}
                         </span>
                     {%- endif -%}
                     {%- if item.url is defined and item.url and item.current != true -%}
@@ -65,7 +63,7 @@
                                 })
                             }}
                         {%- else -%}
-                            <a href="{{ item.url }}" class="ons-list__link {% if item.variants == 'inPageLink' %}ons-js-inpagelink {% endif %} {{ item.classes }}"{% if item.index is defined and item.index %} data-qa="list-item-{{ loop.index }}"{% endif %}{% if item.target is defined and item.target %} target="{{ item.target }}"{% endif %}{% if item.rel is defined and item.rel %} rel="{{ item.rel }}"{% endif %}>
+                            <a href="{{ item.url }}" class="ons-list__link{% if item.variants == 'inPageLink' %} ons-js-inpagelink{% endif %}{% if item.classes is defined and item.classes %} {{ item.classes }}{% endif %}"{% if item.target is defined and item.target %} target="{{ item.target }}"{% endif %}{% if item.attributes is defined and item.attributes %}{% for attribute, value in (item.attributes.items() if item.attributes is mapping and item.attributes.items else item.attributes) %} {{ attribute }}{% if value is defined and value %}="{{ value }}"{% endif %}{% endfor %}{% endif %}>
                                 {%- if item.prefix is defined and item.prefix -%}<span class="ons-u-vh">{{- item.prefix -}}</span>{%- endif -%} {{- itemText | safe -}}
                                 {%- if item.target is defined and item.target == "_blank" -%}<span class="ons-u-vh">{{- item.screenreaderMessage | default("this link will open in a new tab") -}}</span>{%- endif -%}
                             </a>

package/components/panel/_macro.njk

@@ -27,10 +27,8 @@
     {% endif %}
 
     {% if params is defined and params and params.type == "warn-branded" or params.type == "announcement" %}
-    <div class="{{containerClass}}">
-        <div class="ons-container">
-    {% elif params.type is defined and params.type == "warn" %}
-        <div class="ons-container">
+        <div class="{{containerClass}}">
+            <div class="ons-container">
     {% endif %}
 
         <div {% if params is defined and params and params.type == 'error' and params.title is defined and params.title %}aria-labelledby="error-summary-title" role="alert" tabindex="-1" {% if params.dsExample != true %}autofocus="autofocus" {% endif %}{% endif %}class="ons-panel{{ typeClass }}{{ iconClass }}{{ noTitleClass }}{{ spaciousClass }}{{ classes }}"{% if params is defined and params and params.attributes is defined and params.attributes %}{% for attribute, value in (params.attributes.items() if params is defined and params and params.attributes is mapping and params.attributes.items is defined and params.attributes.items else params.attributes) %}{{attribute}}="{{value}}" {% endfor %}{% endif %}{% if params is defined and params and params.id is defined and params.id %} id="{{params.id}}"{% endif %}>
@@ -91,14 +89,11 @@
             <div class="ons-panel__body{% if params is defined and params and params.iconSize is defined and params.iconSize %} ons-svg-icon-margin--{{ params.iconSize }}{% endif %}">{{ (params.body if params else "") | safe }}
                 {{ caller() if caller }}
             </div>
-
         </div>
 
     {% if params is defined and params and params.type == "warn-branded" or params.type == "announcement"  %}
+            </div>
         </div>
-    </div>
-    {% elif params.type is defined and params.type == "warn" %}
-    </div>
     {% endif %}
 
 {% endmacro %}

package/components/panel/_panel.scss

@@ -213,9 +213,10 @@
         margin-top: -15% !important;
       }
     }
-    &__body {
-      padding-left: 2rem;
-    }
+  }
+
+  &__icon + &__body {
+    padding-left: 2rem;
   }
 
   &--bare & {
@@ -228,6 +229,7 @@
     }
   }
 
+  &--info,
   &--bare,
   &--success,
   &--warn,