@ons/design-system 70.0.16 → 72.0.0

package/components/document-list/example-document-list-search-result-featured.njk

@@ -6,10 +6,12 @@
             {
                 "featured": true,
                 "showMetadataFirst": true,
-                "url": '#0',
-                "title": 'Crime and justice',
+                "title": {
+                    "text": 'Crime and justice',
+                    "url": '#0'
+                },
                 "metadata": {
-                    "type": {
+                    "object": {
                         "text": 'Topic'
                     }
                 },

package/components/document-list/example-document-list-search-results.njk

@@ -6,10 +6,12 @@
             {
                 "featured": true,
                 "showMetadataFirst": true,
-                "url": '#0',
-                "title": 'Crime and justice',
+                "title": {
+                    "text": 'Crime and justice',
+                    "url": '#0'
+                },
                 "metadata": {
-                    "type": {
+                    "object": {
                         "text": 'Topic'
                     }
                 },
@@ -17,10 +19,12 @@
                 <p>View all <a href="#0">datasets</a> or <a href="#0">publications</a> related to <a href="#0">Crime and justice</a></p>'
             },
             {
-                "url": '#0',
-                "title": 'Disability and crime',
+                "title": {
+                    "text": 'Disability and crime',
+                    "url": '#0'
+                },
                 "metadata": {
-                    "type": {
+                    "object": {
                         "text": 'Dataset'
                     },
                     "date": {
@@ -33,10 +37,12 @@
                 "description": '<p>Domestic abuse and sexual assault outcomes for disabled people in England and Wales aged 16 to 59 years, with analysis by age, sex, impairment type, impairment severity, country and region using the <mark>Crime</mark> Survey for England and Wales (CSEW) data.</p>'
             },
             {
-                "url": '#0',
-                "title": 'Disability and crime, UK: 2019 (Latest release)',
+                "title": {
+                    "text": 'Disability and crime, UK: 2019 (Latest release)',
+                    "url": '#0'
+                },
                 "metadata": {
-                    "type": {
+                    "object": {
                         "text": 'Statistical bulletin'
                     },
                     "date": {
@@ -49,10 +55,12 @@
                 "description": '<p>An overview of published data on disability and <mark>crime</mark> in the UK and analysis of the experience of domestic abuse and sexual assault for disabled adults aged 16 to 59 years in England and Wales. Analysis by age, sex and impairment type.</p>'
             },
             {
-                "url": '#0',
-                "title": 'Hate crime by disability status, Crime Survey for England and Wales (CSEW) combined years 2013 and 2014 to 2015 and 2016',
+                "title": {
+                    "text": 'Hate crime by disability status, Crime Survey for England and Wales (CSEW) combined years 2013 and 2014 to 2015 and 2016',
+                    "url": '#0'
+                },
                 "metadata": {
-                    "type": {
+                    "object": {
                         "text": 'User requested data',
                         "ref": 'Ref 008052'
                     },

package/components/download-resources/_download-resources.scss

@@ -34,8 +34,7 @@
 
         .ons-label {
             font-weight: $font-weight-regular;
-            margin-bottom: 0;
-            margin-right: 0.5rem;
+            margin: 0 0.5rem 0 0;
         }
 
         .ons-input--select {

package/components/download-resources/download-resources.spec.js

@@ -147,8 +147,10 @@ const EXAMPLE_PAGE = `
                       'data-filter': 'general-public booklet',
                       'data-sort-index': '1',
                   },
-                  url: '/example-booklet-1',
-                  title: 'Example booklet 1',
+                  title: {
+                      url: '/example-booklet-1',
+                      text: 'Example booklet 1',
+                  },
                   description: 'The first example booklet.',
               },
               {
@@ -157,8 +159,10 @@ const EXAMPLE_PAGE = `
                       'data-filter': 'general-public booklet logo',
                       'data-sort-index': '2',
                   },
-                  url: '/example-booklet-2',
-                  title: 'Example booklet 2 with logo',
+                  title: {
+                      url: '/example-booklet-2',
+                      text: 'Example booklet 2 with logo',
+                  },
                   description: 'The second example booklet with a logo.',
               },
               {
@@ -167,8 +171,10 @@ const EXAMPLE_PAGE = `
                       'data-filter': 'logo',
                       'data-sort-index': '3',
                   },
-                  url: '/example-logo',
-                  title: 'Example logo',
+                  title: {
+                      url: '/example-logo',
+                      text: 'Example logo',
+                  },
                   description: 'An example logo.',
               },
           ],

package/components/external-link/_macro.njk

@@ -2,7 +2,7 @@
 
 {% macro onsExternalLink(params) %}
     <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__text"> {{- params.text | 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

package/components/external-link/_macro.spec.js

@@ -7,7 +7,7 @@ import { renderComponent, templateFaker } from '../../tests/helpers/rendering';
 
 const EXAMPLE_EXTERNAL_LINK = {
     url: 'http://example.com',
-    linkText: 'Example link',
+    text: 'Example link',
 };
 
 describe('macro: external-link', () => {

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

@@ -5,7 +5,7 @@
     {{
         onsExternalLink({
             "url": "#0",
-            "linkText": "link to an external website"
+            "text": "link to an external website"
         })
     }}
 </p>

package/components/feedback/_macro.njk

@@ -7,6 +7,6 @@
         {{ params.heading }}
         {{ closingHeadingTag | safe }}
         <p class="ons-feedback__content">{{- params.content | safe -}}</p>
-        <a href="{{ params.url }}" class="ons-feedback__link">{{- params.linkText -}}</a>
+        <a href="{{ params.linkUrl }}" class="ons-feedback__link">{{- params.linkText -}}</a>
     </div>
 {% endmacro %}

package/components/feedback/_macro.spec.js

@@ -8,7 +8,7 @@ import { renderComponent } from '../../tests/helpers/rendering';
 const EXAMPLE_FEEDBACK_MINIMAL = {
     heading: 'Feedback heading',
     content: 'Feedback content...',
-    url: 'http://example.com',
+    linkUrl: 'http://example.com',
     linkText: 'Feedback link text',
 };
 
@@ -19,7 +19,7 @@ const EXAMPLE_FEEDBACK_FULL = {
     headingLevel: 5,
     headingClasses: 'extra-heading-class another-extra-heading-class',
     content: 'Feedback content...',
-    url: 'http://example.com',
+    linkUrl: 'http://example.com',
     linkText: 'Feedback link text',
 };
 
@@ -92,7 +92,7 @@ describe('macro: feedback', () => {
         expect($('p').text().trim()).toBe('Feedback content...');
     });
 
-    it('has a link with the provided `url`', () => {
+    it('has a link with the provided `linkUrl`', () => {
         const $ = cheerio.load(renderComponent('feedback', EXAMPLE_FEEDBACK_MINIMAL));
 
         expect($('.ons-feedback__link').attr('href')).toBe('http://example.com');

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

@@ -6,7 +6,7 @@
                 "heading": "What do you think about this service?",
                 "headingClasses": 'test',
                 "content": "Your comments will help us make improvements",
-                "url": "#0",
+                "linkUrl": "#0",
                 "linkText": "Give feedback"
             })
         }}

package/components/field/_field-group.scss

@@ -1,12 +1,10 @@
 .ons-field-group {
-    font-size: 0;
     display: flex;
     flex-wrap: wrap;
     gap: 1rem;
 
     .ons-field {
         display: inline-block;
-        font-size: 1rem;
         margin-top: 0;
         vertical-align: top;
     }

package/components/field/_field.scss

@@ -17,8 +17,7 @@
         display: flex;
 
         .ons-label {
-            margin-bottom: 0;
-            margin-right: 0.5rem;
+            margin: 0 0.5rem 0 0;
         }
     }
 }

package/components/fieldset/_fieldset.scss

@@ -3,7 +3,7 @@
         font-weight: $font-weight-bold;
         margin: 0;
         &:not(&--with-description) {
-            margin-bottom: 0.55rem;
+            margin-bottom: 0.5rem;
         }
         &-title {
             display: block;
@@ -19,7 +19,7 @@
     &__description:not(&__description--title) {
         @extend .ons-label__description;
 
-        margin-bottom: 0.55rem;
+        margin-bottom: 0.5rem;
     }
 
     &__description--title {

package/components/fieldset/_macro.njk

@@ -29,7 +29,7 @@
                 {%- if params.description -%}
                     <div
                         id="{{ descriptionId }}"
-                        class="ons-fieldset__description{{ ' ons-fieldset__description--title ons-u-mb-m' if params.legendIsQuestionTitle }}"
+                        class="ons-fieldset__description{{ ' ons-fieldset__description--title ons-u-mb-l' if params.legendIsQuestionTitle }}"
                     >
                         {{- params.description | safe -}}
                     </div>

package/components/fieldset/_macro.spec.js

@@ -183,7 +183,7 @@ describe('macro: fieldset', () => {
             const $ = cheerio.load(renderComponent('fieldset', { ...EXAMPLE_FIELDSET_BASIC, legendIsQuestionTitle: true }));
 
             expect($('.ons-fieldset__description').hasClass('ons-fieldset__description--title')).toBe(true);
-            expect($('.ons-fieldset__description').hasClass('ons-u-mb-m')).toBe(true);
+            expect($('.ons-fieldset__description').hasClass('ons-u-mb-l')).toBe(true);
         });
     });
 });

package/components/footer/_footer.scss

@@ -13,6 +13,9 @@
         background-clip: border-box;
         background-color: var(--ons-color-header);
         padding: 1rem;
+        a {
+            text-decoration: none;
+        }
     }
 
     &__warning {
@@ -25,16 +28,18 @@
     }
 
     &__ogl-img {
-        margin: 0 0.5rem 0.2rem 0;
+        margin: 0 0.5rem 0.25rem 0;
         max-width: 100%;
         vertical-align: middle;
     }
 
-    &__poweredBy-link {
-        &:focus {
-            .ons-icon--logo {
-                @extend %a-focus;
-            }
+    &__logo-container {
+        gap: 1rem;
+
+        svg,
+        img {
+            max-height: 30px;
+            width: auto;
         }
     }
 
@@ -54,7 +59,7 @@
 
     &--rows {
         li {
-            margin-bottom: 0.5rem !important;
+            @extend .ons-u-mb-2xs;
         }
     }
 }

package/components/footer/_macro.njk

@@ -7,12 +7,12 @@
     {% else %}
         {% set lang = 'en' %}
     {% endif %}
-
+    {% set extraLogo = params.footerLogo.logos.logo2 %}
     {% set onsLogo %}
         {% if params.lang == 'cy' %}
             {{-
                 onsIcon({
-                    "iconType": 'ons-logo-cy',
+                    "iconType": 'ons-logo-stacked-cy' if extraLogo else 'ons-logo-cy',
                     "altText": 'Swyddfa Ystadegau Gwladol',
                     "altTextId": 'ons-logo-cy-footer-alt'
                 })
@@ -20,7 +20,7 @@
         {% else %}
             {{-
                 onsIcon({
-                    "iconType": 'ons-logo-en',
+                    "iconType": 'ons-logo-stacked-en' if extraLogo else 'ons-logo-en' ,
                     "altText": 'Office for National Statistics',
                     "altTextId": 'ons-logo-en-footer-alt'
                 })
@@ -69,18 +69,20 @@
             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-container{{ ' ons-container--full-width' if params.fullWidth else "" }}{{ ' ons-container--wide' if params.wide else "" }}"
+            >
                 <div class="ons-grid">
                     {% if params.newTabWarning %}
                         <div class="ons-grid__col">
-                            <p class="ons-u-fs-s ons-u-mb-m ons-footer__new-tab-warning">{{ params.newTabWarning | safe }}</p>
+                            <p class="ons-u-fs-s ons-u-mb-l ons-footer__new-tab-warning">{{ params.newTabWarning | safe }}</p>
                         </div>
                     {% endif %}
 
                     {% if params.cols %}
                         {% for col in params.cols %}
                             <!-- Full footer columns -->
-                            <div class="ons-grid__col ons-col-4@m{{ ' ons-u-mt-m@xxs@m' if loop.index > 1 }}">
+                            <div class="ons-grid__col ons-col-4@m{{ ' ons-u-mt-l@2xs@m' if loop.index > 1 }}">
                                 {% if col.title %}
                                     <h2 class="ons-footer__heading ons-u-fs-r--b">{{ col.title }}</h2>
                                 {% endif %}
@@ -109,13 +111,13 @@
                     {% endif %}
 
                     {% if (params.cols) or (params.rows) %}
-                        <div class="ons-grid__col ons-u-mb-m">
+                        <div class="ons-grid__col ons-u-mb-l">
                             <hr class="ons-footer__hr" />
                         </div>
                     {% endif %}
                 </div>
 
-                <div class="ons-grid ons-grid--flex ons-grid--vertical-top ons-grid--between">
+                <div class="ons-grid{{ ' ons-grid-flex' if params.crest else "" }} ons-grid-flex--vertical-top ons-grid-flex--between">
                     <div class="ons-grid__col">
                         {% if params.legal %}
                             <!-- Legal -->
@@ -130,50 +132,71 @@
                             {% endfor %}
                         {% endif %}
 
-                        {% if params.OGLLink %}
+                        {% if params.oglLink %}
                             <!-- OGL -->
-                            <div class="ons-footer__license ons-u-mb-m">
+                            <div class="ons-footer__license ons-u-mb-l">
                                 {{-
                                     onsIcon({
                                         "iconType": 'ogl'
                                     })
                                 -}}
-                                {% if params.OGLLink.HTML %}
-                                    {{ params.OGLLink.HTML | safe }}
-                                {% elif params.OGLLink %}
+                                {% if params.oglLink.html %}
+                                    {{ params.oglLink.html | safe }}
+                                {% 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') }}
+                                        {{ 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')
+                                                "url": params.oglLink.url | default('https://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/'),
+                                                "text": params.oglLink.text | default('Drwydded Llywodraeth Leol v3.0')
                                             })
-                                        }}{{ params.OGLLink.post | default(', oni bai y nodir fel arall') }}
+                                        }}{{ 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')
+                                                "url": params.oglLink.url | default('https://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/'),
+                                                "text": params.oglLink.text | default('Open Government Licence v3.0')
                                             })
-                                        }}{{ params.OGLLink.post | default(', except where otherwise stated') }}
+                                        }}{{ params.oglLink.post | default(', except where otherwise stated') }}
                                     {% endif %}
                                 {% endif %}
                             </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>
+
+                        {% if not params.footerLogo.logos.logo1 %}
+                            {%
+                                set logo1 = {
+                                    'logoUrl': 'https://cy.ons.gov.uk/' if lang == 'cy' else 'https://www.ons.gov.uk/',
+                                    'logoImage': onsLogo | safe
+                                }
+                            %}
+                            {% set logos = [logo1, params.footerLogo.logos.logo2] %}
+                        {% else %}
+                            {% set logos = [params.footerLogo.logos.logo1, params.footerLogo.logos.logo2] %}
                         {% endif %}
+
+                        <div
+                            class="ons-footer__logo-container ons-u-mb-l ons-grid-flex ons-grid-flex--vertical-top{{ ' ons-grid-flex--between' if params.footerLogo.display == 'split' else "" }}"
+                        >
+                            {% for logo in logos %}
+                                {%- if logo.logoUrl -%}
+                                    <a
+                                        class="ons-footer__logo-link{{ ' ons-u-mr-s' if extraLogo and loop.index == 1 else "" }}"
+                                        href="{{ logo.logoUrl }}"
+                                        >{{ logo.logoImage | safe }}</a
+                                    >
+                                {%- else -%}
+
+                                    {{ logo.logoImage | safe }}
+                                {% endif %}
+                            {% endfor %}
+                        </div>
                     </div>
                     {% if params.crest %}
                         <!-- Crest -->
-                        <div class="ons-grid__col ons-footer__crest ons-u-mb-m@xxs@l">
+                        <div class="ons-grid__col ons-footer__crest ons-u-mb-l@2xs@l">
                             {{-
                                 onsIcon({
                                     "iconType": 'crest'
@@ -182,15 +205,12 @@
                         </div>
                     {% endif %}
                 </div>
-                {% if params.poweredBy %}
-                    {{ params.poweredBy | safe }}
-                {% 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 ons-grid-flex ons-grid-flex--between">
                         <div class="ons-grid__col">
-                            <p class="ons-u-fs-s ons-u-mb-no ons-footer__copyright">{{- copyrightDeclaration | safe -}}</p>
+                            <p class="ons-u-fs-s ons-u-mb-l ons-footer__copyright">{{- copyrightDeclaration | safe -}}</p>
                         </div>
                     </div>
                 {% endif %}