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

package/package.json

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

package/src/components/molecules/index.d.ts

@@ -4,3 +4,4 @@ export * from "./editable-table";
 export * from "./footer-with-subfooter";
 export * from "./popover";
 export * from "./radio-group";
+export * from "./toast-notification";

package/src/components/molecules/index.js

@@ -37,5 +37,6 @@ export { default as TabSidebar } from "./tab-sidebar";
 export { default as TermsAndConditions } from "./terms-and-conditions";
 export { default as TermsAndConditionsModal } from "./terms-and-conditions-modal";
 export { default as Timeout } from "./timeout";
+export { default as ToastNotification } from "./toast-notification";
 export { default as WelcomeModule } from "./welcome-module";
 export { default as WorkflowTile } from "./workflow-tile";

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

@@ -1,46 +1,33 @@
 import React from "react";
-
-// import CloseIcon from "../CloseIcon";
-// import ErrorIcon from "../ErrorMessage/ErrorIcon";
-// import SuccessIcon from "../SuccessMessage/SuccessIcon";
-// import { SEMI_BOLD } from "@/constants/fonts";
-// import { CloseIconWrapper } from "./ToastNotification.styled";
 import { Box, Cluster } from "../../atoms/layouts";
 import { Paragraph } from "../../atoms";
 import {
   SuccessfulIconMedium,
   ErroredIcon,
-  IconQuitLarge,
-  SuccessfulIconSmall,
+  IconQuitLarge
 } from "../../atoms/icons";
-import { ERROR_COLOR, HINT_GREEN } from "../../../constants/colors";
+import {
+  ERROR_BACKGROUND_COLOR,
+  HINT_GREEN,
+  WHITE
+} from "../../../constants/colors";
 import { FONT_WEIGHT_SEMIBOLD } from "../../../constants/style_constants";
-import styled from "styled-components";
-
-export const CloseIconWrapper = styled.div`
-  min-height: 24px;
-  min-width: 24px;
-  display: flex;
-  margin: 16px;
-  justify-content: center;
-  align-items: center;
-  cursor: pointer;
-`;
 
 const VARIANTS = {
   SUCCESS: "success",
-  ERROR: "error",
+  ERROR: "error"
 };
 
 const ToastNotification = ({
+  variant = VARIANTS.SUCCESS,
   message = "",
+  toastOpen,
+  closeToastNotification,
   extraStyles,
   minWidth = "112px",
   maxWidth = "350px",
   height = "56px",
-  closeToastNotification,
-  toastOpen,
-  variant = VARIANTS.SUCCESS,
+  childGap = "1rem",
   backgroundColor
 }) => (
   <Box
@@ -51,14 +38,14 @@ const ToastNotification = ({
         : variant === VARIANTS.SUCCESS
         ? HINT_GREEN
         : variant === "error"
-        ? ERROR_COLOR
+        ? ERROR_BACKGROUND_COLOR
         : WHITE
     }
     minWidth={minWidth}
     minHeight={height && parseInt(height) < 100 ? height : "100px"}
     height={height ? height : "auto"}
     tabIndex={toastOpen ? "-1" : "0"}
-    padding="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),
@@ -67,10 +54,11 @@ const ToastNotification = ({
       display: ${toastOpen ? "block" : "none"};
       position: fixed; bottom: 4rem; left: 4rem;
       ${extraStyles};
+      cursor: pointer;
     `}
   >
-    <Cluster align="center" childGap="0">
-      {variant === "success" && <SuccessfulIconSmall />}
+    <Cluster align="center" childGap={childGap}>
+      {variant === "success" && <SuccessfulIconMedium />}
       {variant === "error" && <ErroredIcon />}
       <Box padding="1rem 0" maxWidth={maxWidth}>
         <Paragraph
@@ -80,9 +68,7 @@ const ToastNotification = ({
           {message}
         </Paragraph>
       </Box>
-      <CloseIconWrapper>
-        <IconQuitLarge />
-      </CloseIconWrapper>
+      <IconQuitLarge />
     </Cluster>
   </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

@@ -1 +1,18 @@
-// TODO - add types
+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>>;

package/src/constants/colors.d.ts

@@ -97,6 +97,7 @@ export const COSMOS_RED: Color;
 export const BLUSH_RED: Color;
 
 export const ERROR_COLOR: Color;
+export const ERROR_BACKGROUND_COLOR: Color;
 
 export const ALERT_COLORS: {
   warn: ColorSet;

package/src/constants/colors.js

@@ -90,6 +90,7 @@ const BLUSH_RED = "#FFF0F5";
 
 // Second level color constants
 const ERROR_COLOR = RAZZMATAZZ_RED;
+const ERROR_BACKGROUND_COLOR = "#FFF4F8";
 
 // These colors are sequestered so that the alert component can reference them // by type of alert
 const ALERT_COLORS = {
@@ -221,5 +222,6 @@ export {
   RASPBERRY,
   ALERT_COLORS,
   PILL_COLORS,
-  ERROR_COLOR
+  ERROR_COLOR,
+  ERROR_BACKGROUND_COLOR
 };

package/src/index.d.ts

@@ -1,4 +1,5 @@
 import * as constants from "./constants";
+import * as hooks from "./util/hooks";
 export * from "./components";
 export * from "./types/common";
-export { constants };
+export { constants, hooks };

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/hooks/index.js

@@ -0,0 +1 @@
+export { default as useToastNotification } from "./use-toast-notification";

package/src/util/hooks/use-toast-notification/index.d.ts

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

package/src/util/hooks/use-toast-notification/index.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;

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 "./hooks/use-toast-notification";
 
-export { formats, general, theme, useFocusInvalidInput, useOutsideClick };
+export {
+  formats,
+  general,
+  theme,
+  useFocusInvalidInput,
+  useOutsideClick,
+  useToastNotification
+};