@ons/design-system 70.0.8 → 70.0.10

package/components/mutually-exclusive/example-mutually-exclusive-number.njk

@@ -1,10 +1,12 @@
 {% from "components/input/_macro.njk" import onsInput %}
 {% from "components/question/_macro.njk" import onsQuestion %}
 
-{% call onsQuestion({
-    "title": "What was your annual income before tax in 2018/19?",
-    "legendIsQuestionTitle": true
-}) %}
+{%
+    call onsQuestion({
+        "title": "What was your annual income before tax in 2018/19?",
+        "legendIsQuestionTitle": true
+    })
+%}
     {{
         onsInput({
             "id": "currency",

package/components/mutually-exclusive/example-mutually-exclusive-textarea.njk

@@ -1,10 +1,12 @@
 {% from "components/textarea/_macro.njk" import onsTextarea %}
 {% from "components/question/_macro.njk" import onsQuestion %}
 
-{% call onsQuestion({
-    "title": "What do you think of this service?",
-    "legendIsQuestionTitle": true
-}) %}
+{%
+    call onsQuestion({
+        "title": "What do you think of this service?",
+        "legendIsQuestionTitle": true
+    })
+%}
     {{
         onsTextarea({
             "id": "feedback",

package/components/navigation/_macro.njk

@@ -1,8 +1,10 @@
 {% macro onsNavigation(params) %}
     {% from "components/button/_macro.njk" import onsButton %}
     {% from "components/autosuggest/_macro.njk" import onsAutosuggest %}
-    <div class="ons-navigation-wrapper{% if params.variants == 'neutral' %} ons-navigation-wrapper--neutral{% endif %}">
-        <div class="ons-container ons-container--gutterless@xxs@l{{ ' ons-container--full-width' if params.fullWidth or params.navigation.fullWidth }}{{ ' ons-container--wide' if params.wide or params.navigation.wide }}">
+    <div class="ons-navigation-wrapper{{ ' ons-navigation-wrapper--neutral' if params.variants == 'neutral' }}">
+        <div
+            class="ons-container ons-container--gutterless@xxs@l{{ ' ons-container--full-width' if params.fullWidth or params.navigation.fullWidth }}{{ ' ons-container--wide' if params.wide or params.navigation.wide }}"
+        >
             {% if params.siteSearchAutosuggest %}
                 <div class="ons-navigation-search ons-js-navigation-search">
                     {% set autosuggestClasses = "ons-input-search ons-input-search--icon" %}
@@ -12,43 +14,58 @@
                     {% else %}
                         {% set autosuggestLabelClasses = autosuggestLabelClasses + ' ons-label--white' %}
                     {% endif %}
-                    {{ onsAutosuggest({
-                        "id": "ons-site-search",
-                        "containerClasses": "ons-autosuggest--header",
-                        "input": {
-                            "classes": autosuggestClasses,
-                            "accessiblePlaceholder": true,
-                            "autocomplete": "off",
-                            "label": {
-                                "text": params.siteSearchAutosuggest.label,
-                                "id": "ons-site-search-label",
-                                "classes": autosuggestLabelClasses
-                            }
-                        },
-                        "instructions": params.siteSearchAutosuggest.instructions,
-                        "ariaYouHaveSelected":params.siteSearchAutosuggest.ariaYouHaveSelected,
-                        "minChars": params.siteSearchAutosuggest.minChars,
-                        "ariaMinChars": params.siteSearchAutosuggest.ariaMinChars,
-                        "ariaResultsLabel": params.siteSearchAutosuggest.ariaResultsLabel,
-                        "ariaOneResult": params.siteSearchAutosuggest.ariaOneResult,
-                        "ariaNResults": params.siteSearchAutosuggest.ariaNResults,
-                        "ariaLimitedResults": params.siteSearchAutosuggest.ariaLimitedResults,
-                        "moreResults": params.siteSearchAutosuggest.moreResults,
-                        "resultsTitle": params.siteSearchAutosuggest.resultsTitle,
-                        "autosuggestData": params.siteSearchAutosuggest.autosuggestData,
-                        "noResults": params.siteSearchAutosuggest.noResults,
-                        "typeMore": params.siteSearchAutosuggest.typeMore,
-                        "language": params.siteSearchAutosuggest.language
-                    }) }}
+                    {{
+                        onsAutosuggest({
+                            "id": "ons-site-search",
+                            "containerClasses": "ons-autosuggest--header",
+                            "input": {
+                                "classes": autosuggestClasses,
+                                "accessiblePlaceholder": true,
+                                "autocomplete": "off",
+                                "label": {
+                                    "text": params.siteSearchAutosuggest.label,
+                                    "id": "ons-site-search-label",
+                                    "classes": autosuggestLabelClasses
+                                }
+                            },
+                            "instructions": params.siteSearchAutosuggest.instructions,
+                            "ariaYouHaveSelected":params.siteSearchAutosuggest.ariaYouHaveSelected,
+                            "minChars": params.siteSearchAutosuggest.minChars,
+                            "ariaMinChars": params.siteSearchAutosuggest.ariaMinChars,
+                            "ariaResultsLabel": params.siteSearchAutosuggest.ariaResultsLabel,
+                            "ariaOneResult": params.siteSearchAutosuggest.ariaOneResult,
+                            "ariaNResults": params.siteSearchAutosuggest.ariaNResults,
+                            "ariaLimitedResults": params.siteSearchAutosuggest.ariaLimitedResults,
+                            "moreResults": params.siteSearchAutosuggest.moreResults,
+                            "resultsTitle": params.siteSearchAutosuggest.resultsTitle,
+                            "autosuggestData": params.siteSearchAutosuggest.autosuggestData,
+                            "noResults": params.siteSearchAutosuggest.noResults,
+                            "typeMore": params.siteSearchAutosuggest.typeMore,
+                            "language": params.siteSearchAutosuggest.language
+                        })
+                    }}
                 </div>
             {% endif %}
-            <nav class="ons-navigation ons-navigation--main ons-js-navigation" id="{{ params.navigation.id }}" aria-label="{{ params.navigation.ariaLabel | default("Main menu") }}" data-analytics="header-navigation">
+            <nav
+                class="ons-navigation ons-navigation--main ons-js-navigation"
+                id="{{ params.navigation.id }}"
+                aria-label="{{ params.navigation.ariaLabel | default("Main menu") }}"
+                data-analytics="header-navigation"
+            >
                 <ul class="ons-navigation__list">
                     {% for item in params.navigation.itemsList %}
-                        <li class="ons-navigation__item {{ item.classes }}{{ ' ons-navigation__item--active' if (item.url == params.navigation.currentPath) or (params.navigation.currentPath is not string and item.url in params.navigation.currentPath) }}">
-                            <a class="ons-navigation__link" href="{{ item.url }}" {% if item.id %}id="{{ item.id }}" {% endif %}{% if item.ariaLabel %}aria-label="{{ item.ariaLabel }}" {% endif %}>
-                                {% if item.title %}{{ item.title }}
-                                {% elif item.text %}{{ item.text }}
+                        <li
+                            class="ons-navigation__item {{ item.classes }}{{ ' ons-navigation__item--active' if (item.url == params.navigation.currentPath) or (params.navigation.currentPath is not string and item.url in params.navigation.currentPath) }}"
+                        >
+                            <a
+                                class="ons-navigation__link"
+                                href="{{ item.url }}"
+                                {% if item.id %}id="{{ item.id }}"{% endif %}{% if item.ariaLabel %}{{ ' ' }}aria-label="{{ item.ariaLabel }}"{% endif %}
+                            >
+                                {% if item.title %}
+                                    {{ item.title }}
+                                {% elif item.text %}
+                                    {{ item.text }}
                                 {% endif %}
                             </a>
                         </li>
@@ -59,14 +76,30 @@
     </div>
     {% if params.navigation.subNavigation %}
         {% if not params.navigation.subNavigation.removeHorizontalSubNav %}
-            <nav class="ons-navigation ons-navigation--sub ons-u-d-no@xxs@l{{ ' ' + params.navigation.subNavigation.classes if params.navigation.subNavigation.classes }}" id="{{ params.navigation.subNavigation.id }}" aria-label="{{ params.navigation.subNavigation.ariaLabel | default("Section menu") }}" data-analytics="header-section-navigation">
-                <div class="ons-container ons-container--gutterless@xxs@l{{ ' ons-container--full-width' if params.fullWidth or params.navigation.fullWidth }}{{ ' ons-container--wide' if params.wide or params.navigation.wide }}">
+            <nav
+                class="ons-navigation ons-navigation--sub ons-u-d-no@xxs@l{{ ' ' + params.navigation.subNavigation.classes if params.navigation.subNavigation.classes else '' }}"
+                id="{{ params.navigation.subNavigation.id }}"
+                aria-label="{{ params.navigation.subNavigation.ariaLabel | default('Section menu') }}"
+                data-analytics="header-section-navigation"
+            >
+                <div
+                    class="ons-container ons-container--gutterless@xxs@l{{ ' ons-container--full-width' if params.fullWidth or params.navigation.fullWidth }}{{ ' ons-container--wide' if params.wide or params.navigation.wide }}"
+                >
                     <ul class="ons-navigation__list ons-navigation__list">
                         {% for item in params.navigation.subNavigation.itemsList %}
-                            <li class="ons-navigation__item {{ item.classes }}{{ ' ons-navigation__item--active' if (item.url == params.navigation.currentPath) or (params.navigation.currentPath is not string and item.url in params.navigation.currentPath) }}">
-                                <a class="ons-navigation__link ons-navigation__link" href="{{ item.url }}" {% if item.ariaLabel %}aria-label="{{ item.ariaLabel }}" {% endif %} {% if item.id %}id="{{ item.id }}" {% endif %}>
-                                    {% if item.title %}{{ item.title }}
-                                    {% elif item.text %}{{ item.text }}
+                            <li
+                                class="ons-navigation__item{{ ' ' + item.classes if item.classes else '' }}{{ ' ons-navigation__item--active' if (item.url == params.navigation.currentPath) or (params.navigation.currentPath is not string and item.url in params.navigation.currentPath) }}"
+                            >
+                                <a
+                                    class="ons-navigation__link ons-navigation__link"
+                                    href="{{ item.url }}"
+                                    {% if item.ariaLabel %}aria-label="{{ item.ariaLabel }}"{% endif %}
+                                    {% if item.id %}id="{{ item.id }}"{% endif %}
+                                >
+                                    {% if item.title %}
+                                        {{ item.title }}
+                                    {% elif item.text %}
+                                        {{ item.text }}
                                     {% endif %}
                                 </a>
                             </li>
@@ -75,29 +108,52 @@
                 </div>
             </nav>
         {% endif %}
-        <div class="ons-u-d-no@l{{ ' ' + params.navigation.subNavigation.classes if params.navigation.subNavigation.classes }}">
-            {{ onsButton({
-                "text": params.navigation.currentPageTitle,
-                "classes": "ons-u-d-no ons-js-sub-navigation-button",
-                "type": "button",
-                "variants": ["mobile", "dropdown"],
-                "attributes": {
-                    "aria-label": "Toggle " + params.navigation.currentPageTitle + " menu" if params.navigation.currentPageTitle else "Toggle section menu",
-                    "aria-controls": params.navigation.subNavigation.id,
-                    "aria-expanded": "false"
-                }
-            }) }}
-            <nav class="ons-navigation ons-navigation--sub-mobile ons-u-d-no ons-js-secondary-nav ons-u-mt-xs" id="{{ params.navigation.subNavigation.id }}--mobile" aria-hidden="true" aria-label="{{ params.navigation.subNavigation.ariaLabel | default("Section menu") }}" data-analytics="header-section-navigation">
-                <div class="ons-container ons-container--gutterless@xxs@l{{ ' ons-container--full-width' if params.navigation.fullWidth }}{{ ' ons-container--wide' if params.navigation.wide }}">
+        <div class="ons-u-d-no@l{{ ' ' + params.navigation.subNavigation.classes if params.navigation.subNavigation.classes else '' }}">
+            {{
+                onsButton({
+                    "text": params.navigation.currentPageTitle,
+                    "classes": "ons-u-d-no ons-js-sub-navigation-button",
+                    "type": "button",
+                    "variants": ["mobile", "dropdown"],
+                    "attributes": {
+                        "aria-label": "Toggle " + params.navigation.currentPageTitle + " menu" if params.navigation.currentPageTitle else "Toggle section menu",
+                        "aria-controls": params.navigation.subNavigation.id,
+                        "aria-expanded": "false"
+                    }
+                })
+            }}
+            <nav
+                class="ons-navigation ons-navigation--sub-mobile ons-u-d-no ons-js-secondary-nav ons-u-mt-xs"
+                id="{{ params.navigation.subNavigation.id }}--mobile"
+                aria-hidden="true"
+                aria-label="{{ params.navigation.subNavigation.ariaLabel | default("Section menu") }}"
+                data-analytics="header-section-navigation"
+            >
+                <div
+                    class="ons-container ons-container--gutterless@xxs@l{{ ' ons-container--full-width' if params.navigation.fullWidth }}{{ ' ons-container--wide' if params.navigation.wide }}"
+                >
                     <ul class="ons-navigation__list ons-navigation__list--parent">
-                        <li class="ons-navigation__item{{ ' ons-navigation__item--active' if (params.navigation.subNavigation.overviewURL == params.navigation.subNavigation.currentPath)}}">
-                            <a class="ons-navigation__link" href="{{ params.navigation.subNavigation.overviewURL }}">{{ params.navigation.subNavigation.overviewText | default('Overview') }}</a>
+                        <li
+                            class="ons-navigation__item{{ ' ons-navigation__item--active' if (params.navigation.subNavigation.overviewURL == params.navigation.subNavigation.currentPath) }}"
+                        >
+                            <a class="ons-navigation__link" href="{{ params.navigation.subNavigation.overviewURL }}"
+                                >{{ params.navigation.subNavigation.overviewText | default('Overview') }}</a
+                            >
                         </li>
                         {% for item in params.navigation.subNavigation.itemsList %}
-                            <li class="ons-navigation__item {{ ' ons-navigation__item--active' if (item.url == params.navigation.subNavigation.currentPath) or (item.url == params.navigation.currentPath) or (params.navigation.currentPath is not string and item.url in params.navigation.currentPath) }}">
-                                <a class="ons-navigation__link" href="{{ item.url }}" {% if item.ariaLabel %}aria-label="{{ item.ariaLabel }}" {% endif %} {% if item.id %}id="{{ item.id }}--mobile" {% endif %}>
-                                    {% if item.title %}{{ item.title }}
-                                    {% elif item.text %}{{ item.text }}
+                            <li
+                                class="ons-navigation__item{{ ' ons-navigation__item--active' if (item.url == params.navigation.subNavigation.currentPath) or (item.url == params.navigation.currentPath) or (params.navigation.currentPath is not string and item.url in params.navigation.currentPath) }}"
+                            >
+                                <a
+                                    class="ons-navigation__link"
+                                    href="{{ item.url }}"
+                                    {% if item.ariaLabel %}aria-label="{{ item.ariaLabel }}"{% endif %}
+                                    {% if item.id %}id="{{ item.id }}--mobile"{% endif %}
+                                >
+                                    {% if item.title %}
+                                        {{ item.title }}
+                                    {% elif item.text %}
+                                        {{ item.text }}
                                     {% endif %}
                                 </a>
                                 {% if item.sections %}
@@ -105,12 +161,23 @@
                                         {% if section.sectionTitle %}
                                             <h3 class="ons-navigation__list-header">{{ section.sectionTitle }}</h3>
                                         {% endif %}
-                                        <ul class="ons-navigation__list ons-navigation__list--child ons-list--dashed ons-u-ml-s ons-u-mt-xs">
+                                        <ul
+                                            class="ons-navigation__list ons-navigation__list--child ons-list--dashed ons-u-ml-s ons-u-mt-xs"
+                                        >
                                             {% for child in section.children %}
-                                                <li class="ons-navigation__item ons-list__item {{ ' ons-navigation__item--active' if (child.url == params.navigation.currentPath) or (params.navigation.currentPath is not string and child.url in params.navigation.currentPath) }}">
-                                                    <a class="ons-navigation__link ons-navigation__link--section" href="{{ child.url }}" {% if child.ariaLabel %}aria-label="{{ child.ariaLabel }}" {% endif %} {% if child.id %}id="{{ child.id }}" {% endif %}>
-                                                        {% if child.title %}{{ child.title }}
-                                                        {% elif child.text %}{{ child.text }}
+                                                <li
+                                                    class="ons-navigation__item ons-list__item{{ ' ons-navigation__item--active' if (child.url == params.navigation.currentPath) or (params.navigation.currentPath is not string and child.url in params.navigation.currentPath) }}"
+                                                >
+                                                    <a
+                                                        class="ons-navigation__link ons-navigation__link--section"
+                                                        href="{{ child.url }}"
+                                                        {% if child.ariaLabel %}aria-label="{{ child.ariaLabel }}"{% endif %}
+                                                        {% if child.id %}id="{{ child.id }}"{% endif %}
+                                                    >
+                                                        {% if child.title %}
+                                                            {{ child.title }}
+                                                        {% elif child.text %}
+                                                            {{ child.text }}
                                                         {% endif %}
                                                     </a>
                                                 </li>
@@ -125,5 +192,4 @@
             </nav>
         </div>
     {% endif %}
-
 {% endmacro %}

package/components/navigation/_navigation.scss

@@ -7,15 +7,6 @@
 
         &--neutral {
             background: var(--ons-color-header-neutral);
-            .ons-navigation__item {
-                &--active,
-                &:hover {
-                    border-color: var(--ons-color-links);
-                }
-                .ons-navigation__link {
-                    color: var(--ons-color-header-navigation-links);
-                }
-            }
         }
     }
 

package/components/pagination/_macro.njk

@@ -8,24 +8,34 @@
     {% set prevPageIndex = currentPageIndex - 1 %}
     {% set nextPageIndex = currentPageIndex + 1 %}
 
-    <nav class="ons-pagination {{ params.classes }}{% if params.hideRangeIndicator %} ons-pagination--no-indicator{% endif %}" aria-label="Pagination ({{ position }})">
+    <nav
+        class="ons-pagination{{ ' ' + params.classes if params.classes else '' }}{{ ' ons-pagination--no-indicator' if params.hideRangeIndicator }}"
+        aria-label="Pagination ({{ position }})"
+    >
         <div class="ons-pagination__position">{{ position }}</div>
         <ul class="ons-pagination__items">
             {% if currentPageIndex != 1 %}
                 {% set prevPageIndex = currentPageIndex - 2 %}
                 <li class="ons-pagination__item ons-pagination__item--previous">
-                    <a href="{{ params.pages[prevPageIndex].url }}" class="ons-pagination__link ons-pagination__link--no-underline" rel="prev" aria-label="Go to the previous page (Page {{ currentPageIndex - 1 }})">
-                        {{- onsIcon({
-                            "iconType": 'arrow-previous',
-                            "classes": 'ons-u-mr-xs',
-                            "iconSize": 'm'
-                        }) -}}
+                    <a
+                        href="{{ params.pages[prevPageIndex].url }}"
+                        class="ons-pagination__link ons-pagination__link--no-underline"
+                        rel="prev"
+                        aria-label="Go to the previous page (Page {{ currentPageIndex - 1 }})"
+                    >
+                        {{-
+                            onsIcon({
+                                "iconType": 'arrow-previous',
+                                "classes": 'ons-u-mr-xs',
+                                "iconSize": 'm'
+                            })
+                        -}}
                         <span class="ons-pagination__link-text">{{ params.previous | default("Previous") }}</span>
                     </a>
                 </li>
             {% endif %}
             {% if currentPageIndex > 2 %}
-                <li class="ons-pagination__item{% if (currentPageIndex == 1) %} ons-pagination__item--current{% endif %}">
+                <li class="ons-pagination__item{{ ' ons-pagination__item--current' if currentPageIndex == 1 }}">
                     <a href="{{ firstPage.url }}" class="ons-pagination__link" aria-label="Go to the first page (Page 1)">1</a>
                 </li>
             {% endif %}
@@ -36,13 +46,15 @@
                 {% set showPage = false %}
                 {# Show the current, next and previous page
                 Show page 2 if the current page index is within the first 4 pages
-                Show the penultimate page if the current page index is within the last 4 pages  #}
+                Show the penultimate page if the current page index is within the last 4 pages #}
                 {% if (loop.index == currentPageIndex) or (loop.index == currentPageIndex + 1) or (loop.index == currentPageIndex - 1) or (loop.index == 2 and currentPageIndex <= 4) or ((loop.index == totalPages - 1) and (currentPageIndex > totalPages - 4)) %}
                     {% set showPage = true %}
                 {% endif %}
                 {% if showPage == true %}
-                    <li class="ons-pagination__item{% if loop.index == currentPageIndex %} ons-pagination__item--current{% endif %}">
-                        <a href="{{ page.url }}" class="ons-pagination__link"
+                    <li class="ons-pagination__item{{ ' ons-pagination__item--current' if loop.index == currentPageIndex }}">
+                        <a
+                            href="{{ page.url }}"
+                            class="ons-pagination__link"
                             {%- if loop.index == currentPageIndex -%}
                                 aria-current="true" aria-label="Current page ({{ position }})"
                             {%- else -%}
@@ -54,7 +66,8 @@
                             {%- if loop.index == currentPageIndex + 1 -%}
                                 rel="next"
                             {%- endif -%}
-                        >{{ loop.index }}</a>
+                            >{{ loop.index }}</a
+                        >
                     </li>
                 {% endif %}
             {% endfor %}
@@ -62,19 +75,28 @@
                 <li class="ons-pagination__item ons-pagination__item--gap">&hellip;</li>
             {% endif %}
             {% if currentPageIndex < totalPages - 1 %}
-                <li class="ons-pagination__item{% if currentPageIndex == totalPages %} ons-pagination__item--current{% endif %}">
-                    <a href="{{ lastPage.url }}" class="ons-pagination__link" aria-label="Go to the last page (Page {{ totalPages }})">{{ totalPages }}</a>
+                <li class="ons-pagination__item{{ ' ons-pagination__item--current' if currentPageIndex == totalPages }}">
+                    <a href="{{ lastPage.url }}" class="ons-pagination__link" aria-label="Go to the last page (Page {{ totalPages }})"
+                        >{{ totalPages }}</a
+                    >
                 </li>
             {% endif %}
             {% if totalPages > 1 and totalPages != currentPageIndex %}
                 <li class="ons-pagination__item ons-pagination__item--next">
-                    <a href="{{ params.pages[currentPageIndex].url }}" class="ons-pagination__link ons-pagination__link--no-underline" rel="next" aria-label="Go to the next page (Page {{ currentPageIndex + 1 }})">
+                    <a
+                        href="{{ params.pages[currentPageIndex].url }}"
+                        class="ons-pagination__link ons-pagination__link--no-underline"
+                        rel="next"
+                        aria-label="Go to the next page (Page {{ currentPageIndex + 1 }})"
+                    >
                         <span class="ons-pagination__link-text">{{ params.next | default("Next") }}</span>
-                        {{- onsIcon({
-                            "iconType": 'arrow-next',
-                            "classes": 'ons-u-ml-xs',
-                            "iconSize": 'm'
-                        }) -}}
+                        {{-
+                            onsIcon({
+                                "iconType": 'arrow-next',
+                                "classes": 'ons-u-ml-xs',
+                                "iconSize": 'm'
+                            })
+                        -}}
                     </a>
                 </li>
             {% endif %}

package/components/panel/_macro.njk

@@ -26,13 +26,13 @@
         {% set spaciousClass = ' ons-panel--spacious' %}
     {% endif %}
 
-    {% if params.variant == "warn-branded" or params.variant == "announcement" %}
-        <div class="{{containerClass}}">
-            <div class="ons-container">
-    {% endif %}
-
-        <div {% if (params.variant == 'error' and params.title) or params.variant == 'success' %}aria-labelledby="alert" role="alert" tabindex="-1" {% if not isDesignSystemExample %}autofocus="autofocus" {% endif %}{% endif %}class="ons-panel{{ variantClass }}{{ iconClass }}{{ noTitleClass }}{{ spaciousClass }}{{ classes }}"{% if params and params.attributes %}{% for attribute, value in (params.attributes.items() if params and params.attributes is mapping and params.attributes.items else params.attributes) %}{{attribute}}="{{value}}" {% endfor %}{% endif %}{% if params and params.id %} id="{{params.id}}"{% endif %}>
-
+    {% set panel %}
+        <div
+            {% if (params.variant == 'error' and params.title) or params.variant == 'success' %}
+                aria-labelledby="alert" role="alert" tabindex="-1" {% if not isDesignSystemExample %}autofocus="autofocus"{% endif %}
+            {% endif %}class="ons-panel{{ variantClass }}{{ iconClass }}{{ noTitleClass }}{{ spaciousClass }}{{ classes }}"
+            {% if params and params.attributes %}{% for attribute, value in (params.attributes.items() if params and params.attributes is mapping and params.attributes.items else params.attributes) %}{{ ' ' }}{{ attribute }}="{{ value }}"{% endfor %}{% endif %}{% if params and params.id %}id="{{ params.id }}"{% endif %}
+        >
             {% if params.variant == "warn" or params.variant == "warn-branded" %}
                 <span class="ons-panel__icon" aria-hidden="true">!</span>
                 <span class="ons-panel__assistive-text ons-u-vh">{{ params.assistiveTextPrefix | default("Warning: ") }}</span>
@@ -57,21 +57,28 @@
                     {% set defaultTitleTag = "div" %}
                 {% endif %}
                 {% set titleTag = params.titleTag | default(defaultTitleTag) %}
+                {% set openingTag = "<" + titleTag %}
+                {% set closingTag = "</" + titleTag + ">" %}
                 <div class="ons-panel__header">
-                    <{{ titleTag }} id="alert"{% if params.variant %} data-qa="{{ params.variant }}-header"{% endif %} class="ons-panel__title ons-u-fs-r--b">{{ params.title | safe }}</{{ titleTag }}>
+                    {{ openingTag | safe }} id="alert"{% if params.variant %}data-qa="{{ params.variant }}-header"{% endif %}
+                    class="ons-panel__title ons-u-fs-r--b">{{ params.title | safe }}{{ closingTag | safe }}
                 </div>
             {% else %}
                 {% if not params.variant or params.variant == "branded" or params.variant == "info" or params.variant == "bare" %}
-                    <span class="ons-panel__assistive-text ons-u-vh">{{ params.assistiveTextPrefix | default("Important information: ") }}</span>
-                {% elif params.variant == 'error' or params.variant == 'success' %} 
+                    <span class="ons-panel__assistive-text ons-u-vh"
+                        >{{ params.assistiveTextPrefix | default("Important information: ") }}</span
+                    >
+                {% elif params.variant == 'error' or params.variant == 'success' %}
                     {% set defaultText = "Completed" if params.variant == "success" else "Error" %}
-                    <span{% if params.variant == "success" %} id="alert"{% endif %} class="ons-panel__assistive-text ons-u-vh">{{ params.assistiveTextPrefix | default(defaultText ~ ": ") }}</span>
+                    <span {% if params.variant == "success" %}id="alert"{% endif %}class="ons-panel__assistive-text ons-u-vh"
+                        >{{ params.assistiveTextPrefix | default(defaultText ~ ": ") }}</span
+                    >
                 {% endif %}
             {% endif %}
 
             {% if params.iconType %}
                 {% from "components/icon/_macro.njk" import onsIcon %}
-                <span class= "ons-panel__icon ons-u-fs-{{ params.iconSize | default('r') }}">
+                <span class="ons-panel__icon ons-u-fs-{{ params.iconSize | default('r') }}">
                     {{-
                         onsIcon({
                             "iconType": params.iconType,
@@ -81,14 +88,18 @@
                 </span>
             {% endif %}
 
-            <div class="ons-panel__body{% if params.iconSize %} ons-icon-margin--{{ params.iconSize }}{% endif %}">{{ (params.body if params else "") | safe }}
+            <div class="ons-panel__body{% if params.iconSize %}{{ ' ' }}ons-icon-margin--{{ params.iconSize }}{% endif %}">
+                {{ (params.body if params) | safe }}
                 {{ caller() if caller }}
             </div>
         </div>
+    {% endset %}
 
-    {% if params.variant == "warn-branded" or params.variant == "announcement"  %}
-            </div>
+    {% if params.variant == "warn-branded" or params.variant == "announcement" %}
+        <div class="{{ containerClass }}">
+            <div class="ons-container">{{ panel | safe }}</div>
         </div>
+    {% else %}
+        {{ panel | safe }}
     {% endif %}
-
 {% endmacro %}

package/components/panel/example-panel-bare.njk

@@ -1,8 +1,10 @@
 {% from "components/panel/_macro.njk" import onsPanel %}
 
-{% call onsPanel({
-    "variant": 'bare',
-    "iconType": 'lock'
-}) %}
+{%
+    call onsPanel({
+        "variant": 'bare',
+        "iconType": 'lock'
+    })
+%}
     Here is some text with an icon
 {% endcall %}

package/components/panel/example-panel-with-announcement.njk

@@ -1,11 +1,14 @@
 ---
-"fullWidth": true
+'fullWidth': true
 ---
+
 {% from "components/panel/_macro.njk" import onsPanel %}
 
-{% call onsPanel({
-    "variant": 'announcement'
-}) %}
+{%
+    call onsPanel({
+        "variant": 'announcement'
+    })
+%}
     <p class="ons-u-mb-no">National lockdown: stay at home</p>
 
     <div class="ons-u-fs-r">

package/components/panel/example-panel-with-error-summary.njk

@@ -1,10 +1,12 @@
 {% from "components/panel/_macro.njk" import onsPanel %}
 {% from "components/list/_macro.njk" import onsList %}
 
-{% call onsPanel({
-    "title": 'There are 2 problems with your answer',
-    "variant": 'error'
-}) %}
+{%
+    call onsPanel({
+        "title": 'There are 2 problems with your answer',
+        "variant": 'error'
+    })
+%}
     {{
         onsList({
             "element": 'ol',

package/components/panel/example-panel-with-warning.njk

@@ -1,7 +1,9 @@
 {% from "components/panel/_macro.njk" import onsPanel %}
 
-{% call onsPanel({
-    "variant": 'warn'
-}) %}
+{%
+    call onsPanel({
+        "variant": 'warn'
+    })
+%}
     All of the information about this person will be deleted
 {% endcall %}

package/components/password/_macro.njk

@@ -4,11 +4,13 @@
     {% from "components/checkboxes/_checkbox-macro.njk" import onsCheckbox %}
     {% from "components/input/_macro.njk" import onsInput %}
 
-    {% call onsField({
-        "id": params.fieldId,
-        "classes": "ons-js-password" + (" " + params.fieldClasses if params.fieldClasses else ""),
-        "error": params.error
-    }) %}
+    {%
+        call onsField({
+            "id": params.fieldId,
+            "classes": "ons-js-password" + (" " + params.fieldClasses if params.fieldClasses else ""),
+            "error": params.error
+        })
+    %}
         {{
             onsLabel({
                 "for": params.id,

package/components/phase-banner/_macro.njk

@@ -3,9 +3,9 @@
         <div class="ons-container{{ ' ons-container--full-width' if params.fullWidth }}{{ ' ons-container--wide' if params.wide }}">
             <div class="ons-grid ons-grid--flex ons-grid--gutterless ons-grid--vertical-top ons-grid--no-wrap">
                 {% if not params.hideBadge %}
-                <div class="ons-grid__col ons-col-auto ons-u-flex-no-grow ons-u-flex-no-shrink">
-                    <strong class="ons-phase-banner__badge">{{ params.badge | default("Beta") }}</strong>
-                </div>
+                    <div class="ons-grid__col ons-col-auto ons-u-flex-no-grow ons-u-flex-no-shrink">
+                        <strong class="ons-phase-banner__badge">{{ params.badge | default("Beta") }}</strong>
+                    </div>
                 {% endif %}
                 <div class="ons-grid__col ons-col-auto ons-u-flex-shrink">
                     <p class="ons-phase-banner__desc ons-u-fs-s ons-u-mb-no">{{ params.html | safe }}</p>

package/components/phase-banner/example-phase-banner-alpha.njk

@@ -1,6 +1,7 @@
 ---
-"fullWidth": true
+'fullWidth': true
 ---
+
 {% from "components/phase-banner/_macro.njk" import onsPhaseBanner %}
 {% from "components/external-link/_macro.njk" import onsExternalLink %}