@zohodesk/dot 1.0.0 → 1.2.0

package/es/v1/Drawer/Drawer.js

@@ -0,0 +1,271 @@
+import React, { useRef } from 'react';
+import { Header_defaultProps, Footer_defaultProps, Drawer_defaultProps } from '../../Drawer/props/defaultProps';
+import { Header_propTypes, Content_propTypes, Footer_propTypes, Drawer_propTypes } from '../../Drawer/props/propTypes';
+import { Container, Box } from '@zohodesk/components/lib/Layout';
+import { Card, CardHeader, CardContent } from '@zohodesk/components/lib/Card';
+import VelocityAnimationGroup from '@zohodesk/components/lib/VelocityAnimation/VelocityAnimationGroup/VelocityAnimationGroup';
+import { ResponsiveSender, ResponsiveReceiver } from '@zohodesk/components/lib/Responsive/CustomResponsive';
+import { Icon } from '@zohodesk/icons';
+import { useZIndex } from '@zohodesk/components/lib/Provider/ZindexProvider';
+import FocusScope from '@zohodesk/a11y/es/FocusScope/FocusScope';
+import Heading from '@zohodesk/components/lib/Heading/Heading';
+import FreezeLayer from '../../FreezeLayer/FreezeLayer';
+import FormAction from '../FormAction/FormAction';
+import IconButton from '../IconButton/IconButton';
+import style from '../../Drawer/Drawer.module.css';
+export function Header(props) {
+  let {
+    title,
+    onClose,
+    children,
+    className,
+    paddingSize,
+    closeTitle,
+    iconName,
+    iconSize,
+    onIconClick,
+    isIconBold,
+    dataId,
+    flexible,
+    getChildren,
+    iconTitle,
+    isBoxIcon,
+    getTitleChildren
+  } = 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, {
+    "data-title": title,
+    shrink: true
+  }, /*#__PURE__*/React.createElement(Heading, {
+    title: title,
+    className: style.title,
+    a11y: {
+      tabindex: '0'
+    }
+  })) : 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",
+    a11y: {
+      ariaLabel: 'Close'
+    }
+  })) : null), getChildren ? /*#__PURE__*/React.createElement(Container, {
+    isCover: false
+  }, /*#__PURE__*/React.createElement(Box, {
+    flexible: true
+  }, getChildren())) : null);
+}
+Header.propTypes = Header_propTypes;
+Header.defaultProps = Header_defaultProps;
+export function Content(props) {
+  let {
+    children,
+    className,
+    paddingSize,
+    eleRef
+  } = props;
+  return /*#__PURE__*/React.createElement(CardContent, {
+    scroll: "vertical",
+    isScrollAttribute: true,
+    customClass: `${className ? className : ''} ${paddingSize ? style[`${paddingSize}ContentPadding`] : ''}`,
+    eleRef: eleRef
+  }, children);
+}
+Content.propTypes = Content_propTypes;
+export function Footer(props) {
+  let {
+    paddingLeftSize,
+    paddingRightClass,
+    children,
+    size
+  } = props;
+  return /*#__PURE__*/React.createElement(FormAction, {
+    size: size,
+    paddingLeftSize: paddingLeftSize,
+    paddingRightClass: paddingRightClass
+  }, children);
+}
+Footer.propTypes = Footer_propTypes;
+Footer.defaultProps = Footer_defaultProps;
+export default function Drawer(props) {
+  const contentRef = useRef(null);
+  const getNextIndex = useZIndex();
+
+  function drawers(uptoTablet, styleByResolutions) {
+    let {
+      children,
+      size,
+      paddingSize,
+      subDrawerActive,
+      subDrawerChildren,
+      onBodyClick,
+      onClose,
+      needFocusScope,
+      customProps
+    } = props;
+    const {
+      focusScopeProps = {}
+    } = customProps;
+    const {
+      autoFocus = true,
+      restoreFocus = true,
+      needArrowLoop = false,
+      needTabLoop = true,
+      enableEnterAction = false
+    } = focusScopeProps;
+    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;
+    });
+    let content = /*#__PURE__*/React.createElement(Box, {
+      className: `${style.container} ${style.columns} ${style.drawerModal} ${uptoTablet ? style.mbleSize : style[size]}`,
+      "data-a11y-need-focus-style": "false",
+      tabindex: -1,
+      eleRef: contentRef
+    }, /*#__PURE__*/React.createElement(Card, {
+      onClick: e => {
+        e && e.stopPropagation && e.stopPropagation();
+        onBodyClick(e);
+      }
+    }, childrenWithProps));
+    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, needFocusScope ? /*#__PURE__*/React.createElement(FocusScope, {
+      elementRef: contentRef,
+      autoFocus: autoFocus,
+      needTabLoop: needTabLoop,
+      restoreFocus: restoreFocus,
+      needArrowLoop: needArrowLoop,
+      onClose: onClose,
+      enableEnterAction: enableEnterAction
+    }, content) : content);
+  }
+
+  function responsiveFunc(_ref) {
+    let {
+      mediaQueryOR
+    } = _ref;
+    return {
+      uptoTablet: mediaQueryOR([{
+        maxWidth: 768
+      }])
+    };
+  }
+
+  let {
+    needFreeze,
+    palette,
+    isActive,
+    onClose,
+    forwardRef,
+    responsiveId,
+    subDrawerSize,
+    subDrawerClass,
+    subDrawerActive,
+    customClass,
+    needAutoZindex,
+    innerPortalName
+  } = props;
+  return /*#__PURE__*/React.createElement(ResponsiveReceiver, {
+    query: 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)), 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: `${getNextIndex()}`
+      } : {}
+    }, drawers(uptoTablet, styleByResolutions)));
+  });
+}
+Drawer.propTypes = Drawer_propTypes;
+Drawer.defaultProps = Drawer_defaultProps; // if (__DOCS__) {
+//   Drawer.docs = {
+//     componentGroup: 'Template'
+//   };
+// }

package/es/v1/FlipCard/FlipCard.js

@@ -0,0 +1,130 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+import React from 'react';
+import { defaultProps } from '../../FlipCard/props/defaultProps';
+import { propTypes } from '../../FlipCard/props/propTypes';
+import CheckBox from '@zohodesk/components/lib/CheckBox/CheckBox';
+import { Container } from '@zohodesk/components/lib/Layout';
+import AvatarSize from '@zohodesk/components/lib/Provider/AvatarSize';
+import ChannelIcon from '../../ChannelIcon/ChannelIcon';
+import AvatarIcon from '../../avatar/AvatarIcon/AvatarIcon';
+import AvatarUser from '../../avatar/AvatarUser/AvatarUser';
+import { stopBubbling } from '../../utils/General';
+import style from '../../FlipCard/FlipCard.module.css';
+export default function FlipCard(props) {
+  let {
+    id,
+    action,
+    name,
+    initial,
+    isChecked,
+    noNeedFlip,
+    size,
+    channel,
+    isPaidUser,
+    isPortalUser,
+    src,
+    icon,
+    iconSize,
+    iconClass,
+    ticListContainer,
+    ticList,
+    dataId,
+    className,
+    palette,
+    textPalette,
+    customTextClass,
+    frontClass,
+    needTitle,
+    iconColor,
+    tourId,
+    isFilledCheckbox,
+    channelTitle,
+    customProps
+  } = props;
+  const {
+    CheckBoxProps = {},
+    ChannelIconProps = {},
+    AvatarIconProps = {},
+    AvatarUserProps = {}
+  } = customProps;
+
+  const onClick = e => {
+    if (!noNeedFlip) {
+      stopBubbling(e);
+    }
+  };
+
+  const onChange = (isChecked, e) => {
+    let {
+      onChange
+    } = props;
+    stopBubbling(e);
+    onChange(id, isChecked, e);
+  };
+
+  return /*#__PURE__*/React.createElement("div", {
+    className: `${AvatarSize(size)}  ${noNeedFlip ? style.flipNone : isChecked ? style.notFlip : style.flip}`,
+    onClick: onClick,
+    "data-id": ticListContainer,
+    "data-test-id": ticListContainer,
+    "data-tour": tourId
+  }, /*#__PURE__*/React.createElement("div", {
+    className: style.container,
+    "data-id": ticList,
+    "data-test-id": ticList
+  }, !noNeedFlip ? /*#__PURE__*/React.createElement(Container, {
+    align: "both",
+    className: `${style.front} ${frontClass ? frontClass : ''}`
+  }, /*#__PURE__*/React.createElement(CheckBox, _extends({
+    isFilled: isFilledCheckbox,
+    checked: isChecked,
+    onChange: onChange,
+    id: `checkbox_${id}`,
+    dataId: `listViewCheckBox_${id}`
+  }, CheckBoxProps))) : null, /*#__PURE__*/React.createElement(Container, {
+    align: "both",
+    className: style.back
+  }, channel && action ? /*#__PURE__*/React.createElement(ChannelIcon, _extends({
+    name: channel,
+    action: action,
+    size: size,
+    iconSize: iconSize,
+    iconClass: iconClass,
+    dataId: channel,
+    className: className,
+    palette: palette,
+    textPalette: textPalette,
+    customTextClass: customTextClass,
+    iconColor: iconColor,
+    title: channelTitle,
+    iconTitle: channelTitle
+  }, ChannelIconProps)) : icon ? /*#__PURE__*/React.createElement(AvatarIcon, _extends({
+    name: icon,
+    iconSize: iconSize,
+    size: size,
+    iconClass: iconClass,
+    dataId: icon,
+    className: className,
+    iconColor: iconColor,
+    title: needTitle ? name : ''
+  }, AvatarIconProps)) : /*#__PURE__*/React.createElement(AvatarUser, _extends({
+    name: name,
+    initial: initial,
+    size: size,
+    isPaid: isPaidUser,
+    isPortal: isPortalUser,
+    src: src,
+    dataId: dataId,
+    needTitle: needTitle,
+    palette: palette,
+    textPalette: textPalette,
+    customTextClass: customTextClass
+  }, AvatarUserProps)))));
+}
+FlipCard.propTypes = propTypes;
+FlipCard.defaultProps = defaultProps; // if (__DOCS__) {
+//   FlipCard.docs = {
+//     componentGroup: 'Molecule'
+//   }; 
+// }

package/es/v1/FormAction/FormAction.js

@@ -0,0 +1,75 @@
+import React from 'react';
+import { defaultProps } from '../../FormAction/props/defaultProps';
+import { propTypes } from '../../FormAction/props/propTypes';
+import { Container, Box } from '@zohodesk/components/lib/Layout';
+import style from '../../FormAction/FormAction.module.css';
+export const LeftSide = props => {
+  props.children;
+};
+export const RightSide = props => {
+  props.children;
+};
+export const Center = props => {
+  props.children;
+};
+export default function FormAction(props) {
+  let {
+    size,
+    children,
+    paddingLeftSize,
+    paddingRightClass,
+    dataSelectorId
+  } = props;
+  let leftbuttonGroup = [],
+      rightbuttonGroup = [],
+      centerbuttonGroup = [];
+  React.Children.map(children, child => {
+    if (!child) {
+      return child;
+    } else if (child.type === LeftSide) {
+      leftbuttonGroup = leftbuttonGroup.concat(child.props.children);
+    } else if (child.type === RightSide) {
+      rightbuttonGroup = rightbuttonGroup.concat(child.props.children);
+    } else if (child.type === Center) {
+      centerbuttonGroup = centerbuttonGroup.concat(child.props.children);
+    } else {
+      leftbuttonGroup.push(child);
+    }
+  });
+  let hasLeftChild = leftbuttonGroup.length > 0;
+  let hasRightChild = rightbuttonGroup.length > 0;
+  let hasCenterChild = centerbuttonGroup.length > 0;
+  return /*#__PURE__*/React.createElement("div", {
+    className: style.wrapperDiv,
+    "data-selector-id": dataSelectorId
+  }, /*#__PURE__*/React.createElement(Container, {
+    alignBox: "row",
+    isCover: false,
+    align: hasCenterChild ? 'around' : hasRightChild && !hasLeftChild ? 'right' : null,
+    className: `
+                        ${`${style.footerParent} ${hasCenterChild ? '' : style[`${paddingLeftSize ? paddingLeftSize : size}Padding`]} ${paddingRightClass}`}
+
+                        ${style[`${size}Footer`]}
+                    `
+  }, hasLeftChild ? /*#__PURE__*/React.createElement(Box, {
+    flexible: hasRightChild ? true : false,
+    shrink: !hasRightChild && hasLeftChild ? true : false
+  }, leftbuttonGroup.length > 1 ? leftbuttonGroup.map((item, index) => /*#__PURE__*/React.createElement("div", {
+    className: style.marginRight,
+    key: index
+  }, item)) : leftbuttonGroup[0]) : null, hasRightChild ? /*#__PURE__*/React.createElement(Box, {
+    shrink: hasRightChild && !hasLeftChild ? true : false
+  }, rightbuttonGroup.length > 1 ? rightbuttonGroup.map((item, index) => /*#__PURE__*/React.createElement("div", {
+    className: style.marginRight,
+    key: index
+  }, item)) : rightbuttonGroup[0]) : null, hasCenterChild ? /*#__PURE__*/React.createElement(Box, null, centerbuttonGroup.length > 1 ? centerbuttonGroup.map((item, index) => /*#__PURE__*/React.createElement("div", {
+    className: style.marginRight,
+    key: index
+  }, item)) : centerbuttonGroup[0]) : null));
+}
+FormAction.propTypes = propTypes;
+FormAction.defaultProps = defaultProps; // if (__DOCS__) {
+//   FormAction.docs = {
+//     componentGroup: 'Atom'
+//   };
+// }

package/es/v1/IconButton/IconButton.js

@@ -0,0 +1,113 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+import React, { useState } from 'react';
+import { defaultProps } from '../../IconButton/props/defaultProps';
+import { propTypes } from '../../IconButton/props/propTypes';
+import { Icon } from '@zohodesk/icons';
+import { Container } from '@zohodesk/components/lib/Layout';
+import btnStyle from '@zohodesk/components/lib/semantic/Button/semanticButton.module.css';
+import RippleEffect from '@zohodesk/components/lib/RippleEffect/RippleEffect';
+import style from '../../IconButton/IconButton.module.css';
+export default function IconButton(props) {
+  let {
+    palette,
+    iconSize,
+    iconName,
+    className,
+    iconClass,
+    dataId,
+    dataSelectorId,
+    eleRef,
+    isActive,
+    tourId,
+    isDisabled,
+    children,
+    hoverType,
+    title,
+    isBold,
+    isNeedEffect,
+    needButtonTag,
+    a11y,
+    dataIsHtml,
+    customProps,
+    onClick,
+    onMouseOver,
+    onMouseDown
+  } = props;
+  const [isPressed, setPressed] = useState(false);
+
+  function handleToggle(e) {
+    if (e.key === ' ' || e.key === 'Enter' || e.key === 'Spacebar') {
+      e.preventDefault();
+      triggerClick(e);
+      triggerMouseDown(e);
+    }
+  }
+
+  function triggerClick(e) {
+    !isDisabled ? (onClick && onClick(e), setPressed(true)) : null;
+  }
+
+  function triggerMouseOver(e) {
+    !isDisabled ? (onMouseOver && onMouseOver(e), setPressed(true)) : null;
+  }
+
+  function triggerMouseDown(e) {
+    !isDisabled ? (onMouseDown && onMouseDown(e), setPressed(true)) : null;
+  }
+
+  function onBlur(e) {
+    !isDisabled ? setPressed(false) : null;
+  }
+
+  let {
+    ariaHaspopup,
+    ariaExpanded,
+    ariaLabel,
+    ariaControls,
+    ariaLabelledby
+  } = a11y;
+  return /*#__PURE__*/React.createElement(RippleEffect, {
+    palette: palette,
+    isActive: isActive,
+    hoverType: hoverType,
+    isDisabled: isDisabled,
+    isNeedEffect: isNeedEffect
+  }, /*#__PURE__*/React.createElement(Container, _extends({
+    "aria-label": ariaLabel,
+    "aria-haspopup": ariaHaspopup,
+    "aria-expanded": ariaExpanded,
+    "aria-controls": ariaControls,
+    "aria-labelledby": ariaLabelledby,
+    tagName: needButtonTag ? 'button' : 'div',
+    isInline: true,
+    tourId: tourId,
+    align: "both",
+    isCover: false,
+    className: `${needButtonTag && btnStyle.buttonReset} ${style.wrapper} ${className ? className : ''} ${isActive ? style[`${palette}_active`] : style[palette]}`,
+    dataId: dataId,
+    dataSelectorId: dataSelectorId,
+    onClick: triggerClick,
+    "data-title": title,
+    "data-ishtml": dataIsHtml,
+    eleRef: eleRef,
+    onMouseDown: triggerMouseDown,
+    onMouseEnter: triggerMouseOver,
+    "aria-pressed": isPressed,
+    onKeyDown: handleToggle,
+    onFocus: triggerMouseOver,
+    onBlur: onBlur,
+    disabled: isDisabled
+  }, customProps), iconName ? /*#__PURE__*/React.createElement(Icon, {
+    isBold: isBold,
+    size: iconSize,
+    name: iconName,
+    iconClass: iconClass
+  }) : null, children ? children : null));
+}
+IconButton.propTypes = propTypes;
+IconButton.defaultProps = defaultProps; // if (__DOCS__) {
+//   IconButton.docs = {
+//     componentGroup: 'Atom'
+//   };
+// }

package/es/v1/ImportantNotes/ImportantNotes.js

@@ -0,0 +1,41 @@
+import React from 'react';
+import { defaultProps } from '../../ImportantNotes/props/defaultProps';
+import { propTypes } from '../../ImportantNotes/props/propTypes';
+import { Container, Box } from '@zohodesk/components/lib/Layout';
+import { Icon } from '@zohodesk/icons';
+import style from '../../ImportantNotes/ImportantNotes.module.css';
+export default function ImportantNotes(props) {
+  let {
+    text,
+    iconName,
+    iconSize,
+    children,
+    iconClass,
+    isCover,
+    className
+  } = props;
+  return /*#__PURE__*/React.createElement(Container, {
+    isInline: !isCover,
+    isCover: false,
+    alignBox: "row",
+    align: "top",
+    className: `${style.section} ${className || ''}`
+  }, iconName ? /*#__PURE__*/React.createElement(Box, {
+    className: style.icon,
+    align: "start"
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: iconName,
+    size: iconSize,
+    iconClass: iconClass
+  })) : null, text || children ? /*#__PURE__*/React.createElement(Box, {
+    flexible: true,
+    className: style.title
+  }, text, children ? children : null) : null);
+}
+ImportantNotes.propTypes = propTypes;
+ImportantNotes.defaultProps = defaultProps; // if (__DOCS__) {
+//   ImportantNotes.docs = {
+//     componentGroup: 'Common',
+//     folderName: 'General'
+//   };
+// }