@zohodesk/components 1.1.0 → 1.2.0-temp-195

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

@@ -0,0 +1,380 @@
+.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/v1/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/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',
+  $flag_reset: false,
+  $flag_dotted: false,
+  $tagAttributes_text: {},
+  $a11yAttributes_text: {}
+};
+exports.defaultProps = defaultProps;

package/lib/v1/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/v1/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/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("./props/defaultProps");
+
+var _propTypes = require("./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'
+//   };
+// }

package/lib/v1/VelocityAnimation/VelocityAnimation/props/defaultProps.js

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.defaultProps = void 0;
+var defaultProps = {
+  runOnMount: false,
+  isCustomized: true,
+  needUIPack: true,
+  isFlex: false,
+  duration: 300
+};
+exports.defaultProps = defaultProps;

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

@@ -0,0 +1,23 @@
+"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.isRequired,
+  delay: _propTypes["default"].number,
+  duration: _propTypes["default"].number,
+  isActive: _propTypes["default"].bool.isRequired,
+  isCustomized: _propTypes["default"].bool,
+  isFlex: _propTypes["default"].bool,
+  name: _propTypes["default"].oneOf(['fade', 'slideRight', 'shrink', 'expand', 'slideDown', 'flyDown', 'slideLeft']),
+  needUIPack: _propTypes["default"].bool,
+  runOnMount: _propTypes["default"].bool
+};
+exports.propTypes = propTypes;