merging feature/3134-add-option-for-additional-logo-in-footer into br…

…anch
ONSdigital · Sep 5, 2024 · b7b1a5b · b7b1a5b
2 parents 9fba143 + 2613ba2
commit b7b1a5b
Show file tree

Hide file tree

Showing 18 changed files with 626 additions and 146 deletions.
diff --git 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`] = `
 
 
 
+
 
     <footer class="ons-footer">
 
@@ -1585,7 +1586,7 @@ exports[`base page template matches the full configuration snapshot 1`] = `
 
                 </div>
 
-                <div class="ons-grid ons-grid-flex ons-grid-flex--vertical-top ons-grid-flex--between">
+                <div class="ons-grid ons-grid-flex--vertical-top ons-grid-flex--between">
                     <div class="ons-grid__col">
 
                             <!-- Legal -->
@@ -1685,9 +1686,16 @@ 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-container ons-u-mb-m ons-grid--flex ons-grid--vertical-center">
+
+                                        <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
@@ -1728,14 +1736,14 @@ exports[`base page template matches the full configuration snapshot 1`] = `
                 <path d="M605.1,47.79A15.9,15.9,0,0,1,597.45,46l1.42-3.47A10.54,10.54,0,0,0,604.4,44c2.77,0,5-1.78,5-3.94,0-6-11.1-3.2-11.1-11.47,0-3.76,3.37-7.42,8.85-7.42a13.49,13.49,0,0,1,7.1,1.83l-1.42,3.14a8.42,8.42,0,0,0-4.63-1.45c-2.8,0-4.53,1.69-4.53,3.62,0,5.64,11.32,3.14,11.32,11.6,0,4-3.85,7.9-9.89,7.9"></path>
             </g>
         </svg>
-    </div>
-                            </a>
-
+
+                                        </a>
+
+                        </div>
                     </div>
 
                 </div>
 
-
             </div>
         </div>
     </footer>

diff --git a/...ts_footer_example-footer-with-alternative-organisation_0_document_0_desktop.png b/...ts_footer_example-footer-with-alternative-organisation_0_document_0_desktop.png
diff --git a/...nts_footer_example-footer-with-alternative-organisation_0_document_1_tablet.png b/...nts_footer_example-footer-with-alternative-organisation_0_document_1_tablet.png
diff --git a/...nts_footer_example-footer-with-alternative-organisation_0_document_2_mobile.png b/...nts_footer_example-footer-with-alternative-organisation_0_document_2_mobile.png
diff --git a/...r_example-footer-with-multiple-logos-and-split-display_0_document_0_desktop.png b/...r_example-footer-with-multiple-logos-and-split-display_0_document_0_desktop.png
diff --git a/...er_example-footer-with-multiple-logos-and-split-display_0_document_1_tablet.png b/...er_example-footer-with-multiple-logos-and-split-display_0_document_1_tablet.png
diff --git a/...er_example-footer-with-multiple-logos-and-split-display_0_document_2_mobile.png b/...er_example-footer-with-multiple-logos-and-split-display_0_document_2_mobile.png
diff --git a/...__components_footer_example-footer-with-multiple-logos_0_document_0_desktop.png b/...__components_footer_example-footer-with-multiple-logos_0_document_0_desktop.png
diff --git a/...t__components_footer_example-footer-with-multiple-logos_0_document_1_tablet.png b/...t__components_footer_example-footer-with-multiple-logos_0_document_1_tablet.png
diff --git a/...t__components_footer_example-footer-with-multiple-logos_0_document_2_mobile.png b/...t__components_footer_example-footer-with-multiple-logos_0_document_2_mobile.png
diff --git 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
@@ -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. |
diff --git a/src/components/footer/_macro.njk b/src/components/footer/_macro.njk
@@ -7,20 +7,20 @@
     {% 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'
                 })
             -}}
         {% 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 %}
                 </div>
 
-                <div class="ons-grid ons-grid-flex ons-grid-flex--vertical-top ons-grid-flex--between">
+                <div class="ons-grid{% if params.crest %}ons-grid-flex{% endif %} ons-grid-flex--vertical-top ons-grid-flex--between">
                     <div class="ons-grid__col">
                         {% if params.legal %}
                             <!-- Legal -->
@@ -162,14 +162,35 @@
                                 {% 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-m ons-grid-flex ons-grid-flex--vertical-center{% if params.footerLogo.display == 'split' %}ons-grid-flex--between{% 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 }}"
+                                        >{{ logo.logoImage | safe }}</a
+                                    >
+                                {%- else -%}
+
+                                    {{ logo.logoImage | safe }}
+                                {% endif %}
+                            {% endfor %}
+                        </div>
                     </div>
                     {% if params.crest %}
                         <!-- Crest -->
@@ -182,13 +203,10 @@
                         </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-flex--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>
                         </div>