From 1a867f2fd9214e72914085e5e5b7f4fff7d3950c Mon Sep 17 00:00:00 2001 From: Andrew Hosgood Date: Thu, 30 May 2024 16:16:36 +0100 Subject: [PATCH] Update TNA Frontend, refactor section index pages --- .metalsmith/markdownRenderer.js | 4 +- layouts/_design-system-base.njk | 2 +- layouts/collection-page-index.njk | 63 ++++++++++++++ layouts/collection-page.njk | 17 ++-- layouts/partials/example.njk | 2 - package-lock.json | 8 +- package.json | 2 +- src/components/accordion/index.md | 3 +- src/components/breadcrumbs/index.md | 4 +- src/components/button/index.md | 3 +- src/components/card/index.md | 1 + src/components/checkboxes/index.md | 1 + src/components/compound-filters/index.md | 3 +- src/components/cookie-banner/index.md | 4 +- src/components/date-input/index.md | 5 +- src/components/date-search/index.md | 5 +- src/components/details/index.md | 3 +- src/components/error-summary/index.md | 3 +- src/components/featured-records/index.md | 3 +- src/components/footer/index.md | 3 +- src/components/gallery/index.md | 3 +- src/components/global-header/index.md | 3 +- src/components/header/index.md | 3 +- src/components/hero/index.md | 3 +- src/components/index-grid/index.md | 3 +- src/components/index.md | 4 +- src/components/pagination/index.md | 3 +- src/components/phase-banner/index.md | 3 +- src/components/picture/index.md | 3 +- src/components/quick-filters/index.md | 3 +- src/components/radios/index.md | 3 +- src/components/search-field/index.md | 3 +- src/components/search-filters/index.md | 3 +- src/components/select/index.md | 3 +- src/components/skip-link/index.md | 3 +- src/components/tabs/index.md | 3 +- src/components/text-input/index.md | 3 +- src/components/textarea/index.md | 3 +- src/components/warning/index.md | 3 +- src/content/dates-and-times/index.md | 1 + src/content/error-pages/index.md | 1 + src/content/index.md | 6 +- src/content/style-guide/index.md | 1 + src/get-started/index.md | 13 +-- src/get-started/production/index.md | 1 + src/get-started/prototyping/index.md | 5 +- src/performance/feedback/index.md | 1 + src/performance/index.md | 2 +- src/styles/colours/index.md | 1 + src/styles/forms/index.md | 1 + src/styles/icons/index.md | 7 +- src/styles/images/index.md | 3 +- src/styles/index.md | 4 +- src/styles/layout/index.md | 87 ++----------------- src/styles/links/index.md | 7 +- src/styles/lists/index.md | 5 +- src/styles/media/index.md | 8 +- src/styles/page-template/index.md | 71 +++++++++++++++ .../template/index.njk | 0 src/styles/spacing/index.md | 1 + src/styles/tables/index.md | 3 +- src/styles/typography/index.md | 7 +- 62 files changed, 241 insertions(+), 192 deletions(-) create mode 100644 layouts/collection-page-index.njk create mode 100644 src/styles/page-template/index.md rename src/styles/{layout => page-template}/template/index.njk (100%) diff --git a/.metalsmith/markdownRenderer.js b/.metalsmith/markdownRenderer.js index 4932721..72e6726 100644 --- a/.metalsmith/markdownRenderer.js +++ b/.metalsmith/markdownRenderer.js @@ -60,9 +60,7 @@ markdownRenderer.paragraph = function (text) { }; markdownRenderer.link = function (href, title, text) { - return `${text}`; + return `${text}`; }; markdownRenderer.table = function (head, body) { diff --git a/layouts/_design-system-base.njk b/layouts/_design-system-base.njk index 5618697..03eeb7b 100644 --- a/layouts/_design-system-base.njk +++ b/layouts/_design-system-base.njk @@ -21,7 +21,7 @@ {%- set themeAccent = "blue" -%} {% endif %} -{%- set siteTitle = "Design System - The National Archives" -%} +{%- set siteTitle = "The National Archives Design System" -%} {%- set pageTitle = title -%} {% block head %} diff --git a/layouts/collection-page-index.njk b/layouts/collection-page-index.njk new file mode 100644 index 0000000..296cfe4 --- /dev/null +++ b/layouts/collection-page-index.njk @@ -0,0 +1,63 @@ +{% extends "./_design-system-base.njk" %} + +{%- from "nationalarchives/components/card/macro.njk" import tnaCard -%} + +{% block cookies %} + +{{ super() }} +{% endblock %} + +{% block skipLink %} +{{ super() }} +{{ tnaSkipLink({ + href: group + '-list', + text: 'Skip to list of ' + group +}) }} +{% endblock %} + +{% block main %} + {% set headings = contents | headingsList %} + {% set groupTitle = group | kebabToSpace | capitalize %} + {% set topLevel = groupTitle == title | capitalize %} +
+ {% include "partials/breadcrumbs.njk" %} +
+
+
+
+
+

+ {{ title }} +

+

{{ description }}

+
+
+
+ {%- if contents %} +
+
+ {{ contents | safe }} +
+
+ {%- endif %} + +
+{% endblock %} + +{% block bodyEnd %} + {{ super() }} + + +{% endblock %} diff --git a/layouts/collection-page.njk b/layouts/collection-page.njk index 5a1abde..07c635d 100644 --- a/layouts/collection-page.njk +++ b/layouts/collection-page.njk @@ -30,12 +30,15 @@

{{ title }}

{% endif %} + {% if description %} +

{{ description }}

+ {% endif %} {% if not topLevel and headings %}

Contents

    {%- for heading in headings %}
  1. - + {{ heading.title }}
    2. @@ -51,33 +54,33 @@
      {# {% if not topLevel %}
    1. - {{ groupTitle }} overview + {{ groupTitle }} overview
      2. {% endif %} #} {% for item in collections[group] %} {% if item.path == path %}
    2. - {{ item.title }} + {{ item.title }} {% if headings %} {# TODO: Make a marco for this recursion #}
        {%- for heading in headings %}
      1. - + {{ heading.title }} {# {%- if heading.children %}
          {%- for child in heading.children %}
        1. - + {{ child.title }} {%- if child.children %}
            {%- for childChild in child.children %}
          1. - + {{ childChild.title }}
            2. @@ -95,7 +98,7 @@ {% else %}
          2. - {{ item.title }} + {{ item.title }}
            3. {% endif %} {% endfor %} diff --git a/layouts/partials/example.njk b/layouts/partials/example.njk index 61085db..fbefac1 100644 --- a/layouts/partials/example.njk +++ b/layouts/partials/example.njk @@ -23,7 +23,6 @@ {% set accordionItems = (accordionItems.push({ title: "HTML", body: '
            - 
            ' + (getHTMLCode(examplePath) | forceescape) + '
            ' }), accordionItems) %} @@ -37,7 +36,6 @@ body: exampleOptions(params, exampleId) }) if params.nunjucksOptions !== false else '' ) + '
            - 
            ' + (getNunjucksCode(examplePath) | forceescape) + '
            ' }), accordionItems) %} diff --git a/package-lock.json b/package-lock.json index 43f873b..fec45ba 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13,7 +13,7 @@ "@metalsmith/markdown": "^1.10.0", "@metalsmith/permalinks": "^2.5.1", "@metalsmith/sass": "^1.6.0", - "@nationalarchives/frontend": "0.1.56", + "@nationalarchives/frontend": "0.1.57", "glob": "^10.3.4", "gray-matter": "^4.0.3", "js-beautify": "^1.14.8", @@ -2104,9 +2104,9 @@ } }, "node_modules/@nationalarchives/frontend": { - "version": "0.1.56", - "resolved": "https://registry.npmjs.org/@nationalarchives/frontend/-/frontend-0.1.56.tgz", - "integrity": "sha512-DKxYAncf0XTJCHR1kukAo+FN9OuxI282buzEdx4ayJdN8ts1e+7mjjl0eyIpuoaUufhaJuZcf1Yr+pbU+sxdvA==" + "version": "0.1.57", + "resolved": "https://registry.npmjs.org/@nationalarchives/frontend/-/frontend-0.1.57.tgz", + "integrity": "sha512-5wEFQ/QljCU1nYBYcJ2+aEmRdGfU/udxnyY0B1KQnOycNMbCV5f6vYbbUL2lkLG/QisYfl4/5FFLttwlO0t/TQ==" }, "node_modules/@one-ini/wasm": { "version": "0.1.1", diff --git a/package.json b/package.json index 521423f..7b3ab32 100644 --- a/package.json +++ b/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.56", + "@nationalarchives/frontend": "0.1.57", "glob": "^10.3.4", "gray-matter": "^4.0.3", "js-beautify": "^1.14.8", diff --git a/src/components/accordion/index.md b/src/components/accordion/index.md index 9d17eb0..6dff58e 100644 --- a/src/components/accordion/index.md +++ b/src/components/accordion/index.md @@ -2,13 +2,12 @@ layout: collection-page.njk title: Accordion group: components +description: The accordion component lets users show and hide sections of related content on a page. --- {% from "partials/example.njk" import example %} {% from "partials/component-status.njk" import status %} -The accordion component lets users show and hide sections of related content on a page. - {{ example({ group: "components", item: "accordion", example: "default", html: true, nunjucks: true, size: "m" }) }} {{ status(false, 1, 1, 2, 2, false) }} diff --git a/src/components/breadcrumbs/index.md b/src/components/breadcrumbs/index.md index 48b0fa8..5866750 100644 --- a/src/components/breadcrumbs/index.md +++ b/src/components/breadcrumbs/index.md @@ -1,14 +1,14 @@ --- layout: collection-page.njk title: Breadcrumbs -description: Also known as navigation path or cookie crumb +description: Breadcrumbs help users to understand where they are within a websites structure and move between levels. group: components --- {% from "partials/example.njk" import example %} {% from "partials/component-status.njk" import status %} -The breadcrumbs component helps users to understand where they are within a website’s structure and move between levels. +The breadcrumbs component is also known as navigation path or cookie crumb. {{ example({ group: "components", item: "breadcrumbs", example: "default", html: true, nunjucks: true, size: "xxs" }) }} diff --git a/src/components/button/index.md b/src/components/button/index.md index 3320da6..4e27b8a 100644 --- a/src/components/button/index.md +++ b/src/components/button/index.md @@ -1,6 +1,7 @@ --- layout: collection-page.njk title: Button +description: The button component can be used as a call to action link or as a button element for use within forms. group: components --- @@ -15,7 +16,7 @@ The button component can be used as a call to action link or as a `