[refs #206] Transactional header with service name

Add styles for a transactional header with a service name and update
the nunjucks macro to pass through parameters for the service name and
href. Create an example page.

docs/components/header-transactional-service-name.njk

@@ -0,0 +1,39 @@
+{% set html_style = 'background-color: #f0f4f5;' %}
+{% set title = 'Header transactional with service name' %}
+{% from 'components/header/macro.njk' import header %}
+{% extends 'layout.njk' %}
+
+{% block body %}
+
+  {{ header({
+      "service": {
+        "name": "Find out why your NHS data matters"
+      },
+      "showNav": "false",
+      "showSearch": "false",
+      "primaryLinks": [
+        {
+          "url"  : "https://www.nhs.uk/conditions",
+          "label" : "Health A-Z"
+        },
+        {
+          'url' : 'https://www.nhs.uk/live-well/',
+          'label' : 'Live Well'
+        },
+        {
+          'url'  : 'https://www.nhs.uk/conditions/social-care-and-support/',
+          'label' : 'Care and support'
+        },
+        {
+          'url'  : 'https://www.nhs.uk/news/',
+          'label' : 'Health news'
+        },
+        {
+          'url' : 'https://www.nhs.uk/service-search',
+          'label' : 'Services near you'
+        }
+      ]
+    })
+  }}
+
+{% endblock %}

docs/pages/examples.njk

@@ -24,15 +24,15 @@
     <li><a href="../components/action-link.html">Action link</a></li>
     <li><a href="../components/back-link/index.html">Back link</a></li>
     <li><a href="../components/breadcrumb.html">Breadcrumb</a></li>
-    <li><a href="../components/care-card-non-urgent.html">Care card non-urgent (blue)</a></li>
-    <li><a href="../components/care-card-urgent.html">Care card urgent (red)</a></li>
-    <li><a href="../components/care-card-emergency.html">Care card emergency (red and black)</a></li>
     <li><a href="../components/button/index.html">Button</a></li>
     <li><a href="../components/button/disabled.html">Button disabled</a></li>
     <li><a href="../components/button/secondary.html">Button secondary</a></li>
     <li><a href="../components/button/secondary-disabled.html">Button secondary disabled</a></li>
     <li><a href="../components/button/reverse.html">Button reverse</a></li>
     <li><a href="../components/button/reverse-disabled.html">Button reverse disabled</a></li>
+    <li><a href="../components/care-card-non-urgent.html">Care card non-urgent (blue)</a></li>
+    <li><a href="../components/care-card-urgent.html">Care card urgent (red)</a></li>
+    <li><a href="../components/care-card-emergency.html">Care card emergency (red and black)</a></li>
     <li><a href="../components/checkboxes/index.html">Checkboxes</a></li>
     <li><a href="../components/checkboxes/hint.html">Checkboxes with hint text</a></li>
     <li><a href="../components/checkboxes/disabled.html">Checkboxes with disabled item</a></li>
@@ -56,6 +56,7 @@
     <li><a href="../components/footer.html">Footer</a></li>
     <li><a href="../components/header.html">Header</a></li>
     <li><a href="../components/header-transactional.html">Header transactional</a></li>
+    <li><a href="../components/header-transactional-service-name.html">Header transactional with service name</a></li>
     <li><a href="../components/header-navigation.html">Header with navigation</a></li>
     <li><a href="../components/header-search.html">Header with search</a></li>
     <li><a href="../components/hero.html">Hero</a></li>

packages/components/header/_header.scss

@@ -89,8 +89,31 @@
 
 }
 
+/* Transactional Header with service name */
+
+.nhsuk-header__service-name {
+  float: left;
+  padding-top: 25px;
+
+  @include mq($until: tablet) {
+    padding-bottom: nhsuk-spacing(3);
+    padding-left: nhsuk-spacing(3);
+    padding-top: 0;
+    width: 100%;
+  }
+
+}
+
+.nhsuk-header__service-name--link {
+  @include nhsuk-link-style-white;
+  @include nhsuk-font(19);
+
+  text-decoration: none;
+}
+
 .nhsuk-header__search {
   @include clearfix();
+
   position: relative;
   text-align: right;
 
@@ -102,7 +125,6 @@
 }
 
 .nhsuk-header__search-toggle {
-
   @include toggle-button();
 
   min-height: 40px; /* [2] */

packages/components/header/template.njk

@@ -1,11 +1,16 @@
 <header class="nhsuk-header" role="banner">
   <div class="nhsuk-width-container nhsuk-header__container">
     <div class="nhsuk-header__logo">
-      <a href="/" class="nhsuk-header__link" aria-label="NHS homepage">
+      <a href="{% if params.href %}{{ params.href }}{% else %}/{% endif %}" class="nhsuk-header__link" aria-label="NHS homepage">
         {% include 'assets/logos/logo-nhs.svg' %}
       </a>
     </div>
   {% if params.showNav == "false" and params.showSearch == "false" %}
+    {% if params.service %}
+    <div class="nhsuk-header__service-name">
+      <a href="{% if params.service.href %}{{ params.service.href }}{% else %}/{% endif %}" class="nhsuk-header__service-name--link">{{ params.service.name }}</a>
+    </div>
+    {% endif %}
   </div>
   {% endif %}