@zohodesk/components 1.2.18 → 1.2.19

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (66) hide show
  1. package/.cli/AppearanceThemeValidationExcludeFiles.js +1 -0
  2. package/.cli/propValidation_report.html +1 -1
  3. package/README.md +6 -0
  4. package/assets/Appearance/dark/mode/Component_DarkMode.module.css +3 -0
  5. package/assets/Appearance/light/mode/Component_LightMode.module.css +3 -0
  6. package/assets/Appearance/pureDark/mode/Component_PureDarkMode.module.css +3 -0
  7. package/es/Avatar/Avatar.module.css +12 -0
  8. package/es/AvatarTeam/AvatarTeam.module.css +2 -0
  9. package/es/Button/css/Button.module.css +9 -1
  10. package/es/Buttongroup/Buttongroup.module.css +2 -0
  11. package/es/CheckBox/CheckBox.module.css +2 -0
  12. package/es/DateTime/DateTime.module.css +1 -0
  13. package/es/DateTime/dateFormatUtils/dateFormat.js +6 -1
  14. package/es/DropBox/DropBoxElement/css/DropBoxElement.module.css +7 -0
  15. package/es/DropBox/css/DropBox.module.css +1 -0
  16. package/es/DropDown/DropDownHeading.module.css +6 -0
  17. package/es/DropDown/DropDownItem.module.css +3 -0
  18. package/es/Label/Label.module.css +1 -0
  19. package/es/ListItem/ListItem.module.css +21 -0
  20. package/es/PopOver/PopOver.module.css +1 -0
  21. package/es/Radio/Radio.module.css +1 -0
  22. package/es/Ribbon/Ribbon.module.css +4 -0
  23. package/es/Switch/Switch.module.css +2 -0
  24. package/es/Tag/Tag.module.css +6 -0
  25. package/es/TextBox/TextBox.module.css +20 -0
  26. package/es/TextBoxIcon/TextBoxIcon.module.css +5 -0
  27. package/es/Textarea/Textarea.module.css +6 -0
  28. package/es/Tooltip/Tooltip.module.css +4 -0
  29. package/es/common/customscroll.module.css +37 -0
  30. package/es/v1/Modal/Modal.js +86 -114
  31. package/es/v1/Typography/css/Typography.module.css +83 -112
  32. package/es/v1/Typography/css/cssJSLogic.js +6 -2
  33. package/es/v1/Typography/props/propTypes.js +2 -2
  34. package/es/v1/Typography/utils/index.js +50 -0
  35. package/lib/Avatar/Avatar.module.css +12 -0
  36. package/lib/AvatarTeam/AvatarTeam.module.css +2 -0
  37. package/lib/Button/css/Button.module.css +9 -1
  38. package/lib/Buttongroup/Buttongroup.module.css +2 -0
  39. package/lib/CheckBox/CheckBox.module.css +2 -0
  40. package/lib/DateTime/DateTime.module.css +1 -0
  41. package/lib/DateTime/dateFormatUtils/dateFormat.js +6 -1
  42. package/lib/DropBox/DropBoxElement/css/DropBoxElement.module.css +7 -0
  43. package/lib/DropBox/css/DropBox.module.css +1 -0
  44. package/lib/DropDown/DropDownHeading.module.css +6 -0
  45. package/lib/DropDown/DropDownItem.module.css +3 -0
  46. package/lib/Label/Label.module.css +1 -0
  47. package/lib/ListItem/ListItem.module.css +21 -0
  48. package/lib/PopOver/PopOver.module.css +1 -0
  49. package/lib/Radio/Radio.module.css +1 -0
  50. package/lib/Ribbon/Ribbon.module.css +4 -0
  51. package/lib/Switch/Switch.module.css +2 -0
  52. package/lib/Tag/Tag.module.css +6 -0
  53. package/lib/TextBox/TextBox.module.css +20 -0
  54. package/lib/TextBoxIcon/TextBoxIcon.module.css +5 -0
  55. package/lib/Textarea/Textarea.module.css +6 -0
  56. package/lib/Tooltip/Tooltip.module.css +4 -0
  57. package/lib/common/customscroll.module.css +37 -0
  58. package/lib/v1/Modal/Modal.js +118 -164
  59. package/lib/v1/Typography/css/Typography.module.css +83 -112
  60. package/lib/v1/Typography/css/cssJSLogic.js +7 -3
  61. package/lib/v1/Typography/props/propTypes.js +2 -2
  62. package/lib/v1/Typography/utils/index.js +59 -0
  63. package/package.json +8 -6
  64. package/result.json +1 -1
  65. package/es/v1/Typography/css/letterSpacingMap.js +0 -12
  66. package/lib/v1/Typography/css/letterSpacingMap.js +0 -20
@@ -5,12 +5,14 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
5
5
  Object.defineProperty(exports, "__esModule", {
6
6
  value: true
7
7
  });
8
- exports["default"] = void 0;
8
+ exports["default"] = Modal;
9
9
 
10
- var _react = _interopRequireDefault(require("react"));
10
+ var _react = _interopRequireWildcard(require("react"));
11
11
 
12
12
  var _reactDom = _interopRequireDefault(require("react-dom"));
13
13
 
14
+ var _useEffectCallOnlyAfterState = _interopRequireDefault(require("@zohodesk/hooks/es/utils/useEffectCallOnlyAfterState"));
15
+
14
16
  var _defaultProps = require("../../Modal/props/defaultProps");
15
17
 
16
18
  var _propTypes = require("../../Modal/props/propTypes");
@@ -19,194 +21,146 @@ var _AppContainerModule = _interopRequireDefault(require("../../AppContainer/App
19
21
 
20
22
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
21
23
 
22
- function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
23
-
24
- function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
25
-
26
- function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
24
+ 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); }
27
25
 
28
- function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
26
+ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
29
27
 
30
- function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
28
+ function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
31
29
 
32
- function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
30
+ function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
33
31
 
34
- function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
32
+ function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
35
33
 
36
- function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
34
+ 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); }
37
35
 
38
- function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
36
+ 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; }
39
37
 
40
- function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
38
+ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
41
39
 
42
- function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
40
+ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
43
41
 
44
42
  var createdPortalIds = [];
45
43
  var newPortalPrefix = 'CPortal';
46
44
  var portalChildrenTopIndexValues;
47
45
 
48
- var Modal = /*#__PURE__*/function (_React$Component) {
49
- _inherits(Modal, _React$Component);
50
-
51
- var _super = _createSuper(Modal);
52
-
53
- function Modal(props) {
54
- var _this;
55
-
56
- _classCallCheck(this, Modal);
57
-
58
- _this = _super.call(this, props);
59
- _this.handleAddPortalId = _this.handleAddPortalId.bind(_assertThisInitialized(_this));
60
- _this.handleRemovePortalId = _this.handleRemovePortalId.bind(_assertThisInitialized(_this));
61
- _this.handleInsertPortalDiv = _this.handleInsertPortalDiv.bind(_assertThisInitialized(_this));
62
- _this.getPortalDiv = _this.getPortalDiv.bind(_assertThisInitialized(_this));
63
- _this.state = {
64
- isMounted: false
65
- };
66
- _this.portalId = props.portalId;
67
- _this.setRef = _this.setRef.bind(_assertThisInitialized(_this));
68
- _this.ref = null; // this.portalDiv = document.createDocumentFragment();
46
+ function Modal(props) {
47
+ var children = props.children,
48
+ isActive = props.isActive,
49
+ autoZIndexNeeded = props.autoZIndexNeeded,
50
+ propPortalId = props.portalId;
51
+
52
+ var _useState = (0, _react.useState)(false),
53
+ _useState2 = _slicedToArray(_useState, 2),
54
+ isMounted = _useState2[0],
55
+ setMounted = _useState2[1];
56
+
57
+ var portalId = (0, _react.useRef)(propPortalId);
58
+ var ref = (0, _react.useRef)(null);
59
+ var isZIndexAppendNeeded = (0, _react.useRef)();
60
+ var zIndex = (0, _react.useRef)();
61
+ var modalRoot = (0, _react.useRef)();
62
+ var newModalRoot = (0, _react.useRef)();
63
+ var containerDiv = (0, _react.useRef)();
64
+ var portalDiv = (0, _react.useRef)(); // document.createDocumentFragment()
65
+
66
+ var isCustomPortalId = (0, _react.useRef)();
67
+ var setRef = (0, _react.useCallback)(function (ele) {
68
+ ref.current = ele;
69
+
70
+ if (isZIndexAppendNeeded.current) {
71
+ ref.current.style.zIndex = zIndex.current;
72
+ isZIndexAppendNeeded.current = false;
73
+ }
74
+ }, []);
75
+
76
+ function getPortalDiv() {
77
+ modalRoot.current = propPortalId ? document.querySelector("[data-portal=".concat(propPortalId, "]")) : "";
78
+
79
+ if (!modalRoot.current) {
80
+ portalId.current = handleAddPortalId();
81
+ newModalRoot.current = document.createElement('div');
82
+ newModalRoot.current.className = _AppContainerModule["default"].container;
83
+ newModalRoot.current.setAttribute('data-portal', portalId.current);
84
+ containerDiv.current && containerDiv.current.appendChild(newModalRoot.current);
85
+ modalRoot.current = newModalRoot.current;
86
+ }
69
87
 
70
- return _this;
88
+ return modalRoot.current;
71
89
  }
72
90
 
73
- _createClass(Modal, [{
74
- key: "setRef",
75
- value: function setRef(ele) {
76
- this.ref = ele;
77
-
78
- if (this.isZIndexAppendNeeded) {
79
- this.ref.style.zIndex = this.zIndex;
80
- this.isZIndexAppendNeeded = false;
81
- }
82
- }
83
- }, {
84
- key: "getPortalDiv",
85
- value: function getPortalDiv() {
86
- this.modalRoot = this.props.portalId ? document.querySelector("[data-portal=".concat(this.props.portalId, "]")) : '';
87
-
88
- if (!this.modalRoot) {
89
- this.portalId = this.handleAddPortalId();
90
- this.newModalRoot = document.createElement('div');
91
- this.newModalRoot.className = _AppContainerModule["default"].container;
92
- this.newModalRoot.setAttribute('data-portal', this.portalId);
93
- this.containerDiv && this.containerDiv.appendChild(this.newModalRoot);
94
- this.modalRoot = this.newModalRoot;
91
+ (0, _react.useEffect)(function () {
92
+ containerDiv.current = document.getElementsByTagName("desk")[0] ? document.getElementsByTagName('desk')[0] : document.getElementsByTagName('body')[0];
93
+ portalDiv.current = getPortalDiv();
94
+ setMounted(true);
95
+ setTimeout(function () {
96
+ handleInsertPortalDiv();
97
+ });
98
+ return function () {
99
+ // modalRoot.current && modalRoot.current.removeChild(portalDiv.current);
100
+ if (newModalRoot.current) {
101
+ containerDiv.current && containerDiv.current.removeChild(newModalRoot.current);
102
+ handleRemovePortalId();
95
103
  }
96
104
 
97
- return this.modalRoot;
98
- }
99
- }, {
100
- key: "componentDidMount",
101
- value: function componentDidMount() {
102
- var _this2 = this;
103
-
104
- this.containerDiv = document.getElementsByTagName('desk')[0] ? document.getElementsByTagName('desk')[0] : document.getElementsByTagName('body')[0];
105
- this.portalDiv = this.getPortalDiv();
106
- this.setState({
107
- isMounted: true
108
- }, function () {
109
- _this2.handleInsertPortalDiv();
110
- });
111
- }
112
- }, {
113
- key: "componentWillUnmount",
114
- value: function componentWillUnmount() {
115
- //this.modalRoot && this.modalRoot.removeChild(this.portalDiv);
116
- if (this.newModalRoot) {
117
- this.containerDiv && this.containerDiv.removeChild(this.newModalRoot);
118
- this.handleRemovePortalId();
119
- }
120
-
121
- if (this.zIndex && portalChildrenTopIndexValues === this.zIndex) {
105
+ if (zIndex.current && portalChildrenTopIndexValues === zIndex.current) {
122
106
  portalChildrenTopIndexValues -= 1;
123
107
  }
108
+ };
109
+ }, []);
110
+ (0, _useEffectCallOnlyAfterState["default"])(function () {
111
+ if (isActive) {
112
+ handleInsertPortalDiv();
113
+ } else if (zIndex.current && portalChildrenTopIndexValues === zIndex.current) {
114
+ portalChildrenTopIndexValues -= 1;
124
115
  }
125
- }, {
126
- key: "componentDidUpdate",
127
- value: function componentDidUpdate(prevProps) {
128
- if (prevProps.isActive != this.props.isActive) {
129
- if (this.props.isActive) {
130
- this.handleInsertPortalDiv();
131
- } else if (this.zIndex && portalChildrenTopIndexValues === this.zIndex) {
132
- portalChildrenTopIndexValues -= 1;
133
- }
134
- }
135
- }
136
- }, {
137
- key: "handleInsertPortalDiv",
138
- value: function handleInsertPortalDiv() {
139
- var autoZIndexNeeded = this.props.autoZIndexNeeded;
140
-
141
- if (autoZIndexNeeded) {
142
- var isActive = this.props.isActive;
143
-
144
- if (isActive) {
145
- var newHighValue = Number(portalChildrenTopIndexValues || 10) + 1;
146
- portalChildrenTopIndexValues = newHighValue;
147
- this.zIndex = newHighValue;
148
-
149
- if (this.ref) {
150
- this.ref.style.zIndex = newHighValue;
151
- } else {
152
- this.isZIndexAppendNeeded = true;
153
- }
154
- }
116
+ }, [isActive]);
117
+
118
+ function handleInsertPortalDiv() {
119
+ if (autoZIndexNeeded && isActive) {
120
+ var newHighValue = Number(portalChildrenTopIndexValues || 10) + 1;
121
+ portalChildrenTopIndexValues = newHighValue;
122
+ zIndex.current = newHighValue;
123
+
124
+ if (ref.current) {
125
+ ref.current.style.zIndex = newHighValue;
126
+ } else {
127
+ isZIndexAppendNeeded.current = true;
155
128
  }
156
129
  }
157
- }, {
158
- key: "handleAddPortalId",
159
- value: function handleAddPortalId() {
160
- var createdPortalIdsLen = createdPortalIds.length;
161
- var newPortalId = createdPortalIdsLen ? createdPortalIds[createdPortalIdsLen - 1] + 1 : 1;
162
- createdPortalIds.push(newPortalId);
163
- this.portalId = newPortalId;
164
- this.isCustomPortalId = true;
165
- return "".concat(newPortalPrefix).concat(newPortalId);
166
- }
167
- }, {
168
- key: "handleRemovePortalId",
169
- value: function handleRemovePortalId() {
170
- var _this3 = this;
171
-
172
- if (this.isCustomPortalId) {
173
- createdPortalIds = createdPortalIds.filter(function (id) {
174
- return id !== _this3.portalId;
175
- });
176
- }
130
+ }
131
+
132
+ function handleAddPortalId() {
133
+ var createdPortalIdsLen = createdPortalIds.length;
134
+ var newPortalId = createdPortalIdsLen ? createdPortalIds[createdPortalIdsLen - 1] + 1 : 1;
135
+ createdPortalIds.push(newPortalId);
136
+ portalId.current = newPortalId;
137
+ isCustomPortalId.current = true;
138
+ return "".concat(newPortalPrefix).concat(newPortalId);
139
+ }
140
+
141
+ function handleRemovePortalId() {
142
+ if (isCustomPortalId.current) {
143
+ createdPortalIds = createdPortalIds.filter(function (id) {
144
+ return id !== portalId.current;
145
+ });
177
146
  }
178
- }, {
179
- key: "render",
180
- value: function render() {
181
- var children = this.props.children,
182
- isMounted = this.state.isMounted;
183
- var Element = children.type,
184
- elementProps = children.props;
185
-
186
- if (isMounted) {
187
- if (Element) {
188
- return /*#__PURE__*/_reactDom["default"].createPortal( /*#__PURE__*/_react["default"].createElement(Element, _extends({
189
- ref: this.setRef
190
- }, elementProps)), this.portalDiv);
191
- }
192
-
193
- return null;
194
- }
147
+ }
195
148
 
196
- return null;
149
+ var Element = children.type,
150
+ elementProps = children.props;
151
+
152
+ if (isMounted) {
153
+ if (Element) {
154
+ return /*#__PURE__*/_reactDom["default"].createPortal( /*#__PURE__*/_react["default"].createElement(Element, _extends({
155
+ ref: setRef
156
+ }, elementProps)), portalDiv.current);
197
157
  }
198
- }]);
199
158
 
200
- return Modal;
201
- }(_react["default"].Component);
159
+ return null;
160
+ }
161
+
162
+ return null;
163
+ }
202
164
 
203
- exports["default"] = Modal;
204
165
  Modal.defaultProps = _defaultProps.defaultProps;
205
- Modal.propTypes = _propTypes.propTypes; // if (__DOCS__) {
206
- // Modal.docs = {
207
- // componentGroup: 'Atom',
208
- // folderName: 'Style Guide',
209
- // external: false,
210
- // description: ' '
211
- // };
212
- // }
166
+ Modal.propTypes = _propTypes.propTypes;
@@ -238,130 +238,77 @@
238
238
  .lineheight_inherit{
239
239
  line-height: inherit;
240
240
  }
241
- .lineheight_0{
242
- line-height: 0px;
243
- }
244
- .lineheight_1{
245
- line-height: 1;
246
- }
247
- .lineheight_8{
248
- line-height: 8px;
249
- }
250
- .lineheight_10{
251
- line-height: 10px;
252
- }
253
- .lineheight_11{
254
- line-height: 11px;
255
- }
256
- .lineheight_12{
257
- line-height: 12px;
258
- }
259
- .lineheight_13{
260
- line-height: 13px;
261
- }
262
- .lineheight_14{
263
- line-height: 14px;
264
- }
265
- .lineheight_15{
266
- line-height: 15px;
267
- }
268
- .lineheight_16{
269
- line-height: 16px;
270
- }
271
- .lineheight_17{
272
- line-height: 17px;
273
- }
274
- .lineheight_18{
275
- line-height: 18px;
276
- }
277
- .lineheight_19{
278
- line-height: 19px;
279
- }
280
- .lineheight_20{
281
- line-height: 20px;
282
- }
283
- .lineheight_21{
284
- line-height: 21px;
285
- }
286
- .lineheight_22{
287
- line-height: 22px;
241
+ .lineheight_initial{
242
+ line-height: initial;
288
243
  }
289
- .lineheight_24{
290
- line-height: 24px;
244
+ .lineheight_normal{
245
+ line-height: normal;
291
246
  }
292
- .lineheight_25{
293
- line-height: 25px;
294
- }
295
- .lineheight_26{
296
- line-height: 26px;
297
- }
298
- .lineheight_27{
299
- line-height: 27px;
300
- }
301
- .lineheight_28{
302
- line-height: 28px;
247
+ .lineheight_0{
248
+ line-height: 0;
303
249
  }
304
- .lineheight_29{
305
- line-height: 29px;
250
+ .lineheight_0_1{
251
+ line-height: 0.1;
306
252
  }
307
- .lineheight_30{
308
- line-height: 30px;
253
+ .lineheight_0_2{
254
+ line-height: 0.2;
309
255
  }
310
- .lineheight_32{
311
- line-height: 32px;
256
+ .lineheight_0_3{
257
+ line-height: 0.3;
312
258
  }
313
- .lineheight_33{
314
- line-height: 33px;
259
+ .lineheight_0_4{
260
+ line-height: 0.4;
315
261
  }
316
- .lineheight_34{
317
- line-height: 34px;
262
+ .lineheight_0_5{
263
+ line-height: 0.5;
318
264
  }
319
- .lineheight_35{
320
- line-height: 35px;
265
+ .lineheight_0_6{
266
+ line-height: 0.6;
321
267
  }
322
- .lineheight_36{
323
- line-height: 36px;
268
+ .lineheight_0_7{
269
+ line-height: 0.7;
324
270
  }
325
- .lineheight_38{
326
- line-height: 38px;
271
+ .lineheight_0_8{
272
+ line-height: 0.8;
327
273
  }
328
- .lineheight_40{
329
- line-height: 40px;
274
+ .lineheight_0_9{
275
+ line-height: 0.9;
330
276
  }
331
- .lineheight_41{
332
- line-height: 41px;
277
+ .lineheight_1{
278
+ line-height: 1;
333
279
  }
334
- .lineheight_42{
335
- line-height: 42px;
280
+ .lineheight_1_1{
281
+ line-height: 1.1;
336
282
  }
337
- .lineheight_45{
338
- line-height: 45px;
283
+ .lineheight_1_2{
284
+ line-height: 1.2;
339
285
  }
340
- .lineheight_50{
341
- line-height: 50px;
286
+ .lineheight_1_3{
287
+ line-height: 1.3;
342
288
  }
343
- .lineheight_52{
344
- line-height: 52px;
289
+ .lineheight_1_4{
290
+ line-height: 1.4;
345
291
  }
346
- .lineheight_54{
347
- line-height: 54px;
292
+ .lineheight_1_5{
293
+ line-height: 1.5;
348
294
  }
349
- .lineheight_55{
350
- line-height: 55px;
295
+ .lineheight_1_6{
296
+ line-height: 1.6;
351
297
  }
352
- .lineheight_60{
353
- line-height: 60px;
298
+ .lineheight_1_7{
299
+ line-height: 1.7;
354
300
  }
355
- .lineheight_70{
356
- line-height: 70px;
301
+ .lineheight_1_8{
302
+ line-height: 1.8;
357
303
  }
358
- .lineheight_75{
359
- line-height: 75px;
304
+ .lineheight_1_9{
305
+ line-height: 1.9;
360
306
  }
361
- .lineheight_120{
362
- line-height: 120px;
307
+ .lineheight_2{
308
+ line-height: 2;
363
309
  }
364
310
 
311
+
365
312
  /*............... Lineheight End.........*/
366
313
 
367
314
  /*............... Letterspacing Start.........*/
@@ -369,41 +316,65 @@
369
316
  .letterspacing_inherit{
370
317
  letter-spacing:inherit;
371
318
  }
372
- .letterspacing_01{
319
+ .letterspacing_0_1{
373
320
  letter-spacing: 0.1px;
374
321
  }
375
- .letterspacing_02{
322
+ .letterspacing_0_2{
376
323
  letter-spacing: 0.2px;
377
324
  }
378
- .letterspacing_03{
325
+ .letterspacing_0_3{
379
326
  letter-spacing: 0.3px;
380
327
  }
381
- .letterspacing_04{
328
+ .letterspacing_0_4{
382
329
  letter-spacing: 0.4px;
383
330
  }
384
- .letterspacing_05{
331
+ .letterspacing_0_5{
385
332
  letter-spacing: 0.5px;
386
333
  }
387
- .letterspacing_06{
334
+ .letterspacing_0_6{
388
335
  letter-spacing: 0.6px;
389
336
  }
390
- .letterspacing_07{
337
+ .letterspacing_0_7{
391
338
  letter-spacing: 0.7px;
392
339
  }
393
- .letterspacing_08{
340
+ .letterspacing_0_8{
394
341
  letter-spacing: 0.8px;
395
342
  }
396
- .letterspacing_09{
343
+ .letterspacing_0_9{
397
344
  letter-spacing: 0.9px;
398
345
  }
399
346
  .letterspacing_1{
400
347
  letter-spacing: 1px;
401
348
  }
349
+ .letterspacing_1_1{
350
+ letter-spacing: 1.1px;
351
+ }
352
+ .letterspacing_1_2{
353
+ letter-spacing: 1.2px;
354
+ }
355
+ .letterspacing_1_3{
356
+ letter-spacing: 1.3px;
357
+ }
358
+ .letterspacing_1_4{
359
+ letter-spacing: 1.4px;
360
+ }
361
+ .letterspacing_1_5{
362
+ letter-spacing: 1.5px;
363
+ }
364
+ .letterspacing_1_6{
365
+ letter-spacing: 1.6px;
366
+ }
367
+ .letterspacing_1_7{
368
+ letter-spacing: 1.7px;
369
+ }
370
+ .letterspacing_1_8{
371
+ letter-spacing: 1.8px;
372
+ }
373
+ .letterspacing_1_9{
374
+ letter-spacing: 1.9px;
375
+ }
402
376
  .letterspacing_2{
403
377
  letter-spacing: 2px;
404
378
  }
405
- .letterspacing_4{
406
- letter-spacing: 4px;
407
- }
408
379
 
409
380
  /*............... Letterspacing End.........*/
@@ -7,7 +7,7 @@ exports["default"] = cssJSLogic;
7
7
 
8
8
  var _utils = require("@zohodesk/utils");
9
9
 
10
- var _letterSpacingMap = require("./letterSpacingMap");
10
+ var _utils2 = require("../utils");
11
11
 
12
12
  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; }
13
13
 
@@ -33,8 +33,12 @@ function cssJSLogic(_ref) {
33
33
  $ui_wordWrap = props.$ui_wordWrap,
34
34
  $ui_whiteSpace = props.$ui_whiteSpace;
35
35
 
36
- if ($ui_letterSpacing && $ui_letterSpacing.match(/\./g)) {
37
- $ui_letterSpacing = _letterSpacingMap.letterspacingMapping[$ui_letterSpacing];
36
+ if ($ui_letterSpacing) {
37
+ $ui_letterSpacing = _utils2.letterspacingMapping[$ui_letterSpacing];
38
+ }
39
+
40
+ if ($ui_lineHeight) {
41
+ $ui_lineHeight = _utils2.lineheightMapping[$ui_lineHeight];
38
42
  }
39
43
 
40
44
  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));
@@ -23,8 +23,8 @@ var propTypes = {
23
23
  $ui_typeFace: _propTypes["default"].oneOf(['normal', 'italic']),
24
24
  $ui_decoration: _propTypes["default"].oneOf(['default', 'underline', 'strike', 'overline']),
25
25
  $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']),
26
- $ui_lineHeight: _propTypes["default"].oneOf(['0', '1', '8', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '24', '25', '26', '27', '28', '29', '30', '32', '33', '34', '35', '36', '38', '40', '41', '42', '45', '50', '52', '54', '55', '60', '70', '75', '120', 'inherit']),
27
- $ui_letterSpacing: _propTypes["default"].oneOf(['0.1', '0.2', '0.3', '0.4', '0.5', '0.6', '0.7', '0.8', '0.9', '1', '2', '4', 'inherit']),
26
+ $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']),
27
+ $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']),
28
28
  $ui_wordBreak: _propTypes["default"].oneOf(['breakAll', 'keepAll', 'breakWord']),
29
29
  $ui_wordWrap: _propTypes["default"].oneOf(['normal', 'break']),
30
30
  $ui_whiteSpace: _propTypes["default"].oneOf(['normal', 'noWrap', 'pre', 'preLine', 'preWrap']),