@kaizen/components 1.74.3 → 1.75.1

package/dist/esm/GuidanceBlock/GuidanceBlock.mjs

@@ -1,14 +1,14 @@
 import { __rest, __assign } from 'tslib';
-import React, { useState, useEffect } from 'react';
+import React, { useState } from 'react';
 import classnames from 'classnames';
-import Media from 'react-media';
 import { Button } from '../Button/Button/Button.mjs';
 import '../Button/IconButton/IconButton.mjs';
 import { Heading } from '../Heading/Heading.mjs';
 import { Text } from '../Text/Text.mjs';
 import { Tooltip } from '../Tooltip/Tooltip.mjs';
-import { Icon } from '../__next__/Icon/Icon.mjs';
+import { useMediaQueries } from '../utils/useMediaQueries.mjs';
 import styles from './GuidanceBlock.module.css.mjs';
+import { Icon } from '../__next__/Icon/Icon.mjs';
 var WithTooltip = function (_a) {
   var tooltipProps = _a.tooltipProps,
     children = _a.children;
@@ -20,40 +20,32 @@ var WithTooltip = function (_a) {
  */
 const GuidanceBlock = /*#__PURE__*/function () {
   const GuidanceBlock = function (_a) {
-    var _b, _c, _d, _e;
-    var _f = _a.layout,
-      layout = _f === void 0 ? 'default' : _f,
-      _g = _a.variant,
-      variant = _g === void 0 ? 'default' : _g,
-      _h = _a.withActionButtonArrow,
-      withActionButtonArrow = _h === void 0 ? true : _h,
-      _j = _a.noMaxWidth,
-      noMaxWidth = _j === void 0 ? false : _j,
-      _k = _a.illustrationType,
-      illustrationType = _k === void 0 ? 'spot' : _k,
-      _l = _a.smallScreenTextAlignment,
-      smallScreenTextAlignment = _l === void 0 ? 'center' : _l,
+    var _b, _c, _d, _e, _f;
+    var _g = _a.layout,
+      layout = _g === void 0 ? 'default' : _g,
+      _h = _a.variant,
+      variant = _h === void 0 ? 'default' : _h,
+      _j = _a.withActionButtonArrow,
+      withActionButtonArrow = _j === void 0 ? true : _j,
+      _k = _a.noMaxWidth,
+      noMaxWidth = _k === void 0 ? false : _k,
+      _l = _a.illustrationType,
+      illustrationType = _l === void 0 ? 'spot' : _l,
+      _m = _a.smallScreenTextAlignment,
+      smallScreenTextAlignment = _m === void 0 ? 'center' : _m,
       actions = _a.actions,
       illustration = _a.illustration,
       secondaryDismiss = _a.secondaryDismiss,
-      restProps = __rest(_a, ["layout", "variant", "withActionButtonArrow", "noMaxWidth", "illustrationType", "smallScreenTextAlignment", "actions", "illustration", "secondaryDismiss"]);
-    var _m = useState(false),
-      hidden = _m[0],
-      setHidden = _m[1];
+      actionsSlot = _a.actionsSlot,
+      restProps = __rest(_a, ["layout", "variant", "withActionButtonArrow", "noMaxWidth", "illustrationType", "smallScreenTextAlignment", "actions", "illustration", "secondaryDismiss", "actionsSlot"]);
     var _o = useState(false),
-      removed = _o[0],
-      setRemoved = _o[1];
-    var _p = useState(''),
-      mediaQueryLayout = _p[0],
-      setMediaQueryLayout = _p[1];
+      hidden = _o[0],
+      setHidden = _o[1];
+    var _p = useState(false),
+      removed = _p[0],
+      setRemoved = _p[1];
+    var queries = useMediaQueries().queries;
     var containerRef = /*#__PURE__*/React.createRef();
-    useEffect(function () {
-      if (layout === 'inline' || layout === 'stacked') {
-        containerQuery();
-      }
-      // @todo: Fix if possible - avoiding breaking in eslint upgrade
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
     var handleDismissBanner = function () {
       var _a;
       setHidden(true);
@@ -65,21 +57,6 @@ const GuidanceBlock = /*#__PURE__*/function () {
         setRemoved(true);
       }
     };
-    var containerQuery = function () {
-      var resizeObserver = new ResizeObserver(function (entries) {
-        if (entries.length === 1) {
-          handleMediaQueryLayout(entries[0].contentRect.width);
-        }
-      });
-      resizeObserver.observe(containerRef.current);
-    };
-    var handleMediaQueryLayout = function (width) {
-      if (width <= 320) {
-        setMediaQueryLayout('centerContent');
-      } else {
-        setMediaQueryLayout('');
-      }
-    };
     var marginTop = function () {
       if (hidden && containerRef.current) {
         return -containerRef.current.clientHeight + 'px';
@@ -89,9 +66,8 @@ const GuidanceBlock = /*#__PURE__*/function () {
     if (removed) {
       return /*#__PURE__*/React.createElement(React.Fragment, null);
     }
-    var componentIsMobile = mediaQueryLayout.includes('centerContent');
     return /*#__PURE__*/React.createElement("div", {
-      className: classnames(styles.banner, variant && styles[variant], layout && styles[layout], hidden && styles.hidden, mediaQueryLayout === 'centerContent' && styles.centerContent, noMaxWidth && styles.noMaxWidth, illustrationType === 'scene' && styles.hasSceneIllustration, smallScreenTextAlignment === 'left' && styles.smallScreenTextAlignment),
+      className: classnames(styles.banner, variant && styles[variant], layout && styles[layout], hidden && styles.hidden, queries.isSmall && styles.centerContent, noMaxWidth && styles.noMaxWidth, illustrationType === 'scene' && styles.hasSceneIllustration, smallScreenTextAlignment === 'left' && styles.smallScreenTextAlignment),
       style: {
         marginTop: marginTop()
       },
@@ -115,41 +91,31 @@ const GuidanceBlock = /*#__PURE__*/function () {
     }, (_d = restProps === null || restProps === void 0 ? void 0 : restProps.text) === null || _d === void 0 ? void 0 : _d.title)), /*#__PURE__*/React.createElement(Text, {
       tag: "p",
       variant: "body"
-    }, (_e = restProps === null || restProps === void 0 ? void 0 : restProps.text) === null || _e === void 0 ? void 0 : _e.description)))), (actions === null || actions === void 0 ? void 0 : actions.primary) && (/*#__PURE__*/React.createElement(Media, {
-      query: "(max-width: 767px)"
-    }, function (isMobile) {
-      var _a;
-      return /*#__PURE__*/React.createElement("div", {
-        className: classnames({
-          noRightMargin: isMobile || componentIsMobile,
-          rightMargin: !(isMobile || componentIsMobile) && layout === 'default'
-        })
-      }, /*#__PURE__*/React.createElement("div", {
-        className: classnames(styles.buttonContainer, (actions === null || actions === void 0 ? void 0 : actions.secondary) && styles.secondaryAction)
-      }, /*#__PURE__*/React.createElement(WithTooltip, {
-        tooltipProps: actions.primary.tooltip
-      }, /*#__PURE__*/React.createElement(Button, __assign({
-        icon: withActionButtonArrow ? (/*#__PURE__*/React.createElement(Icon, {
-          name: "arrow_forward",
-          isPresentational: true,
-          shouldMirrorInRTL: true
-        })) : undefined,
-        iconPosition: "end"
-      }, actions.primary, {
-        fullWidth: isMobile || componentIsMobile
-      }))), (actions === null || actions === void 0 ? void 0 : actions.secondary) && (/*#__PURE__*/React.createElement(WithTooltip, {
-        tooltipProps: actions.secondary.tooltip
-      }, /*#__PURE__*/React.createElement("div", {
-        className: styles.secondaryAction
-      }, /*#__PURE__*/React.createElement(Button, __assign({
-        secondary: true
-      }, actions.secondary, {
-        onClick: secondaryDismiss ? function () {
-          return handleDismissBanner();
-        } : (_a = actions === null || actions === void 0 ? void 0 : actions.secondary) === null || _a === void 0 ? void 0 : _a.onClick,
-        fullWidth: isMobile || componentIsMobile
-      })))))));
-    }))));
+    }, (_e = restProps === null || restProps === void 0 ? void 0 : restProps.text) === null || _e === void 0 ? void 0 : _e.description)))), (actions === null || actions === void 0 ? void 0 : actions.primary) || actionsSlot ? (/*#__PURE__*/React.createElement("div", {
+      className: styles.buttonContainer
+    }, (actions === null || actions === void 0 ? void 0 : actions.primary) && (/*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(WithTooltip, {
+      tooltipProps: actions.primary.tooltip
+    }, /*#__PURE__*/React.createElement(Button, __assign({
+      icon: withActionButtonArrow ? (/*#__PURE__*/React.createElement(Icon, {
+        name: "arrow_forward",
+        isPresentational: true,
+        shouldMirrorInRTL: true
+      })) : undefined,
+      iconPosition: "end"
+    }, actions.primary, {
+      fullWidth: queries.isSmall
+    }))), (actions === null || actions === void 0 ? void 0 : actions.secondary) && (/*#__PURE__*/React.createElement(WithTooltip, {
+      tooltipProps: actions.secondary.tooltip
+    }, /*#__PURE__*/React.createElement("div", {
+      className: styles.secondaryAction
+    }, /*#__PURE__*/React.createElement(Button, __assign({
+      secondary: true
+    }, actions.secondary, {
+      onClick: secondaryDismiss ? function () {
+        return handleDismissBanner();
+      } : (_f = actions === null || actions === void 0 ? void 0 : actions.secondary) === null || _f === void 0 ? void 0 : _f.onClick,
+      fullWidth: queries.isSmall
+    }))))))), !actions && actionsSlot && actionsSlot)) : null));
   };
   GuidanceBlock.displayName = 'GuidanceBlock';
   return GuidanceBlock;

package/dist/esm/GuidanceBlock/GuidanceBlock.module.css.mjs

@@ -1,6 +1,4 @@
 var styles = {
-  "rightMargin": "GuidanceBlock-module_rightMargin__T6JO2",
-  "noRightMargin": "GuidanceBlock-module_noRightMargin__MczwN",
   "banner": "GuidanceBlock-module_banner__7FT39",
   "noMaxWidth": "GuidanceBlock-module_noMaxWidth__UCCUk",
   "illustrationWrapper": "GuidanceBlock-module_illustrationWrapper__tK4Xr",