Merge pull request #5394 from alphagov/generic-header

Add generic header component page

Author: owenatgov

src/components/generic-header/default/index.njk

@@ -0,0 +1,25 @@
+---
+title: Generic header
+layout: layout-example.njk
+includeFrontend: false
+stylesheets:
+- ../../../stylesheets/example-without-transport-font.css
+---
+
+{% from "govuk/components/generic-header/macro.njk" import govukGenericHeader %}
+
+{% set logoContent %}
+<svg width="28" height="30" viewBox="0 0 28 30" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+  <circle cx="13.5549" cy="4.21349" r="4.21349"/>
+  <circle cx="13.5549" cy="25.7865" r="4.21349"/>
+  <circle cx="22.8963" cy="9.6068" r="4.21349"/>
+  <circle cx="4.2135" cy="20.3932" r="4.21349"/>
+  <circle cx="22.8963" cy="20.3932" r="4.21349"/>
+  <circle cx="4.21351" cy="9.60674" r="4.21349"/>
+</svg> Service name
+{% endset %}
+
+{{ govukGenericHeader({
+  url: "#",
+  logoHtml: logoContent
+}) }}

src/components/generic-header/index.md

@@ -0,0 +1,75 @@
+---
+title: Generic header
+description: A generic header to help services not on GOV.UK
+section: Components
+aliases: Header (generic)
+backlogIssueId: 185
+layout: layout-pane.njk
+---
+
+{% from "_example.njk" import example %}
+
+Use this generic version of the header to tell users they’re using a government service that’s not part of the GOV.UK website.
+
+{{ example({ group: "components", item: "generic-header", example: "default", id: "default-1", html: true, nunjucks: true, open: false, loading: "eager" }) }}
+
+## When to use this component
+
+Use the Generic header component if your service is both:
+
+- a public-facing government service
+- not on the GOV.UK website (meaning that your service is not part of the [GOV.UK proposition](https://www.gov.uk/government/publications/govuk-proposition/govuk-proposition))
+
+This is to bring consistency and maintain user trust in journeys that move between the GOV.UK website and other government websites and services.
+
+This component also helps ensure your non-GOV.UK service does not:
+
+- identify itself as being part of GOV.UK
+- use the crown or GOV.UK logotype in the header
+- use the GDS Transport typeface
+- use the [GOV.UK brand colours](https://brand.design-system.service.gov.uk/colour/govuk-blue/)
+
+See the guidance on [if your service is not on GOV.UK in the Service manual](https://www.gov.uk/service-manual/design/making-your-service-look-like-govuk).
+
+## When not to use this component
+
+If your service is hosted on one of these gov.uk domains, you must use the [GOV.UK header component](/components/header/) instead:
+
+- gov.uk/[myservice]
+- [myservice].service.gov.uk
+- [myblog].blog.gov.uk
+
+## How it works
+
+If you use the [page template](/styles/page-template/), you’ll first need to replace the default GOV.UK header in the page template with the Generic header component.
+
+Use the Generic header component to display your own:
+
+- brand logo
+- homepage link
+- font for your service name (instead of GDS Transport)
+
+You must also follow the steps in the [Using GOV.UK Frontend without GOV.UK branding guidance](https://frontend.design-system.service.gov.uk/using-govuk-frontend-without-govuk-branding/) to remove other GOV.UK brand elements elsewhere in your service.
+
+### Using your own brand logo
+
+Follow your organisation’s guidelines and best practice to show your brand logo.
+
+To make your logo image as accessible and optimised as possible, also see:
+
+- Design System guidance on [using images](/styles/images/)
+- [Image guidance for GOV.UK content and publishers](https://guidance.publishing.service.gov.uk/formatting-content/images/)
+
+### Homepage link
+
+By default, the Generic header component links to `/`, which is the top level of your service’s domain. You should customise the link to point to wherever makes the most sense for your service.
+
+### Do not show service name or navigation links in the Generic header component
+
+As with the GOV.UK header component, you should not use the Generic header component to show service name or navigation links. Use the [Service navigation component](/components/service-navigation) instead.
+
+## Research on this component
+
+When developing this component, we worked with a cross-government working group representing various government departments that work on services not hosted on GOV.UK.
+
+We thank them for their work to gather the needs and considerations for consistent headers across all government services.

src/components/header/index.md

@@ -23,13 +23,15 @@ If your service is being hosted on one of these domains, use the GOV.UK header c
 - [myservice].service.gov.uk
 - [myblog].blog.gov.uk
 
-You must use the GOV.UK header component at the top of every page. The Service Manual explains why it’s important for you to [make your service look like GOV.UK](https://www.gov.uk/service-manual/design/making-your-service-look-like-govuk).
+You must use the GOV.UK header component at the top of every page. This is to maintain user trust as they move around the GOV.UK website and other government websites and services.
+
+The Service Manual explains why it’s important for you to [make your service look like GOV.UK](https://www.gov.uk/service-manual/design/making-your-service-look-like-govuk).
 
 ## When not to use this component
 
 If your service is not hosted on one of the gov.uk domains outlined, you must not use the GOV.UK header component as it’s not considered part of GOV.UK.
 
-You can still build from this component, but you’ll need to [make some changes to make sure users do not confuse your website with GOV.UK](https://www.gov.uk/service-manual/design/making-your-service-look-like-govuk#if-your-service-isnt-on-govuk).
+Use the [Generic header component](/components/generic-header/) instead to show your own organisation’s branding.
 
 ## How it works
 

src/styles/typeface/index.md

@@ -12,7 +12,7 @@ If your service is on the service.gov.uk subdomain you must use the GDS Transpor
 
 ## When not to use the GDS Transport font
 
-If your service is publicly available on a subdomain other than service.gov.uk, use an alternative typeface like Helvetica or Arial.
+If your service is publicly available on a subdomain other than service.gov.uk, use an alternative typeface. Read our guidance on [Using GOV.UK Frontend without GOV.UK branding](https://frontend.design-system.service.gov.uk/using-govuk-frontend-without-govuk-branding/) for how to change your service’s font to a similar typeface.
 
 If you’re not sure whether you should use GDS Transport, do one of the following:
 

src/stylesheets/example-without-transport-font.scss

@@ -0,0 +1,11 @@
+// Imports frontend without the Transport font
+// Used by Generic header component examples
+
+@use "pkg:govuk-frontend" with (
+  $govuk-font-family: (
+    "Helvetica Neue",
+    helvetica,
+    arial,
+    sans-serif
+  )
+);

views/layouts/layout-example.njk

@@ -12,7 +12,9 @@
   <meta name="og:description" content="{{ description | smartypants }}">
   <link rel="canonical" href="{{ canonical }}">
 
-  <link href="{{ getFingerprint('/stylesheets/govuk-frontend.min.css') }}" rel="stylesheet" media="all">
+  {% if includeFrontend != false %}
+    <link href="{{ getFingerprint('/stylesheets/govuk-frontend.min.css') }}" rel="stylesheet" media="all">
+  {% endif %}
   <link href="{{ getFingerprint('/stylesheets/example.css') }}" rel="stylesheet" media="all">
   {#- Include any additional stylesheets specified in the example frontmatter #}
   {% for stylesheet in stylesheets %}