@ons/design-system 59.1.0 → 60.0.1

package/components/footer/_footer.scss

@@ -49,19 +49,4 @@
       margin-bottom: 0.5rem !important;
     }
   }
-
-  &__poweredby,
-  &__crest,
-  &__partnership {
-    font-size: 0;
-  }
-
-  &__partnership {
-    &-prefix {
-      @extend .ons-u-fs-s;
-
-      margin-bottom: 0.2rem;
-      margin-top: -0.3rem;
-    }
-  }
 }

package/components/footer/_macro.njk

@@ -29,18 +29,6 @@
         {% endif %}
     {% endset %}
 
-    {% set poweredByLogo %}
-        {% if params.poweredBy and params.poweredBy.logo %}
-            {{
-                onsIcon({
-                    "iconType": params.poweredBy.logo,
-                    "altText": params.poweredBy.alt,
-                    "altTextId": 'poweredby-alt'
-                })
-            }}
-        {% endif %}
-    {% endset %}
-
     <footer class="ons-footer">
 
         {% if params.footerWarning %}
@@ -122,116 +110,80 @@
                             <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__col">
-                            {% if params.legal %}
-                                <!-- Legal -->
-                                {% for legal in params.legal %}
-                                    {{
-                                        onsList({
-                                            "classes": 'ons-u-mb-s ons-footer--rows',
-                                            "variants": ['bare', 'inline'],
-                                            "itemsList": legal.itemsList
-                                        })
-                                    }}
-                                {% endfor %}
-                            {% endif %}
+                <div class="ons-grid ons-grid--flex ons-grid--vertical-top ons-grid--between">
+                    <div class="ons-grid__col">
+                        {% if params.legal %}
+                            <!-- Legal -->
+                            {% for legal in params.legal %}
+                                {{
+                                    onsList({
+                                        "classes": 'ons-u-mb-s ons-footer--rows',
+                                        "variants": ['bare', 'inline'],
+                                        "itemsList": legal.itemsList
+                                    })
+                                }}
+                            {% endfor %}
+                        {% endif %}
 
-                            {% if params.OGLLink %}
-                                <!-- OGL -->
-                                <div class="ons-footer__license ons-u-mb-m">
-                                    {{
-                                        onsIcon({
-                                            "iconType": 'ogl'
+                        {% if params.OGLLink %}
+                            <!-- OGL -->
+                            <div class="ons-footer__license ons-u-mb-m">
+                                {{
+                                    onsIcon({
+                                        "iconType": 'ogl'
+                                    })
+                                }}
+                                {% 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') }} {{
+                                        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')
                                         })
-                                    }}
-                                    {% 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.post | default(', oni bai y nodir fel arall') }}
+                                    {% else %}
+                                        {{ 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('Drwydded Llywodraeth Leol v3.0')
+                                                "linkText": params.OGLLink.link | default('Open Government Licence v3.0')
                                             })
-                                            }}{{ params.OGLLink.post | default(', oni bai y nodir fel arall') }}
-                                        {% else %}
-                                            {{ 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')
-                                                })
-                                            }}{{ params.OGLLink.post | default(', except where otherwise stated') }}
-                                        {% endif %}
+                                        }}{{ params.OGLLink.post | default(', except where otherwise stated') }}
                                     {% endif %}
-                                </div>
-                            {% endif %}
-
-                            {% if params.poweredBy %}
-                                {% if not params.poweredBy.partnership %}
-                                    <div class="ons-footer__poweredby ons-u-mb-m">
-                                        {{ poweredByLogo | safe }}
-                                    </div>
                                 {% endif %}
-                            {% else %}
-                                <div class="ons-footer__poweredby ons-u-mb-m">
-                                    {{ onsLogo | safe }}
-                                </div>
-                            {% endif %}
-                        </div>
-
-                        {% if params.crest %}
-                            <!-- Crest -->
-                            <div class="ons-grid__col ons-footer__crest ons-u-mb-m@xxs@l">
-                                {{
-                                    onsIcon({
-                                        "iconType": 'crest'
-                                    })
-                                }}
+                            </div>
+                        {% endif %}
+                        {% if not params.poweredBy %}
+                            <div class="ons-footer__poweredby ons-u-mb-m">
+                                {{ onsLogo | safe }}
                             </div>
                         {% endif %}
                     </div>
-
-                {% if (params.poweredBy) and (params.poweredBy.partnership) %}
-                    <div class="ons-grid ons-grid--flex ons-grid--vertical-bottom ons-grid--between ons-u-mt-l">
-                        <div class="ons-grid__col ons-footer__poweredby ons-u-mb-m">
-                            {{ poweredByLogo | safe }}
-                        </div>
-
-                        <div class="ons-grid__col ons-footer__partnership ons-u-mb-m">
-                            <div class="ons-footer__partnership-prefix">{{ params.poweredBy.partnership }}</div>
-                            {% if params.lang == 'cy' %}
-                                {{
-                                    onsIcon({
-                                        "iconType": 'ons-logo-cy',
-                                        "altText": 'Swyddfa Ystadegau Gwladol',
-                                        "altTextId": 'ons-logo-cy-footer-alt'
-                                    })
-                                }}
-                            {% else %}
-                                {{
-                                    onsIcon({
-                                        "iconType": 'ons-logo-en',
-                                        "altText": 'Office for National Statistics',
-                                        "altTextId": 'ons-logo-en-footer-alt'
-                                    })
-                                }}
-                            {% endif %}
+                    {% if params.crest %}
+                        <!-- Crest -->
+                        <div class="ons-grid__col ons-footer__crest ons-u-mb-m@xxs@l">
+                            {{
+                                onsIcon({
+                                    "iconType": 'crest'
+                                })
+                            }}
                         </div>
-                    </div>
+                    {% endif %}
+                </div>
+                {% if params.poweredBy %}
+                    {{ params.poweredBy | safe }}
                 {% endif %}
-
                 {% if params.copyrightDeclaration %}
-                <!-- Copyright -->
-                <div class="ons-grid">
-                    <div class="ons-grid__col">
-                        <p class="ons-u-fs-s ons-u-mb-no ons-footer__copyright">&copy; {{ params.copyrightDeclaration.copyright }} <br> {{ params.copyrightDeclaration.text }}</p>
+                    <!-- Copyright -->
+                    <div class="ons-grid ons-grid--flex ons-grid--vertical-bottom ons-grid--between">                                
+                        <div class="ons-grid__col">
+                            <p class="ons-u-fs-s ons-u-mb-no ons-footer__copyright">&copy; {{ params.copyrightDeclaration.copyright }} <br> {{ params.copyrightDeclaration.text }}</p>
+                        </div>
                     </div>
-                </div>
                 {% endif %}
             </div>
         </div>

package/components/footer/_macro.spec.js

@@ -6,17 +6,6 @@ import axe from '../../tests/helpers/axe';
 import { mapAll } from '../../tests/helpers/cheerio';
 import { renderComponent, templateFaker } from '../../tests/helpers/rendering';
 
-const EXAMPLE_POWERED_BY_PARAM = {
-  logo: 'person',
-  alt: 'Person alt text',
-};
-
-const EXAMPLE_POWERED_BY_WITH_PARTNERSHIP_PARAM = {
-  logo: 'person',
-  alt: 'Person alt text',
-  partnership: 'Prefix text string',
-};
-
 const EXAMPLE_OGL_LINK_PARAM = {
   pre: 'All content is available under the',
   link: 'Open Government Licence v3.0',
@@ -365,162 +354,102 @@ describe('macro: footer', () => {
     });
   });
 
-  describe('powered by logo', () => {
-    describe.each([
-      [
-        'the `lang` parameter is not provided',
-        {},
-        {
-          iconType: 'ons-logo-en',
-          altText: 'Office for National Statistics',
-        },
-      ],
-      [
-        'the `lang` parameter is "en"',
-        { lang: 'en' },
-        {
-          iconType: 'ons-logo-en',
-          altText: 'Office for National Statistics',
-        },
-      ],
-      [
-        'the `lang` parameter is "cy"',
-        { lang: 'cy' },
-        {
-          iconType: 'ons-logo-cy',
-          altText: 'Swyddfa Ystadegau Gwladol',
-        },
-      ],
-    ])('where %s', (_, langParams, defaultIcon) => {
+  describe('poweredBy logo', () => {
+    describe('default poweredBy logo', () => {
       describe.each([
         [
-          'the `poweredBy` and `OGLLink` parameters are provided',
+          'the `lang` parameter is not provided',
+          {},
           {
-            poweredBy: EXAMPLE_POWERED_BY_PARAM,
-            OGLLink: EXAMPLE_OGL_LINK_PARAM,
-          },
-          {
-            iconType: 'person',
-            altText: 'Person alt text',
+            iconType: 'ons-logo-en',
+            altText: 'Office for National Statistics',
           },
         ],
         [
-          'the `poweredBy.partnership` and `OGLLink` parameters are provided',
-          {
-            poweredBy: EXAMPLE_POWERED_BY_WITH_PARTNERSHIP_PARAM,
-            OGLLink: EXAMPLE_OGL_LINK_PARAM,
-          },
+          'the `lang` parameter is "en"',
+          { lang: 'en' },
           {
-            iconType: 'person',
-            altText: 'Person alt text',
+            iconType: 'ons-logo-en',
+            altText: 'Office for National Statistics',
           },
         ],
+      ])('where %s', (_, langParams, defaultIcon) => {
+        const params = {
+          ...langParams,
+        };
+        it('renders the expected icon', () => {
+          const faker = templateFaker();
+          const iconsSpy = faker.spy('icons');
+
+          faker.renderComponent('footer', params);
+
+          expect(iconsSpy.occurrences).toContainEqual(expect.objectContaining(defaultIcon));
+        });
+      });
+    });
+    describe('provided poweredBy logo', () => {
+      describe.each([
         [
-          'the `poweredBy` parameter is not provided but the `legal` parameter is provided',
+          'the `lang` parameter is "cy"',
+          { lang: 'cy' },
           {
-            legal: EXAMPLE_LEGAL_PARAM,
+            iconType: 'ons-logo-cy',
+            altText: 'Swyddfa Ystadegau Gwladol',
           },
-          defaultIcon,
         ],
+      ])('where %s', (_, langParams, defaultIcon) => {
+        const params = {
+          ...langParams,
+        };
+        it('renders the expected icon', () => {
+          const faker = templateFaker();
+          const iconsSpy = faker.spy('icons');
+
+          faker.renderComponent('footer', params);
+
+          expect(iconsSpy.occurrences).toContainEqual(expect.objectContaining(defaultIcon));
+        });
+      });
+    });
+    describe('provided poweredBy logo', () => {
+      describe.each([
         [
-          'the `poweredBy` parameter is not provided but the `legal` and `OGLLink` parameters are provided',
+          'the `poweredBy` and `OGLLink` parameters are provided',
           {
-            legal: EXAMPLE_LEGAL_PARAM,
+            poweredBy: '<img src="logo.svg" class="custom-logo" alt="logo">',
             OGLLink: EXAMPLE_OGL_LINK_PARAM,
           },
-          defaultIcon,
         ],
         [
           'the `poweredBy` and `legal` parameters are provided',
           {
-            poweredBy: EXAMPLE_POWERED_BY_PARAM,
+            poweredBy: '<img src="logo.svg" class="custom-logo" alt="logo">',
             legal: EXAMPLE_LEGAL_PARAM,
           },
-          {
-            iconType: 'person',
-            altText: 'Person alt text',
-          },
-        ],
-        [
-          'the `poweredBy.partnership` and `legal` parameters are provided',
-          {
-            poweredBy: EXAMPLE_POWERED_BY_WITH_PARTNERSHIP_PARAM,
-            legal: EXAMPLE_LEGAL_PARAM,
-          },
-          {
-            iconType: 'person',
-            altText: 'Person alt text',
-          },
         ],
         [
           'the `poweredBy` and `crest` parameters are provided',
           {
-            poweredBy: EXAMPLE_POWERED_BY_PARAM,
+            poweredBy: '<img src="logo.svg" class="custom-logo" alt="logo">',
             crest: true,
           },
-          {
-            iconType: 'person',
-            altText: 'Person alt text',
-          },
-        ],
-        [
-          'the `poweredBy.partnership` and `crest` parameters are provided',
-          {
-            poweredBy: EXAMPLE_POWERED_BY_WITH_PARTNERSHIP_PARAM,
-            crest: true,
-          },
-          {
-            iconType: 'person',
-            altText: 'Person alt text',
-          },
         ],
         [
           'the `poweredBy`, `legal` and `crest` parameters are provided',
           {
-            poweredBy: EXAMPLE_POWERED_BY_PARAM,
-            legal: EXAMPLE_LEGAL_PARAM,
-            crest: true,
-          },
-          {
-            iconType: 'person',
-            altText: 'Person alt text',
-          },
-        ],
-        [
-          'the `poweredBy.partnership`, `legal` and `crest` parameters are provided',
-          {
-            poweredBy: EXAMPLE_POWERED_BY_WITH_PARTNERSHIP_PARAM,
+            poweredBy: '<img src="logo.svg" class="custom-logo" alt="logo">',
             legal: EXAMPLE_LEGAL_PARAM,
             crest: true,
           },
-          {
-            iconType: 'person',
-            altText: 'Person alt text',
-          },
         ],
         [
           'the `poweredBy` parameter is provided but the `legal` and `crest` parameters are not provided',
           {
-            poweredBy: EXAMPLE_POWERED_BY_PARAM,
-          },
-          {
-            iconType: 'person',
-            altText: 'Person alt text',
+            poweredBy: '<img src="logo.svg" class="custom-logo" alt="logo">',
           },
         ],
-        [
-          'the `poweredBy.partnership` parameter is provided but the `legal` and `crest` parameters are not provided',
-          {
-            poweredBy: EXAMPLE_POWERED_BY_WITH_PARTNERSHIP_PARAM,
-          },
-          {
-            iconType: 'person',
-            altText: 'Person alt text',
-          },
-        ],
-      ])('where %s', (_, poweredByParams, expectedIcon) => {
+      ])('where %s', (_, poweredByParams) => {
         const params = {
-          ...langParams,
           ...poweredByParams,
         };
 
@@ -531,13 +460,10 @@ describe('macro: footer', () => {
           expect(results).toHaveNoViolations();
         });
 
-        it('renders the expected icon', () => {
-          const faker = templateFaker();
-          const iconsSpy = faker.spy('icons');
-
-          faker.renderComponent('footer', params);
+        it('renders the expected logo', () => {
+          const $ = cheerio.load(renderComponent('footer', params));
 
-          expect(iconsSpy.occurrences).toContainEqual(expect.objectContaining(expectedIcon));
+          expect($('.custom-logo').length).toBe(1);
         });
       });
     });
@@ -631,60 +557,4 @@ describe('macro: footer', () => {
       expect($('.ons-footer__crest').length).toBe(1);
     });
   });
-
-  describe('partnership', () => {
-    const params = {
-      poweredBy: EXAMPLE_POWERED_BY_WITH_PARTNERSHIP_PARAM,
-    };
-
-    it('passes jest-axe checks', async () => {
-      const $ = cheerio.load(renderComponent('footer', params));
-
-      const results = await axe($.html());
-      expect(results).toHaveNoViolations();
-    });
-
-    it('renders ONS icon when `partnership` parameter is provided', () => {
-      const faker = templateFaker();
-      const iconsSpy = faker.spy('icons');
-
-      faker.renderComponent('footer', params);
-
-      expect(iconsSpy.occurrences).toContainEqual(expect.objectContaining({ iconType: 'ons-logo-en' }));
-    });
-
-    it('renders "poweredBy" icon when `partnership` parameter is provided', () => {
-      const faker = templateFaker();
-      const iconsSpy = faker.spy('icons');
-
-      faker.renderComponent('footer', params);
-
-      expect(iconsSpy.occurrences).toContainEqual(expect.objectContaining({ iconType: 'person' }));
-    });
-
-    it('renders "poweredBy" element when `partnership` parameter is provided', () => {
-      const $ = cheerio.load(renderComponent('footer', params));
-
-      expect($('.ons-footer__poweredby').length).toBe(1);
-    });
-
-    it('renders "partnership" and "prefix" elements when `partnership` parameter is provided', () => {
-      const $ = cheerio.load(renderComponent('footer', params));
-
-      expect($('.ons-footer__partnership').length).toBe(1);
-      expect($('.ons-footer__partnership-prefix').length).toBe(1);
-    });
-
-    it('does not render "partnership" element when `partnership` parameter is not provided', () => {
-      const params = {
-        poweredBy: {
-          logo: 'person',
-          alt: 'Person alt text',
-        },
-      };
-      const $ = cheerio.load(renderComponent('footer', params));
-
-      expect($('.ons-footer__partnership').length).toBe(0);
-    });
-  });
 });

package/components/header/_header.scss

@@ -12,15 +12,10 @@
     width: 100%;
   }
   &__grid-top {
-    height: 54px;
+    padding: 1rem 0;
 
     @include mq(xs) {
-      height: 46px;
-    }
-  }
-  &__grid-top-tall {
-    @include mq(xs) {
-      height: 76px;
+      padding: 0.75rem 0;
     }
   }
   &__main {
@@ -114,20 +109,29 @@
 
   &--neutral & {
     &__top {
-      background: var(--ons-color-header-masthead-dark);
+      background: var(--ons-color-header-masthead-neutral);
+    }
+
+    &__grid-top {
+      a {
+        color: var(--ons-color-service-links);
+        &:hover {
+          text-decoration: underline solid var(--ons-color-service-links) 3px;
+        }
+      }
     }
 
     &__main {
-      background: var(--ons-color-header-light);
+      background: var(--ons-color-header-neutral);
 
       &--border {
-        border-bottom: 3px solid var(--ons-color-header-light);
-        border-top: 3px solid var(--ons-color-header-light);
+        border-bottom: 3px solid var(--ons-color-header-neutral);
+        border-top: 3px solid var(--ons-color-header-neutral);
       }
     }
 
     &__title {
-      color: var(--ons-color-branded-text);
+      color: var(--ons-color-header-title);
       &-link {
         &:hover {
           text-decoration: underline solid var(--ons-color-branded-text) 2px;
@@ -143,6 +147,13 @@
   &__org-logo-link,
   &__title-logo-link {
     display: block;
+    font-size: 0;
+    &:hover {
+      text-decoration: none;
+    }
+  }
+
+  &__org-logo-link {
     &:focus {
       .ons-svg-logo {
         fill: var(--ons-color-black) !important;
@@ -151,19 +162,6 @@
         }
       }
     }
-    &:hover {
-      font-size: 0;
-      text-decoration: none;
-    }
-  }
-
-  &__title-logo--large {
-    .ons-svg-logo {
-      @include mq(xxs, 399px) {
-        height: auto;
-        max-width: 160px;
-      }
-    }
   }
 
   &__org-logo--large {