Merge pull request #807 from alphagov/add-default-container-to-header

Add default container to header
alphagov · Jun 20, 2018 · ede9ab5 · ede9ab5
2 parents 9e14d51 + 3ae63b7
commit ede9ab5
Show file tree

Hide file tree

Showing 7 changed files with 28 additions and 43 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -8,6 +8,8 @@ Note: We're not following semantic versioning yet, we are going to talk about th
 
 - Add default text for back-link component
   ([PR #793](https://github.com/alphagov/govuk-frontend/pull/793))
+- Add default container class to the header component
+  ([PR #807](https://github.com/alphagov/govuk-frontend/pull/807))
 
 🏠 Internal:
 
@@ -16,7 +18,7 @@ Note: We're not following semantic versioning yet, we are going to talk about th
 
 - Update docs with the assistive technology we support ([PR #800](https://github.com/alphagov/govuk-frontend/pull/800))
 
-- Update docs about installing fonts ([PR #802]     (https://github.com/alphagov/govuk-frontend/pull/802))
+- Update docs about installing fonts ([PR #802](https://github.com/alphagov/govuk-frontend/pull/802))
 
 - Update browser support matrix
   Remove Windows Phone

diff --git a/app/views/examples/template-custom/index.njk b/app/views/examples/template-custom/index.njk
@@ -53,8 +53,6 @@
 {% block header %}
   <!-- block:header -->
   {{ govukHeader({
-    homepageUrl: "/",
-    containerClasses: "govuk-width-container",
     serviceName: "Nom du service",
     navigation: [
       {

diff --git a/src/components/header/README.md b/src/components/header/README.md
@@ -55,10 +55,7 @@ Find out when to use the Header component in your service in the [GOV.UK Design
 
     {% from 'header/macro.njk' import govukHeader %}
 
-    {{ govukHeader({
-      "homepageUrl": "/",
-      "containerClasses": "govuk-width-container"
-    }) }}
+    {{ govukHeader({}) }}
 
 ### Header--with-service-name
 
@@ -110,10 +107,8 @@ Find out when to use the Header component in your service in the [GOV.UK Design
     {% from 'header/macro.njk' import govukHeader %}
 
     {{ govukHeader({
-      "homepageUrl": "/",
       "serviceName": "Service Name",
-      "serviceUrl": "/components/header",
-      "containerClasses": "govuk-width-container"
+      "serviceUrl": "/components/header"
     }) }}
 
 ### Header--with-navigation
@@ -193,8 +188,6 @@ Find out when to use the Header component in your service in the [GOV.UK Design
     {% from 'header/macro.njk' import govukHeader %}
 
     {{ govukHeader({
-      "homepageUrl": "/",
-      "containerClasses": "govuk-width-container",
       "navigation": [
         {
           "href": "#1",
@@ -297,10 +290,8 @@ Find out when to use the Header component in your service in the [GOV.UK Design
     {% from 'header/macro.njk' import govukHeader %}
 
     {{ govukHeader({
-      "homepageUrl": "/",
       "serviceName": "Service Name",
       "serviceUrl": "/components/header",
-      "containerClasses": "govuk-width-container",
       "navigation": [
         {
           "href": "#1",

diff --git a/src/components/header/_header.scss b/src/components/header/_header.scss
@@ -24,9 +24,13 @@
 
   }
 
-  .govuk-header--full-width {
+  .govuk-header__container--full-width {
     padding: 0 govuk-spacing(3);
     border-color: $govuk-header-border-color;
+
+    .govuk-header__menu-button {
+      right: govuk-spacing(3);
+    }
   }
 
   .govuk-header__container {
@@ -175,23 +179,26 @@
     list-style: none;
   }
 
-  .js-enabled .govuk-header__menu-button {
-    display: block;
-    @include mq ($from: desktop) {
+  .js-enabled {
+    .govuk-header__menu-button {
+      display: block;
+      @include mq ($from: desktop) {
+        display: none;
+      }
+    }
+
+    .govuk-header__navigation {
       display: none;
+      @include mq ($from: desktop) {
+        display: block;
+      }
     }
-  }
 
-  .js-enabled .govuk-header__navigation {
-    display: none;
-    @include mq ($from: desktop) {
+    .govuk-header__navigation--open {
       display: block;
     }
   }
 
-  .js-enabled .govuk-header__navigation--open {
-    display: block;
-  }
 
   .govuk-header__navigation--end {
     @include mq ($from: desktop) {

diff --git a/src/components/header/header.yaml b/src/components/header/header.yaml
@@ -22,21 +22,16 @@ examples:
 - name: default
   description: The standard header as used on information pages on GOV.UK
   data:
-    homepageUrl: /
-    containerClasses: govuk-width-container
+    {}
 
 - name: with-service-name
   description: If your service is more than a few pages long, you can help users understand where they are by adding the service name.
   data:
-    homepageUrl: /
     serviceName: Service Name
     serviceUrl: /components/header
-    containerClasses: govuk-width-container
 
 - name: with-navigation
   data:
-    homepageUrl: /
-    containerClasses: govuk-width-container
     navigation:
       - href: '#1'
         text: 'Navigation item 1'
@@ -51,10 +46,8 @@ examples:
 - name: with-service-name-and-navigation
   description: If you need to include basic navigation, contact or account management links.
   data:
-    homepageUrl: /
     serviceName: Service Name
     serviceUrl: /components/header
-    containerClasses: govuk-width-container
     navigation:
       - href: '#1'
         text: 'Navigation item 1'
@@ -70,8 +63,6 @@ examples:
   readme: false
   description: An edge case example with a large number of navitation items with long names used to test wrapping
   data:
-    homepageUrl: /
-    containerClasses: govuk-width-container
     navigation:
       - href: '/browse/benefits'
         text: 'Benefits'
@@ -109,16 +100,14 @@ examples:
 - name: full-width
   readme: false
   data:
-    homepageUrl: /
-    classes: govuk-header--full-width
+    containerClasses: govuk-header__container--full-width
     navigationClasses: govuk-header__navigation--end
     productName: Product Name
 
 - name: full-width-with-navigation
   readme: false
   data:
-    homepageUrl: /
-    classes: govuk-header--full-width
+    containerClasses: govuk-header__container--full-width
     navigationClasses: govuk-header__navigation--end
     productName: Product Name
     navigation:

diff --git a/src/components/header/template.njk b/src/components/header/template.njk
@@ -1,6 +1,6 @@
 <header class="govuk-header {{ params.classes if params.classes }}" role="banner" data-module="header"
         {%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}>
-  <div class="govuk-header__container {{ params.containerClasses if params.containerClasses }}">
+  <div class="govuk-header__container {{ params.containerClasses | default('govuk-width-container') }}">
 
     <div class="govuk-header__logo">
       <a href="{{ params.homepageUrl | default('/') }}" class="govuk-header__link govuk-header__link--homepage">

diff --git a/src/template.njk b/src/template.njk
@@ -35,9 +35,7 @@
     {% endblock %}
 
     {% block header %}
-      {{ govukHeader({
-          containerClasses: 'govuk-width-container'
-      }) }}
+      {{ govukHeader({}) }}
     {% endblock %}
 
     {% block main %}