Masthead: Enable insertion of phase banner and/or breadcrumbs

x-govuk/components/masthead/README.md

@@ -9,6 +9,15 @@ This component may be useful if you are prototyping product or marketing pages.
 ```njk
 {{ xGovukMasthead({
   classes: "x-govuk-masthead--large",
+  phaseBanner: {
+    text: "This is a new service"
+  },
+  breadcrumbs: {
+    items: [{
+      href: "/",
+      text: "Home"
+    }]
+  },
   title: {
     text: "Design your service using GOV.UK styles, components and patterns"
   },
@@ -40,6 +49,9 @@ If you’re using Nunjucks macros in production with `html` options, or ones end
 | **description** | object | Description text shown in the masthead. See [description](#options-for-description). |
 | **startButton** | object | Options for start button. See [startButton](#options-for-startButton). |
 | **image** | object | Options for image displayed on the right of the masthead on desktop layouts. See [image](#options-for-image). |
+| **phaseBanner** | object | Options for the phase banner component. See [phase banner component](https://design-system.service.gov.uk/components/phase-banner/) in the GOV.UK Design System. |
+| **breadcrumbs** | object | Options for the breadcrumbs component. See [breadcrumbs component](https://design-system.service.gov.uk/components/breadcrumbs/) in the GOV.UK Design System. |
+| **caller** | nunjucks-block | Not strictly a parameter but [Nunjucks code convention](https://mozilla.github.io/nunjucks/templating.html#call). Using a `call` block enables you to call a macro with all the text inside the tag. This is helpful if you want to pass a lot of content into a macro. To use it, you will need to wrap the entire masthead component in a `call` block. Content called this way appears between the breadcrumbs (if present) and the title. |
 
 ### Options for title
 

x-govuk/components/masthead/_breadcrumbs.scss

@@ -0,0 +1,15 @@
+.x-govuk-breadcrumbs--inverse {
+  @include govuk-responsive-padding(3, "bottom");
+  @include govuk-responsive-padding(4, "top");
+  border-bottom: 1px solid $x-govuk-masthead-border-colour;
+  color: $x-govuk-masthead-colour;
+  margin-top: 0;
+
+  .govuk-breadcrumbs__list-item:before {
+    border-color: $x-govuk-masthead-colour;
+  }
+
+  .govuk-breadcrumbs__link:not(:focus) {
+    color: inherit;
+  }
+}

x-govuk/components/masthead/_button.scss

@@ -1,19 +1,19 @@
 $x-govuk-button-shadow-size: $govuk-border-width-form-element;
-$x-govuk-button-inverse-background-colour: govuk-colour("white");
-$x-govuk-button-inverse-foreground-colour: $govuk-brand-colour;
-$x-govuk-button-inverse-shadow-colour: govuk-shade($x-govuk-button-inverse-foreground-colour, 30%);
-$x-govuk-button-inverse-hover-background-colour: govuk-tint($x-govuk-button-inverse-foreground-colour, 90%);
+$x-govuk-button-inverse-shadow-colour: govuk-shade($x-govuk-masthead-background-colour, 30%);
+$x-govuk-button-inverse-hover-background-colour: govuk-tint($x-govuk-masthead-background-colour, 90%);
 
 .x-govuk-button--inverse,
 .x-govuk-button--inverse:link,
 .x-govuk-button--inverse:visited {
-  color: $x-govuk-button-inverse-foreground-colour;
-  background-color: $x-govuk-button-inverse-background-colour;
+  @include govuk-responsive-margin(6, "top");
+  color: $x-govuk-masthead-background-colour;
+  background-color: $x-govuk-masthead-colour;
   box-shadow: 0 $x-govuk-button-shadow-size 0 $x-govuk-button-inverse-shadow-colour;
+  margin-bottom: 0;
 }
 
 .x-govuk-button--inverse:hover {
-  color: $x-govuk-button-inverse-foreground-colour;
+  color: $x-govuk-masthead-background-colour;
   background-color: $x-govuk-button-inverse-hover-background-colour;
 }
 
@@ -25,7 +25,7 @@ $x-govuk-button-inverse-hover-background-colour: govuk-tint($x-govuk-button-inve
 .x-govuk-button--inverse:active,
 .x-govuk-button--inverse:focus {
   border-color: $govuk-focus-colour;
-  color: $x-govuk-button-inverse-foreground-colour;
+  color: $x-govuk-masthead-background-colour;
   background-color: $x-govuk-button-inverse-hover-background-colour;
   box-shadow: inset 0 0 0 2px $govuk-focus-colour;
 }

x-govuk/components/masthead/_masthead.scss

@@ -1,30 +1,39 @@
+$x-govuk-masthead-background-colour: $govuk-brand-colour;
+$x-govuk-masthead-colour: govuk-colour("white");
+$x-govuk-masthead-border-colour: govuk-colour("light-blue");
+
+@import "./breadcrumbs";
 @import "./button";
+@import "./phase-banner";
+@import "./tag";
 
 .x-govuk-masthead {
-  @include govuk-responsive-margin(6, "bottom");
-  @include govuk-responsive-padding(6, "top");
   @include govuk-responsive-padding(6, "bottom");
-  color: govuk-colour("white");
-  background-color: $govuk-brand-colour;
+  padding-top: 0;
+  color: $x-govuk-masthead-colour;
+  background-color: $x-govuk-masthead-background-colour;
   margin-top: govuk-spacing(-2);
-
-  a:not(:focus) {
-    color: inherit;
-  }
 }
 
 .x-govuk-masthead__title {
   @include govuk-font($size: 36, $weight: bold);
+  @include govuk-responsive-padding(6, "top");
   margin-top: 0;
 }
 
 .x-govuk-masthead__description {
   @include govuk-font($size: 19);
   color: inherit;
   margin-bottom: 0;
+
+  a:not(:focus) {
+    color: inherit;
+  }
 }
 
 .x-govuk-masthead__image {
+  @include govuk-responsive-padding(6, "top");
+
   img {
     max-width: 100%;
   }

x-govuk/components/masthead/_phase-banner.scss

@@ -0,0 +1,7 @@
+.x-govuk-phase-banner--inverse {
+  border-bottom-color: $x-govuk-masthead-border-colour;
+
+  .govuk-phase-banner__content {
+    color: $x-govuk-masthead-colour;
+  }
+}

x-govuk/components/masthead/_tag.scss

@@ -0,0 +1,4 @@
+.x-govuk-tag--inverse {
+  color: $x-govuk-masthead-background-colour;
+  background-color: $x-govuk-masthead-colour;
+}

x-govuk/components/masthead/template.njk

@@ -1,7 +1,26 @@
+{% from "govuk/components/breadcrumbs/macro.njk" import govukBreadcrumbs %}
 {% from "govuk/components/button/macro.njk" import govukButton %}
+{% from "govuk/components/phase-banner/macro.njk" import govukPhaseBanner %}
+
 <div class="x-govuk-masthead{%- if params.classes %} {{ params.classes }}{% endif -%}"
   {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
   <div class="govuk-width-container">
+    {{ govukPhaseBanner({
+      classes: "x-govuk-phase-banner--inverse" + (" " + params.phaseBanner.classes if params.phaseBanner.classes),
+      html: params.phaseBanner.html,
+      text: params.phaseBanner.text,
+      tag: {
+        classes: "x-govuk-tag--inverse" + (" " + params.phaseBanner.tag.classes if params.phaseBanner.tag.classes),
+        text: params.phaseBanner.tag.text or "Alpha"
+      },
+      attributes: params.phaseBanner.attributes
+    }) if params.phaseBanner }}
+    {{ govukBreadcrumbs({
+      classes: "x-govuk-breadcrumbs--inverse" + (" " + params.breadcrumbs.classes if params.breadcrumbs.classes),
+      items: params.breadcrumbs.items,
+      collapseOnMobile: params.breadcrumbs.collapseOnMobile,
+      attributes: params.breadcrumbs.attributes
+    }) if params.breadcrumbs }}
     {{- caller() if caller -}}
     <div class="govuk-grid-row">
       <div class="govuk-grid-column-two-thirds-from-desktop">
@@ -17,7 +36,7 @@
       {% endif %}
       {% if params.startButton %}
         {{ govukButton({
-          classes: "x-govuk-button--inverse govuk-!-margin-top-6 govuk-!-margin-bottom-0" + (" " + params.startButton.classes if params.startButton.classes),
+          classes: "x-govuk-button--inverse" + (" " + params.startButton.classes if params.startButton.classes),
           text: params.startButton.text | default("Get started"),
           href: params.startButton.href,
           isStartButton: true,