@nationalarchives/frontend 0.1.15-prerelease → 0.1.16-prerelease

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/_index.scss

@@ -10,8 +10,7 @@
 
   @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,

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

@@ -21,8 +21,8 @@ export default {
   argTypes,
 };
 
-const Template = ({ text, href, title, secondary, classes, attributes }) => {
-  return Button({
+const Template = ({ text, href, title, secondary, classes, attributes }) =>
+  Button({
     params: {
       text,
       href,
@@ -32,7 +32,6 @@ const Template = ({ text, href, title, secondary, classes, attributes }) => {
       attributes,
     },
   });
-};
 
 export const Standard = Template.bind({});
 Standard.args = {

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,6 +24,9 @@
 
   &__title {
     order: 2;
+
+    @include typography.main-font;
+    @include typography.main-font-weight-bold;
   }
 
   &__title-link {
@@ -70,13 +72,10 @@
   }
 
   &--green-label #{&}__image-label {
-    // color: colourVars.$tna-white;
-    background-color: colourVars.$tna-green;
+    background-color: colour.brand-colour("green");
   }
 
   &__body {
-    // margin-top: 2rem;
-
     order: 3;
   }
 
@@ -101,8 +100,7 @@
     .tna-card__heading {
       padding-bottom: 2rem;
 
-      border-bottom: 2px transparent solid;
-      @include colour.colour-border("keyline-dark");
+      @include colour.colour-border("keyline-dark", 2px, solid, bottom);
     }
 
     .tna-card__supertitle {
@@ -154,8 +152,11 @@
   }
 
   @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,

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

@@ -38,8 +38,8 @@ const Template = ({
   htmlElement,
   classes,
   attributes,
-}) => {
-  return Card({
+}) =>
+  Card({
     params: {
       heading,
       href,
@@ -54,7 +54,6 @@ const Template = ({
       attributes,
     },
   });
-};
 
 export const Standard = Template.bind({});
 Standard.args = {
@@ -62,7 +61,6 @@ Standard.args = {
     supertitle: "Card supertitle",
     title: "Card title",
     level: 3,
-    size: "m",
     singleSentence: false,
   },
   href: "#",
@@ -91,7 +89,6 @@ Featured.args = {
     supertitle: "Card supertitle",
     title: "Card title",
     level: 3,
-    size: "l",
     singleSentence: false,
   },
   href: "#",
@@ -114,3 +111,68 @@ Featured.args = {
   htmlElement: "article",
   classes: "tna-card--demo",
 };
+
+const GridTemplate = ({
+  heading,
+  href,
+  image,
+  label,
+  body,
+  text,
+  actions,
+  featured,
+  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,
+              featured,
+              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",
+};

package/nationalarchives/components/card/fixtures.json

@@ -154,6 +154,19 @@
       },
       "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
+    },
+    {
+      "name": "with a label",
+      "options": {
+        "heading": {
+          "title": "Card title",
+          "level": 3
+        },
+        "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--m\">Card title</h3><div class=\"tna-card__body\"><p>Card body</p></div></div></div>",
+      "hidden": false
     }
   ]
 }

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

@@ -23,12 +23,6 @@
         "required": true,
         "description": ""
       },
-      {
-        "name": "size",
-        "type": "text",
-        "required": false,
-        "description": ""
-      },
       {
         "name": "singleSentence",
         "type": "boolean",

package/nationalarchives/components/card/template.njk

@@ -1,6 +1,6 @@
 {%- set htmlElement = params.htmlElement if params.htmlElement else 'div' -%}
 {%- set containerClasses = [params.classes] if params.classes else [] -%}
-{%- set headingSize = params.heading.size if params.heading.size else "m" -%}
+{%- set headingSize = "l" if params.featured else "m" -%}
 {%- if params.featured -%}
   {%- set containerClasses = containerClasses.concat('tna-card--featured') -%}
 {%- endif -%}

package/nationalarchives/components/filters/filters.stories.js

@@ -15,12 +15,12 @@ Object.keys(argTypes).forEach((argType) => {
 });
 
 export default {
-  title: "Components/Experimental/Filters",
+  title: "Components/Filters",
   argTypes,
 };
 
-const Template = ({ items, stack, classes, attributes }) => {
-  return Filters({
+const Template = ({ items, stack, classes, attributes }) =>
+  Filters({
     params: {
       items,
       stack,
@@ -28,7 +28,6 @@ const Template = ({ items, stack, classes, attributes }) => {
       attributes,
     },
   });
-};
 
 export const Standard = Template.bind({});
 Standard.args = {

package/nationalarchives/components/footer/_index.scss

@@ -1,4 +1,3 @@
-@use "../../variables/colour" as colourVars; // TODO
 @use "../../tools/colour";
 @use "../../tools/media";
 
@@ -7,10 +6,10 @@
   padding-bottom: 3rem;
 
   @include colour.invert;
+  @include colour.colour-font("contrast-font-base");
 
   @include colour.on-high-contrast {
-    border-top: 1px transparent solid;
-    @include colour.colour-border("keyline");
+    @include colour.colour-border("keyline", 1px, solid, top);
   }
 
   &__link {
@@ -20,8 +19,7 @@
     }
 
     &:hover {
-      // @include colour.colour-font("link");
-      color: colourVars.$tna-blue;
+      @include colour.colour-font("link");
     }
   }
 
@@ -33,8 +31,6 @@
 
   &__title {
     margin-bottom: 0.5rem;
-
-    color: inherit;
   }
 
   &__address {
@@ -49,7 +45,6 @@
   }
 
   &__navigation-group-title {
-    color: inherit;
   }
 
   &__navigation-group-items {
@@ -118,23 +113,17 @@
 
     &,
     &:visited {
-      color: inherit;
-      fill: #fff;
+      @include colour.colour-font("font-dark");
     }
 
     &:hover {
-      // @include colour.colour-font("link");
-      // @include colour.colour-fill("link");
-      color: colourVars.$tna-blue;
-      fill: colourVars.$tna-blue;
+      @include colour.colour-font("link");
     }
   }
 
   &__govuk-logotype-crown {
     margin: 0 auto;
     display: block;
-
-    fill: inherit;
   }
 
   @include media.on-mobile {

package/nationalarchives/components/footer/footer.stories.js

@@ -28,8 +28,8 @@ const Template = ({
   social,
   classes,
   attributes,
-}) => {
-  return Footer({
+}) =>
+  Footer({
     params: {
       title,
       address,
@@ -39,7 +39,6 @@ const Template = ({
       attributes,
     },
   });
-};
 
 export const Standard = Template.bind({});
 Standard.args = {

package/nationalarchives/components/grid/_index.scss

@@ -50,8 +50,8 @@
 
 @include media.on-mobile {
   .tna-container {
-    padding-right: math.div(grid.$gutter-width-mobile, 2) + 0.75rem;
-    padding-left: math.div(grid.$gutter-width-mobile, 2) + 0.75rem;
+    padding-right: math.div(grid.$gutter-width-mobile, 2);
+    padding-left: math.div(grid.$gutter-width-mobile, 2);
   }
 
   .tna-column {

package/nationalarchives/components/grid/grid.stories.js

@@ -30,8 +30,8 @@ const Template = ({
   htmlElement,
   classes,
   attributes,
-}) => {
-  return Header({
+}) =>
+  Header({
     params: {
       columns,
       maxWidth,
@@ -42,7 +42,6 @@ const Template = ({
       attributes,
     },
   });
-};
 
 export const Standard = Template.bind({});
 Standard.args = {

package/nationalarchives/components/header/_index.scss

@@ -8,7 +8,9 @@
 .tna-header {
   @include colour.invert;
 
-  background-color: colourVars.$tna-black;
+  color: colour.brand-colour("white");
+
+  background-color: colour.brand-colour("black");
 
   &__exit {
     padding-top: 0.5rem;
@@ -262,7 +264,7 @@
   &--orange,
   &--green,
   &--blue {
-    color: colourVars.$tna-black;
+    color: colour.brand-colour("black");
 
     .tna-header__logo-link {
       &:hover {
@@ -277,28 +279,28 @@
     }
 
     .tna-header__hamburger {
-      background-color: colourVars.$tna-black;
+      background-color: colour.brand-colour("black");
     }
   }
 
   &--yellow {
-    background-color: colourVars.$tna-yellow;
+    background-color: colour.brand-colour("yellow");
   }
 
   &--pink {
-    background-color: colourVars.$tna-pink;
+    background-color: colour.brand-colour("pink");
   }
 
   &--orange {
-    background-color: colourVars.$tna-orange;
+    background-color: colour.brand-colour("orange");
   }
 
   &--green {
-    background-color: colourVars.$tna-green;
+    background-color: colour.brand-colour("green");
   }
 
   &--blue {
-    background-color: colourVars.$tna-blue;
+    background-color: colour.brand-colour("blue");
   }
 
   &__navigation {
@@ -406,8 +408,6 @@
   }
 
   @include media.on-mobile {
-    $compensated-container-padding: grid.$gutter-width-mobile + 0.75rem;
-
     &__contents {
       &.tna-container {
         padding-right: 0;
@@ -420,8 +420,8 @@
       padding-bottom: 1rem;
 
       &.tna-column {
-        padding-right: $compensated-container-padding;
-        padding-left: $compensated-container-padding;
+        padding-right: grid.$gutter-width-mobile;
+        padding-left: grid.$gutter-width-mobile;
       }
     }
 
@@ -436,7 +436,7 @@
 
     &__navigation-toggle {
       &.tna-column {
-        padding-right: $compensated-container-padding;
+        padding-right: grid.$gutter-width-mobile;
         padding-left: 0;
       }
     }
@@ -470,8 +470,7 @@
 
       @include colour.colour-background("page-background");
 
-      border-bottom: 1px solid;
-      @include colour.colour-border("keyline");
+      @include colour.colour-border("keyline", 1px, solid, bottom);
     }
 
     &__top-navigation-item {
@@ -493,13 +492,12 @@
 
       display: block;
 
-      border-bottom: 1px solid;
-      @include colour.colour-border("keyline");
+      @include colour.colour-border("keyline", 1px, solid, bottom);
     }
 
     &__navigation-item-link {
-      padding-right: $compensated-container-padding;
-      padding-left: $compensated-container-padding;
+      padding-right: grid.$gutter-width-mobile;
+      padding-left: grid.$gutter-width-mobile + 1rem;
 
       display: block;
 

package/nationalarchives/components/header/header.stories.js

@@ -39,8 +39,8 @@ const Template = ({
   exit,
   classes,
   attributes,
-}) => {
-  return Header({
+}) =>
+  Header({
     params: {
       logo,
       topNavigation,
@@ -51,7 +51,6 @@ const Template = ({
       attributes,
     },
   });
-};
 
 export const Standard = Template.bind({});
 Standard.args = {

package/nationalarchives/components/hero/_index.scss

@@ -12,6 +12,8 @@
 
   position: relative;
 
+  @include colour.invert-on-mobile;
+
   &__image {
     width: 100%;
     height: 100%;
@@ -105,8 +107,6 @@
 
     display: block;
 
-    @include colour.invert;
-
     &__image {
       height: 320px;
 
@@ -142,13 +142,10 @@
     }
 
     &__heading {
-      color: inherit;
     }
 
     &__body {
       margin-top: 1rem;
-
-      color: inherit;
     }
   }
 
@@ -160,8 +157,7 @@
 
   @include colour.on-high-contrast {
     &__content-inner {
-      border: 1px transparent solid;
-      @include colour.colour-border("keyline-dark");
+      @include colour.colour-border("keyline-dark", 1px);
 
       @include media.on-mobile {
         border: none;

package/nationalarchives/components/hero/hero.stories.js

@@ -23,8 +23,8 @@ export default {
   argTypes,
 };
 
-const Template = ({ heading, body, text, image, classes, attributes }) => {
-  return Hero({
+const Template = ({ heading, body, text, image, classes, attributes }) =>
+  Hero({
     params: {
       heading,
       body,
@@ -34,7 +34,6 @@ const Template = ({ heading, body, text, image, classes, attributes }) => {
       attributes,
     },
   });
-};
 
 export const Standard = Template.bind({});
 Standard.args = {

package/nationalarchives/components/index-grid/_index.scss

@@ -25,8 +25,7 @@
     text-decoration: none;
 
     @include colour.on-high-contrast {
-      border: 1px transparent solid;
-      @include colour.colour-border("keyline-dark");
+      @include colour.colour-border("keyline-dark", 1px);
     }
   }
 

package/nationalarchives/components/index-grid/index-grid.stories.js

@@ -32,8 +32,8 @@ const Template = ({
   columnsTiny,
   classes,
   attributes,
-}) => {
-  return IndexGrid({
+}) =>
+  IndexGrid({
     params: {
       heading,
       items,
@@ -45,7 +45,6 @@ const Template = ({
       attributes,
     },
   });
-};
 
 const exampleItem = {
   href: "#",

package/nationalarchives/components/message/_index.scss

@@ -1,4 +1,3 @@
-@use "../../variables/colour" as colourVars; // TODO
 @use "../../tools/colour";
 
 .tna-message {
@@ -7,17 +6,16 @@
   display: flex;
   align-items: center;
 
-  color: colourVars.$tna-black;
+  color: colour.brand-colour("black");
 
   @include colour.colour-background("keyline");
 
-  border-left: 0.5rem transparent solid;
-  @include colour.colour-border("keyline-dark");
+  @include colour.colour-border("keyline-dark", 0.5rem, solid, left);
 
   // &--yellow {
-  background-color: colourVars.$tna-cream;
+  background-color: colour.brand-colour("cream");
 
-  border-left-color: colourVars.$tna-yellow;
+  border-left-color: colour.brand-colour("yellow");
   // }
 
   &__icon {

package/nationalarchives/components/message/phase-banner.stories.js

@@ -18,15 +18,14 @@ export default {
   argTypes,
 };
 
-const Template = ({ message, classes, attributes }) => {
-  return Message({
+const Template = ({ message, classes, attributes }) =>
+  Message({
     params: {
       message,
       classes,
       attributes,
     },
   });
-};
 
 export const Standard = Template.bind({});
 Standard.args = {