@thecb/components 9.2.0-beta.11 → 9.2.0-beta.13

package/package.json

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

package/src/components/molecules/radio-section/radio-button/RadioButton.js

@@ -24,19 +24,21 @@ const RadioButton = ({
   const buttonBorder = {
     onFocused: {
       borderColor: themeValues.activeColor,
-      boxShadow: `0px 0px 4px 0px ${themeValues.activeColor}`
+      outline: `3px solid ${themeValues.activeColor}`,
+      outlineOffset: "2px"
     },
     offFocused: {
       borderColor: themeValues.activeColor,
-      boxShadow: `0px 0px 4px 0px ${themeValues.activeColor}`
+      outline: `3px solid ${themeValues.activeColor}`,
+      outlineOffset: "2px"
     },
     on: {
       borderColor: themeValues.activeColor,
-      boxShadow: "0px 0px 0px 0px #FFFFFF"
+      outline: "0"
     },
     off: {
       borderColor: themeValues.inactiveColor,
-      boxShadow: "0px 0px 0px 0px #FFFFFF"
+      outline: "0"
     }
   };
 
@@ -97,7 +99,7 @@ const RadioButton = ({
         borderWidth="1px"
         borderStyle="solid"
         borderRadius="12px"
-        margin="4px 14px 4px 4px"
+        margin="6px 14px 6px 6px"
         height="24px"
         width="24px"
         variants={buttonBorder}

package/src/components/molecules/radio-section/radio-button/RadioButton.theme.js

@@ -1,7 +1,7 @@
-import { MATISSE_BLUE, GREY_CHATEAU } from "../../../../constants/colors";
+import { MATISSE_BLUE, STORM_GREY } from "../../../../constants/colors";
 
 const activeColor = `${MATISSE_BLUE}`;
-const inactiveColor = `${GREY_CHATEAU}`;
+const inactiveColor = `${STORM_GREY}`;
 
 export const fallbackValues = {
   activeColor,

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

@@ -12,6 +12,7 @@ import {
   WHITE
 } from "../../../constants/colors";
 import { FONT_WEIGHT_SEMIBOLD } from "../../../constants/style_constants";
+import { generateShadows } from "../../../util/generateShadows";
 
 const VARIANTS = {
   SUCCESS: "success",
@@ -37,7 +38,7 @@ const ToastNotification = ({
         ? backgroundColor
         : variant === VARIANTS.SUCCESS
         ? HINT_GREEN
-        : variant === "error"
+        : variant === VARIANTS.ERROR
         ? ERROR_BACKGROUND_COLOR
         : WHITE
     }
@@ -47,9 +48,7 @@ const ToastNotification = ({
     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)"
+    boxShadow={generateShadows().standard.base}
     extraStyles={`
       display: ${toastOpen ? "block" : "none"};
       position: fixed; bottom: 4rem; left: 4rem;
@@ -58,8 +57,8 @@ const ToastNotification = ({
     `}
   >
     <Cluster align="center" childGap={childGap}>
-      {variant === "success" && <SuccessfulIconMedium />}
-      {variant === "error" && <ErroredIcon />}
+      {variant === VARIANTS.SUCCESS && <SuccessfulIconMedium />}
+      {variant === VARIANTS.ERROR && <ErroredIcon />}
       <Box padding="1rem 0" maxWidth={maxWidth}>
         <Paragraph
           weight={FONT_WEIGHT_SEMIBOLD}

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

@@ -10,7 +10,7 @@ export interface UseToastResult {
   toastMessage: string;
   showToast: ({
     message,
-    variant,
+    variant
   }: {
     message: string;
     variant: ToastVariants;

package/src/types/common/ToastVariants.ts

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