Update TNA Frontend, refactor section index pages

.metalsmith/markdownRenderer.js

@@ -60,9 +60,7 @@ markdownRenderer.paragraph = function (text) {
 };
 
 markdownRenderer.link = function (href, title, text) {
-  return `<a href="${href}" class="tna-link--no-visited-state"${
-    title ? ` title="${title}"` : ""
-  }>${text}</a>`;
+  return `<a href="${href}"${title ? ` title="${title}"` : ""}>${text}</a>`;
 };
 
 markdownRenderer.table = function (head, body) {

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 %}

layouts/collection-page-index.njk

@@ -0,0 +1,63 @@
+{% extends "./_design-system-base.njk" %}
+
+{%- from "nationalarchives/components/card/macro.njk" import tnaCard -%}
+
+{% block cookies %}
+<a id="top"></a>
+{{ 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 %}
+  <div class="tna-background-accent">
+    {% include "partials/breadcrumbs.njk" %}
+  </div>
+  <main class="tna-main {{ mainClasses }}" id="main-content">
+    <div class="tna-background-accent">
+      <div class="tna-container tna-section tna-!--padding-bottom-xl">
+        <div class="tna-column tna-column--width-2-3 tna-column--width-5-6-medium tna-column--full-small tna-column--full-tiny">
+          <h1 class="tna-heading-xl">
+            {{ title }}
+          </h1>
+          <p class="tna-large-paragraph">{{ description }}</p>
+        </div>
+      </div>
+    </div>
+    {%- if contents %}
+    <div class="tna-section tna-container">
+      <div class="tna-column tna-column--width-2-3 tna-column--width-5-6-medium tna-column--full-small tna-column--full-tiny">
+        {{ contents | safe }}
+      </div>
+    </div>
+    {%- endif %}
+    <nav id="{{ group }}-list" class="tna-section tna-!--no-padding-bottom" aria-label="{{ groupTitle }} pages">
+      <ul class="tna-container tna-ul tna-ul--plain">
+      {% for item in collections[group] %}
+        <li class="tna-column tna-column--width-1-4 tna-column--width-1-3-medium tna-column--width-1-2-small tna-column--full-tiny tna-!--margin-bottom-l">
+          {{ tnaCard({
+            title: item.title,
+            href: "/design-system/" + item.path,
+            text: item.description
+          }) }}
+        </li>
+      {%- endfor %}
+      </div>
+    </nav>
+  </main>
+{% endblock %}
+
+{% block bodyEnd %}
+  {{ super() }}
+  <script src="/design-system/collection.js"></script>
+  <script src="/design-system/sidebar.js"></script>
+{% endblock %}

layouts/collection-page.njk

@@ -30,12 +30,15 @@
         <h1 class="tna-hgroup__title">{{ title }}</h1>
       </hgroup>
       {% endif %}
+      {% if description %}
+      <p class="tna-large-paragraph">{{ description }}</p>
+      {% endif %}
       {% if not topLevel and headings %}
       <h2 class="tna-heading-l tna-!--hide-on-large tna-!--hide-on-medium">Contents</h2>
       <ol class="tna-ol tna-!--hide-on-large tna-!--hide-on-medium">
         {%- for heading in headings %}
         <li>
-          <a href="#{{ heading.href }}" class="tna-link--no-visited-state">
+          <a href="#{{ heading.href }}" class="tna-link--no-visited-state-">
             {{ heading.title }}
           </a>
         </li>
@@ -51,33 +54,33 @@
       <ol class="tna-ds-sidebar">
       {# {% if not topLevel %}
         <li class="tna-ds-sidebar__item">
-          <a href="/design-system/{{ group }}" class="tna-ds-sidebar__link tna-link--no-visited-state">{{ groupTitle }} overview</a>
+          <a href="/design-system/{{ group }}" class="tna-ds-sidebar__link tna-link--no-visited-state-">{{ groupTitle }} overview</a>
         </li>
       {% endif %} #}
       {% for item in collections[group] %}
         {% if item.path == path %}
         <li class="tna-ds-sidebar__item tna-ds-sidebar__item--current">
-          <a href="/design-system/{{ item.path }}" class="tna-ds-sidebar__link tna-link--no-visited-state">{{ item.title }}</a>
+          <a href="/design-system/{{ item.path }}" class="tna-ds-sidebar__link tna-link--no-visited-state-">{{ item.title }}</a>
           {% if headings %}
           {# TODO: Make a marco for this recursion #}
           <ol class="tna-ds-sidebar__sections tna-!--hide-on-small tna-!--hide-on-tiny">
             {%- for heading in headings %}
             <li class="tna-ds-sidebar__section">
-              <a href="#{{ heading.href }}" class="tna-ds-sidebar__section-link tna-link--no-visited-state">
+              <a href="#{{ heading.href }}" class="tna-ds-sidebar__section-link tna-link--no-visited-state-">
                 {{ heading.title }}
               </a>
               {# {%- if heading.children %}
               <ol class="tna-ds-sidebar__sections">
                 {%- for child in heading.children %}
                 <li class="tna-ds-sidebar__section">
-                  <a href="#{{ child.href }}" class="tna-ds-sidebar__section-link tna-link--no-visited-state">
+                  <a href="#{{ child.href }}" class="tna-ds-sidebar__section-link tna-link--no-visited-state-">
                     {{ child.title }}
                   </a>
                   {%- if child.children %}
                   <ol class="tna-ds-sidebar__sections">
                     {%- for childChild in child.children %}
                     <li class="tna-ds-sidebar__section">
-                      <a href="#{{ childChild.href }}" class="tna-ds-sidebar__section-link tna-link--no-visited-state">
+                      <a href="#{{ childChild.href }}" class="tna-ds-sidebar__section-link tna-link--no-visited-state-">
                         {{ childChild.title }}
                       </a>
                     </li>
@@ -95,7 +98,7 @@
         </li>
         {% else %}
         <li class="tna-ds-sidebar__item">
-          <a href="/design-system/{{ item.path }}" class="tna-ds-sidebar__link tna-link--no-visited-state">{{ item.title }}</a>
+          <a href="/design-system/{{ item.path }}" class="tna-ds-sidebar__link tna-link--no-visited-state-">{{ item.title }}</a>
         </li>
         {% endif %}
       {% endfor %}

layouts/partials/example.njk

@@ -23,7 +23,6 @@
     {% set accordionItems = (accordionItems.push({
           title: "HTML",
           body: '<div class="tna-ds-example__code">
-<!-- This indentation is required so markdown does not interfere -->
 <pre class="language-html"><code class="language-html">' + (getHTMLCode(examplePath) | forceescape) + '</code></pre>
         <div>'
         }), accordionItems) %}
@@ -37,7 +36,6 @@
                     body: exampleOptions(params, exampleId)
                   }) if params.nunjucksOptions !== false else ''
                 ) + '<div class="tna-ds-example__code">
-<!-- This indentation is required so markdown does not interfere -->
 <pre class="language-javascript"><code class="language-javascript">' + (getNunjucksCode(examplePath) | forceescape) + '</code></pre>
         <div>'
         }), accordionItems) %}

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",

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) }}

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" }) }}
 

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 `<button>` ele
 
 ## Icons
 
-Buttons can contain icons. Read more about [using icons in TNA services](/design-system/styles/icons/).
+Buttons can contain icons. Read more about [using icons in TNA services](../../styles/icons/).
 
 ## Button groups
 

src/components/card/index.md

@@ -1,6 +1,7 @@
 ---
 layout: collection-page.njk
 title: Card
+description: Use the card component for providing previews to articles and pages.
 group: components
 ---
 

src/components/checkboxes/index.md

@@ -1,6 +1,7 @@
 ---
 layout: collection-page.njk
 title: Checkboxes
+description: Checkboxes allow users to post multiple options for the same field.
 group: components
 ---
 

src/components/compound-filters/index.md

@@ -1,14 +1,13 @@
 ---
 layout: collection-page.njk
 title: Compound filters
+description: The compound filters can show which multiple filters have been selected. This is useful for search patterns.
 group: components
 ---
 
 {% from "partials/example.njk" import example %}
 {% from "partials/component-status.njk" import status %}
 
-The compound filters can show which multiple filters have been selected. This is useful for search patterns.
-
 Each selected value requires a link to be able to remove the value.
 
 {{ example({ group: "components", item: "compound-filters", example: "default", html: true, nunjucks: true, size: "xs" }) }}

src/components/cookie-banner/index.md

@@ -1,15 +1,13 @@
 ---
 layout: collection-page.njk
 title: Cookie banner
-description: Also known as navigation path or cookie crumb
+description: The cookie banner component allows a user to either accept or decline the use of cookies within a service.
 group: components
 ---
 
 {% from "partials/example.njk" import example %}
 {% from "partials/component-status.njk" import status %}
 
-The cookie banner component allows a user to either accept or decline the use of cookies within a service.
-
 The cookie banner is available as part of [TNA Frontend](https://www.npmjs.com/package/@nationalarchives/frontend) as well as a [standalone cookie banner package](https://www.npmjs.com/package/@nationalarchives/frontend-cookie-banner).
 
 {{ example({ group: "components", item: "cookie-banner", example: "default", html: true, nunjucks: true, noPadding: true }) }}

src/components/date-input/index.md

@@ -1,15 +1,14 @@
 ---
 layout: collection-page.njk
 title: Date input
+description: Use the date input component to allow the user to enter a date when populating data, such as submitting a record.
 group: components
 ---
 
 {% from "partials/example.njk" import example %}
 {% from "partials/component-status.njk" import status %}
 
-Use the date input component to allow the user to enter a date when populating data, such as submitting a record.
-
-For searching by date, use the [date search](/design-system/components/date-search/) component.
+For searching by date, use the [date search](../date-search/) component.
 
 {{ example({ group: "components", item: "date-input", example: "default", html: true, nunjucks: true, size: "xs" }) }}
 

src/components/date-search/index.md

@@ -1,15 +1,14 @@
 ---
 layout: collection-page.njk
 title: Date search
+description: Use the date search component to allow the user to enter a date to search with.
 group: components
 ---
 
 {% from "partials/example.njk" import example %}
 {% from "partials/component-status.njk" import status %}
 
-Use the date search component to allow the user to enter a date to search with.
-
-When you need the user to enter a date for data purposes or don’t want to require a day or month, use the [date input](/design-system/components/date-input/) component.
+When you need the user to enter a date for data purposes or don’t want to require a day or month, use the [date input](../date-input/) component.
 
 {{ example({ group: "components", item: "date-search", example: "default", html: true, nunjucks: true, size: "xs" }) }}
 

src/components/details/index.md

@@ -1,14 +1,13 @@
 ---
 layout: collection-page.njk
 title: Details
+description: Make a page easier to scan by letting users reveal more detailed information only if they need it.
 group: components
 ---
 
 {% from "partials/example.njk" import example %}
 {% from "partials/component-status.njk" import status %}
 
-Make a page easier to scan by letting users reveal more detailed information only if they need it.
-
 {{ example({ group: "components", item: "details", example: "default", html: true, nunjucks: true, size: "s" }) }}
 
 {{ status(false, 1, 1, 2, 2, false) }}

src/components/error-summary/index.md

@@ -1,14 +1,13 @@
 ---
 layout: collection-page.njk
 title: Error summary
+description: Use the error summary component to summarise form errors on the page and provide links to help users complete them.
 group: components
 ---
 
 {% from "partials/example.njk" import example %}
 {% from "partials/component-status.njk" import status %}
 
-Use the error summary component to summarise form errors on the page and provide links to help users complete them.
-
 {{ example({ group: "components", item: "error-summary", example: "default", html: true, nunjucks: true, size: "s" }) }}
 
 {{ status(false, 2, 2, 2, 2, false) }}

src/components/featured-records/index.md

@@ -1,14 +1,13 @@
 ---
 layout: collection-page.njk
 title: Featured records
+description: The featured records component can be used to show a list of related or interesting records.
 group: components
 ---
 
 {% from "partials/example.njk" import example %}
 {% from "partials/component-status.njk" import status %}
 
-The featured records component can be used to show a list of related or interesting records.
-
 {{ example({ group: "components", item: "featured-records", example: "default", html: true, nunjucks: true, size: "l" }) }}
 
 {{ status(false, 0, 1, 2, 2, false) }}

src/components/footer/index.md

@@ -1,14 +1,13 @@
 ---
 layout: collection-page.njk
 title: Footer
+description: The footer component provides an area to use for copyright information and additional links to things like social media.
 group: components
 ---
 
 {% from "partials/example.njk" import example %}
 {% from "partials/component-status.njk" import status %}
 
-The footer component provides an area to use for copyright information and additional links to things like social media.
-
 {{ example({ group: "components", item: "footer", example: "default", html: true, nunjucks: true, size: "xl" }) }}
 
 {{ status(true, 0, 1, 1, 1, false) }}