@zohodesk/dot 1.0.0-beta.212 → 1.0.0-beta.213

package/es/IconButton/IconButton.js

@@ -0,0 +1,188 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Icon from '@zohodesk/icons/lib/Icon';
+import { Container } from '@zohodesk/components/lib/Layout';
+import btnStyle from '@zohodesk/components/lib/semantic/Button/semanticButton.module.css';
+import RippleEffect from '@zohodesk/components/lib/RippleEffect/RippleEffect';
+import style from './IconButton.module.css';
+export default class IconButton extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      isPressed: false
+    };
+    this.handleToggle = this.handleToggle.bind(this);
+    this.triggerClick = this.triggerClick.bind(this);
+    this.triggerMouseDown = this.triggerMouseDown.bind(this);
+    this.triggerMouseOver = this.triggerMouseOver.bind(this);
+    this.onBlur = this.onBlur.bind(this);
+  }
+
+  handleToggle(e) {
+    if (e.key === ' ' || e.key === 'Enter' || e.key === 'Spacebar') {
+      e.preventDefault();
+      this.triggerClick(e);
+      this.triggerMouseDown(e);
+    }
+  }
+
+  triggerClick(e) {
+    let {
+      onClick,
+      isDisabled
+    } = this.props;
+    !isDisabled ? (onClick && onClick(e), this.setState({
+      isPressed: true
+    })) : null;
+  }
+
+  triggerMouseOver(e) {
+    let {
+      onMouseOver,
+      isDisabled
+    } = this.props;
+    !isDisabled ? (onMouseOver && onMouseOver(e), this.setState({
+      isPressed: true
+    })) : null;
+  }
+
+  triggerMouseDown(e) {
+    let {
+      onMouseDown,
+      isDisabled
+    } = this.props;
+    !isDisabled ? (onMouseDown && onMouseDown(e), this.setState({
+      isPressed: true
+    })) : null;
+  }
+
+  onBlur(e) {
+    let {
+      isDisabled
+    } = this.props;
+    !isDisabled ? this.setState({
+      isPressed: false
+    }) : null;
+  }
+
+  render() {
+    let {
+      palette,
+      iconSize,
+      iconName,
+      className,
+      iconClass,
+      dataId,
+      eleRef,
+      isActive,
+      tourId,
+      isDisabled,
+      children,
+      hoverType,
+      title,
+      isBold,
+      isNeedEffect,
+      needButtonTag,
+      a11y,
+      dataIsHtml
+    } = this.props;
+    let {
+      isPressed
+    } = this.state;
+    let {
+      ariaHaspopup,
+      ariaExpanded,
+      ariaLabel,
+      ariaControls,
+      ariaLabelledby
+    } = a11y;
+    return /*#__PURE__*/React.createElement(RippleEffect, {
+      palette: palette,
+      isActive: isActive,
+      hoverType: hoverType,
+      isDisabled: isDisabled,
+      isNeedEffect: isNeedEffect
+    }, /*#__PURE__*/React.createElement(Container, {
+      "aria-label": ariaLabel,
+      "aria-haspopup": ariaHaspopup,
+      "aria-expanded": ariaExpanded,
+      "aria-controls": ariaControls,
+      "aria-labelledby": ariaLabelledby,
+      tagName: needButtonTag ? 'button' : 'div',
+      isInline: true,
+      tourId: tourId,
+      align: "both",
+      isCover: false,
+      className: `${needButtonTag && btnStyle.buttonReset} ${style.wrapper} ${className ? className : ''} ${isActive ? style[`${palette}_active`] : style[palette]}`,
+      dataId: dataId,
+      onClick: this.triggerClick,
+      "data-title": title,
+      "data-ishtml": dataIsHtml,
+      eleRef: eleRef,
+      onMouseDown: this.triggerMouseDown,
+      onMouseEnter: this.triggerMouseOver,
+      "aria-pressed": isPressed,
+      onKeyDown: this.handleToggle,
+      onFocus: this.triggerMouseOver,
+      onBlur: this.onBlur,
+      disabled: isDisabled
+    }, iconName ? /*#__PURE__*/React.createElement(Icon, {
+      isBold: isBold,
+      size: iconSize,
+      name: iconName,
+      iconClass: iconClass
+    }) : null, children ? children : null));
+  }
+
+}
+IconButton.propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.string,
+  dataId: PropTypes.string,
+  eleRef: PropTypes.func,
+  hoverType: PropTypes.oneOf(['default', 'border', 'bg']),
+  iconClass: PropTypes.string,
+  iconName: PropTypes.string,
+  iconSize: PropTypes.string,
+  isActive: PropTypes.bool,
+  isBold: PropTypes.bool,
+  isDisabled: PropTypes.bool,
+  isNeedEffect: PropTypes.bool,
+  onClick: PropTypes.func,
+  onMouseDown: PropTypes.func,
+  onMouseOver: PropTypes.func,
+  palette: PropTypes.oneOf(['primary', 'primaryFilled', 'default']),
+  title: PropTypes.string,
+  tourId: PropTypes.string,
+  isNeedEffect: PropTypes.bool,
+  needButtonTag: PropTypes.bool,
+  a11y: PropTypes.shape({
+    ariaHaspopup: PropTypes.bool,
+    ariaExpanded: PropTypes.bool,
+    ariaLabel: PropTypes.string,
+    ariaControls: PropTypes.string,
+    ariaLabelledby: PropTypes.string
+  }),
+  dataIsHtml: PropTypes.bool
+};
+IconButton.defaultProps = {
+  palette: 'default',
+  iconSize: '13',
+  className: '',
+  iconClass: '',
+  dataId: 'iconContainer',
+  isActive: false,
+  isDisabled: false,
+  hoverType: 'default',
+  isBold: false,
+  isNeedEffect: true,
+  needButtonTag: true,
+  a11y: {},
+  dataIsHtml: false
+};
+
+if (false) {
+  IconButton.docs = {
+    componentGroup: 'Atom'
+  };
+}

package/es/IconButton/IconButton.module.css

@@ -0,0 +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);
+}

package/es/Image/Image.js

@@ -0,0 +1,53 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import style from './Image.module.css';
+export default class Image extends React.Component {
+  render() {
+    let {
+      alt,
+      src,
+      className,
+      isCover,
+      title,
+      onClick,
+      dataId,
+      htmlId,
+      eleRef,
+      original
+    } = this.props;
+    return /*#__PURE__*/React.createElement("img", {
+      src: src,
+      alt: alt,
+      "data-title": title,
+      "data-id": dataId,
+      className: ` ${className} ${isCover ? style.imgFullSize : style.imgMaxFullSize} `,
+      onClick: onClick,
+      id: htmlId,
+      ref: eleRef,
+      "data-original": original
+    });
+  }
+
+}
+Image.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
+};
+Image.defaultProps = {
+  isCover: false,
+  className: ''
+};
+
+if (false) {
+  Image.docs = {
+    componentGroup: 'Atom'
+  };
+}

package/es/Image/Image.module.css

@@ -0,0 +1,11 @@
+.imgFullSize{
+    height:100%;
+    width:100%
+}
+.imgMaxFullSize{
+    max-height:100%;
+    max-width:100%
+}
+.imgFullSize, .imgMaxFullSize{
+    font-size: 12px
+}

package/es/ImportantNotes/ImportantNotes.js

@@ -0,0 +1,60 @@
+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
+    } = this.props;
+    return /*#__PURE__*/React.createElement(Container, {
+      isInline: !isCover,
+      isCover: false,
+      alignBox: "row",
+      align: "top",
+      className: style.section
+    }, 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
+};
+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/Link/Link.js

@@ -0,0 +1,118 @@
+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';
+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/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
+  }));
+}