v9.1.0 - Adding spacing utility classes. (#391)

* v9.1.0 - Adding spacing utility classes.

* v9.1.0 - Additional utility classes.

* v9.1.0 - Removed class.

* v9.1.0 - Enforce trump styles.

* v9.1.0 - Update module docs.

CHANGELOG.md

@@ -9,6 +9,16 @@ Future Todo List
 - Update to use latest v2 PIE design tokens
 
 
+v9.1.0
+------------------------------
+*August 19, 2022*
+
+### Added
+- Utilities mixin module containing a new `spacing-map` variable and `spacing-classes` mixin which can be used to generate utility classes for each spacing variable.
+- Optional spacing trump module which generates margin & padding utility classes.
+- `u-noBorder`, `u-noBackground`, and `u-hover--cursor` utility classes.
+
+
 v9.0.2
 ------------------------------
 *August 11, 2022*

package.json

@@ -2,7 +2,7 @@
   "name": "@justeat/fozzie",
   "title": "Fozzie – Just Eat UI Web Framework",
   "description": "UI Web Framework for the Just Eat Global Platform",
-  "version": "9.0.2",
+  "version": "9.1.0",
   "main": "dist/js/index.js",
   "files": [
     "dist/js",

src/scss/_dependencies.scss

@@ -98,6 +98,7 @@
  * These should always come last as they should 'trump' other properties
  */
 @forward 'trumps/utilities';
+@forward 'trumps/spacing';
 @forward 'trumps/rwd';
 
 /**

src/scss/tools/mixins/_index.scss

@@ -9,3 +9,4 @@
 @forward 'alerts';
 @forward 'ratings';
 @forward 'border';
+@forward 'utilities';

src/scss/tools/mixins/_utilities.scss

@@ -0,0 +1,51 @@
+@use '../../settings/variables' as v;
+@use 'sass:map';
+
+// ==========================================================================
+// Utilities Mixins
+// ==========================================================================
+
+/**
+ * Extends default $spacing map with an empty entry at the start
+ */
+$spacing-map: map.merge((
+    '': 0
+), v.$spacing);
+
+//
+// ==========================================================================
+// Spacing classes mixin
+//
+// Generates spacing utility classes
+// ==========================================================================
+//
+// Usage:
+// @include utilities.spacing-classes(utilities.$spacing-map, 'pad', 'top') using ($spacingValue) {
+//     padding-top: spacing(#{$spacingValue});
+// }
+//
+// eg. the output of the above would generate the following
+//
+// .u-pad--top { padding-top: spacing(); }
+// .u-pad-a--top { padding-top: spacing(a); }
+// .u-pad-b--top { padding-top: spacing(b); }
+// .u-pad-c--top { padding-top: spacing(c); }
+// .u-pad-d--top { padding-top: spacing(d); }
+// .u-pad-e--top { padding-top: spacing(e); }
+// .u-pad-f--top { padding-top: spacing(f); }
+// .u-pad-g--top { padding-top: spacing(g); }
+// .u-pad-h--top { padding-top: spacing(h); }
+// .u-pad-i--top { padding-top: spacing(i); }
+// .u-pad-j--top { padding-top: spacing(j); }
+//
+@mixin spacing-classes($spacings, $name, $modifier: '') {
+    @each $spacing-value, $value in $spacings {
+        $separator: if($spacing-value == '', '', '-');
+        $modifier-str: if($modifier == '', '', '--#{$modifier}');
+        $suffix: #{$separator}#{$spacing-value}#{$modifier-str};
+
+        .u-#{$name}#{$suffix} {
+            @content($spacing-value);
+        }
+    }
+}

src/scss/trumps/_spacing.scss

@@ -0,0 +1,98 @@
+@use '../tools/mixins/utilities';
+
+
+@mixin trumps-spacing() {
+    /**
+    * Spacing Trumps
+    * ===================================
+    *
+    * These can be helpful in situations where you need to apply some spacing and do not wish to create a new class name for an element.
+    * The classes generated include spacing for each of our spacing variables in all directions (left.right, top, bottom), including horizontal & vertical, for both padding & margin.
+    *
+    * The format of the generated classes is `.u-{name}--{modifier}`, modifier is an optional parameter.
+    *
+    * eg. a subset of the generated classes
+    *
+    * .u-spacing { margin: spacing(); }
+    * .u-spacing--top { margin-top: spacing(); }
+    * .u-spacing-a--top { margin-top: spacing(a); }
+    * .u-spacing-b--top { margin-top: spacing(b); }
+    *
+    * .u-pad { padding: spacing(); }
+    * .u-pad--top { padding-top: spacing(); }
+    * .u-pad-a--top { padding-top: spacing(a); }
+    * .u-pad-b--top { padding-top: spacing(b); }
+    *
+    * This is an optional component within Fozzie.
+    * If you'd like to use it in your project you can include it by adding `@include trumps-spacing();` into your SCSS dependencies file.
+    */
+
+    //
+    // Margin Utilities
+    // ==========================================================================
+
+    @include utilities.spacing-classes(utilities.$spacing-map, 'spacing') using ($spacingValue) {
+        margin: spacing(#{$spacingValue}) !important;
+    }
+
+    @include utilities.spacing-classes(utilities.$spacing-map, 'spacing', 'top') using ($spacingValue) {
+        margin-top: spacing(#{$spacingValue}) !important;
+    }
+
+    @include utilities.spacing-classes(utilities.$spacing-map, 'spacing', 'bottom') using ($spacingValue) {
+        margin-bottom: spacing(#{$spacingValue}) !important;
+    }
+
+    @include utilities.spacing-classes(utilities.$spacing-map, 'spacing', 'left') using ($spacingValue) {
+        margin-left: spacing(#{$spacingValue}) !important;
+    }
+
+    @include utilities.spacing-classes(utilities.$spacing-map, 'spacing', 'right') using ($spacingValue) {
+        margin-right: spacing(#{$spacingValue}) !important;
+    }
+
+    @include utilities.spacing-classes(utilities.$spacing-map, 'spacing', 'horizontal') using ($spacingValue) {
+        margin-left: spacing(#{$spacingValue}) !important;
+        margin-right: spacing(#{$spacingValue}) !important;
+    }
+
+    @include utilities.spacing-classes(utilities.$spacing-map, 'spacing', 'vertical') using ($spacingValue) {
+        margin-bottom: spacing(#{$spacingValue}) !important;
+        margin-top: spacing(#{$spacingValue}) !important;
+    }
+
+
+    //
+    // Padding Utilities
+    // ==========================================================================
+
+    @include utilities.spacing-classes(utilities.$spacing-map, 'pad') using ($spacingValue) {
+        padding: spacing(#{$spacingValue}) !important;
+    }
+
+    @include utilities.spacing-classes(utilities.$spacing-map, 'pad', 'top') using ($spacingValue) {
+        padding-top: spacing(#{$spacingValue}) !important;
+    }
+
+    @include utilities.spacing-classes(utilities.$spacing-map, 'pad', 'bottom') using ($spacingValue) {
+        padding-bottom: spacing(#{$spacingValue}) !important;
+    }
+
+    @include utilities.spacing-classes(utilities.$spacing-map, 'pad', 'left') using ($spacingValue) {
+        padding-left: spacing(#{$spacingValue}) !important;
+    }
+
+    @include utilities.spacing-classes(utilities.$spacing-map, 'pad', 'right') using ($spacingValue) {
+        padding-right: spacing(#{$spacingValue}) !important;
+    }
+
+    @include utilities.spacing-classes(utilities.$spacing-map, 'pad', 'horizontal') using ($spacingValue) {
+        padding-left: spacing(#{$spacingValue}) !important;
+        padding-right: spacing(#{$spacingValue}) !important;
+    }
+
+    @include utilities.spacing-classes(utilities.$spacing-map, 'pad', 'vertical') using ($spacingValue) {
+        padding-bottom: spacing(#{$spacingValue}) !important;
+        padding-top: spacing(#{$spacingValue}) !important;
+    }
+}

src/scss/trumps/_utilities.scss

@@ -94,6 +94,14 @@
         background-color: dt.$color-white;
     }
 
+    //
+    // Border Utilities
+    // ==========================================================================
+
+    .u-noBorder {
+        border: none !important;
+    }
+
     .u-bordered {
         @extend %u-bordered;
     }
@@ -444,4 +452,14 @@
             }
         }
     }
+
+    .u-noBackground {
+        background: none !important;
+    }
+
+    .u-hover--cursor {
+        &:hover {
+            cursor: pointer !important;
+        }
+    }
 }