@nationalarchives/frontend 0.1.11-prerelease → 0.1.13-prerelease

package/nationalarchives/components/index-grid/_index.scss

@@ -0,0 +1,46 @@
+@use "../../utilities/global"; // To get %tna-invert
+@use "../../tools/colour";
+
+.tna-index-grid {
+  &__item-wrapper {
+    margin-bottom: 2rem;
+  }
+
+  &__item {
+    height: 100%;
+
+    display: flex;
+    flex-direction: column;
+
+    // @include colour.invert;
+    @extend %tna-invert;
+    text-decoration: none;
+  }
+
+  &__item-image {
+    width: 100%;
+    height: auto;
+  }
+
+  &__item-content {
+    padding: 1rem;
+
+    flex: 1;
+  }
+
+  &__item-title {
+    text-decoration: underline;
+
+    .tna-index-grid__item:hover & {
+      &,
+      &:link,
+      &:visited {
+        text-decoration-thickness: 3px;
+      }
+    }
+  }
+
+  &__item-subtitle {
+    @include colour.colour-font("font-light", true);
+  }
+}

package/nationalarchives/components/index-grid/fixtures.json

@@ -0,0 +1,4 @@
+{
+  "component": "index-grid",
+  "fixtures": []
+}

package/nationalarchives/components/index-grid/index-grid.stories.js

@@ -0,0 +1,77 @@
+import IndexGrid from "./template.njk";
+import macroOptions from "./macro-options.json";
+
+const argTypes = {
+  heading: { control: "text" },
+  items: { control: "object" },
+  columns: { control: "number" },
+  columnsMedium: { control: "number" },
+  columnsSmall: { control: "number" },
+  columnsTiny: { control: "number" },
+  classes: { control: "text" },
+  attributes: { control: "object" },
+};
+
+Object.keys(argTypes).forEach((argType) => {
+  argTypes[argType].description = macroOptions.find(
+    (option) => option.name === argType,
+  )?.description;
+});
+
+export default {
+  title: "Components/Index grid",
+  argTypes,
+};
+
+const Template = ({
+  heading,
+  items,
+  columns,
+  columnsMedium,
+  columnsSmall,
+  columnsTiny,
+  classes,
+  attributes,
+}) => {
+  return IndexGrid({
+    params: {
+      heading,
+      items,
+      columns,
+      columnsMedium,
+      columnsSmall,
+      columnsTiny,
+      classes,
+      attributes,
+    },
+  });
+};
+
+const exampleItem = {
+  href: "#",
+  src: "https://picsum.photos/id/237/800/600",
+  alt: "Photo of a puppy",
+  width: "800",
+  height: "600",
+  title: "Cat",
+  subtitle: "4 photos",
+};
+export const Standard = Template.bind({});
+Standard.args = {
+  heading: "My dogs",
+  items: Array(12)
+    .fill({ ...exampleItem })
+    .map((item, index) => {
+      const pseudoRandom = ((index * 29) % 8) + 1;
+      return {
+        ...item,
+        title: `Category #${index + 101}`,
+        subtitle: `${pseudoRandom} photos`,
+      };
+    }),
+  columns: 4,
+  columnsMedium: 3,
+  columnsSmall: 2,
+  columnsTiny: 1,
+  classes: "tna-index-grid--demo",
+};

package/nationalarchives/components/index-grid/macro-options.json

@@ -0,0 +1,94 @@
+[
+  {
+    "name": "heading",
+    "type": "string",
+    "required": true,
+    "description": ""
+  },
+  {
+    "name": "items",
+    "type": "array",
+    "required": true,
+    "description": "",
+    "params": [
+      {
+        "name": "href",
+        "type": "string",
+        "required": true,
+        "description": ""
+      },
+      {
+        "name": "src",
+        "type": "string",
+        "required": true,
+        "description": ""
+      },
+      {
+        "name": "alt",
+        "type": "string",
+        "required": true,
+        "description": ""
+      },
+      {
+        "name": "width",
+        "type": "number",
+        "required": true,
+        "description": ""
+      },
+      {
+        "name": "height",
+        "type": "number",
+        "required": true,
+        "description": ""
+      },
+      {
+        "name": "title",
+        "type": "string",
+        "required": true,
+        "description": ""
+      },
+      {
+        "name": "subtitle",
+        "type": "string",
+        "required": false,
+        "description": ""
+      }
+    ]
+  },
+  {
+    "name": "columns",
+    "type": "string",
+    "required": true,
+    "description": ""
+  },
+  {
+    "name": "columnsMedium",
+    "type": "string",
+    "required": false,
+    "description": ""
+  },
+  {
+    "name": "columnsSmall",
+    "type": "string",
+    "required": false,
+    "description": ""
+  },
+  {
+    "name": "columnsTiny",
+    "type": "string",
+    "required": false,
+    "description": ""
+  },
+  {
+    "name": "classes",
+    "type": "string",
+    "required": false,
+    "description": "Classes to add to the container."
+  },
+  {
+    "name": "attributes",
+    "type": "object",
+    "required": false,
+    "description": "HTML attributes (for example data attributes) to add to the container."
+  }
+]

package/nationalarchives/components/index-grid/macro.njk

@@ -0,0 +1,3 @@
+{% macro tnaIndexGrid(params) %}
+  {%- include "nationalarchives/components/index-grid/template.njk" -%}
+{% endmacro %}

package/nationalarchives/components/index-grid/template.njk

@@ -0,0 +1,56 @@
+{%- set containerClasses = [params.classes] if params.classes else [] -%}
+<nav class="tna-index-grid {{ containerClasses | join(' ') }}" aria-label="{{ params.heading }}" {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
+  <div class="tna-container">
+    <div class="tna-column tna-column--full">
+      <h1>
+        {{ params.heading }}
+      </h1>
+    </div>
+    {%- set itemClasses = ['tna-index-grid__item-wrapper', 'tna-column'] -%}
+
+    {%- if params.columns == 1 -%}
+      {%- set itemClasses = itemClasses.concat('tna-column--full') -%}
+    {%- else -%}
+      {%- set itemClasses = itemClasses.concat('tna-column--width-1-' + params.columns) -%}
+    {%- endif -%}
+
+    {%- if params.columnsMedium -%}
+      {%- if params.columnsMedium == 1 -%}
+        {%- set itemClasses = itemClasses.concat('tna-column--full-medium') -%}
+      {%- else -%}
+        {%- set itemClasses = itemClasses.concat('tna-column--width-1-' + params.columnsMedium + '-medium') -%}
+      {%- endif -%}
+    {%- endif -%}
+
+    {%- if params.columnsSmall -%}
+      {%- if params.columnsSmall == 1 -%}
+        {%- set itemClasses = itemClasses.concat('tna-column--full-small') -%}
+      {%- else -%}
+        {%- set itemClasses = itemClasses.concat('tna-column--width-1-' + params.columnsSmall + '-small') -%}
+      {%- endif -%}
+    {%- endif -%}
+
+    {%- if params.columnsTiny -%}
+      {%- if params.columnsTiny == 1 -%}
+        {%- set itemClasses = itemClasses.concat('tna-column--full-tiny') -%}
+      {%- else -%}
+        {%- set itemClasses = itemClasses.concat('tna-column--width-1-' + params.columnsTiny + '-tiny') -%}
+      {%- endif -%}
+    {%- endif -%}
+
+    {%- for item in params.items -%}
+    <div class="{{ itemClasses | join(' ') }}">
+      <a href="{{ item.href }}" class="tna-index-grid__item" title="{{ item.title }}">
+        <img src="{{ item.src }}" class="tna-index-grid__item-image" width="{{ item.width }}" height="{{ item.height }}" alt="{{ item.alt }}" />
+        <span class="tna-index-grid__item-content">
+          <span class="tna-index-grid__item-title">{{ item.title }}</span>
+          {%- if item.subtitle -%}
+          <br>
+          <span class="tna-index-grid__item-subtitle">{{ item.subtitle }}</span>
+          {%- endif -%}
+        </span>
+      </a>
+    </div>
+    {%- endfor -%}
+  </div>
+<nav>

package/nationalarchives/components/message/_index.scss

@@ -0,0 +1,27 @@
+@use "../../variables/colour" as colourVars;
+@use "../../tools/colour";
+
+.tna-message {
+  padding: 1rem;
+
+  display: flex;
+  align-items: center;
+
+  @include colour.colour-background("keyline");
+
+  border-left: 0.5rem transparent solid;
+  @include colour.colour-border("keyline-dark");
+
+  // &--yellow {
+  background-color: colourVars.$tna-cream;
+
+  border-left-color: colourVars.$tna-yellow;
+  // }
+
+  &__icon {
+    margin-right: 1rem;
+  }
+
+  &__message {
+  }
+}

package/nationalarchives/components/message/fixtures.json

@@ -0,0 +1,4 @@
+{
+  "component": "message",
+  "fixtures": []
+}

package/nationalarchives/components/message/macro-options.json

@@ -0,0 +1,20 @@
+[
+  {
+    "name": "message",
+    "type": "string",
+    "required": true,
+    "description": ""
+  },
+  {
+    "name": "classes",
+    "type": "string",
+    "required": false,
+    "description": "Classes to add to the message."
+  },
+  {
+    "name": "attributes",
+    "type": "object",
+    "required": false,
+    "description": "HTML attributes (for example data attributes) to add to the message."
+  }
+]

package/nationalarchives/components/message/macro.njk

@@ -0,0 +1,3 @@
+{% macro tnaMessage(params) %}
+  {%- include "nationalarchives/components/message/template.njk" -%}
+{% endmacro %}

package/nationalarchives/components/message/phase-banner.stories.js

@@ -0,0 +1,36 @@
+import Message from "./template.njk";
+import macroOptions from "./macro-options.json";
+
+const argTypes = {
+  message: { control: "text" },
+  classes: { control: "text" },
+  attributes: { control: "object" },
+};
+
+Object.keys(argTypes).forEach((argType) => {
+  argTypes[argType].description = macroOptions.find(
+    (option) => option.name === argType,
+  )?.description;
+});
+
+export default {
+  title: "Components/Message",
+  argTypes,
+};
+
+const Template = ({ message, classes, attributes }) => {
+  return Message({
+    params: {
+      message,
+      classes,
+      attributes,
+    },
+  });
+};
+
+export const Standard = Template.bind({});
+Standard.args = {
+  message:
+    "Please note this page references hunger strikes and force feeding, which some people may find upsetting.",
+  classes: "tna-messaage--demo",
+};

package/nationalarchives/components/message/template.njk

@@ -0,0 +1,9 @@
+{%- set containerClasses = [params.classes] if params.classes else [] -%}
+<div class="tna-message {{ containerClasses | join(' ') }}" {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
+  <svg class="tna-message__icon" xmlns="http://www.w3.org/2000/svg" focusable="false" aria-hidden="true" viewBox="0 0 34 34" width="40" height="40">
+    <path fill="currentColor" d="M15.33 8.67h3.34V12h-3.34V8.67Zm0 6.66h3.34v10h-3.34v-10ZM17 .33a16.67 16.67 0 1 0 .01 33.35A16.67 16.67 0 0 0 17 .33Zm0 30A13.35 13.35 0 0 1 3.67 17C3.67 9.65 9.65 3.67 17 3.67S30.33 9.65 30.33 17 24.35 30.33 17 30.33Z"></path>
+  </svg>
+  <p class="tna-message__message">
+    {{ params.message | safe }}
+  </p>
+</div>

package/nationalarchives/components/phase-banner/phase-banner.stories.js

@@ -18,7 +18,7 @@ Object.keys(argTypes).forEach((argType) => {
 });
 
 export default {
-  title: "Work in progress/Components/Phase banner",
+  title: "Components/Phase banner",
   argTypes,
 };
 

package/nationalarchives/components/phase-banner/template.njk

@@ -4,7 +4,7 @@
   <div class="tna-container">
     <div class="tna-column">
       <span class="tna-phase-banner__phase">
-        {{ params.phase | capitalize }}
+        {{ params.phase | lower | capitalize }}
       </span>
     </div>
     <div class="tna-column">

package/nationalarchives/components/picture/_index.scss

@@ -28,12 +28,16 @@
     // @include colour.invert;
     @extend %tna-invert;
 
-    padding: 1rem 1.5rem 0.5rem;
+    padding: 1rem 1.5rem;
 
     .tna-template--clicked &:focus {
       outline: none;
     }
 
+    .tna-tabs {
+      margin-bottom: 0.5rem;
+    }
+
     .tna-tabs__list-item-link {
       @include colour.colour-font("font-dark", true);
 

package/nationalarchives/components/picture/picture.stories.js

@@ -20,7 +20,7 @@ Object.keys(argTypes).forEach((argType) => {
 });
 
 export default {
-  title: "Work in progress/Components/Picture",
+  title: "Components/Picture",
   argTypes,
 };
 

package/nationalarchives/components/profile/profile.stories.js

@@ -13,7 +13,7 @@ Object.keys(argTypes).forEach((argType) => {
 });
 
 export default {
-  title: "Work in progress/Components/Profile",
+  title: "Components/Profile",
   argTypes,
 };
 

package/nationalarchives/components/profile/template.njk

@@ -1,7 +1,7 @@
 {%- set containerClasses = [params.classes] if params.classes else [] -%}
 <div class="tna-profile tna-container {{ containerClasses | join(' ') }}" {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
   <div class="tna-column tna-column--order-2">
-    <img src="https://avatar.iran.liara.run/public" width="200" height="200" />
+    <img src="https://avatar.iran.liara.run/public/68" width="200" height="200" alt="Photo of Max Smith" />
   </div>
   <div class="tna-column tna-column--flex-1 tna-column--full-small tna-column--full-tiny tna-column--order-1 tna-column--order-3-small tna-column--order-3-tiny">
     <hgroup class="tna-hgroup tna-hgroup--xl">

package/nationalarchives/components/tabs/tabs.stories.js

@@ -18,7 +18,7 @@ Object.keys(argTypes).forEach((argType) => {
 });
 
 export default {
-  title: "Work in progress/Components/Tabs",
+  title: "Components/Tabs",
   argTypes,
 };
 

package/nationalarchives/stories/development/publishing.mdx

@@ -10,17 +10,6 @@ import { Meta } from "@storybook/blocks";
 1. Run `npm install` to update the `package-lock.json`
 1. Merge all changes to `main` via a pull request
 1. Wait for the CI to pass
-1. Tag the version with `git tag v1.0.0` (ensure leading `v` and change version number as necessary)
-1. Push the new tag with `git push origin --tags`
-1. Create a [new release on GitHub](https://github.com/nationalarchives/tna-frontend/releases/new) using the tag you just created
+1. Create a [new release on GitHub](https://github.com/nationalarchives/tna-frontend/releases/new) and add a new tag in the format `v1.0.0` (ensure leading `v` and change version number as necessary)
 
 Once a release is created, the [publish pipeline](https://github.com/nationalarchives/tna-frontend/blob/main/.github/workflows/npm-publish.yml) will be triggered.
-
-## Oops!
-
-To delete a tag:
-
-```sh
-git tag -d v0.1.0
-git push --delete origin v0.1.0
-```

package/nationalarchives/stories/utilities/heading-groups.stories.js

@@ -41,4 +41,5 @@ export const HeadingGroupSeparated = Template.bind({});
 HeadingGroupSeparated.args = {
   supertitle: "Record revealed",
   title: "The Monteagle Letter",
+  singleSentence: false,
 };

package/nationalarchives/stories/utilities/headings.stories.js

@@ -11,30 +11,16 @@ export default {
 const HeadingTemplate = ({ params }, level) => `<h${level} class="tna-heading${
   params.size ? ` tna-heading--${params.size}` : ""
 }">
-  ${params.text} (level ${level})
+  ${params.text} (${params.size.toUpperCase()})
 </h${level}>`;
 
-const Heading1Template = ({ text, size }) =>
-  HeadingTemplate({ params: { text, size } }, 1);
-const Heading2Template = ({ text, size }) =>
-  HeadingTemplate({ params: { text, size } }, 2);
-const Heading3Template = ({ text, size }) =>
-  HeadingTemplate({ params: { text, size } }, 3);
+const HeadingsTemplate = ({ text }) =>
+  `${HeadingTemplate({ params: { text, size: "xl" } }, 1)}${HeadingTemplate(
+    { params: { text, size: "l" } },
+    2,
+  )}${HeadingTemplate({ params: { text, size: "m" } }, 3)}`;
 
-export const Heading1 = Heading1Template.bind({});
-Heading1.args = {
+export const Headings = HeadingsTemplate.bind({});
+Headings.args = {
   text: "This is a heading",
-  size: "xl",
-};
-
-export const Heading2 = Heading2Template.bind({});
-Heading2.args = {
-  text: "This is a heading",
-  size: "l",
-};
-
-export const Heading3 = Heading3Template.bind({});
-Heading3.args = {
-  text: "This is a heading",
-  size: "m",
 };

package/nationalarchives/stories/utilities/typography.mdx

@@ -12,9 +12,7 @@ We use a set of typefaces...
 
 ## Headings
 
-<Canvas of={HeadingStories.Heading1} />
-<Canvas of={HeadingStories.Heading2} />
-<Canvas of={HeadingStories.Heading3} />
+<Canvas of={HeadingStories.Headings} />
 
 ## Heading groups
 

package/nationalarchives/templates/layouts/_generic.njk

@@ -1,57 +1,49 @@
 {# Based on https://github.com/alphagov/govuk-frontend/blob/8b6bf304b9fc891f64459c25a08f3d623f3fea72/packages/govuk-frontend/src/govuk/template.njk #}
 {#% from "./components/skip-link/macro.njk" import tnaSkipLink -%#}
 <!DOCTYPE html>
-<html lang="{{ htmlLang | default('en') }}" class="tna-template {{ htmlClasses }}">
+<html lang="{{ htmlLang | default('en-GB') }}" class="tna-template {{ htmlClasses }}">
   <head>
-  <meta charset="utf-8">
-  <title{% if pageTitleLang %} lang="{{ pageTitleLang }}"{% endif %}>{% block pageTitle %}The National Archives{% endblock %}</title>
-  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
-  <meta name="theme-color" content="{{ themeColor | default('#000000') }}">
-  <meta http-equiv="X-UA-Compatible" content="IE=edge">
-
-  {% block headIcons %}
-  <link rel="shortcut icon" sizes="16x16 32x32 48x48" href="{{ assetPath | default('/assets') }}/images/favicon.ico" type="image/x-icon">
-  <link rel="mask-icon" href="{{ assetPath | default('/assets') }}/images/govuk-mask-icon.svg" color="{{ themeColor | default('#0b0c0c') }}"> {# Hardcoded value of $govuk-black #}
-  <link rel="apple-touch-icon" sizes="180x180" href="{{ assetPath | default('/assets') }}/images/govuk-apple-touch-icon-180x180.png">
-  <link rel="apple-touch-icon" sizes="167x167" href="{{ assetPath | default('/assets') }}/images/govuk-apple-touch-icon-167x167.png">
-  <link rel="apple-touch-icon" sizes="152x152" href="{{ assetPath | default('/assets') }}/images/govuk-apple-touch-icon-152x152.png">
-  <link rel="apple-touch-icon" href="{{ assetPath | default('/assets') }}/images/govuk-apple-touch-icon.png">
-  {% endblock %}
-
-  {% block head %}{% endblock %}
-
-  {% block stylesheets %}{% endblock %}
-
-  {# OpenGraph images needs to be absolute, so we need either a URL for the image or for assetUrl to be set #}
-  {% if opengraphImageUrl or assetUrl %}
-  <meta property="og:image" content="{{ opengraphImageUrl | default(assetUrl + '/images/govuk-opengraph-image.png') }}">
-  {% endif %}
+    <meta charset="utf-8">
+    <title>{% block pageTitle %}The National Archives{% endblock %}</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
+    <meta name="theme-color" content="{{ themeColor | default('#000000') }}">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+
+    {% block headIcons %}
+    <link rel="shortcut icon" sizes="16x16 32x32 48x48" href="{{ assetPath | default('/assets') }}/images/favicon.ico" type="image/x-icon">
+    <link rel="mask-icon" href="{{ assetPath | default('/assets') }}/images/govuk-mask-icon.svg" color="{{ themeColor | default('#0b0c0c') }}"> {# Hardcoded value of $govuk-black #}
+    <link rel="apple-touch-icon" sizes="180x180" href="{{ assetPath | default('/assets') }}/images/govuk-apple-touch-icon-180x180.png">
+    <link rel="apple-touch-icon" sizes="167x167" href="{{ assetPath | default('/assets') }}/images/govuk-apple-touch-icon-167x167.png">
+    <link rel="apple-touch-icon" sizes="152x152" href="{{ assetPath | default('/assets') }}/images/govuk-apple-touch-icon-152x152.png">
+    <link rel="apple-touch-icon" href="{{ assetPath | default('/assets') }}/images/govuk-apple-touch-icon.png">
+    {% endblock %}
+
+    {% block head %}{% endblock %}
+
+    {% block stylesheets %}{% endblock %}
   </head>
-  <body class="tna-template__body {{ bodyClasses }}" {%- for attribute, value in bodyAttributes %} {{attribute}}="{{value}}"{% endfor %}>
-  {% block bodyStart %}{% endblock %}
-
-  {% block skipLink %}
-  {#{ govukSkipLink({
-    href: '#main-content',
-    text: 'Skip to main content'
-  }) }#}
-  {% endblock %}
-
-  {% block header %}
-  <h1>HEADER</h1>
-  {% endblock %}
-
-  {% block main %}
-  {% block beforeContent %}{% endblock %}
-  <main class="tna-main-wrapper {{ mainClasses }}" id="main-content" role="main"{% if mainLang %} lang="{{ mainLang }}"{% endif %}>
-    {% block content %}{% endblock %}
-  </main>
-  {% endblock %}
-
-  {% block footer %}
-  <h1>FOOTER</h1>
-  {% endblock %}
-
-  {% block bodyEnd %}{% endblock %}
+    <body class="tna-template__body {{ bodyClasses }}" {%- for attribute, value in bodyAttributes %} {{attribute}}="{{value}}"{% endfor %}>
+    {% block skipLink %}
+    {#{ govukSkipLink({
+      href: '#main-content',
+      text: 'Skip to main content'
+    }) }#}
+    {% endblock %}
+
+    {% block bodyStart %}{% endblock %}
+
+    {% block header %}{% endblock %}
+
+    {% block main %}
+      {% block beforeContent %}{% endblock %}
+      <main class="tna-main-wrapper {{ mainClasses }}" id="main-content" role="main">
+        {% block content %}{% endblock %}
+      </main>
+      {% block afterContent %}{% endblock %}
+    {% endblock %}
+
+    {% block footer %}{% endblock %}
+
+    {% block bodyEnd %}{% endblock %}
   </body>
 </html>