@zohodesk/components 1.1.0 → 1.2.0-temp-195

package/es/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/es/v1/Typography/css/cssJSLogic.js

@@ -0,0 +1,56 @@
+import { compileClassNames } from '@zohodesk/utils';
+import { letterspacingMapping, lineheightMapping } from '../utils';
+export default function cssJSLogic(_ref) {
+  let {
+    props,
+    style
+  } = _ref;
+  let {
+    $flag_reset,
+    $flag_dotted,
+    $ui_size,
+    $ui_lineClamp,
+    $ui_lineHeight,
+    $ui_display,
+    $ui_weight,
+    $ui_typeFace,
+    $ui_textAlign,
+    $ui_letterSpacing,
+    $ui_transform,
+    $ui_decoration,
+    $ui_className,
+    $ui_wordBreak,
+    $ui_wordWrap,
+    $ui_whiteSpace
+  } = props;
+
+  if ($ui_letterSpacing) {
+    $ui_letterSpacing = letterspacingMapping[$ui_letterSpacing];
+  }
+
+  if ($ui_lineHeight) {
+    $ui_lineHeight = lineheightMapping[$ui_lineHeight];
+  }
+
+  let typographyClass = compileClassNames({
+    [style.reset]: $flag_reset,
+    [style.dotted]: $flag_dotted,
+    [style[`size${$ui_size}`]]: !!$ui_size,
+    [style[`lineclamp_${$ui_lineClamp}`]]: !!$ui_lineClamp,
+    [style[`lineheight_${$ui_lineHeight}`]]: !!$ui_lineHeight,
+    [style[`display_${$ui_display}`]]: !!$ui_display,
+    [style[`font_${$ui_weight}`]]: !!$ui_weight,
+    [style[`fontStyles_${$ui_typeFace}`]]: !!$ui_typeFace,
+    [style[`textalign_${$ui_textAlign}`]]: !!$ui_textAlign,
+    [style[`letterspacing_${$ui_letterSpacing}`]]: !!$ui_letterSpacing,
+    [style[`transform_${$ui_transform}`]]: !!$ui_transform,
+    [style[`decoration_${$ui_decoration}`]]: !!$ui_decoration,
+    [$ui_className]: !!$ui_className,
+    [style[`wordBreak_${$ui_wordBreak}`]]: !!$ui_wordBreak,
+    [style[`wordWrap_${$ui_wordWrap}`]]: !!$ui_wordWrap,
+    [style[`whiteSpace_${$ui_whiteSpace}`]]: !!$ui_whiteSpace
+  });
+  return {
+    typographyClass
+  };
+}

package/es/v1/Typography/props/defaultProps.js

@@ -0,0 +1,8 @@
+export const defaultProps = {
+  $ui_className: '',
+  $ui_tagName: 'div',
+  $flag_reset: false,
+  $flag_dotted: false,
+  $tagAttributes_text: {},
+  $a11yAttributes_text: {}
+};

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

@@ -0,0 +1,27 @@
+import PropTypes from 'prop-types';
+export const propTypes = {
+  children: PropTypes.node,
+  $ui_className: PropTypes.string,
+  $ui_tagName: PropTypes.string,
+  $flag_reset: PropTypes.bool,
+  $flag_dotted: PropTypes.bool,
+  $ui_display: PropTypes.oneOf(['block', 'inlineBlock', 'inline', 'initial']),
+  $ui_weight: PropTypes.oneOf(['regular', 'light', 'semibold', 'bold']),
+  $ui_textAlign: PropTypes.oneOf(['left', 'right', 'center', 'justify']),
+  $ui_transform: PropTypes.oneOf(['default', 'upper', 'lower', 'capital']),
+  $ui_lineClamp: PropTypes.oneOf(['1', '2', '3', '4', '5']),
+  $ui_typeFace: PropTypes.oneOf(['normal', 'italic']),
+  $ui_decoration: PropTypes.oneOf(['default', 'underline', 'strike', 'overline']),
+  $ui_size: PropTypes.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.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.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.oneOf(['breakAll', 'keepAll', 'breakWord']),
+  $ui_wordWrap: PropTypes.oneOf(['normal', 'break']),
+  $ui_whiteSpace: PropTypes.oneOf(['normal', 'noWrap', 'pre', 'preLine', 'preWrap']),
+  $i18n_dataTitle: PropTypes.string,
+  testId: PropTypes.string,
+  customId: PropTypes.string,
+  customStyle: PropTypes.object,
+  $a11yAttributes_text: PropTypes.object,
+  $tagAttributes_text: PropTypes.object
+};

package/es/v1/Typography/utils/index.js

@@ -0,0 +1,50 @@
+/* eslint-disable */
+export const 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'
+};
+export const 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'
+};

package/es/v1/VelocityAnimation/VelocityAnimation/VelocityAnimation.js

@@ -0,0 +1,69 @@
+import React, { useContext } from 'react';
+import { defaultProps } from './props/defaultProps';
+import { propTypes } from './props/propTypes';
+import { VelocityComponent } from 'velocity-react';
+import 'velocity-animate/velocity.ui';
+import LibraryContext from '../../../Provider/LibraryContextInit';
+export default function VelocityAnimation(props) {
+  let {
+    children,
+    name,
+    duration,
+    isActive,
+    runOnMount,
+    delay,
+    isCustomized,
+    needUIPack,
+    isFlex
+  } = props;
+  let {
+    direction,
+    isReducedMotion
+  } = useContext(LibraryContext) || {};
+  let enterAnimationObj = {
+    fade: 'transition.fadeIn',
+    slideDown: 'slideDown',
+    flyDown: {
+      translateY: '0%'
+    },
+    slideRight: {
+      translateX: '0%'
+    },
+    slideLeft: {
+      translateX: '0%'
+    },
+    shrink: 'transition.shrinkIn',
+    expand: 'transition.expandIn'
+  };
+  let 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'
+  };
+  let animation = isCustomized ? isActive ? enterAnimationObj[name] : exitAnimationObj[name] : needUIPack ? `transition.${name}${isActive ? 'In' : 'Out'}` : name;
+  return /*#__PURE__*/React.createElement(VelocityComponent, {
+    key: name,
+    animation: animation,
+    duration: !isReducedMotion ? duration : 0,
+    runOnMount: runOnMount,
+    display: isActive ? isFlex ? 'flex' : '' : 'none',
+    delay: delay,
+    interruptBehavior: "queue"
+  }, children);
+}
+VelocityAnimation.defaultProps = defaultProps;
+VelocityAnimation.propTypes = propTypes; // if (__DOCS__) {
+//   VelocityAnimation.docs = {
+//     componentGroup: 'Animation'
+//   };
+// }

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

@@ -0,0 +1,7 @@
+export const defaultProps = {
+  runOnMount: false,
+  isCustomized: true,
+  needUIPack: true,
+  isFlex: false,
+  duration: 300
+};

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

@@ -0,0 +1,12 @@
+import PropTypes from 'prop-types';
+export const propTypes = {
+  children: PropTypes.node.isRequired,
+  delay: PropTypes.number,
+  duration: PropTypes.number,
+  isActive: PropTypes.bool.isRequired,
+  isCustomized: PropTypes.bool,
+  isFlex: PropTypes.bool,
+  name: PropTypes.oneOf(['fade', 'slideRight', 'shrink', 'expand', 'slideDown', 'flyDown', 'slideLeft']),
+  needUIPack: PropTypes.bool,
+  runOnMount: PropTypes.bool
+};

package/es/v1/VelocityAnimation/VelocityAnimationGroup/VelocityAnimationGroup.js

@@ -0,0 +1,99 @@
+import React, { useContext } from 'react';
+import { defaultProps } from './props/defaultProps';
+import { propTypes } from './props/propTypes';
+import { VelocityTransitionGroup } from 'velocity-react';
+import 'velocity-animate/velocity.ui';
+import LibraryContext from '../../../Provider/LibraryContextInit';
+
+function clearProps(props) {
+  let newProps = Object.assign({}, props);
+  Object.keys(VelocityAnimationGroup.propTypes).forEach(key => {
+    delete newProps[key];
+  });
+  return newProps;
+}
+
+export default function VelocityAnimationGroup(props) {
+  let {
+    children,
+    enterName,
+    exitName,
+    enterDuration,
+    exitDuration,
+    isActive,
+    component,
+    runOnMount,
+    enterShowStyle,
+    enterHideStyle,
+    exitDelay,
+    isFlex,
+    enterDelay,
+    isCustomized,
+    name,
+    needUIPack
+  } = props;
+  let {
+    direction,
+    isReducedMotion
+  } = useContext(LibraryContext) || {};
+  let childProps = clearProps(props);
+  let enterAnimationObj = {
+    fade: 'transition.fadeIn',
+    slideDown: 'slideDown',
+    flyDown: {
+      translateY: '0%'
+    },
+    slideRight: {
+      translateX: '0%'
+    },
+    slideLeft: {
+      translateX: '0%'
+    },
+    shrink: 'transition.shrinkIn',
+    expand: 'transition.expandIn'
+  };
+  let 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'
+  };
+  let enterAnimation = {
+    animation: isCustomized ? enterAnimationObj[name] : needUIPack ? `transition.${enterName}In` : enterName,
+    duration: !isReducedMotion ? enterDuration : 0,
+    delay: enterDelay ? enterDelay : 0,
+    display: isFlex ? 'flex' : ''
+  };
+  let exitAnimation = {
+    animation: isCustomized ? exitAnimationObj[name] : needUIPack ? `transition.${exitName ? exitName : enterName}Out` : exitName ? exitName : enterName,
+    duration: !isReducedMotion ? exitDuration : 0,
+    delay: exitDelay ? exitDelay : 0,
+    display: 'none'
+  };
+  return /*#__PURE__*/React.createElement(VelocityTransitionGroup, {
+    enter: enterAnimation,
+    leave: exitAnimation,
+    component: component && component,
+    runOnMount: runOnMount,
+    enterHideStyle: enterHideStyle,
+    enterShowStyle: enterShowStyle,
+    ...childProps
+  }, isActive ? children : null);
+}
+VelocityAnimationGroup.defaultProps = { ...defaultProps,
+  component: React.Fragment
+};
+VelocityAnimationGroup.propTypes = propTypes; // if (__DOCS__) {
+//   VelocityAnimationGroup.docs = {
+//     componentGroup: 'Animation'
+//   };
+// }