Add option for additional logo in footer

__snapshots__/layout/_template.spec.js.snap

@@ -1254,6 +1254,7 @@ exports[`base page template matches the full configuration snapshot 1`] = `
 
 
 
+
 
     <footer class="ons-footer">
 
@@ -1500,7 +1501,7 @@ exports[`base page template matches the full configuration snapshot 1`] = `
 
                 </div>
 
-                <div class="ons-grid ons-grid--flex ons-grid--vertical-top ons-grid--between">
+                <div class="ons-grid ons-grid--vertical-top ons-grid--between">
                     <div class="ons-grid__col">
 
                             <!-- Legal -->
@@ -1594,9 +1595,15 @@ exports[`base page template matches the full configuration snapshot 1`] = `
 
                             </div>
 
+
 
-                            <a class="ons-footer__poweredBy-link" href="https://www.ons.gov.uk/">
-                                <div class="ons-footer__poweredby-logo ons-u-mb-m">
+
+
+
+
+                        <div class="ons-footer__logo ons-u-mb-m">
+
+                                        <a class="ons-footer__logo-link" href="https://www.ons.gov.uk/">
 
         <svg class="ons-icon--logo" xmlns="http://www.w3.org/2000/svg" width="197" height="19" viewBox="33 2 552 60" aria-labelledby="ons-logo-en-footer-alt" role="img">
             <title id="ons-logo-en-footer-alt">Office for National Statistics</title>
@@ -1637,14 +1644,13 @@ exports[`base page template matches the full configuration snapshot 1`] = `
             </g>
         </svg>
 
-                                </div>
-                            </a>
-
+                                        </a>
+                                    
+                        </div>
                     </div>
 
                 </div>
 
-
             </div>
         </div>
     </footer>

src/components/footer/_footer.scss

@@ -30,12 +30,14 @@
         vertical-align: middle;
     }
 
-    &__poweredBy-link {
-        &:focus {
-            .ons-icon--logo {
-                @extend %a-focus;
-            }
-        }
+    &__extra-logo svg,
+    img {
+        max-height: 30px;
+        width: auto;
+    }
+
+    &__logo {
+        gap: 1rem;
     }
 
     .ons-icon--logo,

src/components/footer/_macro-options.md

@@ -5,7 +5,7 @@
 | cols                 | array`<FooterCol>`             | false    | An array of objects for each of the 3 allowed [footer columns](#footercol)                                                                           |
 | rows                 | array`<FooterRow>`             | false    | An array for the first [footer row](#footerrow)                                                                                                      |
 | legal                | array`<LegalRow>`              | false    | An array of for the [row of legal links](#legalrow)                                                                                                  |
-| poweredBy            | HTML                           | false    | Any HTML to render an image for example embedded `<svg>` or `<img>` to override the default ONS logo                                                 |
+| footerLogo           | object`<FooterLogo>`           | 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`<OGLLink>`              | 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`<ListItem>` [_(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`<Logos>` | 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`<Logo>` | false    | First Logo. Defaults to ONS logo. |
+| logo2   | object`<Logo>` | false    | Second Logo                       |
+
+## Logo
+
+| Name      | Type           | Required | Description                                                                             |
+| --------- | -------------- | -------- | --------------------------------------------------------------------------------------- |
+| logoImage | HTML or string | false    | Any HTML to render an image for example embedded `<svg>` or `<img>`.                    |
+| logoUrl   | string         | false    | Wraps the extra logo in a link. Set the URL for the HTML `href` attribute for the link. |

src/components/footer/_macro.njk

@@ -9,19 +9,20 @@
         {% 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'
                 })
             -}}
         {% 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'
                 })
@@ -111,7 +112,7 @@
                     {% endif %}
                 </div>
 
-                <div class="ons-grid ons-grid--flex ons-grid--vertical-top ons-grid--between">
+                <div class="ons-grid{% if params.crest %} ons-grid--flex{% endif %} ons-grid--vertical-top ons-grid--between">
                     <div class="ons-grid__col">
                         {% if params.legal %}
                             <!-- Legal -->
@@ -156,13 +157,30 @@
                                 {% 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 ons-u-mb-m{% if extraLogo %} ons-footer__extra-logo ons-grid--flex ons-grid--vertical-center{% if params.footerLogo.display == 'split' %} ons-grid--between{% endif %}{% endif %}">
+                                {% for logo in logos %}
+                                    {%-if logo.logoUrl %}
+                                        <a class="ons-footer__logo-link{% if extraLogo and loop.index == 1 %} ons-u-mr-s{% endif %}" href="{{ logo.logoUrl }}">
+                                    {% endif -%}
+
+                                    {{ logo.logoImage | safe }}
+
+                                    {%-if logo.logoUrl %}
+                                        </a>
+                                    {% endif -%}
+                                {% endfor %}
+                        </div>
                     </div>
                     {% if params.crest %}
                         <!-- Crest -->
@@ -175,9 +193,6 @@
                         </div>
                     {% endif %}
                 </div>
-                {% if params.poweredBy %}
-                    {{ params.poweredBy | safe }}
-                {% endif %}
                 {% if params.copyrightDeclaration %}
                     <!-- Copyright -->
                     <div class="ons-grid ons-grid--flex ons-grid--vertical-bottom ons-grid--between">

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: '<img src="logo.svg" class="custom-logo" alt="logo">',
+                        footerLogo: {
+                            logos: {
+                                logo1: { logoImage: '<img src="logo.svg" class="custom-logo" alt="logo">' },
+                            },
+                        },
                         OGLLink: EXAMPLE_OGL_LINK_PARAM,
                     },
                 ],
                 [
-                    'the `poweredBy` and `legal` parameters are provided',
+                    'the `footerLogo` and `legal` parameters are provided',
                     {
-                        poweredBy: '<img src="logo.svg" class="custom-logo" alt="logo">',
+                        footerLogo: {
+                            logos: {
+                                logo1: { logoImage: '<img src="logo.svg" class="custom-logo" alt="logo">' },
+                            },
+                        },
                         legal: EXAMPLE_LEGAL_PARAM,
                     },
                 ],
                 [
-                    'the `poweredBy` and `crest` parameters are provided',
+                    'the `footerLogo` and `crest` parameters are provided',
                     {
-                        poweredBy: '<img src="logo.svg" class="custom-logo" alt="logo">',
+                        footerLogo: {
+                            logos: {
+                                logo1: { logoImage: '<img src="logo.svg" class="custom-logo" alt="logo">' },
+                            },
+                        },
                         crest: true,
                     },
                 ],
                 [
-                    'the `poweredBy`, `legal` and `crest` parameters are provided',
+                    'the `footerLogo`, `legal` and `crest` parameters are provided',
                     {
-                        poweredBy: '<img src="logo.svg" class="custom-logo" alt="logo">',
+                        footerLogo: {
+                            logos: {
+                                logo1: { logoImage: '<img src="logo.svg" class="custom-logo" alt="logo">' },
+                            },
+                        },
                         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: '<img src="logo.svg" class="custom-logo" alt="logo">',
+                        footerLogo: {
+                            logos: {
+                                logo1: { logoImage: '<img src="logo.svg" class="custom-logo" alt="logo">' },
+                            },
+                        },
                     },
                 ],
-            ])('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: '<img src="logo.svg" class="custom-logo" alt="logo">' },
+                                logo2: {
+                                    logoUrl: '#0',
+                                    logoImage: '<img src="a-logo.svg">',
+                                },
+                            },
+                        },
+                        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: '<img src="logo.svg" class="custom-logo" alt="logo">' },
+                                logo2: {
+                                    logoUrl: '#0',
+                                    logoImage: '<img src="a-logo.svg">',
+                                },
+                            },
+                            display: 'split',
+                        },
+                        legal: EXAMPLE_LEGAL_PARAM,
+                        crest: true,
+                    }),
+                );
+
+                expect($('.ons-footer__logo').attr('class')).toContain('ons-grid--between');
+            });
         });
     });