@thecb/components 9.2.0-beta.5 → 9.2.0-beta.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "9.2.0-beta.5",
+  "version": "9.2.0-beta.7",
   "description": "Common lib for CityBase react components",
   "main": "dist/index.cjs.js",
   "typings": "dist/index.d.ts",

package/src/components/molecules/toast-notification/ToastNotification.js

@@ -19,15 +19,15 @@ const VARIANTS = {
 };
 
 const ToastNotification = ({
+  variant = VARIANTS.SUCCESS,
   message = "",
+  toastOpen,
+  closeToastNotification,
   extraStyles,
   minWidth = "112px",
   maxWidth = "350px",
   height = "56px",
   childGap = "1rem",
-  closeToastNotification,
-  toastOpen,
-  variant = VARIANTS.SUCCESS,
   backgroundColor
 }) => (
   <Box

package/src/components/molecules/toast-notification/ToastNotification.stories.js

@@ -1,28 +1,59 @@
-import React, { useState } from "react";
+import React, { useEffect } from "react";
 import ToastNotification from "./ToastNotification";
 import page from "../../../../.storybook/page";
+import { useToastNotification } from "../../../util";
+import { ToastVariants } from "../../../types/common";
 
 export const toastNotificationSuccess = () => {
-  const [toastOpen, setToastOpen] = useState(true);
+  const {
+    isToastOpen,
+    toastVariant,
+    toastMessage,
+    showToast,
+    hideToast
+  } = useToastNotification();
+
+  useEffect(() => {
+    showToast({
+      message: "Success!",
+      variant: ToastVariants.SUCCESS
+    });
+  }, []);
+
   return (
     <ToastNotification
-      toastOpen={toastOpen}
-      closeToastNotification={() => setToastOpen(false)}
-      message="Successful"
-      variant="success"
+      variant={toastVariant}
+      message={toastMessage}
+      toastOpen={isToastOpen}
+      closeToastNotification={() => hideToast()}
     />
   );
 };
+
 toastNotificationSuccess.storyName = "Success Toast";
 
 export const toastNotificationError = () => {
-  const [toastOpen, setToastOpen] = useState(true);
+  const {
+    isToastOpen,
+    toastVariant,
+    toastMessage,
+    showToast,
+    hideToast,
+  } = useToastNotification();
+
+  useEffect(() => {
+    showToast({
+      message: "An error occurred",
+      variant: ToastVariants.ERROR,
+    });
+  }, []);
+
   return (
     <ToastNotification
-      toastOpen={toastOpen}
-      closeToastNotification={() => setToastOpen(false)}
-      message="Errored"
-      variant="error"
+      variant={toastVariant}
+      message={toastMessage}
+      toastOpen={isToastOpen}
+      closeToastNotification={() => hideToast()}
     />
   );
 };
@@ -30,7 +61,7 @@ toastNotificationError.storyName = "Error Toast";
 
 const story = page({
   title: "Components|Molecules/ToastNotification",
-  Component: ToastNotification
+  Component: ToastNotification,
 });
 
 export default story;

package/src/components/molecules/toast-notification/index.d.ts

@@ -2,7 +2,17 @@ import React from "react";
 import Expand from "../../../util/expand";
 
 export interface ToastNotificationProps {
+  variant?: string;
+  message: string;
+  toastOpen: boolean;
+  closeToastNotification: (event?: React.MouseEvent<HTMLElement>) => void;
+  extraStyles?: string;
+  minWidth?: string;
+  maxWidth?: string;
+  height?: string;
+  childGap?: string;
+  backgroundColor?: string;
 }
 
 export const ToastNotification: React.FC<Expand<ToastNotificationProps> &
-  React.HTMLAttributes<HTMLElement>>;
+  React.HTMLAttributes<HTMLElement>>;

package/src/types/common/ToastVariants.ts

@@ -0,0 +1,6 @@
+enum ToastVariants {
+  ERROR = "error",
+  SUCCESS = "success",
+}
+
+export default ToastVariants;

package/src/types/common/index.ts

@@ -4,4 +4,5 @@ export { default as FieldActions } from "./FieldActions";
 export { default as FormSelectOption } from "./FormSelectOption";
 export { default as SearchableSelectOption } from "./SearchableSelectOption";
 export { default as ErrorMessageDictionary } from "./ErrorMessageDictionary";
+export { default as ToastVariants } from "./ToastVariants";
 export * from "./FieldActions";

package/src/util/index.js

@@ -3,5 +3,13 @@ import * as general from "./general";
 import * as theme from "./themeUtils";
 import useFocusInvalidInput from "./focusFirstInvalidInputHook";
 import useOutsideClick from "./useOutsideClick";
+import useToastNotification from "./useToastNotification";
 
-export { formats, general, theme, useFocusInvalidInput, useOutsideClick };
+export {
+  formats,
+  general,
+  theme,
+  useFocusInvalidInput,
+  useOutsideClick,
+  useToastNotification
+};

package/src/util/useToastNotification.d.ts

@@ -0,0 +1,23 @@
+import { ToastVariants } from "../types/common";
+
+export interface UseToastProps {
+  timeout?: number;
+}
+
+export interface UseToastResult {
+  isToastOpen: boolean;
+  toastVariant: "" | ToastVariants;
+  toastMessage: string;
+  showToast: ({
+    message,
+    variant,
+  }: {
+    message: string;
+    variant: ToastVariants;
+  }) => void;
+  hideToast: () => void;
+}
+
+export function useToastNotification({
+  timeout,
+}: UseToastProps): UseToastResult;

package/src/util/useToastNotification.js

@@ -0,0 +1,38 @@
+import { useEffect, useState } from "react";
+
+const initialToastState = {
+  isOpen: false,
+  variant: "",
+  message: ""
+};
+
+const useToastNotification = ({ timeout = 5000 } = {}) => {
+  const [toastState, setToastState] = useState(initialToastState);
+
+  useEffect(() => {
+    if (toastState.isOpen) {
+      setTimeout(() => {
+        setToastState(initialToastState);
+      }, timeout);
+    }
+  }, [timeout, toastState.isOpen]);
+
+  const showToast = ({ message, variant }) =>
+    setToastState({
+      isOpen: true,
+      variant,
+      message
+    });
+
+  const hideToast = () => setToastState(initialToastState);
+
+  return {
+    isToastOpen: toastState.isOpen,
+    toastVariant: toastState.variant,
+    toastMessage: toastState.message,
+    showToast,
+    hideToast
+  };
+};
+
+export default useToastNotification;