@nationalarchives/frontend 0.41.1 → 0.42.0

package/nationalarchives/templates/fixtures.json

@@ -64,7 +64,7 @@
       "options": {
         "subject": "Respond to a request to access a record",
         "content": "<p>You have received a request to access the following record:</p><dl class=\"tna-dl tna-dl--plain\"><dt>Record IAID</dt><dd>C1234</dd><dt>Record name</dt><dd>Example record</dd></dl><p>Please review the request and either accept or reject it.</p>",
-        "cta_buttons": [
+        "ctaButtons": [
           {
             "text": "Accept this request",
             "href": "#"

package/nationalarchives/templates/layouts/email.njk

@@ -57,10 +57,10 @@
                   </tr>
                   {% endif %}
 
-                  {% if cta_buttons is defined and cta_buttons %}
+                  {% if ctaButtons is defined and ctaButtons %}
                   <tr>
                     <td style="padding:0 32px 32px;">
-                      {% for button in cta_buttons %}
+                      {% for button in ctaButtons %}
                       <table role="presentation" border="0" cellpadding="0" cellspacing="0" style="border-collapse:collapse;">
                         <tr>
                           <td style="padding:0 0 12px 0;">

package/nationalarchives/templates/prototype-kit/plain-with-sidebar.njk

@@ -0,0 +1,74 @@
+{%- extends "nationalarchives/templates/prototype-kit/_base.njk" -%}
+
+{%- from "nationalarchives/components/breadcrumbs/macro.njk" import tnaBreadcrumbs -%}
+{%- from "nationalarchives/components/sidebar/macro.njk" import tnaSidebar -%}
+
+{% set pageTitle = 'Plain page with sidebar' %}
+{% set theme = 'light' %}
+{% set themeAccent = 'blue' %}
+
+{% block beforeContent %}
+<div class="tna-container">
+  {{ tnaBreadcrumbs({
+    items: [
+      {
+        text: 'Home',
+        href: '/'
+      }
+    ],
+    classes: 'tna-column tna-column--full tna-!--padding-top-s'
+  }) }}
+</div>
+{% endblock beforeContent %}
+
+{% block content %}
+<div class="tna-container tna-!--padding-top-l tna-!--padding-bottom-xl">
+  <div class="tna-column tna-column--full">
+    <h1 class="tna-heading-xl">{{ pageTitle }}</h1>
+    <p class="tna-large-paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sit amet luctus libero. Cras nec mauris ex. Fusce nisl erat, efficitur sed auctor ornare, varius fermentum arcu.</p>
+  </div>
+  {% set sidebar_example_items = [
+    {
+      text: 'Alpha',
+      href: '#alpha'
+    },
+    {
+      text: 'Beta',
+      href: '#beta'
+    },
+    {
+      text: 'Gamma',
+      href: '#gamma'
+    },
+    {
+      text: 'Delta',
+      href: '#delta'
+    },
+    {
+      text: 'Epsilon',
+      href: '#epsilon'
+    },
+    {
+      text: 'Zeta',
+      href: '#zeta'
+    }
+  ] %}
+  <div class="tna-column tna-column--width-1-3 tna-column--full-small tna-column--full-tiny">
+    {{ tnaSidebar({
+      title: 'On this page',
+      headingLevel: 2,
+      items: sidebar_example_items,
+      type: 'sections',
+      sticky: true,
+      classes: 'tna-!--margin-top-m tna-!--padding-top-s'
+    }) }}
+  </div>
+  <div class="tna-column tna-column--width-2-3 tna-column--full-small tna-column--full-tiny tna-!--padding-bottom-xl tna-!--margin-top-m">
+    {%- for item in sidebar_example_items %}
+    <h2 class="tna-heading-l tna-!--padding-top-s" id="{{ item.href.slice(1) }}">{{ item.text }}</h2>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque quis vulputate nulla, nec aliquet velit. Aliquam tristique lorem tortor, et volutpat diam fringilla vel. Etiam aliquet pulvinar justo, a aliquet sem rhoncus non. Donec non felis elementum, accumsan eros ut, feugiat elit. Integer suscipit, sapien elementum vulputate pretium, risus nunc imperdiet purus, ut sagittis tellus velit vel magna. Etiam mauris massa, fringilla eu tincidunt sit amet, commodo bibendum tortor. Curabitur aliquam scelerisque ex, id fringilla metus ultricies cursus. Curabitur eget malesuada dui. Etiam vel iaculis nibh, tincidunt ullamcorper lectus. Integer sed efficitur erat.</p>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque quis vulputate nulla, nec aliquet velit. Aliquam tristique lorem tortor, et volutpat diam fringilla vel. Etiam aliquet pulvinar justo, a aliquet sem rhoncus non. Donec non felis elementum, accumsan eros ut, feugiat elit. Integer suscipit, sapien elementum vulputate pretium, risus nunc imperdiet purus, ut sagittis tellus velit vel magna. Etiam mauris massa, fringilla eu tincidunt sit amet, commodo bibendum tortor. Curabitur aliquam scelerisque ex, id fringilla metus ultricies cursus. Curabitur eget malesuada dui. Etiam vel iaculis nibh, tincidunt ullamcorper lectus. Integer sed efficitur erat.</p>
+    {%- endfor %}
+  </div>
+</div>
+{% endblock content %}

package/nationalarchives/templates/prototype-kit/plain.njk

@@ -15,7 +15,7 @@
         href: '/'
       }
     ],
-    classes: 'tna-column tna-column--full tna-!--padding-vertical-s'
+    classes: 'tna-column tna-column--full tna-!--padding-top-s'
   }) }}
 </div>
 {% endblock beforeContent %}

package/nationalarchives/tools/_grid.scss

@@ -34,6 +34,7 @@
   .tna-column {
     &--full#{$suffix} {
       width: 100%;
+
       flex: none;
     }
 
@@ -46,6 +47,7 @@
         ) {
           &--width-#{math.div($i, $j)}-#{math.div($count, $j)}#{$suffix} {
             width: math.div(100%, $count) * $i;
+
             flex: none;
           }
 
@@ -64,6 +66,7 @@
       @if $simplest-fraction-found != true {
         &--width-#{$i}-#{$count}#{$suffix} {
           width: math.div(100%, $count) * $i;
+
           flex: none;
         }
 

package/nationalarchives/tools/_typography.scss

@@ -26,9 +26,9 @@
 
 @mixin main-font($bold: false) {
   font-family: typography.$main-font-family;
+  font-variation-settings: "wdth" 100;
   font-style: normal;
   font-optical-sizing: auto;
-  font-variation-settings: "wdth" 100;
   @if $bold {
     @include main-font-weight-bold;
   } @else {

package/nationalarchives/utilities/reset/_index.scss

@@ -1,3 +1,4 @@
+@use "../../variables/media" as mediaVars;
 @use "../../tools/colour";
 @use "../../tools/typography";
 
@@ -17,6 +18,9 @@
  * ------------------------------------------
  */
 :root {
+  --media-breakpoint-tiny: #{mediaVars.$largest-tiny-device-px}px;
+  --media-breakpoint-small: #{mediaVars.$largest-small-device-px}px;
+  --media-breakpoint-medium: #{mediaVars.$largest-medium-device-px}px;
   color-scheme: only light;
 }
 

package/nationalarchives/utilities/tables/_index.scss

@@ -13,15 +13,15 @@ $table-overflow-shadow-colour: rgb(0 0 0 / 40%);
 $table-overflow-shadow-colour-hidden: rgb(0 0 0 / 0%);
 
 @property --overflow-shadow-start {
-  syntax: "<color>";
   inherits: false;
   initial-value: #{$table-overflow-shadow-colour-hidden};
+  syntax: "<color>";
 }
 
 @property --overflow-shadow-end {
-  syntax: "<color>";
   inherits: false;
   initial-value: #{$table-overflow-shadow-colour-hidden};
+  syntax: "<color>";
 }
 
 @keyframes overflow-shadows {
@@ -162,6 +162,8 @@ $table-overflow-shadow-colour-hidden: rgb(0 0 0 / 0%);
   @include spacing.space-above;
   margin-bottom: spacing.space(4);
 
+  container-type: inline-size;
+
   overflow: auto;
 
   background:
@@ -193,17 +195,15 @@ $table-overflow-shadow-colour-hidden: rgb(0 0 0 / 0%);
     100% 100%,
     100% 100%;
   background-repeat: no-repeat;
+  background-attachment: local, local, scroll, scroll;
   background-position:
     0 0,
     100%,
     0 0,
     100%;
-  background-attachment: local, local, scroll, scroll;
 
   border-radius: 0.1px;
 
-  container-type: inline-size;
-
   contain: paint;
 
   @include a11y.focus-indicator-only-on-keyboard-focus;
@@ -236,6 +236,7 @@ $table-overflow-shadow-colour-hidden: rgb(0 0 0 / 0%);
 
     animation: overflow-shadows 1ms linear;
     animation-timeline: --overflow-shadows;
+
     scroll-timeline: --overflow-shadows x;
   }
 

package/nationalarchives/utilities/typography/_index.scss

@@ -14,6 +14,7 @@
   text-rendering: optimizeLegibility;
   -webkit-text-size-adjust: none;
   text-size-adjust: none;
+
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nationalarchives/frontend",
-  "version": "0.41.1",
+  "version": "0.42.0",
   "description": "The National Archives frontend styles",
   "scripts": {
     "start": "storybook dev -p 6006",
@@ -51,29 +51,29 @@
     "@babel/core": "^7.25.8",
     "@babel/preset-env": "^7.25.8",
     "@mdx-js/react": "^3.0.1",
-    "@storybook/addon-a11y": "^10.1.11",
-    "@storybook/addon-docs": "^10.1.11",
-    "@storybook/addon-links": "^10.1.11",
+    "@nationalarchives/stylelint-config": "^0.1.1",
+    "@nationalarchives/eslint-config": "^0.1.4",
+    "@storybook/addon-a11y": "^10.4.0",
+    "@storybook/addon-docs": "^10.4.0",
+    "@storybook/addon-links": "^10.4.0",
     "@storybook/addon-styling-webpack": "^3.0.0",
-    "@storybook/addon-vitest": "^10.1.11",
-    "@storybook/html-vite": "^10.1.11",
-    "@storybook/web-components-vite": "^10.1.11",
+    "@storybook/addon-vitest": "^10.4.0",
+    "@storybook/html-vite": "^10.4.0",
+    "@storybook/web-components-vite": "^10.4.0",
     "@vitest/browser-playwright": "^4.0.6",
     "@vitest/coverage-v8": "^4.0.6",
     "axe-playwright": "^2.0.3",
     "babel-jest": "^30.1.1",
     "babel-loader": "^10.0.0",
-    "chromatic": "^13.1.3",
+    "chromatic": "^16.0.0",
     "copy-webpack-plugin": "^14.0.0",
     "css-loader": "^7.1.2",
-    "diff": "^8.0.0",
-    "eslint": "^8.57.1",
-    "eslint-plugin-storybook": "^10.1.11",
-    "glob": "^11.0.0",
-    "html-validate": "^10.0.0",
+    "diff": "^9.0.0",
+    "eslint-plugin-storybook": "^10.4.0",
+    "glob": "^13.0.0",
+    "html-validate": "^11.0.0",
     "jest": "^30.2.0",
     "jest-environment-jsdom": "^30.1.1",
-    "mdx-mermaid": "^2.0.1",
     "node-self": "^1.0.2",
     "nunjucks": "^3.2.4",
     "playwright": "^1.56.1",
@@ -81,17 +81,13 @@
     "prismjs": "^1.30.0",
     "sass": "^1.79.5",
     "sass-embedded": "^1.91.0",
-    "sass-loader": "^16.0.2",
+    "sass-loader": "^17.0.0",
     "simple-nunjucks-loader": "^3.2.0",
-    "storybook": "^10.1.11",
+    "storybook": "^10.4.0",
     "style-loader": "^4.0.0",
-    "stylelint": "^16.10.0",
-    "stylelint-config-standard-scss": "^16.0.0",
-    "stylelint-order": "^7.0.0",
-    "stylelint-selector-bem-pattern": "^4.0.1",
-    "vite-plugin-static-copy": "^3.1.4",
+    "vite-plugin-static-copy": "^4.0.0",
     "vitest": "^4.0.6",
     "webpack": "^5.95.0",
-    "webpack-cli": "^6.0.1"
+    "webpack-cli": "^7.0.0"
   }
 }

package/config/.eslintrc.js

@@ -1,25 +0,0 @@
-module.exports = {
-  env: {
-    browser: true,
-    es2021: true,
-  },
-  extends: ["eslint:recommended"],
-  overrides: [
-    {
-      env: {
-        browser: true,
-        es2021: true,
-        node: true,
-      },
-      files: [".eslintrc.{js,cjs}", "**/*.test.js"],
-      parserOptions: {
-        sourceType: "module",
-      },
-    },
-  ],
-  parserOptions: {
-    ecmaVersion: "latest",
-    sourceType: "module",
-  },
-  rules: {},
-};

package/config/stylelint.config.js

@@ -1,244 +0,0 @@
-module.exports = {
-  extends: ["stylelint-config-standard-scss"],
-  plugins: ["stylelint-selector-bem-pattern", "stylelint-order"],
-  ignoreFiles: ["src/nationalarchives/lib/font-awesome/**/*.scss", "**/*.css"],
-  rules: {
-    "at-rule-empty-line-before": null,
-    "block-no-empty": null,
-    "declaration-empty-line-before": null,
-    "property-no-vendor-prefix": null,
-    "value-keyword-case": null,
-    "scss/dollar-variable-empty-line-before": null,
-    "scss/double-slash-comment-empty-line-before": null,
-    "selector-class-pattern": null,
-    "no-invalid-position-at-import-rule": null,
-    "plugin/selector-bem-pattern": {
-      preset: "bem",
-    },
-    "color-function-notation": [
-      "modern",
-      {
-        ignore: ["with-var-inside"],
-      },
-    ],
-    "scss/operator-no-newline-after": null,
-    "order/order": ["dollar-variables", "custom-properties", "declarations"],
-    "order/properties-order": [
-      [
-        {
-          emptyLineBefore: "always",
-          properties: ["content"],
-        },
-        {
-          emptyLineBefore: "always",
-          properties: [
-            "min-width",
-            "width",
-            "max-width",
-            "min-height",
-            "height",
-            "max-height",
-            "aspect-ratio",
-            "margin",
-            "margin-top",
-            "margin-right",
-            "margin-bottom",
-            "margin-left",
-            "padding",
-            "padding-top",
-            "padding-right",
-            "padding-bottom",
-            "padding-left",
-          ],
-        },
-        {
-          emptyLineBefore: "always",
-          properties: [
-            "grid-column-start",
-            "grid-column-end",
-            "grid-row-start",
-            "grid-row-end",
-            "grid-column",
-            "grid-row",
-            "grid-area",
-            "justify-self",
-            "align-self",
-            "place-self",
-          ],
-        },
-        {
-          emptyLineBefore: "always",
-          properties: [
-            "appearance",
-            "display",
-            "flex-wrap",
-            "flex-direction",
-            "grid",
-            "grid-template",
-            "grid-template-columns",
-            "grid-template-rows",
-            "grid-template-areas",
-            "grid-auto-columns",
-            "grid-auto-rows",
-            "grid-auto-flow",
-            "justify-items",
-            "align-items",
-            "place-items",
-            "justify-content",
-            "align-content",
-            "place-content",
-            "grid-column-gap",
-            "grid-row-gap",
-            "grid-gap",
-            "gap",
-            "box-sizing",
-            "visibility",
-            "overflow",
-            "overflow-x",
-            "overflow-y",
-            "resize",
-          ],
-        },
-        {
-          emptyLineBefore: "always",
-          properties: ["float", "clear"],
-        },
-        {
-          emptyLineBefore: "always",
-          properties: [
-            "position",
-            "inset",
-            "top",
-            "right",
-            "bottom",
-            "left",
-            "z-index",
-          ],
-        },
-        {
-          emptyLineBefore: "always",
-          properties: [
-            "color",
-            "font-family",
-            "src",
-            "font-size",
-            "font-weight",
-            "line-height",
-            "text-align",
-            "text-align-last",
-            "vertical-align",
-            "font-style",
-            "font-display",
-            "font-optical-sizing",
-            "text-transform",
-            "text-decoration",
-            "text-decoration-thickness",
-            "text-decoration-style",
-            "text-decoration-color",
-            "text-underline-position",
-            "text-underline-offset",
-            "direction",
-            "letter-spacing",
-            "word-spacing",
-            "text-indent",
-            "text-justify",
-            "text-overflow",
-            "text-overflow-ellipsis",
-            "text-overflow-mode",
-            "text-rendering",
-            "text-size-adjust",
-            "text-outline",
-            "text-shadow",
-            "text-transform",
-            "text-wrap",
-            "word-wrap",
-            "word-break",
-            "text-emphasis",
-            "white-space",
-            "word-spacing",
-            "hyphens",
-          ],
-        },
-        {
-          emptyLineBefore: "always",
-          properties: ["columns", "column-gap"],
-        },
-        {
-          emptyLineBefore: "always",
-          properties: ["list-style", "list-style-position"],
-        },
-        {
-          emptyLineBefore: "always",
-          properties: ["fill"],
-        },
-        {
-          emptyLineBefore: "always",
-          properties: [
-            "background",
-            "background-color",
-            "background-image",
-            "background-size",
-            "background-repeat",
-            "background-clip",
-          ],
-        },
-        {
-          emptyLineBefore: "always",
-          properties: [
-            "border",
-            "border-width",
-            "border-color",
-            "border-style",
-            "border-top-width",
-            "border-top-color",
-            "border-top-style",
-            "border-right-width",
-            "border-right-color",
-            "border-right-style",
-            "border-bottom-width",
-            "border-bottom-color",
-            "border-bottom-style",
-            "border-left-width",
-            "border-left-color",
-            "border-left-style",
-            "border-collapse",
-            "border-radius",
-            "border-top-left-radius",
-            "border-top-right-radius",
-            "border-bottom-left-radius",
-            "border-bottom-right-radius",
-            "outline",
-            "outline-width",
-            "outline-color",
-            "outline-style",
-            "outline-offset",
-          ],
-        },
-        {
-          emptyLineBefore: "always",
-          properties: ["box-shadow"],
-        },
-        {
-          emptyLineBefore: "always",
-          properties: ["transform"],
-        },
-        {
-          emptyLineBefore: "always",
-          properties: ["translate"],
-        },
-        {
-          emptyLineBefore: "always",
-          properties: ["opacity"],
-        },
-        {
-          emptyLineBefore: "always",
-          properties: ["cursor"],
-        },
-        {
-          emptyLineBefore: "always",
-          properties: ["clip", "clip-path", "zoom", "resize"],
-        },
-      ],
-    ],
-  },
-};