@thecb/components 7.8.3-beta.1 → 7.8.3-beta.2

package/package.json

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

@@ -42,6 +42,7 @@ const PaymentFormACH = ({
   const [showAccount, toggleShowAccount] = useState(false);
   const [termsModalOpen, setTermsModalOpen] = useState(false);
   const showTerms = !!termsContent;
+  const showTermsLinkVariant = showWalletCheckbox ? "p" : "pS";
 
   const nameErrors = {
     [required.error]: "Name is required"
@@ -173,9 +174,10 @@ const PaymentFormACH = ({
             {showTerms && (
               <Cover singleChild>
                 <Cluster childGap={0}>
-                  <Text>View&nbsp;</Text>
+                  <Text variant={showTermsLinkVariant}>View&nbsp;</Text>
                   <TermsAndConditionsModal
                     link={termsTitle}
+                    linkVariant={showTermsLinkVariant}
                     terms={termsContent}
                     title={termsTitle}
                     isOpen={termsModalOpen}

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

@@ -49,6 +49,7 @@ const PaymentFormCard = ({
   const { isMobile } = useContext(ThemeContext);
   const [termsModalOpen, setTermsModalOpen] = useState(false);
   const showTerms = !!termsContent;
+  const showTermsLinkVariant = showWalletCheckbox ? "p" : "pS";
 
   useEffect(() => {
     if (deniedCards) {
@@ -197,9 +198,10 @@ const PaymentFormCard = ({
             {showTerms && (
               <Cover singleChild>
                 <Cluster childGap={0}>
-                  <Text>View&nbsp;</Text>
+                  <Text variant={showTermsLinkVariant}>View&nbsp;</Text>
                   <TermsAndConditionsModal
                     link={termsTitle}
+                    linkVariant={showTermsLinkVariant}
                     terms={termsContent}
                     title={termsTitle}
                     isOpen={termsModalOpen}

package/src/components/molecules/payment-form-card/index.d.ts

@@ -0,0 +1,21 @@
+import React from "react";
+import Expand from "../../../util/expand";
+
+export interface PaymentFormCardProps {
+  variant?: string;
+  hideZipCode?: boolean;
+  clearOnDismount?: boolean;
+  fields,
+  actions,
+  showErrors,
+  handleSubmit = noop,
+  showWalletCheckbox,
+  saveToWallet,
+  walletCheckboxMarked,
+  deniedCards,
+  termsContent,
+  termsTitle = "Terms & Conditions"
+}
+
+export const Paragraph: React.FC<Expand<PaymentFormCardProps> &
+  React.HTMLAttributes<HTMLElement>>;

package/src/components/molecules/terms-and-conditions-modal/TermsAndConditionsModal.stories.js

@@ -11,6 +11,15 @@ const variants = {
 };
 const groupId = "props";
 
+const linkVariants = {
+  p: "p",
+  pL: "pL",
+  pS: "pS",
+  pXS: "pXS",
+  pXXS: "pXXs",
+  pXL: "PXL"
+};
+
 export const termsAndConditionsModal = () => (
   <TermsAndConditionsModal
     link={text("text", "Show modal", groupId)}
@@ -21,6 +30,7 @@ export const termsAndConditionsModal = () => (
     acceptText={text("acceptText", "Accept", groupId)}
     terms={text("terms", "terms and conditions", groupId)}
     variant={select("variants", variants, "default", groupId)}
+    linkVariant={select("linkVariants", linkVariants, groupId)}
   />
 );