Skip to content

Commit f7056dc

Browse files
domoscargindomoscargin
committed
[SPIKE] Test different language switchers in service nav
1 parent fc62449 commit f7056dc

9 files changed

Lines changed: 570 additions & 48 deletions

File tree

‎packages/govuk-frontend/src/govuk/components/service-navigation/_mixin.scss‎

Lines changed: 140 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -116,6 +116,146 @@
116116
flex-grow: 1;
117117
}
118118

119+
.govuk-language-switcher {
120+
@include base.govuk-font($size: 19);
121+
}
122+
123+
.govuk-language-switcher-right,
124+
.govuk-language-switcher--right-align {
125+
margin: base.govuk-spacing(2) 0;
126+
127+
@media #{base.govuk-from-breakpoint(tablet)} {
128+
margin: 0 0 0 auto;
129+
}
130+
}
131+
132+
.govuk-language-switcher__list {
133+
display: flex;
134+
flex-wrap: wrap;
135+
margin: 0;
136+
padding: 0;
137+
list-style: none;
138+
}
139+
140+
.govuk-language-switcher__item {
141+
margin: 0;
142+
padding: 0;
143+
144+
&:not(:first-child) {
145+
position: relative;
146+
margin-left: base.govuk-spacing(2);
147+
padding-left: base.govuk-spacing(2);
148+
149+
&::before {
150+
content: "";
151+
position: absolute;
152+
top: 50%;
153+
left: 0;
154+
height: 1em;
155+
transform: translateY(-50%);
156+
border-left: 1px solid currentcolor;
157+
}
158+
}
159+
160+
@media #{base.govuk-from-breakpoint(tablet)} {
161+
display: inline-block;
162+
margin-top: 0;
163+
margin-bottom: 0;
164+
padding: base.govuk-spacing(3) 0;
165+
line-height: math.div(29, 19);
166+
}
167+
}
168+
169+
.govuk-language-switcher__icon {
170+
display: inline-flex;
171+
align-items: center;
172+
filter: grayscale(1);
173+
line-height: 1;
174+
vertical-align: text-top;
175+
}
176+
177+
.govuk-language-switcher__icon-svg {
178+
display: block;
179+
}
180+
181+
.govuk-language-switcher__toggle .govuk-language-switcher__icon {
182+
margin-right: base.govuk-spacing(1);
183+
}
184+
185+
.govuk-language-switcher__item--icon + .govuk-language-switcher__item {
186+
margin-left: base.govuk-spacing(1);
187+
padding-left: 0;
188+
189+
&::before {
190+
display: none;
191+
}
192+
}
193+
194+
.govuk-language-switcher-end,
195+
.govuk-language-switcher-responsive {
196+
.govuk-language-switcher__item {
197+
@media #{base.govuk-until-breakpoint(tablet)} {
198+
padding-bottom: base.govuk-spacing(2);
199+
}
200+
201+
@media #{base.govuk-from-breakpoint(tablet)} {
202+
padding-top: 0;
203+
line-height: 1;
204+
}
205+
206+
&:not(:first-child)::before {
207+
@media #{base.govuk-from-breakpoint(tablet)} {
208+
top: 0;
209+
transform: none;
210+
}
211+
}
212+
}
213+
}
214+
215+
.govuk-language-switcher__link {
216+
@include base.govuk-link-common;
217+
@include base.govuk-link-style-no-underline;
218+
@include base.govuk-link-style-no-visited-state;
219+
}
220+
221+
.govuk-language-switcher-responsive {
222+
.govuk-language-switcher__toggle {
223+
margin-bottom: 0;
224+
}
225+
226+
@media #{base.govuk-until-breakpoint(tablet)} {
227+
.govuk-language-switcher__list {
228+
display: block;
229+
margin-bottom: base.govuk-spacing(3);
230+
231+
&[hidden] {
232+
display: none;
233+
}
234+
}
235+
236+
.govuk-language-switcher__item {
237+
margin: base.govuk-spacing(2) 0;
238+
239+
&:not(:first-child) {
240+
margin-left: 0;
241+
padding-left: 0;
242+
243+
&::before {
244+
display: none;
245+
}
246+
}
247+
}
248+
249+
.govuk-language-switcher__item--icon {
250+
display: none;
251+
}
252+
}
253+
}
254+
255+
.govuk-language-switcher__text {
256+
font-weight: inherit;
257+
}
258+
119259
//
120260
// Navigation list specific code
121261
//

‎packages/govuk-frontend/src/govuk/components/service-navigation/language-switcher-end.njk‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
{% from "../../macros/attributes.njk" import govukAttributes %}
2+
{% from "./language-switcher-icon.njk" import govukLanguageSwitcherIcon %}
3+
4+
{% macro govukLanguageSwitcherEnd(languageSwitch) %}
5+
{%- set languageSwitchCurrentLanguage = languageSwitch.currentLanguage | default("en", true) -%}
6+
{%- set languageSwitchEnglishText = languageSwitch.englishText | default("English", true) -%}
7+
{%- set languageSwitchWelshText = languageSwitch.welshText | default("Cymraeg", true) -%}
8+
{%- set languageSwitchEnglishHref = languageSwitch.englishHref | default("#", true) -%}
9+
{%- set languageSwitchWelshHref = languageSwitch.welshHref | default("#", true) -%}
10+
{%- set languageSwitchShowIcon = languageSwitch.showIcon | default(false) -%}
11+
12+
<nav class="govuk-language-switcher govuk-language-switcher-end{%- if languageSwitch.classes %} {{ languageSwitch.classes }}{% endif %}" aria-label="{{ languageSwitch.ariaLabel | default("Language", true) }}"
13+
{{- govukAttributes(languageSwitch.attributes) }}>
14+
<ul class="govuk-language-switcher__list">
15+
{% if languageSwitchShowIcon %}
16+
<li class="govuk-language-switcher__item govuk-language-switcher__item--icon" aria-hidden="true">
17+
{{ govukLanguageSwitcherIcon() }}
18+
</li>
19+
{% endif %}
20+
<li class="govuk-language-switcher__item{%- if languageSwitchCurrentLanguage == 'en' %} govuk-language-switcher__item--current{% endif %}">
21+
{% if languageSwitchCurrentLanguage == 'en' %}
22+
<span class="govuk-service-navigation__text govuk-language-switcher__text" lang="en" aria-current="page">
23+
{{ languageSwitchEnglishText }}
24+
</span>
25+
{% else %}
26+
<a class="govuk-service-navigation__link govuk-language-switcher__link" href="{{ languageSwitchEnglishHref }}" hreflang="en" lang="en" rel="alternate">
27+
{{ languageSwitchEnglishText }}
28+
</a>
29+
{% endif %}
30+
</li>
31+
<li class="govuk-language-switcher__item{%- if languageSwitchCurrentLanguage == 'cy' %} govuk-language-switcher__item--current{% endif %}">
32+
{% if languageSwitchCurrentLanguage == 'cy' %}
33+
<span class="govuk-service-navigation__text govuk-language-switcher__text" lang="cy" aria-current="page">
34+
{{ languageSwitchWelshText }}
35+
</span>
36+
{% else %}
37+
<a class="govuk-service-navigation__link govuk-language-switcher__link" href="{{ languageSwitchWelshHref }}" hreflang="cy" lang="cy" rel="alternate">
38+
{{ languageSwitchWelshText }}
39+
</a>
40+
{% endif %}
41+
</li>
42+
</ul>
43+
</nav>
44+
{% endmacro %}

‎packages/govuk-frontend/src/govuk/components/service-navigation/language-switcher-icon.njk‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
{% macro govukLanguageSwitcherIcon() %}
2+
<span class="govuk-language-switcher__icon" aria-hidden="true">
3+
<svg class="govuk-language-switcher__icon-svg" xmlns="http://www.w3.org/2000/svg" height="20" width="20" aria-hidden="true" focusable="false" viewBox="0 0 20 20">
4+
<circle cx="10" cy="10" r="8" fill="none" stroke="currentcolor" stroke-width="1.5" />
5+
<ellipse cx="10" cy="10" rx="3.5" ry="8" fill="none" stroke="currentcolor" stroke-width="1.5" />
6+
<line x1="2" y1="10" x2="18" y2="10" stroke="currentcolor" stroke-width="1.5" />
7+
<path d="M3.5 6.5h13M3.5 13.5h13" fill="none" stroke="currentcolor" stroke-width="1.5" />
8+
</svg>
9+
</span>
10+
{% endmacro %}

‎packages/govuk-frontend/src/govuk/components/service-navigation/language-switcher-responsive.njk‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
{% from "../../macros/attributes.njk" import govukAttributes %}
2+
{% from "./language-switcher-icon.njk" import govukLanguageSwitcherIcon %}
3+
4+
{% macro govukLanguageSwitcherResponsive(languageSwitch) %}
5+
{%- set languageSwitchCurrentLanguage = languageSwitch.currentLanguage | default("en", true) -%}
6+
{%- set languageSwitchNavigationId = languageSwitch.navigationId | default("language-switcher-navigation", true) -%}
7+
{%- set languageSwitchShowIcon = languageSwitch.showIcon | default(false) -%}
8+
{%- set languageSwitchItems = languageSwitch.items | default([
9+
{
10+
"code": "en",
11+
"text": languageSwitch.englishText | default("English", true),
12+
"href": languageSwitch.englishHref | default("#", true)
13+
},
14+
{
15+
"code": "cy",
16+
"text": languageSwitch.welshText | default("Cymraeg", true),
17+
"href": languageSwitch.welshHref | default("#", true)
18+
}
19+
], true) -%}
20+
21+
<nav class="govuk-language-switcher govuk-language-switcher-responsive{%- if languageSwitch.classes %} {{ languageSwitch.classes }}{% endif %}" aria-label="{{ languageSwitch.ariaLabel | default("Language", true) }}"
22+
{{- govukAttributes(languageSwitch.attributes) }}>
23+
<button type="button" class="govuk-service-navigation__toggle govuk-language-switcher__toggle govuk-js-service-navigation-toggle" aria-controls="{{ languageSwitchNavigationId }}" hidden aria-hidden="true">
24+
{% if languageSwitchShowIcon %}
25+
{{ govukLanguageSwitcherIcon() }}
26+
{% endif %}
27+
Language
28+
</button>
29+
<ul class="govuk-language-switcher__list" id="{{ languageSwitchNavigationId }}">
30+
{% if languageSwitchShowIcon %}
31+
<li class="govuk-language-switcher__item govuk-language-switcher__item--icon" aria-hidden="true">
32+
{{ govukLanguageSwitcherIcon() }}
33+
</li>
34+
{% endif %}
35+
{% for item in languageSwitchItems %}
36+
<li class="govuk-language-switcher__item{%- if languageSwitchCurrentLanguage == item.code %} govuk-language-switcher__item--current{% endif %}">
37+
{% if languageSwitchCurrentLanguage == item.code %}
38+
<span class="govuk-service-navigation__text govuk-language-switcher__text" lang="{{ item.code }}" aria-current="page">
39+
{{ item.text }}
40+
</span>
41+
{% else %}
42+
<a class="govuk-service-navigation__link govuk-language-switcher__link" href="{{ item.href }}" hreflang="{{ item.code }}" lang="{{ item.code }}" rel="alternate">
43+
{{ item.text }}
44+
</a>
45+
{% endif %}
46+
</li>
47+
{% endfor %}
48+
</ul>
49+
</nav>
50+
{% endmacro %}

‎packages/govuk-frontend/src/govuk/components/service-navigation/language-switcher-right.njk‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
{% from "../../macros/attributes.njk" import govukAttributes %}
2+
{% from "./language-switcher-icon.njk" import govukLanguageSwitcherIcon %}
3+
4+
{% macro govukLanguageSwitcherRight(languageSwitch) %}
5+
{%- set languageSwitchCurrentLanguage = languageSwitch.currentLanguage | default("en", true) -%}
6+
{%- set languageSwitchEnglishText = languageSwitch.englishText | default("English", true) -%}
7+
{%- set languageSwitchWelshText = languageSwitch.welshText | default("Cymraeg", true) -%}
8+
{%- set languageSwitchEnglishHref = languageSwitch.englishHref | default("#", true) -%}
9+
{%- set languageSwitchWelshHref = languageSwitch.welshHref | default("#", true) -%}
10+
{%- set languageSwitchShowIcon = languageSwitch.showIcon | default(false) -%}
11+
12+
<nav class="govuk-language-switcher govuk-language-switcher-right{%- if languageSwitch.classes %} {{ languageSwitch.classes }}{% endif %}" aria-label="{{ languageSwitch.ariaLabel | default("Language", true) }}"
13+
{{- govukAttributes(languageSwitch.attributes) }}>
14+
<ul class="govuk-language-switcher__list">
15+
{% if languageSwitchShowIcon %}
16+
<li class="govuk-language-switcher__item govuk-language-switcher__item--icon" aria-hidden="true">
17+
{{ govukLanguageSwitcherIcon() }}
18+
</li>
19+
{% endif %}
20+
<li class="govuk-language-switcher__item{%- if languageSwitchCurrentLanguage == 'en' %} govuk-language-switcher__item--current{% endif %}">
21+
{% if languageSwitchCurrentLanguage == 'en' %}
22+
<span class="govuk-service-navigation__text govuk-language-switcher__text" lang="en" aria-current="page">
23+
{{ languageSwitchEnglishText }}
24+
</span>
25+
{% else %}
26+
<a class="govuk-service-navigation__link govuk-language-switcher__link" href="{{ languageSwitchEnglishHref }}" hreflang="en" lang="en" rel="alternate">
27+
{{ languageSwitchEnglishText }}
28+
</a>
29+
{% endif %}
30+
</li>
31+
<li class="govuk-language-switcher__item{%- if languageSwitchCurrentLanguage == 'cy' %} govuk-language-switcher__item--current{% endif %}">
32+
{% if languageSwitchCurrentLanguage == 'cy' %}
33+
<span class="govuk-service-navigation__text govuk-language-switcher__text" lang="cy" aria-current="page">
34+
{{ languageSwitchWelshText }}
35+
</span>
36+
{% else %}
37+
<a class="govuk-service-navigation__link govuk-language-switcher__link" href="{{ languageSwitchWelshHref }}" hreflang="cy" lang="cy" rel="alternate">
38+
{{ languageSwitchWelshText }}
39+
</a>
40+
{% endif %}
41+
</li>
42+
</ul>
43+
</nav>
44+
{% endmacro %}

0 commit comments

Comments
 (0)