@nice-digital/nds-grid 1.2.18-alpha.0 → 2.0.0-alpha.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@nice-digital/nds-grid",
-	"version": "1.2.18-alpha.0",
+	"version": "2.0.0-alpha.0",
 	"description": "Grid component for the NICE Design System",
 	"keywords": [
 		"grid"
@@ -37,12 +37,12 @@
 		"url": "https://github.com/nice-digital/nice-design-system/issues"
 	},
 	"dependencies": {
-		"@nice-digital/nds-core": "^1.3.3-alpha.0",
+		"@nice-digital/nds-core": "^2.0.0-alpha.0",
 		"classnames": "^2.2.6",
 		"prop-types": "^15.7.2"
 	},
 	"peerDependencies": {
-		"react": "^16 || ^17"
+		"react": "^16 || ^17 || ^18"
 	},
-	"gitHead": "8624fdff10d45cdd07dec7f2eda7d2f4db68c474"
+	"gitHead": "66fbcb1c0c01b0afc6b51b0f3fe4719be92996b0"
 }

package/scss/_grid-settings.scss

@@ -1,11 +1,14 @@
+@use '@nice-digital/nds-core/scss/spacing';
+@use '@nice-digital/nds-core/scss/utils';
+
 /// The width of the default spacing between grid items, in rems
 /// @since 0.2.0
-$nds-grid-gutter: rem($nds-spacing-medium);
+$grid-gutter: utils.rem(spacing.$medium);
 
 /// The width of the spacing between grid items in a compact grid, in rems
 /// @since 0.2.0
-$nds-grid-gutter-compact: rem($nds-spacing-small);
+$grid-gutter-compact: utils.rem(spacing.$small);
 
 /// The width of the spacing between grid items in a loose grid, in rems
 /// @since 0.2.0
-$nds-grid-gutter-loose: rem($nds-spacing-large);
+$grid-gutter-loose: utils.rem(spacing.$large);

package/scss/grid.scss

@@ -1,13 +1,14 @@
-@use "sass:math";
-
-@import '~@nice-digital/nds-core/scss/core';
+@use 'sass:math';
+@use '@nice-digital/nds-core/scss/colours';
+@use '@nice-digital/nds-core/scss/media-queries';
+@use '@nice-digital/nds-core/scss/spacing';
+@use '@nice-digital/nds-core/scss/utils';
+@use 'grid-settings';
 
 ////
 /// @group grid
 ////
 
-@import 'grid-settings';
-
 /// Grid class for the grid wrapper. Expects direct children to be `[data-g]`
 /// grid items. Use modifiers to affect grid behaviour as shown below:
 ///
@@ -28,17 +29,16 @@
 ///     <div data-g="12 xs:6 md:4 lg:3 xl:2">Grid item</div>
 ///   </div>
 .grid {
-  --nds-grid-gutter: #{$nds-grid-gutter};
+  --nds-grid-gutter: #{grid-settings.$grid-gutter};
   display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
+  flex-flow: row wrap;
   justify-content: flex-start;
   list-style: none; // Allow the grid system to be used on lists.
-  margin-left: -#{$nds-grid-gutter * 0.5};
-  margin-right: -#{$nds-grid-gutter * 0.5};
+  margin-left: -#{grid-settings.$grid-gutter * 0.5};
+  margin-right: -#{grid-settings.$grid-gutter * 0.5};
   max-width: none; // To override the 66ch max width on lists
   padding: 0; // Remove any paddings that might affect the grid system.
-  width: calc(100% + #{$nds-grid-gutter});
+  width: calc(100% + #{grid-settings.$grid-gutter});
 
   // Fallback to fixed gutter grid in IE11, but use CSS vars where supported.
   // IE11 doesn't support custom properties: https://caniuse.com/css-variables
@@ -57,11 +57,11 @@
   }
 
   &--compact {
-    --nds-grid-gutter: #{$nds-grid-gutter-compact};
+    --nds-grid-gutter: #{grid-settings.$grid-gutter-compact};
   }
 
   &--loose {
-    --nds-grid-gutter: #{$nds-grid-gutter-loose};
+    --nds-grid-gutter: #{grid-settings.$grid-gutter-loose};
   }
 
   &--right {
@@ -87,16 +87,16 @@
   // Defensive warning for grids with children that aren't items
   > :not([data-g]) {
     --error: 'Grids (`.grid`) should only have grid items (`[data-g]`) as direct children';
-    background: $nds-colour-error-background;
+    background: colours.$error-background;
     cursor: help;
-    outline: rem($nds-spacing-x-small) solid $nds-colour-error;
+    outline: utils.rem(spacing.$x-small) solid colours.$error;
   }
 
   .debug-grid &,
   &--debug,
   .grid--debug & {
-    outline: rem($nds-spacing-xx-small) dashed red;
-    outline-offset: rem($nds-spacing-x-small);
+    outline: utils.rem(spacing.$xx-small) dashed red;
+    outline-offset: utils.rem(spacing.$x-small);
   }
 }
 
@@ -116,16 +116,18 @@
 [data-g] {
   // Auto flex-basis with separate width property for IE11 because of https://github.com/philipwalton/flexbugs#flexbug-8
   flex: 0 0 auto;
-  margin-left: #{$nds-grid-gutter * 0.5};
-  margin-right: #{$nds-grid-gutter * 0.5};
+  margin-left: #{grid-settings.$grid-gutter * 0.5};
+  margin-right: #{grid-settings.$grid-gutter * 0.5};
   position: relative;
+
   // Fixed gutters fallback for IE11, due to lack of custom property support:
-  width: calc(100% - #{$nds-grid-gutter});
+  width: calc(100% - #{grid-settings.$grid-gutter});
 
   @supports ((--a: 0)) {
     --grid-item-width: 100%;
     margin-left: calc(var(--nds-grid-gutter) / 2) !important;
     margin-right: calc(var(--nds-grid-gutter) / 2) !important;
+
     // Slightly hacky 0.1px because of subpixel rounding e.g. https://bugzilla.mozilla.org/show_bug.cgi?id=1323735
     width: calc(
       var(--grid-item-width) - var(--nds-grid-gutter) - 0.1px
@@ -136,9 +138,9 @@
   // See https://github.com/nice-digital/nice-design-system/issues/73
   :not(.grid) > & {
     --error: 'Put grid items (`[data-g]`) directly inside a `.grid`';
-    background: $nds-colour-error-background;
+    background: colours.$error-background;
     cursor: help;
-    outline: rem($nds-spacing-x-small) solid $nds-colour-error;
+    outline: utils.rem(spacing.$x-small) solid colours.$error;
   }
 
   // Warning for single grid items within a grid
@@ -148,37 +150,38 @@
 
   .debug-grid &,
   .grid--debug & {
-    outline: rem($nds-spacing-xx-small) dashed blue;
+    outline: utils.rem(spacing.$xx-small) dashed blue;
   }
 }
 
-@mixin _nds-generate-grid-items($prefix: null) {
+@mixin -nds-generate-grid-items($prefix: null) {
   $prefix: if($prefix, $prefix + ':', '');
 
   @for $index from 1 through 12 {
     [data-g~='#{ $prefix }#{ $index }'] {
-      --grid-item-width: #{percentage(math.div($index, 12))};
+      --grid-item-width: #{math.percentage(math.div($index, 12))};
+
       // IE 11 fallback, due to lack of custom property support:
-      width: calc(#{percentage(math.div($index, 12))} - #{$nds-grid-gutter});
+      width: calc(
+        #{math.percentage(math.div($index, 12))} - #{grid-settings.$grid-gutter}
+      );
     }
   }
 
   @for $index from 0 through 12 {
     [data-g~='#{ $prefix }push:#{ $index }'] {
-      left: percentage(math.div($index, 12));
+      left: math.percentage(math.div($index, 12));
     }
     [data-g~='#{ $prefix }pull:#{ $index }'] {
-      right: percentage(math.div($index, 12));
+      right: math.percentage(math.div($index, 12));
     }
   }
 }
 
-@include _nds-generate-grid-items;
+@include -nds-generate-grid-items;
 
-@if $nds-responsive {
-  @each $brkpnt-key, $brkpnt-value in $mq-breakpoints {
-    @include mq($from: $brkpnt-key) {
-      @include _nds-generate-grid-items($brkpnt-key);
-    }
+@each $brkpnt-key, $brkpnt-value in media-queries.$breakpoints {
+  @include media-queries.mq($from: $brkpnt-key) {
+    @include -nds-generate-grid-items($brkpnt-key);
   }
 }