Update index grid (#56)

* Update index grid * Fix index grid on contrast backgrounds * Add spacing to top of pagination in demo
nationalarchives · Nov 29, 2023 · 43f4054 · 43f4054
1 parent 4826626
commit 43f4054
Show file tree

Hide file tree

Showing 7 changed files with 428 additions and 68 deletions.
diff --git 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
diff --git 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
@@ -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
@@ -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 `<h1>` through to `<h6>`."
+  },
+  {
+    "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 `<p>` 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
@@ -1,14 +1,19 @@
 {%- set containerClasses = [params.classes] if params.classes else [] -%}
 <nav class="tna-index-grid {{ containerClasses | join(' ') }}" aria-label="{{ params.heading.title }}" {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
   <div class="tna-container">
-    <div class="tna-column tna-column--full">
-      <h{{ params.heading.level }} class="tna-heading-{{ params.heading.size or 'l' }} tna-index-grid__heading">
-        {%- if params.heading.href -%}
-        <a href="{{ params.heading.href }}">{{ params.heading.title }}</a>
+    <div class="tna-column tna-column--width-2-3 tna-column--width-5-6-medium tna-column--full-small tna-column--full-tiny">
+      <h{{ params.headingLevel }} class="tna-heading-{{ params.headingSize or 'l' }} tna-index-grid__heading">
+        {%- if params.headingHref -%}
+        <a href="{{ params.headingHref }}">{{ params.title }}</a>
         {%- else -%}
-        {{ params.heading.title }}
+        {{ params.title }}
         {%- endif -%}
-      </h{{ params.heading.level }}>
+      </h{{ params.headingLevel }}>
+      {%- if params.text %}
+        <p>{{ params.text }}</p>
+      {%- else %}
+        {{ params.body | safe }}
+      {%- endif %}
     </div>
   </div>
   <ul class="tna-index-grid__items tna-container">

diff --git a/src/nationalarchives/stories/utilities/colour-schemes/colour-schemes.stories.js b/src/nationalarchives/stories/utilities/colour-schemes/colour-schemes.stories.js
@@ -615,7 +615,9 @@ const Template = ({ theme, accent }) => {
       <div class="tna-section">
         ${IndexGrid({
           params: {
-            heading: { title: "My dogs 1", level: 3, href: "#" },
+            title: "My dogs 1",
+            headingLevel: 3,
+            headingHref: "#",
             items: Array(6)
               .fill({
                 ...{
@@ -683,7 +685,7 @@ const Template = ({ theme, accent }) => {
                 next: {
                   href: "#",
                 },
-                classes: "tna-pagination--demo",
+                classes: "tna-pagination--demo tna-!--margin-top-m",
               },
             })}
             <div class="tna-button-group">
@@ -697,7 +699,9 @@ const Template = ({ theme, accent }) => {
       <div class="tna-section tna-background-tint">
         ${IndexGrid({
           params: {
-            heading: { title: "My dogs 2", level: 3, href: "#" },
+            title: "My dogs 2",
+            headingLevel: 3,
+            headingHref: "#",
             items: Array(6)
               .fill({
                 ...{
@@ -765,7 +769,7 @@ const Template = ({ theme, accent }) => {
                 next: {
                   href: "#",
                 },
-                classes: "tna-pagination--demo",
+                classes: "tna-pagination--demo tna-!--margin-top-m",
               },
             })}
             <div class="tna-button-group">
@@ -779,7 +783,9 @@ const Template = ({ theme, accent }) => {
       <div class="tna-section tna-background-contrast">
         ${IndexGrid({
           params: {
-            heading: { title: "My dogs 3", level: 3, href: "#" },
+            title: "My dogs 3",
+            headingLevel: 3,
+            headingHref: "#",
             items: Array(6)
               .fill({
                 ...{
@@ -847,7 +853,7 @@ const Template = ({ theme, accent }) => {
                 next: {
                   href: "#",
                 },
-                classes: "tna-pagination--demo",
+                classes: "tna-pagination--demo tna-!--margin-top-m",
               },
             })}
             <div class="tna-button-group">
@@ -861,7 +867,9 @@ const Template = ({ theme, accent }) => {
       <div class="tna-section tna-background-accent-light">
         ${IndexGrid({
           params: {
-            heading: { title: "My dogs 4", level: 3, href: "#" },
+            title: "My dogs 4",
+            headingLevel: 3,
+            headingHref: "#",
             items: Array(6)
               .fill({
                 ...{
@@ -929,7 +937,7 @@ const Template = ({ theme, accent }) => {
                 next: {
                   href: "#",
                 },
-                classes: "tna-pagination--demo",
+                classes: "tna-pagination--demo tna-!--margin-top-m",
               },
             })}
             <div class="tna-button-group">
@@ -943,7 +951,9 @@ const Template = ({ theme, accent }) => {
       <div class="tna-section tna-background-accent">
         ${IndexGrid({
           params: {
-            heading: { title: "My dogs 5", level: 3, href: "#" },
+            title: "My dogs 5",
+            headingLevel: 3,
+            headingHref: "#",
             items: Array(6)
               .fill({
                 ...{
@@ -1011,7 +1021,7 @@ const Template = ({ theme, accent }) => {
                 next: {
                   href: "#",
                 },
-                classes: "tna-pagination--demo",
+                classes: "tna-pagination--demo tna-!--margin-top-m",
               },
             })}
             <div class="tna-button-group">