@nationalarchives/frontend 0.1.5-prerelease → 0.1.6-prerelease

package/nationalarchives/utilities/_typography.scss

@@ -1,49 +1,164 @@
+@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 url("https://use.typekit.net/hkj3kuz.css");
 
 .tna-template {
-  font-family: "Open Sans", sans-serif;
-  font-size: 16px;
+  font-family: typography.$fontFamilyMain;
+  font-weight: typography.$fontWeightMain;
   -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 {
+    margin: 0 0 2rem;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  a {
+    &,
+    &:link {
+      &:hover {
+        text-decoration-thickness: 3px;
+      }
+
+      &:active {
+        text-decoration-thickness: 4px;
+      }
+    }
+  }
+}
+
+// $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;
+  // }
+}
+
+// $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;
+  }
+}
+
+.tna-template .tna-ul--plain,
+.tna-template .tna-ol--plain {
+  padding-left: 0;
+
+  list-style: none;
 }
 
 .tna-template__body {
-  font-size: 1rem;
+  @include tools.relativeFontSize(16);
   line-height: 1.6;
 }
 
 .tna-heading {
+  margin-bottom: 2rem;
+
+  font-family: typography.$fontFamilyHeading;
+  font-weight: typography.$fontWeightHeading;
 }
 
 .tna-heading--xl {
-  font-size: 4rem;
+  @include tools.relativeFontSize(64);
 }
 
 .tna-heading--l {
-  font-size: 2rem;
+  @include tools.relativeFontSize(32);
 }
 
 .tna-heading--m {
-  font-size: 1.3rem;
+  @include tools.relativeFontSize(20);
 }
 
 .tna-heading--s {
-  font-size: 1.125rem;
+  @include tools.relativeFontSize(18);
 }
 
 .tna-hgroup {
 }
 
+.tna-hgroup__supertitle {
+  @include tools.relativeFontSize(14);
+  font-family: typography.$fontFamilyDetail;
+  font-weight: typography.$fontWeightDetail;
+  text-transform: uppercase;
+
+  .tna-hgroup & {
+    margin: 0;
+  }
+}
+
+.tna-hgroup__title {
+  .tna-hgroup__supertitle {
+    display: block;
+  }
+}
+
 .tna-hgroup--xl {
   .tna-hgroup__supertitle {
   }
 
   .tna-hgroup__title {
-    font-size: 4rem;
+    @include tools.relativeFontSize(64);
   }
 }
 
@@ -52,7 +167,7 @@
   }
 
   .tna-hgroup__title {
-    font-size: 2rem;
+    @include tools.relativeFontSize(32);
   }
 }
 
@@ -61,7 +176,7 @@
   }
 
   .tna-hgroup__title {
-    font-size: 1.3rem;
+    @include tools.relativeFontSize(20);
   }
 }
 
@@ -70,13 +185,6 @@
   }
 
   .tna-hgroup__title {
-    font-size: 1.125rem;
+    @include tools.relativeFontSize(18);
   }
 }
-
-.tna-hgroup__supertitle {
-  text-transform: uppercase;
-}
-
-.tna-hgroup__title {
-}

package/nationalarchives/variables/_all.scss

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

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 @@
+$baseFontSizePx: 16;
+
+$fontFamilyMain: "Open Sans", sans-serif;
+$fontWeightMain: 400;
+
+$fontFamilyHeading: supria-sans-condensed, monospace;
+$fontWeightHeading: 600;
+
+$fontFamilyDetail: "Roboto Mono", monospace;
+$fontWeightDetail: 500;

package/package.json

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

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.
-}