updated design for header search open/close button

alphagov · Sep 10, 2024 · 6cea2c8 · 6cea2c8
1 parent c5b94a8
commit 6cea2c8
Show file tree

Hide file tree

Showing 3 changed files with 60 additions and 10 deletions.
diff --git a/...s/stylesheets/govuk_publishing_components/components/_layout-super-navigation-header.scss b/...s/stylesheets/govuk_publishing_components/components/_layout-super-navigation-header.scss
@@ -613,7 +613,7 @@ $after-button-padding-left: govuk-spacing(4);
   padding: govuk-spacing(3);
   position: relative;
   width: $search-width-or-height;
-  @include govuk-font($size: 19, $weight: "bold", $line-height: 20px);
+  @include govuk-font($size: 16, $weight: "bold", $line-height: 20px);
 
   @include focus-and-focus-visible {
     @include govuk-focused-text;
@@ -741,10 +741,17 @@ $after-button-padding-left: govuk-spacing(4);
   top: 0;
 
   .gem-c-layout-super-navigation-header__open-button & {
-    display: block;
+    display: inline-block;
   }
 }
 
+.gem-c-layout-super-navigation-header__search-toggle-button--blue-background {
+  .gem-c-layout-super-navigation-header__navigation-top-toggle-close-icon {
+      color: $govuk-link-colour;
+    }
+}
+
+
 .gem-c-layout-super-navigation-header__search-container {
   padding-bottom: govuk-spacing(7);
 }
@@ -868,12 +875,49 @@ $after-button-padding-left: govuk-spacing(4);
   }
 }
 
-.gem-c-layout-super-navigation-header__search-toggle-button--large-navbar {
+.gem-c-layout-super-navigation-header__search-item {
+  .gem-c-layout-super-navigation-header__search-toggle-button-link-text-open {
+    display: inline;
+  }
+
+  .gem-c-layout-super-navigation-header__search-toggle-button-link-text-close {
+    display: none;
+  }
+
+  .gem-c-layout-super-navigation-header__open-button {
+    .gem-c-layout-super-navigation-header__search-toggle-button-link-text-open {
+      display: none;
+    }
+
+    .gem-c-layout-super-navigation-header__search-toggle-button-link-text-close {
+      display: inline;
+    }
+  }
+}
+
+.gem-c-layout-super-navigation-header__search-toggle-button {
   padding-left: 24px;
   padding-right: 24px;
-  width: 68px;
+  width: 130px;
+}
+
+.gem-c-layout-super-navigation-header__search-toggle-button-link-text-open,
+.gem-c-layout-super-navigation-header__search-toggle-button-link-text-close {
+  margin-left: govuk-spacing(1);
+  vertical-align: top;
 }
 
+.gem-c-layout-super-navigation-header__search-toggle-button-link-text-close {
+  color: $govuk-text-colour;
+}
+
+.gem-c-layout-super-navigation-header__search-toggle-button--blue-background {
+  .gem-c-layout-super-navigation-header__search-toggle-button-link-text-close {
+    color: $govuk-link-colour;
+  }
+}
+
+
 .gem-c-layout-super-navigation-header__navigation-second-item-description {
   font-size: 16px;
   font-size: govuk-px-to-rem(16px);
@@ -961,7 +1005,7 @@ $after-button-padding-left: govuk-spacing(4);
   .gem-c-layout-super-navigation-header__search-toggle-button--large-navbar {
     height: $large-navbar-height;
     // to stop the search icon moving on hover
-    padding-bottom: 12px;
+    padding-bottom: 6px;
   }
 
   .gem-c-layout-super-navigation-header__button-container--large-navbar {

diff --git a/app/views/govuk_publishing_components/components/_layout_super_navigation_header.html.erb b/app/views/govuk_publishing_components/components/_layout_super_navigation_header.html.erb
@@ -15,7 +15,8 @@
   navigation_menu_heading = t("components.layout_super_navigation_header.navigation_menu_heading")
   navigation_search_heading = t("components.layout_super_navigation_header.navigation_search_heading")
   navigation_search_subheading = t("components.layout_super_navigation_header.navigation_search_subheading")
-  search_text = t("components.layout_super_navigation_header.search_text")
+  search_text = t("components.layout_super_navigation_header.search_text_html")
+  close_text = t("components.layout_super_navigation_header.close_text")
 
   hide_search_menu_text = t("components.layout_super_navigation_header.menu_toggle_label.hide", :label => "search")
   show_search_menu_text = t("components.layout_super_navigation_header.menu_toggle_label.show", :label => "search")
@@ -196,21 +197,25 @@
               hidden: true,
               type: "button",
             }) do %>
-              <span class="govuk-visually-hidden">
-                <%= search_text %>
-              </span>
+
               <%=
                 render "govuk_publishing_components/components/search/search_icon", {
                   classes: %w[gem-c-layout-super-navigation-header__search-toggle-button-link-icon],
                 }
               %>
+              <span class="gem-c-layout-super-navigation-header__search-toggle-button-link-text-open">
+                <%= search_text %>
+              </span>
               <span
                 aria-hidden="true"
                 class="gem-c-layout-super-navigation-header__navigation-top-toggle-close-icon"
                 focusable="false"
               >
                 &times;
               </span>
+              <span class="gem-c-layout-super-navigation-header__search-toggle-button-link-text-close">
+                <%= close_text %>
+              </span>
             <% end %>
 
             <%= link_to "/search", {

diff --git a/config/locales/en.yml b/config/locales/en.yml
@@ -166,6 +166,7 @@ en:
       show_button: Show search
       top_level: Top level
     layout_super_navigation_header:
+      close_text: Close
       logo_link_title: Go to the GOV.UK homepage
       logo_text: GOV.UK
       menu_toggle_label:
@@ -234,7 +235,7 @@ en:
       navigation_menu_heading: Navigation menu
       navigation_search_heading: Search and popular pages
       navigation_search_subheading: Search
-      search_text: Search GOV.UK
+      search_text_html: Search <span class="govuk-visually-hidden">GOV.UK</span>
     metadata:
       from: From
       history: History