@zohodesk/dot 1.0.0-beta.22 → 1.0.0-beta.220

package/es/Link/Link.js

@@ -1,130 +1,114 @@
-import _extends from 'babel-runtime/helpers/extends';
-import _Object$keys from 'babel-runtime/core-js/object/keys';
-import _Object$getPrototypeOf from 'babel-runtime/core-js/object/get-prototype-of';
-import _classCallCheck from 'babel-runtime/helpers/classCallCheck';
-import _createClass from 'babel-runtime/helpers/createClass';
-import _possibleConstructorReturn from 'babel-runtime/helpers/possibleConstructorReturn';
-import _inherits from 'babel-runtime/helpers/inherits';
+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); }
+
 import React from 'react';
 import PropTypes from 'prop-types';
 import style from './Link.module.css';
-import LinkContext from './LinkContext.js';
+import LinkContext from './LinkContext';
+export default class Link extends React.Component {
+  constructor(props, context) {
+    super(props, context);
+    this.onCallBack = this.onCallBack.bind(this);
+  }
 
-var Link = function (_React$Component) {
-  _inherits(Link, _React$Component);
+  onCallBack(urlOutput, href, e) {
+    let {
+      onClick,
+      hasReload,
+      target
+    } = this.props;
+    let {
+      onCallBack
+    } = this.context.options;
+
+    if (e && (e.metaKey || e.altKey || e.ctrlKey || e.shiftKey)) {
+      e && e.stopPropagation();
+      return;
+    }
 
-  function Link(props, context) {
-    _classCallCheck(this, Link);
+    onClick && onClick(e);
 
-    var _this = _possibleConstructorReturn(this, (Link.__proto__ || _Object$getPrototypeOf(Link)).call(this, props, context));
+    if (!hasReload && target != '_blank') {
+      e && e.preventDefault();
+    }
 
-    _this.onCallBack = _this.onCallBack.bind(_this);
-    return _this;
+    e && e.stopPropagation();
+    !onClick && onCallBack && onCallBack(urlOutput, href, e);
   }
 
-  _createClass(Link, [{
-    key: 'onCallBack',
-    value: function onCallBack(urlOutput, href, e) {
-      var _props = this.props,
-          onClick = _props.onClick,
-          hasReload = _props.hasReload,
-          target = _props.target;
-      var onCallBack = this.context.options.onCallBack;
-
-
-      onClick && onClick(e);
-      if (!hasReload && target != '_blank') {
-        e && e.preventDefault();
-      }
-      e && e.stopPropagation();
-      !onClick && onCallBack && onCallBack(urlOutput, href, e);
-    }
-  }, {
-    key: 'addHttp',
-    value: function addHttp(url) {
-      /* eslint-disable */
-      if (!/^(f|ht)tps?:\/\//i.test(url)) {
-        url = 'http://' + url;
-      }
-      /* eslint-enable */
-      return url;
+  addHttp(url) {
+    /* eslint-disable */
+    if (!/^(f|ht)tps?:\/\//i.test(url)) {
+      url = 'http://' + url;
     }
-  }, {
-    key: 'render',
-    value: function render() {
-      var _this2 = this;
+    /* eslint-enable */
 
-      var _props2 = this.props,
-          children = _props2.children,
-          href = _props2.href,
-          target = _props2.target,
-          urlData = _props2.urlData,
-          urlName = _props2.urlName,
-          className = _props2.className,
-          title = _props2.title,
-          download = _props2.download,
-          rel = _props2.rel,
-          dataId = _props2.dataId;
-      var _context$options = this.context.options,
-          isLink = _context$options.isLink,
-          constructURL = _context$options.constructURL;
 
-      var urlOutput = href ? href : constructURL(urlName, urlData);
-      var hrefUrl = '';
-      var option = {};
-      if (download) {
-        option.download = true;
-      }
-      var ignoreKeys = ['children', 'href', 'target', 'urlData', 'urlName', 'className', 'title', 'download', 'rel', 'dataId', 'hasReload'];
-      var others = _Object$keys(this.props).filter(function (key) {
-        return ignoreKeys.indexOf(key) == -1;
-      }).reduce(function (res, key) {
-        res[key] = _this2.props[key];
-        return res;
-      }, {});
+    return url;
+  }
 
-      //urlOutput = this.addHttp(urlOutput);
-      return React.createElement(
-        'a',
-        _extends({
-          href: isLink && urlOutput ? urlOutput : 'javascript:void(0);',
-          target: target,
-          'data-title': title,
-          className: style.container + '  ' + (className ? className : '')
-        }, option, {
-          rel: rel,
-          'data-id': dataId
-        }, others, {
-          onClick: this.onCallBack.bind(this, urlOutput, href)
-        }),
-        children
-      );
+  render() {
+    let {
+      children,
+      href,
+      target,
+      urlData,
+      urlName,
+      className,
+      title,
+      download,
+      rel,
+      dataId,
+      customProps
+    } = this.props;
+    let {
+      isLink,
+      constructURL
+    } = this.context.options;
+    let urlOutput = href ? href : constructURL(urlName, urlData);
+    let option = {};
+
+    if (download) {
+      option.download = true;
     }
-  }]);
-
-  return Link;
-}(React.Component);
-
-export default Link;
 
+    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);
+
+    return /*#__PURE__*/React.createElement("a", _extends({
+      href: isLink && urlOutput ? urlOutput : 'javascript:void(0);',
+      target: target,
+      "data-title": title,
+      className: `${style.container}  ${className ? className : ''}`
+    }, option, {
+      rel: rel,
+      "data-id": dataId
+    }, others, {
+      onClick: this.onCallBack.bind(this, urlOutput, href)
+    }, customProps), children);
+  }
 
+}
 Link.contextType = LinkContext;
-
 Link.defaultProps = {
   rel: 'noopener noreferrer',
-  hasReload: false
+  hasReload: false,
+  customProps: {}
 };
 Link.propTypes = {
-  children: PropTypes.string,
+  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,
-  hasReload: PropTypes.bool
+  customProps: PropTypes.object
 };
 
 if (false) {

package/es/Link/LinkContext.js

@@ -1,11 +1,9 @@
 import React from 'react';
-var LinkContext = React.createContext({
+let LinkContext = /*#__PURE__*/React.createContext({
   options: {
     onCallBack: null,
     isLink: true,
-    constructURL: function constructURL() {
-      return false;
-    }
+    constructURL: () => false
   }
 });
 export default LinkContext;

package/es/Loader/Loader.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import { getZIndex } from '@zohodesk/components/lib/Provider/ZindexProvider';
+import style from './Loader.module.css';
+export default class Loader extends React.Component {
+  constructor(props) {
+    super(props);
+    this.getNextIndex = getZIndex(this);
+  }
+
+  render() {
+    return /*#__PURE__*/React.createElement("div", {
+      className: style.ajaxLoader,
+      style: {
+        zIndex: `${this.getNextIndex()}`
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      className: style.loader
+    }));
+  }
+
+}
+
+if (false) {
+  Loader.docs = {
+    componentGroup: 'Atom'
+  };
+}

package/es/Loader/Loader.module.css

@@ -0,0 +1,46 @@
+.ajaxLoader {
+  position: absolute;
+  top: 0;
+}[dir=ltr] .ajaxLoader {
+  left: 0;
+  right: 0;
+}[dir=rtl] .ajaxLoader {
+  right: 0;
+  left: 0;
+}
+.loader {
+  width: 100%;
+  height: 3px;
+  background-image: var(--zdt_loader_gradient_bg);
+  background-size: 200% auto;
+}
+[dir=ltr] .loader {
+  background-position: 0 100%;
+  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;
+}
+
+@keyframes loading-ltr {
+  0% {
+    background-position: 0 0;
+  }
+  100% {
+    background-position: -200% 0;
+  }
+}
+
+@keyframes loading-rtl {
+  0% {
+    background-position: 100% 0;
+  }
+  100% {
+    background-position: 300% 0;
+  }
+}

package/es/Message/Message.js

@@ -0,0 +1,124 @@
+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); }
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import Icon from '@zohodesk/icons/lib/Icon';
+import AutoClose from '../actions/AutoClose';
+import style from './Message.module.css';
+export default class Message extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      hideMessage: false
+    };
+  }
+
+  componentWillReceiveProps(nextProps) {
+    let {
+      showMessage,
+      hideMessage
+    } = this.props;
+
+    if (showMessage !== nextProps.showMessage) {
+      if (nextProps.type != 'alert') {
+        setTimeout(() => {
+          hideMessage();
+        }, 3000);
+      }
+    }
+  }
+
+  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: {}
+};
+
+if (false) {
+  Message.docs = {
+    componentGroup: 'Atom'
+  };
+}
+
+export function MessageUI(props) {
+  function onClose(e) {
+    let {
+      hideMessage,
+      onClose
+    } = props;
+    hideMessage && hideMessage(e);
+    onClose && onClose(e);
+  }
+
+  let {
+    type,
+    message,
+    onClick,
+    i18nKeys
+  } = props;
+  let {
+    closeTitle = 'Close'
+  } = i18nKeys;
+  return /*#__PURE__*/React.createElement("div", {
+    className: style.message,
+    "data-id": `show_${type}_message`
+  }, /*#__PURE__*/React.createElement("div", {
+    className: style.container
+  }, /*#__PURE__*/React.createElement("div", {
+    className: style[type]
+  }, /*#__PURE__*/React.createElement("span", {
+    className: style.tickIcn
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: type == 'alert' ? 'ZD-notifiExclamation' : type == 'info' ? 'ZD-info31' : 'ZD-check',
+    isBold: true,
+    size: "10"
+  }))), /*#__PURE__*/React.createElement("span", {
+    className: style.text,
+    onClick: onClick,
+    "data-id": "infoMessage",
+    dangerouslySetInnerHTML: {
+      __html: message
+    }
+  }), /*#__PURE__*/React.createElement("span", {
+    className: style.close,
+    "data-title": closeTitle,
+    onClick: onClose,
+    "data-id": `close_${type}_message`
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: "ZD-closee",
+    isBold: true,
+    size: "10"
+  }))));
+}
+export function MessageNew(props) {
+  return /*#__PURE__*/React.createElement(AutoClose, _extends({}, props, {
+    Element: MessageUI
+  }));
+}

package/es/Message/Message.module.css

@@ -0,0 +1,103 @@
+.message {
+  position: absolute;
+  top: 0;
+  z-index: 1000;
+  /*Hook for editor alert*/
+  pointer-events: none;
+  text-align: center;
+}[dir=ltr] .message {
+  right: 0;
+  left: 0;
+}[dir=rtl] .message {
+  left: 0;
+  right: 0;
+}
+
+.container {
+  position: relative;
+  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 {
+  max-width: var(--zd_size480);
+  display: inline-block;
+  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;
+  top: 0;
+  width: var(--zd_size40);
+  display: inline-block;
+  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);
+}
+
+.alert {
+  composes: icon;
+  background: var(--zdt_message_alert_bg);
+}
+
+.info {
+  composes: icon;
+  background: var(--zdt_message_info_bg);
+}
+
+.tickIcn {
+  color: var(--zdt_message_tickicon);
+  font-size: var(--zd_font_size16);
+  position: absolute;
+  composes: middleBoth from '~@zohodesk/components/lib/common/common.module.css';
+}
+
+.close {
+  color: var(--zdt_message_close_text);
+  font-size: var(--zd_font_size16);
+  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/MessageBanner/MessageBanner.js

@@ -0,0 +1,75 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Link from '../Link/Link';
+import Icon from '@zohodesk/icons/lib/Icon';
+import { Container, Box } from '@zohodesk/components/lib/Layout';
+import style from './MessageBanner.module.css';
+export default class MessageBanner extends React.Component {
+  render() {
+    let {
+      type,
+      message,
+      onClose,
+      href,
+      onClick,
+      urlText,
+      palette,
+      customClass,
+      dataId
+    } = this.props;
+    return /*#__PURE__*/React.createElement(Container, {
+      className: `${style[`type_${type}`]} ${style[`palette_${palette}`]} ${customClass}`,
+      alignBox: "row",
+      isCover: false,
+      dataId: dataId
+    }, /*#__PURE__*/React.createElement(Box, {
+      className: style.content,
+      flexible: true
+    }, /*#__PURE__*/React.createElement(Container, {
+      alignBox: "row",
+      align: "both"
+    }, /*#__PURE__*/React.createElement(Box, {
+      className: style.message,
+      adjust: true,
+      shrink: true,
+      "data-title": message
+    }, message), href && /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Link, {
+      href: href,
+      onClick: onClick,
+      className: style.link,
+      target: "_blank"
+    }, urlText)))), onClose ? /*#__PURE__*/React.createElement(Box, {
+      className: style.close,
+      onClick: onClose
+    }, /*#__PURE__*/React.createElement(Container, {
+      align: "both"
+    }, /*#__PURE__*/React.createElement(Icon, {
+      name: "ZD-closee",
+      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
+};
+
+if (false) {
+  MessageBanner.docs = {
+    componentGroup: 'Atom'
+  };
+}

package/es/MessageBanner/MessageBanner.module.css

@@ -0,0 +1,46 @@
+.type_secondary {
+  max-width: var(--zd_size468);
+  border-radius: 3px;
+  margin: 0 auto;
+}
+.message {
+  color: var(--zdt_messagebanner_text);
+  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);
+  cursor: pointer;
+}
+.type_primary .close:hover {
+  background: var(--zdt_messagebanner_close_hover_bg);
+}
+.close:hover {
+  color: var(--zdt_messagebanner_close_hover_text);
+}
+
+.palette_default {
+  background: var(--zdt_messagebanner_default_bg);
+}
+.palette_blue {
+  background: var(--zdt_messagebanner_blue_bg);
+}
+.palette_white {
+  background: var(--zdt_messagebanner_white_text);
+}