@thecb/components 10.2.0 → 10.4.0-beta.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "10.2.0",
+  "version": "10.4.0-beta.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

@@ -68,7 +68,6 @@ const ButtonWithAction = forwardRef(
       text,
       textWrap = false,
       isLoading = false,
-      disabled = false,
       loadingColor = "white",
       dataQa = null,
       textExtraStyles,
@@ -115,8 +114,8 @@ const ButtonWithAction = forwardRef(
     color: #FFFFFF;
     cursor: default;
     &:focus {
-      outline: 3px solid #6D717E;
-      outline-offset: 2px;
+      box-shadow: 0 0 10px #6D717E;
+      outline: none;
     }
     ${extraDisabledStyles}
   `;
@@ -130,12 +129,11 @@ const ButtonWithAction = forwardRef(
         minWidth={themeValues.minWidth}
         background={themeValues.backgroundColor}
         border={themeValues.border}
-        hoverStyles={disabled ? disabledStyles : hoverStyles}
-        activeStyles={disabled ? disabledStyles : activeStyles}
+        hoverStyles={hoverStyles}
+        activeStyles={activeStyles}
         disabledStyles={disabledStyles}
-        aria-disabled={disabled}
         as="button"
-        onClick={isLoading || disabled ? undefined : action}
+        onClick={isLoading ? undefined : action}
         borderRadius="2px"
         theme={themeContext}
         extraStyles={`margin: 0.5rem; ${extraStyles}`}

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

@@ -18,15 +18,12 @@ const variants = {
 const defaultValue = "primary";
 const groupId = "props";
 
-const buttonHandler = () => console.log("Button selected");
-
 export const buttonWithAction = () => (
   <ButtonWithAction
     variant={select(variantsLabel, variants, defaultValue, groupId)}
     text={text("text", "button", "props")}
     isLoading={boolean("isLoading", false, "props")}
-    action={text("action", buttonHandler, "props")}
-    disabled={boolean("disabled", false, "props")}
+    action={text("action", undefined, "props")}
   />
 );
 

package/src/components/atoms/button-with-link/ButtonWithLink.js

@@ -57,11 +57,7 @@ const ButtonWithLink = ({
         text-decoration: none; }`}
       dataQa={dataQa}
     >
-      <ButtonWithAction
-        {...otherProps}
-        disabled={disabled}
-        extraStyles={extraStyles}
-      />
+      <ButtonWithAction {...otherProps} extraStyles={extraStyles} />
     </ButtonWithLinkWrapper>
   );
 };

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

@@ -107,21 +107,6 @@ export const BoxWrapper = styled(
           : ``}
       `}
   }
-  
-  &[aria-disabled="true"] {
-    ${({ disabledStyles, as }) =>
-      css`
-        ${disabledStyles}
-        ${as === "button"
-          ? `        > * > span {
-          ${disabledStyles}
-          border: none;
-          outline: none;
-          box-shadow: none;
-        }`
-          : ``}
-      `}
-  }
 
   & * {
     color: ${({ color }) => color};

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

@@ -36,7 +36,8 @@ const Obligation = ({
   inactive = false,
   inactiveLookupTitle = "",
   inactiveLookupInput = "Account",
-  inactiveLookupValue = ""
+  inactiveLookupValue = "",
+  isInCustomerManagement = false
 }) => {
   /*
     The value of obligations is always an array. It can contain:
@@ -137,6 +138,7 @@ const Obligation = ({
               description={description}
               subDescription={subDescription}
               allowedPaymentInstruments={allowedPaymentInstruments}
+              isInCustomerManagement={isInCustomerManagement}
             />
           )}
         </Stack>
@@ -160,6 +162,7 @@ const Obligation = ({
           description={description}
           subDescription={subDescription}
           allowedPaymentInstruments={allowedPaymentInstruments}
+          isInCustomerManagement={isInCustomerManagement}
         />
       )}
     </Box>

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

@@ -23,7 +23,8 @@ const PaymentDetailsActions = ({
   dueDate,
   description,
   subDescription,
-  allowedPaymentInstruments
+  allowedPaymentInstruments,
+  isInCustomerManagement = false
 }) => {
   const planType = isPaymentPlan ? "Payment Plan" : "Autopay";
   const [isLoading, setIsLoading] = useState(false);
@@ -109,7 +110,7 @@ const PaymentDetailsActions = ({
             padding={isMobile ? "0 8px 0 0" : "0"}
             extraStyles={isMobile && `flex-grow: 1;`}
           >
-            {autoPayAvailable && !autoPayEnabled ? (
+            {autoPayAvailable && !autoPayEnabled && !isInCustomerManagement ? (
               <ButtonWithAction
                 variant="tertiary"
                 text={`Set Up ${planType}`}
@@ -140,7 +141,7 @@ const PaymentDetailsActions = ({
               />
             )}
           </Box>
-          {!isMobile && (
+          {!isMobile && !isInCustomerManagement && (
             <Box padding={"0"}>
               <ButtonWithAction
                 isLoading={isLoading}
@@ -152,7 +153,7 @@ const PaymentDetailsActions = ({
             </Box>
           )}
         </Cluster>
-        {isMobile && (
+        {isMobile && !isInCustomerManagement && (
           <Box padding="8px 0 0" width="100%">
             <ButtonWithAction
               isLoading={isLoading}