@thecb/components 10.1.3-beta.3 → 10.2.0

package/package.json

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

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

@@ -18,12 +18,15 @@ 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", undefined, "props")}
+    action={text("action", buttonHandler, "props")}
+    disabled={boolean("disabled", false, "props")}
   />
 );
 

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

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

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

@@ -107,6 +107,21 @@ 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/modules/AutopayModalModule.js

@@ -43,7 +43,7 @@ const AutopayModal = ({
   };
   const plan = isPaymentPlan ? "your payment plan" : "autopay";
   const shortPlan = isPaymentPlan ? "Payment Plan" : "Autopay";
-  const deactivateText = `stop ${shortPlan.toLowerCase()} for ${description}: ${subDescription}`;
+  const deactivateText = `deactivate ${shortPlan} for ${description}: ${subDescription}`;
   const activateText = `Set Up ${shortPlan} for ${description}: ${subDescription}`;
   const nextDate = dueDate || nextAutopayDate;
   const modalExtraProps = {
@@ -51,13 +51,13 @@ const AutopayModal = ({
       ? titleCaseString(deactivateText)
       : titleCaseString(activateText),
     modalBodyText: autoPayActive
-      ? `Are you sure you want to stop ${plan}? ${
-          !inactive && nextDate && nextDate !== "On"
-            ? "Your next payment will be due on " + nextDate + "."
+      ? `Are you sure you want to deactivate ${plan}? ${
+          !inactive && nextDate
+            ? `Your next payment will be due on ${nextDate}.`
             : ""
         }`
       : generateMethodNeededText(plan, allowedPaymentInstruments),
-    continueButtonText: autoPayActive ? `Stop ${shortPlan}` : "Add",
+    continueButtonText: autoPayActive ? `Disable ${shortPlan}` : "Add",
     useDangerButton: autoPayActive,
     continueAction: autoPayActive
       ? () => {