@zohodesk/dot 1.0.0-temp.93 → 1.0.0-test.239

package/es/Image/props/propTypes.js

@@ -0,0 +1,13 @@
+import PropTypes from 'prop-types';
+export const propTypes = {
+  alt: PropTypes.string.isRequired,
+  className: PropTypes.string,
+  dataId: PropTypes.string,
+  eleRef: PropTypes.func,
+  htmlId: PropTypes.string,
+  isCover: PropTypes.bool,
+  onClick: PropTypes.func,
+  original: PropTypes.string,
+  src: PropTypes.string.isRequired,
+  title: PropTypes.string
+};

package/es/ImportantNotes/ImportantNotes.js

@@ -1,5 +1,6 @@
 import React from 'react';
-import PropTypes from 'prop-types';
+import { defaultProps } from './props/defaultProps';
+import { propTypes } from './props/propTypes';
 import { Container, Box } from '@zohodesk/components/lib/Layout';
 import Icon from '@zohodesk/icons/lib/Icon';
 import style from './ImportantNotes.module.css';
@@ -7,7 +8,6 @@ export default class ImportantNotes extends React.Component {
   constructor(props) {
     super(props);
   }
-
   render() {
     let {
       text,
@@ -36,24 +36,9 @@ export default class ImportantNotes extends React.Component {
       className: style.title
     }, text, children ? children : null) : null);
   }
-
 }
-ImportantNotes.propTypes = {
-  children: PropTypes.node,
-  iconClass: PropTypes.string,
-  iconName: PropTypes.string,
-  iconSize: PropTypes.string,
-  isCover: PropTypes.bool,
-  text: PropTypes.string,
-  className: PropTypes.string
-};
-ImportantNotes.defaultProps = {
-  iconName: 'ZD-helpCentre',
-  iconSize: '14',
-  iconClass: '',
-  isCover: true
-};
-
+ImportantNotes.propTypes = propTypes;
+ImportantNotes.defaultProps = defaultProps;
 if (false) {
   ImportantNotes.docs = {
     componentGroup: 'Common',

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/ImportantNotes/props/defaultProps.js

@@ -0,0 +1,6 @@
+export const defaultProps = {
+  iconName: 'ZD-helpCentre',
+  iconSize: '14',
+  iconClass: '',
+  isCover: true
+};

package/es/ImportantNotes/props/propTypes.js

@@ -0,0 +1,10 @@
+import PropTypes from 'prop-types';
+export const propTypes = {
+  children: PropTypes.node,
+  iconClass: PropTypes.string,
+  iconName: PropTypes.string,
+  iconSize: PropTypes.string,
+  isCover: PropTypes.bool,
+  text: PropTypes.string,
+  className: PropTypes.string
+};

package/es/Link/Link.js

@@ -1,7 +1,7 @@
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 import React from 'react';
-import PropTypes from 'prop-types';
+import { defaultProps } from './props/defaultProps';
+import { propTypes } from './props/propTypes';
 import style from './Link.module.css';
 import LinkContext from './LinkContext';
 export default class Link extends React.Component {
@@ -9,7 +9,6 @@ export default class Link extends React.Component {
     super(props, context);
     this.onCallBack = this.onCallBack.bind(this);
   }
-
   onCallBack(urlOutput, href, e) {
     let {
       onClick,
@@ -19,33 +18,25 @@ export default class Link extends React.Component {
     let {
       onCallBack
     } = this.context.options;
-
     if (e && (e.metaKey || e.altKey || e.ctrlKey || e.shiftKey)) {
       e && e.stopPropagation();
       return;
     }
-
     onClick && onClick(e);
-
     if (!hasReload && target != '_blank') {
       e && e.preventDefault();
     }
-
     e && e.stopPropagation();
     !onClick && onCallBack && onCallBack(urlOutput, href, e);
   }
-
   addHttp(url) {
     /* eslint-disable */
     if (!/^(f|ht)tps?:\/\//i.test(url)) {
       url = 'http://' + url;
     }
     /* eslint-enable */
-
-
     return url;
   }
-
   render() {
     let {
       children,
@@ -66,17 +57,16 @@ export default class Link extends React.Component {
     } = this.context.options;
     let urlOutput = href ? href : constructURL(urlName, urlData);
     let option = {};
-
     if (download) {
       option.download = true;
     }
-
     let ignoreKeys = ['children', 'href', 'target', 'urlData', 'urlName', 'className', 'title', 'download', 'rel', 'dataId', 'hasReload', 'customProps', 'option'];
     let others = Object.keys(this.props).filter(key => ignoreKeys.indexOf(key) == -1).reduce((res, key) => {
       res[key] = this.props[key];
       return res;
-    }, {}); //urlOutput = this.addHttp(urlOutput);
+    }, {});
 
+    //urlOutput = this.addHttp(urlOutput);
     return /*#__PURE__*/React.createElement("a", _extends({
       href: isLink && urlOutput ? urlOutput : 'javascript:void(0);',
       target: target,
@@ -89,28 +79,10 @@ export default class Link extends React.Component {
       onClick: this.onCallBack.bind(this, urlOutput, href)
     }, customProps), children);
   }
-
 }
 Link.contextType = LinkContext;
-Link.defaultProps = {
-  rel: 'noopener noreferrer',
-  hasReload: false,
-  customProps: {}
-};
-Link.propTypes = {
-  children: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
-  className: PropTypes.string,
-  dataId: PropTypes.string,
-  hasReload: PropTypes.bool,
-  href: PropTypes.string,
-  rel: PropTypes.string,
-  target: PropTypes.oneOf(['_blank', '_self']),
-  title: PropTypes.string,
-  urlData: PropTypes.object,
-  urlName: PropTypes.string,
-  customProps: PropTypes.object
-};
-
+Link.defaultProps = defaultProps;
+Link.propTypes = propTypes;
 if (false) {
   Link.docs = {
     componentGroup: 'Atom'

package/es/Link/props/defaultProps.js

@@ -0,0 +1,5 @@
+export const defaultProps = {
+  rel: 'noopener noreferrer',
+  hasReload: false,
+  customProps: {}
+};

package/es/Link/props/propTypes.js

@@ -0,0 +1,14 @@
+import PropTypes from 'prop-types';
+export const propTypes = {
+  children: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
+  className: PropTypes.string,
+  dataId: PropTypes.string,
+  hasReload: PropTypes.bool,
+  href: PropTypes.string,
+  rel: PropTypes.string,
+  target: PropTypes.oneOf(['_blank', '_self']),
+  title: PropTypes.string,
+  urlData: PropTypes.object,
+  urlName: PropTypes.string,
+  customProps: PropTypes.object
+};

package/es/Loader/Loader.js

@@ -6,7 +6,6 @@ export default class Loader extends React.Component {
     super(props);
     this.getNextIndex = getZIndex(this);
   }
-
   render() {
     return /*#__PURE__*/React.createElement("div", {
       className: style.ajaxLoader,
@@ -17,9 +16,7 @@ export default class Loader extends React.Component {
       className: style.loader
     }));
   }
-
 }
-
 if (false) {
   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

@@ -1,7 +1,7 @@
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 import React from 'react';
-import PropTypes from 'prop-types';
+import { defaultProps } from './props/defaultProps';
+import { propTypes } from './props/propTypes';
 import Icon from '@zohodesk/icons/lib/Icon';
 import AutoClose from '../actions/AutoClose';
 import style from './Message.module.css';
@@ -12,13 +12,11 @@ export default class Message extends React.Component {
       hideMessage: false
     };
   }
-
   componentWillReceiveProps(nextProps) {
     let {
       showMessage,
       hideMessage
     } = this.props;
-
     if (showMessage !== nextProps.showMessage) {
       if (nextProps.type != 'alert') {
         setTimeout(() => {
@@ -27,46 +25,28 @@ export default class Message extends React.Component {
       }
     }
   }
-
   componentDidMount() {
     let {
       type,
       hideMessage
     } = this.props;
-
     if (type != 'alert') {
       setTimeout(() => {
         hideMessage();
       }, 3000);
     }
   }
-
   render() {
     return /*#__PURE__*/React.createElement(MessageUI, this.props);
   }
-
 }
-Message.propTypes = {
-  dataId: PropTypes.string,
-  hideMessage: PropTypes.func,
-  message: PropTypes.string,
-  onClick: PropTypes.func,
-  showMessage: PropTypes.bool,
-  type: PropTypes.oneOf(['success', 'alert', 'info']),
-  i18nKeys: PropTypes.shape({
-    closeTitle: PropTypes.string
-  })
-};
-Message.defaultProps = {
-  i18nKeys: {}
-};
-
+Message.propTypes = propTypes;
+Message.defaultProps = defaultProps;
 if (false) {
   Message.docs = {
     componentGroup: 'Atom'
   };
 }
-
 export function MessageUI(props) {
   function onClose(e) {
     let {
@@ -76,7 +56,6 @@ export function MessageUI(props) {
     hideMessage && hideMessage(e);
     onClose && onClose(e);
   }
-
   let {
     type,
     message,

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

@@ -0,0 +1,3 @@
+export const defaultProps = {
+  i18nKeys: {}
+};

package/es/Message/props/propTypes.js

@@ -0,0 +1,12 @@
+import PropTypes from 'prop-types';
+export const propTypes = {
+  dataId: PropTypes.string,
+  hideMessage: PropTypes.func,
+  message: PropTypes.string,
+  onClick: PropTypes.func,
+  showMessage: PropTypes.bool,
+  type: PropTypes.oneOf(['success', 'alert', 'info']),
+  i18nKeys: PropTypes.shape({
+    closeTitle: PropTypes.string
+  })
+};

package/es/MessageBanner/MessageBanner.js

@@ -1,5 +1,6 @@
 import React from 'react';
-import PropTypes from 'prop-types';
+import { defaultProps } from './props/defaultProps';
+import { propTypes } from './props/propTypes';
 import Link from '../Link/Link';
 import Icon from '@zohodesk/icons/lib/Icon';
 import { Container, Box } from '@zohodesk/components/lib/Layout';
@@ -48,26 +49,9 @@ export default class MessageBanner extends React.Component {
       size: "35"
     }))) : null);
   }
-
 }
-MessageBanner.defaultProps = {
-  type: 'primary',
-  palette: 'default',
-  customClass: '',
-  dataId: 'MessageBanner'
-};
-MessageBanner.propTypes = {
-  customClass: PropTypes.string,
-  href: PropTypes.string,
-  message: PropTypes.string,
-  onClick: PropTypes.func,
-  onClose: PropTypes.func,
-  palette: PropTypes.oneOf(['default', 'blue', 'white']),
-  type: PropTypes.oneOf(['primary', 'secondary']),
-  urlText: PropTypes.string,
-  dataId: PropTypes.string
-};
-
+MessageBanner.defaultProps = defaultProps;
+MessageBanner.propTypes = propTypes;
 if (false) {
   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

@@ -0,0 +1,6 @@
+export const defaultProps = {
+  type: 'primary',
+  palette: 'default',
+  customClass: '',
+  dataId: 'MessageBanner'
+};

package/es/MessageBanner/props/propTypes.js

@@ -0,0 +1,12 @@
+import PropTypes from 'prop-types';
+export const propTypes = {
+  customClass: PropTypes.string,
+  href: PropTypes.string,
+  message: PropTypes.string,
+  onClick: PropTypes.func,
+  onClose: PropTypes.func,
+  palette: PropTypes.oneOf(['default', 'blue', 'white']),
+  type: PropTypes.oneOf(['primary', 'secondary']),
+  urlText: PropTypes.string,
+  dataId: PropTypes.string
+};

package/es/NewStar/NewStar.js

@@ -1,5 +1,6 @@
 import React from 'react';
-import PropTypes from 'prop-types';
+import { defaultProps } from './props/defaultProps';
+import { propTypes } from './props/propTypes';
 import Icon from '@zohodesk/icons/lib/Icon';
 import { Container } from '@zohodesk/components/lib/Layout';
 import style from './NewStar.module.css';
@@ -56,18 +57,9 @@ export default class NewStar extends React.Component {
       size: "10"
     }));
   }
-
 }
-NewStar.propTypes = {
-  customClass: PropTypes.string,
-  palette: PropTypes.oneOf(['green', 'blue', 'yellow']),
-  position: PropTypes.oneOf(['topRight', 'topLeft', 'bottomRight', 'bottomLeft'])
-};
-NewStar.defaultProps = {
-  customClass: '',
-  position: 'topRight'
-};
-
+NewStar.propTypes = propTypes;
+NewStar.defaultProps = defaultProps;
 if (false) {
   NewStar.docs = {
     componentGroup: 'Atom'

package/es/NewStar/NewStar.module.css

@@ -5,26 +5,53 @@
   width: var(--zd_size21);
 }
 .topLeft {
+  top: 0;
+}
+[dir=ltr] .topLeft {
   transform: translate(-45%, -45%);
   left: 0;
-  top: 0;
 }
-.topRight {
+[dir=rtl] .topLeft {
   transform: translate(45%, -45%);
   right: 0;
+}
+.topRight {
   top: 0;
 }
+[dir=ltr] .topRight {
+  transform: translate(45%, -45%);
+  right: 0;
+}
+[dir=rtl] .topRight {
+  transform: translate(-45%, -45%);
+  left: 0;
+}
 .bottomLeft {
+  bottom: 0;
+}
+[dir=ltr] .bottomLeft {
   transform: translate(-45%, 45%);
   left: 0;
-  bottom: 0;
 }
-.bottomRight {
+[dir=rtl] .bottomLeft {
   transform: translate(45%, 45%);
   right: 0;
+}
+.bottomRight {
   bottom: 0;
 }
-.stars {
+[dir=ltr] .bottomRight {
+  transform: translate(45%, 45%);
+  right: 0;
+}
+[dir=rtl] .bottomRight {
+  transform: translate(-45%, 45%);
+  left: 0;
+}
+[dir=ltr] .stars {
+  animation: twinkle var(--zd_transition4) infinite, star-scale var(--zd_transition10) infinite;
+}
+[dir=rtl] .stars {
   animation: twinkle var(--zd_transition4) infinite, star-scale var(--zd_transition10) infinite;
 }
 .green::before {
@@ -41,10 +68,20 @@
 }
 .starTwo {
   composes: stars;
+}
+[dir=ltr] .starTwo {
+  animation-delay: 0.5s;
+}
+[dir=rtl] .starTwo {
   animation-delay: 0.5s;
 }
 .starThree {
   composes: stars;
+}
+[dir=ltr] .starThree {
+  animation-delay: 1s;
+}
+[dir=rtl] .starThree {
   animation-delay: 1s;
 }
 

package/es/NewStar/props/defaultProps.js

@@ -0,0 +1,4 @@
+export const defaultProps = {
+  customClass: '',
+  position: 'topRight'
+};