Add a language switcher macro

hmcts · Mar 6, 2018 · ebb29d2 · ebb29d2
1 parent 578ddb9
commit ebb29d2
Show file tree

Hide file tree

Showing 6 changed files with 62 additions and 1 deletion.
diff --git a/assets/scss/look-and-feel/language-switch.scss b/assets/scss/look-and-feel/language-switch.scss
@@ -0,0 +1,39 @@
+.l-i18n-language-switch {
+  float: right;
+  @include core-16;
+
+  margin-top: $gutter-half;
+  margin-bottom: $gutter-half;
+
+  li {
+    @include inline-block;
+    color: $black;
+
+    a {
+      text-decoration: none;
+      border-bottom: 1px solid $black;
+
+      &:link,
+      &:visited,
+      &:hover,
+      a#{&}:focus,
+      &:active {
+        color: $black;
+      }
+    }
+
+    &:after {
+      margin-right: $gutter-half / 2;
+      margin-left: $gutter-half / 2;
+      border-left: 1px solid $black;
+      content: '';
+    }
+
+    &:last-child:after {
+      border-left: none;
+      margin-right: 0;
+      margin-left: 0;
+      content: '';
+    }
+  }
+}
diff --git a/templates/look-and-feel/components/i18n.njk b/templates/look-and-feel/components/i18n.njk
@@ -0,0 +1,15 @@
+{%- macro languageSwitch(currentLang, availableLangs = []) -%}
+  {%- if availableLangs.length > 1 -%}
+  <ul class="l-i18n-language-switch">
+    {%- for lang in availableLangs -%}
+    <li {{ 'class=current-language' if lang.code == currentLang }}>
+      {%- if lang.code == currentLang -%}
+      {{ lang.name }}
+      {%- else -%}
+      <a href="?lng={{ lang.code }}">{{ lang.name }}</a>
+      {%- endif -%}
+    </li>
+    {%- endfor -%}
+  </ul>
+  {%- endif -%}
+{%- endmacro -%}
diff --git a/templates/look-and-feel/layouts/check_your_answers.html b/templates/look-and-feel/layouts/check_your_answers.html
@@ -4,6 +4,7 @@
 {% from "look-and-feel/components/phase_banner.njk" import phaseBanner %}
 {% from "look-and-feel/components/fields.njk" import hiddenInput %}
 {% from "look-and-feel/components/errors.njk" import errorSummary %}
+{% from "look-and-feel/components/i18n.njk" import languageSwitch %}
 
 {% set defaultContent = {
   title: 'Check your answers',
@@ -19,6 +20,7 @@
 {% block breadcrumbs %}
 {{ phaseBanner(phase, feedbackLink) }}
 <a class="link-back" href="#" onclick="history.go(-1); return false;">Back</a>
+{{ languageSwitch(i18n.currentLanguage, i18n.availableLanguages) }}
 {% endblock %}
 
 {% block two_thirds %}

diff --git a/templates/look-and-feel/layouts/error.html b/templates/look-and-feel/layouts/error.html
@@ -1,13 +1,15 @@
 {% extends "look-and-feel/layouts/two_thirds.html" %}
 {% from "look-and-feel/components/header.njk" import header %}
 {% from "look-and-feel/components/phase_banner.njk" import phaseBanner %}
+{% from "look-and-feel/components/i18n.njk" import languageSwitch %}
 
 {% block head -%}
     {{ assets | safe }}
 {% endblock %}
 
 {% block breadcrumbs %}
 {{ phaseBanner(phase, feedbackLink) }}
+{{ languageSwitch(i18n.currentLanguage, i18n.availableLanguages) }}
 {% endblock %}
 
 

diff --git a/templates/look-and-feel/layouts/question.html b/templates/look-and-feel/layouts/question.html
@@ -2,12 +2,14 @@
 {% from "look-and-feel/components/header.njk" import header %}
 {% from "look-and-feel/components/phase_banner.njk" import phaseBanner %}
 {% from "look-and-feel/components/errors.njk" import errorSummary %}
+{% from "look-and-feel/components/i18n.njk" import languageSwitch %}
 
 {% block page_title %}{{ title }}{% endblock %}
 
 {% block breadcrumbs %}
 {{ phaseBanner(phase, feedbackLink) }}
 <a class="link-back" href="#" onclick="history.go(-1); return false;">Back</a>
+{{ languageSwitch(i18n.currentLanguage, i18n.availableLanguages) }}
 {% endblock %}
 
 {% block two_thirds %}
@@ -28,4 +30,3 @@
 {%- endblock %}
 
 {% endblock %}
-
diff --git a/templates/look-and-feel/layouts/start_page.html b/templates/look-and-feel/layouts/start_page.html
@@ -1,9 +1,11 @@
 {% extends "look-and-feel/layouts/two_thirds.html" %}
 {% from "look-and-feel/components/header.njk" import header %}
 {% from "look-and-feel/components/phase_banner.njk" import phaseBanner %}
+{% from "look-and-feel/components/i18n.njk" import languageSwitch %}
 
 {% block breadcrumbs %}
 {{ phaseBanner(phase, feedbackLink) }}
+{{ languageSwitch(currentLang, availableLangs) }}
 {% endblock %}