@zohodesk/dot 1.0.0-temp-62 → 1.0.0-temp-65

package/src/IconButton/docs/IconButton__default.docs.js

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

package/src/Image/Image.js

@@ -0,0 +1,58 @@
+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

@@ -0,0 +1,11 @@
+.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

@@ -0,0 +1,18 @@
+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

@@ -0,0 +1,57 @@
+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 (
+          <Container 
+            isInline={!isCover} 
+            isCover={false} 
+            alignBox='row' 
+            align='top'
+            className={style.section}
+          >
+            {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
+};
+ImportantNotes.defaultProps = {
+  iconName: 'ZD-helpCentre',
+  iconSize: '14',
+  iconClass: '',
+  isCover: true
+};
+
+if (__DOCS__) {
+  ImportantNotes.docs = {
+    componentGroup: 'Common',
+    folderName: 'General'
+  };
+}

package/src/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/src/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 (
+      <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

@@ -0,0 +1,123 @@
+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

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

package/src/Link/LinkContext.js

@@ -0,0 +1,9 @@
+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

@@ -0,0 +1,91 @@
+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

@@ -0,0 +1,22 @@
+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

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

@@ -0,0 +1,21 @@
+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_bg_black)', height: '40px' }}>
+        <Loader />
+      </div>
+    );
+  }
+}
+
+if (__DOCS__) {
+  Loader__default.docs = {
+    componentGroup: 'Atom'
+  };
+}