@nationalarchives/frontend 0.1.8-prerelease → 0.1.10-prerelease

package/nationalarchives/components/button/_index.scss

@@ -1,3 +1,5 @@
+@use "../../variables/colour";
+
 .tna-button {
   padding: 0.25rem 1rem;
 
@@ -7,19 +9,37 @@
   font-weight: 700;
   text-decoration: none;
 
-  background-color: #000;
+  background-color: colour.$tna-black;
+
+  border: 0.25rem colour.$tna-black solid;
+
+  transition:
+    color 200ms,
+    background-color 200ms,
+    border-color 200ms;
 
   &:hover {
-    background-color: #069;
+    color: colour.$tna-black;
+
+    background-color: #fff;
+
+    transition:
+      color 50ms,
+      background-color 50ms,
+      border-color 50ms;
   }
 
   &--secondary {
-    color: #000;
+    color: colour.$tna-black;
+
+    background-color: colour.$tna-yellow;
 
-    background-color: #ff0;
+    border-color: colour.$tna-yellow;
 
     &:hover {
-      color: #fff;
+      color: colour.$tna-black;
+
+      border-color: colour.$tna-black;
     }
   }
 }

package/nationalarchives/components/button/button.stories.js

@@ -1,5 +1,4 @@
 import Button from "./template.njk";
-import "./_index.scss";
 import macroOptions from "./macro-options.json";
 
 const argTypes = {
@@ -13,12 +12,12 @@ const argTypes = {
 
 Object.keys(argTypes).forEach((argType) => {
   argTypes[argType].description = macroOptions.find(
-    (option) => option.name === argType
+    (option) => option.name === argType,
   )?.description;
 });
 
 export default {
-  title: "Components/Button",
+  title: "Components/Work in progress/Button",
   argTypes,
 };
 

package/nationalarchives/components/button/fixtures.json

@@ -7,7 +7,7 @@
         "text": "Log in",
         "href": "#"
       },
-      "html": "<a href=\"#\" class=\"tna-button \">\n    Log in\n</a>",
+      "html": "<a href=\"#\" class=\"tna-button \">\n  Log in\n</a>",
       "hidden": false
     },
     {
@@ -17,7 +17,7 @@
         "href": "#",
         "title": "Log in to the service"
       },
-      "html": "<a href=\"#\" class=\"tna-button \" title=\"Log in to the service\">\n    Log in\n</a>",
+      "html": "<a href=\"#\" class=\"tna-button \" title=\"Log in to the service\">\n  Log in\n</a>",
       "hidden": false
     },
     {
@@ -27,7 +27,7 @@
         "href": "#",
         "secondary": true
       },
-      "html": "<a href=\"#\" class=\"tna-button tna-button--secondary\">\n    Log in\n</a>",
+      "html": "<a href=\"#\" class=\"tna-button tna-button--secondary\">\n  Log in\n</a>",
       "hidden": false
     },
     {
@@ -37,7 +37,7 @@
         "href": "#",
         "classes": "button__test-class"
       },
-      "html": "<a href=\"#\" class=\"tna-button button__test-class\">\n    Log in\n</a>",
+      "html": "<a href=\"#\" class=\"tna-button button__test-class\">\n  Log in\n</a>",
       "hidden": false
     },
     {
@@ -49,7 +49,7 @@
           "data-testattribute": "foobar"
         }
       },
-      "html": "<a href=\"#\" class=\"tna-button \" data-testattribute=\"foobar\">\n    Log in\n</a>",
+      "html": "<a href=\"#\" class=\"tna-button \" data-testattribute=\"foobar\">\n  Log in\n</a>",
       "hidden": false
     }
   ]

package/nationalarchives/components/button/template.njk

@@ -1,7 +1,7 @@
 {%- set buttonClasses = [params.classes] if params.classes else [] -%}
 {%- if params.secondary -%}
-    {%- set buttonClasses = buttonClasses.concat('tna-button--secondary') -%}
+  {%- set buttonClasses = buttonClasses.concat('tna-button--secondary') -%}
 {%- endif -%}
-<a href="{{ params.href }}" class="tna-button {{ buttonClasses | join(' ') }}" {%- if params.title %} title="{{ params.title }}"{% endif %} {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
-    {{ params.text }}
+<a href="{{ params.href }}" class="tna-button {{ buttonClasses | join(' ') }}"{%- if params.title %} title="{{ params.title }}"{% endif %} {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
+  {{ params.text }}
 </a>

package/nationalarchives/components/card/_index.scss

@@ -1,4 +1,4 @@
-@use "../../tools/typography" as typographyTools;
+@use "../../variables/colour";
 
 .tna-card {
   &__inner {
@@ -48,7 +48,7 @@
   &--featured {
     position: relative;
 
-    background-color: #ff0;
+    background-color: colour.$tna-yellow;
 
     .tna-card__inner {
       margin-left: 50%;
@@ -58,7 +58,11 @@
     .tna-card__heading {
       padding-bottom: 2rem;
 
-      border-bottom: 2px #000 solid;
+      border-bottom: 2px colour.$tna-black solid;
+    }
+
+    .tna-card__title-link {
+      color: colour.$tna-black;
     }
 
     .tna-card__image-container {

package/nationalarchives/components/card/card.stories.js

@@ -1,5 +1,4 @@
 import Card from "./template.njk";
-import "./_index.scss";
 import macroOptions from "./macro-options.json";
 
 const argTypes = {
@@ -17,12 +16,12 @@ const argTypes = {
 
 Object.keys(argTypes).forEach((argType) => {
   argTypes[argType].description = macroOptions.find(
-    (option) => option.name === argType
+    (option) => option.name === argType,
   )?.description;
 });
 
 export default {
-  title: "Components/Card",
+  title: "Components/Work in progress/Card",
   argTypes,
 };
 

package/nationalarchives/components/card/fixtures.json

@@ -10,7 +10,7 @@
         },
         "body": "<p>Card body</p>"
       },
-      "html": "<div class=\"tna-card \">\n    <div class=\"tna-card__inner\"><h3 class=\"tna-card__title tna-heading tna-heading--m\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div></div>\n</div>",
+      "html": "<div class=\"tna-card \">\n  <div class=\"tna-card__inner\"><h3 class=\"tna-card__title tna-heading tna-heading--m\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div></div>\n</div>",
       "hidden": false
     },
     {
@@ -23,7 +23,7 @@
         },
         "body": "<p>Card body</p>"
       },
-      "html": "<div class=\"tna-card \">\n    <div class=\"tna-card__inner\"><hgroup class=\"tna-card__heading tna-hgroup tna-hgroup--m\">\n                <p class=\"tna-card__supertitle tna-hgroup__supertitle\">Card supertitle</p>\n                <h3 class=\"tna-card__title tna-hgroup__title\">Card title</h3>\n            </hgroup><div class=\"tna-card__body\"><p>Card body</p></div></div>\n</div>",
+      "html": "<div class=\"tna-card \">\n  <div class=\"tna-card__inner\"><hgroup class=\"tna-card__heading tna-hgroup tna-hgroup--m\">\n        <p class=\"tna-card__supertitle tna-hgroup__supertitle\">Card supertitle</p>\n        <h3 class=\"tna-card__title tna-hgroup__title\">Card title</h3>\n      </hgroup><div class=\"tna-card__body\"><p>Card body</p></div></div>\n</div>",
       "hidden": false
     },
     {
@@ -37,7 +37,7 @@
         },
         "body": "<p>Card body</p>"
       },
-      "html": "<div class=\"tna-card \">\n    <div class=\"tna-card__inner\"><hgroup class=\"tna-card__heading tna-hgroup tna-hgroup--m\">\n                <h3 class=\"tna-card__title tna-hgroup__title\">\n                    <span class=\"tna-card__supertitle tna-hgroup__supertitle\">Card supertitle</span>Card title</h3>\n            </hgroup><div class=\"tna-card__body\"><p>Card body</p></div></div>\n</div>",
+      "html": "<div class=\"tna-card \">\n  <div class=\"tna-card__inner\"><hgroup class=\"tna-card__heading tna-hgroup tna-hgroup--m\">\n        <h3 class=\"tna-card__title tna-hgroup__title\">\n          <span class=\"tna-card__supertitle tna-hgroup__supertitle\">Card supertitle</span>Card title</h3>\n      </hgroup><div class=\"tna-card__body\"><p>Card body</p></div></div>\n</div>",
       "hidden": false
     },
     {
@@ -50,7 +50,7 @@
         },
         "body": "<p>Card body</p>"
       },
-      "html": "<div class=\"tna-card \">\n    <div class=\"tna-card__inner\"><h3 class=\"tna-card__title tna-heading tna-heading--m\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div></div>\n</div>",
+      "html": "<div class=\"tna-card \">\n  <div class=\"tna-card__inner\"><h3 class=\"tna-card__title tna-heading tna-heading--m\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div></div>\n</div>",
       "hidden": false
     },
     {
@@ -62,7 +62,7 @@
         },
         "body": "<p>Card body</p>"
       },
-      "html": "<div class=\"tna-card \">\n    <div class=\"tna-card__inner\"><h1 class=\"tna-card__title tna-heading tna-heading--m\">Card title</h1><div class=\"tna-card__body\"><p>Card body</p></div></div>\n</div>",
+      "html": "<div class=\"tna-card \">\n  <div class=\"tna-card__inner\"><h1 class=\"tna-card__title tna-heading tna-heading--m\">Card title</h1><div class=\"tna-card__body\"><p>Card body</p></div></div>\n</div>",
       "hidden": false
     },
     {
@@ -75,7 +75,7 @@
         "href": "#",
         "body": "<p>Card body</p>"
       },
-      "html": "<div class=\"tna-card \">\n    <div class=\"tna-card__inner\"><h3 class=\"tna-card__title tna-heading tna-heading--m\"><a href=\"#\" class=\"tna-card__title-link\">Card title</a></h3><div class=\"tna-card__body\"><p>Card body</p></div></div>\n</div>",
+      "html": "<div class=\"tna-card \">\n  <div class=\"tna-card__inner\"><h3 class=\"tna-card__title tna-heading tna-heading--m\"><a href=\"#\" class=\"tna-card__title-link\">Card title</a></h3><div class=\"tna-card__body\"><p>Card body</p></div></div>\n</div>",
       "hidden": false
     },
     {
@@ -87,7 +87,7 @@
         },
         "text": "Card body"
       },
-      "html": "<div class=\"tna-card \">\n    <div class=\"tna-card__inner\"><h3 class=\"tna-card__title tna-heading tna-heading--m\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div></div>\n</div>",
+      "html": "<div class=\"tna-card \">\n  <div class=\"tna-card__inner\"><h3 class=\"tna-card__title tna-heading tna-heading--m\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div></div>\n</div>",
       "hidden": false
     },
     {
@@ -103,7 +103,7 @@
         },
         "body": "<p>Card body</p>"
       },
-      "html": "<div class=\"tna-card \">\n    <div class=\"tna-card__inner\"><h3 class=\"tna-card__title tna-heading tna-heading--m\">Card title</h3><div class=\"tna-card__image-container\">\n            <img src=\"https://loremflickr.com/640/360\" alt=\"A placeholder image\" class=\"tna-card__image\" />\n        </div><div class=\"tna-card__body\"><p>Card body</p></div></div>\n</div>",
+      "html": "<div class=\"tna-card \">\n  <div class=\"tna-card__inner\"><h3 class=\"tna-card__title tna-heading tna-heading--m\">Card title</h3><div class=\"tna-card__image-container\">\n      <img src=\"https://loremflickr.com/640/360\" alt=\"A placeholder image\" class=\"tna-card__image\" />\n    </div><div class=\"tna-card__body\"><p>Card body</p></div></div>\n</div>",
       "hidden": false
     },
     {
@@ -122,7 +122,7 @@
           }
         ]
       },
-      "html": "<div class=\"tna-card \">\n    <div class=\"tna-card__inner\"><h3 class=\"tna-card__title tna-heading tna-heading--m\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div><div class=\"tna-card__actions\"><a href=\"#\" class=\"tna-card__action tna-button\"title=\"Go and do the action\">Card action</a></div></div>\n</div>",
+      "html": "<div class=\"tna-card \">\n  <div class=\"tna-card__inner\"><h3 class=\"tna-card__title tna-heading tna-heading--m\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div><div class=\"tna-card__actions\"><a href=\"#\" class=\"tna-card__action tna-button\"title=\"Go and do the action\">Card action</a></div></div>\n</div>",
       "hidden": false
     },
     {
@@ -135,7 +135,7 @@
         "body": "<p>Card body</p>",
         "classes": "card__test-class"
       },
-      "html": "<div class=\"tna-card card__test-class\">\n    <div class=\"tna-card__inner\"><h3 class=\"tna-card__title tna-heading tna-heading--m\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div></div>\n</div>",
+      "html": "<div class=\"tna-card card__test-class\">\n  <div class=\"tna-card__inner\"><h3 class=\"tna-card__title tna-heading tna-heading--m\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div></div>\n</div>",
       "hidden": false
     },
     {
@@ -150,7 +150,7 @@
           "data-testattribute": "foobar"
         }
       },
-      "html": "<div class=\"tna-card \" data-testattribute=\"foobar\">\n    <div class=\"tna-card__inner\"><h3 class=\"tna-card__title tna-heading tna-heading--m\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div></div>\n</div>",
+      "html": "<div class=\"tna-card \" data-testattribute=\"foobar\">\n  <div class=\"tna-card__inner\"><h3 class=\"tna-card__title tna-heading tna-heading--m\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div></div>\n</div>",
       "hidden": false
     }
   ]

package/nationalarchives/components/card/template.njk

@@ -2,61 +2,61 @@
 {%- set classes = [params.classes] if params.classes else [] -%}
 {%- set headingSize = params.heading.size if params.heading.size else "m" -%}
 {%- if params.featured -%}
-    {%- set classes = classes.concat('tna-card--featured') -%}
+  {%- set classes = classes.concat('tna-card--featured') -%}
 {%- endif -%}
 <{{ htmlElement }} class="tna-card {{ classes | join(' ') }}" {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
-    <div class="tna-card__inner">
-    {%- if params.heading.supertitle -%}
-        {%- if params.heading.singleSentence -%}
-            <hgroup class="tna-card__heading tna-hgroup tna-hgroup--{{ headingSize }}">
-                <h{{ params.heading.level }} class="tna-card__title tna-hgroup__title">
-                    <span class="tna-card__supertitle tna-hgroup__supertitle">{{ params.heading.supertitle }}</span>
-                {%- if params.href -%}
-                    <a href="{{ params.href }}" class="tna-card__title-link">{{ params.heading.title }}</a>
-                {%- else -%}
-                    {{ params.heading.title }}
-                {%- endif -%}
-                </h{{ params.heading.level }}>
-            </hgroup>
+  <div class="tna-card__inner">
+  {%- if params.heading.supertitle -%}
+    {%- if params.heading.singleSentence -%}
+      <hgroup class="tna-card__heading tna-hgroup tna-hgroup--{{ headingSize }}">
+        <h{{ params.heading.level }} class="tna-card__title tna-hgroup__title">
+          <span class="tna-card__supertitle tna-hgroup__supertitle">{{ params.heading.supertitle }}</span>
+        {%- if params.href -%}
+          <a href="{{ params.href }}" class="tna-card__title-link">{{ params.heading.title }}</a>
         {%- else -%}
-            <hgroup class="tna-card__heading tna-hgroup tna-hgroup--{{ headingSize }}">
-                <p class="tna-card__supertitle tna-hgroup__supertitle">{{ params.heading.supertitle }}</p>
-                <h{{ params.heading.level }} class="tna-card__title tna-hgroup__title">
-                {%- if params.href -%}
-                    <a href="{{ params.href }}" class="tna-card__title-link">{{ params.heading.title }}</a>
-                {%- else -%}
-                    {{ params.heading.title }}
-                {%- endif -%}
-                </h{{ params.heading.level }}>
-            </hgroup>
+          {{ params.heading.title }}
         {%- endif -%}
+        </h{{ params.heading.level }}>
+      </hgroup>
     {%- else -%}
-        <h{{ params.heading.level }} class="tna-card__title tna-heading tna-heading--{{ headingSize }}">
+      <hgroup class="tna-card__heading tna-hgroup tna-hgroup--{{ headingSize }}">
+        <p class="tna-card__supertitle tna-hgroup__supertitle">{{ params.heading.supertitle }}</p>
+        <h{{ params.heading.level }} class="tna-card__title tna-hgroup__title">
         {%- if params.href -%}
-            <a href="{{ params.href }}" class="tna-card__title-link">{{ params.heading.title }}</a>
+          <a href="{{ params.href }}" class="tna-card__title-link">{{ params.heading.title }}</a>
         {%- else -%}
-            {{ params.heading.title }}
+          {{ params.heading.title }}
         {%- endif -%}
         </h{{ params.heading.level }}>
+      </hgroup>
     {%- endif -%}
-    {%- if params.image -%}
-        <div class="tna-card__image-container">
-            <img src="{{ params.image.src }}" alt="{{ params.image.alt }}" class="tna-card__image" />
-        </div>
+  {%- else -%}
+    <h{{ params.heading.level }} class="tna-card__title tna-heading tna-heading--{{ headingSize }}">
+    {%- if params.href -%}
+      <a href="{{ params.href }}" class="tna-card__title-link">{{ params.heading.title }}</a>
+    {%- else -%}
+      {{ params.heading.title }}
     {%- endif -%}
-        <div class="tna-card__body">
-        {%- if params.text -%}
-            <p>{{ params.text }}</p>
-        {%- else -%}
-            {{ params.body | safe }}
-        {%- endif -%}
-        </div>
-    {%- if params.actions -%}
-        <div class="tna-card__actions">
-        {%- for item in params.actions -%}
-            <a href="{{ item.href }}" class="tna-card__action tna-button" {%- if item.title %}title="{{ item.title }}"{% endif %}>{{ item.text }}</a>
-        {%- endfor -%}
-        </div>
+    </h{{ params.heading.level }}>
+  {%- endif -%}
+  {%- if params.image -%}
+    <div class="tna-card__image-container">
+      <img src="{{ params.image.src }}" alt="{{ params.image.alt }}" class="tna-card__image" />
+    </div>
+  {%- endif -%}
+    <div class="tna-card__body">
+    {%- if params.text -%}
+      <p>{{ params.text }}</p>
+    {%- else -%}
+      {{ params.body | safe }}
     {%- endif -%}
     </div>
+  {%- if params.actions -%}
+    <div class="tna-card__actions">
+    {%- for item in params.actions -%}
+      <a href="{{ item.href }}" class="tna-card__action tna-button" {%- if item.title %}title="{{ item.title }}"{% endif %}>{{ item.text }}</a>
+    {%- endfor -%}
+    </div>
+  {%- endif -%}
+  </div>
 </{{ htmlElement }}>

package/nationalarchives/components/filters/_index.scss

@@ -0,0 +1,49 @@
+.tna-filters {
+  &__item {
+    margin: 0 0.75rem 0.75rem 0;
+
+    display: inline-block;
+
+    &:last-child {
+      margin-right: 0;
+      margin-bottom: 0;
+    }
+  }
+
+  &--stacked &__item {
+    display: block;
+  }
+
+  &__item--selected #{&}__link {
+    color: #fff;
+
+    background-color: #004c7e;
+  }
+
+  &__link {
+    padding: 0.125rem 0.75rem;
+
+    display: inline-block;
+
+    color: #000;
+    text-decoration: none;
+
+    background-color: #d4e5ef;
+
+    border-radius: 99rem;
+
+    transition:
+      color 200ms,
+      background-color 200ms;
+
+    &:hover {
+      color: #fff;
+
+      background-color: #004c7e;
+
+      transition:
+        color 50ms,
+        background-color 50ms;
+    }
+  }
+}

package/nationalarchives/components/filters/filters.stories.js

@@ -0,0 +1,75 @@
+import Filters from "./template.njk";
+import macroOptions from "./macro-options.json";
+
+const argTypes = {
+  items: { control: "object" },
+  stack: { control: "boolean" },
+  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/Experimental/Filters",
+  argTypes,
+};
+
+const Template = ({ items, stack, classes, attributes }) => {
+  return Filters({
+    params: {
+      items,
+      stack,
+      classes,
+      attributes,
+    },
+  });
+};
+
+export const Standard = Template.bind({});
+Standard.args = {
+  items: [
+    {
+      label: "All",
+      href: "#?filter=all",
+      selected: true,
+    },
+    {
+      label: "Medieval (974—1485)",
+      href: "#?filter=alpha",
+    },
+    {
+      label: "Early Modern (1485—1714)",
+      href: "#?filter=beta",
+    },
+    {
+      label: "Georgians (1714—1837)",
+      href: "#?filter=gamma",
+    },
+    {
+      label: "Victorians (1837—1901)",
+      href: "#?filter=delta",
+    },
+    {
+      label: "Early 20th century (1901—1918)",
+      href: "#?filter=epsilon",
+    },
+    {
+      label: "Interwar (1918—1939)",
+      href: "#?filter=zeta",
+    },
+    {
+      label: "Second World War (1939—1945)",
+      href: "#?filter=eta",
+    },
+    {
+      label: "Postwar (1945—2000)",
+      href: "#?filter=theta",
+    },
+  ],
+  classes: "tna-filters--demo",
+};

package/nationalarchives/components/filters/fixtures.json

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

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

@@ -0,0 +1,52 @@
+[
+  {
+    "name": "items",
+    "type": "array",
+    "required": true,
+    "description": "",
+    "params": [
+      {
+        "name": "label",
+        "type": "string",
+        "required": true,
+        "description": ""
+      },
+      {
+        "name": "href",
+        "type": "string",
+        "required": true,
+        "description": ""
+      },
+      {
+        "name": "title",
+        "type": "string",
+        "required": false,
+        "description": ""
+      },
+      {
+        "name": "selected",
+        "type": "boolean",
+        "required": false,
+        "description": ""
+      }
+    ]
+  },
+  {
+    "name": "stack",
+    "type": "boolean",
+    "required": false,
+    "description": ""
+  },
+  {
+    "name": "classes",
+    "type": "string",
+    "required": false,
+    "description": "Classes to add to the filters."
+  },
+  {
+    "name": "attributes",
+    "type": "object",
+    "required": false,
+    "description": "HTML attributes (for example data attributes) to add to the filters."
+  }
+]

package/nationalarchives/components/filters/macro.njk

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

package/nationalarchives/components/filters/template.njk

@@ -0,0 +1,8 @@
+{%- set classes = [params.classes] if params.classes else [] -%}
+<ul class="tna-filters{% if params.stack %} tna-filters--stacked{% endif %} tna-ul tna-ul--plain {{ classes | join(' ') }}" {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
+  {%- for item in params.items -%}
+  <li class="tna-filters__item{%- if item.selected %} tna-filters__item--selected{% endif %}">
+    <a href="{{ item.href }}"{%- if item.title %} title="{{ item.title }}"{% endif %} class="tna-filters__link">{{ item.label }}</a>
+  </li>
+  {%- endfor -%}
+</ul>