@zohodesk/dot 1.4.15 → 1.4.17

package/lib/v1/AttachmentViewer/AttachmentViewer.js

@@ -298,7 +298,9 @@ var AttachmentViewer = /*#__PURE__*/function (_Component) {
           dataList = _this$state2.dataList,
           selectedIndex = _this$state2.selectedIndex,
           isZoomed = _this$state2.isZoomed;
-      var maintainZoom = this.props.maintainZoom;
+      var _this$props = this.props,
+          maintainZoom = _this$props.maintainZoom,
+          dataId = _this$props.dataId;
 
       var getImgStyle = function getImgStyle(i) {
         var position;
@@ -342,7 +344,9 @@ var AttachmentViewer = /*#__PURE__*/function (_Component) {
         }, (0, _Attachment.isAudioFile)(data.name) ? selectedIndex == i ? /*#__PURE__*/_react["default"].createElement("video", {
           autoPlay: true,
           controls: true,
-          className: _AttachmentViewerModule["default"].zoomIn
+          className: _AttachmentViewerModule["default"].zoomIn,
+          "data-id": "".concat(dataId, "_videoPreview"),
+          "data-test-id": "".concat(dataId, "_videoPreview")
         }, /*#__PURE__*/_react["default"].createElement("source", {
           src: data.viewUrl,
           type: "audio/".concat((0, _Attachment.getExtensionFromFileName)(data.name))
@@ -370,11 +374,12 @@ var AttachmentViewer = /*#__PURE__*/function (_Component) {
           selectedIndex = _this$state3.selectedIndex,
           data = _this$state3.data,
           isZoomed = _this$state3.isZoomed;
-      var _this$props = this.props,
-          responsiveId = _this$props.responsiveId,
-          needDownload = _this$props.needDownload,
-          i18nKeys = _this$props.i18nKeys,
-          isActive = _this$props.isActive;
+      var _this$props2 = this.props,
+          responsiveId = _this$props2.responsiveId,
+          needDownload = _this$props2.needDownload,
+          i18nKeys = _this$props2.i18nKeys,
+          isActive = _this$props2.isActive,
+          dataId = _this$props2.dataId;
       var totalLen = data.length;
       var selectedAttachment = data[selectedIndex] || {};
       var selectedImgUrl = selectedAttachment.viewUrl;
@@ -479,7 +484,8 @@ var AttachmentViewer = /*#__PURE__*/function (_Component) {
           target: "_parent",
           hasReload: true,
           download: true,
-          title: i18nKeys.downloadText
+          title: i18nKeys.downloadText,
+          dataId: "".concat(dataId, "_downloadAttach")
         }, /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
           iconName: "ZD-GN-download",
           className: _AttachmentViewerModule["default"].menuIcon,
@@ -546,13 +552,15 @@ var AttachmentViewer = /*#__PURE__*/function (_Component) {
           dataId: "rightAttachNav",
           isBold: true
         }))))), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
-          className: "".concat(_AttachmentViewerModule["default"].footer, " ").concat(isPViewListOpen && totalLen !== 1 ? _AttachmentViewerModule["default"].footerHeight : _AttachmentViewerModule["default"].footerHide, " ")
+          className: "".concat(_AttachmentViewerModule["default"].footer, " ").concat(isPViewListOpen && totalLen !== 1 ? _AttachmentViewerModule["default"].footerHeight : _AttachmentViewerModule["default"].footerHide, " "),
+          dataId: "".concat(dataId, "_attachPreviewFooter")
         }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
           align: "vertical",
           alignBox: "row",
           className: _AttachmentViewerModule["default"].footerHeight
         }, author && /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
-          className: _AttachmentViewerModule["default"].author
+          className: _AttachmentViewerModule["default"].author,
+          dataId: "".concat(dataId, "_authorName")
         }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
           alignBox: "row",
           align: "both"

package/lib/v1/AttachmentViewer/props/defaultProps.js

@@ -13,6 +13,7 @@ var AttachmentViewer_defaultProps = {
   needDownload: true,
   i18nKeys: {},
   maintainZoom: false,
-  isActive: false
+  isActive: false,
+  dataId: 'AttachmentViewer'
 };
 exports.AttachmentViewer_defaultProps = AttachmentViewer_defaultProps;

package/lib/v1/AttachmentViewer/props/propTypes.js

@@ -38,6 +38,7 @@ var AttachmentViewer_propTypes = {
   previewObj: _propTypes["default"].object,
   responsiveId: _propTypes["default"].string,
   maintainZoom: _propTypes["default"].bool,
-  isActive: _propTypes["default"].bool
+  isActive: _propTypes["default"].bool,
+  dataId: _propTypes["default"].string
 };
 exports.AttachmentViewer_propTypes = AttachmentViewer_propTypes;

package/lib/v1/ChannelIcon/ChannelIcon.js

@@ -88,6 +88,7 @@ var ChannelIcon = function ChannelIcon(props) {
     palette: palette,
     textPalette: textPalette,
     customClass: customTextClass,
+    dataId: dataId,
     needTitle: title,
     title: title
   }) : /*#__PURE__*/_react["default"].createElement(_icons.Icon, {

package/lib/v1/MessageBanner/MessageBanner.js

@@ -53,10 +53,12 @@ function MessageBanner(props) {
     href: href,
     onClick: onClick,
     className: _MessageBannerModule["default"].link,
-    target: "_blank"
+    target: "_blank",
+    dataId: "".concat(dataId, "_link")
   }, urlText)))), onClose ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
     className: _MessageBannerModule["default"].close,
-    onClick: onClose
+    onClick: onClose,
+    dataId: "".concat(dataId, "_close")
   }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
     align: "both"
   }, /*#__PURE__*/_react["default"].createElement(_icons.Icon, {

package/lib/v1/alert/AlertHeader/AlertHeader.js

@@ -73,7 +73,8 @@ function AlertHeader(props) {
     isCover: false,
     wrap: "wrap",
     "data-drag-hook": "true",
-    eleRef: dragRef
+    eleRef: dragRef,
+    dataId: "".concat(dataId, "_alertHeader")
   }, needIcon && /*#__PURE__*/_react["default"].createElement("div", {
     className: finalStyle.iconContainer
   }, renderAlertIcon ? renderAlertIcon() : /*#__PURE__*/_react["default"].createElement(_AlertIcons["default"], {

package/lib/v1/avatar/AvatarClose/AvatarClose.js

@@ -29,14 +29,17 @@ function AvatarClose(props) {
       isClose = props.isClose,
       onClick = props.onClick,
       customProps = props.customProps,
-      dataSelectorId = props.dataSelectorId;
+      dataSelectorId = props.dataSelectorId,
+      dataId = props.dataId;
   var _customProps$AvatarCl = customProps.AvatarCloseProps,
       AvatarCloseProps = _customProps$AvatarCl === void 0 ? {} : _customProps$AvatarCl,
       _customProps$AvatarPr = customProps.AvatarProps,
       AvatarProps = _customProps$AvatarPr === void 0 ? {} : _customProps$AvatarPr;
   return /*#__PURE__*/_react["default"].createElement("div", _extends({
     className: _AvatarCloseModule["default"].container,
-    "data-selector-id": dataSelectorId
+    "data-selector-id": dataSelectorId,
+    "data-id": dataId,
+    "data-test-id": dataId
   }, AvatarCloseProps), /*#__PURE__*/_react["default"].createElement(_Avatar["default"], _extends({
     src: src,
     name: name,
@@ -44,7 +47,9 @@ function AvatarClose(props) {
     size: size
   }, AvatarProps)), isClose && /*#__PURE__*/_react["default"].createElement("span", {
     className: _AvatarCloseModule["default"].pop,
-    onClick: onClick
+    onClick: onClick,
+    "data-id": "".concat(dataId, "_close"),
+    "data-test-id": "".concat(dataId, "_close")
   }, /*#__PURE__*/_react["default"].createElement("span", {
     className: _AvatarCloseModule["default"].icon
   }, /*#__PURE__*/_react["default"].createElement(_icons.Icon, {

package/lib/v1/avatar/AvatarClose/props/defaultProps.js

@@ -8,6 +8,7 @@ var defaultProps = {
   isClose: false,
   size: 'medium',
   customProps: {},
-  dataSelectorId: 'avatarClose'
+  dataSelectorId: 'avatarClose',
+  dataId: 'avatarClose'
 };
 exports.defaultProps = defaultProps;

package/lib/v1/avatar/AvatarClose/props/propTypes.js

@@ -20,6 +20,7 @@ var propTypes = {
     AvatarCloseProps: _propTypes["default"].object,
     AvatarProps: _propTypes["default"].object
   }),
-  dataSelectorId: _propTypes["default"].string
+  dataSelectorId: _propTypes["default"].string,
+  dataId: _propTypes["default"].string
 };
 exports.propTypes = propTypes;

package/lib/v1/dropdown/ToggleDropDown/ToggleDropDown.js

@@ -650,14 +650,16 @@ var ToggleDropDown = /*#__PURE__*/function (_Component) {
         className: value ? _ToggleDropDownModule["default"].iconBox : ''
       }, /*#__PURE__*/_react["default"].createElement(_icons.Icon, {
         name: iconName,
-        size: iconSize
+        size: iconSize,
+        dataId: "".concat(dataId, "_icon")
       })) : null, value && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         id: ariaTitleId,
         "aria-hidden": true,
         className: "".concat(_ToggleDropDownModule["default"].value, " toggleDropText"),
         shrink: true,
         tagName: "span",
-        "data-title": dataTitle
+        "data-title": dataTitle,
+        dataId: "".concat(dataId, "_value")
       }, value), isEditable ? /*#__PURE__*/_react["default"].createElement(_icons.Icon, {
         "aria-hidden": true,
         size: "6",
@@ -705,7 +707,8 @@ var ToggleDropDown = /*#__PURE__*/function (_Component) {
               searchValue: searchValue,
               isFetchingOptions: isFetchingOptions
             }
-          }
+          },
+          dataId: "".concat(dataId, "_dropbox")
         }, DropBoxProps, {
           onClose: _this5.handleTogglePopup
         }), /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, isSearch ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
@@ -724,6 +727,7 @@ var ToggleDropDown = /*#__PURE__*/function (_Component) {
           } //search
           // onKeyDown={this.handleKeyDown}
           ,
+          dataId: "".concat(dataId, "_search"),
           a11y: {
             role: 'combobox',
             ariaOwns: ariaTitleId,

package/lib/v1/errorstate/Inconvenience/Inconvenience.js

@@ -67,7 +67,8 @@ function Inconvenience(props) {
     customClass: {
       customButton: _V2_ErrorStatesModule["default"].errorBtn
     },
-    onClick: onButtonClick
+    onClick: onButtonClick,
+    dataId: "".concat(dataId, "_button")
   }) : null));
 }
 

package/lib/v1/errorstate/UnableToProcessRequest/UnableToProcessRequest.js

@@ -67,7 +67,8 @@ function UnableToProcessRequest(props) {
     customClass: {
       customButton: _V2_ErrorStatesModule["default"].errorBtn
     },
-    onClick: onButtonClick
+    onClick: onButtonClick,
+    dataId: "".concat(dataId, "_button")
   }) : null));
 }
 

package/lib/v1/errorstate/UrlNotFound/UrlNotFound.js

@@ -67,7 +67,8 @@ function UrlNotFound(props) {
     customClass: {
       customButton: _V2_ErrorStatesModule["default"].errorBtn
     },
-    onClick: onButtonClick
+    onClick: onButtonClick,
+    dataId: "".concat(dataId, "_button")
   }) : null));
 }
 

package/lib/v1/errorstate/WillBeRightBack/WillBeRightBack.js

@@ -67,7 +67,8 @@ function WillBeRightBack(props) {
     customClass: {
       customButton: _V2_ErrorStatesModule["default"].errorBtn
     },
-    onClick: onButtonClick
+    onClick: onButtonClick,
+    dataId: "".concat(dataId, "_button")
   }) : null));
 }
 

package/lib/v1/form/fields/TagsMultiSelect/TagsMultiSelect.js

@@ -322,7 +322,8 @@ var TagsMultiSelect = /*#__PURE__*/function (_React$Component) {
           eleRef: _this3.getContainerRef
         }, searchList.length ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
           flexible: true,
-          shrink: true
+          shrink: true,
+          dataId: "".concat(dataId, "_Options")
         }, searchList.map(function (item, index) {
           var name = item.name,
               isNew = item.isNew,

package/lib/v1/list/status/StatusDropdown/StatusDropdown.js

@@ -220,7 +220,8 @@ function StatusDropdown(props) {
     className: "".concat(_StatusDropdownModule["default"].value, " toggleDropText"),
     shrink: true,
     tagName: "span",
-    "data-title": dataTitle
+    "data-title": dataTitle,
+    dataId: "".concat(dataId, "_value")
   }, value), isEditable ? /*#__PURE__*/_react["default"].createElement(_icons.Icon, {
     "aria-hidden": true,
     size: "7",
@@ -251,6 +252,7 @@ function StatusDropdown(props) {
       isResponsivePadding: true,
       needFocusScope: true,
       onClose: handleTogglePopup,
+      dataId: "".concat(dataId, "_dropbox"),
       customProps: {
         focusScopeProps: {
           searchValue: searchString,
@@ -277,7 +279,8 @@ function StatusDropdown(props) {
         role: 'combobox',
         ariaActivedescendant: isPopupReady ? value : '',
         ariaOwns: ariaTitleId
-      }
+      },
+      dataId: "".concat(dataId, "_search")
     })) : null, title && optionsList.length != 0 && /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
       className: _StatusDropdownModule["default"].title
     }, /*#__PURE__*/_react["default"].createElement(_DropDownHeading["default"], {

package/lib/v1/lookup/header/ViewDropDown/ViewDropDown.js

@@ -117,7 +117,8 @@ var DropDown = /*#__PURE__*/function (_SelectComponent) {
           searchBoxSize = _this$props.searchBoxSize,
           searchBoxVariant = _this$props.searchBoxVariant,
           searchBoxPlaceHolder = _this$props.searchBoxPlaceHolder,
-          maxLength = _this$props.maxLength;
+          maxLength = _this$props.maxLength,
+          dataId = _this$props.dataId;
       var _this$state = this.state,
           hoverIndex = _this$state.hoverIndex,
           selected = _this$state.selected,
@@ -126,7 +127,9 @@ var DropDown = /*#__PURE__*/function (_SelectComponent) {
           selectedId = _this$state.selectedId;
       var suggestions = this.handleFilterSuggestions();
       return /*#__PURE__*/_react["default"].createElement("div", {
-        className: _ViewDropDownModule["default"].container
+        className: _ViewDropDownModule["default"].container,
+        "data-id": dataId,
+        "data-test-id": dataId
       }, /*#__PURE__*/_react["default"].createElement("div", {
         onClick: this.togglePopup,
         ref: getTargetRef
@@ -134,11 +137,14 @@ var DropDown = /*#__PURE__*/function (_SelectComponent) {
         className: "".concat(_ViewDropDownModule["default"].labelCnt, " ").concat(isPopupOpen ? _ViewDropDownModule["default"].focused : '')
       }, /*#__PURE__*/_react["default"].createElement("span", {
         className: _ViewDropDownModule["default"].labelText,
-        "data-title": selected
+        "data-title": selected,
+        "data-id": "".concat(dataId, "_selectedValue"),
+        "data-test-id": "".concat(dataId, "_selectedValue")
       }, selected), /*#__PURE__*/_react["default"].createElement(_icons.Icon, {
         name: "ZD-down",
         size: "7",
-        iconClass: _ViewDropDownModule["default"].arrowIcon
+        iconClass: _ViewDropDownModule["default"].arrowIcon,
+        dataId: "".concat(dataId, "_icon")
       }))), isPopupOpen ? /*#__PURE__*/_react["default"].createElement(_CustomResponsive.ResponsiveReceiver, {
         query: this.responsiveFunc,
         responsiveId: "Helmet"
@@ -154,7 +160,8 @@ var DropDown = /*#__PURE__*/function (_SelectComponent) {
           animationStyle: animationStyle,
           size: "large",
           alignBox: "row",
-          isResponsivePadding: true
+          isResponsivePadding: true,
+          dataId: "".concat(dataId, "_dropbox")
         }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
           flexible: true
         }, /*#__PURE__*/_react["default"].createElement(_Card.Card, null, needSearch ? /*#__PURE__*/_react["default"].createElement(_Card.CardHeader, null, /*#__PURE__*/_react["default"].createElement(_DropDownSearch["default"], {
@@ -165,13 +172,15 @@ var DropDown = /*#__PURE__*/function (_SelectComponent) {
           size: searchBoxSize,
           variant: searchBoxVariant,
           placeHolder: searchBoxPlaceHolder,
-          maxLength: maxLength
+          maxLength: maxLength,
+          dataId: "".concat(dataId, "_search")
         })) : null, /*#__PURE__*/_react["default"].createElement(_Card.CardContent, {
           shrink: true,
           eleRef: _this2.suggestionContainerRef,
           customClass: !tabletMode && dropBoxSize ? _ViewDropDownModule["default"][dropBoxSize] : ''
         }, suggestions.length ? /*#__PURE__*/_react["default"].createElement("div", {
-          className: _ViewDropDownModule["default"].listItemContainer
+          className: _ViewDropDownModule["default"].listItemContainer,
+          "data-id": "".concat(dataId, "_Options")
         }, suggestions.map(function () {
           var option = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
           var index = arguments.length > 1 ? arguments[1] : undefined;

package/lib/v1/lookup/header/ViewDropDown/props/defaultProps.js

@@ -9,6 +9,7 @@ var defaultProps = {
   needLocalSearch: true,
   needSearch: true,
   textField: 'text',
-  valueField: 'id'
+  valueField: 'id',
+  dataId: 'ViewDropDown'
 };
 exports.defaultProps = defaultProps;

package/lib/v1/lookup/header/ViewDropDown/props/propTypes.js

@@ -15,6 +15,7 @@ var propTypes = {
   searchBoxPlaceHolder: _propTypes["default"].string,
   searchEmptyMessage: _propTypes["default"].string,
   dropBoxSize: _propTypes["default"].oneOf(['small', 'medium', 'large']),
+  dataId: _propTypes["default"].string,
 
   /**** Popup props ****/
   isPopupOpen: _propTypes["default"].bool,

package/lib/v1/setup/header/Search/Search.js

@@ -45,7 +45,8 @@ function Search(props) {
       onKeyPress = props.onKeyPress,
       onFocus = props.onFocus,
       onBlur = props.onBlur,
-      customClass = props.customClass;
+      customClass = props.customClass,
+      dataId = props.dataId;
 
   var _useState = (0, _react.useState)(false),
       _useState2 = _slicedToArray(_useState, 2),
@@ -70,7 +71,9 @@ function Search(props) {
   };
 
   return /*#__PURE__*/_react["default"].createElement("div", {
-    className: "".concat(_SearchModule["default"].container, " ").concat(isFocus ? _SearchModule["default"].active : '', " ").concat(customClass)
+    className: "".concat(_SearchModule["default"].container, " ").concat(isFocus ? _SearchModule["default"].active : '', " ").concat(customClass),
+    "data-id": "".concat(dataId, "_search"),
+    "data-test-id": "".concat(dataId, "_search")
   }, /*#__PURE__*/_react["default"].createElement(_TextBox["default"], {
     placeHolder: placeHolder,
     customClass: _SearchModule["default"].input,
@@ -83,7 +86,9 @@ function Search(props) {
     onBlur: handleBlur
   }), value != '' && value ? /*#__PURE__*/_react["default"].createElement("span", {
     className: _SearchModule["default"].icon,
-    onClick: handleBlur
+    onClick: handleBlur,
+    "data-id": "".concat(dataId, "_clear"),
+    "data-test-id": "".concat(dataId, "_clear")
   }, /*#__PURE__*/_react["default"].createElement(_icons.Icon, {
     name: "ZD-close",
     size: "19"

package/lib/v1/setup/header/Search/props/defaultProps.js

@@ -7,6 +7,7 @@ exports.defaultProps = void 0;
 var defaultProps = {
   placeHolder: 'Search',
   maxLength: 150,
-  customClass: ''
+  customClass: '',
+  dataId: 'search'
 };
 exports.defaultProps = defaultProps;

package/lib/v1/setup/header/Search/props/propTypes.js

@@ -17,6 +17,7 @@ var propTypes = {
   onFocus: _propTypes["default"].func,
   onKeyPress: _propTypes["default"].func,
   placeHolder: _propTypes["default"].string,
-  value: _propTypes["default"].string
+  value: _propTypes["default"].string,
+  dataId: _propTypes["default"].string
 };
 exports.propTypes = propTypes;

package/lib/version2/AlertClose/__tests__/AlertClose.spec.js

@@ -0,0 +1,18 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@testing-library/react");
+
+var _AlertClose = _interopRequireDefault(require("../AlertClose"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+describe('AlertClose', function () {
+  test('rendering the defult props', function () {
+    var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_AlertClose["default"], null)),
+        asFragment = _render.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

package/lib/version2/AlertClose/__tests__/__snapshots__/AlertClose.spec.js.snap

@@ -0,0 +1,29 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`AlertClose rendering the defult props 1`] = `
+<DocumentFragment>
+  <div
+    class="close   inflex rowdir both"
+    data-id="containerComponent"
+    data-selector-id="container"
+    data-test-id="containerComponent"
+    tabindex="0"
+  >
+    <div
+      class="shrinkOff"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <i
+        aria-hidden="true"
+        class="zd_font_icons basic icon-Cross fbold closeIcon  "
+        data-id="fontIcon"
+        data-selector-id="fontIcon"
+        data-test-id="fontIcon"
+        style="--zd-iconfont-size: var(--zd_font_size12);"
+      />
+    </div>
+  </div>
+</DocumentFragment>
+`;

package/lib/version2/GlobalNotification/__tests__/GlobalNotification.spec.js

@@ -0,0 +1,18 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@testing-library/react");
+
+var _GlobalNotification = _interopRequireDefault(require("../GlobalNotification"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+describe('GlobalNotification', function () {
+  test('rendering the defult props', function () {
+    var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_GlobalNotification["default"], null)),
+        asFragment = _render.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

package/lib/version2/GlobalNotification/__tests__/__snapshots__/GlobalNotification.spec.js.snap

@@ -0,0 +1,144 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`GlobalNotification rendering the defult props 1`] = `
+<DocumentFragment>
+  <div
+    class=" message 
+        
+        
+      "
+    data-id="show__message"
+    data-selector-id="globalNotification"
+    data-test-id="show__message"
+    tabindex="0"
+  >
+    <div
+      class="container inflex rowdir vCenter"
+      data-id="containerComponent"
+      data-selector-id="container"
+      data-test-id="containerComponent"
+    >
+      <div
+        class="icon shrinkOff"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+      >
+        <div
+          class="iconContainer"
+          data-selector-id="alertIcons"
+        >
+          <svg
+            class=""
+            viewBox="0 0 100 100"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              class="danger_secondary"
+              d="M34.89,23.86s27.19-17.79,41-12.44S99,61.81,60.74,82,5.16,58.27,5,50.48C4.87,42.94,5,25,34.89,23.86Z"
+            />
+            <polygon
+              class="outer_cls2"
+              points="95 49.42 94.18 48.61 92.98 49.79 91.79 48.61 90.97 49.42 92.16 50.6 90.97 51.78 91.79 52.59 92.98 51.41 94.18 52.59 95 51.78 93.81 50.6 95 49.42"
+            />
+            <rect
+              class="outer_cls2"
+              height="2.18"
+              width="1.16"
+              x="10"
+              y="21.46"
+            />
+            <rect
+              class="outer_cls2"
+              height="1.15"
+              width="2.21"
+              x="11.8"
+              y="24.27"
+            />
+            <rect
+              class="outer_cls2"
+              height="2.18"
+              width="1.16"
+              x="10"
+              y="26.05"
+            />
+            <rect
+              class="outer_cls2"
+              height="1.15"
+              width="2.21"
+              x="7.15"
+              y="24.27"
+            />
+            <path
+              class="outer_cls3"
+              d="M11.8,82.6a2.76,2.76,0,1,1,2.8-2.76A2.78,2.78,0,0,1,11.8,82.6Zm0-4.37a1.61,1.61,0,1,0,1.63,1.61A1.62,1.62,0,0,0,11.8,78.23Z"
+            />
+            <ellipse
+              class="outer_cls4"
+              cx="50.21"
+              cy="11.21"
+              rx="1.22"
+              ry="1.21"
+            />
+            <polygon
+              class="outer_cls4"
+              points="59.77 90 61.8 87.28 63.69 90 59.77 90"
+            />
+            <path
+              class="outer_cls5"
+              d="M52.28,43.16s-13.79-9-20.78-6.31S19.75,62.42,39.17,72.67s28.2-12.05,28.28-16S67.45,43.72,52.28,43.16Z"
+            />
+            <path
+              class="outer_cls6"
+              d="M61.28,46.39a1.15,1.15,0,1,1-1.15-1.13A1.13,1.13,0,0,1,61.28,46.39ZM71.63,69.28a5.37,5.37,0,0,0,0-5.4L63,48.91a1,1,0,0,0-1.74,1l8.65,15A3.39,3.39,0,0,1,67,70H30.05a3.39,3.39,0,0,1-2.94-5.09l18.46-32a3.39,3.39,0,0,1,5.87,0l4.74,8.2H48a2.54,2.54,0,0,0-1.85.8,2.57,2.57,0,0,0-.69,1.91l.92,12.67a2.54,2.54,0,0,0,5.08,0l.76-9.85a1,1,0,0,0-.92-1.08,1,1,0,0,0-1.07.92l-.76,9.87a.55.55,0,0,1-1.1,0L47.46,43.7a.51.51,0,0,1,.14-.41.58.58,0,0,1,.4-.17h9.91a1,1,0,0,0,.86-1.5l-5.6-9.7a5.39,5.39,0,0,0-9.33,0l-18.46,32A5.39,5.39,0,0,0,30.05,72H67A5.35,5.35,0,0,0,71.63,69.28ZM49,61.34a2.61,2.61,0,1,0,2.6,2.6A2.6,2.6,0,0,0,49,61.34Z"
+            />
+          </svg>
+        </div>
+      </div>
+      <div
+        class="grow basis shrinkOff"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+      >
+        <div
+          class="text"
+          data-id="infoMessage"
+          data-test-id="infoMessage"
+        />
+      </div>
+      <div
+        class="close shrinkOff"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+      >
+        <div
+          class="close   inflex rowdir both"
+          data-id="close__message"
+          data-selector-id="container"
+          data-test-id="close__message"
+          data-title="Close"
+          tabindex="0"
+        >
+          <div
+            class="shrinkOff"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            <i
+              aria-hidden="true"
+              class="zd_font_icons basic icon-Cross fbold closeIcon  "
+              data-id="fontIcon"
+              data-selector-id="fontIcon"
+              data-test-id="fontIcon"
+              style="--zd-iconfont-size: var(--zd_font_size12);"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;