@zohodesk/components 1.0.0-temp-121 → 1.0.0-temp-123

package/README.md

@@ -32,6 +32,11 @@ In this Package, we Provide Some Basic Components to Build Web App
 - TextBoxIcon
 - Tooltip
 
+# 1.0.0-alpha-258
+
+- **CheckBox** - dataSlector prop changed to dataSelectorId
+- dataSelectorId prop added for all components
+
 # 1.0.0-alpha-257
 
 - **Avatar** - Avatar initial render issue and image border issue  solved

package/assets/Appearance/dark/mode/darkMode.module.css

@@ -5,7 +5,7 @@
 	--dot_inputLine: var(--zdt_cta_grey_35_border);
 	--dot_inputLineHover: hsl(217, 8%, calc(55% + var(--zd_dark_border_lValue)), calc(1 + var(--zd_alpha)));
 	--dot_inputLineFocus: var(--zdt_cta_primary_border);
-	--dot_listItemHover: var(--zdt_cta_grey_10_bg);
+	--dot_listItemHover: var(--zdt_m_cta_grey_10_bg_buttonBg);
 	--dot_listItemActive: var(--zdt_m_cta_primary_light_bg_buttonBg);
 	
 	/* common */
@@ -163,7 +163,7 @@
 	--zdt_listitem_default_border: var(--dot_mirror);
 	--zdt_listitem_default_bg: var(--dot_mirror);
 	--zdt_listitem_default_tickicon: var(--zdt_cta_primary_text);
-	--zdt_listitem_highlight_bg: hsl(213, 27%, calc(24% + var(--zd_dark_emboseBg_lValue)), calc( 0.45 + var(--zd_alpha)));
+	--zdt_listitem_highlight_bg: hsl(213, 27%, calc(24% + var(--zd_dark_buttonBg_lValue)), calc( 0.45 + var(--zd_bg_alpha)));
 	--zdt_listitem_active_border: var(--zdt_cta_primary_border);
 	--zdt_listitem_primary_bg: var(--dot_listItemActive);
 	--zdt_listitem_secondary_bg: var(--zdt_m_cta_primary_bg_bg);
@@ -214,7 +214,7 @@
 	--zdt_stencil_secondary_gradient_bg: linear-gradient(to left, #383f55 0, #414963 33.33%, #414961 66.66%, #383f55 100%);
 	
 	/* switch */
-	--zdt_switch_default_off_bg: var(--zdt_m_cta_grey_35_border_bg);
+	--zdt_switch_default_off_bg: var(--zdt_cta_grey_35_border);
 	--zdt_switch_default_on_bg: hsl(133, 48%, calc(52% + var(--zd_dark_buttonBg_lValue)), calc(1 + var(--zd_bg_alpha)));
 	--zdt_switch_circle_bg: hsl(0, 0%, calc(100% + var(--zd_dark_bg_lValue)), calc(1 + var(--zd_bg_alpha)));
 	--zdt_switch_circle_shadow: hsl(0, 0%, calc(47% + var(--zd_dark_boxShadow_lValue)), calc(1 + var(--zd_bg_alpha)));
@@ -335,8 +335,8 @@
 	
 	/* custom scroll */
 	--zdt_customscroll_default_bg: hsl(0, 0%, calc(88% + var(--zd_dark_bg_lValue)), calc( 0.06 + var(--zd_bg_alpha)));
-	--zdt_customscroll_thump_bg: hsl(0, 0%, calc(88% + var(--zd_dark_bg_lValue)), calc( 0.12 + var(--zd_bg_alpha)));
-	--zdt_customscroll_thump_hover_bg: hsl(217, 14%, calc(70% + var(--zd_dark_bg_lValue)), calc( 0.3 + var(--zd_bg_alpha)));
+	--zdt_customscroll_thump_bg: hsl(0, 0%, calc(88% + var(--zd_dark_emboseBg_lValue)), calc( 0.12 + var(--zd_alpha)));
+	--zdt_customscroll_thump_hover_bg: hsl(217, 14%, calc(70% + var(--zd_dark_emboseBg_lValue)), calc( 0.3 + var(--zd_alpha)));
 	--zdt_customscroll_border: hsl(0, 0%, calc(88% + var(--zd_dark_border_lValue)), calc( 0.12 + var(--zd_alpha)));
 	--zdt_customscroll_thump_dark_bg: hsl(0, 0%, calc(88% + var(--zd_dark_bg_lValue)), calc( 0.12 + var(--zd_bg_alpha)));
 	--zdt_customscroll_thump_dark_hover_bg: hsl(0, 0%, calc(88% + var(--zd_dark_bg_lValue)), calc( 0.14 + var(--zd_bg_alpha)));

package/assets/Appearance/default/mode/defaultMode.module.css

@@ -5,7 +5,7 @@
 	--dot_inputLine: var(--zdt_cta_grey_35_border);
 	--dot_inputLineHover: hsl(218, 10%, calc(52% + var(--zd_default_border_lValue)), calc(1 + var(--zd_alpha)));
 	--dot_inputLineFocus: var(--zdt_cta_primary_border);
-	--dot_listItemHover: var(--zdt_cta_grey_10_bg);
+	--dot_listItemHover: var(--zdt_m_cta_grey_10_bg_buttonBg);
 	--dot_listItemActive: var(--zdt_m_cta_primary_light_bg_buttonBg);
 	
 	/* common */
@@ -214,7 +214,7 @@
 	--zdt_stencil_secondary_gradient_bg: linear-gradient(to left, var(--dot_solitude) 0%, var(--dot_paleBlue) 33.33%, var(--dot_solitude) 66.66%, var(--dot_solitude) 100%);
 	
 	/* switch */
-	--zdt_switch_default_off_bg: var(--zdt_m_cta_grey_35_border_bg);
+	--zdt_switch_default_off_bg: var(--zdt_cta_grey_35_border);
 	--zdt_switch_default_on_bg: hsl(133, 63%, calc(41% + var(--zd_default_buttonBg_lValue)), calc(1 + var(--zd_bg_alpha)));
 	--zdt_switch_circle_bg: hsl(0, 0%, calc(100% + var(--zd_default_bg_lValue)), calc(1 + var(--zd_bg_alpha)));
 	--zdt_switch_circle_shadow: hsl(0, 0%, calc(47% + var(--zd_default_boxShadow_lValue)), calc(1 + var(--zd_bg_alpha)));
@@ -335,8 +335,8 @@
 	
 	/* custom scroll */
 	--zdt_customscroll_default_bg: hsl(0, 0%, calc(0% + var(--zd_default_bg_lValue)), calc( 0.02 + var(--zd_bg_alpha)));
-	--zdt_customscroll_thump_bg: hsl(0, 0%, calc(0% + var(--zd_default_bg_lValue)), calc( 0.12 + var(--zd_bg_alpha)));
-	--zdt_customscroll_thump_hover_bg: hsl(0, 0%, calc(0% + var(--zd_default_bg_lValue)), calc( 0.16 + var(--zd_bg_alpha)));
+	--zdt_customscroll_thump_bg: hsl(0, 0%, calc(0% + var(--zd_default_emboseBg_lValue)), calc( 0.12 + var(--zd_alpha)));
+	--zdt_customscroll_thump_hover_bg: hsl(0, 0%, calc(0% + var(--zd_default_emboseBg_lValue)), calc( 0.16 + var(--zd_alpha)));
 	--zdt_customscroll_border: hsl(227, 27%, calc(24% + var(--zd_default_border_lValue)), calc( 0.1 + var(--zd_alpha)));
 	--zdt_customscroll_thump_dark_bg: hsl(0, 0%, calc(88% + var(--zd_default_bg_lValue)), calc( 0.15 + var(--zd_bg_alpha)));
 	--zdt_customscroll_thump_dark_hover_bg: hsl(0, 0%, calc(88% + var(--zd_default_bg_lValue)), calc( 0.17 + var(--zd_bg_alpha)));

package/assets/Appearance/pureDark/mode/pureDarkMode.module.css

@@ -5,7 +5,7 @@
 	--dot_inputLine: var(--zdt_cta_grey_35_border);
 	--dot_inputLineHover: hsl(217, 8%, calc(55% + var(--zd_pureDark_border_lValue)), calc(1 + var(--zd_alpha)));
 	--dot_inputLineFocus: var(--zdt_cta_primary_border);
-	--dot_listItemHover: var(--zdt_cta_grey_10_bg);
+	--dot_listItemHover: var(--zdt_m_cta_grey_10_bg_buttonBg);
 	--dot_listItemActive: var(--zdt_m_cta_primary_light_bg_buttonBg);
 	
 	/* common */
@@ -163,7 +163,7 @@
 	--zdt_listitem_default_border: var(--dot_mirror);
 	--zdt_listitem_default_bg: var(--dot_mirror);
 	--zdt_listitem_default_tickicon: var(--zdt_cta_primary_text);
-	--zdt_listitem_highlight_bg: hsl(0, 0%, calc(15% + var(--zd_pureDark_emboseBg_lValue)), calc(1 + var(--zd_alpha)));
+	--zdt_listitem_highlight_bg: hsl(0, 0%, calc(15% + var(--zd_pureDark_buttonBg_lValue)), calc(1 + var(--zd_bg_alpha)));
 	--zdt_listitem_active_border: var(--zdt_cta_primary_border);
 	--zdt_listitem_primary_bg: var(--dot_listItemActive);
 	--zdt_listitem_secondary_bg: var(--zdt_m_cta_primary_bg_bg);
@@ -214,7 +214,7 @@
 	--zdt_stencil_secondary_gradient_bg: linear-gradient(to left, #262626 0, #2d2d2d 33.33%, #2d2d2d 66.66%, #262626 100%);
 	
 	/* switch */
-	--zdt_switch_default_off_bg: var(--zdt_m_cta_grey_35_border_bg);
+	--zdt_switch_default_off_bg: var(--zdt_cta_grey_35_border);
 	--zdt_switch_default_on_bg: hsl(133, 48%, calc(52% + var(--zd_pureDark_buttonBg_lValue)), calc(1 + var(--zd_bg_alpha)));
 	--zdt_switch_circle_bg: hsl(0, 0%, calc(100% + var(--zd_pureDark_bg_lValue)), calc(1 + var(--zd_bg_alpha)));
 	--zdt_switch_circle_shadow: hsl(0, 0%, calc(47% + var(--zd_pureDark_boxShadow_lValue)), calc(1 + var(--zd_bg_alpha)));
@@ -335,8 +335,8 @@
 	
 	/* custom scroll */
 	--zdt_customscroll_default_bg: hsl(0, 0%, calc(88% + var(--zd_pureDark_bg_lValue)), calc( 0.06 + var(--zd_bg_alpha)));
-	--zdt_customscroll_thump_bg: hsl(0, 0%, calc(88% + var(--zd_pureDark_bg_lValue)), calc( 0.12 + var(--zd_bg_alpha)));
-	--zdt_customscroll_thump_hover_bg: hsl(217, 14%, calc(70% + var(--zd_pureDark_bg_lValue)), calc( 0.3 + var(--zd_bg_alpha)));
+	--zdt_customscroll_thump_bg: hsl(0, 0%, calc(88% + var(--zd_pureDark_emboseBg_lValue)), calc( 0.12 + var(--zd_alpha)));
+	--zdt_customscroll_thump_hover_bg: hsl(217, 14%, calc(70% + var(--zd_pureDark_emboseBg_lValue)), calc( 0.3 + var(--zd_alpha)));
 	--zdt_customscroll_border: hsl(0, 0%, calc(88% + var(--zd_pureDark_border_lValue)), calc( 0.12 + var(--zd_alpha)));
 	--zdt_customscroll_thump_dark_bg: hsl(0, 0%, calc(88% + var(--zd_pureDark_bg_lValue)), calc( 0.12 + var(--zd_bg_alpha)));
 	--zdt_customscroll_thump_dark_hover_bg: hsl(0, 0%, calc(88% + var(--zd_pureDark_bg_lValue)), calc( 0.14 + var(--zd_bg_alpha)));

package/assets/Contrast/darkContrastLightness.module.css

@@ -1,13 +1,12 @@
 :root [data-mode='dark'] {
-   --zd_dark_bg_lValue: 0%;
-   --zd_dark_buttonBg_lValue: 0%;
-   --zd_dark_emboseBg_lValue: 0%;
-   --zd_dark_text_lValue: 0%;
-   --zd_dark_buttonText_lValue: 0%;
-   --zd_dark_elementText_lValue: 0%;
-   --zd_dark_border_lValue: 0%;
-   --zd_dark_boxShadow_lValue: 0%;
-   --zd_dark_plus_lValue: 0%;
+   --zd_dark_bg_lValue: calc(0 * 1%);
+   --zd_dark_buttonBg_lValue: calc(0 * 1%);
+   --zd_dark_emboseBg_lValue: calc(0 * 1%);
+   --zd_dark_text_lValue: calc(0 * 1%);
+   --zd_dark_buttonText_lValue: calc(0 * 1%);
+   --zd_dark_elementText_lValue: calc(0 * 1%);
+   --zd_dark_border_lValue: calc(0 * 1%);
+   --zd_dark_boxShadow_lValue: calc(0 * 1%);
    --zd_alpha: 0;
    --zd_bg_alpha: 0;
 }
@@ -19,9 +18,8 @@
    --zd_dark_text_lValue: 10%;
    --zd_dark_buttonText_lValue: 10%;
    --zd_dark_elementText_lValue: -10%;
-   --zd_dark_border_lValue: 10%;
+   --zd_dark_border_lValue: 30%;
    --zd_dark_boxShadow_lValue: 0%;
-   --zd_dark_plus_lValue: 10%;
    --zd_alpha: 1;
    --zd_bg_alpha: 0;
 }

package/assets/Contrast/defaultContrastLightness.module.css

@@ -1,13 +1,12 @@
 :root [data-mode='default'] {
-   --zd_default_bg_lValue: 0%;
-   --zd_default_buttonBg_lValue: 0%;
-   --zd_default_emboseBg_lValue: 0%;
-   --zd_default_text_lValue: 0%;
-   --zd_default_buttonText_lValue: 0%;
-   --zd_default_elementText_lValue: 0%;
-   --zd_default_border_lValue: 0%;
-   --zd_default_boxShadow_lValue: 0%;
-   --zd_default_plus_lValue: 0%;
+   --zd_default_bg_lValue: calc(0 * 1%);
+   --zd_default_buttonBg_lValue: calc(0 * 1%);
+   --zd_default_emboseBg_lValue: calc(0 * 1%);
+   --zd_default_text_lValue: calc(0 * 1%);
+   --zd_default_buttonText_lValue: calc(0 * 1%);
+   --zd_default_elementText_lValue: calc(0 * 1%);
+   --zd_default_border_lValue: calc(0 * 1%);
+   --zd_default_boxShadow_lValue: calc(0 * 1%);
    --zd_alpha: 0;
    --zd_bg_alpha: 0;
 }
@@ -19,9 +18,8 @@
    --zd_default_text_lValue: -10%;
    --zd_default_buttonText_lValue: 10%;
    --zd_default_elementText_lValue: 10%;
-   --zd_default_border_lValue: -10%;
+   --zd_default_border_lValue: -30%;
    --zd_default_boxShadow_lValue: 0%;
-   --zd_default_plus_lValue: 10%;
    --zd_alpha: 1;
    --zd_bg_alpha: 0;
 }

package/assets/Contrast/pureDarkContrastLightness.module.css

@@ -1,13 +1,12 @@
 :root [data-mode='pureDark'] {
-   --zd_pureDark_bg_lValue: 0%;
-   --zd_pureDark_buttonBg_lValue: 0%;
-   --zd_pureDark_emboseBg_lValue: 0%;
-   --zd_pureDark_text_lValue: 0%;
-   --zd_pureDark_buttonText_lValue: 0%;
-   --zd_pureDark_elementText_lValue: 0%;
-   --zd_pureDark_border_lValue: 0%;
-   --zd_pureDark_boxShadow_lValue: 0%;
-   --zd_pureDark_plus_lValue: 0%;
+   --zd_pureDark_bg_lValue: calc(0 * 1%);
+   --zd_pureDark_buttonBg_lValue: calc(0 * 1%);
+   --zd_pureDark_emboseBg_lValue: calc(0 * 1%);
+   --zd_pureDark_text_lValue: calc(0 * 1%);
+   --zd_pureDark_buttonText_lValue: calc(0 * 1%);
+   --zd_pureDark_elementText_lValue: calc(0 * 1%);
+   --zd_pureDark_border_lValue: calc(0 * 1%);
+   --zd_pureDark_boxShadow_lValue: calc(0 * 1%);
    --zd_alpha: 0;
    --zd_bg_alpha: 0;
 }
@@ -19,9 +18,8 @@
    --zd_pureDark_text_lValue: 10%;
    --zd_pureDark_buttonText_lValue: 10%;
    --zd_pureDark_elementText_lValue: -10%;
-   --zd_pureDark_border_lValue: 10%;
+   --zd_pureDark_border_lValue: 30%;
    --zd_pureDark_boxShadow_lValue: 0%;
-   --zd_pureDark_plus_lValue: 10%;
    --zd_alpha: 1;
    --zd_bg_alpha: 0;
 }

package/es/Accordion/Accordion.js

@@ -35,7 +35,9 @@ export default class Accordion extends React.Component {
       unMount,
       disableInternalState,
       selectedItem: propSelectedItem,
-      a11y
+      a11y,
+      dataId,
+      dataSelectorId
     } = this.props;
     let {
       selectedItem
@@ -61,7 +63,9 @@ export default class Accordion extends React.Component {
       },
       role: role,
       "aria-expanded": ariaExpanded,
-      "aria-haspopup": ariaHaspopup
+      "aria-haspopup": ariaHaspopup,
+      "data-id": dataId,
+      "data-selector-id": dataSelectorId
     }, children);
   }
 }

package/es/Accordion/AccordionItem.js

@@ -23,6 +23,7 @@ export default class AccordionItem extends React.Component {
       className,
       children,
       dataId,
+      dataSelectorId,
       unMount,
       unMountItem,
       a11y,
@@ -35,7 +36,8 @@ export default class AccordionItem extends React.Component {
     return /*#__PURE__*/React.createElement("div", {
       className: className ? className : '',
       "data-id": dataId,
-      role: role
+      role: role,
+      "data-selector-id": dataSelectorId
     }, /*#__PURE__*/React.createElement("div", {
       className: innerClass ? innerClass : '',
       onClick: selectMenu.bind(this, id)

package/es/Accordion/props/defaultProps.js

@@ -1,8 +1,12 @@
 export const Accordion_defaultProps = {
   unMount: true,
   disableInternalState: false,
-  a11y: {}
+  a11y: {},
+  dataId: 'Accordion',
+  dataSelectorId: 'accordion'
 };
 export const AccordionItem_defaultProps = {
-  a11y: {}
+  a11y: {},
+  dataId: 'AccordionItem',
+  dataSelectorId: 'accordionItem'
 };

package/es/Accordion/props/propTypes.js

@@ -2,6 +2,8 @@ import PropTypes from 'prop-types';
 export const Accordion_propTypes = {
   children: PropTypes.node,
   className: PropTypes.string,
+  dataId: PropTypes.string,
+  dataSelectorId: PropTypes.string,
   disableInternalState: PropTypes.bool,
   height: PropTypes.string,
   onSelect: PropTypes.func,
@@ -17,6 +19,7 @@ export const AccordionItem_propTypes = {
   children: PropTypes.node,
   className: PropTypes.string,
   dataId: PropTypes.string,
+  dataSelectorId: PropTypes.string,
   equalityCheck: PropTypes.func,
   id: PropTypes.string,
   selectMenu: PropTypes.func,

package/es/AppContainer/AppContainer.js

@@ -76,6 +76,7 @@ export default class AppContainer extends React.Component {
       children,
       tagName,
       dataId,
+      dataSelectorId,
       tooltipClass,
       tooltipParentClass,
       customProps
@@ -90,13 +91,15 @@ export default class AppContainer extends React.Component {
       //onMouseOver={this.handleOver}
       ,
       dataId: dataId,
+      dataSelectorId: dataSelectorId,
       tagName: tagName,
       eleRef: this.getContainerRef
     }, ContainerProps, ExtraProps), /*#__PURE__*/React.createElement(Box, {
       flexible: true
     }, children)), /*#__PURE__*/React.createElement("div", _extends({}, ExtraProps, {
       className: `${style.container} ${style.tooltip} ${tooltipParentClass}`,
-      "data-id": `${dataId}_tooltip`
+      "data-id": `${dataId}_tooltip`,
+      "data-selector-id": `${dataSelectorId}_tooltip`
     }), /*#__PURE__*/React.createElement(Tooltip, _extends({
       ref: this.setTooltipRef,
       customClass: tooltipClass

package/es/AppContainer/props/defaultProps.js

@@ -4,5 +4,6 @@ export const defaultProps = {
   className: '',
   tooltipClass: '',
   tooltipParentClass: '',
-  customProps: {}
+  customProps: {},
+  dataSelectorId: 'appContainer'
 };

package/es/AppContainer/props/propTypes.js

@@ -2,6 +2,7 @@ import PropTypes from 'prop-types';
 export const propTypes = {
   children: PropTypes.oneOfType([PropTypes.element, PropTypes.arrayOf(PropTypes.element)]),
   dataId: PropTypes.string,
+  dataSelectorId: PropTypes.string,
   eleRef: PropTypes.func,
   tagName: PropTypes.string,
   className: PropTypes.string,

package/es/Avatar/Avatar.js

@@ -124,6 +124,7 @@ export default class Avatar extends React.Component {
       customClass,
       alternateSrc,
       isAnimate,
+      dataSelectorId,
       customProps
     } = this.props;
     let {
@@ -144,13 +145,16 @@ export default class Avatar extends React.Component {
       className: `${style.avatar} ${style[size]} ${AvatarSize(size)} ${style[shapeStyle]} ${style[palette]} ${textStyle} ${borderStyle} ${customClass ? customClass : ''}`,
       "data-title": needTitle ? title ? title : name : null,
       "data-id": dataId,
-      onClick: onClick
+      onClick: onClick,
+      "data-selector-id": dataSelectorId
     }, AvatarProps), showInitial && !showAlternateAvatar && /*#__PURE__*/React.createElement("span", {
       className: `${style.initial}`,
-      "data-id": `${dataId}_AvatarInitial`
+      "data-id": `${dataId}_AvatarInitial`,
+      "data-selector-id": `${dataSelectorId}_AvatarInitial`
     }, initial), (showAvatar || showAlternateAvatar) && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("img", {
       className: `${style.image} ${isAnimate ? style.animate : ''}`,
       "data-id": `${dataId}_AvatarImg`,
+      "data-selector-id": `${dataSelectorId}_AvatarImg`,
       name: name,
       onError: this.putInvalidImageURLJSON,
       onLoad: this.putValidImageURLJSON,

package/es/Avatar/props/defaultProps.js

@@ -10,5 +10,6 @@ export const defaultProps = {
   borderOnActive: false,
   borderOnHover: false,
   customProps: {},
-  isAnimate: true
+  isAnimate: true,
+  dataSelectorId: 'avatar'
 };

package/es/Avatar/props/propTypes.js

@@ -1,6 +1,7 @@
 import PropTypes from 'prop-types';
 export const propTypes = {
   dataId: PropTypes.string,
+  dataSelectorId: PropTypes.string,
   initial: PropTypes.string,
   name: PropTypes.string.isRequired,
   needBorder: PropTypes.bool,

package/es/AvatarTeam/AvatarTeam.js

@@ -31,6 +31,7 @@ export default class AvatarTeam extends React.Component {
       customClass,
       borderOnActive,
       borderOnHover,
+      dataSelectorId,
       customProps
     } = this.props;
     let {
@@ -44,7 +45,8 @@ export default class AvatarTeam extends React.Component {
     let border = borderOnHover || onClick;
     return /*#__PURE__*/React.createElement("span", _extends({
       className: `${style.container} ${borderOnActive ? style.borderOnActive : border ? style.borderOnHover : ''} `,
-      "data-id": dataId
+      "data-id": dataId,
+      "data-selector-id": dataSelectorId
     }, AvatarTeamProps), /*#__PURE__*/React.createElement(Avatar, _extends({
       name: name,
       onClick: onClick,

package/es/AvatarTeam/props/defaultProps.js

@@ -5,6 +5,7 @@ export const defaultProps = {
   src: null,
   title: null,
   dataId: 'avatarTeamComp',
+  dataSelectorId: 'avatarTeam',
   needTitle: true,
   customClass: {},
   borderOnActive: false,

package/es/AvatarTeam/props/propTypes.js

@@ -1,6 +1,7 @@
 import PropTypes from 'prop-types';
 export const propTypes = {
   dataId: PropTypes.string,
+  dataSelectorId: PropTypes.string,
   isFilled: PropTypes.bool,
   name: PropTypes.string.isRequired,
   needTitle: PropTypes.bool,

package/es/Button/Button.js

@@ -25,6 +25,7 @@ export default class Button extends React.Component {
       needAppearance,
       getRef,
       title,
+      dataSelectorId,
       customClass,
       customProps
     } = this.props;
@@ -44,7 +45,8 @@ export default class Button extends React.Component {
       onClick: onClick,
       "data-title": title,
       type: "button",
-      ref: getRef
+      ref: getRef,
+      "data-selector-id": dataSelectorId
     }, customProps), children ? children : text, statusLower !== 'none' && needAppearance && /*#__PURE__*/React.createElement("div", {
       className: style.overlay
     }, /*#__PURE__*/React.createElement("div", {

package/es/Button/props/defaultProps.js

@@ -2,6 +2,7 @@ import { dummyFunction } from '../../utils/dummyFunction';
 export const defaultProps = {
   children: null,
   dataId: 'buttonComp',
+  dataSelectorId: 'button',
   disabled: false,
   isBold: true,
   needAppearance: true,

package/es/Button/props/propTypes.js

@@ -3,6 +3,7 @@ export const propTypes = {
   children: PropTypes.node,
   className: PropTypes.string,
   dataId: PropTypes.string,
+  dataSelectorId: PropTypes.string,
   disabled: PropTypes.bool,
   getRef: PropTypes.func,
   isBold: PropTypes.bool,

package/es/Buttongroup/Buttongroup.js

@@ -10,7 +10,9 @@ export default class Buttongroup extends React.Component {
       children,
       type,
       buttonPosition,
-      customClass
+      customClass,
+      dataId,
+      dataSelectorId
     } = this.props;
     let btnGroup = [];
     children.forEach(child => {
@@ -20,7 +22,9 @@ export default class Buttongroup extends React.Component {
       btnGroup.push(btnRight);
     });
     return /*#__PURE__*/React.createElement("div", {
-      className: `${style.buttonGroup} ${style[type]} ${customClass ? customClass : ''}`
+      className: `${style.buttonGroup} ${style[type]} ${customClass ? customClass : ''}`,
+      "data-id": dataId,
+      "data-selector-id": dataSelectorId
     }, /*#__PURE__*/React.createElement("div", {
       className: style[`align${buttonPosition}`]
     }, children));

package/es/Buttongroup/props/defaultProps.js

@@ -1,4 +1,6 @@
 export const defaultProps = {
   buttonPosition: 'left',
-  children: null
+  children: null,
+  dataId: 'ButtonGroup',
+  dataSelectorId: 'buttonGroup'
 };

package/es/Buttongroup/props/propTypes.js

@@ -3,5 +3,7 @@ export const propTypes = {
   buttonPosition: PropTypes.oneOf(['left', 'right', 'center']),
   children: PropTypes.node,
   type: PropTypes.string.isRequired,
-  customClass: PropTypes.string
+  customClass: PropTypes.string,
+  dataId: PropTypes.string,
+  dataSelectorId: PropTypes.string
 };

package/es/Card/Card.js

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import { CardHeader_propTypes, CardContent_propTypes, Card_propTypes, CardFooter_propTypes } from './props/propTypes';
-import { Card_defaultProps, CardContent_defaultProps } from './props/defaultProps';
+import { Card_defaultProps, CardHeader_defaultProps, CardContent_defaultProps, CardFooter_defaultProps } from './props/defaultProps';
 import { Container, Box } from '../Layout';
 import { getLibraryConfig } from '../Provider/Config';
 import style from './Card.module.css';
@@ -32,17 +32,20 @@ export class CardHeader extends Component {
     let {
       isScroll,
       children,
-      dataId = 'CardHeader',
-      customClass = ''
+      dataId,
+      dataSelectorId,
+      customClass
     } = this.props;
     return /*#__PURE__*/React.createElement(Box, {
       className: `${isScroll ? style.scroll : style.notScroll} ${customClass}`,
       eleRef: this.getCardHeaderDom,
-      dataId: dataId
+      dataId: dataId,
+      dataSelectorId: dataSelectorId
     }, children);
   }
 }
 CardHeader.propTypes = CardHeader_propTypes;
+CardHeader.defaultProps = CardHeader_defaultProps;
 export class CardContent extends Component {
   render() {
     let {
@@ -52,6 +55,7 @@ export class CardContent extends Component {
       scroll,
       isScrollAttribute,
       dataId,
+      dataSelectorId,
       shrink,
       customClass,
       preventParentScroll
@@ -65,7 +69,8 @@ export class CardContent extends Component {
       isScrollAttribute: isScrollAttribute,
       dataId: dataId,
       shrink: shrink,
-      className: customClass
+      className: customClass,
+      dataSelectorId: dataSelectorId
     }, children);
   }
 }
@@ -216,7 +221,8 @@ export default class Card extends Component {
           isScrollAttribute: child.props.isScrollAttribute,
           dataId: child.props.dataId,
           shrink: child.props.shrink,
-          className: child.props.customClass
+          className: child.props.customClass,
+          dataSelectorId: child.props.dataSelectorId
         }, child.props.children);
       }
       return child;
@@ -239,13 +245,16 @@ export class CardFooter extends Component {
   render() {
     let {
       children,
-      dataId = 'CardFooter',
-      customClass = ''
+      dataId,
+      customClass,
+      dataSelectorId
     } = this.props;
     return /*#__PURE__*/React.createElement(Box, {
       className: `${customClass}`,
-      dataId: dataId
+      dataId: dataId,
+      dataSelectorId: dataSelectorId
     }, children);
   }
 }
-CardFooter.propTypes = CardFooter_propTypes;
+CardFooter.propTypes = CardFooter_propTypes;
+CardFooter.defaultProps = CardFooter_defaultProps;

package/es/Card/props/defaultProps.js

@@ -6,9 +6,20 @@ export const Card_defaultProps = {
   a11y: {},
   isPercentageScroll: false
 };
+export const CardHeader_defaultProps = {
+  dataId: 'CardHeader',
+  customClass: '',
+  dataSelectorId: 'cardHeader'
+};
 export const CardContent_defaultProps = {
   isScrollAttribute: false,
   scroll: 'vertical',
   dataId: 'CardContent',
-  customClass: ''
+  customClass: '',
+  dataSelectorId: 'cardContent'
+};
+export const CardFooter_defaultProps = {
+  dataId: 'CardFooter',
+  customClass: '',
+  dataSelectorId: 'cardFooter'
 };

package/es/CheckBox/CheckBox.js

@@ -41,7 +41,8 @@ export default class CheckBox extends React.Component {
       activeStyle,
       a11y,
       customClass,
-      customProps
+      customProps,
+      dataSelectorId
     } = this.props;
     let {
       CheckBoxProps = {},
@@ -78,7 +79,7 @@ export default class CheckBox extends React.Component {
       "aria-label": ariaLabel,
       "aria-labelledby": ariaLabelledby,
       "aria-hidden": ariaHidden,
-      "data-selector": id
+      "data-selector-id": dataSelectorId || id
     }, CheckBoxProps), /*#__PURE__*/React.createElement(Box, {
       className: `${style.boxContainer} ${style[size]} ${customCBoxSize} ${isFilled ? style.filled : ''}`
     }, /*#__PURE__*/React.createElement("input", {

package/es/CheckBox/props/propTypes.js

@@ -6,6 +6,7 @@ export const propTypes = {
   ariaLabelledby: PropTypes.string,
   checked: PropTypes.bool,
   dataId: PropTypes.string,
+  dataSelectorId: PropTypes.string,
   disabled: PropTypes.bool,
   disabledTitle: PropTypes.string,
   getRef: PropTypes.func,