@thecb/components 10.6.7-beta.1 → 10.6.9-beta.0

package/src/components/molecules/reset-password-success/ResetPasswordSuccess.js

@@ -3,14 +3,22 @@ import { ThemeContext } from "styled-components";
 import Heading from "../../atoms/heading";
 import Paragraph from "../../atoms/paragraph";
 import { Box, Cluster } from "../../atoms/layouts";
-import { GRECIAN_GREY, CHARADE_GREY, WHITE } from "../../../constants/colors";
+import { CHARADE_GREY, WHITE } from "../../../constants/colors";
 import ButtonWithLink from "../../atoms/button-with-link";
 import { ForgotPasswordIcon } from "../../atoms/icons";
 import withWindowSize from "../../withWindowSize";
 import { FormContainer, FormInputColumn } from "../../atoms/form-layouts";
+import { fallbackValues } from "./ResetPasswordSuccess.theme";
+import { createThemeValues } from "../../../util/themeUtils";
 
 const ResetConfirmationForm = () => {
-  const { isMobile } = useContext(ThemeContext);
+  const themeContext = useContext(ThemeContext);
+  const themeValues = createThemeValues(
+    themeContext,
+    fallbackValues,
+    "ResetPasswordSuccess"
+  );
+  const { isMobile } = themeContext;
 
   return (
     <Box
@@ -20,7 +28,11 @@ const ResetConfirmationForm = () => {
       background={WHITE}
       boxShadow="0px 2px 14px 0px rgb(246, 246, 249), 0px 3px 8px 0px rgb(202, 206, 216)"
     >
-      <Box background={GRECIAN_GREY} minWidth="100%" padding="0.5rem">
+      <Box
+        background={themeValues.bannerBackgroundColor}
+        minWidth="100%"
+        padding="0.5rem"
+      >
         <Cluster justify="center" align="center">
           <ForgotPasswordIcon />
         </Cluster>

package/src/components/molecules/reset-password-success/ResetPasswordSuccess.theme.js

@@ -0,0 +1,9 @@
+import { colors } from "../../../constants";
+
+const { GRECIAN_GREY } = colors;
+
+const bannerBackgroundColor = GRECIAN_GREY;
+
+export const fallbackValues = {
+  bannerBackgroundColor
+};

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

@@ -30,13 +30,10 @@ const ToastNotification = ({
   height = "56px",
   childGap = "1rem",
   backgroundColor,
-  role = "alert",
-  ariaLive = "polite",
-  ...rest
+  role = "alert"
 }) => (
   <Box
     onClick={closeToastNotification}
-    onKeyDown={e => e.key === "Enter" && closeToastNotification()}
     background={
       backgroundColor
         ? backgroundColor
@@ -60,8 +57,6 @@ const ToastNotification = ({
       cursor: pointer;
     `}
     role={role}
-    aria-live={ariaLive}
-    {...rest}
   >
     <Cluster align="center" childGap={childGap} justify="space-between">
       <Cluster align="center" childGap={childGap}>