@nationalarchives/frontend 0.1.23-prerelease → 0.1.25-prerelease

package/nationalarchives/components/pagination/pagination.stories.js

@@ -2,10 +2,12 @@ import Pagination from "./template.njk";
 import macroOptions from "./macro-options.json";
 
 const argTypes = {
-  landmarkLabel: { control: "text" },
   previous: { control: "object" },
   items: { control: "object" },
   next: { control: "object" },
+  currentItemText: { control: "text" },
+  spaced: { control: "boolean" },
+  landmarkLabel: { control: "text" },
   classes: { control: "text" },
   attributes: { control: "object" },
 };
@@ -21,12 +23,24 @@ export default {
   argTypes,
 };
 
-const Template = ({ previous, items, next, classes, attributes }) =>
+const Template = ({
+  previous,
+  items,
+  next,
+  currentItemText,
+  spaced,
+  landmarkLabel,
+  classes,
+  attributes,
+}) =>
   Pagination({
     params: {
       previous,
       items,
       next,
+      currentItemText,
+      spaced,
+      landmarkLabel,
       classes,
       attributes,
     },
@@ -71,3 +85,404 @@ Standard.args = {
   },
   classes: "tna-pagination--demo",
 };
+
+export const First = Template.bind({});
+First.parameters = {
+  chromatic: { disableSnapshot: true },
+};
+First.args = {
+  items: [
+    {
+      number: 1,
+      current: true,
+      href: "#",
+    },
+    {
+      number: 2,
+      href: "#",
+    },
+    {
+      ellipsis: true,
+    },
+    {
+      number: 42,
+      href: "#",
+    },
+  ],
+  next: {
+    href: "#",
+  },
+  classes: "tna-pagination--demo",
+};
+
+export const Second = Template.bind({});
+Second.parameters = {
+  chromatic: { disableSnapshot: true },
+};
+Second.args = {
+  previous: {
+    href: "#",
+  },
+  items: [
+    {
+      number: 1,
+      href: "#",
+    },
+    {
+      number: 2,
+      current: true,
+      href: "#",
+    },
+    {
+      number: 3,
+      href: "#",
+    },
+    {
+      ellipsis: true,
+    },
+    {
+      number: 42,
+      href: "#",
+    },
+  ],
+  next: {
+    href: "#",
+  },
+  classes: "tna-pagination--demo",
+};
+
+export const Third = Template.bind({});
+Third.parameters = {
+  chromatic: { disableSnapshot: true },
+};
+Third.args = {
+  previous: {
+    href: "#",
+  },
+  items: [
+    {
+      number: 1,
+      href: "#",
+    },
+    {
+      number: 2,
+      href: "#",
+    },
+    {
+      number: 3,
+      current: true,
+      href: "#",
+    },
+    {
+      number: 4,
+      href: "#",
+    },
+    {
+      ellipsis: true,
+    },
+    {
+      number: 42,
+      href: "#",
+    },
+  ],
+  next: {
+    href: "#",
+  },
+  classes: "tna-pagination--demo",
+};
+
+export const Forth = Template.bind({});
+Forth.parameters = {
+  chromatic: { disableSnapshot: true },
+};
+Forth.args = {
+  previous: {
+    href: "#",
+  },
+  items: [
+    {
+      number: 1,
+      href: "#",
+    },
+    {
+      number: 2,
+      href: "#",
+    },
+    {
+      number: 3,
+      href: "#",
+    },
+    {
+      number: 4,
+      current: true,
+      href: "#",
+    },
+    {
+      number: 5,
+      href: "#",
+    },
+    {
+      ellipsis: true,
+    },
+    {
+      number: 42,
+      href: "#",
+    },
+  ],
+  next: {
+    href: "#",
+  },
+  classes: "tna-pagination--demo",
+};
+
+export const Fifth = Template.bind({});
+Fifth.parameters = {
+  chromatic: { disableSnapshot: true },
+};
+Fifth.args = {
+  previous: {
+    href: "#",
+  },
+  items: [
+    {
+      number: 1,
+      href: "#",
+    },
+    {
+      ellipsis: true,
+    },
+    {
+      number: 4,
+      href: "#",
+    },
+    {
+      number: 5,
+      current: true,
+      href: "#",
+    },
+    {
+      number: 6,
+      href: "#",
+    },
+    {
+      ellipsis: true,
+    },
+    {
+      number: 42,
+      href: "#",
+    },
+  ],
+  next: {
+    href: "#",
+  },
+  classes: "tna-pagination--demo",
+};
+
+export const LastMinus4 = Template.bind({});
+LastMinus4.parameters = {
+  chromatic: { disableSnapshot: true },
+};
+LastMinus4.args = {
+  previous: {
+    href: "#",
+  },
+  items: [
+    {
+      number: 1,
+      href: "#",
+    },
+    {
+      ellipsis: true,
+    },
+    {
+      number: 37,
+      href: "#",
+    },
+    {
+      number: 38,
+      current: true,
+      href: "#",
+    },
+    {
+      number: 39,
+      href: "#",
+    },
+    {
+      ellipsis: true,
+    },
+    {
+      number: 42,
+      href: "#",
+    },
+  ],
+  next: {
+    href: "#",
+  },
+  classes: "tna-pagination--demo",
+};
+
+export const LastMinus3 = Template.bind({});
+LastMinus3.parameters = {
+  chromatic: { disableSnapshot: true },
+};
+LastMinus3.args = {
+  previous: {
+    href: "#",
+  },
+  items: [
+    {
+      number: 1,
+      href: "#",
+    },
+    {
+      ellipsis: true,
+    },
+    {
+      number: 38,
+      href: "#",
+    },
+    {
+      number: 39,
+      current: true,
+      href: "#",
+    },
+    {
+      number: 40,
+      href: "#",
+    },
+    {
+      number: 41,
+      href: "#",
+    },
+    {
+      number: 42,
+      href: "#",
+    },
+  ],
+  next: {
+    href: "#",
+  },
+  classes: "tna-pagination--demo",
+};
+
+export const LastMinus2 = Template.bind({});
+LastMinus2.parameters = {
+  chromatic: { disableSnapshot: true },
+};
+LastMinus2.args = {
+  previous: {
+    href: "#",
+  },
+  items: [
+    {
+      number: 1,
+      href: "#",
+    },
+    {
+      ellipsis: true,
+    },
+    {
+      number: 39,
+      href: "#",
+    },
+    {
+      number: 40,
+      current: true,
+      href: "#",
+    },
+    {
+      number: 41,
+      href: "#",
+    },
+    {
+      number: 42,
+      href: "#",
+    },
+  ],
+  next: {
+    href: "#",
+  },
+  classes: "tna-pagination--demo",
+};
+
+export const LastMinus1 = Template.bind({});
+LastMinus1.parameters = {
+  chromatic: { disableSnapshot: true },
+};
+LastMinus1.args = {
+  previous: {
+    href: "#",
+  },
+  items: [
+    {
+      number: 1,
+      href: "#",
+    },
+    {
+      ellipsis: true,
+    },
+    {
+      number: 40,
+      href: "#",
+    },
+    {
+      number: 41,
+      current: true,
+      href: "#",
+    },
+    {
+      number: 42,
+      href: "#",
+    },
+  ],
+  next: {
+    href: "#",
+  },
+  classes: "tna-pagination--demo",
+};
+
+export const Last = Template.bind({});
+Last.parameters = {
+  chromatic: { disableSnapshot: true },
+};
+Last.args = {
+  previous: {
+    href: "#",
+  },
+  items: [
+    {
+      number: 1,
+      href: "#",
+    },
+    {
+      ellipsis: true,
+    },
+    {
+      number: 41,
+      href: "#",
+    },
+    {
+      number: 42,
+      current: true,
+      href: "#",
+    },
+  ],
+  classes: "tna-pagination--demo",
+};
+
+export const NoNumbers = Template.bind({});
+NoNumbers.args = {
+  previous: {
+    href: "#",
+    text: "TS 11/45/166",
+    title: "From the catalogue: TS 11/45/166",
+  },
+  currentItemText: "From the catalogue: TS 11/45/167",
+  next: {
+    href: "#",
+    text: "TS 11/45/168",
+    title: "From the catalogue: TS 11/45/168",
+  },
+  spaced: true,
+  classes: "tna-pagination--demo",
+};

package/nationalarchives/components/pagination/template.njk

@@ -1,8 +1,11 @@
 {%- set containerClasses = [params.classes] if params.classes else [] -%}
-<nav class="tna-pagination {{ containerClasses | join(' ') }}" role="navigation" aria-label="{{ params.landmarkLabel if params.landmarkLabel else 'Results' }}" {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
+{%- if params.spaced -%}
+  {%- set containerClasses = containerClasses.concat('tna-pagination--spaced') -%}
+{%- endif -%}
+<nav class="tna-pagination {{ containerClasses | join(' ') }}" role="navigation" aria-label="{{ params.landmarkLabel if params.landmarkLabel else 'Pagination' }}" {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
   {% if params.previous -%}
   <div class="tna-pagination__prev">
-    <a class="tna-button tna-pagination__link" href="{{ params.previous.href }}" role="button" rel="prev">
+    <a class="tna-button tna-pagination__link" href="{{ params.previous.href }}" role="button" rel="prev" {%- if params.previous.title %} title="{{ params.previous.title }}"{% endif %}>
       <svg class="tna-pagination__icon tna-pagination__icon--prev" xmlns="http://www.w3.org/2000/svg" height="13" width="15" aria-hidden="true" focusable="false" viewBox="0 0 15 13">
         <path d="m6.5938-0.0078125-6.7266 6.7266 6.7441 6.4062 1.377-1.449-4.1856-3.9768h12.896v-2h-12.984l4.2931-4.293-1.414-1.414z"></path>
       </svg>
@@ -12,6 +15,7 @@
     </a>
   </div>
   {% endif -%}
+  {% if params.items -%}
   <ul class="tna-pagination__list">
     {% for item in params.items -%}
       {% if item.ellipsis -%}
@@ -25,9 +29,12 @@
       {% endif -%}
     {% endfor -%}
   </ul>
+  {% elif params.currentItemText -%}
+    <p class="tna-pagination__current-item-text">{{ params.currentItemText }}</p>
+  {% endif -%}
   {% if params.next -%}
   <div class="tna-pagination__next">
-    <a class="tna-button tna-pagination__link" href="{{ params.next.href }}" role="button" rel="next">
+    <a class="tna-button tna-pagination__link" href="{{ params.next.href }}" role="button" rel="next" {%- if params.next.title %} title="{{ params.next.title }}"{% endif %}>
       <span class="tna-pagination__link-title">{{ params.next.text if params.next.text else 'Next' }}</span>
       <svg class="tna-pagination__icon tna-pagination__icon--next" xmlns="http://www.w3.org/2000/svg" height="13" width="15" aria-hidden="true" focusable="false" viewBox="0 0 15 13">
         <path d="m8.107-0.0078125-1.4136 1.414 4.2926 4.293h-12.986v2h12.896l-4.1855 3.9766 1.377 1.4492 6.7441-6.4062-6.7246-6.7266z"></path>

package/nationalarchives/components/phase-banner/fixtures.json

@@ -2,39 +2,12 @@
   "component": "phase-banner",
   "fixtures": [
     {
-      "name": "discovery",
-      "options": {
-        "phase": "discovery",
-        "message": "This is a new service – <a href='#'>give us your feedback</a> to help improve it."
-      },
-      "html": "<div class=\"tna-phase-banner tna-phase-banner--discovery\"><div class=\"tna-container\"><div class=\"tna-column tna-column--full-tiny\"><span class=\"tna-phase-banner__phase\">Discovery</span></div><div class=\"tna-column tna-column--flex-1 tna-column--full-tiny\"><p class=\"tna-phase-banner__message\">This is a new service – <a href='#'>give us your feedback</a> to help improve it.</p></div></div></div>",
-      "hidden": false
-    },
-    {
-      "name": "alpha",
-      "options": {
-        "phase": "alpha",
-        "message": "This is a new service – <a href='#'>give us your feedback</a> to help improve it."
-      },
-      "html": "<div class=\"tna-phase-banner tna-phase-banner--alpha\"><div class=\"tna-container\"><div class=\"tna-column tna-column--full-tiny\"><span class=\"tna-phase-banner__phase\">Alpha</span></div><div class=\"tna-column tna-column--flex-1 tna-column--full-tiny\"><p class=\"tna-phase-banner__message\">This is a new service – <a href='#'>give us your feedback</a> to help improve it.</p></div></div></div>",
-      "hidden": false
-    },
-    {
-      "name": "beta",
+      "name": "simple",
       "options": {
         "phase": "beta",
         "message": "This is a new service – <a href='#'>give us your feedback</a> to help improve it."
       },
-      "html": "<div class=\"tna-phase-banner tna-phase-banner--beta\"><div class=\"tna-container\"><div class=\"tna-column tna-column--full-tiny\"><span class=\"tna-phase-banner__phase\">Beta</span></div><div class=\"tna-column tna-column--flex-1 tna-column--full-tiny\"><p class=\"tna-phase-banner__message\">This is a new service – <a href='#'>give us your feedback</a> to help improve it.</p></div></div></div>",
-      "hidden": false
-    },
-    {
-      "name": "live",
-      "options": {
-        "phase": "live",
-        "message": "This is a new service – <a href='#'>give us your feedback</a> to help improve it."
-      },
-      "html": "<div class=\"tna-phase-banner tna-phase-banner--live\"><div class=\"tna-container\"><div class=\"tna-column tna-column--full-tiny\"><span class=\"tna-phase-banner__phase\">Live</span></div><div class=\"tna-column tna-column--flex-1 tna-column--full-tiny\"><p class=\"tna-phase-banner__message\">This is a new service – <a href='#'>give us your feedback</a> to help improve it.</p></div></div></div>",
+      "html": "<div class=\"tna-phase-banner \"><div class=\"tna-container\"><div class=\"tna-column tna-column--full-tiny\"><span class=\"tna-phase-banner__phase\">Beta</span></div><div class=\"tna-column tna-column--flex-1 tna-column--full-tiny\"><p class=\"tna-phase-banner__message\">This is a new service – <a href='#'>give us your feedback</a> to help improve it.</p></div></div></div>",
       "hidden": false
     },
     {
@@ -43,16 +16,7 @@
         "phase": "BETA",
         "message": "Message"
       },
-      "html": "<div class=\"tna-phase-banner tna-phase-banner--beta\"><div class=\"tna-container\"><div class=\"tna-column tna-column--full-tiny\"><span class=\"tna-phase-banner__phase\">Beta</span></div><div class=\"tna-column tna-column--flex-1 tna-column--full-tiny\"><p class=\"tna-phase-banner__message\">Message</p></div></div></div>",
-      "hidden": false
-    },
-    {
-      "name": "unknown phase",
-      "options": {
-        "phase": "unknown",
-        "message": "Message"
-      },
-      "html": "<div class=\"tna-phase-banner tna-phase-banner--unknown\"><div class=\"tna-container\"><div class=\"tna-column tna-column--full-tiny\"><span class=\"tna-phase-banner__phase\">Unknown</span></div><div class=\"tna-column tna-column--flex-1 tna-column--full-tiny\"><p class=\"tna-phase-banner__message\">Message</p></div></div></div>",
+      "html": "<div class=\"tna-phase-banner \"><div class=\"tna-container\"><div class=\"tna-column tna-column--full-tiny\"><span class=\"tna-phase-banner__phase\">Beta</span></div><div class=\"tna-column tna-column--flex-1 tna-column--full-tiny\"><p class=\"tna-phase-banner__message\">Message</p></div></div></div>",
       "hidden": false
     },
     {
@@ -62,7 +26,7 @@
         "message": "Message",
         "classes": "tna-phase-banner--fixture"
       },
-      "html": "<div class=\"tna-phase-banner tna-phase-banner--fixture tna-phase-banner--live\"><div class=\"tna-container\"><div class=\"tna-column tna-column--full-tiny\"><span class=\"tna-phase-banner__phase\">Live</span></div><div class=\"tna-column tna-column--flex-1 tna-column--full-tiny\"><p class=\"tna-phase-banner__message\">Message</p></div></div></div>",
+      "html": "<div class=\"tna-phase-banner tna-phase-banner--fixture\"><div class=\"tna-container\"><div class=\"tna-column tna-column--full-tiny\"><span class=\"tna-phase-banner__phase\">Live</span></div><div class=\"tna-column tna-column--flex-1 tna-column--full-tiny\"><p class=\"tna-phase-banner__message\">Message</p></div></div></div>",
       "hidden": false
     },
     {
@@ -74,7 +38,7 @@
           "data-fixturetest": "pass"
         }
       },
-      "html": "<div class=\"tna-phase-banner tna-phase-banner--live\" data-fixturetest=\"pass\"><div class=\"tna-container\"><div class=\"tna-column tna-column--full-tiny\"><span class=\"tna-phase-banner__phase\">Live</span></div><div class=\"tna-column tna-column--flex-1 tna-column--full-tiny\"><p class=\"tna-phase-banner__message\">Message</p></div></div></div>",
+      "html": "<div class=\"tna-phase-banner \" data-fixturetest=\"pass\"><div class=\"tna-container\"><div class=\"tna-column tna-column--full-tiny\"><span class=\"tna-phase-banner__phase\">Live</span></div><div class=\"tna-column tna-column--flex-1 tna-column--full-tiny\"><p class=\"tna-phase-banner__message\">Message</p></div></div></div>",
       "hidden": false
     }
   ]

package/nationalarchives/components/phase-banner/macro-options.json

@@ -11,6 +11,12 @@
     "required": true,
     "description": ""
   },
+  {
+    "name": "accent",
+    "type": "boolean",
+    "required": false,
+    "description": ""
+  },
   {
     "name": "classes",
     "type": "string",