Update override classes (#41)

* Update override classes

* Refactor space generators

* Lint

* Allow former class of tna-visually-hidden

* Use tna-visually-hidden by default

* Add mobile overrides story

.storybook/storybook.scss

@@ -132,3 +132,14 @@
 .tna-picture--demo {
   max-width: 480px;
 }
+
+.tna-spacing-demo {
+  p {
+    padding-right: 0.5rem;
+    padding-left: 0.5rem;
+
+    @include colour.colour-background("background-tint");
+
+    // @include colour.colour-border("keyline", 1px, solid, top);
+  }
+}

CHANGELOG.md

@@ -10,8 +10,14 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Added
 
 - Initial concept of text detail elements
+- Elements can be hidden on certain devices with `tna-!--hide-on-[large|medium|small|tiny]`
 
 ### Changed
+
+- `tna-visually-hidden` could instead use the class `tna-!--visually-hidden` (will deprecate one of these in the future)
+- Changed Node version from `lts/hydrogen` to `lts/iron`
+- Update the `spacing` and `spacing-mobile` functions in `spacing` to `space` and `space-mobile`
+
 ### Deprecated
 ### Removed
 ### Fixed
@@ -50,11 +56,11 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Tweak spacing on hero component and `<hr>` elements
 - Added `tna-button-group` around newsletter subscription button in the footer
 - Updated Storybook to `7.5.1`
-- Changed Node version from `lts/hydrogen` to `lts/iron`
 
 ### Removed
 
 - The black accent is no longer applied by default
+- Removed margin and padding overrides for device-specific sizes (e.g. `tna-!--margin-top-xl-small`)
 
 ### Fixed
 

govuk-prototype-kit.config.json

@@ -9,7 +9,7 @@
     "/nationalarchives/assets"
   ],
   "stylesheets": [
-    "/nationalarchives/all.css"
+    "/nationalarchives/prototype-kit.css"
   ],
   "templates": [
     {

src/nationalarchives/components/gallery/gallery.scss

@@ -21,7 +21,7 @@
     display: flex;
     flex-direction: column;
     align-items: center;
-    gap: spacing.spacing("l");
+    gap: spacing.space("l");
 
     &:focus {
       outline: none !important;

src/nationalarchives/stories/utilities/overrides/overrides.mdx

@@ -5,42 +5,49 @@ import * as OverrideStories from './overrides.stories';
 
 # Overrides
 
-## Properties
+## Options
 
-Property options: `margin`, `padding`
+`property`:
 
-```css
-tna-!--no-[property]-[direction]
-```
+- `margin`
+- `padding`
 
-### No margin/padding
-
-Direction options:
+`direction`:
 
 - `top`
 - `bottom`
 - `vertical` - `top` and `bottom`
 
-```css
+## Removing space
+
+```
+// For all devices
 tna-!--no-[property]-[direction]
 ```
 
-### Sizes
+`device` options (optional):
 
-Size options: `xs`, `s`, `m`, `l`, `xl`, `xxl`
+- `large`
+- `medium`
+- `small`
+- `tiny`
 
-```css
-tna-!--[property]-[direction]-[size]
 ```
-
-### Responsive
-
-Device options: `medium`, `small`, `tiny`
-
-```css
+// For a specific device size
 tna-!--no-[property]-[direction]-[device]
-tna-!--[property]-[direction]-[size]-[device]
 ```
 
+## Adding space
 
+`size` options:
 
+- `xs`
+- `s`
+- `m`
+- `l`
+- `xl`
+- `xxl`
+
+```css
+tna-!--[property]-[direction]-[size]
+```

src/nationalarchives/stories/utilities/overrides/overrides.stories.js

@@ -1,3 +1,5 @@
+import { customViewports } from "../../../../../.storybook/viewports";
+
 const argTypes = {};
 
 export default {
@@ -6,14 +8,28 @@ export default {
 };
 
 const Template = () => {
-  return `<p>Lorem ipsum</p>
+  return `<div class="tna-spacing-demo">
+  <p>Lorem ipsum</p>
   <p class="tna-!--no-margin-top">Lorem ipsum (tna-!--no-margin-top)</p>
   <p class="tna-!--margin-top-xs">Lorem ipsum (tna-!--margin-top-xs)</p>
   <p class="tna-!--margin-top-s">Lorem ipsum (tna-!--margin-top-s)</p>
   <p class="tna-!--margin-top-m">Lorem ipsum (tna-!--margin-top-m)</p>
   <p class="tna-!--margin-top-l">Lorem ipsum (tna-!--margin-top-l)</p>
-  <p class="tna-!--margin-top-xl">Lorem ipsum (tna-!--margin-top-xl)</p>`;
+  <p class="tna-!--margin-top-xl">Lorem ipsum (tna-!--margin-top-xl)</p>
+  <p class="tna-!--margin-top-xxl">Lorem ipsum (tna-!--margin-top-xxl)</p>
+</div>`;
 };
 
 export const Margin = Template.bind({});
 Margin.args = {};
+
+export const MarginMobile = Template.bind({});
+MarginMobile.parameters = {
+  viewport: {
+    defaultViewport: "small",
+  },
+  chromatic: {
+    viewports: [customViewports["small"].styles.width.replace(/px$/, "")],
+  },
+};
+MarginMobile.args = {};

src/nationalarchives/tools/_spacing.scss

@@ -1,5 +1,6 @@
 @use "sass:map";
 @use "../variables/spacing";
+@use "../tools/media";
 
 %space-above {
   margin-top: 2rem;
@@ -13,10 +14,98 @@
   @extend %space-above;
 }
 
-@function spacing($size) {
+@function space($size) {
   @return map.get(spacing.$spacing, $size);
 }
 
-@function spacing-mobile($size) {
+@function space-mobile($size) {
   @return map.get(spacing.$spacing-mobile, $size);
 }
+
+@mixin no-spacing-generator($suffix: "") {
+  @if $suffix != "" {
+    $suffix: "-" + $suffix;
+  }
+  @each $property in margin, padding {
+    @each $direction in top, bottom {
+      $combined-direction: "";
+      @if $direction == top or $direction == bottom {
+        $combined-direction: vertical;
+      } @else if $direction == right or $direction == left {
+        $combined-direction: horizontal;
+      }
+      @if $combined-direction {
+        .tna-\!--no-#{$property}-#{$direction}#{$suffix},
+        .tna-\!--no-#{$property}-#{$combined-direction}#{$suffix} {
+          #{$property}-#{$direction}: 0 !important;
+        }
+      } @else {
+        .tna-\!--no-#{$property}-#{$direction}#{$suffix} {
+          #{$property}-#{$direction}: 0 !important;
+        }
+      }
+    }
+  }
+}
+
+@mixin spacing-generator($suffix: "") {
+  @each $property in margin, padding {
+    @each $direction in top, bottom {
+      @each $size, $amount in spacing.$spacing {
+        @if $direction == all {
+          .tna-\!--#{$property}-#{$size} {
+            #{$property}: #{$amount} !important;
+          }
+        } @else {
+          $combined-direction: "";
+          @if $direction == top or $direction == bottom {
+            $combined-direction: vertical;
+          } @else if $direction == right or $direction == left {
+            $combined-direction: horizontal;
+          }
+          @if $combined-direction {
+            .tna-\!--#{$property}-#{$direction}-#{$size},
+            .tna-\!--#{$property}-#{$combined-direction}-#{$size} {
+              #{$property}-#{$direction}: #{$amount} !important;
+            }
+          } @else {
+            .tna-\!--#{$property}-#{$direction}-#{$size} {
+              #{$property}-#{$direction}: #{$amount} !important;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  @include media.on-mobile {
+    @each $property in margin, padding {
+      @each $direction in top, bottom {
+        @each $size, $amount in spacing.$spacing-mobile {
+          @if $direction == all {
+            .tna-\!--#{$property}-#{$size} {
+              #{$property}: #{$amount} !important;
+            }
+          } @else {
+            $combined-direction: "";
+            @if $direction == top or $direction == bottom {
+              $combined-direction: vertical;
+            } @else if $direction == right or $direction == left {
+              $combined-direction: horizontal;
+            }
+            @if $combined-direction {
+              .tna-\!--#{$property}-#{$direction}-#{$size},
+              .tna-\!--#{$property}-#{$combined-direction}-#{$size} {
+                #{$property}-#{$direction}: #{$amount} !important;
+              }
+            } @else {
+              .tna-\!--#{$property}-#{$direction}-#{$size} {
+                #{$property}-#{$direction}: #{$amount} !important;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}

src/nationalarchives/utilities/_a11y.scss

@@ -1,6 +1,7 @@
 @use "../tools/colour";
 
-.tna-visually-hidden {
+.tna-visually-hidden,
+.tna-\!--visually-hidden {
   width: 1px !important;
   height: 1px !important;
   margin: 0 !important;

src/nationalarchives/utilities/_overrides.scss

@@ -1,52 +1,32 @@
-@use "../variables/spacing";
+@use "sass:map";
 @use "../tools/media";
+@use "../tools/spacing";
 
-@mixin no-spacing-generator($suffix: "") {
-  @if $suffix != "" {
-    $suffix: "-" + $suffix;
-  }
-
-  @each $property in margin, padding {
-    @each $direction in top, bottom {
-      .tna-\!--no-#{$property}-#{$direction}#{$suffix},
-      .tna-\!--no-#{$property}-vertical#{$suffix} {
-        #{$property}-#{$direction}: 0 !important;
-      }
-    }
+@mixin hide-on($suffix) {
+  .tna-\!--hide-on-#{$suffix} {
+    display: none;
   }
 }
 
-@mixin overrides($spacing, $suffix: "") {
-  @if $suffix != "" {
-    $suffix: "-" + $suffix;
-  }
+@include spacing.no-spacing-generator;
+@include spacing.spacing-generator;
 
-  @each $property in margin, padding {
-    @each $direction in top, bottom {
-      @each $size, $amount in $spacing {
-        .tna-\!--#{$property}-#{$direction}-#{$size}#{$suffix},
-        .tna-\!--#{$property}-vertical-#{$size}#{$suffix} {
-          #{$property}-#{$direction}: #{$amount} !important;
-        }
-      }
-    }
-  }
+@include media.on-large {
+  @include spacing.no-spacing-generator("large");
+  @include hide-on("large");
 }
 
-@include no-spacing-generator;
-@include overrides(spacing.$spacing);
-
 @include media.on-medium {
-  @include no-spacing-generator("medium");
-  @include overrides(spacing.$spacing, "medium");
+  @include spacing.no-spacing-generator("medium");
+  @include hide-on("medium");
 }
 
 @include media.on-small {
-  @include no-spacing-generator("small");
-  @include overrides(spacing.$spacing-mobile, "small");
+  @include spacing.no-spacing-generator("small");
+  @include hide-on("small");
 }
 
 @include media.on-tiny {
-  @include no-spacing-generator("tiny");
-  @include overrides(spacing.$spacing-mobile, "tiny");
+  @include spacing.no-spacing-generator("tiny");
+  @include hide-on("tiny");
 }

src/nationalarchives/variables/_spacing.scss

@@ -1,17 +1,22 @@
+@use "sass:map";
+
 $spacing: (
   "xs": 0.5rem,
   "s": 1rem,
   "m": 2rem,
   "l": 3rem,
   "xl": 5rem,
   "xxl": 8rem,
-);
+) !default;
 
-$spacing-mobile: (
-  "xs": 0.5rem,
-  "s": 0.75rem,
-  "m": 1.5rem,
-  "l": 2rem,
-  "xl": 3rem,
-  "xxl": 5rem,
-);
+$spacing-mobile: map.merge(
+  $spacing,
+  (
+    "xs": 0.5rem,
+    "s": 0.75rem,
+    "m": 1.5rem,
+    "l": 2rem,
+    "xl": 3rem,
+    "xxl": 5rem,
+  )
+) !default;