@zohodesk/components 1.0.0-temp-182 → 1.0.0-temp-183

package/README.md

@@ -32,11 +32,6 @@ In this Package, we Provide Some Basic Components to Build Web App
 - TextBoxIcon
 - Tooltip
 
-# 1.2.X
-
-- **v1/Tabs** - converted to functional component
-- **SelectedOptions** - customProps option provided for Tags
-
 # 1.2.20
 
 - **Avatar, ListContainer, Suggestions, Select, Switch** - Accessibility issue fixes.

package/es/Accordion/Accordion.js

@@ -9,22 +9,18 @@ export default class Accordion extends React.Component {
     };
     this.selectMenu = this.selectMenu.bind(this);
   }
-
   selectMenu(selectedItem) {
     let {
       onSelect,
       disableInternalState
     } = this.props;
-
     if (onSelect) {
       onSelect(selectedItem);
     }
-
     !disableInternalState && this.setState({
       selectedItem
     });
   }
-
   componentWillReceiveProps(nextProps) {
     if (this.props.selectedItem !== nextProps.selectedItem && !this.props.disableInternalState) {
       this.setState({
@@ -32,7 +28,6 @@ export default class Accordion extends React.Component {
       });
     }
   }
-
   render() {
     let {
       className,
@@ -74,10 +69,11 @@ export default class Accordion extends React.Component {
       "data-selector-id": dataSelectorId
     }, children);
   }
-
 }
 Accordion.propTypes = Accordion_propTypes;
-Accordion.defaultProps = Accordion_defaultProps; // if (__DOCS__) {
+Accordion.defaultProps = Accordion_defaultProps;
+
+// if (__DOCS__) {
 //   Accordion.docs = {
 //     componentGroup: 'Animation',
 //     folderName: 'Style Guide'

package/es/Accordion/AccordionItem.js

@@ -8,7 +8,6 @@ export default class AccordionItem extends React.Component {
     super(props);
     this.equalityCheck = this.equalityCheck.bind(this);
   }
-
   equalityCheck() {
     let {
       equalityCheck,
@@ -17,7 +16,6 @@ export default class AccordionItem extends React.Component {
     } = this.props;
     return equalityCheck ? equalityCheck(id, selectedItem) : selectedItem == id;
   }
-
   render() {
     let {
       id,
@@ -52,10 +50,10 @@ export default class AccordionItem extends React.Component {
       isActive: this.equalityCheck()
     }, children[1]));
   }
-
 }
 AccordionItem.propTypes = AccordionItem_propTypes;
-AccordionItem.defaultProps = AccordionItem_defaultProps; // if (__DOCS__) {
+AccordionItem.defaultProps = AccordionItem_defaultProps;
+// if (__DOCS__) {
 //   AccordionItem.docs = {
 //     componentGroup: 'Animation',
 //     folderName: 'Style Guide'

package/es/Animation/Animation.js

@@ -7,7 +7,6 @@ export default class Animation extends React.Component {
   constructor(props) {
     super(props);
   }
-
   render() {
     let {
       name,
@@ -121,10 +120,11 @@ export default class Animation extends React.Component {
       onExit: onExit
     }, /*#__PURE__*/React.createElement(React.Fragment, null, children));
   }
-
 }
 Animation.propTypes = propTypes;
-Animation.defaultProps = defaultProps; // if (__DOCS__) {
+Animation.defaultProps = defaultProps;
+
+// if (__DOCS__) {
 //   Animation.docs = {
 //     componentGroup: 'Animation',
 //     folderName: 'Style Guide',

package/es/AppContainer/AppContainer.js

@@ -1,5 +1,4 @@
 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 from 'react';
 import { defaultProps } from './props/defaultProps';
 import { propTypes } from './props/propTypes';
@@ -31,27 +30,22 @@ export default class AppContainer extends React.Component {
       getTooltipContainer: () => this.containerElement
     });
   }
-
   mouseOverDispatch(e) {
     if (this.tooltipRef) {
       this.tooltipRef.handleOver(e, this.containerElement);
     }
   }
-
   removeTimeout() {
     if (this.timer) {
       this.timer = clearTimeout(this.timer);
     }
   }
-
   handleOver(e) {
     if (this.timer) {
       this.timer = clearTimeout(this.timer);
     }
-
     this.timer = setTimeout(() => this.mouseOverDispatch(e), this.tooltipDebounce);
   }
-
   getContainerRef(ref) {
     let {
       eleRef
@@ -59,28 +53,23 @@ export default class AppContainer extends React.Component {
     this.containerElement = ref;
     eleRef && eleRef(ref);
   }
-
   setTooltipRef(ref) {
     this.tooltipRef = ref;
   }
-
   componentDidMount() {
     let {
       needTooltip
     } = this.props;
-
     if (this.containerElement && needTooltip) {
       this.containerElement.addEventListener('mouseover', this.handleOver, false);
       this.containerElement.addEventListener('mouseout', this.removeTimeout, false);
       this.tooltipRef.observeElement();
     }
   }
-
   componentWillUnmount() {
     let {
       needTooltip
     } = this.props;
-
     if (this.containerElement && needTooltip) {
       this.containerElement.removeEventListener('mouseover', this.handleOver, false);
       this.containerElement.addEventListener('mouseout', this.removeTimeout, false);
@@ -90,7 +79,6 @@ export default class AppContainer extends React.Component {
       });
     }
   }
-
   render() {
     let {
       className,
@@ -126,10 +114,11 @@ export default class AppContainer extends React.Component {
       customClass: tooltipClass
     }, TooltipProps))) : null);
   }
-
 }
 AppContainer.propTypes = propTypes;
-AppContainer.defaultProps = defaultProps; // if (__DOCS__) {
+AppContainer.defaultProps = defaultProps;
+
+// if (__DOCS__) {
 //   AppContainer.docs = {
 //     componentGroup: 'Template',
 //     folderName: 'Style Guide'

package/es/AppContainer/AppContainer.module.css

@@ -12,7 +12,7 @@
   font-family: var(--zd_regular);
 }
 .tooltip {
-  height: 0 ;
-  font-size: 0 ;
+  height: 0;
+  font-size: 0;
   /* contain:strict */
 }

package/es/Avatar/Avatar.js

@@ -1,5 +1,4 @@
 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 from 'react';
 import { defaultProps } from './props/defaultProps';
 import { propTypes } from './props/propTypes';
@@ -18,7 +17,6 @@ eslint css-modules/no-unused-class: [2, { markAsUsed: ['circle', 'square',
 'small','medium','xmedium',"xsmall", "large", "xlarge", "primary", "secondary",
 "info","default"] }]
 */
-
 export default class Avatar extends React.Component {
   constructor(props) {
     super(props);
@@ -29,7 +27,6 @@ export default class Avatar extends React.Component {
     this.putValidImageURLJSON = this.putValidImageURLJSON.bind(this);
     this.getInitialByFullName = this.getInitialByFullName.bind(this);
   }
-
   componentDidUpdate(prevProps, prevState) {
     let {
       src
@@ -37,14 +34,12 @@ export default class Avatar extends React.Component {
     let {
       isLoaded
     } = this.state;
-
     if (prevProps.src !== src) {
       this.setState({
         isLoaded: !isLoaded
       });
     }
   }
-
   putInvalidImageURLJSON() {
     const {
       src,
@@ -54,25 +49,23 @@ export default class Avatar extends React.Component {
       isLoaded
     } = this.state;
     let _validImgArr = [...Avatar.validImageURLs];
-    let _invalidImgArr = [...Avatar.invalidImageURLs]; // if (alternateSrc) {
+    let _invalidImgArr = [...Avatar.invalidImageURLs];
+
+    // if (alternateSrc) {
     //   _validImgArr.push(alternateSrc);
     // }
 
     const validIndex = _validImgArr.indexOf(src);
-
     if (validIndex !== -1) {
       _validImgArr.splice(validIndex, 1);
     }
-
     _invalidImgArr.push(src);
-
     Avatar.invalidImageURLs = _invalidImgArr;
     Avatar.validImageURLs = _validImgArr;
     this.setState({
       isLoaded: !isLoaded
     });
   }
-
   putValidImageURLJSON() {
     const {
       src
@@ -82,32 +75,28 @@ export default class Avatar extends React.Component {
     } = this.state;
     const validImgArr = Avatar.validImageURLs;
     const invalidImgArr = Avatar.invalidImageURLs;
-
     if (src && validImgArr.indexOf(src) === -1 && invalidImgArr.indexOf(src) === -1) {
       let _validImgArr = [...validImgArr];
-
       _validImgArr.push(src);
-
       Avatar.validImageURLs = _validImgArr;
       this.setState({
         isLoaded: !isLoaded
       });
     }
   }
-  /* this will cause error if user name already have some space need to move firstName lastName user preference pattern*/
-
 
+  /* this will cause error if user name already have some space need to move firstName lastName user preference pattern*/
   getInitialByFullName() {
     let fullName = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
     fullName = (fullName || '').trim();
     let nameList = fullName.split(' ');
-
     if (nameList.length === 1) {
       return getInitial('', nameList[0]);
     }
-
     return getInitial(nameList[0], nameList[1]);
-  } // componentDidMount() {
+  }
+
+  // componentDidMount() {
   //   const { src } = this.props;
   //   const validImgArr = Avatar.validImageURLs;
   //   if (validImgArr.indexOf(src) === -1) {
@@ -116,7 +105,6 @@ export default class Avatar extends React.Component {
   //   }
   // }
 
-
   render() {
     let {
       src,
@@ -147,8 +135,8 @@ export default class Avatar extends React.Component {
     let textStyle = textPalette ? style[textPalette] : palette === 'secondary' ? style.white : style.black;
     let shapeStyle = shape === 'circle' ? 'circle' : `square_${size}`;
     initial = initial || this.getInitialByFullName(name);
-    let isInvalidImageList = Avatar.invalidImageURLs.indexOf(src) !== -1; //let isValidImageList = Avatar.validImageURLs.indexOf(src) !== -1;
-
+    let isInvalidImageList = Avatar.invalidImageURLs.indexOf(src) !== -1;
+    //let isValidImageList = Avatar.validImageURLs.indexOf(src) !== -1;
     let showAvatar = src && !isInvalidImageList;
     let showInitial = !showAvatar || showAvatar && isInvalidImageList;
     const showAlternateAvatar = alternateSrc ? showInitial : false;
@@ -183,12 +171,12 @@ export default class Avatar extends React.Component {
       className: `${style.shadow} ${textStyle} `
     })));
   }
-
 }
 Avatar.defaultProps = defaultProps;
 Avatar.propTypes = propTypes;
 Avatar.invalidImageURLs = [];
-Avatar.validImageURLs = []; // if (__DOCS__) {
+Avatar.validImageURLs = [];
+// if (__DOCS__) {
 //   Avatar.docs = {
 //     componentGroup: 'Avatar Group',
 //     folderName: 'Style Guide'

package/es/Avatar/Avatar.module.css

@@ -1,7 +1,7 @@
 .varClass {
   /* avatar default variables */
   --avatar_text_color: var(--zdt_avatar_default_text);
-  --avatar_font_size: var(--zd_font_size14);
+  --avatar_font_size: 14px;
   --avatar_bg_color: var(--zdt_avatar_default_bg);
   --avatar_border_radius: 50%;
   --avatar_border_width: 0;
@@ -49,19 +49,19 @@
 
 .shadow {
   position: absolute;
-  height: 100% ;
-  width: 100% ;
-  top: 0 ;
+  height: 100%;
+  width: 100%;
+  top: 0;
   pointer-events: none;
   border-radius: var(--avatar_border_radius);
 }
 
 [dir=ltr] .shadow {
-  left: 0 ;
+  left: 0;
 }
 
 [dir=rtl] .shadow {
-  right: 0 ;
+  right: 0;
 }
 
 .shadow.black {
@@ -81,20 +81,20 @@
 }
 
 .image {
-  width: 100% ;
-  height: 100% ;
+  width: 100%;
+  height: 100%;
   position: absolute;
-  top: 0 ;
+  top: 0;
   z-index: 0;
   border-radius: var(--avatar_border_radius);
 }
 
 [dir=ltr] .image {
-  left: 0 ;
+  left: 0;
 }
 
 [dir=rtl] .image {
-  right: 0 ;
+  right: 0;
 }
 
 .animate {
@@ -153,31 +153,31 @@
 }
 
 .xxsmall {
-  --avatar_font_size: var(--zd_font_size8);
+  --avatar_font_size: 8px;
 }
 
 .small {
-  --avatar_font_size: var(--zd_font_size9);
+  --avatar_font_size: 9px;
 }
 
 .xsmall {
-  --avatar_font_size: var(--zd_font_size12);
+  --avatar_font_size: 12px;
 }
 
 .medium {
-  --avatar_font_size: var(--zd_font_size14);
+  --avatar_font_size: 14px;
 }
 
 .xmedium {
-  --avatar_font_size: var(--zd_font_size14);
+  --avatar_font_size: 14px;
 }
 
 .large {
-  --avatar_font_size: var(--zd_font_size18);
+  --avatar_font_size: 18px;
 }
 
 .xlarge {
-  --avatar_font_size: var(--zd_font_size28);
+  --avatar_font_size: 28px;
 }
 
 .white {

package/es/AvatarTeam/AvatarTeam.js

@@ -1,5 +1,4 @@
 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 from 'react';
 import { defaultProps } from './props/defaultProps';
 import { propTypes } from './props/propTypes';
@@ -72,10 +71,11 @@ export default class AvatarTeam extends React.Component {
           ${style[`${size}team`]} ${customAvatarTeam}`
     }));
   }
-
 }
 AvatarTeam.defaultProps = defaultProps;
-AvatarTeam.propTypes = propTypes; // if (__DOCS__) {
+AvatarTeam.propTypes = propTypes;
+
+// if (__DOCS__) {
 //   AvatarTeam.docs = {
 //     componentGroup: 'Avatar Group',
 //     folderName: 'Style Guide',

package/es/AvatarTeam/AvatarTeam.module.css

@@ -7,18 +7,18 @@
   --avatarteam_outline_style: solid;
   --avatarteam_outline_color: var(--zdt_avatarteam_innerCircle);
   --avatarteam_bg_color: var(--zdt_avatarteam_default_bg);
-  --avatarteam_width: var(--zd_size5);
-  --avatarteam_height: var(--zd_size5);
+  --avatarteam_width: 5px;
+  --avatarteam_height: 5px;
   --avatarteam_border_radius: 50%;
   --avatarteam_bottom_top: initial;
   --avatarteam_bottom_left: initial;
   --avatarteam_bottom_right: initial;
-  --avatarteam_top_top: var(--zd_size1);
+  --avatarteam_top_top: 1px;
 }
 .container {
   position: relative;
   display: inline-block;
-  font-size: 0 ;
+  font-size: 0;
   vertical-align: middle;
 }
 .team {
@@ -40,11 +40,11 @@
 }
 [dir=ltr] .team {
   transform: translate(-50%, -50%);
-  left: 50% ;
+  left: 50%;
 }
 [dir=rtl] .team {
   transform: translate(50%, -50%);
-  right: 50% ;
+  right: 50%;
 }
 .nofill {
   --avatarteam_border_color: var(--zdt_avatarteam_nofill_hover_border);
@@ -70,8 +70,8 @@
 .team:before {
   position: absolute;
   content: '';
-  height: inherit ;
-  width: inherit ;
+  height: inherit;
+  width: inherit;
   top: var(--avatarteam_bottom_top);
   outline-width: var(--avatarteam_outline_width);
   outline-style: var(--avatarteam_outline_style);
@@ -94,18 +94,18 @@
 .smallteam,
 .xsmallteam,
 .xxsmallteam {
-  --avatarteam_height: var(--zd_size3);
-  --avatarteam_width: var(--zd_size3);
+  --avatarteam_height: 3px;
+  --avatarteam_width: 3px;
 }
 .mediumteam,
 .xmediumteam {
-  --avatarteam_height: var(--zd_size5);
-  --avatarteam_width: var(--zd_size5);
+  --avatarteam_height: 5px;
+  --avatarteam_width: 5px;
 }
 .largeteam,
 .xlargeteam {
-  --avatarteam_height: var(--zd_size7);
-  --avatarteam_width: var(--zd_size7);
+  --avatarteam_height: 7px;
+  --avatarteam_width: 7px;
 }
 
 .xxsmallteam {
@@ -114,78 +114,78 @@
 }
 .xxsmallteam::after,
 .xxsmallteam:before {
-  --avatarteam_bottom_top: var(--zd_size13);
+  --avatarteam_bottom_top: 13px;
 }
 .xxsmallteam:after {
-  --avatarteam_bottom_left: calc( var(--zd_size8) * -1 );
+  --avatarteam_bottom_left: -8px;
 }
 .xxsmallteam:before {
-  --avatarteam_bottom_right: calc( var(--zd_size8) * -1 );
+  --avatarteam_bottom_right: -8px;
 }
 
 
 .smallteam::after,
 .smallteam:before {
-  --avatarteam_bottom_top: var(--zd_size17);
+  --avatarteam_bottom_top: 17px;
 }
 .smallteam:after {
-  --avatarteam_bottom_left: calc( var(--zd_size8) * -1 );
+  --avatarteam_bottom_left: -8px;
 }
 .smallteam:before {
-  --avatarteam_bottom_right: calc( var(--zd_size8) * -1 );
+  --avatarteam_bottom_right: -8px;
 }
 
 .xsmallteam::after,
 .xsmallteam:before {
-  --avatarteam_bottom_top: var(--zd_size24);
+  --avatarteam_bottom_top: 24px;
 }
 .xsmallteam:after {
-  --avatarteam_bottom_left: calc( var(--zd_size10) * -1 );
+  --avatarteam_bottom_left: -10px;
 }
 .xsmallteam:before {
-  --avatarteam_bottom_right: calc( var(--zd_size10) * -1 );
+  --avatarteam_bottom_right: -10px;
 }
 
 .mediumteam::after,
 .mediumteam:before {
-  --avatarteam_bottom_top: var(--zd_size26);
+  --avatarteam_bottom_top: 26px;
 }
 .mediumteam:after {
-  --avatarteam_bottom_left: calc( var(--zd_size13) * -1 );
+  --avatarteam_bottom_left: -13px;
 }
 .mediumteam:before {
-  --avatarteam_bottom_right: calc( var(--zd_size13) * -1 );
+  --avatarteam_bottom_right: -13px;
 }
 
 .xmediumteam::after,
 .xmediumteam:before {
-  --avatarteam_bottom_top: var(--zd_size30);
+  --avatarteam_bottom_top: 30px;
 }
 .xmediumteam:after {
-  --avatarteam_bottom_left: calc( var(--zd_size16) * -1 );
+  --avatarteam_bottom_left: -16px;
 }
 .xmediumteam:before {
-  --avatarteam_bottom_right: calc( var(--zd_size16) * -1 );
+  --avatarteam_bottom_right: -16px;
 }
 
 .largeteam::after,
 .largeteam:before {
-  --avatarteam_bottom_top: var(--zd_size46);
+  --avatarteam_bottom_top: 46px;
 }
 .largeteam:after {
-  --avatarteam_bottom_left: calc( var(--zd_size24) * -1 );
+  --avatarteam_bottom_left: -24px;
 }
 .largeteam:before {
-  --avatarteam_bottom_right: calc( var(--zd_size24) * -1 );
+  --avatarteam_bottom_right: -24px;
 }
 
 .xlargeteam::after,
 .xlargeteam:before {
-  --avatarteam_bottom_top: var(--zd_size65);
+  --avatarteam_bottom_top: 65px;
 }
 .xlargeteam:after {
-  --avatarteam_bottom_left: calc( var(--zd_size29) * -1 );
+  --avatarteam_bottom_left: -29px;
 }
 .xlargeteam:before {
-  --avatarteam_bottom_right: calc( var(--zd_size29) * -1 );
+  --avatarteam_bottom_right: -29px;
 }

package/es/AvatarTeam/__tests__/AvatarTeam.spec.js

@@ -69,8 +69,9 @@ describe('AvatarTeam', () => {
   });
   test('rendering the onClick prop with asFragment and toMatchSnapshot', () => {
     // Define an onClick mock function
-    const onClickMock = jest.fn(); // Render the Label component with the onClick prop
+    const onClickMock = jest.fn();
 
+    // Render the Label component with the onClick prop
     const {
       asFragment
     } = render( /*#__PURE__*/React.createElement(AvatarTeam, {

package/es/Button/Button.js

@@ -1,5 +1,4 @@
 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 from 'react';
 import { defaultProps } from './props/defaultProps';
 import { propTypes } from './props/propTypes';
@@ -11,9 +10,7 @@ Button text and children props?
 use children for both cases
 toLowerCase check needed?
 */
-
 /* eslint css-modules/no-unused-class: [2, { markAsUsed: ['small','medium','large','xlarge','button_medium','button_small','primary','primaryfilled','danger','dangerfilled','plainprimary', 'plainsecondary', 'secondary', 'secondaryfilled', 'successFilled','tertiaryFilled'] }] */
-
 export default function Button(props) {
   let {
     text,
@@ -62,7 +59,9 @@ export default function Button(props) {
   }))));
 }
 Button.defaultProps = defaultProps;
-Button.propTypes = propTypes; // if (__DOCS__) {
+Button.propTypes = propTypes;
+
+// if (__DOCS__) {
 //   Button.docs = {
 //     componentGroup: 'Form Elements',
 //     folderName: 'Style Guide'