@nationalarchives/frontend 0.1.6-prerelease → 0.1.8-prerelease

package/nationalarchives/utilities/_typography.scss

@@ -1,28 +1,21 @@
 @use "../variables/typography";
+@use "../tools/media";
 @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");
+@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: typography.$fontFamilyMain;
-  font-weight: typography.$fontWeightMain;
+  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;
 
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6,
-  p,
-  ul,
-  ol {
+  p {
     margin: 0 0 2rem;
 
     &:last-child {
@@ -31,160 +24,147 @@
   }
 
   a {
-    &,
-    &:link {
-      &:hover {
-        text-decoration-thickness: 3px;
-      }
+    &:active {
+      text-decoration-thickness: 4px;
+    }
 
-      &:active {
-        text-decoration-thickness: 4px;
-      }
+    &:hover {
+      text-decoration-thickness: 3px;
     }
   }
-}
 
-// $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;
-  // }
-}
+  .tna-template__body {
+    @include tools.relative-font-size(16);
+    line-height: 1.6;
+  }
+
+  .tna-ul,
+  .tna-ol {
+    padding-left: 2rem;
 
-// $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;
+    li::marker {
+      color: #f0a;
+      font-weight: 700;
+    }
   }
-}
 
-.tna-template .tna-ul--plain,
-.tna-template .tna-ol--plain {
-  padding-left: 0;
+  .tna-ul--plain,
+  .tna-ol--plain {
+    padding-left: 0;
 
-  list-style: none;
-}
+    list-style: none;
+  }
 
-.tna-template__body {
-  @include tools.relativeFontSize(16);
-  line-height: 1.6;
-}
+  .tna-heading {
+    margin-top: 0;
+    margin-bottom: 1.5rem;
 
-.tna-heading {
-  margin-bottom: 2rem;
+    font-family: typography.$font-family-heading;
+    font-weight: typography.$font-weight-heading;
 
-  font-family: typography.$fontFamilyHeading;
-  font-weight: typography.$fontWeightHeading;
-}
+    &:last-child {
+      margin-bottom: 0;
+    }
 
-.tna-heading--xl {
-  @include tools.relativeFontSize(64);
-}
+    &--xl {
+      @include tools.relative-font-size(64);
+      line-height: 1;
 
-.tna-heading--l {
-  @include tools.relativeFontSize(32);
-}
+      @include media.on-medium {
+        @include tools.relative-font-size(42);
+      }
 
-.tna-heading--m {
-  @include tools.relativeFontSize(20);
-}
+      @include media.on-mobile {
+        @include tools.relative-font-size(36);
+      }
+    }
 
-.tna-heading--s {
-  @include tools.relativeFontSize(18);
-}
+    &--l {
+      @include tools.relative-font-size(32);
+      line-height: 1.2;
 
-.tna-hgroup {
-}
+      @include media.on-medium {
+        @include tools.relative-font-size(26);
+      }
 
-.tna-hgroup__supertitle {
-  @include tools.relativeFontSize(14);
-  font-family: typography.$fontFamilyDetail;
-  font-weight: typography.$fontWeightDetail;
-  text-transform: uppercase;
+      @include media.on-mobile {
+        @include tools.relative-font-size(24);
+      }
+    }
 
-  .tna-hgroup & {
-    margin: 0;
-  }
-}
+    &--m {
+      @include tools.relative-font-size(20);
+      line-height: 1.4;
+    }
 
-.tna-hgroup__title {
-  .tna-hgroup__supertitle {
-    display: block;
+    &--s {
+      @include tools.relative-font-size(18);
+      line-height: 1.6;
+    }
   }
-}
 
-.tna-hgroup--xl {
-  .tna-hgroup__supertitle {
-  }
+  .tna-hgroup {
+    margin-bottom: 2rem;
 
-  .tna-hgroup__title {
-    @include tools.relativeFontSize(64);
-  }
-}
+    &:last-child {
+      margin-bottom: 0;
+    }
 
-.tna-hgroup--l {
-  .tna-hgroup__supertitle {
-  }
+    &__supertitle {
+      margin: 0;
 
-  .tna-hgroup__title {
-    @include tools.relativeFontSize(32);
-  }
-}
+      @include tools.relative-font-size(14);
+      font-family: typography.$font-family-detail;
+      font-weight: typography.$font-weight-detail;
+      text-transform: uppercase;
 
-.tna-hgroup--m {
-  .tna-hgroup__supertitle {
-  }
+      // .tna-hgroup & {
+      //   margin: 0;
+      // }
+    }
 
-  .tna-hgroup__title {
-    @include tools.relativeFontSize(20);
-  }
-}
+    &__title {
+      margin: 0;
 
-.tna-hgroup--s {
-  .tna-hgroup__supertitle {
-  }
+      .tna-hgroup__supertitle {
+        display: block;
+      }
+    }
+
+    &--xl {
+      .tna-hgroup__supertitle {
+      }
 
-  .tna-hgroup__title {
-    @include tools.relativeFontSize(18);
+      .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,3 +1,4 @@
+@use "colour";
 @use "grid";
 @use "media";
 @use "typography";

package/nationalarchives/variables/_colour.scss

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

package/nationalarchives/variables/_typography.scss

@@ -1,10 +1,10 @@
-$baseFontSizePx: 16;
+$base-font-size-px: 16;
 
-$fontFamilyMain: "Open Sans", sans-serif;
-$fontWeightMain: 400;
+$font-family-main: "Open Sans", sans-serif;
+$font-weight-main: 400;
 
-$fontFamilyHeading: supria-sans-condensed, monospace;
-$fontWeightHeading: 600;
+$font-family-heading: supria-sans-condensed, monospace;
+$font-weight-heading: 600;
 
-$fontFamilyDetail: "Roboto Mono", monospace;
-$fontWeightDetail: 500;
+$font-family-detail: "Roboto Mono", monospace;
+$font-weight-detail: 500;

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@nationalarchives/frontend",
-  "version": "0.1.6-prerelease",
+  "version": "0.1.8-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"
   }