SU-SWS · yvonnetangsu · Nov 5, 2020 · Aug 4, 2020 · Oct 3, 2020 · Oct 3, 2020
diff --git a/.nvmrc b/.nvmrc
@@ -1 +1 @@
-14.8.0
+14
diff --git a/.tugboat/config.yml b/.tugboat/config.yml
@@ -13,7 +13,7 @@ services:
           curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.0/install.sh | bash
           NVM_DIR="$HOME/.nvm"
           [ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"
-          nvm install 14.8.0
+          nvm install
           cd styleguide
           nvm use
           npm install
@@ -24,6 +24,7 @@ services:
           NVM_DIR="$HOME/.nvm"
           [ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"
           cd styleguide
+          nvm install
           nvm use
           npm install "https://github.com/su-sws/decanter.git#${TUGBOAT_GITHUB_HEAD}" --save --force
           npm audit fix

diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,12 @@
 # Changelog
 
+Version 6.2.0                      2020-11-04
+---------------------------------------------
+- Added responsive-spacing mixin to replace modular-spacing
+- Added deprecation notices for Noto-Sans and Kalam fonts
+- D8CORE-1261: Revised table styles. (#617)
+- D8CORE-1623: Adding a mixin and icons for `@include icon` (#690)
+
 Version 6.1.3                      2020-09-23
 ---------------------------------------------
 
@@ -139,7 +146,7 @@ Version 5.1.0                      2019-10-31
 - New Mixin: `link-glyph()`
 - New Mixin: `link-icon()`
 - New Function: `breakpoint-previous`
-- New Typography styles: 	
+- New Typography styles:
   -- `.su-type-a`: Display Type A (used for H1 heading)
   -- `.su-type-b`: Display Type B (used for H2 heading)
   -- `.su-type-c`: Display Type C (used for H3 heading)

diff --git a/DEPRECATIONS.md b/DEPRECATIONS.md
@@ -1,6 +1,6 @@
 # Deprecation Notices
 
-*Deprecated in 6.1.14*
-
+*Deprecated in 6.2.0*
+- `modular-spacing` mixin will be removed in Version 7. Please use `responsive-spacing` instead.
 - Noto Sans Font will be removed in Version 7
 - Kalam Font will be removed in Version 7.
diff --git a/README.md b/README.md
@@ -1,5 +1,5 @@
 # [Decanter](https://github.com/SU-SWS/decanter)
-##### Version: 6.1.3-dev
+##### Version: 6.2.0
 
 Changelog: [CHANGELOG.md](CHANGELOG.md)
 
@@ -21,5 +21,5 @@ Accessibility
 ---
 [![WCAG Conformance 2.0 AA Badge](https://www.w3.org/WAI/wcag2AA-blue.png)](https://www.w3.org/TR/WCAG20/)
 
-Evaluation Date: 2020-09-01  
+Evaluation Date: 2020-09-01
 This project conforms to level AA WCAG 2.0 standards as required by the university's accessibility policy. For more information on the policy please visit: [https://ucomm.stanford.edu/policies/accessibility-policy.html](https://ucomm.stanford.edu/policies/accessibility-policy.html).
diff --git a/UPGRADE.md b/UPGRADE.md
@@ -1,5 +1,10 @@
 # Upgrade
 
+Upgrade from version 6.1.4 to 6.2.0
+-----------------------------------
+
+Find and replace all occurances of modular-spacing with responsive-spacing.
+
 Upgrade from version 6.0.6 to 6.1.0
 -----------------------------------
 

diff --git a/core/dist/css/decanter.css b/core/dist/css/decanter.css
diff --git a/core/dist/js/decanter-no-markup.js b/core/dist/js/decanter-no-markup.js
diff --git a/core/dist/js/decanter.js b/core/dist/js/decanter.js
diff --git a/core/src/scss/components/accordion/_accordion.scss b/core/src/scss/components/accordion/_accordion.scss
@@ -31,7 +31,7 @@
 }
 
 .su-accordion__collapse-all {
-  @include modular-spacing('margin', null null 2);
+  @include responsive-spacing('margin', null null 2);
   @include margin(null null null 1.2em);
 }
 
@@ -51,7 +51,7 @@
 
   > .su-accordion__button {
     all: inherit;
-    @include modular-spacing('padding', 0);
+    @include responsive-spacing('padding', 0);
     @include fancy-hover($su-color-black, $su-color-black, 'left', 6px);
     font-weight: $su-font-bold;
     position: relative;
@@ -90,7 +90,7 @@
 }
 
 .su-accordion__content {
-  @include modular-spacing('padding', 0 0 null);
+  @include responsive-spacing('padding', 0 0 null);
   height: auto;
 
   &[aria-hidden="true"] {
@@ -101,7 +101,7 @@
 }
 
 .su-accordion__cta {
-  @include modular-spacing('margin', 3 null null);
+  @include responsive-spacing('margin', 3 null null);
   @include margin(null auto);
   display: block;
   width: fit-content;

diff --git a/core/src/scss/components/alert/_alert.scss b/core/src/scss/components/alert/_alert.scss
@@ -34,7 +34,7 @@
 // Dismiss close button.
 // -----------------------------------------------------------------------------
 .su-alert__dismiss {
-  @include modular-spacing('margin', null null null 1);
+  @include responsive-spacing('margin', null null null 1);
   order: 3;
   height: 100%;
   align-content: flex-end;
@@ -71,7 +71,7 @@
 // Flex header with the icon and message type label.
 // -----------------------------------------------------------------------------
 .su-alert__header {
-  @include modular-spacing('margin', null 1 null null);
+  @include responsive-spacing('margin', null 1 null null);
   order: 1;
   flex-shrink: 1;
 
@@ -197,7 +197,7 @@
 }
 
 .su-alert__text + .su-alert__footer {
-  @include modular-spacing('margin', 0 null null null);
+  @include responsive-spacing('margin', 0 null null null);
 }
 
 .su-alert__dismiss ~ .su-alert__body {

diff --git a/core/src/scss/components/card/_card--horizontal.scss b/core/src/scss/components/card/_card--horizontal.scss
@@ -9,7 +9,7 @@
   &.su-card--link > a {
     // Set up the grid for this variant.
     @include display-grid;
-    @include modular-spacing('padding', 2);
+    @include responsive-spacing('padding', 2);
 
     @each $key, $breakpoint in $su-grid-media {
       @include grid-media($key) {

diff --git a/core/src/scss/components/card/_card--icon.scss b/core/src/scss/components/card/_card--icon.scss
@@ -3,11 +3,11 @@
 .su-card--icon {
   &,
   &-font {
-    @include modular-spacing('padding', 2 null null);
+    @include responsive-spacing('padding', 2 null null);
     text-align: center;
 
     .su-card__contents {
-      @include modular-spacing('padding', 0 null null);
+      @include responsive-spacing('padding', 0 null null);
     }
 
     &.su-card--minimal {

diff --git a/core/src/scss/components/card/_card--minimal.scss b/core/src/scss/components/card/_card--minimal.scss
@@ -16,7 +16,7 @@
   &:not(.su-card--icon) {
     .su-card__contents {
       // Reduce top padding to move the contents closer to the image.
-      @include modular-spacing('padding', 1 null null);
+      @include responsive-spacing('padding', 1 null null);
 
       @include grid-media-only(xs) {
         @include padding(0 null null);

diff --git a/core/src/scss/components/date-stacked/_date-stacked.scss b/core/src/scss/components/date-stacked/_date-stacked.scss
@@ -12,7 +12,7 @@
 // Style guide: Simple.Date Stacked
 //
 .su-date-stacked {
-  @include modular-spacing('padding', 0);
+  @include responsive-spacing('padding', 0);
   background: color(bg--reverse);
   color: color(text--reverse);
   max-width: 87px;

diff --git a/core/src/scss/components/global-footer/_global-footer.scss b/core/src/scss/components/global-footer/_global-footer.scss
@@ -16,7 +16,7 @@
 // Global styles for the global footer.
 .su-global-footer {
   @include font-smoothing;
-  @include modular-spacing('padding', 1 null);
+  @include responsive-spacing('padding', 1 null);
   background-color: color(brand);
   color: color(link--reverse);
 
@@ -58,7 +58,7 @@
 // The Logo.
 .su-global-footer__brand {
   @include padding(0.5rem null null);
-  @include modular-spacing('margin', null null -2);
+  @include responsive-spacing('margin', null null -2);
   text-align: center;
 
   a {

diff --git a/core/src/scss/components/hero/_hero--caption.scss b/core/src/scss/components/hero/_hero--caption.scss
@@ -27,7 +27,7 @@
 
   .su-hero__content {
     @include centered-column;
-    @include modular-spacing(padding, -1 null null);
+    @include responsive-spacing(padding, -1 null null);
     text-align: right;
     display: block;
     clear: both;

diff --git a/core/src/scss/components/local-footer/_local-footer.scss b/core/src/scss/components/local-footer/_local-footer.scss
@@ -44,7 +44,7 @@
   // Lockup placement.
   .su-lockup {
     @include grid-media-between('xs', 'md') {
-      @include modular-spacing('margin-bottom', 2);
+      @include responsive-spacing('margin-bottom', 2);
     }
 
     @include grid-media('lg') {
@@ -60,7 +60,7 @@
     border-radius: 7px;
 
     @include grid-media-between('xs', 'md') {
-      @include modular-spacing('margin-bottom', 1);
+      @include responsive-spacing('margin-bottom', 1);
       width: auto;
     }
 
@@ -84,14 +84,14 @@
 .su-local-footer__header {
   @include centered-column;
   @include responsive-grid-gap;
-  @include modular-spacing('padding-top', 3);
+  @include responsive-spacing('padding-top', 3);
   clear: both;
 }
 
 // The resposive behaviour for all contents using grid-area
 // --------------------------------------------------------
 .su-local-footer__columns {
-  @include modular-spacing('padding-bottom', 3);
+  @include responsive-spacing('padding-bottom', 3);
   grid-template-rows: auto;
   grid-template-columns: 1fr 1fr;
   grid-template-areas:
@@ -135,8 +135,8 @@
     grid-area: B;
 
     @include grid-media-between('xs', 'md') {
-      @include modular-spacing('padding-top', 3);
-      @include modular-spacing('padding-bottom', 1);
+      @include responsive-spacing('padding-top', 3);
+      @include responsive-spacing('padding-bottom', 1);
     }
 
     @include grid-media-only('md') {
@@ -194,7 +194,7 @@
       }
 
       &:first-of-type {
-        @include modular-spacing('padding-bottom', 1);
+        @include responsive-spacing('padding-bottom', 1);
       }
     }
   }
@@ -248,7 +248,7 @@
 // ------------------------------------------------
 .su-local-footer__address,
 .su-local-footer__action-links {
-  @include modular-spacing('padding-bottom', 3);
+  @include responsive-spacing('padding-bottom', 3);
   font-size: 16px;
 }
 

diff --git a/core/src/scss/components/masthead/_masthead.scss b/core/src/scss/components/masthead/_masthead.scss
@@ -24,11 +24,11 @@
   > section:last-of-type {
     @include flex-container;
     @include centered-column;
-    @include modular-spacing('padding', 1 null null);
+    @include responsive-spacing('padding', 1 null null);
   }
 
   .su-lockup {
-    @include modular-spacing('margin', null null 0);
+    @include responsive-spacing('margin', null null 0);
     max-width: fit-content;
 
     @include grid-media-max('md') {

diff --git a/core/src/scss/elements/table/_table.scss b/core/src/scss/elements/table/_table.scss
@@ -15,7 +15,7 @@
 //
 table {
   @include margin(null 0);
-  @include modular-spacing('margin-bottom', 5);
+  @include responsive-spacing('margin-bottom', 5);
   border-collapse: collapse;
   border-spacing: 0;
   min-width: 100%;

diff --git a/core/src/scss/utilities/functions/_map-deep-get.scss b/core/src/scss/utilities/functions/_map-deep-get.scss
@@ -0,0 +1,12 @@
+/// Map deep get
+/// @author Hugo Giraudel
+/// @access public
+/// @param {Map} $map - Map
+/// @param {Arglist} $keys - Key chain
+/// @return {*} - Desired value
+@function map-deep-get($map, $keys...) {
+  @each $key in $keys {
+    $map: map-get($map, $key);
+  }
+  @return $map;
+}
diff --git a/core/src/scss/utilities/functions/index.scss b/core/src/scss/utilities/functions/index.scss
@@ -8,6 +8,7 @@
 'breakpoint/index',
 'color',
 'flex/index',
+'map-deep-get',
 'modular-scale/index',
 'string/index',
 'type-checks/index';
diff --git a/core/src/scss/utilities/functions/modular-scale/_get-responsive-spacing-value.scss b/core/src/scss/utilities/functions/modular-scale/_get-responsive-spacing-value.scss
@@ -0,0 +1,22 @@
+@charset "UTF-8";
+
+///
+/// Get a value out of the $su-responsive-spacing-map
+///
+/// @name get-responsive-spacing-value
+///
+/// @param {Integer} $step - Integers from -2 to 10 including 0
+/// @param {device} $device - `mobile`, `tablet` or `desktop`
+/// @param {Map} $map - $su-responsive-spacing-map normally or equivalent
+///
+/// @group mixin
+@function get-responsive-spacing-value($step: 0, $device: 'desktop', $map: $su-responsive-spacing-map) {
+  $value: map-deep-get($map, $step, $device);
+  @if ($step < -2 and $step > 10) {
+    @error 'Responsive spacing step value must be an integer between -2 and 10.';
+  }
+  @if $value == null {
+    @error 'Could not find this spacing value in the $map. Check the parameters.';
+  }
+  @return $value;
+}
diff --git a/core/src/scss/utilities/functions/modular-scale/index.scss b/core/src/scss/utilities/functions/modular-scale/index.scss
@@ -7,4 +7,5 @@
 @import
 'get-modular-spacing-base',
 'get-modular-spacing-multiplier',
+'get-responsive-spacing-value',
 'calculate-modular-spacing';
diff --git a/core/src/scss/utilities/mixins/breakpoint/_grid-media-device.scss b/core/src/scss/utilities/mixins/breakpoint/_grid-media-device.scss
@@ -0,0 +1,20 @@
+@charset "UTF-8";
+
+///
+/// A helper to quickly generate a media query
+///
+/// @name su-grid-media-device
+///
+/// @param {key code} $breakpoint - The breakpoint shortcode - 'mobile', 'tablet' or 'desktop'
+///
+/// @group mixin
+@mixin grid-media-device($breakpoint: 'tablet') {
+  @if $breakpoint == 'mobile' {
+    @content;
+  }
+  @else {
+    @media #{map-get($su-grid-device, $breakpoint)} {
+      @content;
+    }
+  }
+}
diff --git a/core/src/scss/utilities/mixins/breakpoint/index.scss b/core/src/scss/utilities/mixins/breakpoint/index.scss
@@ -6,6 +6,7 @@
 
 @import
 'grid-media-between',
+'grid-media-device',
 'grid-media-max',
 'grid-media-min',
 'grid-media-only',