@nationalarchives/frontend 0.1.19-prerelease → 0.1.21-prerelease

package/nationalarchives/components/card/fixtures.json

@@ -4,146 +4,144 @@
     {
       "name": "basic card",
       "options": {
-        "heading": {
-          "title": "Card title",
-          "level": 3
-        },
+        "title": "Card title",
+        "headingLevel": 3,
         "body": "<p>Card body</p>"
       },
-      "html": "<div class=\"tna-card \" data-module=\"tna-card\"><div class=\"tna-card__inner\"><h class=\" tna-heading tna-heading--m tna-card__heading\"></h><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-heading tna-heading--s tna-card__heading\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
       "hidden": false
     },
     {
       "name": "with supertitle",
       "options": {
-        "heading": {
-          "supertitle": "Card supertitle",
-          "title": "Card title",
-          "level": 3
-        },
+        "supertitle": "Card supertitle",
+        "title": "Card title",
+        "headingLevel": 3,
         "body": "<p>Card body</p>"
       },
-      "html": "<div class=\"tna-card \" data-module=\"tna-card\"><div class=\"tna-card__inner\"><h class=\" tna-heading tna-heading--m tna-card__heading\"></h><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--s tna-card__heading\"><h3 class=\"tna-hgroup__title\"><span class=\"tna-hgroup__supertitle\">Card supertitle</span>Card title</h3></hgroup><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
       "hidden": false
     },
     {
       "name": "heading size",
       "options": {
-        "heading": {
-          "title": "Card title",
-          "level": 3,
-          "size": "m"
-        },
+        "title": "Card title",
+        "headingLevel": 3,
+        "headingSize": "xl",
         "body": "<p>Card body</p>"
       },
-      "html": "<div class=\"tna-card \" data-module=\"tna-card\"><div class=\"tna-card__inner\"><h class=\" tna-heading tna-heading--m tna-card__heading\"></h><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-heading tna-heading--xl tna-card__heading\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
       "hidden": false
     },
     {
       "name": "heading level",
       "options": {
-        "heading": {
-          "title": "Card title",
-          "level": 1
-        },
+        "title": "Card title",
+        "headingLevel": 1,
         "body": "<p>Card body</p>"
       },
-      "html": "<div class=\"tna-card \" data-module=\"tna-card\"><div class=\"tna-card__inner\"><h class=\" tna-heading tna-heading--m tna-card__heading\"></h><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-heading tna-heading--s tna-card__heading\">Card title</h1><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
       "hidden": false
     },
     {
       "name": "with link",
       "options": {
-        "heading": {
-          "title": "Card title",
-          "level": 3
-        },
+        "title": "Card title",
+        "headingLevel": 3,
         "href": "#",
         "body": "<p>Card body</p>"
       },
-      "html": "<div class=\"tna-card \" data-module=\"tna-card\"><div class=\"tna-card__inner\"><h class=\" tna-heading tna-heading--m tna-card__heading\"><a href=\"#\" class=\"tna-card__heading-link\"></a></h><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-heading tna-heading--s 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></div>",
+      "hidden": false
+    },
+    {
+      "name": "with meta",
+      "options": {
+        "title": "Card title",
+        "headingLevel": 3,
+        "meta": [
+          {
+            "text": "24th September 2023",
+            "icon": "calendar"
+          },
+          {
+            "text": "From £16",
+            "icon": "ticket"
+          },
+          {
+            "text": "Online",
+            "icon": "location-dot"
+          }
+        ],
+        "body": "<p>Card body</p>"
+      },
+      "html": "<div class=\"tna-card \" data-module=\"tna-card\"><div class=\"tna-card__inner\"><h3 class=\" tna-heading tna-heading--s tna-card__heading\">Card title</h3><div class=\"tna-card__body\"><ul class=\"tna-card__meta\"><li class=\"tna-card__meta-item\"><i class=\"fa-solid fa-calendar\"></i>24th September 2023</li><li class=\"tna-card__meta-item\"><i class=\"fa-solid fa-ticket\"></i>From £16</li><li class=\"tna-card__meta-item\"><i class=\"fa-solid fa-location-dot\"></i>Online</li></ul><p>Card body</p></div></div></div>",
       "hidden": false
     },
     {
       "name": "with text",
       "options": {
-        "heading": {
-          "title": "Card title",
-          "level": 3
-        },
+        "title": "Card title",
+        "headingLevel": 3,
         "text": "Card body"
       },
-      "html": "<div class=\"tna-card \" data-module=\"tna-card\"><div class=\"tna-card__inner\"><h class=\" tna-heading tna-heading--m tna-card__heading\"></h><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-heading tna-heading--s tna-card__heading\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
       "hidden": false
     },
     {
       "name": "with image",
       "options": {
-        "heading": {
-          "title": "Card title",
-          "level": 3
-        },
-        "image": {
-          "src": "https://loremflickr.com/640/360",
-          "alt": "A placeholder image",
-          "width": 640,
-          "height": 360
-        },
+        "title": "Card title",
+        "headingLevel": 3,
+        "imageSrc": "https://loremflickr.com/640/360",
+        "imageAlt": "A placeholder image",
+        "imageWidth": 640,
+        "imageHeight": 360,
         "body": "<p>Card body</p>"
       },
-      "html": "<div class=\"tna-card \" data-module=\"tna-card\"><div class=\"tna-card__inner\"><h class=\" tna-heading tna-heading--m tna-card__heading\"></h><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-heading tna-heading--s tna-card__heading\">Card title</h3><div class=\"tna-card__image-container\"><picture class=\"tna-card__image\"><img src=\"https://loremflickr.com/640/360\" alt=\"A placeholder image\" width=\"640\" height=\"360\"></picture></div><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
       "hidden": false
     },
     {
       "name": "with image and alternative sources",
       "options": {
-        "heading": {
-          "title": "Card title",
-          "level": 3
-        },
-        "image": {
-          "src": "https://loremflickr.com/640/360",
-          "alt": "A placeholder image",
-          "width": 640,
-          "height": 360,
-          "sources": [
-            {
-              "src": "https://www.gstatic.com/webp/gallery/2.webp",
-              "type": "image/webp"
-            }
-          ]
-        },
+        "title": "Card title",
+        "headingLevel": 3,
+        "imageSrc": "https://loremflickr.com/640/360",
+        "imageAlt": "A placeholder image",
+        "imageWidth": 640,
+        "imageHeight": 360,
+        "imageSources": [
+          {
+            "src": "https://www.gstatic.com/webp/gallery/2.webp",
+            "type": "image/webp"
+          }
+        ],
         "body": "<p>Card body</p>"
       },
-      "html": "<div class=\"tna-card \" data-module=\"tna-card\"><div class=\"tna-card__inner\"><h class=\" tna-heading tna-heading--m tna-card__heading\"></h><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-heading tna-heading--s tna-card__heading\">Card title</h3><div class=\"tna-card__image-container\"><picture class=\"tna-card__image\"><source srcset=\"https://www.gstatic.com/webp/gallery/2.webp\" type=\"image/webp\" width=\"640\" height=\"360\"><source srcset=\"https://loremflickr.com/640/360\" type=\"image/jpeg\" width=\"640\" height=\"360\"><img src=\"https://loremflickr.com/640/360\" alt=\"A placeholder image\" width=\"640\" height=\"360\"></picture></div><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
       "hidden": false
     },
     {
       "name": "with link and image",
       "options": {
-        "heading": {
-          "title": "Card title",
-          "level": 3
-        },
-        "image": {
-          "src": "https://loremflickr.com/640/360",
-          "alt": "A placeholder image",
-          "width": 640,
-          "height": 360
-        },
+        "title": "Card title",
+        "headingLevel": 3,
+        "imageSrc": "https://loremflickr.com/640/360",
+        "imageAlt": "A placeholder image",
+        "imageWidth": 640,
+        "imageHeight": 360,
         "href": "#",
         "body": "<p>Card body</p>"
       },
-      "html": "<div class=\"tna-card \" data-module=\"tna-card\"><div class=\"tna-card__inner\"><h class=\" tna-heading tna-heading--m tna-card__heading\"><a href=\"#\" class=\"tna-card__heading-link\"></a></h><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-heading tna-heading--s tna-card__heading\"><a href=\"#\" class=\"tna-card__heading-link\">Card title</a></h3><a href=\"#\" class=\"tna-card__image-container\" tabindex=\"-1\"><picture class=\"tna-card__image\"><img src=\"https://loremflickr.com/640/360\" alt=\"A placeholder image\" width=\"640\" height=\"360\"></picture></a><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
       "hidden": false
     },
     {
       "name": "with actions",
       "options": {
-        "heading": {
-          "title": "Card title",
-          "level": 3
-        },
+        "title": "Card title",
+        "headingLevel": 3,
         "body": "<p>Card body</p>",
         "actions": [
           {
@@ -153,87 +151,75 @@
           }
         ]
       },
-      "html": "<div class=\"tna-card \" data-module=\"tna-card\"><div class=\"tna-card__inner\"><h class=\" tna-heading tna-heading--m tna-card__heading\"></h><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-heading tna-heading--s tna-card__heading\">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
     },
     {
       "name": "with a label",
       "options": {
-        "heading": {
-          "title": "Card title",
-          "level": 3
-        },
+        "title": "Card title",
+        "headingLevel": 3,
         "label": "New",
         "body": "<p>Card body</p>"
       },
-      "html": "<div class=\"tna-card \" data-module=\"tna-card\"><div class=\"tna-card__inner\"><h class=\" tna-heading tna-heading--m tna-card__heading\"></h><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-heading tna-heading--s tna-card__heading\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
       "hidden": false
     },
     {
       "name": "with a boxed style",
       "options": {
-        "heading": {
-          "title": "Card title",
-          "level": 3
-        },
+        "title": "Card title",
+        "headingLevel": 3,
         "body": "<p>Card body</p>",
         "style": "boxed"
       },
-      "html": "<div class=\"tna-card tna-card--contrast\" data-module=\"tna-card\"><div class=\"tna-card__inner\"><h class=\" tna-heading tna-heading--m tna-card__heading\"></h><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-heading tna-heading--s tna-card__heading\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
       "hidden": false
     },
     {
       "name": "with a accent style",
       "options": {
-        "heading": {
-          "title": "Card title",
-          "level": 3
-        },
+        "title": "Card title",
+        "headingLevel": 3,
         "body": "<p>Card body</p>",
         "style": "accent"
       },
-      "html": "<div class=\"tna-card tna-card--accent\" data-module=\"tna-card\"><div class=\"tna-card__inner\"><h class=\" tna-heading tna-heading--m tna-card__heading\"></h><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-heading tna-heading--s tna-card__heading\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
       "hidden": false
     },
     {
       "name": "with an unknown style",
       "options": {
-        "heading": {
-          "title": "Card title",
-          "level": 3
-        },
+        "title": "Card title",
+        "headingLevel": 3,
         "body": "<p>Card body</p>",
         "style": "foobar"
       },
-      "html": "<div class=\"tna-card \" data-module=\"tna-card\"><div class=\"tna-card__inner\"><h class=\" tna-heading tna-heading--m tna-card__heading\"></h><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-heading tna-heading--s tna-card__heading\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
       "hidden": false
     },
     {
       "name": "with classes",
       "options": {
-        "heading": {
-          "title": "Card title",
-          "level": 3
-        },
+        "title": "Card title",
+        "headingLevel": 3,
         "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\"><h class=\" tna-heading tna-heading--m tna-card__heading\"></h><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-heading tna-heading--s tna-card__heading\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
       "hidden": false
     },
     {
       "name": "with attributes",
       "options": {
-        "heading": {
-          "title": "Card title",
-          "level": 3
-        },
+        "title": "Card title",
+        "headingLevel": 3,
         "body": "<p>Card body</p>",
         "attributes": {
           "data-testattribute": "foobar"
         }
       },
-      "html": "<div class=\"tna-card \" data-module=\"tna-card\" data-testattribute=\"foobar\"><div class=\"tna-card__inner\"><h class=\" tna-heading tna-heading--m tna-card__heading\"></h><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-heading tna-heading--s tna-card__heading\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
       "hidden": false
     }
   ]

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

@@ -98,6 +98,26 @@
     "required": false,
     "description": "A label which will appear over the top left of the card's image. If there is no imagem, the label is not displayed."
   },
+  {
+    "name": "meta",
+    "type": "array",
+    "required": false,
+    "description": "Small pieces of additional information akin to subtitles, displayed between the title and the body.",
+    "params": [
+      {
+        "name": "text",
+        "type": "string",
+        "required": true,
+        "description": "The text element of the meta data."
+      },
+      {
+        "name": "icon",
+        "type": "string",
+        "required": false,
+        "description": "The name of a font-awesome icon, without the prefixed `fa-`."
+      }
+    ]
+  },
   {
     "name": "body",
     "type": "string",

package/nationalarchives/components/card/template.njk

@@ -10,8 +10,8 @@
 {%- endif -%}
 <{{ 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.supertitle -%}
-    <hgroup class="tna-hgroup tna-hgroup--{{ params.headingSize or 'm' }} tna-card__heading">
+  {%- if params.supertitle -%}
+    <hgroup class="tna-hgroup tna-hgroup--{{ params.headingSize or 's' }} tna-card__heading">
       <h{{ params.headingLevel }} class="tna-hgroup__title">
         <span class="tna-hgroup__supertitle">{{ params.supertitle }}</span>
         {%- if params.href -%}
@@ -21,42 +21,54 @@
         {%- endif -%}
       </h{{ params.headingLevel }}>
     </hgroup>
-    {%- else -%}
-    <h{{ params.headingLevel }} class=" tna-heading tna-heading--{{ params.headingSize or 'm' }} tna-card__heading">
+  {%- else -%}
+    <h{{ params.headingLevel }} class=" tna-heading tna-heading--{{ params.headingSize or 's' }} tna-card__heading">
       {%- if params.href -%}
       <a href="{{ params.href }}" class="tna-card__heading-link">{{ params.title }}</a>
       {%- else -%}
       {{ params.title }}
       {%- endif -%}
     </h{{ params.headingLevel }}>
+  {%- endif -%}
+  {%- if params.imageSrc -%}
+    {%- if params.href -%}
+    <a href="{{ params.href }}" class="tna-card__image-container" tabindex="-1">
+    {%- else -%}
+    <div class="tna-card__image-container">
     {%- endif -%}
-    {%- if params.imageSrc -%}
-      {%- if params.href -%}
-      <a href="{{ params.href }}" class="tna-card__image-container" tabindex="-1">
-      {%- else -%}
-      <div class="tna-card__image-container">
-      {%- endif -%}
-        <picture class="tna-card__image">
-          {%- if params.imageSources -%}
-          {%- for source in params.imageSources -%}
-          <source srcset="{{ source.src }}" type="{{ source.type }}" width="{{ source.width if source.width else params.imageWidth }}" height="{{ source.height if source.height else params.imageHeight }}">
-          {%- endfor -%}
-          <source srcset="{{ params.imageSrc }}" type="image/jpeg" width="{{ params.imageWidth }}" height="{{ params.imageHeight }}">
-          {%- endif -%}
-          <img src="{{ params.imageSrc }}" alt="{{ params.imageAlt }}" width="{{ params.imageWidth }}" height="{{ params.imageHeight }}">
-        </picture>
-        {%- if params.label -%}
-        <div class="tna-chip tna-card__image-label">
-          {{ params.label }}
-        </div>
+      <picture class="tna-card__image">
+        {%- if params.imageSources -%}
+        {%- for source in params.imageSources -%}
+        <source srcset="{{ source.src }}" type="{{ source.type }}" width="{{ source.width if source.width else params.imageWidth }}" height="{{ source.height if source.height else params.imageHeight }}">
+        {%- endfor -%}
+        <source srcset="{{ params.imageSrc }}" type="image/jpeg" width="{{ params.imageWidth }}" height="{{ params.imageHeight }}">
         {%- endif -%}
-      {%- if params.href -%}
-      </a>
-      {%- else -%}
+        <img src="{{ params.imageSrc }}" alt="{{ params.imageAlt }}" width="{{ params.imageWidth }}" height="{{ params.imageHeight }}">
+      </picture>
+      {%- if params.label -%}
+      <div class="tna-chip tna-card__image-label">
+        {{ params.label }}
       </div>
       {%- endif -%}
+    {%- if params.href -%}
+    </a>
+    {%- else -%}
+    </div>
     {%- endif -%}
+  {%- endif -%}
     <div class="tna-card__body">
+    {%- if params.meta -%}
+      <ul class="tna-card__meta">
+        {%- for item in params.meta -%}
+        <li class="tna-card__meta-item">
+          {%- if item.icon -%}
+          <i class="fa-solid fa-{{ item.icon }}"></i>
+          {%- endif -%}
+          {{ item.text }}
+        </li>
+        {%- endfor -%}
+      </ul>
+    {%- endif -%}
     {%- if params.text -%}
       <p>{{ params.text }}</p>
     {%- else -%}