From cf04003743d58e63d9249bc8e4def62ceed882cd Mon Sep 17 00:00:00 2001 From: Andrew Hosgood Date: Fri, 1 Mar 2024 17:39:25 +0000 Subject: [PATCH] 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 --- CHANGELOG.md | 1 + .../breadcrumbs/breadcrumbs.stories.js | 4 +- .../components/breadcrumbs/fixtures.json | 75 +++++++++++++++++-- .../components/breadcrumbs/macro-options.json | 18 +++-- .../components/breadcrumbs/template.njk | 15 +++- .../components/button/fixtures.json | 15 ++-- .../components/button/template.njk | 4 +- .../components/card/fixtures.json | 51 +++++-------- .../components/checkboxes/fixtures.json | 18 ++--- .../components/compound-filters/fixtures.json | 3 +- .../components/cookie-banner/fixtures.json | 30 +++----- .../components/date-input/fixtures.json | 15 ++-- .../components/date-search/fixtures.json | 18 ++--- .../components/error-summary/fixtures.json | 3 +- .../components/featured-records/fixtures.json | 6 +- .../components/filters/fixtures.json | 3 +- .../components/footer/fixtures.json | 6 +- .../components/global-header/fixtures.json | 3 +- .../components/grid/fixtures.json | 39 ++++------ .../components/header/fixtures.json | 3 +- .../components/hero/fixtures.json | 36 +++------ .../components/index-grid/fixtures.json | 24 ++---- .../components/message/fixtures.json | 3 +- .../components/pagination/fixtures.json | 3 +- .../components/phase-banner/fixtures.json | 12 +-- .../components/picture/fixtures.json | 15 ++-- .../components/radios/fixtures.json | 18 ++--- .../components/search-field/fixtures.json | 9 +-- .../components/select/fixtures.json | 18 ++--- .../components/sensitive-image/fixtures.json | 9 +-- .../components/skip-link/fixtures.json | 3 +- .../components/tabs/fixtures.json | 3 +- .../components/text-input/fixtures.json | 18 ++--- .../components/textarea/fixtures.json | 18 ++--- 34 files changed, 232 insertions(+), 287 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 8085461a..88e74fc5 100644 --- 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 index aced72d3..20b696ac 100644 --- 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 index f459a751..19744e4b 100644 --- a/src/nationalarchives/components/breadcrumbs/fixtures.json +++ b/src/nationalarchives/components/breadcrumbs/fixtures.json @@ -19,8 +19,7 @@ } ] }, - "html": "", - "hidden": false + "html": "" }, { "name": "non-collapsing", @@ -38,11 +37,75 @@ "text": "Gamma", "href": "#/gamma" } - ] + ], + "noCollapse": true + }, + "html": "" + }, + { + "name": "Structured data", + "options": { + "items": [ + { + "text": "Alpha", + "href": "#/alpha" + }, + { + "text": "Beta", + "href": "#/beta" + }, + { + "text": "Gamma", + "href": "#/gamma" + } + ], + "structuredData": true + }, + "html": "" + }, + { + "name": "with classes", + "options": { + "items": [ + { + "text": "Alpha", + "href": "#/alpha" + }, + { + "text": "Beta", + "href": "#/beta" + }, + { + "text": "Gamma", + "href": "#/gamma" + } + ], + "classes": "tna-breadcrumbs--test" + }, + "html": "" + }, + { + "name": "with attributes", + "options": { + "items": [ + { + "text": "Alpha", + "href": "#/alpha" + }, + { + "text": "Beta", + "href": "#/beta" + }, + { + "text": "Gamma", + "href": "#/gamma" + } + ], + "attributes": { + "data-testattribute": "foobar" + } }, - "noCollapse": true, - "html": "", - "hidden": false + "html": "" } ] } diff --git a/src/nationalarchives/components/breadcrumbs/macro-options.json b/src/nationalarchives/components/breadcrumbs/macro-options.json index 14cff604..67473aa9 100644 --- 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 index 9c39226b..6d4eb7fb 100644 --- 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 -%} -