@zohodesk/dot 1.0.0-temp.213 → 1.0.0-temp.30

package/es/ImportantNotes/ImportantNotes.js

@@ -0,0 +1,62 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Container, Box } from '@zohodesk/components/lib/Layout';
+import Icon from '@zohodesk/icons/lib/Icon';
+import style from './ImportantNotes.module.css';
+export default class ImportantNotes extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    let {
+      text,
+      iconName,
+      iconSize,
+      children,
+      iconClass,
+      isCover,
+      className
+    } = this.props;
+    return /*#__PURE__*/React.createElement(Container, {
+      isInline: !isCover,
+      isCover: false,
+      alignBox: "row",
+      align: "top",
+      className: `${style.section} ${className || ''}`
+    }, iconName ? /*#__PURE__*/React.createElement(Box, {
+      className: style.icon,
+      align: "start"
+    }, /*#__PURE__*/React.createElement(Icon, {
+      name: iconName,
+      size: iconSize,
+      iconClass: iconClass
+    })) : null, text || children ? /*#__PURE__*/React.createElement(Box, {
+      flexible: true,
+      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
+};
+
+if (false) {
+  ImportantNotes.docs = {
+    componentGroup: 'Common',
+    folderName: 'General'
+  };
+}

package/es/ImportantNotes/ImportantNotes.module.css

@@ -0,0 +1,20 @@
+.section {
+  background: var(--zdt_importantnotes_bg);
+  padding: var(--zd_size5) var(--zd_size10);
+}
+.title {
+  font-size: var(--zd_font_size13);
+  line-height: var(--zd_font_size18);
+  color: var(--zdt_importantnotes_title_text);
+}
+.icon {
+  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/docs/ImportantNotes__default.docs.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import ImportantNotes from '../ImportantNotes';
+export default class ImportantNotes__default extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    return /*#__PURE__*/React.createElement(ImportantNotes, {
+      text: "Forwarded threads are always marked as private regardless of this setting.Forwarded threads are always marked as private regardless of this setting.Forwarded threads are always marked as private regardless of this setting.Forwarded threads are always marked as private regardless of this setting.Forwarded threads are always marked as private regardless of this setting."
+    }, "Children");
+  }
+
+}
+
+if (false) {
+  ImportantNotes__default.docs = {
+    componentGroup: 'Common',
+    folderName: 'General'
+  };
+}

package/es/Link/Link.js

@@ -0,0 +1,118 @@
+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 style from './Link.module.css';
+import LinkContext from './LinkContext';
+export default class Link extends React.Component {
+  constructor(props, context) {
+    super(props, context);
+    this.onCallBack = this.onCallBack.bind(this);
+  }
+
+  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;
+    }
+
+    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,
+      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;
+    }
+
+    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,
+  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
+};
+
+if (false) {
+  Link.docs = {
+    componentGroup: 'Atom'
+  };
+}

package/es/Link/Link.module.css

@@ -0,0 +1,4 @@
+.container {
+  text-decoration: none;
+  color: inherit;
+}

package/es/Link/LinkContext.js

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

package/es/Link/docs/Link__default.docs.js

@@ -0,0 +1,36 @@
+import React, { Component } from 'react';
+import Link from '../Link';
+export default class Link__default extends React.Component {
+  constructor(props) {
+    super(props);
+    this.onCallBack = this.onCallBack.bind(this);
+    this.onConcertURL = this.onConcertURL.bind(this);
+  }
+
+  onCallBack(value) {
+    console.log(value);
+  }
+
+  onConcertURL(name, obj) {
+    console.log(name, obj, 'onConcertURL');
+  }
+
+  render() {
+    let style = {
+      width: '200px',
+      marginBottom: '20px',
+      display: 'block'
+    };
+    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", {
+      style: style
+    }, /*#__PURE__*/React.createElement(Link, {
+      href: null,
+      onClick: this.onConcertURL,
+      rel: "noopener noreferrer"
+    }, "Activities")));
+  }
+
+}
+Link__default.docs = {
+  componentGroup: 'Atom'
+};

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/Loader/docs/Loader__default.docs.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import Loader from '../Loader';
+export default class Loader__default extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        background: 'var(--dot_black)',
+        height: '40px'
+      }
+    }, /*#__PURE__*/React.createElement(Loader, null));
+  }
+
+}
+
+if (false) {
+  Loader__default.docs = {
+    componentGroup: 'Atom'
+  };
+}

package/es/Message/Message.js

@@ -0,0 +1,124 @@
+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 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/Message/docs/Message__default.docs.js

@@ -0,0 +1,55 @@
+import React from 'react';
+import Message from '../Message';
+export default class Message__default extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    let style = {
+      position: 'relative',
+      height: '100px',
+      overflow: 'hidden'
+    };
+    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+      className: style.m20,
+      style: style
+    }, /*#__PURE__*/React.createElement(Message, {
+      type: "success",
+      message: "The status has been successfully updated",
+      showMessage: true,
+      hideMessage: () => {}
+    })), /*#__PURE__*/React.createElement("div", {
+      className: style.m20,
+      style: style
+    }, /*#__PURE__*/React.createElement(Message, {
+      type: "alert",
+      message: "The status has been successfully updated",
+      showMessage: true,
+      hideMessage: () => {}
+    })), /*#__PURE__*/React.createElement("div", {
+      className: style.m20,
+      style: style
+    }, /*#__PURE__*/React.createElement(Message, {
+      type: "info",
+      message: "The status has been successfully updated",
+      showMessage: true,
+      hideMessage: () => {}
+    })), /*#__PURE__*/React.createElement("div", {
+      className: style.m20,
+      style: style
+    }, /*#__PURE__*/React.createElement(Message, {
+      type: "info",
+      message: "The status has been successfully updated <h1>asdf</h1>",
+      showMessage: true,
+      hideMessage: () => {}
+    })));
+  }
+
+}
+
+if (false) {
+  Message__default.docs = {
+    componentGroup: 'Atom'
+  };
+}