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

package/es/IconButton/IconButton.module.css

@@ -0,0 +1,22 @@
+.varClass {
+  --iconColor: var(--zdt_iconButton_icon_black);
+}
+.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);
+}
+.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/IconButton/docs/IconButton__default.docs.js

@@ -0,0 +1,219 @@
+import React, { Component } from 'react';
+import IconButton from '../IconButton';
+export default class IconButton__default extends Component {
+  render() {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+      style: {
+        margin: '10px'
+      }
+    }, /*#__PURE__*/React.createElement("h3", {
+      style: {
+        margin: '30px'
+      }
+    }, "isBold"), /*#__PURE__*/React.createElement("span", {
+      style: {
+        margin: '30px'
+      }
+    }, /*#__PURE__*/React.createElement(IconButton, {
+      iconSize: "12",
+      iconName: "ZD-commentNew",
+      palette: "primary",
+      isBold: true
+    })), /*#__PURE__*/React.createElement("span", {
+      style: {
+        margin: '30px'
+      }
+    }, /*#__PURE__*/React.createElement(IconButton, {
+      isBold: true,
+      iconSize: "12",
+      iconName: "ZD-more",
+      palette: "secondary"
+    })), /*#__PURE__*/React.createElement("span", {
+      style: {
+        margin: '30px'
+      }
+    }, /*#__PURE__*/React.createElement(IconButton, {
+      iconSize: "12",
+      iconName: "ZD-commentNew",
+      palette: "primaryFilled",
+      isBold: true
+    }))), /*#__PURE__*/React.createElement("div", {
+      style: {
+        margin: '10px'
+      }
+    }, /*#__PURE__*/React.createElement("h3", {
+      style: {
+        margin: '30px'
+      }
+    }, "Palette"), /*#__PURE__*/React.createElement("span", {
+      style: {
+        margin: '30px'
+      }
+    }, /*#__PURE__*/React.createElement(IconButton, {
+      iconSize: "12",
+      iconName: "ZD-commentNew",
+      palette: "primary",
+      onClick: () => {
+        console.log('click');
+      },
+      onMouseDown: () => {
+        console.log('Down');
+      },
+      onMouseOver: () => {
+        console.log('over');
+      }
+    })), /*#__PURE__*/React.createElement("span", {
+      style: {
+        margin: '30px'
+      }
+    }, /*#__PURE__*/React.createElement(IconButton, {
+      iconSize: "12",
+      iconName: "ZD-more"
+    })), /*#__PURE__*/React.createElement("span", {
+      style: {
+        margin: '30px'
+      }
+    }, /*#__PURE__*/React.createElement(IconButton, {
+      iconSize: "12",
+      iconName: "ZD-commentNew",
+      palette: "primaryFilled"
+    }))), /*#__PURE__*/React.createElement("div", {
+      style: {
+        margin: '10px'
+      }
+    }, /*#__PURE__*/React.createElement("h3", {
+      style: {
+        margin: '30px'
+      }
+    }, "isActive"), /*#__PURE__*/React.createElement("span", {
+      style: {
+        margin: '30px'
+      }
+    }, /*#__PURE__*/React.createElement(IconButton, {
+      iconSize: "12",
+      iconName: "ZD-commentNew",
+      palette: "primary",
+      isActive: true
+    })), /*#__PURE__*/React.createElement("span", {
+      style: {
+        margin: '30px'
+      }
+    }, /*#__PURE__*/React.createElement(IconButton, {
+      iconSize: "12",
+      iconName: "ZD-more",
+      isActive: true
+    })), /*#__PURE__*/React.createElement("span", {
+      style: {
+        margin: '30px'
+      }
+    }, /*#__PURE__*/React.createElement(IconButton, {
+      iconSize: "12",
+      iconName: "ZD-commentNew",
+      palette: "primaryFilled",
+      isActive: true
+    }))), /*#__PURE__*/React.createElement("div", {
+      style: {
+        margin: '10px'
+      }
+    }, /*#__PURE__*/React.createElement("h3", {
+      style: {
+        margin: '30px'
+      }
+    }, "Border On Hover"), /*#__PURE__*/React.createElement("span", {
+      style: {
+        margin: '30px'
+      }
+    }, /*#__PURE__*/React.createElement(IconButton, {
+      iconSize: "12",
+      iconName: "ZD-commentNew",
+      palette: "primary",
+      hoverType: "border"
+    })), /*#__PURE__*/React.createElement("span", {
+      style: {
+        margin: '30px'
+      }
+    }, /*#__PURE__*/React.createElement(IconButton, {
+      iconSize: "12",
+      iconName: "ZD-more",
+      hoverType: "border"
+    }))), /*#__PURE__*/React.createElement("div", {
+      style: {
+        margin: '10px'
+      }
+    }, /*#__PURE__*/React.createElement("h3", {
+      style: {
+        margin: '30px'
+      }
+    }, "isDisabled"), /*#__PURE__*/React.createElement("span", {
+      style: {
+        margin: '30px'
+      }
+    }, /*#__PURE__*/React.createElement(IconButton, {
+      iconSize: "12",
+      iconName: "ZD-commentNew",
+      palette: "primary",
+      isDisabled: true
+    })), /*#__PURE__*/React.createElement("span", {
+      style: {
+        margin: '30px'
+      }
+    }, /*#__PURE__*/React.createElement(IconButton, {
+      iconSize: "12",
+      iconName: "ZD-more",
+      isDisabled: true
+    })), /*#__PURE__*/React.createElement("span", {
+      style: {
+        margin: '30px'
+      }
+    }, /*#__PURE__*/React.createElement(IconButton, {
+      iconSize: "12",
+      iconName: "ZD-commentNew",
+      palette: "primaryFilled",
+      isDisabled: true
+    }))), /*#__PURE__*/React.createElement("div", {
+      style: {
+        margin: '10px'
+      }
+    }, /*#__PURE__*/React.createElement("h3", {
+      style: {
+        margin: '30px'
+      }
+    }, "Tooltip"), /*#__PURE__*/React.createElement("span", {
+      style: {
+        margin: '30px'
+      }
+    }, /*#__PURE__*/React.createElement(IconButton, {
+      iconSize: "12",
+      iconName: "ZD-commentNew",
+      palette: "primary",
+      isDisabled: true,
+      title: "primary"
+    })), /*#__PURE__*/React.createElement("span", {
+      style: {
+        margin: '30px'
+      }
+    }, /*#__PURE__*/React.createElement(IconButton, {
+      iconSize: "12",
+      iconName: "ZD-more",
+      isDisabled: true,
+      title: "default"
+    })), /*#__PURE__*/React.createElement("span", {
+      style: {
+        margin: '30px'
+      }
+    }, /*#__PURE__*/React.createElement(IconButton, {
+      iconSize: "12",
+      iconName: "ZD-commentNew",
+      palette: "primaryFilled",
+      isDisabled: true,
+      title: "primaryFilled"
+    }))));
+  }
+
+}
+
+if (false) {
+  IconButton__default.docs = {
+    componentGroup: 'Atom'
+  };
+}

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/Image/docs/Image__default.docs.js

@@ -0,0 +1,22 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import Image from '../Image';
+export default class Image__default extends Component {
+  render() {
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        height: '120px',
+        width: '120px'
+      }
+    }, /*#__PURE__*/React.createElement(Image, {
+      src: "https://hjemly.dk/wp-content/uploads/2016/05/facebook-default-no-profile-pic.jpg"
+    }));
+  }
+
+}
+
+if (false) {
+  Image__default.docs = {
+    componentGroup: 'Atom'
+  };
+}

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,15 @@
+.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 {
+  margin-top: var(--zd_size1);
+  margin-right: var(--zd_size5);
+  color: var(--zdt_importantnotes_icon);
+  font-size: 0;
+}

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 || 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,25 @@
+.ajaxLoader {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+}
+.loader {
+  background-image: var(--zdt_loader_gradient_bg);
+  width: 100%;
+  background-size: 200% auto;
+  background-position: 0 100%;
+  animation: loading 3s infinite;
+  animation-fill-mode: forwards;
+  animation-timing-function: linear;
+  height: 3px;
+}
+
+@keyframes loading {
+  0% {
+    background-position: 0 0;
+  }
+  100% {
+    background-position: -200% 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'
+  };
+}