Add I18n to search in component and layout header

alphagov · Mar 9, 2021 · 7355a0a · 7355a0a
1 parent f252a07
commit 7355a0a
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 8 deletions.
diff --git a/app/assets/javascripts/govuk_publishing_components/lib/header-navigation.js b/app/assets/javascripts/govuk_publishing_components/lib/header-navigation.js
@@ -1,3 +1,5 @@
+/* eslint-disable no-var */
+
 // used by the header navigation from govuk_template
 
 (function () {
@@ -14,6 +16,8 @@
         var targetClass = target.getAttribute('class') || ''
         var sourceClass = this.getAttribute('class') || ''
         var isSearchToggle = sourceClass.match('search-toggle')
+        var showText = this.getAttribute('data-show-text') || 'Show search'
+        var hideText = this.getAttribute('data-hide-text') || 'Hide search'
 
         if (targetClass.indexOf('js-visible') !== -1) {
           target.setAttribute('class', targetClass.replace(/(^|\s)js-visible(\s|$)/, ''))
@@ -23,12 +27,12 @@
         if (sourceClass.indexOf('js-visible') !== -1) {
           this.setAttribute('class', sourceClass.replace(/(^|\s)js-visible(\s|$)/, ''))
           if (isSearchToggle) {
-            this.innerText = 'Show search'
+            this.innerText = showText
           }
         } else {
           this.setAttribute('class', sourceClass + ' js-visible')
           if (isSearchToggle) {
-            this.innerText = 'Hide search'
+            this.innerText = hideText
           }
         }
         this.setAttribute('aria-expanded', this.getAttribute('aria-expanded') !== 'true')

diff --git a/app/views/govuk_publishing_components/components/_search.html.erb b/app/views/govuk_publishing_components/components/_search.html.erb
@@ -2,9 +2,9 @@
   shared_helper = GovukPublishingComponents::Presenters::SharedHelper.new(local_assigns)
 
   aria_controls ||= nil
-  button_text ||= "Search"
+  button_text ||= t("components.search_box.search_button")
   id ||= "search-main-" + SecureRandom.hex(4)
-  label_text ||= "Search on GOV.UK"
+  label_text ||= t("components.search_box.label")
   name ||= "q"
   no_border ||= false
   size ||= ""
@@ -35,7 +35,7 @@
       class: "gem-c-search__item gem-c-search__input js-class-toggle",
       id: id,
       name: name,
-      title: "Search",
+      title: t("components.search_box.input_title"),
       type: "search",
       value: value,
     ) %>

diff --git a/app/views/govuk_publishing_components/components/layout_header/_search.html.erb b/app/views/govuk_publishing_components/components/layout_header/_search.html.erb
@@ -1,5 +1,10 @@
-<button class="search-toggle js-header-toggle" data-search-toggle-for="search">
-  Show search
+<button
+  class="search-toggle js-header-toggle"
+  data-search-toggle-for="search"
+  data-show-text="<%= t("components.layout_header.show_button") %>"
+  data-hide-text="<%= t("components.layout_header.hide_button") %>"
+>
+  <%= t("components.layout_header.show_button") %>
 </button>
 <form
   action="/search"
@@ -9,7 +14,7 @@
   role="search"
 >
   <%= render "govuk_publishing_components/components/search", {
-    button_text: "Search GOV.UK",
+    button_text: t("components.layout_header.search_button"),
     id: "site-search-text",
     margin_bottom: 0,
     no_border: true,

diff --git a/config/locales/en.yml b/config/locales/en.yml
@@ -54,6 +54,10 @@ en:
       what_wrong: "What went wrong?"
       send_me_survey: "Send me the survey"
       send: "Send"
+    layout_header:
+      search_button: "Search GOV.UK"
+      show_button: "Show search"
+      hide_button: "Hide search"
     organisation_schema:
       all_content_search_description: "Find all content from %{organisation}"
     radio:
@@ -85,6 +89,10 @@ en:
       policies: "Policies"
       statistical_data_sets: "Statistical data sets"
       topical_events: "Topical events"
+    search_box:
+      search_button: "Search"
+      label: "Search on GOV.UK"
+      input_title: "Search"
     show_password:
       show: Show
       hide: Hide