Add Generic Header component

packages/govuk-frontend-review/src/routes/full-page-examples.puppeteer.test.mjs

@@ -28,8 +28,11 @@ describe('Full page examples', () => {
       const $title = await page.$('title')
       const titleText = await getProperty($title, 'textContent')
 
-      // Check for matching title
-      expect(titleText).toBe(`${example.title} - GOV.UK`)
+      if (exampleName === 'non-govuk-service') {
+        expect(titleText).toBe(`${example.title}`)
+      } else {
+        expect(titleText).toBe(`${example.title} - GOV.UK`)
+      }
     }
   })
 })

packages/govuk-frontend-review/src/stylesheets/app.scss

@@ -6,5 +6,6 @@
 @use "partials/component-preview";
 @use "partials/feature-flag-banner";
 @use "partials/links";
+@use "partials/non-govuk-service";
 @use "partials/organisation-swatch";
 @use "partials/prose";

packages/govuk-frontend-review/src/stylesheets/partials/_non-govuk-service.scss

@@ -0,0 +1,7 @@
+@use "pkg:govuk-frontend/base" as *;
+
+// Resets the brand colour to our palette red.
+// Used by the "non-GOV.UK service" full page example.
+.app-template--unbranded {
+  --govuk-brand-colour: #{govuk-colour("red")};
+}

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

@@ -0,0 +1,62 @@
+---
+title: HM Pizza Finder
+name: non-GOV.UK service
+scenario: You want to sign in to the HM Pizza Finder service
+---
+
+{% extends "layouts/full-page-example.njk" %}
+
+{% from "govuk/components/generic-header/macro.njk" import govukGenericHeader %}
+{% from "govuk/components/phase-banner/macro.njk" import govukPhaseBanner %}
+{% from "govuk/components/button/macro.njk" import govukButton %}
+
+{% set htmlClasses = "app-template--unbranded" %}
+
+{% block pageTitle %}HM Pizza Finder{% endblock %}
+
+{% set logoContent %}
+<svg width="28" height="30" viewBox="0 0 28 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <circle cx="13.5549" cy="4.21349" r="4.21349" fill="white"/>
+  <circle cx="13.5549" cy="25.7865" r="4.21349" fill="white"/>
+  <circle cx="22.8963" cy="9.6068" r="4.21349" transform="rotate(90 22.8963 9.6068)" fill="white"/>
+  <circle cx="4.2135" cy="20.3932" r="4.21349" transform="rotate(90 4.2135 20.3932)" fill="white"/>
+  <circle cx="22.8963" cy="20.3932" r="4.21349" transform="rotate(90 22.8963 20.3932)" fill="white"/>
+  <circle cx="4.21351" cy="9.60674" r="4.21349" transform="rotate(90 4.21351 9.60674)" fill="white"/>
+</svg> | HM Pizza Finder service
+{% endset %}
+
+{% block govukHeader %}
+{{ govukGenericHeader({
+  url: "#",
+  logoHtml: logoContent
+}) }}
+{% endblock %}
+
+{% block headerEnd %}
+{{ govukPhaseBanner({
+  tag: {
+    text: 'Beta'
+  },
+  html: 'This is a new service'
+}) }}
+{% endblock %}
+
+{% block content %}
+
+<h1 class="govuk-heading-xl">Welcome to the HM Pizza Finder service (HMPF)</h1>
+
+<h2 class="govuk-heading-l">Sign in to HMPF online services</h2>
+
+<p class="govuk-body">When logged in you can:</p>
+<ul class="govuk-list govuk-list--bullet">
+  <li>find a nearby pizza</li>
+  <li>register a pizza</li>
+  <li>manage a pizza</li>
+  <li>locate an existing pizza</li>
+</ul>
+
+{{ govukButton({
+  text: "Sign in",
+  href: "#"
+}) }}
+{% endblock %}

packages/govuk-frontend/src/govuk-prototype-kit/govuk-prototype-kit.config.unit.test.mjs

@@ -104,6 +104,10 @@ describe('GOV.UK Prototype Kit config', () => {
           importFrom: 'govuk/components/footer/macro.njk',
           macroName: 'govukFooter'
         },
+        {
+          importFrom: 'govuk/components/generic-header/macro.njk',
+          macroName: 'govukGenericHeader'
+        },
         {
           importFrom: 'govuk/components/header/macro.njk',
           macroName: 'govukHeader'

packages/govuk-frontend/src/govuk/components/_index.import.scss

@@ -13,6 +13,7 @@
 @import "fieldset";
 @import "file-upload";
 @import "footer";
+@import "generic-header";
 @import "header";
 @import "hint";
 @import "input";

packages/govuk-frontend/src/govuk/components/_index.scss

@@ -13,6 +13,7 @@
 @use "fieldset";
 @use "file-upload";
 @use "footer";
+@use "generic-header";
 @use "header";
 @use "hint";
 @use "input";

packages/govuk-frontend/src/govuk/components/generic-header/README.md

@@ -0,0 +1,15 @@
+# Generic Header
+
+## Installation
+
+See the [main README quick start guide](https://github.com/alphagov/govuk-frontend#quick-start) for how to install this component.
+
+## Guidance and Examples
+
+Find out when to use the header component in your service in the [GOV.UK Design System](https://design-system.service.gov.uk/components/generic-header).
+
+## Component options
+
+Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.
+
+See [options table](https://design-system.service.gov.uk/components/generic-header/#options-generic-header-example) for details.

packages/govuk-frontend/src/govuk/components/generic-header/_generic-header.import.scss

@@ -0,0 +1,5 @@
+@use "../../settings/warnings--internal";
+
+@include warnings--internal.component-scss-file-warning("generic-header");
+
+@import "index";

packages/govuk-frontend/src/govuk/components/generic-header/_index.import.scss

@@ -0,0 +1,7 @@
+@use "mixin";
+
+@import "../../base";
+
+@include govuk-exports("govuk/component/generic-header") {
+  @include mixin.styles;
+}

packages/govuk-frontend/src/govuk/components/generic-header/_index.scss

@@ -0,0 +1,4 @@
+@use "../../custom-properties";
+@use "mixin";
+
+@include mixin.styles;

packages/govuk-frontend/src/govuk/components/generic-header/_mixin.scss

@@ -0,0 +1,129 @@
+////
+/// @group components/generic-header
+////
+
+@use "../../base";
+
+/// Width of transparent bottom border of header.
+/// Set to provide a visual border in forced colour modes
+///
+/// @type Number
+/// @access private
+$header-transparent-border-width: 1px !default;
+
+/// Shared block header styles, with automatic background setting
+///
+/// @param {String} $background - background colour of header
+/// @access private
+@mixin header-styles($background: base.govuk-colour("black")) {
+  @include base.govuk-font($size: 16, $line-height: 1);
+
+  // Add a transparent bottom border for forced-colour modes
+  border-bottom: $header-transparent-border-width solid transparent;
+  color: base.govuk-colour("white");
+  background: $background;
+
+  @media print {
+    border-bottom-width: 0;
+    color: base.govuk-colour("black");
+    background: transparent;
+  }
+}
+
+/// Shared header logo container element styles, with automating padding setting
+///
+/// @param {String} $padding-top - top padding of logo container
+/// @param {String} $padding-bottom - bottom padding of logo container
+/// @access private
+@mixin header-logo-styles(
+  $padding-top: (
+    base.govuk-spacing(3)
+  ),
+  $padding-bottom: (
+    base.govuk-spacing(3)
+  )
+) {
+  box-sizing: border-box;
+  padding-top: $padding-top;
+  padding-bottom: $padding-bottom;
+}
+
+/// Shared header logo link element styles
+///
+/// @access private
+@mixin header-link-styles {
+  // Avoid using the `base.govuk-link-common` mixin because the links in the
+  // header get a special treatment, because:
+  //
+  // - underlines are only visible on hover
+  // - all links get a 3px underline regardless of text size, as there are
+  //   multiple grouped elements close to one another and having slightly
+  //   different underline widths looks unbalanced
+  //
+  // Font size needs to be set on the link so that the box sizing is correct
+  // in Firefox
+  display: inline;
+  margin-right: base.govuk-spacing(2);
+  font-size: 30px; // We don't have a mixin that produces 30px font size
+  text-decoration: none;
+
+  @include base.govuk-link-style-inverse;
+
+  &:link,
+  &:visited {
+    text-decoration: none;
+  }
+
+  &:hover,
+  &:active {
+    // Negate the added border
+    $link-underline-thickness: 3px;
+    margin-bottom: $link-underline-thickness * -1;
+    border-bottom: $link-underline-thickness solid;
+  }
+
+  &:focus {
+    // Remove any borders that show when focused and hovered.
+    margin-bottom: 0;
+    border-bottom: 0;
+
+    @include base.govuk-focused-text;
+  }
+
+  @media print {
+    &:link,
+    &:visited {
+      color: base.govuk-colour("black");
+    }
+
+    // Do not append link href to GOV.UK link when printing (e.g. '(/)')
+    &::after {
+      display: none;
+    }
+  }
+}
+
+/// @access private
+@mixin styles {
+  .govuk-generic-header {
+    @include header-styles;
+  }
+
+  .govuk-generic-header__container--full-width {
+    padding: 0 base.govuk-spacing(3);
+  }
+
+  .govuk-generic-header__logo {
+    @include header-logo-styles;
+
+    // Automatically centre align child elements to help users with positioning
+    // their logo assets eg: as `svg`s or `img`s
+    * {
+      vertical-align: center;
+    }
+  }
+
+  .govuk-generic-header__homepage-link {
+    @include header-link-styles;
+  }
+}

packages/govuk-frontend/src/govuk/components/generic-header/accessibility.puppeteer.test.mjs

@@ -0,0 +1,15 @@
+import { axe, render } from '@govuk-frontend/helpers/puppeteer'
+import { getExamples } from '@govuk-frontend/lib/components'
+
+describe('/components/generic-header', () => {
+  describe('component examples', () => {
+    it('passes accessibility tests', async () => {
+      const examples = await getExamples('generic-header')
+
+      for (const exampleName in examples) {
+        await render(page, 'generic-header', examples[exampleName])
+        await expect(axe(page)).resolves.toHaveNoViolations()
+      }
+    }, 120000)
+  })
+})