@nationalarchives/frontend 0.1.14-prerelease → 0.1.16-prerelease

package/nationalarchives/variables/_colour.scss

@@ -1,142 +1,139 @@
 @use "sass:map";
 @use "../features";
 
-$-tna-black: #000;
-$-tna-grey: #8c9694;
-$-tna-light-grey: #d9d9d6;
-$-tna-white: #fff;
+$colour-palette-brand: (
+  "black": #000,
+  "grey": #8c9694,
+  "light-grey": #d9d9d6,
+  "white": #fff,
 
-$-tna-yellow: #fc0;
-$-tna-pink: #fe1d57;
-$-tna-orange: #fd3f03;
-$-tna-green: #86bc25;
-$-tna-blue: #00b0ff;
+  "yellow": #fc0,
+  "pink": #fe1d57,
+  "orange": #fd3f03,
+  "green": #86bc25,
+  "blue": #00b0ff,
 
-$-tna-brown: #654e37;
-$-tna-maroon: #9c193a;
-$-tna-chestnut: #8f3415;
-$-tna-forest: #00623b;
-$-tna-navy: #004c7e;
+  "brown": #654e37,
+  "maroon": #9c193a,
+  "chestnut": #8f3415,
+  "forest": #00623b,
+  "navy": #004c7e,
 
-$-tna-cream: #f9f7e2;
-$-tna-pastel-pink: #fad3d4;
-$-tna-pastel-orange: #f9e1bc;
-$-tna-pastel-green: #dde5d5;
-$-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;
-}
+  "cream": #f9f7e2,
+  "pastel-pink": #fad3d4,
+  "pastel-orange": #f9e1bc,
+  "pastel-green": #dde5d5,
+  "pastel-blue": #d4e5ef,
+);
 
-@function accent-colour-dark() {
-  // @return $-accent-colour-dark or -accent-colour();
-  @return $-accent-colour-dark or accent-colour();
-}
+$dark-grey: #26262a;
+$base-font: #343338;
 
-// TODO: Scoped variables should not be used directly outside of this file
-$tna-black: $-tna-black;
-$dark-grey: $-dark-grey;
-$tna-yellow: $-tna-yellow;
-$tna-pink: $-tna-pink;
-$tna-orange: $-tna-orange;
-$tna-green: $-tna-green;
-$tna-blue: $-tna-blue;
-$tna-cream: $-tna-cream;
+$-accent-colour-default: map.get($colour-palette-brand, "yellow");
+$-accent-colour-default-dark: $-accent-colour-default;
 
+/*
+=========================================
+LIGHT THEME (DEFAULT)
+=========================================
+*/
 $colour-palette-default: (
-  "page-background": $-tna-white,
-  "font-base": $-base-font,
-  "font-dark": $-tna-black,
-  "font-light": rgba($-base-font, 0.7),
+  "page-background": map.get($colour-palette-brand, "white"),
+  "font-base": $base-font,
+  "font-dark": map.get($colour-palette-brand, "black"),
+  "font-light": rgba($base-font, 0.7),
   "link": #1d70ab,
   "link-visited": #4c2c92,
-  // "focus-outline": #004c7e,
-  "focus-outline": $-tna-blue,
+  // "focus-outline": #004c7e, // Old value
+  "focus-outline": map.get($colour-palette-brand, "blue"),
   "keyline": #ccc,
-  "keyline-dark": $-dark-grey,
-  "accent": accent-colour(),
-  "button-primary-text": $-tna-white,
-  "button-primary-background": $-tna-black,
-  "button-primary-hover-text": $-tna-black,
-  "button-primary-hover-background": $-tna-white,
-  "button-secondary-text": $-tna-black,
-  "button-secondary-background": $-tna-yellow,
-  "button-secondary-hover-text": $-tna-black,
-  "button-secondary-hover-background": $-tna-white,
-  "contrast-background": $-dark-grey,
-  "contrast-font-base": $-tna-white,
-  "contrast-font-dark": $-tna-white,
-  "contrast-font-light": rgba($-tna-white, 0.7),
-  "contrast-link": $-tna-white,
+  "keyline-dark": $dark-grey,
+  "accent-default": $-accent-colour-default,
+  "button-primary-text": map.get($colour-palette-brand, "white"),
+  "button-primary-background": map.get($colour-palette-brand, "black"),
+  "button-primary-hover-text": map.get($colour-palette-brand, "black"),
+  "button-primary-hover-background": map.get($colour-palette-brand, "white"),
+  "button-secondary-text": map.get($colour-palette-brand, "black"),
+  "button-secondary-background": map.get($colour-palette-brand, "yellow"),
+  "button-secondary-hover-text": map.get($colour-palette-brand, "black"),
+  "button-secondary-hover-background": map.get($colour-palette-brand, "white"),
+  "contrast-background": $dark-grey,
+  "contrast-font-base": map.get($colour-palette-brand, "white"),
+  "contrast-font-dark": map.get($colour-palette-brand, "white"),
+  "contrast-font-light": rgba(map.get($colour-palette-brand, "white"), 0.7),
+  "contrast-link": map.get($colour-palette-brand, "blue"),
   "contrast-link-visited": #b9f,
-  "contrast-keyline": rgba($-tna-white, 0.5),
-  "contrast-keyline-dark": rgba($-tna-white, 0.8),
+  "contrast-keyline": rgba(map.get($colour-palette-brand, "white"), 0.5),
+  "contrast-keyline-dark": rgba(map.get($colour-palette-brand, "white"), 0.8),
 );
 
+/*
+=========================================
+DARK THEME
+=========================================
+*/
 $colour-palette-dark: map.merge(
   $colour-palette-default,
   (
-    "page-background": #111,
-    "font-base": rgba($-tna-white, 0.95),
-    "font-dark": $-tna-white,
-    "font-light": rgba($-tna-white, 0.5),
-    "link": $-tna-blue,
+    "page-background": #222,
+    "font-base": rgba(map.get($colour-palette-brand, "white"), 0.95),
+    "font-dark": map.get($colour-palette-brand, "white"),
+    "font-light": rgba(map.get($colour-palette-brand, "white"), 0.5),
+    "link": map.get($colour-palette-brand, "blue"),
     "link-visited": map.get($colour-palette-default, "contrast-link-visited"),
-    "keyline": rgba($-tna-white, 0.5),
-    "keyline-dark": $-tna-white,
-    "accent": accent-colour-dark(),
-    "contrast-background": #222,
+    "keyline": rgba(map.get($colour-palette-brand, "white"), 0.25),
+    "keyline-dark": map.get($colour-palette-brand, "white"),
+    "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,
   (
-    "font-base": $-tna-black,
-    "font-light": $-tna-black,
-    "link": $-tna-black,
-    "link-visited": $-tna-black,
-    "focus-outline": $-tna-orange,
-    "keyline": $-tna-black,
-    "keyline-dark": $-tna-black,
-    "contrast-background": #f0f0f0,
-    "contrast-font-base": $-tna-black,
-    "contrast-font-dark": $-tna-black,
-    "contrast-font-light": rgba($-tna-black, 0.7),
-    "contrast-link": $-tna-black,
-    "contrast-link-visited": $-tna-black,
-    "contrast-keyline": rgba($-tna-black, 0.5),
-    "contrast-keyline-dark": rgba($-tna-black, 0.8),
+    "font-base": map.get($colour-palette-brand, "black"),
+    "font-light": map.get($colour-palette-brand, "black"),
+    "link": map.get($colour-palette-brand, "navy"),
+    "link-visited": map.get($colour-palette-brand, "black"),
+    "focus-outline": map.get($colour-palette-brand, "orange"),
+    "keyline": map.get($colour-palette-brand, "black"),
+    "keyline-dark": map.get($colour-palette-brand, "black"),
+    "contrast-background": map.get($colour-palette-brand, "white"),
+    "contrast-font-base": map.get($colour-palette-brand, "black"),
+    "contrast-font-dark": map.get($colour-palette-brand, "black"),
+    "contrast-font-light": map.get($colour-palette-brand, "black"),
+    "contrast-link": map.get($colour-palette-brand, "navy"),
+    "contrast-link-visited": map.get($colour-palette-brand, "black"),
+    "contrast-keyline": map.get($colour-palette-brand, "black"),
+    "contrast-keyline-dark": map.get($colour-palette-brand, "black"),
   )
 );
 
+/*
+=========================================
+DARK, HIGH_CONTRAST THEME
+=========================================
+*/
 $colour-palette-high-contrast-dark: map.merge(
   $colour-palette-dark,
   (
-    "page-background": $tna-black,
-    "font-base": $-tna-white,
-    "font-light": $-tna-white,
-    "link": $-tna-white,
-    "link-visited": $-tna-white,
-    "keyline": $-tna-white,
-    "contrast-background": #111,
+    "page-background": map.get($colour-palette-brand, "black"),
+    "font-base": map.get($colour-palette-brand, "white"),
+    "font-light": map.get($colour-palette-brand, "white"),
+    "link": map.get($colour-palette-brand, "white"),
+    "link-visited": map.get($colour-palette-brand, "white"),
+    "keyline": map.get($colour-palette-brand, "white"),
+    "button-primary-text": map.get($colour-palette-brand, "black"),
+    "button-primary-background": map.get($colour-palette-brand, "white"),
+    "button-primary-hover-text": map.get($colour-palette-brand, "white"),
+    "button-primary-hover-background": map.get($colour-palette-brand, "black"),
+    "contrast-background": map.get($colour-palette-brand, "black"),
   )
 );

package/nationalarchives/variables/_grid.scss

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

package/nationalarchives/variables/_index.scss

@@ -1,5 +1,5 @@
-@use "assets";
 @use "colour";
 @use "grid";
 @use "media";
+@use "spacing";
 @use "typography";

package/nationalarchives/variables/_media.scss

@@ -1,40 +1,40 @@
 @use "sass:math";
 @use "./typography";
 
-$largest-medium-device-px: 1024 !default;
-$largest-small-device-px: 768 !default;
-$largest-tiny-device-px: 480 !default;
+$-largest-medium-device-px: 1024 !default;
+$-largest-small-device-px: 768 !default;
+$-largest-tiny-device-px: 480 !default;
 
-$smallest-large-device-em: #{math.div(
-    $largest-medium-device-px + 1,
+$-smallest-large-device-em: #{math.div(
+    $-largest-medium-device-px + 1,
     typography.$base-font-size-px
   )}em;
-$largest-medium-device-em: #{math.div(
-    $largest-medium-device-px,
+$-largest-medium-device-em: #{math.div(
+    $-largest-medium-device-px,
     typography.$base-font-size-px
   )}em;
-$smallest-medium-device-em: #{math.div(
-    $largest-small-device-px + 1,
+$-smallest-medium-device-em: #{math.div(
+    $-largest-small-device-px + 1,
     typography.$base-font-size-px
   )}em;
-$largest-small-device-em: #{math.div(
-    $largest-small-device-px,
+$-largest-small-device-em: #{math.div(
+    $-largest-small-device-px,
     typography.$base-font-size-px
   )}em;
-$smallest-small-device-em: #{math.div(
-    $largest-tiny-device-px + 1,
+$-smallest-small-device-em: #{math.div(
+    $-largest-tiny-device-px + 1,
     typography.$base-font-size-px
   )}em;
-$largest-tiny-device-em: #{math.div(
-    $largest-tiny-device-px,
+$-largest-tiny-device-em: #{math.div(
+    $-largest-tiny-device-px,
     typography.$base-font-size-px
   )}em;
 
-$media-large: "(min-width: #{$smallest-large-device-em})";
-$media-lt-large: "(max-width: #{$largest-medium-device-em})";
-$media-medium: "(min-width: #{$smallest-medium-device-em}) and (max-width: #{$largest-medium-device-em})";
-$media-gt-mobile: "(min-width: #{$smallest-medium-device-em})";
-$media-mobile: "(max-width: #{$largest-small-device-em})";
-$media-small: "(min-width: #{$smallest-small-device-em}) and (max-width: #{$largest-small-device-em})";
-$media-gt-tiny: "(min-width: #{$smallest-small-device-em})";
-$media-tiny: "(max-width: #{$largest-tiny-device-em})";
+$media-large: "(min-width: #{$-smallest-large-device-em})";
+$media-lt-large: "(max-width: #{$-largest-medium-device-em})";
+$media-medium: "(min-width: #{$-smallest-medium-device-em}) and (max-width: #{$-largest-medium-device-em})";
+$media-gt-mobile: "(min-width: #{$-smallest-medium-device-em})";
+$media-mobile: "(max-width: #{$-largest-small-device-em})";
+$media-small: "(min-width: #{$-smallest-small-device-em}) and (max-width: #{$-largest-small-device-em})";
+$media-gt-tiny: "(min-width: #{$-smallest-small-device-em})";
+$media-tiny: "(max-width: #{$-largest-tiny-device-em})";

package/nationalarchives/variables/_spacing.scss

@@ -0,0 +1,15 @@
+$spacing: (
+  "xs": 0.5,
+  "s": 1,
+  "m": 2,
+  "l": 3,
+  "xl": 6,
+);
+
+$spacing-mobile: (
+  "xs": 0.5,
+  "s": 0.75,
+  "m": 1.5,
+  "l": 2,
+  "xl": 3,
+);

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.16-prerelease",
   "description": "The National Archives frontend styles",
   "scripts": {
     "start": "storybook dev -p 6006",
@@ -8,7 +8,7 @@
     "test": "node tasks/test-fixtures.js && test-storybook --verbose --stories-json",
     "lint": "prettier --check '{src,.storybook,tasks}/**/*.{js,mjs,scss,json,html}' && stylelint 'src/**/*.scss' && eslint 'src/**/*.mjs'",
     "lint:fix": "prettier --write '{src,.storybook,tasks}/**/*.{js,mjs,scss,json,html}' && stylelint --fix 'src/**/*.scss' && eslint --fix 'src/**/*.mjs'",
-    "package:sass": "sass --style=compressed --quiet-deps src/nationalarchives/all.scss package/nationalarchives/all.css",
+    "package:sass": "sass --style=compressed --embed-sources src/nationalarchives/all.scss package/nationalarchives/all.css",
     "package:scripts": "webpack"
   },
   "repository": {

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

package/nationalarchives/tools/_assets.scss

@@ -1,5 +0,0 @@
-@use "../variables/assets";
-
-@function tna-asset-url($asset) {
-  @return #{assets.$tna-assets-path}/#{$asset};
-}

package/nationalarchives/variables/_assets.scss

@@ -1 +0,0 @@
-$tna-assets-path: "/assets" !default;