Census branded header (#420)

* Reduce width of ONS logo * Add min-height back to top logo * Added census logo * Updated census branding logo size and added documentation
ONSdigital · Jun 13, 2019 · d0c22a0 · d0c22a0
1 parent 5f85d09
commit d0c22a0
Show file tree

Hide file tree

Showing 13 changed files with 135 additions and 62 deletions.
diff --git a/src/components/header/_header.scss b/src/components/header/_header.scss
@@ -1,6 +1,3 @@
-$logo-aspect-ratio: 272 / 24;
-$header-logo-height: 1.333rem;
-
 // Block
 .header {
   display: block;
@@ -16,22 +13,19 @@ $header-logo-height: 1.333rem;
     background: $color-white;
   }
 
-  &__grid-top {
-    height: 50px;
-  }
-
   &--internal & {
     &__top {
       background: $color-dark-blue;
     }
   }
 
-  &__logo {
-    width: $header-logo-height * $logo-aspect-ratio;
+  &__grid-top {
+    min-height: 54px;
+  }
 
-    &--print {
-      display: none;
-    }
+  &__logo {
+    display: block;
+    width: 200px;
   }
 
   &__main {
@@ -83,24 +77,18 @@ $header-logo-height: 1.333rem;
 
   // Modifier - Thin variant
   &--thin & {
-    &__top {
-      padding: 0.5rem 0;
-    }
-
-    &__grid-top {
-      height: auto;
-    }
-
     &__main {
       padding: 0.5rem 0;
 
       @include mq(m) {
         padding: 0.8rem 0;
       }
     }
+  }
 
-    &__logo {
-      width: 200px;
+  &--internal & {
+    &__grid-top {
+      min-height: 36px;
     }
   }
 

diff --git a/src/components/header/_macro-options.md b/src/components/header/_macro-options.md
@@ -1,16 +1,19 @@
-| 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 logo link. Defaults to "/"                   |
-| logo         | string                                             | false    | Path for the logo. Defaults to "ons-logo-pos"             |
-| language     | `Language` [_(ref)_](/patterns/language-selection) | false    | Settings for the language selection 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>`                                | false    | An array to render the main navigation                    |
-| titleAsH1    | boolean                                            | false    | Override to render the header title as a H1               |
+| 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 logo link. Defaults to "/"                   |
+| logo          | string                                             | false                                | Path for the logo. Defaults to "ons-logo-pos"             |
+| language      | `Language` [_(ref)_](/patterns/language-selection) | false                                | Settings for the language selection 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>`                                | false                                | An array to render the main navigation                    |
+| 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   |
 
 ## Navigation
 

diff --git a/src/components/header/_macro.njk b/src/components/header/_macro.njk
@@ -16,14 +16,12 @@
           {{ onsPhaseBanner(params.phase) }}
       {% endif %}
       <div class="header__top" role="banner">
-          <div class=" container{{ ' container--full-width' if params.fullWidth }}">
+          <div class="container{{ ' container--full-width' if params.fullWidth }}">
               <div class="header__grid-top grid grid--gutterless grid--flex grid--between grid--vertical-center grid--no-wrap">
                   <div class="grid__col col-auto">
-                      <div class="logo">
-                          {% if params.logoHref %}<a href="{{ params.logoHref }}">{% endif %}
-                              <img src="{{ params.assetsURL if params.assetsURL }}/img/{{ params.logo | default('ons-logo-pos-' + currentLanguageISOCode ) }}.svg" alt="{{ params.logoAlt | default('Office for National Statistics logo') }}" class="logo__img header__logo">
-                          {% if params.logoHref %}</a>{% endif %}
-                      </div>
+                        {% if params.logoHref %}<a href="{{ params.logoHref }}">{% endif %}
+                            <img class="header__logo" src="{{ params.assetsURL if params.assetsURL }}/img/{{ params.logo | default('ons-logo-pos-' + currentLanguageISOCode ) }}.svg" alt="{{ params.logoAlt | default('Office for National Statistics logo') }}">
+                        {% if params.logoHref %}</a>{% endif %}
                   </div>
                   {% if params.language or params.serviceLinks %}
                       <div class="header__links grid__col col-auto">
@@ -62,7 +60,13 @@
           <div class="container{{ ' container--full-width' if params.fullWidth }}">
               <div class="grid grid--gutterless grid--flex grid--between grid--vertical-center grid--no-wrap">
                   <div class="grid__col col-auto u-flex-shrink">
-                      <{{ title_tag }} class="header__title">{{ params.title }}</{{ title_tag }}>
+                      {% if params.titleLogoHref %}<a href="{{ params.titleLogoHref }}">{% endif %}
+                      {% if params.titleLogo and params.titleLogoAlt %}
+                        <img class="header__title-logo" src="{{ params.assetsURL if params.assetsURL }}{{ params.titleLogo }}" alt="{{ params.titleLogoAlt }}">
+                      {% else %}
+                        <{{ title_tag }} class="header__title">{{ params.title }}</{{ title_tag }}>
+                      {% endif %}
+                      {% if params.titleLogoHref %}</a>{% endif %}
                       {% if params.desc %}
                           <p class="header__desc">{{ params.desc }}</p>
                       {% endif %}

diff --git a/src/components/header/examples/census-cy/index.njk b/src/components/header/examples/census-cy/index.njk
@@ -0,0 +1,37 @@
+---
+fullWidth: true
+layout: none
+---
+{% extends "styles/page-template/_template.njk" %}
+
+{% set page = {
+    "theme": "census",
+    "header": {
+        "logoHref": "#",
+        "titleLogo": "/img/census-logo-cy.svg",
+        "titleLogoAlt": "Cyfrifiad 2021"
+    },
+    "language": {
+        "allLanguagesUrl": "#",
+        "languages": [
+            {
+                "url": "#",
+                "ISOCode": "en",
+                "text": "English",
+                "buttonAriaLabel": "Language selector. Current language: English",
+                "chooseLanguage": "Choose language",
+                "allLanguages": "All languages",
+                "current": false
+            },
+            {
+                "url": "#",
+                "ISOCode": "cy",
+                "text": "Cymraeg",
+                "buttonAriaLabel": "Dewisydd iaith. Iaith gyfredol: Cymraeg",
+                "chooseLanguage": "Dewiswch iaith",
+                "allLanguages": "Pob iaith",
+                "current": true
+            }
+        ]
+    }
+} %}
diff --git a/src/components/header/examples/census/index.njk b/src/components/header/examples/census/index.njk
@@ -0,0 +1,37 @@
+---
+fullWidth: true
+layout: none
+---
+{% extends "styles/page-template/_template.njk" %}
+
+{% set page = {
+    "theme": "census",
+    "header": {
+        "logoHref": "#",
+        "titleLogo": "/img/census-logo-en.svg",
+        "titleLogoAlt": "Census 2021"
+    },
+    "language": {
+        "allLanguagesUrl": "#",
+        "languages": [
+            {
+                "url": "#",
+                "ISOCode": "en",
+                "text": "English",
+                "buttonAriaLabel": "Language selector. Current language: English",
+                "chooseLanguage": "Choose language",
+                "allLanguages": "All languages",
+                "current": true
+            },
+            {
+                "url": "#",
+                "ISOCode": "cy",
+                "text": "Cymraeg",
+                "buttonAriaLabel": "Dewisydd iaith. Iaith gyfredol: Cymraeg",
+                "chooseLanguage": "Dewiswch iaith",
+                "allLanguages": "Pob iaith",
+                "current": false
+            }
+        ]
+    }
+} %}
diff --git a/src/components/header/index.njk b/src/components/header/index.njk
@@ -70,6 +70,17 @@ An internal service uses the internal header variant with service links and a ma
     patternlibExample({ "path": "components/header/examples/external-welsh/index.njk" })
 }}
 
+### Census
+{{
+    patternlibExample({ "path": "components/header/examples/census/index.njk" })
+}}
+
+### Census Welsh
+{{
+    patternlibExample({ "path": "components/header/examples/census-cy/index.njk" })
+}}
+
+
 ## Research on this component
 {% from "components/panel/_macro.njk" import onsPanel %}
 {{ 

diff --git a/src/img/census-logo-cy.svg b/src/img/census-logo-cy.svg
diff --git a/src/img/census-logo-en.svg b/src/img/census-logo-en.svg
diff --git a/src/scss/settings/_census.scss b/src/scss/settings/_census.scss
@@ -1,3 +1,2 @@
 // Census brand
 $color-header: #93328e;
-$font-sans: 'arial';
diff --git a/src/scss/utilities/_grid.scss b/src/scss/utilities/_grid.scss
@@ -1,11 +1,5 @@
 .grid {
   box-sizing: border-box;
-  @if $grid-use-letter-spacing-hack {
-    letter-spacing: -0.32em;
-  } @else {
-    font-size: 0;
-  }
-
   margin-left: -$grid-gutters;
 }
 
@@ -129,13 +123,6 @@
   // Fixes text overflow issues
   min-width: 0;
 
-  @if $grid-use-letter-spacing-hack {
-    letter-spacing: normal;
-    word-spacing: normal;
-  } @else {
-    font-size: $base-font-size;
-  }
-
   padding-left: $grid-gutters;
   .grid--float & {
     float: left;

diff --git a/src/scss/vars/_grid.scss b/src/scss/vars/_grid.scss
@@ -13,5 +13,4 @@ $grid-cols: 12 !default;
 $grid-cols-mobile: 4 !default;
 $grid-gutters: 1rem !default;
 $grid-bp-fixed: map-get($grid-bp, m) !default;
-$grid-use-letter-spacing-hack: false;
 $grid-baseline: 16px;
diff --git a/src/styles/page-template/_template.njk b/src/styles/page-template/_template.njk
@@ -83,7 +83,10 @@
                                 "phase": page.phase,
                                 "assetsURL": assetsURL,
                                 "serviceLinks": page.serviceLinks,
-                                "logoHref": page.header.logoHref
+                                "logoHref": page.header.logoHref,
+                                "titleLogo": page.header.titleLogo,
+                                "titleLogoAlt": page.header.titleLogoAlt,
+                                "titleLogoHref": page.header.titleLogoHref
                             })
                         }}
                     {% endblock %}