@nationalarchives/frontend 0.1.17-prerelease → 0.1.19-prerelease

package/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\"><h class=\" tna-heading tna-heading--m tna-card__heading\"></h><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
       "hidden": false
     },
     {
@@ -23,21 +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>",
-      "hidden": false
-    },
-    {
-      "name": "with single sentence supertitle",
-      "options": {
-        "heading": {
-          "supertitle": "Card supertitle",
-          "title": "Card title",
-          "level": 3,
-          "singleSentence": true
-        },
-        "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\"><h3 class=\"tna-card__title tna-hgroup__title\"><span class=\"tna-card__supertitle tna-hgroup__supertitle\">Card supertitle</span>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\"><h class=\" tna-heading tna-heading--m tna-card__heading\"></h><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
       "hidden": false
     },
     {
@@ -50,7 +36,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--m\">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\"><h class=\" tna-heading tna-heading--m tna-card__heading\"></h><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
       "hidden": false
     },
     {
@@ -62,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\"><h class=\" tna-heading tna-heading--m tna-card__heading\"></h><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
       "hidden": false
     },
     {
@@ -75,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\"><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>",
       "hidden": false
     },
     {
@@ -87,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\"><h class=\" tna-heading tna-heading--m tna-card__heading\"></h><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
       "hidden": false
     },
     {
@@ -105,7 +91,50 @@
         },
         "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><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\"><h class=\" tna-heading tna-heading--m tna-card__heading\"></h><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"
+            }
+          ]
+        },
+        "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>",
+      "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
+        },
+        "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>",
       "hidden": false
     },
     {
@@ -124,7 +153,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\"><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>",
       "hidden": false
     },
     {
@@ -137,7 +166,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\"><h class=\" tna-heading tna-heading--m tna-card__heading\"></h><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
       "hidden": false
     },
     {
@@ -150,7 +179,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\"><h class=\" tna-heading tna-heading--m tna-card__heading\"></h><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
       "hidden": false
     },
     {
@@ -163,7 +192,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\"><h class=\" tna-heading tna-heading--m tna-card__heading\"></h><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
       "hidden": false
     },
     {
@@ -176,7 +205,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\"><h class=\" tna-heading tna-heading--m tna-card__heading\"></h><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
       "hidden": false
     },
     {
@@ -189,7 +218,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\"><h class=\" tna-heading tna-heading--m tna-card__heading\"></h><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
       "hidden": false
     },
     {
@@ -204,7 +233,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\"><h class=\" tna-heading tna-heading--m tna-card__heading\"></h><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
       "hidden": false
     }
   ]

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

@@ -1,53 +1,64 @@
 [
   {
-    "name": "heading",
-    "type": "object",
+    "name": "supertitle",
+    "type": "string",
+    "required": false,
+    "description": "The smaller title to display above the main card title."
+  },
+  {
+    "name": "title",
+    "type": "string",
     "required": true,
-    "description": "",
-    "params": [
-      {
-        "name": "supertitle",
-        "type": "string",
-        "required": false,
-        "description": ""
-      },
-      {
-        "name": "title",
-        "type": "string",
-        "required": true,
-        "description": ""
-      },
-      {
-        "name": "level",
-        "type": "number",
-        "required": true,
-        "description": ""
-      },
-      {
-        "name": "size",
-        "type": "string",
-        "required": false,
-        "description": ""
-      },
-      {
-        "name": "singleSentence",
-        "type": "boolean",
-        "required": false,
-        "description": ""
-      }
-    ]
+    "description": "The main title of the card."
+  },
+  {
+    "name": "headingLevel",
+    "type": "number",
+    "required": true,
+    "description": "The heading level which represents an element from `<h1>` through to `<h6>`."
+  },
+  {
+    "name": "headingSize",
+    "type": "string",
+    "required": false,
+    "default": "m",
+    "description": "The physical size of the card title."
   },
   {
     "name": "href",
     "type": "string",
     "required": false,
-    "description": ""
+    "description": "A URL to use as a link in the card's heading and image (if one is declared)."
   },
   {
-    "name": "image",
-    "type": "object",
+    "name": "imageSrc",
+    "type": "string",
+    "required": false,
+    "description": "A JPG file to use as the card's image."
+  },
+  {
+    "name": "imageAlt",
+    "type": "string",
     "required": false,
-    "description": "",
+    "description": "Alternative text for the image in the event that it can't be displayed."
+  },
+  {
+    "name": "imageWidth",
+    "type": "number",
+    "required": false,
+    "description": "The width of the image in pixels."
+  },
+  {
+    "name": "imageHeight",
+    "type": "number",
+    "required": false,
+    "description": "The height of the image in pixels."
+  },
+  {
+    "name": "imageSources",
+    "type": "array",
+    "required": true,
+    "description": "Alternative sources of the image which can include WebP files.",
     "params": [
       {
         "name": "src",
@@ -56,21 +67,27 @@
         "description": ""
       },
       {
-        "name": "alt",
+        "name": "type",
         "type": "string",
         "required": true,
         "description": ""
       },
+      {
+        "name": "media",
+        "type": "string",
+        "required": false,
+        "description": ""
+      },
       {
         "name": "width",
         "type": "number",
-        "required": true,
+        "required": false,
         "description": ""
       },
       {
         "name": "height",
         "type": "number",
-        "required": true,
+        "required": false,
         "description": ""
       }
     ]
@@ -79,25 +96,25 @@
     "name": "label",
     "type": "string",
     "required": false,
-    "description": ""
+    "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": "body",
     "type": "string",
     "required": true,
-    "description": ""
+    "description": "The HTML for the main body of the card. Not displayed if `text` is set."
   },
   {
     "name": "text",
     "type": "string",
     "required": false,
-    "description": ""
+    "description": "The text for the card which will be inserted into a `<p>` element. Overwrites `body` if it is set."
   },
   {
     "name": "actions",
     "type": "array",
     "required": false,
-    "description": "",
+    "description": "An array of actions to add at the bottom of the card. Each action is displayed as a button.",
     "params": [
       {
         "name": "text",
@@ -116,6 +133,18 @@
         "type": "string",
         "required": false,
         "description": ""
+      },
+      {
+        "name": "icon",
+        "type": "string",
+        "required": false,
+        "description": ""
+      },
+      {
+        "name": "brandIcon",
+        "type": "string",
+        "required": false,
+        "description": ""
       }
     ]
   },
@@ -123,13 +152,13 @@
     "name": "horizontal",
     "type": "boolean",
     "required": false,
-    "description": ""
+    "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."
   },
   {
     "name": "style",
     "type": "text",
     "required": false,
-    "description": ""
+    "description": "The style of card to use which can be either `boxed` for an inverted card or `accent` for a card that matches the page's accent colour."
   },
   {
     "name": "htmlElement",

package/nationalarchives/components/card/template.njk

@@ -10,49 +10,52 @@
 {%- 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.heading.supertitle -%}
-    {%- if params.heading.singleSentence -%}
-      <hgroup class="tna-card__heading tna-hgroup tna-hgroup--{{ params.heading.size or 'l' }}">
-        <h{{ params.heading.level }} class="tna-card__title tna-hgroup__title">
-          <span class="tna-card__supertitle tna-hgroup__supertitle">{{ params.heading.supertitle }}</span>
+    {%- if params.supertitle -%}
+    <hgroup class="tna-hgroup tna-hgroup--{{ params.headingSize or 'm' }} tna-card__heading">
+      <h{{ params.headingLevel }} class="tna-hgroup__title">
+        <span class="tna-hgroup__supertitle">{{ params.supertitle }}</span>
         {%- if params.href -%}
-          <a href="{{ params.href }}" class="tna-card__title-link">{{ params.heading.title }}</a>
+        <a href="{{ params.href }}" class="tna-card__heading-link">{{ params.title }}</a>
         {%- else -%}
-          {{ params.heading.title }}
+        {{ params.title }}
         {%- endif -%}
-        </h{{ params.heading.level }}>
-      </hgroup>
+      </h{{ params.headingLevel }}>
+    </hgroup>
     {%- else -%}
-      <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 -%}
-          <a href="{{ params.href }}" class="tna-card__title-link">{{ params.heading.title }}</a>
-        {%- else -%}
-          {{ params.heading.title }}
-        {%- endif -%}
-        </h{{ params.heading.level }}>
-      </hgroup>
-    {%- endif -%}
-  {%- else -%}
-    <h{{ params.heading.level }} class="tna-card__title tna-heading tna-heading--{{ params.heading.size or 'l' }}">
-    {%- if params.href -%}
-      <a href="{{ params.href }}" class="tna-card__title-link">{{ params.heading.title }}</a>
-    {%- else -%}
-      {{ params.heading.title }}
+    <h{{ params.headingLevel }} class=" tna-heading tna-heading--{{ params.headingSize or 'm' }} 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 -%}
-    </h{{ params.heading.level }}>
-  {%- endif -%}
-  {%- if params.image -%}
-    <a href="{{ item.href }}" class="tna-card__image-container" tabindex="-1">
-      <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.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>
+        {%- endif -%}
+      {%- if params.href -%}
+      </a>
+      {%- else -%}
       </div>
       {%- endif -%}
-    </a>
-  {%- endif -%}
+    {%- endif -%}
     <div class="tna-card__body">
     {%- if params.text -%}
       <p>{{ params.text }}</p>
@@ -63,7 +66,14 @@
   {%- if params.actions -%}
     <div class="tna-card__actions">
     {%- for item in params.actions -%}
-      <a href="{{ item.href }}" class="tna-card__action" role="button" {%- if item.title %}title="{{ item.title }}"{% endif %}>{{ item.text }}</a>
+      <a href="{{ item.href }}" class="tna-card__action" role="button" {%- if item.title %}title="{{ item.title }}"{% endif %}>
+        {%- if item.brandIcon -%}
+        <i class="fa-brands fa-{{ item.brandIcon }}"></i>
+        {%- elseif item.icon -%}
+        <i class="fa-solid fa-{{ item.icon }}"></i>
+        {%- endif -%}
+        {{ item.text }}
+      </a>
     {%- endfor -%}
     </div>
   {%- endif -%}

package/nationalarchives/components/cookie-banner/_index.scss

@@ -0,0 +1 @@
+@use "cookie-banner";