@nationalarchives/frontend 0.1.3-prerelease

package/nationalarchives/utilities/_grid.scss

@@ -0,0 +1,131 @@
+@import "../variables/all";
+
+@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;
+        }
+
+        // .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;
+      }
+
+      //   .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;
+      //   }
+    }
+  }
+}
+
+@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/utilities/_typography.scss

@@ -0,0 +1,82 @@
+// 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");
+
+.tna-template {
+  font-family: "Open Sans", sans-serif;
+  font-size: 16px;
+  -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;
+}
+
+.tna-heading {
+}
+
+.tna-heading--xl {
+  font-size: 4rem;
+}
+
+.tna-heading--l {
+  font-size: 2rem;
+}
+
+.tna-heading--m {
+  font-size: 1.3rem;
+}
+
+.tna-heading--s {
+  font-size: 1.125rem;
+}
+
+.tna-hgroup {
+}
+
+.tna-hgroup--xl {
+  .tna-hgroup__supertitle {
+  }
+
+  .tna-hgroup__title {
+    font-size: 4rem;
+  }
+}
+
+.tna-hgroup--l {
+  .tna-hgroup__supertitle {
+  }
+
+  .tna-hgroup__title {
+    font-size: 2rem;
+  }
+}
+
+.tna-hgroup--m {
+  .tna-hgroup__supertitle {
+  }
+
+  .tna-hgroup__title {
+    font-size: 1.3rem;
+  }
+}
+
+.tna-hgroup--s {
+  .tna-hgroup__supertitle {
+  }
+
+  .tna-hgroup__title {
+    font-size: 1.125rem;
+  }
+}
+
+.tna-hgroup__supertitle {
+  text-transform: uppercase;
+}
+
+.tna-hgroup__title {
+}

package/nationalarchives/variables/_all.scss

@@ -0,0 +1,2 @@
+@import "grid";
+@import "media";

package/nationalarchives/variables/_grid.scss

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

package/nationalarchives/variables/_media.scss

@@ -0,0 +1,12 @@
+$largest-medium-device: 1024px;
+$largest-small-device: 768px;
+$largest-tiny-device: 480px;
+
+$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})";

package/package.json

@@ -0,0 +1,70 @@
+{
+  "name": "@nationalarchives/frontend",
+  "version": "0.1.3-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}'",
+    "package:sass": "sass --style=compressed --quiet-deps --load-path=node_modules src/nationalarchives/all.scss package/nationalarchives/all.css",
+    "package:scripts": "webpack"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/nationalarchives/tna-frontend.git"
+  },
+  "author": {
+    "name": "Andrew Hosgood",
+    "email": "andrew.hosgood@nationalarchives.gov.uk",
+    "url": "https://andrewhosgood.dev"
+  },
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/nationalarchives/tna-frontend/issues"
+  },
+  "main": "nationalarchives/all.js",
+  "exports": {
+    ".": {
+      "sass": "./nationalarchives/all.scss",
+      "require": "./nationalarchives/all.js"
+    },
+    "./nationalarchives/": "./nationalarchives/"
+  },
+  "sass": "nationalarchives/all.scss",
+  "engines": {
+    "npm": "8.x",
+    "node": "18.x"
+  },
+  "homepage": "https://github.com/nationalarchives/tna-frontend#readme",
+  "devDependencies": {
+    "@babel/core": "^7.19.1",
+    "@babel/preset-env": "^7.22.5",
+    "@mdx-js/react": "^2.1.3",
+    "@storybook/addon-a11y": "^7.0.22",
+    "@storybook/addon-docs": "^7.0.22",
+    "@storybook/addon-essentials": "^7.0.22",
+    "@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/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",
+    "glob": "^10.2.7",
+    "nunjucks": "^3.2.3",
+    "prettier": "^2.7.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "sass": "^1.54.9",
+    "sass-loader": "^13.0.2",
+    "simple-nunjucks-loader": "^3.2.0",
+    "storybook": "^7.0.22",
+    "style-loader": "^3.3.1",
+    "webpack": "^5.74.0",
+    "webpack-cli": "^5.1.4"
+  }
+}