From 1f7c83ea960e40707cf3fc364c6e6512c33a70ff Mon Sep 17 00:00:00 2001
From: Patrick Cartlidge <patrick.cartlidge@digital.cabinet-office.gov.uk>
Date: Fri, 24 Jun 2022 16:13:58 +0100
Subject: [PATCH] Add static spacing override classes to overrides

New spacing override classes which use the static spacing at all
viewports. The existing spacing override classes use the
responsive spacing helper, and so will have different spacing at
different viewports. These helper classes are used in components in
govuk_publishing_components and the option to use not-responsive spacing
would be useful in specific areas of GOV.UK.
---
 src/govuk/overrides/_spacing.scss | 59 ++++++++++++++++++++++++-------
 1 file changed, 47 insertions(+), 12 deletions(-)

diff --git a/src/govuk/overrides/_spacing.scss b/src/govuk/overrides/_spacing.scss
index 7c21fa64d8..1113077043 100644
--- a/src/govuk/overrides/_spacing.scss
+++ b/src/govuk/overrides/_spacing.scss
@@ -2,6 +2,8 @@
 /// @group overrides
 ////
 
+// stylelint-disable declaration-no-important
+
 /// Directions for spacing
 ///
 /// @type Map
@@ -14,25 +16,27 @@ $_spacing-directions: (
   "left"
 ) !default;
 
-/// Spacing override classes
+/// Generate responsive spacing override classes
 ///
 /// Generate spacing override classes for the given property (e.g. margin)
-/// for each point in the spacing scale.
+/// for each point in the responsive spacing scale.
 ///
 /// @param {String} $property - Property to add spacing to (e.g. 'margin')
 ///
-/// @example scss
-///   .govuk-\!-margin-0 {
-///      margin: 0;
-///   }
+/// @example css
+///  .govuk-\!-margin-4 {
+///    margin: 15px !important;
+///  }
 ///
-///  .govuk-\!-margin-top-1 {
-///     margin-top: [whatever spacing point 1 is...]
-///   }
+///  @media (min-width: 40.0625em) {
+///    .govuk-\!-margin-4 {
+///      margin: 20px !important;
+///    }
+///  }
 ///
 /// @access private
 
-@mixin _govuk-generate-spacing-overrides($property) {
+@mixin _govuk-generate-responsive-spacing-overrides($property) {
   // For each point in the spacing scale (defined in settings), create an
   // override that affects all directions...
   @each $scale-point, $scale-map in $govuk-spacing-responsive-scale {
@@ -52,7 +56,38 @@ $_spacing-directions: (
   }
 }
 
+/// Generate static spacing override classes
+///
+/// Generate spacing override classes for the given property (e.g. margin)
+/// for each point in the non-responsive spacing scale.
+///
+/// @param {String} $property - Property to add spacing to (e.g. 'margin')
+///
+/// @example css
+///   .govuk-\!-static-margin-4 {
+///      margin: 20px !important;
+///   }
+///
+/// @access private
+@mixin _govuk-generate-static-spacing-overrides($property) {
+  @each $spacing-point in map-keys($govuk-spacing-points) {
+    .govuk-\!-#{$property}-static-#{$spacing-point} {
+      #{$property}: govuk-spacing($spacing-point) !important;
+    }
+
+    @each $direction in $_spacing-directions {
+
+      .govuk-\!-#{$property}-#{$direction}-static-#{$spacing-point} {
+        #{$property}-#{$direction}: govuk-spacing($spacing-point) !important;
+      }
+    }
+  }
+}
+
 @include govuk-exports("govuk/overrides/spacing") {
-  @include _govuk-generate-spacing-overrides("margin");
-  @include _govuk-generate-spacing-overrides("padding");
+  @include _govuk-generate-responsive-spacing-overrides("margin");
+  @include _govuk-generate-responsive-spacing-overrides("padding");
+
+  @include _govuk-generate-static-spacing-overrides("margin");
+  @include _govuk-generate-static-spacing-overrides("padding");
 }