@nationalarchives/frontend 0.1.3-prerelease → 0.1.6-prerelease

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 +1,2 @@
-@import "exports";
+@use "grid";
+@use "typography";

package/nationalarchives/tools/_grid.scss

@@ -0,0 +1,44 @@
+@use "sass:math";
+@use "../variables/grid";
+
+@mixin columns-generator($count, $suffix: "") {
+  @for $i from 1 through $count - 1 {
+    $simplestFractionFound: false;
+
+    @for $j from math.div($count, 2) through 1 {
+      @if (
+        $count % $j == 0 and $i % $j == 0 and $simplestFractionFound != true
+      ) {
+        .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} {
+        //   margin-right: math.div(100%, $count) * $i;
+        // }
+
+        // .column--margin-left-#{math.div($i, $j)}-#{math.div($count, $j)}#{$suffix} {
+        //   margin-left: math.div(100%, $count) * $i;
+        // }
+
+        $simplestFractionFound: true;
+      }
+    }
+
+    @if ($simplestFractionFound != true) {
+      .tna-column--width-#{$i}-#{$count}#{$suffix} {
+        width: math.div(100%, $count) * $i;
+        flex: none;
+      }
+
+      //   .column--margin-right-#{$i}-#{$count}#{$suffix} {
+      //     margin-right: math.div(100%, $count) * $i;
+      //   }
+
+      //   .column--margin-left-#{$i}-#{$count}#{$suffix} {
+      //     margin-left: math.div(100%, $count) * $i;
+      //   }
+    }
+  }
+}

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,3 +1,2 @@
-@import "global";
-@import "grid";
-@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;
+}

package/nationalarchives/utilities/_typography.scss

@@ -1,49 +1,164 @@
+@use "../variables/typography";
+@use "../tools/typography" as tools;
+
 // Temporary - will eventually bundle font files into package
 @import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&family=Roboto+Mono:wght@500;700&display=swap");
+@import url("https://use.typekit.net/hkj3kuz.css");
 
 .tna-template {
-  font-family: "Open Sans", sans-serif;
-  font-size: 16px;
+  font-family: typography.$fontFamilyMain;
+  font-weight: typography.$fontWeightMain;
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
   text-rendering: optimizeLegibility;
   -webkit-text-size-adjust: none;
   direction: ltr;
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  p,
+  ul,
+  ol {
+    margin: 0 0 2rem;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  a {
+    &,
+    &:link {
+      &:hover {
+        text-decoration-thickness: 3px;
+      }
+
+      &:active {
+        text-decoration-thickness: 4px;
+      }
+    }
+  }
+}
+
+// $block-text-elements: p, ul, ol;
+// $block-text-elements-selector: "";
+// @each $element in $block-text-elements {
+//   .tna-template #{$element},
+//   .tna-#{$element} {
+//     margin: 0 0 2rem;
+
+//     outline: 1px #f90 solid;
+
+//     &:first-child {
+//       margin-top: 0;
+//     }
+//   }
+// }
+.tna-template p,
+.tna-p,
+.tna-template ul,
+.tna-ul,
+.tna-template ol,
+.tna-ol {
+  // margin: 0 0 2rem;
+
+  // outline: 1px #f90 solid;
+
+  // &:first-child {
+  //   margin-top: 0;
+  // }
+}
+
+// $list-elements: ul, ol;
+// @each $element in $list-elements {
+//   .tna-template #{$element},
+//   .tna-#{$element} {
+//     padding-left: 2rem;
+
+//     &.tna-#{$element}--plain {
+//       padding-left: 0;
+
+//       list-style: none;
+//     }
+//   }
+// }
+.tna-template ul,
+.tna-ul,
+.tna-template ol,
+.tna-ol {
+  padding-left: 2rem;
+
+  li::marker {
+    color: #f0a;
+    font-weight: 700;
+  }
+}
+
+.tna-template .tna-ul--plain,
+.tna-template .tna-ol--plain {
+  padding-left: 0;
+
+  list-style: none;
 }
 
 .tna-template__body {
-  font-size: 1rem;
+  @include tools.relativeFontSize(16);
   line-height: 1.6;
 }
 
 .tna-heading {
+  margin-bottom: 2rem;
+
+  font-family: typography.$fontFamilyHeading;
+  font-weight: typography.$fontWeightHeading;
 }
 
 .tna-heading--xl {
-  font-size: 4rem;
+  @include tools.relativeFontSize(64);
 }
 
 .tna-heading--l {
-  font-size: 2rem;
+  @include tools.relativeFontSize(32);
 }
 
 .tna-heading--m {
-  font-size: 1.3rem;
+  @include tools.relativeFontSize(20);
 }
 
 .tna-heading--s {
-  font-size: 1.125rem;
+  @include tools.relativeFontSize(18);
 }
 
 .tna-hgroup {
 }
 
+.tna-hgroup__supertitle {
+  @include tools.relativeFontSize(14);
+  font-family: typography.$fontFamilyDetail;
+  font-weight: typography.$fontWeightDetail;
+  text-transform: uppercase;
+
+  .tna-hgroup & {
+    margin: 0;
+  }
+}
+
+.tna-hgroup__title {
+  .tna-hgroup__supertitle {
+    display: block;
+  }
+}
+
 .tna-hgroup--xl {
   .tna-hgroup__supertitle {
   }
 
   .tna-hgroup__title {
-    font-size: 4rem;
+    @include tools.relativeFontSize(64);
   }
 }
 
@@ -52,7 +167,7 @@
   }
 
   .tna-hgroup__title {
-    font-size: 2rem;
+    @include tools.relativeFontSize(32);
   }
 }
 
@@ -61,7 +176,7 @@
   }
 
   .tna-hgroup__title {
-    font-size: 1.3rem;
+    @include tools.relativeFontSize(20);
   }
 }
 
@@ -70,13 +185,6 @@
   }
 
   .tna-hgroup__title {
-    font-size: 1.125rem;
+    @include tools.relativeFontSize(18);
   }
 }
-
-.tna-hgroup__supertitle {
-  text-transform: uppercase;
-}
-
-.tna-hgroup__title {
-}

package/nationalarchives/variables/_all.scss

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

package/nationalarchives/variables/_grid.scss

@@ -1,9 +1,9 @@
-$largest-container-width: 75.25rem;
+$largest-container-width: 75.25rem !default;
 
-$gutter-width: 2rem;
-$gutter-width-mobile: 0.75rem;
+$gutter-width: 2rem !default;
+$gutter-width-mobile: 0.75rem !default;
 
-$column-count: 12;
-$column-count-medium: 6;
-$column-count-small: 4;
-$column-count-tiny: 2;
+$column-count: 12 !default;
+$column-count-medium: 6 !default;
+$column-count-small: 4 !default;
+$column-count-tiny: 2 !default;

package/nationalarchives/variables/_media.scss

@@ -1,12 +1,12 @@
-$largest-medium-device: 1024px;
-$largest-small-device: 768px;
-$largest-tiny-device: 480px;
+$largest-medium-device: 1024px !default;
+$largest-small-device: 768px !default;
+$largest-tiny-device: 480px !default;
 
-$media-large: "(min-width: #{$largest-medium-device + 1px})";
-$media-lt-large: "(max-width: #{$largest-medium-device})";
-$media-medium: "(min-width: #{$largest-small-device + 1px}) and (max-width: #{$largest-medium-device})";
-$media-gt-mobile: "(min-width: #{$largest-small-device + 1px})";
-$media-mobile: "(max-width: #{$largest-small-device})";
-$media-small: "(min-width: #{$largest-tiny-device + 1px}) and (max-width: #{$largest-small-device})";
-$media-gt-tiny: "(min-width: #{$largest-tiny-device + 1px})";
-$media-tiny: "(max-width: #{$largest-tiny-device})";
+$media-large: "(min-width: #{$largest-medium-device + 1px})" !default;
+$media-lt-large: "(max-width: #{$largest-medium-device})" !default;
+$media-medium: "(min-width: #{$largest-small-device + 1px}) and (max-width: #{$largest-medium-device})" !default;
+$media-gt-mobile: "(min-width: #{$largest-small-device + 1px})" !default;
+$media-mobile: "(max-width: #{$largest-small-device})" !default;
+$media-small: "(min-width: #{$largest-tiny-device + 1px}) and (max-width: #{$largest-small-device})" !default;
+$media-gt-tiny: "(min-width: #{$largest-tiny-device + 1px})" !default;
+$media-tiny: "(max-width: #{$largest-tiny-device})" !default;

package/nationalarchives/variables/_typography.scss

@@ -0,0 +1,10 @@
+$baseFontSizePx: 16;
+
+$fontFamilyMain: "Open Sans", sans-serif;
+$fontWeightMain: 400;
+
+$fontFamilyHeading: supria-sans-condensed, monospace;
+$fontWeightHeading: 600;
+
+$fontFamilyDetail: "Roboto Mono", monospace;
+$fontWeightDetail: 500;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nationalarchives/frontend",
-  "version": "0.1.3-prerelease",
+  "version": "0.1.6-prerelease",
   "description": "The National Archives frontend styles",
   "scripts": {
     "start": "storybook dev -p 6006",
@@ -8,7 +8,7 @@
     "lint": "prettier --check '{src,.storybook,tasks}/**/*.{js,mjs,scss,json}'",
     "test": "node tasks/test-fixtures.js",
     "prettier": "prettier --write '{src,.storybook,tasks}/**/*.{js,mjs,scss,json}'",
-    "package:sass": "sass --style=compressed --quiet-deps --load-path=node_modules src/nationalarchives/all.scss package/nationalarchives/all.css",
+    "package:sass": "sass --style=compressed --quiet-deps src/nationalarchives/all.scss package/nationalarchives/all.css",
     "package:scripts": "webpack"
   },
   "repository": {

package/nationalarchives/_base.scss

@@ -1,6 +0,0 @@
-$govuk-include-default-font-face: false;
-// $govuk-assets-path: "/govuk-frontend/govuk/assets/" !default;
-
-@import "tools/all";
-
-// @import "govuk-frontend/govuk/base.scss";

package/nationalarchives/_prototype-kit.scss

@@ -1,3 +0,0 @@
-$nationalarchives-assets-path: "/extension-assets/%40tna%2Ffrontend/nationalarchives/assets/";
-
-@import "all";

package/nationalarchives/components/button/_button.scss

@@ -1,2 +0,0 @@
-@import "../../base";
-@import "./index";

package/nationalarchives/components/card/_card.scss

@@ -1,2 +0,0 @@
-@import "../../base";
-@import "./index";

package/nationalarchives/components/footer/_footer.scss

@@ -1,2 +0,0 @@
-@import "../../base";
-@import "./index";

package/nationalarchives/components/grid/_grid.scss

@@ -1,2 +0,0 @@
-@import "../../base";
-@import "./index";

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

@@ -1,2 +0,0 @@
-@import "../../base";
-@import "./index";

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

@@ -1,23 +0,0 @@
-const argTypes = {
-  supertitle: { control: "text" },
-  title: { control: "text" },
-};
-
-export default {
-  title: "Global styles/Typography",
-  argTypes,
-};
-
-const Template = ({
-  supertitle,
-  title,
-}) => `<hgroup class="tna-hgroup tna-hgroup--heading-2">
-  <p class="tna-hgroup__supertitle">${supertitle}</p>
-  <h2 class="tna-hgroup__title">${title}</h2>
-</hgroup>`;
-
-export const HeadingGroup = Template.bind({});
-HeadingGroup.args = {
-  supertitle: "The story of",
-  title: "This is a title",
-};

package/nationalarchives/stories/global/typography.stories.js

@@ -1,15 +0,0 @@
-const argTypes = {
-  text: { control: "text" },
-};
-
-export default {
-  title: "Global styles/Typography",
-  argTypes,
-};
-
-const BodyFontTemplate = ({ text }) => `<p>${text}</p>`;
-
-export const BodyFont = BodyFontTemplate.bind({});
-BodyFont.args = {
-  text: "This is some body text",
-};