@nationalarchives/frontend 0.1.15-prerelease → 0.1.17-prerelease

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

@@ -25,6 +25,12 @@
       }
     ]
   },
+  {
+    "name": "noCollapse",
+    "type": "string",
+    "required": false,
+    "description": ""
+  },
   {
     "name": "classes",
     "type": "string",

package/nationalarchives/components/breadcrumbs/template.njk

@@ -1,14 +1,19 @@
 {%- set containerClasses = [params.classes] if params.classes else [] -%}
-<div class="tna-breadcrumbs tna-container {{ containerClasses | join(' ') }}" data-module="tna-breadcrumbs" {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
-  <nav class="tna-breadcrumbs__wrapper tna-column tna-column--full" aria-label="Breadcrumb">
-    <ol class="tna-breadcrumbs__list tna-breadcrumbs__list--collapse-on-mobile">
-    {%- for item in params.items -%}
-      <li class="tna-breadcrumbs__item">
-        <a href="{{ item.href }}" class="tna-breadcrumbs__link" data-prefix="{{ params.prefix if params.prefix else 'Back to' }}" {%- if item.title %} title="{{ item.title }}"{% endif %}>
-          {{ item.text }}
-        </a>
-      </li>
-    {%- endfor -%}
-    </ol>
-  </nav>
+{%- if params.noCollapse -%}
+  {%- set containerClasses = containerClasses.concat('tna-breadcrumbs--no-collapse') -%}
+{%- endif -%}
+<div class="tna-breadcrumbs {{ containerClasses | join(' ') }}" data-module="tna-breadcrumbs" {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
+  <div class="tna-container">
+    <nav class="tna-breadcrumbs__wrapper tna-column tna-column--full" aria-label="Breadcrumb">
+      <ol class="tna-breadcrumbs__list">
+      {%- for item in params.items -%}
+        <li class="tna-breadcrumbs__item">
+          <a href="{{ item.href }}" class="tna-breadcrumbs__link" {%- if item.title %} title="{{ item.title }}"{% endif %}>
+            {{ item.text }}
+          </a>
+        </li>
+      {%- endfor -%}
+      </ol>
+    </nav>
+  </div>
 </div>

package/nationalarchives/components/button/_button-group.scss

@@ -0,0 +1,18 @@
+@use "../../tools/media";
+
+.tna-button-group {
+  margin-bottom: 2rem;
+
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1rem;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+
+  @include media.on-tiny {
+    flex-direction: column;
+    align-items: stretch;
+  }
+}

package/nationalarchives/components/button/_index.scss

@@ -1,4 +1,6 @@
 @use "../../tools/colour";
+@use "../../tools/media";
+@import "button-group";
 
 .tna-button {
   padding: 0.25rem 1rem;
@@ -7,11 +9,11 @@
 
   font-weight: 700;
   text-decoration: none;
+  text-align: center;
 
   @include colour.colour-background("button-primary-background");
 
-  border: 0.25rem transparent solid;
-  @include colour.colour-border("button-primary-background");
+  @include colour.colour-border("button-primary-background", 0.25rem);
 
   transition:
     color 200ms,
@@ -28,8 +30,9 @@
 
   &:hover {
     @include colour.colour-font("button-primary-hover-text");
+    text-decoration: none;
 
-    @include colour.colour-background("button-primary-hover-background");
+    background: transparent;
 
     transition:
       color 50ms,
@@ -37,21 +40,34 @@
       border-color 50ms;
   }
 
-  &--secondary {
-    @include colour.colour-background("button-secondary-background");
+  &--accent {
+    @include colour.colour-background("button-accent-background");
 
-    @include colour.colour-border("button-secondary-background");
+    @include colour.colour-border("button-accent-background");
 
     &,
     &:link,
     &:visited {
-      @include colour.colour-font("button-secondary-text");
+      @include colour.colour-font("button-accent-text");
     }
 
     &:hover {
-      @include colour.colour-font("button-secondary-hover-text");
+      @include colour.colour-font("font-dark");
+    }
+  }
 
-      @include colour.colour-background("button-secondary-hover-background");
+  &--solid-hover,
+  .tna-background--accent &,
+  .tna-background--accent-light & {
+    &:hover {
+      @include colour.colour-background("page-background");
     }
   }
+
+  .fa,
+  .fa-regular,
+  .fa-solid,
+  .fa-brands {
+    margin-right: 0.5rem;
+  }
 }

package/nationalarchives/components/button/button.stories.js

@@ -5,7 +5,9 @@ const argTypes = {
   text: { control: "text" },
   href: { control: "text" },
   title: { control: "text" },
-  secondary: { control: "boolean" },
+  icon: { control: "text" },
+  brandIcon: { control: "text" },
+  accent: { control: "boolean" },
   classes: { control: "text" },
   attributes: { control: "object" },
 };
@@ -21,18 +23,28 @@ export default {
   argTypes,
 };
 
-const Template = ({ text, href, title, secondary, classes, attributes }) => {
-  return Button({
+const Template = ({
+  text,
+  href,
+  title,
+  icon,
+  brandIcon,
+  accent,
+  classes,
+  attributes,
+}) =>
+  Button({
     params: {
       text,
       href,
       title,
-      secondary,
+      icon,
+      brandIcon,
+      accent,
       classes,
       attributes,
     },
   });
-};
 
 export const Standard = Template.bind({});
 Standard.args = {
@@ -41,10 +53,54 @@ Standard.args = {
   classes: "tna-button--demo",
 };
 
-export const Secondary = Template.bind({});
-Secondary.args = {
+export const Accent = Template.bind({});
+Accent.args = {
   text: "Button",
   href: "#",
-  secondary: true,
+  accent: true,
+  classes: "tna-button--demo",
+};
+
+export const Icon = Template.bind({});
+Icon.args = {
+  text: "Explore the collection",
+  href: "#",
+  icon: "map-location-dot",
   classes: "tna-button--demo",
 };
+
+export const BrandIcon = Template.bind({});
+BrandIcon.args = {
+  text: "Twitter",
+  href: "#",
+  brandIcon: "twitter",
+  classes: "tna-button--demo",
+};
+
+const GroupTemplate = ({ buttons }) =>
+  `<div class="tna-button-group">
+    ${buttons.map((button) => Template(button)).join("")}
+</div>`;
+
+export const Group = GroupTemplate.bind({});
+Group.args = {
+  buttons: [
+    {
+      text: "Button 1",
+      href: "#",
+      classes: "tna-button--demo",
+    },
+    {
+      text: "Button 2",
+      href: "#",
+      accent: true,
+      classes: "tna-button--demo",
+    },
+    {
+      text: "Call us",
+      href: "#",
+      icon: "phone",
+      classes: "tna-button--demo",
+    },
+  ],
+};

package/nationalarchives/components/button/fixtures.json

@@ -21,13 +21,13 @@
       "hidden": false
     },
     {
-      "name": "secondary",
+      "name": "accent",
       "options": {
         "text": "Log in",
         "href": "#",
-        "secondary": true
+        "accent": true
       },
-      "html": "<a href=\"#\" class=\"tna-button tna-button--secondary\" role=\"button\">Log in</a>",
+      "html": "<a href=\"#\" class=\"tna-button tna-button--accent\" role=\"button\">Log in</a>",
       "hidden": false
     },
     {

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

@@ -18,7 +18,19 @@
     "description": ""
   },
   {
-    "name": "secondary",
+    "name": "icon",
+    "type": "string",
+    "required": false,
+    "description": ""
+  },
+  {
+    "name": "brandIcon",
+    "type": "string",
+    "required": false,
+    "description": ""
+  },
+  {
+    "name": "accent",
     "type": "boolean",
     "required": false,
     "description": ""

package/nationalarchives/components/button/template.njk

@@ -1,7 +1,12 @@
 {%- set buttonClasses = [params.classes] if params.classes else [] -%}
-{%- if params.secondary -%}
-  {%- set buttonClasses = buttonClasses.concat('tna-button--secondary') -%}
+{%- if params.accent -%}
+  {%- set buttonClasses = buttonClasses.concat('tna-button--accent') -%}
 {%- endif -%}
 <a href="{{ params.href }}" class="tna-button {{ buttonClasses | join(' ') }}" role="button"{%- if params.title %} title="{{ params.title }}"{% endif %} {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
+  {%- if params.brandIcon -%}
+  <i class="fa-brands fa-{{ params.brandIcon }}"></i>
+  {%- elseif params.icon -%}
+  <i class="fa-solid fa-{{ params.icon }}"></i>
+  {%- endif -%}
   {{ params.text }}
 </a>

package/nationalarchives/components/card/_index.scss

@@ -1,5 +1,4 @@
 @use "sass:math";
-@use "../../variables/colour" as colourVars; // TODO
 @use "../../tools/colour";
 @use "../../tools/typography";
 @use "../../tools/media";
@@ -25,9 +24,15 @@
 
   &__title {
     order: 2;
+
+    // @include typography.main-font;
+    // @include typography.main-font-weight-bold;
   }
 
   &__title-link {
+    &::after {
+      display: none !important;
+    }
   }
 
   &__image-container {
@@ -51,32 +56,14 @@
   }
 
   &__image-label {
-    max-width: calc(100% - 2rem);
-    padding: 0.25rem 0.5rem;
+    max-width: calc(100% - 1rem);
 
     position: absolute;
-    top: 1rem;
-    left: 0;
-
-    @include colour.fixed;
-
-    @include colour.colour-font("font-dark");
-    @include typography.relative-font-size(14);
-    @include typography.main-font-weight-bold;
-    text-transform: uppercase;
-    line-height: #{math.div(16, 14)};
-
-    @include colour.colour-background("accent");
-  }
-
-  &--green-label #{&}__image-label {
-    // color: colourVars.$tna-white;
-    background-color: colourVars.$tna-green;
+    top: 0.5rem;
+    left: 0.5rem;
   }
 
   &__body {
-    // margin-top: 2rem;
-
     order: 3;
   }
 
@@ -89,37 +76,34 @@
   &__action {
   }
 
-  &--featured {
-    @include colour.fixed;
-
-    position: relative;
-
-    @include colour.colour-font("font-base");
-
-    @include colour.colour-background("accent");
-
-    .tna-card__heading {
-      padding-bottom: 2rem;
-
-      border-bottom: 2px transparent solid;
-      @include colour.colour-border("keyline-dark");
+  &--contrast,
+  &--accent {
+    .tna-card__inner {
+      padding-bottom: 1rem;
     }
 
-    .tna-card__supertitle {
-      color: inherit;
+    .tna-card__heading,
+    .tna-card__body,
+    .tna-card__actions {
+      margin-right: 1rem;
+      margin-left: 1rem;
     }
+  }
 
-    .tna-card__title {
-      @include typography.heading-font;
-    }
+  &--contrast {
+    @include colour.invert;
+  }
 
-    .tna-card__title-link {
-      @include colour.colour-font("font-dark");
-    }
+  &--accent {
+    @include colour.accent;
+  }
 
-    .tna-card__image-container {
-      margin-bottom: 2rem;
-    }
+  &--accent &__supertitle {
+    @include colour.invert;
+  }
+
+  &--horizontal {
+    position: relative;
 
     @include media.on-larger-than-mobile {
       .tna-card__inner {
@@ -137,13 +121,27 @@
         position: absolute;
         inset: 0 50% 0 0;
       }
+
+      .tna-card__heading,
+      .tna-card__body,
+      .tna-card__actions {
+        margin-right: 0;
+        margin-left: 0;
+      }
     }
+  }
 
+  &--horizontal#{&}--contrast,
+  &--horizontal#{&}--accent {
     @include media.on-mobile {
       .tna-card__inner {
         padding: 0 0 2rem;
       }
 
+      .tna-card__image-container {
+        margin-bottom: 2rem;
+      }
+
       .tna-card__heading,
       .tna-card__body,
       .tna-card__actions {
@@ -153,15 +151,33 @@
     }
   }
 
+  &:not(#{&}--horizontal) {
+    @include colour.on-high-contrast {
+      .tna-card__inner {
+        padding-bottom: 1rem;
+      }
+
+      .tna-card__heading,
+      .tna-card__body,
+      .tna-card__actions {
+        margin-right: 1rem;
+        margin-left: 1rem;
+      }
+    }
+  }
+
   @include colour.on-high-contrast {
-    border: 1px transparent solid;
-    @include colour.colour-border("keyline-dark");
+    @include colour.colour-border("keyline-dark", 1px);
+
+    .tna-card__inner {
+      // padding-bottom: 1rem;
+    }
 
     .tna-card__heading,
     .tna-card__body,
     .tna-card__actions {
-      margin-right: 2rem;
-      margin-left: 2rem;
+      // margin-right: 1rem;
+      // margin-left: 1rem;
     }
   }
 }

package/nationalarchives/components/card/card.stories.js

@@ -9,7 +9,8 @@ const argTypes = {
   body: { control: "text" },
   text: { control: "text" },
   actions: { control: "object" },
-  featured: { control: "boolean" },
+  horizontal: { control: "boolean" },
+  style: { control: "text" },
   htmlElement: { control: "text" },
   classes: { control: "text" },
   attributes: { control: "object" },
@@ -34,12 +35,13 @@ const Template = ({
   body,
   text,
   actions,
-  featured,
+  horizontal,
+  style,
   htmlElement,
   classes,
   attributes,
-}) => {
-  return Card({
+}) =>
+  Card({
     params: {
       heading,
       href,
@@ -48,13 +50,13 @@ const Template = ({
       body,
       text,
       actions,
-      featured,
+      horizontal,
+      style,
       htmlElement,
       classes,
       attributes,
     },
   });
-};
 
 export const Standard = Template.bind({});
 Standard.args = {
@@ -62,7 +64,7 @@ Standard.args = {
     supertitle: "Card supertitle",
     title: "Card title",
     level: 3,
-    size: "m",
+    size: "l",
     singleSentence: false,
   },
   href: "#",
@@ -85,8 +87,54 @@ Standard.args = {
   classes: "tna-card--demo",
 };
 
-export const Featured = Template.bind({});
-Featured.args = {
+export const Boxed = Template.bind({});
+Boxed.args = {
+  heading: {
+    supertitle: "Card supertitle",
+    title: "Card title",
+    level: 3,
+    size: "l",
+    singleSentence: false,
+  },
+  href: "#",
+  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>",
+  style: "contrast",
+  htmlElement: "article",
+  classes: "tna-card--demo",
+};
+
+export const Accent = Template.bind({});
+Accent.args = {
+  heading: {
+    supertitle: "Card supertitle",
+    title: "Card title",
+    level: 3,
+    size: "l",
+    singleSentence: false,
+  },
+  href: "#",
+  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>",
+  style: "accent",
+  htmlElement: "article",
+  classes: "tna-card--demo",
+};
+
+export const Horizontal = Template.bind({});
+Horizontal.args = {
   heading: {
     supertitle: "Card supertitle",
     title: "Card title",
@@ -110,7 +158,72 @@ Featured.args = {
       title: "Go and do the action",
     },
   ],
-  featured: true,
+  horizontal: true,
+  htmlElement: "article",
+  classes: "tna-card--demo",
+};
+
+const GridTemplate = ({
+  heading,
+  href,
+  image,
+  label,
+  body,
+  text,
+  actions,
+  horizontal,
+  htmlElement,
+  classes,
+  attributes,
+}) =>
+  `<div class="tna-container">
+    ${Array(12)
+      .fill(
+        `<div class="tna-column tna-column--width-1-3 tna-column--width-1-2-small tna-column--full-tiny tna-!--margin-bottom-l">
+          ${Card({
+            params: {
+              heading,
+              href,
+              image,
+              label,
+              body,
+              text,
+              actions,
+              horizontal,
+              htmlElement,
+              classes,
+              attributes,
+            },
+          })}
+        </div>`,
+      )
+      .join("")}
+  </div>`;
+
+export const Grid = GridTemplate.bind({});
+Grid.args = {
+  heading: {
+    supertitle: "Card supertitle",
+    title: "Card title",
+    level: 3,
+    singleSentence: false,
+  },
+  href: "#",
+  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",
+  //   },
+  // ],
   htmlElement: "article",
   classes: "tna-card--demo",
 };