Add some new components from 0.1.27

layouts/_example.njk

@@ -79,13 +79,13 @@
                   {{ option.description | safe }}
                   {% if (option.isComponent) -%}
                     {% if (option.name === "hint" or option.name === "label") %}
-                      <p>See <a href="#options-{{ exampleId }}--{{ option.name }}">{{ option.name }}</a>.</p>
+                      <p>See <a href="#options-{{ exampleId }}--{{ option.name }}" class="tna-link--no-visited-state">{{ option.name }}</a>.</p>
                     {% else %}
-                      <p>See <a href="/components/{{ option.slug }}/#options-{{ option.name | kebabCase }}-example">{{ option.name }}</a>.</p>
+                      <p>See <a href="/components/{{ option.slug }}/#options-{{ option.name | kebabCase }}-example" class="tna-link--no-visited-state">{{ option.name }}</a>.</p>
                     {% endif %}
                   {% endif %}
                   {% if (option.params) %}
-                    <p>See <a href="#options-{{ exampleId }}--{{ option.name }}">{{ option.name }}</a>.</p>
+                    <p>See <a href="#options-{{ exampleId }}--{{ option.name }}" class="tna-link--no-visited-state">{{ option.name }}</a>.</p>
                   {% endif -%}
                 </td>
               </tr>

lib/modules/_component-example.scss

@@ -55,11 +55,11 @@
     }
 
     &--xs {
-      height: 6rem;
+      height: 7rem;
     }
 
     &--s {
-      height: 10rem;
+      height: 11rem;
     }
 
     &--m {

lib/modules/_examples.scss

@@ -30,6 +30,10 @@ p:has(+ p.tna-\!--no-margin-top) {
   max-width: 50rem;
 }
 
+.tna-cookie-banner--demo {
+  display: block !important;
+}
+
 .tna-grid--demo {
   padding-top: 2rem;
 

package.json

@@ -40,7 +40,7 @@
     "@metalsmith/markdown": "^1.10.0",
     "@metalsmith/permalinks": "^2.5.1",
     "@metalsmith/sass": "^1.6.0",
-    "@nationalarchives/frontend": "0.1.25-prerelease",
+    "@nationalarchives/frontend": "0.1.27-prerelease",
     "glob": "^10.3.4",
     "gray-matter": "^4.0.3",
     "js-beautify": "^1.14.8",

src/components/checkboxes/default/index.njk

@@ -0,0 +1,28 @@
+---
+title: Checkboxes
+layout: layout-example.njk
+---
+
+{% from "nationalarchives/components/checkboxes/macro.njk" import tnaCheckboxes %}
+
+{{ tnaCheckboxes({
+  label: "Categories",
+  headingLevel: 4,
+  headingSize: "m",
+  id: "categories",
+  name: "categories",
+  items: [
+    {
+      text: "Alpha",
+      value: "alpha"
+    },
+    {
+      text: "Beta",
+      value: "beta"
+    },
+    {
+      text: "Gamma",
+      value: "gamma"
+    }
+  ]
+}) }}

src/components/checkboxes/error/index.njk

@@ -0,0 +1,31 @@
+---
+title: Checkboxes with an error
+layout: layout-example.njk
+---
+
+{% from "nationalarchives/components/checkboxes/macro.njk" import tnaCheckboxes %}
+
+{{ tnaCheckboxes({
+  label: "Categories",
+  headingLevel: 4,
+  headingSize: "m",
+  id: "categories",
+  name: "categories",
+  error: {
+    text: "You must select a category"
+  },
+  items: [
+    {
+      text: "Alpha",
+      value: "alpha"
+    },
+    {
+      text: "Beta",
+      value: "beta"
+    },
+    {
+      text: "Gamma",
+      value: "gamma"
+    }
+  ]
+}) }}

src/components/checkboxes/hint/index.njk

@@ -0,0 +1,29 @@
+---
+title: Checkboxes with a hint
+layout: layout-example.njk
+---
+
+{% from "nationalarchives/components/checkboxes/macro.njk" import tnaCheckboxes %}
+
+{{ tnaCheckboxes({
+  label: "Categories",
+  headingLevel: 4,
+  headingSize: "m",
+  id: "categories",
+  name: "categories",
+  hint: "Select all that apply.",
+  items: [
+    {
+      text: "Alpha",
+      value: "alpha"
+    },
+    {
+      text: "Beta",
+      value: "beta"
+    },
+    {
+      text: "Gamma",
+      value: "gamma"
+    }
+  ]
+}) }}

src/components/checkboxes/index.md

@@ -0,0 +1,31 @@
+---
+layout: collection-page.njk
+title: Checkboxes
+group: components
+---
+
+The checkboxes component is for...
+
+{% from "_example.njk" import example %}
+
+{{ example({ group: "components", item: "checkboxes", example: "default", html: true, nunjucks: true, open: false, size: "s" }) }}
+
+## Small
+
+{{ example({ group: "components", item: "checkboxes", example: "small", html: true, nunjucks: false, open: false, size: "l" }) }}
+
+## Preselected
+
+{{ example({ group: "components", item: "checkboxes", example: "preselected", html: true, nunjucks: false, open: false, size: "s" }) }}
+
+## Hint
+
+{{ example({ group: "components", item: "checkboxes", example: "hint", html: true, nunjucks: false, open: false }) }}
+
+## Error
+
+{{ example({ group: "components", item: "checkboxes", example: "error", html: true, nunjucks: false, open: false }) }}
+
+## Inline
+
+{{ example({ group: "components", item: "checkboxes", example: "inline", html: true, nunjucks: false, open: false, size: "xxs" }) }}

src/components/checkboxes/inline/index.njk

@@ -0,0 +1,29 @@
+---
+title: Checkboxes - inline
+layout: layout-example.njk
+---
+
+{% from "nationalarchives/components/checkboxes/macro.njk" import tnaCheckboxes %}
+
+{{ tnaCheckboxes({
+  label: "Categories",
+  headingLevel: 4,
+  headingSize: "m",
+  id: "categories",
+  name: "categories",
+  items: [
+    {
+      text: "Alpha",
+      value: "alpha"
+    },
+    {
+      text: "Beta",
+      value: "beta"
+    },
+    {
+      text: "Gamma",
+      value: "gamma"
+    }
+  ],
+  inline: true
+}) }}

src/components/checkboxes/preselected/index.njk

@@ -0,0 +1,29 @@
+---
+title: Checkboxes with a preselected value
+layout: layout-example.njk
+---
+
+{% from "nationalarchives/components/checkboxes/macro.njk" import tnaCheckboxes %}
+
+{{ tnaCheckboxes({
+  label: "Categories",
+  headingLevel: 4,
+  headingSize: "m",
+  id: "categories",
+  name: "categories",
+  items: [
+    {
+      text: "Alpha",
+      value: "alpha"
+    },
+    {
+      text: "Beta",
+      value: "beta",
+      checked: true
+    },
+    {
+      text: "Gamma",
+      value: "gamma"
+    }
+  ]
+}) }}

src/components/checkboxes/small/index.njk

@@ -0,0 +1,57 @@
+---
+title: Checkboxes - small
+layout: layout-example.njk
+---
+
+{% from "nationalarchives/components/checkboxes/macro.njk" import tnaCheckboxes %}
+
+{{ tnaCheckboxes({
+  label: "Categories",
+  headingLevel: 4,
+  headingSize: "m",
+  id: "categories",
+  name: "categories",
+  items: [
+    {
+      text: "Admiralty, Navy, Royal Marines, and Coastguard",
+      value: "ADM"
+    },
+    {
+      text: "Air Ministry and Royal Air Force records",
+      value: "AIR"
+    },
+    {
+      text: "Board of Trade and successors",
+      value: "BT"
+    },
+    {
+      text: "Chancery, the Wardrobe, Royal Household, Exchequer and various commissions",
+      value: "C"
+    },
+    {
+      text: "Colonial Office, Commonwealth and Foreign and Commonwealth Offices",
+      value: "CO"
+    },
+    {
+      text: "Exchequer, Office of First Fruits and Tenths, and the Court of Augmentations",
+      value: "E"
+    },
+    {
+      text: "Foreign Office",
+      value: "FO"
+    },
+    {
+      text: "Home Office",
+      value: "HO"
+    },
+    {
+      text: "Prerogative Court of Canterbury",
+      value: "PROB"
+    },
+    {
+      text: "War Office, Armed Forces, Judge Advocate General, and related bodies",
+      value: "WO"
+    }
+  ],
+  small: true
+}) }}

src/components/cookie-banner/default/index.njk

@@ -0,0 +1,11 @@
+---
+title: Cookie banner
+layout: layout-example.njk
+---
+
+{% from "nationalarchives/components/cookie-banner/macro.njk" import tnaCookieBanner %}
+
+{{ tnaCookieBanner({
+  cookiesUrl: "#/cookies",
+  classes: "tna-cookie-banner--demo"
+}) }}

src/components/cookie-banner/index.md

@@ -0,0 +1,12 @@
+---
+layout: collection-page.njk
+title: Cookie banner
+description: Also known as navigation path or cookie crumb
+group: components
+---
+
+The cookie banner component is for...
+
+{% from "_example.njk" import example %}
+
+{{ example({ group: "components", item: "cookie-banner", example: "default", html: true, nunjucks: true, open: false }) }}

src/components/date-input/default/index.njk

@@ -0,0 +1,14 @@
+---
+title: Date input
+layout: layout-example.njk
+---
+
+{% from "nationalarchives/components/date-input/macro.njk" import tnaDateInput %}
+
+{{ tnaDateInput({
+  label: "Enter a start date",
+  headingLevel: 4,
+  headingSize: "m",
+  id: "date",
+  name: "date"
+}) }}

src/components/date-input/error/index.njk

@@ -0,0 +1,17 @@
+---
+title: Date input with an error
+layout: layout-example.njk
+---
+
+{% from "nationalarchives/components/date-input/macro.njk" import tnaDateInput %}
+
+{{ tnaDateInput({
+  label: "Enter a start date",
+  headingLevel: 4,
+  headingSize: "m",
+  id: "date",
+  name: "date",
+  error: {
+    text: "Date is not valid"
+  }
+}) }}

src/components/date-input/hint/index.njk

@@ -0,0 +1,15 @@
+---
+title: Date input with a hint
+layout: layout-example.njk
+---
+
+{% from "nationalarchives/components/date-input/macro.njk" import tnaDateInput %}
+
+{{ tnaDateInput({
+  label: "Enter a start date",
+  headingLevel: 4,
+  headingSize: "m",
+  id: "date",
+  name: "date",
+  hint: "The earliest date of the record"
+}) }}