Allow cards to be made entirely clickable (#149)

* Allow cards to be made entirely clickable

* Update fixtures

CHANGELOG.md

@@ -12,6 +12,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Added `itemHeadingLevel` to file list component and changed file titles to headings
 - Ordered and unordered lists can be spaced out with `.tna-ul--spaced` and `.tna-ol--spaced`
 - The contents of the details element can be [called in Nunjucks](https://mozilla.github.io/nunjucks/templating.html#call)
+- Cards can be made entirely clickable using the `fullAreaClick` property
 
 ### Changed
 
@@ -23,6 +24,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Deprecated
 ### Removed
+
+- Cards can no longer have plain supertitles
+
 ### Fixed
 
 - Fixed spacing in nested lists

src/nationalarchives/components/card/card.scss

@@ -7,6 +7,8 @@
 .tna-card {
   @include spacing.space-above;
 
+  position: relative;
+
   &__inner {
     display: flex;
     flex-direction: column;
@@ -35,6 +37,16 @@
     }
   }
 
+  &--full-click &__heading-link {
+    &::before {
+      content: "";
+
+      position: absolute;
+      inset: 0;
+      z-index: 3;
+    }
+  }
+
   &__image-container {
     height: 0;
     margin-bottom: spacing.space(1);
@@ -47,6 +59,7 @@
   &__image {
     position: absolute;
     inset: 0;
+    z-index: 1;
 
     img {
       width: 100%;
@@ -62,6 +75,7 @@
     position: absolute;
     top: spacing.space(0.5);
     left: spacing.space(0.5);
+    z-index: 2;
 
     .tna-background-accent &:not(.tna-chip--plain) {
       @include colour.accent;
@@ -135,6 +149,7 @@
 
         position: absolute;
         inset: 0 50% 0 0;
+        z-index: 1;
       }
 
       .tna-card__heading,

src/nationalarchives/components/card/card.stories.js

@@ -26,12 +26,12 @@ const argTypes = {
   body: { control: "text" },
   text: { control: "text" },
   actions: { control: "object" },
+  fullAreaClick: { control: "boolean" },
   horizontal: { control: "boolean" },
   style: {
     control: "inline-radio",
     options: ["none", "contrast", "tint", "accent"],
   },
-  plainSupertitle: { control: "boolean" },
   htmlElement: { control: "text" },
   classes: { control: "text" },
   attributes: { control: "object" },
@@ -71,9 +71,9 @@ const Template = ({
   body,
   text,
   actions,
+  fullAreaClick,
   horizontal,
   style,
-  plainSupertitle,
   htmlElement,
   classes,
   attributes,
@@ -100,9 +100,9 @@ const Template = ({
       body,
       text,
       actions,
+      fullAreaClick,
       horizontal,
       style,
-      plainSupertitle,
       htmlElement,
       classes,
       attributes,
@@ -166,24 +166,6 @@ Meta.args = {
   classes: "tna-card--demo",
 };
 
-export const PlainSupertitle = Template.bind({});
-PlainSupertitle.args = {
-  supertitle: "Card supertitle",
-  title: "Card title",
-  headingLevel: 3,
-  headingSize: "m",
-  href: "#",
-  imageSrc:
-    "https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg",
-  imageAlt: "The National Archives office",
-  imageWidth: 499,
-  imageHeight: 333,
-  body: "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vel tincidunt velit, a molestie turpis.</p>",
-  htmlElement: "article",
-  plainSupertitle: true,
-  classes: "tna-card--demo",
-};
-
 export const Contrast = Template.bind({});
 Contrast.args = {
   supertitle: "Card supertitle",
@@ -380,6 +362,25 @@ HorizontalContrastMobile.args = {
   classes: "tna-card--demo",
 };
 
+export const FullClick = Template.bind({});
+FullClick.args = {
+  supertitle: "Card supertitle",
+  title: "Card title",
+  href: "#",
+  headingLevel: 3,
+  headingSize: "l",
+  imageSrc:
+    "https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg",
+  imageAlt: "The National Archives office",
+  imageWidth: 499,
+  imageHeight: 333,
+  label: "New",
+  body: "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vel tincidunt velit, a molestie turpis.</p>",
+  fullAreaClick: true,
+  htmlElement: "article",
+  classes: "tna-card--demo",
+};
+
 export const Sources = Template.bind({});
 Sources.args = {
   supertitle: "Card supertitle",

src/nationalarchives/components/card/fixtures.json

@@ -285,6 +285,44 @@
       },
       "html": "<article class=\"tna-card tna-card--horizontal\"><div class=\"tna-card__inner\"><h3 class=\"tna-heading-m tna-card__heading\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div></div></article>"
     },
+    {
+      "name": "fully clickable",
+      "options": {
+        "title": "Card title",
+        "href": "#",
+        "headingLevel": 3,
+        "body": "<p>Card body</p>",
+        "fullAreaClick": true
+      },
+      "html": "<article class=\"tna-card tna-card--full-click\"><div class=\"tna-card__inner\"><h3 class=\"tna-heading-m tna-card__heading\"><a href=\"#\" class=\"tna-card__heading-link\">Card title</a></h3><div class=\"tna-card__body\"><p>Card body</p></div></div></article>"
+    },
+    {
+      "name": "fully clickable without href",
+      "options": {
+        "title": "Card title",
+        "headingLevel": 3,
+        "body": "<p>Card body</p>",
+        "fullAreaClick": true
+      },
+      "html": "<article class=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\"tna-heading-m tna-card__heading\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div></div></article>"
+    },
+    {
+      "name": "fully clickable with actions",
+      "options": {
+        "title": "Card title",
+        "href": "#",
+        "headingLevel": 3,
+        "body": "<p>Card body</p>",
+        "fullAreaClick": true,
+        "actions": [
+          {
+            "text": "Card action",
+            "href": "#"
+          }
+        ]
+      },
+      "html": "<article class=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\"tna-heading-m tna-card__heading\"><a href=\"#\" class=\"tna-card__heading-link\">Card title</a></h3><div class=\"tna-card__body\"><p>Card body</p></div><div class=\"tna-card__actions\"><a href=\"#\" class=\"tna-card__action\">Card action</a></div></div></article>"
+    },
     {
       "name": "with a different element",
       "options": {

src/nationalarchives/components/card/macro-options.json

@@ -204,24 +204,24 @@
       }
     ]
   },
+  {
+    "name": "fullAreaClick",
+    "type": "boolean",
+    "required": false,
+    "description": "If true, `href` is set and there are no actions, allow users to click anywhere on the card to follow the link."
+  },
   {
     "name": "horizontal",
     "type": "boolean",
     "required": false,
-    "description": "Change the card to a horizontal layout, placing the image to the left of the content. This layout changes back to vertical on smaller devices."
+    "description": "If true, change the card to a horizontal layout, placing the image to the left of the content. This layout changes back to vertical on smaller devices."
   },
   {
     "name": "style",
     "type": "string",
     "required": false,
     "description": "The style of card to use which can be either `contrast` for an inverted card, `tint` for a tinted one or `accent` for a card that matches the page’s accent colour."
   },
-  {
-    "name": "plainSupertitle",
-    "type": "boolean",
-    "required": false,
-    "description": "Use a plain supertitle, removing the accented background colour."
-  },
   {
     "name": "htmlElement",
     "type": "string",

src/nationalarchives/components/card/template.njk

@@ -1,5 +1,8 @@
 {%- set htmlElement = params.htmlElement if params.htmlElement else 'article' -%}
 {%- set containerClasses = [params.classes] if params.classes else [] -%}
+{%- if params.fullAreaClick and params.href and not params.actions -%}
+  {%- set containerClasses = containerClasses.concat('tna-card--full-click') -%}
+{%- endif -%}
 {%- if params.horizontal -%}
   {%- set containerClasses = containerClasses.concat('tna-card--horizontal') -%}
 {%- endif -%}
@@ -15,7 +18,7 @@
   <div class="tna-card__inner">
   {%- if params.supertitle %}
     <hgroup class="tna-hgroup-{{ params.headingSize or 'm' }} tna-card__heading">
-      <p class="tna-hgroup__supertitle{% if params.plainSupertitle %} tna-hgroup__supertitle--plain{% endif %}">{{ params.supertitle }}</p>
+      <p class="tna-hgroup__supertitle">{{ params.supertitle }}</p>
       <h{{ params.headingLevel }} class="tna-hgroup__title">
         {%- if params.href %}
         <a href="{{ params.href }}" class="tna-card__heading-link{% if params.hrefClasses %} {{ params.hrefClasses }}{% endif %}" {%- for attribute, value in params.hrefAttributes %} {{ attribute }}{% if value !== '' %}="{{ value }}"{% endif %}{% endfor %}>{{ params.title }}</a>
@@ -34,7 +37,7 @@
     </h{{ params.headingLevel }}>
   {%- endif %}
   {%- if params.imageSrc %}
-    {%- if params.href %}
+    {%- if params.href and (not params.fullAreaClick or params.actions) %}
     <a href="{{ params.href }}" class="tna-card__image-container{% if params.hrefClasses %} {{ params.hrefClasses }}{% endif %}" tabindex="-1" {%- for attribute, value in params.hrefAttributes %} {{ attribute }}{% if value !== '' %}="{{ value }}"{% endif %}{% endfor %}>
     {%- else %}
     <div class="tna-card__image-container">
@@ -53,7 +56,7 @@
         {{ params.label }}
       </div>
       {%- endif %}
-    {%- if params.href %}
+    {%- if params.href and (not params.fullAreaClick or params.actions) %}
     </a>
     {%- else %}
     </div>

src/nationalarchives/utilities/typography/_index.scss

@@ -197,16 +197,23 @@ small {
 
       width: 0.3125em;
       height: 0.3125em;
+      margin-bottom: 0.1em;
       margin-left: 0.375em;
 
       display: inline-block;
 
       vertical-align: middle;
 
+      transform: rotate(45deg);
+
       @include colour.colour-border("link", 0.125em, solid, top);
       @include colour.colour-border("link", 0.125em, solid, right);
+    }
 
-      transform: rotate(45deg);
+    &:visited {
+      &::after {
+        @include colour.colour-border("link-visited");
+      }
     }
   }
 
@@ -244,6 +251,7 @@ small {
     &::after {
       width: 0.275em;
       height: 0.275em;
+      margin-bottom: 0;
       margin-left: 0.25em;
 
       border-top-width: 0.1em;