Tidy up untranslated content and formatting on accordion docs

CHANGELOG.md

@@ -7,9 +7,14 @@
   useful summary for people upgrading their application, not a replication
   of the commit log.
 
+<<<<<<< HEAD
 ## 24.9.1
 
 * Change to the exceptions list for Brexit branding ([PR #2011](https://github.com/alphagov/govuk_publishing_components/pull/2011))
+=======
+## Unreleased
+* Tidy up untranslated content and formatting on accordion docs ([PR #1958](https://github.com/alphagov/govuk_publishing_components/pull/1958)) PATCH
+>>>>>>> Tidy up untranslated content and formatting on accordion docs
 
 ## 24.9.0
 

app/assets/javascripts/govuk_publishing_components/components/accordion.js

@@ -31,7 +31,16 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
     this.upChevonIconClass = 'gem-c-accordion-nav__chevron'
     this.downChevonIconClass = 'gem-c-accordion-nav__chevron--down'
 
-    // Indicate that js has worked
+    // Translated component content and language attribute pulled from data attributes
+    this.$module.actions = {}
+    this.$module.actions.locale = this.$module.getAttribute('data-locale')
+    this.$module.actions.showText = this.$module.getAttribute('data-show-text')
+    this.$module.actions.hideText = this.$module.getAttribute('data-hide-text')
+    this.$module.actions.showAllText = this.$module.getAttribute('data-show-all-text')
+    this.$module.actions.hideAllText = this.$module.getAttribute('data-hide-all-text')
+    this.$module.actions.thisSectionVisuallyHidden = this.$module.getAttribute('data-this-section-visually-hidden')
+
+    // Indicate that JavaScript has worked
     this.$module.classList.add('gem-c-accordion--active')
 
     this.initControls()
@@ -117,7 +126,11 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
     // Build additional copy for assistive technology
     var srAdditionalCopy = document.createElement('span')
     srAdditionalCopy.classList.add('govuk-visually-hidden')
-    srAdditionalCopy.innerHTML = ' this section'
+    srAdditionalCopy.innerHTML = this.$module.actions.thisSectionVisuallyHidden
+
+    if (this.$module.actions.locale) {
+      srAdditionalCopy.lang = this.filterLocale('this_section_visually_hidden')
+    }
 
     // Build additional wrapper for toggle text, place icon after wrapped text.
     var wrapperShowHideIcon = document.createElement('span')
@@ -178,12 +191,16 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
     var icon = section.querySelector('.' + this.upChevonIconClass)
     var showHideText = section.querySelector('.' + this.sectionShowHideTextClass)
     var button = section.querySelector('.' + this.sectionButtonClass)
-    var newButtonText = expanded ? 'Hide' : 'Show'
+    var newButtonText = expanded ? this.$module.actions.hideText : this.$module.actions.showText
 
     showHideText.innerHTML = newButtonText
     button.setAttribute('aria-expanded', expanded)
     button.classList.add(this.toggleLinkClass)
 
+    if (this.$module.actions.locale) {
+      showHideText.lang = this.filterLocale(expanded ? 'hide_text' : 'show_text')
+    }
+
     // Swap icon, change class
     if (expanded) {
       section.classList.add(this.sectionExpandedClass)
@@ -218,10 +235,15 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
   GemAccordion.prototype.updateOpenAllButton = function (expanded) {
     var icon = this.openAllButton.querySelector('.' + this.upChevonIconClass)
     var openAllCopy = this.openAllButton.querySelector('.' + this.openAllTextClass)
-    var newButtonText = expanded ? 'Hide all sections' : 'Show all sections'
+    var newButtonText = expanded ? this.$module.actions.hideAllText : this.$module.actions.showAllText
+
     this.openAllButton.setAttribute('aria-expanded', expanded)
     openAllCopy.innerHTML = newButtonText
 
+    if (this.$module.actions.locale) {
+      openAllCopy.lang = this.filterLocale(expanded ? 'hide_all_text' : 'show_all_text')
+    }
+
     // Swap icon, toggle class
     if (expanded) {
       icon.classList.remove(this.downChevonIconClass)
@@ -329,5 +351,14 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
     return target
   }
 
+  GemAccordion.prototype.filterLocale = function (key) {
+    if (this.$module.actions.locale && this.$module.actions.locale.indexOf('{') !== -1) {
+      var locales = JSON.parse(this.$module.actions.locale)
+      return locales[key]
+    } else if (this.$module.actions.locale) {
+      return this.$module.actions.locale
+    }
+  }
+
   Modules.GemAccordion = GemAccordion
 })(window.GOVUK.Modules)

app/views/govuk_publishing_components/component_guide/show.html.erb

@@ -24,7 +24,7 @@
           </div>
         </div>
       <% end %>
-      <p class="govuk-body"><%= link_to "Search for usage of this component on GitHub", @component_doc.github_search_url, class: "govuk-link" %></p>
+      <p class="govuk-body"><%= link_to "Search for usage of this component on GitHub", @component_doc.github_search_url, class: "govuk-link" %>.</p>
     </div>
   </div>
 

app/views/govuk_publishing_components/components/_accordion.html.erb

@@ -11,9 +11,34 @@
   accordion_classes << 'gem-c-accordion--condensed' if condensed
   accordion_classes << (shared_helper.get_margin_bottom)
 
+  translations = {
+    show_text: "components.accordion.show",
+    hide_text: "components.accordion.hide",
+    show_all_text: "components.accordion.show_all",
+    hide_all_text: "components.accordion.hide_all",
+    this_section_visually_hidden: "components.accordion.this_section_visually_hidden",
+  }
+
+  locales = {}
+
   data_attributes ||= {}
   data_attributes[:module] = 'gem-accordion'
   data_attributes[:anchor_navigation] = anchor_navigation
+
+  translations.each do |key, translation|
+    locales[key] = shared_helper.t_locale(translation)
+    data_attributes[key] = t(translation)
+  end
+
+  unique_locales = locales.values.uniq
+
+  if unique_locales.length > 1
+    data_attributes[:locale] = locales
+  else
+    if unique_locales[0] != I18n.locale
+      data_attributes[:locale] = unique_locales[0]
+    end
+  end
 %>
 <% if items.any? %>
   <%= tag.div(class: accordion_classes, id: id, data: data_attributes) do %>