@zohodesk/components 1.2.50 → 1.2.52

package/lib/Typography/css/Typography.module.css

@@ -0,0 +1,489 @@
+.reset {
+  font-weight: initial;
+  margin: initial ;
+  padding: initial ;
+}
+
+.dotted {
+  composes: dotted from '../../common/common.module.css';
+}
+
+.display_block {
+  display: block;
+}
+
+.display_inlineBlock {
+  display: inline-block;
+}
+
+.display_inline {
+  display: inline;
+}
+
+.display_initial {
+  display: initial;
+}
+
+.font_regular {
+  font-family: var(--zd_regular);
+}
+
+.font_light {
+  font-family: var(--zd_light);
+}
+
+.font_semibold {
+  font-family: var(--zd_semibold);
+  composes: ftsmooth from '../../common/common.module.css';
+}
+
+.font_bold {
+  font-family: var(--zd_bold);
+  composes: ftsmooth from '../../common/common.module.css';
+}
+
+.fontStyles_normal {
+  font-style: normal;
+}
+
+.fontStyles_italic {
+  font-style: italic;
+}
+
+.decoration_default {
+  text-decoration: none;
+}
+
+.decoration_underline {
+  text-decoration: underline;
+}
+
+.decoration_strike {
+  text-decoration: line-through;
+}
+
+.decoration_overline {
+  text-decoration: overline;
+}
+
+[dir=ltr] .textalign_left {
+  text-align: left;
+}
+
+[dir=rtl] .textalign_left {
+  text-align: right;
+}
+
+[dir=ltr] .textalign_right {
+  text-align: right;
+}
+
+[dir=rtl] .textalign_right {
+  text-align: left;
+}
+
+.textalign_center {
+  text-align: center;
+}
+
+.textalign_justify {
+  text-align: justify;
+}
+
+.transform_default {
+  text-transform: none;
+}
+
+.transform_upper {
+  text-transform: uppercase;
+}
+
+.transform_lower {
+  text-transform: lowercase;
+}
+
+.transform_capital {
+  text-transform: capitalize;
+}
+
+.dotted_clamp {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.lineclamp_1 {
+  -webkit-line-clamp: 1;
+  composes: dotted_clamp;
+}
+
+.lineclamp_2 {
+  -webkit-line-clamp: 2;
+  composes: dotted_clamp;
+}
+
+.lineclamp_3 {
+  -webkit-line-clamp: 3;
+  composes: dotted_clamp;
+}
+
+.lineclamp_4 {
+  -webkit-line-clamp: 4;
+  composes: dotted_clamp;
+}
+
+.lineclamp_5 {
+  -webkit-line-clamp: 5;
+  composes: dotted_clamp;
+}
+
+.wordBreak_breakAll {
+  word-break: break-all
+}
+
+.wordBreak_keepAll {
+  word-break: keep-all
+}
+
+.wordBreak_breakWord {
+  word-break: break-word
+}
+
+.wordWrap_normal {
+  word-wrap: normal;
+}
+
+.wordWrap_break {
+  word-wrap: break-word
+}
+
+.whiteSpace_normal {
+  white-space: normal
+}
+
+.whiteSpace_noWrap {
+  white-space: nowrap
+}
+
+.whiteSpace_pre {
+  white-space: pre
+}
+
+.whiteSpace_preLine {
+  white-space: pre-line
+}
+
+.whiteSpace_preWrap {
+  white-space: pre-wrap
+}
+
+
+
+/*...............Font Size Start.........*/
+
+.size7 {
+  font-size: var(--zd_font_size7) ;
+}
+
+.size8 {
+  font-size: var(--zd_font_size8) ;
+}
+
+.size9 {
+  font-size: var(--zd_font_size9) ;
+}
+
+.size10 {
+  font-size: var(--zd_font_size10) ;
+}
+
+.size11 {
+  font-size: var(--zd_font_size11) ;
+}
+
+.size12 {
+  font-size: var(--zd_font_size12) ;
+}
+
+.size13 {
+  font-size: var(--zd_font_size13) ;
+}
+
+.size14 {
+  font-size: var(--zd_font_size14) ;
+}
+
+.size15 {
+  font-size: var(--zd_font_size15) ;
+}
+
+.size16 {
+  font-size: var(--zd_font_size16) ;
+}
+
+.size17 {
+  font-size: var(--zd_font_size17) ;
+}
+
+.size18 {
+  font-size: var(--zd_font_size18) ;
+}
+
+.size19 {
+  font-size: var(--zd_font_size19) ;
+}
+
+.size20 {
+  font-size: var(--zd_font_size20) ;
+}
+
+.size21 {
+  font-size: var(--zd_font_size21) ;
+}
+
+.size22 {
+  font-size: var(--zd_font_size22) ;
+}
+
+.size24 {
+  font-size: var(--zd_font_size24) ;
+}
+
+.size25 {
+  font-size: var(--zd_font_size25) ;
+}
+
+.size26 {
+  font-size: var(--zd_font_size26) ;
+}
+
+.size28 {
+  font-size: var(--zd_font_size28) ;
+}
+
+.size29 {
+  font-size: var(--zd_font_size29) ;
+}
+
+.size30 {
+  font-size: var(--zd_font_size30) ;
+}
+
+.size32 {
+  font-size: var(--zd_font_size32) ;
+}
+
+.size34 {
+  font-size: var(--zd_font_size34) ;
+}
+
+.size35 {
+  font-size: var(--zd_font_size35) ;
+}
+
+.size36 {
+  font-size: var(--zd_font_size36) ;
+}
+
+.size40 {
+  font-size: var(--zd_font_size40) ;
+}
+
+.size50 {
+  font-size: var(--zd_font_size50) ;
+}
+
+.sizeinherit {
+  font-size: inherit ;
+}
+
+/*...............Font Size End.........*/
+
+/*............... Lineheight Start.........*/
+
+.lineheight_inherit {
+  line-height: inherit;
+}
+
+.lineheight_initial {
+  line-height: initial;
+}
+
+.lineheight_normal {
+  line-height: normal;
+}
+
+.lineheight_0 {
+  line-height: 0;
+}
+
+.lineheight_0_1 {
+  line-height: 0.1;
+}
+
+.lineheight_0_2 {
+  line-height: 0.2;
+}
+
+.lineheight_0_3 {
+  line-height: 0.3;
+}
+
+.lineheight_0_4 {
+  line-height: 0.4;
+}
+
+.lineheight_0_5 {
+  line-height: 0.5;
+}
+
+.lineheight_0_6 {
+  line-height: 0.6;
+}
+
+.lineheight_0_7 {
+  line-height: 0.7;
+}
+
+.lineheight_0_8 {
+  line-height: 0.8;
+}
+
+.lineheight_0_9 {
+  line-height: 0.9;
+}
+
+.lineheight_1 {
+  line-height: 1;
+}
+
+.lineheight_1_1 {
+  line-height: 1.1;
+}
+
+.lineheight_1_2 {
+  line-height: 1.2;
+}
+
+.lineheight_1_3 {
+  line-height: 1.3;
+}
+
+.lineheight_1_4 {
+  line-height: 1.4;
+}
+
+.lineheight_1_5 {
+  line-height: 1.5;
+}
+
+.lineheight_1_6 {
+  line-height: 1.6;
+}
+
+.lineheight_1_7 {
+  line-height: 1.7;
+}
+
+.lineheight_1_8 {
+  line-height: 1.8;
+}
+
+.lineheight_1_9 {
+  line-height: 1.9;
+}
+
+.lineheight_2 {
+  line-height: 2;
+}
+
+
+/*............... Lineheight End.........*/
+
+/*............... Letterspacing Start.........*/
+
+.letterspacing_inherit {
+  letter-spacing: inherit;
+}
+
+.letterspacing_0_1 {
+  letter-spacing: 0.1px;
+}
+
+.letterspacing_0_2 {
+  letter-spacing: 0.2px;
+}
+
+.letterspacing_0_3 {
+  letter-spacing: 0.3px;
+}
+
+.letterspacing_0_4 {
+  letter-spacing: 0.4px;
+}
+
+.letterspacing_0_5 {
+  letter-spacing: 0.5px;
+}
+
+.letterspacing_0_6 {
+  letter-spacing: 0.6px;
+}
+
+.letterspacing_0_7 {
+  letter-spacing: 0.7px;
+}
+
+.letterspacing_0_8 {
+  letter-spacing: 0.8px;
+}
+
+.letterspacing_0_9 {
+  letter-spacing: 0.9px;
+}
+
+.letterspacing_1 {
+  letter-spacing: 1px;
+}
+
+.letterspacing_1_1 {
+  letter-spacing: 1.1px;
+}
+
+.letterspacing_1_2 {
+  letter-spacing: 1.2px;
+}
+
+.letterspacing_1_3 {
+  letter-spacing: 1.3px;
+}
+
+.letterspacing_1_4 {
+  letter-spacing: 1.4px;
+}
+
+.letterspacing_1_5 {
+  letter-spacing: 1.5px;
+}
+
+.letterspacing_1_6 {
+  letter-spacing: 1.6px;
+}
+
+.letterspacing_1_7 {
+  letter-spacing: 1.7px;
+}
+
+.letterspacing_1_8 {
+  letter-spacing: 1.8px;
+}
+
+.letterspacing_1_9 {
+  letter-spacing: 1.9px;
+}
+
+.letterspacing_2 {
+  letter-spacing: 2px;
+}
+
+/*............... Letterspacing End.........*/

package/lib/Typography/css/cssJSLogic.js

@@ -0,0 +1,48 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = cssJSLogic;
+
+var _utils = require("@zohodesk/utils");
+
+var _utils2 = require("../utils");
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function cssJSLogic(_ref) {
+  var _compileClassNames;
+
+  var props = _ref.props,
+      style = _ref.style;
+  var $flag_reset = props.$flag_reset,
+      $flag_dotted = props.$flag_dotted,
+      $ui_size = props.$ui_size,
+      $ui_lineClamp = props.$ui_lineClamp,
+      $ui_lineHeight = props.$ui_lineHeight,
+      $ui_display = props.$ui_display,
+      $ui_weight = props.$ui_weight,
+      $ui_typeFace = props.$ui_typeFace,
+      $ui_textAlign = props.$ui_textAlign,
+      $ui_letterSpacing = props.$ui_letterSpacing,
+      $ui_transform = props.$ui_transform,
+      $ui_decoration = props.$ui_decoration,
+      $ui_className = props.$ui_className,
+      $ui_wordBreak = props.$ui_wordBreak,
+      $ui_wordWrap = props.$ui_wordWrap,
+      $ui_whiteSpace = props.$ui_whiteSpace;
+
+  if ($ui_letterSpacing) {
+    $ui_letterSpacing = _utils2.letterspacingMapping[$ui_letterSpacing];
+  }
+
+  if ($ui_lineHeight) {
+    $ui_lineHeight = _utils2.lineheightMapping[$ui_lineHeight];
+  }
+
+  var typographyClass = (0, _utils.compileClassNames)((_compileClassNames = {}, _defineProperty(_compileClassNames, style.reset, $flag_reset), _defineProperty(_compileClassNames, style.dotted, $flag_dotted), _defineProperty(_compileClassNames, style["size".concat($ui_size)], !!$ui_size), _defineProperty(_compileClassNames, style["lineclamp_".concat($ui_lineClamp)], !!$ui_lineClamp), _defineProperty(_compileClassNames, style["lineheight_".concat($ui_lineHeight)], !!$ui_lineHeight), _defineProperty(_compileClassNames, style["display_".concat($ui_display)], !!$ui_display), _defineProperty(_compileClassNames, style["font_".concat($ui_weight)], !!$ui_weight), _defineProperty(_compileClassNames, style["fontStyles_".concat($ui_typeFace)], !!$ui_typeFace), _defineProperty(_compileClassNames, style["textalign_".concat($ui_textAlign)], !!$ui_textAlign), _defineProperty(_compileClassNames, style["letterspacing_".concat($ui_letterSpacing)], !!$ui_letterSpacing), _defineProperty(_compileClassNames, style["transform_".concat($ui_transform)], !!$ui_transform), _defineProperty(_compileClassNames, style["decoration_".concat($ui_decoration)], !!$ui_decoration), _defineProperty(_compileClassNames, $ui_className, !!$ui_className), _defineProperty(_compileClassNames, style["wordBreak_".concat($ui_wordBreak)], !!$ui_wordBreak), _defineProperty(_compileClassNames, style["wordWrap_".concat($ui_wordWrap)], !!$ui_wordWrap), _defineProperty(_compileClassNames, style["whiteSpace_".concat($ui_whiteSpace)], !!$ui_whiteSpace), _compileClassNames));
+  return {
+    typographyClass: typographyClass
+  };
+}

package/lib/Typography/props/defaultProps.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.defaultProps = void 0;
+var defaultProps = {
+  $ui_className: '',
+  $ui_tagName: 'div',
+  $flag_reset: false,
+  $flag_dotted: false,
+  $tagAttributes_text: {},
+  $a11yAttributes_text: {}
+};
+exports.defaultProps = defaultProps;

package/lib/Typography/props/propTypes.js

@@ -0,0 +1,38 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.propTypes = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var propTypes = {
+  children: _propTypes["default"].node,
+  $ui_className: _propTypes["default"].string,
+  $ui_tagName: _propTypes["default"].string,
+  $flag_reset: _propTypes["default"].bool,
+  $flag_dotted: _propTypes["default"].bool,
+  $ui_display: _propTypes["default"].oneOf(['block', 'inlineBlock', 'inline', 'initial']),
+  $ui_weight: _propTypes["default"].oneOf(['regular', 'light', 'semibold', 'bold']),
+  $ui_textAlign: _propTypes["default"].oneOf(['left', 'right', 'center', 'justify']),
+  $ui_transform: _propTypes["default"].oneOf(['default', 'upper', 'lower', 'capital']),
+  $ui_lineClamp: _propTypes["default"].oneOf(['1', '2', '3', '4', '5']),
+  $ui_typeFace: _propTypes["default"].oneOf(['normal', 'italic']),
+  $ui_decoration: _propTypes["default"].oneOf(['default', 'underline', 'strike', 'overline']),
+  $ui_size: _propTypes["default"].oneOf(['7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '24', '25', '26', '28', '29', '30', '32', '34', '35', '36', '40', '50', 'inherit']),
+  $ui_lineHeight: _propTypes["default"].oneOf(['0', '0.1', '0.2', '0.3', '0.4', '0.5', '0.6', '0.7', '0.8', '0.9', '1', '1.1', '1.2', '1.3', '1.4', '1.5', '1.6', '1.7', '1.8', '1.9', '2', 'normal', 'initial', 'inherit']),
+  $ui_letterSpacing: _propTypes["default"].oneOf(['0.1', '0.2', '0.3', '0.4', '0.5', '0.6', '0.7', '0.8', '0.9', '1', '1.1', '1.2', '1.3', '1.4', '1.5', '1.6', '1.7', '1.8', '1.9', '2', 'inherit']),
+  $ui_wordBreak: _propTypes["default"].oneOf(['breakAll', 'keepAll', 'breakWord']),
+  $ui_wordWrap: _propTypes["default"].oneOf(['normal', 'break']),
+  $ui_whiteSpace: _propTypes["default"].oneOf(['normal', 'noWrap', 'pre', 'preLine', 'preWrap']),
+  $i18n_dataTitle: _propTypes["default"].string,
+  testId: _propTypes["default"].string,
+  customId: _propTypes["default"].string,
+  customStyle: _propTypes["default"].object,
+  $a11yAttributes_text: _propTypes["default"].object,
+  $tagAttributes_text: _propTypes["default"].object
+};
+exports.propTypes = propTypes;

package/lib/Typography/utils/index.js

@@ -0,0 +1,59 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.lineheightMapping = exports.letterspacingMapping = void 0;
+
+/* eslint-disable */
+var letterspacingMapping = {
+  'inherit': 'inherit',
+  '0.1': '0_1',
+  '0.2': '0_2',
+  '0.3': '0_3',
+  '0.4': '0_4',
+  '0.5': '0_5',
+  '0.6': '0_6',
+  '0.7': '0_7',
+  '0.8': '0_8',
+  '0.9': '0_9',
+  '1': '1',
+  '1.1': '1_1',
+  '1.2': '1_2',
+  '1.3': '1_3',
+  '1.4': '1_4',
+  '1.5': '1_5',
+  '1.6': '1_6',
+  '1.7': '1_7',
+  '1.8': '1_8',
+  '1.9': '1_9',
+  '2': '2'
+};
+exports.letterspacingMapping = letterspacingMapping;
+var lineheightMapping = {
+  'inherit': 'inherit',
+  'initial': 'initial',
+  'normal': 'normal',
+  '0': '0',
+  '0.1': '0_1',
+  '0.2': '0_2',
+  '0.3': '0_3',
+  '0.4': '0_4',
+  '0.5': '0_5',
+  '0.6': '0_6',
+  '0.7': '0_7',
+  '0.8': '0_8',
+  '0.9': '0_9',
+  '1': '1',
+  '1.1': '1_1',
+  '1.2': '1_2',
+  '1.3': '1_3',
+  '1.4': '1_4',
+  '1.5': '1_5',
+  '1.6': '1_6',
+  '1.7': '1_7',
+  '1.8': '1_8',
+  '1.9': '1_9',
+  '2': '2'
+};
+exports.lineheightMapping = lineheightMapping;

package/lib/index.js

@@ -408,7 +408,7 @@ Object.keys(_semantic).forEach(function (key) {
   });
 });
 
-var _Typography = _interopRequireDefault(require("./v1/Typography/Typography"));
+var _Typography = _interopRequireDefault(require("./Typography/Typography"));
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 

package/lib/v1/Typography/Typography.js

@@ -15,7 +15,7 @@ var _cssJSLogic2 = _interopRequireDefault(require("./css/cssJSLogic"));
 
 var _utils = require("@zohodesk/utils");
 
-var _TypographyModule = _interopRequireDefault(require("./css/Typography.module.css"));
+var _v1_TypographyModule = _interopRequireDefault(require("./css/v1_Typography.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
@@ -34,7 +34,7 @@ var Typography = function Typography(props) {
       $tagAttributes_text = props.$tagAttributes_text,
       $a11yAttributes_text = props.$a11yAttributes_text,
       customStyle = props.customStyle;
-  var style = (0, _utils.mergeStyle)(_TypographyModule["default"], customStyle);
+  var style = (0, _utils.mergeStyle)(_v1_TypographyModule["default"], customStyle);
 
   var _cssJSLogic = (0, _cssJSLogic2["default"])({
     props: props,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zohodesk/components",
-  "version": "1.2.50",
+  "version": "1.2.52",
   "main": "es/index.js",
   "module": "es/index.js",
   "private": false,
@@ -71,7 +71,7 @@
     "@zohodesk/a11y": "2.2.6",
     "@zohodesk/docstool": "1.0.0-alpha-2",
     "@zohodesk/hooks": "2.0.5",
-    "@zohodesk/icons": "1.0.66",
+    "@zohodesk/icons": "1.0.68",
     "@zohodesk/svg": "1.1.22",
     "@zohodesk/utils": "1.3.14",
     "@zohodesk/variables": "1.0.0",
@@ -86,7 +86,7 @@
     "selectn": "1.1.2"
   },
   "peerDependencies": {
-    "@zohodesk/icons": "1.0.66",
+    "@zohodesk/icons": "1.0.68",
     "@zohodesk/variables": "1.0.0",
     "@zohodesk/svg": "1.1.22",
     "@zohodesk/virtualizer": "1.0.3",