@zohodesk/dot 1.0.0-beta.25 → 1.0.0-beta.251

package/src/FreezeLayer/FreezeLayer.js

@@ -1,130 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { Container } from '@zohodesk/components/lib/Layout';
-import VelocityAnimationGroup from '@zohodesk/components/lib/VelocityAnimation/VelocityAnimationGroup/VelocityAnimationGroup';
-import style from './FreezeLayer.module.css';
-import { Shortcut } from '../utils/KeyboardApi';
-
-export default class FreezeLayer extends Component {
-  constructor(props) {
-    super(props);
-    this.state = { isActive: props.isActive, isChildActive: false };
-  }
-
-  // componentDidMount(){
-  //   Shortcut && Shortcut.setState(false);
-  // }
-  //
-  // componentWillUnmount(){
-  //   Shortcut && Shortcut.setState(true);
-  // }
-
-  componentDidUpdate(prevProps) {
-    let { isActive } = this.props;
-    if (isActive != prevProps.isActive) {
-      if (isActive) {
-        Shortcut && Shortcut.setState(false);
-      } else {
-        Shortcut && Shortcut.setState(true);
-      }
-    }
-  }
-
-  render() {
-    let {
-      children,
-      align,
-      childAnimationName,
-      palette,
-      onClick,
-      animationName,
-      zIndex,
-      isActive,
-      runOnMount,
-      forwardRef,
-      isSvgMask
-    } = this.props;
-    return (
-      <VelocityAnimationGroup
-        name={animationName && animationName}
-        isActive={isActive}
-        runOnMount={runOnMount}
-      >
-        <div
-          className={`
-              ${style.container} ${style[`index${zIndex}`]}  ${!isSvgMask ? style[palette] : ''}
-            `}
-          onClick={onClick ? onClick : null}
-          ref={forwardRef}
-        >
-          {children && (
-            <React.Fragment>
-              {childAnimationName ? (
-                <VelocityAnimationGroup
-                  name={childAnimationName}
-                  isActive
-                  runOnMount
-                  enterDelay={palette === 'plain' ? 0 : 300}
-                  component={Container}
-                  alignBox='row'
-                  align={align}
-                  dataId='reactFreezeLayer'
-                >
-                  {children}
-                </VelocityAnimationGroup>
-              ) : isSvgMask ? (
-                  <React.Fragment>
-                    {children}
-                  </React.Fragment>
-                ) : (
-                <Container
-                  alignBox='row'
-                  align={align}
-                  dataId='reactFreezeLayer'
-                >
-                  {children}
-                </Container>
-              )}
-            </React.Fragment>
-          )}
-        </div>
-      </VelocityAnimationGroup>
-    );
-  }
-}
-
-let animationValues = [
-  'fade',
-  'shrink',
-  'expand',
-  'slideRight',
-  'slideDown',
-  'flyDown'
-];
-
-FreezeLayer.propTypes = {
-  align: PropTypes.oneOf(['horizontal', 'vertical', 'both']),
-  animationName: PropTypes.oneOf(animationValues),
-  childAnimationName: PropTypes.oneOf(animationValues),
-  children: PropTypes.node,
-  forwardRef: PropTypes.object,
-  isActive: PropTypes.bool,
-  onClick: PropTypes.oneOfType([PropTypes.func, PropTypes.bool]),
-  palette: PropTypes.oneOf(['dark', 'default', 'darkLight', 'plain', 'snow']),
-  runOnMount: PropTypes.bool,
-  zIndex: PropTypes.oneOf(['3', '5', '7', '10']),
-  isSvgMask : PropTypes.bool
-};
-FreezeLayer.defaultProps = {
-  isActive: false,
-  palette: 'default',
-  zIndex: '5',
-  isSvgMask : false
-};
-
-if (__DOCS__) {
-  FreezeLayer.docs = {
-    componentGroup: 'Atom',
-    folderName: 'General'
-  };
-}

package/src/FreezeLayer/FreezeLayer.module.css

@@ -1,37 +0,0 @@
-.container {
-  top: 0;
-  left: 0;
-  bottom: 0;
-  right: 0;
-  position: absolute;
-}
-.default {
-  background-color: rgba(0, 0, 0, 0.45);
-}
-.dark {
-  background-color: rgba(0, 0, 0, 0.9);
-}
-.darkLight {
-  background-color: var(--zd_bg_dark16);
-}
-.plain {
-  background-color: transparent;
-}
-.snow {
-  background-color: rgba(30, 38, 51, 0.4);
-}
-.index3 {
-  z-index: 3;
-}
-.index5 {
-  z-index: 5;
-}
-.index7 {
-  z-index: 7;
-}
-.index10 {
-  z-index: 10;
-}
-.delay {
-  transition-delay: 0.2s;
-}

package/src/FreezeLayer/docs/FreezeLayer__dark.docs.js

@@ -1,53 +0,0 @@
-import React, { Component } from 'react';
-import FreezeLayer from '../FreezeLayer';
-import Button from '@zohodesk/components/lib/Button/Button';
-
-
-export default class FreezeLayer__dark extends Component {
-  constructor(props) {
-    super(props);
-    this.state = { view: false };
-    this.toggle = this.toggle.bind(this);
-  }
-
-  toggle() {
-    this.setState({ view: !this.state.view });
-  }
-
-  render() {
-    let { view } = this.state;
-    return (
-      <div>
-        <Button
-          text='Click to view FreezeLayer'
-          palette='secondary'
-          onClick={this.toggle}
-        />
-        <FreezeLayer
-          align='both'
-          palette='dark'
-          isActive={view}
-          onClick={this.toggle}
-          animationName='fade'
-          childAnimationName='expand'
-        >
-          <div
-            style={{
-              color: 'var(--dot_text_black)',
-              fontSize: '40px',
-              padding: '100px',
-              background: 'var(--dot_bg_white)'
-            }}
-          >
-            Im children
-          </div>
-        </FreezeLayer>
-      </div>
-    );
-  }
-}
-if (__DOCS__) {
-  FreezeLayer__dark.docs = {
-    componentGroup: 'Atom'
-  };
-}

package/src/FreezeLayer/docs/FreezeLayer__default.docs.js

@@ -1,51 +0,0 @@
-import React, { Component } from 'react';
-import FreezeLayer from '../FreezeLayer';
-import Button from '@zohodesk/components/lib/Button/Button';
-
-export default class FreezeLayer__default extends Component {
-  constructor(props) {
-    super(props);
-    this.state = { view: false };
-    this.toggle = this.toggle.bind(this);
-  }
-
-  toggle() {
-    this.setState({ view: !this.state.view });
-  }
-
-  render() {
-    let { view } = this.state;
-    return (
-      <div>
-        <Button
-          text='Click to view FreezeLayer'
-          palette='secondary'
-          onClick={this.toggle}
-        />
-        <FreezeLayer
-          align='both'
-          isActive={view}
-          onClick={this.toggle}
-          animationName='expand'
-        >
-          <span
-            style={{
-              color: 'var(--dot_text_black)',
-              fontSize: '40px',
-              padding: '100px',
-              background: 'var(--dot_bg_white)'
-            }}
-          >
-            Im children
-          </span>
-        </FreezeLayer>
-      </div>
-    );
-  }
-}
-
-if (__DOCS__) {
-  FreezeLayer__default.docs = {
-    componentGroup: 'Atom'
-  };
-}

package/src/IconButton/IconButton.js

@@ -1,70 +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 { CssProvider } from '@zohodesk/components/lib/CssProvider';
-import style from './IconButton.module.css';
-
-export default class IconButton extends React.Component {
-  render() {
-    let {
-      palette,
-      iconSize,
-      iconName,
-      className,
-      iconClass,
-      dataId,
-      onClick,
-      dataTitle,
-      eleRef,
-      isActive,
-      tourId,
-      isDisabled
-    } = this.props;
-    return (
-      <Container
-        isInline
-        tourId={tourId}
-        align='both'
-        isCover={false}
-        className={` ${isDisabled ? CssProvider('isDisabled') : style.enable} ${
-          style.wrapper
-        } ${
-          isActive ? style[`${palette}_active`] : style[palette]
-        } ${className}`}
-        dataId={dataId}
-        onClick={!isDisabled && onClick}
-        data-title={dataTitle}
-        eleRef={eleRef}
-      >
-        <Icon size={iconSize} name={iconName} iconClass={iconClass} />
-      </Container>
-    );
-  }
-}
-
-IconButton.propTypes = {
-  palette: PropTypes.oneOf('primary', 'primaryFilled', 'secondary'),
-  iconSize: PropTypes.string,
-  iconName: PropTypes.string,
-  className: PropTypes.string,
-  iconClass: PropTypes.string,
-  dataId: PropTypes.string,
-  onClick: PropTypes.func,
-  dataTitle: PropTypes.string,
-  eleRef: PropTypes.func,
-  isActive: PropTypes.bool,
-  tourId: PropTypes.string,
-  isDisabled: PropTypes.bool
-};
-
-IconButton.defaultProps = {
-  palette: 'secondary',
-  iconSize: '13',
-  className: '',
-  iconClass: '',
-  dataId: 'iconContainer',
-  dataTitle: '',
-  isActive: false,
-  isDisabled: false
-};

package/src/IconButton/IconButton.module.css

@@ -1,38 +0,0 @@
-.wrapper {
-  height: var(--zd_size28);
-  cursor: pointer;
-  border-radius: var(--zd_size4);
-  position: relative;
-  width: var(--zd_size28);
-}
-.secondary {
-  border: 1px solid var(--dot_border_paleBlue);
-}
-.enable.secondary:hover {
-  border-color: var(--dot_border_slateGrey);
-}
-.primary {
-  border: 1px solid var(--dot_border_primary);
-  color: var(--dot_text_primary);
-}
-.enable.primary:hover {
-  border-color: var(--dot_border_cobalt);
-  color: var(--dot_text_cobalt);
-}
-
-.secondary_active {
-  border: 1px solid var(--dot_border_tropicalBlue);
-  background-color: var(--dot_bg_aliceBlue);
-}
-.primary_active {
-  background-color: var(--dot_bg_primary);
-  color: var(--dot_text_white);
-}
-.primaryFilled {
-  background-color: var(--dot_bg_primary);
-  color: var(--dot_text_white);
-}
-.primaryFilled_active,
-.enable.primaryFilled:hover {
-  background-color: var(--dot_bg_cobalt);
-}

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

@@ -1,49 +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: '30px' }}>
-          <span style={{ margin: '30px' }}>
-            <IconButton
-              iconSize='12'
-              iconName='ZD-commentNew'
-              palette='primary'
-            />
-          </span>
-          <span style={{ margin: '30px' }}>
-            <IconButton
-              iconSize='12'
-              iconName='ZD-commentNew'
-              dataTitle='More Actions'
-              palette='primaryFilled'
-            />
-          </span>
-          <span style={{ margin: '30px' }}>
-            <IconButton
-              iconSize='12'
-              iconName='ZD-more'
-              dataTitle='More Actions'
-              palette='secondary'
-            />
-          </span>
-          <span style={{ margin: '30px' }}>
-            <IconButton
-              iconSize='12'
-              iconName='ZD-more'
-              dataTitle='More Actions'
-              palette='secondary'
-              isDisabled
-            />
-          </span>
-        </div>
-      </React.Fragment>
-    );
-  }
-}
-if (__DOCS__) {
-  IconButton__default.docs = {
-    componentGroup: 'Atom'
-  };
-}

package/src/Image/Image.js

@@ -1,41 +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 } = this.props;
-    return (
-      <img
-        src={src}
-        alt={alt}
-        data-title={title}
-        data-id={dataId}
-        className={` ${className} ${
-          isCover ? style.imgFullSize : style.imgMaxFullSize
-        } `}
-        onClick={onClick}
-      />
-    );
-  }
-}
-
-Image.propTypes = {
-  alt: PropTypes.string.isRequired,
-  className: PropTypes.string,
-  dataId: PropTypes.string,
-  isCover: PropTypes.bool,
-  onClick: PropTypes.func,
-  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/Link/Link.js

@@ -1,115 +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;
-
-    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
-    } = this.props;
-    let { isLink, constructURL } = this.context.options;
-    let urlOutput = href ? href : constructURL(urlName, urlData);
-    let hrefUrl = '';
-    let option = {};
-    if (download) {
-      option.download = true;
-    }
-    let ignoreKeys = [
-      'children',
-      'href',
-      'target',
-      'urlData',
-      'urlName',
-      'className',
-      'title',
-      'download',
-      'rel',
-      'dataId',
-      'hasReload'
-    ];
-    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)}
-      >
-        {children}
-      </a>
-    );
-  }
-}
-
-Link.contextType = LinkContext;
-
-Link.defaultProps = {
-  rel: 'noopener noreferrer',
-  hasReload: false
-};
-Link.propTypes = {
-  children: PropTypes.string,
-  className: PropTypes.string,
-  dataId: PropTypes.string,
-  href: PropTypes.string,
-  rel: PropTypes.string,
-  target: PropTypes.oneOf(['_blank', '_self']),
-  title: PropTypes.string,
-  urlData: PropTypes.object,
-  urlName: PropTypes.string,
-  hasReload: PropTypes.bool
-};
-
-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;