@zohodesk/dot 1.9.14 → 1.9.16

package/lib/lookup/header/ModuleHeader/props/defaultProps.js

@@ -4,8 +4,14 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.defaultProps = void 0;
+
+var _constants = require("@zohodesk/dotkit/es/utils/constants");
+
 var defaultProps = {
   palette: 'default',
+  customClass: _constants.DUMMY_OBJECT,
+  customProps: _constants.DUMMY_OBJECT,
+  isDraggable: true,
   dragBoundaryLimit: {
     top: 0,
     left: 50,

package/lib/lookup/header/ModuleHeader/props/propTypes.js

@@ -7,12 +7,22 @@ exports.propTypes = void 0;
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
+var _propTypes2 = require("@zohodesk/components/es/Layout/props/propTypes");
+
+var _propTypes3 = require("../../Title/props/propTypes");
+
+var _propTypes4 = require("../../Close/props/propTypes");
+
+var _propTypes5 = require("../../Search/props/propTypes");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 var propTypes = {
   getSearchBoxRef: _propTypes["default"].func,
   miniDescription: _propTypes["default"].string,
   needOnTypeSearch: _propTypes["default"].bool,
+  renderTitleChildren: _propTypes["default"].oneOfType([_propTypes["default"].node, _propTypes["default"].func]),
+  renderSecondaryContent: _propTypes["default"].oneOfType([_propTypes["default"].node, _propTypes["default"].func]),
   needSearch: _propTypes["default"].bool,
   onLookupClose: _propTypes["default"].func,
   onSearch: _propTypes["default"].func,
@@ -20,12 +30,26 @@ var propTypes = {
   searchPlaceHolder: _propTypes["default"].string,
   searchStr: _propTypes["default"].string,
   title: _propTypes["default"].string,
+  htmlId: _propTypes["default"].string,
   dataId: _propTypes["default"].string,
   closeTitle: _propTypes["default"].string,
   onSearchKeyDown: _propTypes["default"].func,
   palette: _propTypes["default"].oneOf(['default', 'white']),
   children: _propTypes["default"].any,
   childNearTitle: _propTypes["default"].any,
-  dragBoundaryLimit: _propTypes["default"].object
+  customClass: _propTypes["default"].shape({
+    container: _propTypes["default"].string,
+    title: _propTypes["default"].string,
+    close: _propTypes["default"].string
+  }),
+  isDraggable: _propTypes["default"].bool,
+  dragBoundaryLimit: _propTypes["default"].object,
+  customProps: _propTypes["default"].shape({
+    container: _propTypes["default"].shape(_propTypes2.ContainerProps),
+    titleWrapper: _propTypes["default"].shape(_propTypes2.ContainerProps),
+    title: _propTypes["default"].shape(_propTypes3.propTypes),
+    search: _propTypes["default"].shape(_propTypes5.Search_propTypes),
+    close: _propTypes["default"].shape(_propTypes4.propTypes)
+  })
 };
 exports.propTypes = propTypes;

package/lib/lookup/header/Title/Title.js

@@ -58,8 +58,10 @@ var Title = /*#__PURE__*/function (_PureComponent) {
       var _this$props = this.props,
           text = _this$props.text,
           palette = _this$props.palette,
-          isBold = _this$props.isBold;
+          isBold = _this$props.isBold,
+          htmlId = _this$props.htmlId;
       return /*#__PURE__*/_react["default"].createElement("span", {
+        id: htmlId,
         className: "".concat(_LookupTitleModule["default"].title, " ").concat(_LookupTitleModule["default"][palette], " ").concat(isBold ? _LookupTitleModule["default"].bold : ''),
         "data-title": text
       }, text);

package/lib/lookup/header/Title/props/propTypes.js

@@ -11,6 +11,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "d
 
 var propTypes = {
   isBold: _propTypes["default"].bool,
+  htmlId: _propTypes["default"].string,
   palette: _propTypes["default"].oneOf(['default', 'primary', 'danger']),
   text: _propTypes["default"].string
 };

package/lib/version2/lookup/AlertHeader/AlertHeader.js

@@ -21,7 +21,7 @@ var _AlertHeaderNewModule = _interopRequireDefault(require("./css/AlertHeaderNew
 
 var _cssJSLogic2 = _interopRequireDefault(require("./css/cssJSLogic"));
 
-var _utils = require("@zohodesk/utils");
+var _mergeStyle = _interopRequireDefault(require("@zohodesk/utils/es/mergeStyle"));
 
 var _useDragger = _interopRequireDefault(require("../../../Hooks/Dragger/useDragger"));
 
@@ -51,8 +51,18 @@ function AlertHeader(props) {
       htmlId = props.htmlId,
       customStyle = props.customStyle,
       dragBoundaryLimit = props.dragBoundaryLimit,
+      isDraggable = props.isDraggable,
+      customClass = props.customClass,
+      renderSecondaryContent = props.renderSecondaryContent,
+      renderRightActions = props.renderRightActions,
       renderAlertIcon = props.renderAlertIcon;
-  var finalStyle = (0, _utils.mergeStyle)(_AlertHeaderNewModule["default"], customStyle);
+  var finalStyle = (0, _mergeStyle["default"])(_AlertHeaderNewModule["default"], customStyle);
+  var _customClass$title = customClass.title,
+      titleClass = _customClass$title === void 0 ? '' : _customClass$title,
+      _customClass$iconCont = customClass.iconContainer,
+      iconContainerClass = _customClass$iconCont === void 0 ? '' : _customClass$iconCont,
+      _customClass$close = customClass.close,
+      closeClass = _customClass$close === void 0 ? '' : _customClass$close;
 
   var _cssJSLogic = (0, _cssJSLogic2["default"])({
     props: props,
@@ -63,7 +73,7 @@ function AlertHeader(props) {
   var dragRef = (0, _react.useRef)(null); //dragRef
 
   (0, _useDragger["default"])({
-    isActive: true,
+    isActive: isDraggable,
     ChildRef: dragRef,
     boundaryLimit: dragBoundaryLimit
   }); //custom Hook
@@ -74,10 +84,10 @@ function AlertHeader(props) {
     className: "".concat(alertHeaderContainerClass),
     isCover: false,
     wrap: "wrap",
-    "data-drag-hook": "true",
+    "data-drag-hook": isDraggable ? 'true' : 'false',
     eleRef: dragRef
   }, needIcon && /*#__PURE__*/_react["default"].createElement("div", {
-    className: finalStyle.iconContainer
+    className: "".concat(finalStyle.iconContainer, " ").concat(iconContainerClass)
   }, (0, _renderNode["default"])(renderAlertIcon) || /*#__PURE__*/_react["default"].createElement(_AlertIcons["default"], {
     type: type
   })), (title || children) && /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
@@ -86,14 +96,14 @@ function AlertHeader(props) {
     alignBox: "row",
     wrap: breakChildren ? 'wrap' : null
   }, title && /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
-    className: finalStyle.title,
+    className: "".concat(finalStyle.title, " ").concat(titleClass),
     shrink: true,
     id: htmlId
   }, title), children && /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
     adjust: true,
     flexible: true
-  }, children))), onClose && /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
-    className: _AlertHeaderNewModule["default"].close
+  }, children)), (0, _renderNode["default"])(renderSecondaryContent)), (0, _renderNode["default"])(renderRightActions), onClose && /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+    className: "".concat(finalStyle.close, " ").concat(closeClass)
   }, /*#__PURE__*/_react["default"].createElement(_AlertClose["default"], {
     onClose: onClose,
     dataTitle: closeTitle,

package/lib/version2/lookup/AlertHeader/__tests__/AlertHeader.spec.js

@@ -8,8 +8,12 @@ var _AlertHeader = _interopRequireDefault(require("../AlertHeader"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-describe('AlertHeader', function () {
-  test('rendering the defult props', function () {
+var TYPE_VALUES = ['success', 'error', 'warning', 'info', 'notification'];
+afterEach(function () {
+  (0, _react2.cleanup)();
+});
+describe('AlertHeader snapshot - ', function () {
+  test('Render with default props', function () {
     var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_AlertHeader["default"], null)),
         asFragment = _render.asFragment;
 
@@ -41,4 +45,111 @@ describe('AlertHeader', function () {
 
     expect(asFragment()).toMatchSnapshot();
   });
+  test.each(TYPE_VALUES)('Render with type=%s', function (type) {
+    var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_AlertHeader["default"], {
+      title: "Alert Title",
+      type: type
+    })),
+        asFragment = _render4.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with needIcon=false', function () {
+    var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_AlertHeader["default"], {
+      title: "Alert Title",
+      needIcon: false
+    })),
+        asFragment = _render5.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with breakChildren=true', function () {
+    var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_AlertHeader["default"], {
+      title: "Alert Title",
+      breakChildren: true
+    })),
+        asFragment = _render6.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with onClose', function () {
+    var _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_AlertHeader["default"], {
+      title: "Alert Title",
+      onClose: function onClose() {}
+    })),
+        asFragment = _render7.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with title', function () {
+    var _render8 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_AlertHeader["default"], {
+      title: "Alert Title"
+    })),
+        asFragment = _render8.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with isDraggable=false', function () {
+    var _render9 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_AlertHeader["default"], {
+      title: "Alert Title",
+      isDraggable: false
+    })),
+        asFragment = _render9.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with children', function () {
+    var _render10 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_AlertHeader["default"], {
+      title: "Alert Title"
+    }, /*#__PURE__*/_react["default"].createElement("span", null, "Child content"))),
+        asFragment = _render10.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with customClass', function () {
+    var _render11 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_AlertHeader["default"], {
+      title: "Alert Title",
+      onClose: function onClose() {},
+      customClass: {
+        container: 'custom-container-class',
+        title: 'custom-title-class',
+        iconContainer: 'custom-icon-class',
+        close: 'custom-close-class'
+      }
+    })),
+        asFragment = _render11.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with renderSecondaryContent', function () {
+    var _render12 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_AlertHeader["default"], {
+      title: "Alert Title",
+      renderSecondaryContent: /*#__PURE__*/_react["default"].createElement("span", null, "Secondary")
+    })),
+        asFragment = _render12.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with renderRightActions', function () {
+    var _render13 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_AlertHeader["default"], {
+      title: "Alert Title",
+      renderRightActions: /*#__PURE__*/_react["default"].createElement("button", {
+        type: "button"
+      }, "Action")
+    })),
+        asFragment = _render13.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Render with dataId and htmlId', function () {
+    var _render14 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_AlertHeader["default"], {
+      title: "Alert Title",
+      htmlId: "alert-header-title",
+      dataId: "alert-header",
+      onClose: function onClose() {}
+    })),
+        asFragment = _render14.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
 });