@thecb/components 12.1.0-beta.0 → 12.1.0-beta.2

package/package.json

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

package/src/components/molecules/payment-form-ach/PaymentFormACH.js

@@ -173,7 +173,7 @@ const PaymentFormACH = ({
           />
         )}
         {(showWalletCheckbox || showTerms) && (
-          <Cluster childGap={"4px"} align="center">
+          <Cluster childGap={"4px"} align="center" overflow>
             {showWalletCheckbox && (
               <Checkbox
                 name="bank checkbox"
@@ -191,6 +191,7 @@ const PaymentFormACH = ({
                   description="View"
                   terms={termsContent}
                   initialFocusSelector={".modal-close-button"}
+                  textExtraStyles="vertical-align: middle; margin-left: 40px;" /* determined w 24px checkbox width + 16px margin */
                 />
               </Cover>
             )}

package/src/components/molecules/payment-form-ach/PaymentFormACH.stories.js

@@ -119,3 +119,15 @@ export const WithAccountType = {
   },
   render: args => <ConnectedForm {...args} />
 };
+
+export const WithWalletCheckboxAndTermsAndConditions = {
+  args: {
+    showWalletCheckbox: true,
+    termsContent: "View Terms and Conditions"
+  },
+  render: args => (
+    <div style={{ width: "100%", maxWidth: "560px" }}>
+      <ConnectedForm {...args} />
+    </div>
+  )
+};

package/src/components/molecules/payment-form-card/PaymentFormCard.js

@@ -197,7 +197,7 @@ const PaymentFormCard = ({
           </Box>
         )}
         {(showWalletCheckbox || showTerms) && (
-          <Cluster childGap={"4px"} align="center">
+          <Cluster childGap={"4px"} align="center" overflow>
             {showWalletCheckbox && (
               <Checkbox
                 name="credit card checkbox"
@@ -215,6 +215,7 @@ const PaymentFormCard = ({
                   description="View"
                   terms={termsContent}
                   initialFocusSelector={".modal-close-button"}
+                  textExtraStyles="vertical-align: middle; margin-left: 40px;" /* determined w 24px checkbox width + 16px margin */
                 />
               </Cover>
             )}

package/src/components/molecules/payment-form-card/PaymentFormCard.stories.js

@@ -4,7 +4,6 @@ import { createStore } from "redux";
 import PaymentFormCard from "./PaymentFormCard";
 import * as PaymentFormCardState from "./PaymentFormCard.state";
 import { noop } from "../../../util/general";
-import { fn } from "@storybook/test";
 
 const store = createStore(
   PaymentFormCardState.reducer,
@@ -118,3 +117,15 @@ export const WithDeniedCards = {
   },
   render: args => <ConnectedForm {...args} />
 };
+
+export const WithWalletCheckboxAndTermsAndConditions = {
+  args: {
+    showWalletCheckbox: true,
+    termsContent: "View Terms and Conditions"
+  },
+  render: args => (
+    <div style={{ width: "100%", maxWidth: "560px" }}>
+      <ConnectedForm {...args} />
+    </div>
+  )
+};

package/src/components/molecules/terms-and-conditions/TermsAndConditionsControlV2.js

@@ -30,7 +30,8 @@ const TermsAndConditionsControlV2 = ({
   checkboxMargin = "4px 8px 4px 4px",
   modalTitle = "Terms and Conditions",
   initialFocusSelector = "",
-  isRequired = false
+  isRequired = false,
+  textExtraStyles = ""
 }) => {
   const [showTerms, toggleShowTerms] = useState(false);
   const standardBoxShadow = generateShadows().standard.base;
@@ -70,7 +71,7 @@ const TermsAndConditionsControlV2 = ({
               justify="flex-start"
               align="center"
               nowrap
-              extraStyles={`padding-right: 2px; > div > * { margin: 4px 2px; };`}
+              extraStyles={`padding-right: 2px; > div > * { margin: 4px 2px; }; ${textExtraStyles}`}
               id={TermsAndConditionsTitleDivId}
             >
               {description && <Text color={CHARADE_GREY}>{description}</Text>}