[SPIKE][WIP] Test different language switchers in govuk-frontend

packages/govuk-frontend-review/src/views/examples/template-custom/index.njk

@@ -3,6 +3,7 @@
 {% from "govuk/components/back-link/macro.njk" import govukBackLink %}
 {% from "govuk/components/skip-link/macro.njk" import govukSkipLink %}
 {% from "govuk/components/header/macro.njk" import govukHeader %}
+{% from "govuk/components/language-switcher/macro.njk" import govukLanguageSwitcher %}
 {% from "govuk/components/phase-banner/macro.njk" import govukPhaseBanner %}
 {% from "govuk/components/footer/macro.njk" import govukFooter %}
 
@@ -15,6 +16,39 @@
 {% set bodyClasses = 'app-body-class' %}
 {% set containerClasses = "app-width-container--wide" %}
 {% set assetUrl = 'https://govuk-frontend-review.herokuapp.com/assets' %}
+{% set languageSwitcherItems = [
+  {
+    code: "fr",
+    text: "Francais",
+    href: "#fr"
+  },
+  {
+    code: "en",
+    text: "English",
+    href: "#en"
+  },
+  {
+    code: "cy",
+    text: "Cymraeg",
+    href: "#cy"
+  }
+] %}
+{% set headerLanguageSwitcherHtml %}
+  {{ govukLanguageSwitcher({
+    currentLanguage: "fr",
+    showIcon: true,
+    collapseOnMobile: true,
+    items: languageSwitcherItems
+  }) }}
+{% endset %}
+{% set footerLanguageSwitcherHtml %}
+  {{ govukLanguageSwitcher({
+    currentLanguage: "fr",
+    showIcon: true,
+    collapseOnMobile: false,
+    items: languageSwitcherItems
+  }) }}
+{% endset %}
 
 {% block pageTitle %}GOV.UK - Le meilleur endroit pour trouver des services gouvernementaux et de l'information{% endblock %}
 
@@ -60,6 +94,7 @@
   {{ govukHeader({
     serviceName: "Nom du service",
     containerClasses: containerClasses,
+    secondaryHtml: headerLanguageSwitcherHtml,
     navigation: [
       {
         href: '#1',
@@ -106,9 +141,18 @@
 
 {% block containerStart %}
   <!-- block:containerStart -->
-  {{ govukBackLink({
-    href: "/"
-  }) }}
+  <div style="display: flex; justify-content: space-between; align-items: start; gap: 20px;">
+    {{ govukBackLink({
+      href: "/"
+    }) }}
+    {{ govukLanguageSwitcher({
+      classes: "govuk-language-switcher--right-align",
+      currentLanguage: "fr",
+      showIcon: true,
+      collapseOnMobile: false,
+      items: languageSwitcherItems
+    }) }}
+  </div>
   <!-- endblock:containerStart -->
 {% endblock %}
 
@@ -120,6 +164,15 @@
 
 {% block content %}
   <!-- block:content -->
+  {{ govukLanguageSwitcher({
+    currentLanguage: "fr",
+    showIcon: true,
+    collapseOnMobile: true,
+    items: languageSwitcherItems
+  }) }}
+
+  <h1 class="govuk-heading-l">Exemples de placement du selecteur de langue</h1>
+  <p class="govuk-body">Cette page montre le composant language-switcher dans l'en-tete, sous l'en-tete, a cote du lien retour, en haut du contenu principal et dans le pied de page.</p>
   {{ super() }}
   <!-- endblock:content -->
 {% endblock %}
@@ -140,6 +193,7 @@
   {{ govukFooter({
     containerClasses: "app-width-container--wide",
     "meta": {
+      "html": footerLanguageSwitcherHtml,
       "items": [
         {
           "href": "#1",

packages/govuk-frontend/src/govuk/all.mjs

@@ -6,6 +6,7 @@ export { Checkboxes } from './components/checkboxes/checkboxes.mjs'
 export { ErrorSummary } from './components/error-summary/error-summary.mjs'
 export { ExitThisPage } from './components/exit-this-page/exit-this-page.mjs'
 export { FileUpload } from './components/file-upload/file-upload.mjs'
+export { LanguageSwitcher } from './components/language-switcher/language-switcher.mjs'
 export { NotificationBanner } from './components/notification-banner/notification-banner.mjs'
 export { PasswordInput } from './components/password-input/password-input.mjs'
 export { Radios } from './components/radios/radios.mjs'

packages/govuk-frontend/src/govuk/components/_index.import.scss

@@ -18,6 +18,7 @@
 @import "input";
 @import "inset-text";
 @import "label";
+@import "language-switcher";
 @import "notification-banner";
 @import "pagination";
 @import "panel";
@@ -31,6 +32,7 @@
 @import "table";
 @import "tabs";
 @import "tag";
+@import "test-service-navigation";
 @import "task-list";
 @import "textarea";
 @import "warning-text";

packages/govuk-frontend/src/govuk/components/_index.scss

@@ -18,6 +18,7 @@
 @use "input";
 @use "inset-text";
 @use "label";
+@use "language-switcher";
 @use "notification-banner";
 @use "pagination";
 @use "panel";
@@ -31,6 +32,7 @@
 @use "table";
 @use "tabs";
 @use "tag";
+@use "test-service-navigation";
 @use "task-list";
 @use "textarea";
 @use "warning-text";

packages/govuk-frontend/src/govuk/components/header/_mixin.scss

@@ -17,6 +17,13 @@
     padding: 0 base.govuk-spacing(3);
   }
 
+  .govuk-header__container--with-secondary {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: base.govuk-spacing(3);
+  }
+
   .govuk-header__logo {
     box-sizing: border-box;
 
@@ -25,6 +32,29 @@
     padding-bottom: 14px - $logo-bottom-margin;
   }
 
+  .govuk-header__secondary {
+    margin-left: auto;
+  }
+
+  .govuk-header__secondary .govuk-language-switcher {
+    margin: 0;
+    color: base.govuk-colour("white");
+  }
+
+  .govuk-header__secondary .govuk-language-switcher__link {
+    @include base.govuk-link-style-inverse;
+  }
+
+  .govuk-header__secondary .govuk-language-switcher__toggle {
+    margin: 0;
+    color: inherit;
+  }
+
+  .govuk-header__secondary .govuk-language-switcher-right,
+  .govuk-header__secondary .govuk-language-switcher--right-align {
+    margin: 0;
+  }
+
   .govuk-header__homepage-link {
     // Avoid using the `base.govuk-link-common` mixin because the links in the
     // header get a special treatment, because:

packages/govuk-frontend/src/govuk/components/header/header.yaml

@@ -11,6 +11,10 @@ params:
     type: string
     required: false
     description: Classes for the container, useful if you want to make the header fixed width.
+  - name: secondaryHtml
+    type: string
+    required: false
+    description: HTML rendered inside the header container after the logo block.
   - name: classes
     type: string
     required: false

packages/govuk-frontend/src/govuk/components/header/template.njk

@@ -2,7 +2,7 @@
 {% from "../../macros/logo.njk" import govukLogo -%}
 
 <div class="govuk-header {%- if params.classes %} {{ params.classes }}{% endif %}" {{- govukAttributes(params.attributes) }}>
-  <div class="govuk-header__container {{ params.containerClasses | default("govuk-width-container", true) }}">
+  <div class="govuk-header__container {{ params.containerClasses | default("govuk-width-container", true) }}{%- if params.secondaryHtml %} govuk-header__container--with-secondary{% endif %}">
     <div class="govuk-header__logo">
       <a href="{{ params.homepageUrl | default("//gov.uk", true) }}" class="govuk-header__homepage-link">
         {{ govukLogo({
@@ -16,5 +16,10 @@
         {% endif %}
       </a>
     </div>
+    {% if params.secondaryHtml %}
+      <div class="govuk-header__secondary">
+        {{ params.secondaryHtml | safe | trim | indent(8) }}
+      </div>
+    {% endif %}
   </div>
 </div>

packages/govuk-frontend/src/govuk/components/language-switcher/README.md

@@ -0,0 +1,5 @@
+# Language switcher
+
+Use the language switcher component to let users move between equivalent pages in different languages.
+
+It renders a list of language options and can collapse to a button on small viewports.

packages/govuk-frontend/src/govuk/components/language-switcher/_index.import.scss

@@ -0,0 +1 @@
+@import "language-switcher";

packages/govuk-frontend/src/govuk/components/language-switcher/_index.scss

@@ -0,0 +1,4 @@
+@use "../../custom-properties";
+@use "mixin";
+
+@include mixin.styles;

packages/govuk-frontend/src/govuk/components/language-switcher/_language-switcher.import.scss

@@ -0,0 +1,7 @@
+@use "mixin";
+
+@import "../../base";
+
+@include govuk-exports("govuk/component/language-switcher") {
+  @include mixin.styles;
+}