@zohodesk/dot 1.0.0-temp-232.1 → 1.0.0-temp-233.2

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

@@ -17,11 +17,13 @@ var _AlertIcons = _interopRequireDefault(require("../../alertIcons/AlertIcons"))
 
 var _renderNode = _interopRequireDefault(require("@zohodesk/utils/es/renderNode"));
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _AlertHeaderNewModule = _interopRequireDefault(require("./css/AlertHeaderNew.module.css"));
 
 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 +53,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 +75,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 +86,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: (0, _cssUtility.cn)("".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 +98,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();
+  });
 });