@zohodesk/dot 1.0.0-temp-190 → 1.0.0-temp-191

package/es/FormAction/FormAction.module.css

@@ -1,101 +1,101 @@
-.varClass {
-  --footerBg: var(--zdt_formAction_bg);
-  --footerBorder: var(--zdt_formAction_border);
-}
-
-.wrapperDiv {
-  position: relative;
-  z-index: 1;
-  composes: varClass;
-}
-
-.footerParent {
-  position: relative;
-  /* css:theme-validation:ignore */
-  /* css:theme-validation:ignore */
-  background-color: var(--footerBg);
-  border-top: solid 1px var(--footerBorder);
-}
-
-.largeFooter {
-  padding-top: var(--zd_size24) ;
-  padding-bottom: var(--zd_size24) ;
-}
-
-.mediumFooter {
-  padding-top: var(--zd_size20) ;
-  padding-bottom: var(--zd_size20) ;
-}
-
-.smallFooter {
-  padding-top: var(--zd_size10) ;
-  padding-bottom: var(--zd_size10) ;
-}
-
-[dir=ltr] .largePadding {
-  padding-left: var(--zd_size60) ;
-}
-
-[dir=rtl] .largePadding {
-  padding-right: var(--zd_size60) ;
-}
-
-[dir=ltr] .mediumPadding {
-  padding-left: var(--zd_size50) ;
-}
-
-[dir=rtl] .mediumPadding {
-  padding-right: var(--zd_size50) ;
-}
-
-[dir=ltr] .xmediumPadding {
-  padding-left: var(--zd_size30) ;
-}
-
-[dir=rtl] .xmediumPadding {
-  padding-right: var(--zd_size30) ;
-}
-
-[dir=ltr] .smallPadding {
-  padding-left: var(--zd_size25) ;
-}
-
-[dir=rtl] .smallPadding {
-  padding-right: var(--zd_size25) ;
-}
-
-[dir=ltr] .xsmallPadding {
-  padding-left: var(--zd_size20) ;
-}
-
-[dir=rtl] .xsmallPadding {
-  padding-right: var(--zd_size20) ;
-}
-
-.marginRight {
-  composes: dinblk from '~@zohodesk/components/lib/common/common.module.css';
-}
-
-[dir=ltr] .largeFooter .marginRight, [dir=ltr] .mediumFooter .marginRight {
-  margin-right: var(--zd_size15) ;
-}
-
-[dir=rtl] .largeFooter .marginRight, [dir=rtl] .mediumFooter .marginRight {
-  margin-left: var(--zd_size15) ;
-}
-
-[dir=ltr] .smallFooter .marginRight {
-  margin-right: var(--zd_size12) ;
-}
-
-[dir=rtl] .smallFooter .marginRight {
-  margin-left: var(--zd_size12) ;
-}
-
-[dir=ltr] .marginRight:last-child {
-  margin-right: 0 ;
-}
-
-[dir=rtl] .marginRight:last-child {
-  margin-left: 0 ;
+.varClass {
+  --footerBg: var(--zdt_formAction_bg);
+  --footerBorder: var(--zdt_formAction_border);
+}
+
+.wrapperDiv {
+  position: relative;
+  z-index: 1;
+  composes: varClass;
+}
+
+.footerParent {
+  position: relative;
+  /* css:theme-validation:ignore */
+  /* css:theme-validation:ignore */
+  background-color: var(--footerBg);
+  border-top: solid 1px var(--footerBorder);
+}
+
+.largeFooter {
+  padding-top: var(--zd_size24) ;
+  padding-bottom: var(--zd_size24) ;
+}
+
+.mediumFooter {
+  padding-top: var(--zd_size20) ;
+  padding-bottom: var(--zd_size20) ;
+}
+
+.smallFooter {
+  padding-top: var(--zd_size10) ;
+  padding-bottom: var(--zd_size10) ;
+}
+
+[dir=ltr] .largePadding {
+  padding-left: var(--zd_size60) ;
+}
+
+[dir=rtl] .largePadding {
+  padding-right: var(--zd_size60) ;
+}
+
+[dir=ltr] .mediumPadding {
+  padding-left: var(--zd_size50) ;
+}
+
+[dir=rtl] .mediumPadding {
+  padding-right: var(--zd_size50) ;
+}
+
+[dir=ltr] .xmediumPadding {
+  padding-left: var(--zd_size30) ;
+}
+
+[dir=rtl] .xmediumPadding {
+  padding-right: var(--zd_size30) ;
+}
+
+[dir=ltr] .smallPadding {
+  padding-left: var(--zd_size25) ;
+}
+
+[dir=rtl] .smallPadding {
+  padding-right: var(--zd_size25) ;
+}
+
+[dir=ltr] .xsmallPadding {
+  padding-left: var(--zd_size20) ;
+}
+
+[dir=rtl] .xsmallPadding {
+  padding-right: var(--zd_size20) ;
+}
+
+.marginRight {
+  composes: dinblk from '~@zohodesk/components/lib/common/common.module.css';
+}
+
+[dir=ltr] .largeFooter .marginRight, [dir=ltr] .mediumFooter .marginRight {
+  margin-right: var(--zd_size15) ;
+}
+
+[dir=rtl] .largeFooter .marginRight, [dir=rtl] .mediumFooter .marginRight {
+  margin-left: var(--zd_size15) ;
+}
+
+[dir=ltr] .smallFooter .marginRight {
+  margin-right: var(--zd_size12) ;
+}
+
+[dir=rtl] .smallFooter .marginRight {
+  margin-left: var(--zd_size12) ;
+}
+
+[dir=ltr] .marginRight:last-child {
+  margin-right: 0 ;
+}
+
+[dir=rtl] .marginRight:last-child {
+  margin-left: 0 ;
 }

package/es/IconButton/IconButton.module.css

@@ -1,22 +1,22 @@
-.varClass {
-  --iconColor: var(--zdt_iconButton_icon_black);
-}
-.wrapper {
-  height: var(--zd_size28) ;
-  width: var(--zd_size28) ;
-  composes: offSelection from '~@zohodesk/components/lib/common/common.module.css';
-  composes: varClass;
-  color: var(--iconColor);
-  cursor: pointer;
-}
-.primary {
-  --iconColor: var(--zdt_iconButton_icon_primary);
-}
-.primary:hover {
-  --iconColor: var(--zdt_iconButton_icon_primaryHover);
-}
-.primary_active,
-.primaryFilled,
-.primaryFilled_active {
-  --iconColor: var(--zdt_iconButton_icon_primaryActive);
-}
+.varClass {
+  --iconColor: var(--zdt_iconButton_icon_black);
+}
+.wrapper {
+  height: var(--zd_size28) ;
+  width: var(--zd_size28) ;
+  composes: offSelection from '~@zohodesk/components/lib/common/common.module.css';
+  composes: varClass;
+  color: var(--iconColor);
+  cursor: pointer;
+}
+.primary {
+  --iconColor: var(--zdt_iconButton_icon_primary);
+}
+.primary:hover {
+  --iconColor: var(--zdt_iconButton_icon_primaryHover);
+}
+.primary_active,
+.primaryFilled,
+.primaryFilled_active {
+  --iconColor: var(--zdt_iconButton_icon_primaryActive);
+}

package/es/MessageBanner/MessageBanner.js

@@ -40,10 +40,12 @@ export default class MessageBanner extends React.Component {
       href: href,
       onClick: onClick,
       className: style.link,
-      target: "_blank"
+      target: "_blank",
+      dataId: `${dataId}_link`
     }, urlText)))), onClose ? /*#__PURE__*/React.createElement(Box, {
-      className: style.close,
-      onClick: onClose
+      className: style.ose,
+      onClick: onClose,
+      dataId: `${dataId}_close`
     }, /*#__PURE__*/React.createElement(Container, {
       align: "both"
     }, /*#__PURE__*/React.createElement(Icon, {

package/es/TagWithIcon/TagWithIcon.module.css

@@ -1,67 +1,67 @@
-.varClass {
-  --tag_bg_color: var(--zdt_tagWithIconGrey_bg);
-  --tag_text_color: var(--zdt_tagWithIconGrey_text);
-  --tag_border_color: var(--zdt_tagWithIconGrey_border);
-  --tag_small_fontSize: var(--zd_font_size10);
-  --tag_large_fontSize: var(--zd_font_size12);
-}
-
-.wrapper {
-  composes: varClass;
-  color: var(--tag_text_color);
-  background-color: var(--tag_bg_color);
-}
-
-.small,
-.large {
-  max-width: 100% ;
-  height: var(--zd_size18) ;
-}
-
-.small, .large {
-  border: 1px solid var(--tag_border_color);
-  border-radius: var(--zd_size4);
-  padding: 0 var(--zd_size6) ;
-}
-
-.bold {
-  composes: semibold from '~@zohodesk/components/lib/common/common.module.css';
-}
-
-.small_text {
-  font-size: var(--tag_small_fontSize);
-}
-
-.large_text {
-  font-size: var(--tag_large_fontSize);
-}
-
-.text {
-  composes: dotted from '~@zohodesk/components/lib/common/common.module.css';
-}
-
-[dir=ltr] .iconSpace {
-  margin-right: var(--zd_size4) ;
-}
-
-[dir=rtl] .iconSpace {
-  margin-left: var(--zd_size4) ;
-}
-
-.yellow {
-  --tag_bg_color: var(--zdt_tagWithIconYellow_bg);
-  --tag_text_color: var(--zdt_tagWithIconYellow_text);
-  --tag_border_color: var(--zdt_tagWithIconYellow_border);
-}
-
-.grey {
-  --tag_bg_color: var(--zdt_tagWithIconGrey_bg);
-  --tag_text_color: var(--zdt_tagWithIconGrey_text);
-  --tag_border_color: var(--zdt_tagWithIconGrey_border);
-}
-
-.blue {
-  --tag_bg_color: var(--zdt_tagWithIconBlue_bg);
-  --tag_text_color: var(--zdt_tagWithIconBlue_text);
-  --tag_border_color: var(--zdt_tagWithIconBlue_border);
+.varClass {
+  --tag_bg_color: var(--zdt_tagWithIconGrey_bg);
+  --tag_text_color: var(--zdt_tagWithIconGrey_text);
+  --tag_border_color: var(--zdt_tagWithIconGrey_border);
+  --tag_small_fontSize: var(--zd_font_size10);
+  --tag_large_fontSize: var(--zd_font_size12);
+}
+
+.wrapper {
+  composes: varClass;
+  color: var(--tag_text_color);
+  background-color: var(--tag_bg_color);
+}
+
+.small,
+.large {
+  max-width: 100% ;
+  height: var(--zd_size18) ;
+}
+
+.small, .large {
+  border: 1px solid var(--tag_border_color);
+  border-radius: var(--zd_size4);
+  padding: 0 var(--zd_size6) ;
+}
+
+.bold {
+  composes: semibold from '~@zohodesk/components/lib/common/common.module.css';
+}
+
+.small_text {
+  font-size: var(--tag_small_fontSize);
+}
+
+.large_text {
+  font-size: var(--tag_large_fontSize);
+}
+
+.text {
+  composes: dotted from '~@zohodesk/components/lib/common/common.module.css';
+}
+
+[dir=ltr] .iconSpace {
+  margin-right: var(--zd_size4) ;
+}
+
+[dir=rtl] .iconSpace {
+  margin-left: var(--zd_size4) ;
+}
+
+.yellow {
+  --tag_bg_color: var(--zdt_tagWithIconYellow_bg);
+  --tag_text_color: var(--zdt_tagWithIconYellow_text);
+  --tag_border_color: var(--zdt_tagWithIconYellow_border);
+}
+
+.grey {
+  --tag_bg_color: var(--zdt_tagWithIconGrey_bg);
+  --tag_text_color: var(--zdt_tagWithIconGrey_text);
+  --tag_border_color: var(--zdt_tagWithIconGrey_border);
+}
+
+.blue {
+  --tag_bg_color: var(--zdt_tagWithIconBlue_bg);
+  --tag_text_color: var(--zdt_tagWithIconBlue_text);
+  --tag_border_color: var(--zdt_tagWithIconBlue_border);
 }

package/es/alert/AlertHeader/AlertHeader.js

@@ -34,7 +34,8 @@ export default class AlertHeader extends Component {
       alignBox: "row",
       className: `${style.container} ${style[palette]}`,
       isCover: false,
-      wrap: "wrap"
+      wrap: "wrap",
+      dataId: `${dataId}_alertHeader`
     }, needIcon ? /*#__PURE__*/React.createElement("div", {
       className: style.iconContainer
     }, /*#__PURE__*/React.createElement(Icon, {

package/es/alert/AlertHeader/__tests__/__snapshots__/AlertHeader.spec.js.snap

@@ -4,9 +4,9 @@ exports[`AlertHeader rendering the defult props 1`] = `
 <DocumentFragment>
   <div
     class="container danger flex rowdir wrap vCenter"
-    data-id="containerComponent"
+    data-id="alertHeader_alertHeader"
     data-selector-id="container"
-    data-test-id="containerComponent"
+    data-test-id="alertHeader_alertHeader"
   >
     <div
       class="iconContainer"

package/es/avatar/AvatarClose/AvatarClose.js

@@ -18,7 +18,8 @@ export default class AvatarClose extends React.Component {
       isClose,
       onClick,
       customProps,
-      dataSelectorId
+      dataSelectorId,
+      dataId
     } = this.props;
     let {
       AvatarCloseProps = {},
@@ -27,6 +28,8 @@ export default class AvatarClose extends React.Component {
     return /*#__PURE__*/React.createElement("div", {
       className: style.container,
       "data-selector-id": dataSelectorId,
+      "data-id": dataId,
+      "data-test-id": dataId,
       ...AvatarCloseProps
     }, /*#__PURE__*/React.createElement(Avatar, {
       src: src,
@@ -36,7 +39,9 @@ export default class AvatarClose extends React.Component {
       ...AvatarProps
     }), isClose && /*#__PURE__*/React.createElement("span", {
       className: style.pop,
-      onClick: onClick
+      onClick: onClick,
+      "data-id": `${dataId}_close`,
+      "data-test-id": `${dataId}_close`
     }, /*#__PURE__*/React.createElement("span", {
       className: style.icon
     }, /*#__PURE__*/React.createElement(Icon, {

package/es/avatar/AvatarClose/__tests__/__snapshots__/AvatarClose.spec.js.snap

@@ -4,7 +4,9 @@ exports[`AvatarClose rendering the defult props 1`] = `
 <DocumentFragment>
   <div
     class="container"
+    data-id="avatarClose"
     data-selector-id="avatarClose"
+    data-test-id="avatarClose"
   >
     <div
       class="avatar medium medium circle primary black border   "

package/es/avatar/AvatarClose/props/defaultProps.js

@@ -2,5 +2,6 @@ export const defaultProps = {
   isClose: false,
   size: 'medium',
   customProps: {},
-  dataSelectorId: 'avatarClose'
+  dataSelectorId: 'avatarClose',
+  dataId: 'avatarClose'
 };

package/es/avatar/AvatarClose/props/propTypes.js

@@ -10,5 +10,6 @@ export const propTypes = {
     AvatarCloseProps: PropTypes.object,
     AvatarProps: PropTypes.object
   }),
-  dataSelectorId: PropTypes.string
+  dataSelectorId: PropTypes.string,
+  dataId: PropTypes.string
 };

package/es/avatar/AvatarIcon/AvatarIcon.module.css

@@ -1,58 +1,58 @@
-.varClass {
-  --icon_color: var(--zdt_avatarIcon_dark_icon);
-  --border_color: var(--zdt_avatarIcon_default_border);
-  --border_hoverColor: var(--zdt_avatarIcon_default_hover_border);
-}
-.container {
-  vertical-align: middle;
-  composes: varClass;
-  border-width: 1px;
-  border-style: solid;
-  border-radius: 50%;
-  border-color: var(--border_color)
-}
-.borderOnHover:hover, .borderOnActive {
-  border-color: var(--border_hoverColor)
-}
-.default {
-  --border_color: var(--zdt_avatarIcon_default_border);
-  --border_hoverColor: var(--zdt_avatarIcon_default_hover_border);
-}
-.primary {
-  --border_color: var(--zdt_avatarIcon_primary_border);
-  --border_hoverColor: var(--zdt_avatarIcon_primary_hover_border);
-}
-.secondary {
-  --border_color: var(--zdt_avatarIcon_secondary_border);
-  --border_hoverColor: var(--zdt_avatarIcon_secondary_hover_border);
-}
-.success {
-  --border_color: var(--zdt_avatarIcon_success_border);
-  --border_hoverColor: var(--zdt_avatarIcon_success_hover_border);
-}
-.danger {
-  --border_color: var(--zdt_avatarIcon_danger_border);
-  --border_hoverColor: var(--zdt_avatarIcon_danger_hover_border);
-}
-.iconColor {
-  color: var(--icon_color);
-}
-.icon_danger {
-  --icon_color: var(--zdt_avatarIcon_danger_icon);
-}
-.icon_primary {
-  --icon_color: var(--zdt_avatarIcon_primary_icon);
-}
-.icon_grey {
-  --icon_color: var(--zdt_avatarIcon_grey_icon);
-}
-.icon_success {
-  --icon_color: var(--zdt_avatarIcon_success_icon);
-}
-.icon_smoke18 {
-  --icon_color: var(--zdt_avatarIcon_smoke_icon);
-}
-.icon_dark {
-  --icon_color: var(--zdt_avatarIcon_dark_icon);
-}
-
+.varClass {
+  --icon_color: var(--zdt_avatarIcon_dark_icon);
+  --border_color: var(--zdt_avatarIcon_default_border);
+  --border_hoverColor: var(--zdt_avatarIcon_default_hover_border);
+}
+.container {
+  vertical-align: middle;
+  composes: varClass;
+  border-width: 1px;
+  border-style: solid;
+  border-radius: 50%;
+  border-color: var(--border_color)
+}
+.borderOnHover:hover, .borderOnActive {
+  border-color: var(--border_hoverColor)
+}
+.default {
+  --border_color: var(--zdt_avatarIcon_default_border);
+  --border_hoverColor: var(--zdt_avatarIcon_default_hover_border);
+}
+.primary {
+  --border_color: var(--zdt_avatarIcon_primary_border);
+  --border_hoverColor: var(--zdt_avatarIcon_primary_hover_border);
+}
+.secondary {
+  --border_color: var(--zdt_avatarIcon_secondary_border);
+  --border_hoverColor: var(--zdt_avatarIcon_secondary_hover_border);
+}
+.success {
+  --border_color: var(--zdt_avatarIcon_success_border);
+  --border_hoverColor: var(--zdt_avatarIcon_success_hover_border);
+}
+.danger {
+  --border_color: var(--zdt_avatarIcon_danger_border);
+  --border_hoverColor: var(--zdt_avatarIcon_danger_hover_border);
+}
+.iconColor {
+  color: var(--icon_color);
+}
+.icon_danger {
+  --icon_color: var(--zdt_avatarIcon_danger_icon);
+}
+.icon_primary {
+  --icon_color: var(--zdt_avatarIcon_primary_icon);
+}
+.icon_grey {
+  --icon_color: var(--zdt_avatarIcon_grey_icon);
+}
+.icon_success {
+  --icon_color: var(--zdt_avatarIcon_success_icon);
+}
+.icon_smoke18 {
+  --icon_color: var(--zdt_avatarIcon_smoke_icon);
+}
+.icon_dark {
+  --icon_color: var(--zdt_avatarIcon_dark_icon);
+}
+

package/es/common/dot_boxShadow.module.css

@@ -35,4 +35,6 @@
 
     /* desktop notification */
     --zd_bs_desktopnotification_container: var(--zd_bs_contrast_outline, 0 4px 20px var(--zdt_desktopnotification_box_shadow));
+
+
 }

package/es/dropdown/ToggleDropDown/ToggleDropDown.js

@@ -638,6 +638,7 @@ export class ToggleDropDown extends Component {
             isFetchingOptions: isFetchingOptions
           }
         },
+        dataId: `${dataId}_dropbox`,
         ...DropBoxProps,
         onClose: this.handleTogglePopup
       }, /*#__PURE__*/React.createElement(React.Fragment, null, isSearch ? /*#__PURE__*/React.createElement(Box, {
@@ -656,6 +657,7 @@ export class ToggleDropDown extends Component {
         } //search
         // onKeyDown={this.handleKeyDown}
         ,
+        dataId: `${dataId}_search`,
         a11y: {
           role: 'combobox',
           ariaOwns: ariaTitleId,