@thecb/components 5.8.1-beta.6 → 5.8.2-beta.1

package/package.json

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

package/src/components/molecules/obligation/Obligation.js

@@ -148,13 +148,13 @@ const Obligation = ({
       as="section"
       aria-label={`${inactiveLookupTitle} ${inactiveLookupInput}: ${inactiveLookupValue}`}
     >
-      <Box background={ATHENS_GREY}>
+      <Box background={ATHENS_GREY} padding="24px">
         <Stack childGap="14px">
-          <Box key={`${obligationAssocID}-top`} padding="0 8px" minWidth="100%">
+          <Box key={`${obligationAssocID}-top`} padding="0" minWidth="100%">
             <Cluster
               justify="space-between"
               align="center"
-              childGap="4px"
+              childGap="40px"
               nowrap
             >
               <Box padding="0">

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

@@ -94,38 +94,39 @@ const AutopayModal = ({
         );
       }
       case "link": {
-        <Box
-          padding="0"
-          onClick={() => {
-            toggleModal(true);
-          }}
-          hoverStyles={hoverStyles}
-          activeStyles={activeStyles}
-          extraStyles={defaultStyles}
-        >
-          <Cluster
-            justify={isMobile ? "flex-start" : "flex-end"}
-            align="center"
+        return (
+          <Box
+            padding="0"
+            onClick={() => {
+              toggleModal(true);
+            }}
+            hoverStyles={hoverStyles}
+            activeStyles={activeStyles}
+            extraStyles={defaultStyles}
           >
-            <AutopayOnIcon />
-            <Text
-              variant="pS"
-              onClick={() => toggleModal(true)}
-              onKeyPress={e => {
-                console.log({ e });
-                e.key === "Enter" && toggleModal(true);
-              }}
-              tabIndex="0"
-              dataQa={`${planType} On`}
-              color={SEA_GREEN}
-              weight={themeValues.fontWeight}
-              hoverStyles={themeValues.modalLinkHoverFocus}
-              extraStyles={`padding-left: 0.25rem;`}
+            <Cluster
+              justify={isMobile ? "flex-start" : "flex-end"}
+              align="center"
             >
-              {`${planType} ${nextAutopayDate}`}
-            </Text>
-          </Cluster>
-        </Box>;
+              <AutopayOnIcon />
+              <Text
+                variant="pS"
+                onClick={() => toggleModal(true)}
+                onKeyPress={e => {
+                  e.key === "Enter" && toggleModal(true);
+                }}
+                tabIndex="0"
+                dataQa={`${planType} On`}
+                color={SEA_GREEN}
+                weight={themeValues.fontWeight}
+                hoverStyles={themeValues.modalLinkHoverFocus}
+                extraStyles={`padding-left: 0.25rem;`}
+              >
+                {`${planType} ${nextAutopayDate}`}
+              </Text>
+            </Cluster>
+          </Box>
+        );
       }
     }
   };