@zohodesk/dot 1.0.0-beta.21 → 1.0.0-beta.212

package/src/dropdown/ToggleDropDown/docs/ToggleDropDown__default.docs.js

@@ -1,75 +0,0 @@
-import React from 'react';
-import ToggleDropDown from '../ToggleDropDown';
-
-export default class ToggleDropDown__default extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      value: 'All department',
-      options: [
-        {
-          value: 'All department',
-          id: 'department',
-          iconName: 'ZD-setupFields'
-        },
-        { value: 'dep1', id: 'department-1', iconName: 'ZD-setupFields' },
-        { value: 'dep2', id: 'department-2', iconName: 'ZD-setupFields' },
-        { value: 'dep3', id: 'department-3', iconName: 'ZD-setupFields' },
-        { value: 'dep4', id: 'department-4', iconName: 'ZD-setupFields' },
-        { value: 'dep5', id: 'department-5', iconName: 'ZD-setupFields' },
-        { value: 'dep6', id: 'department-6', iconName: 'ZD-setupFields' }
-      ]
-    };
-    this.onSelect = this.onSelect.bind(this);
-    this.getNextOptions = this.getNextOptions.bind(this);
-  }
-
-  onSelect(element, e) {
-    this.setState({
-      value: e.value
-    });
-  }
-
-  getNextOptions() {
-    this.setState({
-      options: [
-        {
-          value: 'All department',
-          id: 'department',
-          iconName: 'ZD-setupFields'
-        },
-        { value: 'dep1', id: 'department-1', iconName: 'ZD-setupFields' },
-        { value: 'dep2', id: 'department-2', iconName: 'ZD-setupFields' },
-        { value: 'dep3', id: 'department-3', iconName: 'ZD-setupFields' },
-        { value: 'dep4', id: 'department-4', iconName: 'ZD-setupFields' },
-        { value: 'dep5', id: 'department-5', iconName: 'ZD-setupFields' },
-        { value: 'dep6', id: 'department-6', iconName: 'ZD-setupFields' },
-        { value: 'dep7', id: 'department-7', iconName: 'ZD-setupFields' },
-        { value: 'dep8', id: 'department-8', iconName: 'ZD-setupFields' },
-        { value: 'dep9', id: 'department-9', iconName: 'ZD-setupFields' }
-      ]
-    });
-  }
-
-  render() {
-    let { options } = this.state;
-    return (
-      <div>
-        <ToggleDropDown
-          value={this.state.value}
-          dataTitle={this.state.value}
-          keyName='value'
-          onClick={this.onSelect}
-          isSearch
-          title='header'
-          options={options}
-          isNextOptions
-          getNextOptions={this.getNextOptions}
-        />
-      </div>
-    );
-  }
-}
-ToggleDropDown__default.docs = {
-  componentGroup: 'Molecule'
-};

package/src/emptystate/CommonEmptyState/CommonEmptyState.js

@@ -1,117 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import Link from '../../Link/Link';
-import Button from '@zohodesk/components/lib/Button/Button';
-/*** CSS ***/
-import style from './CommonEmptyState.module.css';
-
-export default class CommonEmptyState extends Component {
-  render() {
-    let {
-      title,
-      description,
-      linkUrl,
-      linkText,
-      linkTarget,
-      onUrlClick,
-      children,
-      className,
-      linkDescription,
-      buttonText,
-      onButtonClick,
-      buttonPalette,
-      buttonSize,
-      buttonDisabled,
-      dataId,
-      isFluid
-    } = this.props;
-    return (
-      <div
-        className={`${style.container} ${className} ${
-          !isFluid ? style.fluid : ''
-        } `}
-        data-id={dataId}
-      >
-        {children}
-        {title ? <div className={style.title}>{title}</div> : null}
-        {description ? (
-          <div className={`${style.desc} ${style.linkWrapper}`}>
-            {description}
-          </div>
-        ) : null}
-        {linkDescription || linkText ? (
-          <div className={style.linkWrapper}>
-            {linkDescription ? (
-              <span className={style.linkDesc}>{linkDescription}</span>
-            ) : null}
-            {linkText ? (
-              <Link
-                href={linkUrl}
-                className={style.link}
-                target={linkTarget}
-                onClick={onUrlClick}
-              >
-                {linkText}
-              </Link>
-            ) : null}
-          </div>
-        ) : null}
-        {buttonText ? (
-          <Button
-            className={style.btnWrapper}
-            text={buttonText}
-            disabled={buttonDisabled}
-            onClick={onButtonClick}
-            palette={buttonPalette}
-            size={buttonSize}
-          />
-        ) : null}
-      </div>
-    );
-  }
-}
-
-CommonEmptyState.propTypes = {
-  title: PropTypes.string,
-  description: PropTypes.string,
-  linkUrl: PropTypes.string,
-  linkText: PropTypes.string,
-  linkTarget: PropTypes.oneOf(['_blank', '_self']),
-  onUrlClick: PropTypes.func,
-  children: PropTypes.node,
-  className: PropTypes.string,
-  linkDescription: PropTypes.string,
-  buttonText: PropTypes.string,
-  onButtonClick: PropTypes.func,
-  buttonPalette: PropTypes.oneOf([
-    'plainPrimary',
-    'plainSecondary',
-    'primary',
-    'primaryFilled',
-    'danger',
-    'dangerFilled',
-    'secondary',
-    'secondaryFilled',
-    'successFilled',
-    'info'
-  ]),
-  buttonSize: PropTypes.oneOf(['small', 'medium', 'large', 'xlarge']),
-  buttonDisabled: PropTypes.bool,
-  dataId: PropTypes.string,
-  isFluid: PropTypes.bool
-};
-
-CommonEmptyState.defaultProps = {
-  linkTarget: '_self',
-  buttonPalette: 'primaryFilled',
-  className: '',
-  linkUrl: '#',
-  dataId: 'emptyState',
-  isFluid: false
-};
-
-if (__DOCS__) {
-  CommonEmptyState.docs = {
-    componentGroup: 'EmptyState'
-  };
-}

package/src/emptystate/CommonEmptyState/CommonEmptyState.module.css

@@ -1,31 +0,0 @@
-.container {
-  text-align: center;
-  margin: 0 auto;
-}
-.fluid {
-  max-width: var(--zd_size450);
-}
-.title {
-  font-size: var(--zd_size16);
-  font-family: var(--zd_semibold);
-  color: var(--dot_text_bunker);
-}
-.linkWrapper {
-  margin-top: var(--zd_size14);
-  font-size: var(--zd_size12);
-}
-.desc,
-.linkDesc {
-  color: var(--dot_text_shuttleGrey);
-}
-.linkDesc {
-  margin-right: var(--zd_size4);
-}
-.link {
-  cursor: pointer;
-  color: var(--dot_text_primary);
-  display: inline-block;
-}
-.btnWrapper {
-  margin-top: var(--zd_size18);
-}

package/src/emptystate/CommonEmptyState/docs/CommonEmptyState__default.docs.js

@@ -1,53 +0,0 @@
-import React, { Component } from 'react';
-import CommonEmptyState from '../CommonEmptyState';
-import EmptySearch from '@zohodesk/svg/lib/svg/EmptySearch';
-import EmptyAccounts from '@zohodesk/svg/lib/svg/EmptyAccounts';
-import style from '../CommonEmptyState.module.css';
-
-export default class CommonEmptyState__default extends Component {
-  render() {
-    return (
-      <React.Fragment>
-        <div style={{"margin":"var(--zd_size60) 0" }}>
-        <CommonEmptyState
-          title='No Accounts Found'
-          linkDescription='There is no Account found in this Contact.'
-          linkText='learn more'
-          linkUrl='#'
-        >
-          <EmptyAccounts />
-        </CommonEmptyState>
-        </div>
-        <div style={{"margin":"var(--zd_size60) 0" }}>
-        <CommonEmptyState
-          title='No Accounts Found'
-          description='There are no views matching the keyword.'
-          linkDescription='Search in'
-          linkText='Archived views'
-          linkUrl='#'
-          className={style.wrapper}
-        >
-          <EmptySearch size='small' />
-        </CommonEmptyState>
-        </div>
-        <div style={{"margin":"var(--zd_size60) 0" }}>
-        <CommonEmptyState
-          title='No Accounts Found'
-          description='There are no views matching the keyword.'
-          buttonText='click here'
-          className={style.wrapper}
-        >
-          <EmptySearch size='small' />
-        </CommonEmptyState>
-        </div>
-        
-      </React.Fragment>
-    );
-  }
-}
-
-if (__DOCS__) {
-  CommonEmptyState__default.docs = {
-    componentGroup: 'EmptyState'
-  };
-}

package/src/emptystate/EditionPage/EditionPage.css

@@ -1,37 +0,0 @@
-.editionContainer {
-  text-align: center;
-}
-.svg {
-  margin-top: var(--zd_size140);
-}
-.header {
-  font-size: var(--zd_size20);
-  font-family: var(--zd_semibold);
-  margin-top: var(--zd_size16);
-}
-.description {
-  font-size: var(--zd_size15);
-  font-family: var(--zd_semibold);
-  margin: var(--zd_size20) 0;
-}
-.content {
-  margin: var(--zd_size10) 0;
-}
-.footer {
-  font-size: var(--zd_size13);
-  margin: var(--zd_size10) 0 var(--zd_size80) 0;
-  position: relative;
-  display: inline-block;
-}
-.footer::before {
-  content: '';
-  border-top: var(--zd_size1) solid var(--zd_text_smoke5);
-  position: absolute;
-  left: calc(var(--zd_size20) * -1);
-  right: calc(var(--zd_size20) * -1);
-  top: calc(var(--zd_size10) * -1);
-}
-.button {
-  color: var(--dot_text_primary);
-  cursor: pointer;
-}

package/src/emptystate/EditionPage/EditionPage.js

@@ -1,69 +0,0 @@
-import React, { Component } from 'react';
-import { PropTypes } from 'prop-types';
-import EmptyEdition from '@zohodesk/svg/lib/svg/EmptyEdition';
-import style from './EditionPage.css';
-
-export default class EditionPage extends Component {
-  constructor(props) {
-    super(props);
-  }
-
-  render() {
-    let {
-      title,
-      subtitle,
-      information,
-      dataId,
-      footerText,
-      onButtonClick,
-      butttonText,
-      children
-    } = this.props;
-    return (
-      <div className={style.editionContainer} data-id={dataId}>
-        <div className={style.svg}>
-          <EmptyEdition />
-        </div>
-        <div className={style.header}>{title}</div>
-        {subtitle ? <div className={style.description}>{subtitle}</div> : null}
-
-        <div className={style.description}>
-          {information ? information + ' ' : null}
-          {butttonText ? (
-            <span
-              className={style.button}
-              data-id={`${dataId}_button`}
-              onClick={onButtonClick}
-            >
-              {butttonText}
-            </span>
-          ) : null}
-        </div>
-        {children ? <div className={style.content}>{children}</div> : null}
-
-        {footerText ? (
-          <div data-id={`${dataId}_footerText`} className={style.footer}>
-            <div dangerouslySetInnerHTML={{ __html: footerText }} />
-          </div>
-        ) : null}
-      </div>
-    );
-  }
-}
-EditionPage.defaultProps = {
-  title: '',
-  subtitle: '',
-  dataId: 'edition'
-};
-EditionPage.propTypes = {
-  subTitle: PropTypes.string,
-  title: PropTypes.string,
-  dataId: PropTypes.string,
-  footerText: PropTypes.string
-};
-
-if (__DOCS__) {
-  EditionPage.docs = {
-    componentGroup: 'EmptyState'
-  };
-}

package/src/emptystate/EditionPage/docs/EditionPage__default.docs.js

@@ -1,23 +0,0 @@
-import React, { Component } from 'react';
-import EditionPage from '../EditionPage';
-
-export default class EditionPage__default extends Component {
-  render() {
-    return (
-      <EditionPage
-        title='Access Denied'
-        subtitle='Your current edition does not support this feature.'
-        dataId='empty'
-        butttonText='Upgrade Now'
-        information='our current edition does not support this feature.'
-        footerText='asdf'
-      />
-    );
-  }
-}
-
-if (__DOCS__) {
-  EditionPage__default.docs = {
-    componentGroup: 'EmptyState'
-  };
-}

package/src/errorstate/EmptyStates.module.css

@@ -1,40 +0,0 @@
-.container {
-  text-align: center;
-  padding-top: var(--zd_size80);
-  background-color: var(--dot_bg_white);
-}
-.top {
-  z-index: 1;
-}
-.header {
-  min-width: var(--zd_size400);
-  margin: 0 auto;
-  display: inline-block;
-  text-align: left;
-}
-
-.title {
-  font-family: var(--zd_semibold);
-  font-size: var(--zd_size50);
-  margin-bottom: var(--zd_size5);
-  letter-spacing: var(--zd_size1);
-  line-height: var(--zd_size70);
-}
-.subtitle {
-  font-size: var(--zd_size30);
-}
-.title,
-.subtitle {
-  color: var(--zd_text_dark3);
-}
-
-.footer {
-  min-width: var(--zd_size400);
-  text-align: center;
-  margin: 0 auto;
-  display: inline-block;
-}
-.btmText {
-  font-size: var(--zd_size14);
-  margin-bottom: var(--zd_size10);
-}

package/src/errorstate/Inconvenience/Inconvenience.js

@@ -1,42 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Container, Box } from '@zohodesk/components/lib/Layout';
-import LinkText from '../LinkText/LinkText';
-import InconvenienceSVG from '@zohodesk/svg/lib/svg/Inconvenience';
-import commonStyle from '../EmptyStates.module.css';
-import style from './Inconvenience.module.css';
-export default class Inconvenience extends React.Component {
-  render() {
-    let { title, subtitle, description, urlText, url, onClick } = this.props;
-    return (
-      <Container className={`${commonStyle.container}`}>
-        <Box className={commonStyle.top}>
-          {title ? <div className={commonStyle.title}>{title}</div> : null}
-          {subtitle ? (
-            <div className={commonStyle.subtitle}>{subtitle}</div>
-          ) : null}
-        </Box>
-        <Box className={style.imageContainer}>
-          <InconvenienceSVG isFluid />
-        </Box>
-        <Box className={commonStyle.footer}>
-          <div className={commonStyle.btmText}>{description}</div>
-          <LinkText text={urlText} href={url} onClick={onClick} />
-        </Box>
-      </Container>
-    );
-  }
-}
-Inconvenience.propTypes = {
-  description: PropTypes.string,
-  onClick: PropTypes.func,
-  subtitle: PropTypes.string,
-  title: PropTypes.string,
-  url: PropTypes.string,
-  urlText: PropTypes.string
-};
-if (__DOCS__) {
-  Inconvenience.docs = {
-    componentGroup: 'errorStates'
-  };
-}

package/src/errorstate/Inconvenience/Inconvenience.module.css

@@ -1,6 +0,0 @@
-.imageContainer {
-  height: var(--zd_size400);
-  margin-top: calc(var(--zd_size35) * -1);
-  margin-bottom: var(--zd_size20);
-  margin-left: calc(var(--zd_size30) * -1);
-}

package/src/errorstate/Inconvenience/docs/Inconvenience__default.docs.js

@@ -1,19 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import Inconvenience from '../Inconvenience';
-export default class Inconvenience__default extends React.Component {
-  render() {
-    return (
-      <Inconvenience
-        subtitle='Sorry! for the inconvenience.'
-        description='Please try again later or report this issue '
-        urlText='Enter your feedback'
-      />
-    );
-  }
-}
-if (__DOCS__) {
-  Inconvenience__default.docs = {
-    componentGroup: 'errorStates'
-  };
-}

package/src/errorstate/LinkText/LinkText.js

@@ -1,28 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import Link from '../../Link/Link';
-import style from './LinkText.module.css';
-export default class LinkText extends React.Component {
-  render() {
-    let { text, href, onClick } = this.props;
-    return (
-      <Link
-        href={href ? href : 'javascript:void(0)'}
-        className={style.text}
-        onClick={onClick}
-      >
-        {text}
-      </Link>
-    );
-  }
-}
-LinkText.propTypes = {
-  href: PropTypes.string,
-  onClick: PropTypes.func,
-  text: PropTypes.string
-};
-if (__DOCS__) {
-  LinkText.docs = {
-    componentGroup: 'errorStates'
-  };
-}

package/src/errorstate/LinkText/LinkText.module.css

@@ -1,6 +0,0 @@
-.text {
-  color: var(--zd_text_primary);
-  display: inline-block;
-  cursor: pointer;
-  font-size: var(--zd_size15);
-}

package/src/errorstate/LinkText/docs/LinkText__default.docs.js

@@ -1,13 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import LinkText from '../LinkText';
-export default class LinkText__default extends React.Component {
-  render() {
-    return <LinkText text='Go to Preference' />;
-  }
-}
-if (__DOCS__) {
-  LinkText__default.docs = {
-    componentGroup: 'errorStates'
-  };
-}

package/src/errorstate/NoRequestFound/NoRequestFound.js

@@ -1,42 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import commonStyle from '../EmptyStates.module.css';
-import NoRequestFoundSVG from '@zohodesk/svg/lib/svg/NoRequestFound';
-import { Container, Box } from '@zohodesk/components/lib/Layout';
-import LinkText from '../LinkText/LinkText';
-import style from './NoRequestFound.module.css';
-export default class NoRequestFound extends React.Component {
-  render() {
-    let { title, subtitle, description, urlText, url, onClick } = this.props;
-    return (
-      <Container className={`${commonStyle.container}`}>
-        <Box className={commonStyle.top}>
-          {title ? <div className={commonStyle.title}>{title}</div> : null}
-          {subtitle ? (
-            <div className={commonStyle.subtitle}>{subtitle}</div>
-          ) : null}
-        </Box>
-        <Box className={style.imageContainer}>
-          <NoRequestFoundSVG isFluid />
-        </Box>
-        <Box className={commonStyle.footer}>
-          <div className={commonStyle.btmText}>{description}</div>
-          <LinkText text={urlText} href={url} onClick={onClick} />
-        </Box>
-      </Container>
-    );
-  }
-}
-NoRequestFound.propTypes = {
-  description: PropTypes.string,
-  onClick: PropTypes.func,
-  subtitle: PropTypes.string,
-  title: PropTypes.string,
-  url: PropTypes.string,
-  urlText: PropTypes.string
-};
-if (__DOCS__) {
-  NoRequestFound.docs = {
-    componentGroup: 'errorStates'
-  };
-}

package/src/errorstate/NoRequestFound/NoRequestFound.module.css

@@ -1,5 +0,0 @@
-.imageContainer {
-  height: var(--zd_size400);
-  margin-top: calc(var(--zd_size60) * -1);
-  margin-bottom: var(--zd_size20);
-}

package/src/errorstate/NoRequestFound/docs/NoRequestFound__default.docs.js

@@ -1,19 +0,0 @@
-import React from 'react';
-import NoRequestFound from '../NoRequestFound';
-export default class NoRequestFound__default extends React.Component {
-  render() {
-    return (
-      <NoRequestFound
-        btmText='Please try again later or report this issue '
-        subtitle='Sorry! no request found.'
-        description='Please try again later or report this issue '
-        urlText='Enter your feedback'
-      />
-    );
-  }
-}
-if (__DOCS__) {
-  NoRequestFound__default.docs = {
-    componentGroup: 'errorStates'
-  };
-}