@thecb/components 10.7.2-beta.0 → 10.7.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "10.7.2-beta.0",
+  "version": "10.7.2",
   "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/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/toast-notification/ToastNotification.js

@@ -31,7 +31,7 @@ const ToastNotification = ({
   height = "56px",
   childGap = "1rem",
   backgroundColor,
-  role = "log",
+  role = "status",
   ariaLive = "polite",
   screenReaderMessage,
   showScreenReaderMessage = true,