@nationalarchives/frontend 0.1.6-prerelease → 0.1.7-prerelease

package/nationalarchives/components/footer/_index.scss

@@ -5,83 +5,83 @@
   color: #fff;
 
   background-color: #26262a;
-}
 
-.tna-footer__link {
-  color: inherit;
+  &__link {
+    color: inherit;
 
-  &:hover {
-    color: #f0a;
+    &:hover {
+      color: #f0a;
+    }
   }
-}
 
-.tna-footer__navigation {
-  padding-bottom: 3rem;
-}
+  &__navigation {
+    padding-bottom: 3rem;
+  }
 
-.tna-footer__navigation-group {
-}
+  &__navigation-group {
+  }
 
-.tna-footer__navigation-group-title {
-}
+  &__navigation-group-title {
+  }
 
-.tna-footer__navigation-group-items {
-  padding-left: 0;
+  &__navigation-group-items {
+    padding-left: 0;
 
-  list-style: none;
-}
+    list-style: none;
+  }
 
-.tna-footer__navigation-group-item {
-}
+  &__navigation-group-item {
+  }
 
-.tna-footer__navigation-group-item-link {
-}
+  &__navigation-group-item-link {
+  }
 
-.tna-footer__social {
-  padding-bottom: 4rem;
+  &__social {
+    padding-bottom: 4rem;
 
-  &.tna-container {
-    align-items: flex-end;
+    &.tna-container {
+      align-items: flex-end;
+    }
   }
-}
 
-.tna-footer__social-item {
-  text-align: center;
-}
+  &__social-item {
+    text-align: center;
+  }
 
-.tna-footer__social-item-link {
-  display: block;
-}
+  &__social-item-link {
+    display: block;
+  }
 
-.tna-footer__social-item-link-image {
-  display: block;
-}
+  &__social-item-link-image {
+    display: block;
+  }
 
-.tna-footer__licence {
-  &.tna-container {
-    align-items: center;
+  &__licence {
+    &.tna-container {
+      align-items: center;
+    }
   }
-}
 
-.tna-footer__licence-logo {
-  display: block;
-}
+  &__licence-logo {
+    display: block;
+  }
 
-.tna-footer__govuk-link {
-  display: inline-block;
+  &__govuk-link {
+    display: inline-block;
 
-  color: inherit;
-  fill: #fff;
+    color: inherit;
+    fill: #fff;
 
-  &:hover {
-    color: #f0a;
-    fill: #f0a;
+    &:hover {
+      color: #f0a;
+      fill: #f0a;
+    }
   }
-}
 
-.tna-footer__govuk-logotype-crown {
-  margin: 0 auto;
-  display: block;
+  &__govuk-logotype-crown {
+    margin: 0 auto;
+    display: block;
 
-  fill: inherit;
+    fill: inherit;
+  }
 }

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

@@ -6,7 +6,7 @@ const argTypes = {
   navigation: { control: "object" },
   social: { control: "object" },
   classes: { control: "text" },
-  attributes: { control: "text" },
+  attributes: { control: "object" },
 };
 
 Object.keys(argTypes).forEach((argType) => {

package/nationalarchives/components/grid/_index.scss

@@ -1,6 +1,6 @@
 @use "sass:math";
 @use "../../variables/grid";
-@use "../../variables/media";
+@use "../../tools/media";
 @use "../../tools/grid" as tools;
 
 .tna-container {
@@ -19,19 +19,13 @@
   justify-content: stretch;
   align-items: stretch;
 
-  &.tna-container--max {
-    max-width: none;
-  }
-
-  &.tna-container--no-padding {
+  &--no-padding,
+  &--no-padding-all {
     max-width: grid.$largest-container-width - (grid.$gutter-width * 2);
-    padding-right: 0;
-    padding-left: 0;
+  }
 
-    .tna-column {
-      padding-right: 0;
-      padding-left: 0;
-    }
+  &--max {
+    max-width: none;
   }
 }
 
@@ -41,52 +35,67 @@
 
   box-sizing: border-box;
 
-  &.tna-column--full {
+  &--full {
     width: 100%;
   }
 
-  // &.column--no-padding {
-  //   padding-right: 0;
-  //   padding-left: 0;
-  // }
-}
+  &--container {
+    display: -ms-flexbox;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: stretch;
+    align-items: stretch;
+  }
 
-@for $i from 1 through 3 {
-  .tna-column--flex-#{$i} {
-    flex: $i 0;
+  @for $i from 1 through 3 {
+    &--flex-#{$i} {
+      flex: $i 0;
+    }
   }
 }
 
+.tna-container--no-padding,
+.tna-container--no-padding-all,
+.tna-container--no-padding-all > .tna-column,
+.tna-column--no-padding,
+.tna-column--container--no-padding-all,
+.tna-column--container--no-padding-all > .tna-column {
+  padding-right: 0;
+  padding-left: 0;
+}
+
 //   @for $i from 1 through 3 {
-//     .column--order-#{$i} {
+//     .tna-column--order-#{$i} {
 //       order: $i;
 //     }
 //   }
 
 @include tools.columns-generator(grid.$column-count);
 
-@media #{media.$media-medium} {
-  .tna-column--full-medium {
-    width: 100%;
-    flex: none;
-  }
+@include media.on-medium {
+  .tna-column {
+    &--full-medium {
+      width: 100%;
+      flex: none;
+    }
 
-  @for $i from 1 through 3 {
-    .tna-column--flex-#{$i}-medium {
-      flex: $i 0;
+    @for $i from 1 through 3 {
+      &--flex-#{$i}-medium {
+        flex: $i 0;
+      }
     }
-  }
 
-  // @for $i from 1 through 3 {
-  //   .column--order-#{$i}-medium {
-  //     order: $i;
-  //   }
-  // }
+    // @for $i from 1 through 3 {
+    //   &--order-#{$i}-medium {
+    //     order: $i;
+    //   }
+    // }
+  }
 
   @include tools.columns-generator(grid.$column-count-medium, "-medium");
 }
 
-@media #{media.$media-mobile} {
+@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;
@@ -96,64 +105,52 @@
     padding-right: math.div(grid.$gutter-width-mobile, 2);
     padding-left: math.div(grid.$gutter-width-mobile, 2);
   }
-
-  // .column--width-full-mobile {
-  //   width: 100%;
-  // }
-
-  // @for $i from 1 through 3 {
-  //   .column--flex-#{$i}-mobile {
-  //     flex: $i 0;
-  //   }
-  // }
-
-  //   @for $i from 1 through 3 {
-  //     .column--order-#{$i}-mobile {
-  //       order: $i;
-  //     }
-  //   }
 }
 
-@media #{media.$media-small} {
-  .tna-column--full-small {
-    width: 100%;
-    flex: none;
-  }
+@include media.on-small {
+  .tna-column {
+    &--full-small {
+      width: 100%;
+      flex: none;
+    }
 
-  @for $i from 1 through 3 {
-    .tna-column--flex-#{$i}-small {
-      flex: $i 0;
+    @for $i from 1 through 3 {
+      &--flex-#{$i}-small {
+        flex: $i 0;
+      }
     }
-  }
 
-  // @for $i from 1 through 3 {
-  //   .column--order-#{$i}-small {
-  //     order: $i;
-  //   }
-  // }
+    // @for $i from 1 through 3 {
+    //   &--order-#{$i}-small {
+    //     order: $i;
+    //   }
+    // }
+  }
 
   @include tools.columns-generator(grid.$column-count-small, "-small");
 }
 
-@media #{media.$media-tiny} {
-  .tna-column--full-tiny {
-    width: 100%;
-    flex: none;
-  }
+@include media.on-tiny {
+  .tna-column {
+    &--full-tiny {
+      width: 100%;
+      flex: none;
+    }
 
-  @for $i from 1 through 3 {
-    .tna-column--flex-#{$i}-tiny {
-      width: auto;
+    @for $i from 1 through 3 {
+      &--flex-#{$i}-tiny {
+        width: auto;
 
-      flex: $i 0;
+        flex: $i 0;
+      }
     }
-  }
 
-  // @for $i from 1 through 3 {
-  //   .column--order-#{$i}-tiny {
-  //     order: $i;
-  //   }
-  // }
+    // @for $i from 1 through 3 {
+    //   &--order-#{$i}-tiny {
+    //     order: $i;
+    //   }
+    // }
+  }
 
   @include tools.columns-generator(grid.$column-count-tiny, "-tiny");
 }

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

@@ -6,9 +6,10 @@ const argTypes = {
   columns: { control: "object" },
   maxWidth: { control: "boolean" },
   noPadding: { control: "boolean" },
+  noPaddingAll: { control: "boolean" },
   htmlElement: { control: "text" },
   classes: { control: "text" },
-  attributes: { control: "text" },
+  attributes: { control: "object" },
 };
 
 Object.keys(argTypes).forEach((argType) => {
@@ -26,6 +27,7 @@ const Template = ({
   columns,
   maxWidth,
   noPadding,
+  noPaddingAll,
   htmlElement,
   classes,
   attributes,
@@ -35,6 +37,7 @@ const Template = ({
       columns,
       maxWidth,
       noPadding,
+      noPaddingAll,
       htmlElement,
       classes,
       attributes,

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

@@ -81,7 +81,13 @@
   },
   {
     "name": "noPadding",
-    "type": "string",
+    "type": "boolean",
+    "required": false,
+    "description": ""
+  },
+  {
+    "name": "noPaddingAll",
+    "type": "boolean",
     "required": false,
     "description": ""
   },

package/nationalarchives/components/grid/template.njk

@@ -6,6 +6,9 @@
 {%- if params.noPadding -%}
     {%- set containerClasses = containerClasses.concat('tna-container--no-padding') -%}
 {%- endif -%}
+{%- if params.noPaddingAll -%}
+    {%- set containerClasses = containerClasses.concat('tna-container--no-padding-all') -%}
+{%- endif -%}
 <{{ htmlElement }} class="tna-container {{ containerClasses | join(' ') }}" {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
 {%- for item in params.columns -%}
     {%- set columnHtmlElement = item.htmlElement if item.htmlElement else 'div' -%}

package/nationalarchives/components/hero/_index.scss

@@ -0,0 +1,132 @@
+@use "../../tools/media";
+
+.tna-hero {
+  min-height: min(20vw, 300px);
+  padding-top: 5.25rem;
+  padding-bottom: 3.25rem;
+
+  display: -ms-flexbox;
+  display: flex;
+  align-items: end;
+
+  position: relative;
+
+  background-color: #000;
+
+  &__image {
+    width: 100%;
+    height: 100%;
+
+    position: absolute;
+    inset: 0;
+    z-index: 1;
+
+    object-fit: cover;
+  }
+
+  &__image-details {
+    position: absolute;
+    right: 1.25rem;
+    bottom: 1.25rem;
+    z-index: 3;
+  }
+
+  &__image-details-summary {
+    width: 2rem;
+    height: 2rem;
+
+    position: relative;
+    z-index: 2;
+
+    font-size: 0;
+    text-align: center;
+    line-height: 2rem;
+    list-style: none;
+
+    background-color: #fc0;
+
+    border-radius: 1rem;
+
+    cursor: pointer;
+  }
+
+  &__image-details-summary-icon {
+    font-size: 1.25rem;
+    font-style: normal;
+    font-weight: 700;
+    text-transform: lowercase;
+  }
+
+  &__image-information {
+    width: 20rem;
+    max-width: 45vw;
+    padding: 0.5rem 1rem;
+
+    position: absolute;
+    right: 0;
+    bottom: 2.5rem;
+    z-index: 1;
+
+    background-color: #fc0;
+  }
+
+  &__inner {
+    position: relative;
+    z-index: 2;
+  }
+
+  &__content {
+    padding-top: 1.5rem;
+    padding-bottom: 1.5rem;
+
+    background-color: #fff;
+  }
+
+  &__heading {
+    margin-bottom: 0;
+  }
+
+  &__body {
+  }
+
+  @include media.on-mobile {
+    padding: 0;
+
+    display: block;
+
+    &__image {
+      position: static;
+    }
+
+    &__image-details {
+      bottom: auto;
+      top: 1.25rem;
+    }
+
+    &__image-details-summary {
+    }
+
+    &__image-details-summary-icon {
+    }
+
+    &__image-information {
+      top: 2.5rem;
+      bottom: auto;
+    }
+
+    &__inner {
+    }
+
+    &__content {
+      color: #fff;
+
+      background-color: inherit;
+    }
+
+    &__heading {
+    }
+
+    &__body {
+    }
+  }
+}

package/nationalarchives/components/hero/fixtures.json

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

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

@@ -0,0 +1,74 @@
+import Hero from "./template.njk";
+import "./_index.scss";
+import macroOptions from "./macro-options.json";
+import { expect } from "@storybook/jest";
+import { within, userEvent } from "@storybook/testing-library";
+
+const argTypes = {
+  heading: { control: "text" },
+  body: { control: "text" },
+  text: { control: "text" },
+  image: { 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/Hero",
+  argTypes,
+};
+
+const Template = ({ heading, body, text, image, classes, attributes }) => {
+  return Hero({
+    params: {
+      heading,
+      body,
+      text,
+      image,
+      classes,
+      attributes,
+    },
+  });
+};
+
+export const Standard = Template.bind({});
+Standard.args = {
+  heading: "Title",
+  body: "<p>Body</p>",
+  image: {
+    src: "https://picsum.photos/id/29/640/360",
+    alt: "A placeholder image",
+    information: "Photo of some mountains by a famous photographer, ©2012",
+  },
+  classes: "tna-hero--demo",
+};
+
+Standard.play = async ({ args, canvasElement }) => {
+  const canvas = within(canvasElement);
+  const image = canvas.getByAltText(args.image.alt);
+  const title = canvas.getByText(args.heading);
+  const summary = canvasElement.querySelector(
+    ".tna-hero__image-details-summary"
+  );
+  const information = canvas.getByText(args.image.information);
+
+  await expect(image).toBeVisible();
+  await expect(title).toBeVisible();
+  await expect(summary).toBeVisible();
+  await expect(information).not.toBeVisible();
+
+  await userEvent.click(summary);
+  await expect(image).toBeVisible();
+  await expect(title).toBeVisible();
+  await expect(summary).toBeVisible();
+  await expect(information).toBeVisible();
+
+  await userEvent.click(summary);
+  await expect(information).not.toBeVisible();
+};

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

@@ -0,0 +1,58 @@
+[
+  {
+    "name": "heading",
+    "type": "string",
+    "required": false,
+    "description": ""
+  },
+  {
+    "name": "body",
+    "type": "string",
+    "required": false,
+    "description": ""
+  },
+  {
+    "name": "text",
+    "type": "string",
+    "required": false,
+    "description": ""
+  },
+  {
+    "name": "image",
+    "type": "object",
+    "required": false,
+    "description": "",
+    "params": [
+      {
+        "name": "src",
+        "type": "string",
+        "required": true,
+        "description": ""
+      },
+      {
+        "name": "alt",
+        "type": "string",
+        "required": true,
+        "description": ""
+      },
+      {
+        "name": "information",
+        "type": "string",
+        "required": false,
+        "description": ""
+      }
+    ]
+  },
+  {
+    "name": "classes",
+    "type": "string",
+    "required": false,
+    "description": "Classes to add to the card."
+  },
+  {
+    "name": "attributes",
+    "type": "object",
+    "required": false,
+    "description": "HTML attributes (for example data attributes) to add to the card."
+  }
+]

package/nationalarchives/components/hero/macro.njk

@@ -0,0 +1,3 @@
+{% macro tnaHero(params) %}
+  {%- include "./template.njk" -%}
+{% endmacro %}