[SPIKE] Service Header component

packages/govuk-frontend-review/src/views/examples/navigation-examples/index.njk

@@ -0,0 +1,79 @@
+{% from "govuk/components/back-link/macro.njk" import govukBackLink %}
+{% from "govuk/components/header/macro.njk" import govukHeader %}
+{% from "govuk/components/service-header/macro.njk" import govukServiceHeader %}
+
+{% extends "layouts/full-width-landmarks.njk" %}
+
+{% block pageTitle %}{{ exampleName | unslugify }} - GOV.UK Frontend{% endblock %}
+
+{% block head %}
+  {{ super() }}
+  <style>
+  .app-example { margin-bottom: 40px; }
+  </style>
+{% endblock %}
+
+{% block beforeContent %}
+  {{ govukBackLink({
+    href: "/"
+  }) }}
+{% endblock %}
+
+{% block content %}
+
+<h1 class="govuk-width-container govuk-heading-l">Navigation examples</h1>
+
+<h2 class="govuk-width-container govuk-heading-m">Header component examples</h2>
+
+<h3 class="govuk-width-container govuk-heading-s">Header (default)</h3>
+<div class="app-example">
+  {{ govukHeader() }}
+</div>
+
+<h3 class="govuk-width-container govuk-heading-s">Header with One Login links</h3>
+<div class="app-example">
+  {{ govukHeader({ oneLogin: true }) }}
+</div>
+
+<h2 class="govuk-width-container govuk-heading-m">Service Header component examples</h2>
+
+<h3 class="govuk-width-container govuk-heading-s">Header with Service Header</h3>
+<div class="app-example">
+  {{ govukHeader() }}
+  {{ govukServiceHeader({
+    serviceName: "Service name"
+  }) }}
+</div>
+
+<h3 class="govuk-width-container govuk-heading-s">Service Header with navigation</h3>
+<div class="app-example">
+  {{ govukHeader() }}
+  {{ govukServiceHeader({
+    navigationId: "service-header-with-navigation",
+    navigation: [
+      { href: '#/1', text: "Navigation item 1" },
+      { href: '#/2', text: "Navigation item 2", active: true },
+      { href: '#/3', text: "Navigation item 3" },
+      { href: '#/4', text: "Navigation item 4" }
+    ]
+  }) }}
+</div>
+
+<h3 class="govuk-width-container govuk-heading-s">Service Header with service name and navigation</h3>
+<div class="app-example">
+  {{ govukHeader() }}
+  {{ govukServiceHeader({
+    serviceName: "Service name",
+    serviceUrl: "#/",
+    navigationId: "service-header-with-name-and-navigation",
+    navigation: [
+      { href: '#/1', text: "Navigation item 1" },
+      { href: '#/2', text: "Navigation item 2", active: true },
+      { href: '#/3', text: "Navigation item 3" },
+      { href: '#/4', text: "Navigation item 4" }
+    ]
+  }) }}
+</div>
+
+
+{% endblock %}

packages/govuk-frontend-review/src/views/examples/template-custom/index.njk

@@ -5,6 +5,7 @@
 {% from "govuk/components/header/macro.njk" import govukHeader %}
 {% from "govuk/components/phase-banner/macro.njk" import govukPhaseBanner %}
 {% from "govuk/components/footer/macro.njk" import govukFooter %}
+{% from "govuk/components/service-header/macro.njk" import govukServiceHeader %}
 
 {% extends "govuk/template.njk" %}
 
@@ -13,6 +14,7 @@
 {% set assetPath = '' %}
 {% set themeColor = 'blue' %}
 {% set bodyClasses = 'app-body-class' %}
+{% set headerClasses = 'app-header-class' %}
 {% set containerClasses = "app-width-container--wide" %}
 
 {% block pageTitle %}GOV.UK - Le meilleur endroit pour trouver des services gouvernementaux et de l'information{% endblock %}
@@ -46,8 +48,18 @@
 {% block header %}
   <!-- block:header -->
   {{ govukHeader({
+    containerClasses: "app-width-container--wide"
+  }) }}
+
+  {{ govukPhaseBanner({
+    tag: {
+      text: "Alpha"
+    },
+    html: 'C\'est un nouveau service - vos <a class="govuk-link" href="#">commentaires</a> nous aideront à l\'améliorer.'
+  }) }}
+
+  {{ govukServiceHeader({
     serviceName: "Nom du service",
-    containerClasses: "app-width-container--wide",
     navigation: [
       {
         href: '#1',
@@ -77,12 +89,6 @@
 
 {% block beforeContent %}
   <!-- block:beforeContent -->
-  {{ govukPhaseBanner({
-    tag: {
-      text: "Alpha"
-    },
-    html: 'C\'est un nouveau service - vos <a class="govuk-link" href="#">commentaires</a> nous aideront à l\'améliorer.'
-  }) }}
   {{ govukBackLink({
     href: "/"
   }) }}

packages/govuk-frontend-review/src/views/full-page-examples/announcements/index.njk

@@ -7,12 +7,14 @@ notes: Based on https://www.gov.uk/government/news/strictly-vampires-and-sausage
 
 {% from "govuk/components/breadcrumbs/macro.njk" import govukBreadcrumbs %}
 {% from "govuk/components/inset-text/macro.njk" import govukInsetText %}
+{% from "govuk/components/service-header/macro.njk" import govukServiceHeader %}
 
 {% set pageTitle = example.title %}
 {% block pageTitle %}{{ pageTitle }} - GOV.UK{% endblock %}
 
 {% block header %}
-{{ govukHeader({
+{{ govukHeader() }}
+{{ govukServiceHeader({
   navigation: [
     {
       href: "#1",

packages/govuk-frontend-review/src/views/full-page-examples/check-your-answers/index.njk

@@ -17,12 +17,14 @@ notes: The links to change your answers are not functional.
 {% from "govuk/components/back-link/macro.njk" import govukBackLink %}
 {% from "govuk/components/summary-list/macro.njk" import govukSummaryList %}
 {% from "govuk/components/button/macro.njk" import govukButton %}
+{% from "govuk/components/service-header/macro.njk" import govukServiceHeader %}
 
 {% set pageTitle = example.title %}
 {% block pageTitle %}{{ pageTitle }} - GOV.UK{% endblock %}
 
 {% block header %}
-  {{ govukHeader({
+  {{ govukHeader() }}
+  {{ govukServiceHeader({
     serviceName: "Temporary events notice"
   }) }}
 {% endblock %}

packages/govuk-frontend-review/src/views/full-page-examples/child-maintenance/index.njk

@@ -41,14 +41,17 @@ scenario: |
   }) }}
 {% endblock %}
 
-{% block beforeContent %}
+{% block header %}
+  {{ super() }}
   {{ govukPhaseBanner({
     tag: {
       text: "Beta"
     },
     html: 'This is a new service – your <a class="govuk-link" href="#">feedback</a> will help us to improve it.'
   }) }}
+{% endblock %}
 
+{% block beforeContent %}
   {{ govukBreadcrumbs({
     classes: "",
     collapseOnMobile: true,