Featured records component

.github/actions/prototype-kit-test/action.yml

@@ -39,6 +39,7 @@ runs:
         echo -e "{% from \"nationalarchives/components/button/macro.njk\" import tnaButton %}\n$(cat prototype/app/views/index.html)" > prototype/app/views/index.html &&
         echo -e "{% from \"nationalarchives/components/card/macro.njk\" import tnaCard %}\n$(cat prototype/app/views/index.html)" > prototype/app/views/index.html &&
         echo -e "{% from \"nationalarchives/components/cookie-banner/macro.njk\" import tnaCookieBanner %}\n$(cat prototype/app/views/index.html)" > prototype/app/views/index.html &&
+        echo -e "{% from \"nationalarchives/components/featured-records/macro.njk\" import tnaFeaturedRecords %}\n$(cat prototype/app/views/index.html)" > prototype/app/views/index.html &&
         echo -e "{% from \"nationalarchives/components/filters/macro.njk\" import tnaFilters %}\n$(cat prototype/app/views/index.html)" > prototype/app/views/index.html &&
         echo -e "{% from \"nationalarchives/components/footer/macro.njk\" import tnaFooter %}\n$(cat prototype/app/views/index.html)" > prototype/app/views/index.html &&
         echo -e "{% from \"nationalarchives/components/gallery/macro.njk\" import tnaGallery %}\n$(cat prototype/app/views/index.html)" > prototype/app/views/index.html &&
@@ -61,6 +62,7 @@ runs:
         echo "{{ tnaButton({text:\"I am a button\",url:\"#\"}) }}" >> prototype/app/views/index.html &&
         echo "{{ tnaCard({}) }}" >> prototype/app/views/index.html &&
         echo "{{ tnaCookieBanner({}) }}" >> prototype/app/views/index.html &&
+        echo "{{ tnaFeaturedRecords({}) }}" >> prototype/app/views/index.html &&
         echo "{{ tnaFilters({}) }}" >> prototype/app/views/index.html &&
         echo "{{ tnaFooter({}) }}" >> prototype/app/views/index.html &&
         echo "{{ tnaGallery({}) }}" >> prototype/app/views/index.html &&

CHANGELOG.md

@@ -12,6 +12,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Elements can be hidden on certain devices with `tna-!--hide-on-[large|medium|small|tiny]`
 - Allow links to have no visited state with `tna-link--no-visited-state`
 - Card supertitles can be made "plain" with no contrasting colour
+- Featured records component
 
 ### Changed
 

src/nationalarchives/components/_index.scss

@@ -2,6 +2,7 @@
 @use "button";
 @use "card";
 @use "cookie-banner";
+@use "featured-records";
 @use "filters";
 @use "footer";
 @use "gallery";

src/nationalarchives/components/featured-records/_index.scss

@@ -0,0 +1 @@
+@use "featured-records";

src/nationalarchives/components/featured-records/featured-records.scss

@@ -0,0 +1,95 @@
+@use "../../tools/colour";
+@use "../../tools/media";
+@use "../../tools/spacing";
+@use "../../tools/typography";
+@use "../../variables/typography" as typographyVars;
+@use "../../utilities";
+
+.tna-featured-records {
+  @include spacing.space-above;
+  margin-bottom: 0;
+  padding: 0;
+
+  list-style: none;
+
+  @include colour.colour-border("accent-background", 0.375rem, solid, top);
+
+  &__item {
+    padding: 2rem;
+
+    display: flex;
+    gap: 2rem;
+    justify-content: flex-start;
+    align-items: center;
+
+    @include colour.colour-border("keyline", 1px);
+    border-top-width: 0;
+  }
+
+  &__image {
+    width: 7rem;
+    height: auto;
+  }
+
+  &__details {
+    margin: 0;
+
+    flex: 1;
+  }
+
+  &__title-label,
+  &__date-label {
+    display: none;
+  }
+
+  &__collection-description,
+  &__title-description,
+  &__date-description {
+    width: 100%;
+    margin: 0;
+  }
+
+  &__collection-label,
+  &__collection-description {
+    display: inline-block;
+  }
+
+  &__collection-label {
+    &::after {
+      content: ":";
+    }
+  }
+
+  &__collection-description {
+  }
+
+  &__title-label {
+  }
+
+  &__title-description {
+    padding-bottom: 0.25rem;
+
+    @include typography.detail-font;
+    font-weight: 700;
+  }
+
+  &__date-label {
+  }
+
+  &__date-description {
+    @include colour.colour-font("font-light");
+    @include typography.relative-font-size(
+      typographyVars.$body-font-size-px * 0.85
+    );
+  }
+
+  @include media.on-tiny {
+    &__item {
+      padding: 1rem;
+
+      gap: 1rem;
+      flex-direction: column;
+      align-items: flex-start;
+    }
+  }
+}

src/nationalarchives/components/featured-records/featured-records.stories.js

@@ -0,0 +1,51 @@
+import FeaturedRecords from "./template.njk";
+import macroOptions from "./macro-options.json";
+
+const argTypes = {
+  items: { control: "object" },
+  classes: { control: "text" },
+  attributes: { control: "object" },
+};
+
+Object.keys(argTypes).forEach((argType) => {
+  argTypes[argType].description = macroOptions.find(
+    (option) => option.name === argType,
+  )?.description;
+});
+
+export default {
+  title: "Components/Featured records",
+  argTypes,
+};
+
+const Template = ({ items, classes, attributes }) =>
+  FeaturedRecords({
+    params: {
+      items,
+      classes,
+      attributes,
+    },
+  });
+
+export const Standard = Template.bind({});
+Standard.args = {
+  items: [
+    {
+      imageSrc:
+        "https://beta.nationalarchives.gov.uk/media/images/wedderburn-trial.max-832x591.format-webp_i3c9pUH.webp",
+      imageWidth: 576,
+      imageHeight: 591,
+      collection: "TS 11/45/167",
+      title: "Court records relating to Robert Wedderburn's trial",
+      href: "#",
+      date: "1819–1820",
+    },
+    {
+      collection: "HO 42/191",
+      title: "Home office letters",
+      href: "#",
+      date: "1819",
+    },
+  ],
+  classes: "tna-featured-records--demo",
+};

src/nationalarchives/components/featured-records/fixtures.json

@@ -0,0 +1,4 @@
+{
+  "component": "featured-records",
+  "fixtures": []
+}

src/nationalarchives/components/featured-records/macro-options.json

@@ -0,0 +1,70 @@
+[
+  {
+    "name": "items",
+    "type": "array",
+    "required": true,
+    "description": "",
+    "params": [
+      {
+        "name": "imageSrc",
+        "type": "string",
+        "required": false,
+        "description": ""
+      },
+      {
+        "name": "imageAlt",
+        "type": "string",
+        "required": false,
+        "description": ""
+      },
+      {
+        "name": "imageWidth",
+        "type": "number",
+        "required": false,
+        "description": ""
+      },
+      {
+        "name": "imageHeight",
+        "type": "number",
+        "required": false,
+        "description": ""
+      },
+      {
+        "name": "collection",
+        "type": "string",
+        "required": true,
+        "description": ""
+      },
+      {
+        "name": "title",
+        "type": "string",
+        "required": true,
+        "description": ""
+      },
+      {
+        "name": "href",
+        "type": "string",
+        "required": true,
+        "description": ""
+      },
+      {
+        "name": "date",
+        "type": "string",
+        "required": false,
+        "description": ""
+      }
+    ]
+  },
+  {
+    "name": "classes",
+    "type": "string",
+    "required": false,
+    "description": "Classes to add to the filters."
+  },
+  {
+    "name": "attributes",
+    "type": "object",
+    "required": false,
+    "description": "HTML attributes (for example data attributes) to add to the filters."
+  }
+]

src/nationalarchives/components/featured-records/macro.njk

@@ -0,0 +1,3 @@
+{% macro tnaFeaturedRecords(params) %}
+  {%- include "nationalarchives/components/featured-records/template.njk" -%}
+{% endmacro %}

src/nationalarchives/components/featured-records/template.njk

@@ -0,0 +1,20 @@
+{%- set containerClasses = [params.classes] if params.classes else [] -%}
+<ul class="tna-featured-records {{ containerClasses | join(' ') }}" {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
+  {%- for item in params.items %}
+  <li class="tna-featured-records__item">
+    {%- if item.imageSrc %}
+    <img src="{{ item.imageSrc }}" width="{{ item.imageWidth }}" height="{{ item.imageHeight }}" class="tna-featured-records__image" alt="{{ item.imageAlt }}">
+    {%- endif %}
+    <dl class="tna-featured-records__details">
+      <dt class="tna-featured-records__collection-label tna-chip tna-chip--plain">From our collection</dt>
+      <dd class="tna-featured-records__collection-description tna-chip tna-chip--plain">{{ item.collection }}</dd>
+      <dt class="tna-featured-records__title-label">Title</dt>
+      <dd class="tna-featured-records__title-description">
+        <a href="{{ item.href }}">{{ item.title }}</a>
+      </dd>
+      <dt class="tna-featured-records__date-label">Date</dt>
+      <dd class="tna-featured-records__date-description">{{ item.date }}</dd>
+    </dl>
+  </li>
+  {%- endfor %}
+</ul>

src/nationalarchives/stories/utilities/colour-schemes/colour-schemes.stories.js

@@ -2,6 +2,7 @@ import SkipLink from "../../../components/skip-link/template.njk";
 import Breadcrumbs from "../../../components/breadcrumbs/template.njk";
 import Button from "../../../components/button/template.njk";
 import Card from "../../../components/card/template.njk";
+import FeaturedRecords from "../../../components/featured-records/template.njk";
 import Footer from "../../../components/footer/template.njk";
 import CookieBanner from "../../../components/cookie-banner/template.njk";
 import Gallery from "../../../components/gallery/template.njk";
@@ -394,6 +395,32 @@ const Template = ({ theme, accent }) => {
                 "Please note this page references hunger strikes and force feeding, which some people may find upsetting.",
             },
           })}
+          <h2 class="tna-heading-l">
+            Featured records
+          </h2>
+          ${FeaturedRecords({
+            params: {
+              items: [
+                {
+                  imageSrc:
+                    "https://beta.nationalarchives.gov.uk/media/images/wedderburn-trial.max-832x591.format-webp_i3c9pUH.webp",
+                  imageWidth: 576,
+                  imageHeight: 591,
+                  collection: "TS 11/45/167",
+                  title: "Court records relating to Robert Wedderburn's trial",
+                  href: "#",
+                  date: "1819–1820",
+                },
+                {
+                  collection: "HO 42/191",
+                  title: "Home office letters",
+                  href: "#",
+                  date: "1819",
+                },
+              ],
+              classes: "tna-featured-records--demo",
+            },
+          })}
         </div>
       </div>
       <hr>

tasks/test-package.js

@@ -56,6 +56,7 @@ const checkExists = [
   ...componentFiles("button"),
   ...componentFiles("card"),
   ...componentFiles("cookie-banner", "CookieBanner"),
+  ...componentFiles("featured-records"),
   ...componentFiles("filters"),
   ...componentFiles("footer"),
   ...componentFiles("gallery", "Gallery"),