Change how phase banner styles are applied

alphagov · Apr 29, 2024 · db7625e · db7625e
1 parent f2b5d17
commit db7625e
Show file tree

Hide file tree

Showing 5 changed files with 41 additions and 9 deletions.
diff --git a/packages/govuk-frontend-review/src/views/examples/template-custom/index.njk b/packages/govuk-frontend-review/src/views/examples/template-custom/index.njk
@@ -14,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 %}

diff --git a/packages/govuk-frontend/src/govuk/components/phase-banner/_index.scss b/packages/govuk-frontend/src/govuk/components/phase-banner/_index.scss
@@ -13,8 +13,8 @@
     @include govuk-text-colour;
 
     display: flex;
-    margin-top: 0;
-    margin-bottom: 0;
+    align-items: baseline;
+    margin: 0;
   }
 
   .govuk-phase-banner__content__tag {
@@ -40,4 +40,11 @@
     display: table-cell;
     vertical-align: middle;
   }
+
+  // Teams can optionally decide to put the phase banner into the header
+  // instead. In that scenario, we need to apply some different styles to
+  // control the element's width.
+  .govuk-template__header .govuk-phase-banner__content {
+    @include govuk-width-container;
+  }
 }
diff --git a/packages/govuk-frontend/src/govuk/components/phase-banner/template.njk b/packages/govuk-frontend/src/govuk/components/phase-banner/template.njk
@@ -4,7 +4,7 @@
 <div class="govuk-phase-banner
   {%- if params.classes %} {{ params.classes }}{% endif %}"
   {{- govukAttributes(params.attributes) }}>
-  <p class="govuk-width-container govuk-phase-banner__content">
+  <p class="govuk-phase-banner__content">
     {{ govukTag({
       text: params.tag.text,
       html: params.tag.html,

diff --git a/packages/govuk-frontend/src/govuk/template.njk b/packages/govuk-frontend/src/govuk/template.njk
@@ -36,11 +36,13 @@
       }) }}
     {% endblock %}
 
-    <header>
-    {% block header %}
-      {{ govukHeader({}) }}
+    {% block headerContainer %}
+      <header class="govuk-template__header {%- if headerClasses %} {{ headerClasses }}{% endif %}">
+        {% block header %}
+          {{ govukHeader({}) }}
+        {% endblock %}
+      </header>
     {% endblock %}
-    </header>
 
     {% block main %}
       <div class="govuk-width-container {%- if containerClasses %} {{ containerClasses }}{% endif %}">

diff --git a/packages/govuk-frontend/src/govuk/template.test.js b/packages/govuk-frontend/src/govuk/template.test.js
@@ -331,15 +331,37 @@ describe('Template', () => {
       })
     })
 
-    describe('header', () => {
-      it('can be overridden using the header block', () => {
+    describe('<header>', () => {
+      it('can have custom classes added using headerClasses', () => {
+        const $ = renderTemplate('govuk/template.njk', {
+          context: {
+            headerClasses: 'custom-header-class'
+          }
+        })
+
+        expect($('header').hasClass('custom-header-class')).toBeTruthy()
+      })
+
+      it('can be overridden using the headerContainer block', () => {
+        const $ = renderTemplate('govuk/template.njk', {
+          blocks: {
+            headerContainer: '<div class="my-header">header</div>'
+          }
+        })
+
+        expect($('.my-header')).toHaveLength(1)
+        expect($('.govuk-template__header')).toHaveLength(0)
+      })
+
+      it('content can be overridden using the header block', () => {
         const $ = renderTemplate('govuk/template.njk', {
           blocks: {
             header: '<div class="my-header">header</div>'
           }
         })
 
         expect($('.my-header')).toHaveLength(1)
+        expect($('.govuk-template__header')).toHaveLength(1)
         expect($('.govuk-header')).toHaveLength(0)
       })
     })