@kaizen/components 1.57.1 → 1.58.0

package/dist/esm/ProgressBar/ProgressBar.mjs

@@ -16,12 +16,13 @@ const ProgressBar = /*#__PURE__*/function () {
       max = _a.max,
       isAnimating = _a.isAnimating,
       mood = _a.mood,
+      color = _a.color,
       subtext = _a.subtext,
       label = _a.label,
       classNameOverride = _a.classNameOverride,
       _b = _a.isReversed,
       isReversed = _b === void 0 ? false : _b,
-      restProps = __rest(_a, ["value", "max", "isAnimating", "mood", "subtext", "label", "classNameOverride", "isReversed"]);
+      restProps = __rest(_a, ["value", "max", "isAnimating", "mood", "color", "subtext", "label", "classNameOverride", "isReversed"]);
     var percentage = calculatePercentage({
       value: value,
       max: max
@@ -38,7 +39,7 @@ const ProgressBar = /*#__PURE__*/function () {
     }), /*#__PURE__*/React.createElement("div", {
       className: styles.progressBackground
     }, /*#__PURE__*/React.createElement("div", {
-      className: classnames(styles[mood], isAnimating && styles.isAnimating),
+      className: classnames(styles.progress, color ? styles[color] : styles[mood], isAnimating && styles.isAnimating),
       style: {
         transform: "translateX(-".concat(100 - percentage, "%")
       }

package/dist/esm/ProgressBar/ProgressBar.module.scss.mjs

@@ -2,10 +2,14 @@ var styles = {
   "subtext": "ProgressBar-module_subtext__eizyu",
   "progressBackground": "ProgressBar-module_progressBackground__5qzp5",
   "progress": "ProgressBar-module_progress__X1IHw",
-  "positive": "ProgressBar-module_positive__12oA1 ProgressBar-module_progress__X1IHw",
-  "informative": "ProgressBar-module_informative__lrVDM ProgressBar-module_progress__X1IHw",
-  "cautionary": "ProgressBar-module_cautionary__f56gH ProgressBar-module_progress__X1IHw",
-  "negative": "ProgressBar-module_negative__EVWBt ProgressBar-module_progress__X1IHw",
+  "positive": "ProgressBar-module_positive__12oA1",
+  "informative": "ProgressBar-module_informative__lrVDM",
+  "cautionary": "ProgressBar-module_cautionary__f56gH",
+  "negative": "ProgressBar-module_negative__EVWBt",
+  "blue": "ProgressBar-module_blue__WEID8",
+  "green": "ProgressBar-module_green__J1T96",
+  "red": "ProgressBar-module_red__Ssd61",
+  "yellow": "ProgressBar-module_yellow__bcHWO",
   "isAnimating": "ProgressBar-module_isAnimating__F6AxQ",
   "pulse": "ProgressBar-module_pulse__RGaQm"
 };

package/dist/esm/Tile/subcomponents/GenericTile/GenericTile.mjs

@@ -18,12 +18,14 @@ const GenericTile = /*#__PURE__*/function () {
       metadata = _a.metadata,
       information = _a.information,
       mood = _a.mood,
+      _c = _a.variant,
+      variant = _c === void 0 ? "default" : _c,
       footer = _a.footer,
       classNameOverride = _a.classNameOverride,
-      restProps = __rest(_a, ["children", "title", "titleTag", "metadata", "information", "mood", "footer", "classNameOverride"]);
-    var _c = useState(false),
-      isFlipped = _c[0],
-      setIsFlipped = _c[1];
+      restProps = __rest(_a, ["children", "title", "titleTag", "metadata", "information", "mood", "variant", "footer", "classNameOverride"]);
+    var _d = useState(false),
+      isFlipped = _d[0],
+      setIsFlipped = _d[1];
     var renderTitle = function () {
       return /*#__PURE__*/React.createElement("div", {
         className: styles.title
@@ -51,7 +53,7 @@ const GenericTile = /*#__PURE__*/function () {
     };
     var renderFront = function () {
       return /*#__PURE__*/React.createElement("div", {
-        className: classnames(styles.face, styles.faceFront, mood === "positive" && styles.faceMoodPositive, mood === "informative" && styles.faceMoodInformative, mood === "cautionary" && styles.faceMoodCautionary, mood === "assertive" && styles.faceMoodAssertive, mood === "negative" && styles.faceMoodNegative, mood === "prominent" && styles.faceMoodProminent)
+        className: classnames(styles.face, styles.faceFront, mood ? styles[mood] : styles[variant])
       }, information && ( /*#__PURE__*/React.createElement("div", {
         className: styles.informationBtn
       }, /*#__PURE__*/React.createElement(IconButton, {

package/dist/esm/Tile/subcomponents/GenericTile/GenericTile.module.scss.mjs

@@ -5,12 +5,14 @@ var styles = {
   "face": "GenericTile-module_face__-KLVi",
   "faceFront": "GenericTile-module_faceFront__HywHi",
   "faceBack": "GenericTile-module_faceBack__NDCQ8",
-  "faceMoodPositive": "GenericTile-module_faceMoodPositive__3MEBl",
-  "faceMoodInformative": "GenericTile-module_faceMoodInformative__D0QsW",
-  "faceMoodCautionary": "GenericTile-module_faceMoodCautionary__oUZXT",
-  "faceMoodNegative": "GenericTile-module_faceMoodNegative__DmcZH",
-  "faceMoodAssertive": "GenericTile-module_faceMoodAssertive__PaUZ-",
-  "faceMoodProminent": "GenericTile-module_faceMoodProminent__VmMmv",
+  "positive": "GenericTile-module_positive__lnpvE",
+  "informative": "GenericTile-module_informative__7ox46",
+  "cautionary": "GenericTile-module_cautionary__MIucD",
+  "negative": "GenericTile-module_negative__2GyVY",
+  "assertive": "GenericTile-module_assertive__h7Z5M",
+  "prominent": "GenericTile-module_prominent__bfA9P",
+  "default": "GenericTile-module_default__z-CEg",
+  "expert-advice": "GenericTile-module_expert-advice__qSnxo",
   "isFlipped": "GenericTile-module_isFlipped__K18mo",
   "title": "GenericTile-module_title__zC6Qv",
   "actions": "GenericTile-module_actions__l8vXl",

package/dist/esm/Well/Well.mjs

@@ -10,16 +10,17 @@ import styles from './Well.module.scss.mjs';
 const Well = /*#__PURE__*/function () {
   const Well = function (_a) {
     var children = _a.children,
-      _b = _a.variant,
-      variant = _b === void 0 ? "default" : _b,
+      variant = _a.variant,
+      _b = _a.color,
+      color = _b === void 0 ? "white" : _b,
       _c = _a.borderStyle,
       borderStyle = _c === void 0 ? "solid" : _c,
       _d = _a.noMargin,
       noMargin = _d === void 0 ? false : _d,
       classNameOverride = _a.classNameOverride,
-      restProps = __rest(_a, ["children", "variant", "borderStyle", "noMargin", "classNameOverride"]);
+      restProps = __rest(_a, ["children", "variant", "color", "borderStyle", "noMargin", "classNameOverride"]);
     return /*#__PURE__*/React.createElement("div", __assign({
-      className: classnames(styles.container, styles[borderStyle], styles[variant], noMargin && styles.noMargin, classNameOverride)
+      className: classnames(styles.container, styles[borderStyle], styles[color], variant && styles[variant], noMargin && styles.noMargin, classNameOverride)
     }, restProps), children);
   };
   Well.displayName = "Well";

package/dist/esm/Well/Well.module.scss.mjs

@@ -1,8 +1,16 @@
 var styles = {
   "container": "Well-module_container__pi8-W",
   "noMargin": "Well-module_noMargin__xBvM9",
-  "default": "Well-module_default__tSiHp",
+  "white": "Well-module_white__HEVrB",
+  "gray": "Well-module_gray__ur3Fv",
+  "blue": "Well-module_blue__H8M0Q",
+  "yellow": "Well-module_yellow__DJAMr",
+  "orange": "Well-module_orange__F0FkU",
+  "red": "Well-module_red__40n5z",
+  "green": "Well-module_green__R-zR1",
+  "purple": "Well-module_purple__iXxT8",
   "positive": "Well-module_positive__6ldUu",
+  "default": "Well-module_default__tSiHp",
   "negative": "Well-module_negative__mVczy",
   "informative": "Well-module_informative__81djJ",
   "cautionary": "Well-module_cautionary__MSYHT",

package/dist/esm/{GuidanceBlock → __containers__/GuidanceBlock/v1}/GuidanceBlock.mjs

@@ -2,13 +2,13 @@ import { __rest, __assign } from 'tslib';
 import React, { useState, useEffect } from 'react';
 import classnames from 'classnames';
 import Media from 'react-media';
-import { Heading } from '../Heading/Heading.mjs';
-import '../Icon/subcomponents/SVG/SVG.mjs';
-import { ArrowForwardIcon } from '../Icon/ArrowForwardIcon.mjs';
-import { Text } from '../Text/Text.mjs';
-import { Tooltip } from '../__overlays__/Tooltip/v1/index.mjs';
+import { Heading } from '../../../Heading/Heading.mjs';
+import '../../../Icon/subcomponents/SVG/SVG.mjs';
+import { ArrowForwardIcon } from '../../../Icon/ArrowForwardIcon.mjs';
+import { Text } from '../../../Text/Text.mjs';
+import { Tooltip } from '../../../__overlays__/Tooltip/v1/index.mjs';
 import styles from './GuidanceBlock.module.scss.mjs';
-import { Button } from '../__actions__/Button/v1/Button/Button.mjs';
+import { Button } from '../../../__actions__/Button/v1/Button/Button.mjs';
 var WithTooltip = function (_a) {
   var tooltipProps = _a.tooltipProps,
     children = _a.children;

package/dist/esm/__containers__/GuidanceBlock/v1/GuidanceBlock.module.scss.mjs

@@ -0,0 +1,31 @@
+var styles = {
+  "rightMargin": "GuidanceBlock-module_rightMargin__SbVUD",
+  "noRightMargin": "GuidanceBlock-module_noRightMargin__CbCz9",
+  "banner": "GuidanceBlock-module_banner__NyOs1",
+  "noMaxWidth": "GuidanceBlock-module_noMaxWidth__Rh070",
+  "illustrationWrapper": "GuidanceBlock-module_illustrationWrapper__lIGaj",
+  "illustration": "GuidanceBlock-module_illustration__W7PwM",
+  "hasSceneIllustration": "GuidanceBlock-module_hasSceneIllustration__CX8GF",
+  "descriptionContainer": "GuidanceBlock-module_descriptionContainer__JyNJp",
+  "descriptionAndActions": "GuidanceBlock-module_descriptionAndActions__2KGZQ",
+  "buttonContainer": "GuidanceBlock-module_buttonContainer__6-Ty-",
+  "hidden": "GuidanceBlock-module_hidden__a6zCg",
+  "headingWrapper": "GuidanceBlock-module_headingWrapper__3zGY2",
+  "cancel": "GuidanceBlock-module_cancel__G-4ci",
+  "icon": "GuidanceBlock-module_icon__W0pEX",
+  "disabled": "GuidanceBlock-module_disabled__GL1dK",
+  "hover": "GuidanceBlock-module_hover__5PdJM",
+  "active": "GuidanceBlock-module_active__3ifEz",
+  "default": "GuidanceBlock-module_default__9rhEq",
+  "positive": "GuidanceBlock-module_positive__m6n-N",
+  "negative": "GuidanceBlock-module_negative__Z8tj-",
+  "assertive": "GuidanceBlock-module_assertive__76y6Y",
+  "informative": "GuidanceBlock-module_informative__QBzhx",
+  "cautionary": "GuidanceBlock-module_cautionary__iwOA-",
+  "prominent": "GuidanceBlock-module_prominent__LWMSm",
+  "inline": "GuidanceBlock-module_inline__Dq-OU",
+  "stacked": "GuidanceBlock-module_stacked__h3bUz",
+  "centerContent": "GuidanceBlock-module_centerContent__Cyd34",
+  "smallScreenTextAlignment": "GuidanceBlock-module_smallScreenTextAlignment__VI-fw"
+};
+export { styles as default };

package/dist/esm/__containers__/GuidanceBlock/v2/GuidanceBlock.mjs

@@ -0,0 +1,153 @@
+import { __rest, __assign } from 'tslib';
+import React, { useState, useEffect } from 'react';
+import classnames from 'classnames';
+import Media from 'react-media';
+import { Heading } from '../../../Heading/Heading.mjs';
+import '../../../Icon/subcomponents/SVG/SVG.mjs';
+import { ArrowForwardIcon } from '../../../Icon/ArrowForwardIcon.mjs';
+import { Text } from '../../../Text/Text.mjs';
+import { Tooltip } from '../../../__overlays__/Tooltip/v1/index.mjs';
+import styles from './GuidanceBlock.module.scss.mjs';
+import { Button } from '../../../__actions__/Button/v1/Button/Button.mjs';
+var WithTooltip = function (_a) {
+  var tooltipProps = _a.tooltipProps,
+    children = _a.children;
+  return !!tooltipProps ? ( /*#__PURE__*/React.createElement(Tooltip, __assign({}, tooltipProps), children)) : ( /*#__PURE__*/React.createElement(React.Fragment, null, children));
+};
+/**
+ * {@link https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3082093807/Guidance+Block Guidance} |
+ * {@link https://cultureamp.design/?path=/docs/components-guidanceblock--docs Storybook}
+ */
+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,
+      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];
+    var _o = useState(false),
+      removed = _o[0],
+      setRemoved = _o[1];
+    var _p = useState(""),
+      mediaQueryLayout = _p[0],
+      setMediaQueryLayout = _p[1];
+    var containerRef = /*#__PURE__*/React.createRef();
+    useEffect(function () {
+      if (layout === "inline" || layout === "stacked") {
+        containerQuery();
+      }
+    }, []);
+    var handleDismissBanner = function () {
+      var _a;
+      setHidden(true);
+      (_a = actions === null || actions === void 0 ? void 0 : actions.dismiss) === null || _a === void 0 ? void 0 : _a.onClick();
+    };
+    var onTransitionEnd = function (e) {
+      // Be careful: this assumes the final CSS property to be animated is "margin-top".
+      if (hidden && e.propertyName === "margin-top") {
+        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";
+      }
+      return "0";
+    };
+    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),
+      style: {
+        marginTop: marginTop()
+      },
+      ref: containerRef,
+      onTransitionEnd: onTransitionEnd
+    }, /*#__PURE__*/React.createElement("div", {
+      className: styles.illustrationWrapper
+    }, /*#__PURE__*/React.createElement("div", {
+      className: styles.illustration
+    }, illustrationType === "scene" ? /*#__PURE__*/React.cloneElement(illustration, {
+      enableAspectRatio: true
+    }) : illustration)), /*#__PURE__*/React.createElement("div", {
+      className: styles.descriptionAndActions
+    }, /*#__PURE__*/React.createElement("div", {
+      className: styles.descriptionContainer
+    }, "content" in restProps && restProps.content, "text" in restProps && ( /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+      className: styles.headingWrapper
+    }, /*#__PURE__*/React.createElement(Heading, {
+      tag: (_c = (_b = restProps === null || restProps === void 0 ? void 0 : restProps.text) === null || _b === void 0 ? void 0 : _b.titleTag) !== null && _c !== void 0 ? _c : "h3",
+      variant: "heading-3"
+    }, (_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(ArrowForwardIcon, {
+          role: "presentation"
+        })) : 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
+      })))))));
+    }))));
+  };
+  GuidanceBlock.displayName = "GuidanceBlock";
+  return GuidanceBlock;
+}();
+export { GuidanceBlock };

package/dist/esm/__containers__/GuidanceBlock/v2/GuidanceBlock.module.scss.mjs

@@ -0,0 +1,26 @@
+var styles = {
+  "rightMargin": "GuidanceBlock-module_rightMargin__gIzig",
+  "noRightMargin": "GuidanceBlock-module_noRightMargin__xtPiX",
+  "banner": "GuidanceBlock-module_banner__ng6kh",
+  "noMaxWidth": "GuidanceBlock-module_noMaxWidth__V-DbD",
+  "illustrationWrapper": "GuidanceBlock-module_illustrationWrapper__-rRYc",
+  "illustration": "GuidanceBlock-module_illustration__LpEwu",
+  "hasSceneIllustration": "GuidanceBlock-module_hasSceneIllustration__HxwOA",
+  "descriptionContainer": "GuidanceBlock-module_descriptionContainer__N1EEi",
+  "descriptionAndActions": "GuidanceBlock-module_descriptionAndActions__D206m",
+  "buttonContainer": "GuidanceBlock-module_buttonContainer__w3vEh",
+  "hidden": "GuidanceBlock-module_hidden__hgakl",
+  "headingWrapper": "GuidanceBlock-module_headingWrapper__xqjf-",
+  "cancel": "GuidanceBlock-module_cancel__0lcBe",
+  "icon": "GuidanceBlock-module_icon__XVKkH",
+  "disabled": "GuidanceBlock-module_disabled__tbZPh",
+  "hover": "GuidanceBlock-module_hover__vs7Wu",
+  "active": "GuidanceBlock-module_active__eJu5N",
+  "default": "GuidanceBlock-module_default__W7fnR",
+  "expert-advice": "GuidanceBlock-module_expert-advice__uGg7D",
+  "inline": "GuidanceBlock-module_inline__DC0LQ",
+  "stacked": "GuidanceBlock-module_stacked__2SSuH",
+  "centerContent": "GuidanceBlock-module_centerContent__pS9uQ",
+  "smallScreenTextAlignment": "GuidanceBlock-module_smallScreenTextAlignment__iaw5d"
+};
+export { styles as default };

package/dist/esm/containersV1.mjs

@@ -0,0 +1 @@
+export { GuidanceBlock } from './__containers__/GuidanceBlock/v1/GuidanceBlock.mjs';

package/dist/esm/containersV2.mjs

@@ -0,0 +1 @@
+export { GuidanceBlock } from './__containers__/GuidanceBlock/v2/GuidanceBlock.mjs';

package/dist/esm/index.mjs

@@ -58,7 +58,6 @@ export { getTruncatedLabels } from './Filter/FilterMultiSelect/utils/getTruncate
 export { getSelectedOptionLabels } from './Filter/FilterMultiSelect/utils/getSelectedOptionLabels.mjs';
 export { getSelectedOptionKeys } from './Filter/FilterMultiSelect/utils/getSelectedOptionKeys.mjs';
 export { FilterSelect } from './Filter/FilterSelect/FilterSelect.mjs';
-export { GuidanceBlock } from './GuidanceBlock/GuidanceBlock.mjs';
 export { Heading } from './Heading/Heading.mjs';
 export { AcademyIcon } from './Icon/AcademyIcon.mjs';
 export { ActionOffIcon } from './Icon/ActionOffIcon.mjs';
@@ -415,3 +414,4 @@ export { Tooltip } from './__overlays__/Tooltip/v1/index.mjs';
 export { Menu, MenuHeading, MenuItem, MenuList, StatelessMenu } from './__actions__/Menu/v1/index.mjs';
 export { Button } from './__actions__/Button/v1/Button/Button.mjs';
 export { IconButton } from './__actions__/Button/v1/IconButton/IconButton.mjs';
+export { GuidanceBlock } from './__containers__/GuidanceBlock/v1/GuidanceBlock.mjs';