@zohodesk/dot 1.9.14 → 1.9.16

package/es/version2/lookup/AlertHeader/css/cssJSLogic.js

@@ -1,4 +1,4 @@
-import { compileClassNames } from '@zohodesk/utils';
+import compileClassNames from '@zohodesk/utils/es/compileClassNames';
 export default function cssJSLogic({
   props,
   style
@@ -6,12 +6,17 @@ export default function cssJSLogic({
   let {
     children,
     type,
-    title
+    title,
+    customClass
   } = props;
+  let {
+    container
+  } = customClass;
   let alertHeaderContainerClass = compileClassNames({
     [style.container]: true,
     [style.headerLayout]: !!title || !!children,
-    [style[type]]: !!type
+    [style[type]]: !!type,
+    [container]: !!container
   });
   return {
     alertHeaderContainerClass

package/es/version2/lookup/AlertHeader/props/defaultProps.js

@@ -1,8 +1,11 @@
+import { DUMMY_OBJECT } from "@zohodesk/dotkit/es/utils/constants";
 export default {
   needIcon: true,
   type: 'danger',
   breakChildren: false,
   dataId: 'alertHeader',
+  isDraggable: true,
+  customClass: DUMMY_OBJECT,
   dragBoundaryLimit: {
     top: 0,
     left: 50,

package/es/version2/lookup/AlertHeader/props/propTypes.js

@@ -8,6 +8,15 @@ export default {
   onClose: PropTypes.func,
   title: PropTypes.string,
   type: PropTypes.oneOf(['success', 'error', 'danger', 'warning', 'info', 'notification']),
+  isDraggable: PropTypes.bool,
+  customClass: PropTypes.shape({
+    container: PropTypes.string,
+    title: PropTypes.string,
+    iconContainer: PropTypes.string,
+    close: PropTypes.string
+  }),
+  renderSecondaryContent: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
+  renderRightActions: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
   htmlId: PropTypes.string,
   customStyle: PropTypes.object,
   dragBoundaryLimit: PropTypes.shape({

package/es/version2/lookup/AlertLookup/AlertLookup.js

@@ -4,15 +4,20 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 import React, { Component } from 'react';
 import { defaultProps } from "./props/defaultProps";
 import { propTypes } from "./props/propTypes";
+/**** Library Components ****/
+
+import Button from '@zohodesk/components/es/Button/Button';
+import { Container, Box } from '@zohodesk/components/es/Layout';
+/**** Utils ****/
+
+import { getUniqueId } from '@zohodesk/components/es/Provider/IdProvider';
+import renderNode from '@zohodesk/utils/es/renderNode';
 /**** Components ****/
 
 import Lookup from "../../../lookup/Lookup/Lookup";
 import AlertHeader from "../AlertHeader/AlertHeader";
-import Button from '@zohodesk/components/es/Button/Button';
 import Section from "../../../lookup/Section/Section";
 import FormAction from "../../../FormAction/FormAction";
-import { Container, Box } from '@zohodesk/components/es/Layout';
-import { getUniqueId } from '@zohodesk/components/es/Provider/IdProvider';
 /**** CSS ****/
 
 import style from "./AlertLookupNew.module.css";
@@ -94,6 +99,7 @@ export default class AlertLookup extends Component {
       needIcon,
       a11y,
       customProps,
+      renderFooterNode,
       align,
       childAnimationName,
       isHtmlContent,
@@ -164,9 +170,9 @@ export default class AlertLookup extends Component {
     }, message), confirmationMessage && /*#__PURE__*/React.createElement("div", {
       id: ariaConfirmMsgId,
       className: `${message ? style.confirmMsgText : ''}`
-    }, confirmationMessage)))), submitText || onSubmitClick || cancelText || onCancelClick ? /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement("div", {
+    }, confirmationMessage)))), renderFooterNode || submitText || onSubmitClick || cancelText || onCancelClick ? /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement("div", {
       className: style.footer
-    }, /*#__PURE__*/React.createElement(FormAction, {
+    }, renderNode(renderFooterNode) || /*#__PURE__*/React.createElement(FormAction, {
       size: "small",
       paddingLeftSize: "xmedium"
     }, /*#__PURE__*/React.createElement(Button, _extends({

package/es/version2/lookup/AlertLookup/props/defaultProps.js

@@ -5,6 +5,7 @@ export const defaultProps = {
   dataId: 'alertPopup',
   isDefaultFocus: true,
   customProps: {},
+  renderFooterNode: null,
   align: 'top',
   childAnimationName: 'flyDown',
   isHtmlContent: false,

package/es/version2/lookup/AlertLookup/props/propTypes.js

@@ -27,6 +27,7 @@ export const propTypes = {
     PrimaryButtonProps: PropTypes.object,
     SecondaryButtonProps: PropTypes.object
   }),
+  renderFooterNode: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
   align: PropTypes.oneOf(['top', 'vertical']),
   childAnimationName: PropTypes.oneOf(['expand', 'flyDown']),
   isHtmlContent: PropTypes.bool,

package/lib/Drawer/Drawer.js

@@ -209,11 +209,15 @@ var Footer = /*#__PURE__*/function (_React$Component3) {
           paddingLeftSize = _this$props3.paddingLeftSize,
           paddingRightClass = _this$props3.paddingRightClass,
           children = _this$props3.children,
+          testId = _this$props3.testId,
+          customId = _this$props3.customId,
           size = _this$props3.size;
       return /*#__PURE__*/_react["default"].createElement(_FormAction["default"], {
         size: size,
         paddingLeftSize: paddingLeftSize,
-        paddingRightClass: paddingRightClass
+        paddingRightClass: paddingRightClass,
+        customId: customId,
+        testId: testId
       }, children);
     }
   }]);

package/lib/Drawer/props/propTypes.js

@@ -39,6 +39,8 @@ var Footer_propTypes = {
   children: _propTypes["default"].node,
   paddingLeftSize: _propTypes["default"].string,
   paddingRightClass: _propTypes["default"].string,
+  testId: _propTypes["default"].string,
+  customId: _propTypes["default"].string,
   size: _propTypes["default"].string
 };
 exports.Footer_propTypes = Footer_propTypes;

package/lib/FormAction/FormAction.js

@@ -76,7 +76,9 @@ var FormAction = /*#__PURE__*/function (_React$Component) {
           children = _this$props.children,
           paddingLeftSize = _this$props.paddingLeftSize,
           paddingRightClass = _this$props.paddingRightClass,
-          dataSelectorId = _this$props.dataSelectorId;
+          dataSelectorId = _this$props.dataSelectorId,
+          testId = _this$props.testId,
+          customId = _this$props.customId;
       var leftbuttonGroup = [],
           rightbuttonGroup = [],
           centerbuttonGroup = [];
@@ -100,28 +102,39 @@ var FormAction = /*#__PURE__*/function (_React$Component) {
       var hasCenterChild = centerbuttonGroup.length > 0;
       return /*#__PURE__*/_react["default"].createElement("div", {
         className: _FormActionModule["default"].wrapperDiv,
-        "data-selector-id": dataSelectorId
+        "data-selector-id": dataSelectorId,
+        "data-test-id": testId,
+        "data-id": customId
       }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
         alignBox: "row",
         isCover: false,
         align: hasCenterChild ? 'around' : hasRightChild && !hasLeftChild ? 'right' : null,
+        dataId: customId ? "".concat(customId, "_container") : undefined,
+        testId: testId ? "".concat(testId, "_container") : undefined,
         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
+        shrink: !hasRightChild && hasLeftChild ? true : false,
+        dataId: customId ? "".concat(customId, "_leftElement") : undefined,
+        testId: testId ? "".concat(testId, "_leftElement") : undefined
       }, 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
+        shrink: hasRightChild && !hasLeftChild ? true : false,
+        dataId: customId ? "".concat(customId, "_rightElement") : undefined,
+        testId: testId ? "".concat(testId, "_rightElement") : undefined
       }, 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) {
+      }) : rightbuttonGroup[0]) : null, hasCenterChild ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+        dataId: customId ? "".concat(customId, "_centerElement") : undefined,
+        testId: testId ? "".concat(testId, "_centerElement") : undefined
+      }, centerbuttonGroup.length > 1 ? centerbuttonGroup.map(function (item, index) {
         return /*#__PURE__*/_react["default"].createElement("div", {
           className: _FormActionModule["default"].marginRight,
           key: index

package/lib/FormAction/__tests__/FormAction.spec.js

@@ -1,18 +1,118 @@
 "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); }
+
 var _react = _interopRequireDefault(require("react"));
 
 var _react2 = require("@testing-library/react");
 
-var _FormAction = _interopRequireDefault(require("../FormAction"));
+var _FormAction = _interopRequireWildcard(require("../FormAction"));
+
+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 _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 describe('FormAction', function () {
-  test('rendering the defult props', function () {
+  afterEach(function () {
+    (0, _react2.cleanup)();
+  });
+  var sizes = ['large', 'medium', 'small'];
+  var paddingLeftSizes = ['large', 'medium', 'xmedium', 'small', 'xsmall'];
+  test('Render with default props', function () {
     var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_FormAction["default"], null)),
         asFragment = _render.asFragment;
 
     expect(asFragment()).toMatchSnapshot();
   });
+  test.each(sizes)('Render with size as %s', function (size) {
+    var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_FormAction["default"], {
+      size: size
+    })),
+        asFragment = _render2.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(paddingLeftSizes)('Render with paddingLeftSize as %s', function (paddingLeftSize) {
+    var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_FormAction["default"], {
+      paddingLeftSize: paddingLeftSize
+    })),
+        asFragment = _render3.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with paddingRightClass', function () {
+    var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_FormAction["default"], {
+      paddingRightClass: "customPaddingRight"
+    })),
+        asFragment = _render4.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with LeftSide children', function () {
+    var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_FormAction["default"], null, /*#__PURE__*/_react["default"].createElement(_FormAction.LeftSide, null, /*#__PURE__*/_react["default"].createElement("button", null, "Save")))),
+        asFragment = _render5.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with RightSide children', function () {
+    var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_FormAction["default"], null, /*#__PURE__*/_react["default"].createElement(_FormAction.RightSide, null, /*#__PURE__*/_react["default"].createElement("button", null, "Cancel")))),
+        asFragment = _render6.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with Center children', function () {
+    var _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_FormAction["default"], null, /*#__PURE__*/_react["default"].createElement(_FormAction.Center, null, /*#__PURE__*/_react["default"].createElement("button", null, "Submit")))),
+        asFragment = _render7.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with LeftSide, Center and RightSide children', function () {
+    var _render8 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_FormAction["default"], null, /*#__PURE__*/_react["default"].createElement(_FormAction.LeftSide, null, /*#__PURE__*/_react["default"].createElement("button", null, "Save")), /*#__PURE__*/_react["default"].createElement(_FormAction.Center, null, /*#__PURE__*/_react["default"].createElement("button", null, "Preview")), /*#__PURE__*/_react["default"].createElement(_FormAction.RightSide, null, /*#__PURE__*/_react["default"].createElement("button", null, "Cancel")))),
+        asFragment = _render8.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with multiple children in LeftSide', function () {
+    var _render9 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_FormAction["default"], null, /*#__PURE__*/_react["default"].createElement(_FormAction.LeftSide, null, /*#__PURE__*/_react["default"].createElement("button", null, "Save"), /*#__PURE__*/_react["default"].createElement("button", null, "Draft")))),
+        asFragment = _render9.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with multiple children in RightSide', function () {
+    var _render10 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_FormAction["default"], null, /*#__PURE__*/_react["default"].createElement(_FormAction.RightSide, null, /*#__PURE__*/_react["default"].createElement("button", null, "Cancel"), /*#__PURE__*/_react["default"].createElement("button", null, "Reset")))),
+        asFragment = _render10.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with multiple children in Center', function () {
+    var _render11 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_FormAction["default"], null, /*#__PURE__*/_react["default"].createElement(_FormAction.Center, null, /*#__PURE__*/_react["default"].createElement("button", null, "Submit"), /*#__PURE__*/_react["default"].createElement("button", null, "Preview")))),
+        asFragment = _render11.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with direct child (defaults to left group)', function () {
+    var _render12 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_FormAction["default"], null, /*#__PURE__*/_react["default"].createElement("button", null, "Standalone"))),
+        asFragment = _render12.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with customId and testId', function () {
+    var _render13 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_FormAction["default"], {
+      customId: "form-action-customId",
+      testId: "form-action-testId"
+    }, /*#__PURE__*/_react["default"].createElement(_FormAction.LeftSide, null, /*#__PURE__*/_react["default"].createElement("button", null, "Save")), /*#__PURE__*/_react["default"].createElement(_FormAction.Center, null, /*#__PURE__*/_react["default"].createElement("button", null, "Preview")), /*#__PURE__*/_react["default"].createElement(_FormAction.RightSide, null, /*#__PURE__*/_react["default"].createElement("button", null, "Cancel")))),
+        asFragment = _render13.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with dataSelectorId', function () {
+    var _render14 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_FormAction["default"], {
+      dataSelectorId: "form-action-dataSelectorId"
+    })),
+        asFragment = _render14.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
 });