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

package/src/IconButton/IconButton.js

@@ -1,186 +0,0 @@
-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 (
-      <RippleEffect
-        palette={palette}
-        isActive={isActive}
-        hoverType={hoverType}
-        isDisabled={isDisabled}
-        isNeedEffect={isNeedEffect}
-      >
-        <Container
-          aria-label={ariaLabel}
-          aria-haspopup={ariaHaspopup}
-          aria-expanded={ariaExpanded}
-          aria-controls={ariaControls}
-          aria-labelledby={ariaLabelledby}
-          tagName={needButtonTag ? 'button' : 'div'}
-          isInline
-          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 ? (
-            <Icon
-              isBold={isBold}
-              size={iconSize}
-              name={iconName}
-              iconClass={iconClass}
-            />
-          ) : null}
-          {children ? children : null}
-        </Container>
-      </RippleEffect>
-    );
-  }
-}
-
-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 (__DOCS__) {
-  IconButton.docs = {
-    componentGroup: 'Atom'
-  };
-}

package/src/IconButton/IconButton.module.css

@@ -1,22 +0,0 @@
-.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/src/IconButton/docs/IconButton__default.docs.js

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

@@ -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,57 +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 } = 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

@@ -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: 1.38;
-  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;