diff --git a/CHANGELOG.md b/CHANGELOG.md index b80701b96b..9432916979 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/app/assets/stylesheets/govuk_publishing_components/_all_components.scss b/app/assets/stylesheets/govuk_publishing_components/_all_components.scss index 87420f52d2..0cf58ccc82 100644 --- a/app/assets/stylesheets/govuk_publishing_components/_all_components.scss +++ b/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"; diff --git a/app/assets/stylesheets/govuk_publishing_components/components/_translation-nav.scss b/app/assets/stylesheets/govuk_publishing_components/components/_translation-nav.scss new file mode 100644 index 0000000000..79b70e5186 --- /dev/null +++ b/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; +} diff --git a/app/views/govuk_publishing_components/components/_translation-nav.html.erb b/app/views/govuk_publishing_components/components/_translation-nav.html.erb new file mode 100644 index 0000000000..cebed6b393 --- /dev/null +++ b/app/views/govuk_publishing_components/components/_translation-nav.html.erb @@ -0,0 +1,16 @@ +<% translations ||= [] %> +<% if translations.length > 1 %> + +<% end %> diff --git a/app/views/govuk_publishing_components/components/docs/translation-nav.yml b/app/views/govuk_publishing_components/components/docs/translation-nav.yml new file mode 100644 index 0000000000..4aa19fc8fc --- /dev/null +++ b/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 diff --git a/config/locales/en.yml b/config/locales/en.yml index 65a45651df..0425984680 100644 --- a/config/locales/en.yml +++ b/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' diff --git a/spec/components/translation_nav_test_spec.rb b/spec/components/translation_nav_test_spec.rb new file mode 100644 index 0000000000..7d95dee032 --- /dev/null +++ b/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