@carbon/grid 10.42.0 → 11.0.0-rc.0

package/scss/{modules/_flex-grid.scss → _flex-grid.scss}

@@ -9,6 +9,7 @@
 // and often derived from, bootstrap:
 // https://github.com/twbs/bootstrap/blob/v4-dev/scss/mixins/_grid.scss
 
+@use 'sass:list';
 @use 'sass:meta';
 @use 'sass:math';
 @use 'sass:map';
@@ -24,12 +25,12 @@
 /// for setting width and default gutters when a column's breakpoint has not been
 /// hit yet.
 /// @param {Number} $gutter [$grid-gutter] - The gutter for the grid system
-/// @param {Number} $collapsed-gutter [$grid-gutter--condensed] - The condensed mode gutter
+/// @param {Number} $collapsed-gutter [$grid-gutter-condensed] - The condensed mode gutter
 /// @access private
 /// @group @carbon/grid
 @mixin -make-col-ready(
   $gutter: $grid-gutter,
-  $condensed-gutter: $grid-gutter--condensed
+  $condensed-gutter: $grid-gutter-condensed
 ) {
   // Prevent columns from becoming too narrow when at smaller grid tiers by
   // always setting `width: 100%;`. This works because we use `flex` values
@@ -200,17 +201,6 @@
   .#{$prefix}--row.#{$prefix}--no-gutter--end [class*='#{$prefix}--col'] {
     padding-right: 0;
   }
-
-  // Deprecated ☠️
-  .#{$prefix}--no-gutter--left,
-  .#{$prefix}--row.#{$prefix}--no-gutter--left [class*='#{$prefix}--col'] {
-    padding-left: 0;
-  }
-
-  .#{$prefix}--no-gutter--right,
-  .#{$prefix}--row.#{$prefix}--no-gutter--right [class*='#{$prefix}--col'] {
-    padding-right: 0;
-  }
 }
 
 // -----------------------------------------------------------------------------
@@ -230,15 +220,6 @@
   .#{$prefix}--hang--end {
     padding-right: $gutter * 0.5;
   }
-
-  // Deprecated ☠️
-  .#{$prefix}--hang--left {
-    padding-left: $gutter * 0.5;
-  }
-
-  .#{$prefix}--hang--right {
-    padding-right: $gutter * 0.5;
-  }
 }
 
 // -----------------------------------------------------------------------------
@@ -254,7 +235,7 @@
   margin-right: auto;
   margin-left: auto;
 
-  @include -set-largest-breakpoint();
+  @include -set-largest-breakpoint($breakpoints);
 
   @each $name, $value in $breakpoints {
     $prev-breakpoint: map.get($breakpoints, breakpoint-prev($name));
@@ -282,7 +263,7 @@
 /// @access private
 /// @group @carbon/grid
 @mixin -set-largest-breakpoint($breakpoints: $grid-breakpoints) {
-  $largest-breakpoint: last-map-item($breakpoints);
+  $largest-breakpoint: -last-map-item($breakpoints);
 
   max-width: map.get($largest-breakpoint, 'width');
 }
@@ -299,16 +280,37 @@
   }
 }
 
+/// Pass in a map, and get the last one in the list back
+/// @access public
+/// @param {Map} $map - Map
+/// @return {*} Desired value
+/// @group @carbon/layout
+@function -last-map-item($map) {
+  $total-length: list.length($map);
+  @return map-get($map, -key-by-index($map, $total-length));
+}
+
+/// Provide a map and index, and get back the relevant key value
+/// @access public
+/// @param {Map} $map - Map
+/// @param {Integer} $index - Key chain
+/// @return {String} Desired value
+/// @group @carbon/layout
+@function -key-by-index($map, $index) {
+  $keys: map.keys($map);
+  @return nth($keys, $index);
+}
+
 /// Generate the CSS for a grid for the given breakpoints and gutters
 /// @param {Map} $breakpoints [$grid-breakpoints] - The default breakpoints
 /// @param {Number} $grid-gutter [$grid-gutter] - The default gutters
-/// @param {Number} $condensed-gutter [$grid-gutter--condensed] - The condensed mode gutter
+/// @param {Number} $condensed-gutter [$grid-gutter-condensed] - The condensed mode gutter
 /// @access public
 /// @group @carbon/grid
 @mixin flex-grid(
   $breakpoints: $grid-breakpoints,
   $grid-gutter: $grid-gutter,
-  $condensed-gutter: $grid-gutter--condensed
+  $condensed-gutter: $grid-gutter-condensed
 ) {
   .#{$prefix}--grid {
     @include -make-container($breakpoints);
@@ -339,36 +341,3 @@
   @include -no-gutter();
   @include -hang($grid-gutter);
 }
-
-@if $flex-grid-columns == 12 {
-  $flex-12-column-grid: map.merge(
-    $grid-breakpoints,
-    (
-      lg:
-        map.merge(
-          map.get($grid-breakpoints, lg),
-          (
-            columns: 12,
-          )
-        ),
-      xlg:
-        map.merge(
-          map.get($grid-breakpoints, xlg),
-          (
-            columns: 12,
-          )
-        ),
-      max:
-        map.merge(
-          map.get($grid-breakpoints, max),
-          (
-            columns: 12,
-          )
-        ),
-    )
-  );
-
-  @include flex-grid($breakpoints: $flex-12-column-grid);
-} @else {
-  @include flex-grid();
-}

package/scss/_inlined/_breakpoint.scss

@@ -0,0 +1,198 @@
+//
+// Copyright IBM Corp. 2018, 2018
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@use 'sass:list';
+@use 'sass:map';
+@use 'sass:meta';
+@use '@carbon/layout/scss/convert';
+@use 'config' as *;
+
+/// Provide a map and index, and get back the relevant key value
+/// @access public
+/// @param {Map} $map - Map
+/// @param {Integer} $index - Key chain
+/// @return {String} Desired value
+/// @group @carbon/layout
+@function -key-by-index($map, $index) {
+  $keys: map.keys($map);
+  @return nth($keys, $index);
+}
+
+/// Get the value of the next breakpoint, or null for the last breakpoint
+/// @param {String} $name - The name of the breakpoint
+/// @param {Map} $breakpoints [$grid-breakpoints] - A map of breakpoints where the key is the name of the breakpoint and the value is the values for the breakpoint
+/// @param {List} $breakpoint-names [map-keys($breakpoints)] - A list of names from the `$breakpoints` map
+/// @return {String}
+/// @access public
+/// @group @carbon/layout
+@function breakpoint-next(
+  $name,
+  $breakpoints: $grid-breakpoints,
+  $breakpoint-names: map.keys($breakpoints)
+) {
+  $n: list.index($breakpoint-names, $name);
+  @if $n != null and $n < list.length($breakpoint-names) {
+    @return list.nth($breakpoint-names, $n + 1);
+  }
+  @return null;
+}
+
+/// Get the value of the previous breakpoint, or null for the first breakpoint
+/// @param {String} $name - The name of the breakpoint
+/// @param {Map} $breakpoints [$grid-breakpoints] - A map of breakpoints where the key is the name of the breakpoint and the value is the values for the breakpoint
+/// @param {List} $breakpoint-names [map-keys($breakpoints)] - A list of names from the `$breakpoints` map
+/// @return {String}
+/// @access public
+/// @group @carbon/layout
+@function breakpoint-prev(
+  $name,
+  $breakpoints: $grid-breakpoints,
+  $breakpoint-names: map.keys($breakpoints)
+) {
+  $n: list.index($breakpoint-names, $name);
+  @if $n != null and $n > 1 {
+    @return list.nth($breakpoint-names, $n - 1);
+  }
+  @return null;
+}
+
+/// Check to see if the given breakpoint name
+/// @param {String} $name - The name of the breakpoint
+/// @param {Map} $breakpoints [$grid-breakpoints] - A map of breakpoints where the key is the name of the breakpoint and the value is the values for the breakpoint
+/// @return {Bool}
+/// @access public
+/// @group @carbon/layout
+@function is-smallest-breakpoint($name, $breakpoints: $grid-breakpoints) {
+  @return list.index(map.keys($breakpoints), $name) == 1;
+}
+
+/// Returns the largest breakpoint name
+/// @param {Map} $breakpoints [$grid-breakpoints] - A map of breakpoints where the key is the name
+/// @return {String}
+/// @access public
+/// @group @carbon/layout
+@function largest-breakpoint-name($breakpoints: $grid-breakpoints) {
+  $total-breakpoints: list.length($breakpoints);
+  @return -key-by-index($breakpoints, $total-breakpoints);
+}
+
+/// Get the infix for a given breakpoint in a list of breakpoints. Useful for generating the size part in a selector, for example: `.prefix--col-sm-2`.
+/// @param {String} $name - The name of the breakpoint
+/// @return {String}
+/// @access public
+/// @group @carbon/layout
+@function breakpoint-infix($name) {
+  @return '-#{$name}';
+}
+
+/// Generate a media query from the width of the given breakpoint to infinity
+/// @param {String | Number} $name
+/// @param {Map} $breakpoints [$grid-breakpoints] - A map of breakpoints where the key is the name
+/// @content
+/// @access public
+/// @group @carbon/layout
+@mixin breakpoint-up($name, $breakpoints: $grid-breakpoints) {
+  @if meta.type-of($name) == 'number' {
+    @media (min-width: $name) {
+      @content;
+    }
+  } @else if map.has-key($breakpoints, $name) {
+    $breakpoint: map.get($breakpoints, $name);
+    $width: map.get($breakpoint, width);
+    @if is-smallest-breakpoint($name, $breakpoints) {
+      @content;
+    } @else {
+      @media (min-width: $width) {
+        @content;
+      }
+    }
+  } @else {
+    @error 'Unable to find a breakpoint with name `#{$name}`. Expected one of: (#{map.keys($breakpoints)})';
+  }
+}
+
+/// Generate a media query for the maximum width of the given styles
+/// @param {String | Number} $name
+/// @param {Map} $breakpoints [$grid-breakpoints] - A map of breakpoints where the key is the name
+/// @content
+/// @access public
+/// @group @carbon/layout
+@mixin breakpoint-down($name, $breakpoints: $grid-breakpoints) {
+  @if meta.type-of($name) == 'number' {
+    @media (max-width: $name) {
+      @content;
+    }
+  } @else if map.has-key($breakpoints, $name) {
+    // We borrow this logic from bootstrap for specifying the value of the
+    // max-width. The maximum width is calculated by finding the breakpoint and
+    // subtracting .02 from its value. This value is used instead of .01 to
+    // avoid rounding issues in Safari
+    // https://github.com/twbs/bootstrap/blob/c5b1919deaf5393fcca9e9b9d7ce9c338160d99d/scss/mixins/_breakpoints.scss#L34-L46
+    $breakpoint: map.get($breakpoints, $name);
+    $width: map.get($breakpoint, width) - 0.02;
+    @media (max-width: $width) {
+      @content;
+    }
+  } @else {
+    @error 'Unable to find a breakpoint with name `#{$name}`. Expected one of: (#{map.keys($breakpoints)})';
+  }
+}
+
+/// Generate a media query for the range between the lower and upper breakpoints
+/// @param {String | Number} $lower
+/// @param {String | Number} $upper
+/// @param {Map} $breakpoints [$grid-breakpoints] - A map of breakpoints where the key is the name
+/// @content
+/// @access public
+/// @group @carbon/layout
+@mixin breakpoint-between($lower, $upper, $breakpoints: $grid-breakpoints) {
+  $is-number-lower: meta.type-of($lower) == 'number';
+  $is-number-upper: meta.type-of($upper) == 'number';
+  $min: if($is-number-lower, $lower, map.get($breakpoints, $lower));
+  $max: if($is-number-upper, $upper, map.get($breakpoints, $upper));
+
+  @if $min and $max {
+    $min-width: if(not $is-number-lower and $min, map.get($min, width), $min);
+    $max-width: if(not $is-number-upper and $max, map.get($max, width), $max);
+    @media (min-width: $min-width) and (max-width: $max-width) {
+      @content;
+    }
+  } @else if $min != null and $max == null {
+    @include breakpoint-up($lower) {
+      @content;
+    }
+  } @else if $min == null and $max != null {
+    @include breakpoint-down($upper) {
+      @content;
+    }
+  } @else {
+    @error 'Unable to find a breakpoint to satisfy: (#{$lower},#{$upper}). Expected both to be one of (#{map.keys($breakpoints)}).';
+  }
+}
+
+/// Generate media query for the largest breakpoint
+/// @param {Map} $breakpoints [$grid-breakpoints] - A map of breakpoints where the key is the name
+/// @content
+/// @access public
+/// @group @carbon/layout
+@mixin largest-breakpoint($breakpoints: $grid-breakpoints) {
+  @include breakpoint(largest-breakpoint-name()) {
+    @content;
+  }
+}
+
+/// Generate a media query for a given breakpoint
+/// @param {String | Number} $name
+/// @param {Map} $breakpoints [$grid-breakpoints] - A map of breakpoints where the key is the name
+/// @content
+/// @access public
+/// @group @carbon/layout
+@mixin breakpoint($name, $breakpoints: $grid-breakpoints) {
+  @include breakpoint-up($name, $breakpoints) {
+    @content;
+  }
+}

package/scss/_inlined/_config.scss

@@ -0,0 +1,94 @@
+//
+// Copyright IBM Corp. 2018, 2018
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@use 'sass:map';
+@use '@carbon/layout/scss/convert';
+
+/// Namespace prefix
+/// @type String
+/// @access public
+/// @group @carbon/grid
+$prefix: 'cds' !default;
+
+/// Total columns used in the flex grid
+/// @type Number
+/// @access public
+/// @group @carbon/grid
+$flex-grid-columns: 16 !default;
+
+/// Carbon gutter size in rem
+/// @type Number
+/// @access public
+/// @group @carbon/layout
+$grid-gutter: convert.rem(32px) !default;
+
+/// Carbon condensed gutter size in rem
+/// @type Number
+/// @access public
+/// @group @carbon/layout
+$grid-gutter-condensed: convert.rem(1px) !default;
+
+// Initial map of our breakpoints and their values
+/// @type Map
+/// @access public
+/// @group @carbon/layout
+$grid-breakpoints: (
+  sm: (
+    columns: 4,
+    margin: 0,
+    width: convert.rem(320px),
+  ),
+  md: (
+    columns: 8,
+    margin: convert.rem(16px),
+    width: convert.rem(672px),
+  ),
+  lg: (
+    columns: 16,
+    margin: convert.rem(16px),
+    width: convert.rem(1056px),
+  ),
+  xlg: (
+    columns: 16,
+    margin: convert.rem(16px),
+    width: convert.rem(1312px),
+  ),
+  max: (
+    columns: 16,
+    margin: convert.rem(24px),
+    width: convert.rem(1584px),
+  ),
+) !default;
+
+@if $flex-grid-columns == 12 {
+  $grid-breakpoints: map.merge(
+    $grid-breakpoints,
+    (
+      lg:
+        map.merge(
+          map.get($grid-breakpoints, lg),
+          (
+            columns: 12,
+          )
+        ),
+      xlg:
+        map.merge(
+          map.get($grid-breakpoints, xlg),
+          (
+            columns: 12,
+          )
+        ),
+      max:
+        map.merge(
+          map.get($grid-breakpoints, max),
+          (
+            columns: 12,
+          )
+        ),
+    )
+  );
+}