@zohodesk/components 1.2.4 → 1.2.6

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

@@ -0,0 +1,376 @@
+.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;
+}
+
+
+
+/*...............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_0{
+  line-height: 0px;
+}
+.lineheight_1{
+  line-height: 1;
+}
+.lineheight_8{
+  line-height: 8px;
+}
+.lineheight_10{
+  line-height: 10px;
+}
+.lineheight_11{
+  line-height: 11px;
+}
+.lineheight_12{
+  line-height: 12px;
+}
+.lineheight_13{
+  line-height: 13px;
+}
+.lineheight_14{
+  line-height: 14px;
+}
+.lineheight_15{
+  line-height: 15px;
+}
+.lineheight_16{
+  line-height: 16px;
+}
+.lineheight_17{
+  line-height: 17px;
+}
+.lineheight_18{
+  line-height: 18px;
+}
+.lineheight_19{
+  line-height: 19px;
+}
+.lineheight_20{
+  line-height: 20px;
+}
+.lineheight_21{
+  line-height: 21px;
+}
+.lineheight_22{
+  line-height: 22px;
+}
+.lineheight_24{
+  line-height: 24px;
+}
+.lineheight_25{
+  line-height: 25px;
+}
+.lineheight_26{
+  line-height: 26px;
+}
+.lineheight_27{
+  line-height: 27px;
+}
+.lineheight_28{
+  line-height: 28px;
+}
+.lineheight_29{
+  line-height: 29px;
+}
+.lineheight_30{
+  line-height: 30px;
+}
+.lineheight_32{
+  line-height: 32px;
+}
+.lineheight_33{
+  line-height: 33px;
+}
+.lineheight_34{
+  line-height: 34px;
+}
+.lineheight_35{
+  line-height: 35px;
+}
+.lineheight_36{
+  line-height: 36px;
+}
+.lineheight_38{
+  line-height: 38px;
+}
+.lineheight_40{
+  line-height: 40px;
+}
+.lineheight_41{
+  line-height: 41px;
+}
+.lineheight_42{
+  line-height: 42px;
+}
+.lineheight_45{
+  line-height: 45px;
+}
+.lineheight_50{
+  line-height: 50px;
+}
+.lineheight_52{
+  line-height: 52px;
+}
+.lineheight_54{
+  line-height: 54px;
+}
+.lineheight_55{
+  line-height: 55px;
+}
+.lineheight_60{
+  line-height: 60px;
+}
+.lineheight_70{
+  line-height: 70px;
+}
+.lineheight_75{
+  line-height: 75px;
+}
+.lineheight_120{
+  line-height: 120px;
+}
+
+/*............... Lineheight End.........*/
+
+/*............... Letterspacing Start.........*/
+
+.letterspacing_inherit{
+  letter-spacing:inherit;
+}
+.letterspacing_01{
+  letter-spacing: 0.1px;
+}
+.letterspacing_02{
+  letter-spacing: 0.2px;
+}
+.letterspacing_03{
+  letter-spacing: 0.3px;
+}
+.letterspacing_04{
+  letter-spacing: 0.4px;
+}
+.letterspacing_05{
+  letter-spacing: 0.5px;
+}
+.letterspacing_06{
+  letter-spacing: 0.6px;
+}
+.letterspacing_07{
+  letter-spacing: 0.7px;
+}
+.letterspacing_08{
+  letter-spacing: 0.8px;
+}
+.letterspacing_09{
+  letter-spacing: 0.9px;
+}
+.letterspacing_1{
+  letter-spacing: 1px;
+}
+.letterspacing_2{
+  letter-spacing: 2px;
+}
+.letterspacing_4{
+  letter-spacing: 4px;
+}
+
+/*............... Letterspacing End.........*/

package/lib/v1/Typography/css/cssJSLogic.js

@@ -0,0 +1,41 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = cssJSLogic;
+
+var _utils = require("@zohodesk/utils");
+
+var _letterSpacingMap = require("./letterSpacingMap");
+
+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 $ui_isReset = props.$ui_isReset,
+      $ui_isDotted = props.$ui_isDotted,
+      $ui_size = props.$ui_size,
+      $ui_lineClamp = props.$ui_lineClamp,
+      $ui_lineHeight = props.$ui_lineHeight,
+      $ui_display = props.$ui_display,
+      $ui_variant = props.$ui_variant,
+      $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;
+
+  if ($ui_letterSpacing && $ui_letterSpacing.match(/\./g)) {
+    $ui_letterSpacing = _letterSpacingMap.letterspacingMapping[$ui_letterSpacing];
+  }
+
+  var typographyClass = (0, _utils.compileClassNames)((_compileClassNames = {}, _defineProperty(_compileClassNames, style.reset, $ui_isReset), _defineProperty(_compileClassNames, style.dotted, $ui_isDotted), _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_variant)], !!$ui_variant), _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), _compileClassNames));
+  return {
+    typographyClass: typographyClass
+  };
+}

package/lib/v1/Typography/css/letterSpacingMap.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.letterspacingMapping = void 0;
+
+/* eslint-disable */
+var letterspacingMapping = {
+  '0.1': '01',
+  '0.2': '02',
+  '0.3': '03',
+  '0.4': '04',
+  '0.5': '05',
+  '0.6': '06',
+  '0.7': '07',
+  '0.8': '08',
+  '0.9': '09'
+};
+exports.letterspacingMapping = letterspacingMapping;

package/lib/v1/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',
+  $ui_isReset: false,
+  $ui_isDotted: false,
+  a11yAttributes: {},
+  tagAttributes: {}
+};
+exports.defaultProps = defaultProps;

package/lib/v1/Typography/props/propTypes.js

@@ -0,0 +1,35 @@
+"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,
+  $ui_isReset: _propTypes["default"].bool,
+  $ui_isDotted: _propTypes["default"].bool,
+  $ui_display: _propTypes["default"].oneOf(['block', 'inlineBlock', 'inline', 'initial']),
+  $ui_variant: _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', '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']),
+  $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']),
+  $i18n_dataTitle: _propTypes["default"].string,
+  testId: _propTypes["default"].string,
+  customId: _propTypes["default"].string,
+  customStyle: _propTypes["default"].object,
+  a11yAttributes: _propTypes["default"].object,
+  tagAttributes: _propTypes["default"].object
+};
+exports.propTypes = propTypes;

package/lib/v1/VelocityAnimation/VelocityAnimation/VelocityAnimation.js

@@ -0,0 +1,90 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = VelocityAnimation;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _defaultProps = require("../../../VelocityAnimation/VelocityAnimation/props/defaultProps");
+
+var _propTypes = require("../../../VelocityAnimation/VelocityAnimation/props/propTypes");
+
+var _velocityReact = require("velocity-react");
+
+require("velocity-animate/velocity.ui");
+
+var _LibraryContextInit = _interopRequireDefault(require("../../../Provider/LibraryContextInit"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+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); }
+
+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; }
+
+function VelocityAnimation(props) {
+  var children = props.children,
+      name = props.name,
+      duration = props.duration,
+      isActive = props.isActive,
+      runOnMount = props.runOnMount,
+      delay = props.delay,
+      isCustomized = props.isCustomized,
+      needUIPack = props.needUIPack,
+      isFlex = props.isFlex;
+
+  var _ref = (0, _react.useContext)(_LibraryContextInit["default"]) || {},
+      direction = _ref.direction,
+      isReducedMotion = _ref.isReducedMotion;
+
+  var enterAnimationObj = {
+    fade: 'transition.fadeIn',
+    slideDown: 'slideDown',
+    flyDown: {
+      translateY: '0%'
+    },
+    slideRight: {
+      translateX: '0%'
+    },
+    slideLeft: {
+      translateX: '0%'
+    },
+    shrink: 'transition.shrinkIn',
+    expand: 'transition.expandIn'
+  };
+  var exitAnimationObj = {
+    fade: 'transition.fadeOut',
+    slideDown: 'slideUp',
+    flyDown: {
+      translateY: '-100%'
+    },
+    slideRight: {
+      translateX: direction == 'rtl' ? '-100%' : '100%'
+    },
+    slideLeft: {
+      translateX: direction == 'rtl' ? '100%' : '-100%'
+    },
+    shrink: 'transition.shrinkOut',
+    expand: 'transition.expandOut'
+  };
+  var animation = isCustomized ? isActive ? enterAnimationObj[name] : exitAnimationObj[name] : needUIPack ? "transition.".concat(name).concat(isActive ? 'In' : 'Out') : name;
+  return /*#__PURE__*/_react["default"].createElement(_velocityReact.VelocityComponent, {
+    key: name,
+    animation: animation,
+    duration: !isReducedMotion ? duration : 0,
+    runOnMount: runOnMount,
+    display: isActive ? isFlex ? 'flex' : '' : 'none',
+    delay: delay,
+    interruptBehavior: "queue"
+  }, children);
+}
+
+VelocityAnimation.defaultProps = _defaultProps.defaultProps;
+VelocityAnimation.propTypes = _propTypes.propTypes; // if (__DOCS__) {
+//   VelocityAnimation.docs = {
+//     componentGroup: 'Animation'
+//   };
+// }