@ons/design-system 70.0.17 → 72.0.1

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 %}

package/components/footer/_macro.spec.js

@@ -8,7 +8,7 @@ import { renderComponent, templateFaker } from '../../tests/helpers/rendering';
 
 const EXAMPLE_OGL_LINK_PARAM = {
     pre: 'All content is available under the',
-    link: 'Open Government Licence v3.0',
+    text: 'Open Government Licence v3.0',
     url: 'https://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/',
     post: ', except where otherwise stated',
 };
@@ -125,7 +125,7 @@ describe('macro: footer', () => {
 
     describe('OGL link', () => {
         const params = {
-            OGLLink: EXAMPLE_OGL_LINK_PARAM,
+            oglLink: EXAMPLE_OGL_LINK_PARAM,
         };
 
         it('passes jest-axe checks', async () => {
@@ -144,12 +144,12 @@ describe('macro: footer', () => {
             expect(iconsSpy.occurrences).toContainEqual(expect.objectContaining({ iconType: 'ogl' }));
         });
 
-        it('renders raw HTML when `HTML` is provided', () => {
+        it('renders raw HTML when `html` is provided', () => {
             const $ = cheerio.load(
                 renderComponent('footer', {
-                    OGLLink: {
-                        ...params.OGLLink,
-                        HTML: '<strong>Bold text.</strong>',
+                    oglLink: {
+                        ...params.oglLink,
+                        html: '<strong>Bold text.</strong>',
                     },
                 }),
             );
@@ -167,7 +167,7 @@ describe('macro: footer', () => {
             expect(externalLinkSpy.occurrences).toContainEqual(
                 expect.objectContaining({
                     url: 'https://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/',
-                    linkText: 'Open Government Licence v3.0',
+                    text: 'Open Government Licence v3.0',
                 }),
             );
         });
@@ -179,11 +179,11 @@ describe('macro: footer', () => {
             expect(licenseHtml).toContain(', except where otherwise stated');
         });
 
-        it('renders welsh `post` content when `lang:cy` provided and `OGLLink` is "true"', () => {
+        it('renders welsh `post` content when `lang:cy` provided and `oglLink` is "true"', () => {
             const $ = cheerio.load(
                 renderComponent('footer', {
                     lang: 'cy',
-                    OGLLink: true,
+                    oglLink: true,
                 }),
             );
 
@@ -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">',
-                        OGLLink: EXAMPLE_OGL_LINK_PARAM,
+                        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-container').attr('class')).toContain('ons-grid-flex--between');
+            });
         });
     });
 

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

@@ -50,6 +50,6 @@
                 ]
             }
         ],
-        "OGLLink": true
+        "oglLink": true
     })
 }}

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

@@ -58,6 +58,6 @@
                 ]
             }
         ],
-        "OGLLink": true
+        "oglLink": true
     })
 }}

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

@@ -28,6 +28,6 @@
                 ]
             }
         ],
-        "OGLLink": true
+        "oglLink": true
     })
 }}