diff --git a/CHANGELOG.md b/CHANGELOG.md index 3cdd3793..0b728086 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -11,11 +11,13 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - High contrast support for chip lists with icons - Allow custom cookie path to be passed to cookie banner +- Index grids can have text/body as well as a title ### Changed - Card meta information changed to chip list - Improvements to high contrast modes +- Index grid heading options have been flattened to match other components ### Deprecated ### Removed @@ -25,6 +27,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Fixed - Multiple line spacing for chip lists fixed +- Index grid can now be used on a contrast background ### Security diff --git a/src/nationalarchives/components/index-grid/fixtures.json b/src/nationalarchives/components/index-grid/fixtures.json index eb2a209d..161b0683 100644 --- a/src/nationalarchives/components/index-grid/fixtures.json +++ b/src/nationalarchives/components/index-grid/fixtures.json @@ -1,4 +1,327 @@ { "component": "index-grid", - "fixtures": [] + "fixtures": [ + { + "name": "basic grid", + "options": { + "title": "My dogs", + "headingLevel": 2, + "items": [ + { + "href": "#/category-0", + "src": "https://picsum.photos/id/237/800/600", + "alt": "Photo of a puppy", + "width": 800, + "height": 600, + "title": "Category #101" + }, + { + "href": "#/category-1", + "src": "https://picsum.photos/id/237/800/600", + "alt": "Photo of a puppy", + "width": 800, + "height": 600, + "title": "Category #102" + }, + { + "href": "#/category-2", + "src": "https://picsum.photos/id/237/800/600", + "alt": "Photo of a puppy", + "width": 800, + "height": 600, + "title": "Category #103" + } + ], + "columns": 3, + "columnsMedium": 3, + "columnsSmall": 2, + "columnsTiny": 1 + }, + "html": "", + "hidden": false + }, + { + "name": "heading options", + "options": { + "title": "My dogs", + "headingLevel": 2, + "headingSize": "xl", + "headingHref": "#", + "items": [ + { + "href": "#/category-0", + "src": "https://picsum.photos/id/237/800/600", + "alt": "Photo of a puppy", + "width": 800, + "height": 600, + "title": "Category #101" + }, + { + "href": "#/category-1", + "src": "https://picsum.photos/id/237/800/600", + "alt": "Photo of a puppy", + "width": 800, + "height": 600, + "title": "Category #102" + }, + { + "href": "#/category-2", + "src": "https://picsum.photos/id/237/800/600", + "alt": "Photo of a puppy", + "width": 800, + "height": 600, + "title": "Category #103" + } + ], + "columns": 3, + "columnsMedium": 3, + "columnsSmall": 2, + "columnsTiny": 1 + }, + "html": "", + "hidden": false + }, + { + "name": "with body", + "options": { + "title": "My dogs", + "headingLevel": 2, + "body": "

Lorem ipsum

", + "items": [ + { + "href": "#/category-0", + "src": "https://picsum.photos/id/237/800/600", + "alt": "Photo of a puppy", + "width": 800, + "height": 600, + "title": "Category #101" + }, + { + "href": "#/category-1", + "src": "https://picsum.photos/id/237/800/600", + "alt": "Photo of a puppy", + "width": 800, + "height": 600, + "title": "Category #102" + }, + { + "href": "#/category-2", + "src": "https://picsum.photos/id/237/800/600", + "alt": "Photo of a puppy", + "width": 800, + "height": 600, + "title": "Category #103" + } + ], + "columns": 3, + "columnsMedium": 3, + "columnsSmall": 2, + "columnsTiny": 1 + }, + "html": "", + "hidden": false + }, + { + "name": "with text", + "options": { + "title": "My dogs", + "headingLevel": 2, + "body": "Lorem ipsum", + "items": [ + { + "href": "#/category-0", + "src": "https://picsum.photos/id/237/800/600", + "alt": "Photo of a puppy", + "width": 800, + "height": 600, + "title": "Category #101" + }, + { + "href": "#/category-1", + "src": "https://picsum.photos/id/237/800/600", + "alt": "Photo of a puppy", + "width": 800, + "height": 600, + "title": "Category #102" + }, + { + "href": "#/category-2", + "src": "https://picsum.photos/id/237/800/600", + "alt": "Photo of a puppy", + "width": 800, + "height": 600, + "title": "Category #103" + } + ], + "columns": 3, + "columnsMedium": 3, + "columnsSmall": 2, + "columnsTiny": 1 + }, + "html": "", + "hidden": false + }, + { + "name": "with item labels", + "options": { + "title": "My dogs", + "headingLevel": 2, + "body": "Lorem ipsum", + "items": [ + { + "href": "#/category-0", + "src": "https://picsum.photos/id/237/800/600", + "alt": "Photo of a puppy", + "width": 800, + "height": 600, + "label": "New", + "title": "Category #101" + }, + { + "href": "#/category-1", + "src": "https://picsum.photos/id/237/800/600", + "alt": "Photo of a puppy", + "width": 800, + "height": 600, + "label": "New", + "title": "Category #102" + }, + { + "href": "#/category-2", + "src": "https://picsum.photos/id/237/800/600", + "alt": "Photo of a puppy", + "width": 800, + "height": 600, + "label": "New", + "title": "Category #103" + } + ], + "columns": 3, + "columnsMedium": 3, + "columnsSmall": 2, + "columnsTiny": 1 + }, + "html": "", + "hidden": false + }, + { + "name": "with item subtitles", + "options": { + "title": "My dogs", + "headingLevel": 2, + "body": "Lorem ipsum", + "items": [ + { + "href": "#/category-0", + "src": "https://picsum.photos/id/237/800/600", + "alt": "Photo of a puppy", + "width": 800, + "height": 600, + "title": "Category #101", + "subtitle": "Category subtitle" + }, + { + "href": "#/category-1", + "src": "https://picsum.photos/id/237/800/600", + "alt": "Photo of a puppy", + "width": 800, + "height": 600, + "title": "Category #102", + "subtitle": "Category subtitle" + }, + { + "href": "#/category-2", + "src": "https://picsum.photos/id/237/800/600", + "alt": "Photo of a puppy", + "width": 800, + "height": 600, + "title": "Category #103", + "subtitle": "Category subtitle" + } + ], + "columns": 3, + "columnsMedium": 3, + "columnsSmall": 2, + "columnsTiny": 1 + }, + "html": "", + "hidden": false + }, + { + "name": "with classes", + "options": { + "title": "My dogs", + "headingLevel": 2, + "items": [ + { + "href": "#/category-0", + "src": "https://picsum.photos/id/237/800/600", + "alt": "Photo of a puppy", + "width": 800, + "height": 600, + "title": "Category #101" + }, + { + "href": "#/category-1", + "src": "https://picsum.photos/id/237/800/600", + "alt": "Photo of a puppy", + "width": 800, + "height": 600, + "title": "Category #102" + }, + { + "href": "#/category-2", + "src": "https://picsum.photos/id/237/800/600", + "alt": "Photo of a puppy", + "width": 800, + "height": 600, + "title": "Category #103" + } + ], + "columns": 3, + "classes": "index-grid__test-class" + }, + "html": "", + "hidden": false + }, + { + "name": "with attributes", + "options": { + "title": "My dogs", + "headingLevel": 2, + "items": [ + { + "href": "#/category-0", + "src": "https://picsum.photos/id/237/800/600", + "alt": "Photo of a puppy", + "width": 800, + "height": 600, + "title": "Category #101" + }, + { + "href": "#/category-1", + "src": "https://picsum.photos/id/237/800/600", + "alt": "Photo of a puppy", + "width": 800, + "height": 600, + "title": "Category #102" + }, + { + "href": "#/category-2", + "src": "https://picsum.photos/id/237/800/600", + "alt": "Photo of a puppy", + "width": 800, + "height": 600, + "title": "Category #103" + } + ], + "columns": 3, + "attributes": { + "data-testattribute": "foobar" + } + }, + "html": "", + "hidden": false + } + ] } diff --git a/src/nationalarchives/components/index-grid/index-grid.scss b/src/nationalarchives/components/index-grid/index-grid.scss index 42393cec..606cd88a 100644 --- a/src/nationalarchives/components/index-grid/index-grid.scss +++ b/src/nationalarchives/components/index-grid/index-grid.scss @@ -1,27 +1,26 @@ @use "sass:math"; @use "../../tools/colour"; @use "../../tools/media"; +@use "../../tools/spacing"; @use "../../tools/typography"; @use "../../utilities"; @use "../grid"; .tna-index-grid { + @include spacing.space-above; + &__heading { } &__items { - margin-bottom: 0; - padding-top: 2rem; + @include spacing.space-above; - list-style: none; - } + margin-bottom: 0; - &__item-wrapper { - margin-bottom: 2rem; + display: flex; + gap: 2rem 0; - @include media.on-mobile { - margin-bottom: 1rem; - } + list-style: none; } &__item { @@ -36,6 +35,10 @@ text-decoration: none; + .tna-background-contrast & { + @include colour.plain; + } + @include colour.on-high-contrast-and-forced-colours { @include colour.colour-border("keyline-dark", 1px); } diff --git a/src/nationalarchives/components/index-grid/index-grid.stories.js b/src/nationalarchives/components/index-grid/index-grid.stories.js index d95f1272..7e3f4bb0 100644 --- a/src/nationalarchives/components/index-grid/index-grid.stories.js +++ b/src/nationalarchives/components/index-grid/index-grid.stories.js @@ -2,7 +2,12 @@ import IndexGrid from "./template.njk"; import macroOptions from "./macro-options.json"; const argTypes = { - heading: { control: "object" }, + title: { control: "text" }, + headingLevel: { control: { type: "number", min: 1, max: 6 } }, + headingSize: { control: "inline-radio", options: ["s", "m", "l", "xl"] }, + headingHref: { control: "text" }, + body: { control: "text" }, + text: { control: "text" }, items: { control: "object" }, columns: { control: "number" }, columnsMedium: { control: "number" }, @@ -24,7 +29,12 @@ export default { }; const Template = ({ - heading, + title, + headingLevel, + headingSize, + headingHref, + body, + text, items, columns, columnsMedium, @@ -35,7 +45,12 @@ const Template = ({ }) => IndexGrid({ params: { - heading, + title, + headingLevel, + headingSize, + headingHref, + body, + text, items, columns, columnsMedium, @@ -50,18 +65,15 @@ const exampleItem = { href: "#", src: "https://picsum.photos/id/237/800/600", alt: "Photo of a puppy", - width: "800", - height: "600", + width: 800, + height: 600, title: "Cat", }; export const Standard = Template.bind({}); Standard.args = { - heading: { - title: "My dogs", - level: 2, - href: "#", - }, + title: "My dogs", + headingLevel: 2, items: Array(12) .fill({ ...exampleItem }) .map((item, index) => { @@ -86,9 +98,7 @@ Basic.parameters = { chromatic: { disableSnapshot: true }, }; Basic.args = { - heading: { - title: "My dogs", - }, + title: "My dogs", items: Array(6) .fill({ ...exampleItem }) .map((item, index) => { @@ -104,3 +114,4 @@ Basic.args = { columnsTiny: 1, classes: "tna-index-grid--demo", }; +console.log(JSON.stringify(Basic.args)); diff --git a/src/nationalarchives/components/index-grid/macro-options.json b/src/nationalarchives/components/index-grid/macro-options.json index 70e45f2f..646f4942 100644 --- a/src/nationalarchives/components/index-grid/macro-options.json +++ b/src/nationalarchives/components/index-grid/macro-options.json @@ -1,35 +1,40 @@ [ { - "name": "heading", - "type": "object", + "name": "title", + "type": "string", "required": true, - "description": "", - "params": [ - { - "name": "title", - "type": "string", - "required": true, - "description": "" - }, - { - "name": "level", - "type": "number", - "required": true, - "description": "" - }, - { - "name": "size", - "type": "text", - "required": false, - "description": "" - }, - { - "name": "href", - "type": "text", - "required": false, - "description": "" - } - ] + "description": "The main title of the index grid." + }, + { + "name": "headingLevel", + "type": "number", + "required": true, + "description": "The heading level which represents an element from `

` through to `

`." + }, + { + "name": "headingSize", + "type": "string", + "required": false, + "default": "m", + "description": "The physical size of the index grid title." + }, + { + "name": "headingHref", + "type": "string", + "required": false, + "description": "A URL to use as a link in the grid's heading." + }, + { + "name": "body", + "type": "string", + "required": false, + "description": "The HTML for the main body of the index grid. Not displayed if `text` is set." + }, + { + "name": "text", + "type": "string", + "required": false, + "description": "The text for the index grid which will be inserted into a `

` element. Overwrites `body` if it is set." }, { "name": "items", diff --git a/src/nationalarchives/components/index-grid/template.njk b/src/nationalarchives/components/index-grid/template.njk index 8b3d4d0e..73d95b0b 100644 --- a/src/nationalarchives/components/index-grid/template.njk +++ b/src/nationalarchives/components/index-grid/template.njk @@ -1,14 +1,19 @@ {%- set containerClasses = [params.classes] if params.classes else [] -%}