@nationalarchives/frontend 0.1.15-prerelease → 0.1.16-prerelease

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

@@ -22,8 +22,8 @@ export default {
   argTypes,
 };
 
-const Template = ({ phase, message, classes, attributes }) => {
-  return PhaseBanner({
+const Template = ({ phase, message, classes, attributes }) =>
+  PhaseBanner({
     params: {
       phase,
       message,
@@ -31,7 +31,6 @@ const Template = ({ phase, message, classes, attributes }) => {
       attributes,
     },
   });
-};
 
 export const Discovery = Template.bind({});
 Discovery.args = {

package/nationalarchives/components/picture/_index.scss

@@ -50,13 +50,11 @@
 
     text-align: center;
 
-    border-bottom: 1px solid;
-    @include colour.colour-border("keyline");
+    @include colour.colour-border("keyline", 1px, solid, bottom);
   }
 
   @include colour.on-high-contrast {
-    border-width: 1px 1px 0;
-    @include colour.colour-border("keyline-dark");
-    border-style: solid;
+    @include colour.colour-border("keyline-dark", 1px);
+    border-bottom-width: 0;
   }
 }

package/nationalarchives/components/picture/picture.stories.js

@@ -34,8 +34,8 @@ const Template = ({
   translation,
   classes,
   attributes,
-}) => {
-  return Picture({
+}) =>
+  Picture({
     params: {
       src,
       width,
@@ -48,7 +48,6 @@ const Template = ({
       attributes,
     },
   });
-};
 
 export const Standard = Template.bind({});
 Standard.args = {

package/nationalarchives/components/profile/profile.stories.js

@@ -17,14 +17,13 @@ export default {
   argTypes,
 };
 
-const Template = ({ classes, attributes }) => {
-  return Profile({
+const Template = ({ classes, attributes }) =>
+  Profile({
     params: {
       classes,
       attributes,
     },
   });
-};
 
 export const Standard = Template.bind({});
 Standard.args = {

package/nationalarchives/components/sensitive-image/sensitive-image.stories.js

@@ -19,12 +19,12 @@ Object.keys(argTypes).forEach((argType) => {
 });
 
 export default {
-  title: "Components/Experimental/Sensitive image",
+  title: "Components/Sensitive image",
   argTypes,
 };
 
-const Template = ({ image, warning, action, classes, attributes }) => {
-  return SensitiveImage({
+const Template = ({ image, warning, action, classes, attributes }) =>
+  SensitiveImage({
     params: {
       image,
       warning,
@@ -33,7 +33,6 @@ const Template = ({ image, warning, action, classes, attributes }) => {
       attributes,
     },
   });
-};
 
 export const Standard = Template.bind({});
 Standard.args = {

package/nationalarchives/components/skip-link/_index.scss

@@ -0,0 +1,63 @@
+@use "../../tools/colour";
+
+.tna-skip-link {
+  width: 1px !important;
+  height: 1px !important;
+  margin: 0 !important;
+  padding: 1rem !important;
+
+  display: block !important;
+
+  position: absolute !important;
+
+  overflow: hidden !important;
+
+  white-space: nowrap !important;
+
+  clip: rect(0 0 0 0) !important;
+  -webkit-clip-path: inset(50%) !important;
+  clip-path: inset(50%) !important;
+
+  &,
+  &:link,
+  &:visited {
+    @include colour.colour-font("button-primary-text", $important: true);
+  }
+
+  &:active,
+  &:focus {
+    width: auto !important;
+    height: auto !important;
+    margin: inherit !important;
+
+    position: static !important;
+
+    overflow: visible !important;
+
+    white-space: inherit !important;
+
+    clip: auto !important;
+    -webkit-clip-path: none !important;
+    clip-path: none !important;
+  }
+
+  &:focus {
+    @include colour.colour-background(
+      "button-primary-background",
+      $important: true
+    );
+
+    @include colour.colour-border("focus-outline", 0.3125rem, $important: true);
+
+    outline: none !important;
+  }
+
+  &:hover {
+    @include colour.colour-font("button-primary-hover-text", $important: true);
+
+    @include colour.colour-background(
+      "button-primary-hover-background",
+      $important: true
+    );
+  }
+}

package/nationalarchives/components/skip-link/fixtures.json

@@ -0,0 +1,11 @@
+{
+  "component": "skip link",
+  "fixtures": [
+    {
+      "name": "minimal",
+      "options": {},
+      "html": "<a href=\"#main-content\" class=\"tna-skip-link \">Skip to main content</a>",
+      "hidden": false
+    }
+  ]
+}

package/nationalarchives/components/skip-link/macro-options.json

@@ -0,0 +1,26 @@
+[
+  {
+    "name": "text",
+    "type": "string",
+    "required": false,
+    "description": ""
+  },
+  {
+    "name": "href",
+    "type": "string",
+    "required": false,
+    "description": ""
+  },
+  {
+    "name": "classes",
+    "type": "string",
+    "required": false,
+    "description": "Classes to add to the skip link."
+  },
+  {
+    "name": "attributes",
+    "type": "object",
+    "required": false,
+    "description": "HTML attributes (for example data attributes) to add to the skip link."
+  }
+]

package/nationalarchives/components/skip-link/macro.njk

@@ -0,0 +1,3 @@
+{% macro tnaSkipLink(params) %}
+  {%- include "nationalarchives/components/skip-link/template.njk" -%}
+{% endmacro %}

package/nationalarchives/components/skip-link/skip-link.stories.js

@@ -0,0 +1,31 @@
+import SkipLink from "./template.njk";
+import macroOptions from "./macro-options.json";
+
+const argTypes = {
+  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/Skip link",
+  argTypes,
+};
+
+const Template = ({ classes, attributes }) =>
+  `${SkipLink({
+    params: {
+      classes,
+      attributes,
+    },
+  })}<p>To view the skip link component tab to this example, or click inside this example and press tab.</p>`;
+
+export const Standard = Template.bind({});
+Standard.args = {
+  classes: "tna-skip-link--demo",
+};

package/nationalarchives/components/skip-link/template.njk

@@ -0,0 +1,4 @@
+{%- set containerClasses = [params.classes] if params.classes else [] -%}
+<a href="#{{ params.href if params.href else 'main-content' }}" class="tna-skip-link {{ containerClasses | join(' ') }}" {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
+  {{ params.text if params.text else 'Skip to main content' }}
+</a>

package/nationalarchives/components/tabs/_index.scss

@@ -135,8 +135,7 @@
 
       overflow: hidden;
 
-      border: 1px transparent solid;
-      @include colour.colour-border("keyline-dark");
+      @include colour.colour-border("keyline-dark", 1px);
     }
   }
 }

package/nationalarchives/components/tabs/tabs.stories.js

@@ -22,8 +22,8 @@ export default {
   argTypes,
 };
 
-const Template = ({ title, items, sticky, classes, attributes }) => {
-  return Tabs({
+const Template = ({ title, items, sticky, classes, attributes }) =>
+  Tabs({
     params: {
       title,
       items,
@@ -32,7 +32,6 @@ const Template = ({ title, items, sticky, classes, attributes }) => {
       attributes,
     },
   });
-};
 
 export const Standard = Template.bind({});
 Standard.args = {

package/nationalarchives/patterns/featured-collection/_index.scss

@@ -1,10 +1,10 @@
-@use "../../variables/colour" as colourVars; // TODO
+@use "../../tools/colour";
 
 .tna-featured-collection {
   padding-top: 2rem;
   padding-bottom: 2rem;
 
-  background-color: colourVars.$tna-cream;
+  background-color: colour.brand-colour("cream");
 
   .tna-card {
     margin-top: 1rem;

package/nationalarchives/patterns/featured-collection/featured-collection.stories.js

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

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

@@ -1,3 +1,4 @@
+import SkipLink from "../../../components/skip-link/template.njk";
 import Header from "../../../components/header/template.njk";
 import Breadcrumbs from "../../../components/breadcrumbs/template.njk";
 import Card from "../../../components/card/template.njk";
@@ -41,8 +42,17 @@ const Template = ({ theme }) => {
       : ""
   }">
   <div class="tna-template__body tna-template__body--padded">
+    ${SkipLink({
+      params: {
+        href: "main-content",
+      },
+    })}
     ${Header({
       params: {
+        logo: {
+          strapline: "Colours",
+          href: "#/",
+        },
         navigation: [
           {
             text: "Alpha",
@@ -87,7 +97,7 @@ const Template = ({ theme }) => {
         ],
       },
     })}
-    <article>
+    <main id="main-content" role="main">
       ${Hero({
         params: {
           heading: "Title",
@@ -185,6 +195,13 @@ const Template = ({ theme }) => {
               },
               label: "New",
               body: "<p>Card body</p>",
+              actions: [
+                {
+                  text: "Card action",
+                  href: "#",
+                  title: "Go and do the action",
+                },
+              ],
               featured: true,
               classes: "tna-card--demo",
             },
@@ -267,7 +284,7 @@ const Template = ({ theme }) => {
           columnsTiny: 1,
         },
       })}
-    <article>
+    </main>
     ${Footer({})}
   </div>
 </div>`;

package/nationalarchives/stories/utilities/overrides/overrides.stories.js

@@ -1,14 +1,7 @@
 const argTypes = {
   marginTop: {
     control: "radio",
-    options: [
-      "none",
-      // "xs",
-      "s",
-      "m",
-      "l",
-      "xl",
-    ],
+    options: ["none", "xs", "s", "m", "l", "xl"],
   },
 };
 
@@ -22,12 +15,13 @@ const Template = ({ marginTop }) => {
     marginTop === "none"
       ? `tna-!--no-margin-top`
       : `tna-!--margin-top-${marginTop}`;
-  return `<p class="tna-!--no-margin-bottom">Lorem ipsum</p>
-    <p class="tna-!--no-margin-bottom tna-!--margin-top-s">Lorem ipsum (tna-!--margin-top-s)</p>
-    <p class="tna-!--no-margin-bottom tna-!--margin-top-m">Lorem ipsum (tna-!--margin-top-m)</p>
-    <p class="tna-!--no-margin-bottom tna-!--margin-top-l">Lorem ipsum (tna-!--margin-top-l)</p>
-    <p class="tna-!--no-margin-bottom tna-!--margin-top-xl">Lorem ipsum (tna-!--margin-top-xl)</p>
-    <p class="tna-!--no-margin-bottom ${marginClass}">Lorem ipsum (${marginClass})</p>`;
+  return `<p class="tna-!--margin-bottom-xl">Lorem ipsum (tna-!--margin-bottom-xl)</p>
+    <p class="tna-!--margin-bottom-l">Lorem ipsum (tna-!--margin-bottom-l)</p>
+    <p class="tna-!--margin-bottom-m">Lorem ipsum (tna-!--margin-bottom-m)</p>
+    <p class="tna-!--margin-bottom-s">Lorem ipsum (tna-!--margin-bottom-s)</p>
+    <p class="tna-!--margin-bottom-xs">Lorem ipsum (tna-!--margin-bottom-xs)</p>
+    <p class="tna-!--no-margin-bottom">Lorem ipsum (tna-!--no-margin-bottom)</p>
+    <p class="${marginClass}">Lorem ipsum (${marginClass})</p>`;
 };
 
 export const Margin = Template.bind({});

package/nationalarchives/templates/layouts/_generic.njk

@@ -1,5 +1,5 @@
 {# Based on https://github.com/alphagov/govuk-frontend/blob/8b6bf304b9fc891f64459c25a08f3d623f3fea72/packages/govuk-frontend/src/govuk/template.njk #}
-{#% from "./components/skip-link/macro.njk" import tnaSkipLink -%#}
+{% from "./components/skip-link/macro.njk" import tnaSkipLink -%}
 <!DOCTYPE html>
 <html lang="{{ htmlLang | default('en-GB') }}" class="tna-template {{ htmlClasses }}">
   <head>
@@ -23,15 +23,17 @@
     {% block stylesheets %}{% endblock %}
   </head>
     <body class="tna-template__body {{ bodyClasses }}" {%- for attribute, value in bodyAttributes %} {{attribute}}="{{value}}"{% endfor %}>
-    {% block skipLink %}
-    {#{ govukSkipLink({
-      href: '#main-content',
-      text: 'Skip to main content'
-    }) }#}
+    {% block bodyStart %}
+      {% block cookies %}{% endblock %}
+      
+      {% block skipLink %}
+      {{ tnaSkipLink({
+        href: '#main-content',
+        text: 'Skip to main content'
+      }) }}
+      {% endblock %}
     {% endblock %}
 
-    {% block bodyStart %}{% endblock %}
-
     {% block header %}{% endblock %}
 
     {% block main %}

package/nationalarchives/tools/_colour.scss

@@ -1,6 +1,11 @@
 @use "sass:map";
 @use "../features";
 @use "../variables/colour";
+@use "../tools/media";
+
+@function brand-colour($colour) {
+  @return map.get(colour.$colour-palette-brand, $colour);
+}
 
 @mixin colour-css-vars() {
   @each $name, $value in colour.$colour-palette-default {
@@ -26,46 +31,87 @@
   }
 }
 
-@mixin colour-font($colour) {
+@mixin colour-font($colour, $important: false) {
   color: map.get(colour.$colour-palette-default, $colour);
   @if $colour == "accent" {
-    color: var(--#{$colour}, var(--accent-default));
+    color: var(--#{$colour}, var(--accent-default))
+      if($important, !important, null);
   } @else {
-    color: var(--#{$colour});
+    color: var(--#{$colour}) if($important, !important, null);
   }
 }
 
-@mixin colour-background($colour) {
+@mixin colour-background($colour, $important: false) {
   background-color: map.get(colour.$colour-palette-default, $colour);
   @if $colour == "accent" {
-    background-color: var(--#{$colour}, var(--accent-default));
+    background-color: var(--#{$colour}, var(--accent-default))
+      if($important, !important, null);
   } @else {
-    background-color: var(--#{$colour});
+    background-color: var(--#{$colour}) if($important, !important, null);
   }
 }
 
-@mixin colour-border($colour) {
-  border-color: map.get(colour.$colour-palette-default, $colour);
-  border-color: var(--#{$colour});
+@mixin colour-border(
+  $colour,
+  $width: "",
+  $style: solid,
+  $direction: "",
+  $important: false
+) {
+  @if $direction != "" {
+    @if $width != "" {
+      $property: border-#{$direction};
+      border-#{$direction}: $width
+        map.get(colour.$colour-palette-default, $colour)
+        $style
+        if($important, !important, null);
+      border-#{$direction}: $width
+        var(--#{$colour})
+        $style
+        if($important, !important, null);
+    } @else {
+      border-#{$direction}-color: map.get(
+          colour.$colour-palette-default,
+          $colour
+        )
+        if($important, !important, null);
+      border-#{$direction}-color: var(--#{$colour})
+        if($important, !important, null);
+    }
+  } @else {
+    @if $width != "" {
+      border: $width
+        map.get(colour.$colour-palette-default, $colour)
+        $style
+        if($important, !important, null);
+      border: $width var(--#{$colour}) $style if($important, !important, null);
+    } @else {
+      border-color: map.get(colour.$colour-palette-default, $colour)
+        if($important, !important, null);
+      border-color: var(--#{$colour}) if($important, !important, null);
+    }
+  }
 }
 
-@mixin colour-outline($colour) {
-  outline-color: map.get(colour.$colour-palette-default, $colour);
-  outline-color: var(--#{$colour});
+@mixin colour-outline($colour, $important: false) {
+  outline-color: map.get(colour.$colour-palette-default, $colour)
+    if($important, !important, null);
+  outline-color: var(--#{$colour}) if($important, !important, null);
 }
 
-@mixin colour-fill($colour) {
-  fill: map.get(colour.$colour-palette-default, $colour);
-  fill: var(--#{$colour});
+@mixin colour-fill($colour, $important: false) {
+  fill: map.get(colour.$colour-palette-default, $colour)
+    if($important, !important, null);
+  fill: var(--#{$colour}) if($important, !important, null);
 }
 
 @mixin fixed {
   @include colour-css-vars;
 
-  @include colour-font("font-base");
+  // @include colour-font("font-base");
 }
 
-@mixin invert {
+%invert {
   --font-base: var(--contrast-font-base);
   --font-dark: var(--contrast-font-dark);
   --font-light: var(--contrast-font-light);
@@ -74,10 +120,33 @@
   --keyline: var(--contrast-keyline);
   --keyline-dark: var(--contrast-keyline-dark);
 
-  @include colour-font("contrast-font-base");
+  // @include colour-font("contrast-font-base");
   @include colour-background("contrast-background");
 }
 
+@mixin invert {
+  @extend %invert;
+}
+
+%invert-on-mobile {
+  @include media.on-mobile {
+    --font-base: var(--contrast-font-base);
+    --font-dark: var(--contrast-font-dark);
+    --font-light: var(--contrast-font-light);
+    --link: var(--contrast-link);
+    --link-visited: var(--contrast-link-visited);
+    --keyline: var(--contrast-keyline);
+    --keyline-dark: var(--contrast-keyline-dark);
+
+    // @include colour-font("contrast-font-base");
+    @include colour-background("contrast-background");
+  }
+}
+
+@mixin invert-on-mobile {
+  @extend %invert-on-mobile;
+}
+
 @mixin uninvert {
   @include colour-css-vars;
 

package/nationalarchives/tools/_index.scss

@@ -1,4 +1,3 @@
-@forward "assets";
 @forward "colour";
 @forward "grid";
 @forward "media";

package/nationalarchives/utilities/_debug.scss

@@ -1,11 +1,51 @@
 @use "../features";
 
+/*
+ * ==========================================
+ * WCAG 2.2 SC 2.5.8
+ * https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum
+ * ------------------------------------------
+ * AA - Small green circles should not intersect
+ * ------------------------------------------
+ */
 @if features.$debug-interactable-areas {
   a,
   button,
   label[for] {
     background-color: rgba(#f0a, 0.25) !important;
 
-    box-shadow: 0 0 0 1px #f0a !important;
+    box-shadow:
+      0 0 0 2px #f0a,
+      0 0 0.5rem #f0a !important;
+
+    position: relative;
+
+    &::before {
+      width: 20px;
+      height: 20px;
+
+      display: block;
+
+      position: absolute;
+      top: 50%;
+      left: 50%;
+
+      background-color: rgba(#0f3, 0.25) !important;
+
+      border-radius: 100%;
+      outline: 2px #0f3 solid;
+      outline-offset: 10px;
+
+      box-shadow:
+        0 0 0 2px #0f3,
+        0 0 0.5rem #0f3 !important;
+
+      transform: translateX(-50%) translateY(-50%);
+
+      content: "";
+    }
+
+    .tna-template--dark-theme & {
+    }
   }
 }

package/nationalarchives/utilities/_global.scss

@@ -163,4 +163,9 @@ hr {
   border: 0 !important;
 
   background-color: transparent !important;
+
+  &::before,
+  &::after {
+    content: "\00a0";
+  }
 }