@zohodesk/dot 1.0.0-temp-60 → 1.0.0-temp-63

package/preprocess/json/dotThemeVariableJson.js

@@ -1,90 +0,0 @@
-/* sample color order => 
---zdt_cta_variable_name, 
-[['defaultMode'], ['blue', 'green', 'orange', 'red', 'yellow']], 
-[['darkMode'], ['blue', 'green', 'orange', 'red', 'yellow']], ['css comment name'] */
-
-const dotThemeVariables = [
-  [
-    'freezelayer_darklight_bg',
-    [
-      ['default'],
-      [
-        'rgba(44, 51, 77, 0.94)',
-        'rgba(15, 34, 38, 0.94)',
-        'rgba(36, 30, 19, 0.94)',
-        'rgba(34, 15, 27, 0.94)',
-        'rgba(34, 36, 18, 0.94)'
-      ]
-    ],
-    [
-      ['dark'],
-      [
-        'rgba(27, 33, 43, 0.9)',
-        'rgba(27, 33, 43, 0.9)',
-        'rgba(27, 33, 43, 0.9)',
-        'rgba(27, 33, 43, 0.9)',
-        'rgba(27, 33, 43, 0.9)'
-      ]
-    ],
-    ['freezelayer']
-  ],
-  [
-    'commonEmptyState_dark_title',
-    [
-      ['default'],
-      [
-        'var(--dot_white)',
-        'var(--dot_white)',
-        'var(--dot_white)',
-        'var(--dot_white)',
-        'var(--dot_white)'
-      ]
-    ],
-    [
-      ['dark'],
-      [
-        'var(--dot_white)',
-        'var(--dot_white)',
-        'var(--dot_white)',
-        'var(--dot_white)',
-        'var(--dot_white)'
-      ]
-    ],
-    ['common empty state']
-  ],
-  [
-    'commonEmptyState_dark_description',
-    [
-      ['default'],
-      [
-        'var(--dot_white)',
-        'var(--dot_white)',
-        'var(--dot_white)',
-        'var(--dot_white)',
-        'var(--dot_white)'
-      ]
-    ],
-    [
-      ['dark'],
-      [
-        'var(--dot_white)',
-        'var(--dot_white)',
-        'var(--dot_white)',
-        'var(--dot_white)',
-        'var(--dot_white)'
-      ]
-    ]
-  ],
-  [
-    'commonEmptyState_dark_link',
-    [['default'], ['#6cbbfc', '#4ac064', '#e57717', '#ff6363', '#e8b923']],
-    [['dark'], ['#479dff', '#45a159', '#ff801f', '#e94f4f', '#d79835']]
-  ],
-  [
-    'commonEmptyState_dark_link_hover',
-    [['default'], ['#2469ff', '#0e7526', '#b25900', '#ab1a18', '#b59100']],
-    [['dark'], ['#2469ff', '#0e7c1c', '#a85100', '#a81111', '#9b6808']]
-  ]
-];
-
-module.exports = { dotThemeVariables: dotThemeVariables };

package/src/ActionButton/ActionButton.js

@@ -1,197 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import Popup from '@zohodesk/components/lib/Popup/Popup';
-import Icon from '@zohodesk/icons/lib/Icon';
-import Button from '@zohodesk/components/lib/Button/Button';
-import { Container, Box } from '@zohodesk/components/lib/Layout';
-import DropBox from '@zohodesk/components/lib/DropBox/DropBox';
-import  CssProvider  from '@zohodesk/components/lib/Provider/CssProvider';
-import style from './ActionButton.module.css';
-
-export class ActionButton extends React.Component {
-  constructor(props) {
-    super(props);
-    this.handleTogglePopup = this.handleTogglePopup.bind(this);
-  }
-
-  handleTogglePopup(e) {
-    let { togglePopup,defaultPosition } = this.props;
-    togglePopup(e,defaultPosition);
-  }
-
-  render() {
-    let {
-      isLoading,
-      onClick,
-      size,
-      dataId,
-      isArrow,
-      text,
-      subText,
-      arrowBoxDataId,
-      arrowBoxSize,
-      palette,
-      onHover,
-      position,
-      className,
-      iconName,
-      iconSize,
-      dataTitle,
-      isDisabled,
-      isPopupOpen,
-      removeClose,
-      children,
-      dropBoxClass,
-      isBoxPaddingNeed,
-      getContainerRef,
-      getTargetRef
-    } = this.props;
-    return (
-      <Container
-        alignBox='row'
-        isCover={false}
-        className={` ${style.container} ${style[palette+'Box']} ${style[size]} ${className} ${
-          isDisabled ? CssProvider('isDisabled') : ''
-        } ${!onClick ? style.wholeDiv : ''} `}
-        onClick={onHover ? removeClose : !onClick ? this.handleTogglePopup : undefined}
-        onMouseEnter={!onClick ? onHover && this.handleTogglePopup : undefined}
-        onMouseLeave={!onClick ? onHover && this.handleTogglePopup : undefined}
-        eleRef={getTargetRef}
-      >
-        {isLoading ? (
-          <Box flexible>
-            <Button
-              status='loading'
-              palette={palette}
-              size='medium'
-              customClass={{
-                customButton: style.btn
-              }}
-            />
-          </Box>
-        ) : (
-          <React.Fragment>
-            <Box
-              flexible
-              onClick={onClick}
-              dataId={dataId}
-              className={`${style.contentBox} ${style[palette+'Btn']} ${style[size+'_btnBox']} ${
-                children ? style.contentBoxBdr : style.contentBoxBdrRds
-              } ${style.clickable} `}
-              data-title={dataTitle}
-            >
-              <Container align='both'>
-                <Box className={style.contentwrapper}>
-                  <Container isCover={false} alignBox='row' align='vertical'>
-                    {iconName ? (
-                      <Icon
-                        name={iconName}
-                        size={iconSize}
-                        iconClass={`${style.iconClr} ${
-                          text ? style.iconMrgn : ''
-                        }`}
-                      />
-                    ) : null}
-                    {text ? (
-                      <Box shrink className={style.txt} data-title={text}>
-                        {text}
-                      </Box>
-                    ) : null}
-                  </Container>
-                </Box>
-                {subText ? (
-                  <Box data-title={subText} className={style.subTxt}>
-                    {subText}
-                  </Box>
-                ) : null}
-              </Container>
-            </Box>
-
-            {children ? (
-              <Box
-                onClick={ onClick ? !onHover && this.handleTogglePopup : undefined}
-                onMouseEnter={ onClick ? onHover && this.handleTogglePopup : undefined}
-                onMouseLeave={ onClick ? onHover && this.handleTogglePopup : undefined}
-                className={`${style[arrowBoxSize+'_arrowBox']} ${style[palette+'Arw']}  ${
-                  style.arrowWrapper
-                } ${isPopupOpen ? style.arrowActive : ''}`}
-                dataId={arrowBoxDataId}
-              >
-                <Container align='both'>
-                  <Icon
-                    name='ZD-down'
-                    size='6'
-                    iconClass={style.arrow}
-                  />
-                </Container>
-                {isPopupOpen ? (
-                  <DropBox
-                    size='small'
-                    isActive={isPopupOpen}
-                    boxPosition={position}
-                    isAnimate
-                    isArrow={isArrow}
-                    customClass={{
-                      customDropBoxWrap: dropBoxClass
-                    }}
-                    isBoxPaddingNeed={isBoxPaddingNeed}
-                    getRef={getContainerRef}
-                  >
-                    {children}
-                  </DropBox>
-                ) : null}
-              </Box>
-            ) : null}
-          </React.Fragment>
-        )}
-      </Container>
-    );
-  }
-}
-
-ActionButton.defaultProps = {
-  size: 'medium',
-  isArrow: false,
-  arrowBoxDataId: 'arrowBox',
-  dataId: 'actionButton',
-  onHover: false,
-  className: '',
-  iconName: '',
-  iconSize: '9',
-  isDisabled: false,
-  dropBoxClass: '',
-  arrowBoxSize: 'medium',
-  isBoxPaddingNeed: true,
-  palette: 'primaryFilled'
-};
-ActionButton.propTypes = {
-  arrowBoxDataId: PropTypes.string,
-  arrowBoxSize: PropTypes.oneOf(['small', 'medium']),
-  children: PropTypes.node,
-  className: PropTypes.string,
-  dataId: PropTypes.string,
-  dataTitle: PropTypes.string,
-  dropBoxClass: PropTypes.string,
-  defaultPosition: PropTypes.string,
-  position: PropTypes.string,
-  iconName: PropTypes.string,
-  iconSize: PropTypes.string,
-  isArrow: PropTypes.bool,
-  isBoxPaddingNeed: PropTypes.bool,
-  isDisabled: PropTypes.bool,
-  isLoading: PropTypes.bool,
-  isPopupOpen: PropTypes.bool,
-  onClick: PropTypes.func,
-  onHover: PropTypes.bool,
-  palette: PropTypes.oneOf('primaryFilled', 'primary'),
-  removeClose: PropTypes.func,
-  size: PropTypes.oneOf(['small', 'medium', 'large']),
-  subText: PropTypes.string,
-  text: PropTypes.string,
-  getContainerRef: PropTypes.func,
-  getTargetRef: PropTypes.func
-};
-ActionButton.docs = {
-  componentGroup: 'Atom'
-};
-export default Popup(ActionButton);

package/src/ActionButton/ActionButton.module.css

@@ -1,120 +0,0 @@
-.varClass {
-  --buttonBg: var(--zdt_actionButton_primaryFilled_bg);
-  --buttonBorder: var(--zdt_actionButton_primary_border);
-  --buttonSeparatorBorder: var(--zdt_actionButton_separator_border);
-}
-.container {
-  composes: varClass;
-}
-.container:hover {
-  --buttonSeparatorBorder: var(--zdt_actionButton_separator_hover_border);
-}
-.primaryFilledBox {
-  --buttonText: var(--zdt_actionButton_primaryFilled_text);
-}
-.primaryFilledBtn, .primaryFilledArw {
-  background-color: var(--buttonBg);
-}
-.primaryBox {
-  --buttonText: var(--zdt_actionButton_primary_text);
-}
-.primaryBtn, .primaryArw {
-  border: 1px solid var(--buttonBorder);
-}
-.primaryBtn {
-  border-right: none;
-}
-.contentBox,
-.arrowWrapper {
-  transition: width var(--zd_transition3), padding var(--zd_transition3), background-color var(--zd_transition2), border-color var(--zd_transition2);
-}
-.clickable {
-  cursor: pointer;
-}
-.contentBoxBdr {
-  border-radius: var(--zd_size4) 0 0 var(--zd_size4);
-}
-.contentBoxBdrRds {
-  border-radius: var(--zd_size4);
-}
-.small {
-  height: var(--zd_size28);
-}
-.medium,
-.large {
-  height: var(--zd_size30);
-}
-.medium {
-  min-width: var(--zd_size115);
-}
-.large {
-  min-width: var(--zd_size135);
-}
-.small_btnBox {
-  padding: 0 var(--zd_size8);
-}
-.medium_btnBox,
-.large_btnBox {
-  padding: 0 var(--zd_size10);
-}
-.txt {
-  font-size: var(--zd_font_size13);
-  font-family: var(--zd_semibold);
-  text-transform: capitalize;
-}
-.subTxt {
-  font-size: var(--zd_font_size10);
-}
-.contentwrapper,
-.txt,
-.subTxt {
-  max-width: 100%;
-}
-.txt,
-.subTxt {
-  composes: dotted from '~@zohodesk/components/lib/common/common.module.css';
-  color: var(--buttonText);
-}
-.arrowWrapper {
-  position: relative;
-  border-radius: 0 var(--zd_size4) var(--zd_size4) 0;
-  cursor: pointer;
-  composes: offSelection from '~@zohodesk/components/lib/common/common.module.css';
-}
-.primaryFilledArw {
-    border-left: 1px solid var(--buttonSeparatorBorder);
-}
-.small_arrowBox {
-  width: var(--zd_size20);
-}
-.medium_arrowBox {
-  width: var(--zd_size26);
-}
-.primaryFilledArw:hover,
-.primaryFilledArw.arrowActive,
-.clickable.primaryFilledBtn:hover,
-.wholeDiv.primaryFilledBox:hover {
-  --buttonBg: var(--zdt_actionButton_primaryFilled_hover_bg);
-}
-.primaryArw:hover,
-.primaryArw.arrowActive,
-.clickable.primaryBtn:hover,
-.wholeDiv.primaryBox:hover {
-  --buttonBorder: var(--zdt_actionButton_primary_hover_border);
-  --buttonText: var(--zdt_actionButton_primary_hover_text);
-}
-.btn {
-  height: 100%;
-  width: 100%;
-}
-.popupWrapper {
-  padding: var(--zd_size10) 0;
-  margin: var(--zd_size5) 0;
-}
-.arrow,
-.iconClr {
-  color: var(--buttonText);
-}
-.iconMrgn {
-  margin-right: var(--zd_size6);
-}

package/src/ActionButton/docs/ActionButton__default.docs.js

@@ -1,110 +0,0 @@
-import React from 'react';
-import ActionButton from '../ActionButton';
-
-export default class ActionButton__default extends React.Component {
-  constructor(props) {
-    super(props);
-  }
-
-  render() {
-    return (
-      <React.Fragment>
-        <div style={{ margin: '20px', display: 'inline-block' }}>
-          <ActionButton text='Reply' size='small' />
-        </div>
-        <div style={{ margin: '20px', display: 'inline-block' }}>
-          <ActionButton text='Reply' size='medium' />
-        </div>
-        <div style={{ margin: '20px', display: 'inline-block' }}>
-          <ActionButton text='Reply' size='large' />
-        </div>
-        <div style={{ margin: '20px', display: 'inline-block' }}>
-          <ActionButton text='Reply' size='large' isLoading />
-        </div>
-        <br></br>
-        <div style={{ margin: '20px', display: 'inline-block' }}>
-          <ActionButton
-            iconName='ZD-replyall'
-            iconSize='9'
-            onClick={() => ''}
-            dropdownChildren={'children'}
-            dropBoxPosition='bottomRight'
-            size='small'
-            isDisabled
-          />
-        </div>
-        <div style={{ margin: '20px', display: 'inline-block' }}>
-          <ActionButton
-            text='Reply all'
-            iconName='ZD-replyall'
-            iconSize='9'
-            onClick={() => ''}
-            dropBoxPosition='bottomRight'
-            size='small'
-          >
-            children
-          </ActionButton>
-        </div>
-        <div style={{ margin: '20px', display: 'inline-block' }}>
-          <ActionButton
-            text='Reply all'
-            iconName='ZD-replyall'
-            iconSize='9'
-            onClick={() => ''}
-            dropBoxPosition='bottomRight'
-            size='small'
-            onHover
-          >
-            children
-          </ActionButton>
-        </div>
-        <br></br>
-        <div style={{ margin: '20px', display: 'inline-block' }}>
-          <ActionButton
-            text='Reply all'
-            iconName='ZD-replyall'
-            iconSize='9'
-            dropBoxPosition='bottomRight'
-            size='small'
-            onHover
-          >
-            children
-          </ActionButton>
-        </div>
-        <br />
-        <div style={{ margin: '20px', display: 'inline-block' }}>
-          <ActionButton
-            text='Reply all'
-            iconName='ZD-replyall'
-            iconSize='9'
-            dropBoxPosition='bottomRight'
-            size='small'
-          >
-            children
-          </ActionButton>
-        </div>
-        <br />
-        <div style={{ margin: '20px', display: 'inline-block' }}>
-          <ActionButton text='Comment' subText='Public' />
-        </div>
-        <div style={{ margin: '20px', display: 'inline-block' }}>
-          <ActionButton
-            text='Reply all'
-            iconName='ZD-replyall'
-            iconSize='9'
-            onClick={() => ''}
-            dropBoxPosition='bottomRight'
-            size='small'
-            palette='primary'
-          >
-            children
-          </ActionButton>
-        </div>
-        <div style={{ margin: '20px'}}></div>
-      </React.Fragment>
-    );
-  }
-}
-ActionButton__default.docs = {
-  componentGroup: 'Atom'
-};

package/src/AlphabeticList/AlphabeticList.js

@@ -1,176 +0,0 @@
-/*** Libraries ***/
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Container, Box } from '@zohodesk/components/lib/Layout';
-/*** CSS ***/
-import style from './AlphabeticList.module.css';
-
-let AlphabeticCharacters = [
-  'A',
-  'B',
-  'C',
-  'D',
-  'E',
-  'F',
-  'G',
-  'H',
-  'I',
-  'J',
-  'K',
-  'L',
-  'M',
-  'N',
-  'O',
-  'P',
-  'Q',
-  'R',
-  'S',
-  'T',
-  'U',
-  'V',
-  'W',
-  'X',
-  'Y',
-  'Z'
-];
-
-let AlphabeticCharactersWithHash = [...AlphabeticCharacters, '#'];
-
-let NumberList = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '#'];
-
-export default class AlphabeticList extends React.PureComponent {
-  constructor(props) {
-    super(props);
-    this.handleSelectAll = this.handleSelectAll.bind(this);
-    this.handleSelect = this.handleSelect.bind(this);
-  }
-
-  handleSelectAll() {
-    let { onSelect, selectedCharacter } = this.props;
-    onSelect && selectedCharacter != 'ALL' && onSelect('ALL');
-  }
-
-  handleSelect(id) {
-    let { onSelect, selectedCharacter } = this.props;
-    onSelect && selectedCharacter !== id && onSelect(id);
-  }
-
-  render() {
-    let { selectedCharacter, align, type, i18nKeys, dataId } = this.props;
-    let { allText = 'All', allTitle = 'All' } = i18nKeys;
-    let alignType = align === 'vertical' ? style.column : style.row;
-    let letters =
-      type == 'alphabeticalwithhash'
-        ? AlphabeticCharactersWithHash
-        : type == 'alphabetical'
-        ? AlphabeticCharacters
-        : NumberList;
-
-    return (
-      <Container
-        tagName='ul'
-        isCover={false}
-        alignBox={align === 'vertical' ? 'column' : 'row'}
-        className={`${style.container} ${alignType} ${
-          type != 'alphabetical' ? style.numbers : ''
-        }`}
-        dataId='navigationDiv'
-      >
-        <Box
-          tagName='li'
-          className={`${style.list} ${style.title} ${
-            selectedCharacter === 'ALL' ? style.selected : ''
-          }`}
-          dataId={`All_${dataId}`}
-        >
-          <span
-            onClick={this.handleSelectAll}
-            className={`${style.heading} ${style.letter}`}
-            data-title={allTitle}
-          >
-            {allText}
-          </span>
-        </Box>
-        {letters.map(letter => (
-          <AlphabeticListItem
-            id={letter}
-            isActive={letter === selectedCharacter}
-            onClick={this.handleSelect}
-            text={letter}
-            key={letter}
-            dataId={dataId}
-          />
-        ))}
-      </Container>
-    );
-  }
-}
-
-AlphabeticList.propTypes = {
-  align: PropTypes.string,
-  onSelect: PropTypes.func.isRequired,
-  selectedCharacter: PropTypes.oneOf([
-    'ALL',
-    ...AlphabeticCharacters,
-    ...NumberList,
-    ...AlphabeticCharactersWithHash
-  ]),
-  type: PropTypes.oneOf(['alphabetical', 'numeral', 'alphabeticalwithhash']),
-  i18nKeys: PropTypes.shape({
-    allTitle: PropTypes.string,
-    allText: PropTypes.string
-  }),
-  dataId: PropTypes.string
-};
-
-AlphabeticList.defaultProps = {
-  align: 'vertical',
-  type: 'alphabetical',
-  i18nKeys: {},
-  dataId: 'Navi'
-};
-
-AlphabeticList.docs = {
-  componentGroup: 'Atom'
-};
-
-class AlphabeticListItem extends React.PureComponent {
-  constructor(props) {
-    super(props);
-    this.handleClick = this.handleClick.bind(this);
-  }
-
-  handleClick() {
-    let { onClick, id } = this.props;
-    onClick && onClick(id);
-  }
-
-  render() {
-    let { isActive, text, dataId } = this.props;
-    return (
-      <Box
-        flexible
-        tagName='li'
-        className={`${style.list} ${isActive ? style.selected : ''}`}
-        onClick={this.handleClick}
-        dataId={`${text}_${dataId}`}
-      >
-        <span className={style.letter}>{text}</span>
-      </Box>
-    );
-  }
-}
-
-AlphabeticListItem.propTypes = {
-  id: PropTypes.string,
-  isActive: PropTypes.bool,
-  onClick: PropTypes.func,
-  text: PropTypes.string,
-  dataId: PropTypes.string
-};
-
-AlphabeticListItem.defaultProps = {
-  isActive: false,
-  text: '',
-  dataId: 'Navi'
-};