Merge pull request #417 from alphagov/create-translation-component

Create translation navigation component

app/assets/stylesheets/application.scss

@@ -11,7 +11,6 @@
 @import 'mixins/white-links';
 
 // helpers for common page elements
-@import 'helpers/available-languages';
 @import 'helpers/back-to-content';
 @import 'helpers/contents-list';
 @import 'helpers/sidebar-with-body';
@@ -57,3 +56,4 @@
 @import 'components/lead-paragraph';
 @import 'components/subscription-links';
 @import 'components/heading';
+@import 'components/translation-nav';

app/assets/stylesheets/components/_translation-nav.scss

@@ -0,0 +1,35 @@
+.app-c-translation-nav {
+  margin-bottom: $gutter;
+  border-bottom: 1px solid $border-colour;
+  @include responsive-top-margin;
+  @include core-16;
+}
+
+.app-c-translation-nav__list {
+  @extend %contain-floats;
+  list-style: none;
+  margin-left: -$gutter-one-third;
+  margin-right: -$gutter-one-third;
+}
+
+.app-c-translation-nav__list__language {
+  float: left;
+  padding-left: $gutter-one-third;
+  padding-right: $gutter-one-third;
+  margin-bottom: $gutter-one-third;
+  border-right: 1px solid $border-colour;
+  height: 16px;
+
+  .direction-rtl & {
+    direction: rtl;
+    float: right;
+    text-align: start;
+    border-left: 1px solid $border-colour;
+    border-right: 0;
+  }
+}
+
+.app-c-translation-nav__list__language:last-child {
+  border-right: 0;
+  border-left: 0;
+}

app/presenters/content_item_presenter.rb

@@ -31,8 +31,9 @@ def requesting_a_part?
   end
 
   def available_translations
-    return [] if @content_item["links"]["available_translations"].nil?
-    sorted_locales(@content_item["links"]["available_translations"])
+    translations = @content_item["links"]["available_translations"] || []
+
+    mapped_locales(sorted_locales(translations))
   end
 
   def parent
@@ -71,7 +72,23 @@ def sorted_locales(translations)
     translations.sort_by { |t| t["locale"] == I18n.default_locale.to_s ? '' : t["locale"] }
   end
 
+  def mapped_locales(translations)
+    translations.map do |translation|
+      {
+        locale: translation["locale"],
+        base_path: translation["base_path"],
+        text: native_language_name_for(translation["locale"])
+      }.tap do |h|
+        h[:active] = true if h[:locale] == I18n.locale.to_s
+      end
+    end
+  end
+
   def text_direction
     I18n.t("i18n.direction", locale: I18n.locale, default: "ltr")
   end
+
+  def native_language_name_for(locale)
+    I18n.t("language_names.#{locale}", locale: locale)
+  end
 end

app/views/components/_translation-nav.html.erb

@@ -0,0 +1,13 @@
+<div class="app-c-translation-nav">
+  <ul class="app-c-translation-nav__list">
+    <% translations.each.with_index do |translation, i| %>
+      <li class="app-c-translation-nav__list__language">
+        <% if translation[:active] %>
+          <%= translation[:text] %>
+        <% else %>
+          <%= link_to translation[:text], translation[:base_path], lang: translation[:locale], rel: "alternate" %>
+        <% end %>
+      </li>
+    <% end %>
+  </ul>
+</div>

app/views/components/docs/translation-nav.yml

@@ -0,0 +1,45 @@
+name: Translation Nav
+description: A navigation item for available language translations.
+body: The active property should be used to indicate the currently selected language.
+accessibility_criteria: |
+  The translation nav must:
+
+  - accept focus
+  - be focusable with a keyboard
+  - indicate when it has focus
+  - be usable with a keyboard
+  - inform the user of the language option, if the user has that language installed
+fixtures:
+  # TODO: We need to add a fixture to show component rendering right-to-left.
+  # This is dependant on being able to provide context to fixtures.
+  default:
+    translations:
+    - locale: 'en'
+      base_path: '/en'
+      text: 'English'
+      active: true
+    - locale: 'hi'
+      base_path: '/hi'
+      text: 'हिंदी'
+  multiple_translations:
+    translations:
+    - locale: 'en'
+      base_path: '/en'
+      text: 'English'
+      active: true
+    - locale: 'fr'
+      base_path: '/fr'
+      text: 'French'
+    - locale: 'hi'
+      base_path: '/hi'
+      text: 'हिंदी'
+    - locale: 'ja'
+      base_path: '/ja'
+      text: '日本語'
+    - locale: 'ur'
+      base_path: '/ur'
+      text: 'اردو'
+    - locale: 'zh'
+      base_path: '/zh'
+      text: '中文'
+

app/views/content_items/detailed_guide.html.erb

@@ -7,9 +7,7 @@
     <%= render 'govuk_component/title', @content_item.title_and_context %>
   </div>
   <div class="column-third">
-    <%= render 'shared/available_languages',
-      translations: @content_item.available_translations
-    %>
+    <%= render 'components/translation-nav', translations: @content_item.available_translations %>
     <% if @content_item.image.present? %>
       <%= image_tag @content_item.image, class: "logo-image" %>
     <% end %>

app/views/shared/_translations.html+new_navigation.erb

@@ -1,5 +1,4 @@
-<% if @content_item.available_translations.any? %>
-  <%= render 'shared/available_languages',
-    translations: @content_item.available_translations
-  %>
+<% if @content_item.available_translations.length > 1 %>
+  <%= render 'components/translation-nav',
+      translations: @content_item.available_translations %>
 <% end %>

app/views/shared/_translations.html.erb

@@ -1,7 +1,6 @@
-<% if @content_item.available_translations.any? %>
+<% if @content_item.available_translations.length > 1 %>
   <div class="column-third">
-    <%= render 'shared/available_languages',
-      translations: @content_item.available_translations
-    %>
+    <%= render 'components/translation-nav',
+        translations: @content_item.available_translations %>
   </div>
 <% end %>

test/components/translation_nav_test.rb

@@ -0,0 +1,95 @@
+require 'component_test_helper'
+
+class TranslationNavTest < ComponentTestCase
+  def component_name
+    "translation-nav"
+  end
+
+  test "fails to render a translation nav when no translations are given" do
+    assert_raise do
+      render_component({})
+    end
+  end
+
+  test "renders an active translation nav item with a text description" do
+    render_component(
+      translations: [
+        {
+          locale: 'en',
+          base_path: '/en',
+          text: 'English',
+          active: true
+        },
+        {
+          locale: 'hi',
+          base_path: '/hi',
+          text: 'हिंदी',
+        }
+      ]
+    )
+
+    assert_select ".app-c-translation-nav__list__language", text: "English"
+
+    assert_select ".app-c-translation-nav__list__language a[lang=\"hi\"]", text: "हिंदी"
+    assert_select ".app-c-translation-nav__list__language a[href=\"/hi\"]"
+  end
+
+  test "does not render an active translation item with a link" do
+    render_component(
+      translations: [
+        {
+          locale: 'en',
+          base_path: '/en',
+          text: 'English',
+          active: true
+        },
+        {
+          locale: 'hi',
+          base_path: '/hi',
+          text: 'हिंदी',
+        }
+      ]
+    )
+
+    assert_select ".app-c-translation-nav__list__language", text: "English"
+    assert_select ".app-c-translation-nav__list__language a[href=\"/en\"]",
+      false, "An active item should not link to a page translation"
+
+
+    assert_select ".app-c-translation-nav__list__language a[lang=\"hi\"]", text: "हिंदी"
+    assert_select ".app-c-translation-nav__list__language a[href=\"/hi\"]"
+  end
+
+  test "renders an inactive translation nav item with locale, base path and text" do
+    render_component(
+      translations: [
+        {
+          locale: 'fr',
+          base_path: '/fr',
+          text: 'French',
+        },
+        {
+          locale: 'hi',
+          base_path: '/hi',
+          text: 'हिंदी',
+          active: true
+        },
+        {
+          locale: 'zh',
+          base_path: '/zh',
+          text: '中文'
+        }
+      ]
+    )
+
+    assert_select ".app-c-translation-nav__list__language a[lang=\"fr\"]", text: "French"
+    assert_select ".app-c-translation-nav__list__language a[href=\"/fr\"]"
+
+    assert_select ".app-c-translation-nav__list__language a[lang=\"zh\"]", text: "中文"
+    assert_select ".app-c-translation-nav__list__language a[href=\"/zh\"]"
+
+    assert_select ".app-c-translation-nav__list__language", text: "हिंदी"
+    assert_select ".app-c-translation-nav__list__language a[href=\"/hi\"]",
+      false, "An active item should not link to a page translation"
+  end
+end

test/integration/case_study_test.rb

@@ -11,7 +11,7 @@ class CaseStudyTest < ActionDispatch::IntegrationTest
     assert_has_component_title(@content_item["title"])
     assert page.has_text?(@content_item["description"])
 
-    assert page.has_css?('.available-languages')
+    assert page.has_css?('.app-c-translation-nav')
   end
 
   test "withdrawn case study" do

test/integration/corporate_information_page_test.rb

@@ -56,7 +56,7 @@ class CorporateInformationPageTest < ActionDispatch::IntegrationTest
 
   test "includes translations" do
     setup_and_visit_content_item('corporate_information_page_translated_custom_logo')
-    assert page.has_css?('.available-languages')
+    assert page.has_css?('.app-c-translation-nav')
   end
 
   test "renders an organisation logo" do

test/integration/detailed_guide_test.rb

@@ -75,7 +75,7 @@ class DetailedGuideTest < ActionDispatch::IntegrationTest
     assert_has_component_title(@content_item["title"])
     assert page.has_text?(@content_item["description"])
 
-    assert page.has_css?('.available-languages')
+    assert page.has_css?('.app-c-translation-nav')
   end
 
   test 'return to contents link is tracked' do

test/integration/news_article_test.rb

@@ -34,8 +34,8 @@ class NewsArticleTest < ActionDispatch::IntegrationTest
   test "renders translation links when there is more than one translation" do
     setup_and_visit_content_item("news_article")
 
-    assert page.has_css?("div[class='available-languages']")
-    assert page.has_css?("li[class='translation']")
+    assert page.has_css?("div[class='app-c-translation-nav']")
+    assert page.has_css?("li[class='app-c-translation-nav__list__language']")
     assert page.has_link?("ردو", href: "/government/news/christmas-2016-prime-ministers-message.ur")
   end
 

test/integration/speech_test.rb

@@ -14,7 +14,7 @@ class SpeechTest < ActionDispatch::IntegrationTest
 
     assert_has_component_title(@content_item["title"])
     assert page.has_text?(@content_item["description"])
-    assert page.has_css?('.available-languages')
+    assert page.has_css?('.app-c-translation-nav')
   end
 
   test "renders metadata and document footer, including speaker" do