@carbon/layout 10.29.0 → 10.31.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/layout",
   "description": "Layout helpers for digital and software products using the Carbon Design System",
-  "version": "10.29.0",
+  "version": "10.31.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -29,10 +29,10 @@
     "clean": "rimraf es lib umd scss/generated scss/modules/generated"
   },
   "devDependencies": {
-    "@carbon/cli": "^10.27.0",
+    "@carbon/cli": "^10.28.0",
     "@carbon/cli-reporter": "^10.5.0",
     "@carbon/scss-generator": "^10.13.0",
-    "@carbon/test-utils": "^10.17.0",
+    "@carbon/test-utils": "^10.18.0",
     "core-js": "^3.16.0",
     "rimraf": "^3.0.0"
   },
@@ -42,5 +42,5 @@
     "sassDir": "scss",
     "needs": "^1.3.0"
   },
-  "gitHead": "9c2eb1cfa0e5b2c4dc0142b98cd8828e84640af8"
+  "gitHead": "8ce0b4c0e5547837888b4050fa8630a7692df79b"
 }

package/scss/_breakpoint.scss

@@ -54,7 +54,7 @@ $carbon--grid-breakpoints: (
 ) !default;
 
 /// Get the value of the next breakpoint, or null for the last breakpoint
-/// @param {String} $name - The name of the brekapoint
+/// @param {String} $name - The name of the breakpoint
 /// @param {Map} $breakpoints [$carbon--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}
@@ -73,7 +73,7 @@ $carbon--grid-breakpoints: (
 }
 
 /// Get the value of the previous breakpoint, or null for the first breakpoint
-/// @param {String} $name - The name of the brekapoint
+/// @param {String} $name - The name of the breakpoint
 /// @param {Map} $breakpoints [$carbon--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}
@@ -92,7 +92,7 @@ $carbon--grid-breakpoints: (
 }
 
 /// Check to see if the given breakpoint name
-/// @param {String} $name - The name of the brekapoint
+/// @param {String} $name - The name of the breakpoint
 /// @param {Map} $breakpoints [$carbon--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
@@ -116,7 +116,7 @@ $carbon--grid-breakpoints: (
   @return carbon--key-by-index($breakpoints, $total-breakpoints);
 }
 
-/// Get the infix for a given breakpoint in a list of breakpoints. Usesful for generate the size part in a selector, for example: `.prefix--col-sm-2`.
+/// 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

package/scss/_convert.import.scss

@@ -0,0 +1,56 @@
+//
+// 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.
+//
+//-------------------------------------------
+// Compatibility notes (*.import.scss)
+// ------------------------------------------
+//
+// This file is intended to be consumed and processed with dart-sass.
+// It is incompatible with node-sass/libsass as it contains sass language features
+// or functions that are unavailable in node-sass/libsass, such as `math.div`.
+//
+// The non-`.import` suffixed version of this file eg. `_filename.scss`
+// is intended to be compatible with node-sass/libsass.
+//
+// Styles authored within this file must be duplicated to the corresponding
+// compatibility file to ensure we continue to support node-sass and dart-sass
+// in v10.
+
+@use 'sass:math';
+
+/// Default font size
+/// @type Number
+/// @access public
+/// @group @carbon/layout
+$carbon--base-font-size: 16px !default;
+
+/// Convert a given px unit to a rem unit
+/// @param {Number} $px - Number with px unit
+/// @return {Number} Number with rem unit
+/// @access public
+/// @group @carbon/layout
+@function carbon--rem($px) {
+  @if unit($px) != 'px' {
+    // TODO: update to @error in v11
+    @warn "Expected argument $px to be of type `px`, instead received: `#{unit($px)}`";
+  }
+
+  @return math.div($px, $carbon--base-font-size) * 1rem;
+}
+
+/// Convert a given px unit to a em unit
+/// @param {Number} $px - Number with px unit
+/// @return {Number} Number with em unit
+/// @access public
+/// @group @carbon/layout
+@function carbon--em($px) {
+  @if unit($px) != 'px' {
+    // TODO: update to @error in v11
+    @warn "Expected argument $px to be of type `px`, instead received: `#{unit($px)}`";
+  }
+
+  @return math.div($px, $carbon--base-font-size) * 1em;
+}

package/scss/_convert.scss

@@ -4,6 +4,20 @@
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.
 //
+//-------------------------------------------
+// Compatibility notes
+// ------------------------------------------
+//
+// This file is intended to be consumed and processed with node-sass/libsass.
+// Sass language features only available in dart-sass, such as `math.div`,
+// should not be used.
+//
+// The `.import` suffixed version of this file eg. `_filename.import.scss`
+// is intended to be compatible with dart-sass.
+//
+// Styles authored within this file must be duplicated to the corresponding
+// compatibility file to ensure we continue to support node-sass and dart-sass
+// in v10.
 
 /// Default font size
 /// @type Number

package/scss/_key-height.import.scss

@@ -0,0 +1,112 @@
+//
+// 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.
+//
+//-------------------------------------------
+// Compatibility notes (*.import.scss)
+// ------------------------------------------
+//
+// This file is intended to be consumed and processed with dart-sass.
+// It is incompatible with node-sass/libsass as it contains sass language features
+// or functions that are unavailable in node-sass/libsass, such as `math.div`.
+//
+// The non-`.import` suffixed version of this file eg. `_filename.scss`
+// is intended to be compatible with node-sass/libsass.
+//
+// Styles authored within this file must be duplicated to the corresponding
+// compatibility file to ensure we continue to support node-sass and dart-sass
+// in v10.
+
+@use "sass:math";
+@import 'breakpoint'; /* stylelint-disable-line no-invalid-position-at-import-rule */
+@import 'utilities'; /* stylelint-disable-line no-invalid-position-at-import-rule */
+
+/// Get the column width for a given breakpoint
+/// @param {String} $breakpoint
+/// @param {Map} $breakpoints [$carbon--grid-breakpoints]
+/// @return {Number} In rem
+/// @access public
+/// @group @carbon/layout
+@function carbon--get-column-width(
+  $breakpoint,
+  $breakpoints: $carbon--grid-breakpoints
+) {
+  @if map-has-key($breakpoints, $breakpoint) {
+    $values: map-get($breakpoints, $breakpoint);
+    $width: map-get($values, width);
+    $margin: map-get($values, margin);
+    $columns: map-get($values, columns);
+
+    @return math.div($width - (2 * $margin), $columns);
+  } @else {
+    @warn 'Breakpoint: `#{$breakpoint}` is not a valid breakpoint.';
+  }
+}
+
+/// @type Map
+/// @access public
+/// @group @carbon/layout
+$carbon--key-height-scales: (
+  sm: (
+    carbon--get-column-width(sm),
+    carbon--get-column-width(sm) * 2,
+    carbon--get-column-width(sm) * 3,
+    carbon--get-column-width(sm) * 4,
+    carbon--get-column-width(sm) * 5,
+    carbon--get-column-width(sm) * 6,
+  ),
+  md: (
+    carbon--get-column-width(md),
+    carbon--get-column-width(md) * 2,
+    carbon--get-column-width(md) * 3,
+    carbon--get-column-width(md) * 4,
+    carbon--get-column-width(md) * 5,
+    carbon--get-column-width(md) * 6,
+  ),
+  lg: (
+    carbon--get-column-width(lg),
+    carbon--get-column-width(lg) * 2,
+    carbon--get-column-width(lg) * 3,
+    carbon--get-column-width(lg) * 4,
+    carbon--get-column-width(lg) * 5,
+    carbon--get-column-width(lg) * 6,
+    carbon--get-column-width(lg) * 7,
+    carbon--get-column-width(lg) * 8,
+  ),
+  xlg: (
+    carbon--get-column-width(xlg),
+    carbon--get-column-width(xlg) * 2,
+    carbon--get-column-width(xlg) * 3,
+    carbon--get-column-width(xlg) * 4,
+    carbon--get-column-width(xlg) * 5,
+    carbon--get-column-width(xlg) * 6,
+    carbon--get-column-width(xlg) * 7,
+    carbon--get-column-width(xlg) * 8,
+  ),
+  max: (
+    carbon--get-column-width(max),
+    carbon--get-column-width(max) * 2,
+    carbon--get-column-width(max) * 3,
+    carbon--get-column-width(max) * 4,
+    carbon--get-column-width(max) * 5,
+    carbon--get-column-width(max) * 6,
+    carbon--get-column-width(max) * 7,
+    carbon--get-column-width(max) * 8,
+  ),
+);
+
+/// Get the value of a key height step at a given breakpoint
+/// @param {String} $breakpoint
+/// @param {Number} $step
+/// @return {Number} In rem
+/// @access public
+/// @group @carbon/layout
+@function carbon--key-height($breakpoint, $step) {
+  @if map-has-key($carbon--key-height-scales, $breakpoint) {
+    @return nth(map-get($carbon--key-height-scales, $breakpoint), $step);
+  } @else {
+    @warn 'Breakpoint: `#{$breakpoint}` is not a valid breakpoint.';
+  }
+}

package/scss/_key-height.scss

@@ -4,6 +4,20 @@
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.
 //
+//-------------------------------------------
+// Compatibility notes
+// ------------------------------------------
+//
+// This file is intended to be consumed and processed with node-sass/libsass.
+// Sass language features only available in dart-sass, such as `math.div`,
+// should not be used.
+//
+// The `.import` suffixed version of this file eg. `_filename.import.scss`
+// is intended to be compatible with dart-sass.
+//
+// Styles authored within this file must be duplicated to the corresponding
+// compatibility file to ensure we continue to support node-sass and dart-sass
+// in v10.
 
 @import 'breakpoint';
 @import 'utilities';

package/scss/modules/_breakpoint.scss

@@ -57,7 +57,7 @@ $grid-breakpoints: (
 ) !default;
 
 /// Get the value of the next breakpoint, or null for the last breakpoint
-/// @param {String} $name - The name of the brekapoint
+/// @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}
@@ -76,7 +76,7 @@ $grid-breakpoints: (
 }
 
 /// Get the value of the previous breakpoint, or null for the first breakpoint
-/// @param {String} $name - The name of the brekapoint
+/// @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}
@@ -95,7 +95,7 @@ $grid-breakpoints: (
 }
 
 /// Check to see if the given breakpoint name
-/// @param {String} $name - The name of the brekapoint
+/// @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
@@ -114,7 +114,7 @@ $grid-breakpoints: (
   @return key-by-index($breakpoints, $total-breakpoints);
 }
 
-/// Get the infix for a given breakpoint in a list of breakpoints. Usesful for generate the size part in a selector, for example: `.prefix--col-sm-2`.
+/// 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

package/scss/modules/_convert.scss

@@ -5,6 +5,8 @@
 // LICENSE file in the root directory of this source tree.
 //
 
+@use 'sass:math';
+
 /// Default font size
 /// @type Number
 /// @access public
@@ -22,7 +24,7 @@ $base-font-size: 16px !default;
     @warn "Expected argument $px to be of type `px`, instead received: `#{unit($px)}`";
   }
 
-  @return ($px / $base-font-size) * 1rem;
+  @return math.div($px, $base-font-size) * 1rem;
 }
 
 /// Convert a given px unit to a em unit
@@ -36,5 +38,5 @@ $base-font-size: 16px !default;
     @warn "Expected argument $px to be of type `px`, instead received: `#{unit($px)}`";
   }
 
-  @return ($px / $base-font-size) * 1em;
+  @return math.div($px, $base-font-size) * 1em;
 }