@thecb/components 9.2.0-beta.2 → 9.2.0-beta.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "9.2.0-beta.2",
+  "version": "9.2.0-beta.3",
   "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

@@ -1,35 +1,17 @@
 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 } 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 = ({
@@ -38,6 +20,7 @@ const ToastNotification = ({
   minWidth = "112px",
   maxWidth = "350px",
   height = "56px",
+  childGap = "1rem",
   closeToastNotification,
   toastOpen,
   variant = VARIANTS.SUCCESS,
@@ -51,14 +34,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),
@@ -69,8 +52,8 @@ const ToastNotification = ({
       ${extraStyles};
     `}
   >
-    <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 +63,7 @@ const ToastNotification = ({
           {message}
         </Paragraph>
       </Box>
-      <CloseIconWrapper>
-        <IconQuitLarge />
-      </CloseIconWrapper>
+      <IconQuitLarge />
     </Cluster>
   </Box>
 );

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
 };