@govuk-one-login/frontend-language-toggle
TypeScript icon, indicating that this package has built-in type declarations

1.1.0 • Public • Published


GOV UK One Login Language Toggle

This package enables GOV UK LOGIN frontend Node.js applications to add a language toggle.
Explore the docs »

View Demo · Report Bug · Request Feature

Table of Contents
  1. About The Project
  2. Getting Started

About The Project

The GDS One Login Language toggle node package is a shared, reusable nunjuck component created to facilitate the integration of a language toggle.

The purpose of this component is to make it as easy as possible for the various pods that make up the One Login journey to configure and add a configurable language toggle.

The package is owned by the DI Frontend Capability team, part of the development of this tool involves ongoing discovery with the pods responsible for maintaining the frontend repositories that make up the One Login journey. As more information is collated, the package and documentation will be updated. As such, it is considered a WIP and the pods will be notified when a stable release is ready.

(back to top)

Getting Started

Installation

  1. Install NPM package

    npm install @govuk-one-login/frontend-language-toggle
  2. Configure your node application's startup file (example: app.js or index.js) and add a new path view to your configureNunjucks viewspath parameter:

    path.resolve("node_modules/frontend-language-toggle");

    [!WARNING] Check if the path to your node module folder is the correct one. [!WARNING]

  3. Import this macro into your base nunjucks template:

     {% from "frontend-language-toggle/macro.njk" import languageSelect %}
  4. Add the nunjuck component where you need:

    {
      {
        languageSelect({
          ariaLabel: "Choose a language",
          url: currentUrl
          class: "",
          activeLanguage: htmlLang,
          languages: [
            {
              code: "en",
              text: "English",
               visuallyHidden: "Change to English"
            },
            {
              code: "cy",
              text: "Cymraeg",
              visuallyHidden: "Newid yr iaith ir Gymraeg"
            }
          ]
        });
      }
    }
  5. Ensure the config view engine is set up

    app.set(
      "view engine",
      configureNunjucks(app, [
        path.resolve("node_modules/frontend-language-toggle"),
      ])
    );
  6. Add local variable to set the current URL locally

    app.use((req, res, next) => {
      if (req.i18n) {
        res.locals.htmlLang = req.i18n.language;
        res.locals.pageTitleLang = req.i18n.language;
        res.locals.mainLang = req.i18n.language;
        // New line to be added
        res.locals.currentUrl =
          req.protocol + "://" + req.get("host") + req.originalUrl;
        next();
      }
    });
  7. Import the addLanguageParam function into your Nunjucks configuration file (e.g. nunjucks.js) and make it accessible to Nunjucks views. It is used by the component to set the URL.

    const addLanguageParam = require("@govuk-one-login/frontend-language-toggle/build/cjs/language-param-setter.cjs");
    nunjucksEnv.addGlobal("addLanguageParam", addLanguageParam);

    If using TypeScript:

    import addLanguageParam from "@govuk-one-login/frontend-language-toggle/build/esm/language-param-setter"
  8. Include the stylesheet from frontend-language-toggle/stylesheet/styles.css in your front-end application.

[!NOTE]

  • ariaLabel is a brief description of the purpose of the navigation, omitting the term "navigation", as the screen reader will read both the role and the contents of the label.
  • activeLanguage contains the language code of your i18next active language e.g 'en'
  • class lets you add any css class to the nunjuck component.
  • languages is an array of all the languages you support in your application.
  • Language toggle to be placed above the back button. [!NOTE]

Prerequisites

  • Having set the local variable htmlLang in your app.js file or in a middleware function.
  • Having define translation value for ariaLabel property.

(back to top)

Package Sidebar

Install

npm i @govuk-one-login/frontend-language-toggle

Weekly Downloads

799

Version

1.1.0

License

ISC

Unpacked Size

10.1 kB

Total Files

12

Last publish

Collaborators

  • joanneyoung01
  • andyholme-gds
  • di-fabs
  • pcornishgds
  • wilsondrrn
  • merlinc