@zohodesk/components 1.0.0-alpha-256 → 1.0.0-alpha-258

package/es/DateTime/DateWidget.js

@@ -920,7 +920,9 @@ class DateWidgetComponent extends React.Component {
       targetOffset,
       isRestrictScroll,
       dropBoxPortalId,
-      a11y
+      a11y,
+      boxSize,
+      onError
     } = this.props;
     const {
       selected: value = '',
@@ -1006,7 +1008,9 @@ class DateWidgetComponent extends React.Component {
       positionsOffset: positionsOffset,
       targetOffset: targetOffset,
       isRestrictScroll: isRestrictScroll,
-      dropBoxPortalId: dropBoxPortalId
+      dropBoxPortalId: dropBoxPortalId,
+      boxSize: boxSize,
+      onError: onError
     }));
   }
 }
@@ -1016,14 +1020,15 @@ const DateWidget = Popup(DateWidgetComponent);
 DateWidget.defaultProps = DateWidgetComponent.defaultProps;
 
 // eslint-disable-next-line no-undef
-if (false) {
-  DateWidgetComponent.docs = {
-    componentGroup: 'Form Elements',
-    folderName: 'Style Guide',
-    external: true,
-    description: ' '
-  };
-  // eslint-disable-next-line react/forbid-foreign-prop-types
-  DateWidget.propTypes = DateWidgetComponent.propTypes;
-}
+// if (__DOCS__) {
+//   DateWidgetComponent.docs = {
+//     componentGroup: 'Form Elements',
+//     folderName: 'Style Guide',
+//     external: true,
+//     description: ' '
+//   };
+//   // eslint-disable-next-line react/forbid-foreign-prop-types
+//   DateWidget.propTypes = DateWidgetComponent.propTypes;
+// }
+
 export default DateWidget;

package/es/DateTime/props/propTypes.js

@@ -121,7 +121,9 @@ export const DateWidget_propTypes = {
   is24Hour: PropTypes.bool,
   isHideCurrentYear: PropTypes.bool,
   onFocus: PropTypes.func,
-  onBlur: PropTypes.func
+  onBlur: PropTypes.func,
+  boxSize: PropTypes.string,
+  onError: PropTypes.func
 };
 export const YearView_propTypes = {
   dataId: PropTypes.string,

package/es/DropBox/DropBox.js

@@ -46,6 +46,7 @@ export class DropBoxElement extends React.Component {
       animationStyle,
       isActive,
       dataId,
+      dataSelectorId,
       isModel,
       isAbsolutePositioningNeeded,
       tourId,
@@ -138,6 +139,7 @@ export class DropBoxElement extends React.Component {
     return /*#__PURE__*/React.createElement("div", {
       className: boxClassName,
       "data-id": `${dataId}`,
+      "data-selector-id": dataSelectorId,
       ref: this.getRef,
       style: inlineStyle,
       "data-tour": tourId,
@@ -152,13 +154,15 @@ export class DropBoxElement extends React.Component {
       className: `${subContainerClass} ${style[`${palette}Palette`]}`,
       onClick: onClick,
       "data-id": `${dataId}_subcontainer`,
+      "data-selector-id": `${dataSelectorId}_subcontainer`,
       ref: subContainerRef
     }, isModel ? /*#__PURE__*/React.createElement("div", {
       className: style.closeBar
     }) : null, isArrow && !isModel && /*#__PURE__*/React.createElement("div", {
       className: style[arrowPosition],
       style: needArrowStyle && arrowstyle,
-      "data-id": `${dataId}_arrow`
+      "data-id": `${dataId}_arrow`,
+      "data-selector-id": `${dataSelectorId}_arrow`
     }, /*#__PURE__*/React.createElement("div", {
       className: style.arrowShape
     })), children));
@@ -237,11 +241,11 @@ export default class DropBox extends React.Component {
 DropBox.propTypes = propTypes;
 DropBox.contextType = LibraryContext;
 DropBox.defaultProps = defaultProps;
-if (false) {
-  DropBox.docs = {
-    componentGroup: 'Atom',
-    folderName: 'Style Guide',
-    external: true,
-    description: ' '
-  };
-}
+// if (__DOCS__) {
+//   DropBox.docs = {
+//     componentGroup: 'Atom',
+//     folderName: 'Style Guide',
+//     external: true,
+//     description: ' '
+//   };
+// }

package/es/DropBox/props/defaultProps.js

@@ -2,6 +2,7 @@ export const defaultProps = {
   animationStyle: 'default',
   boxPosition: 'bottomLeft',
   dataId: 'dropBox',
+  dataSelectorId: 'dropBox',
   isActive: false,
   isAnimate: false,
   isArrow: true,

package/es/DropBox/props/propTypes.js

@@ -10,6 +10,7 @@ export const propTypes = {
   boxPosition: PropTypes.oneOf(['bottomRight', 'bottomLeft', 'bottomCenter', 'topRight', 'topLeft', 'topCenter', 'rightTop', 'rightBottom', 'rightCenter', 'leftTop', 'leftBottom', 'leftCenter']),
   children: PropTypes.element,
   dataId: PropTypes.string,
+  dataSelectorId: PropTypes.string,
   forwardRef: PropTypes.object,
   getRef: PropTypes.func,
   isAbsolutePositioningNeeded: PropTypes.bool,

package/es/DropDown/DropDown.js

@@ -15,12 +15,14 @@ export default class DropDown extends React.Component {
   }
 }
 DropDown.propTypes = DropDown_propTypes;
-if (false) {
-  DropDown.docs = {
-    componentGroup: 'Form Elements',
-    folderName: 'Style Guide'
-  };
-}
+
+// if (__DOCS__) {
+//   DropDown.docs = {
+//     componentGroup: 'Form Elements',
+//     folderName: 'Style Guide'
+//   };
+// }
+
 export class DropDownTarget extends React.Component {
   render() {
     let {

package/es/DropDown/DropDownHeading.js

@@ -11,7 +11,9 @@ export default class DropDownHeading extends React.Component {
       customClass,
       palette,
       htmlId,
-      a11y
+      a11y,
+      dataId,
+      dataSelectorId
     } = this.props;
     let {
       role,
@@ -24,16 +26,19 @@ export default class DropDownHeading extends React.Component {
       role: role,
       "aria-labelledby": ariaLabelledby,
       "aria-label": ariaLabel,
-      id: htmlId
+      id: htmlId,
+      "data-id": dataId,
+      "data-selector-id": dataSelectorId
       // tabindex='0'
     }, text, children);
   }
 }
 DropDownHeading.propTypes = DropDownHeading_propTypes;
 DropDownHeading.defaultProps = DropDownHeading_defaultProps;
-if (false) {
-  DropDownHeading.docs = {
-    componentGroup: 'Form Elements',
-    folderName: 'Style Guide'
-  };
-}
+
+// if (__DOCS__) {
+//   DropDownHeading.docs = {
+//     componentGroup: 'Form Elements',
+//     folderName: 'Style Guide'
+//   };
+// }

package/es/DropDown/props/defaultProps.js

@@ -5,7 +5,9 @@ export const DropDownHeading_defaultProps = {
   customClass: '',
   children: null,
   palette: 'light',
-  a11y: {}
+  a11y: {},
+  dataId: 'DropDownHeading',
+  dataSelectorId: 'dropdownHeading'
 };
 export const DropDownItem_defaultProps = {
   active: false,

package/es/Heading/Heading.js

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

package/es/Label/Label.js

@@ -18,6 +18,7 @@ export default class Label extends React.Component {
       title,
       onClick,
       dataId,
+      dataSelectorId,
       variant,
       customClass,
       id
@@ -28,6 +29,7 @@ export default class Label extends React.Component {
       htmlFor: htmlFor,
       "data-title": title,
       "data-id": dataId,
+      "data-selector-id": dataSelectorId,
       onClick: onClick,
       id: id
     }, text);
@@ -35,9 +37,10 @@ export default class Label extends React.Component {
 }
 Label.defaultProps = defaultProps;
 Label.propTypes = propTypes;
-if (false) {
-  Label.docs = {
-    componentGroup: 'Form Elements',
-    folderName: 'Style Guide'
-  };
-}
+
+// if (__DOCS__) {
+//   Label.docs = {
+//     componentGroup: 'Form Elements',
+//     folderName: 'Style Guide'
+//   };
+// }

package/es/Label/props/defaultProps.js

@@ -6,5 +6,6 @@ export const defaultProps = {
   text: 'Label',
   type: 'title',
   variant: 'default',
-  customClass: ''
+  customClass: '',
+  dataSelectorId: 'label'
 };

package/es/Label/props/propTypes.js

@@ -2,6 +2,7 @@ import PropTypes from 'prop-types';
 export const propTypes = {
   clipped: PropTypes.bool,
   dataId: PropTypes.string,
+  dataSelectorId: PropTypes.string,
   htmlFor: PropTypes.string,
   onClick: PropTypes.func,
   palette: PropTypes.oneOf(['default', 'primary', 'secondary', 'danger', 'mandatory', 'disable', 'dark']),

package/es/Layout/Box.js

@@ -91,7 +91,8 @@ export default function Box(props) {
     isScrollAttribute: 'data-scroll',
     eleRef: 'ref',
     dataId: 'data-id',
-    tourId: 'data-tour'
+    tourId: 'data-tour',
+    dataSelectorId: 'data-selector-id'
   });
   return /*#__PURE__*/React.createElement(tagName, childProps);
 }

package/es/Layout/Container.js

@@ -110,7 +110,8 @@ export default function Container(props) {
     isScrollAttribute: 'data-scroll',
     eleRef: 'ref',
     dataId: 'data-id',
-    tourId: 'data-tour'
+    tourId: 'data-tour',
+    dataSelectorId: 'data-selector-id'
   });
   return /*#__PURE__*/React.createElement(tagName, childProps);
 }

package/es/Layout/props/defaultProps.js

@@ -1,12 +1,14 @@
 export const BoxDefaultProps = {
   dataId: 'boxComponent',
   isScrollAttribute: false,
-  tagName: 'div'
+  tagName: 'div',
+  dataSelectorId: 'box'
 };
 export const ContainerDefaultProps = {
   dataId: 'containerComponent',
   isScrollAttribute: false,
   isCover: true,
   alignBox: 'column',
-  tagName: 'div'
+  tagName: 'div',
+  dataSelectorId: 'container'
 };

package/es/Layout/props/propTypes.js

@@ -6,6 +6,7 @@ export const BoxProps = {
   className: PropTypes.string,
   column: PropTypes.oneOf(['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12']),
   dataId: PropTypes.string,
+  dataSelectorId: PropTypes.string,
   eleRef: PropTypes.func,
   flexible: PropTypes.bool,
   hidden: PropTypes.arrayOf((propValue, key, componentName, location, propFullName) => {
@@ -29,6 +30,7 @@ export const ContainerProps = {
   children: PropTypes.oneOfType([PropTypes.node, PropTypes.string]),
   className: PropTypes.string,
   dataId: PropTypes.string,
+  dataSelectorId: PropTypes.string,
   eleRef: PropTypes.func,
   hidden: PropTypes.array,
   isCover: PropTypes.bool,

package/es/ListItem/ListContainer.js

@@ -24,6 +24,7 @@ const ListContainer = props => {
     isDisabled,
     children,
     dataId,
+    dataSelectorId,
     a11y,
     customClass,
     customProps,
@@ -74,6 +75,7 @@ const ListContainer = props => {
     alignBox: "row",
     className: `${style.list} ${style[size]} ${mobileToTab && isTouchDevice ? style.responsiveHeight : ''} ${style[palette]} ${active ? style[`active${palette}`] : highlight && !isDisabled ? style[`${palette}Hover`] : ''} ${autoHover && !isDisabled ? style[`${palette}Effect`] : ''} ${needTick ? style[`${size}withTick`] : ''} ${isDisabled ? CssProvider('isDisable') : ''} ${needBorder ? active ? style.activewithBorder : style.withBorder : ''} ${customClass}`,
     dataId: dataId,
+    dataSelectorId: dataSelectorId,
     onClick: !isDisabled && onClick,
     onMouseEnter: onMouseEnter,
     onMouseOver: onMouseOver,
@@ -85,9 +87,10 @@ const ListContainer = props => {
 ListContainer.defaultProps = ListContainerDefaultProps;
 ListContainer.propTypes = ListContainer_Props;
 export default ListContainer;
-if (false) {
-  ListContainer.docs = {
-    componentGroup: 'Molecule',
-    folderName: 'Style Guide'
-  };
-}
+
+// if (__DOCS__) {
+//   ListContainer.docs = {
+//     componentGroup: 'Molecule',
+//     folderName: 'Style Guide'
+//   };
+// }

package/es/ListItem/ListItem.js

@@ -61,6 +61,7 @@ export default class ListItem extends React.Component {
       isDisabled,
       children,
       dataId,
+      dataSelectorId,
       a11y,
       customClass,
       customProps
@@ -90,6 +91,7 @@ export default class ListItem extends React.Component {
       needBorder: needBorder,
       customClass: customListItem,
       dataId: dataIdString,
+      dataSelectorId: `${dataSelectorId}`,
       isLink: isLink,
       href: href,
       target: target,
@@ -110,7 +112,8 @@ export default class ListItem extends React.Component {
     }, children) : null, needTick && active ? /*#__PURE__*/React.createElement(Box, {
       className: `${style.tickIcon} ${tickIconPalette} ${customTickIcon}`,
       "aria-hidden": ariaHidden,
-      dataId: `${dataIdString}_tickIcon`
+      dataId: `${dataIdString}_tickIcon`,
+      dataSelectorId: `${dataSelectorId}_tickIcon`
     }, /*#__PURE__*/React.createElement(Icon, {
       name: "ZD-ticknew",
       size: "8"
@@ -119,9 +122,10 @@ export default class ListItem extends React.Component {
 }
 ListItem.defaultProps = ListItemDefaultProps;
 ListItem.propTypes = ListItem_Props;
-if (false) {
-  ListItem.docs = {
-    componentGroup: 'Molecule',
-    folderName: 'Style Guide'
-  };
-}
+
+// if (__DOCS__) {
+//   ListItem.docs = {
+//     componentGroup: 'Molecule',
+//     folderName: 'Style Guide'
+//   };
+// }

package/es/ListItem/ListItemWithAvatar.js

@@ -60,6 +60,7 @@ export default class ListItemWithAvatar extends React.PureComponent {
       title,
       needTick,
       dataId,
+      dataSelectorId,
       initial,
       isDisabled,
       needBorder,
@@ -96,6 +97,7 @@ export default class ListItemWithAvatar extends React.PureComponent {
       needBorder: needBorder,
       customClass: customListItem,
       dataId: `${dataIdString}_ListItemWithAvatar`,
+      dataSelectorId: `${dataSelectorId}`,
       onClick: this.handleClick,
       onMouseEnter: this.handleMouseEnter,
       eleRef: this.getRef,
@@ -132,7 +134,8 @@ export default class ListItemWithAvatar extends React.PureComponent {
     }, value) : null, needTick && active ? /*#__PURE__*/React.createElement(Box, {
       className: style.tickIcon,
       "aria-hidden": ariaHidden,
-      dataId: `${dataIdString}_tickIcon`
+      dataId: `${dataIdString}_tickIcon`,
+      dataSelectorId: `${dataSelectorId}_tickIcon`
     }, /*#__PURE__*/React.createElement(Icon, {
       name: "ZD-ticknew",
       size: "8"
@@ -141,9 +144,9 @@ export default class ListItemWithAvatar extends React.PureComponent {
 }
 ListItemWithAvatar.defaultProps = ListItemWithAvatarDefaultProps;
 ListItemWithAvatar.propTypes = ListItemWithAvatar_Props;
-if (false) {
-  ListItemWithAvatar.docs = {
-    componentGroup: 'Molecule',
-    folderName: 'Style Guide'
-  };
-}
+// if (__DOCS__) {
+//   ListItemWithAvatar.docs = {
+//     componentGroup: 'Molecule',
+//     folderName: 'Style Guide'
+//   };
+// }

package/es/ListItem/ListItemWithCheckBox.js

@@ -49,6 +49,7 @@ export default class ListItemWithCheckBox extends React.Component {
       autoHover,
       palette,
       dataId,
+      dataSelectorId,
       title,
       isDisabled,
       disableTitle,
@@ -75,6 +76,7 @@ export default class ListItemWithCheckBox extends React.Component {
       autoHover: autoHover,
       customClass: customListItem,
       dataId: `${dataId ? dataId : value}_ListItemWithCheckBox`,
+      dataSelectorId: dataSelectorId,
       onClick: this.onClick,
       onMouseOver: this.onHover,
       eleRef: this.getRef,
@@ -102,9 +104,9 @@ export default class ListItemWithCheckBox extends React.Component {
 }
 ListItemWithCheckBox.defaultProps = ListItemWithCheckBoxDefaultProps;
 ListItemWithCheckBox.propTypes = ListItemWithCheckBox_Props;
-if (false) {
-  ListItemWithCheckBox.docs = {
-    componentGroup: 'Molecule',
-    folderName: 'Style Guide'
-  };
-}
+// if (__DOCS__) {
+//   ListItemWithCheckBox.docs = {
+//     componentGroup: 'Molecule',
+//     folderName: 'Style Guide'
+//   };
+// }

package/es/ListItem/ListItemWithIcon.js

@@ -54,6 +54,7 @@ export default class ListItemWithIcon extends React.Component {
       palette,
       iconClass,
       dataId,
+      dataSelectorId,
       title,
       needTick,
       isLink,
@@ -86,6 +87,7 @@ export default class ListItemWithIcon extends React.Component {
       needBorder: needBorder,
       customClass: customClass,
       dataId: dataIdString,
+      dataSelectorId: dataSelectorId,
       isLink: isLink,
       href: href,
       target: target,
@@ -114,7 +116,8 @@ export default class ListItemWithIcon extends React.Component {
     }, value), needTick && active ? /*#__PURE__*/React.createElement(Box, {
       className: style.tickIcon,
       "aria-hidden": ariaHidden,
-      dataId: `${dataIdString}_tickIcon`
+      dataId: `${dataIdString}_tickIcon`,
+      dataSelectorId: `${dataSelectorId}_tickIcon`
     }, /*#__PURE__*/React.createElement(Icon, {
       name: "ZD-ticknew",
       size: "8"
@@ -123,9 +126,10 @@ export default class ListItemWithIcon extends React.Component {
 }
 ListItemWithIcon.defaultProps = ListItemWithIconDefaultProps;
 ListItemWithIcon.propTypes = ListItemWithIcon_Props;
-if (false) {
-  ListItemWithIcon.docs = {
-    componentGroup: 'Molecule',
-    folderName: 'Style Guide'
-  };
-}
+
+// if (__DOCS__) {
+//   ListItemWithIcon.docs = {
+//     componentGroup: 'Molecule',
+//     folderName: 'Style Guide'
+//   };
+// }

package/es/ListItem/ListItemWithRadio.js

@@ -50,6 +50,7 @@ export default class ListItemWithRadio extends React.Component {
       palette,
       id,
       dataId,
+      dataSelectorId,
       title,
       isDisabled,
       disableTitle,
@@ -76,6 +77,7 @@ export default class ListItemWithRadio extends React.Component {
       autoHover: autoHover,
       customClass: customListItem,
       dataId: dataId,
+      dataSelectorId: dataSelectorId,
       onClick: this.onClick,
       onMouseOver: this.onHover,
       eleRef: this.getRef,
@@ -104,9 +106,10 @@ export default class ListItemWithRadio extends React.Component {
 }
 ListItemWithRadio.defaultProps = ListItemWithRadioDefaultProps;
 ListItemWithRadio.propTypes = ListItemWithRadio_Props;
-if (false) {
-  ListItemWithRadio.docs = {
-    componentGroup: 'Molecule',
-    folderName: 'Style Guide'
-  };
-}
+
+// if (__DOCS__) {
+//   ListItemWithRadio.docs = {
+//     componentGroup: 'Molecule',
+//     folderName: 'Style Guide'
+//   };
+// }

package/es/ListItem/props/defaultProps.js

@@ -10,7 +10,8 @@ export const ListContainerDefaultProps = {
   needBorder: true,
   a11y: {},
   customClass: '',
-  customProps: {}
+  customProps: {},
+  dataSelectorId: 'listContainer'
 };
 export const ListItemDefaultProps = {
   active: false,
@@ -25,7 +26,8 @@ export const ListItemDefaultProps = {
   needBorder: true,
   a11y: {},
   customClass: {},
-  customProps: {}
+  customProps: {},
+  dataSelectorId: 'listItem'
 };
 export const ListItemWithAvatarDefaultProps = {
   active: false,
@@ -41,7 +43,8 @@ export const ListItemWithAvatarDefaultProps = {
   needAvatarTitle: true,
   a11y: {},
   customClass: {},
-  customProps: {}
+  customProps: {},
+  dataSelectorId: 'listItemWithAvatar'
 };
 export const ListItemWithCheckBoxDefaultProps = {
   active: false,
@@ -53,7 +56,8 @@ export const ListItemWithCheckBoxDefaultProps = {
   value: 'List',
   a11y: {},
   customClass: {},
-  customProps: {}
+  customProps: {},
+  dataSelectorId: 'listItemWithCheckBox'
 };
 export const ListItemWithIconDefaultProps = {
   active: false,
@@ -68,7 +72,8 @@ export const ListItemWithIconDefaultProps = {
   needBorder: true,
   a11y: {},
   customClass: '',
-  customProps: {}
+  customProps: {},
+  dataSelectorId: 'listItemWithIcon'
 };
 export const ListItemWithRadioDefaultProps = {
   active: false,
@@ -81,5 +86,6 @@ export const ListItemWithRadioDefaultProps = {
   dataId: 'listItemWithRadioComp',
   a11y: {},
   customClass: {},
-  customProps: {}
+  customProps: {},
+  dataSelectorId: 'listItemWithRadio'
 };

package/es/ListItem/props/propTypes.js

@@ -4,6 +4,7 @@ export const ListContainer_Props = {
   autoHover: PropTypes.bool,
   children: PropTypes.node,
   dataId: PropTypes.string,
+  dataSelectorId: PropTypes.string,
   disableTitle: PropTypes.string,
   highlight: PropTypes.bool,
   href: PropTypes.string,
@@ -30,6 +31,7 @@ export const ListItem_Props = {
   autoHover: PropTypes.bool,
   children: PropTypes.node,
   dataId: PropTypes.string,
+  dataSelectorId: PropTypes.string,
   disableTitle: PropTypes.string,
   getRef: PropTypes.func,
   highlight: PropTypes.bool,
@@ -65,6 +67,7 @@ export const ListItemWithAvatar_Props = {
   avatarPalette: PropTypes.string,
   avatarPalette: PropTypes.string,
   dataId: PropTypes.string,
+  dataSelectorId: PropTypes.string,
   disableTitle: PropTypes.string,
   getRef: PropTypes.func,
   highlight: PropTypes.bool,
@@ -103,6 +106,7 @@ export const ListItemWithCheckBox_Props = {
   autoHover: PropTypes.bool,
   checked: PropTypes.bool,
   dataId: PropTypes.string,
+  dataSelectorId: PropTypes.string,
   disableTitle: PropTypes.string,
   getRef: PropTypes.func,
   highlight: PropTypes.bool,
@@ -129,6 +133,7 @@ export const ListItemWithIcon_Props = {
   active: PropTypes.bool,
   autoHover: PropTypes.bool,
   dataId: PropTypes.string,
+  dataSelectorId: PropTypes.string,
   disableTitle: PropTypes.string,
   getRef: PropTypes.func,
   highlight: PropTypes.bool,
@@ -161,6 +166,7 @@ export const ListItemWithRadio_Props = {
   autoHover: PropTypes.bool,
   checked: PropTypes.bool,
   dataId: PropTypes.string,
+  dataSelectorId: PropTypes.string,
   disableTitle: PropTypes.string,
   getRef: PropTypes.func,
   highlight: PropTypes.bool,