Update header and phase banner styles to work with service header

- Makes header border full-width in all circumstances - Adds content width container to phase banner
alphagov · Apr 25, 2024 · 7f2352d · 7f2352d
1 parent 4a71eba
commit 7f2352d
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 13 deletions.
diff --git a/...es/govuk-frontend-review/src/views/full-page-examples/upload-your-photo-success/index.njk b/...es/govuk-frontend-review/src/views/full-page-examples/upload-your-photo-success/index.njk
@@ -24,18 +24,18 @@ scenario: |
 
 {% block header %}
   {{ govukHeader() }}
-  {{ govukServiceHeader({
-    serviceName: "Apply for a passport"
-  }) }}
-{% endblock %}
-
-{% block beforeContent %}
   {{ govukPhaseBanner({
     tag: {
       text: "Beta"
     },
     html: 'This is a new service – your <a class="govuk-link" href="#">feedback</a> will help us to improve it.'
   }) }}
+  {{ govukServiceHeader({
+    serviceName: "Apply for a passport"
+  }) }}
+{% endblock %}
+
+{% block beforeContent %}
   {{ govukBackLink({
     href: "/"
   }) }}

diff --git a/packages/govuk-frontend/src/govuk/components/header/_index.scss b/packages/govuk-frontend/src/govuk/components/header/_index.scss
@@ -16,14 +16,13 @@
   .govuk-header {
     @include govuk-font($size: 16, $line-height: 1);
 
-    border-bottom: govuk-spacing(2) solid govuk-colour("white");
+    border-bottom: govuk-spacing(2) solid $govuk-header-border-color;
     color: $govuk-header-text;
     background: $govuk-header-background;
   }
 
   .govuk-header__container--full-width {
     padding: 0 govuk-spacing(3);
-    border-color: $govuk-header-border-color;
 
     .govuk-header__menu-button {
       right: govuk-spacing(3);
@@ -33,9 +32,7 @@
   .govuk-header__container {
     @include govuk-clearfix;
     position: relative;
-    margin-bottom: -$govuk-header-border-width;
     padding-top: govuk-spacing($govuk-header-vertical-spacing-value);
-    border-bottom: $govuk-header-border-width solid $govuk-header-border-color;
   }
 
   .govuk-header__logotype {

diff --git a/packages/govuk-frontend/src/govuk/components/phase-banner/_index.scss b/packages/govuk-frontend/src/govuk/components/phase-banner/_index.scss
@@ -12,8 +12,9 @@
     @include govuk-font($size: 16);
     @include govuk-text-colour;
 
-    display: table;
-    margin: 0;
+    display: flex;
+    margin-top: 0;
+    margin-bottom: 0;
   }
 
   .govuk-phase-banner__content__tag {

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-phase-banner__content">
+  <p class="govuk-width-container govuk-phase-banner__content">
     {{ govukTag({
       text: params.tag.text,
       html: params.tag.html,