Combine service and transactionalService header options and remove he…

…ader layout switches
nhsuk · Aug 23, 2024 · 364e92e · 364e92e
1 parent 2e93f62
commit 364e92e
Show file tree

Hide file tree

Showing 12 changed files with 236 additions and 576 deletions.
diff --git a/...der/header-transactional-service-name.njk → ...nents/header/header-service-name-long.njk b/...der/header-transactional-service-name.njk → ...nents/header/header-service-name-long.njk
@@ -1,13 +1,13 @@
 {% set html_style = 'background-color: #f0f4f5;' %}
-{% set title = 'Header transactional with service name' %}
+{% set title = 'Header transactional with a long service name' %}
 {% from 'components/header/macro.njk' import header %}
 {% extends 'layout.njk' %}
 
 {% block body %}
 
   {{ header({
-      "transactionalService": {
-        "name": "Find your NHS number"
+      "service": {
+        "name": "Find your really long service name in England"
       },
       "showNav": "false",
       "showSearch": "false"

diff --git a/app/components/header/header-service-name-with-nav.njk b/app/components/header/header-service-name-with-nav.njk
@@ -7,7 +7,7 @@
 
   {{ header({
     "service": {
-      "name": "Digital service manual"
+      "name": "Find your really long service name in England"
     },
     "showNav": "true",
     "showSearch": "true",

diff --git a/app/pages/examples.njk b/app/pages/examples.njk
@@ -79,8 +79,8 @@
     <li><a href="../components/header/header-search.html">Header with search</a></li>
     <li><a href="../components/header/header-logo.html">Header with logo only</a></li>
     <li><a href="../components/header/header-service-name.html">Header with a service name</a></li>
+    <li><a href="../components/header/header-service-name-long.html">Header with a long service name</a></li>
     <li><a href="../components/header/header-service-name-with-nav.html">Header with a service name, search and navigation</a></li>
-    <li><a href="../components/header/header-transactional-service-name.html">Header transactional with service name</a></li>
     <li><a href="../components/header/header-org.html">Header organisational</a></li>
     <li><a href="../components/header/header-org-white.html">Header organisational with white header</a></li>
     <li><a href="../components/header/header-org-white-nav.html">Header organisational with white header and navigation</a></li>

diff --git a/packages/components/header/README.md b/packages/components/header/README.md
diff --git a/packages/components/header/_header-organisation.scss b/packages/components/header/_header-organisation.scss
@@ -1,45 +1,15 @@
 /**
-    * These are the styles for the organisation header variants.
-*/
+ * Organisation header variant.
+ */
 
 .nhsuk-header--organisation {
-  .nhsuk-header__link {
-    height: auto;
-    text-decoration: none;
-    width: auto;
-
-    &:hover {
-      color: $color_nhsuk-white;
-      text-decoration: underline;
-
-      .nhsuk-logo {
-        box-shadow: none;
-      }
-    }
-
-    &:focus {
-      background: $nhsuk-focus-color;
-      box-shadow:
-        0 0 0 $nhsuk-focus-width $nhsuk-focus-color,
-        0 $nhsuk-focus-width 0 $nhsuk-focus-width $nhsuk-focus-text-color;
-
-      .nhsuk-organisation-name,
-      .nhsuk-organisation-descriptor {
-        color: $nhsuk-focus-text-color;
-      }
-
-      .nhsuk-logo {
-        box-shadow: none;
-      }
-
-      &:hover {
-        text-decoration: none;
-      }
-    }
+  .nhsuk-header__link:hover {
+    box-shadow: none;
   }
 
-  .nhsuk-header__logo .nhsuk-logo {
+  .nhsuk-logo {
     @include nhsuk-logo-size-small;
+    display: inline-block;
 
     @media (max-width: 450px) {
       height: nhsuk-spacing(4);
@@ -58,7 +28,6 @@
 }
 
 .nhsuk-organisation-name {
-  color: $color_nhsuk-white;
   display: block;
   font-size: 22px;
   font-weight: bold;
@@ -87,7 +56,6 @@
 }
 
 .nhsuk-organisation-descriptor {
-  color: $color_nhsuk-white;
   display: block;
   font-size: 15px;
   font-weight: bold;

diff --git a/packages/components/header/_header-service.scss b/packages/components/header/_header-service.scss
diff --git a/packages/components/header/_header-transactional.scss b/packages/components/header/_header-transactional.scss
diff --git a/packages/components/header/_header-white.scss b/packages/components/header/_header-white.scss
@@ -1,45 +1,49 @@
 /**
-    * These are the styles for the white header variants.
-*/
+ * White header variant.
+ */
 
 .nhsuk-header--white {
   background-color: $color_nhsuk-white;
 
-  .nhsuk-header__search-wrap {
-    margin-bottom: nhsuk-spacing(3);
+  .nhsuk-header__link {
+    @include nhsuk-link-style-no-visited-state;
 
-    @include mq($until: tablet) {
-      &::after {
-        background: $color_nhsuk-white;
+    &:focus {
+      .nhsuk-logo,
+      .nhsuk-organisation-descriptor {
+        color: inherit;
       }
     }
-  }
 
-  .nhsuk-navigation-container {
-    background-color: $color_nhsuk-blue;
-  }
+    &:hover {
+      color: $nhsuk-text-color;
 
-  .nhsuk-logo {
-    .nhsuk-logo__background {
-      fill: $color_nhsuk-blue;
+      .nhsuk-organisation-descriptor {
+        color: $nhsuk-text-color;
+      }
     }
+  }
 
-    .nhsuk-logo__text {
-      fill: $color_nhsuk-white;
-    }
+  .nhsuk-logo {
+    color: $color_nhsuk-blue;
   }
 
-  .nhsuk-header__link {
-    &:hover {
-      color: $nhsuk-text-color;
-      text-decoration: underline;
+  .nhsuk-organisation-name {
+    color: $color_nhsuk-black;
+  }
 
-      .nhsuk-organisation-descriptor {
-        color: $nhsuk-text-color;
+  .nhsuk-header__search-wrap {
+    @include mq($until: tablet) {
+      &::after {
+        background-color: $color_nhsuk-white;
       }
     }
   }
 
+  .nhsuk-navigation-container {
+    background-color: $color_nhsuk-blue;
+  }
+
   .nhsuk-search__submit {
     background-color: $color_nhsuk-blue;
 
@@ -62,49 +66,28 @@
   }
 
   .nhsuk-search__input {
-    border: 1px solid $color_nhsuk-grey-3;
+    border-color: $color_nhsuk-grey-3;
 
     &:focus {
-      border: 2px solid $nhsuk-focus-text-color;
+      border-color: $nhsuk-focus-text-color;
 
       @include mq($until: tablet) {
-        border: $nhsuk-focus-width solid $nhsuk-focus-text-color;
+        border-color: $nhsuk-focus-text-color;
       }
     }
   }
-
-  .nhsuk-header__search-form {
-    @include mq($until: tablet) {
-      padding-top: 0;
-    }
-  }
-
-  .nhsuk-organisation-name {
-    color: shade($color_nhsuk-black, 100%);
-  }
-
-  .nhsuk-organisation-descriptor {
-    color: $color_nhsuk-blue;
-  }
-
-  .nhsuk-header__transactional-service-name--link {
-    color: $color_nhsuk-black;
-  }
-
-  .nhsuk-header__service-name {
-    color: $nhsuk-text-color;
-  }
 }
 
 .nhsuk-header--white-nav {
   .nhsuk-navigation-container {
     background-color: $color_nhsuk-white;
   }
+
   .nhsuk-navigation {
     background-color: $color_nhsuk-white;
 
     .nhsuk-header__navigation-list {
-      border-top: 1px solid $color_nhsuk-grey-5;
+      border-top-color: $color_nhsuk-grey-5;
     }
 
     .nhsuk-header__navigation-link {