@thecb/components 9.2.0-beta.0 → 9.2.0-beta.10

package/dist/index.cjs.js

@@ -5051,7 +5051,8 @@ var FANTASY_RED = "#FCF4F4";
 var COSMOS_RED = "#FFD0D3";
 var BLUSH_RED = "#FFF0F5"; // Second level color constants
 
-var ERROR_COLOR = RAZZMATAZZ_RED; // These colors are sequestered so that the alert component can reference them // by type of alert
+var ERROR_COLOR = RAZZMATAZZ_RED;
+var ERROR_BACKGROUND_COLOR = "#FFF4F8"; // These colors are sequestered so that the alert component can reference them // by type of alert
 
 var ALERT_COLORS = {
   warn: {
@@ -5182,7 +5183,8 @@ var colors = /*#__PURE__*/Object.freeze({
   RASPBERRY: RASPBERRY,
   ALERT_COLORS: ALERT_COLORS,
   PILL_COLORS: PILL_COLORS,
-  ERROR_COLOR: ERROR_COLOR
+  ERROR_COLOR: ERROR_COLOR,
+  ERROR_BACKGROUND_COLOR: ERROR_BACKGROUND_COLOR
 });
 
 var TextSpan = styled__default.span.withConfig({
@@ -25584,6 +25586,53 @@ var useOutsideClickHook = function useOutsideClickHook(handler) {
   return ref;
 };
 
+var initialToastState = {
+  isOpen: false,
+  variant: "",
+  message: ""
+};
+
+var useToastNotification = function useToastNotification() {
+  var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+      _ref$timeout = _ref.timeout,
+      timeout = _ref$timeout === void 0 ? 5000 : _ref$timeout;
+
+  var _useState = React.useState(initialToastState),
+      _useState2 = _slicedToArray(_useState, 2),
+      toastState = _useState2[0],
+      setToastState = _useState2[1];
+
+  React.useEffect(function () {
+    if (toastState.isOpen) {
+      setTimeout(function () {
+        setToastState(initialToastState);
+      }, timeout);
+    }
+  }, [timeout, toastState.isOpen]);
+
+  var showToast = function showToast(_ref2) {
+    var message = _ref2.message,
+        variant = _ref2.variant;
+    return setToastState({
+      isOpen: true,
+      variant: variant,
+      message: message
+    });
+  };
+
+  var hideToast = function hideToast() {
+    return setToastState(initialToastState);
+  };
+
+  return {
+    isToastOpen: toastState.isOpen,
+    toastVariant: toastState.variant,
+    toastMessage: toastState.message,
+    showToast: showToast,
+    hideToast: hideToast
+  };
+};
+
 
 
 var index$4 = /*#__PURE__*/Object.freeze({
@@ -25592,7 +25641,8 @@ var index$4 = /*#__PURE__*/Object.freeze({
   general: general,
   theme: themeUtils,
   useFocusInvalidInput: useFocusInvalidInput,
-  useOutsideClick: useOutsideClickHook
+  useOutsideClick: useOutsideClickHook,
+  useToastNotification: useToastNotification
 });
 
 var hoverColor$4 = "#116285";
@@ -50290,6 +50340,51 @@ var Timeout = function Timeout(_ref) {
 
 var Timeout$1 = withWindowSize(Timeout);
 
+var VARIANTS = {
+  SUCCESS: "success",
+  ERROR: "error"
+};
+
+var ToastNotification = function ToastNotification(_ref) {
+  var _ref$variant = _ref.variant,
+      variant = _ref$variant === void 0 ? VARIANTS.SUCCESS : _ref$variant,
+      _ref$message = _ref.message,
+      message = _ref$message === void 0 ? "" : _ref$message,
+      toastOpen = _ref.toastOpen,
+      closeToastNotification = _ref.closeToastNotification,
+      extraStyles = _ref.extraStyles,
+      _ref$minWidth = _ref.minWidth,
+      minWidth = _ref$minWidth === void 0 ? "112px" : _ref$minWidth,
+      _ref$maxWidth = _ref.maxWidth,
+      maxWidth = _ref$maxWidth === void 0 ? "350px" : _ref$maxWidth,
+      _ref$height = _ref.height,
+      height = _ref$height === void 0 ? "56px" : _ref$height,
+      _ref$childGap = _ref.childGap,
+      childGap = _ref$childGap === void 0 ? "1rem" : _ref$childGap,
+      backgroundColor = _ref.backgroundColor;
+  return /*#__PURE__*/React__default.createElement(Box, {
+    onClick: closeToastNotification,
+    background: backgroundColor ? backgroundColor : variant === VARIANTS.SUCCESS ? HINT_GREEN : variant === "error" ? ERROR_BACKGROUND_COLOR : WHITE,
+    minWidth: minWidth,
+    minHeight: height && parseInt(height) < 100 ? height : "100px",
+    height: height ? height : "auto",
+    tabIndex: toastOpen ? "-1" : "0",
+    padding: "0rem 1rem",
+    borderRadius: "4px",
+    boxShadow: "0px 4px 4px rgba(41, 42, 51, 0.15), 0px 1px 7px rgba(41, 42, 51, 0.2), 0px 7px 12px rgba(41, 42, 51, 0.15)",
+    extraStyles: "\n      display: ".concat(toastOpen ? "block" : "none", ";\n      position: fixed; bottom: 4rem; left: 4rem;\n      ").concat(extraStyles, ";\n      cursor: pointer;\n    ")
+  }, /*#__PURE__*/React__default.createElement(Cluster, {
+    align: "center",
+    childGap: childGap
+  }, variant === "success" && /*#__PURE__*/React__default.createElement(SuccessfulIconMedium, null), variant === "error" && /*#__PURE__*/React__default.createElement(ErroredIcon, null), /*#__PURE__*/React__default.createElement(Box, {
+    padding: "1rem 0",
+    maxWidth: maxWidth
+  }, /*#__PURE__*/React__default.createElement(Paragraph$1, {
+    weight: FONT_WEIGHT_SEMIBOLD,
+    extraStyles: "word-break: break-word;"
+  }, message)), /*#__PURE__*/React__default.createElement(IconQuitLarge, null)));
+};
+
 var fontWeight$9 = "600";
 var fontColor$1 = WHITE;
 var textAlign$1 = "left";
@@ -50855,6 +50950,7 @@ exports.Text = Text$1;
 exports.Timeout = Timeout$1;
 exports.TimeoutImage = TimeoutImage;
 exports.Title = Title$1;
+exports.ToastNotification = ToastNotification;
 exports.ToggleSwitch = ToggleSwitch$1;
 exports.TrashIcon = TrashIcon$1;
 exports.TypeaheadInput = TypeaheadInput;