@ons/design-system 70.0.8 → 70.0.9

package/components/relationships/example-relationships.njk

@@ -1,185 +1,191 @@
 ---
-title: "Example: Third-person relationship question"
+title: 'Example: Third-person relationship question'
 layout: ~
 ---
+
 {% extends "layout/_template.njk" %}
 {% from "components/question/_macro.njk" import onsQuestion %}
 {% from "components/relationships/_macro.njk" import onsRelationships %}
-
-{% set pageConfig = {
-    "header": {
-        "title": "Relationships example"
-    },
-    "breadcrumbs": {
-        "ariaLabel": 'Breadcrumbs',
-        "itemsList": [
-            {
-                "url": '#0',
-                "text": 'Previous'
-            }
-        ]
+{%
+    set pageConfig = {
+        "header": {
+            "title": "Relationships example"
+        },
+        "breadcrumbs": {
+            "ariaLabel": 'Breadcrumbs',
+            "itemsList": [
+                {
+                    "url": '#0',
+                    "text": 'Previous'
+                }
+            ]
+        }
     }
-} %}
+%}
 
 {% block main %}
-    {% call onsQuestion({
-        "title": "Thinking of Joe Bloggs, Amanda Bloggs is their <strong>…</strong>",
-        "description": "<p>Complete the sentence by selecting the appropriate relationship</p>",
-        "readDescriptionFirst": true,
-        "legendIsQuestionTitle": true,
-        "legendTitleClasses": "ons-js-relationships-legend",
-        "submitButton": true
-    }) %}
-        {{ onsRelationships({
-            "playback": "Amanda Bloggs is Joe Bloggs' <strong>…</strong>",
-            "name": "relationship",
-            "dontWrap": true,
-            "radios": [
-                {
-                    "id": "husband-wife-example-relationships",
-                    "value": "husband-wife",
-                    "label": {
-                        "text": "Husband or wife"
+    {%
+        call onsQuestion({
+            "title": "Thinking of Joe Bloggs, Amanda Bloggs is their <strong>…</strong>",
+            "description": "<p>Complete the sentence by selecting the appropriate relationship</p>",
+            "readDescriptionFirst": true,
+            "legendIsQuestionTitle": true,
+            "legendTitleClasses": "ons-js-relationships-legend",
+            "submitButton": true
+        })
+    %}
+        {{
+            onsRelationships({
+                "playback": "Amanda Bloggs is Joe Bloggs' <strong>…</strong>",
+                "name": "relationship",
+                "dontWrap": true,
+                "radios": [
+                    {
+                        "id": "husband-wife-example-relationships",
+                        "value": "husband-wife",
+                        "label": {
+                            "text": "Husband or wife"
+                        },
+                        "attributes": {
+                            "data-title": "Thinking of Joe Bloggs, Amanda Bloggs is their <strong>husband or wife</strong>",
+                            "data-playback": "Amanda Bloggs is Joe Bloggs' <strong>husband or wife</strong>"
+                        }
                     },
-                    "attributes": {
-                        "data-title": "Thinking of Joe Bloggs, Amanda Bloggs is their <strong>husband or wife</strong>",
-                        "data-playback": "Amanda Bloggs is Joe Bloggs' <strong>husband or wife</strong>"
-                    }
-                },
-                {
-                    "id": "civil-partner-example-relationships",
-                    "value": "civil-partner",
-                    "label": {
-                        "text": "Legally registered civil partner"
+                    {
+                        "id": "civil-partner-example-relationships",
+                        "value": "civil-partner",
+                        "label": {
+                            "text": "Legally registered civil partner"
+                        },
+                        "attributes": {
+                            "data-title": "Thinking of Joe Bloggs, Amanda Bloggs is their <strong>legally registered civil partner</strong>",
+                            "data-playback": "Amanda Bloggs is Joe Bloggs' <strong>legally registered civil partner</strong>"
+                        }
                     },
-                    "attributes": {
-                        "data-title": "Thinking of Joe Bloggs, Amanda Bloggs is their <strong>legally registered civil partner</strong>",
-                        "data-playback": "Amanda Bloggs is Joe Bloggs' <strong>legally registered civil partner</strong>"
-                    }
-                },
-                {
-                    "id": "partner-example-relationships",
-                    "value": "partner",
-                    "label": {
-                        "text": "Partner"
+                    {
+                        "id": "partner-example-relationships",
+                        "value": "partner",
+                        "label": {
+                            "text": "Partner"
+                        },
+                        "attributes": {
+                            "data-title": "Thinking of Joe Bloggs, Amanda Bloggs is their <strong>partner</strong>",
+                            "data-playback": "Amanda Bloggs is Joe Bloggs' <strong>partner</strong>"
+                        }
                     },
-                    "attributes": {
-                        "data-title": "Thinking of Joe Bloggs, Amanda Bloggs is their <strong>partner</strong>",
-                        "data-playback": "Amanda Bloggs is Joe Bloggs' <strong>partner</strong>"
-                    }
-                },
-                {
-                    "id": "son-daughter-example-relationships",
-                    "value": "son-daughter",
-                    "label": {
-                        "text": "Son or daughter"
+                    {
+                        "id": "son-daughter-example-relationships",
+                        "value": "son-daughter",
+                        "label": {
+                            "text": "Son or daughter"
+                        },
+                        "attributes": {
+                            "data-title": "Thinking of Joe Bloggs, Amanda Bloggs is their <strong>son or daughter</strong>",
+                            "data-playback": "Amanda Bloggs is Joe Bloggs' <strong>son or daughter</strong>"
+                        }
                     },
-                    "attributes": {
-                        "data-title": "Thinking of Joe Bloggs, Amanda Bloggs is their <strong>son or daughter</strong>",
-                        "data-playback": "Amanda Bloggs is Joe Bloggs' <strong>son or daughter</strong>"
-                    }
-                },
-                {
-                    "id": "stepchild-example-relationships",
-                    "value": "stepchild",
-                    "label": {
-                        "text": "Stepchild"
+                    {
+                        "id": "stepchild-example-relationships",
+                        "value": "stepchild",
+                        "label": {
+                            "text": "Stepchild"
+                        },
+                        "attributes": {
+                            "data-title": "Thinking of Joe Bloggs, Amanda Bloggs is their <strong>stepchild</strong>",
+                            "data-playback": "Amanda Bloggs is Joe Bloggs' <strong>stepchild</strong>"
+                        }
                     },
-                    "attributes": {
-                        "data-title": "Thinking of Joe Bloggs, Amanda Bloggs is their <strong>stepchild</strong>",
-                        "data-playback": "Amanda Bloggs is Joe Bloggs' <strong>stepchild</strong>"
-                    }
-                },
-                {
-                    "id": "brother-sister-example-relationships",
-                    "value": "brother-sister",
-                    "label": {
-                        "text": "Brother or sister"
+                    {
+                        "id": "brother-sister-example-relationships",
+                        "value": "brother-sister",
+                        "label": {
+                            "text": "Brother or sister"
+                        },
+                        "attributes": {
+                            "data-title": "Thinking of Joe Bloggs, Amanda Bloggs is their <strong>brother or sister</strong>",
+                            "data-playback": "Amanda Bloggs is Joe Bloggs' <strong>brother or sister</strong>"
+                        }
                     },
-                    "attributes": {
-                        "data-title": "Thinking of Joe Bloggs, Amanda Bloggs is their <strong>brother or sister</strong>",
-                        "data-playback": "Amanda Bloggs is Joe Bloggs' <strong>brother or sister</strong>"
-                    }
-                },
-                {
-                    "id": "stepbrother-stepsister-example-relationships",
-                    "value": "stepbrother-stepsister",
-                    "label": {
-                        "text": "Stepbrother or stepsister"
-                    },
-                    "attributes": {
-                        "data-title": "Thinking of Joe Bloggs, Amanda Bloggs is their <strong>stepbrother or sister</strong>",
-                        "data-playback": "Amanda Bloggs is Joe Bloggs' <strong>stepbrother or sister</strong>"
-                    }
-                },
-                {
-                    "id": "mother-father-example-relationships",
-                    "value": "mother-father",
-                    "label": {
-                        "text": "Mother or father"
+                    {
+                        "id": "stepbrother-stepsister-example-relationships",
+                        "value": "stepbrother-stepsister",
+                        "label": {
+                            "text": "Stepbrother or stepsister"
+                        },
+                        "attributes": {
+                            "data-title": "Thinking of Joe Bloggs, Amanda Bloggs is their <strong>stepbrother or sister</strong>",
+                            "data-playback": "Amanda Bloggs is Joe Bloggs' <strong>stepbrother or sister</strong>"
+                        }
                     },
-                    "attributes": {
-                        "data-title": "Thinking of Joe Bloggs, Amanda Bloggs is their <strong>mother or father</strong>",
-                        "data-playback": "Amanda Bloggs is Joe Bloggs' <strong>mother or father</strong>"
-                    }
-                },
-                {
-                    "id": "stepmother-stepfather-example-relationships",
-                    "value": "stepmother-stepfather",
-                    "label": {
-                        "text": "Stepmother or stepfather"
+                    {
+                        "id": "mother-father-example-relationships",
+                        "value": "mother-father",
+                        "label": {
+                            "text": "Mother or father"
+                        },
+                        "attributes": {
+                            "data-title": "Thinking of Joe Bloggs, Amanda Bloggs is their <strong>mother or father</strong>",
+                            "data-playback": "Amanda Bloggs is Joe Bloggs' <strong>mother or father</strong>"
+                        }
                     },
-                    "attributes": {
-                        "data-title": "Thinking of Joe Bloggs, Amanda Bloggs is their <strong>stepmother or stepfather</strong>",
-                        "data-playback": "Amanda Bloggs is Joe Bloggs' <strong>stepmother or stepfather</strong>"
-                    }
-                },
-                {
-                    "id": "grandchild-example-relationships",
-                    "value": "grandchild",
-                    "label": {
-                        "text": "Grandchild"
+                    {
+                        "id": "stepmother-stepfather-example-relationships",
+                        "value": "stepmother-stepfather",
+                        "label": {
+                            "text": "Stepmother or stepfather"
+                        },
+                        "attributes": {
+                            "data-title": "Thinking of Joe Bloggs, Amanda Bloggs is their <strong>stepmother or stepfather</strong>",
+                            "data-playback": "Amanda Bloggs is Joe Bloggs' <strong>stepmother or stepfather</strong>"
+                        }
                     },
-                    "attributes": {
-                        "data-title": "Thinking of Joe Bloggs, Amanda Bloggs is their <strong>grandchild</strong>",
-                        "data-playback": "Amanda Bloggs is Joe Bloggs' <strong>grandchild</strong>"
-                    }
-                },
-                {
-                    "id": "grandparent-example-relationships",
-                    "value": "grandparent",
-                    "label": {
-                        "text": "Grandparent"
+                    {
+                        "id": "grandchild-example-relationships",
+                        "value": "grandchild",
+                        "label": {
+                            "text": "Grandchild"
+                        },
+                        "attributes": {
+                            "data-title": "Thinking of Joe Bloggs, Amanda Bloggs is their <strong>grandchild</strong>",
+                            "data-playback": "Amanda Bloggs is Joe Bloggs' <strong>grandchild</strong>"
+                        }
                     },
-                    "attributes": {
-                        "data-title": "Thinking of Joe Bloggs, Amanda Bloggs is their <strong>grandparents</strong>",
-                        "data-playback": "Amanda Bloggs is Joe Bloggs' <strong>grandparents</strong>"
-                    }
-                },
-                {
-                    "id": "other-relation-example-relationships",
-                    "value": "other-relation",
-                    "label": {
-                        "text": "Other relation"
+                    {
+                        "id": "grandparent-example-relationships",
+                        "value": "grandparent",
+                        "label": {
+                            "text": "Grandparent"
+                        },
+                        "attributes": {
+                            "data-title": "Thinking of Joe Bloggs, Amanda Bloggs is their <strong>grandparents</strong>",
+                            "data-playback": "Amanda Bloggs is Joe Bloggs' <strong>grandparents</strong>"
+                        }
                     },
-                    "attributes": {
-                        "data-title": "Thinking of Joe Bloggs, Amanda Bloggs is their <strong>other relation</strong>",
-                        "data-playback": "Amanda Bloggs is Joe Bloggs' <strong>other relation</strong>"
-                    }
-                },
-                {
-                    "id": "unrelated-example-relationships",
-                    "value": "unrelated",
-                    "label": {
-                        "text": "Unrelated",
-                        "description": "Including foster child"
+                    {
+                        "id": "other-relation-example-relationships",
+                        "value": "other-relation",
+                        "label": {
+                            "text": "Other relation"
+                        },
+                        "attributes": {
+                            "data-title": "Thinking of Joe Bloggs, Amanda Bloggs is their <strong>other relation</strong>",
+                            "data-playback": "Amanda Bloggs is Joe Bloggs' <strong>other relation</strong>"
+                        }
                     },
-                    "attributes": {
-                        "data-title": "Thinking of Joe Bloggs, Amanda Bloggs is <strong>unrelated</strong> to Joe Bloggs",
-                        "data-playback": "Amanda Bloggs is <strong>unrelated</strong> to Joe Bloggs"
+                    {
+                        "id": "unrelated-example-relationships",
+                        "value": "unrelated",
+                        "label": {
+                            "text": "Unrelated",
+                            "description": "Including foster child"
+                        },
+                        "attributes": {
+                            "data-title": "Thinking of Joe Bloggs, Amanda Bloggs is <strong>unrelated</strong> to Joe Bloggs",
+                            "data-playback": "Amanda Bloggs is <strong>unrelated</strong> to Joe Bloggs"
+                        }
                     }
-                }
-            ]
-        }) }}
+                ]
+            })
+        }}
     {% endcall %}
 {% endblock %}

package/components/section-navigation/_macro.njk

@@ -1,25 +1,39 @@
 {% macro onsSectionNavigation(params) %}
     {% set headingLevel = params.headingLevel | default(2) %}
     {% set sectionTitleHeadingLevel = headingLevel + 1 %}
-    <nav class="ons-section-nav{% if params.variants == 'vertical' %} ons-section-nav--vertical{% endif %} {% if params.classes %} {{ params.classes }} {% endif %}"{% if params.id %} id="{{ params.id }}"{% endif %} aria-labelledby="{{ params.hiddenTitleId | default("section-menu-nav-title")}}">
-        <h{{ headingLevel }} class="ons-u-vh" id="{{ params.hiddenTitleId | default("section-menu-nav-title") }}">{{ params.hiddenTitle | default("Pages in this section") }}</h{{ headingLevel }}>
+    {% set openingHeadingTag = "<h" + headingLevel | string %}
+    {% set closingHeadingTag = "</h" + headingLevel | string + ">" %}
+
+    <nav
+        class="ons-section-nav{{ ' ons-section-nav--vertical' if params.variants == 'vertical' }}{{ ' ' + params.classes if params.classes else '' }}"
+        {% if params.id %}id="{{ params.id }}"{% endif %}
+        aria-labelledby="{{ params.hiddenTitleId | default('section-menu-nav-title') }}"
+    >
+        {{ openingHeadingTag | safe }} class="ons-u-vh"
+        id="{{ params.hiddenTitleId | default('section-menu-nav-title') }}">{{ params.hiddenTitle | default("Pages in this section") }}{{ closingHeadingTag | safe }}
         {% if params.sections %}
             {% for section in params.sections %}
                 {% set sectionItemHeadingLevel = headingLevel + 2 if section.title else headingLevel + 1 %}
                 <div class="ons-section-nav__sub">
                     {% if section.title %}
-                        <h{{ sectionTitleHeadingLevel }} class="ons-u-fs-r--b ons-u-mb-s">{{ section.title }}</h{{ sectionTitleHeadingLevel }}>
+                        {{ openingHeadingTag | replace(headingLevel, sectionTitleHeadingLevel | string) | safe }}
+                        class="ons-u-fs-r--b
+                        ons-u-mb-s">{{ section.title }}{{ closingHeadingTag | replace(headingLevel, sectionTitleHeadingLevel | string) | safe }}
                     {% endif %}
                     <ul class="ons-section-nav__list">
                         {% for item in section.itemsList %}
-                            {% if (params.currentPath and item.url == params.currentPath) or (params.tabQuery and params.tabQuery == item.title|lower) %}
+                            {% if (params.currentPath and item.url == params.currentPath) or (params.tabQuery and params.tabQuery == item.title | lower) %}
                                 {% set isCurrent = true %}
                             {% else %}
                                 {% set isCurrent = false %}
                             {% endif %}
-                            <li class="ons-section-nav__item{% if item.classes %}{{ ' ' + item.classes }}{% endif %}{% if isCurrent == true %} ons-section-nav__item--active{% endif %}">
+                            <li
+                                class="ons-section-nav__item{{ ' ' + item.classes if item.classes else '' }}{{ ' ons-section-nav__item--active' if isCurrent == true }}"
+                            >
                                 {% if isCurrent == true %}
-                                    <h{{ sectionItemHeadingLevel }} class="ons-section-nav__link ons-section-nav__item-header" href="{{ item.url }}" aria-current="location">{{ item.title }}</h{{ sectionItemHeadingLevel }}>
+                                    {{ openingHeadingTag | replace(headingLevel, sectionItemHeadingLevel | string) | safe }}
+                                    class="ons-section-nav__link ons-section-nav__item-header" href="{{ item.url }}"
+                                    aria-current="location">{{ item.title }}{{ closingHeadingTag | replace(headingLevel, sectionItemHeadingLevel | string) | safe }}
                                 {% else %}
                                     <a class="ons-section-nav__link" href="{{ item.url }}">{{ item.title }}</a>
                                 {% endif %}
@@ -27,7 +41,9 @@
                                     <ul class="ons-section-nav__sub-items ons-list ons-list--dashed ons-u-mt-xs ons-u-mb-xs">
                                         {% for anchor in item.anchors %}
                                             <li class="ons-section-nav__item ons-list__item">
-                                                <a href="{{ anchor.url }}" class="ons-section-nav__link ons-list__link">{{ anchor.title }}</a>
+                                                <a href="{{ anchor.url }}" class="ons-section-nav__link ons-list__link"
+                                                    >{{ anchor.title }}</a
+                                                >
                                             </li>
                                         {% endfor %}
                                     </ul>
@@ -39,19 +55,25 @@
             {% endfor %}
         {% else %}
             {% if params.title %}
-                <h{{ sectionTitleHeadingLevel }} class="ons-u-fs-r--b ons-u-mb-s">{{ params.title }}</h{{ sectionTitleHeadingLevel }}>
+                {{ openingHeadingTag | replace(headingLevel, sectionTitleHeadingLevel | string) | safe }}
+                class="ons-u-fs-r--b
+                ons-u-mb-s">{{ params.title }}{{ closingHeadingTag | replace(headingLevel, sectionTitleHeadingLevel | string) }}
             {% endif %}
             <ul class="ons-section-nav__list">
                 {% for item in params.itemsList %}
                     {% set sectionItemHeadingLevel = headingLevel + 2 if params.title else headingLevel + 1 %}
-                    {% if (params.currentPath and item.url == params.currentPath) or (params.tabQuery and params.tabQuery == item.title|lower) %}
+                    {% if (params.currentPath and item.url == params.currentPath) or (params.tabQuery and params.tabQuery == item.title | lower) %}
                         {% set isCurrent = true %}
                     {% else %}
                         {% set isCurrent = false %}
                     {% endif %}
-                    <li class="ons-section-nav__item{% if item.classes %}{{ ' ' + item.classes }}{% endif %}{% if isCurrent == true %} ons-section-nav__item--active{% endif %}">
-                        {% if isCurrent == true %} 
-                            <h{{ sectionItemHeadingLevel }} class="ons-section-nav__link ons-section-nav__item-header" href="{{ item.url }}" aria-current="location">{{ item.title }}</h{{ headingLevel + 2 if section.title else headingLevel + 1 }}>
+                    <li
+                        class="ons-section-nav__item{{ ' ' + item.classes if item.classes else '' }}{% if isCurrent == true %}{{ ' ' }}ons-section-nav__item--active{% endif %}"
+                    >
+                        {% if isCurrent == true %}
+                            {{ openingHeadingTag | replace(headingLevel, sectionItemHeadingLevel | string) | safe }}
+                            class="ons-section-nav__link ons-section-nav__item-header" href="{{ item.url }}"
+                            aria-current="location">{{ item.title }}{{ closingHeadingTag | replace(headingLevel, sectionItemHeadingLevel | string) | safe }}
                         {% else %}
                             <a class="ons-section-nav__link" href="{{ item.url }}">{{ item.title }}</a>
                         {% endif %}

package/components/select/_macro.njk

@@ -2,14 +2,16 @@
     {% from "components/field/_macro.njk" import onsField %}
     {% from "components/label/_macro.njk" import onsLabel %}
 
-    {% call onsField({
-        "id": params.fieldId,
-        "classes": params.fieldClasses,
-        "legendClasses": params.legendClasses,
-        "dontWrap": params.dontWrap,
-        "error": params.error,
-        "inline": params.label.inline if params.label else ''
-    }) %}
+    {%
+        call onsField({
+            "id": params.fieldId,
+            "classes": params.fieldClasses,
+            "legendClasses": params.legendClasses,
+            "dontWrap": params.dontWrap,
+            "error": params.error,
+            "inline": params.label.inline if params.label
+        })
+    %}
         {{
             onsLabel({
                 "for": params.id,
@@ -21,18 +23,19 @@
         <select
             id="{{ params.id }}"
             name="{{ params.name }}"
-            class="ons-input ons-input--select{% if params.classes %} {{ params.classes }}{% endif %}{% if params.error %} ons-input--error{% endif %}"
-            {% if params.attributes %}{% for attribute, value in (params.attributes.items() if params.attributes is mapping and params.attributes.items else params.attributes) %}{{ attribute }}{% if value %}="{{ value }}"{% endif %} {% endfor %}{% endif %}
+            class="ons-input ons-input--select{{ ' ' + params.classes if params.classes else '' }}{{ ' ons-input--error' if params.error }}"
+            {% if params.attributes %}{% for attribute, value in (params.attributes.items() if params.attributes is mapping and params.attributes.items else params.attributes) %}{{ ' ' }}{{ attribute }}{% if value %}="{{ value }}"{% endif %}{% endfor %}{% endif %}
         >
             {% for option in params.options %}
-            <option value="{{ option.value | default(option.text) }}"
-                {% if option.id %}id="{{ option.id }}" {% endif %}
-                {% if option.selected %}selected {% endif %}
-                {% if option.disabled %}disabled {% endif %}
-                {% if option.attributes %}{% for attribute, value in option.attributes %}{{ attribute }}="{{ value }}"{% endfor %}{% endif %}
-            >
-                {{- option.text -}}
-            </option>
+                <option
+                    value="{{ option.value | default(option.text) }}"
+                    {% if option.id %}{{ ' ' }}id="{{ option.id }}"{% endif %}
+                    {% if option.selected %}{{ ' ' }}selected{% endif %}
+                    {% if option.disabled %}{{ ' ' }}disabled{% endif %}
+                    {% if option.attributes %}{% for attribute, value in option.attributes %}{{ ' ' }}{{ attribute }}="{{ value }}"{% endfor %}{% endif %}
+                >
+                    {{- option.text -}}
+                </option>
             {% endfor %}
         </select>
     {% endcall %}

package/components/share-page/_macro.njk

@@ -3,11 +3,15 @@
 
     {% if params.title %}
         {% set titleTag = params.titleTag | default("h2") %}
-        <{{ titleTag }} class="ons-u-fs-r--b ons-u-mb-xs">{{ params.title }}</{{ titleTag }}>
+        {% set openingTag = "<" + titleTag %}
+        {% set closingTag = "</" + titleTag + ">" %}
+        {{ openingTag | safe }}
+        class="ons-u-fs-r--b ons-u-mb-xs">{{ params.title }}{{ closingTag | safe }}
     {% endif %}
 
     {% if params.facebook and params.facebook == true %}
-        {% set facebook =
+        {%
+            set facebook =
             {
                 "url": 'https://www.facebook.com/sharer/sharer.php?u=' ~ params.pageURL|urlencode,
                 "text": 'Facebook',
@@ -15,10 +19,11 @@
                 "rel": 'noreferrer external',
                 "target": '_blank'
             }
-         %}
+        %}
     {% endif %}
     {% if params.twitter and params.twitter == true %}
-        {% set twitter =
+        {%
+            set twitter =
             {
                 "url": 'https://twitter.com/intent/tweet?original_referer&text=' ~ params.pageTitle|urlencode ~ '&url=' ~ params.pageURL|urlencode,
                 "text": 'Twitter',
@@ -26,7 +31,7 @@
                 "rel": 'noreferrer external',
                 "target": '_blank'
             }
-         %}
+        %}
     {% endif %}
     {{
         onsList({

package/components/skip-to-content/_macro.njk

@@ -1,4 +1,4 @@
 {% macro onsSkipToContent(params) %}
- {% set text = params.text | default('Skip to content') %}
+    {% set text = params.text | default('Skip to content') %}
     <a class="ons-skip-to-content" href="{{ params.url }}">{{ text }}</a>
 {% endmacro %}

package/components/skip-to-content/example-skip-to-content.njk

@@ -1,6 +1,7 @@
 ---
 fullWidth: true
 ---
+
 {% from "components/skip-to-content/_macro.njk" import onsSkipToContent %}
 {{
     onsSkipToContent({

package/components/status/_macro.njk

@@ -9,5 +9,5 @@
         {% set sizeClass = ' ons-status--small' %}
     {% endif %}
 
-    <span class="ons-status{{typeClass}}{{sizeClass}}">{{ params.label }}</span>
+    <span class="ons-status{{ typeClass }}{{ sizeClass }}">{{ params.label }}</span>
 {% endmacro %}