@zohodesk/components 1.0.0-temp-199 → 1.0.0-temp-200

package/es/common/reset.module.css

@@ -1,13 +1,13 @@
-*,
-:after,
-:before {
-  outline: 0;
-  box-sizing: border-box;
-  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  -ms-box-sizing: border-box;
-}
-html {
-  /*  Variable:Ignore  */
-  font-size: 16px;
-}
+*,
+:after,
+:before {
+  outline: 0;
+  box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  -ms-box-sizing: border-box;
+}
+html {
+  /*  Variable:Ignore  */
+  font-size: 16px;
+}

package/es/common/transition.module.css

@@ -1,146 +1,146 @@
-.zoomInEnter,
-.zoomInLeave.zoomInLeaveActive {
-  opacity: 0;
-}.zoomInEnter, .zoomInLeave.zoomInLeaveActive {
-  transform: perspective(1px) scale(1.5) translateZ(0);
-  transition-duration: var(--zd_transition3);
-  transition-property: all;
-}
-.zoomInEnter.zoomInEnterActive,
-.zoomInLeave {
-  opacity: 1;
-}
-.zoomInEnter.zoomInEnterActive, .zoomInLeave {
-  transform: perspective(1px) scale(1) translateZ(0);
-  transition-duration: var(--zd_transition3);
-  transition-property: all;
-}
-
-.scaleInEnter,
-.scaleInLeave.scaleInLeaveActive {
-  opacity: 0;
-}
-
-.scaleInEnter, .scaleInLeave.scaleInLeaveActive {
-  transform: scale(0);
-  transition-duration: var(--zd_transition3);
-  transition-property: all;
-}
-.scaleInEnter.scaleInEnterActive,
-.scaleInLeave {
-  opacity: 1;
-}
-.scaleInEnter.scaleInEnterActive, .scaleInLeave {
-  transform: scale(1);
-  transition-duration: var(--zd_transition3);
-  transition-property: all;
-}
-
-.fadeInEnter,
-.fadeInLeave.fadeInLeaveActive {
-  opacity: 0;
-}
-
-.fadeInEnter, .fadeInLeave.fadeInLeaveActive {
-  transition-duration: var(--zd_transition3);
-  transition-property: all;
-}
-
-.fadeInEnter.fadeInEnterActive,
-.fadeInLeave {
-  opacity: 1;
-}
-
-.fadeInEnter.fadeInEnterActive, .fadeInLeave {
-  transition-duration: var(--zd_transition3);
-  transition-property: all;
-}
-
-.slideLeftEnter,
-.slideLeftLeave.slideLeftLeaveActive {
-  opacity: 0;
-}
-
-.slideLeftEnter, .slideLeftLeave.slideLeftLeaveActive {
-  transition-duration: var(--zd_transition3);
-  transition-property: all;
-}
-
-[dir=ltr] .slideLeftEnter, [dir=ltr] .slideLeftLeave.slideLeftLeaveActive {
-  transform: translateX(110%);
-}
-
-[dir=rtl] .slideLeftEnter, [dir=rtl] .slideLeftLeave.slideLeftLeaveActive {
-  transform: translateX(-110%);
-}
-
-.slideLeftEnter.slideLeftEnterActive,
-.slideLeftLeave {
-  opacity: 1;
-}
-
-.slideLeftEnter.slideLeftEnterActive, .slideLeftLeave {
-  transform: translateX(0%);
-  transition-duration: var(--zd_transition3);
-  transition-property: all;
-}
-
-.slideDownEnter,
-.slideDownLeave.slideDownLeaveActive {
-  opacity: 0;
-}
-
-.slideDownEnter, .slideDownLeave.slideDownLeaveActive {
-  transform: translateY(-100%);
-  transition-duration: var(--zd_transition3);
-  transition-property: all;
-}
-
-.slideDownEnter.slideDownEnterActive,
-.slideDownLeave {
-  opacity: 1;
-}
-
-.slideDownEnter.slideDownEnterActive, .slideDownLeave {
-  transform: translateY(0%);
-  transition-duration: var(--zd_transition3);
-  transition-property: all;
-}
-
-.skewInEnter,
-.skewInLeave.skewInLeaveActive {
-  opacity: 0;
-}
-
-.skewInEnter, .skewInLeave.skewInLeaveActive {
-  transition-duration: var(--zd_transition3);
-  transition-property: all;
-}
-
-[dir=ltr] .skewInEnter, [dir=ltr] .skewInLeave.skewInLeaveActive {
-  transform: translate(100%, 100%) skew(72deg) scale(0) perspective(221px);
-}
-
-[dir=rtl] .skewInEnter, [dir=rtl] .skewInLeave.skewInLeaveActive {
-  transform: translate(-100%, 100%) skew(-72deg) scale(0) perspective(221px);
-}
-
-.skewInEnter.skewInEnterActive,
-.skewInLeave {
-  opacity: 1;
-}
-
-.skewInEnter.skewInEnterActive, .skewInLeave {
-  transform: translate(0, 0) skew(0deg) scale(1) perspective(221px);
-  transition-duration: var(--zd_transition3);
-  transition-property: all;
-}
-
-.defaultEnter,
-.defaultLeave.defaultLeaveActive {
-  display: none;
-}
-.defaultEnter.defaultEnterActive,
-.defaultLeave {
-  display: block;
-}
+.zoomInEnter,
+.zoomInLeave.zoomInLeaveActive {
+  opacity: 0;
+}.zoomInEnter, .zoomInLeave.zoomInLeaveActive {
+  transform: perspective(1px) scale(1.5) translateZ(0);
+  transition-duration: var(--zd_transition3);
+  transition-property: all;
+}
+.zoomInEnter.zoomInEnterActive,
+.zoomInLeave {
+  opacity: 1;
+}
+.zoomInEnter.zoomInEnterActive, .zoomInLeave {
+  transform: perspective(1px) scale(1) translateZ(0);
+  transition-duration: var(--zd_transition3);
+  transition-property: all;
+}
+
+.scaleInEnter,
+.scaleInLeave.scaleInLeaveActive {
+  opacity: 0;
+}
+
+.scaleInEnter, .scaleInLeave.scaleInLeaveActive {
+  transform: scale(0);
+  transition-duration: var(--zd_transition3);
+  transition-property: all;
+}
+.scaleInEnter.scaleInEnterActive,
+.scaleInLeave {
+  opacity: 1;
+}
+.scaleInEnter.scaleInEnterActive, .scaleInLeave {
+  transform: scale(1);
+  transition-duration: var(--zd_transition3);
+  transition-property: all;
+}
+
+.fadeInEnter,
+.fadeInLeave.fadeInLeaveActive {
+  opacity: 0;
+}
+
+.fadeInEnter, .fadeInLeave.fadeInLeaveActive {
+  transition-duration: var(--zd_transition3);
+  transition-property: all;
+}
+
+.fadeInEnter.fadeInEnterActive,
+.fadeInLeave {
+  opacity: 1;
+}
+
+.fadeInEnter.fadeInEnterActive, .fadeInLeave {
+  transition-duration: var(--zd_transition3);
+  transition-property: all;
+}
+
+.slideLeftEnter,
+.slideLeftLeave.slideLeftLeaveActive {
+  opacity: 0;
+}
+
+.slideLeftEnter, .slideLeftLeave.slideLeftLeaveActive {
+  transition-duration: var(--zd_transition3);
+  transition-property: all;
+}
+
+[dir=ltr] .slideLeftEnter, [dir=ltr] .slideLeftLeave.slideLeftLeaveActive {
+  transform: translateX(110%);
+}
+
+[dir=rtl] .slideLeftEnter, [dir=rtl] .slideLeftLeave.slideLeftLeaveActive {
+  transform: translateX(-110%);
+}
+
+.slideLeftEnter.slideLeftEnterActive,
+.slideLeftLeave {
+  opacity: 1;
+}
+
+.slideLeftEnter.slideLeftEnterActive, .slideLeftLeave {
+  transform: translateX(0%);
+  transition-duration: var(--zd_transition3);
+  transition-property: all;
+}
+
+.slideDownEnter,
+.slideDownLeave.slideDownLeaveActive {
+  opacity: 0;
+}
+
+.slideDownEnter, .slideDownLeave.slideDownLeaveActive {
+  transform: translateY(-100%);
+  transition-duration: var(--zd_transition3);
+  transition-property: all;
+}
+
+.slideDownEnter.slideDownEnterActive,
+.slideDownLeave {
+  opacity: 1;
+}
+
+.slideDownEnter.slideDownEnterActive, .slideDownLeave {
+  transform: translateY(0%);
+  transition-duration: var(--zd_transition3);
+  transition-property: all;
+}
+
+.skewInEnter,
+.skewInLeave.skewInLeaveActive {
+  opacity: 0;
+}
+
+.skewInEnter, .skewInLeave.skewInLeaveActive {
+  transition-duration: var(--zd_transition3);
+  transition-property: all;
+}
+
+[dir=ltr] .skewInEnter, [dir=ltr] .skewInLeave.skewInLeaveActive {
+  transform: translate(100%, 100%) skew(72deg) scale(0) perspective(221px);
+}
+
+[dir=rtl] .skewInEnter, [dir=rtl] .skewInLeave.skewInLeaveActive {
+  transform: translate(-100%, 100%) skew(-72deg) scale(0) perspective(221px);
+}
+
+.skewInEnter.skewInEnterActive,
+.skewInLeave {
+  opacity: 1;
+}
+
+.skewInEnter.skewInEnterActive, .skewInLeave {
+  transform: translate(0, 0) skew(0deg) scale(1) perspective(221px);
+  transition-duration: var(--zd_transition3);
+  transition-property: all;
+}
+
+.defaultEnter,
+.defaultLeave.defaultLeaveActive {
+  display: none;
+}
+.defaultEnter.defaultEnterActive,
+.defaultLeave {
+  display: block;
+}

package/es/semantic/Button/__tests__/Button.spec.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import Button from '../Button';
+describe('Button', () => {
+  test('rendering the defult props', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Button, null));
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

package/es/semantic/Button/__tests__/__snapshots__/Button.spec.js.snap

@@ -0,0 +1,15 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Button rendering the defult props 1`] = `
+<DocumentFragment>
+  <button
+    class="buttonReset "
+    data-id="semanticButton"
+    data-test-id="semanticButton"
+    type="button"
+    value="text"
+  >
+    Button
+  </button>
+</DocumentFragment>
+`;

package/es/semantic/Button/semanticButton.module.css

@@ -1,9 +1,9 @@
-.buttonReset {
-  outline: 0;
-  font: inherit;
-  color: inherit;
-  border: inherit;
-  background-color: inherit;
-  padding: 0 ;
-  text-align: inherit;
-}
+.buttonReset {
+  outline: 0;
+  font: inherit;
+  color: inherit;
+  border: inherit;
+  background-color: inherit;
+  padding: 0 ;
+  text-align: inherit;
+}

package/es/v1/Avatar/Avatar.js

@@ -5,11 +5,11 @@ import { propTypes } from './props/propTypes';
 import { getInitial } from '../../utils/getInitial';
 import AvatarSize from '../../Provider/AvatarSize';
 import style from '../../Avatar/Avatar.module.css';
-/*
-1. need to change name into firstName lastName
-2. pattern support via context as well as props
-3. prop high priority to arrange firstName lastName
-4. team pass name as lastName and pass pattern via prop
+/*
+1. need to change name into firstName lastName
+2. pattern support via context as well as props
+3. prop high priority to arrange firstName lastName
+4. team pass name as lastName and pass pattern via prop
 */
 
 function Avatar(props) {

package/es/v1/AvatarTeam/AvatarTeam.js

@@ -3,10 +3,10 @@ import { defaultProps } from './props/defaultProps';
 import { propTypes } from './props/propTypes';
 import Avatar from '../Avatar/Avatar';
 import style from '../../AvatarTeam/AvatarTeam.module.css';
-/* once avatar support firstname lastname and pattern
-pass lastName as team name and pattern ["FIRST_NAME","LAST_NAME"] as props
-
-Not going to export to external then can kept inside supportapp
+/* once avatar support firstname lastname and pattern
+pass lastName as team name and pattern ["FIRST_NAME","LAST_NAME"] as props
+
+Not going to export to external then can kept inside supportapp
 */
 
 export default function AvatarTeam(props) {

package/es/v1/Button/Button.js

@@ -4,10 +4,10 @@ import { propTypes } from './props/propTypes';
 import cssJSLogic from '../../Button/css/cssJSLogic';
 import { mergeStyle } from '@zohodesk/utils';
 import style from '../../Button/css/Button.module.css';
-/*
-Button text and children props?
-use children for both cases
-toLowerCase check needed?
+/*
+Button text and children props?
+use children for both cases
+toLowerCase check needed?
 */
 
 export default function Button(props) {

package/es/v1/DropDown/DropDownSearch.js

@@ -16,7 +16,8 @@ export default function DropDownSearch(props) {
     textBoxSize,
     placeHolder,
     customClass,
-    getRef
+    getRef,
+    dataId
   } = props;
   let {
     searchClass = '',
@@ -48,7 +49,8 @@ export default function DropDownSearch(props) {
     size: textBoxSize,
     value: value,
     placeHolder: placeHolder,
-    customClass: customTextBox
+    customClass: customTextBox,
+    dataId: dataId
   }));
 }
 DropDownSearch.defaultProps = DropDownSearch_defaultProps;

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

@@ -16,5 +16,6 @@ export const DropDownItem_defaultProps = {
 export const DropDownSearch_defaultProps = {
   size: 'medium',
   textBoxSize: 'medium',
-  customClass: {}
+  customClass: {},
+  dataId: 'DropDownSearch'
 };

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

@@ -58,7 +58,8 @@ export const DropDownSearch_propTypes = {
   customClass: PropTypes.shape({
     searchClass: PropTypes.string,
     customTextBox: PropTypes.string
-  })
+  }),
+  dataId: PropTypes.string
 };
 export const DropDownSeparator_propTypes = {
   customClass: PropTypes.string

package/es/v1/ListItem/ListItemWithCheckBox.js

@@ -84,7 +84,8 @@ const ListItemWithCheckBox = props => {
     customClass: {
       customCheckBox: customCheckBox,
       customLabel: customLabel
-    }
+    },
+    dataId: `${dataId}_checkBox`
   })), /*#__PURE__*/React.createElement(Box, {
     flexible: true,
     shrink: true,

package/es/v1/ListItem/ListItemWithRadio.js

@@ -85,7 +85,8 @@ const ListItemWithRadio = props => {
     customClass: {
       customRadio: customRadio,
       customRadioWrap: customRadioWrap
-    }
+    },
+    dataId: `${dataId}_radio`
   })), /*#__PURE__*/React.createElement(Box, {
     flexible: true,
     shrink: true,

package/es/v1/MultiSelect/AdvancedGroupMultiSelect.js

@@ -925,7 +925,8 @@ class AdvancedGroupMultiSelect extends React.Component {
       getRef: this.selectedOptionRef,
       onRemove: this.handleRemoveOption,
       onSelect: this.handleClickSelectedOption,
-      isGroupSelect: true
+      isGroupSelect: true,
+      dataId: `${dataId}_selectedOptions`
     }), /*#__PURE__*/React.createElement(Box, {
       flexible: true,
       className: style.wrapper,
@@ -999,7 +1000,8 @@ class AdvancedGroupMultiSelect extends React.Component {
           role: 'listbox',
           ariaMultiselectable: true
         },
-        alignBox: "row"
+        alignBox: "row",
+        dataId: `${dataId}_dropbox`
       }, /*#__PURE__*/React.createElement(Box, {
         flexible: true
       }, /*#__PURE__*/React.createElement(Card, {
@@ -1043,7 +1045,8 @@ class AdvancedGroupMultiSelect extends React.Component {
           listItemSize: listItemSize,
           a11y: {
             role: 'option'
-          }
+          },
+          dataId: `${dataId}_Options`
         }));
       }) : /*#__PURE__*/React.createElement(EmptyState, {
         options: revampedGroups,

package/es/v1/MultiSelect/AdvancedMultiSelect.js

@@ -429,7 +429,8 @@ export class AdvancedMultiSelectComponent extends MultiSelectComponent {
       isReadOnly: isReadOnly,
       getRef: this.selectedOptionRef,
       onRemove: this.handleRemoveOption,
-      onSelect: this.handleClickSelectedOption
+      onSelect: this.handleClickSelectedOption,
+      dataId: `${dataId}_selectedOptions`
     }), moreCount > 0 ? /*#__PURE__*/React.createElement(Box, {
       className: style.more,
       onClick: this.handleMoreClick,
@@ -455,6 +456,7 @@ export class AdvancedMultiSelectComponent extends MultiSelectComponent {
       size: textBoxSize,
       value: searchStr,
       variant: variant,
+      dataId: `${dataId}_textBox`,
       isReadOnly: isReadOnly,
       tabindex: isDisabled && '-1',
       customClass: {
@@ -505,6 +507,7 @@ export class AdvancedMultiSelectComponent extends MultiSelectComponent {
           role: 'listbox',
           ariaMultiselectable: true
         },
+        dataId: `${dataId}_dropbox`,
         ...DropBoxProps,
         alignBox: "row",
         isResponsivePadding: getFooter ? false : true
@@ -537,6 +540,7 @@ export class AdvancedMultiSelectComponent extends MultiSelectComponent {
         a11y: {
           role: 'option'
         },
+        dataId: `${dataId}_Options`,
         ...SuggestionsProps
       }) : /*#__PURE__*/React.createElement(EmptyState, {
         isLoading: isFetchingOptions,

package/es/v1/MultiSelect/MultiSelect.js

@@ -321,8 +321,8 @@ export class MultiSelectComponent extends React.Component {
     if (suggestionsLen && isPopupOpen && keyCode === 38) {
       //up arrow
 
-      /*if (hoverOption === 0) { //disable first to last option higlight
-        !isNextOptions && this.setState({ hoverOption: suggestionsLen - 1 });
+      /*if (hoverOption === 0) { //disable first to last option higlight
+        !isNextOptions && this.setState({ hoverOption: suggestionsLen - 1 });
       }*/
       if (hoverOption) {
         this.setState({
@@ -332,9 +332,9 @@ export class MultiSelectComponent extends React.Component {
     } else if (suggestionsLen && isPopupOpen && keyCode === 40) {
       //down arrow
 
-      /*else if (hoverOption === suggestionsLen - 1 || hoverOption === null) {
-        //disable last to first option higlight
-        !isNextOptions && this.setState({ hoverOption: 0 });
+      /*else if (hoverOption === suggestionsLen - 1 || hoverOption === null) {
+        //disable last to first option higlight
+        !isNextOptions && this.setState({ hoverOption: 0 });
       }*/
       if (isNextOptions && suggestionsLen >= 5 && hoverOption === suggestionsLen - 3) {
         getNextOptions && this.handleFetchOptions(getNextOptions, searchStr);
@@ -901,7 +901,8 @@ export class MultiSelectComponent extends React.Component {
       onRemove: this.handleRemoveOption,
       onSelect: this.handleClickSelectedOption,
       size: size,
-      palette: palette
+      palette: palette,
+      dataId: `${dataId}_selectedOptions`
     }), /*#__PURE__*/React.createElement(Box, {
       flexible: true,
       className: style.wrapper,
@@ -1039,7 +1040,8 @@ export class MultiSelectComponent extends React.Component {
       },
       size: boxSize,
       alignBox: "row",
-      isResponsivePadding: getFooter ? false : true
+      isResponsivePadding: getFooter ? false : true,
+      dataId: `${dataId}_dropbox`
     }, /*#__PURE__*/React.createElement(Box, {
       flexible: true
     }, /*#__PURE__*/React.createElement(Card, {

package/es/v1/MultiSelect/MultiSelectWithAvatar.js

@@ -134,7 +134,8 @@ class MultiSelectWithAvatarComponent extends MultiSelectComponent {
         role: 'listbox'
       },
       isResponsivePadding: true,
-      alignBox: "row"
+      alignBox: "row",
+      dataId: `${dataId}_dropbox`
     }, /*#__PURE__*/React.createElement(Box, {
       flexible: true
     }, /*#__PURE__*/React.createElement(Card, {

package/es/v1/MultiSelect/SelectedOptions.js

@@ -21,7 +21,8 @@ export default class SelectedOptions extends React.PureComponent {
       onRemove,
       onSelect,
       size,
-      palette
+      palette,
+      dataId
     } = this.props;
     const isDarkPalette = palette === 'dark' ? 'dark' : 'danger';
     return /*#__PURE__*/React.createElement(React.Fragment, null, selectedOptions.map(option => {
@@ -43,7 +44,8 @@ export default class SelectedOptions extends React.PureComponent {
         getRef: getRef,
         initial: value,
         id: id,
-        isReadOnly: isReadOnly
+        isReadOnly: isReadOnly,
+        dataId: dataId
       };
 
       if (optionType === 'avatar') {

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

@@ -149,7 +149,8 @@ export const MultiSelectWithAvatar_defaultProps = {
   needResponsive: true
 };
 export const SelectedOptions_defaultProps = {
-  size: 'medium'
+  size: 'medium',
+  dataId: 'selectedOptions'
 };
 export const Suggestions_defaultProps = {
   a11y: {}

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

@@ -139,7 +139,8 @@ export const SelectedOptions_propTypes = {
     optionType: PropTypes.string
   })),
   size: PropTypes.oneOf(['medium', 'xmedium']),
-  palette: PropTypes.string
+  palette: PropTypes.string,
+  dataId: PropTypes.string
 };
 export const Suggestions_propTypes = {
   a11y: PropTypes.shape({

package/es/v1/Select/SelectWithAvatar.js

@@ -238,7 +238,8 @@ class SelectWithAvatarComponent extends SelectComponent {
       isClickable: isReadOnly || isDisabled ? false : true,
       borderColor: borderColor,
       htmlId: htmlId,
-      autoComplete: false
+      autoComplete: false,
+      dataId: `${dataId}_textBox`
     }))), !isReadOnly && !isDisabled && isPopupOpen ? /*#__PURE__*/React.createElement(ResponsiveReceiver, {
       query: this.responsiveFunc,
       responsiveId: "Helmet"
@@ -257,7 +258,8 @@ class SelectWithAvatarComponent extends SelectComponent {
         needResponsive: needResponsive,
         isPadding: false,
         isResponsivePadding: true,
-        alignBox: "row"
+        alignBox: "row",
+        dataId: `${dataId}_dropbox`
       }, isLoading ? /*#__PURE__*/React.createElement(Container, {
         align: "both",
         className: style.loader
@@ -295,6 +297,7 @@ class SelectWithAvatarComponent extends SelectComponent {
           role: 'heading'
         }
       })) : null, suggestions.length ? /*#__PURE__*/React.createElement(Suggestions, {
+        dataId: `${dataId}_Options`,
         activeId: selectedId,
         suggestions: suggestions,
         getRef: this.suggestionItemRef,