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

package/src/list/ListLayout/docs/ListLayout__default.docs.js

@@ -1,54 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import ListLayout, { Column } from '../ListLayout';
-export default class ListLayout__default extends Component {
-  constructor(props) {
-    super(props);
-  }
-
-  generateFooter() {
-    return (
-      <div style={{ padding: '20px' }}>Footer Area..!</div>
-    );
-  }
-
-  render() {
-    return (
-      <div>
-        <h3>
-        We have to define at least 1 Column and maximum 3 column in <b>ListLayout</b> Component
-        </h3>
-        <h4>Variation1</h4>
-        <ListLayout footer={this.generateFooter}>
-          <Column>
-            <div style={{ padding: '20px' }}>Column One</div>
-          </Column>
-          <Column flexible>
-            <div style={{ padding: '20px' }}>Column Two</div>
-          </Column>
-          <Column>
-            <div style={{ padding: '20px' }}>Column Three</div>
-          </Column>
-          <Column>
-            <div style={{ padding: '20px' }}>Column Four</div>
-          </Column>
-        </ListLayout>
-        <h4>Variation2</h4>
-        <ListLayout needHover>
-          <Column flexible>
-            <div style={{ padding: '20px' }}>Column One</div>
-          </Column>
-          <Column>
-            <div style={{ padding: '20px' }}>Column Two</div>
-          </Column>
-        </ListLayout>
-      </div>
-    );
-  }
-}
-if (__DOCS__) {
-  ListLayout__default.docs = {
-    folderName: 'List',
-    componentGroup: 'ListLayout'
-  };
-}

package/src/list/ListStencils/ListStencils.js

@@ -1,34 +0,0 @@
-/*** Libraries ***/
-import React, { Component } from 'react';
-
-/*** Components ***/
-import Stencils from '@zohodesk/components/lib/Stencils/Stencils';
-/*** CSS ***/
-import style from './ListStencils.module.css';
-
-export default class ListStencils extends Component {
-  render() {
-    return (
-      <div className={style.container}>
-        <div className={style.innerContainer}>
-          <div className={style.avatar}>
-            <Stencils shape='circle' size='large' />
-          </div>
-          <div className={style.innerEleContainer}>
-            <Stencils size='default' />
-            <div className={style.mt10}>
-              <Stencils size='medium' />
-            </div>
-          </div>
-        </div>
-      </div>
-    );
-  }
-}
-
-if (__DOCS__) {
-  ListStencils.docs = {
-    folderName: 'List',
-    componentGroup: 'ListStencils'
-  };
-}

package/src/list/ListStencils/ListStencils.module.css

@@ -1,24 +0,0 @@
-.container {
-  position: relative;
-  width: 100%;
-  padding: 0 var(--zd_size30);
-}
-.innerContainer {
-  composes: dflex from '~@zohodesk/components/lib/common/common.module.css';
-  composes: alignVertical from '~@zohodesk/components/lib/common/common.module.css';
-  padding: var(--zd_size13) 0;
-  height: var(--zd_size70);
-  border-bottom: 1px dotted var(--dot_border_solitude);
-}
-.avatar {
-  margin-right: var(--zd_size25);
-}
-
-.innerEleContainer {
-  flex-basis: 60%;
-  min-height: 0;
-  min-width: 0;
-}
-.mt10 {
-  margin-top: var(--zd_size10);
-}

package/src/list/ListStencils/docs/ListStencils__default.docs.js

@@ -1,18 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import ListStencils from '../ListStencils';
-export default class ListStencils__default extends Component {
-  constructor(props) {
-    super(props);
-  }
-
-  render() {
-    return <ListStencils />;
-  }
-}
-if (__DOCS__) {
-  ListStencils__default.docs = {
-    folderName: 'List',
-    componentGroup: 'ListStencils'
-  };
-}

package/src/list/SecondaryText/AccountName.js

@@ -1,80 +0,0 @@
-/* eslint-disable react/forbid-component-props */
-/**** Libraries ****/
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-
-/**** Components ****/
-import { Container, Box } from '@zohodesk/components/lib/Layout';
-import Link from '../../Link/Link';
-
-/**** CSS ****/
-import style from './SecondaryText.module.css';
-
-export default class AccountName extends Component {
-  render() {
-    let {
-      dataTitle,
-      dataId,
-      urlName,
-      urlData,
-      onClick,
-      isLink,
-      className,
-      text,
-      href,
-      notAccessible = false
-    } = this.props;
-    return (
-      <Container
-        alignBox='row'
-        align='vertical'
-        isCover={false}
-        data-title={dataTitle}
-        dataId={dataId}
-      >
-        <Box flexible>
-          {isLink ? (
-            <Link
-              href={href}
-              urlName={urlName}
-              urlData={urlData}
-              onClick={onClick}
-              className={`${style.textStyle} ${className ? className : ''}`}
-            >
-              {text}
-            </Link>
-          ) : (
-            <div
-              className={`${style.secondaryText} ${
-                className ? className : ''
-              } ${notAccessible ? style.disable : ''}`}
-            >
-              {text}
-            </div>
-          )}
-        </Box>
-      </Container>
-    );
-  }
-}
-AccountName.propTypes = {
-  className: PropTypes.string,
-  dataId: PropTypes.string,
-  dataTitle: PropTypes.string,
-  href: PropTypes.string,
-  isLink: PropTypes.bool,
-  notAccessible: PropTypes.bool,
-  onClick: PropTypes.func,
-  text: PropTypes.string,
-  urlData: PropTypes.object,
-  urlName: PropTypes.string
-};
-AccountName.defaultProps = {
-  isLink: true
-};
-if (__DOCS__) {
-  AccountName.docs = {
-    folderName: 'List',
-    componentGroup: 'AccountName'
-  };
-}

package/src/list/SecondaryText/ContactName.js

@@ -1,107 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { Container, Box } from '@zohodesk/components/lib/Layout';
-import Link from '../../Link/Link';
-import SentimentStatus from '../SentimentStatus/SentimentStatus';
-import Icon from '@zohodesk/icons/lib/Icon';
-import { i18NProviderUtils } from '@zohodesk/i18n';
-
-import style from './SecondaryText.module.css';
-export default class ContactName extends Component {
-  render() {
-    let {
-      dataTitle,
-      dataId,
-      isPaidUser,
-      urlName,
-      urlData,
-      onClick,
-      sentimentType,
-      isLink,
-      className,
-      text,
-      href,
-      notAccessible = false
-    } = this.props;
-    let titleObj = {
-      positive: 'support.label.positive',
-      negative: 'support.label.negative',
-      neutral: 'support.label.neutral'
-    };
-    let sentimentDataTitle = i18NProviderUtils.getI18NValue(
-      titleObj[sentimentType]
-    );
-    return (
-      <Container
-        alignBox='row'
-        align='vertical'
-        isCover={false}
-        dataId={dataId}
-      >
-        {isPaidUser && (
-          <Box
-            className={style.paidUserIcon}
-            title={i18NProviderUtils.getI18NValue('Paid User')}
-          >
-            <Icon name='ZD-paiduser' iconClass={style.icon} />
-          </Box>
-        )}
-        <Box flexible>
-          {isLink ? (
-            <Link
-              urlName={urlName}
-              href={href}
-              urlData={urlData}
-              onClick={onClick}
-              className={`${style.textStyle} ${className ? className : ''}`}
-              title={dataTitle}
-            >
-              {text}
-            </Link>
-          ) : (
-            <div
-              className={`${style.secondaryText} ${
-                className ? className : ''
-              } ${notAccessible ? style.disable : ''}`}
-            >
-              {text}
-            </div>
-          )}
-        </Box>
-        {sentimentType && (
-          <Box>
-            <SentimentStatus
-              type={sentimentType}
-              dataTitle={sentimentDataTitle}
-            />
-          </Box>
-        )}
-      </Container>
-    );
-  }
-}
-ContactName.propTypes = {
-  className: PropTypes.string,
-  dataId: PropTypes.string,
-  dataTitle: PropTypes.string,
-  href: PropTypes.string,
-  isLink: PropTypes.bool,
-  isPaidUser: PropTypes.bool,
-  notAccessible: PropTypes.bool,
-  onClick: PropTypes.func,
-  sentimentTitle: PropTypes.string,
-  sentimentType: PropTypes.oneOf(['positive', 'negative', 'neutral']),
-  text: PropTypes.string,
-  urlData: PropTypes.object,
-  urlName: PropTypes.string
-};
-ContactName.defaultProps = {
-  isPaidUser: false,
-  isLink: true
-};
-if (__DOCS__) {
-  ContactName.docs = {
-    folderName: 'List',
-    componentGroup: 'ContactName'
-  };
-}

package/src/list/SecondaryText/DepartmentText.js

@@ -1,32 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import style from './SecondaryText.module.css';
-export default class DepartmentText extends Component {
-  constructor(props) {
-    super(props);
-  }
-
-  render() {
-    let { className, text, dataTitle } = this.props;
-    return (
-      <div
-        className={`${style.departmentText} ${className ? className : ''}`}
-        data-title={dataTitle}
-      >
-        {text}
-      </div>
-    );
-  }
-}
-DepartmentText.propTypes = {
-  className: PropTypes.string,
-  dataTitle: PropTypes.string,
-  text: PropTypes.string
-};
-DepartmentText.defaultProps = {};
-if (__DOCS__) {
-  DepartmentText.docs = {
-    folderName: 'List',
-    componentGroup: 'DepartmentText'
-  };
-}

package/src/list/SecondaryText/Email.js

@@ -1,69 +0,0 @@
-/* eslint-disable react/forbid-component-props */
-/**** Libraries ****/
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-
-/**** Components ****/
-import Link from '../../Link/Link';
-
-/**** CSS ****/
-import style from './SecondaryText.module.css';
-
-export default class Email extends Component {
-  render() {
-    let {
-      text,
-      urlData,
-      urlName,
-      className,
-      title,
-      href,
-      isLink,
-      target
-    } = this.props;
-    return (
-      <React.Fragment>
-        {isLink ? (
-          <Link
-            href={href}
-            className={`${style.textStyle} ${className ? className : ''}`}
-            title={title}
-            urlData={urlData}
-            urlName={urlName}
-            target={target}
-          >
-            {text}
-          </Link>
-        ) : (
-          <div
-            className={`${style.secondaryText} ${className ? className : ''}`}
-          >
-            {text}
-          </div>
-        )}
-      </React.Fragment>
-    );
-  }
-}
-
-Email.propTypes = {
-  className: PropTypes.string,
-  href: PropTypes.string,
-  isLink: PropTypes.bool,
-  target: PropTypes.string,
-  text: PropTypes.string,
-  title: PropTypes.string,
-  urlData: PropTypes.object,
-  urlName: PropTypes.string
-};
-
-Email.defaultProps = {
-  isLink: true
-};
-
-if (__DOCS__) {
-  Email.docs = {
-    folderName: 'List',
-    componentGroup: 'EmailText'
-  };
-}

package/src/list/SecondaryText/HappinessRating.js

@@ -1,37 +0,0 @@
-/**** Libraries ****/
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-
-/**** CSS ****/
-import style from './SecondaryText.module.css';
-
-export default class HappinessRating extends Component {
-  render() {
-    let { text, className, src } = this.props;
-    return (
-      <div
-        className={`${style.happinessContainer} ${className ? className : ''}`}
-      >
-        <img className={`${style.happinessImg}`} src={src} />
-        <span className={style.ratingText} data-title={text}>
-          {`${text}%`}
-        </span>
-      </div>
-    );
-  }
-}
-
-HappinessRating.propTypes = {
-  className: PropTypes.string,
-  src: PropTypes.string,
-  text: PropTypes.string
-};
-
-HappinessRating.defaultProps = {};
-
-if (__DOCS__) {
-  HappinessRating.docs = {
-    folderName: 'List',
-    componentGroup: 'HappinessRating'
-  };
-}

package/src/list/SecondaryText/PhoneNumber.js

@@ -1,72 +0,0 @@
-/* eslint-disable react/forbid-component-props */
-/**** Libraries ****/
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-
-/**** Components ****/
-import Link from '../../Link/Link';
-
-/**** CSS ****/
-import style from './SecondaryText.module.css';
-
-export default class PhoneNumber extends Component {
-  render() {
-    let {
-      text,
-      urlData,
-      urlName,
-      className,
-      title,
-      href,
-      dataId,
-      isLink,
-      target
-    } = this.props;
-    return (
-      <React.Fragment>
-        {isLink ? (
-          <Link
-            href={href}
-            className={`${style.phoneNumber} ${className ? className : ''}`}
-            title={title}
-            urlData={urlData}
-            urlName={urlName}
-            dataId={dataId}
-            target={target}
-          >
-            {text}
-          </Link>
-        ) : (
-          <div
-            className={`${style.secondaryText} ${className ? className : ''}`}
-          >
-            {text}
-          </div>
-        )}
-      </React.Fragment>
-    );
-  }
-}
-
-PhoneNumber.propTypes = {
-  className: PropTypes.string,
-  dataId: PropTypes.string,
-  href: PropTypes.string,
-  isLink: PropTypes.bool,
-  target: PropTypes.string,
-  text: PropTypes.string,
-  title: PropTypes.string,
-  urlData: PropTypes.object,
-  urlName: PropTypes.string
-};
-
-PhoneNumber.defaultProps = {
-  isLink: true
-};
-
-if (__DOCS__) {
-  PhoneNumber.docs = {
-    folderName: 'List',
-    componentGroup: 'PhoneNumberText'
-  };
-}

package/src/list/SecondaryText/PriorityText.js

@@ -1,40 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import style from './SecondaryText.module.css';
-export default class PriorityText extends Component {
-  constructor(props) {
-    super(props);
-  }
-
-  render() {
-    let { className, color, text, dataTitle, dataId } = this.props;
-    return (
-      <div
-        className={`${style.priorityText} ${style[color]} ${
-          className ? className : ''
-        }`}
-        data-title={dataTitle}
-        data-id={dataId}
-      >
-        {text}
-      </div>
-    );
-  }
-}
-PriorityText.propTypes = {
-  className: PropTypes.string,
-  color: PropTypes.oneOf(['red', 'green', 'gray', 'orange']),
-  dataId: PropTypes.string,
-  dataTitle: PropTypes.string,
-  text: PropTypes.string
-};
-PriorityText.defaultProps = {
-  color: 'black',
-  dataId: 'priority'
-};
-if (__DOCS__) {
-  PriorityText.docs = {
-    folderName: 'List',
-    componentGroup: 'PriorityText'
-  };
-}

package/src/list/SecondaryText/SecondaryText.js

@@ -1,36 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import style from './SecondaryText.module.css';
-export default class SecondaryText extends Component {
-  constructor(props) {
-    super(props);
-  }
-
-  render() {
-    let { className, text, dataTitle, dataId, onClick } = this.props;
-    return (
-      <div
-        className={`${style.secondaryText} ${className ? className : ''}`}
-        data-title={dataTitle}
-        data-id={dataId}
-        onClick={onClick}
-      >
-        {text}
-      </div>
-    );
-  }
-}
-SecondaryText.propTypes = {
-  className: PropTypes.string,
-  dataId: PropTypes.string,
-  dataTitle: PropTypes.string,
-  text: PropTypes.string,
-  onClick: PropTypes.func
-};
-SecondaryText.defaultProps = {};
-if (__DOCS__) {
-  SecondaryText.docs = {
-    folderName: 'List',
-    componentGroup: 'SecondaryText'
-  };
-}

package/src/list/SecondaryText/SecondaryText.module.css

@@ -1,94 +0,0 @@
-.paidUserIcon {
-  margin-right: var(--zd_size5);
-  vertical-align: middle;
-  bottom: var(--zd_size1);
-  position: relative;
-  font-size: var(--zd_size8);
-}
-.icon {
-  display: block;
-}
-.disable {
-  cursor: not-allowed;
-}
-.ticketId,
-.textStyle,
-.secondaryText,
-.ratingText,
-.phoneNumber {
-  color: var(--dot_text_shuttleGrey);
-}
-.textStyle,
-.secondaryText {
-  font-size: var(--zd_size12);
-}
-.ticketId,
-.phoneNumber,
-.ratingText {
-  font-size: var(--zd_size11);
-}
-.textStyle,
-.secondaryText,
-.phoneNumber {
-  cursor: pointer;
-  composes: dotted from '~@zohodesk/components/lib/common/common.module.css';
-  max-width: 100%;
-  display: block;
-}
-.textStyle:hover,
-.ticketIdLink,
-.phoneNumber:hover {
-  color: var(--dot_text_primary);
-}
-.ticketIdLink {
-  cursor: pointer;
-}
-/* status */
-.priorityText,
-.statusText {
-  composes: dotted from '~@zohodesk/components/lib/common/common.module.css';
-}
-.textBold {
-  font-family: var(--zd_semibold);
-  composes: ftsmooth from '~@zohodesk/components/lib/common/common.module.css';
-}
-.priorityText {
-  font-size: var(--zd_size12);
-  max-width: 100%;
-}
-.departmentText {
-  font-size: var(--zd_size12);
-  color: var(--dot_text_shuttleGrey);
-  max-width: 100%;
-  composes: inlineBlockMiddle from '../listCommon.module.css';
-  composes: dotted from '~@zohodesk/components/lib/common/common.module.css';
-}
-/* HappinessRating Style */
-.happinessContainer {
-  composes: inlineBlockMiddle from '../listCommon.module.css';
-}
-.happinessImg {
-  width: var(--zd_size10);
-  margin: 0 var(--zd_size4) 0 0;
-  vertical-align: middle;
-}
-
-/* colors */
-.gray {
-  color: var(--dot_text_shuttleGrey);
-}
-.orange {
-  color: var(--dot_text_vividOrange);
-}
-.green {
-  color: var(--dot_text_strongGreen);
-}
-.red {
-  color: var(--dot_text_brightRed);
-}
-.blue {
-  color: var(--dot_text_primary);
-}
-.black {
-  color: var(--dot_text_black);
-}