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

package/src/IconButton/IconButton.js

@@ -0,0 +1,189 @@
+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,
+      role
+    } = 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}
+          role={role}
+          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,
+    role: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

@@ -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/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;