Add responsive variations of spacing utilities

.changeset/curly-masks-sing.md

@@ -0,0 +1,5 @@
+---
+'@cloudfour/patterns': minor
+---
+
+Add responsive variations of spacing utility classes

src/prototypes/team/example/team-articles-page2.twig

@@ -37,15 +37,18 @@
     }
   } only %}
 
-  {% embed '@cloudfour/objects/container/container.twig' with { label: avatar.name, class: 'o-container--pad heading-container'} %}
+  {% embed '@cloudfour/objects/container/container.twig' with {
+    label: avatar.name,
+    class: 'o-container--pad'
+  } %}
     {% block content %}
-      <div class="main-container">
+      <div class="u-pad-block-start-5 u-pad-block-start-3@l u-pad-block-end-6">
         {% include '@cloudfour/components/heading/heading.twig' with {
           level: 0,
           content: 'Articles by Jason, Page 2',
-          class: 'c-heading--light article-heading'
+          class: 'c-heading--light'
         } only %}
-        <div class="article-container">
+        <div class="u-pad-block-start-5 u-pad-block-end-6">
           {% include '@cloudfour/objects/deck/demo/articles.twig' with {
             "items": [
               {
@@ -127,64 +130,66 @@
             "horizontalBreakpoint": "none"
           } only %}
         </div>
-        {% include '@cloudfour/components/pagination/pagination.twig' with {
-          "pagination": {
-            "mid_size": 2,
-            "current": 2,
-            "total": 36,
-            "prev": {
-              "title": 1,
-              "text": 1,
-              "name": 1,
-              "current": false,
-              "link": "#page-1"
-            },
-            "next": {
-              "title": 3,
-              "text": 3,
-              "name": 3,
-              "current": false,
-              "link": "#page-3"
-            },
-            "pages": [
-              {
+        <div class="u-pad-block-start-6">
+          {% include '@cloudfour/components/pagination/pagination.twig' with {
+            "pagination": {
+              "mid_size": 2,
+              "current": 2,
+              "total": 36,
+              "prev": {
                 "title": 1,
                 "text": 1,
                 "name": 1,
                 "current": false,
                 "link": "#page-1"
               },
-              {
-                "title": 2,
-                "text": 2,
-                "name": 2,
-                "current": true,
-                "link": false
-              },
-              {
+              "next": {
                 "title": 3,
                 "text": 3,
                 "name": 3,
                 "current": false,
                 "link": "#page-3"
               },
-              {
-                "title": 4,
-                "text": 4,
-                "name": 4,
-                "current": false,
-                "link": "#page-4"
-              },
-              {
-                "title": 5,
-                "text": 5,
-                "name": 5,
-                "current": false,
-                "link": "#page-5"
-              }
-            ]
-          }
-        } only %}
+              "pages": [
+                {
+                  "title": 1,
+                  "text": 1,
+                  "name": 1,
+                  "current": false,
+                  "link": "#page-1"
+                },
+                {
+                  "title": 2,
+                  "text": 2,
+                  "name": 2,
+                  "current": true,
+                  "link": false
+                },
+                {
+                  "title": 3,
+                  "text": 3,
+                  "name": 3,
+                  "current": false,
+                  "link": "#page-3"
+                },
+                {
+                  "title": 4,
+                  "text": 4,
+                  "name": 4,
+                  "current": false,
+                  "link": "#page-4"
+                },
+                {
+                  "title": 5,
+                  "text": 5,
+                  "name": 5,
+                  "current": false,
+                  "link": "#page-5"
+                }
+              ]
+            }
+          } only %}
+        </div>
       </div>
     {% endblock %}
   {% endembed %}

src/prototypes/team/team.stories.js

@@ -4,7 +4,6 @@ import teamArticlePage2 from './example/team-articles-page2.twig';
 import avatars from './data/avatars.json';
 import './example/team-list.scss';
 import './example/team-individual.scss';
-import './example/team-article-page2.scss';
 
 export default {
   title: 'Prototypes/Team Page',

src/utilities/spacing/demo/responsive.twig

@@ -0,0 +1,5 @@
+<div class="demo-u-space-directions">
+  <div>
+    <div class="u-space-n3 u-space-1@s u-space-3@m u-space-6@l">u-space-n3 u-space-1@s u-space-3@m u-space-6@l</div>
+  </div>
+</div>

src/utilities/spacing/spacing.scss

@@ -1,27 +1,25 @@
-@use 'sass:math';
 @use "../../compiled/tokens/scss/scale";
+@use '../../mixins/media-query';
 @use '../../mixins/ms';
 
-@mixin direction-utilities($property, $name, $value) {
+@mixin _direction-utilities($property, $name, $value, $suffix: '') {
   $value: $value !important;
 
   @if $property != margin and $property != padding {
     @error 'Unknown direction utility property #{$property}.';
   }
 
-  &-#{$name} {
+  &-#{$name}#{$suffix} {
     @if $property == margin {
       margin: $value;
     } @else {
       padding: $value;
     }
   }
 
-  /**
-   * Ideally we could use the *-block shorthand, but it is not as well
-   * supported in browsers.
-   */
-  &-block-#{$name} {
+  // Ideally we could use the *-block shorthand, but it is not as well supported
+  // in browsers.
+  &-block-#{$name}#{$suffix} {
     @if $property == margin {
       margin-block-end: $value;
       margin-block-start: $value;
@@ -31,27 +29,25 @@
     }
   }
 
-  &-block-start-#{$name} {
+  &-block-start-#{$name}#{$suffix} {
     @if $property == margin {
       margin-block-start: $value;
     } @else {
       padding-block-start: $value;
     }
   }
 
-  &-block-end-#{$name} {
+  &-block-end-#{$name}#{$suffix} {
     @if $property == margin {
       margin-block-end: $value;
     } @else {
       padding-block-end: $value;
     }
   }
 
-  /**
-   * Ideally we could use the *-inline shorthand, but it is not as well
-   * supported in browsers.
-   */
-  &-inline-#{$name} {
+  // Ideally we could use the *-inline shorthand, but it is not as well
+  // supported in browsers.
+  &-inline-#{$name}#{$suffix} {
     @if $property == margin {
       margin-inline-end: $value;
       margin-inline-start: $value;
@@ -61,15 +57,15 @@
     }
   }
 
-  &-inline-start-#{$name} {
+  &-inline-start-#{$name}#{$suffix} {
     @if $property == margin {
       margin-inline-start: $value;
     } @else {
       padding-inline-start: $value;
     }
   }
 
-  &-inline-end-#{$name} {
+  &-inline-end-#{$name}#{$suffix} {
     @if $property == margin {
       margin-inline-end: $value;
     } @else {
@@ -78,17 +74,19 @@
   }
 }
 
-@mixin scale-utilities(
+@mixin _scale-utilities(
   $property,
   $minimum-step: scale.$modular-minimum-step,
   $maximum-step: scale.$modular-maximum-step,
-  $base: 1em
+  $base: 1em,
+  $suffix: ''
 ) {
   @if $property == margin {
-    @include direction-utilities(
+    @include _direction-utilities(
       $property: $property,
       $name: auto,
-      $value: auto
+      $value: auto,
+      $suffix: $suffix
     );
   }
 
@@ -98,24 +96,46 @@
   {
     $name: ms.step-class-segment($step);
 
-    @include direction-utilities(
+    @include _direction-utilities(
       $property: $property,
       $name: $name,
-      $value: ms.step($step, $base)
+      $value: ms.step($step, $base),
+      $suffix: $suffix
     );
   }
 
-  @include direction-utilities($property: $property, $name: none, $value: 0);
+  @include _direction-utilities(
+    $property: $property,
+    $name: none,
+    $value: 0,
+    $suffix: $suffix
+  );
 }
 
 .u-pad {
-  @include scale-utilities($property: padding);
+  @include _scale-utilities($property: padding);
 }
 
 .u-space {
-  @include scale-utilities($property: margin);
+  @include _scale-utilities($property: margin);
 }
 
 .u-pull {
-  @include scale-utilities($property: margin, $base: -1em);
+  @include _scale-utilities($property: margin, $base: -1em);
+}
+
+@include media-query.breakpoint-loop() using ($key) {
+  $suffix: '\\@#{$key}';
+
+  .u-pad {
+    @include _scale-utilities($property: padding, $suffix: $suffix);
+  }
+
+  .u-space {
+    @include _scale-utilities($property: margin, $suffix: $suffix);
+  }
+
+  .u-pull {
+    @include _scale-utilities($property: margin, $base: -1em, $suffix: $suffix);
+  }
 }

src/utilities/spacing/spacing.stories.mdx

@@ -1,6 +1,7 @@
 import { Story, Canvas, Meta } from '@storybook/addon-docs/blocks';
 import logicalPropertiesDemo from './demo/logical-properties.twig';
 import directionsDemo from './demo/directions.twig';
+import responsiveDemo from './demo/responsive.twig';
 import './demo/styles.scss';
 import tokens from '../../compiled/tokens/js/tokens';
 const minimumStep = tokens.number.scale.modular.minimum_step.value;
@@ -118,3 +119,11 @@ The following utilities _pull_ an element one direction or another by applying a
     })}
   </Story>
 </Canvas>
+
+## Responsive spacing
+
+All of these utilities include responsive variations. Appending `@{breakpoint}` to the end of the class name will cause the utility to change for the given breakpoint.
+
+<Canvas>
+  <Story name="Responsive">{responsiveDemo()}</Story>
+</Canvas>