@carbon/layout 10.0.0-rc.0 → 10.2.0

package/es/index.js

@@ -27,7 +27,7 @@ function em(px) {
 }
 /**
  * Convert a given px unit to its string representation
- * @param {number} px
+ * @param {number} value - number of pixels
  * @returns {string}
  */
 
@@ -87,7 +87,10 @@ var spacing06 = miniUnits(3);
 var spacing07 = miniUnits(4);
 var spacing08 = miniUnits(5);
 var spacing09 = miniUnits(6);
-var spacing = [spacing01, spacing02, spacing03, spacing04, spacing05, spacing06, spacing07, spacing08, spacing09]; // Layout
+var spacing10 = miniUnits(8);
+var spacing11 = miniUnits(10);
+var spacing12 = miniUnits(12);
+var spacing = [spacing01, spacing02, spacing03, spacing04, spacing05, spacing06, spacing07, spacing08, spacing09, spacing10, spacing11, spacing12]; // Layout
 
 var layout01 = miniUnits(2);
 var layout02 = miniUnits(3);
@@ -98,4 +101,4 @@ var layout06 = miniUnits(12);
 var layout07 = miniUnits(20);
 var layout = [layout01, layout02, layout03, layout04, layout05, layout06, layout07];
 
-export { baseFontSize, rem, em, px, breakpoints, breakpointUp, breakpointDown, breakpoint, miniUnit, miniUnits, spacing01, spacing02, spacing03, spacing04, spacing05, spacing06, spacing07, spacing08, spacing09, spacing, layout01, layout02, layout03, layout04, layout05, layout06, layout07, layout };
+export { baseFontSize, rem, em, px, breakpoints, breakpointUp, breakpointDown, breakpoint, miniUnit, miniUnits, spacing01, spacing02, spacing03, spacing04, spacing05, spacing06, spacing07, spacing08, spacing09, spacing10, spacing11, spacing12, spacing, layout01, layout02, layout03, layout04, layout05, layout06, layout07, layout };

package/lib/index.js

@@ -31,7 +31,7 @@ function em(px) {
 }
 /**
  * Convert a given px unit to its string representation
- * @param {number} px
+ * @param {number} value - number of pixels
  * @returns {string}
  */
 
@@ -91,7 +91,10 @@ var spacing06 = miniUnits(3);
 var spacing07 = miniUnits(4);
 var spacing08 = miniUnits(5);
 var spacing09 = miniUnits(6);
-var spacing = [spacing01, spacing02, spacing03, spacing04, spacing05, spacing06, spacing07, spacing08, spacing09]; // Layout
+var spacing10 = miniUnits(8);
+var spacing11 = miniUnits(10);
+var spacing12 = miniUnits(12);
+var spacing = [spacing01, spacing02, spacing03, spacing04, spacing05, spacing06, spacing07, spacing08, spacing09, spacing10, spacing11, spacing12]; // Layout
 
 var layout01 = miniUnits(2);
 var layout02 = miniUnits(3);
@@ -121,6 +124,9 @@ exports.spacing06 = spacing06;
 exports.spacing07 = spacing07;
 exports.spacing08 = spacing08;
 exports.spacing09 = spacing09;
+exports.spacing10 = spacing10;
+exports.spacing11 = spacing11;
+exports.spacing12 = spacing12;
 exports.spacing = spacing;
 exports.layout01 = layout01;
 exports.layout02 = layout02;

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.0.0-rc.0",
+  "version": "10.2.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -19,11 +19,11 @@
     "access": "public"
   },
   "scripts": {
-    "build": "yarn clean && bundler bundle src/index.js --name CarbonLayout",
+    "build": "yarn clean && bundler bundle src/index.js --name CarbonLayout && bundler sassdoc 'scss/*.scss'",
     "clean": "rimraf es lib umd"
   },
   "devDependencies": {
-    "@carbon/bundler": "10.0.0-rc.0",
+    "@carbon/bundler": "10.2.0",
     "rimraf": "^2.6.2"
   },
   "eyeglass": {
@@ -32,5 +32,5 @@
     "sassDir": "scss",
     "needs": "^1.3.0"
   },
-  "gitHead": "1d45594d448a22447b2b2685445362438b7c8944"
+  "gitHead": "e71825a0cf44f6f41fee7d2b0dd9c57d7bda126a"
 }

package/scss/_breakpoint.scss

@@ -9,10 +9,22 @@
 @import 'convert';
 @import 'utilities';
 
+/// Carbon gutter size in rem
+/// @type Number
+/// @access public
+/// @group @carbon/layout
 $carbon--grid-gutter: carbon--rem(32px);
+
+/// Carbon condensed gutter size in rem
+/// @type Number
+/// @access public
+/// @group @carbon/layout
 $carbon--grid-gutter--condensed: carbon--rem(2px);
 
 // Initial map of our breakpoints and their values
+/// @type Map
+/// @access public
+/// @group @carbon/layout
 $carbon--grid-breakpoints: (
   sm: (
     columns: 4,
@@ -41,12 +53,13 @@ $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 {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
-/// @returns {String}
+/// Get the value of the next breakpoint, or null for the last breakpoint
+/// @param {String} $name - The name of the brekapoint
+/// @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}
+/// @access public
+/// @group @carbon/layout
 @function carbon--breakpoint-next(
   $name,
   $breakpoints: $carbon--grid-breakpoints,
@@ -59,6 +72,13 @@ $carbon--grid-breakpoints: (
   @return null;
 }
 
+/// Get the value of the previous breakpoint, or null for the first breakpoint
+/// @param {String} $name - The name of the brekapoint
+/// @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}
+/// @access public
+/// @group @carbon/layout
 @function carbon--breakpoint-prev(
   $name,
   $breakpoints: $carbon--grid-breakpoints,
@@ -72,6 +92,11 @@ $carbon--grid-breakpoints: (
 }
 
 /// Check to see if the given breakpoint name
+/// @param {String} $name - The name of the brekapoint
+/// @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
+/// @group @carbon/layout
 @function carbon--is-smallest-breakpoint(
   $name,
   $breakpoints: $carbon--grid-breakpoints
@@ -79,9 +104,11 @@ $carbon--grid-breakpoints: (
   @return index(map-keys($breakpoints), $name) == 1;
 }
 
-/// returns the largest breakpoint name
-/// @param {Map} $breakpoints [$carbon--grid-breakpoints] - a map of breakpoints where the key is the name
-/// @content
+/// Returns the largest breakpoint name
+/// @param {Map} $breakpoints [$carbon--grid-breakpoints] - A map of breakpoints where the key is the name
+/// @return {String}
+/// @access public
+/// @group @carbon/layout
 @function carbon--largest-breakpoint-name(
   $breakpoints: $carbon--grid-breakpoints
 ) {
@@ -89,18 +116,21 @@ $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`
-/// @param {String} $name - the name of the breakpoint
-/// @returns {String}
+/// 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`.
+/// @param {String} $name - The name of the breakpoint
+/// @return {String}
+/// @access public
+/// @group @carbon/layout
 @function carbon--breakpoint-infix($name) {
   @return '-#{$name}';
 }
 
 /// Generate a media query up to the width of the given breakpoint name
-/// @param {string | number} $name
-/// @param {Map} $breakpoints [$carbon--grid-breakpoints] - a map of breakpoints where the key is the name
+/// @param {String | Number} $name
+/// @param {Map} $breakpoints [$carbon--grid-breakpoints] - A map of breakpoints where the key is the name
 /// @content
+/// @access public
+/// @group @carbon/layout
 @mixin carbon--breakpoint-up($name, $breakpoints: $carbon--grid-breakpoints) {
   @if type-of($name) == 'number' {
     @media (min-width: $name) {
@@ -122,9 +152,11 @@ $carbon--grid-breakpoints: (
 }
 
 /// Generate a media query for the maximum width of the given styles
-/// @param {string | number} $name
-/// @param {Map} $breakpoints [$carbon--grid-breakpoints] - a map of breakpoints where the key is the name
+/// @param {String | Number} $name
+/// @param {Map} $breakpoints [$carbon--grid-breakpoints] - A map of breakpoints where the key is the name
 /// @content
+/// @access public
+/// @group @carbon/layout
 @mixin carbon--breakpoint-down($name, $breakpoints: $carbon--grid-breakpoints) {
   @if type-of($name) == 'number' {
     @media (max-width: $name) {
@@ -145,11 +177,13 @@ $carbon--grid-breakpoints: (
   }
 }
 
-/// Generate a media query for the range between the lower and upper
-/// breakpoints.
-/// @param {string | number} $lower
-/// @param {string | number} $upper
+/// Generate a media query for the range between the lower and upper breakpoints
+/// @param {String | Number} $lower
+/// @param {String | Number} $upper
+/// @param {Map} $breakpoints [$carbon--grid-breakpoints] - A map of breakpoints where the key is the name
 /// @content
+/// @access public
+/// @group @carbon/layout
 @mixin carbon--breakpoint-between(
   $lower,
   $upper,
@@ -179,9 +213,11 @@ $carbon--grid-breakpoints: (
   }
 }
 
-/// generate media query for the largest breakpoint
-/// @param {Map} $breakpoints [$carbon--grid-breakpoints] - a map of breakpoints where the key is the name
+/// Generate media query for the largest breakpoint
+/// @param {Map} $breakpoints [$carbon--grid-breakpoints] - A map of breakpoints where the key is the name
 /// @content
+/// @access public
+/// @group @carbon/layout
 @mixin carbon--largest-breakpoint($breakpoints: $carbon--grid-breakpoints) {
   @include carbon--breakpoint(carbon--largest-breakpoint-name()) {
     @content;
@@ -189,9 +225,11 @@ $carbon--grid-breakpoints: (
 }
 
 /// Generate a media query for a given breakpoint
-/// @param {string | number} $name
-/// @param {Map} $breakpoints [$carbon--grid-breakpoints] - a map of breakpoints where the key is the name
+/// @param {String | Number} $name
+/// @param {Map} $breakpoints [$carbon--grid-breakpoints] - A map of breakpoints where the key is the name
 /// @content
+/// @access public
+/// @group @carbon/layout
 @mixin carbon--breakpoint($name, $breakpoints: $carbon--grid-breakpoints) {
   @include carbon--breakpoint-up($name, $breakpoints) {
     @content;

package/scss/_convert.scss

@@ -5,19 +5,26 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-// Default, Use with carbon--em() and carbon--rem() functions
+/// 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 {px} $px
-/// @return {rem}
+/// @param {Number} $px - Number with px unit
+/// @return {Number} Number with rem unit
+/// @access public
+/// @group @carbon/layout
 @function carbon--rem($px) {
   @return ($px / $carbon--base-font-size) * 1rem;
 }
 
 /// Convert a given px unit to a em unit
-/// @param {px} $px
-/// @return {em}
+/// @param {Number} $px - Number with px unit
+/// @return {Number} Number with em unit
+/// @access public
+/// @group @carbon/layout
 @function carbon--em($px) {
   @return ($px / $carbon--base-font-size) * 1em;
 }

package/scss/_key-height.scss

@@ -8,10 +8,12 @@
 @import 'breakpoint';
 @import 'utilities';
 
-/// Get the column width for a given breakpoint. Useful for figuring out key
-/// heights
-/// @param {string} $breakpoint
-/// @return rem
+/// 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
@@ -28,6 +30,9 @@
   }
 }
 
+/// @type Map
+/// @access public
+/// @group @carbon/layout
 $carbon--key-height-scales: (
   sm: (
     carbon--get-column-width(sm),
@@ -78,9 +83,11 @@ $carbon--key-height-scales: (
 );
 
 /// Get the value of a key height step at a given breakpoint
-/// @param {string} $breakpoint
-/// @param {number} $step
-/// @return rem
+/// @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);

package/scss/_mini-unit.scss

@@ -7,12 +7,17 @@
 
 @import 'convert';
 
-// Default mini-unit value
+/// Default mini-unit value
+/// @type Number
+/// @access public
+/// @group @carbon/layout
 $carbon--mini-unit-size: 8px !default;
 
 /// Get the value of the corresponding number of units
-/// @param {number} $count the number of units to get the value for
-/// @return rem
+/// @param {Number} $count - The number of units to get the value for
+/// @return {Number} In rem units
+/// @access public
+/// @group @carbon/layout
 @function carbon--mini-units($count) {
   @return carbon--rem($carbon--mini-unit-size * $count);
 }

package/scss/_spacing.scss

@@ -7,49 +7,322 @@
 
 @import 'mini-unit';
 
+/// 0.125rem (2px) spacing with default mini unit
+/// @type Number
+/// @access public
+/// @group @carbon/layout
 $carbon--spacing-01: carbon--mini-units(0.25) !default;
+
+/// 0.25rem (4px) spacing with default mini unit
+/// @type Number
+/// @access public
+/// @group @carbon/layout
 $carbon--spacing-02: carbon--mini-units(0.5) !default;
+
+/// 0.5rem (8px) spacing with default mini unit
+/// @type Number
+/// @access public
+/// @group @carbon/layout
 $carbon--spacing-03: carbon--mini-units(1) !default;
+
+/// 0.75rem (12px) spacing with default mini unit
+/// @type Number
+/// @access public
+/// @group @carbon/layout
 $carbon--spacing-04: carbon--mini-units(1.5) !default;
+
+/// 1rem (16px) spacing with default mini unit
+/// @type Number
+/// @access public
+/// @group @carbon/layout
 $carbon--spacing-05: carbon--mini-units(2) !default;
+
+/// 1.5rem (24px) spacing with default mini unit
+/// @type Number
+/// @access public
+/// @group @carbon/layout
 $carbon--spacing-06: carbon--mini-units(3) !default;
+
+/// 2rem (32px) spacing with default mini unit
+/// @type Number
+/// @access public
+/// @group @carbon/layout
 $carbon--spacing-07: carbon--mini-units(4) !default;
+
+/// 2.5rem (40px) spacing with default mini unit
+/// @type Number
+/// @access public
+/// @group @carbon/layout
 $carbon--spacing-08: carbon--mini-units(5) !default;
+
+/// 3rem (48px) spacing with default mini unit
+/// @type Number
+/// @access public
+/// @group @carbon/layout
 $carbon--spacing-09: carbon--mini-units(6) !default;
 
+/// 4rem (64px) spacing with default mini unit
+/// @type Number
+/// @access public
+/// @group @carbon/layout
+$carbon--spacing-10: carbon--mini-units(8) !default;
+
+/// 5rem (80px) spacing with default mini unit
+/// @type Number
+/// @access public
+/// @group @carbon/layout
+$carbon--spacing-11: carbon--mini-units(10) !default;
+
+/// 6rem (96px) spacing with default mini unit
+/// @type Number
+/// @access public
+/// @group @carbon/layout
+$carbon--spacing-12: carbon--mini-units(12) !default;
+
+/// All spacing increments in a map
+/// @type Map
+/// @access public
+/// @group @carbon/layout
+$carbon--spacing: (
+  $carbon--spacing-01,
+  $carbon--spacing-02,
+  $carbon--spacing-03,
+  $carbon--spacing-04,
+  $carbon--spacing-05,
+  $carbon--spacing-06,
+  $carbon--spacing-07,
+  $carbon--spacing-08,
+  $carbon--spacing-09,
+  $carbon--spacing-10,
+  $carbon--spacing-11,
+  $carbon--spacing-12
+) !default;
+
+/// @type Number
+/// @access public
+/// @group @carbon/layout
+/// @alias carbon--spacing-01
 $spacing-01: $carbon--spacing-01 !default;
+
+/// @type Number
+/// @access public
+/// @group @carbon/layout
+/// @alias carbon--spacing-02
 $spacing-02: $carbon--spacing-02 !default;
+
+/// @type Number
+/// @access public
+/// @group @carbon/layout
+/// @alias carbon--spacing-03
 $spacing-03: $carbon--spacing-03 !default;
+
+/// @type Number
+/// @access public
+/// @group @carbon/layout
+/// @alias carbon--spacing-04
 $spacing-04: $carbon--spacing-04 !default;
+
+/// @type Number
+/// @access public
+/// @group @carbon/layout
+/// @alias carbon--spacing-05
 $spacing-05: $carbon--spacing-05 !default;
+
+/// @type Number
+/// @access public
+/// @group @carbon/layout
+/// @alias carbon--spacing-06
 $spacing-06: $carbon--spacing-06 !default;
+
+/// @type Number
+/// @access public
+/// @group @carbon/layout
+/// @alias carbon--spacing-07
 $spacing-07: $carbon--spacing-07 !default;
+
+/// @type Number
+/// @access public
+/// @group @carbon/layout
+/// @alias carbon--spacing-08
 $spacing-08: $carbon--spacing-08 !default;
+
+/// @type Number
+/// @access public
+/// @group @carbon/layout
+/// @alias carbon--spacing-09
 $spacing-09: $carbon--spacing-09 !default;
 
+/// @type Number
+/// @access public
+/// @group @carbon/layout
+/// @alias carbon--spacing-10
+$spacing-10: $carbon--spacing-10 !default;
+
+/// @type Number
+/// @access public
+/// @group @carbon/layout
+/// @alias carbon--spacing-11
+$spacing-11: $carbon--spacing-11 !default;
+
+/// @type Number
+/// @access public
+/// @group @carbon/layout
+/// @alias carbon--spacing-12
+$spacing-12: $carbon--spacing-12 !default;
+
+/// 1rem (16px) layout with default mini unit
+/// @type Number
+/// @access public
+/// @group @carbon/layout
 $carbon--layout-01: carbon--mini-units(2) !default;
+
+/// 1.5rem (24px) layout with default mini unit
+/// @type Number
+/// @access public
+/// @group @carbon/layout
 $carbon--layout-02: carbon--mini-units(3) !default;
+
+/// 2rem (32px) layout with default mini unit
+/// @type Number
+/// @access public
+/// @group @carbon/layout
 $carbon--layout-03: carbon--mini-units(4) !default;
+
+/// 3rem (48px) layout with default mini unit
+/// @type Number
+/// @access public
+/// @group @carbon/layout
 $carbon--layout-04: carbon--mini-units(6) !default;
+
+/// 4rem (64px) layout with default mini unit
+/// @type Number
+/// @access public
+/// @group @carbon/layout
 $carbon--layout-05: carbon--mini-units(8) !default;
+
+/// 4rem (96px) layout with default mini unit
+/// @type Number
+/// @access public
+/// @group @carbon/layout
 $carbon--layout-06: carbon--mini-units(12) !default;
+
+/// 10rem (160px) layout with default mini unit
+/// @type Number
+/// @access public
+/// @group @carbon/layout
 $carbon--layout-07: carbon--mini-units(20) !default;
 
+/// All layout increments in a map
+/// @type Map
+/// @access public
+/// @group @carbon/layout
+$carbon--layout: (
+  $carbon--layout-01,
+  $carbon--layout-02,
+  $carbon--layout-03,
+  $carbon--layout-04,
+  $carbon--layout-05,
+  $carbon--layout-06,
+  $carbon--layout-07
+) !default;
+
+/// @type Number
+/// @access public
+/// @group @carbon/layout
+/// @alias carbon--layout-01
 $layout-01: $carbon--layout-01 !default;
+
+/// @type Number
+/// @access public
+/// @group @carbon/layout
+/// @alias carbon--layout-02
 $layout-02: $carbon--layout-02 !default;
+
+/// @type Number
+/// @access public
+/// @group @carbon/layout
+/// @alias carbon--layout-03
 $layout-03: $carbon--layout-03 !default;
+
+/// @type Number
+/// @access public
+/// @group @carbon/layout
+/// @alias carbon--layout-04
 $layout-04: $carbon--layout-04 !default;
+
+/// @type Number
+/// @access public
+/// @group @carbon/layout
+/// @alias carbon--layout-05
 $layout-05: $carbon--layout-05 !default;
+
+/// @type Number
+/// @access public
+/// @group @carbon/layout
+/// @alias carbon--layout-06
 $layout-06: $carbon--layout-06 !default;
+
+/// @type Number
+/// @access public
+/// @group @carbon/layout
+/// @alias carbon--layout-07
 $layout-07: $carbon--layout-07 !default;
 
-// fluid spacing
+/// 0vw fluid spacing
+/// @type Number
+/// @access public
+/// @group @carbon/layout
 $carbon--fluid-spacing-01: 0;
+
+/// 2vw fluid spacing
+/// @type Number
+/// @access public
+/// @group @carbon/layout
 $carbon--fluid-spacing-02: 2vw;
+
+/// 5vw fluid spacing
+/// @type Number
+/// @access public
+/// @group @carbon/layout
 $carbon--fluid-spacing-03: 5vw;
+
+/// 10vw fluid spacing
+/// @type Number
+/// @access public
+/// @group @carbon/layout
 $carbon--fluid-spacing-04: 10vw;
 
+/// All fluid spacing increments in a map
+/// @type Map
+/// @access public
+/// @group @carbon/layout
+$carbon--fluid-spacing: (
+  $carbon--fluid-spacing-01,
+  $carbon--fluid-spacing-02,
+  $carbon--fluid-spacing-03,
+  $carbon--fluid-spacing-04
+) !default;
+
+/// @type Number
+/// @access public
+/// @group @carbon/layout
+/// @alias carbon--fluid-spacing-01
 $fluid-spacing-01: $carbon--fluid-spacing-01 !default;
+
+/// @type Number
+/// @access public
+/// @group @carbon/layout
+/// @alias carbon--fluid-spacing-02
 $fluid-spacing-02: $carbon--fluid-spacing-02 !default;
+
+/// @type Number
+/// @access public
+/// @group @carbon/layout
+/// @alias carbon--fluid-spacing-03
 $fluid-spacing-03: $carbon--fluid-spacing-03 !default;
+
+/// @type Number
+/// @access public
+/// @group @carbon/layout
+/// @alias carbon--fluid-spacing-04
 $fluid-spacing-04: $carbon--fluid-spacing-04 !default;