@occmundial/occ-atomic 2.0.0-beta.3 → 2.0.0-beta.5

package/build/Text/Text.js

@@ -37,6 +37,64 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 
 function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
 
+function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it["return"] != null) it["return"](); } finally { if (didErr) throw err; } } }; }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+var oldToNewClassMapper = {
+  // Text
+  hero: 'h1',
+  headline: 'h2',
+  heading: 'h4',
+  subheading: 'h5',
+  extraLarge: 'bodyXLarge',
+  large: 'bodyLarge',
+  standard: 'bodyRegular',
+  small: 'bodySmall',
+  micro: 'bodyXSmall',
+  // Color
+  primary: 'indigoPrimary',
+  secondary: 'pinkPrimary',
+  white: 'whitePrimary',
+  highEmphasis: 'corpPrimary',
+  midEmphasis: 'corpSecondary',
+  lowEmphasis: 'corpDisabled',
+  // Spacing
+  topXTiny: 'top1',
+  topTiny: 'top2',
+  topSmall: 'top4',
+  topBase: 'top5',
+  topMedium: 'top6',
+  topLarge: 'top8',
+  topXLarge: 'top9',
+  bottomXTiny: 'bottom1',
+  bottomTiny: 'bottom2',
+  bottomSmall: 'bottom4',
+  bottomBase: 'bottom5',
+  bottomMedium: 'bottom6',
+  bottomLarge: 'bottom8',
+  bottomXLarge: 'bottom9'
+};
+
+var getActiveKey = function getActiveKey(array) {
+  var _iterator = _createForOfIteratorHelper(array),
+      _step;
+
+  try {
+    for (_iterator.s(); !(_step = _iterator.n()).done;) {
+      var item = _step.value;
+      var key = Object.keys(item)[0];
+      if (item[key]) return key;
+    }
+  } catch (err) {
+    _iterator.e(err);
+  } finally {
+    _iterator.f();
+  }
+};
+
 var Text = /*#__PURE__*/function (_Component) {
   _inherits(Text, _Component);
 
@@ -49,14 +107,6 @@ var Text = /*#__PURE__*/function (_Component) {
   }
 
   _createClass(Text, [{
-    key: "filter",
-    value: function filter(array) {
-      return array.filter(function (item) {
-        var key = Object.keys(item)[0];
-        if (item[key]) return key;
-      });
-    }
-  }, {
     key: "getSize",
     value: function getSize() {
       var _this$props = this.props,
@@ -69,8 +119,53 @@ var Text = /*#__PURE__*/function (_Component) {
           large = _this$props.large,
           standard = _this$props.standard,
           small = _this$props.small,
-          micro = _this$props.micro;
-      var sizes = [{
+          micro = _this$props.micro,
+          display = _this$props.display,
+          h1 = _this$props.h1,
+          h2 = _this$props.h2,
+          h3 = _this$props.h3,
+          h4 = _this$props.h4,
+          h5 = _this$props.h5,
+          tagText = _this$props.tagText,
+          bodyXLarge = _this$props.bodyXLarge,
+          bodyLargeStrong = _this$props.bodyLargeStrong,
+          bodyLarge = _this$props.bodyLarge,
+          bodyRegularStrong = _this$props.bodyRegularStrong,
+          bodyRegular = _this$props.bodyRegular,
+          bodySmallStrong = _this$props.bodySmallStrong,
+          bodySmall = _this$props.bodySmall,
+          bodyXSmall = _this$props.bodyXSmall;
+      var sizeActive = getActiveKey([{
+        display: display
+      }, {
+        h1: h1
+      }, {
+        h2: h2
+      }, {
+        h3: h3
+      }, {
+        h4: h4
+      }, {
+        h5: h5
+      }, {
+        tag: tagText
+      }, {
+        bodyXLarge: bodyXLarge
+      }, {
+        bodyLargeStrong: bodyLargeStrong
+      }, {
+        bodyLarge: bodyLarge
+      }, {
+        bodyRegularStrong: bodyRegularStrong
+      }, {
+        bodyRegular: bodyRegular
+      }, {
+        bodySmallStrong: bodySmallStrong
+      }, {
+        bodySmall: bodySmall
+      }, {
+        bodyXSmall: bodyXSmall
+      }, {
         hero: hero
       }, {
         headline: headline
@@ -88,14 +183,10 @@ var Text = /*#__PURE__*/function (_Component) {
         small: small
       }, {
         micro: micro
-      }];
-      var filtered = this.filter(sizes);
-
-      if (filtered.length == 0) {
-        return classes.standard;
-      } else {
-        return classes[Object.keys(filtered[0])[0]];
-      }
+      }]);
+      if (!sizeActive) return classes.bodyRegular;
+      var activeSizeParsed = oldToNewClassMapper[sizeActive];
+      return classes[activeSizeParsed || sizeActive];
     }
   }, {
     key: "getEmphasis",
@@ -104,7 +195,7 @@ var Text = /*#__PURE__*/function (_Component) {
           classes = _this$props2.classes,
           mid = _this$props2.mid,
           low = _this$props2.low;
-      if (low) return classes.lowEmphasis;else if (mid) return classes.midEmphasis;else return classes.highEmphasis;
+      if (low) return classes.corpDisabled;else if (mid) return classes.corpSecondary;else return classes.corpPrimary;
     }
   }, {
     key: "getColor",
@@ -119,8 +210,13 @@ var Text = /*#__PURE__*/function (_Component) {
           info = _this$props3.info,
           disabled = _this$props3.disabled,
           white = _this$props3.white,
-          link = _this$props3.link;
-      var colors = [{
+          link = _this$props3.link,
+          indigoPrimary = _this$props3.indigoPrimary,
+          indigoSecondary = _this$props3.indigoSecondary,
+          pinkPrimary = _this$props3.pinkPrimary,
+          whiteSecondary = _this$props3.whiteSecondary,
+          whitePrimary = _this$props3.whitePrimary;
+      var colorActive = getActiveKey([{
         primary: primary
       }, {
         secondary: secondary
@@ -138,14 +234,20 @@ var Text = /*#__PURE__*/function (_Component) {
         white: white
       }, {
         link: link
-      }];
-      var filtered = this.filter(colors);
-
-      if (filtered.length == 0) {
-        return false;
-      } else {
-        return classes[Object.keys(filtered[0])[0]];
-      }
+      }, {
+        indigoPrimary: indigoPrimary
+      }, {
+        indigoSecondary: indigoSecondary
+      }, {
+        pinkPrimary: pinkPrimary
+      }, {
+        whiteSecondary: whiteSecondary
+      }, {
+        whitePrimary: whitePrimary
+      }]);
+      if (!colorActive) return false;
+      var colorActiveParsed = oldToNewClassMapper[colorActive];
+      return classes[colorActiveParsed || colorActive];
     }
   }, {
     key: "getAlign",
@@ -168,7 +270,20 @@ var Text = /*#__PURE__*/function (_Component) {
           topBase = _this$props5.topBase,
           topMedium = _this$props5.topMedium,
           topLarge = _this$props5.topLarge,
-          topXLarge = _this$props5.topXLarge;
+          topXLarge = _this$props5.topXLarge,
+          top0 = _this$props5.top0,
+          top1 = _this$props5.top1,
+          top2 = _this$props5.top2,
+          top3 = _this$props5.top3,
+          top4 = _this$props5.top4,
+          top5 = _this$props5.top5,
+          top6 = _this$props5.top6,
+          top7 = _this$props5.top7,
+          top8 = _this$props5.top8,
+          top9 = _this$props5.top9,
+          top10 = _this$props5.top10,
+          top11 = _this$props5.top11,
+          top12 = _this$props5.top12;
       var spacing = [{
         topXTiny: topXTiny
       }, {
@@ -183,14 +298,37 @@ var Text = /*#__PURE__*/function (_Component) {
         topLarge: topLarge
       }, {
         topXLarge: topXLarge
+      }, {
+        top0: top0
+      }, {
+        top1: top1
+      }, {
+        top2: top2
+      }, {
+        top3: top3
+      }, {
+        top4: top4
+      }, {
+        top5: top5
+      }, {
+        top6: top6
+      }, {
+        top7: top7
+      }, {
+        top8: top8
+      }, {
+        top9: top9
+      }, {
+        top10: top10
+      }, {
+        top11: top11
+      }, {
+        top12: top12
       }];
-      var filtered = this.filter(spacing);
-
-      if (filtered.length == 0) {
-        return '';
-      } else {
-        return " ".concat(classes[Object.keys(filtered[0])[0]]);
-      }
+      var topSpacingActive = getActiveKey(spacing);
+      if (!topSpacingActive) return '';
+      var topSpacingActiveParsed = oldToNewClassMapper[topSpacingActive];
+      return " ".concat(classes[topSpacingActiveParsed || topSpacingActive]);
     }
   }, {
     key: "getBottomSpacing",
@@ -203,7 +341,20 @@ var Text = /*#__PURE__*/function (_Component) {
           bottomBase = _this$props6.bottomBase,
           bottomMedium = _this$props6.bottomMedium,
           bottomLarge = _this$props6.bottomLarge,
-          bottomXLarge = _this$props6.bottomXLarge;
+          bottomXLarge = _this$props6.bottomXLarge,
+          bottom0 = _this$props6.bottom0,
+          bottom1 = _this$props6.bottom1,
+          bottom2 = _this$props6.bottom2,
+          bottom3 = _this$props6.bottom3,
+          bottom4 = _this$props6.bottom4,
+          bottom5 = _this$props6.bottom5,
+          bottom6 = _this$props6.bottom6,
+          bottom7 = _this$props6.bottom7,
+          bottom8 = _this$props6.bottom8,
+          bottom9 = _this$props6.bottom9,
+          bottom10 = _this$props6.bottom10,
+          bottom11 = _this$props6.bottom11,
+          bottom12 = _this$props6.bottom12;
       var spacing = [{
         bottomXTiny: bottomXTiny
       }, {
@@ -218,14 +369,37 @@ var Text = /*#__PURE__*/function (_Component) {
         bottomLarge: bottomLarge
       }, {
         bottomXLarge: bottomXLarge
+      }, {
+        bottom0: bottom0
+      }, {
+        bottom1: bottom1
+      }, {
+        bottom2: bottom2
+      }, {
+        bottom3: bottom3
+      }, {
+        bottom4: bottom4
+      }, {
+        bottom5: bottom5
+      }, {
+        bottom6: bottom6
+      }, {
+        bottom7: bottom7
+      }, {
+        bottom8: bottom8
+      }, {
+        bottom9: bottom9
+      }, {
+        bottom10: bottom10
+      }, {
+        bottom11: bottom11
+      }, {
+        bottom12: bottom12
       }];
-      var filtered = this.filter(spacing);
-
-      if (filtered.length == 0) {
-        return '';
-      } else {
-        return " ".concat(classes[Object.keys(filtered[0])[0]]);
-      }
+      var bottomSpacingActive = getActiveKey(spacing);
+      if (!bottomSpacingActive) return '';
+      var bottomSpacingActiveParsed = oldToNewClassMapper[bottomSpacingActive];
+      return " ".concat(classes[bottomSpacingActiveParsed || bottomSpacingActive]);
     }
   }, {
     key: "getWeight",
@@ -258,13 +432,9 @@ var Text = /*#__PURE__*/function (_Component) {
       }, {
         micro: micro
       }];
-      var filtered = this.filter(sizes);
-
-      if ((filtered.length == 0 || large || standard || small || micro) && strong) {
-        return " ".concat(classes.strong);
-      } else {
-        return false;
-      }
+      var weightActive = getActiveKey(sizes);
+      if ((!weightActive || large || standard || small || micro) && strong) return " ".concat(classes.strong);
+      return false;
     }
   }, {
     key: "render",
@@ -298,129 +468,276 @@ var Text = /*#__PURE__*/function (_Component) {
 }(_react.Component);
 
 Text.propTypes = {
+  /** display typography style. */
+  display: _propTypes["default"].bool,
+
+  /** h1 typography style. */
+  h1: _propTypes["default"].bool,
+
+  /** h2 typography style. */
+  h2: _propTypes["default"].bool,
+
+  /** h3 typography style. */
+  h3: _propTypes["default"].bool,
+
+  /** h4 typography style. */
+  h4: _propTypes["default"].bool,
+
+  /** h5 typography style. */
+  h5: _propTypes["default"].bool,
+
+  /** tagText typography style. */
+  tagText: _propTypes["default"].bool,
+
+  /** bodyXLarge typography style. */
+  bodyXLarge: _propTypes["default"].bool,
+
+  /** bodyLargeStrong typography style. */
+  bodyLargeStrong: _propTypes["default"].bool,
+
+  /** bodyLarge typography style. */
+  bodyLarge: _propTypes["default"].bool,
+
+  /** bodyRegularStrong typography style. */
+  bodyRegularStrong: _propTypes["default"].bool,
+
+  /** bodyRegular typography style. */
+  bodyRegular: _propTypes["default"].bool,
+
+  /** bodySmallStrong typography style. */
+  bodySmallStrong: _propTypes["default"].bool,
+
+  /** bodySmall typography style. */
+  bodySmall: _propTypes["default"].bool,
+
+  /** bodyXSmall typography style. */
+  bodyXSmall: _propTypes["default"].bool,
+
+  /** Indigo primary emphasis color style. */
+  indigoPrimary: _propTypes["default"].bool,
+
+  /** Indigo secondary emphasis color style. */
+  indigoSecondary: _propTypes["default"].bool,
+
+  /** Pink primary emphasis color style. */
+  pinkPrimary: _propTypes["default"].bool,
+
+  /** White secondary  emphasis color style. */
+  whiteSecondary: _propTypes["default"].bool,
+
+  /** White  emphasis color style. */
+  whitePrimary: _propTypes["default"].bool,
+
+  /** Corp secondary emphasis color style. */
+  corpSecondary: _propTypes["default"].bool,
+
+  /** Corp disabled emphasis color style. */
+  corpDisabled: _propTypes["default"].bool,
+
+  /** Top0 spacing style (2px). */
+  top0: _propTypes["default"].bool,
+
+  /** Top1 spacing style (4px). */
+  top1: _propTypes["default"].bool,
+
+  /** Top2 spacing style (8px). */
+  top2: _propTypes["default"].bool,
+
+  /** Top3 spacing style (12px). */
+  top3: _propTypes["default"].bool,
+
+  /** Top4 spacing style (16px). */
+  top4: _propTypes["default"].bool,
+
+  /** Top5 spacing style (24px). */
+  top5: _propTypes["default"].bool,
+
+  /** Top6 spacing style (32px). */
+  top6: _propTypes["default"].bool,
+
+  /** Top7 spacing style (40px). */
+  top7: _propTypes["default"].bool,
+
+  /** Top8 spacing style (48px). */
+  top8: _propTypes["default"].bool,
+
+  /** Top9 spacing style (64px). */
+  top9: _propTypes["default"].bool,
+
+  /** Top10 spacing style (80px). */
+  top10: _propTypes["default"].bool,
+
+  /** Top11 spacing style (120px). */
+  top11: _propTypes["default"].bool,
+
+  /** Top12 spacing style (160px). */
+  top12: _propTypes["default"].bool,
+
+  /** Bottom0 spacing style (2px). */
+  bottom0: _propTypes["default"].bool,
+
+  /** Bottom1 spacing style (4px). */
+  bottom1: _propTypes["default"].bool,
+
+  /** Bottom2 spacing style (8px). */
+  bottom2: _propTypes["default"].bool,
+
+  /** Bottom3 spacing style (12px). */
+  bottom3: _propTypes["default"].bool,
+
+  /** Bottom4 spacing style (16px). */
+  bottom4: _propTypes["default"].bool,
+
+  /** Bottom5 spacing style (24px). */
+  bottom5: _propTypes["default"].bool,
+
+  /** Bottom6 spacing style (32px). */
+  bottom6: _propTypes["default"].bool,
+
+  /** Bottom7 spacing style (40px). */
+  bottom7: _propTypes["default"].bool,
+
+  /** Bottom8 spacing style (48px). */
+  bottom8: _propTypes["default"].bool,
+
+  /** Bottom9 spacing style (64px). */
+  bottom9: _propTypes["default"].bool,
+
+  /** Bottom10 spacing style (80px). */
+  bottom10: _propTypes["default"].bool,
+
+  /** Bottom11 spacing style (120px). */
+  bottom11: _propTypes["default"].bool,
+
+  /** Bottom12 spacing style (160px). */
+  bottom12: _propTypes["default"].bool,
   classes: _propTypes["default"].object.isRequired,
   children: _propTypes["default"].node.isRequired,
 
-  /** Hero size style. */
+  /** Strong style. Only applies in large, standard or small sizes. */
+  strong: _propTypes["default"].bool,
+
+  /** Success color style. */
+  success: _propTypes["default"].bool,
+
+  /** Error color style. */
+  error: _propTypes["default"].bool,
+
+  /** Warning color style. */
+  warning: _propTypes["default"].bool,
+
+  /** Left align style. */
+  left: _propTypes["default"].bool,
+
+  /** Center align style. */
+  center: _propTypes["default"].bool,
+
+  /** Right align style. */
+  right: _propTypes["default"].bool,
+
+  /** Html tag. */
+  tag: _propTypes["default"].string.isRequired,
+
+  /** The className of the text container. */
+  className: _propTypes["default"].string,
+
+  /** The style of the text container. */
+  style: _propTypes["default"].object,
+  id: _propTypes["default"].string,
+  testId: _propTypes["default"].string,
+
+  /** [Legacy prop] h1 typography style.*/
   hero: _propTypes["default"].bool,
 
-  /** Headline size style. */
+  /** [Legacy prop] h2 typography style.*/
   headline: _propTypes["default"].bool,
 
-  /** Headline size style. */
+  /** [Legacy prop] h4 typography style.*/
   heading: _propTypes["default"].bool,
 
-  /** Subheading size style. */
+  /** [Legacy prop] h5 typography style.*/
   subheading: _propTypes["default"].bool,
 
-  /** Extra-large size style. */
+  /** [Legacy prop] bodyXLarge typography style.*/
   extraLarge: _propTypes["default"].bool,
 
-  /** Large size style. */
+  /** [Legacy prop] bodyLarge typography style.*/
   large: _propTypes["default"].bool,
 
-  /** Standard size style. */
+  /** [Legacy prop] bodyRegular typography style.*/
   standard: _propTypes["default"].bool,
 
-  /** Small size style. */
+  /** [Legacy prop] bodySmall typography style.*/
   small: _propTypes["default"].bool,
 
-  /** Micro size style. */
+  /** [Legacy prop] bodyXSmall typography style.*/
   micro: _propTypes["default"].bool,
 
-  /** Strong style. Only applies in large, standard or small sizes. */
-  strong: _propTypes["default"].bool,
-
-  /** Medium emphasis color style. */
+  /** [Legacy prop] Corp secondary emphasis color style.*/
   mid: _propTypes["default"].bool,
 
-  /** Low emphasis color style. */
+  /** [Legacy prop] Corp disabled emphasis color style.*/
   low: _propTypes["default"].bool,
 
-  /** Primary color style. */
+  /** [Legacy prop] Indigo primary emphasis color style.*/
   primary: _propTypes["default"].bool,
 
-  /** Secondary color style. */
+  /** [Legacy prop] Pink primary emphasis color style.*/
   secondary: _propTypes["default"].bool,
 
-  /** Success color style. */
-  success: _propTypes["default"].bool,
-
-  /** Error color style. */
-  error: _propTypes["default"].bool,
-
-  /** Warning color style. */
-  warning: _propTypes["default"].bool,
-
-  /** Info color style. */
+  /** [Legacy prop] Info color style.*/
   info: _propTypes["default"].bool,
 
-  /** Disabled color style. */
+  /** [Legacy prop] Disabled emphasis color style.*/
   disabled: _propTypes["default"].bool,
 
-  /** White color style. */
+  /** [Legacy prop] White  emphasis color style.*/
   white: _propTypes["default"].bool,
 
-  /** Link color style. */
+  /** [Legacy prop] Link emphasis color style.*/
   link: _propTypes["default"].bool,
 
-  /** Left align style. */
-  left: _propTypes["default"].bool,
-
-  /** Center align style. */
-  center: _propTypes["default"].bool,
-
-  /** Right align style. */
-  right: _propTypes["default"].bool,
-
-  /** X-Tiny top spacing style. */
+  /** [Legacy prop] Top1 spacing style (4px).*/
   topXTiny: _propTypes["default"].bool,
 
-  /** Tiny top spacing style. */
+  /** [Legacy prop] Top2 spacing style (8px).*/
   topTiny: _propTypes["default"].bool,
 
-  /** Small top spacing style. */
+  /** [Legacy prop] Top4 spacing style (16px).*/
   topSmall: _propTypes["default"].bool,
 
-  /** Base top spacing style. */
+  /** [Legacy prop] Top5 spacing style (24px).*/
   topBase: _propTypes["default"].bool,
 
-  /** Medium top spacing style. */
+  /** [Legacy prop] Top6 spacing style (32px).*/
   topMedium: _propTypes["default"].bool,
 
-  /** Large top spacing style. */
+  /** [Legacy prop] Top8 spacing style (48px).*/
   topLarge: _propTypes["default"].bool,
 
-  /** X-Large top spacing style. */
+  /** [Legacy prop] Top9 spacing style (64px).*/
   topXLarge: _propTypes["default"].bool,
 
-  /** X-Tiny bottom spacing style. */
+  /** [Legacy prop] Bottom1 spacing style (4px).*/
   bottomXTiny: _propTypes["default"].bool,
 
-  /** Tiny bottom spacing style. */
+  /** [Legacy prop] Bottom2 spacing style (8px).*/
   bottomTiny: _propTypes["default"].bool,
 
-  /** Small bottom spacing style. */
+  /** [Legacy prop] Bottom4 spacing style (16px).*/
   bottomSmall: _propTypes["default"].bool,
 
-  /** Base bottom spacing style. */
+  /** [Legacy prop] Bottom5 spacing style (24px).*/
   bottomBase: _propTypes["default"].bool,
 
-  /** Medium bottom spacing style. */
+  /** [Legacy prop] Bottom6 spacing style (32px).*/
   bottomMedium: _propTypes["default"].bool,
 
-  /** Large bottom spacing style. */
+  /** [Legacy prop] Bottom8 spacing style (48px).*/
   bottomLarge: _propTypes["default"].bool,
 
-  /** X-Large bottom spacing style. */
-  bottomXLarge: _propTypes["default"].bool,
-
-  /** Html tag. */
-  tag: _propTypes["default"].string.isRequired,
-  className: _propTypes["default"].string,
-  style: _propTypes["default"].object,
-  id: _propTypes["default"].string,
-  testId: _propTypes["default"].string
+  /** [Legacy prop] Bottom9 spacing style (64px).*/
+  bottomXLarge: _propTypes["default"].bool
 };
 Text.defaultProps = {
   tag: 'p'