@zohodesk/dot 1.0.0-temp.213 → 1.0.0-temp.777

package/es/ChannelIcon/ChannelIcon.module.css

@@ -0,0 +1,208 @@
+.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/es/ChannelIcon/docs/ChannelIcon__default.docs.js

@@ -0,0 +1,57 @@
+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 /*#__PURE__*/React.createElement(Container, null, Object.keys(channels).map((item, i) => /*#__PURE__*/React.createElement(Box, {
+      key: i,
+      scroll: "none",
+      style: {
+        padding: '5px'
+      }
+    }, /*#__PURE__*/React.createElement("p", {
+      style: titleStyle
+    }, item), /*#__PURE__*/React.createElement(Container, {
+      alignBox: "row",
+      align: "vertical",
+      isCover: false,
+      wrap: "wrap"
+    }, Object.keys(channels[item]).map((channel, j) => /*#__PURE__*/React.createElement(Box, {
+      flexible: true,
+      style: style,
+      key: j
+    }, /*#__PURE__*/React.createElement("h6", null, channel), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(ChannelIcon, {
+      name: item,
+      action: channel,
+      iconSize: "21",
+      size: "medium"
+    }))))))), /*#__PURE__*/React.createElement("br", null));
+  }
+
+}
+
+if (false) {
+  ChannelIcon__default.docs = {
+    componentGroup: 'Atom'
+  };
+}

package/es/Drawer/Drawer.js

@@ -0,0 +1,314 @@
+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 /*#__PURE__*/React.createElement(CardHeader, {
+      customClass: `${style.header} ${style[`${paddingSize}HeaderPadding`]} ${className ? className : ''}`,
+      dataId: dataId
+    }, /*#__PURE__*/React.createElement(Container, {
+      alignBox: "row",
+      align: "vertical",
+      isCover: false,
+      className: style.subheader
+    }, /*#__PURE__*/React.createElement(Box, {
+      flexible: true,
+      shrink: true
+    }, /*#__PURE__*/React.createElement(Container, {
+      alignBox: "row",
+      isCover: false,
+      align: "vertical"
+    }, iconName ? /*#__PURE__*/React.createElement(Box, {
+      className: style.iconWrapper
+    }, isBoxIcon ? /*#__PURE__*/React.createElement(IconButton, {
+      iconName: iconName,
+      iconSize: iconSize,
+      onClick: onIconClick,
+      hoverType: "border",
+      isBold: isIconBold,
+      title: iconTitle
+    }) : /*#__PURE__*/React.createElement(Icon, {
+      name: iconName,
+      size: iconSize,
+      onClick: onIconClick,
+      title: iconTitle
+    })) : null, title || getTitleChildren ? /*#__PURE__*/React.createElement(Box, {
+      flexible: flexible,
+      shrink: true
+    }, /*#__PURE__*/React.createElement(Container, {
+      alignBox: "row",
+      align: "vertical"
+    }, title ? /*#__PURE__*/React.createElement(Box, {
+      className: style.title,
+      "data-title": title,
+      shrink: true
+    }, title) : null, getTitleChildren ? /*#__PURE__*/React.createElement(Box, null, getTitleChildren()) : null)) : null, children ? /*#__PURE__*/React.createElement(Box, null, children) : null)), onClose ? /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(IconButton, {
+      onClick: onClose,
+      dataId: "closeButton",
+      title: closeTitle,
+      iconName: "ZD-cross",
+      iconSize: "11"
+    })) : null), getChildren ? /*#__PURE__*/React.createElement(Container, {
+      isCover: false
+    }, /*#__PURE__*/React.createElement(Box, {
+      flexible: true
+    }, getChildren())) : null);
+  }
+
+}
+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 /*#__PURE__*/React.createElement(CardContent, {
+      scroll: "vertical",
+      isScrollAttribute: true,
+      customClass: `${className ? className : ''} ${paddingSize ? style[`${paddingSize}ContentPadding`] : ''}`,
+      eleRef: eleRef
+    }, children);
+  }
+
+}
+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 /*#__PURE__*/React.createElement(FormAction, {
+      size: size,
+      paddingLeftSize: paddingLeftSize,
+      paddingRightClass: paddingRightClass
+    }, children);
+  }
+
+}
+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 ? /*#__PURE__*/React.cloneElement(child, {
+          paddingSize: childPaddingSize ? childPaddingSize : paddingSize
+        }) : child;
+      }
+
+      return child;
+    });
+    return /*#__PURE__*/React.createElement(React.Fragment, null, subDrawerChildren ? /*#__PURE__*/React.createElement(Box, {
+      className: style.columns
+    }, /*#__PURE__*/React.createElement(VelocityAnimationGroup, {
+      name: "slideRight",
+      isActive: subDrawerActive
+    }, /*#__PURE__*/React.createElement(ResponsiveSender, null, /*#__PURE__*/React.createElement(Container, {
+      className: styleByResolutions,
+      onClick: e => {
+        e && e.stopPropagation && e.stopPropagation();
+      }
+    }, /*#__PURE__*/React.createElement(Box, {
+      flexible: true
+    }, subDrawerChildren))))) : null, /*#__PURE__*/React.createElement(Box, {
+      className: `${style.container} ${style.columns} ${style.drawerModal} ${uptoTablet ? style.mbleSize : style[size]}`
+    }, /*#__PURE__*/React.createElement(Card, {
+      onClick: e => {
+        e && e.stopPropagation && e.stopPropagation();
+        onBodyClick(e);
+      }
+    }, childrenWithProps)));
+  }
+
+  responsiveFunc(_ref) {
+    let {
+      mediaQueryOR
+    } = _ref;
+    return {
+      uptoTablet: mediaQueryOR([{
+        maxWidth: 768
+      }])
+    };
+  }
+
+  render() {
+    let {
+      needFreeze,
+      palette,
+      isActive,
+      onClose,
+      forwardRef,
+      responsiveId,
+      subDrawerSize,
+      subDrawerClass,
+      subDrawerActive,
+      customClass,
+      needAutoZindex,
+      innerPortalName
+    } = this.props;
+    return /*#__PURE__*/React.createElement(ResponsiveReceiver, {
+      query: this.responsiveFunc,
+      responsiveId: responsiveId
+    }, _ref2 => {
+      let {
+        uptoTablet
+      } = _ref2;
+      let styleByResolutions = `${subDrawerClass} ${style.secondDrawer} ${uptoTablet ? `${style.secondMobDrawer} ${style.mbleSize}` : `${style[subDrawerSize]}`} `;
+      return needFreeze ? /*#__PURE__*/React.createElement(FreezeLayer, {
+        onClick: onClose,
+        isActive: isActive,
+        animationName: "fade",
+        childAnimationName: "slideRight",
+        palette: palette,
+        forwardRef: forwardRef,
+        customClass: customClass,
+        needAutoZindex: needAutoZindex
+      }, /*#__PURE__*/React.createElement(Box, {
+        flexible: true
+      }, /*#__PURE__*/React.createElement(Container, {
+        alignBox: "row"
+      }, /*#__PURE__*/React.createElement(React.Fragment, null, uptoTablet ? /*#__PURE__*/React.createElement(Box, {
+        flexible: true
+      }) : null, /*#__PURE__*/React.createElement(ResponsiveSender, null, /*#__PURE__*/React.createElement(Box, {
+        flexible: true,
+        className: uptoTablet ? style.mobModal : style.drawerModal
+      }, !subDrawerActive && innerPortalName ? /*#__PURE__*/React.createElement("div", {
+        "data-portal": innerPortalName
+      }) : null)), this.drawers(uptoTablet, styleByResolutions))))) : /*#__PURE__*/React.createElement(VelocityAnimationGroup, {
+        isActive: isActive,
+        name: "slideRight"
+      }, /*#__PURE__*/React.createElement(Container, {
+        align: "right",
+        alignBox: "row",
+        scroll: "none",
+        eleRef: forwardRef,
+        className: `${style.isOverlay} ${customClass}`,
+        style: isActive && needAutoZindex ? {
+          zIndex: `${this.getNextIndex()}`
+        } : {}
+      }, this.drawers(uptoTablet, styleByResolutions)));
+    });
+  }
+
+}
+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 (false) {
+  Drawer.docs = {
+    componentGroup: 'Template'
+  };
+}

package/es/Drawer/Drawer.module.css

@@ -0,0 +1,103 @@
+.container {
+  box-shadow: 0 6px 12px var(--zdt_drawer_default_box_shadow);
+  background-color: var(--zdt_drawer_default_bg);
+  transition: width var(--zd_transition3);
+}
+.isOverlay {
+  right: 0;
+  top: 0;
+  bottom: 0;
+  position: absolute;
+  pointer-events: none;
+}
+.columns {
+  pointer-events: initial;
+}
+.drawerModal {
+  position: relative;
+}
+.secondDrawer {
+  background-color: var(--zdt_drawer_default_bg);
+  box-shadow: 0 6px 12px var(--zdt_drawer_default_box_shadow);
+}
+.secondMobDrawer {
+  right: 0;
+  position: absolute;
+  top: 0;
+  z-index: 1;
+}
+.mobModal {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+}
+.xsmall {
+  width: var(--zd_size360);
+}
+.small {
+  width: var(--zd_size410);
+}
+.medium {
+  width: var(--zd_size660);
+}
+.xmedium {
+  width: var(--zd_size730);
+}
+.large {
+  width: var(--zd_size936);
+}
+.xlarge {
+  width: var(--zd_size840);
+}
+.xxlarge {
+  width: var(--zd_size1142);
+}
+.mbleSize,
+.default {
+  width: 100%;
+}
+.header {
+  min-height: var(--zd_size50);
+  background-color: var(--zdt_drawer_header_bg);
+  border-bottom: solid 1px var(--zdt_drawer_header_border);
+  padding-top: var(--zd_size10);
+  padding-bottom: var(--zd_size10);
+}
+.subheader {
+  min-height: var(--zd_size28);
+}
+.title {
+  color: var( --zdt_drawer_title_text);
+  font: var(--zd_font_size16) var(--zd_semibold);
+  composes: dotted from '~@zohodesk/components/lib/common/common.module.css';
+  padding: 0 var(--zd_size10) 0 0;
+}
+.smallHeaderPadding {
+  padding-right: var(--zd_size11);
+  padding-left: var(--zd_size30);
+}
+.smallContentPadding {
+  padding-left: var(--zd_size30);
+  padding-right: var(--zd_size30);
+}
+.mediumHeaderPadding {
+  padding-right: var(--zd_size15);
+  padding-left: var(--zd_size30);
+}
+.mediumContentPadding {
+  padding-left: var(--zd_size30);
+  padding-right: var(--zd_size30);
+}
+.largeHeaderPadding {
+  padding-right: var(--zd_size15);
+  padding-left: var(--zd_size50);
+}
+.largeContentPadding {
+  padding-left: var(--zd_size50);
+  padding-right: var(--zd_size50);
+}
+.iconWrapper {
+  margin-right: var(--zd_size10);
+}