@ons/design-system 70.0.8 → 70.0.10

package/components/browser-banner/_macro.njk

@@ -2,16 +2,19 @@
     {% if params.lang == "cy" %}
         {% set bannerLeadingText = 'Nid yw’r wefan hon yn cefnogi eich porwr mwyach.' %}
         {% set bannerLinkUrl = 'https://cy.ons.gov.uk/help/browsers' %}
-        {% set bannerCTA = 'Gallwch <a class="ons-browser-banner__link" href="' + bannerLinkUrl + '">ddiweddaru eich porwr i’r fersiwn ddiweddaraf</a>.' %}
+        {% set bannerCta = 'Gallwch <a class="ons-browser-banner__link" href="' + bannerLinkUrl + '">ddiweddaru eich porwr i’r fersiwn ddiweddaraf</a>.' %}
     {% else %}
         {% set bannerLeadingText = 'This website no longer supports your browser.' %}
         {% set bannerLinkUrl = 'https://www.ons.gov.uk/help/browsers' %}
-        {% set bannerCTA = 'You can <a class="ons-browser-banner__link" href="' + bannerLinkUrl + '">upgrade your browser to the latest version</a>.' %}
+        {% set bannerCta = 'You can <a class="ons-browser-banner__link" href="' + bannerLinkUrl + '">upgrade your browser to the latest version</a>.' %}
     {% endif %}
 
     <div class="ons-browser-banner">
         <div class="ons-container{{ ' ons-container--full-width' if params.fullWidth }}{{ ' ons-container--wide' if params.wide }}">
-            <p class="ons-browser-banner__content"><span class="ons-browser-banner__lead">{{ bannerLeadingText }}</span><span class="ons-browser-banner__cta"> {{ bannerCTA | safe }}</span></p>
+            <p class="ons-browser-banner__content">
+                <span class="ons-browser-banner__lead">{{ bannerLeadingText }}</span
+                ><span class="ons-browser-banner__cta"> {{ bannerCta | safe }}</span>
+            </p>
         </div>
     </div>
 {% endmacro %}

package/components/button/_button.scss

@@ -285,6 +285,7 @@ $button-shadow-size: 3px;
     &--ghost-dark,
     &--dropdown,
     &--text-link,
+    &--neutral,
     &--disabled,
     &--loader.ons-is-loading {
         &:active,
@@ -302,7 +303,8 @@ $button-shadow-size: 3px;
     &--ghost:focus:hover,
     &--ghost-dark:focus:hover,
     &--dropdown:focus:hover,
-    &--text-link:focus:hover {
+    &--text-link:focus:hover,
+    &--neutral:focus:hover {
         outline: none;
     }
 
@@ -515,6 +517,39 @@ $button-shadow-size: 3px;
             }
         }
     }
+
+    &--neutral &,
+    &--neutral:hover &,
+    &--neutral:active &,
+    &--neutral.active & {
+        &__inner {
+            background: transparent;
+            border: 0;
+            border-radius: 0;
+            box-shadow: none;
+            color: var(--ons-color-black);
+            font-weight: $font-weight-regular;
+            padding: 2px;
+            .ons-icon {
+                fill: var(--ons-color-black);
+            }
+        }
+    }
+
+    &--neutral:focus &,
+    &--neutral:active:focus &,
+    &--neutral.active:focus & {
+        &__inner {
+            background-color: var(--ons-color-focus);
+            box-shadow:
+                0 -2px var(--ons-color-focus),
+                0 4px var(--ons-color-text-link-focus) !important;
+            color: var(--ons-color-text-link-focus);
+            .ons-icon {
+                fill: var(--ons-color-text-link-focus);
+            }
+        }
+    }
 }
 
 .ons-btn-group {

package/components/button/_macro.njk

@@ -13,11 +13,11 @@
         {% endif %}
     {% elif params.iconType is not defined and params.noIcon is not defined %}
         {% if params.url and params.newWindow %}
-        {# CTA link opening in new tab #}
+            {# CTA link opening in new tab #}
             {% set iconType = "external-link" %}
             {% set iconPosition = "after" %}
         {% elif params.url %}
-        {# CTA link #}
+            {# CTA link #}
             {% set iconType = "arrow-next" %}
             {% set iconPosition = "after" %}
         {% endif %}
@@ -39,7 +39,7 @@
             {% endif %}
             {% set iconType = "print" %}
             {% set iconPosition = "before" %}
-            {% set variantClasses = "ons-u-d-no ons-js-print-btn" %}
+            {% set variantClasses = " ons-u-d-no ons-js-print-btn" %}
         {% elif 'download' in params.variants %}
             {# Download #}
             {% set iconType = "download" %}
@@ -55,74 +55,75 @@
             {% set variantAttributes = "disabled" %}
         {% elif 'timer' in params.variants %}
             {# Timer #}
-            {% set variantClasses = "ons-js-timer ons-js-submit-btn" %}
+            {% set variantClasses = " ons-js-timer ons-js-submit-btn" %}
         {% elif 'loader' in params.variants %}
             {# Loader #}
             {% set iconType = "loader" %}
             {% set iconPosition = "after" %}
-            {% set variantClasses = "ons-btn--loader ons-js-loader ons-js-submit-btn" %}
+            {% set variantClasses = " ons-btn--loader ons-js-loader ons-js-submit-btn" %}
         {% endif %}
     {% endif %}
-
     {% set tag = "a" if params.url else "button" %}
-
-    <{{ tag }}
-        {% if params.url %}
-            href="{{ params.url }}"
-            role="button"
-        {% else %}
-            type="{{ buttonType }}"
-        {% endif %}
-        class="ons-btn{% if params.classes %} {{ params.classes }}{% endif %}{% if params.variants %}{% if params.variants is not string %}{% for variant in params.variants %} ons-btn--{{ variant }}{% endfor %}{% else %} ons-btn--{{ params.variants }}{% endif %}{% endif %}{% if params.url %} ons-btn--link ons-js-submit-btn{% endif %}{% if variantClasses %} {{ variantClasses }}{% endif %}"
-        {% if params.id %}id="{{ params.id }}"{% endif %}
-        {% if params.value and tag != "a" %}value="{{ params.value }}"{% endif %}
-        {% if params.name and tag != "a" %}name="{{ params.name }}"{% endif %}
-        {% if params.url and params.newWindow %}target="_blank" rel="noopener"{% endif %}
-        {{ variantAttributes }}
-        {% if params.attributes %}{% for attribute, value in (params.attributes.items() if params.attributes is mapping and params.attributes.items else params.attributes) %} {{attribute}}="{{value}}"{% endfor %}{% endif %}
-        >
-        <span class="ons-btn__inner{% if params.innerClasses %} {{ params.innerClasses }}{% endif %}">
-            {%- if iconPosition == "before" or iconPosition == "after" %}
-                {%- if iconPosition == "before" %}
-                    {{-
-                        onsIcon({
-                            "iconType": iconType,
-                            "classes": 'ons-u-mr-xs'
-                        })
-                    -}}
-                {% endif -%}
-                <span class="ons-btn__text">{{- params.html | safe if params.html else params.text -}}</span>
-                {%- if iconPosition == "after" %}
-                    {{-
-                        onsIcon({
-                            "iconType": iconType,
-                            "classes": 'ons-u-ml-xs'
-                        })
-                    -}}
-                {% endif -%}
-            {% elif iconPosition == "only" -%}
+    {% set openingTag = "<" + tag %}
+    {% set closingTag = "</" + tag + ">" %}
+    {{ openingTag | safe }}
+    {% if params.url %}
+        href="{{ params.url }}" role="button"
+    {% else %}
+        type="{{ buttonType }}"
+    {% endif %}
+    class="ons-btn{{ ' ' + params.classes if params.classes else '' }}{% if params.variants and params.variants is not string %}{% for variant in params.variants %}{{ ' ' }}ons-btn--{{ variant }}{% endfor %}{% else %}{{ ' ' }}ons-btn--{{ params.variants }}{% endif %}{{ ' ons-btn--link ons-js-submit-btn' if params.url }}{{ variantClasses }}"
+    {% if params.id %}id="{{ params.id }}"{% endif %}
+    {% if params.value and tag != "a" %}value="{{ params.value }}"{% endif %}
+    {% if params.name and tag != "a" %}name="{{ params.name }}"{% endif %}
+    {% if params.url and params.newWindow %}target="_blank" rel="noopener"{% endif %}
+    {{ variantAttributes }}
+    {% if params.attributes %}{% for attribute, value in (params.attributes.items() if params.attributes is mapping and params.attributes.items else params.attributes) %}{{ ' ' }}{{ attribute }}="{{ value }}"{% endfor %}{% endif %}
+    >
+    <span class="ons-btn__inner{{ ' ' + params.innerClasses if params.innerClasses else '' }}">
+        {%- if iconPosition == "before" or iconPosition == "after" -%}
+            {%- if iconPosition == "before" -%}
                 {{-
                     onsIcon({
-                        "iconType": iconType
+                        "iconType": iconType,
+                        "classes": 'ons-u-mr-xs'
                     })
                 -}}
-                <span class="ons-btn__text ons-u-vh@xxs@s">{{- params.html | safe if params.html else params.text -}}</span>
-            {% else -%}
-                <span class="ons-btn__text">{{- params.html | safe if params.html else params.text -}}</span>
-            {% endif -%}
-        </span>
-        {% if params.url and params.newWindow %}
-            <span class="ons-btn__new-window-description ons-u-vh"> ({{ params.newWindowDescription | default("opens in a new tab") }})</span>
-        {% endif %}
-        {% if params.buttonContext %}
-            <span class="ons-btn__context ons-u-vh">{{ params.buttonContext }}</span>
-        {% endif %}
-        {% if params.listeners %}
-            <script{% if csp_nonce %} nonce="{{ csp_nonce() }}"{% endif %}>
-                {% for listener, value in (params.listeners.items() if params.listeners is mapping and params.listeners.items else params.listeners) %}
-                    document.getElementById("{{ params.id }}").addEventListener('{{ listener }}', function(){ {{ value }} });
-                {% endfor %}
-            </script>
-        {% endif %}
-    </{{ tag }}>
+            {%- endif -%}
+            <span class="ons-btn__text">{{- params.html | safe if params.html else params.text -}}</span>
+            {%- if iconPosition == "after" -%}
+                {{-
+                    onsIcon({
+                        "iconType": iconType,
+                        "classes": 'ons-u-ml-xs'
+                    })
+                -}}
+            {%- endif -%}
+        {%- elif iconPosition == "only" -%}
+            {{-
+                onsIcon({
+                    "iconType": iconType
+                })
+            -}}
+            <span class="ons-btn__text ons-u-vh@xxs@s">{{- params.html | safe if params.html else params.text -}}</span>
+        {%- else -%}
+            <span class="ons-btn__text">{{- params.html | safe if params.html else params.text -}}</span>
+        {%- endif -%}
+    </span>
+    {% if params.url and params.newWindow %}
+        <span class="ons-btn__new-window-description ons-u-vh"> ({{ params.newWindowDescription | default("opens in a new tab") }})</span>
+    {% endif %}
+    {% if params.buttonContext %}
+        <span class="ons-btn__context ons-u-vh">{{ params.buttonContext }}</span>
+    {% endif %}
+    {% if params.listeners %}
+        <!-- prettier-ignore-start -->
+        <script{% if csp_nonce %} nonce="{{ csp_nonce() }}"{% endif %}>
+            {% for listener, value in (params.listeners.items() if params.listeners is mapping and params.listeners.items else params.listeners) %}
+                document.getElementById("{{ params.id }}").addEventListener('{{ listener }}', function(){ {{ value }} });
+            {% endfor %}
+        </script>
+        <!-- prettier-ignore-end -->
+    {% endif %}
+    {{ closingTag | safe }}
 {% endmacro %}

package/components/button/example-button-ghost.njk

@@ -1,6 +1,7 @@
 ---
 fullWidth: true
 ---
+
 {% from "components/button/_macro.njk" import onsButton %}
 <div style="padding: 1.5rem; background: #206095">
     {{

package/components/call-to-action/_macro.njk

@@ -10,11 +10,13 @@
                     {% endif %}
                 </div>
                 <div class="ons-grid__col ons-col-auto ons-u-flex-no-grow ons-u-mt-xs@xxs@s">
-                    {{ onsButton({
-                        "text": params.button.text,
-                        "url": params.button.url,
-                        "variants": "small"
-                    }) }}
+                    {{
+                        onsButton({
+                            "text": params.button.text,
+                            "url": params.button.url,
+                            "variants": "small"
+                        })
+                    }}
                 </div>
             </div>
         </div>

package/components/call-to-action/example-call-to-action-default.njk

@@ -1,6 +1,7 @@
 ---
-"fullWidth": true
+'fullWidth': true
 ---
+
 {% from "components/call-to-action/_macro.njk" import onsCallToAction %}
 {{-
     onsCallToAction({
@@ -11,4 +12,4 @@
             "url": '#0'
         }
     })
-}}
+-}}

package/components/card/_macro.njk

@@ -1,24 +1,42 @@
 {%- macro onsCard(params) -%}
-
-    {% set headingLevel = params.headingLevel | default(2) %}
+    {% set headingLevel = params.headingLevel | default(2) | string %}
+    {% set openingHeadingTag = "<h" + headingLevel %}
+    {% set closingHeadingTag = "</h" + headingLevel + ">" %}
+    {% set placeholderSrcset = (params.image.placeholderURL if params.image.placeholderURL) + "/img/small/placeholder-card.png 1x, " + (params.image.placeholderURL if params.image.placeholderURL else "") + "/img/large/placeholder-card.png 2x" %}
 
     <div class="ons-card">
         <a href="{{ params.url }}" class="ons-card__link">
             {%- if params.image -%}
                 {% if params.image.smallSrc %}
-                    <img class="ons-card__image ons-u-mb-s" height="200" width="303"{% if params.image.largeSrc %} srcset="{{ params.image.smallSrc }} 1x, {{ params.image.largeSrc }} 2x"{% endif %} src="{{ params.image.smallSrc }}" alt="{{ params.image.alt }}" loading="lazy">
+                    <img
+                        class="ons-card__image ons-u-mb-s"
+                        height="200"
+                        width="303"
+                        {% if params.image.largeSrc %}srcset="{{ params.image.smallSrc }} 1x, {{ params.image.largeSrc }} 2x"{% endif %}
+                        src="{{ params.image.smallSrc }}"
+                        alt="{{ params.image.alt }}"
+                        loading="lazy"
+                    />
                 {% elif params.image == true or params.image.placeholderURL %}
-                    <img class="ons-card__image ons-u-mb-s " height="100" width="303" srcset="{{ params.image.placeholderURL if params.image.placeholderURL }}/img/small/placeholder-card.png 1x, {{ params.image.placeholderURL if params.image.placeholderURL }}/img/large/placeholder-card.png 2x" src="{{ params.image.placeholderURL if params.image.placeholderURL }}/img/small/placeholder-card.png" alt="" loading="lazy">
+                    <img
+                        class="ons-card__image ons-u-mb-s "
+                        height="100"
+                        width="303"
+                        srcset="{{ placeholderSrcset }}"
+                        src="{{- params.image.placeholderURL if params.image.placeholderURL -}}/img/small/placeholder-card.png"
+                        alt=""
+                        loading="lazy"
+                    />
                 {% endif %}
             {%- endif -%}
-            <h{{ headingLevel }} class="ons-card__title {{ params.titleClasses | default('ons-u-fs-m')}}" id="{{ params.id }}">
-                {{ params.title }}
-            </h{{ headingLevel }}>
+            {{ openingHeadingTag | safe }}
+            class="ons-card__title {{ params.titleClasses | default('ons-u-fs-m') }}" id="{{ params.id }}"> {{ params.title }}
+            {{ closingHeadingTag | safe }}
         </a>
 
         <p id="{{ params.textId }}">{{ params.text }}</p>
 
-        {% if params.itemsList -%}
+        {%- if params.itemsList -%}
             {% from "components/list/_macro.njk" import onsList %}
             {{
                 onsList({
@@ -27,7 +45,5 @@
                 })
             }}
         {% endif %}
-
     </div>
-
 {%- endmacro -%}

package/components/card/example-card-set-with-images.njk

@@ -1,41 +1,43 @@
 {% from "components/card/_macro.njk" import onsCard %}
 <div class="ons-container">
-
-    <div class="ons-grid ons-grid--column@xxs@s">
-
+    <div class="ons-grid">
         <div class="ons-grid__col ons-col-4@m">
-            {{ onsCard({
-                "id": 'card-with-image-1',
-                "textId": 'text1',
-                "title": 'About the census',
-                "url": '#0',
-                "text": 'The census is a survey that gives us information about all the households in England and Wales.',
-                "image": true
-            }) }}
+            {{
+                onsCard({
+                    "id": 'card-with-image-1',
+                    "textId": 'text1',
+                    "title": 'About the census',
+                    "url": '#0',
+                    "text": 'The census is a survey that gives us information about all the households in England and Wales.',
+                    "image": true
+                })
+            }}
         </div>
 
         <div class="ons-grid__col ons-col-4@m">
-            {{ onsCard({
-                "id": 'card-with-image-2',
-                "textId": 'text2',
-                "title": 'Working on the census',
-                "url": '#0',
-                "text": 'For Census 2021, we’ll be hiring at least 30,000 field staff across England and Wales.',
-                "image": true
-            }) }}
+            {{
+                onsCard({
+                    "id": 'card-with-image-2',
+                    "textId": 'text2',
+                    "title": 'Working on the census',
+                    "url": '#0',
+                    "text": 'For Census 2021, we’ll be hiring at least 30,000 field staff across England and Wales.',
+                    "image": true
+                })
+            }}
         </div>
 
         <div class="ons-grid__col ons-col-4@m">
-            {{ onsCard({
-                "id": 'card-with-image-3',
-                "textId": 'text3',
-                "title": 'Your data and security',
-                "url": '#0',
-                "text": 'How we keep your data safe and what happens to your personal information.',
-                "image": true
-            }) }}
+            {{
+                onsCard({
+                    "id": 'card-with-image-3',
+                    "textId": 'text3',
+                    "title": 'Your data and security',
+                    "url": '#0',
+                    "text": 'How we keep your data safe and what happens to your personal information.',
+                    "image": true
+                })
+            }}
         </div>
-
     </div>
-    
 </div>

package/components/card/example-card-set-with-lists.njk

@@ -1,68 +1,70 @@
 {% from "components/card/_macro.njk" import onsCard %}
 <div class="ons-container">
-    
-    <div class="ons-grid ons-grid--column@xxs@s">
-       
+    <div class="ons-grid">
         <div class="ons-grid__col ons-col-4@m">
-            {{ onsCard({
-                "id": 'card-with-list-1',
-                "textId": 'text1',
-                "title": 'About the census',
-                "url": '#0',
-                "text": 'The census is a survey that gives us information about all the households in England and Wales.',
-                "itemsList": [
-                    {
-                        "url": '#0',
-                        "text": 'List item 1 about the census'
-                    },
-                    {
-                        "url": '#0',
-                        "text": 'List item 2 about the census'
-                    }
-                ]
-            }) }}
+            {{
+                onsCard({
+                    "id": 'card-with-list-1',
+                    "textId": 'text1',
+                    "title": 'About the census',
+                    "url": '#0',
+                    "text": 'The census is a survey that gives us information about all the households in England and Wales.',
+                    "itemsList": [
+                        {
+                            "url": '#0',
+                            "text": 'List item 1 about the census'
+                        },
+                        {
+                            "url": '#0',
+                            "text": 'List item 2 about the census'
+                        }
+                    ]
+                })
+            }}
         </div>
 
         <div class="ons-grid__col ons-col-4@m">
-            {{ onsCard({
-                "id": 'card-with-list-2',
-                "textId": 'text2',
-                "title": 'Working on the census',
-                "url": '#0',
-                "text": 'For Census 2021, we’ll be hiring at least 30,000 field staff across England and Wales.',
-                "itemsList": [
-                    {
-                        "url": '#0',
-                        "text": 'List item 1 about working on the census'
-                    },
-                    {
-                        "url": '#0',
-                        "text": 'List item 2 about working on the census'
-                    }
-                ]
-            }) }}
+            {{
+                onsCard({
+                    "id": 'card-with-list-2',
+                    "textId": 'text2',
+                    "title": 'Working on the census',
+                    "url": '#0',
+                    "text": 'For Census 2021, we’ll be hiring at least 30,000 field staff across England and Wales.',
+                    "itemsList": [
+                        {
+                            "url": '#0',
+                            "text": 'List item 1 about working on the census'
+                        },
+                        {
+                            "url": '#0',
+                            "text": 'List item 2 about working on the census'
+                        }
+                    ]
+                })
+            }}
         </div>
 
         <div class="ons-grid__col ons-col-4@m">
-            {{ onsCard({
-                "id": 'card-with-list-3',
-                "textId": 'text3',
-                "title": 'Your data and security',
-                "url": '#0',
-                "text": 'How we keep your data safe and what happens to your personal information.',
-                "itemsList": [
-                    {
-                        "url": '#0',
-                        "text": 'List item 1 about your data and security'
-                    },
-                    {
-                        "url": '#0',
-                        "text": 'List item 2 about your data and security'
-                    }
-                ]
-            }) }}
+            {{
+                onsCard({
+                    "id": 'card-with-list-3',
+                    "textId": 'text3',
+                    "title": 'Your data and security',
+                    "url": '#0',
+                    "text": 'How we keep your data safe and what happens to your personal information.',
+                    "itemsList": [
+                        {
+                            "url": '#0',
+                            "text": 'List item 1 about your data and security'
+                        },
+                        {
+                            "url": '#0',
+                            "text": 'List item 2 about your data and security'
+                        }
+                    ]
+                })
+            }}
         </div>
-
     </div>
-    
 </div>

package/components/card/example-card-set.njk

@@ -1,38 +1,40 @@
 {% from "components/card/_macro.njk" import onsCard %}
 <div class="ons-container">
-    
-    <div class="ons-grid ons-grid--column@xxs@s">
-       
+    <div class="ons-grid">
         <div class="ons-grid__col ons-col-4@m">
-            {{ onsCard({
-                "id": 'card-set-1',
-                "textId": 'text1',
-                "title": 'About the census',
-                "url": '#0',
-                "text": 'The census is a survey that gives us information about all the households in England and Wales.'
-            }) }}
+            {{
+                onsCard({
+                    "id": 'card-set-1',
+                    "textId": 'text1',
+                    "title": 'About the census',
+                    "url": '#0',
+                    "text": 'The census is a survey that gives us information about all the households in England and Wales.'
+                })
+            }}
         </div>
 
         <div class="ons-grid__col ons-col-4@m">
-            {{ onsCard({
-                "id": 'card-set-2',
-                "textId": 'text2',
-                "title": 'Working on the census',
-                "url": '#0',
-                "text": 'For Census 2021, we’ll be hiring at least 30,000 field staff across England and Wales.'
-            }) }}
+            {{
+                onsCard({
+                    "id": 'card-set-2',
+                    "textId": 'text2',
+                    "title": 'Working on the census',
+                    "url": '#0',
+                    "text": 'For Census 2021, we’ll be hiring at least 30,000 field staff across England and Wales.'
+                })
+            }}
         </div>
 
         <div class="ons-grid__col ons-col-4@m">
-            {{ onsCard({
-                "id": 'card-set-3',
-                "textId": 'text3',
-                "title": 'Your data and security',
-                "url": '#0',
-                "text": 'How we keep your data safe and what happens to your personal information.'
-            }) }}
+            {{
+                onsCard({
+                    "id": 'card-set-3',
+                    "textId": 'text3',
+                    "title": 'Your data and security',
+                    "url": '#0',
+                    "text": 'How we keep your data safe and what happens to your personal information.'
+                })
+            }}
         </div>
-
     </div>
-    
 </div>

package/components/card/example-card.njk

@@ -1,9 +1,11 @@
 {% from "components/card/_macro.njk" import onsCard %}
 
-{{ onsCard({
-    "id": 'card-example',
-    "textId": 'text',
-    "title": 'Your data and security',
-    "url": '#0',
-    "text": 'How we keep your data safe and what happens to your personal information.'
-}) }}
+{{
+    onsCard({
+        "id": 'card-example',
+        "textId": 'text',
+        "title": 'Your data and security',
+        "url": '#0',
+        "text": 'How we keep your data safe and what happens to your personal information.'
+    })
+}}