@thecb/components 8.0.3-beta.3 → 8.0.3

package/package.json

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

package/src/components/atoms/card/Card.js

@@ -34,10 +34,6 @@ const Card = ({
   width = "276px",
   children
 }) => {
-  console.log(
-    "themeValues.imageBackgroundColor",
-    themeValues.imageBackgroundColor
-  );
   const hasImage = Image || imgSrc;
   const numberOfChildren =
     (Array.isArray(children) ? children.length : 1) +
@@ -70,7 +66,11 @@ const Card = ({
           )}
           <Stack direction="row" childGap="0">
             {Image && !imgSrc && (
-              <Box minHeight={imgHeight} padding="0" background="#E4F4FD">
+              <Box
+                minHeight={imgHeight}
+                padding="0"
+                background={themeValues.imageBackgroundColor}
+              >
                 <Cover minHeight={imgHeight} singleChild>
                   <Center intrinsic>
                     <Image alt={imgAltText} />

package/src/components/atoms/radio-button-with-label/RadioButtonWithLabel.js

@@ -2,8 +2,9 @@ import React from "react";
 import { Cluster } from "../../atoms/layouts";
 import Text from "../text";
 import styled from "styled-components";
-import { colors } from "../../../constants";
 import { noop } from "../../../util/general";
+import { themeComponent } from "../../../util/themeUtils";
+import { fallbackValues } from "./RadioButtonWithLabel.theme";
 
 const HiddenRadioInput = styled.input`
   // can still select the element with the keyboard, but it's invisible and doesn't interfere with the spacing of other elements around it
@@ -18,7 +19,7 @@ const Circle = styled.div`
   margin-right: 8px;
   width: 1.5rem;
   height 1.5rem;
-  border: 1px solid ${colors.GREY_CHATEAU};
+  border: ${({ inactiveBorderColor }) => `1px solid ${inactiveBorderColor}`};
   border-radius: 50%;
   box-sizing: border-box;
   padding: 2px;
@@ -27,7 +28,7 @@ const Circle = styled.div`
     width: 100%;
     height: 100%;
     display: block;
-    background: ${colors.MATISSE_BLUE};
+    background: ${({ activeColor }) => activeColor};
     border-radius: 50%;
     transform: scale(0);  
   }  
@@ -40,10 +41,10 @@ const InputAndLabelContainer = styled(Cluster)`
     transition: transform 0.15s;
   }
   ${HiddenRadioInput}:checked + label ${Circle} {
-    border: 1px solid ${colors.MATISSE_BLUE};
+    border: ${({ activeColor }) => `1px solid ${activeColor};`}
   }
   ${HiddenRadioInput}:focus + label ${Circle} { {
-    box-shadow: 0px 0px 2px 1px ${colors.MATISSE_BLUE};
+    box-shadow: ${({ activeColor }) => `0px 0px 2px 1px ${activeColor};`}
   }
 `;
 
@@ -54,10 +55,15 @@ const RadioButtonWithLabel = ({
   groupName,
   setValue,
   ariaInvalid,
+  themeValues,
   index,
   handleChange = noop // optional, for custom event handling in ingesting app
 }) => (
-  <InputAndLabelContainer align="center" childGap="0.5rem">
+  <InputAndLabelContainer
+    align="center"
+    childGap="0.5rem"
+    activeColor={themeValues.activeColor}
+  >
     <HiddenRadioInput
       aria-invalid={ariaInvalid}
       style={{ marginTop: 0 }}
@@ -83,10 +89,17 @@ const RadioButtonWithLabel = ({
           }
         `}
     >
-      <Circle />
+      <Circle
+        activeColor={themeValues.activeColor}
+        inactiveBorderColor={themeValues.inactiveBorderColor}
+      />
       {labelText}
     </Text>
   </InputAndLabelContainer>
 );
 
-export default RadioButtonWithLabel;
+export default themeComponent(
+  RadioButtonWithLabel,
+  "RadioButtonWithLabel",
+  fallbackValues
+);

package/src/components/atoms/radio-button-with-label/RadioButtonWithLabel.theme.js

@@ -0,0 +1,8 @@
+import { GREY_CHATEAU, MATISSE_BLUE } from "../../../constants/colors";
+const activeColor = MATISSE_BLUE;
+const inactiveBorderColor = GREY_CHATEAU;
+
+export const fallbackValues = {
+  inactiveBorderColor,
+  activeColor
+};

package/src/components/molecules/obligation/modules/AutopayModalModule.js

@@ -39,7 +39,7 @@ const AutopayModal = ({
         ? "checking account payment method"
         : "payment method";
 
-    return `To setup ${planText} you must have a saved ${methodRequired} and address in your profile. Do you want to save these now?`;
+    return `To setup ${planText} you must have a saved ${methodRequired} and address. Do you want to save these now?`;
   };
   const plan = isPaymentPlan ? "your payment plan" : "autopay";
   const shortPlan = isPaymentPlan ? "Payment Plan" : "Autopay";
@@ -57,9 +57,7 @@ const AutopayModal = ({
             : ""
         }`
       : generateMethodNeededText(plan, allowedPaymentInstruments),
-    continueButtonText: autoPayActive
-      ? `Disable ${shortPlan}`
-      : "Add to Profile",
+    continueButtonText: autoPayActive ? `Disable ${shortPlan}` : "Add",
     useDangerButton: autoPayActive,
     continueAction: autoPayActive
       ? () => {

package/src/components/molecules/obligation/modules/RemoveAccountModalModule.js

@@ -35,7 +35,7 @@ const RemoveAccountModalModule = ({
       hideModal={() => setModalIsOpen(false)}
       modalOpen={modalIsOpen}
       modalHeaderText={`Remove ${accountType}`}
-      modalBodyText={`Are you sure you want to remove the ${identifier} ${accounts} from your profile? Any autopay scheduled against ${
+      modalBodyText={`Are you sure you want to remove the ${identifier} ${accounts}? Any autopay scheduled against ${
         obligations.length > 1 ? "them" : "it"
       } will be deactivated.`}
       continueButtonText="Remove"