@carbon/type 10.20.0-rc.0 → 10.21.0

package/scss/vendor/@carbon/layout/modules/_breakpoint.scss

@@ -0,0 +1,232 @@
+//
+// 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.
+//
+
+// https://github.com/twbs/bootstrap/blob/v4-dev/scss/mixins/_breakpoints.scss
+@use 'sass:list';
+@use 'sass:map';
+@use 'sass:meta';
+@use 'convert';
+@use 'utilities';
+
+/// Carbon gutter size in rem
+/// @type Number
+/// @access public
+/// @group @carbon/layout
+$grid-gutter: convert.rem(32px);
+
+/// Carbon condensed gutter size in rem
+/// @type Number
+/// @access public
+/// @group @carbon/layout
+$grid-gutter--condensed: convert.rem(1px);
+
+// 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;
+
+/// Get the value of the next breakpoint, or null for the last breakpoint
+/// @param {String} $name - The name of the brekapoint
+/// @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 brekapoint
+/// @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 brekapoint
+/// @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. 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 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/vendor/@carbon/layout/modules/_convert.scss

@@ -0,0 +1,40 @@
+//
+// 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.
+//
+
+/// Default font size
+/// @type Number
+/// @access public
+/// @group @carbon/layout
+$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 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 ($px / $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 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 ($px / $base-font-size) * 1em;
+}

package/scss/vendor/@carbon/layout/modules/_spacing.scss

@@ -0,0 +1,9 @@
+//
+// 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.
+//
+
+@forward './generated/fluid-spacing';
+@forward './generated/spacing';

package/scss/vendor/@carbon/layout/modules/_utilities.scss

@@ -0,0 +1,41 @@
+//
+// 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.
+//
+
+/// Map deep get
+/// @author Hugo Giraudel
+/// @access public
+/// @param {Map} $map - Map
+/// @param {Arglist} $keys - Key chain
+/// @return {*} Desired value
+/// @group @carbon/layout
+@function map-deep-get($map, $keys...) {
+  @each $key in $keys {
+    $map: map-get($map, $key);
+  }
+  @return $map;
+}
+
+/// 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);
+}
+
+/// 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: length($map);
+  @return map-get($map, carbon--key-by-index($map, $total-length));
+}

package/scss/vendor/@carbon/layout/modules/generated/_fluid-spacing.scss

@@ -0,0 +1,37 @@
+// Code generated by @carbon/layout. DO NOT EDIT.
+//
+// Copyright IBM Corp. 2018, 2019
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+/// @type Number
+/// @access public
+/// @group @carbon/layout
+$fluid-spacing-01: 0 !default;
+
+/// @type Number
+/// @access public
+/// @group @carbon/layout
+$fluid-spacing-02: 2vw !default;
+
+/// @type Number
+/// @access public
+/// @group @carbon/layout
+$fluid-spacing-03: 5vw !default;
+
+/// @type Number
+/// @access public
+/// @group @carbon/layout
+$fluid-spacing-04: 10vw !default;
+
+/// @type Map
+/// @access public
+/// @group @carbon/layout
+$fluid-spacing: (
+  fluid-spacing-01: $fluid-spacing-01,
+  fluid-spacing-02: $fluid-spacing-02,
+  fluid-spacing-03: $fluid-spacing-03,
+  fluid-spacing-04: $fluid-spacing-04,
+);

package/scss/vendor/@carbon/layout/modules/generated/_spacing.scss

@@ -0,0 +1,85 @@
+// Code generated by @carbon/layout. DO NOT EDIT.
+//
+// Copyright IBM Corp. 2018, 2019
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+/// @type Number
+/// @access public
+/// @group @carbon/layout
+$spacing-01: 0.125rem !default;
+
+/// @type Number
+/// @access public
+/// @group @carbon/layout
+$spacing-02: 0.25rem !default;
+
+/// @type Number
+/// @access public
+/// @group @carbon/layout
+$spacing-03: 0.5rem !default;
+
+/// @type Number
+/// @access public
+/// @group @carbon/layout
+$spacing-04: 0.75rem !default;
+
+/// @type Number
+/// @access public
+/// @group @carbon/layout
+$spacing-05: 1rem !default;
+
+/// @type Number
+/// @access public
+/// @group @carbon/layout
+$spacing-06: 1.5rem !default;
+
+/// @type Number
+/// @access public
+/// @group @carbon/layout
+$spacing-07: 2rem !default;
+
+/// @type Number
+/// @access public
+/// @group @carbon/layout
+$spacing-08: 2.5rem !default;
+
+/// @type Number
+/// @access public
+/// @group @carbon/layout
+$spacing-09: 3rem !default;
+
+/// @type Number
+/// @access public
+/// @group @carbon/layout
+$spacing-10: 4rem !default;
+
+/// @type Number
+/// @access public
+/// @group @carbon/layout
+$spacing-11: 5rem !default;
+
+/// @type Number
+/// @access public
+/// @group @carbon/layout
+$spacing-12: 6rem !default;
+
+/// @type Map
+/// @access public
+/// @group @carbon/layout
+$spacing: (
+  spacing-01: $spacing-01,
+  spacing-02: $spacing-02,
+  spacing-03: $spacing-03,
+  spacing-04: $spacing-04,
+  spacing-05: $spacing-05,
+  spacing-06: $spacing-06,
+  spacing-07: $spacing-07,
+  spacing-08: $spacing-08,
+  spacing-09: $spacing-09,
+  spacing-10: $spacing-10,
+  spacing-11: $spacing-11,
+  spacing-12: $spacing-12,
+);

package/src/__tests__/exports-test.js

@@ -22,6 +22,7 @@ describe('type', () => {
         "getTypeSize",
         "scale",
         "fluid",
+        "unstable_tokens",
         "styles",
         "caption01",
         "label01",
@@ -54,7 +55,6 @@ describe('type', () => {
         "display02",
         "display03",
         "display04",
-        "unstable_tokens",
       ]
     `);
   });

package/src/index.js

@@ -14,7 +14,7 @@ import * as styles from './styles';
 
 export { fluid } from './fluid';
 export * from './styles';
-export * from './tokens';
+export { unstable_tokens } from './tokens';
 export {
   fontFamilies,
   fontFamily,

package/src/tokens.js

@@ -5,36 +5,69 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+// Unstable tokens
+export const caption01 = 'caption01';
+export const label01 = 'label01';
+export const helperText01 = 'helperText01';
+export const bodyShort01 = 'bodyShort01';
+export const bodyLong01 = 'bodyLong01';
+export const bodyShort02 = 'bodyShort02';
+export const bodyLong02 = 'bodyLong02';
+export const code01 = 'code01';
+export const code02 = 'code02';
+export const heading01 = 'heading01';
+export const productiveHeading01 = 'productiveHeading01';
+export const heading02 = 'heading02';
+export const productiveHeading02 = 'productiveHeading02';
+export const productiveHeading03 = 'productiveHeading03';
+export const productiveHeading04 = 'productiveHeading04';
+export const productiveHeading05 = 'productiveHeading05';
+export const productiveHeading06 = 'productiveHeading06';
+export const productiveHeading07 = 'productiveHeading07';
+export const expressiveHeading01 = 'expressiveHeading01';
+export const expressiveHeading02 = 'expressiveHeading02';
+export const expressiveHeading03 = 'expressiveHeading03';
+export const expressiveHeading04 = 'expressiveHeading04';
+export const expressiveHeading05 = 'expressiveHeading05';
+export const expressiveHeading06 = 'expressiveHeading06';
+export const expressiveParagraph01 = 'expressiveParagraph01';
+export const quotation01 = 'quotation01';
+export const quotation02 = 'quotation02';
+export const display01 = 'display01';
+export const display02 = 'display02';
+export const display03 = 'display03';
+export const display04 = 'display04';
+
 export const unstable_tokens = [
-  'caption01',
-  'label01',
-  'helperText01',
-  'bodyShort01',
-  'bodyLong01',
-  'bodyShort02',
-  'bodyLong02',
-  'code01',
-  'code02',
-  'heading01',
-  'productiveHeading01',
-  'heading02',
-  'productiveHeading02',
-  'productiveHeading03',
-  'productiveHeading04',
-  'productiveHeading05',
-  'productiveHeading06',
-  'productiveHeading07',
-  'expressiveHeading01',
-  'expressiveHeading02',
-  'expressiveHeading03',
-  'expressiveHeading04',
-  'expressiveHeading05',
-  'expressiveHeading06',
-  'expressiveParagraph01',
-  'quotation01',
-  'quotation02',
-  'display01',
-  'display02',
-  'display03',
-  'display04',
+  caption01,
+  label01,
+  helperText01,
+  bodyShort01,
+  bodyLong01,
+  bodyShort02,
+  bodyLong02,
+  code01,
+  code02,
+  heading01,
+  productiveHeading01,
+  heading02,
+  productiveHeading02,
+  productiveHeading03,
+  productiveHeading04,
+  productiveHeading05,
+  productiveHeading06,
+  productiveHeading07,
+  expressiveHeading01,
+  expressiveHeading02,
+  expressiveHeading03,
+  expressiveHeading04,
+  expressiveHeading05,
+  expressiveHeading06,
+  expressiveParagraph01,
+  quotation01,
+  quotation02,
+  display01,
+  display02,
+  display03,
+  display04,
 ];

package/umd/index.js

@@ -719,7 +719,39 @@
    * This source code is licensed under the Apache-2.0 license found in the
    * LICENSE file in the root directory of this source tree.
    */
-  var unstable_tokens = ['caption01', 'label01', 'helperText01', 'bodyShort01', 'bodyLong01', 'bodyShort02', 'bodyLong02', 'code01', 'code02', 'heading01', 'productiveHeading01', 'heading02', 'productiveHeading02', 'productiveHeading03', 'productiveHeading04', 'productiveHeading05', 'productiveHeading06', 'productiveHeading07', 'expressiveHeading01', 'expressiveHeading02', 'expressiveHeading03', 'expressiveHeading04', 'expressiveHeading05', 'expressiveHeading06', 'expressiveParagraph01', 'quotation01', 'quotation02', 'display01', 'display02', 'display03', 'display04'];
+  // Unstable tokens
+  var caption01$1 = 'caption01';
+  var label01$1 = 'label01';
+  var helperText01$1 = 'helperText01';
+  var bodyShort01$1 = 'bodyShort01';
+  var bodyLong01$1 = 'bodyLong01';
+  var bodyShort02$1 = 'bodyShort02';
+  var bodyLong02$1 = 'bodyLong02';
+  var code01$1 = 'code01';
+  var code02$1 = 'code02';
+  var heading01$1 = 'heading01';
+  var productiveHeading01$1 = 'productiveHeading01';
+  var heading02$1 = 'heading02';
+  var productiveHeading02$1 = 'productiveHeading02';
+  var productiveHeading03$1 = 'productiveHeading03';
+  var productiveHeading04$1 = 'productiveHeading04';
+  var productiveHeading05$1 = 'productiveHeading05';
+  var productiveHeading06$1 = 'productiveHeading06';
+  var productiveHeading07$1 = 'productiveHeading07';
+  var expressiveHeading01$1 = 'expressiveHeading01';
+  var expressiveHeading02$1 = 'expressiveHeading02';
+  var expressiveHeading03$1 = 'expressiveHeading03';
+  var expressiveHeading04$1 = 'expressiveHeading04';
+  var expressiveHeading05$1 = 'expressiveHeading05';
+  var expressiveHeading06$1 = 'expressiveHeading06';
+  var expressiveParagraph01$1 = 'expressiveParagraph01';
+  var quotation01$1 = 'quotation01';
+  var quotation02$1 = 'quotation02';
+  var display01$1 = 'display01';
+  var display02$1 = 'display02';
+  var display03$1 = 'display03';
+  var display04$1 = 'display04';
+  var unstable_tokens = [caption01$1, label01$1, helperText01$1, bodyShort01$1, bodyLong01$1, bodyShort02$1, bodyLong02$1, code01$1, code02$1, heading01$1, productiveHeading01$1, heading02$1, productiveHeading02$1, productiveHeading03$1, productiveHeading04$1, productiveHeading05$1, productiveHeading06$1, productiveHeading07$1, expressiveHeading01$1, expressiveHeading02$1, expressiveHeading03$1, expressiveHeading04$1, expressiveHeading05$1, expressiveHeading06$1, expressiveParagraph01$1, quotation01$1, quotation02$1, display01$1, display02$1, display03$1, display04$1];
 
   exports.bodyLong01 = bodyLong01;
   exports.bodyLong02 = bodyLong02;