diff --git a/__snapshots__/layout/_template.spec.js.snap b/__snapshots__/layout/_template.spec.js.snap index e1ef4a5364..17f292335a 100644 --- a/__snapshots__/layout/_template.spec.js.snap +++ b/__snapshots__/layout/_template.spec.js.snap @@ -1328,6 +1328,7 @@ exports[`base page template matches the full configuration snapshot 1`] = ` + diff --git a/backstop_data/bitmaps_reference/ds-vr-test__components_footer_example-footer-with-alternative-organisation_0_document_0_desktop.png b/backstop_data/bitmaps_reference/ds-vr-test__components_footer_example-footer-with-alternative-organisation_0_document_0_desktop.png index 49e320e3a8..9f8c995921 100644 --- a/backstop_data/bitmaps_reference/ds-vr-test__components_footer_example-footer-with-alternative-organisation_0_document_0_desktop.png +++ b/backstop_data/bitmaps_reference/ds-vr-test__components_footer_example-footer-with-alternative-organisation_0_document_0_desktop.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:170b7e4ca95bd366e665ac236e468c1ffbb1ac9a7f34508c7892ba3303e38a18 -size 30799 +oid sha256:48054a275a1d66d48be09968227c600aa0e2044f445d9fe559c0b690b1f6df82 +size 27648 diff --git a/backstop_data/bitmaps_reference/ds-vr-test__components_footer_example-footer-with-alternative-organisation_0_document_1_tablet.png b/backstop_data/bitmaps_reference/ds-vr-test__components_footer_example-footer-with-alternative-organisation_0_document_1_tablet.png index 27e7f86fa7..eeca17c1be 100644 --- a/backstop_data/bitmaps_reference/ds-vr-test__components_footer_example-footer-with-alternative-organisation_0_document_1_tablet.png +++ b/backstop_data/bitmaps_reference/ds-vr-test__components_footer_example-footer-with-alternative-organisation_0_document_1_tablet.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:a457332415c14b03dd19080da74bac857ac16aef552ab0a905365ee95ce5a2c9 -size 27941 +oid sha256:cbf6e19c3c96df00895d12dd00fffde7c84444a54e35e3e1b2cdb26ac73ff72e +size 24914 diff --git a/backstop_data/bitmaps_reference/ds-vr-test__components_footer_example-footer-with-alternative-organisation_0_document_2_mobile.png b/backstop_data/bitmaps_reference/ds-vr-test__components_footer_example-footer-with-alternative-organisation_0_document_2_mobile.png index 3ea0f8b85f..cf83694ea7 100644 --- a/backstop_data/bitmaps_reference/ds-vr-test__components_footer_example-footer-with-alternative-organisation_0_document_2_mobile.png +++ b/backstop_data/bitmaps_reference/ds-vr-test__components_footer_example-footer-with-alternative-organisation_0_document_2_mobile.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:504d81dc4993cb1aefcc15731bb04bd9f039159bfcc12da3823f52156d8211a8 -size 26450 +oid sha256:6cbe8d8c2155f188874d074edce170636263f77c799a9834cc5501f0b1cc9cf4 +size 23709 diff --git a/backstop_data/bitmaps_reference/ds-vr-test__components_footer_example-footer-with-multiple-logos-and-split-display_0_document_0_desktop.png b/backstop_data/bitmaps_reference/ds-vr-test__components_footer_example-footer-with-multiple-logos-and-split-display_0_document_0_desktop.png new file mode 100644 index 0000000000..fda71b08fb --- /dev/null +++ b/backstop_data/bitmaps_reference/ds-vr-test__components_footer_example-footer-with-multiple-logos-and-split-display_0_document_0_desktop.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:67c6aa1273a487d57b287f9cb9900e3b4102485a9bb68ac2dfa1fd76de49bcba +size 50992 diff --git a/backstop_data/bitmaps_reference/ds-vr-test__components_footer_example-footer-with-multiple-logos-and-split-display_0_document_1_tablet.png b/backstop_data/bitmaps_reference/ds-vr-test__components_footer_example-footer-with-multiple-logos-and-split-display_0_document_1_tablet.png new file mode 100644 index 0000000000..7d019ab599 --- /dev/null +++ b/backstop_data/bitmaps_reference/ds-vr-test__components_footer_example-footer-with-multiple-logos-and-split-display_0_document_1_tablet.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:68290fa06ecfb590c3cf411263ea2d47f48932e7bae484e8633a83a848eb45c4 +size 50205 diff --git a/backstop_data/bitmaps_reference/ds-vr-test__components_footer_example-footer-with-multiple-logos-and-split-display_0_document_2_mobile.png b/backstop_data/bitmaps_reference/ds-vr-test__components_footer_example-footer-with-multiple-logos-and-split-display_0_document_2_mobile.png new file mode 100644 index 0000000000..6d5ae94f9b --- /dev/null +++ b/backstop_data/bitmaps_reference/ds-vr-test__components_footer_example-footer-with-multiple-logos-and-split-display_0_document_2_mobile.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:6654086091cc263106c67fdc0143491db2dda9c4fd9edfaa35d3e080838b9062 +size 54574 diff --git a/backstop_data/bitmaps_reference/ds-vr-test__components_footer_example-footer-with-multiple-logos_0_document_0_desktop.png b/backstop_data/bitmaps_reference/ds-vr-test__components_footer_example-footer-with-multiple-logos_0_document_0_desktop.png new file mode 100644 index 0000000000..1eef7cbc3d --- /dev/null +++ b/backstop_data/bitmaps_reference/ds-vr-test__components_footer_example-footer-with-multiple-logos_0_document_0_desktop.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:bc8716811f5b369141a59e2f03e1c9dad42b1e0be76d02fecec2e37e9ce1c426 +size 50969 diff --git a/backstop_data/bitmaps_reference/ds-vr-test__components_footer_example-footer-with-multiple-logos_0_document_1_tablet.png b/backstop_data/bitmaps_reference/ds-vr-test__components_footer_example-footer-with-multiple-logos_0_document_1_tablet.png new file mode 100644 index 0000000000..74de6ee40d --- /dev/null +++ b/backstop_data/bitmaps_reference/ds-vr-test__components_footer_example-footer-with-multiple-logos_0_document_1_tablet.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:1b0fc33cdb4a4c18af8fe0ef9c452a063097c471e5162f787aadaad968efdb71 +size 50213 diff --git a/backstop_data/bitmaps_reference/ds-vr-test__components_footer_example-footer-with-multiple-logos_0_document_2_mobile.png b/backstop_data/bitmaps_reference/ds-vr-test__components_footer_example-footer-with-multiple-logos_0_document_2_mobile.png new file mode 100644 index 0000000000..830317e54c --- /dev/null +++ b/backstop_data/bitmaps_reference/ds-vr-test__components_footer_example-footer-with-multiple-logos_0_document_2_mobile.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:1eae129f153194fa2216f84f27ba751ae8d65f348c5c77e4e7870df9b4371114 +size 54588 diff --git a/src/components/footer/_footer.scss b/src/components/footer/_footer.scss index c293bb2d55..004e63ca96 100644 --- a/src/components/footer/_footer.scss +++ b/src/components/footer/_footer.scss @@ -30,11 +30,13 @@ vertical-align: middle; } - &__poweredBy-link { - &:focus { - .ons-icon--logo { - @extend %a-focus; - } + &__logo-container { + gap: 1rem; + + svg, + img { + max-height: 30px; + width: auto; } } diff --git a/src/components/footer/_macro-options.md b/src/components/footer/_macro-options.md index ec15ec9067..40dc376733 100644 --- a/src/components/footer/_macro-options.md +++ b/src/components/footer/_macro-options.md @@ -5,7 +5,7 @@ | cols | array`` | false | An array of objects for each of the 3 allowed [footer columns](#footercol) | | rows | array`` | false | An array for the first [footer row](#footerrow) | | legal | array`` | false | An array of for the [row of legal links](#legalrow) | -| poweredBy | HTML | false | Any HTML to render an image for example embedded `` or `` to override the default ONS logo | +| footerLogo | object`` | false | Settings for a [footer logo](#footerLogo) in the footer to override the default ONS logo. | | lang | string | false | Set the ISO language code for current page to display the correct language ONS logo. Defaults to “en”. | | newTabWarning | string | false | Leading line of text to warn users that all footer links will open a new tab | | OGLLink | object`` | false | An object containing settings for the [Open Government Licence content](#ogllink). Set to “true” to display the default values for English and Welsh | @@ -50,3 +50,26 @@ | Name | Type | Required | Description | | --------- | ----------------------------------------------------------- | -------- | --------------------------- | | itemsList | array`` [_(ref)_](/foundations/typography/#lists) | true | A list of links for the row | + +## FooterLogo + +| Name | Type | Required | Description | +| ------- | --------------- | -------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| classes | string | false | Classes to be added. | +| logos | Object`` | false | Allows for up to two logos to be used in the footer. | +| display | string | false | Allowed values are 'split' or 'default'. The 'split' display positions the additional logo on the opposite side of the page, while the 'default' display places the logos next to each other. | + +## Logos + +| Name | Type | Required | Description | +| ------- | -------------- | -------- | --------------------------------- | +| classes | string | false | Classes to be added. | +| logo1 | object`` | false | First Logo. Defaults to ONS logo. | +| logo2 | object`` | false | Second Logo | + +## Logo + +| Name | Type | Required | Description | +| --------- | -------------- | -------- | --------------------------------------------------------------------------------------- | +| logoImage | HTML or string | false | Any HTML to render an image for example embedded `` or ``. | +| logoUrl | string | false | Wraps the extra logo in a link. Set the URL for the HTML `href` attribute for the link. | diff --git a/src/components/footer/_macro.njk b/src/components/footer/_macro.njk index 4eebcd7e06..9f5e6e1adf 100644 --- a/src/components/footer/_macro.njk +++ b/src/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' }) @@ -115,7 +115,7 @@ {% endif %} -
+
{% if params.legal %} @@ -162,14 +162,35 @@ {% endif %}
{% endif %} - {% if not params.poweredBy %} - - - + + {% 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 %} + +
+ {% for logo in logos %} + {%- if logo.logoUrl -%} + + {%- else -%} + + {{ logo.logoImage | safe }} + {% endif %} + {% endfor %} +
{% if params.crest %} @@ -182,13 +203,10 @@
{% endif %} - {% if params.poweredBy %} - {{ params.poweredBy | safe }} - {% endif %} {% if params.copyrightDeclaration %} {% set copyrightDeclaration = '© ' + params.copyrightDeclaration.copyright + '
' + params.copyrightDeclaration.text %} -
+

{{- copyrightDeclaration | safe -}}

diff --git a/src/components/footer/_macro.spec.js b/src/components/footer/_macro.spec.js index d96dfdbc78..f04a033e25 100644 --- a/src/components/footer/_macro.spec.js +++ b/src/components/footer/_macro.spec.js @@ -354,8 +354,8 @@ describe('macro: footer', () => { }); }); - describe('poweredBy logo', () => { - describe('default poweredBy logo', () => { + describe('Footer logo', () => { + describe('default footer logo', () => { describe.each([ [ 'the `lang` parameter is not provided', @@ -387,7 +387,7 @@ describe('macro: footer', () => { }); }); }); - describe('provided poweredBy logo', () => { + describe('provided footer logo', () => { describe.each([ [ 'the `lang` parameter is "cy"', @@ -415,54 +415,74 @@ describe('macro: footer', () => { it('has the Welsh lang link when the default Welsh lang ons icon is present', () => { const $ = cheerio.load(renderComponent('footer', { lang: 'cy' })); - expect($('.ons-footer__poweredBy-link').attr('href')).toBe('https://cy.ons.gov.uk/'); + expect($('.ons-footer__logo-link').attr('href')).toBe('https://cy.ons.gov.uk/'); }); it('has the English lang link when the default English lang ons icon is present', () => { const $ = cheerio.load(renderComponent('footer', { lang: 'en' })); - expect($('.ons-footer__poweredBy-link').attr('href')).toBe('https://www.ons.gov.uk/'); + expect($('.ons-footer__logo-link').attr('href')).toBe('https://www.ons.gov.uk/'); }); }); - describe('provided poweredBy logo', () => { + describe('provided footer logo', () => { describe.each([ [ - 'the `poweredBy` and `OGLLink` parameters are provided', + 'the `footerLogo` and `OGLLink` parameters are provided', { - poweredBy: '', + footerLogo: { + logos: { + logo1: { logoImage: '' }, + }, + }, OGLLink: EXAMPLE_OGL_LINK_PARAM, }, ], [ - 'the `poweredBy` and `legal` parameters are provided', + 'the `footerLogo` and `legal` parameters are provided', { - poweredBy: '', + footerLogo: { + logos: { + logo1: { logoImage: '' }, + }, + }, legal: EXAMPLE_LEGAL_PARAM, }, ], [ - 'the `poweredBy` and `crest` parameters are provided', + 'the `footerLogo` and `crest` parameters are provided', { - poweredBy: '', + footerLogo: { + logos: { + logo1: { logoImage: '' }, + }, + }, crest: true, }, ], [ - 'the `poweredBy`, `legal` and `crest` parameters are provided', + 'the `footerLogo`, `legal` and `crest` parameters are provided', { - poweredBy: '', + footerLogo: { + logos: { + logo1: { logoImage: '' }, + }, + }, legal: EXAMPLE_LEGAL_PARAM, crest: true, }, ], [ - 'the `poweredBy` parameter is provided but the `legal` and `crest` parameters are not provided', + 'the `footerLogo` parameter is provided but the `legal` and `crest` parameters are not provided', { - poweredBy: '', + footerLogo: { + logos: { + logo1: { logoImage: '' }, + }, + }, }, ], - ])('where %s', (_, poweredByParams) => { + ])('where %s', (_, footerLogoParams) => { const params = { - ...poweredByParams, + ...footerLogoParams, }; it('passes jest-axe checks', async () => { @@ -478,6 +498,48 @@ describe('macro: footer', () => { expect($('.custom-logo').length).toBe(1); }); }); + + it('has the extra footer logo image and link', () => { + const $ = cheerio.load( + renderComponent('footer', { + footerLogo: { + logos: { + logo1: { logoImage: '' }, + logo2: { + logoUrl: '#0', + logoImage: '', + }, + }, + }, + legal: EXAMPLE_LEGAL_PARAM, + crest: true, + }), + ); + + expect($('.ons-footer__logo-link').attr('href')).toBe('#0'); + expect($('.ons-footer__logo-link > img').attr('src')).toBe('a-logo.svg'); + }); + + it('has the correct class applied for opposite display of logos', () => { + const $ = cheerio.load( + renderComponent('footer', { + footerLogo: { + logos: { + logo1: { logoImage: '' }, + logo2: { + logoUrl: '#0', + logoImage: '', + }, + }, + display: 'split', + }, + legal: EXAMPLE_LEGAL_PARAM, + crest: true, + }), + ); + + expect($('.ons-footer__logo-container').attr('class')).toContain('ons-grid-flex--between'); + }); }); }); diff --git a/src/components/footer/example-footer-with-alternative-organisation.njk b/src/components/footer/example-footer-with-alternative-organisation.njk index a6a51da7f4..831ea367a3 100644 --- a/src/components/footer/example-footer-with-alternative-organisation.njk +++ b/src/components/footer/example-footer-with-alternative-organisation.njk @@ -5,99 +5,104 @@ {% from "components/footer/_macro.njk" import onsFooter %} {{ onsFooter({ - "poweredBy": '', + "footerLogo": { + "logos": { + "logo1": { + "logoImage": '' + } + } + }, "legal": [ { "itemsList": [ diff --git a/src/components/footer/example-footer-with-multiple-logos-and-split-display.njk b/src/components/footer/example-footer-with-multiple-logos-and-split-display.njk new file mode 100644 index 0000000000..7da0fb6e1e --- /dev/null +++ b/src/components/footer/example-footer-with-multiple-logos-and-split-display.njk @@ -0,0 +1,173 @@ +--- +'fullWidth': true +--- + +{% from "components/footer/_macro.njk" import onsFooter %} +{{ + onsFooter({ + "cols": [ + { + "title": 'Business surveys', + "itemsList": [ + { + "text": 'About our surveys', + "url": '#0' + }, + { + "text": 'Lists of all surveys', + "url": '#0' + }, + { + "text": 'Respondent Charter', + "url": '#0' + } + ] + }, + { + "title": 'About ONS', + "itemsList": [ + { + "text": 'What we do', + "url": '#0' + }, + { + "text": 'Transparency and governance', + "url": '#0' + }, + { + "text": 'Contact us', + "url": '#0' + } + ] + }, + { + "title": 'Statistics', + "itemsList": [ + { + "text": 'UK Statistics Authority', + "external": true, + "url": '#0' + }, + { + "text": 'Release calendar', + "url": '#0' + }, + { + "text": 'News', + "url": '#0' + } + ] + } + ], + "legal": [ + { + "itemsList": [ + { + "text": 'Cookies', + "url": '#0' + }, + { + "text": 'Accessibility statement', + "url": '#0' + }, + { + "text": 'Privacy and data protection', + "url": '#0' + }, + { + "text": 'Terms and conditions', + "url": '#0' + } + ] + } + ], + "footerLogo": { + "logos": { + "logo2": { + "logoImage": '', + "logoUrl": "#0" + } + }, + "display": "split" + }, + "OGLLink": true + }) +}} diff --git a/src/components/footer/example-footer-with-multiple-logos.njk b/src/components/footer/example-footer-with-multiple-logos.njk new file mode 100644 index 0000000000..db22c69cd8 --- /dev/null +++ b/src/components/footer/example-footer-with-multiple-logos.njk @@ -0,0 +1,171 @@ +--- +'fullWidth': true +--- + +{% from "components/footer/_macro.njk" import onsFooter %} +{{ + onsFooter({ + "cols": [ + { + "title": 'Business surveys', + "itemsList": [ + { + "text": 'About our surveys', + "url": '#0' + }, + { + "text": 'Lists of all surveys', + "url": '#0' + }, + { + "text": 'Respondent Charter', + "url": '#0' + } + ] + }, + { + "title": 'About ONS', + "itemsList": [ + { + "text": 'What we do', + "url": '#0' + }, + { + "text": 'Transparency and governance', + "url": '#0' + }, + { + "text": 'Contact us', + "url": '#0' + } + ] + }, + { + "title": 'Statistics', + "itemsList": [ + { + "text": 'UK Statistics Authority', + "external": true, + "url": '#0' + }, + { + "text": 'Release calendar', + "url": '#0' + }, + { + "text": 'News', + "url": '#0' + } + ] + } + ], + "legal": [ + { + "itemsList": [ + { + "text": 'Cookies', + "url": '#0' + }, + { + "text": 'Accessibility statement', + "url": '#0' + }, + { + "text": 'Privacy and data protection', + "url": '#0' + }, + { + "text": 'Terms and conditions', + "url": '#0' + } + ] + } + ], + "footerLogo": { + "logos": { + "logo2": { + "logoImage": '' + } + } + }, + "OGLLink": true + }) +}} diff --git a/src/layout/_template.njk b/src/layout/_template.njk index d6b2e03a32..2526878dca 100644 --- a/src/layout/_template.njk +++ b/src/layout/_template.njk @@ -206,7 +206,7 @@ "lang": currentLanguageISOCode, "rows": pageConfig.footer.rows, "cols": pageConfig.footer.cols, - "poweredBy": pageConfig.footer.poweredBy, + "footerLogo": pageConfig.footer.footerLogo, "crest": pageConfig.footer.crest, "OGLLink": pageConfig.footer.OGLLink, "button": pageConfig.header.signoutButton,