ONSdigital · rmccar · May 14, 2021 · Feb 10, 2021 · Feb 10, 2021 · Feb 11, 2021
diff --git a/src/components/button/examples/button-loader/index.njk b/src/components/button/examples/button-loader/index.njk
@@ -1,12 +1,12 @@
 {% from "components/button/_macro.njk" import onsButton %}
 <form onsubmit="return false;">
     <div class="btn-group">
-    {{
-        onsButton({
-            "text": 'Submit',
-            "classes": 'btn-group__btn',
-            "submitType": "loader"
-        })
-    }}
+        {{
+            onsButton({
+                "text": 'Submit',
+                "classes": 'btn-group__btn',
+                "submitType": "loader"
+            })
+        }}
     </div>
 </form>
diff --git a/src/components/button/examples/button-timer/index.njk b/src/components/button/examples/button-timer/index.njk
@@ -1,12 +1,12 @@
 {% from "components/button/_macro.njk" import onsButton %}
 <form onsubmit="return false;">
     <div class="btn-group">
-    {{
-        onsButton({
-            "text": 'Submit',
-            "classes": 'btn-group__btn',
-            "submitType": "timer"
-        })
-    }}
+        {{
+            onsButton({
+                "text": 'Submit',
+                "classes": 'btn-group__btn',
+                "submitType": "timer"
+            })
+        }}
     </div>
 </form>
diff --git a/src/components/footer/_footer.scss b/src/components/footer/_footer.scss
@@ -25,6 +25,11 @@
     vertical-align: middle;
   }
 
+  .ons-svg-logo,
+  .ons-svg-logo--acent {
+    fill: $color-black;
+  }
+
   &__body {
     background-color: $color-grey-5;
     padding: 2rem 0 4rem;

diff --git a/src/components/header/_header.scss b/src/components/header/_header.scss
@@ -5,7 +5,7 @@
   -moz-osx-font-smoothing: grayscale;
   margin: 0;
   position: relative;
-  & &__svg-logo {
+  & &__title--svg-logo {
     display: block;
     fill: $color-white;
 
@@ -34,58 +34,59 @@
       height: 76px;
     }
   }
-  &__logo {
-    &:focus {
-      background-color: $color-focus;
-      box-shadow: 0 -2px $color-focus, 0 4px $color-focus-text;
-      color: $color-focus-text;
-      outline: 3px solid transparent;
-    }
-  }
-
-  @include mq(xs) {
-    &__logo {
-      margin-bottom: 2px;
-    }
-  }
   &__main {
     background: $color-header;
     padding: 0.56rem 0;
+
+    @include mq(m) {
+      height: 95px;
+    }
     &--border {
       border-bottom: 3px solid $color-header;
       border-top: 3px solid $color-header;
       padding: 0.934rem 0;
     }
+    &--with-description {
+      height: auto;
+    }
   }
   &__title {
     @extend .u-fs-r--b;
     @extend .u-fs-xl\@xxs;
 
     color: $color-white;
-    margin: 0;
-    &--with-description {
-      line-height: 1.7 !important;
+
+    @include mq(m) {
+      margin-top: 0.85rem;
     }
-    &:not(&--with-description) {
-      line-height: 1.5 !important;
 
+    &--with-description,
+    &--with-button {
       @include mq(m) {
-        line-height: 2.5 !important;
+        margin-top: 0.45rem;
       }
     }
 
-    @include mq(xs, m) {
-      line-height: 1.75 !important;
-    }
-
-    @include mq(xxs, xs) {
-      line-height: 1.7 !important;
+    //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;
+      &:hover {
+        color: $color-white;
+        text-decoration: underline;
+      }
       &:focus {
-        .header__svg-logo {
-          fill: $color-black !important;
+        .header__title {
+          color: $color-black;
+        }
+        .header__title--svg-logo {
+          fill: $color-black;
         }
       }
     }
@@ -117,9 +118,13 @@
   }
   &--internal & {
     &__top {
-      background: $color-dark-blue;
-      a {
-        color: $color-white;
+      background: $color-header-internal;
+      .ons-svg-logo {
+        display: block;
+        fill: $color-white;
+        &--acent {
+          fill: $color-ons-icon-secondary;
+        }
       }
     }
     &__logo-link:focus {
@@ -131,7 +136,78 @@
       min-height: 36px;
     }
   }
+
+  .ons-svg-logo,
+  .ons-nisra-svg-logo {
+    display: block;
+  }
+
+  .ons-svg-logo {
+    fill: $color-ons-icon;
+    &--acent {
+      fill: $color-ons-icon-secondary;
+    }
+  }
+
+  .ons-nisra-svg-logo {
+    .st0 {
+      fill: $color-nisra-icon;
+    }
+    .st1 {
+      fill: $color-nisra-icon-secondary;
+    }
+    .st2 {
+      fill: $color-nisra-icon-tertiary;
+    }
+  }
+
+  &__logo-link:focus {
+    .ons-svg-logo {
+      fill: $color-black !important;
+      &--acent {
+        fill: $color-black !important;
+      }
+    }
+    .ons-nisra-svg-logo {
+      .st0 {
+        fill: $color-black !important;
+      }
+      .st1 {
+        fill: $color-black !important;
+      }
+      .st2 {
+        fill: $color-black !important;
+      }
+    }
+  }
+
+  .header__logo--large {
+    @include mq(xxs, 399px) {
+      display: none;
+    }
+  }
+
+  .header__logo--small {
+    @include mq(400px) {
+      display: none;
+    }
+  }
+
+  &__logo-link,
+  &__logo-link:hover {
+    text-decoration: none;
+  }
+
+  &__logo-link {
+    display: block;
+  }
+
   &__bottom {
     background: $color-header;
+    margin-top: -0.03rem;
+  }
+
+  .btn--exit {
+    margin-top: 0.55rem;
   }
 }
diff --git a/src/components/header/_macro-options.md b/src/components/header/_macro-options.md
@@ -1,21 +1,22 @@
-| Name          | Type                                              | Required                             | Description                                                                 |
-| ------------- | ------------------------------------------------- | ------------------------------------ | --------------------------------------------------------------------------- |
-| phase         | `PhaseBanner` [_(ref)_](/components/phase-banner) | false                                | Settings for the Phase banner component                                     |
-| fullWidth     | boolean                                           | false                                | Set the header to be the full width of the viewport                         |
-| logoHref      | string                                            | false                                | Path for the masthead logo link. Defaults to "/"                            |
-| logo          | string                                            | false                                | Path for the masthead logo. Defaults to "ons-logo-pos"                      |
-| mobileLogo    | string                                            | false                                | Path for the mobile version of the logo. Defaults to "ons-logo-stacked-pos" |
-| language      | `Language` [_(ref)_](/patterns/change-language)   | false                                | Settings for the language selector component                                |
-| serviceLinks  | `Array<Navigation>`                               | false                                | An array to render the service links list                                   |
-| title         | string                                            | true                                 | The title for the service                                                   |
-| desc          | string                                            | false                                | Tagline/description for the service                                         |
-| button        | `Button` [_(ref)_](/components/button)            | false                                | Settings for save and sign out using the button component                   |
-| navigation    | `Array<Navigation>`                               | true (if `toggleButton` supplied)    | An array of all navigation links                                            |
-| toggleButton  | `Array<ToggleButton>`                             | true (if `navigation` supplied)      | Configuration for the mobile navigation toggle button                       |
-| titleAsH1     | boolean                                           | false                                | Override to render the header title as a H1                                 |
-| titleLogo     | string                                            | false                                | URL for image to use instead of a title string                              |
-| titleLogoAlt  | string                                            | false (if `titleLogo` not specified) | Alt tag for the title logo                                                  |
-| titleLogoHref | string                                            | false                                | Will wrap the title logo in a link to the specified URL                     |
+| Name             | Type                                              | Required                             | Description                                                                              |
+| ---------------- | ------------------------------------------------- | ------------------------------------ | ---------------------------------------------------------------------------------------- |
+| phase            | `PhaseBanner` [_(ref)_](/components/phase-banner) | false                                | Settings for the Phase banner component                                                  |
+| fullWidth        | boolean                                           | false                                | Set the header to be the full width of the viewport                                      |
+| logoHref         | string                                            | false                                | Path for the masthead logo link. Defaults to "/"                                         |
+| logo             | string                                            | false                                | Path for the masthead logo. Defaults to "ons-logo-pos"                                   |
+| mobileLogo       | string                                            | false                                | Path for the mobile version of the logo. Defaults to "ons-logo-stacked-pos"              |
+| language         | `Language` [_(ref)_](/patterns/change-language)   | false                                | Settings for the language selector component                                             |
+| serviceLinks     | `Array<Navigation>`                               | false                                | An array to render the service links list                                                |
+| title            | string                                            | true                                 | The title for the service                                                                |
+| desc             | string                                            | false                                | Tagline/description for the service                                                      |
+| button           | `Button` [_(ref)_](/components/button)            | false                                | Settings for save and sign out using the button component                                |
+| navigation       | `Array<Navigation>`                               | true (if `toggleButton` supplied)    | An array of all navigation links                                                         |
+| toggleButton     | `Array<ToggleButton>`                             | true (if `navigation` supplied)      | Configuration for the mobile navigation toggle button                                    |
+| titleAsH1        | boolean                                           | false                                | Override to render the header title as a H1                                              |
+| titleLogo        | string                                            | false                                | URL for image to use instead of a title string                                           |
+| titleLogoAlt     | string                                            | false (if `titleLogo` not specified) | Alt tag for the title logo                                                               |
+| titleLogoHref    | string                                            | false                                | Will wrap the title logo in a link to the specified URL                                  |
+| customHeaderLogo | string                                            | false                                | Set to 'nisra' if using the nisra logo. Makes the masthead taller to accomodate the logo |
 
 ## Navigation