@zohodesk/dot 1.0.0-temp-58 → 1.0.0-temp-61

package/src/Image/Image.js

@@ -1,58 +0,0 @@
-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 (
-      <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 (__DOCS__) {
-  Image.docs = {
-    componentGroup: 'Atom'
-  };
-}

package/src/Image/Image.module.css

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

package/src/Image/docs/Image__default.docs.js

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

package/src/ImportantNotes/ImportantNotes.js

@@ -1,58 +0,0 @@
-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 (
-          <Container 
-            isInline={!isCover} 
-            isCover={false} 
-            alignBox='row' 
-            align='top'
-            className={`${style.section} ${className || ''}`}
-          >
-            {iconName ? (
-              <Box className={style.icon} align='start'>
-                <Icon name={iconName} size={iconSize} iconClass={iconClass} />
-              </Box>
-            ) : null}
-            {text || children ? (
-              <Box flexible className={style.title}>
-                {text}
-                {children ? children : null}
-              </Box>
-            ) : null}
-          </Container>
-    );
-  }
-}
-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 (__DOCS__) {
-  ImportantNotes.docs = {
-    componentGroup: 'Common',
-    folderName: 'General'
-  };
-}

package/src/ImportantNotes/ImportantNotes.module.css

@@ -1,15 +0,0 @@
-.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/src/ImportantNotes/docs/ImportantNotes__default.docs.js

@@ -1,22 +0,0 @@
-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 (
-      <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
-      </ImportantNotes>
-    );
-  }
-}
-if (__DOCS__) {
-  ImportantNotes__default.docs = {
-    componentGroup: 'Common',
-    folderName: 'General'
-  };
-}

package/src/Link/Link.js

@@ -1,123 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import style from './Link.module.css';
-import LinkContext from './LinkContext.js';
-
-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 (
-      <a
-        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}
-      </a>
-    );
-  }
-}
-
-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 (__DOCS__) {
-  Link.docs = {
-    componentGroup: 'Atom'
-  };
-}

package/src/Link/Link.module.css

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

package/src/Link/LinkContext.js

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

package/src/Link/docs/Link__default.docs.js

@@ -1,91 +0,0 @@
-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 (
-      <div>
-        <span style={style}>
-          <Link
-            href={null}
-            onClick={this.onConcertURL}
-            rel='noopener noreferrer'
-          >
-            Activities
-          </Link>
-        </span>
-        {/*<span style={style}>
-            <Link
-              type='subscribe'
-              align='center'
-              url='https://payments.zoho.com/html/store/index.html#subscription?serviceId=4501&customId=663fdca528bdf9365ce2f40f33c92dfdf35b4163fc71296705f3c7989596ba8f'
-            >
-              submit
-            </Link>
-          </span>
-          <span style={style}>
-            <Link
-              type='subscribe'
-              align='left'
-              url='https://payments.zoho.com/html/store/index.html#subscription?serviceId=4501&customId=663fdca528bdf9365ce2f40f33c92dfdf35b4163fc71296705f3c7989596ba8f'
-            >
-              submit
-            </Link>
-          </span>
-          <span style={style}>
-            <Link
-              type='subscribe'
-              align='right'
-              url='https://payments.zoho.com/html/store/index.html#subscription?serviceId=4501&customId=663fdca528bdf9365ce2f40f33c92dfdf35b4163fc71296705f3c7989596ba8f'
-            >
-              submit
-            </Link>
-          </span>
-          <span style={style}>
-            <Link
-              type='default'
-              align='center'
-              url='https://payments.zoho.com/html/store/index.html#subscription?serviceId=4501&customId=663fdca528bdf9365ce2f40f33c92dfdf35b4163fc71296705f3c7989596ba8f'
-            />
-          </span>
-          <span style={style}>
-            <Link
-              type='default'
-              align='right'
-              url='https://payments.zoho.com/html/store/index.html#subscription?serviceId=4501&customId=663fdca528bdf9365ce2f40f33c92dfdf35b4163fc71296705f3c7989596ba8f'
-            >
-              submit
-            </Link>
-          </span>
-          <span style={style}>
-            <Link
-              linkType='blank'
-              type='default'
-              url='https://payments.zoho.com/html/store/index.html#subscription?serviceId=4501&customId=663fdca528bdf9365ce2f40f33c92dfdf35b4163fc71296705f3c7989596ba8f'
-            >
-              submit
-            </Link>
-          </span>*/}
-      </div>
-    );
-  }
-}
-
-Link__default.docs = {
-  componentGroup: 'Atom'
-};

package/src/Loader/Loader.js

@@ -1,22 +0,0 @@
-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 (
-      <div className={style.ajaxLoader} style={{ zIndex: `${this.getNextIndex()}` }}>
-        <div className={style.loader} />
-      </div>
-    );
-  }
-}
-
-if (__DOCS__) {
-  Loader.docs = {
-    componentGroup: 'Atom'
-  };
-}

package/src/Loader/Loader.module.css

@@ -1,25 +0,0 @@
-.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/src/Loader/docs/Loader__default.docs.js

@@ -1,21 +0,0 @@
-import React from 'react';
-import Loader from '../Loader';
-export default class Loader__default extends React.Component {
-  constructor(props) {
-    super(props);
-  }
-
-  render() {
-    return (
-      <div style={{ background: 'var(--dot_black)', height: '40px' }}>
-        <Loader />
-      </div>
-    );
-  }
-}
-
-if (__DOCS__) {
-  Loader__default.docs = {
-    componentGroup: 'Atom'
-  };
-}

package/src/Message/Message.js

@@ -1,109 +0,0 @@
-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 <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 (__DOCS__) {
-  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 (
-    <div className={style.message} data-id={`show_${type}_message`}>
-      <div className={style.container}>
-        <div className={style[type]}>
-          <span className={style.tickIcn}>
-            <Icon
-              name={
-                type == 'alert'
-                  ? 'ZD-notifiExclamation'
-                  : type == 'info'
-                  ? 'ZD-info31'
-                  : 'ZD-check'
-              }
-              isBold
-              size='10'
-            />
-          </span>
-        </div>
-
-        <span
-          className={style.text}
-          onClick={onClick}
-          data-id='infoMessage'
-          dangerouslySetInnerHTML={{
-            __html: message
-          }}
-        />
-
-        <span
-          className={style.close}
-          data-title={closeTitle}
-          onClick={onClose}
-          data-id={`close_${type}_message`}
-        >
-          <Icon name='ZD-closee' isBold size='10' />
-        </span>
-      </div>
-    </div>
-  );
-}
-
-export function MessageNew(props) {
-  return <AutoClose {...props} Element={MessageUI} />;
-}

package/src/Message/Message.module.css

@@ -1,70 +0,0 @@
-.message {
-  position: absolute;
-  top: 0;
-  z-index: 1000;
-  /*Hook for editor alert*/
-  right: 0;
-  text-align: center;
-  left: 0;
-  pointer-events: none;
-}
-
-.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;
-}
-
-.text {
-  max-width: var(--zd_size480);
-  display: inline-block;
-  word-break: break-word;
-  font-size: var(--zd_font_size14);
-  vertical-align: middle;
-  text-align: left;
-}
-
-.icon {
-  position: absolute;
-  left: 0;
-  top: 0;
-  width: var(--zd_size40);
-  display: inline-block;
-  border-bottom-left-radius: 5px;
-  height: 100%;
-}
-
-.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);
-  cursor: pointer;
-  display: inline-block;
-  vertical-align: middle;
-  margin-left: var(--zd_size10);
-}