Change headingHref to href on index grids

nationalarchives · May 28, 2024 · 9beb2ba · 9beb2ba
1 parent 7bf51b2
commit 9beb2ba
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 11 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -9,11 +9,12 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Added
 
-- Index grids can now have supertitles
+- Index grids can now have supertitles, `hrefClasses` and `hrefAttributes`
 
 ### Changed
 
 - Detail summaries no longer stretch the full width of the container
+- Index grid `headingHref` changed to `href`
 
 ### Deprecated
 ### Removed

diff --git a/src/nationalarchives/components/index-grid/fixtures.json b/src/nationalarchives/components/index-grid/fixtures.json
@@ -47,6 +47,7 @@
         "headingLevel": 2,
         "headingSize": "xl",
         "headingHref": "#",
+        "hrefClasses": "test",
         "items": [
           {
             "href": "#/category-0",

diff --git a/src/nationalarchives/components/index-grid/index-grid.stories.js b/src/nationalarchives/components/index-grid/index-grid.stories.js
@@ -6,7 +6,9 @@ const argTypes = {
   title: { control: "text" },
   headingLevel: { control: { type: "number", min: 1, max: 6 } },
   headingSize: { control: "inline-radio", options: ["s", "m", "l", "xl"] },
-  headingHref: { control: "text" },
+  href: { control: "text" },
+  hrefClasses: { control: "text" },
+  hrefAttributes: { control: "object" },
   body: { control: "text" },
   text: { control: "text" },
   items: { control: "object" },
@@ -34,7 +36,9 @@ const Template = ({
   title,
   headingLevel,
   headingSize,
-  headingHref,
+  href,
+  hrefClasses,
+  hrefAttributes,
   body,
   text,
   items,
@@ -51,7 +55,9 @@ const Template = ({
       title,
       headingLevel,
       headingSize,
-      headingHref,
+      href,
+      hrefClasses,
+      hrefAttributes,
       body,
       text,
       items,

diff --git a/src/nationalarchives/components/index-grid/macro-options.json b/src/nationalarchives/components/index-grid/macro-options.json
@@ -25,10 +25,22 @@
     "description": "The physical size of the index grid title (`xl`, `l`, `m` or `s`)."
   },
   {
-    "name": "headingHref",
+    "name": "href",
     "type": "string",
     "required": false,
-    "description": "A URL to use as a link in the grid’s heading."
+    "description": "A URL to use as a link in the grids heading."
+  },
+  {
+    "name": "hrefClasses",
+    "type": "string",
+    "required": false,
+    "description": "Classes to add to the elements of the index grid that use `href`."
+  },
+  {
+    "name": "hrefAttributes",
+    "type": "object",
+    "required": false,
+    "description": "HTML attributes (for example data attributes) to add to the elements of the index grid that use `href`."
   },
   {
     "name": "body",
@@ -122,6 +134,12 @@
     "required": false,
     "description": ""
   },
+  {
+    "name": "plainSupertitle",
+    "type": "boolean",
+    "required": false,
+    "description": "Use a plain supertitle, removing the accented background colour."
+  },
   {
     "name": "classes",
     "type": "string",

diff --git a/src/nationalarchives/stories/utilities/colour-schemes/colour-themes.stories.js b/src/nationalarchives/stories/utilities/colour-schemes/colour-themes.stories.js
@@ -717,7 +717,7 @@ const Template = ({ theme, accent }) => {
           params: {
             title: "My dogs 1",
             headingLevel: 3,
-            headingHref: "#",
+            href: "#",
             items: Array(4)
               .fill({
                 ...{
@@ -811,7 +811,7 @@ const Template = ({ theme, accent }) => {
           params: {
             title: "My dogs 2",
             headingLevel: 3,
-            headingHref: "#",
+            href: "#",
             items: Array(4)
               .fill({
                 ...{
@@ -905,7 +905,7 @@ const Template = ({ theme, accent }) => {
           params: {
             title: "My dogs 3",
             headingLevel: 3,
-            headingHref: "#",
+            href: "#",
             items: Array(4)
               .fill({
                 ...{
@@ -999,7 +999,7 @@ const Template = ({ theme, accent }) => {
           params: {
             title: "My dogs 4",
             headingLevel: 3,
-            headingHref: "#",
+            href: "#",
             items: Array(4)
               .fill({
                 ...{
@@ -1093,7 +1093,7 @@ const Template = ({ theme, accent }) => {
           params: {
             title: "My dogs 5",
             headingLevel: 3,
-            headingHref: "#",
+            href: "#",
             items: Array(4)
               .fill({
                 ...{