@zohodesk/dot 1.0.0-beta.245 → 1.0.0-beta.247

package/es/FormAction/FormAction.module.css

@@ -25,33 +25,58 @@
   padding-bottom: var(--zd_size10);
 }
 
-.largePadding {
+[dir=ltr] .largePadding {
   padding-left: var(--zd_size60);
 }
-.mediumPadding {
+
+[dir=rtl] .largePadding {
+  padding-right: var(--zd_size60);
+}
+[dir=ltr] .mediumPadding {
   padding-left: var(--zd_size50);
 }
-.xmediumPadding {
+[dir=rtl] .mediumPadding {
+  padding-right: var(--zd_size50);
+}
+[dir=ltr] .xmediumPadding {
   padding-left: var(--zd_size30);
 }
-.smallPadding {
+[dir=rtl] .xmediumPadding {
+  padding-right: var(--zd_size30);
+}
+[dir=ltr] .smallPadding {
   padding-left: var(--zd_size25);
 }
-.xsmallPadding {
+[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';
 }
-.largeFooter .marginRight,
-.mediumFooter .marginRight {
+[dir=ltr] .largeFooter .marginRight, [dir=ltr] .mediumFooter .marginRight {
   margin-right: var(--zd_size15);
 }
-.smallFooter .marginRight {
+[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);
+}
 
-.marginRight:last-child {
+[dir=ltr] .marginRight:last-child {
   margin-right: 0;
 }
+
+[dir=rtl] .marginRight:last-child {
+  margin-left: 0;
+}

package/es/FormAction/props/defaultProps.js

@@ -1,4 +1,5 @@
 export const defaultProps = {
   size: 'medium',
-  paddingRightClass: ''
+  paddingRightClass: '',
+  dataSelectorId: 'formAction'
 };

package/es/FormAction/props/propTypes.js

@@ -3,5 +3,6 @@ export const propTypes = {
   children: PropTypes.node,
   paddingLeftSize: PropTypes.oneOf(['large', 'medium', 'xmedium', 'small', 'xsmall']),
   paddingRightClass: PropTypes.string,
-  size: PropTypes.oneOf(['large', 'medium', 'small'])
+  size: PropTypes.oneOf(['large', 'medium', 'small']),
+  dataSelectorId: PropTypes.string
 };

package/es/FreezeLayer/FreezeLayer.js

@@ -119,9 +119,10 @@ export default class FreezeLayer extends Component {
 }
 FreezeLayer.propTypes = propTypes;
 FreezeLayer.defaultProps = defaultProps;
-if (false) {
-  FreezeLayer.docs = {
-    componentGroup: 'Atom',
-    folderName: 'General'
-  };
-}
+
+// if (__DOCS__) {
+//   FreezeLayer.docs = {
+//     componentGroup: 'Atom',
+//     folderName: 'General'
+//   };
+// }

package/es/FreezeLayer/FreezeLayer.module.css

@@ -1,10 +1,14 @@
 .container {
   top: 0;
-  left: 0;
   bottom: 0;
-  right: 0;
   position: absolute;
   overflow: hidden;
+}[dir=ltr] .container {
+  left: 0;
+  right: 0;
+}[dir=rtl] .container {
+  right: 0;
+  left: 0;
 }
 .default {
   background-color: var(--zdt_freezelayer_default_bg);

package/es/IconButton/IconButton.js

@@ -69,6 +69,7 @@ export default class IconButton extends React.Component {
       className,
       iconClass,
       dataId,
+      dataSelectorId,
       eleRef,
       isActive,
       tourId,
@@ -112,6 +113,7 @@ export default class IconButton extends React.Component {
       isCover: false,
       className: `${needButtonTag && btnStyle.buttonReset} ${style.wrapper} ${className ? className : ''} ${isActive ? style[`${palette}_active`] : style[palette]}`,
       dataId: dataId,
+      dataSelectorId: dataSelectorId,
       onClick: this.triggerClick,
       "data-title": title,
       "data-ishtml": dataIsHtml,
@@ -133,8 +135,9 @@ export default class IconButton extends React.Component {
 }
 IconButton.propTypes = propTypes;
 IconButton.defaultProps = defaultProps;
-if (false) {
-  IconButton.docs = {
-    componentGroup: 'Atom'
-  };
-}
+
+// if (__DOCS__) {
+//   IconButton.docs = {
+//     componentGroup: 'Atom'
+//   };
+// }

package/es/IconButton/IconButton.module.css

@@ -3,11 +3,11 @@
 }
 .wrapper {
   height: var(--zd_size28);
-  cursor: pointer;
   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);

package/es/IconButton/props/defaultProps.js

@@ -12,5 +12,6 @@ export const defaultProps = {
   needButtonTag: true,
   a11y: {},
   dataIsHtml: false,
-  customProps: {}
+  customProps: {},
+  dataSelectorId: 'iconButton'
 };

package/es/IconButton/props/propTypes.js

@@ -3,6 +3,7 @@ export const propTypes = {
   children: PropTypes.node,
   className: PropTypes.string,
   dataId: PropTypes.string,
+  dataSelectorId: PropTypes.string,
   eleRef: PropTypes.func,
   hoverType: PropTypes.oneOf(['default', 'border', 'bg']),
   iconClass: PropTypes.string,

package/es/Image/Image.js

@@ -31,8 +31,8 @@ export default class Image extends React.Component {
 }
 Image.propTypes = propTypes;
 Image.defaultProps = defaultProps;
-if (false) {
-  Image.docs = {
-    componentGroup: 'Atom'
-  };
-}
+// if (__DOCS__) {
+//   Image.docs = {
+//     componentGroup: 'Atom'
+//   };
+// }

package/es/ImportantNotes/ImportantNotes.js

@@ -39,9 +39,10 @@ export default class ImportantNotes extends React.Component {
 }
 ImportantNotes.propTypes = propTypes;
 ImportantNotes.defaultProps = defaultProps;
-if (false) {
-  ImportantNotes.docs = {
-    componentGroup: 'Common',
-    folderName: 'General'
-  };
-}
+
+// if (__DOCS__) {
+//   ImportantNotes.docs = {
+//     componentGroup: 'Common',
+//     folderName: 'General'
+//   };
+// }

package/es/ImportantNotes/ImportantNotes.module.css

@@ -8,8 +8,13 @@
   color: var(--zdt_importantnotes_title_text);
 }
 .icon {
-  margin-top: var(--zd_size1);
-  margin-right: var(--zd_size5);
   color: var(--zdt_importantnotes_icon);
   font-size: 0;
+  margin-top: var(--zd_size1);
+}
+[dir=ltr] .icon {
+  margin-right: var(--zd_size5);
+}
+[dir=rtl] .icon {
+  margin-left: var(--zd_size5);
 }

package/es/Link/Link.js

@@ -86,8 +86,9 @@ export default class Link extends React.Component {
 Link.contextType = LinkContext;
 Link.defaultProps = defaultProps;
 Link.propTypes = propTypes;
-if (false) {
-  Link.docs = {
-    componentGroup: 'Atom'
-  };
-}
+
+// if (__DOCS__) {
+//   Link.docs = {
+//     componentGroup: 'Atom'
+//   };
+// }

package/es/Loader/Loader.js

@@ -17,8 +17,9 @@ export default class Loader extends React.Component {
     }));
   }
 }
-if (false) {
-  Loader.docs = {
-    componentGroup: 'Atom'
-  };
-}
+
+// if (__DOCS__) {
+//   Loader.docs = {
+//     componentGroup: 'Atom'
+//   };
+// }

package/es/Loader/Loader.module.css

@@ -1,21 +1,33 @@
 .ajaxLoader {
   position: absolute;
   top: 0;
+}[dir=ltr] .ajaxLoader {
   left: 0;
   right: 0;
+}[dir=rtl] .ajaxLoader {
+  right: 0;
+  left: 0;
 }
 .loader {
-  background-image: var(--zdt_loader_gradient_bg);
   width: 100%;
+  height: 3px;
+  background-image: var(--zdt_loader_gradient_bg);
   background-size: 200% auto;
+}
+[dir=ltr] .loader {
   background-position: 0 100%;
-  animation: loading 3s infinite;
+  animation:  loading-ltr 3s infinite;
+  animation-fill-mode: forwards;
+  animation-timing-function: linear;
+}
+[dir=rtl] .loader {
+  background-position: 100% 100%;
+  animation:  loading-rtl 3s infinite;
   animation-fill-mode: forwards;
   animation-timing-function: linear;
-  height: 3px;
 }
 
-@keyframes loading {
+@keyframes loading-ltr {
   0% {
     background-position: 0 0;
   }
@@ -23,3 +35,12 @@
     background-position: -200% 0;
   }
 }
+
+@keyframes loading-rtl {
+  0% {
+    background-position: 100% 0;
+  }
+  100% {
+    background-position: 300% 0;
+  }
+}

package/es/Message/Message.js

@@ -42,11 +42,13 @@ export default class Message extends React.Component {
 }
 Message.propTypes = propTypes;
 Message.defaultProps = defaultProps;
-if (false) {
-  Message.docs = {
-    componentGroup: 'Atom'
-  };
-}
+
+// if (__DOCS__) {
+//   Message.docs = {
+//     componentGroup: 'Atom'
+//   };
+// }
+
 export function MessageUI(props) {
   function onClose(e) {
     let {
@@ -60,14 +62,16 @@ export function MessageUI(props) {
     type,
     message,
     onClick,
-    i18nKeys
+    i18nKeys,
+    dataSelectorId
   } = props;
   let {
     closeTitle = 'Close'
   } = i18nKeys;
   return /*#__PURE__*/React.createElement("div", {
     className: style.message,
-    "data-id": `show_${type}_message`
+    "data-id": `show_${type}_message`,
+    "data-selector-id": dataSelectorId
   }, /*#__PURE__*/React.createElement("div", {
     className: style.container
   }, /*#__PURE__*/React.createElement("div", {

package/es/Message/Message.module.css

@@ -3,20 +3,31 @@
   top: 0;
   z-index: 1000;
   /*Hook for editor alert*/
-  right: 0;
+  pointer-events: none;
   text-align: center;
+}[dir=ltr] .message {
+  right: 0;
   left: 0;
-  pointer-events: none;
+}[dir=rtl] .message {
+  left: 0;
+  right: 0;
 }
 
 .container {
-  padding: var(--zd_size13) var(--zd_size10) var(--zd_size13) var(--zd_size50);
-  box-shadow: 0 0 19px 1px var(--zdt_message_default_box_shadow);
-  border-radius: 0 0 5px 5px;
   position: relative;
-  background: var(--zdt_message_default_bg);
   display: inline-block;
   pointer-events: initial;
+  box-shadow: 0 0 19px 1px var(--zdt_message_default_box_shadow);
+  border-radius: 0 0 5px 5px;
+  background: var(--zdt_message_default_bg);
+}
+
+[dir=ltr] .container {
+  padding: var(--zd_size13) var(--zd_size10) var(--zd_size13) var(--zd_size50);
+}
+
+[dir=rtl] .container {
+  padding: var(--zd_size13) var(--zd_size50) var(--zd_size13) var(--zd_size10);
 }
 
 .text {
@@ -25,19 +36,34 @@
   word-break: break-word;
   font-size: var(--zd_font_size14);
   vertical-align: middle;
+}
+
+[dir=ltr] .text {
   text-align: left;
 }
 
+[dir=rtl] .text {
+  text-align: right;
+}
+
 .icon {
   position: absolute;
-  left: 0;
   top: 0;
   width: var(--zd_size40);
   display: inline-block;
-  border-bottom-left-radius: 5px;
   height: 100%;
 }
 
+[dir=ltr] .icon {
+  left: 0;
+  border-bottom-left-radius: 5px;
+}
+
+[dir=rtl] .icon {
+  right: 0;
+  border-bottom-right-radius: 5px;
+}
+
 .success {
   composes: icon;
   background: var(--zdt_message_success_bg);
@@ -63,8 +89,15 @@
 .close {
   color: var(--zdt_message_close_text);
   font-size: var(--zd_font_size16);
-  cursor: pointer;
   display: inline-block;
   vertical-align: middle;
+  cursor: pointer;
+}
+
+[dir=ltr] .close {
   margin-left: var(--zd_size10);
+}
+
+[dir=rtl] .close {
+  margin-right: var(--zd_size10);
 }

package/es/Message/props/defaultProps.js

@@ -1,3 +1,4 @@
 export const defaultProps = {
-  i18nKeys: {}
+  i18nKeys: {},
+  dataSelectorId: 'message'
 };

package/es/Message/props/propTypes.js

@@ -5,6 +5,7 @@ export const propTypes = {
   message: PropTypes.string,
   onClick: PropTypes.func,
   showMessage: PropTypes.bool,
+  dataSelectorId: PropTypes.string,
   type: PropTypes.oneOf(['success', 'alert', 'info']),
   i18nKeys: PropTypes.shape({
     closeTitle: PropTypes.string

package/es/MessageBanner/MessageBanner.js

@@ -16,13 +16,15 @@ export default class MessageBanner extends React.Component {
       urlText,
       palette,
       customClass,
-      dataId
+      dataId,
+      dataSelectorId
     } = this.props;
     return /*#__PURE__*/React.createElement(Container, {
       className: `${style[`type_${type}`]} ${style[`palette_${palette}`]} ${customClass}`,
       alignBox: "row",
       isCover: false,
-      dataId: dataId
+      dataId: dataId,
+      dataSelectorId: dataSelectorId
     }, /*#__PURE__*/React.createElement(Box, {
       className: style.content,
       flexible: true
@@ -52,8 +54,9 @@ export default class MessageBanner extends React.Component {
 }
 MessageBanner.defaultProps = defaultProps;
 MessageBanner.propTypes = propTypes;
-if (false) {
-  MessageBanner.docs = {
-    componentGroup: 'Atom'
-  };
-}
+
+// if (__DOCS__) {
+//   MessageBanner.docs = {
+//     componentGroup: 'Atom'
+//   };
+// }

package/es/MessageBanner/MessageBanner.module.css

@@ -1,20 +1,28 @@
-.type_primary {
-}
 .type_secondary {
   max-width: var(--zd_size468);
   border-radius: 3px;
   margin: 0 auto;
 }
 .message {
-  padding: var(--zd_size10) 0;
   color: var(--zdt_messagebanner_text);
-  margin-left: var(--zd_size10);
   composes: dotted from '~@zohodesk/components/lib/common/common.module.css';
+  padding: var(--zd_size10) 0;
+}
+[dir=ltr] .message {
+  margin-left: var(--zd_size10);
+}
+[dir=rtl] .message {
+  margin-right: var(--zd_size10);
 }
 .link {
   color: var(--zdt_messagebanner_link_text);
+}
+[dir=ltr] .link {
   margin-left: var(--zd_size5);
 }
+[dir=rtl] .link {
+  margin-right: var(--zd_size5);
+}
 .message,.link{font-size:  var(--zd_font_size14);}
 .close {
   color: var(--zdt_messagebanner_close_text);

package/es/MessageBanner/props/defaultProps.js

@@ -2,5 +2,6 @@ export const defaultProps = {
   type: 'primary',
   palette: 'default',
   customClass: '',
-  dataId: 'MessageBanner'
+  dataId: 'MessageBanner',
+  dataSelectorId: 'messageBanner'
 };

package/es/MessageBanner/props/propTypes.js

@@ -8,5 +8,6 @@ export const propTypes = {
   palette: PropTypes.oneOf(['default', 'blue', 'white']),
   type: PropTypes.oneOf(['primary', 'secondary']),
   urlText: PropTypes.string,
-  dataId: PropTypes.string
+  dataId: PropTypes.string,
+  dataSelectorId: PropTypes.string
 };

package/es/NewStar/NewStar.js

@@ -62,8 +62,9 @@ export default class NewStar extends React.Component {
 }
 NewStar.propTypes = propTypes;
 NewStar.defaultProps = defaultProps;
-if (false) {
-  NewStar.docs = {
-    componentGroup: 'Atom'
-  };
-}
+
+// if (__DOCS__) {
+//   NewStar.docs = {
+//     componentGroup: 'Atom'
+//   };
+// }