Allow supertitles in index grids (#124)

* Allow supertitles in index grids * Change headingHref to href on index grids
nationalarchives · May 28, 2024 · f5d3310 · f5d3310
1 parent 9acdaf5
commit f5d3310
Show file tree

Hide file tree

Showing 9 changed files with 91 additions and 16 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -8,10 +8,20 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ## [Unreleased](https://github.com/nationalarchives/tna-frontend/compare/v0.1.56...HEAD)
 
 ### Added
+
+- 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
 ### Fixed
+
+- The theme stored in a cookie is now reflected in pages using the prototype kit
+
 ### Security
 
 ## [0.1.56](https://github.com/nationalarchives/tna-frontend/compare/v0.1.55...v0.1.56) - 2024-05-28

diff --git a/src/nationalarchives/components/details/details.scss b/src/nationalarchives/components/details/details.scss
@@ -14,6 +14,8 @@
     padding: spacing.space(0.5) spacing.space(1) spacing.space(0.5)
       spacing.space(2.75);
 
+    display: inline-block;
+
     position: relative;
     z-index: 1;
 

diff --git a/src/nationalarchives/components/index-grid/fixtures.json b/src/nationalarchives/components/index-grid/fixtures.json
@@ -42,10 +42,12 @@
     {
       "name": "heading options",
       "options": {
+        "supertitle": "List",
         "title": "My dogs",
         "headingLevel": 2,
         "headingSize": "xl",
         "headingHref": "#",
+        "hrefClasses": "test",
         "items": [
           {
             "href": "#/category-0",
@@ -77,7 +79,7 @@
         "columnsSmall": 2,
         "columnsTiny": 1
       },
-      "html": "<nav class=\"tna-index-grid \" aria-label=\"My dogs\"><div class=\"tna-container\"><div class=\"tna-column tna-column--width-2-3 tna-column--width-5-6-medium tna-column--full-small tna-column--full-tiny\"><h2 class=\"tna-heading-xl tna-index-grid__heading\"><a href=\"#\">My dogs</a></h2></div></div><ul class=\"tna-index-grid__items tna-container\"><li class=\"tna-index-grid__item-wrapper tna-column tna-column--width-1-3 tna-column--width-1-3-medium tna-column--width-1-2-small tna-column--full-tiny\"><a href=\"#/category-0\" class=\"tna-index-grid__item\" title=\"Category #101\"><img src=\"https://picsum.photos/id/237/800/600\" class=\"tna-index-grid__item-image\" width=\"800\" height=\"600\" alt=\"Photo of a puppy\"><span class=\"tna-index-grid__item-content\"><span class=\"tna-index-grid__item-title\">Category #101</span></span></a></li><li class=\"tna-index-grid__item-wrapper tna-column tna-column--width-1-3 tna-column--width-1-3-medium tna-column--width-1-2-small tna-column--full-tiny\"><a href=\"#/category-1\" class=\"tna-index-grid__item\" title=\"Category #102\"><img src=\"https://picsum.photos/id/237/800/600\" class=\"tna-index-grid__item-image\" width=\"800\" height=\"600\" alt=\"Photo of a puppy\"><span class=\"tna-index-grid__item-content\"><span class=\"tna-index-grid__item-title\">Category #102</span></span></a></li><li class=\"tna-index-grid__item-wrapper tna-column tna-column--width-1-3 tna-column--width-1-3-medium tna-column--width-1-2-small tna-column--full-tiny\"><a href=\"#/category-2\" class=\"tna-index-grid__item\" title=\"Category #103\"><img src=\"https://picsum.photos/id/237/800/600\" class=\"tna-index-grid__item-image\" width=\"800\" height=\"600\" alt=\"Photo of a puppy\"><span class=\"tna-index-grid__item-content\"><span class=\"tna-index-grid__item-title\">Category #103</span></span></a></li></ul></nav>"
+      "html": "<nav class=\"tna-index-grid \" aria-label=\"My dogs\"><div class=\"tna-container\"><div class=\"tna-column tna-column--width-2-3 tna-column--width-5-6-medium tna-column--full-small tna-column--full-tiny\"><hgroup class=\"tna-hgroup-xl tna-index-grid__heading\"><h2 class=\"tna-hgroup__title\"><span class=\"tna-hgroup__supertitle\">List</span>My dogs</h2></hgroup></div></div><ul class=\"tna-index-grid__items tna-container\"><li class=\"tna-index-grid__item-wrapper tna-column tna-column--width-1-3 tna-column--width-1-3-medium tna-column--width-1-2-small tna-column--full-tiny\"><a href=\"#/category-0\" class=\"tna-index-grid__item\" title=\"Category #101\"><img src=\"https://picsum.photos/id/237/800/600\" class=\"tna-index-grid__item-image\" width=\"800\" height=\"600\" alt=\"Photo of a puppy\"><span class=\"tna-index-grid__item-content\"><span class=\"tna-index-grid__item-title\">Category #101</span></span></a></li><li class=\"tna-index-grid__item-wrapper tna-column tna-column--width-1-3 tna-column--width-1-3-medium tna-column--width-1-2-small tna-column--full-tiny\"><a href=\"#/category-1\" class=\"tna-index-grid__item\" title=\"Category #102\"><img src=\"https://picsum.photos/id/237/800/600\" class=\"tna-index-grid__item-image\" width=\"800\" height=\"600\" alt=\"Photo of a puppy\"><span class=\"tna-index-grid__item-content\"><span class=\"tna-index-grid__item-title\">Category #102</span></span></a></li><li class=\"tna-index-grid__item-wrapper tna-column tna-column--width-1-3 tna-column--width-1-3-medium tna-column--width-1-2-small tna-column--full-tiny\"><a href=\"#/category-2\" class=\"tna-index-grid__item\" title=\"Category #103\"><img src=\"https://picsum.photos/id/237/800/600\" class=\"tna-index-grid__item-image\" width=\"800\" height=\"600\" alt=\"Photo of a puppy\"><span class=\"tna-index-grid__item-content\"><span class=\"tna-index-grid__item-title\">Category #103</span></span></a></li></ul></nav>"
     },
     {
       "name": "with body",

diff --git a/src/nationalarchives/components/index-grid/index-grid.stories.js b/src/nationalarchives/components/index-grid/index-grid.stories.js
@@ -2,10 +2,13 @@ import IndexGrid from "./template.njk";
 import macroOptions from "./macro-options.json";
 
 const argTypes = {
+  supertitle: { control: "text" },
   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" },
@@ -29,10 +32,13 @@ export default {
 };
 
 const Template = ({
+  supertitle,
   title,
   headingLevel,
   headingSize,
-  headingHref,
+  href,
+  hrefClasses,
+  hrefAttributes,
   body,
   text,
   items,
@@ -45,10 +51,13 @@ const Template = ({
 }) =>
   IndexGrid({
     params: {
+      supertitle,
       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
@@ -1,4 +1,10 @@
 [
+  {
+    "name": "supertitle",
+    "type": "string",
+    "required": false,
+    "description": "The smaller title to display above the main index grid title."
+  },
   {
     "name": "title",
     "type": "string",
@@ -19,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 grids heading."
+  },
+  {
+    "name": "hrefClasses",
     "type": "string",
     "required": false,
-    "description": "A URL to use as a link in the grid’s heading."
+    "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",
@@ -116,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/components/index-grid/template.njk b/src/nationalarchives/components/index-grid/template.njk
@@ -3,13 +3,26 @@
   {%- if params.headingLevel > 0 %}
   <div class="tna-container">
     <div class="tna-column tna-column--width-2-3 tna-column--width-5-6-medium tna-column--full-small tna-column--full-tiny">
+    {%- if params.supertitle %}
+      <hgroup class="tna-hgroup-{{ params.headingSize or 'l' }} tna-index-grid__heading">
+        <h{{ params.headingLevel }} class="tna-hgroup__title">
+          <span class="tna-hgroup__supertitle{% if params.plainSupertitle %} tna-hgroup__supertitle--plain{% endif %}">{{ params.supertitle }}</span>
+          {%- if params.href %}
+          <a href="{{ params.href }}" class="tna-index-grid__heading-link{% if params.hrefClasses %} {{ params.hrefClasses }}{% endif %}" {%- for attribute, value in params.hrefAttributes %} {{ attribute }}="{{ value }}"{% endfor %}>{{ params.title }}</a>
+          {%- else %}
+          {{ params.title }}
+          {%- endif %}
+        </h{{ params.headingLevel }}>
+      </hgroup>
+    {%- else %}
       <h{{ params.headingLevel }} class="tna-heading-{{ params.headingSize or 'l' }} tna-index-grid__heading">
-        {%- if params.headingHref %}
-        <a href="{{ params.headingHref }}">{{ params.title }}</a>
+        {%- if params.href %}
+        <a href="{{ params.href }}" class="tna-index-grid__heading-link{% if params.hrefClasses %} {{ params.hrefClasses }}{% endif %}" {%- for attribute, value in params.hrefAttributes %} {{ attribute }}="{{ value }}"{% endfor %}>{{ params.title }}</a>
         {%- else %}
         {{ params.title }}
         {%- endif %}
       </h{{ params.headingLevel }}>
+    {%- endif %}
       {%- if params.text %}
         <p>{{ params.text }}</p>
       {%- else %}

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({
                 ...{

diff --git a/src/nationalarchives/templates/fixtures.json b/src/nationalarchives/templates/fixtures.json
diff --git a/src/nationalarchives/templates/layouts/_prototype-kit.njk b/src/nationalarchives/templates/layouts/_prototype-kit.njk
@@ -13,6 +13,21 @@
     if (window.TNAFrontend && window.TNAFrontend.initAll) {
       document.addEventListener("DOMContentLoaded", function() {
         window.TNAFrontend.initAll();
+        var cookies = new TNAFrontend.Cookies()
+        var theme = cookies.get("theme") || "light"
+        var $tnaTemplate = document.querySelector(".tna-template");
+        if (theme === "light") {
+          $tnaTemplate.classList.remove(
+            "tna-template--system-theme",
+            "tna-template--dark-theme",
+          );
+        } else if (theme === "dark") {
+          $tnaTemplate.classList.remove("tna-template--system-theme");
+          $tnaTemplate.classList.add(`tna-template--dark-theme`);
+        } else if (theme === "system") {
+          $tnaTemplate.classList.remove("tna-template--dark-theme");
+          $tnaTemplate.classList.add(`tna-template--system-theme`);
+        }
       });
     }
   </script>