@zohodesk/dot 1.0.0 → 1.2.0

package/lib/v1/AlphabeticList/AlphabeticList.js

@@ -0,0 +1,111 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _defaultProps = require("../../AlphabeticList/props/defaultProps");
+
+var _propTypes = require("../../AlphabeticList/props/propTypes");
+
+var _Layout = require("@zohodesk/components/lib/Layout");
+
+var _AlphabeticListModule = _interopRequireDefault(require("../../AlphabeticList/AlphabeticList.module.css"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+/*** Libraries ***/
+
+/*** CSS ***/
+var AlphabeticListItemMemo = /*#__PURE__*/(0, _react.memo)(AlphabeticListItem);
+
+function AlphabeticList(props) {
+  var onSelect = props.onSelect,
+      selectedCharacter = props.selectedCharacter,
+      align = props.align,
+      type = props.type,
+      i18nKeys = props.i18nKeys,
+      dataId = props.dataId,
+      dataSelectorId = props.dataSelectorId;
+  var _i18nKeys$allText = i18nKeys.allText,
+      allText = _i18nKeys$allText === void 0 ? 'All' : _i18nKeys$allText,
+      _i18nKeys$allTitle = i18nKeys.allTitle,
+      allTitle = _i18nKeys$allTitle === void 0 ? 'All' : _i18nKeys$allTitle;
+  var alignType = align === 'vertical' ? _AlphabeticListModule["default"].column : _AlphabeticListModule["default"].row;
+  var letters = type == 'alphabeticalwithhash' ? _propTypes.AlphabeticCharactersWithHash : type == 'alphabetical' ? _propTypes.AlphabeticCharacters : _propTypes.NumberList;
+
+  var handleSelectAll = function handleSelectAll() {
+    onSelect && selectedCharacter != 'ALL' && onSelect('ALL');
+  };
+
+  var handleSelect = function handleSelect(id) {
+    onSelect && selectedCharacter !== id && onSelect(id);
+  };
+
+  return /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
+    tagName: "ul",
+    isCover: false,
+    alignBox: align === 'vertical' ? 'column' : 'row',
+    className: "".concat(_AlphabeticListModule["default"].container, " ").concat(alignType, " ").concat(type != 'alphabetical' ? _AlphabeticListModule["default"].numbers : ''),
+    dataId: "navigationDiv",
+    dataSelectorId: dataSelectorId
+  }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+    tagName: "li",
+    className: "".concat(_AlphabeticListModule["default"].list, " ").concat(_AlphabeticListModule["default"].title, " ").concat(selectedCharacter === 'ALL' ? _AlphabeticListModule["default"].selected : ''),
+    dataId: "All_".concat(dataId)
+  }, /*#__PURE__*/_react["default"].createElement("span", {
+    onClick: handleSelectAll,
+    className: "".concat(_AlphabeticListModule["default"].heading, " ").concat(_AlphabeticListModule["default"].letter),
+    "data-title": allTitle
+  }, allText)), letters.map(function (letter) {
+    return /*#__PURE__*/_react["default"].createElement(AlphabeticListItemMemo, {
+      id: letter,
+      isActive: letter === selectedCharacter,
+      onClick: handleSelect,
+      text: letter,
+      key: letter,
+      dataId: dataId
+    });
+  }));
+}
+
+AlphabeticList.propTypes = _propTypes.AlphabeticList_propTypes;
+AlphabeticList.defaultProps = _defaultProps.AlphabeticList_defaultProps;
+
+function AlphabeticListItem(props) {
+  var isActive = props.isActive,
+      text = props.text,
+      dataId = props.dataId,
+      onClick = props.onClick,
+      id = props.id;
+
+  var handleClick = function handleClick() {
+    onClick && onClick(id);
+  };
+
+  return /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+    flexible: true,
+    tagName: "li",
+    className: "".concat(_AlphabeticListModule["default"].list, " ").concat(isActive ? _AlphabeticListModule["default"].selected : ''),
+    onClick: handleClick,
+    dataId: "".concat(text, "_").concat(dataId)
+  }, /*#__PURE__*/_react["default"].createElement("span", {
+    className: _AlphabeticListModule["default"].letter
+  }, text));
+}
+
+AlphabeticListItem.propTypes = _propTypes.AlphabeticListItem_propTypes;
+AlphabeticListItem.defaultProps = _defaultProps.AlphabeticListItem_defaultProps;
+
+var _default = /*#__PURE__*/(0, _react.memo)(AlphabeticList);
+
+exports["default"] = _default;

package/lib/v1/Drawer/Drawer.js

@@ -0,0 +1,302 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Content = Content;
+exports.Footer = Footer;
+exports.Header = Header;
+exports["default"] = Drawer;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _defaultProps = require("../../Drawer/props/defaultProps");
+
+var _propTypes = require("../../Drawer/props/propTypes");
+
+var _Layout = require("@zohodesk/components/lib/Layout");
+
+var _Card = require("@zohodesk/components/lib/Card");
+
+var _VelocityAnimationGroup = _interopRequireDefault(require("@zohodesk/components/lib/VelocityAnimation/VelocityAnimationGroup/VelocityAnimationGroup"));
+
+var _CustomResponsive = require("@zohodesk/components/lib/Responsive/CustomResponsive");
+
+var _icons = require("@zohodesk/icons");
+
+var _ZindexProvider = require("@zohodesk/components/lib/Provider/ZindexProvider");
+
+var _FocusScope = _interopRequireDefault(require("@zohodesk/a11y/es/FocusScope/FocusScope"));
+
+var _Heading = _interopRequireDefault(require("@zohodesk/components/lib/Heading/Heading"));
+
+var _FreezeLayer = _interopRequireDefault(require("../../FreezeLayer/FreezeLayer"));
+
+var _FormAction = _interopRequireDefault(require("../FormAction/FormAction"));
+
+var _IconButton = _interopRequireDefault(require("../IconButton/IconButton"));
+
+var _DrawerModule = _interopRequireDefault(require("../../Drawer/Drawer.module.css"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function Header(props) {
+  var title = props.title,
+      onClose = props.onClose,
+      children = props.children,
+      className = props.className,
+      paddingSize = props.paddingSize,
+      closeTitle = props.closeTitle,
+      iconName = props.iconName,
+      iconSize = props.iconSize,
+      onIconClick = props.onIconClick,
+      isIconBold = props.isIconBold,
+      dataId = props.dataId,
+      flexible = props.flexible,
+      getChildren = props.getChildren,
+      iconTitle = props.iconTitle,
+      isBoxIcon = props.isBoxIcon,
+      getTitleChildren = props.getTitleChildren;
+  return /*#__PURE__*/_react["default"].createElement(_Card.CardHeader, {
+    customClass: "".concat(_DrawerModule["default"].header, " ").concat(_DrawerModule["default"]["".concat(paddingSize, "HeaderPadding")], " ").concat(className ? className : ''),
+    dataId: dataId
+  }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
+    alignBox: "row",
+    align: "vertical",
+    isCover: false,
+    className: _DrawerModule["default"].subheader
+  }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+    flexible: true,
+    shrink: true
+  }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
+    alignBox: "row",
+    isCover: false,
+    align: "vertical"
+  }, iconName ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+    className: _DrawerModule["default"].iconWrapper
+  }, isBoxIcon ? /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
+    iconName: iconName,
+    iconSize: iconSize,
+    onClick: onIconClick,
+    hoverType: "border",
+    isBold: isIconBold,
+    title: iconTitle
+  }) : /*#__PURE__*/_react["default"].createElement(_icons.Icon, {
+    name: iconName,
+    size: iconSize,
+    onClick: onIconClick,
+    title: iconTitle
+  })) : null, title || getTitleChildren ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+    flexible: flexible,
+    shrink: true
+  }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
+    alignBox: "row",
+    align: "vertical"
+  }, title ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+    "data-title": title,
+    shrink: true
+  }, /*#__PURE__*/_react["default"].createElement(_Heading["default"], {
+    title: title,
+    className: _DrawerModule["default"].title,
+    a11y: {
+      tabindex: '0'
+    }
+  })) : null, getTitleChildren ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, null, getTitleChildren()) : null)) : null, children ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, null, children) : null)), onClose ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, null, /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
+    onClick: onClose,
+    dataId: "closeButton",
+    title: closeTitle,
+    iconName: "ZD-cross",
+    iconSize: "11",
+    a11y: {
+      ariaLabel: 'Close'
+    }
+  })) : null), getChildren ? /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
+    isCover: false
+  }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+    flexible: true
+  }, getChildren())) : null);
+}
+
+Header.propTypes = _propTypes.Header_propTypes;
+Header.defaultProps = _defaultProps.Header_defaultProps;
+
+function Content(props) {
+  var children = props.children,
+      className = props.className,
+      paddingSize = props.paddingSize,
+      eleRef = props.eleRef;
+  return /*#__PURE__*/_react["default"].createElement(_Card.CardContent, {
+    scroll: "vertical",
+    isScrollAttribute: true,
+    customClass: "".concat(className ? className : '', " ").concat(paddingSize ? _DrawerModule["default"]["".concat(paddingSize, "ContentPadding")] : ''),
+    eleRef: eleRef
+  }, children);
+}
+
+Content.propTypes = _propTypes.Content_propTypes;
+
+function Footer(props) {
+  var paddingLeftSize = props.paddingLeftSize,
+      paddingRightClass = props.paddingRightClass,
+      children = props.children,
+      size = props.size;
+  return /*#__PURE__*/_react["default"].createElement(_FormAction["default"], {
+    size: size,
+    paddingLeftSize: paddingLeftSize,
+    paddingRightClass: paddingRightClass
+  }, children);
+}
+
+Footer.propTypes = _propTypes.Footer_propTypes;
+Footer.defaultProps = _defaultProps.Footer_defaultProps;
+
+function Drawer(props) {
+  var contentRef = (0, _react.useRef)(null);
+  var getNextIndex = (0, _ZindexProvider.useZIndex)();
+
+  function drawers(uptoTablet, styleByResolutions) {
+    var children = props.children,
+        size = props.size,
+        paddingSize = props.paddingSize,
+        subDrawerActive = props.subDrawerActive,
+        subDrawerChildren = props.subDrawerChildren,
+        onBodyClick = props.onBodyClick,
+        onClose = props.onClose,
+        needFocusScope = props.needFocusScope,
+        customProps = props.customProps;
+    var _customProps$focusSco = customProps.focusScopeProps,
+        focusScopeProps = _customProps$focusSco === void 0 ? {} : _customProps$focusSco;
+    var _focusScopeProps$auto = focusScopeProps.autoFocus,
+        autoFocus = _focusScopeProps$auto === void 0 ? true : _focusScopeProps$auto,
+        _focusScopeProps$rest = focusScopeProps.restoreFocus,
+        restoreFocus = _focusScopeProps$rest === void 0 ? true : _focusScopeProps$rest,
+        _focusScopeProps$need = focusScopeProps.needArrowLoop,
+        needArrowLoop = _focusScopeProps$need === void 0 ? false : _focusScopeProps$need,
+        _focusScopeProps$need2 = focusScopeProps.needTabLoop,
+        needTabLoop = _focusScopeProps$need2 === void 0 ? true : _focusScopeProps$need2,
+        _focusScopeProps$enab = focusScopeProps.enableEnterAction,
+        enableEnterAction = _focusScopeProps$enab === void 0 ? false : _focusScopeProps$enab;
+
+    var childrenWithProps = _react["default"].Children.map(children, function (child) {
+      if (child.type === Header || child.type === Footer || child.type === Content) {
+        var _ref = child.props || {},
+            childPaddingSize = _ref.paddingSize;
+
+        return paddingSize || childPaddingSize ? /*#__PURE__*/_react["default"].cloneElement(child, {
+          paddingSize: childPaddingSize ? childPaddingSize : paddingSize
+        }) : child;
+      }
+
+      return child;
+    });
+
+    var content = /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+      className: "".concat(_DrawerModule["default"].container, " ").concat(_DrawerModule["default"].columns, " ").concat(_DrawerModule["default"].drawerModal, " ").concat(uptoTablet ? _DrawerModule["default"].mbleSize : _DrawerModule["default"][size]),
+      "data-a11y-need-focus-style": "false",
+      tabindex: -1,
+      eleRef: contentRef
+    }, /*#__PURE__*/_react["default"].createElement(_Card.Card, {
+      onClick: function onClick(e) {
+        e && e.stopPropagation && e.stopPropagation();
+        onBodyClick(e);
+      }
+    }, childrenWithProps));
+
+    return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, subDrawerChildren ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+      className: _DrawerModule["default"].columns
+    }, /*#__PURE__*/_react["default"].createElement(_VelocityAnimationGroup["default"], {
+      name: "slideRight",
+      isActive: subDrawerActive
+    }, /*#__PURE__*/_react["default"].createElement(_CustomResponsive.ResponsiveSender, null, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
+      className: styleByResolutions,
+      onClick: function onClick(e) {
+        e && e.stopPropagation && e.stopPropagation();
+      }
+    }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+      flexible: true
+    }, subDrawerChildren))))) : null, needFocusScope ? /*#__PURE__*/_react["default"].createElement(_FocusScope["default"], {
+      elementRef: contentRef,
+      autoFocus: autoFocus,
+      needTabLoop: needTabLoop,
+      restoreFocus: restoreFocus,
+      needArrowLoop: needArrowLoop,
+      onClose: onClose,
+      enableEnterAction: enableEnterAction
+    }, content) : content);
+  }
+
+  function responsiveFunc(_ref2) {
+    var mediaQueryOR = _ref2.mediaQueryOR;
+    return {
+      uptoTablet: mediaQueryOR([{
+        maxWidth: 768
+      }])
+    };
+  }
+
+  var needFreeze = props.needFreeze,
+      palette = props.palette,
+      isActive = props.isActive,
+      onClose = props.onClose,
+      forwardRef = props.forwardRef,
+      responsiveId = props.responsiveId,
+      subDrawerSize = props.subDrawerSize,
+      subDrawerClass = props.subDrawerClass,
+      subDrawerActive = props.subDrawerActive,
+      customClass = props.customClass,
+      needAutoZindex = props.needAutoZindex,
+      innerPortalName = props.innerPortalName;
+  return /*#__PURE__*/_react["default"].createElement(_CustomResponsive.ResponsiveReceiver, {
+    query: responsiveFunc,
+    responsiveId: responsiveId
+  }, function (_ref3) {
+    var uptoTablet = _ref3.uptoTablet;
+    var styleByResolutions = "".concat(subDrawerClass, " ").concat(_DrawerModule["default"].secondDrawer, " ").concat(uptoTablet ? "".concat(_DrawerModule["default"].secondMobDrawer, " ").concat(_DrawerModule["default"].mbleSize) : "".concat(_DrawerModule["default"][subDrawerSize]), " ");
+    return needFreeze ? /*#__PURE__*/_react["default"].createElement(_FreezeLayer["default"], {
+      onClick: onClose,
+      isActive: isActive,
+      animationName: "fade",
+      childAnimationName: "slideRight",
+      palette: palette,
+      forwardRef: forwardRef,
+      customClass: customClass,
+      needAutoZindex: needAutoZindex
+    }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+      flexible: true
+    }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
+      alignBox: "row"
+    }, /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, uptoTablet ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+      flexible: true
+    }) : null, /*#__PURE__*/_react["default"].createElement(_CustomResponsive.ResponsiveSender, null, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+      flexible: true,
+      className: uptoTablet ? _DrawerModule["default"].mobModal : _DrawerModule["default"].drawerModal
+    }, !subDrawerActive && innerPortalName ? /*#__PURE__*/_react["default"].createElement("div", {
+      "data-portal": innerPortalName
+    }) : null)), drawers(uptoTablet, styleByResolutions))))) : /*#__PURE__*/_react["default"].createElement(_VelocityAnimationGroup["default"], {
+      isActive: isActive,
+      name: "slideRight"
+    }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
+      align: "right",
+      alignBox: "row",
+      scroll: "none",
+      eleRef: forwardRef,
+      className: "".concat(_DrawerModule["default"].isOverlay, " ").concat(customClass),
+      style: isActive && needAutoZindex ? {
+        zIndex: "".concat(getNextIndex())
+      } : {}
+    }, drawers(uptoTablet, styleByResolutions)));
+  });
+}
+
+Drawer.propTypes = _propTypes.Drawer_propTypes;
+Drawer.defaultProps = _defaultProps.Drawer_defaultProps; // if (__DOCS__) {
+//   Drawer.docs = {
+//     componentGroup: 'Template'
+//   };
+// }

package/lib/v1/FlipCard/FlipCard.js

@@ -0,0 +1,149 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = FlipCard;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _defaultProps = require("../../FlipCard/props/defaultProps");
+
+var _propTypes = require("../../FlipCard/props/propTypes");
+
+var _CheckBox = _interopRequireDefault(require("@zohodesk/components/lib/CheckBox/CheckBox"));
+
+var _Layout = require("@zohodesk/components/lib/Layout");
+
+var _AvatarSize = _interopRequireDefault(require("@zohodesk/components/lib/Provider/AvatarSize"));
+
+var _ChannelIcon = _interopRequireDefault(require("../../ChannelIcon/ChannelIcon"));
+
+var _AvatarIcon = _interopRequireDefault(require("../../avatar/AvatarIcon/AvatarIcon"));
+
+var _AvatarUser = _interopRequireDefault(require("../../avatar/AvatarUser/AvatarUser"));
+
+var _General = require("../../utils/General");
+
+var _FlipCardModule = _interopRequireDefault(require("../../FlipCard/FlipCard.module.css"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+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); }
+
+function FlipCard(props) {
+  var id = props.id,
+      action = props.action,
+      name = props.name,
+      initial = props.initial,
+      isChecked = props.isChecked,
+      noNeedFlip = props.noNeedFlip,
+      size = props.size,
+      channel = props.channel,
+      isPaidUser = props.isPaidUser,
+      isPortalUser = props.isPortalUser,
+      src = props.src,
+      icon = props.icon,
+      iconSize = props.iconSize,
+      iconClass = props.iconClass,
+      ticListContainer = props.ticListContainer,
+      ticList = props.ticList,
+      dataId = props.dataId,
+      className = props.className,
+      palette = props.palette,
+      textPalette = props.textPalette,
+      customTextClass = props.customTextClass,
+      frontClass = props.frontClass,
+      needTitle = props.needTitle,
+      iconColor = props.iconColor,
+      tourId = props.tourId,
+      isFilledCheckbox = props.isFilledCheckbox,
+      channelTitle = props.channelTitle,
+      customProps = props.customProps;
+  var _customProps$CheckBox = customProps.CheckBoxProps,
+      CheckBoxProps = _customProps$CheckBox === void 0 ? {} : _customProps$CheckBox,
+      _customProps$ChannelI = customProps.ChannelIconProps,
+      ChannelIconProps = _customProps$ChannelI === void 0 ? {} : _customProps$ChannelI,
+      _customProps$AvatarIc = customProps.AvatarIconProps,
+      AvatarIconProps = _customProps$AvatarIc === void 0 ? {} : _customProps$AvatarIc,
+      _customProps$AvatarUs = customProps.AvatarUserProps,
+      AvatarUserProps = _customProps$AvatarUs === void 0 ? {} : _customProps$AvatarUs;
+
+  var onClick = function onClick(e) {
+    if (!noNeedFlip) {
+      (0, _General.stopBubbling)(e);
+    }
+  };
+
+  var onChange = function onChange(isChecked, e) {
+    var onChange = props.onChange;
+    (0, _General.stopBubbling)(e);
+    onChange(id, isChecked, e);
+  };
+
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: "".concat((0, _AvatarSize["default"])(size), "  ").concat(noNeedFlip ? _FlipCardModule["default"].flipNone : isChecked ? _FlipCardModule["default"].notFlip : _FlipCardModule["default"].flip),
+    onClick: onClick,
+    "data-id": ticListContainer,
+    "data-test-id": ticListContainer,
+    "data-tour": tourId
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: _FlipCardModule["default"].container,
+    "data-id": ticList,
+    "data-test-id": ticList
+  }, !noNeedFlip ? /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
+    align: "both",
+    className: "".concat(_FlipCardModule["default"].front, " ").concat(frontClass ? frontClass : '')
+  }, /*#__PURE__*/_react["default"].createElement(_CheckBox["default"], _extends({
+    isFilled: isFilledCheckbox,
+    checked: isChecked,
+    onChange: onChange,
+    id: "checkbox_".concat(id),
+    dataId: "listViewCheckBox_".concat(id)
+  }, CheckBoxProps))) : null, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
+    align: "both",
+    className: _FlipCardModule["default"].back
+  }, channel && action ? /*#__PURE__*/_react["default"].createElement(_ChannelIcon["default"], _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["default"].createElement(_AvatarIcon["default"], _extends({
+    name: icon,
+    iconSize: iconSize,
+    size: size,
+    iconClass: iconClass,
+    dataId: icon,
+    className: className,
+    iconColor: iconColor,
+    title: needTitle ? name : ''
+  }, AvatarIconProps)) : /*#__PURE__*/_react["default"].createElement(_AvatarUser["default"], _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.propTypes;
+FlipCard.defaultProps = _defaultProps.defaultProps; // if (__DOCS__) {
+//   FlipCard.docs = {
+//     componentGroup: 'Molecule'
+//   }; 
+// }

package/lib/v1/FormAction/FormAction.js

@@ -0,0 +1,102 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.RightSide = exports.LeftSide = exports.Center = void 0;
+exports["default"] = FormAction;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _defaultProps = require("../../FormAction/props/defaultProps");
+
+var _propTypes = require("../../FormAction/props/propTypes");
+
+var _Layout = require("@zohodesk/components/lib/Layout");
+
+var _FormActionModule = _interopRequireDefault(require("../../FormAction/FormAction.module.css"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var LeftSide = function LeftSide(props) {
+  props.children;
+};
+
+exports.LeftSide = LeftSide;
+
+var RightSide = function RightSide(props) {
+  props.children;
+};
+
+exports.RightSide = RightSide;
+
+var Center = function Center(props) {
+  props.children;
+};
+
+exports.Center = Center;
+
+function FormAction(props) {
+  var size = props.size,
+      children = props.children,
+      paddingLeftSize = props.paddingLeftSize,
+      paddingRightClass = props.paddingRightClass,
+      dataSelectorId = props.dataSelectorId;
+  var leftbuttonGroup = [],
+      rightbuttonGroup = [],
+      centerbuttonGroup = [];
+
+  _react["default"].Children.map(children, function (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);
+    }
+  });
+
+  var hasLeftChild = leftbuttonGroup.length > 0;
+  var hasRightChild = rightbuttonGroup.length > 0;
+  var hasCenterChild = centerbuttonGroup.length > 0;
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: _FormActionModule["default"].wrapperDiv,
+    "data-selector-id": dataSelectorId
+  }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
+    alignBox: "row",
+    isCover: false,
+    align: hasCenterChild ? 'around' : hasRightChild && !hasLeftChild ? 'right' : null,
+    className: "\n                        ".concat("".concat(_FormActionModule["default"].footerParent, " ").concat(hasCenterChild ? '' : _FormActionModule["default"]["".concat(paddingLeftSize ? paddingLeftSize : size, "Padding")], " ").concat(paddingRightClass), "\n\n                        ", _FormActionModule["default"]["".concat(size, "Footer")], "\n                    ")
+  }, hasLeftChild ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+    flexible: hasRightChild ? true : false,
+    shrink: !hasRightChild && hasLeftChild ? true : false
+  }, leftbuttonGroup.length > 1 ? leftbuttonGroup.map(function (item, index) {
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      className: _FormActionModule["default"].marginRight,
+      key: index
+    }, item);
+  }) : leftbuttonGroup[0]) : null, hasRightChild ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+    shrink: hasRightChild && !hasLeftChild ? true : false
+  }, rightbuttonGroup.length > 1 ? rightbuttonGroup.map(function (item, index) {
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      className: _FormActionModule["default"].marginRight,
+      key: index
+    }, item);
+  }) : rightbuttonGroup[0]) : null, hasCenterChild ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, null, centerbuttonGroup.length > 1 ? centerbuttonGroup.map(function (item, index) {
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      className: _FormActionModule["default"].marginRight,
+      key: index
+    }, item);
+  }) : centerbuttonGroup[0]) : null));
+}
+
+FormAction.propTypes = _propTypes.propTypes;
+FormAction.defaultProps = _defaultProps.defaultProps; // if (__DOCS__) {
+//   FormAction.docs = {
+//     componentGroup: 'Atom'
+//   };
+// }