@ons/design-system 70.0.8 → 70.0.10

package/components/header/_macro.njk

@@ -3,8 +3,9 @@
     {% from "components/icon/_macro.njk" import onsIcon %}
     {% from "components/navigation/_macro.njk" import onsNavigation %}
     {% from "components/browser-banner/_macro.njk" import onsBrowserBanner %}
-
-    {% set title_tag = "h1" if params.titleAsH1 else "div" %}
+    {% set titleTag = "h1" if params.titleAsH1 else "div" %}
+    {% set openingTag = "<" + titleTag %}
+    {% set closingTag = "</" + titleTag + ">" %}
     {% set currentLanguageISOCode = "en" %}
 
     {% if params.language and params.language.languages %}
@@ -12,7 +13,10 @@
         {% set currentLanguageISOCode = currentLanguage.ISOCode %}
     {% endif %}
 
-    <header class="ons-header{% if params.classes %} {{ params.classes }}{% endif %}{% if params.variants is not string %}{% for variant in params.variants %} ons-header--{{ variant }}{% endfor %}{% else %} ons-header--{{ params.variants }}{% endif %}" role="banner">
+    <header
+        class="ons-header{{ ' '+ params.classes if params.classes }}{% if params.variants is not string %}{% for variant in params.variants %}{{ ' ' }}ons-header--{{ variant }}{% endfor %}{% else %}{{ ' ' }}ons-header--{{ params.variants }}{% endif %}"
+        role="banner"
+    >
         {{
             onsBrowserBanner({
                 "lang": currentLanguageISOCode,
@@ -22,60 +26,42 @@
         }}
         {% if params.phase %}
             {% from "components/phase-banner/_macro.njk" import onsPhaseBanner %}
-            {{ onsPhaseBanner({
-                "fullWidth": params.fullWidth,
-                "wide": params.wide,
-                "hideBadge": params.phase.hideBadge,
-                "badge": params.phase.badge,
-                "html": params.phase.html
-            }) }}
+            {{
+                onsPhaseBanner({
+                    "fullWidth": params.fullWidth,
+                    "wide": params.wide,
+                    "hideBadge": params.phase.hideBadge,
+                    "badge": params.phase.badge,
+                    "html": params.phase.html
+                })
+            }}
         {% endif %}
         <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--flex ons-grid--between ons-grid--vertical-center{% if params.mastheadLogo.classes %} {{ params.mastheadLogo.classes }}{% endif %}{% if not params.mastheadLogo.multipleLogos %} ons-grid--no-wrap ons-grid--gutterless{% endif%}">
+                <div
+                    class="ons-header__grid-top ons-grid ons-grid--flex ons-grid--between ons-grid--vertical-center{{ ' '+ params.mastheadLogo.classes if params.mastheadLogo.classes }}{{ ' ons-grid--no-wrap ons-grid--gutterless' if not params.mastheadLogo.multipleLogos }}"
+                >
                     <div class="ons-grid__col ons-col-auto">
-                        {%- if not params.mastheadLogo.multipleLogos %}
-                            {%-if params.mastheadLogoUrl %}
-                                <a class="ons-header__org-logo-link" href="{{ params.mastheadLogoUrl }}">
-                            {% endif -%}
-                            <div class="ons-header__org-logo ons-header__org-logo--large">
-                                {% if params.mastheadLogo.large %}
-                                    {{ params.mastheadLogo.large | safe }}
-                                {% else %}
-                                    {{-
-                                        onsIcon({
-                                            "iconType": 'ons-logo-' + currentLanguageISOCode,
-                                            "altText": 'Office for National Statistics homepage'
-                                        })
-                                    -}}
-                                {% endif %}
-                            </div>
-                            <div class="ons-header__org-logo ons-header__org-logo--small">
-                                {% if params.mastheadLogo.small %}
-                                    {{ params.mastheadLogo.small | safe }}
-                                {% elif params.mastheadLogo.large %}
-                                    {{ params.mastheadLogo.large | safe }}
-                                {% else %}
-                                    {{-
-                                        onsIcon({
-                                         "iconType": 'ons-logo-stacked-' + currentLanguageISOCode,
-                                            "altText": 'Office for National Statistics logo'
-                                        })
-                                    -}}
-                                {% endif %}
-                            </div>
-                            {% if params.mastheadLogoUrl %}
-                                </a>
-                            {% endif %}
-                        {% else %}
-                            <div class="ons-header__org-logo ons-header__org-logo--multi">
-                                {% set logos = [params.mastheadLogo.multipleLogos.logo1, params.mastheadLogo.multipleLogos.logo2, params.mastheadLogo.multipleLogos.logo3] %}
-                                {% for logo in logos %}
-                                    {% if logo.logoURL %}
-                                        <a class="ons-header__org-logo-link" href="{{ logo.logoURL }}">
+                        {%- if not params.mastheadLogo.multipleLogos -%}
+
+                            {% set mastheadLogo %}
+                                <div class="ons-header__org-logo ons-header__org-logo--large">
+                                    {% if params.mastheadLogo.large %}
+                                        {{ params.mastheadLogo.large | safe }}
+                                    {% else %}
+                                        {{-
+                                            onsIcon({
+                                                "iconType": 'ons-logo-' + currentLanguageISOCode,
+                                                "altText": 'Office for National Statistics homepage'
+                                            })
+                                        -}}
                                     {% endif %}
-                                    {% if logo.logoImage != "ONS Logo" %}
-                                        {{ logo.logoImage | safe }}
+                                </div>
+                                <div class="ons-header__org-logo ons-header__org-logo--small">
+                                    {% if params.mastheadLogo.small %}
+                                        {{ params.mastheadLogo.small | safe }}
+                                    {% elif params.mastheadLogo.large %}
+                                        {{ params.mastheadLogo.large | safe }}
                                     {% else %}
                                         {{-
                                             onsIcon({
@@ -84,17 +70,43 @@
                                             })
                                         -}}
                                     {% endif %}
+                                </div>
+                            {% endset %}
+
+                            {%- if params.mastheadLogoUrl -%}
+                                <a class="ons-header__org-logo-link" href="{{ params.mastheadLogoUrl }}">{{ mastheadLogo | safe }}</a>
+                            {% else %}
+                                {{ mastheadLogo | safe }}
+                            {% endif %}
+                        {% else %}
+                            <div class="ons-header__org-logo ons-header__org-logo--multi">
+                                {% set logos = [params.mastheadLogo.multipleLogos.logo1, params.mastheadLogo.multipleLogos.logo2, params.mastheadLogo.multipleLogos.logo3] %}
+                                {% for logo in logos %}
+                                    {% set mastheadLogo %}
+                                        {% if logo.logoImage != "ONS Logo" %}
+                                            {{ logo.logoImage | safe }}
+                                        {% else %}
+                                            {{-
+                                                onsIcon({
+                                                    "iconType": 'ons-logo-stacked-' + currentLanguageISOCode,
+                                                    "altText": 'Office for National Statistics logo'
+                                                })
+                                            -}}
+                                        {% endif %}
+                                    {% endset %}
                                     {% if logo.logoURL %}
-                                        </a>
+                                        <a class="ons-header__org-logo-link" href="{{ logo.logoURL }}">{{ mastheadLogo | safe }}</a>
+                                    {% else %}
+                                        {{ mastheadLogo | safe }}
                                     {% endif %}
                                 {% endfor %}
                             </div>
-                        {% endif -%}
+                        {%- endif -%}
                     </div>
                     {% if params.language or params.serviceLinks %}
                         <div class="ons-header__links ons-grid__col ons-u-ml-auto">
                             {% if params.language %}
-                                <div class="ons-grid__col ons-col-auto{{ ' ons-u-mr-s ons-u-d-no@xxs@xs' if params.serviceLinks else '' }}">
+                                <div class="ons-grid__col ons-col-auto{{ ' ons-u-mr-s ons-u-d-no@xxs@xs' if params.serviceLinks }}">
                                     {% from "components/language-selector/_macro.njk" import onsLanguageSelector %}
                                     {{ onsLanguageSelector(params.language) }}
                                 </div>
@@ -109,50 +121,60 @@
                                 {% 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-header-service-nav--main {{ params.serviceLinks.classes }}" aria-label="{{ params.serviceLinks.ariaLabel | default("Service links navigation") }}">
+                                <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-header-service-nav--main{{ ' ' + params.serviceLinks.classes if params.serviceLinks.classes else '' }}"
+                                        aria-label="{{ params.serviceLinks.ariaLabel | default('Service links navigation') }}"
+                                    >
                                         <ul class="ons-header-service-nav__list">
                                             {% for item in params.serviceLinks.itemsList %}
                                                 <li class="ons-header-service-nav__item">
-                                                {% if item.iconType %}
-                                                    {{-
-                                                        onsIcon({
-                                                            "iconType": item.iconType
-                                                        })
-                                                    -}}
-                                                {% endif %}
-                                                {% if item.url %}
-                                                    <a
-                                                        href="{{ item.url }}"
-                                                        class="ons-header-service-nav__link"
-                                                        {% if item.id %} id="{{ item.id }}"{% endif %}
-                                                    >{% if item.title %}{{ item.title }}{% elif item.text %}{{ item.text }}{% endif %}</a>
-                                                {% else %}
-                                                    {% if item.title %}{{ item.title }}{% elif item.text %}{{ item.text }}{% endif %}
-                                                {% endif %}
+                                                    {% if item.iconType %}
+                                                        {{-
+                                                            onsIcon({
+                                                                "iconType": item.iconType
+                                                            })
+                                                        -}}
+                                                    {% endif %}
+                                                    {% if item.url %}
+                                                        <a
+                                                            href="{{ item.url }}"
+                                                            class="ons-header-service-nav__link"
+                                                            {% if item.id %}id="{{ item.id }}"{% endif %}
+                                                            >{% if item.title %}{{ item.title }}{% elif item.text %}{{ item.text }}{% endif %}</a
+                                                        >
+                                                    {% else %}
+                                                        {% if item.title %}{{ item.title }}{% elif item.text %}{{ item.text }}{% endif %}
+                                                    {% endif %}
                                                 </li>
                                             {% endfor %}
                                         </ul>
                                     </nav>
                                 </div>
                                 {% if params.serviceLinks.itemsList | length > 1 or params.language %}
-                                    {% if params.variants == 'internal' or params.variants == 'neutral' %}
+                                    {% if params.variants == 'internal' %}
                                         {% set buttonVariant = ["mobile", "text-link", "text-link-inverse"] %}
+                                    {% elif params.variants == 'neutral' %}
+                                        {% set buttonVariant = ["mobile", "neutral"] %}
                                     {% else %}
                                         {% set buttonVariant = ["mobile", "text-link"] %}
                                     {% endif %}
                                     <div class="ons-grid__col ons-col-auto ons-u-d-no@{{ breakpoint }}">
-                                        {{ onsButton({
-                                            "text": params.serviceLinks.toggleServicesButton.text | default("Account"),
-                                            "classes": "ons-u-d-no ons-js-toggle-services",
-                                            "type": "button",
-                                            "variants": buttonVariant,
-                                            "attributes": {
-                                                "aria-label": params.serviceLinks.toggleServicesButton.ariaLabel | default("Toggle menu"),
-                                                "aria-controls": params.serviceLinks.id,
-                                                "aria-expanded": "false"
-                                            }
-                                        }) }}
+                                        {{
+                                            onsButton({
+                                                "text": params.serviceLinks.toggleServicesButton.text | default("Account"),
+                                                "classes": "ons-u-d-no ons-js-toggle-services",
+                                                "type": "button",
+                                                "variants": buttonVariant,
+                                                "attributes": {
+                                                    "aria-label": params.serviceLinks.toggleServicesButton.ariaLabel | default("Toggle menu"),
+                                                    "aria-controls": params.serviceLinks.id,
+                                                    "aria-expanded": "false"
+                                                }
+                                            })
+                                        }}
                                     </div>
                                 {% endif %}
                             {% endif %}
@@ -161,7 +183,11 @@
                 </div>
             </div>
             {% if 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") }}">
+                <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">
                         {% for item in params.serviceLinks.itemsList %}
                             <li class="ons-header-service-nav__item ons-header-service-nav__item--mobile">
@@ -176,8 +202,9 @@
                                     <a
                                         href="{{ item.url }}"
                                         class="ons-header-service-nav__link"
-                                        {% if item.id %} id="{{ item.id }}"{% endif %}
-                                    >{% if item.title %}{{ item.title }}{% elif item.text %}{{ item.text }}{% endif %}</a>
+                                        {% if item.id %}id="{{ item.id }}"{% endif %}
+                                        >{% if item.title %}{{ item.title }}{% elif item.text %}{{ item.text }}{% endif %}</a
+                                    >
                                 {% else %}
                                     {% if item.title %}{{ item.title }}{% elif item.text %}{{ item.text }}{% endif %}
                                 {% endif %}
@@ -193,30 +220,43 @@
         </div>
         <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' if not params.button }} ons-grid--flex ons-grid--between ons-grid--vertical-center ons-grid--no-wrap">
+                <div
+                    class="ons-grid ons-grid--flex ons-grid--between ons-grid--vertical-center ons-grid--no-wrap{{ ' ons-grid--gutterless' if not params.button }}"
+                >
                     <div class="ons-grid__col ons-col-auto ons-u-flex-shrink">
                         {% if params.titleLogo.large %}
-                            {% if params.titleUrl %}
-                                <a class="ons-header__title-logo-link" href="{{ params.titleUrl }}">
-                            {% endif %}
-                            <div class="ons-header__title-logo ons-header__title-logo--large {% if params.titleLogo.classes %} {{ params.titleLogo.classes }} {% endif %}{% if params.titleLogo.small %}ons-u-d-no@xxs@s{% endif %}">
-                                {{ params.titleLogo.large | safe }}
-                            </div>
-                            {% if params.titleLogo.small %}
-                                <div class="ons-header__title-logo ons-header__title-logo--small ons-u-d-no@s{% if params.titleLogo.classes %} {{ params.titleLogo.classes }}{% endif %}">
-                                    {{ params.titleLogo.small | safe}}
+
+                            {% set title %}
+                                <div
+                                    class="ons-header__title-logo ons-header__title-logo--large{{ ' ' + params.titleLogo.classes if params.titleLogo.classes else '' }}{{ ' ons-u-d-no@xxs@s' if params.titleLogo.small }}"
+                                >
+                                    {{ params.titleLogo.large | safe }}
                                 </div>
-                            {% endif %}
+                                {% if params.titleLogo.small %}
+                                    <div
+                                        class="ons-header__title-logo ons-header__title-logo--small ons-u-d-no@s{{ ' ' + params.titleLogo.classes if params.titleLogo.classes else '' }}"
+                                    >
+                                        {{ params.titleLogo.small | safe }}
+                                    </div>
+                                {% endif %}
+                            {% endset %}
+
                             {% if params.titleUrl %}
-                                </a>
+                                <a class="ons-header__title-logo-link" href="{{ params.titleUrl }}">{{ title | safe }}</a>
+                            {% else %}
+                                {{ title | safe }}
                             {% endif %}
                         {% else %}
+
+                            {% set title %}
+                                {{ openingTag | safe }}
+                                class="ons-header__title">{{ params.title }}{{ closingTag | safe }}
+                            {% endset %}
+
                             {% if params.titleUrl %}
-                                <a class="ons-header__title-link" href="{{ params.titleUrl }}">
-                            {% endif %}
-                                <{{ title_tag }} class="ons-header__title">{{ params.title }}</{{ title_tag }}>
-                            {% if params.titleUrl %}
-                                </a>
+                                <a class="ons-header__title-link" href="{{ params.titleUrl }}">{{ title | safe }}</a>
+                            {% else %}
+                                {{ title | safe }}
                             {% endif %}
                         {% endif %}
                         {% if params.description %}
@@ -231,16 +271,18 @@
                             {% set buttonVariant = "ghost" %}
                         {% endif %}
                         <div class="ons-grid__col ons-col-auto ons-u-flex-no-shrink">
-                            {{ onsButton({
-                                "text": params.button.text,
-                                "classes": "ons-u-d-no@xxs@l" if params.navigation else "ons-u-d-no@xxs@m",
-                                "variants": buttonVariant,
-                                "name": params.button.name,
-                                "attributes": params.button.attributes,
-                                "url": params.button.url,
-                                "iconType": "exit",
-                                "iconPosition": "after"
-                            }) }}
+                            {{
+                                onsButton({
+                                    "text": params.button.text,
+                                    "classes": "ons-u-d-no@xxs@l" if params.navigation else "ons-u-d-no@xxs@m",
+                                    "variants": buttonVariant,
+                                    "name": params.button.name,
+                                    "attributes": params.button.attributes,
+                                    "url": params.button.url,
+                                    "iconType": "exit",
+                                    "iconPosition": "after"
+                                })
+                            }}
                         </div>
                     {% endif %}
                     {% if params.navigation or params.siteSearchAutosuggest %}
@@ -252,36 +294,36 @@
                                     {% set buttonVariant = ["small", "ghost"] %}
                                 {% endif %}
                                 <span class="ons-grid ons-u-d-no@xxs@xs ons-u-ml-no ons-u-d-no@l">
-                                    {{ onsButton({
-                                        "text": "Search",
-                                        "classes": "ons-btn--search ons-u-ml-xs ons-u-d-no ons-js-toggle-search",
+                                    {{
+                                        onsButton({
+                                            "text": "Search",
+                                            "classes": "ons-btn--search ons-u-ml-xs ons-u-d-no ons-js-toggle-search",
+                                            "variants": buttonVariant,
+                                            "iconType": "search",
+                                            "iconPosition": "only",
+                                            "attributes": {
+                                                "aria-label": "Toggle search" ,
+                                                "aria-controls": "ons-site-search",
+                                                "aria-expanded": "false"
+                                            }
+                                        })
+                                    }}
+                                </span>
+                            {% endif %}
+                            {% if params.navigation.toggleNavigationButton %}
+                                {% set buttonVariant = ["mobile", "ghost"] %}
+                                {{
+                                    onsButton({
+                                        "text": params.navigation.toggleNavigationButton.text,
+                                        "classes": "ons-u-ml-xs ons-u-d-no ons-js-navigation-button ons-u-d-no@l",
                                         "variants": buttonVariant,
-                                        "iconType": "search",
-                                        "iconPosition": "only",
                                         "attributes": {
-                                            "aria-label": "Toggle search" ,
-                                            "aria-controls": "ons-site-search",
+                                            "aria-label": params.navigation.toggleNavigationButton.ariaLabel | default("Toggle main menu") ,
+                                            "aria-controls": params.navigation.id,
                                             "aria-expanded": "false"
                                         }
-                                    }) }}
-                                </span>
-                            {% endif %}
-                            {% if params.navigation.toggleNavigationButton %}
-                                {% if params.variants == 'neutral' %}
-                                    {% set buttonVariant = ["mobile", "ghost-dark"] %}
-                                {% else %}
-                                    {% set buttonVariant = ["mobile", "ghost"] %}
-                                {% endif %}
-                                {{ onsButton({
-                                    "text": params.navigation.toggleNavigationButton.text,
-                                    "classes": "ons-u-ml-xs ons-u-d-no ons-js-navigation-button ons-u-d-no@l",
-                                    "variants": buttonVariant,
-                                    "attributes": {
-                                        "aria-label": params.navigation.toggleNavigationButton.ariaLabel | default("Toggle main menu") ,
-                                        "aria-controls": params.navigation.id,
-                                        "aria-expanded": "false"
-                                    }
-                                }) }}
+                                    })
+                                }}
                             {% endif %}
                         </div>
                     {% endif %}

package/components/header/example-header-default.njk

@@ -1,6 +1,7 @@
 ---
-"fullWidth": true
+'fullWidth': true
 ---
+
 {% from "components/header/_macro.njk" import onsHeader %}
 
 {{

package/components/header/example-header-external-for-survey-with-description.njk

@@ -1,6 +1,7 @@
 ---
-"fullWidth": true
+'fullWidth': true
 ---
+
 {% from "components/header/_macro.njk" import onsHeader %}
 
 {{

package/components/header/example-header-external-for-surveys.njk

@@ -1,6 +1,7 @@
 ---
-"fullWidth": true
+'fullWidth': true
 ---
+
 {% from "components/header/_macro.njk" import onsHeader %}
 
 {{

package/components/header/example-header-external-welsh.njk

@@ -1,14 +1,14 @@
 ---
 fullWidth: true
-layout: ~
 ---
-{% extends "layout/_template.njk" %}
 
-{% set pageConfig = {
-    "header": {
-        "mastheadLogoUrl": '#0',
+{% from "components/header/_macro.njk" import onsHeader %}
+
+{{
+    onsHeader({
         "title": 'Gwasanaeth Cymraeg',
         "titleUrl": '#0',
+        "mastheadLogoUrl": '#0',
         "language": {
             "languages": [
                 {
@@ -25,5 +25,5 @@ layout: ~
                 }
             ]
         }
-    }
-} %}
+    })
+}}

package/components/header/example-header-external-with-navigation-and-search.njk

@@ -1,6 +1,7 @@
 ---
-"fullWidth": true
+'fullWidth': true
 ---
+
 {% from "components/header/_macro.njk" import onsHeader %}
 
 {{
@@ -38,7 +39,7 @@
                 "ariaLabel": 'Toggle main menu'
             }
         },
-           'siteSearchAutosuggest': {
+        "siteSearchAutosuggest": {
             "autosuggestData":  "/examples/data/country-of-birth.json",
             "label": "search",
             "instructions": "instructions",

package/components/header/example-header-external-with-navigation.njk

@@ -1,6 +1,7 @@
 ---
-"fullWidth": true
+'fullWidth': true
 ---
+
 {% from "components/header/_macro.njk" import onsHeader %}
 
 {{

package/components/header/example-header-external-with-service-links.njk

@@ -1,6 +1,7 @@
 ---
-"fullWidth": true
+'fullWidth': true
 ---
+
 {% from "components/header/_macro.njk" import onsHeader %}
 
 {{

package/components/header/example-header-external-with-sub-navigation-removed.njk

@@ -1,6 +1,7 @@
 ---
-"fullWidth": true
+'fullWidth': true
 ---
+
 {% from "components/header/_macro.njk" import onsHeader %}
 
 {{

package/components/header/example-header-external-with-sub-navigation.njk

@@ -1,6 +1,7 @@
 ---
-"fullWidth": true
+'fullWidth': true
 ---
+
 {% from "components/header/_macro.njk" import onsHeader %}
 
 {{
@@ -130,4 +131,4 @@
             }
         }
     })
-}}
+}}

package/components/header/example-header-internal.njk

@@ -1,6 +1,7 @@
 ---
-"fullWidth": true
+'fullWidth': true
 ---
+
 {% from "components/header/_macro.njk" import onsHeader %}
 
 {{

package/components/header/example-header-multiple-logos.njk

@@ -1,6 +1,7 @@
 ---
-"fullWidth": true
+'fullWidth': true
 ---
+
 {% from "components/header/_macro.njk" import onsHeader %}
 
 {{

package/components/header/{example-header-neutral-for-multicoloured-logo.njk → example-header-neutral.njk}

@@ -1,6 +1,7 @@
 ---
-"fullWidth": true
+'fullWidth': true
 ---
+
 {% from "components/header/_macro.njk" import onsHeader %}
 
 {{

package/components/helpers/grid.njk

@@ -1,19 +1,20 @@
-{% macro patternLibExampleGrid(params) %}
-    {% if params.container -%}
-        <div class="ons-container">
-    {% endif -%}
+{% macro dsExampleGrid(params) %}
 
-    <div class="ons-grid">
-        {% for item in (params.itemsList if params.itemsList is iterable else params.itemsList.items()) -%}
-            {% for i in range(0, item.repeat | default(1) ) -%}
-                <div class="ons-grid__col ons-col-{{ item.col }}@m {{ item.classes }}">
-                    <div class="ons-pl-grid-col">{{ item.col }} col</div>
-                </div>
-            {%- endfor %}
-        {%- endfor %}
-    </div>
-
-    {% if params.container -%}
+    {% set grid %}
+        <div class="ons-grid">
+            {%- for item in (params.itemsList if params.itemsList is iterable else params.itemsList.items()) -%}
+                {%- for i in range(0, item.repeat | default(1) ) -%}
+                    <div class="ons-grid__col ons-col-{{ item.col }}@m {{ item.classes }}">
+                        <div class="ons-pl-grid-col">{{ item.col }} col</div>
+                    </div>
+                {%- endfor -%}
+            {%- endfor -%}
         </div>
-    {% endif -%}
+    {% endset %}
+
+    {%- if params.container -%}
+        <div class="ons-container">{{ grid | safe }}</div>
+    {% else %}
+        {{ grid | safe }}
+    {%- endif -%}
 {% endmacro %}