@ons/design-system 46.1.3 → 48.0.0

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/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/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,

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

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