@nationalarchives/frontend 0.1.3-prerelease

package/nationalarchives/components/button/fixtures.json

@@ -0,0 +1,56 @@
+{
+  "component": "button",
+  "fixtures": [
+    {
+      "name": "plain button",
+      "options": {
+        "text": "Log in",
+        "href": "#"
+      },
+      "html": "<a href=\"#\" class=\"tna-button \">\n    Log in\n</a>",
+      "hidden": false
+    },
+    {
+      "name": "with title",
+      "options": {
+        "text": "Log in",
+        "href": "#",
+        "title": "Log in to the service"
+      },
+      "html": "<a href=\"#\" class=\"tna-button \" title=\"Log in to the service\">\n    Log in\n</a>",
+      "hidden": false
+    },
+    {
+      "name": "secondary",
+      "options": {
+        "text": "Log in",
+        "href": "#",
+        "secondary": true
+      },
+      "html": "<a href=\"#\" class=\"tna-button tna-button--secondary\">\n    Log in\n</a>",
+      "hidden": false
+    },
+    {
+      "name": "with classes",
+      "options": {
+        "text": "Log in",
+        "href": "#",
+        "classes": "button__test-class"
+      },
+      "html": "<a href=\"#\" class=\"tna-button button__test-class\">\n    Log in\n</a>",
+      "hidden": false
+    },
+    {
+      "name": "with attributes",
+      "options": {
+        "text": "Log in",
+        "href": "#",
+        "attributes": {
+          "data-testattribute": "foobar"
+        }
+      },
+      "html": "<a href=\"#\" class=\"tna-button \" data-testattribute=\"foobar\">\n    Log in\n</a>",
+      "hidden": false
+    }
+  ]
+}

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

@@ -0,0 +1,38 @@
+[
+  {
+    "name": "text",
+    "type": "string",
+    "required": true,
+    "description": ""
+  },
+  {
+    "name": "href",
+    "type": "string",
+    "required": true,
+    "description": ""
+  },
+  {
+    "name": "title",
+    "type": "string",
+    "required": false,
+    "description": ""
+  },
+  {
+    "name": "secondary",
+    "type": "boolean",
+    "required": false,
+    "description": ""
+  },
+  {
+    "name": "classes",
+    "type": "string",
+    "required": false,
+    "description": "Classes to add to the button."
+  },
+  {
+    "name": "attributes",
+    "type": "object",
+    "required": false,
+    "description": "HTML attributes (for example data attributes) to add to the button."
+  }
+]

package/nationalarchives/components/button/macro.njk

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

package/nationalarchives/components/button/template.njk

@@ -0,0 +1,7 @@
+{%- set buttonClasses = [params.classes] if params.classes else [] -%}
+{%- if params.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>

package/nationalarchives/components/card/_card.scss

@@ -0,0 +1,2 @@
+@import "../../base";
+@import "./index";

package/nationalarchives/components/card/_index.scss

@@ -0,0 +1,37 @@
+@include nationalarchives-exports("nationalarchives/components/card") {
+  .tna-card {
+    display: -ms-flexbox;
+    display: flex;
+    -ms-box-orient: vertical;
+    -ms-flex-direction: column;
+    flex-direction: column;
+  }
+
+  .tna-card__heading {
+    order: 2;
+  }
+
+  .tna-card__supertitle {
+  }
+
+  .tna-card__title {
+  }
+
+  .tna-card__title-link {
+  }
+
+  .tna-card__image {
+    order: 1;
+  }
+
+  .tna-card__body {
+    order: 3;
+  }
+
+  .tna-card__actions {
+    order: 4;
+  }
+
+  .tna-card__action {
+  }
+}

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

@@ -0,0 +1,77 @@
+import Card from "./template.njk";
+import "../../all.scss";
+import "./_card.scss";
+import macroOptions from "./macro-options.json";
+
+const argTypes = {
+  supertitle: { control: "text" },
+  title: { control: "text" },
+  href: { control: "text" },
+  image: { control: "object" },
+  body: { control: "text" },
+  text: { control: "text" },
+  actions: { control: "object" },
+  htmlElement: { control: "text" },
+  classes: { control: "text" },
+  attributes: { control: "text" },
+};
+
+Object.keys(argTypes).forEach((argType) => {
+  argTypes[argType].description = macroOptions.find(
+    (option) => option.name === argType
+  )?.description;
+});
+
+export default {
+  title: "Components/Card",
+  argTypes,
+};
+
+const Template = ({
+  supertitle,
+  title,
+  href,
+  image,
+  body,
+  text,
+  actions,
+  htmlElement,
+  classes,
+  attributes,
+}) => {
+  return Card({
+    params: {
+      supertitle,
+      title,
+      href,
+      image,
+      body,
+      text,
+      actions,
+      htmlElement,
+      classes,
+      attributes,
+    },
+  });
+};
+
+export const Standard = Template.bind({});
+Standard.args = {
+  supertitle: "Card supertitle",
+  title: "Card title",
+  href: "#",
+  image: {
+    src: "https://loremflickr.com/640/360",
+    alt: "A placeholder image",
+  },
+  body: "<p>Card body</p>",
+  actions: [
+    {
+      text: "Card action",
+      href: "#",
+      title: "Go and do the action",
+    },
+  ],
+  htmlElement: "article",
+  classes: "tna-card--demo",
+};

package/nationalarchives/components/card/fixtures.json

@@ -0,0 +1,29 @@
+{
+  "component": "card",
+  "fixtures": [
+    {
+      "name": "TEMP TEST",
+      "options": {
+        "supertitle": "Card supertitle",
+        "title": "Card title",
+        "href": "#",
+        "image": {
+          "src": "https://loremflickr.com/640/360",
+          "alt": "A placeholder image"
+        },
+        "body": "<p>Card body</p>",
+        "actions": [
+          {
+            "text": "Card action",
+            "href": "#",
+            "title": "Go and do the action"
+          }
+        ],
+        "htmlElement": "article",
+        "classes": "tna-card--demo"
+      },
+      "html": "<article class=\"tna-card tna-card--demo\">\n    <hgroup class=\"tna-card__heading tna-hgroup\"><p class=\"tna-card__supertitle tna-hgroup__supertitle\">Card supertitle</p><h1 class=\"tna-card__title tna-hgroup__title\"><a href=\"#\" class=\"tna-card__title-link\">Card title</a></h1>\n    </hgroup><img src=\"https://loremflickr.com/640/360\" alt=\"A placeholder image\" class=\"tna-card__image\" /><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></article>",
+      "hidden": false
+    }
+  ]
+}

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

@@ -0,0 +1,96 @@
+[
+  {
+    "name": "supertitle",
+    "type": "string",
+    "required": false,
+    "description": ""
+  },
+  {
+    "name": "title",
+    "type": "string",
+    "required": true,
+    "description": ""
+  },
+  {
+    "name": "href",
+    "type": "string",
+    "required": false,
+    "description": ""
+  },
+  {
+    "name": "image",
+    "type": "object",
+    "required": false,
+    "description": "",
+    "params": [
+      {
+        "name": "src",
+        "type": "string",
+        "required": true,
+        "description": ""
+      },
+      {
+        "name": "alt",
+        "type": "string",
+        "required": true,
+        "description": ""
+      }
+    ]
+  },
+  {
+    "name": "body",
+    "type": "string",
+    "required": false,
+    "description": ""
+  },
+  {
+    "name": "text",
+    "type": "string",
+    "required": false,
+    "description": ""
+  },
+  {
+    "name": "actions",
+    "type": "array",
+    "required": true,
+    "description": "",
+    "params": [
+      {
+        "name": "text",
+        "type": "string",
+        "required": true,
+        "description": ""
+      },
+      {
+        "name": "href",
+        "type": "string",
+        "required": true,
+        "description": ""
+      },
+      {
+        "name": "title",
+        "type": "string",
+        "required": false,
+        "description": ""
+      }
+    ]
+  },
+  {
+    "name": "htmlElement",
+    "type": "string",
+    "required": false,
+    "description": "HTML element of the card."
+  },
+  {
+    "name": "classes",
+    "type": "string",
+    "required": false,
+    "description": "Classes to add to the card."
+  },
+  {
+    "name": "attributes",
+    "type": "object",
+    "required": false,
+    "description": "HTML attributes (for example data attributes) to add to the card."
+  }
+]

package/nationalarchives/components/card/macro.njk

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

package/nationalarchives/components/card/template.njk

@@ -0,0 +1,33 @@
+{%- set htmlElement = params.htmlElement if params.htmlElement else 'div' -%}
+{%- set containerClasses = [params.classes] if params.classes else [] -%}
+<{{ htmlElement }} class="tna-card {{ containerClasses | join(' ') }}" {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
+    <hgroup class="tna-card__heading tna-hgroup">
+    {%- if params.supertitle -%}
+        <p class="tna-card__supertitle tna-hgroup__supertitle">{{ params.supertitle }}</p>
+    {%- endif -%}
+        <h1 class="tna-card__title tna-hgroup__title">
+        {%- if params.href -%}
+            <a href="{{ params.href }}" class="tna-card__title-link">{{ params.title }}</a>
+        {%- else -%}
+            {{ params.title }}
+        {%- endif -%}
+        </h1>
+    </hgroup>
+    {%- if params.image -%}
+    <img src="{{ params.image.src }}" alt="{{ params.image.alt }}" class="tna-card__image" />
+    {%- 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 -%}
+</{{ htmlElement }}>

package/nationalarchives/components/footer/_footer.scss

@@ -0,0 +1,2 @@
+@import "../../base";
+@import "./index";

package/nationalarchives/components/footer/_index.scss

@@ -0,0 +1,77 @@
+// @import "../../variables/all";
+// @import "../../utilities/grid";
+
+@include nationalarchives-exports("nationalarchives/components/footer") {
+  .tna-footer {
+    padding-top: 3rem;
+    padding-bottom: 3rem;
+
+    color: #fff;
+
+    background-color: #26262a;
+  }
+
+  .tna-footer__link {
+    color: inherit;
+
+    &:hover {
+      color: #f0a;
+    }
+  }
+
+  .tna-footer__navigation {
+    padding-bottom: 3rem;
+  }
+
+  .tna-footer__navigation-group {
+  }
+
+  .tna-footer__navigation-group-title {
+  }
+
+  .tna-footer__navigation-group-items {
+    padding-left: 0;
+
+    list-style: none;
+  }
+
+  .tna-footer__navigation-group-item {
+  }
+
+  .tna-footer__navigation-group-item-link {
+  }
+
+  .tna-footer__social {
+    padding-bottom: 4rem;
+  }
+
+  .tna-footer__social-item {
+    text-align: center;
+  }
+
+  .tna-footer__social-item-link {
+  }
+
+  .tna-footer__licence-logo {
+    display: block;
+  }
+
+  .tna-footer__govuk-link {
+    display: inline-block;
+
+    color: inherit;
+    fill: #fff;
+
+    &:hover {
+      color: #f0a;
+      fill: #f0a;
+    }
+  }
+
+  .tna-footer__govuk-logotype-crown {
+    margin: 0 auto;
+    display: block;
+
+    fill: inherit;
+  }
+}

package/nationalarchives/components/footer/fixtures.json

@@ -0,0 +1,11 @@
+{
+  "component": "footer",
+  "fixtures": [
+    {
+      "name": "minimal",
+      "options": {},
+      "html": "<footer class=\"tna-footer \"><div class=\"tna-container\">\n        <div class=\"tna-column\">\n            <svg aria-hidden=\"true\" focusable=\"false\" class=\"tna-footer__licence-logo\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 483.2 195.7\" height=\"17\" width=\"41\">\n          <path fill=\"currentColor\" d=\"M421.5 142.8V.1l-50.7 32.3v161.1h112.4v-50.7zm-122.3-9.6A47.12 47.12 0 0 1 221 97.8c0-26 21.1-47.1 47.1-47.1 16.7 0 31.4 8.7 39.7 21.8l42.7-27.2A97.63 97.63 0 0 0 268.1 0c-36.5 0-68.3 20.1-85.1 49.7A98 98 0 0 0 97.8 0C43.9 0 0 43.9 0 97.8s43.9 97.8 97.8 97.8c36.5 0 68.3-20.1 85.1-49.7a97.76 97.76 0 0 0 149.6 25.4l19.4 22.2h3v-87.8h-80l24.3 27.5zM97.8 145c-26 0-47.1-21.1-47.1-47.1s21.1-47.1 47.1-47.1 47.2 21 47.2 47S123.8 145 97.8 145\"></path>\n        </svg>\n        </div>\n        <div class=\"tna-column tna-column--flex-1\">\n            <p>All content is available under the <a href=\"https://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/\" class=\"tna-footer__link\">Open Government Licence v3.0</a>, except where otherwise stated</p>\n        </div>\n        <div class=\"tna-column\">\n            <a href=\"#\" class=\"tna-footer__govuk-link\">\n                <svg aria-hidden=\"true\" class=\"tna-footer__govuk-logotype-crown\" focusable=\"false\" height=\"30\" viewBox=\"0 0 132 97\" width=\"36\" xmlns=\"http://www.w3.org/2000/svg\">\n                    <path d=\"M25 30.2c3.5 1.5 7.7-.2 9.1-3.7 1.5-3.6-.2-7.8-3.9-9.2-3.6-1.4-7.6.3-9.1 3.9-1.4 3.5.3 7.5 3.9 9zM9 39.5c3.6 1.5 7.8-.2 9.2-3.7 1.5-3.6-.2-7.8-3.9-9.1-3.6-1.5-7.6.2-9.1 3.8-1.4 3.5.3 7.5 3.8 9zM4.4 57.2c3.5 1.5 7.7-.2 9.1-3.8 1.5-3.6-.2-7.7-3.9-9.1-3.5-1.5-7.6.3-9.1 3.8-1.4 3.5.3 7.6 3.9 9.1zm38.3-21.4c3.5 1.5 7.7-.2 9.1-3.8 1.5-3.6-.2-7.7-3.9-9.1-3.6-1.5-7.6.3-9.1 3.8-1.3 3.6.4 7.7 3.9 9.1zm64.4-5.6c-3.6 1.5-7.8-.2-9.1-3.7-1.5-3.6.2-7.8 3.8-9.2 3.6-1.4 7.7.3 9.2 3.9 1.3 3.5-.4 7.5-3.9 9zm15.9 9.3c-3.6 1.5-7.7-.2-9.1-3.7-1.5-3.6.2-7.8 3.7-9.1 3.6-1.5 7.7.2 9.2 3.8 1.5 3.5-.3 7.5-3.8 9zm4.7 17.7c-3.6 1.5-7.8-.2-9.2-3.8-1.5-3.6.2-7.7 3.9-9.1 3.6-1.5 7.7.3 9.2 3.8 1.3 3.5-.4 7.6-3.9 9.1zM89.3 35.8c-3.6 1.5-7.8-.2-9.2-3.8-1.4-3.6.2-7.7 3.9-9.1 3.6-1.5 7.7.3 9.2 3.8 1.4 3.6-.3 7.7-3.9 9.1zM69.7 17.7l8.9 4.7V9.3l-8.9 2.8c-.2-.3-.5-.6-.9-.9L72.4 0H59.6l3.5 11.2c-.3.3-.6.5-.9.9l-8.8-2.8v13.1l8.8-4.7c.3.3.6.7.9.9l-5 15.4v.1c-.2.8-.4 1.6-.4 2.4 0 4.1 3.1 7.5 7 8.1h.2c.3 0 .7.1 1 .1.4 0 .7 0 1-.1h.2c4-.6 7.1-4.1 7.1-8.1 0-.8-.1-1.7-.4-2.4V34l-5.1-15.4c.4-.2.7-.6 1-.9zM66 92.8c16.9 0 32.8 1.1 47.1 3.2 4-16.9 8.9-26.7 14-33.5l-9.6-3.4c1 4.9 1.1 7.2 0 10.2-1.5-1.4-3-4.3-4.2-8.7L108.6 76c2.8-2 5-3.2 7.5-3.3-4.4 9.4-10 11.9-13.6 11.2-4.3-.8-6.3-4.6-5.6-7.9 1-4.7 5.7-5.9 8-.5 4.3-8.7-3-11.4-7.6-8.8 7.1-7.2 7.9-13.5 2.1-21.1-8 6.1-8.1 12.3-4.5 20.8-4.7-5.4-12.1-2.5-9.5 6.2 3.4-5.2 7.9-2 7.2 3.1-.6 4.3-6.4 7.8-13.5 7.2-10.3-.9-10.9-8-11.2-13.8 2.5-.5 7.1 1.8 11 7.3L80.2 60c-4.1 4.4-8 5.3-12.3 5.4 1.4-4.4 8-11.6 8-11.6H55.5s6.4 7.2 7.9 11.6c-4.2-.1-8-1-12.3-5.4l1.4 16.4c3.9-5.5 8.5-7.7 10.9-7.3-.3 5.8-.9 12.8-11.1 13.8-7.2.6-12.9-2.9-13.5-7.2-.7-5 3.8-8.3 7.1-3.1 2.7-8.7-4.6-11.6-9.4-6.2 3.7-8.5 3.6-14.7-4.6-20.8-5.8 7.6-5 13.9 2.2 21.1-4.7-2.6-11.9.1-7.7 8.8 2.3-5.5 7.1-4.2 8.1.5.7 3.3-1.3 7.1-5.7 7.9-3.5.7-9-1.8-13.5-11.2 2.5.1 4.7 1.3 7.5 3.3l-4.7-15.4c-1.2 4.4-2.7 7.2-4.3 8.7-1.1-3-.9-5.3 0-10.2l-9.5 3.4c5 6.9 9.9 16.7 14 33.5 14.8-2.1 30.8-3.2 47.7-3.2z\"></path>\n                </svg>\n                GOV.UK\n            </a>\n        </div>\n    </div>\n</footer>",
+      "hidden": false
+    }
+  ]
+}

package/nationalarchives/components/footer/footer.stories.js

@@ -0,0 +1,170 @@
+import Footer from "./template.njk";
+import "../../all.scss";
+import "./_footer.scss";
+import macroOptions from "./macro-options.json";
+
+const argTypes = {
+  navigation: { control: "object" },
+  social: { control: "object" },
+  classes: { control: "text" },
+  attributes: { control: "text" },
+};
+
+Object.keys(argTypes).forEach((argType) => {
+  argTypes[argType].description = macroOptions.find(
+    (option) => option.name === argType
+  )?.description;
+});
+
+export default {
+  title: "Components/Footer",
+  argTypes,
+};
+
+const Template = ({ navigation, social, classes, attributes }) => {
+  return Footer({
+    params: {
+      navigation,
+      social,
+      classes,
+      attributes,
+    },
+  });
+};
+
+export const Standard = Template.bind({});
+Standard.args = {
+  navigation: [
+    {
+      title: "Find out more",
+      items: [
+        {
+          text: "Contact us",
+          href: "#",
+        },
+        {
+          text: "Press room",
+          href: "#",
+        },
+        {
+          text: "Jobs and careers",
+          href: "#",
+        },
+        {
+          text: "Friends of The National Archives",
+          href: "#",
+        },
+      ],
+    },
+    {
+      title: "Site help",
+      items: [
+        {
+          text: "Help",
+          href: "#",
+        },
+        {
+          text: "Website A-Z index",
+          href: "#",
+        },
+        {
+          text: "Accessibility",
+          href: "#",
+        },
+      ],
+    },
+    {
+      title: "Websites",
+      items: [
+        {
+          text: "Blog",
+          href: "#",
+        },
+        {
+          text: "Podcasts and videos",
+          href: "#",
+        },
+        {
+          text: "Shop",
+          href: "#",
+        },
+        {
+          text: "Image library",
+          href: "#",
+        },
+        {
+          text: "UK Government Web Archive",
+          href: "#",
+        },
+        {
+          text: "Legislation.gov.ukOpens a new window",
+          href: "#",
+        },
+        {
+          text: "Find case law",
+          href: "#",
+        },
+        {
+          text: "The Gazette",
+          href: "#",
+        },
+      ],
+    },
+    {
+      title: "Legal",
+      items: [
+        {
+          text: "Terms of use",
+          href: "#",
+        },
+        {
+          text: "Privacy policy",
+          href: "#",
+        },
+        {
+          text: "Cookies",
+          href: "#",
+        },
+        {
+          text: "Freedom of Information",
+          href: "#",
+        },
+        {
+          text: "Transparency",
+          href: "#",
+        },
+        {
+          text: "Our fees",
+          href: "#",
+        },
+      ],
+    },
+  ],
+  social: [
+    {
+      text: "Twitter",
+      href: "#",
+    },
+    {
+      text: "YouTube",
+      href: "#",
+    },
+    {
+      text: "Flickr",
+      href: "#",
+    },
+    {
+      text: "Facebook",
+      href: "#",
+    },
+    {
+      text: "Instagram",
+      href: "#",
+    },
+    {
+      text: "RSS",
+      href: "#",
+    },
+  ],
+  classes: "tna-footer--demo",
+};