Add translated examples page

Author: colinrotherham

packages/nhsuk-frontend-review/src/examples/translated.njk

@@ -0,0 +1,84 @@
+{% extends "layouts/page.njk" %}
+
+{% set title = "Translated examples" %}
+
+{% block content %}
+  <h1 class="nhsuk-heading-xl">{{ title }}</h1>
+
+  <div class="nhsuk-grid-row">
+    <div class="nhsuk-grid-column-two-thirds">
+
+      <p class="nhsuk-body-l">
+        These examples only illustrate how our components display translated text.
+        We do not guarantee that they are accurate.
+      </p>
+
+      <hr class="nhsuk-section-break nhsuk-section-break--l nhsuk-section-break--visible">
+
+      {{ characterCount({
+        label: {
+          text: "Allwch chi roi mwy o fanylion?",
+          classes: "nhsuk-label--l",
+          isPageHeading: true
+        },
+        hint: {
+          text: "Peidiwch â chynnwys gwybodaeth bersonol, fel eich enw, dyddiad geni na rhif y GIG"
+        },
+        name: "with-translations-maxlength",
+        maxlength: 200,
+        textareaDescriptionText: "Gallwch ddefnyddio hyd at %{count} nod",
+        charactersUnderLimitText: {
+          one: "Mae gennych %{count} nod ar ôl",
+          two: "Mae gennych %{count} nod ar ôl",
+          few: "Mae gennych %{count} nod ar ôl",
+          many: "Mae gennych %{count} nod ar ôl",
+          other: "Mae gennych %{count} nod ar ôl"
+        },
+        charactersAtLimitText: "Mae gennych 0 nod ar ôl",
+        charactersOverLimitText: {
+          one: "Mae gennych %{count} nod yn ormod",
+          two: "Mae gennych %{count} nod yn ormod",
+          few: "Mae gennych %{count} nod yn ormod",
+          many: "Mae gennych %{count} nod yn ormod",
+          other: "Mae gennych chi %{count} nod yn ormod"
+        }
+      }) }}
+
+      {{ characterCount({
+        label: {
+          text: "Allwch chi roi mwy o fanylion?",
+          classes: "nhsuk-label--l",
+          isPageHeading: true
+        },
+        hint: {
+          text: "Peidiwch â chynnwys gwybodaeth bersonol, fel eich enw, dyddiad geni na rhif y GIG"
+        },
+        name: "with-translations-maxwords",
+        maxwords: 10,
+        textareaDescriptionText: "Gallwch ddefnyddio hyd at %{count} nod",
+        wordsUnderLimitText: {
+          one: "Mae gennych %{count} gair ar ôl",
+          two: "Mae gennych %{count} air ar ôl",
+          few: "Mae gennych %{count} o eiriau ar ôl",
+          many: "Mae gennych %{count} o eiriau ar ôl",
+          other: "Mae gennych %{count} o eiriau ar ôl"
+        },
+        wordsAtLimitText: "Mae gennych 0 gair ar ôl",
+        wordsOverLimitText: {
+          one: "Mae gennych %{count} gair yn ormod",
+          two: "Mae gennych %{count} air yn ormod",
+          few: "Mae gennych %{count} o eiriau yn ormod",
+          many: "Mae gennych %{count} o eiriau yn ormod",
+          other: "Mae gennych %{count} o eiriau yn ormod"
+        }
+      }) }}
+
+      <div class="nhsuk-button-group">
+        {{ button({
+          text: "Cadw a pharhau"
+        }) }}
+      </div>
+
+    </div>
+  </div>
+{% endblock %}

packages/nhsuk-frontend-review/src/index.njk

@@ -94,6 +94,10 @@
             href: "examples/task-list-multiple-sections/",
             text: "Task list with multiple sections"
           },
+          {
+            href: "examples/translated/",
+            text: "Translated examples"
+          },
           {
             href: "examples/typography/",
             text: "Typography and spacing examples"