@thecb/components 10.7.1-beta.0 → 10.7.1-beta.1

package/package.json

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

package/src/components/atoms/wallet-name/WalletName.js

@@ -7,7 +7,6 @@ import { ThemeContext } from "styled-components";
 import Module from "../../molecules/module/Module";
 import Spinner from "../spinner/Spinner";
 import { CHARADE_GREY } from "../../../constants/colors";
-import { noop } from "../../../util/general";
 
 const WalletName = ({
   mainText, // left side text
@@ -16,7 +15,9 @@ const WalletName = ({
   actionText = null, // right side hyperlinked text
   disableAction = false,
   linkButtonExtraStyles = "", // hyperlinked text extraStyles
-  isLoading = false // shows a spinner on the left when true
+  isLoading = false, // shows a spinner on the left when true
+  dataQa = null,
+  actionTextPositionMobile = "outside" // whether action text is outside/below box or inside it
 }) => {
   const { isMobile } = useContext(ThemeContext);
 
@@ -49,7 +50,7 @@ const WalletName = ({
               mainText && <Text>{mainText}</Text>
             )}
           </Box>
-          {!isMobile && (
+          {(actionTextPositionMobile === "inside" || !isMobile) && (
             <Box padding="0">
               {text && <Text variant="pXS">{text}</Text>}
               {(text || actionText) && <>&nbsp;</>}
@@ -57,6 +58,7 @@ const WalletName = ({
                 <ButtonWithAction
                   disabled={disableAction}
                   text={actionText}
+                  dataQa={dataQa}
                   action={action}
                   variant="smallGhost"
                   extraStyles={`
@@ -71,7 +73,7 @@ const WalletName = ({
           )}
         </Cluster>
       </Module>
-      {isMobile && (
+      {!!isMobile && actionTextPositionMobile === "outside" && (
         <Cluster
           align="center"
           justify={text || actionText ? "flex-end" : "flex-start"}

package/src/components/atoms/wallet-name/WalletName.stories.js

@@ -1,6 +1,6 @@
 import React from "react";
 import WalletName from "./WalletName";
-import { text, object, boolean } from "@storybook/addon-knobs";
+import { text, object, boolean, select } from "@storybook/addon-knobs";
 import page from "../../../../.storybook/page";
 
 export const walletName = () => {
@@ -12,6 +12,31 @@ export const walletName = () => {
       text={text("text", "Not you?", "props")}
       disableAction={boolean("disableAction", false, "props")}
       isLoading={boolean("isLoading", false, "props")}
+      actionTextPositionMobile={select(
+        "actionTextPositionMobile",
+        { inside: "inside", outside: "outside" },
+        "outside",
+        "props"
+      )}
+    />
+  );
+};
+
+export const walletNameWithOverrides = () => {
+  return (
+    <WalletName
+      mainText={text("mainText", "Firstname Lastname", "props")}
+      action={object("action", () => window.alert("action fired!"), "props")}
+      actionText={text("actionText", "Check out as a guest", "props")}
+      text={text("text", "Not you?", "props")}
+      disableAction={boolean("disableAction", false, "props")}
+      isLoading={boolean("isLoading", false, "props")}
+      actionTextPositionMobile={select(
+        "actionTextPositionMobile",
+        { inside: "inside", outside: "outside" },
+        "outside",
+        "props"
+      )}
     />
   );
 };

package/src/components/atoms/wallet-name/index.d.ts

@@ -9,6 +9,8 @@ export interface WalletNameProps {
   text?: string | null;
   isLoading: boolean;
   buttonExtraStyles?: string;
+  dataQa?: string | null;
+  actionTextPositionMobile?: "inside" | "outside";
 }
 
 export const WalletName: React.FC<Expand<WalletNameProps> &

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

@@ -48,10 +48,6 @@ const PaymentDetailsActions = ({
     setDetailedObligation(obligations, config, obligationAssocID);
     navigateToDetailedObligation(detailsSlug);
   };
-  const handlePayNowClick = disableActions
-    ? noop
-    : () => handleClick(obligations);
-
   return (
     <Box
       padding={isMobile ? "0" : "16px 0 0"}
@@ -153,7 +149,7 @@ const PaymentDetailsActions = ({
             <Box padding={"0"}>
               <ButtonWithAction
                 isLoading={isLoading}
-                action={handlePayNowClick}
+                action={disableActions ? noop : () => handleClick(obligations)}
                 text="Pay Now"
                 variant={isMobile ? "smallSecondary" : "secondary"}
                 dataQa="Pay Now"
@@ -166,7 +162,7 @@ const PaymentDetailsActions = ({
           <Box padding="8px 0 0" width="100%">
             <ButtonWithAction
               isLoading={isLoading}
-              action={handlePayNowClick}
+              action={disableActions ? noop : () => handleClick(obligations)}
               text="Pay Now"
               variant={isMobile ? "smallSecondary" : "secondary"}
               dataQa="Pay Now"

package/src/components/molecules/payment-button-bar/PaymentButtonBar.js

@@ -25,7 +25,9 @@ const PaymentButtonBar = ({
   hideBackButton = false,
   buttonGroupStyles,
   hideAdditionalButton = false,
-  additionalButton
+  additionalButton,
+  nextButtonTestId = null,
+  backButtonTestId = null
 }) => {
   const { isMobile } = useContext(ThemeContext);
 
@@ -36,7 +38,7 @@ const PaymentButtonBar = ({
         url={cancelURL}
         variant={backButtonVariant}
         extraStyles={isMobile && "flex-grow: 1"}
-        dataQa={cancelText}
+        dataQa={backButtonTestId || cancelText}
         aria-labelledby={`${kebabCaseString(cancelText)}-button`}
         role="link"
       />
@@ -60,7 +62,7 @@ const PaymentButtonBar = ({
       text={redirectText}
       variant={forwardButtonVariant}
       extraStyles={isMobile && "flex-grow: 1"}
-      dataQa={redirectText}
+      dataQa={nextButtonTestId || redirectText}
       disabled={isForwardButtonDisabled}
       aria-labelledby={`${kebabCaseString(redirectText)}-button`}
       role={forwardButtonAriaRole}
@@ -73,7 +75,7 @@ const PaymentButtonBar = ({
         action={forwardButtonAction}
         isLoading={forwardButtonLoading}
         extraStyles={isMobile && "flex-grow: 1"}
-        dataQa={forwardButtonText}
+        dataQa={nextButtonTestId || forwardButtonText}
         disabled={isForwardButtonDisabled}
         aria-labelledby={`${kebabCaseString(forwardButtonText)}-button`}
         role={forwardButtonAriaRole}

package/src/components/molecules/radio-section/RadioSection.js

@@ -58,6 +58,7 @@ const RadioSection = ({
   ariaDescribedBy,
   isSectionRequired = false,
   groupedSections,
+  borderOverride,
   ...rest
 }) => {
   const [focused, setFocused] = useState(null);
@@ -98,7 +99,7 @@ const RadioSection = ({
   return (
     <Box
       padding="1px"
-      border={`1px solid ${themeValues.borderColor}`}
+      border={borderOverride || `1px solid ${themeValues.borderColor}`}
       borderRadius="4px"
       extraStyles={containerStyles}
       role="radiogroup"

package/src/components/molecules/reset-confirmation-form/ResetConfirmationForm.js

@@ -3,14 +3,22 @@ import { ThemeContext } from "styled-components";
 import Heading from "../../atoms/heading";
 import Paragraph from "../../atoms/paragraph";
 import { Box, Cluster } from "../../atoms/layouts";
-import { GRECIAN_GREY, CHARADE_GREY, WHITE } from "../../../constants/colors";
+import { CHARADE_GREY, WHITE } from "../../../constants/colors";
 import ButtonWithLink from "../../atoms/button-with-link";
 import { ForgotPasswordIcon } from "../../atoms/icons";
 import withWindowSize from "../../withWindowSize";
 import { FormContainer, FormInputColumn } from "../../atoms/form-layouts";
+import { fallbackValues } from "./ResetConfirmationForm.theme";
+import { createThemeValues } from "../../../util/themeUtils";
 
 const ResetConfirmationForm = () => {
-  const { isMobile } = useContext(ThemeContext);
+  const themeContext = useContext(ThemeContext);
+  const themeValues = createThemeValues(
+    themeContext,
+    fallbackValues,
+    "ResetConfirmationForm"
+  );
+  const { isMobile } = themeContext;
 
   return (
     <Box
@@ -20,7 +28,11 @@ const ResetConfirmationForm = () => {
       background={WHITE}
       boxShadow="0px 2px 14px 0px rgb(246, 246, 249), 0px 3px 8px 0px rgb(202, 206, 216)"
     >
-      <Box background={GRECIAN_GREY} minWidth="100%" padding="0.5rem">
+      <Box
+        background={themeValues.bannerBackgroundColor}
+        minWidth="100%"
+        padding="0.5rem"
+      >
         <Cluster justify="center" align="center">
           <ForgotPasswordIcon />
         </Cluster>

package/src/components/molecules/reset-confirmation-form/ResetConfirmationForm.theme.js

@@ -0,0 +1,9 @@
+import { colors } from "../../../constants";
+
+const { GRECIAN_GREY } = colors;
+
+const bannerBackgroundColor = GRECIAN_GREY;
+
+export const fallbackValues = {
+  bannerBackgroundColor
+};

package/src/components/molecules/reset-password-success/ResetPasswordSuccess.js

@@ -3,14 +3,22 @@ import { ThemeContext } from "styled-components";
 import Heading from "../../atoms/heading";
 import Paragraph from "../../atoms/paragraph";
 import { Box, Cluster } from "../../atoms/layouts";
-import { GRECIAN_GREY, CHARADE_GREY, WHITE } from "../../../constants/colors";
+import { CHARADE_GREY, WHITE } from "../../../constants/colors";
 import ButtonWithLink from "../../atoms/button-with-link";
 import { ForgotPasswordIcon } from "../../atoms/icons";
 import withWindowSize from "../../withWindowSize";
 import { FormContainer, FormInputColumn } from "../../atoms/form-layouts";
+import { fallbackValues } from "./ResetPasswordSuccess.theme";
+import { createThemeValues } from "../../../util/themeUtils";
 
-const ResetConfirmationForm = () => {
-  const { isMobile } = useContext(ThemeContext);
+const ResetPasswordSuccess = () => {
+  const themeContext = useContext(ThemeContext);
+  const themeValues = createThemeValues(
+    themeContext,
+    fallbackValues,
+    "ResetPasswordSuccess"
+  );
+  const { isMobile } = themeContext;
 
   return (
     <Box
@@ -20,7 +28,11 @@ const ResetConfirmationForm = () => {
       background={WHITE}
       boxShadow="0px 2px 14px 0px rgb(246, 246, 249), 0px 3px 8px 0px rgb(202, 206, 216)"
     >
-      <Box background={GRECIAN_GREY} minWidth="100%" padding="0.5rem">
+      <Box
+        background={themeValues.bannerBackgroundColor}
+        minWidth="100%"
+        padding="0.5rem"
+      >
         <Cluster justify="center" align="center">
           <ForgotPasswordIcon />
         </Cluster>
@@ -53,4 +65,4 @@ const ResetConfirmationForm = () => {
     </Box>
   );
 };
-export default withWindowSize(ResetConfirmationForm);
+export default withWindowSize(ResetPasswordSuccess);

package/src/components/molecules/reset-password-success/ResetPasswordSuccess.theme.js

@@ -0,0 +1,9 @@
+import { colors } from "../../../constants";
+
+const { GRECIAN_GREY } = colors;
+
+const bannerBackgroundColor = GRECIAN_GREY;
+
+export const fallbackValues = {
+  bannerBackgroundColor
+};