Add translation nav component

CHANGELOG.md

@@ -1,6 +1,9 @@
 # Unreleased
 
 * Add subscription links component (PR #290)
+* Add translation nav component (PR #289)
+* Make components CSS available to static in the component guide (PR #286)
+* Add heading component (PR #288)
 
 # 7.0.0
 

app/assets/stylesheets/govuk_publishing_components/_all_components.scss

@@ -22,6 +22,7 @@
 @import "components/step-by-step-nav-header";
 @import "components/step-by-step-nav-related";
 @import "components/subscription-links";
+@import "components/translation-nav";
 @import "components/feedback";
 @import "components/inverse-header";
 @import "components/success-alert";

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

@@ -0,0 +1,35 @@
+.gem-c-translation-nav {
+  @include responsive-top-margin;
+  @include core-16;
+  margin-bottom: $gutter;
+  border-bottom: 1px solid $border-colour;
+}
+
+.gem-c-translation-nav__list {
+  @extend %contain-floats;
+  list-style: none;
+  margin-left: -$gutter-one-third;
+  margin-right: -$gutter-one-third;
+}
+
+.gem-c-translation-nav__list-item {
+  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;
+  }
+}
+
+.gem-c-translation-nav__list-item:last-child {
+  border-right: 0;
+  border-left: 0;
+}

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

@@ -0,0 +1,16 @@
+<% translations ||= [] %>
+<% if translations.length > 1 %>
+  <nav role="navigation" class="gem-c-translation-nav" aria-label="<%= t("common.translations") %>">
+    <ul class="gem-c-translation-nav__list">
+      <% translations.each.with_index do |translation, i| %>
+        <li class="gem-c-translation-nav__list-item">
+          <% if translation[:active] %>
+            <span lang="<%= translation[:locale] %>"><%= translation[:text] %></span>
+          <% else %>
+            <%= link_to translation[:text], translation[:base_path], hreflang: translation[:locale], lang: translation[:locale], rel: "alternate" %>
+          <% end %>
+        </li>
+      <% end %>
+    </ul>
+  </nav>
+<% end %>

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

@@ -0,0 +1,61 @@
+name: Translation navigation
+description: A list of links to available translations
+body: The active property indicates the current language.
+accessibility_criteria: |
+  The component must:
+
+  - be [a landmark with a navigation role](https://accessibility.blog.gov.uk/2016/05/27/using-navigation-landmarks/)
+  - have an accessible name in the current language, eg "Translations"
+
+  The translation links must:
+
+  - [identify the language of the text](https://www.w3.org/TR/UNDERSTANDING-WCAG20/meaning-other-lang-id.html#meaning-other-lang-id-examples-head)
+
+    [Watch a screen reader pronounce text differently based on lang attribute](https://bit.ly/screenreaderpronunciation)
+shared_accessibility_criteria:
+  - link
+examples:
+  default:
+    data:
+      translations:
+      - locale: 'en'
+        base_path: '/en'
+        text: 'English'
+        active: true
+      - locale: 'hi'
+        base_path: '/hi'
+        text: 'हिंदी'
+  multiple_translations:
+    data:
+      translations:
+      - locale: 'en'
+        base_path: '/en'
+        text: 'English'
+        active: true
+      - locale: 'fr'
+        base_path: '/fr'
+        text: 'Français'
+      - locale: 'hi'
+        base_path: '/hi'
+        text: 'हिंदी'
+      - locale: 'ja'
+        base_path: '/ja'
+        text: '日本語'
+      - locale: 'ur'
+        base_path: '/ur'
+        text: 'اردو'
+      - locale: 'zh'
+        base_path: '/zh'
+        text: '中文'
+  right_to_left:
+    data:
+      translations:
+        - locale: 'en'
+          base_path: '/en'
+          text: 'English'
+        - locale: 'ar'
+          base_path: '/ar'
+          text: 'العربية'
+          active: true
+    context:
+      right_to_left: true

config/locales/en.yml

@@ -20,6 +20,8 @@
 # available at http://guides.rubyonrails.org/i18n.html.
 
 en:
+  common:
+    translations: "Translations"
   components:
     back_link:
       back: 'Back'

spec/components/translation_nav_test_spec.rb

@@ -0,0 +1,72 @@
+require "rails_helper"
+
+describe "Translation nav", type: :view do
+  def component_name
+    "translation-nav"
+  end
+
+  def multiple_translations
+    [
+      {
+        locale: 'en',
+        base_path: '/en',
+        text: 'English',
+        active: true
+      },
+      {
+        locale: 'hi',
+        base_path: '/hi',
+        text: 'हिंदी',
+      }
+    ]
+  end
+
+  it "renders nothing when no translations are given" do
+    assert_empty render_component({})
+  end
+
+  it "renders nothing when only one translation given" do
+    assert_empty render_component(
+      translations: [
+        {
+          locale: 'en',
+          base_path: '/en',
+          text: 'English',
+          active: true
+        }
+      ]
+    )
+  end
+
+  it "renders all items in a list" do
+    render_component(translations: multiple_translations)
+    assert_select ".gem-c-translation-nav__list-item", count: multiple_translations.length
+  end
+
+  it "renders an active item as text without a link" do
+    render_component(translations: multiple_translations)
+    assert_select ".gem-c-translation-nav__list-item :not(a)", text: "English"
+    assert_select "a[href=\"/en\"]", false, "An active item should not be a link"
+  end
+
+  it "renders inactive items as a link with locale, base path and text" do
+    render_component(translations: multiple_translations)
+    assert_select ".gem-c-translation-nav__list-item a[lang='hi'][href='/hi']", text: "हिंदी"
+  end
+
+  it "identifies the language of the text" do
+    render_component(translations: multiple_translations)
+    assert_select "span[lang='en']", text: "English"
+    assert_select "a[lang='hi']", text: "हिंदी"
+  end
+
+  it "identifies the language of the target page" do
+    render_component(translations: multiple_translations)
+    assert_select "a[hreflang='hi']", text: "हिंदी"
+  end
+
+  it "is labelled as translation navigation" do
+    render_component(translations: multiple_translations)
+    assert_select "nav[role='navigation'][aria-label='Translations']"
+  end
+end