SHS-5574: Implementation: Refactor some grid CSS/mixins (#1508)

* SHS-5571: A11y Level A: Empty headings on Vertical Timeline components (#1502) * fix(shs-5571): A11y Level A: Empty headings on Vertical Timeline components * fix(shs-5571): minor code consistency fix in timeline template --------- Co-authored-by: Mari Núñez <mariannuar@admins-MacBook-Pro.local> Co-authored-by: Andrés Díaz Soto <andres.diaz.soto@gmail.com> * fix(shs-5572): arrows on a Spotlight (with no image) displaying incorrectly on mobile (#1503) Co-authored-by: Mari Núñez <mariannuar@admins-MacBook-Pro.local> Co-authored-by: Andrés Díaz Soto <andres.diaz.soto@gmail.com> * feat(shs-5574): cleanup grid styles - remove flexbox fallback * SHS-5568: Allow editors to select style on Accordion component (#1501) * feat(shs-5568): add new accordion style field * feat(shs-5568): add hb-accordion-secondary class if new field is set to * feat(shs-5568): add hb-accordion-secondary class to a parent wrapper class * feat: add hs-accordion-secondary to details element * chore: remove unused statement * feat(shs-5568): update styles for handling secondary accordion paragraph option * feat(shs-5568): add update hook to set field_accordion_style to default on existing accordion components --------- Co-authored-by: Andrés Díaz Soto <andres.diaz.soto@gmail.com> * fix(shs-5091): fix empty headings on views (#1509) Co-authored-by: Mari Núñez <mariannuar@admins-MacBook-Pro.local> Co-authored-by: Andrés Díaz Soto <andres.diaz.soto@gmail.com> * SHS-5583: empty headings in banners and spotlights (#1510) * fix(shs-5583): empty headings in banners and spotlights * fix(shs-5583): minor fix in spotlight and gradient-hero templates --------- Co-authored-by: Mari Núñez <mariannuar@admins-MacBook-Pro.local> Co-authored-by: Andrés Díaz Soto <andres.diaz.soto@gmail.com> * fix(shs-5574): prevent grid element overflow * chore(shs-5574): update percy cli version / fix percy default test to consolidate colorful and traditional --------- Co-authored-by: Mariana Núñez <48533432+mariannuar@users.noreply.github.com> Co-authored-by: Mari Núñez <mariannuar@admins-MacBook-Pro.local> Co-authored-by: Hector Lopez <hectorlopeztrejo9@gmail.com>
SU-HSDO · May 3, 2024 · 15f72dd · 15f72dd
1 parent c79d708
commit 15f72dd
Show file tree

Hide file tree

Showing 9 changed files with 159 additions and 289 deletions.
diff --git a/docroot/themes/humsci/humsci_airy/css/humsci_airy.css b/docroot/themes/humsci/humsci_airy/css/humsci_airy.css
diff --git a/docroot/themes/humsci/humsci_basic/package-lock.json b/docroot/themes/humsci/humsci_basic/package-lock.json
diff --git a/docroot/themes/humsci/humsci_basic/package.json b/docroot/themes/humsci/humsci_basic/package.json
@@ -22,7 +22,7 @@
     "test": "npm run lint:sass && npm run test:sass",
     "visreg:colorful": "percy snapshot tests/percy/.snapshots-colorful.js",
     "visreg:traditional": "percy snapshot tests/percy/.snapshots-traditional.js",
-    "visreg": "npm run visreg:colorful && npm run visreg:traditional",
+    "visreg": "percy snapshot tests/percy/.snapshots-all.js",
     "copy": "node ./tasks/copy.js"
   },
   "license": "MIT",
@@ -34,7 +34,7 @@
   "devDependencies": {
     "@babel/core": "^7.20.12",
     "@babel/preset-env": "^7.20.2",
-    "@percy/cli": "^1.27.3",
+    "@percy/cli": "^1.28.5",
     "autoprefixer": "^9.8.6",
     "babel-loader": "^9.1.2",
     "backstopjs": "^6.1.4",

diff --git a/docroot/themes/humsci/humsci_basic/src/scss/components/_pattern.grid.scss b/docroot/themes/humsci/humsci_basic/src/scss/components/_pattern.grid.scss
@@ -1,54 +1,28 @@
 .hb-grid {
-  display: flex;
-  justify-content: flex-start;
-  flex-wrap: wrap;
-
-  @supports (display: grid) {
-    @include grid-media-min('sm') {
-      display: grid;
-      gap: hb-spacing-width();
-    }
-
-    @for $i from 1 through $hb-grid-count {
-      &.hb-grid--cols-#{$i} {
-        @include grid-media-min('sm') { // 2 columns
-          grid-template-columns: repeat(2, 1fr);
-        }
-
-        @if ($i > 2) {
-          @include grid-media-min('md') { // 3 columns
-            grid-template-columns: repeat(3, 1fr);
-          }
-        }
-
-        @if ($i > 3) {
-          @include grid-media-min('lg') { // 4 or more columns
-            grid-template-columns: repeat(#{$i}, 1fr);
-          }
-        }
-      }
-    }
+  @include grid-media-min('sm') {
+    display: grid;
+    gap: hb-spacing-width();
   }
 
-  // Default to two column
-  &__item {
-    margin-bottom: calc(#{hb-spacing-width('default', false)} / 2);
-    width: 100%;
-
-    @supports (display: grid) {
+  @for $i from 1 through $hb-grid-count {
+    &.hb-grid--cols-#{$i} {
       @include grid-media-min('sm') {
-        margin-bottom: 0;
+        // 2 columns
+        grid-template-columns: repeat(2, minmax(0, 1fr));
       }
-    }
 
-    // This is our grid maker, it defines classes for each breakdown
-    // of the grid and gives human readable versions when it can.
-    // 1-2 cols exist starting at the "sm" breakpoint
-    // 3-4 cols start at the "md" breakpoint
-    // all others start at "lg"
-    @for $i from 1 through $hb-grid-count {
-      .hb-grid--cols-#{$i} & {
-        @include hb-column($i);
+      @if ($i > 2) {
+        @include grid-media-min('md') {
+          // 3 columns
+          grid-template-columns: repeat(3, minmax(0, 1fr));
+        }
+      }
+
+      @if ($i > 3) {
+        @include grid-media-min('lg') {
+          // 4 or more columns
+          grid-template-columns: repeat(#{$i}, minmax(0, 1fr));
+        }
       }
     }
   }

diff --git a/docroot/themes/humsci/humsci_basic/src/scss/objects/_layouts.row.scss b/docroot/themes/humsci/humsci_basic/src/scss/objects/_layouts.row.scss
@@ -61,87 +61,51 @@
 }
 
 // Decanter uses flexbox for row components. For modern browsers, let's use CSS Grid.
-// These styles are written within an @supports statement so that browsers that do not
-// support CSS Grid will continue to recieve the flexbox styles.
-// See docroot/modules/humsci/hs_paragraph_types/modules/hs_row/modules/hs_row_display/scss/hs_row_display.scss
-// for fallback styles.
 // Collections items have been added to this group, base Collection styles here: docroot/modules/humsci/hs_paragraph_types/css/hs_collection.css
 .field-hs-row-components,
 .field-hs-collection-items {
-  // When there is more than one item in a row it uses grid (and flexbox as a fallback)
-  // however when there is only one item in a row and we use flexbox it causes overflow issues in IE 11.
-  @supports (display: grid) {
-    @include grid-media-min('sm') {
-      display: grid;
-      gap: hb-spacing-width();
-    }
-
-    @for $i from 1 through $hb-counted-items-count {
-      &.counted-items-#{$i},
-      &.item-per-row--#{$i} {
-        @include grid-media-min('sm') {
-          grid-template-columns: repeat(2, 1fr);
-        }
-
-        @if ($i > 2) {
-          @include grid-media-min('md') {
-            grid-template-columns: repeat(3, 1fr);
-          }
-        }
-
-        @if ($i > 3) {
-          @include grid-media-min('lg') {
-            grid-template-columns: repeat(#{$i}, 1fr);
-          }
-        }
-      }
-    }
-
-    @for $i from 1 through $hb-counted-items-count {
-      &.counted-items-#{$i},
-      &.item-per-row--#{$i} {
-        .paragraph-item {
-          @include hb-column($i);
-        }
-      }
-    }
+  // When there is more than one item in a row it uses grid
+  @include grid-media-min('sm') {
+    display: grid;
+    gap: hb-spacing-width();
   }
 
   &.counted-items-1,
   &.item-per-row--1 {
     display: block;
   }
 
-  // counted-items are Row items, items-per-row are Collection items
-  &.counted-items-2,
-  &.counted-items-3,
-  &.counted-items-4,
-  &.item-per-row--2,
-  &.item-per-row--3,
-  &.item-per-row--4 {
-    display: block;
-
-    @include grid-media-min('sm') {
-      display: flex;
-
-      @supports (display: grid) {
-        display: grid;
+  @for $i from 2 through $hb-counted-items-count {
+    &.counted-items-#{$i},
+    &.item-per-row--#{$i} {
+      @include grid-media-min('sm') {
+        grid-template-columns: repeat(2, minmax(0, 1fr));
       }
 
-      .hs-paragraph-style--well &,
-      .hs-paragraph-style--well-full-width & {
-        margin: hb-spacing-width() auto;
+      @if ($i > 2) {
+        @include grid-media-min('md') {
+          grid-template-columns: repeat(3, minmax(0, 1fr));
+        }
       }
-    }
 
-    .paragraph-item {
-      margin-bottom: hb-spacing-width() !important;
+      @if ($i > 3) {
+        @include grid-media-min('lg') {
+          grid-template-columns: repeat(#{$i}, minmax(0, 1fr));
+        }
+      }
 
-      @supports (display: grid) {
+      .paragraph-item {
         @include grid-media-min('sm') {
           margin: 0 !important;
         }
       }
+
+      .hs-paragraph-style--well &,
+      .hs-paragraph-style--well-full-width & {
+        @include grid-media-min('sm') {
+          margin: hb-spacing-width() auto;
+        }
+      }
     }
   }
 }
diff --git a/docroot/themes/humsci/humsci_basic/src/scss/tools/_mixins.layout.scss b/docroot/themes/humsci/humsci_basic/src/scss/tools/_mixins.layout.scss
@@ -11,90 +11,6 @@
   }
 }
 
-@mixin hb-column-width($percentage, $margin, $cols) {
-  width: calc(#{$percentage} - (#{$margin} / #{$cols})); // for 3 elements, 2 have gutter-width
-
-  @supports (display: grid) {
-    width: 100%;
-    min-width: calc(#{$percentage} - (#{$margin} / #{$cols}));
-    margin-right: 0;
-  }
-}
-
-// For this mixin:
-//
-// @param(integer) $col-number
-// For grids with 2 cols, it will remain 2 cols after sm.
-// For grids with 3 or 4 cols, it will become 3 or 4 cols at md and remain.
-// All grids above 4 cols will have:
-// 1 col at mobile,
-// 2 cols at sm,
-// 3 cols at md,
-// and then the requested number at lg.
-// Cols over 12 are not supported.
-@mixin hb-column($col-number: 2) {
-  $percentage-width: math.div(100%, $col-number);
-
-  @if ($col-number > 1) {
-    $one-less-col: $col-number - 1;
-    $total-margin: $one-less-col * hb-spacing-width('default', false);
-
-    // 2 cols
-    @include grid-media-min('sm') {
-      @include hb-column-width(50%, (hb-spacing-width()), 2); // for two elements, there is 1 gutter-width between
-      margin-right: hb-spacing-width();
-
-      @supports (display: grid) {
-        margin-right: 0;
-      }
-
-      &:nth-child(2n) {
-        margin-right: 0;
-      }
-    }
-
-    @if ($col-number > 2) {
-      @if ($col-number != 4) {
-        // 3 cols
-        @include grid-media-min('md') {
-
-          @include hb-column-width(33.33%, #{hb-calculate-rems(2 * hb-spacing-width('default', false))}, 3); // for 3 elements, 2 have gutter-width
-
-          &:nth-child(2n) {
-            margin-right: hb-spacing-width();
-
-            @supports (display: grid) {
-              margin-right: 0;
-            }
-          }
-
-          &:nth-child(3n) {
-            margin-right: 0;
-          }
-        }
-      }
-
-      // above 3 cols
-      @include grid-media-min('lg') {
-        @include hb-column-width($percentage-width, $total-margin, $col-number);
-
-        &:nth-child(2n),
-        &:nth-child(3n) {
-          margin-right: hb-spacing-width();
-
-          @supports (display: grid) {
-            margin-right: 0;
-          }
-        }
-
-        &:nth-child(#{$col-number}n) {
-          margin-right: 0;
-        }
-      }
-    }
-  }
-}
-
 // This mixin adds background color and z-index for sidebar areas of the layout.
 @mixin hb-sidebar {
   width: 100%;

diff --git a/docroot/themes/humsci/humsci_basic/tests/percy/.snapshots-all.js b/docroot/themes/humsci/humsci_basic/tests/percy/.snapshots-all.js
@@ -0,0 +1,4 @@
+const traditional = require('./.snapshots-traditional.js');
+const colorful = require('./.snapshots-colorful.js');
+
+module.exports = traditional.concat(colorful);
diff --git a/docroot/themes/humsci/humsci_colorful/css/humsci_colorful.css b/docroot/themes/humsci/humsci_colorful/css/humsci_colorful.css
diff --git a/docroot/themes/humsci/humsci_traditional/css/humsci_traditional.css b/docroot/themes/humsci/humsci_traditional/css/humsci_traditional.css