@zohodesk/components 1.2.3 → 1.2.5

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

@@ -0,0 +1,46 @@
+import { compileClassNames } from '@zohodesk/utils';
+import { letterspacingMapping } from './letterSpacingMap';
+export default function cssJSLogic(_ref) {
+  let {
+    props,
+    style
+  } = _ref;
+  let {
+    $ui_isReset,
+    $ui_isDotted,
+    $ui_size,
+    $ui_lineClamp,
+    $ui_lineHeight,
+    $ui_display,
+    $ui_variant,
+    $ui_typeFace,
+    $ui_textAlign,
+    $ui_letterSpacing,
+    $ui_transform,
+    $ui_decoration,
+    $ui_className
+  } = props;
+
+  if ($ui_letterSpacing && $ui_letterSpacing.match(/\./g)) {
+    $ui_letterSpacing = letterspacingMapping[$ui_letterSpacing];
+  }
+
+  let typographyClass = compileClassNames({
+    [style.reset]: $ui_isReset,
+    [style.dotted]: $ui_isDotted,
+    [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_variant}`]]: !!$ui_variant,
+    [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
+  });
+  return {
+    typographyClass
+  };
+}

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

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

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

@@ -0,0 +1,8 @@
+export const defaultProps = {
+  $ui_className: '',
+  $ui_tagName: 'div',
+  $ui_isReset: false,
+  $ui_isDotted: false,
+  a11yAttributes: {},
+  tagAttributes: {}
+};

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

@@ -0,0 +1,24 @@
+import PropTypes from 'prop-types';
+export const propTypes = {
+  children: PropTypes.node,
+  $ui_className: PropTypes.string,
+  $ui_tagName: PropTypes.string,
+  $ui_isReset: PropTypes.bool,
+  $ui_isDotted: PropTypes.bool,
+  $ui_display: PropTypes.oneOf(['block', 'inlineBlock', 'inline', 'initial']),
+  $ui_variant: 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', '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.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.string,
+  testId: PropTypes.string,
+  customId: PropTypes.string,
+  customStyle: PropTypes.object,
+  a11yAttributes: PropTypes.object,
+  tagAttributes: PropTypes.object
+};

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

@@ -0,0 +1,69 @@
+import React, { useContext } from 'react';
+import { defaultProps } from '../../../VelocityAnimation/VelocityAnimation/props/defaultProps';
+import { propTypes } from '../../../VelocityAnimation/VelocityAnimation/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/VelocityAnimationGroup/VelocityAnimationGroup.js

@@ -0,0 +1,100 @@
+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); }
+
+import React, { useContext } from 'react';
+import { defaultProps } from '../../../VelocityAnimation/VelocityAnimationGroup/props/defaultProps';
+import { propTypes } from '../../../VelocityAnimation/VelocityAnimationGroup/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, _extends({
+    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'
+//   };
+// }

package/es/v1/semantic/Button/Button.js

@@ -0,0 +1,53 @@
+import React from 'react';
+import { defaultProps } from '../../../semantic/Button/props/defaultProps';
+import { propTypes } from '../../../semantic/Button/props/propTypes';
+import style from '../../../semantic/Button/semanticButton.module.css';
+export default function Button(props) {
+  const {
+    value,
+    type,
+    text,
+    title,
+    name,
+    autoFocus,
+    disabled,
+    ref,
+    dataId,
+    onClick,
+    children,
+    customClass,
+    a11y
+  } = props;
+  let {
+    ariaLabel,
+    ariaHaspopup,
+    ariaExpanded,
+    ariaControls,
+    ariaLabelledby
+  } = a11y;
+  return /*#__PURE__*/React.createElement("button", {
+    className: `${style.buttonReset} ${customClass}`,
+    "aria-label": ariaLabel,
+    "aria-haspopup": ariaHaspopup,
+    "aria-expanded": ariaExpanded,
+    "aria-controls": ariaControls,
+    "aria-labelledby": ariaLabelledby,
+    type: type,
+    value: value,
+    name: name,
+    autoFocus: autoFocus,
+    disabled: disabled,
+    ref: ref,
+    "data-id": dataId,
+    "data-test-id": dataId,
+    onClick: onClick,
+    "data-title": title
+  }, children ? children : text);
+}
+Button.defaultProps = defaultProps;
+Button.propTypes = propTypes; // if (__DOCS__) {
+//   Button.docs = {
+//     componentGroup: 'semantic',
+//     folderName: 'DefaultComponents'
+//   };
+// }

package/es/v1/semantic/index.js

@@ -0,0 +1 @@
+export { default as SemanticButton } from './Button/Button';