@zohodesk/components 1.0.0-temp-157 → 1.0.0-temp-158

package/es/DropBox/DropBoxElement/css/DropBoxElement.module.css

@@ -28,44 +28,44 @@
 
 .mobRadius {
     --dropbox_border_radius: 30px 30px 0 0;
-    --dropbox_padding: var(--zd_size10) 0 0 0;
+    --dropbox_padding: 10px 0 0 0;
 }
 
 /* sizes */
 .mini {
-    width: var(--zd_size140);
+    width: 140px;
 }
 
 .xmini {
-    width: var(--zd_size160);
+    width: 160px;
 }
 
 .xsmall {
-    width: var(--zd_size180);
+    width: 180px;
 }
 
 .small {
-    width: var(--zd_size200);
+    width: 200px;
 }
 
 .medium {
-    width: var(--zd_size220);
+    width: 220px;
 }
 
 .large {
-    width: var(--zd_size260);
+    width: 260px;
 }
 
 .mlarge {
-    width: var(--zd_size280);
+    width: 280px;
 }
 
 .xlarge {
-    width: var(--zd_size304);
+    width: 304px;
 }
 
 .xxlarge {
-    width: var(--zd_size364);
+    width: 364px;
 }
 
 .default {
@@ -160,55 +160,55 @@
 
 /* space for arrow */
 .arrowtop {
-    padding-bottom: var(--zd_size10);
+    padding-bottom: 10px;
 }
 
 .arrowright {
-    padding-left: var(--zd_size10);
+    padding-left: 10px;
 }
 
 .arrowleft {
-    padding-right: var(--zd_size10);
+    padding-right: 10px;
 }
 
 .arrowbottom {
-    padding-top: var(--zd_size10);
+    padding-top: 10px;
 }
 
 /* space from target */
 .paddingSpace_top {
-    padding-bottom: var(--zd_size5);
+    padding-bottom: 5px;
 }
 
 .paddingSpace_right {
-    padding-left: var(--zd_size5);
+    padding-left: 5px;
 }
 
 .paddingSpace_left {
-    padding-right: var(--zd_size5);
+    padding-right: 5px;
 }
 
 .paddingSpace_bottom {
-    padding-top: var(--zd_size5);
+    padding-top: 5px;
 }
 
 .arrow {
     position: absolute;
-    height: var(--zd_size34);
-    width: var(--zd_size34);
-    clip: rect(var(--zd_size3),
-            var(--zd_size29),
-            var(--zd_size17),
-            var(--zd_size8));
-    padding: var(--zd_size4);
+    height: 34px;
+    width: 34px;
+    clip: rect(3px,
+            29px,
+            17px,
+            8px);
+    padding: 4px;
     display: flex;
     align-items: center;
     justify-content: center;
 }
 
 .arrowShape {
-    height: var(--zd_size10);
-    width: var(--zd_size10);
+    height: 10px;
+    width: 10px;
     box-shadow: 1px -1px 2px 0 var(--dropbox_arrow_box_shadow_color);
     background-color: var(--dropbox_bg_color);
     -webkit-transform: rotateZ(-45deg);
@@ -225,15 +225,15 @@
 .top .start,
 .top .end,
 .top .mid {
-    bottom: calc(var(--zd_size17) * -1);
+    bottom: -17px;
 }
 
 .top .start {
-    left: var(--zd_size28);
+    left: 28px;
 }
 
 .top .end {
-    right: var(--zd_size28);
+    right: 28px;
     transform: rotate(180deg) translateX(-50%);
 }
 
@@ -249,11 +249,11 @@
 .bottom .start,
 .bottom .end,
 .bottom .mid {
-    top: calc(var(--zd_size17) * -1);
+    top: -17px;
 }
 
 .bottom .start {
-    left: var(--zd_size28);
+    left: 28px;
 }
 
 .bottom .mid {
@@ -261,7 +261,7 @@
 }
 
 .bottom .end {
-    right: var(--zd_size28);
+    right: 28px;
     transform: translateX(50%);
 }
 
@@ -273,16 +273,16 @@
 .left .start,
 .left .mid,
 .left .end {
-    right: calc(var(--zd_size17) * -1);
+    right: -17px;
 }
 
 .left .start {
-    top: var(--zd_size28);
+    top: 28px;
 }
 
 .left .end {
     transform: rotate(90deg) translateX(50%);
-    bottom: var(--zd_size28);
+    bottom: 28px;
 }
 
 .left .mid {
@@ -297,11 +297,11 @@
 .right .start,
 .right .mid,
 .right .end {
-    left: calc(var(--zd_size17) * -1);
+    left: -17px;
 }
 
 .right .start {
-    top: var(--zd_size28);
+    top: 28px;
 }
 
 .right .mid {
@@ -314,7 +314,7 @@
 }
 
 .right .end {
-    bottom: var(--zd_size28);
+    bottom: 28px;
     transform: rotate(-90deg) translateX(-50%);
 }
 .hidden {
@@ -411,16 +411,17 @@
 }
 
 .closeBar {
+  /*  Variable:Ignore  */
     height: 6px;
     width: 20%;
     border-radius: 5px;
     background-color: var(--dropbox_mob_close_bg_color);
     cursor: pointer;
-    margin: 0 auto var(--zd_size10);
+    margin: 0 auto 10px;
 }
 
 .boxPadding {
-    --dropbox_padding: var(--zd_size10) 0;
+    --dropbox_padding: 10px 0;
 }
 
 .darkPalette {

package/es/DropBox/DropBoxElement/css/cssJSLogic.js

@@ -39,9 +39,7 @@ export default function cssJSLogic(_ref) {
     customMobileDropBox = '',
     customDropBoxWrap = '',
     customMobileDropBoxWrap = ''
-  } = customClass;
-
-  // const {needBoxStyle,boxstyle} = useDropboxPosCalc(props)
+  } = customClass; // const {needBoxStyle,boxstyle} = useDropboxPosCalc(props)
 
   let boxClassName = compileClassNames({
     [style.main]: true,
@@ -70,17 +68,21 @@ export default function cssJSLogic(_ref) {
     [style.bounce]: !isModel && isAnimate && !isReducedMotion && isActive && animationStyle === 'bounce'
   });
   let inlineStyle = !isModel ? isAbsolute ? needBoxStyle && boxstyle : positionsOffset && positionsOffset[boxPosition] || {} : {};
+
   if (zIndexStyle) {
     inlineStyle = Object.assign({}, inlineStyle, zIndexStyle);
   }
+
   if (!isModel && !isAbsolute && size === 'default' && targetOffset && isActive) {
     inlineStyle = Object.assign({}, inlineStyle, {
       width: targetOffset.width
     });
   }
+
   if (customInlineStyle) {
     inlineStyle = Object.assign({}, inlineStyle, customInlineStyle);
   }
+
   return {
     boxClassName,
     subContainerClass,

package/es/DropBox/DropBoxElement/useDropboxPosCalc.js

@@ -17,6 +17,7 @@ export default function useDropboxPosCalc(props) {
   let arrowstyle = {};
   const needBoxStyle = right || left || top || bottom;
   const needArrowStyle = arrowLeft || arrowRight || arrowTop || arrowBottom;
+
   if (needBoxStyle) {
     boxstyle = !isModel ? direction === 'rtl' ? {
       right: [remConvert(left)] + unit,
@@ -30,6 +31,7 @@ export default function useDropboxPosCalc(props) {
       bottom: [remConvert(bottom)] + unit
     } : {};
   }
+
   if (needArrowStyle) {
     arrowstyle = !isModel ? direction === 'rtl' ? {
       right: [remConvert(arrowLeft)] + unit,
@@ -43,6 +45,7 @@ export default function useDropboxPosCalc(props) {
       bottom: [remConvert(arrowBottom)] + unit
     } : {};
   }
+
   return {
     needBoxStyle,
     boxstyle,

package/es/DropBox/props/defaultProps.js

@@ -8,7 +8,6 @@ export const defaultProps = {
   needFocusScope: false,
   needAutoZindex: true
 };
-export const DropBoxDefaultProps = {
-  ...DropBoxElementDefaultProps,
+export const DropBoxDefaultProps = { ...DropBoxElementDefaultProps,
   ...defaultProps
 };

package/es/DropBox/props/propTypes.js

@@ -9,7 +9,6 @@ export const propTypes = {
   needFocusScope: PropTypes.bool,
   needAutoZindex: PropTypes.bool
 };
-export const DropBoxPropTypes = {
-  ...DropBoxElementPropTypes,
+export const DropBoxPropTypes = { ...DropBoxElementPropTypes,
   ...propTypes
 };

package/es/DropDown/DropDown.js

@@ -3,7 +3,6 @@ import { DropDown_propTypes, DropDownTarget_propTypes, DropDownContainer_propTyp
 import { DropDownItemContainer_defaultProps } from './props/defaultProps';
 import style from './DropDown.module.css';
 import PopOver, { PopOverTarget, PopOverContainer } from '../PopOver/PopOver';
-
 /* eslint css-modules/no-unused-class: [2, { markAsUsed: ['dropdown', 'shadow', 'target', 'menu', 'header', 'headertext', 'list', 'padding', 'listHover', 'active', 'children', 'user', 'footer', 'separator', 'small', 'search', 'medium', 'heading'] }] */
 
 export default class DropDown extends React.Component {
@@ -13,10 +12,9 @@ export default class DropDown extends React.Component {
     } = this.props;
     return /*#__PURE__*/React.createElement(PopOver, this.props, /*#__PURE__*/React.createElement(PopOverTarget, null, children[0]), /*#__PURE__*/React.createElement(PopOverContainer, null, children[1]));
   }
-}
-DropDown.propTypes = DropDown_propTypes;
 
-// if (__DOCS__) {
+}
+DropDown.propTypes = DropDown_propTypes; // if (__DOCS__) {
 //   DropDown.docs = {
 //     componentGroup: 'Form Elements',
 //     folderName: 'Style Guide'
@@ -30,6 +28,7 @@ export class DropDownTarget extends React.Component {
     } = this.props;
     return /*#__PURE__*/React.createElement("div", null, children);
   }
+
 }
 DropDownTarget.propTypes = DropDownTarget_propTypes;
 export class DropDownContainer extends React.Component {
@@ -39,6 +38,7 @@ export class DropDownContainer extends React.Component {
     } = this.props;
     return /*#__PURE__*/React.createElement("div", null, " ", children, " ");
   }
+
 }
 DropDownContainer.propTypes = DropDownContainer_propTypes;
 export class DropDownItemContainer extends React.Component {
@@ -47,18 +47,21 @@ export class DropDownItemContainer extends React.Component {
     this.getRef = this.getRef.bind(this);
     this.onScroll = this.onScroll.bind(this);
   }
+
   onScroll(e) {
     let {
       onScroll
     } = this.props;
     onScroll && onScroll(e);
   }
+
   getRef(ele) {
     let {
       getRef
     } = this.props;
     getRef && getRef(ele);
   }
+
   render() {
     let {
       children,
@@ -71,6 +74,7 @@ export class DropDownItemContainer extends React.Component {
       "data-id": dataId
     }, children);
   }
+
 }
 DropDownItemContainer.propTypes = DropDownItemContainer_propTypes;
 DropDownItemContainer.defaultProps = DropDownItemContainer_defaultProps;

package/es/DropDown/DropDown.module.css

@@ -1,5 +1,5 @@
 .listGroup {
-  max-height: var(--zd_size220);
+  max-height: 220px;
   composes: oflowy from '../common/common.module.css';
-  margin: var(--zd_size8) 0 var(--zd_size4);
+  margin: 8px 0 4px;
 }

package/es/DropDown/DropDownHeading.js

@@ -28,15 +28,14 @@ export default class DropDownHeading extends React.Component {
       "aria-label": ariaLabel,
       id: htmlId,
       "data-id": dataId,
-      "data-selector-id": dataSelectorId
-      // tabindex='0'
+      "data-selector-id": dataSelectorId // tabindex='0'
+
     }, text, children);
   }
+
 }
 DropDownHeading.propTypes = DropDownHeading_propTypes;
-DropDownHeading.defaultProps = DropDownHeading_defaultProps;
-
-// if (__DOCS__) {
+DropDownHeading.defaultProps = DropDownHeading_defaultProps; // if (__DOCS__) {
 //   DropDownHeading.docs = {
 //     componentGroup: 'Form Elements',
 //     folderName: 'Style Guide'

package/es/DropDown/DropDownHeading.module.css

@@ -2,20 +2,20 @@
   /* dropdownheading default variables */
   --dropdownheading_text_color: var(--zdt_dropdown_default_text);
   --dropdownheading_text_transform: uppercase;
-  --dropdownheading_padding: var(--zd_size10) var(--zd_size20);
+  --dropdownheading_padding: 10px 20px;
   --dropdownheading_bg_color: none;
 
   /* dropdownheading underline default variables */
-  --dropdownheading_underline_width: var(--zd_size20);
+  --dropdownheading_underline_width: 20px;
   --dropdownheading_underline_height: 1px;
   --dropdownheading_underline_bg_color: var(--zdt_dropdown_default_bg);
-  --dropdownheading_underline_left: var(--zd_size20);
+  --dropdownheading_underline_left: 20px;
 }
 .default {
   composes: dotted semibold from '../common/common.module.css';
   composes: varClass;
   position: relative;
-  font-size: var(--zd_font_size11);
+  font-size: 11px;
   letter-spacing: 0.6px;
   text-transform: var(--dropdownheading_text_transform);
   color: var(--dropdownheading_text_color);
@@ -25,7 +25,7 @@
 .default::after {
   position: absolute;
   content: '';
-  bottom: var(--zd_size2);
+  bottom: 2px;
   width: var(--dropdownheading_underline_width);
   height: var(--dropdownheading_underline_height);
 }

package/es/DropDown/DropDownItem.js

@@ -10,6 +10,7 @@ export default class DropDownItem extends React.Component {
     this.getSelectedElement = this.getSelectedElement.bind(this);
     this.onHover = this.onHover.bind(this);
   }
+
   getRef(ele) {
     this.ele = ele;
     let {
@@ -18,9 +19,11 @@ export default class DropDownItem extends React.Component {
     } = this.props;
     getRef && getRef(ele, index);
   }
+
   getSelectedElement() {
     return this.ele ? this.ele : null;
   }
+
   onClick(e) {
     let {
       onClick,
@@ -30,6 +33,7 @@ export default class DropDownItem extends React.Component {
     } = this.props;
     onClick && onClick(id, value, index, e);
   }
+
   onHover(e) {
     let {
       onHover,
@@ -39,6 +43,7 @@ export default class DropDownItem extends React.Component {
     } = this.props;
     onHover && onHover(id, value, index, e);
   }
+
   render() {
     let {
       value,
@@ -64,6 +69,7 @@ export default class DropDownItem extends React.Component {
       className: style.user
     }, " ", children[1], " ") : '');
   }
+
 }
 DropDownItem.propTypes = DropDownItem_propTypes;
 DropDownItem.defaultProps = DropDownItem_defaultProps;

package/es/DropDown/DropDownItem.module.css

@@ -1,11 +1,11 @@
 .varClass {
   /* dropdownitem default variables */
-  --dropdownitem-padding: var(--zd_size9) var(--zd_size19);
+  --dropdownitem-padding: 9px 19px;
   --dropdownitem-border-color: var(--zdt_dropdown_default_border);
   --dropdownitem-bg-color: var(--zdt_dropdown_mirror_bg);
 
   /* dropdownitem user default variables */
-  --dropdownitem-user-width: var(--zd_size42);
+  --dropdownitem-user-width: 42px;
   --dropdownitem-user-border-style: solid;
   --dropdownitem-user-border-color: var(--zdt_dropdown_user_default_border);
   --dropdownitem-user-cursor: pointer;
@@ -19,7 +19,7 @@
   composes: dflex alignVertical from '../common/common.module.css';
   position: relative;
   color: var(--zdt_dropdown_default_text);
-  font-size: var(--zd_font_size13);
+  font-size: 13px;
   padding: var(--dropdownitem-padding);
   border-style: solid;
   border-color: var(--dropdownitem-border-color);
@@ -42,11 +42,11 @@
 }
 
 [dir=ltr] .padding {
-  --dropdownitem-padding: 0 var(--zd_size50) 0 0/*rtl: 0 0 0 var(--zd_size50)*/;
+  --dropdownitem-padding: 0 50px 0 0/*rtl: 0 0 0 50px*/;
 }
 
 [dir=rtl] .padding {
-  --dropdownitem-padding: 0 0 0 var(--zd_size50);
+  --dropdownitem-padding: 0 0 0 50px;
 }
 
 .children {
@@ -55,11 +55,11 @@
 }
 
 [dir=ltr] .children {
-  margin-right: var(--zd_size10);
+  margin-right: 10px;
 }
 
 [dir=rtl] .children {
-  margin-left: var(--zd_size10);
+  margin-left: 10px;
 }
 
 .value {

package/es/DropDown/DropDownSearch.js

@@ -10,11 +10,13 @@ export default class DropDownSearch extends React.Component {
     super(props);
     this.getRef = this.getRef.bind(this);
   }
+
   componentDidMount() {
     this.input && this.input.focus({
       preventScroll: true
     });
   }
+
   getRef(ele) {
     let {
       getRef
@@ -22,6 +24,7 @@ export default class DropDownSearch extends React.Component {
     this.input = ele;
     getRef && getRef(ele);
   }
+
   render() {
     let {
       name,
@@ -56,6 +59,7 @@ export default class DropDownSearch extends React.Component {
       customClass: customTextBox
     }));
   }
+
 }
 DropDownSearch.defaultProps = DropDownSearch_defaultProps;
 DropDownSearch.propTypes = DropDownSearch_propTypes;

package/es/DropDown/DropDownSearch.module.css

@@ -1,14 +1,14 @@
 .varClass {
   /* dropdownsearch default variables */
-  --dropdownsearch-padding: 0 var(--zd_size15) 0;
+  --dropdownsearch-padding: 0 15px 0;
 }
 .search {
   composes: varClass;
   padding: var(--dropdownsearch-padding);
 }
 .smallSearch {
-  --dropdownsearch-padding: 0 var(--zd_size5) 0;
+  --dropdownsearch-padding: 0 5px 0;
 }
 .mediumSearch {
-  --dropdownsearch-padding: 0 var(--zd_size15) 0;
+  --dropdownsearch-padding: 0 15px 0;
 }

package/es/DropDown/DropDownSeparator.js

@@ -10,5 +10,6 @@ export default class DropDownSeparator extends React.Component {
       className: `${style.separator} ${customClass}`
     });
   }
+
 }
 DropDownSeparator.propTypes = DropDownSeparator_propTypes;

package/es/DropDown/DropDownSeparator.module.css

@@ -1,7 +1,7 @@
 .separator {
-  height: var(--zd_size1);
+  height: 1px;
   border-width: 0 0 1px 0;
   border-style: solid;
   border-color: var(--zdt_dropdown_user_default_border);
-  margin: var(--zd_size5) 0;
+  margin: 5px 0;
 }

package/es/DropDown/__tests__/DropDown.spec.js

@@ -1,6 +1,5 @@
 import React from 'react';
-import { DropDownItemContainer, DropDownContainer, DropDownTarget } from '../DropDown';
-// import renderer from 'react-test-renderer';
+import { DropDownItemContainer, DropDownContainer, DropDownTarget } from '../DropDown'; // import renderer from 'react-test-renderer';
 
 const defaultProps = {
   onScroll: jest.fn(),

package/es/Heading/Heading.js

@@ -23,11 +23,10 @@ export default class Heading extends React.Component {
       ...a11y
     }, title);
   }
+
 }
 Heading.propTypes = propTypes;
-Heading.defaultProps = defaultProps;
-
-// if (__DOCS__) {
+Heading.defaultProps = defaultProps; // if (__DOCS__) {
 //   Heading.docs = {
 //     folderName: 'Style Guide',
 //     componentGroup: 'Accessibility'

package/es/Heading/Heading.module.css

@@ -1,5 +1,5 @@
 .reset {
-  font-size: inherit;
+  font-size: initial;
   font-weight: initial;
   margin: initial;
 }

package/es/Label/Label.js

@@ -21,12 +21,8 @@ export default class Label extends React.Component {
       dataSelectorId,
       variant,
       customClass,
-      id,
-      a11y = {}
+      id
     } = this.props;
-    const {
-      tabIndex
-    } = a11y;
     return /*#__PURE__*/React.createElement("label", {
       className: `${style.label} ${style[type]} ${style[size]} ${colors[palette]} ${style[`font_${variant}`]}
           ${clipped ? style.dotted : ''} ${onClick ? style.pointer : style.cursor} ${customClass} `,
@@ -35,15 +31,13 @@ export default class Label extends React.Component {
       "data-id": dataId,
       "data-selector-id": dataSelectorId,
       onClick: onClick,
-      id: id,
-      tabIndex: tabIndex
+      id: id
     }, text);
   }
+
 }
 Label.defaultProps = defaultProps;
-Label.propTypes = propTypes;
-
-// if (__DOCS__) {
+Label.propTypes = propTypes; // if (__DOCS__) {
 //   Label.docs = {
 //     componentGroup: 'Form Elements',
 //     folderName: 'Style Guide'