Revert to use single sentence heading in card

nationalarchives · Sep 13, 2023 · 87b3b7f · 87b3b7f
1 parent 24c558b
commit 87b3b7f
Show file tree

Hide file tree

Showing 6 changed files with 127 additions and 68 deletions.
diff --git a/src/nationalarchives/components/card/card.stories.js b/src/nationalarchives/components/card/card.stories.js
@@ -64,7 +64,7 @@ Standard.args = {
     supertitle: "Card supertitle",
     title: "Card title",
     level: 3,
-    size: "l",
+    size: "m",
   },
   href: "#",
   image: {
@@ -92,7 +92,7 @@ Boxed.args = {
     supertitle: "Card supertitle",
     title: "Card title",
     level: 3,
-    size: "l",
+    size: "m",
   },
   href: "#",
   image: {
@@ -114,7 +114,7 @@ Accent.args = {
     supertitle: "Card supertitle",
     title: "Card title",
     level: 3,
-    size: "l",
+    size: "m",
   },
   href: "#",
   image: {
@@ -189,6 +189,36 @@ HorizontalBoxed.args = {
   classes: "tna-card--demo",
 };
 
+export const HorizontalAccent = Template.bind({});
+HorizontalAccent.args = {
+  heading: {
+    supertitle: "Card supertitle",
+    title: "Card title",
+    level: 3,
+    size: "l",
+  },
+  image: {
+    src: "https://www.nationalarchives.gov.uk/wp-content/uploads/sites/24/2023/07/tna-building-compress.jpg",
+    alt: "The National Archives office",
+    width: 1996,
+    height: 1331,
+  },
+  label: "New",
+  body: "<p>Card body</p>",
+  actions: [
+    {
+      text: "Card action",
+      href: "#",
+      title: "Go and do the action",
+      icon: "calendar",
+    },
+  ],
+  horizontal: true,
+  style: "accent",
+  htmlElement: "article",
+  classes: "tna-card--demo",
+};
+
 const GridTemplate = ({
   heading,
   href,

diff --git a/src/nationalarchives/components/card/fixtures.json b/src/nationalarchives/components/card/fixtures.json
@@ -10,7 +10,7 @@
         },
         "body": "<p>Card body</p>"
       },
-      "html": "<div class=\"tna-card \" data-module=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\"tna-card__title tna-heading tna-heading--l\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
+      "html": "<div class=\"tna-card \" data-module=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\"tna-card__title tna-heading tna-heading--m\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
       "hidden": false
     },
     {
@@ -23,7 +23,7 @@
         },
         "body": "<p>Card body</p>"
       },
-      "html": "<div class=\"tna-card \" data-module=\"tna-card\"><div class=\"tna-card__inner\"><hgroup class=\"tna-card__heading tna-hgroup tna-hgroup--l\"><p class=\"tna-card__supertitle tna-hgroup__supertitle\">Card supertitle</p><h3 class=\"tna-card__title tna-hgroup__title\">Card title</h3></hgroup><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
+      "html": "<div class=\"tna-card \" data-module=\"tna-card\"><div class=\"tna-card__inner\"><hgroup class=\"tna-hgroup tna-hgroup--m tna-card__heading\"><h3 class=\"tna-hgroup__titletna-card__title\"><span class=\"tna-hgroup__supertitle tna-card__supertitle\">Card supertitle</span>Card title</h3></hgroup><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
       "hidden": false
     },
     {
@@ -48,7 +48,7 @@
         },
         "body": "<p>Card body</p>"
       },
-      "html": "<div class=\"tna-card \" data-module=\"tna-card\"><div class=\"tna-card__inner\"><h1 class=\"tna-card__title tna-heading tna-heading--l\">Card title</h1><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
+      "html": "<div class=\"tna-card \" data-module=\"tna-card\"><div class=\"tna-card__inner\"><h1 class=\"tna-card__title tna-heading tna-heading--m\">Card title</h1><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
       "hidden": false
     },
     {
@@ -61,7 +61,7 @@
         "href": "#",
         "body": "<p>Card body</p>"
       },
-      "html": "<div class=\"tna-card \" data-module=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\"tna-card__title tna-heading tna-heading--l\"><a href=\"#\" class=\"tna-card__title-link\">Card title</a></h3><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
+      "html": "<div class=\"tna-card \" data-module=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\"tna-card__title tna-heading tna-heading--m\"><a href=\"#\" class=\"tna-card__title-link\">Card title</a></h3><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
       "hidden": false
     },
     {
@@ -73,7 +73,7 @@
         },
         "text": "Card body"
       },
-      "html": "<div class=\"tna-card \" data-module=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\"tna-card__title tna-heading tna-heading--l\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
+      "html": "<div class=\"tna-card \" data-module=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\"tna-card__title tna-heading tna-heading--m\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
       "hidden": false
     },
     {
@@ -91,7 +91,7 @@
         },
         "body": "<p>Card body</p>"
       },
-      "html": "<div class=\"tna-card \" data-module=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\"tna-card__title tna-heading tna-heading--l\">Card title</h3><div class=\"tna-card__image-container\"><img src=\"https://loremflickr.com/640/360\" alt=\"A placeholder image\" width=\"640\" height=\"360\" class=\"tna-card__image\" /></div><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
+      "html": "<div class=\"tna-card \" data-module=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\"tna-card__title tna-heading tna-heading--m\">Card title</h3><div class=\"tna-card__image-container\"><img src=\"https://loremflickr.com/640/360\" alt=\"A placeholder image\" width=\"640\" height=\"360\" class=\"tna-card__image\" /></div><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
       "hidden": false
     },
     {
@@ -110,7 +110,7 @@
         "href": "#",
         "body": "<p>Card body</p>"
       },
-      "html": "<div class=\"tna-card \" data-module=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\"tna-card__title tna-heading tna-heading--l\"><a href=\"#\" class=\"tna-card__title-link\">Card title</a></h3><a href=\"#\" class=\"tna-card__image-container\" tabindex=\"-1\"><img src=\"https://loremflickr.com/640/360\" alt=\"A placeholder image\" width=\"640\" height=\"360\" class=\"tna-card__image\" /></a><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
+      "html": "<div class=\"tna-card \" data-module=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\"tna-card__title tna-heading tna-heading--m\"><a href=\"#\" class=\"tna-card__title-link\">Card title</a></h3><a href=\"#\" class=\"tna-card__image-container\" tabindex=\"-1\"><img src=\"https://loremflickr.com/640/360\" alt=\"A placeholder image\" width=\"640\" height=\"360\" class=\"tna-card__image\" /></a><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
       "hidden": false
     },
     {
@@ -129,7 +129,7 @@
           }
         ]
       },
-      "html": "<div class=\"tna-card \" data-module=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\"tna-card__title tna-heading tna-heading--l\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div><div class=\"tna-card__actions\"><a href=\"#\" class=\"tna-card__action\" role=\"button\"title=\"Go and do the action\">Card action</a></div></div></div>",
+      "html": "<div class=\"tna-card \" data-module=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\"tna-card__title tna-heading tna-heading--m\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div><div class=\"tna-card__actions\"><a href=\"#\" class=\"tna-card__action\" role=\"button\"title=\"Go and do the action\">Card action</a></div></div></div>",
       "hidden": false
     },
     {
@@ -142,7 +142,7 @@
         "label": "New",
         "body": "<p>Card body</p>"
       },
-      "html": "<div class=\"tna-card \" data-module=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\"tna-card__title tna-heading tna-heading--l\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
+      "html": "<div class=\"tna-card \" data-module=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\"tna-card__title tna-heading tna-heading--m\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
       "hidden": false
     },
     {
@@ -155,7 +155,7 @@
         "body": "<p>Card body</p>",
         "style": "boxed"
       },
-      "html": "<div class=\"tna-card tna-card--contrast\" data-module=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\"tna-card__title tna-heading tna-heading--l\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
+      "html": "<div class=\"tna-card tna-card--contrast\" data-module=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\"tna-card__title tna-heading tna-heading--m\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
       "hidden": false
     },
     {
@@ -168,7 +168,7 @@
         "body": "<p>Card body</p>",
         "style": "accent"
       },
-      "html": "<div class=\"tna-card tna-card--accent\" data-module=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\"tna-card__title tna-heading tna-heading--l\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
+      "html": "<div class=\"tna-card tna-card--accent\" data-module=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\"tna-card__title tna-heading tna-heading--m\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
       "hidden": false
     },
     {
@@ -181,7 +181,7 @@
         "body": "<p>Card body</p>",
         "style": "foobar"
       },
-      "html": "<div class=\"tna-card \" data-module=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\"tna-card__title tna-heading tna-heading--l\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
+      "html": "<div class=\"tna-card \" data-module=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\"tna-card__title tna-heading tna-heading--m\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
       "hidden": false
     },
     {
@@ -194,7 +194,7 @@
         "body": "<p>Card body</p>",
         "classes": "card__test-class"
       },
-      "html": "<div class=\"tna-card card__test-class\" data-module=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\"tna-card__title tna-heading tna-heading--l\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
+      "html": "<div class=\"tna-card card__test-class\" data-module=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\"tna-card__title tna-heading tna-heading--m\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
       "hidden": false
     },
     {
@@ -209,7 +209,7 @@
           "data-testattribute": "foobar"
         }
       },
-      "html": "<div class=\"tna-card \" data-module=\"tna-card\" data-testattribute=\"foobar\"><div class=\"tna-card__inner\"><h3 class=\"tna-card__title tna-heading tna-heading--l\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
+      "html": "<div class=\"tna-card \" data-module=\"tna-card\" data-testattribute=\"foobar\"><div class=\"tna-card__inner\"><h3 class=\"tna-card__title tna-heading tna-heading--m\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
       "hidden": false
     }
   ]

diff --git a/src/nationalarchives/components/card/template.njk b/src/nationalarchives/components/card/template.njk
@@ -11,43 +11,43 @@
 <{{ htmlElement }} class="tna-card {{ containerClasses | join(' ') }}" data-module="tna-card" {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
   <div class="tna-card__inner">
     {%- if params.heading.supertitle -%}
-    <hgroup class="tna-card__heading tna-hgroup tna-hgroup--{{ params.heading.size or 'l' }}">
-      <p class="tna-card__supertitle tna-hgroup__supertitle">{{ params.heading.supertitle }}</p>
-      <h{{ params.heading.level }} class="tna-card__title tna-hgroup__title">
-      {%- if params.href -%}
+    <hgroup class="tna-hgroup tna-hgroup--{{ params.heading.size or 'm' }} tna-card__heading">
+      <h{{ params.heading.level }} class="tna-hgroup__titletna-card__title">
+        <span class="tna-hgroup__supertitle tna-card__supertitle">{{ params.heading.supertitle }}</span>
+        {%- if params.href -%}
         <a href="{{ params.href }}" class="tna-card__title-link">{{ params.heading.title }}</a>
-      {%- else -%}
+        {%- else -%}
         {{ params.heading.title }}
-      {%- endif -%}
+        {%- endif -%}
       </h{{ params.heading.level }}>
     </hgroup>
     {%- else -%}
-    <h{{ params.heading.level }} class="tna-card__title tna-heading tna-heading--{{ params.heading.size or 'l' }}">
-    {%- if params.href -%}
+    <h{{ params.heading.level }} class="tna-card__title tna-heading tna-heading--{{ params.heading.size or 'm' }}">
+      {%- if params.href -%}
       <a href="{{ params.href }}" class="tna-card__title-link">{{ params.heading.title }}</a>
-    {%- else -%}
+      {%- else -%}
       {{ params.heading.title }}
-    {%- endif -%}
+      {%- endif -%}
     </h{{ params.heading.level }}>
-  {%- endif -%}
-  {%- if params.image -%}
-    {%- if params.href -%}
-    <a href="{{ params.href }}" class="tna-card__image-container" tabindex="-1">
-    {%- else -%}
-    <div class="tna-card__image-container">
     {%- endif -%}
-      <img src="{{ params.image.src }}" alt="{{ params.image.alt }}" width="{{ params.image.width }}" height="{{ params.image.height }}" class="tna-card__image" />
-      {%- if params.label -%}
-      <div class="tna-chip tna-card__image-label">
-        {{ params.label }}
+    {%- if params.image -%}
+      {%- if params.href -%}
+      <a href="{{ params.href }}" class="tna-card__image-container" tabindex="-1">
+      {%- else -%}
+      <div class="tna-card__image-container">
+      {%- endif -%}
+        <img src="{{ params.image.src }}" alt="{{ params.image.alt }}" width="{{ params.image.width }}" height="{{ params.image.height }}" class="tna-card__image" />
+        {%- if params.label -%}
+        <div class="tna-chip tna-card__image-label">
+          {{ params.label }}
+        </div>
+        {%- endif -%}
+      {%- if params.href -%}
+      </a>
+      {%- else -%}
       </div>
       {%- endif -%}
-    {%- if params.href -%}
-    </a>
-    {%- else -%}
-    </div>
     {%- endif -%}
-  {%- endif -%}
     <div class="tna-card__body">
     {%- if params.text -%}
       <p>{{ params.text }}</p>

diff --git a/src/nationalarchives/stories/utilities/typography/heading-groups.stories.js b/src/nationalarchives/stories/utilities/typography/heading-groups.stories.js
@@ -3,6 +3,7 @@ const argTypes = {
   title: { control: "text" },
   level: { control: "number", min: 1, max: 6, step: 1 },
   size: { control: "radio", options: ["m", "l", "xl"] },
+  singleSentence: { control: "boolean" },
 };
 
 export default {
@@ -15,13 +16,30 @@ const Template = ({
   title,
   level = 3,
   size = "l",
-}) => `<hgroup class="tna-hgroup tna-hgroup--${size}">
+  singleSentence,
+}) =>
+  singleSentence
+    ? `<hgroup class="tna-hgroup tna-hgroup--${size}">
+  <h${level} class="tna-hgroup__title">
+  <span class="tna-hgroup__supertitle">${supertitle}</span>
+  <span class="tna-hgroup__title">${title}</span>
+</h${level}>
+</hgroup>`
+    : `<hgroup class="tna-hgroup tna-hgroup--${size}">
   <p class="tna-hgroup__supertitle">${supertitle}</p>
   <h${level} class="tna-hgroup__title">${title}</h${level}>
 </hgroup>`;
 
 export const HeadingGroup = Template.bind({});
 HeadingGroup.args = {
+  supertitle: "The story of",
+  title: "Alice Hawkins",
+  singleSentence: true,
+};
+
+export const HeadingGroupSeparated = Template.bind({});
+HeadingGroupSeparated.args = {
   supertitle: "Record revealed",
   title: "The Monteagle Letter",
+  singleSentence: false,
 };
diff --git a/src/nationalarchives/stories/utilities/typography/typography.mdx b/src/nationalarchives/stories/utilities/typography/typography.mdx
@@ -14,8 +14,19 @@ We use a set of typefaces...
 
 <Canvas of={HeadingStories.Headings} />
 <Canvas of={TypographyStories.HeadingLink} />
+
+## Heading groups
+
+Although visually identical, there are two types of header groups based on whether the group should be read as a single sentence or not.
+
+In the first example, the heading will be read by screen readers as `The story of Alice Hawkins.`
+
 <Canvas of={HeadingGroupStories.HeadingGroup} />
 
+In the second example, the heading will be read as two separate sentences; `Record revealed. The Monteagle Letter.`
+
+<Canvas of={HeadingGroupStories.HeadingGroupSeparated} />
+
 ## General typography
 
 <Canvas of={TypographyStories.Paragraph} />

diff --git a/src/nationalarchives/utilities/_typography.scss b/src/nationalarchives/utilities/_typography.scss
@@ -156,6 +156,31 @@ a {
   }
 }
 
+%heading {
+  @include colour.colour-font("font-dark");
+  @include typography.heading-font;
+
+  a {
+    display: inline-block;
+
+    &::after {
+      padding-left: 0.25rem;
+
+      display: inline-block;
+
+      font-weight: 700;
+
+      content: "\203A";
+    }
+
+    &:hover {
+      &::after {
+        padding-left: 0.5rem;
+      }
+    }
+  }
+}
+
 %heading-xl {
   @include typography.relative-font-size(64);
   line-height: 1.2;
@@ -194,31 +219,6 @@ a {
   line-height: 1.6;
 }
 
-%heading {
-  @include colour.colour-font("font-dark");
-  @include typography.heading-font;
-
-  a {
-    display: inline-block;
-
-    &::after {
-      padding-left: 0.25rem;
-
-      display: inline-block;
-
-      font-weight: 700;
-
-      content: "\203A";
-    }
-
-    &:hover {
-      &::after {
-        padding-left: 0.5rem;
-      }
-    }
-  }
-}
-
 .tna-heading {
   @extend %heading;