@carbon/type 10.1.1 → 10.2.0

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

@@ -0,0 +1,328 @@
+//
+// 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.
+//
+
+@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;
+
+/// 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;

package/scss/vendor/@carbon/layout/_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 carbon--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/index.scss

@@ -0,0 +1,8 @@
+//
+// 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.
+//
+
+@import 'layout';

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

@@ -0,0 +1,12 @@
+//
+// 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.
+//
+
+@import 'convert';
+@import 'breakpoint';
+@import 'mini-unit';
+@import 'spacing';
+@import 'key-height';

package/src/__tests__/__snapshots__/styles-test.js.snap

@@ -257,6 +257,38 @@ letter-spacing: 0;
 -@media- -(min--width-:- -9-9rem-): [object Object];"
 `;
 
+exports[`styles expressiveHeading01 should be printable 1`] = `
+Object {
+  "fontSize": "0.875rem",
+  "fontWeight": 600,
+  "letterSpacing": "0.16px",
+  "lineHeight": "1.125rem",
+}
+`;
+
+exports[`styles expressiveHeading01 should be printable 2`] = `
+"font-size: 0.875rem;
+font-weight: 600;
+line-height: 1.125rem;
+letter-spacing: 0.16px;"
+`;
+
+exports[`styles expressiveHeading02 should be printable 1`] = `
+Object {
+  "fontSize": "1rem",
+  "fontWeight": 600,
+  "letterSpacing": 0,
+  "lineHeight": "1.375rem",
+}
+`;
+
+exports[`styles expressiveHeading02 should be printable 2`] = `
+"font-size: 1rem;
+font-weight: 600;
+line-height: 1.375rem;
+letter-spacing: 0;"
+`;
+
 exports[`styles expressiveHeading03 should be printable 1`] = `
 Object {
   "@media (min-width: 82rem)": Object {
@@ -485,6 +517,38 @@ line-height: 1rem;
 letter-spacing: 0.32px;"
 `;
 
+exports[`styles productiveHeading01 should be printable 1`] = `
+Object {
+  "fontSize": "0.875rem",
+  "fontWeight": 600,
+  "letterSpacing": "0.16px",
+  "lineHeight": "1.125rem",
+}
+`;
+
+exports[`styles productiveHeading01 should be printable 2`] = `
+"font-size: 0.875rem;
+font-weight: 600;
+line-height: 1.125rem;
+letter-spacing: 0.16px;"
+`;
+
+exports[`styles productiveHeading02 should be printable 1`] = `
+Object {
+  "fontSize": "1rem",
+  "fontWeight": 600,
+  "letterSpacing": 0,
+  "lineHeight": "1.375rem",
+}
+`;
+
+exports[`styles productiveHeading02 should be printable 2`] = `
+"font-size: 1rem;
+font-weight: 600;
+line-height: 1.375rem;
+letter-spacing: 0;"
+`;
+
 exports[`styles productiveHeading03 should be printable 1`] = `
 Object {
   "fontSize": "1.25rem",
@@ -533,6 +597,38 @@ line-height: 2.5rem;
 letter-spacing: 0;"
 `;
 
+exports[`styles productiveHeading06 should be printable 1`] = `
+Object {
+  "fontSize": "2.625rem",
+  "fontWeight": 300,
+  "letterSpacing": 0,
+  "lineHeight": "3.125rem",
+}
+`;
+
+exports[`styles productiveHeading06 should be printable 2`] = `
+"font-size: 2.625rem;
+font-weight: 300;
+line-height: 3.125rem;
+letter-spacing: 0;"
+`;
+
+exports[`styles productiveHeading07 should be printable 1`] = `
+Object {
+  "fontSize": "3.375rem",
+  "fontWeight": 300,
+  "letterSpacing": 0,
+  "lineHeight": "4rem",
+}
+`;
+
+exports[`styles productiveHeading07 should be printable 2`] = `
+"font-size: 3.375rem;
+font-weight: 300;
+line-height: 4rem;
+letter-spacing: 0;"
+`;
+
 exports[`styles quotation01 should be printable 1`] = `
 Object {
   "@media (min-width: 42rem)": Object {

package/src/__tests__/exports-test.js

@@ -12,42 +12,48 @@ import * as CarbonType from '../';
 describe('type', () => {
   it('should export type helpers', () => {
     expect(Object.keys(CarbonType)).toMatchInlineSnapshot(`
-Array [
-  "fontFamilies",
-  "fontFamily",
-  "fontWeights",
-  "fontWeight",
-  "print",
-  "reset",
-  "getTypeSize",
-  "scale",
-  "styles",
-  "caption01",
-  "label01",
-  "helperText01",
-  "bodyShort01",
-  "bodyLong01",
-  "bodyShort02",
-  "bodyLong02",
-  "code01",
-  "code02",
-  "heading01",
-  "heading02",
-  "productiveHeading03",
-  "productiveHeading04",
-  "productiveHeading05",
-  "expressiveHeading03",
-  "expressiveHeading04",
-  "expressiveHeading05",
-  "expressiveHeading06",
-  "expressiveParagraph01",
-  "quotation01",
-  "quotation02",
-  "display01",
-  "display02",
-  "display03",
-  "display04",
-]
-`);
+      Array [
+        "fontFamilies",
+        "fontFamily",
+        "fontWeights",
+        "fontWeight",
+        "print",
+        "reset",
+        "getTypeSize",
+        "scale",
+        "styles",
+        "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/src/styles.js

@@ -80,6 +80,8 @@ export const heading01 = {
   letterSpacing: px(0.16),
 };
 
+export const productiveHeading01 = heading01;
+
 export const heading02 = {
   fontSize: rem(scale[2]),
   fontWeight: fontWeights.semibold,
@@ -87,6 +89,8 @@ export const heading02 = {
   letterSpacing: 0,
 };
 
+export const productiveHeading02 = heading02;
+
 export const productiveHeading03 = {
   fontSize: rem(scale[4]),
   fontWeight: fontWeights.regular,
@@ -108,6 +112,24 @@ export const productiveHeading05 = {
   letterSpacing: 0,
 };
 
+export const productiveHeading06 = {
+  fontSize: rem(scale[9]),
+  fontWeight: fontWeights.light,
+  lineHeight: rem(50),
+  letterSpacing: 0,
+};
+
+export const productiveHeading07 = {
+  fontSize: rem(scale[11]),
+  fontWeight: fontWeights.light,
+  lineHeight: rem(64),
+  letterSpacing: 0,
+};
+
+export const expressiveHeading01 = heading01;
+
+export const expressiveHeading02 = heading02;
+
 export const expressiveHeading03 = fluid({
   fontSize: rem(scale[4]),
   fontWeight: fontWeights.regular,