@nationalarchives/frontend 0.1.5-prerelease → 0.1.7-prerelease

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.$base-font-size-px;
+
   @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,82 +1,153 @@
+@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 "https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&family=Roboto+Mono:wght@500;700&display=swap";
+@import "https://use.typekit.net/hkj3kuz.css";
 
 .tna-template {
-  font-family: "Open Sans", sans-serif;
-  font-size: 16px;
+  font-family: typography.$font-family-main;
+  font-weight: typography.$font-weight-main;
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
   text-rendering: optimizeLegibility;
   -webkit-text-size-adjust: none;
   direction: ltr;
-}
 
-.tna-template__body {
-  font-size: 1rem;
-  line-height: 1.6;
-}
+  p {
+    margin: 0 0 2rem;
 
-.tna-heading {
-}
-
-.tna-heading--xl {
-  font-size: 4rem;
-}
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
 
-.tna-heading--l {
-  font-size: 2rem;
-}
+  a {
+    &:active {
+      text-decoration-thickness: 4px;
+    }
 
-.tna-heading--m {
-  font-size: 1.3rem;
-}
+    &:hover {
+      text-decoration-thickness: 3px;
+    }
+  }
 
-.tna-heading--s {
-  font-size: 1.125rem;
-}
+  .tna-template__body {
+    @include tools.relative-font-size(16);
+    line-height: 1.6;
+  }
 
-.tna-hgroup {
-}
+  .tna-ul,
+  .tna-ol {
+    padding-left: 2rem;
 
-.tna-hgroup--xl {
-  .tna-hgroup__supertitle {
+    li::marker {
+      color: #f0a;
+      font-weight: 700;
+    }
   }
 
-  .tna-hgroup__title {
-    font-size: 4rem;
-  }
-}
+  .tna-ul--plain,
+  .tna-ol--plain {
+    padding-left: 0;
 
-.tna-hgroup--l {
-  .tna-hgroup__supertitle {
+    list-style: none;
   }
 
-  .tna-hgroup__title {
-    font-size: 2rem;
-  }
-}
+  .tna-heading {
+    margin-top: 0;
+    margin-bottom: 1.5rem;
 
-.tna-hgroup--m {
-  .tna-hgroup__supertitle {
-  }
+    font-family: typography.$font-family-heading;
+    font-weight: typography.$font-weight-heading;
 
-  .tna-hgroup__title {
-    font-size: 1.3rem;
-  }
-}
+    &:last-child {
+      margin-bottom: 0;
+    }
 
-.tna-hgroup--s {
-  .tna-hgroup__supertitle {
-  }
+    &--xl {
+      @include tools.relative-font-size(64);
+      line-height: 1;
+    }
 
-  .tna-hgroup__title {
-    font-size: 1.125rem;
-  }
-}
+    &--l {
+      @include tools.relative-font-size(32);
+      line-height: 1.2;
+    }
 
-.tna-hgroup__supertitle {
-  text-transform: uppercase;
-}
+    &--m {
+      @include tools.relative-font-size(20);
+      line-height: 1.4;
+    }
 
-.tna-hgroup__title {
+    &--s {
+      @include tools.relative-font-size(18);
+      line-height: 1.6;
+    }
+  }
+
+  .tna-hgroup {
+    margin-bottom: 2rem;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+
+    &__supertitle {
+      margin: 0;
+
+      @include tools.relative-font-size(14);
+      font-family: typography.$font-family-detail;
+      font-weight: typography.$font-weight-detail;
+      text-transform: uppercase;
+
+      // .tna-hgroup & {
+      //   margin: 0;
+      // }
+    }
+
+    &__title {
+      margin: 0;
+
+      .tna-hgroup__supertitle {
+        display: block;
+      }
+    }
+
+    &--xl {
+      .tna-hgroup__supertitle {
+      }
+
+      .tna-hgroup__title {
+        @include tools.relative-font-size(64);
+      }
+    }
+
+    &--l {
+      .tna-hgroup__supertitle {
+      }
+
+      .tna-hgroup__title {
+        @include tools.relative-font-size(32);
+      }
+    }
+
+    &--m {
+      .tna-hgroup__supertitle {
+      }
+
+      .tna-hgroup__title {
+        @include tools.relative-font-size(20);
+      }
+    }
+
+    &--s {
+      .tna-hgroup__supertitle {
+      }
+
+      .tna-hgroup__title {
+        @include tools.relative-font-size(18);
+      }
+    }
+  }
 }

package/nationalarchives/variables/_all.scss

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

package/nationalarchives/variables/_colour.scss

@@ -0,0 +1 @@
+$base-font-colour: #111 !default;

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 @@
+$base-font-size-px: 16;
+
+$font-family-main: "Open Sans", sans-serif;
+$font-weight-main: 400;
+
+$font-family-heading: supria-sans-condensed, monospace;
+$font-weight-heading: 600;
+
+$font-family-detail: "Roboto Mono", monospace;
+$font-weight-detail: 500;

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@nationalarchives/frontend",
-  "version": "0.1.5-prerelease",
+  "version": "0.1.7-prerelease",
   "description": "The National Archives frontend styles",
   "scripts": {
     "start": "storybook dev -p 6006",
     "build": "storybook build -o storybook",
-    "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}'",
+    "test": "test-storybook --stories-json && node tasks/test-fixtures.js",
+    "lint": "prettier --check '{src,.storybook,tasks}/**/*.{js,mjs,scss,json}' && stylelint 'src/**/*.scss' && eslint 'src/**/*.mjs'",
+    "lint:fix": "prettier --write '{src,.storybook,tasks}/**/*.{js,mjs,scss,json}' && stylelint --fix 'src/**/*.scss' && eslint --fix 'src/**/*.mjs'",
     "package:sass": "sass --style=compressed --quiet-deps src/nationalarchives/all.scss package/nationalarchives/all.css",
     "package:scripts": "webpack"
   },
@@ -34,7 +34,7 @@
   },
   "sass": "nationalarchives/all.scss",
   "engines": {
-    "npm": "8.x",
+    "npm": "9.x",
     "node": "18.x"
   },
   "homepage": "https://github.com/nationalarchives/tna-frontend#readme",
@@ -45,16 +45,21 @@
     "@storybook/addon-a11y": "^7.0.22",
     "@storybook/addon-docs": "^7.0.22",
     "@storybook/addon-essentials": "^7.0.22",
+    "@storybook/addon-interactions": "^7.0.23",
     "@storybook/addon-links": "^7.0.22",
     "@storybook/addon-mdx-gfm": "^7.0.22",
     "@storybook/html": "^7.0.22",
     "@storybook/html-webpack5": "^7.0.22",
+    "@storybook/jest": "^0.1.0",
+    "@storybook/test-runner": "^0.11.0",
     "@storybook/testing-library": "^0.2.0",
     "babel-loader": "^9.0.1",
     "copy-webpack-plugin": "^11.0.0",
     "css-loader": "^6.7.1",
     "diff": "^5.1.0",
+    "eslint": "^8.43.0",
     "glob": "^10.2.7",
+    "jest-image-snapshot": "^6.1.0",
     "nunjucks": "^3.2.3",
     "prettier": "^2.7.1",
     "react": "^18.2.0",
@@ -64,6 +69,9 @@
     "simple-nunjucks-loader": "^3.2.0",
     "storybook": "^7.0.22",
     "style-loader": "^3.3.1",
+    "stylelint": "^15.9.0",
+    "stylelint-config-standard-scss": "^9.0.0",
+    "stylelint-selector-bem-pattern": "^2.1.1",
     "webpack": "^5.74.0",
     "webpack-cli": "^5.1.4"
   }

package/nationalarchives/_base.scss

@@ -1,3 +0,0 @@
-@import "tools/all";
-
-@import "variables/all";

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",
-};

package/nationalarchives/tools/_exports.scss

@@ -1,36 +0,0 @@
-////
-/// @group tools
-////
-
-/// List of modules which have already been exported
-///
-/// @type List
-/// @access private
-
-$_nationalarchives-imported-modules: () !default;
-
-/// Export module
-///
-/// Ensure that the modules of CSS that we define throughout Frontend are only
-/// included in the generated CSS once, no matter how many times they are
-/// imported across the individual components.
-///
-/// @param {String} $name - Name of module - must be unique within the codebase
-/// @content The passed content will only be outputted if a module of the same
-///   $name has not already been outputted
-/// @access public
-
-@mixin nationalarchives-exports($name) {
-  // If the mixin is not in the list of modules already exported...
-  @if not index($_nationalarchives-imported-modules, $name) {
-    // ... then add it to the list
-    $_nationalarchives-imported-modules: append(
-      $_nationalarchives-imported-modules,
-      $name
-    ) !global;
-    // ... and output the CSS for that module
-    @content;
-  }
-  // The next time exports is called for the module of the same name, it will be
-  // found in the list and so nothing will be outputted.
-}