@thecb/components 10.7.0-beta.2 → 10.7.0

package/package.json

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

package/src/components/atoms/button-with-action/ButtonWithAction.js

@@ -89,8 +89,6 @@ const ButtonWithAction = forwardRef(
       variant
     );
     const { isMobile } = themeContext;
-    console.log("button text / theme context is", text, themeContext);
-    console.log("button text / theme values are", text, themeValues);
 
     const hoverStyles = `
       outline: none;

package/src/components/molecules/reset-confirmation-form/ResetConfirmationForm.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 "./ResetConfirmationForm.theme";
+import { createThemeValues } from "../../../util/themeUtils";
 
 const ResetConfirmationForm = () => {
-  const { isMobile } = useContext(ThemeContext);
+  const themeContext = useContext(ThemeContext);
+  const themeValues = createThemeValues(
+    themeContext,
+    fallbackValues,
+    "ResetConfirmationForm"
+  );
+  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-confirmation-form/ResetConfirmationForm.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/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 ResetPasswordSuccess = () => {
+  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>
@@ -53,4 +65,4 @@ const ResetConfirmationForm = () => {
     </Box>
   );
 };
-export default withWindowSize(ResetConfirmationForm);
+export default withWindowSize(ResetPasswordSuccess);

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