@thecb/components 5.9.0-beta.2 → 5.9.0-beta.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "5.9.0-beta.2",
+  "version": "5.9.0-beta.5",
   "description": "Common lib for CityBase react components",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",

package/src/components/atoms/add-obligation/AddObligation.js

@@ -12,7 +12,8 @@ const AddObligation = ({
   action,
   themeValues,
   extraStyles,
-  textExtraStyles
+  textExtraStyles,
+  dataQa
 }) => {
   const hoverStyles = `
   &:hover {
@@ -48,6 +49,7 @@ const AddObligation = ({
       extraStyles={defaultStyles}
       onClick={action}
       tabIndex="0"
+      dataQa={dataQa}
     >
       <Cover singleChild minHeight="100%">
         <Cluster justify="center" align="center" minHeight="100%">

package/src/components/atoms/amount-callout/AmountCallout.theme.js

@@ -1,4 +1,4 @@
-const color = "#15749D";
+const color = "#292A33";
 
 export const fallbackValues = {
   color

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

@@ -64,6 +64,7 @@ const ButtonWithAction = ({
   action = noop,
   variant = "primary",
   text,
+  textWrap = false,
   isLoading = false,
   dataQa = null,
   textExtraStyles,
@@ -143,6 +144,7 @@ const ButtonWithAction = ({
               weight={themeValues.fontWeight}
               variant={themeValues.fontSizeVariant}
               color={themeValues.color}
+              textWrap={textWrap}
               extraStyles={textExtraStyles}
             >
               {text}

package/src/components/atoms/layouts/Cluster.js

@@ -40,7 +40,7 @@ const Cluster = ({
       childGap={childGap}
       minHeight={minHeight}
       minWidth={minWidth}
-      nowrap={nowrap}
+      $nowrap={nowrap}
     >
       {safeChildren(children, <Fragment />)}
     </ClusterInnerWrapper>

package/src/components/atoms/layouts/Cluster.styled.js

@@ -16,7 +16,7 @@ export const ClusterWrapper = styled(({ overflow, ...props }) => (
 export const ClusterInnerWrapper = styled.div`
   box-sizing: border-box;
   display: flex;
-  flex-wrap: ${({ nowrap }) => (nowrap ? "nowrap" : "wrap")};
+  flex-wrap: ${({ $nowrap }) => ($nowrap ? "nowrap" : "wrap")};
   justify-content: ${({ justify }) => justify};
   align-items: ${({ align }) => align};
   margin: calc(${({ childGap }) => childGap} / 2 * -1);

package/src/components/atoms/text/Text.js

@@ -10,6 +10,7 @@ const Text = ({
   themeValues,
   weight = FONT_WEIGHT_REGULAR,
   color = FIREFLY_GREY,
+  textWrap = true,
   extraStyles = ``,
   hoverStyles,
   onClick,
@@ -30,6 +31,7 @@ const Text = ({
     onClick={onClick}
     onKeyPress={onKeyPress}
     data-qa={dataQa}
+    $textWrap={textWrap}
     {...rest}
   >
     {safeChildren(children, <span />)}

package/src/components/atoms/text/Text.styled.js

@@ -8,6 +8,7 @@ export const TextSpan = styled.span`
   font-weight: ${({ weight }) => weight};
   font-family: ${({ fontFamily }) => fontFamily};
   color: ${({ color }) => color};
+  white-space: ${({ $textWrap }) => ($textWrap ? "initial" : "nowrap")};
 
   &:hover {
     ${({ hoverStyles }) =>

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

@@ -20,7 +20,6 @@ const InactiveControlsModule = ({
   configType,
   actions
 }) => {
-  console.log("actions are", actions);
   const [modalOpen, toggleModal] = useState(false);
   const { deleteObligationAssoc } = actions;
   const handleRemoveAccount = () => deleteObligationAssoc(obligationAssocID);

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

@@ -108,7 +108,7 @@ const PaymentDetailsActions = ({
                 variant="tertiary"
                 text={`Set Up ${planType}`}
                 action={() => {
-                  setDetailedObligation(obligations, config);
+                  setDetailedObligation(obligations, config, obligationAssocID);
                   handleAutopayAction();
                 }}
                 dataQa="Set Up Autopay"