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

package/src/list/ListLayout/ListLayout.module.css

@@ -1,50 +0,0 @@
-.varClass {
-  --listBorder: var(--zdt_listLayout_border)
-}
-.container {
-  position: relative;
-  composes: varClass;
-}
-.listHover:hover, .hoveredStyle{
-  background-color: var(--zdt_listLayout_hover_bg);
-}
-.active,
-.active:hover {
-  background-color: var(--zdt_listLayout_active_bg);
-}
-.cursorPointer{
-  cursor: pointer
-}
-/* View */
-.classic .innerContainer {
-  padding: var(--zd_size13) 0;
-  min-height: var(--zd_size70);
-}
-.compact .innerContainer {
-  padding: var(--zd_size5) 0;
-  min-height: var(--zd_size41);
-}
-.superCompact .innerContainer {
-  padding: var(--zd_size2) 0;
-  min-height: var(--zd_size35);
-}
-.compact .innerContainer,
-.classic .innerContainer,
-.superCompact .innerContainer {
-  border-bottom: 1px dotted var(--listBorder);
-}
-.compact,
-.classic,
-.superCompact {
-  border-left: var(--zd_size2) solid transparent;
-}
-.keyboardActive, .active{
-  border-top-left-radius: var(--zd_size5);
-  border-bottom-left-radius: var(--zd_size5);
-}
-.keyboardActive{
-  border-left-color: var(--zdt_listLayout_keyboard_active_border);
-}
-.active{
-  border-left-color: var(--zdt_listLayout_active_border);
-}

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,45 +0,0 @@
-/*** Libraries ***/
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-
-/*** Components ***/
-import Stencils from '@zohodesk/components/lib/Stencils/Stencils';
-/*** CSS ***/
-import style from './ListStencils.module.css';
-
-export default class ListStencils extends Component {
-  render() {
-    let { listType } = this.props;
-    return (
-      <div className={`${style.container} ${style[listType]}`}>
-        <div className={style.innerContainer}>
-          <div className={style.avatar}>
-            <Stencils shape='circle' size={listType === 'classic' ? 'large' : listType === 'compact' ? 'medium' : 'small'} />
-          </div>
-          <div className={style.detailsColumn}>
-            <div className={`${style.detailsInnerColumn}`}>
-              <div className={style.primaryRow}>
-                <Stencils size='default' />
-              </div>
-              <div className={style.secondaryRow}>
-                <Stencils size='medium' />
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    );
-  }
-}
-ListStencils.propTypes = {
-  listType: PropTypes.oneOf(['classic', 'compact', 'superCompact'])
-};
-ListStencils.defaultProps = {
-  listType: 'classic'
-};
-if (__DOCS__) {
-  ListStencils.docs = {
-    folderName: 'List',
-    componentGroup: 'ListStencils'
-  };
-}

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

@@ -1,62 +0,0 @@
-.container {
-  position: relative;
-  width: 100%;
-  padding: 0 var(--zd_size30);
-}
-.innerContainer {
-  composes: dflex alignVertical from '~@zohodesk/components/lib/common/common.module.css';
-  border-bottom: 1px dotted var(--zdt_liststencils_innercontainer_border);
-}
-.detailsInnerColumn {
-  composes: dflex from '~@zohodesk/components/lib/common/common.module.css';
-}
-.avatar {
-  margin-right: var(--zd_size25);
-}
-.detailsColumn {
-  min-height: 0;
-  min-width: 0;
-}
-.primaryRow {
-  composes: flexgrow flexshrink flexbasis from '~@zohodesk/components/lib/common/common.module.css';
-}
-.classic .detailsColumn {
-  flex-basis: 60%;
-}
-.compact .detailsColumn,
-.superCompact .detailsColumn {
-  flex-basis: 50%;
-}
-.classic .secondaryRow {
-  margin-top: var(--zd_size10);
-}
-.compact .secondaryRow,
-.superCompact .secondaryRow {
-  margin-left: var(--zd_size30);
-}
-.classic .innerContainer {
-  padding: var(--zd_size13) 0;
-  height: var(--zd_size70);
-}
-.compact .innerContainer {
-  padding: var(--zd_size5) 0;
-  height: var(--zd_size41);
-}
-.superCompact .innerContainer {
-  padding: var(--zd_size2) 0;
-  height: var(--zd_size35);
-}
-.classic .detailsInnerColumn {
-  -webkit-box-orient: vertical;
-  -webkit-box-direction: normal;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-}
-.compact .detailsInnerColumn {
-  -webkit-box-orient: horizontal;
-  -webkit-box-direction: normal;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-}

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,130 +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,
-      fontWeight,
-      secondaryAccountHref,
-      secondaryAccountClick,
-      secondaryAccountText,
-      customProps
-    } = this.props;
-    let {LinkProps={}, TextProps={},SecondaryTextProps={}}=customProps;
-    return (
-      <Container
-        alignBox='row'
-        align='baseline'
-        isCover={false}
-        data-title={dataTitle}
-        dataId={dataId}
-      >
-        <Box flexible>
-          <Container 
-            alignBox='row'
-            align='baseline'
-            isCover={false}
-            className={style.primaryAccountNameCnt}
-          >
-            <Box className={style.primaryAccountName} shrink>
-              {isLink ? (
-                <Link
-                  href={href}
-                  urlName={urlName}
-                  urlData={urlData}
-                  onClick={onClick}
-                  dataId={`${dataId}_link`}
-                  className={style.link}
-                  {...LinkProps}
-                >
-                 <div className={`${style.textStyle} ${
-                    style[`font_${fontWeight}`]
-                  } ${className ? className : ''}`}>{text}</div> 
-                </Link>
-              ) : (
-              <div
-                className={`${style.secondaryText} ${
-                  style[`font_${fontWeight}`]
-                } ${
-                  className ? className : ''
-                } ${notAccessible ? style.disable : ''}`}
-                {...TextProps}
-              >
-                {text}
-              </div>
-            )}
-            </Box>
-              {
-                secondaryAccountText && (
-                  <Box>
-                    <Link
-                      href={secondaryAccountHref}
-                      onClick={secondaryAccountClick}
-                      className={style.link}
-                    >
-                      <div className={`${style.textStyle} ${
-                        style[`font_${fontWeight}`]
-                      } ${className ? className : ''}`} {...SecondaryTextProps}>
-                        {secondaryAccountText}</div>
-                    </Link>
-                  </Box>
-                )
-              }
-          </Container>
-        </Box>
-      </Container>
-    );
-  }
-}
-AccountName.propTypes = {
-  className: PropTypes.string,
-  dataId: PropTypes.string,
-  dataTitle: PropTypes.string,
-  fontWeight: PropTypes.oneOf(['regular', 'semibold', 'bold']),
-  href: PropTypes.string,
-  isLink: PropTypes.bool,
-  notAccessible: PropTypes.bool,
-  onClick: PropTypes.func,
-  text: PropTypes.string,
-  urlData: PropTypes.object,
-  urlName: PropTypes.string,
-  secondaryAccountHref: PropTypes.string,
-  secondaryAccountClick: PropTypes.func,
-  secondaryAccountText: PropTypes.string,
-  customProps:PropTypes.shape({
-    LinkProps:PropTypes.object,
-    TextProps:PropTypes.object,
-    SecondaryTextProps:PropTypes.object
-  })
-};
-AccountName.defaultProps = {
-  isLink: true,
-  dataId: 'accountName',
-  fontWeight: 'regular',
-  customProps:{}
-};
-if (__DOCS__) {
-  AccountName.docs = {
-    folderName: 'List',
-    componentGroup: 'AccountName'
-  };
-}

package/src/list/SecondaryText/ContactName.js

@@ -1,137 +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 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,
-      fontWeight,
-      i18nKeys,
-      customProps
-    } = this.props;
-    let {
-      sentimentTitles = {
-        positive: 'Positive',
-        negative: 'Negative',
-        neutral: 'Neutral'
-      },
-      paidTitle = 'Paid User'
-    } = i18nKeys;
-    let sentimentDataTitle = sentimentTitles[sentimentType];
-    let {LinkProps={}, TextProps={}}=customProps;
-    return (
-      <Container
-        alignBox='row'
-        align='baseline'
-        isCover={false}
-        dataId={dataId}
-      >
-        {isPaidUser && (
-          <Box className={style.paidUserIcon} title={paidTitle}>
-            <Icon name='ZD-paiduser' iconClass={style.icon} />
-          </Box>
-        )}
-        <Box flexible>
-          {isLink ? (
-            <Link
-              urlName={urlName}
-              href={href}
-              urlData={urlData}
-              onClick={onClick}
-              title={dataTitle}
-              dataId={`${dataId}_link`}
-              className={style.link}
-              {...LinkProps}
-            >
-              <div
-                className={`${style.textStyle} ${style[`font_${fontWeight}`]} ${
-                  className ? className : ''
-                }`}
-              >
-                {text}
-              </div>
-            </Link>
-          ) : (
-            <div
-              className={`${style.secondaryText} ${
-                style[`font_${fontWeight}`]
-              } ${className ? className : ''} ${
-                notAccessible ? style.disable : ''
-              }`}
-              data-title={dataTitle}
-              {...TextProps}
-            >
-              {text}
-            </div>
-          )}
-        </Box>
-        {sentimentType && (
-          <Box>
-            <SentimentStatus
-              type={sentimentType}
-              dataTitle={sentimentDataTitle}
-            />
-          </Box>
-        )}
-      </Container>
-    );
-  }
-}
-ContactName.propTypes = {
-  className: PropTypes.string,
-  dataId: PropTypes.string,
-  dataTitle: PropTypes.string,
-  fontWeight: PropTypes.oneOf(['regular', 'semibold', 'bold']),
-  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,
-  i18nKeys: PropTypes.shape({
-    sentimentTitles: PropTypes.shape({
-      positive: PropTypes.string,
-      negative: PropTypes.string,
-      neutral: PropTypes.string
-    }),
-    paidTitle: PropTypes.string
-  }),
-  customProps:PropTypes.shape({
-    LinkProps:PropTypes.object,
-    TextProps:PropTypes.object
-  })
-};
-ContactName.defaultProps = {
-  isPaidUser: false,
-  isLink: true,
-  dataId: 'contactName',
-  fontWeight: 'regular',
-  i18nKeys: {},
-  customProps:{}
-};
-if (__DOCS__) {
-  ContactName.docs = {
-    folderName: 'List',
-    componentGroup: 'ContactName'
-  };
-}

package/src/list/SecondaryText/DepartmentText.js

@@ -1,34 +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, dataId } = this.props;
-    return (
-      <div
-        className={`${style.departmentText} ${className ? className : ''}`}
-        data-title={dataTitle}
-        data-id={dataId}
-      >
-        {text}
-      </div>
-    );
-  }
-}
-DepartmentText.propTypes = {
-  className: PropTypes.string,
-  dataId: 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,86 +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,
-      fontWeight,
-      customProps
-    } = this.props;
-    let {LinkProps={},TextProps={}}=customProps;
-    return (
-      <React.Fragment>
-        {isLink ? (
-          <Link
-            href={href}
-            title={title}
-            urlData={urlData}
-            urlName={urlName}
-            target={target}
-            className={style.link}
-            {...LinkProps}
-          >
-            <div className={`${style.textStyle} ${
-              style[`font_${fontWeight}`]
-            } ${className ? className : ''}`}>{text}</div>
-          </Link>
-        ) : (
-          <div
-            className={`${style.secondaryText}  ${
-              style[`font_${fontWeight}`]
-            } ${className ? className : ''}`}
-            data-title={title}
-            {...TextProps}
-          >
-            {text}
-          </div>
-        )}
-      </React.Fragment>
-    );
-  }
-}
-
-Email.propTypes = {
-  className: PropTypes.string,
-  fontWeight: PropTypes.oneOf(['regular', 'semibold', 'bold']),
-  href: PropTypes.string,
-  isLink: PropTypes.bool,
-  target: PropTypes.string,
-  text: PropTypes.string,
-  title: PropTypes.string,
-  urlData: PropTypes.object,
-  urlName: PropTypes.string,
-  customProps:PropTypes.shape({
-    LinkProps:PropTypes.object,
-    TextProps:PropTypes.object
-  })
-};
-
-Email.defaultProps = {
-  isLink: true,
-  fontWeight: 'regular',
-  customProps:{}
-};
-
-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'
-  };
-}