Allow structured data in breadcrumbs (#93)

* Allow structured data in breadcrumbs * Remove extra space from breadcrumbs class * Better whitespace in button HTML * Update breadcrumbs macro options
nationalarchives · Mar 1, 2024 · cf04003 · cf04003
1 parent ca57b90
commit cf04003
Show file tree

Hide file tree

Showing 34 changed files with 232 additions and 287 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Added
 
 - Error summary component
+- Allow structured data in breadcrumbs with `structuredData`
 
 ### Changed
 ### Deprecated

diff --git a/src/nationalarchives/components/breadcrumbs/breadcrumbs.stories.js b/src/nationalarchives/components/breadcrumbs/breadcrumbs.stories.js
@@ -6,6 +6,7 @@ import { customViewports } from "../../../../.storybook/viewports";
 const argTypes = {
   items: { control: "object" },
   noCollapse: { control: "boolean" },
+  structuredData: { control: "boolean" },
   classes: { control: "text" },
   attributes: { control: "object" },
 };
@@ -21,11 +22,12 @@ export default {
   argTypes,
 };
 
-const Template = ({ items, noCollapse, classes, attributes }) =>
+const Template = ({ items, noCollapse, structuredData, classes, attributes }) =>
   Breadcrumbs({
     params: {
       items,
       noCollapse,
+      structuredData,
       classes,
       attributes,
     },

diff --git a/src/nationalarchives/components/breadcrumbs/fixtures.json b/src/nationalarchives/components/breadcrumbs/fixtures.json
@@ -19,8 +19,7 @@
           }
         ]
       },
-      "html": "<nav class=\"tna-breadcrumbs \" data-module=\"tna-breadcrumbs\" aria-label=\"Breadcrumb\"><ol class=\"tna-breadcrumbs__list\"><li class=\"tna-breadcrumbs__item\"><a href=\"#/alpha\" class=\"tna-breadcrumbs__link\">Alpha</a></li><li class=\"tna-breadcrumbs__item\"><a href=\"#/beta\" class=\"tna-breadcrumbs__link\">Beta</a></li><li class=\"tna-breadcrumbs__item\"><a href=\"#/gamma\" class=\"tna-breadcrumbs__link\">Gamma</a></li></ol></nav>",
-      "hidden": false
+      "html": "<nav class=\"tna-breadcrumbs\" data-module=\"tna-breadcrumbs\" aria-label=\"Breadcrumb\"><ol class=\"tna-breadcrumbs__list\"><li class=\"tna-breadcrumbs__item\"><a href=\"#/alpha\" class=\"tna-breadcrumbs__link\">Alpha</a></li><li class=\"tna-breadcrumbs__item\"><a href=\"#/beta\" class=\"tna-breadcrumbs__link\">Beta</a></li><li class=\"tna-breadcrumbs__item\"><a href=\"#/gamma\" class=\"tna-breadcrumbs__link\">Gamma</a></li></ol></nav>"
     },
     {
       "name": "non-collapsing",
@@ -38,11 +37,75 @@
             "text": "Gamma",
             "href": "#/gamma"
           }
-        ]
+        ],
+        "noCollapse": true
+      },
+      "html": "<nav class=\"tna-breadcrumbs tna-breadcrumbs--no-collapse\" data-module=\"tna-breadcrumbs\" aria-label=\"Breadcrumb\"><ol class=\"tna-breadcrumbs__list\"><li class=\"tna-breadcrumbs__item\"><a href=\"#/alpha\" class=\"tna-breadcrumbs__link\">Alpha</a></li><li class=\"tna-breadcrumbs__item\"><a href=\"#/beta\" class=\"tna-breadcrumbs__link\">Beta</a></li><li class=\"tna-breadcrumbs__item\"><a href=\"#/gamma\" class=\"tna-breadcrumbs__link\">Gamma</a></li></ol></nav>"
+    },
+    {
+      "name": "Structured data",
+      "options": {
+        "items": [
+          {
+            "text": "Alpha",
+            "href": "#/alpha"
+          },
+          {
+            "text": "Beta",
+            "href": "#/beta"
+          },
+          {
+            "text": "Gamma",
+            "href": "#/gamma"
+          }
+        ],
+        "structuredData": true
+      },
+      "html": "<nav class=\"tna-breadcrumbs\" data-module=\"tna-breadcrumbs\" aria-label=\"Breadcrumb\"><ol class=\"tna-breadcrumbs__list\" itemscope itemtype=\"https://schema.org/BreadcrumbList\"><li class=\"tna-breadcrumbs__item\" itemprop=\"itemListElement\" itemscope itemtype=\"https://schema.org/ListItem\"><a href=\"#/alpha\" class=\"tna-breadcrumbs__link\" itemprop=\"item\"><span itemprop=\"name\">Alpha</span></a><meta itemprop=\"position\" content=\"1\"></li><li class=\"tna-breadcrumbs__item\" itemprop=\"itemListElement\" itemscope itemtype=\"https://schema.org/ListItem\"><a href=\"#/beta\" class=\"tna-breadcrumbs__link\" itemprop=\"item\"><span itemprop=\"name\">Beta</span></a><meta itemprop=\"position\" content=\"2\"></li><li class=\"tna-breadcrumbs__item\" itemprop=\"itemListElement\" itemscope itemtype=\"https://schema.org/ListItem\"><a href=\"#/gamma\" class=\"tna-breadcrumbs__link\" itemprop=\"item\"><span itemprop=\"name\">Gamma</span></a><meta itemprop=\"position\" content=\"3\"></li></ol></nav>"
+    },
+    {
+      "name": "with classes",
+      "options": {
+        "items": [
+          {
+            "text": "Alpha",
+            "href": "#/alpha"
+          },
+          {
+            "text": "Beta",
+            "href": "#/beta"
+          },
+          {
+            "text": "Gamma",
+            "href": "#/gamma"
+          }
+        ],
+        "classes": "tna-breadcrumbs--test"
+      },
+      "html": "<nav class=\"tna-breadcrumbs tna-breadcrumbs--test\" data-module=\"tna-breadcrumbs\" aria-label=\"Breadcrumb\"><ol class=\"tna-breadcrumbs__list\"><li class=\"tna-breadcrumbs__item\"><a href=\"#/alpha\" class=\"tna-breadcrumbs__link\">Alpha</a></li><li class=\"tna-breadcrumbs__item\"><a href=\"#/beta\" class=\"tna-breadcrumbs__link\">Beta</a></li><li class=\"tna-breadcrumbs__item\"><a href=\"#/gamma\" class=\"tna-breadcrumbs__link\">Gamma</a></li></ol></nav>"
+    },
+    {
+      "name": "with attributes",
+      "options": {
+        "items": [
+          {
+            "text": "Alpha",
+            "href": "#/alpha"
+          },
+          {
+            "text": "Beta",
+            "href": "#/beta"
+          },
+          {
+            "text": "Gamma",
+            "href": "#/gamma"
+          }
+        ],
+        "attributes": {
+          "data-testattribute": "foobar"
+        }
       },
-      "noCollapse": true,
-      "html": "<nav class=\"tna-breadcrumbs \" data-module=\"tna-breadcrumbs\" aria-label=\"Breadcrumb\"><ol class=\"tna-breadcrumbs__list\"><li class=\"tna-breadcrumbs__item\"><a href=\"#/alpha\" class=\"tna-breadcrumbs__link\">Alpha</a></li><li class=\"tna-breadcrumbs__item\"><a href=\"#/beta\" class=\"tna-breadcrumbs__link\">Beta</a></li><li class=\"tna-breadcrumbs__item\"><a href=\"#/gamma\" class=\"tna-breadcrumbs__link\">Gamma</a></li></ol></nav>",
-      "hidden": false
+      "html": "<nav class=\"tna-breadcrumbs\" data-module=\"tna-breadcrumbs\" aria-label=\"Breadcrumb\" data-testattribute=\"foobar\"><ol class=\"tna-breadcrumbs__list\"><li class=\"tna-breadcrumbs__item\"><a href=\"#/alpha\" class=\"tna-breadcrumbs__link\">Alpha</a></li><li class=\"tna-breadcrumbs__item\"><a href=\"#/beta\" class=\"tna-breadcrumbs__link\">Beta</a></li><li class=\"tna-breadcrumbs__item\"><a href=\"#/gamma\" class=\"tna-breadcrumbs__link\">Gamma</a></li></ol></nav>"
     }
   ]
 }
diff --git a/src/nationalarchives/components/breadcrumbs/macro-options.json b/src/nationalarchives/components/breadcrumbs/macro-options.json
@@ -3,33 +3,39 @@
     "name": "items",
     "type": "array",
     "required": true,
-    "description": "",
+    "description": "The items within breadcrumbs.",
     "params": [
       {
         "name": "text",
         "type": "string",
         "required": true,
-        "description": ""
+        "description": "Text to use within the breadcrumbs item."
       },
       {
         "name": "href",
         "type": "string",
         "required": true,
-        "description": ""
+        "description": "Link for the breadcrumbs item."
       },
       {
         "name": "title",
         "type": "string",
         "required": false,
-        "description": ""
+        "description": "Optional title for the breadcrumb item used in the title attribute."
       }
     ]
   },
   {
     "name": "noCollapse",
-    "type": "string",
+    "type": "boolean",
+    "required": false,
+    "description": "When true, the breadcrumbs will not collapse to the first and last item only on smaller devices."
+  },
+  {
+    "name": "structuredData",
+    "type": "boolean",
     "required": false,
-    "description": ""
+    "description": "When true, structured data markup is added to the breadcrumbs."
   },
   {
     "name": "classes",

diff --git a/src/nationalarchives/components/breadcrumbs/template.njk b/src/nationalarchives/components/breadcrumbs/template.njk
@@ -2,13 +2,20 @@
 {%- if params.noCollapse -%}
   {%- set containerClasses = containerClasses.concat('tna-breadcrumbs--no-collapse') -%}
 {%- endif -%}
-<nav class="tna-breadcrumbs {{ containerClasses | join(' ') }}" data-module="tna-breadcrumbs" aria-label="Breadcrumb"{%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
-  <ol class="tna-breadcrumbs__list">
+<nav class="tna-breadcrumbs{{ ' ' + ( containerClasses | join(' ') ) if containerClasses.length else '' }}" data-module="tna-breadcrumbs" aria-label="Breadcrumb"{%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
+  <ol class="tna-breadcrumbs__list" {%- if params.structuredData %} itemscope itemtype="https://schema.org/BreadcrumbList"{% endif %}>
   {%- for item in params.items -%}
-    <li class="tna-breadcrumbs__item">
-      <a href="{{ item.href }}" class="tna-breadcrumbs__link" {%- if item.title %} title="{{ item.title }}"{% endif %}>
+    <li class="tna-breadcrumbs__item" {%- if params.structuredData %} itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem"{% endif %}>
+      <a href="{{ item.href }}" class="tna-breadcrumbs__link" {%- if item.title %} title="{{ item.title }}"{% endif %}{%- if params.structuredData %} itemprop="item"{% endif %}>
+        {%- if params.structuredData %}
+        <span itemprop="name">{{ item.text }}</span>
+        {%- else %}
         {{ item.text }}
+        {%- endif %}
       </a>
+      {%- if params.structuredData -%}
+      <meta itemprop="position" content="{{ loop.index }}">
+      {%- endif %}
     </li>
   {%- endfor -%}
   </ol>

diff --git a/src/nationalarchives/components/button/fixtures.json b/src/nationalarchives/components/button/fixtures.json
@@ -7,8 +7,7 @@
         "text": "Log in",
         "href": "#"
       },
-      "html": "<a href=\"#\" class=\"tna-button \">Log in</a>",
-      "hidden": false
+      "html": "<a href=\"#\" class=\"tna-button \">Log in</a>"
     },
     {
       "name": "with title",
@@ -17,8 +16,7 @@
         "href": "#",
         "title": "Log in to the service"
       },
-      "html": "<a href=\"#\" class=\"tna-button \" title=\"Log in to the service\">Log in</a>",
-      "hidden": false
+      "html": "<a href=\"#\" class=\"tna-button \" title=\"Log in to the service\">Log in</a>"
     },
     {
       "name": "accent",
@@ -27,8 +25,7 @@
         "href": "#",
         "accent": true
       },
-      "html": "<a href=\"#\" class=\"tna-button tna-button--accent\">Log in</a>",
-      "hidden": false
+      "html": "<a href=\"#\" class=\"tna-button tna-button--accent\">Log in</a>"
     },
     {
       "name": "with classes",
@@ -37,8 +34,7 @@
         "href": "#",
         "classes": "button__test-class"
       },
-      "html": "<a href=\"#\" class=\"tna-button button__test-class\">Log in</a>",
-      "hidden": false
+      "html": "<a href=\"#\" class=\"tna-button button__test-class\">Log in</a>"
     },
     {
       "name": "with attributes",
@@ -49,8 +45,7 @@
           "data-testattribute": "foobar"
         }
       },
-      "html": "<a href=\"#\" class=\"tna-button \" data-testattribute=\"foobar\">Log in</a>",
-      "hidden": false
+      "html": "<a href=\"#\" class=\"tna-button \" data-testattribute=\"foobar\">Log in</a>"
     }
   ]
 }
diff --git a/src/nationalarchives/components/button/template.njk b/src/nationalarchives/components/button/template.njk
@@ -18,8 +18,8 @@
   {%- set buttonClasses = buttonClasses.concat('tna-button--icon-right') -%}
 {%- endif -%}
 <{{ 'button' if params.buttonElement else 'a' }}{%- if not params.buttonElement %} href="{{ params.href }}"{%- endif %} class="tna-button {{ buttonClasses | join(' ') }}"{%- if params.buttonElement %} type="{{ params.buttonType or 'button' }}"{% endif -%}{%- if params.title %} title="{{ params.title }}"{% endif %}{% for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
-  {%- if params.icon -%}
+  {% if params.icon -%}
   <i class="fa-solid fa-{{ params.icon }}" aria-hidden="true"></i>
   {% endif -%}
-  {{ params.text -}}
+  {{ params.text }}
 </{{ 'button' if params.buttonElement else 'a' }}>