@ons/design-system 51.0.0 → 53.0.1

package/components/footer/_macro.spec.js

@@ -11,6 +11,12 @@ const EXAMPLE_POWERED_BY_PARAM = {
   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',
@@ -165,6 +171,18 @@ describe('macro: footer', () => {
       const licenseHtml = $('.ons-footer__license').html();
       expect(licenseHtml).toContain(', except where otherwise stated');
     });
+
+    it('renders welsh `post` content when `lang:cy` provided and `OGLLink` is "true"', () => {
+      const $ = cheerio.load(
+        renderComponent('footer', {
+          lang: 'cy',
+          OGLLink: true,
+        }),
+      );
+
+      const licenseHtml = $('.ons-footer__license').html();
+      expect(licenseHtml).toContain(', oni bai y nodir fel arall');
+    });
   });
 
   describe('warning', () => {
@@ -368,6 +386,17 @@ describe('macro: footer', () => {
             altText: 'Person alt text',
           },
         ],
+        [
+          'the `poweredBy.partnership` and `OGLLink` parameters are provided',
+          {
+            poweredBy: EXAMPLE_POWERED_BY_WITH_PARTNERSHIP_PARAM,
+            OGLLink: EXAMPLE_OGL_LINK_PARAM,
+          },
+          {
+            iconType: 'person',
+            altText: 'Person alt text',
+          },
+        ],
         [
           'the `poweredBy` parameter is not provided but the `legal` parameter is provided',
           {
@@ -394,6 +423,17 @@ describe('macro: footer', () => {
             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',
           {
@@ -405,6 +445,17 @@ describe('macro: footer', () => {
             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',
           {
@@ -418,7 +469,19 @@ describe('macro: footer', () => {
           },
         ],
         [
-          'the `poweredBy` parameter is not provided but the `legal` and `crest` parameters are provided',
+          'the `poweredBy.partnership`, `legal` and `crest` parameters are provided',
+          {
+            poweredBy: EXAMPLE_POWERED_BY_WITH_PARTNERSHIP_PARAM,
+            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,
           },
@@ -427,6 +490,16 @@ describe('macro: footer', () => {
             altText: 'Person alt text',
           },
         ],
+        [
+          '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) => {
         const params = {
           ...langParams,
@@ -531,7 +604,7 @@ describe('macro: footer', () => {
       expect(results).toHaveNoViolations();
     });
 
-    it('renders crest icon when `crest` parameter is provide', () => {
+    it('renders crest icon when `crest` parameter is provided', () => {
       const faker = templateFaker();
       const iconsSpy = faker.spy('icons');
 
@@ -546,4 +619,60 @@ 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

@@ -6,21 +6,9 @@
   margin: 0;
   position: relative;
 
-  & &__title--svg-logo {
-    display: block;
-    fill: $color-white;
-
-    @include mq(m) {
-      margin: 0.84rem 0;
-    }
-
-    @include mq(xxs, 399px) {
-      max-width: 160px;
-    }
-  }
   // Elements
   &__top {
-    background: $color-header-top;
+    background: $color-header-masthead;
     width: 100%;
   }
   &__grid-top {
@@ -56,20 +44,10 @@
       margin-top: 0.8rem;
     }
 
-    //to allow for differences in size between welsh and english logos
-    &-census-logo-en {
-      @include mq(xxs) {
-        margin: 0.19rem 0 0.2rem;
-        padding: 0.25rem 0;
-      }
-    }
     &-link {
       display: block;
       text-decoration: none;
       &:focus {
-        .ons-header__title--svg-logo {
-          fill: $color-text-link-focus;
-        }
         .ons-header__title {
           color: $color-text-link-focus;
         }
@@ -78,11 +56,6 @@
         text-decoration: underline solid $color-text-inverse-link 2px;
       }
     }
-    &--nav-adj {
-      @include mq(399px) {
-        padding-top: 0.2rem;
-      }
-    }
   }
   &__description {
     @extend .ons-u-fs-s;
@@ -106,9 +79,11 @@
       }
     }
   }
-  &--internal & {
+
+  &--internal &,
+  &--neutral & {
     &__top {
-      background: $color-header-top-internal;
+      background: $color-header-masthead-internal;
       .ons-svg-logo {
         display: block;
         .ons-svg-logo__group--text,
@@ -117,7 +92,7 @@
         }
       }
     }
-    &__logo-link:focus {
+    &__org-logo-link:focus {
       background-color: transparent;
       box-shadow: none;
       outline: 3px solid $color-focus;
@@ -136,40 +111,72 @@
     }
   }
 
+  &--neutral & {
+    &__top {
+      background: $color-header-masthead-dark;
+    }
+
+    &__main {
+      background: $color-header-light;
+
+      &--border {
+        border-bottom: 3px solid $color-header-light;
+        border-top: 3px solid $color-header-light;
+      }
+    }
+
+    &__title {
+      color: $color-branded-text;
+      &-link {
+        &:hover {
+          text-decoration: underline solid $color-branded-text 2px;
+        }
+      }
+    }
+  }
+
   .ons-svg-logo {
     display: block;
   }
 
-  &__logo-link:focus {
-    .ons-svg-logo {
-      .ons-svg-logo__group {
+  &__org-logo-link,
+  &__title-logo-link {
+    display: block;
+    &:focus {
+      .ons-svg-logo {
         fill: $color-black !important;
+        .ons-svg-logo__group {
+          fill: $color-black !important;
+        }
+      }
+    }
+    &:hover {
+      font-size: 0;
+      text-decoration: none;
+    }
+  }
+
+  &__title-logo--large {
+    .ons-svg-logo {
+      @include mq(xxs, 399px) {
+        height: auto;
+        max-width: 160px;
       }
     }
   }
 
-  .ons-header__logo--large {
+  &__org-logo--large {
     @include mq(xxs, 454px) {
       display: none;
     }
   }
 
-  .ons-header__logo--small {
+  &__org-logo--small {
     @include mq(455px) {
       display: none;
     }
   }
 
-  &__logo-link,
-  &__logo-link:hover {
-    font-size: 0;
-    text-decoration: none;
-  }
-
-  &__logo-link {
-    display: block;
-  }
-
   &-service-nav {
     display: inline-block;
 
@@ -179,6 +186,12 @@
       width: 100%;
     }
 
+    .ons-header--neutral & {
+      &--mobile {
+        background: $color-grey-5;
+      }
+    }
+
     &__list {
       list-style: none;
       margin: 0;
@@ -207,4 +220,10 @@
       }
     }
   }
+  &__lang-adjustment {
+    @include mq(l) {
+      margin-right: 21rem;
+      margin-top: -5px !important;
+    }
+  }
 }