@zohodesk/dot 1.0.0-temp-58 → 1.0.0-temp-61

package/src/ChannelIcon/ChannelIcon.module.css

@@ -1,208 +0,0 @@
-.varClass {
-  --iconColor: var(--zdt_channelIcon_icon);
-  --topIconBg: var(--zdt_channelIcon_topIcon_bg);
-  --topIconColor: var(--zdt_channelIcon_topIcon_iconGreen);
-  --topIconBorderColor: var(--zdt_channelIcon_topIcon_border);
-}
-.container {
-  position: relative;
-  composes: dInflex from '~@zohodesk/components/lib/common/common.module.css';
-  vertical-align: middle;
-  composes: varClass;
-}
-.thread {
-  composes: dflex alignVertical alignHorizontal rounded from '~@zohodesk/components/lib/common/common.module.css';
-  position: absolute;
-  top: calc(var(--zd_size4) * -1);
-  right: calc(var(--zd_size1) * -1);
-  height: var(--zd_size15);
-  width: var(--zd_size15);
-  background-color: var(--topIconBg);
-}
-.threadBorder {
-  border: 1px solid var(--topIconBorderColor);
-}
-.iconStyle {
-  position: relative;
-  color: var(--iconColor);
-}
-
-/* Channel Icon Style */
-/* path */
-.email_incoming span:first-child:before,
-.email_outgoing span:first-child:before,
-.email_missed span:first-child:before,
-.email_forward span:first-child:before,
-.email_forwarddraft span:first-child:before,
-.facebook_incoming span:first-child:before,
-.facebook_outgoing span:first-child:before,
-.facebook_missed span:first-child:before,
-.facebook_forward span:first-child:before,
-.facebook_forwarddraft span:first-child:before,
-.facebook_dm_default span:first-child:before,
-.facebook_dm_incoming span:first-child:before,
-.facebook_dm_outgoing span:first-child:before,
-.facebook_dm_draft span:first-child:before,
-.facebook_dm_forward span:first-child:before,
-.facebook_dm_forwarddraft span:first-child:before,
-.twitter_incoming span:first-child:before,
-.twitter_outgoing span:first-child:before,
-.twitter_missed span:first-child:before,
-.twitter_forward span:first-child:before,
-.twitter_forwarddraft span:first-child:before,
-.forums_incoming span:first-child:before,
-.forums_outgoing span:first-child:before,
-.forums_missed span:first-child:before,
-.forums_forward span:first-child:before,
-.forums_forwarddraft span:first-child:before,
-.chat_incoming span:first-child:before,
-.chat_outgoing span:first-child:before,
-.chat_missed span:first-child:before,
-.chat_forward span:first-child:before,
-.chat_forwarddraft span:first-child:before,
-.offline_chat_incoming span:first-child:before,
-.offline_chat_outgoing span:first-child:before,
-.offline_chat_missed span:first-child:before,
-.offline_chat_forward span:first-child:before,
-.offline_chat_forwarddraft span:first-child:before,
-.online_chat_incoming span:first-child:before,
-.online_chat_outgoing span:first-child:before,
-.online_chat_missed span:first-child:before,
-.online_chat_forward span:first-child:before,
-.online_chat_forwarddraft span:first-child:before,
-.phone_incoming span:first-child:before,
-.phone_outgoing span:first-child:before,
-.phone_missed span:first-child:before,
-.phone_forward span:first-child:before,
-.phone_forwarddraft span:first-child:before,
-.web_incoming span:first-child:before,
-.web_out span:first-child:before,
-.web_missed span:first-child:before,
-.web_forward span:first-child:before,
-.web_forwarddraft span:first-child:before,
-.customerportal_incoming span:first-child:before,
-.customerportal_out span:first-child:before,
-.customerportal_missed span:first-child:before,
-.customerportal_forward span:first-child:before,
-.customerportal_forwarddraft span:first-child:before,
-.feedback_default span:first-child:before,
-.feedback_incoming span:first-child:before,
-.feedback_out span:first-child:before,
-.feedback_missed span:first-child:before,
-.feedback_forward span:first-child:before,
-.feedback_forwarddraft span:first-child:before {
-  color: inherit;
-}
-
-/* Email */
-.email_incoming,
-.email_missed,
-.email_outgoing {
-  bottom: var(--zd_size2);
-}
-
-/* twitter */
-.twitter_incoming,
-.twitter_outgoing,
-.twitter_missed {
-  bottom: var(--zd_size1);
-}
-
-/* facebook */
-.facebook_incoming,
-.facebook_missed,
-.facebook_outgoing {
-  right: var(--zd_size2);
-}
-
-/* chat */
-.chat_incoming,
-.offline_chat_incoming,
-.online_chat_incoming,
-.chat_missed,
-.offline_chat_missed,
-.online_chat_missed,
-.chat_outgoing,
-.offline_chat_outgoing,
-.online_chat_outgoing {
-  bottom: var(--zd_size1);
-}
-
-/* forums */
-.forums_default {
-  top: var(--zd_size1);
-}
-
-/* feedback */
-.feedback_incoming,
-.feedback_missed,
-.feedback_out {
-  right: var(--zd_size1);
-  top: var(--zd_size1);
-}
-
-/* draft */
-.email_draft,
-.facebook_draft,
-.twitter_draft,
-.forums_draft,
-.chat_draft,
-.offline_chat_draft,
-.online_chat_draft,
-.phone_draft,
-.web_draft,
-.customerportal_draft,
-.feedback_draft {
-  left: var(--zd_size1);
-}
-
-/* forward */
-.email_forward,
-.facebook_forward,
-.facebook_dm_forward,
-.twitter_forward,
-.forums_forward,
-.chat_forward,
-.offline_chat_forward,
-.online_chat_forward,
-.phone_forward,
-.web_forward,
-.customerportal_forward,
-.feedback_forward {
-  bottom: var(--zd_size1);
-}
-
-/* forwarddraft */
-.email_forwarddraft,
-.facebook_forwarddraft,
-.twitter_forwarddraft,
-.forums_forwarddraft,
-.chat_forwarddraft,
-.offline_chat_forwarddraft,
-.online_chat_forwarddraft,
-.phone_forwarddraft,
-.web_forwarddraft,
-.customerportal_forwarddraft,
-.feedback_forwarddraft {
-  left: var(--zd_size1);
-  bottom: var(--zd_size1);
-}
-
-/* facebook_dm */
-.facebook_dm_default,
-.facebook_dm_incoming,
-.facebook_dm_outgoing,
-.facebook_dm_missed {
-  right: var(--zd_size2);
-}
-
-/*Topic Icon colors*/
-.topic_olive {
-  --topIconColor: var(--zdt_channelIcon_topIcon_iconGreen);
-}
-.topic_yellow3 {
-  --topIconColor: var(--zdt_channelIcon_topIcon_iconYellow);
-}
-.topicIcon {
-  color: var(--topIconColor);
-}

package/src/ChannelIcon/docs/ChannelIcon__default.docs.js

@@ -1,63 +0,0 @@
-import React, { Component } from 'react';
-import ChannelIcon from '../ChannelIcon';
-import { getChannelMappingObj } from '../../utils/ChannelIconMapping';
-import { Container, Box } from '@zohodesk/components/lib/Layout';
-
-export default class ChannelIcon__default extends Component {
-  constructor(props) {
-    super(props);
-  }
-
-  render() {
-    let boxStyle = {},
-      style = {
-        border: '1px solid #c3c1c1',
-        padding: '10px',
-        margin: '1px 10px',
-        textAlign: 'center'
-      },
-      titleStyle = {
-        'font-size': '13px',
-        'padding-bottom': '5px',
-        'border-bottom': '1px solid #c3c1c1',
-        margin: '10px 0 5px',
-        textAlign: 'center'
-      };
-    let channels = getChannelMappingObj();
-    return (
-      <Container>
-        {Object.keys(channels).map((item, i) => (
-          <Box key={i} scroll='none' style={{ padding: '5px' }}>
-            <p style={titleStyle}>{item}</p>
-            <Container
-              alignBox='row'
-              align='vertical'
-              isCover={false}
-              wrap='wrap'
-            >
-              {Object.keys(channels[item]).map((channel, j) => (
-                <Box flexible style={style} key={j}>
-                  <h6>{channel}</h6>
-                  <div>
-                    <ChannelIcon
-                      name={item}
-                      action={channel}
-                      iconSize='21'
-                      size='medium'
-                    />
-                  </div>
-                </Box>
-              ))}
-            </Container>
-          </Box>
-        ))}
-        <br />
-      </Container>
-    );
-  }
-}
-if (__DOCS__) {
-  ChannelIcon__default.docs = {
-    componentGroup: 'Atom'
-  };
-}

package/src/Drawer/Drawer.js

@@ -1,398 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import FreezeLayer from '../FreezeLayer/FreezeLayer';
-import { Container, Box } from '@zohodesk/components/lib/Layout';
-import { Card, CardHeader, CardContent } from '@zohodesk/components/lib/Card';
-import FormAction from '../FormAction/FormAction';
-import VelocityAnimationGroup from '@zohodesk/components/lib/VelocityAnimation/VelocityAnimationGroup/VelocityAnimationGroup';
-import {
-  ResponsiveSender,
-  ResponsiveReceiver
-} from '@zohodesk/components/lib/Responsive/CustomResponsive';
-import IconButton from '../IconButton/IconButton';
-import Icon from '@zohodesk/icons/lib/Icon';
-import { getZIndex } from '@zohodesk/components/lib/Provider/ZindexProvider';
-import style from './Drawer.module.css';
-export class Header extends React.Component {
-  render() {
-    let {
-      title,
-      onClose,
-      children,
-      className,
-      paddingSize,
-      closeTitle,
-      iconName,
-      iconSize,
-      onIconClick,
-      isIconBold,
-      dataId,
-      flexible,
-      getChildren,
-      iconTitle,
-      isBoxIcon,
-      getTitleChildren
-    } = this.props;
-
-    return (
-      <CardHeader
-        customClass={`${style.header} ${style[`${paddingSize}HeaderPadding`]} ${
-          className ? className : ''
-        }`}
-        dataId={dataId}
-      >
-        <Container
-          alignBox='row'
-          align='vertical'
-          isCover={false}
-          className={style.subheader}
-        >
-          <Box flexible shrink>
-            <Container alignBox='row' isCover={false} align='vertical'>
-              {iconName ? (
-                <Box className={style.iconWrapper}>
-                  {isBoxIcon ? (
-                    <IconButton
-                      iconName={iconName}
-                      iconSize={iconSize}
-                      onClick={onIconClick}
-                      hoverType='border'
-                      isBold={isIconBold}
-                      title={iconTitle}
-                    />
-                  ) : (
-                    <Icon
-                      name={iconName}
-                      size={iconSize}
-                      onClick={onIconClick}
-                      title={iconTitle}
-                    />
-                  )}
-                </Box>
-              ) : null}
-              {title || getTitleChildren ? (
-                <Box
-                  flexible={flexible}
-                  shrink
-                >
-                  <Container alignBox='row' align='vertical'>
-                    {title?<Box
-                      className={style.title}
-                      data-title={title}
-                      shrink
-                    >
-                      {title}
-                    </Box>:null}
-                    {getTitleChildren?<Box>{getTitleChildren()}</Box>:null}
-                  </Container>
-                </Box>
-              ) : null}
-              {children ? <Box>{children}</Box> : null}
-            </Container>
-          </Box>
-          {onClose ? (
-            <Box>
-              <IconButton
-                onClick={onClose}
-                dataId='closeButton'
-                title={closeTitle}
-                iconName='ZD-cross'
-                iconSize='11'
-              />
-            </Box>
-          ) : null}
-        </Container>
-        {getChildren ? (
-          <Container isCover={false}>
-            <Box flexible>{getChildren()}</Box>
-          </Container>
-        ) : null}
-      </CardHeader>
-    );
-  }
-}
-
-Header.propTypes = {
-  children: PropTypes.node,
-  className: PropTypes.string,
-  closeTitle: PropTypes.string,
-  dataId: PropTypes.string,
-  flexible: PropTypes.bool,
-  getChildren: PropTypes.func,
-  iconName: PropTypes.string,
-  iconSize: PropTypes.string,
-  iconTitle: PropTypes.string,
-  isIconBold: PropTypes.bool,
-  onClose: PropTypes.func,
-  onIconClick: PropTypes.func,
-  paddingSize: PropTypes.oneOf(['small', 'medium', 'large']),
-  title: PropTypes.string,
-  isBoxIcon: PropTypes.bool,
-  getTitleChildren: PropTypes.func
-};
-Header.defaultProps = {
-  flexible: false,
-  paddingSize: 'small',
-  isBoxIcon: true
-};
-
-export class Content extends React.Component {
-  render() {
-    let { children, className, paddingSize, eleRef } = this.props;
-    return (
-      <CardContent
-        scroll='vertical'
-        isScrollAttribute
-        customClass={`${className ? className : ''} ${
-          paddingSize ? style[`${paddingSize}ContentPadding`] : ''
-        }`}
-        eleRef={eleRef}
-      >
-        {children}
-      </CardContent>
-    );
-  }
-}
-
-Content.propTypes = {
-  children: PropTypes.node,
-  className: PropTypes.string,
-  eleRef: PropTypes.func,
-  paddingSize: PropTypes.oneOf(['small', 'medium', 'large'])
-};
-
-export class Footer extends React.Component {
-  render() {
-    let { paddingLeftSize, paddingRightClass, children, size } = this.props;
-    return (
-      <FormAction
-        size={size}
-        paddingLeftSize={paddingLeftSize}
-        paddingRightClass={paddingRightClass}
-      >
-        {children}
-      </FormAction>
-    );
-  }
-}
-
-Footer.propTypes = {
-  children: PropTypes.node,
-  paddingLeftSize: PropTypes.string,
-  paddingRightClass: PropTypes.string,
-  size: PropTypes.string
-};
-Footer.defaultProps = {
-  size: 'small'
-};
-
-export default class Drawer extends React.Component {
-  constructor(props) {
-    super(props);
-    this.drawers = this.drawers.bind(this);
-    this.responsiveFunc = this.responsiveFunc.bind(this);
-    this.getNextIndex = getZIndex(this);
-  }
-
-  drawers(uptoTablet, styleByResolutions) {
-    let {
-      children,
-      size,
-      paddingSize,
-      subDrawerActive,
-      subDrawerChildren,
-      onBodyClick
-    } = this.props;
-
-    let childrenWithProps = React.Children.map(children, child => {
-      if (
-        child.type === Header ||
-        child.type === Footer ||
-        child.type === Content
-      ) {
-        let { paddingSize: childPaddingSize } = child.props || {};
-        return paddingSize || childPaddingSize
-          ? React.cloneElement(child, {
-              paddingSize: childPaddingSize ? childPaddingSize : paddingSize
-            })
-          : child;
-      }
-      return child;
-    });
-
-    return (
-      <React.Fragment>
-        {subDrawerChildren ? (
-          <Box className={style.columns}>
-            <VelocityAnimationGroup
-              name='slideRight'
-              isActive={subDrawerActive}
-            >
-              <ResponsiveSender>
-                <Container
-                  className={styleByResolutions}
-                  onClick={e => {
-                    e && e.stopPropagation && e.stopPropagation();
-                  }}
-                >
-                  <Box flexible>{subDrawerChildren}</Box>
-                </Container>
-              </ResponsiveSender>
-            </VelocityAnimationGroup>
-          </Box>
-        ) : null}
-        <Box
-          className={`${style.container} ${style.columns} ${
-            style.drawerModal
-          } ${uptoTablet ? style.mbleSize : style[size]}`}
-        >
-          <Card
-            onClick={e => {
-              e && e.stopPropagation && e.stopPropagation();
-              onBodyClick(e);
-            }}
-          >
-            {childrenWithProps}
-          </Card>
-        </Box>
-      </React.Fragment>
-    );
-  }
-
-  responsiveFunc({ mediaQueryOR }) {
-    return {
-      uptoTablet: mediaQueryOR([{ maxWidth: 768 }])
-    };
-  }
-
-  render() {
-    let {
-      needFreeze,
-      palette,
-      isActive,
-      onClose,
-      forwardRef,
-      responsiveId,
-      subDrawerSize,
-      subDrawerClass,
-      subDrawerActive,
-      customClass,
-      needAutoZindex,
-      innerPortalName
-    } = this.props;
-
-    return (
-      <ResponsiveReceiver
-        query={this.responsiveFunc}
-        responsiveId={responsiveId}
-      >
-        {({ uptoTablet }) => {
-          let styleByResolutions = `${subDrawerClass} ${style.secondDrawer} ${
-            uptoTablet
-              ? `${style.secondMobDrawer} ${style.mbleSize}`
-              : `${style[subDrawerSize]}`
-          } `;
-
-          return needFreeze ? (
-            <FreezeLayer
-              onClick={onClose}
-              isActive={isActive}
-              animationName='fade'
-              childAnimationName='slideRight'
-              palette={palette}
-              forwardRef={forwardRef}
-              customClass={customClass}
-              needAutoZindex={needAutoZindex}
-            >
-              <Box flexible>
-                <Container alignBox='row'>
-                  <React.Fragment>
-                    {uptoTablet ? <Box flexible /> : null}
-
-                    <ResponsiveSender>
-                      <Box
-                        flexible
-                        className={
-                          uptoTablet ? style.mobModal : style.drawerModal
-                        }
-                      >
-                        {!subDrawerActive && innerPortalName ? (
-                          <div data-portal={innerPortalName}></div>
-                        ) : null}
-                      </Box>
-                    </ResponsiveSender>
-                    {this.drawers(uptoTablet, styleByResolutions)}
-                  </React.Fragment>
-                </Container>
-              </Box>
-            </FreezeLayer>
-          ) : (
-            <VelocityAnimationGroup isActive={isActive} name='slideRight'>
-              <Container
-                align='right'
-                alignBox='row'
-                scroll='none'
-                eleRef={forwardRef}
-                className={`${style.isOverlay} ${customClass}`}
-                style={
-                  isActive && needAutoZindex
-                    ? { zIndex: `${this.getNextIndex()}` }
-                    : {}
-                }
-              >
-                {this.drawers(uptoTablet, styleByResolutions)}
-              </Container>
-            </VelocityAnimationGroup>
-          );
-        }}
-      </ResponsiveReceiver>
-    );
-  }
-}
-
-Drawer.propTypes = {
-  children: PropTypes.node,
-  customClass: PropTypes.string,
-  forwardRef: PropTypes.object,
-  isActive: PropTypes.bool,
-  needAutoZindex: PropTypes.bool,
-  needFreeze: PropTypes.bool,
-  onBodyClick: PropTypes.func,
-  onClose: PropTypes.func,
-  paddingSize: PropTypes.oneOf(['small', 'medium', 'large']),
-  palette: PropTypes.oneOf(['dark', 'default', 'darkLight', 'plain']),
-  responsiveId: PropTypes.string,
-  size: PropTypes.oneOf([
-    'small',
-    'xsmall',
-    'medium',
-    'xmedium',
-    'large',
-    'xlarge',
-    'xxlarge',
-    'default'
-  ]),
-  subDrawerActive: PropTypes.bool,
-  subDrawerChildren: PropTypes.func,
-  subDrawerClass: PropTypes.string,
-  subDrawerSize: PropTypes.oneOf(['xsmall', 'small', 'medium'])
-};
-
-Drawer.defaultProps = {
-  isActive: false,
-  palette: 'default',
-  responsiveId: 'Helmet',
-  size: 'small',
-  subDrawerSize: 'small',
-  subDrawerActive: false,
-  subDrawerClass: '',
-  customClass: '',
-  needAutoZindex: true,
-  onBodyClick: () => {}
-};
-
-if (__DOCS__) {
-  Drawer.docs = {
-    componentGroup: 'Template'
-  };
-}