@nationalarchives/frontend 0.1.14-prerelease → 0.1.15-prerelease

package/nationalarchives/utilities/_typography.scss

@@ -1,9 +1,10 @@
+@use "sass:math";
 @use "../tools/colour";
 @use "../tools/media";
 @use "../tools/typography";
 
-// Temporary - will eventually bundle font files into package
-@import "https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&family=Roboto+Mono:wght@400;700&display=swap";
+// TODO: Temporary - will eventually bundle font files into package
+@import "https://fonts.googleapis.com/css2?family=Open+Sans:wght@500;700&family=Roboto+Mono:wght@400&display=swap";
 @import "https://use.typekit.net/hkj3kuz.css";
 
 .tna-template {
@@ -19,7 +20,8 @@
 .tna-template__body {
   color: inherit;
   @include typography.relative-font-size(18);
-  line-height: 1.6;
+  // line-height: 1.6;
+  line-height: #{math.div(16, 18) * 2};
 }
 
 h1,
@@ -33,6 +35,16 @@ ol {
   margin-top: 0;
 }
 
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+strong {
+  @include typography.main-font-weight-bold;
+}
+
 p {
   margin: 0 0 1.5rem;
 
@@ -43,23 +55,26 @@ p {
 
 a {
   @include colour.colour-font("link");
+  text-decoration-thickness: 1.5px;
 
   &:visited {
     @include colour.colour-font("link-visited");
   }
 
+  &:hover,
   &:active {
-    text-decoration-thickness: 4px;
-  }
-
-  &:hover {
-    text-decoration-thickness: 3px;
+    text-decoration-thickness: 3.5px;
   }
 }
 
 .tna-ul,
 .tna-ol {
-  padding-left: 2rem;
+  margin: 0 0 2rem;
+  padding: 0 0 0 2rem;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
 
   li::marker {
     @include colour.colour-font("accent");
@@ -121,22 +136,20 @@ a {
 }
 
 .tna-hgroup {
-  margin-bottom: 2rem;
+  margin-bottom: 1rem;
 
   &:last-child {
     margin-bottom: 0;
   }
 
   &__supertitle {
-    margin: 0;
+    margin: 0 0 0.5rem;
 
     @include colour.colour-font("font-base");
-    @include typography.relative-font-size(14);
     @include typography.detail-font;
-    text-transform: uppercase;
 
     .tna-hgroup & {
-      margin: 0;
+      // margin: 0;
     }
   }
 
@@ -153,44 +166,36 @@ a {
   }
 
   &--xl {
-    .tna-hgroup__supertitle {
-    }
-
     .tna-hgroup__title {
       @include typography.relative-font-size(64);
+      line-height: 1;
     }
   }
 
   &--l {
-    .tna-hgroup__supertitle {
-    }
-
     .tna-hgroup__title {
       @include typography.relative-font-size(32);
+      line-height: 1.2;
     }
   }
 
   &--m {
-    .tna-hgroup__supertitle {
-    }
-
     .tna-hgroup__title {
       @include typography.relative-font-size(20);
+      line-height: 1.4;
     }
   }
 
   &--s {
-    .tna-hgroup__supertitle {
-    }
-
     .tna-hgroup__title {
       @include typography.relative-font-size(18);
+      line-height: 1.6;
     }
   }
 }
 
 .tna-blockquote {
-  margin: 0;
+  margin: 0 0 2rem;
   padding: 1rem 1rem 1rem 2rem;
 
   border-left: 0.35rem solid;
@@ -198,6 +203,10 @@ a {
 
   quotes: "“" "”" "‘" "’";
 
+  &:last-child {
+    margin-bottom: 0;
+  }
+
   &::before {
     float: left;
 

package/nationalarchives/variables/_colour.scss

@@ -27,27 +27,8 @@ $-tna-pastel-blue: #d4e5ef;
 $-dark-grey: #26262a;
 $-base-font: #343338;
 
-$-accent-colour: $-tna-yellow;
-$-accent-colour-dark: $-accent-colour;
-
-// @debug $-accent-colour;
-// @mixin configure($accent-colour: null) {
-//   @debug $accent-colour;
-//   @if $accent-colour {
-//     $-accent-colour: $accent-colour !global;
-//   }
-// }
-// @debug $-accent-colour;
-
-@function accent-colour() {
-  // @return $-accent-colour or $-tna-yellow;
-  @return $-accent-colour;
-}
-
-@function accent-colour-dark() {
-  // @return $-accent-colour-dark or -accent-colour();
-  @return $-accent-colour-dark or accent-colour();
-}
+$-accent-colour-default: $-tna-yellow;
+$-accent-colour-default-dark: $-accent-colour-default;
 
 // TODO: Scoped variables should not be used directly outside of this file
 $tna-black: $-tna-black;
@@ -56,9 +37,16 @@ $tna-yellow: $-tna-yellow;
 $tna-pink: $-tna-pink;
 $tna-orange: $-tna-orange;
 $tna-green: $-tna-green;
+$tna-forest: $-tna-forest;
 $tna-blue: $-tna-blue;
 $tna-cream: $-tna-cream;
+$tna-white: $-tna-white;
 
+/*
+=========================================
+LIGHT/DEFAULT THEME
+=========================================
+*/
 $colour-palette-default: (
   "page-background": $-tna-white,
   "font-base": $-base-font,
@@ -66,11 +54,11 @@ $colour-palette-default: (
   "font-light": rgba($-base-font, 0.7),
   "link": #1d70ab,
   "link-visited": #4c2c92,
-  // "focus-outline": #004c7e,
+  // "focus-outline": #004c7e, // Old value
   "focus-outline": $-tna-blue,
   "keyline": #ccc,
   "keyline-dark": $-dark-grey,
-  "accent": accent-colour(),
+  "accent-default": $-accent-colour-default,
   "button-primary-text": $-tna-white,
   "button-primary-background": $-tna-black,
   "button-primary-hover-text": $-tna-black,
@@ -89,24 +77,34 @@ $colour-palette-default: (
   "contrast-keyline-dark": rgba($-tna-white, 0.8),
 );
 
+/*
+=========================================
+DARK THEME
+=========================================
+*/
 $colour-palette-dark: map.merge(
   $colour-palette-default,
   (
-    "page-background": #111,
+    "page-background": #222,
     "font-base": rgba($-tna-white, 0.95),
     "font-dark": $-tna-white,
     "font-light": rgba($-tna-white, 0.5),
     "link": $-tna-blue,
     "link-visited": map.get($colour-palette-default, "contrast-link-visited"),
-    "keyline": rgba($-tna-white, 0.5),
+    "keyline": rgba($-tna-white, 0.25),
     "keyline-dark": $-tna-white,
-    "accent": accent-colour-dark(),
-    "contrast-background": #222,
+    "accent-default": $-accent-colour-default-dark,
+    "contrast-background": #111,
     "contrast-link-visited":
       map.get($colour-palette-default, "contrast-link-visited"),
   )
 );
 
+/*
+=========================================
+LIGHT, HIGH_CONTRAST THEME
+=========================================
+*/
 $colour-palette-high-contrast: map.merge(
   $colour-palette-default,
   (
@@ -117,17 +115,22 @@ $colour-palette-high-contrast: map.merge(
     "focus-outline": $-tna-orange,
     "keyline": $-tna-black,
     "keyline-dark": $-tna-black,
-    "contrast-background": #f0f0f0,
+    "contrast-background": $-tna-white,
     "contrast-font-base": $-tna-black,
     "contrast-font-dark": $-tna-black,
-    "contrast-font-light": rgba($-tna-black, 0.7),
+    "contrast-font-light": $-tna-black,
     "contrast-link": $-tna-black,
     "contrast-link-visited": $-tna-black,
-    "contrast-keyline": rgba($-tna-black, 0.5),
-    "contrast-keyline-dark": rgba($-tna-black, 0.8),
+    "contrast-keyline": $-tna-black,
+    "contrast-keyline-dark": $-tna-black,
   )
 );
 
+/*
+=========================================
+DARK, HIGH_CONTRAST THEME
+=========================================
+*/
 $colour-palette-high-contrast-dark: map.merge(
   $colour-palette-dark,
   (
@@ -137,6 +140,6 @@ $colour-palette-high-contrast-dark: map.merge(
     "link": $-tna-white,
     "link-visited": $-tna-white,
     "keyline": $-tna-white,
-    "contrast-background": #111,
+    "contrast-background": $tna-black,
   )
 );

package/nationalarchives/variables/_index.scss

@@ -2,4 +2,5 @@
 @use "colour";
 @use "grid";
 @use "media";
+@use "spacing";
 @use "typography";

package/nationalarchives/variables/_spacing.scss

@@ -0,0 +1,7 @@
+$spacing: (
+  // "xs": 0.5,
+  "s": 1,
+  "m": 2,
+  "l": 3,
+  "xl": 6
+);

package/nationalarchives/variables/_typography.scss

@@ -1,7 +1,8 @@
 $base-font-size-px: 16;
 
 $font-family-main: "Open Sans", sans-serif;
-$font-weight-main: 400;
+$font-weight-main: 500;
+$font-weight-main-bold: 700;
 
 $font-family-heading: supria-sans-condensed, sans-serif;
 $font-weight-heading: 400;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nationalarchives/frontend",
-  "version": "0.1.14-prerelease",
+  "version": "0.1.15-prerelease",
   "description": "The National Archives frontend styles",
   "scripts": {
     "start": "storybook dev -p 6006",

package/nationalarchives/components/card/card.js

@@ -1,2 +0,0 @@
-!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define("TNAFrontend",[],e):"object"==typeof exports?exports.TNAFrontend=e():(t.TNAFrontend=t.TNAFrontend||{},t.TNAFrontend["components/card/card"]=e())}(self,(()=>(()=>{"use strict";var t={d:(e,o)=>{for(var n in o)t.o(o,n)&&!t.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:o[n]})},o:(t,e)=>Object.prototype.hasOwnProperty.call(t,e),r:t=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})}},e={};function o(t){return o="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},o(t)}function n(t,e){for(var n=0;n<e.length;n++){var r=e[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(t,(void 0,i=function(t,e){if("object"!==o(t)||null===t)return t;var n=t[Symbol.toPrimitive];if(void 0!==n){var r=n.call(t,"string");if("object"!==o(r))return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(t)}(r.key),"symbol"===o(i)?i:String(i)),r)}var i}t.r(e),t.d(e,{Card:()=>r});var r=function(){function t(e){var o=arguments.length>1&&void 0!==arguments[1]?arguments[1]:300;!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,t),this.$module=e,this.$cardTitleLink=e&&e.querySelector(".tna-card__title-link"),this.$cardAction=e&&e.querySelector(".tna-card__action"),this.tapTimeMax=o}var e,o;return e=t,(o=[{key:"init",value:function(){this.$module&&(this.$cardTitleLink||this.$cardAction)&&!this.$module.classList.contains("tna-card--no-global-click")&&(this.touchStartTime=null)}},{key:"handleCardClick",value:function(){this.$cardTitleLink?this.$cardTitleLink.click():this.$cardAction&&this.$cardAction.click()}},{key:"handleCardTouchStart",value:function(){this.touchStartTime=new Date}},{key:"handleCardTouchEnd",value:function(){(new Date).getTime()-this.touchStartTime.getTime()<this.tapTimeMax&&this.handleCardClick()}}])&&n(e.prototype,o),Object.defineProperty(e,"prototype",{writable:!1}),t}();return e})()));
-//# sourceMappingURL=card.js.map

package/nationalarchives/components/card/card.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"components/card/card.js","mappings":"CAAA,SAA2CA,EAAMC,GAC1B,iBAAZC,SAA0C,iBAAXC,OACxCA,OAAOD,QAAUD,IACQ,mBAAXG,QAAyBA,OAAOC,IAC9CD,OAAO,cAAe,GAAIH,GACA,iBAAZC,QACdA,QAAqB,YAAID,KAEzBD,EAAkB,YAAIA,EAAkB,aAAK,CAAC,EAAGA,EAAkB,YAAE,wBAA0BC,IAChG,CATD,CASGK,MAAM,I,mBCRT,IAAIC,EAAsB,CCA1BA,EAAwB,CAACL,EAASM,KACjC,IAAI,IAAIC,KAAOD,EACXD,EAAoBG,EAAEF,EAAYC,KAASF,EAAoBG,EAAER,EAASO,IAC5EE,OAAOC,eAAeV,EAASO,EAAK,CAAEI,YAAY,EAAMC,IAAKN,EAAWC,IAE1E,ECNDF,EAAwB,CAACQ,EAAKC,IAAUL,OAAOM,UAAUC,eAAeC,KAAKJ,EAAKC,GCClFT,EAAyBL,IACH,oBAAXkB,QAA0BA,OAAOC,aAC1CV,OAAOC,eAAeV,EAASkB,OAAOC,YAAa,CAAEC,MAAO,WAE7DX,OAAOC,eAAeV,EAAS,aAAc,CAAEoB,OAAO,GAAO,G,msBCLvD,IAAMC,EAAI,WACf,SAAAA,EAAYC,GAA2B,IAAlBC,EAAUC,UAAAC,OAAA,QAAAC,IAAAF,UAAA,GAAAA,UAAA,GAAG,K,4FAAGG,CAAA,KAAAN,GACnCO,KAAKN,QAAUA,EACfM,KAAKC,eACHP,GAAWA,EAAQQ,cAAc,yBACnCF,KAAKG,YAAcT,GAAWA,EAAQQ,cAAc,qBACpDF,KAAKL,WAAaA,CACpB,C,QAoCC,O,EApCAF,G,EAAA,EAAAd,IAAA,OAAAa,MAED,WAEKQ,KAAKN,UACJM,KAAKC,gBAAmBD,KAAKG,eAC/BH,KAAKN,QAAQU,UAAUC,SAAS,+BAKlCL,KAAKM,eAAiB,KAMxB,GAAC,CAAA3B,IAAA,kBAAAa,MAED,WACMQ,KAAKC,eACPD,KAAKC,eAAeM,QACXP,KAAKG,aACdH,KAAKG,YAAYI,OAErB,GAAC,CAAA5B,IAAA,uBAAAa,MAED,WACEQ,KAAKM,eAAiB,IAAIE,IAC5B,GAAC,CAAA7B,IAAA,qBAAAa,MAED,YACmB,IAAIgB,MAAOC,UAAYT,KAAKM,eAAeG,UAC7CT,KAAKL,YAClBK,KAAKU,iBAET,M,oEAACjB,CAAA,CA3Cc,G","sources":["webpack://TNAFrontend/webpack/universalModuleDefinition","webpack://TNAFrontend/webpack/bootstrap","webpack://TNAFrontend/webpack/runtime/define property getters","webpack://TNAFrontend/webpack/runtime/hasOwnProperty shorthand","webpack://TNAFrontend/webpack/runtime/make namespace object","webpack://TNAFrontend/./src/nationalarchives/components/card/card.mjs"],"sourcesContent":["(function webpackUniversalModuleDefinition(root, factory) {\n\tif(typeof exports === 'object' && typeof module === 'object')\n\t\tmodule.exports = factory();\n\telse if(typeof define === 'function' && define.amd)\n\t\tdefine(\"TNAFrontend\", [], factory);\n\telse if(typeof exports === 'object')\n\t\texports[\"TNAFrontend\"] = factory();\n\telse\n\t\troot[\"TNAFrontend\"] = root[\"TNAFrontend\"] || {}, root[\"TNAFrontend\"][\"components/card/card\"] = factory();\n})(self, () => {\nreturn ","// The require scope\nvar __webpack_require__ = {};\n\n","// define getter functions for harmony exports\n__webpack_require__.d = (exports, definition) => {\n\tfor(var key in definition) {\n\t\tif(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {\n\t\t\tObject.defineProperty(exports, key, { enumerable: true, get: definition[key] });\n\t\t}\n\t}\n};","__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))","// define __esModule on exports\n__webpack_require__.r = (exports) => {\n\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n\t}\n\tObject.defineProperty(exports, '__esModule', { value: true });\n};","export class Card {\n  constructor($module, tapTimeMax = 300) {\n    this.$module = $module;\n    this.$cardTitleLink =\n      $module && $module.querySelector(\".tna-card__title-link\");\n    this.$cardAction = $module && $module.querySelector(\".tna-card__action\");\n    this.tapTimeMax = tapTimeMax;\n  }\n\n  init() {\n    if (\n      !this.$module ||\n      (!this.$cardTitleLink && !this.$cardAction) ||\n      this.$module.classList.contains(\"tna-card--no-global-click\")\n    ) {\n      return;\n    }\n\n    this.touchStartTime = null;\n\n    // this.$module.addEventListener(\"touchstart\", () =>\n    //   this.handleCardTouchStart(),\n    // );\n    // this.$module.addEventListener(\"touchend\", () => this.handleCardTouchEnd());\n  }\n\n  handleCardClick() {\n    if (this.$cardTitleLink) {\n      this.$cardTitleLink.click();\n    } else if (this.$cardAction) {\n      this.$cardAction.click();\n    }\n  }\n\n  handleCardTouchStart() {\n    this.touchStartTime = new Date();\n  }\n\n  handleCardTouchEnd() {\n    const duration = new Date().getTime() - this.touchStartTime.getTime();\n    if (duration < this.tapTimeMax) {\n      this.handleCardClick();\n    }\n  }\n}\n"],"names":["root","factory","exports","module","define","amd","self","__webpack_require__","definition","key","o","Object","defineProperty","enumerable","get","obj","prop","prototype","hasOwnProperty","call","Symbol","toStringTag","value","Card","$module","tapTimeMax","arguments","length","undefined","_classCallCheck","this","$cardTitleLink","querySelector","$cardAction","classList","contains","touchStartTime","click","Date","getTime","handleCardClick"],"sourceRoot":""}

package/nationalarchives/components/card/card.mjs

@@ -1,45 +0,0 @@
-export class Card {
-  constructor($module, tapTimeMax = 300) {
-    this.$module = $module;
-    this.$cardTitleLink =
-      $module && $module.querySelector(".tna-card__title-link");
-    this.$cardAction = $module && $module.querySelector(".tna-card__action");
-    this.tapTimeMax = tapTimeMax;
-  }
-
-  init() {
-    if (
-      !this.$module ||
-      (!this.$cardTitleLink && !this.$cardAction) ||
-      this.$module.classList.contains("tna-card--no-global-click")
-    ) {
-      return;
-    }
-
-    this.touchStartTime = null;
-
-    // this.$module.addEventListener("touchstart", () =>
-    //   this.handleCardTouchStart(),
-    // );
-    // this.$module.addEventListener("touchend", () => this.handleCardTouchEnd());
-  }
-
-  handleCardClick() {
-    if (this.$cardTitleLink) {
-      this.$cardTitleLink.click();
-    } else if (this.$cardAction) {
-      this.$cardAction.click();
-    }
-  }
-
-  handleCardTouchStart() {
-    this.touchStartTime = new Date();
-  }
-
-  handleCardTouchEnd() {
-    const duration = new Date().getTime() - this.touchStartTime.getTime();
-    if (duration < this.tapTimeMax) {
-      this.handleCardClick();
-    }
-  }
-}

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

@@ -1,29 +0,0 @@
-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",
-};
-
-const BlockquoteTemplate = ({
-  html,
-  author,
-}) => `<blockquote class="tna-blockquote">
-  <div class="tna-blockquote__quote">
-    ${html}
-  </div>
-  <p class="tna-blockquote__author">${author}</p>
-</p>`;
-export const Blockquote = BlockquoteTemplate.bind({});
-Blockquote.args = {
-  html: "<p>A common mistake that people make when trying to design something completely foolproof is to underestimate the ingenuity of complete fools.</p>",
-  author: "Douglas Adams, Mostly Harmless",
-};