@nationalarchives/frontend 0.1.5-prerelease → 0.1.6-prerelease

package/nationalarchives/components/sensitive-image/_index.scss

@@ -1,84 +1,81 @@
-@include nationalarchives-exports(
-  "nationalarchives/components/sensitive-image"
-) {
-  .tna-sensitive-image {
-  }
+@use "../../tools/typography" as typographyTools;
 
-  .tna-sensitive-image__warning {
-  }
+.tna-sensitive-image {
+}
 
-  .tna-sensitive-image__details {
-    position: relative;
+.tna-sensitive-image__warning {
+}
 
-    // overflow: hidden;
+.tna-sensitive-image__details {
+  position: relative;
 
-    &::after {
-      width: 100%;
-      padding-bottom: calc(
-        100% * var(--sensitive-image-height) / var(--sensitive-image-width)
-      );
+  // overflow: hidden;
 
-      display: block;
+  &::after {
+    width: 100%;
+    padding-bottom: calc(
+      100% * var(--sensitive-image-height) / var(--sensitive-image-width)
+    );
 
-      position: relative;
-      z-index: -1;
+    display: block;
 
-      background-image: var(--sensitive-image);
-      background-clip: padding-box;
-      background-size: contain;
+    position: relative;
+    z-index: -1;
 
-      filter: blur(20px) saturate(0);
+    background-image: var(--sensitive-image);
+    background-clip: padding-box;
+    background-size: contain;
 
-      content: "";
-    }
+    filter: blur(20px) saturate(0);
+
+    content: "";
   }
+}
 
-  .tna-sensitive-image__show {
-    display: flex;
-    align-items: center;
-    justify-content: center;
+.tna-sensitive-image__show {
+  display: flex;
+  align-items: center;
+  justify-content: center;
 
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    z-index: 1;
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 1;
 
-    font-size: 0;
+  font-size: 0;
 
-    cursor: pointer;
+  cursor: pointer;
 
-    &::after {
-      padding: 0.5rem 2rem;
+  &::after {
+    padding: 0.5rem 2rem;
 
-      font-size: 1rem;
+    @include typographyTools.relativeFontSize(16);
+    background-color: #ff0;
 
-      background-color: #ff0;
-
-      content: attr(data-action);
-    }
+    content: attr(data-action);
+  }
 
-    &:hover {
-      &::after {
-        color: #fff;
+  &:hover {
+    &::after {
+      color: #fff;
 
-        background-color: #000;
-      }
+      background-color: #000;
     }
   }
+}
 
-  .tna-sensitive-image__container {
-  }
+.tna-sensitive-image__container {
+}
 
-  .tna-sensitive-image__image {
-    width: 100%;
-  }
+.tna-sensitive-image__image {
+  width: 100%;
+}
 
-  .tna-sensitive-image__details[open] {
-    &::after,
-    .tna-sensitive-image__show {
-      display: none;
-    }
+.tna-sensitive-image__details[open] {
+  &::after,
+  .tna-sensitive-image__show {
+    display: none;
   }
 }

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

@@ -1,6 +1,5 @@
 import SensitiveImage from "./template.njk";
-import "../../all.scss";
-import "./_sensitive-image.scss";
+import "./_index.scss";
 import macroOptions from "./macro-options.json";
 
 const argTypes = {

package/nationalarchives/stories/design/about.mdx

@@ -0,0 +1,25 @@
+import { Meta } from "@storybook/blocks";
+
+<Meta title="Design/Prototyping" />
+
+# Prototyping with the styles
+
+The National Archives frontend styles include support for the [GOV.UK Prototype Kit](https://prototype-kit.service.gov.uk/).
+
+You can use the components and styles within the prototype kit to make rich HTML prototypes.
+
+## Create a new prototype
+
+1. Create an empty directory `mkdir my-new-prototype`
+1. Use `npx govuk-prototype-kit create` to create a new prototype project
+1. Install the frontend styles with `npm install @nationalarchives/frontend`
+1. Run `npm run dev` to start up the prototype kit
+1. Use the National Archives components!
+
+```Nunjucks
+{% from "nationalarchives/components/button/macro.njk" import tnaButton %}
+{{ tnaButton({
+  text: "I am a button",
+  url: "#"
+}) }}
+```

package/nationalarchives/stories/utilities/heading-groups.stories.js

@@ -0,0 +1,44 @@
+const argTypes = {
+  supertitle: { control: "text" },
+  title: { control: "text" },
+  level: { control: "number", min: 1, max: 6, step: 1 },
+  size: { control: "radio", options: ["m", "l", "xl"] },
+  singleSentence: { control: "boolean" },
+};
+
+export default {
+  title: "Utilities/Typography",
+  argTypes,
+};
+
+const Template = ({
+  supertitle,
+  title,
+  level = 3,
+  size = "l",
+  singleSentence,
+}) =>
+  singleSentence
+    ? `<hgroup class="tna-hgroup tna-hgroup--${size}">
+  <h${level} class="tna-hgroup__title">
+    <span class="tna-hgroup__supertitle">${supertitle}</span>
+    ${title}
+  </h${level}>
+</hgroup>`
+    : `<hgroup class="tna-hgroup tna-hgroup--${size}">
+  <p class="tna-hgroup__supertitle">${supertitle}</p>
+  <h${level} class="tna-hgroup__title">${title}</h${level}>
+</hgroup>`;
+
+export const HeadingGroup = Template.bind({});
+HeadingGroup.args = {
+  supertitle: "The story of",
+  title: "Alice Hawkins",
+  singleSentence: true,
+};
+
+export const HeadingGroupSeparated = Template.bind({});
+HeadingGroupSeparated.args = {
+  supertitle: "Record revealed",
+  title: "The Monteagle Letter",
+};

package/nationalarchives/stories/{global → utilities}/headings.stories.js

@@ -4,7 +4,7 @@ const argTypes = {
 };
 
 export default {
-  title: "Global styles/Typography",
+  title: "Utilities/Typography",
   argTypes,
 };
 

package/nationalarchives/stories/utilities/lists.stories.js

@@ -0,0 +1,38 @@
+const argTypes = {
+  items: { control: "object" },
+};
+
+export default {
+  title: "Utilities/Typography",
+  argTypes,
+};
+
+const UnorderedListTemplate = ({ items, plain }) =>
+  `<ul class="tna-ul${plain ? " tna-ul--plain" : ""}">${items.reduce(
+    (list, item) => `${list}<li>${item}</li>`,
+    ""
+  )}</ul>`;
+export const UnorderedList = UnorderedListTemplate.bind({});
+UnorderedList.args = {
+  items: ["Alpha", "Beta", "Gamma"],
+};
+export const UnorderedListPlain = UnorderedListTemplate.bind({});
+UnorderedListPlain.args = {
+  items: ["Alpha", "Beta", "Gamma"],
+  plain: true,
+};
+
+const OrderedListTemplate = ({ items, plain }) =>
+  `<ol class="tna-ol${plain ? " tna-ol--plain" : ""}">${items.reduce(
+    (list, item) => `${list}<li>${item}</li>`,
+    ""
+  )}</ol>`;
+export const OrderedList = OrderedListTemplate.bind({});
+OrderedList.args = {
+  items: ["Alpha", "Beta", "Gamma"],
+};
+export const OrderedListPlain = OrderedListTemplate.bind({});
+OrderedListPlain.args = {
+  items: ["Alpha", "Beta", "Gamma"],
+  plain: true,
+};

package/nationalarchives/stories/{global → utilities}/typography.mdx

@@ -1,7 +1,8 @@
-import { Meta, Primary, Controls, Story, Canvas, Typeset } from "@storybook/blocks";
+import { Meta, Canvas } from "@storybook/blocks";
 import * as HeadingStories from './headings.stories';
 import * as HeadingGroupStories from './heading-groups.stories';
 import * as TypographyStories from './typography.stories';
+import * as ListStories from './lists.stories';
 
 <Meta of={TypographyStories} />
 
@@ -9,14 +10,13 @@ import * as TypographyStories from './typography.stories';
 
 We use a set of typefaces...
 
-<Story of={HeadingStories.Heading1} />
-<Story of={HeadingStories.Heading2} />
-<Story of={HeadingStories.Heading3} />
-<Story of={HeadingGroupStories.HeadingGroup} />
-<Story of={TypographyStories.BodyFont} />
-
 <Canvas of={HeadingStories.Heading1} />
 <Canvas of={HeadingStories.Heading2} />
 <Canvas of={HeadingStories.Heading3} />
 <Canvas of={HeadingGroupStories.HeadingGroup} />
-<Canvas of={TypographyStories.BodyFont} />
+<Canvas of={HeadingGroupStories.HeadingGroupSeparated} />
+<Canvas of={TypographyStories.Paragraph} />
+<Canvas of={ListStories.UnorderedList} />
+<Canvas of={ListStories.UnorderedListPlain} />
+<Canvas of={ListStories.OrderedList} />
+<Canvas of={ListStories.OrderedListPlain} />

package/nationalarchives/stories/utilities/typography.stories.js

@@ -0,0 +1,14 @@
+const argTypes = {
+  text: { control: "text" },
+};
+
+export default {
+  title: "Utilities/Typography",
+  argTypes,
+};
+
+const ParagraphTemplate = ({ text }) => `<p class="tna-p">${text}</p>`;
+export const Paragraph = ParagraphTemplate.bind({});
+Paragraph.args = {
+  text: "This is some body text",
+};

package/nationalarchives/templates/homepage.njk

@@ -0,0 +1,64 @@
+{% from "nationalarchives/components/card/macro.njk" import tnaCard %}
+
+{% extends "layouts/_generic.njk" %}
+
+{% block pageTitle %}The National Archives | Welcome{% endblock %}
+
+{% block content %}
+<div class="tna-container">
+  <div class="tna-column tna-column--full">
+    <h1 class="tna-heading tna-heading--xl">
+      Welcome
+    </h1>
+  </div>
+  <div class="tna-column tna-column--full">
+    {{ tnaCard({
+      "heading": {
+        "supertitle": "Card supertitle",
+        "title": "Card title",
+        "level": 2,
+        "size": "m"
+      },
+      "href": "#",
+      "image": {
+        "src": "https://loremflickr.com/640/360",
+        "alt": "A placeholder image"
+      },
+      "body": "<p>Card body</p>",
+      "actions": [
+        {
+          "text": "Card action",
+          "href": "#",
+          "title": "Go and do the action"
+        }
+      ],
+      "featured": true,
+      "htmlElement": "article"
+    }) }}
+  </div>
+  {% for item in range(0, 12) -%}
+  <div class="tna-column tna-column--width-1-3 tna-column--width-1-2-medium tna-column--full-small tna-column--full-tiny">
+    {{ tnaCard({
+      "heading": {
+        "supertitle": "Card supertitle",
+        "title": "Card title",
+        "level": 3
+      },
+      "href": "#",
+      "image": {
+        "src": "https://loremflickr.com/640/360",
+        "alt": "A placeholder image"
+      },
+      "body": "<p>Card body</p>",
+      "actions": [
+        {
+          "text": "Card action",
+          "href": "#",
+          "title": "Go and do the action"
+        }
+      ]
+    }) }}
+  </div>
+  {%- endfor %}
+</div>
+{% endblock %}

package/nationalarchives/templates/layouts/_generic.njk

@@ -0,0 +1,60 @@
+{# 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 -%#}
+<!DOCTYPE html>
+<html lang="{{ htmlLang | default('en') }}" class="tna-template {{ htmlClasses }}">
+  <head>
+    <meta charset="utf-8">
+    <title{% if pageTitleLang %} lang="{{ pageTitleLang }}"{% endif %}>{% block pageTitle %}The National Archives{% endblock %}</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
+    <meta name="theme-color" content="{{ themeColor | default('#000000') }}">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+
+    {% block headIcons %}
+      <link rel="shortcut icon" sizes="16x16 32x32 48x48" href="{{ assetPath | default('/assets') }}/images/favicon.ico" type="image/x-icon">
+      <link rel="mask-icon" href="{{ assetPath | default('/assets') }}/images/govuk-mask-icon.svg" color="{{ themeColor | default('#0b0c0c') }}"> {# Hardcoded value of $govuk-black #}
+      <link rel="apple-touch-icon" sizes="180x180" href="{{ assetPath | default('/assets') }}/images/govuk-apple-touch-icon-180x180.png">
+      <link rel="apple-touch-icon" sizes="167x167" href="{{ assetPath | default('/assets') }}/images/govuk-apple-touch-icon-167x167.png">
+      <link rel="apple-touch-icon" sizes="152x152" href="{{ assetPath | default('/assets') }}/images/govuk-apple-touch-icon-152x152.png">
+      <link rel="apple-touch-icon" href="{{ assetPath | default('/assets') }}/images/govuk-apple-touch-icon.png">
+    {% endblock %}
+
+    {% block head %}{% endblock %}
+
+    {% block stylesheets %}
+        {% include "govuk-prototype-kit/includes/stylesheets-plugins.njk" %}
+    {% endblock %}
+
+    {# OpenGraph images needs to be absolute, so we need either a URL for the image or for assetUrl to be set #}
+    {% if opengraphImageUrl or assetUrl %}
+    <meta property="og:image" content="{{ opengraphImageUrl | default(assetUrl + '/images/govuk-opengraph-image.png') }}">
+    {% endif %}
+  </head>
+  <body class="tna-template__body {{ bodyClasses }}" {%- for attribute, value in bodyAttributes %} {{attribute}}="{{value}}"{% endfor %}>
+    
+    {% block bodyStart %}{% endblock %}
+
+    {% block skipLink %}
+      {#{ govukSkipLink({
+        href: '#main-content',
+        text: 'Skip to main content'
+      }) }#}
+    {% endblock %}
+
+    {% block header %}
+      <h1>HEADER</h1>
+    {% endblock %}
+
+    {% block main %}
+        {% block beforeContent %}{% endblock %}
+        <main class="tna-main-wrapper {{ mainClasses }}" id="main-content" role="main"{% if mainLang %} lang="{{ mainLang }}"{% endif %}>
+          {% block content %}{% endblock %}
+        </main>
+    {% endblock %}
+
+    {% block footer %}
+      <h1>FOOTER</h1>
+    {% endblock %}
+
+    {% block bodyEnd %}{% endblock %}
+  </body>
+</html>

package/nationalarchives/tools/_all.scss

@@ -1,2 +1,2 @@
-@import "exports";
-@import "grid";
+@use "grid";
+@use "typography";

package/nationalarchives/tools/_grid.scss

@@ -1,4 +1,5 @@
-@import "../variables/all";
+@use "sass:math";
+@use "../variables/grid";
 
 @mixin columns-generator($count, $suffix: "") {
   @for $i from 1 through $count - 1 {
@@ -10,6 +11,7 @@
       ) {
         .tna-column--width-#{math.div($i, $j)}-#{math.div($count, $j)}#{$suffix} {
           width: math.div(100%, $count) * $i;
+          flex: none;
         }
 
         // .column--margin-right-#{math.div($i, $j)}-#{math.div($count, $j)}#{$suffix} {
@@ -27,6 +29,7 @@
     @if ($simplestFractionFound != true) {
       .tna-column--width-#{$i}-#{$count}#{$suffix} {
         width: math.div(100%, $count) * $i;
+        flex: none;
       }
 
       //   .column--margin-right-#{$i}-#{$count}#{$suffix} {
@@ -39,93 +42,3 @@
     }
   }
 }
-
-@mixin grid-medium {
-  .tna-column--width-full-medium {
-    width: 100%;
-  }
-
-  @for $i from 1 through 3 {
-    .tna-column--flex-#{$i}-medium {
-      flex: $i 0;
-    }
-  }
-
-  // @for $i from 1 through 3 {
-  //   .column--order-#{$i}-medium {
-  //     order: $i;
-  //   }
-  // }
-
-  @include columns-generator($column-count-medium, "-medium");
-}
-
-@mixin grid-mobile {
-  .tna-container {
-    padding-right: math.div($gutter-width-mobile, 2) + 0.75rem;
-    padding-left: math.div($gutter-width-mobile, 2) + 0.75rem;
-  }
-
-  .tna-column {
-    padding-right: math.div($gutter-width-mobile, 2);
-    padding-left: math.div($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;
-  //     }
-  //   }
-}
-
-@mixin grid-small {
-  .tna-column--width-full-small {
-    width: 100%;
-  }
-
-  @for $i from 1 through 3 {
-    .tna-column--flex-#{$i}-small {
-      flex: $i 0;
-    }
-  }
-
-  // @for $i from 1 through 3 {
-  //   .column--order-#{$i}-small {
-  //     order: $i;
-  //   }
-  // }
-
-  @include columns-generator($column-count-small, "-small");
-}
-
-@mixin grid-tiny {
-  .tna-column--width-full-tiny {
-    width: 100%;
-  }
-
-  @for $i from 1 through 3 {
-    .tna-column--flex-#{$i}-tiny {
-      width: auto;
-
-      flex: $i 0;
-    }
-  }
-
-  // @for $i from 1 through 3 {
-  //   .column--order-#{$i}-tiny {
-  //     order: $i;
-  //   }
-  // }
-
-  @include columns-generator($column-count-tiny, "-tiny");
-}

package/nationalarchives/tools/_typography.scss

@@ -0,0 +1,6 @@
+@use "sass:math";
+@use "../variables/typography";
+
+@mixin relativeFontSize($fontSizePx) {
+  font-size: #{math.div($fontSizePx, typography.$baseFontSizePx)}rem;
+}

package/nationalarchives/utilities/_all.scss

@@ -1,2 +1,2 @@
-@import "global";
-@import "typography";
+@use "global";
+@use "typography";

package/nationalarchives/utilities/_global.scss

@@ -1,3 +1,5 @@
+@use "../variables/typography";
+
 .tna-template {
   min-width: 320px;
   width: 100%;
@@ -7,6 +9,8 @@
   overflow-y: auto;
   -webkit-overflow-scrolling: touch;
 
+  font-size: typography.$baseFontSizePx;
+
   @media (prefers-reduced-motion) {
     * {
       animation: none !important;
@@ -37,3 +41,7 @@ video,
 canvas {
   width: 100%;
 }
+
+*:focus {
+  outline: 3px #f0a solid;
+}