@ons/design-system 70.0.8 → 70.0.10

package/components/duration/example-duration-single-field.njk

@@ -1,24 +1,28 @@
 {% from "components/question/_macro.njk" import onsQuestion %}
 {% from "components/duration/_macro.njk" import onsDuration %}
 
-{% call onsQuestion({
-    "title": "How many years have you lived at this address?",
-    "description": "<p>Enter “0” into the years field if you have lived at this address for less than a year</p>",
-    "legendIsQuestionTitle": true
-}) %}
-    {{ onsDuration({
-        "id": "address-duration-example-single",
-        "dontWrap": true,
-        "field1": {
-            "id": "address-duration-years-example",
-            "name": "address-duration-years",
-            "suffix": {
-                "text": "Years",
-                "id": "address-duration-years-suffix-example"
-            },
-            "attributes": {
-                "autocomplete": "off"
+{%
+    call onsQuestion({
+        "title": "How many years have you lived at this address?",
+        "description": "<p>Enter “0” into the years field if you have lived at this address for less than a year</p>",
+        "legendIsQuestionTitle": true
+    })
+%}
+    {{
+        onsDuration({
+            "id": "address-duration-example-single",
+            "dontWrap": true,
+            "field1": {
+                "id": "address-duration-years-example",
+                "name": "address-duration-years",
+                "suffix": {
+                    "text": "Years",
+                    "id": "address-duration-years-suffix-example"
+                },
+                "attributes": {
+                    "autocomplete": "off"
+                }
             }
-        }
-    }) }}
+        })
+    }}
 {% endcall %}

package/components/duration/example-duration.njk

@@ -1,35 +1,39 @@
 {% from "components/question/_macro.njk" import onsQuestion %}
 {% from "components/duration/_macro.njk" import onsDuration %}
 
-{% call onsQuestion({
-    "title": "How long have you lived at this address?",
-    "description": "<p>Enter “0” into the years field if you have lived at this address for less than a year</p>",
-    "legendIsQuestionTitle": true
-}) %}
-    {{ onsDuration({
-        "id": "address-duration-example",
-        "dontWrap": true,
-        "field1": {
-            "id": "address-duration-years-example",
-            "name": "address-duration-years",
-            "suffix": {
-                "text": "Years",
-                "id": "address-duration-years-suffix-example"
+{%
+    call onsQuestion({
+        "title": "How long have you lived at this address?",
+        "description": "<p>Enter “0” into the years field if you have lived at this address for less than a year</p>",
+        "legendIsQuestionTitle": true
+    })
+%}
+    {{
+        onsDuration({
+            "id": "address-duration-example",
+            "dontWrap": true,
+            "field1": {
+                "id": "address-duration-years-example",
+                "name": "address-duration-years",
+                "suffix": {
+                    "text": "Years",
+                    "id": "address-duration-years-suffix-example"
+                },
+                "attributes": {
+                    "autocomplete": "off"
+                }
             },
-            "attributes": {
-                "autocomplete": "off"
+            "field2": {
+                "id": "address-duration-months-example",
+                "name": "address-duration-months",
+                "suffix": {
+                    "text": "Months",
+                    "id": "address-duration-months-suffix-example"
+                },
+                "attributes": {
+                    "autocomplete": "off"
+                }
             }
-        },
-        "field2": {
-            "id": "address-duration-months-example",
-            "name": "address-duration-months",
-            "suffix": {
-                "text": "Months",
-                "id": "address-duration-months-suffix-example"
-            },
-            "attributes": {
-                "autocomplete": "off"
-            }
-        }
-    }) }}
+        })
+    }}
 {% endcall %}

package/components/error/_macro.njk

@@ -4,17 +4,19 @@
     {% set content %}
         <p
             class="ons-panel__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 %}
+            {% 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 %}
         >
             <strong>{{ params.text }}</strong>
         </p>
         {{ caller() }}
     {% endset %}
 
-    {% call onsPanel({
-        "variant": "error",
-        "id": params.id
-    }) %}
-       {{ content | safe }}
+    {%
+        call onsPanel({
+            "variant": "error",
+            "id": params.id
+        })
+    %}
+        {{ content | safe }}
     {% endcall %}
 {% endmacro %}

package/components/external-link/_macro.njk

@@ -1,9 +1,11 @@
 {% from "components/icon/_macro.njk" import onsIcon %}
 
 {% macro onsExternalLink(params) %}
-    <a href="{{ params.url }}" class="ons-external-link{% if params.classes %} {{ params.classes }}{% endif %}" target="_blank" rel="noopener">
-        <span class="ons-external-link__text">
-        {{- params.linkText | safe -}}
-        </span><span class="ons-external-link__icon">&nbsp;{{- onsIcon({"iconType": 'external-link'}) -}}
-        </span><span class="ons-external-link__new-window-description ons-u-vh">({{- params.newWindowDescription | default("opens in a new tab") -}})</span></a>
+    <a href="{{ params.url }}" class="ons-external-link{{ ' ' + params.classes if params.classes else '' }}" target="_blank" rel="noopener">
+        <span class="ons-external-link__text"> {{- params.linkText | safe -}} </span
+        ><span class="ons-external-link__icon">&nbsp;{{- onsIcon({"iconType": 'external-link'}) -}} </span
+        ><span class="ons-external-link__new-window-description ons-u-vh"
+            >({{- params.newWindowDescription | default("opens in a new tab") -}})</span
+        ></a
+    >
 {% endmacro %}

package/components/external-link/example-external-link.njk

@@ -1,8 +1,11 @@
 {% from "components/external-link/_macro.njk" import onsExternalLink %}
 
-<p>This is a paragraph of text with a {{
-    onsExternalLink({
-        "url": "#0",
-        "linkText": "link to an external website"
-    })
-}}</p>
+<p>
+    This is a paragraph of text with a
+    {{
+        onsExternalLink({
+            "url": "#0",
+            "linkText": "link to an external website"
+        })
+    }}
+</p>

package/components/feedback/_macro.njk

@@ -1,9 +1,11 @@
 {% macro onsFeedback(params) %}
-    {% set headingLevel = params.headingLevel | default(2) %}
-    <div {% if params.id %} id="{{ params.id }}"{% endif %} class="ons-feedback{% if params.classes %} {{ params.classes }}{% endif %}">
-        <h{{ headingLevel }} class="ons-feedback__heading{{ ' ' + params.headingClasses if params.headingClasses }}">
-            {{ params.heading }}
-        </h{{ headingLevel }}>
+    {% set headingLevel = params.headingLevel | default(2) | string %}
+    {% set openingHeadingTag = "<h" + headingLevel %}
+    {% set closingHeadingTag = "</h" + headingLevel + ">" %}
+    <div {% if params.id %}id="{{ params.id }}"{% endif %} class="ons-feedback{{ ' ' + params.classes if params.classes else '' }}">
+        {{ openingHeadingTag | safe }} class="ons-feedback__heading{{ ' ' + params.headingClasses if params.headingClasses else '' }}">
+        {{ params.heading }}
+        {{ closingHeadingTag | safe }}
         <p class="ons-feedback__content">{{- params.content | safe -}}</p>
         <a href="{{ params.url }}" class="ons-feedback__link">{{- params.linkText -}}</a>
     </div>

package/components/field/_macro.njk

@@ -11,8 +11,8 @@
         {% else %}
             <div
                 {% if params.id %}id="{{ params.id }}"{% endif %}
-                class="ons-field{% if params.inline %} ons-field--inline{% endif %}{% if params.classes %} {{ params.classes }}{% 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-field{{ ' ons-field--inline' if params.inline }}{{ ' ' + params.classes if params.classes else '' }}"
+                {% 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 %}
             >
                 {{- caller() if caller -}}
             </div>

package/components/fieldset/_macro.njk

@@ -1,42 +1,49 @@
 {% from "components/error/_macro.njk" import onsError %}
 
 {% macro onsFieldset(params) %}
-    {% set descriptionID = (params.id ~ "-" if params.id else "") ~ "legend-description" %}
-    {% set fieldset -%}
-        {% if params.dontWrap -%}
-            <div class="ons-input-items">
-                {{- caller() if caller -}}
-            </div>
+    {% set descriptionId = (params.id ~ "-" if params.id) ~ "legend-description" %}
+    {%- set fieldset -%}
+        {%- if params.dontWrap -%}
+            <div class="ons-input-items">{{- caller() if caller -}}</div>
         {%- elif params.legend or params.legendIsQuestionTitle -%}
             <fieldset
                 {% if params.id %}id="{{ params.id }}"{% endif %}
-                class="ons-fieldset{% if params.classes %} {{ params.classes }}{% 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-fieldset{{ ' ' + params.classes if params.classes else '' }}"
+                {% 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 %}
             >
-                <legend{% if params.description %} aria-describedBy="{{ descriptionID }}"{% endif %} class="ons-fieldset__legend{% if params.legendIsQuestionTitle %} ons-u-mb-no{% endif %}{% if params.legendClasses %} {{ params.legendClasses }}{% endif %}{% if params.description %} ons-fieldset__legend--with-description{% endif %}">
+                <legend
+                    {% if params.description %}aria-describedBy="{{ descriptionId }}"{% endif %}
+                    class="ons-fieldset__legend{{ ' ons-u-mb-no' if params.legendIsQuestionTitle }}{{ ' ' + params.legendClasses if params.legendClasses else '' }}{{ ' ons-fieldset__legend--with-description' if params.description }}"
+                >
                     {%- if params.legendIsQuestionTitle -%}
-                        <h1 id="fieldset-legend-title" class="ons-fieldset__legend-title{% if params.legendTitleClasses %} {{ params.legendTitleClasses }}{% endif %}">
+                        <h1
+                            id="fieldset-legend-title"
+                            class="ons-fieldset__legend-title{{ ' ' + params.legendTitleClasses if params.legendTitleClasses else '' }}"
+                        >
                             {{- params.legend | safe -}}
                         </h1>
                     {%- else -%}
-                        <span class="ons-fieldset__legend-title ons-u-pb-no">{{- params.legend | safe -}}</span>
+                        <span class="ons-fieldset__legend-title ons-u-pb-no"> {{- params.legend | safe -}} </span>
                     {%- endif -%}
                 </legend>
                 {%- if params.description -%}
-                    <div id="{{ descriptionID }}" class="ons-fieldset__description{% if params.legendIsQuestionTitle %} ons-fieldset__description--title ons-u-mb-m{% endif %}">
+                    <div
+                        id="{{ descriptionId }}"
+                        class="ons-fieldset__description{{ ' ons-fieldset__description--title ons-u-mb-m' if params.legendIsQuestionTitle }}"
+                    >
                         {{- params.description | safe -}}
                     </div>
                 {%- endif -%}
                 {{- caller() if caller -}}
             </fieldset>
-        {%- endif %}
-    {%- endset %}
+        {%- endif -%}
+    {%- endset -%}
 
-    {% if params.error -%}
+    {%- if params.error -%}
         {% call onsError(params.error) %}
             {{- fieldset | safe -}}
         {% endcall %}
     {%- else -%}
         {{- fieldset | safe -}}
-    {%- endif %}
+    {%- endif -%}
 {% endmacro %}

package/components/footer/_macro.njk

@@ -1,5 +1,4 @@
 {% macro onsFooter(params) %}
-
     {% from "components/list/_macro.njk" import onsList %}
     {% from "components/icon/_macro.njk" import onsIcon %}
 
@@ -30,15 +29,16 @@
     {% endset %}
 
     <footer class="ons-footer">
-
         {% if params.footerWarning %}
             {% from "components/panel/_macro.njk" import onsPanel %}
             <div class="ons-footer__warning">
                 <div class="ons-container">
-                    {% call onsPanel({
-                        "variant": "warn",
-                        "classes": "ons-panel--warn--footer"
-                    }) %}
+                    {%
+                        call onsPanel({
+                            "variant": "warn",
+                            "classes": "ons-panel--warn--footer"
+                        })
+                    %}
                         {{ params.footerWarning | safe }}
                     {% endcall %}
                 </div>
@@ -51,7 +51,7 @@
                 {{
                     onsButton({
                         "id": params.button.id,
-                        "classes": params.button.classes if params.button.classes else "",
+                        "classes": params.button.classes if params.button.classes,
                         "variants": "ghost",
                         "text": params.button.text,
                         "name": params.button.name,
@@ -64,7 +64,11 @@
             </div>
         {% endif %}
 
-        <div class="ons-footer__body{{ ' ' + params.classes if params.classes else '' }}" data-analytics="footer" {% if params.attributes %}{% for attribute, value in (params.attributes) %}{{attribute}}="{{value}}" {% endfor %}{% endif %}>
+        <div
+            class="ons-footer__body{{ ' ' + params.classes if params.classes else '' }}"
+            data-analytics="footer"
+            {% if params.attributes %}{% for attribute, value in (params.attributes) %}{{ ' ' }}{{ attribute }}="{{ value }}"{% endfor %}{% endif %}
+        >
             <div class="ons-container{{ ' ons-container--full-width' if params.fullWidth }}{{ ' ons-container--wide' if params.wide }}">
                 <div class="ons-grid">
                     {% if params.newTabWarning %}
@@ -106,7 +110,7 @@
 
                     {% if (params.cols) or (params.rows) %}
                         <div class="ons-grid__col ons-u-mb-m">
-                            <hr class="ons-footer__hr">
+                            <hr class="ons-footer__hr" />
                         </div>
                     {% endif %}
                 </div>
@@ -139,14 +143,16 @@
                                 {% elif params.OGLLink %}
                                     {% from "components/external-link/_macro.njk" import onsExternalLink %}
                                     {% if params.lang == 'cy' %}
-                                        {{ params.OGLLink.pre | default('Mae’r holl gynnwys ar gael o dan y') }} {{
-                                        onsExternalLink({
-                                            "url": params.OGLLink.url | default('https://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/'),
-                                            "linkText": params.OGLLink.link | default('Drwydded Llywodraeth Leol v3.0')
-                                        })
+                                        {{ params.OGLLink.pre | default('Mae’r holl gynnwys ar gael o dan y') }}
+                                        {{
+                                            onsExternalLink({
+                                                "url": params.OGLLink.url | default('https://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/'),
+                                                "linkText": params.OGLLink.link | default('Drwydded Llywodraeth Leol v3.0')
+                                            })
                                         }}{{ params.OGLLink.post | default(', oni bai y nodir fel arall') }}
                                     {% else %}
-                                        {{ params.OGLLink.pre | default('All content is available under the') }} {{
+                                        {{ params.OGLLink.pre | default('All content is available under the') }}
+                                        {{
                                             onsExternalLink({
                                                 "url": params.OGLLink.url | default('https://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/'),
                                                 "linkText": params.OGLLink.link | default('Open Government Licence v3.0')
@@ -157,10 +163,11 @@
                             </div>
                         {% endif %}
                         {% if not params.poweredBy %}
-                            <a class="ons-footer__poweredBy-link" {% if lang == "cy" %}href="https://cy.ons.gov.uk/"{% else %}href="https://www.ons.gov.uk/"{% endif %}>
-                                <div class="ons-footer__poweredby-logo ons-u-mb-m">
-                                    {{ onsLogo | safe }}
-                                </div>
+                            <a
+                                class="ons-footer__poweredBy-link"
+                                {% if lang == "cy" %}href="https://cy.ons.gov.uk/"{% else %}href="https://www.ons.gov.uk/"{% endif %}
+                            >
+                                <div class="ons-footer__poweredby-logo ons-u-mb-m">{{ onsLogo | safe }}</div>
                             </a>
                         {% endif %}
                     </div>
@@ -180,14 +187,14 @@
                 {% endif %}
                 {% if params.copyrightDeclaration %}
                     <!-- Copyright -->
+                    {% set copyrightDeclaration = '&copy; ' + params.copyrightDeclaration.copyright + '<br /> ' + params.copyrightDeclaration.text %}
                     <div class="ons-grid ons-grid--flex ons-grid--vertical-bottom ons-grid--between">
                         <div class="ons-grid__col">
-                            <p class="ons-u-fs-s ons-u-mb-no ons-footer__copyright">&copy; {{ params.copyrightDeclaration.copyright }} <br> {{ params.copyrightDeclaration.text }}</p>
+                            <p class="ons-u-fs-s ons-u-mb-no ons-footer__copyright">{{- copyrightDeclaration | safe -}}</p>
                         </div>
                     </div>
                 {% endif %}
             </div>
         </div>
     </footer>
-
 {% endmacro %}

package/components/footer/_macro.spec.js

@@ -252,7 +252,7 @@ describe('macro: footer', () => {
 
             const text = $('.ons-footer__copyright').text();
             expect(text).toBe(
-                '© Crown copyright and database rights 2020 OS 100019153.  Use of address data is subject to the terms and conditions.',
+                '© Crown copyright and database rights 2020 OS 100019153. Use of address data is subject to the terms and conditions.',
             );
         });
 

package/components/footer/example-footer-cymraeg.njk

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

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

@@ -1,7 +1,6 @@
 ---
-"fullWidth": true
+'fullWidth': true
 ---
+
 {% from "components/footer/_macro.njk" import onsFooter %}
-{{
-    onsFooter()
-}}
+{{ onsFooter() }}

package/components/footer/example-footer-transactional.njk

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

package/components/footer/example-footer-warning.njk

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

package/components/footer/example-footer-with-alternative-organisation.njk

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

package/components/footer/example-footer-with-coat-of-arms.njk

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

package/components/footer/example-footer-with-copyright.njk

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

package/components/footer/example-footer.njk

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

package/components/header/_header.scss

@@ -76,8 +76,7 @@
         }
     }
 
-    &--internal &,
-    &--neutral & {
+    &--internal & {
         &__top {
             background: var(--ons-color-header-masthead-internal);
             .ons-icon--logo {
@@ -88,14 +87,6 @@
                 }
             }
         }
-        &__org-logo-link:focus {
-            background-color: transparent;
-            box-shadow: none;
-            outline: 3px solid var(--ons-color-focus);
-            .ons-icon--logo {
-                fill: var(--ons-color-text-link-focus);
-            }
-        }
         &__grid-top {
             color: var(--ons-color-text-inverse);
             min-height: 36px;
@@ -104,35 +95,46 @@
                 &:hover {
                     text-decoration: underline solid var(--ons-color-text-inverse-link-hover) 3px;
                 }
+                &:focus {
+                    color: var(--ons-color-text-link-focus);
+                    &:hover {
+                        text-decoration: none;
+                    }
+                }
             }
         }
     }
 
     &--neutral & {
         &__top {
-            background: var(--ons-color-header-masthead-neutral);
+            .ons-icon--logo {
+                display: block;
+                .ons-icon--logo__group--text,
+                .ons-icon--logo__group--primary,
+                .ons-icon--logo__group--secondary {
+                    fill: var(--ons-color-black);
+                }
+            }
         }
 
         &__grid-top {
             a {
-                color: var(--ons-color-service-links);
+                color: var(--ons-color-black);
                 &:hover {
-                    text-decoration: underline solid var(--ons-color-service-links) 3px;
+                    text-decoration: underline solid var(--ons-color-header-masthead-neutral) 3px;
+                }
+                &:focus:hover {
+                    text-decoration: none;
                 }
             }
         }
 
         &__main {
             background: var(--ons-color-header-neutral);
-
-            &--border {
-                border-bottom: 3px solid var(--ons-color-header-neutral);
-                border-top: 3px solid var(--ons-color-header-neutral);
-            }
         }
 
         &__title {
-            color: var(--ons-color-header-title);
+            color: var(--ons-color-white);
             &-link {
                 &:hover {
                     text-decoration: underline solid var(--ons-color-branded-text) 2px;
@@ -196,6 +198,9 @@
         .ons-header--neutral & {
             &--mobile {
                 background: var(--ons-color-grey-5);
+                .ons-header-service-nav__link {
+                    color: var(--ons-color-black);
+                }
             }
         }