@thecb/components 7.8.3 → 7.9.0-beta.1

package/package.json

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

package/src/components/atoms/line-item/LineItem.js

@@ -4,7 +4,13 @@ import Paragraph from "../paragraph";
 import { themeComponent } from "../../../util/themeUtils";
 import { fallbackValues } from "./LineItem.theme";
 
-const LineItem = ({ description, subDescription, amount, themeValues }) => (
+const LineItem = ({
+  description,
+  subDescription,
+  amount,
+  themeValues,
+  quantity = null
+}) => (
   <Cluster nowrap justify="space-between" align="start">
     <Stack childGap="0px">
       <Paragraph
@@ -17,6 +23,14 @@ const LineItem = ({ description, subDescription, amount, themeValues }) => (
         {subDescription}
       </Paragraph>
     </Stack>
+    {!!quantity && (
+      <Paragraph
+        variant={themeValues.paragraphVariant}
+        weight={themeValues.weightTitle}
+      >
+        {`x${quantity}`}
+      </Paragraph>
+    )}
     <Paragraph
       variant={themeValues.paragraphVariant}
       weight="600"

package/src/components/atoms/line-item/LineItem.stories.js

@@ -17,3 +17,12 @@ export const lineItem = () => (
     amount={text("amount", "$4.00", "props")}
   />
 );
+
+export const lineItemWithQuantity = () => (
+  <LineItem
+    description={text("description", "Foo", "props")}
+    subDescription={text("subDescription", "Bar", "props")}
+    amount={text("amount", "$4.00", "props")}
+    quantity={2}
+  />
+);

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

@@ -14,6 +14,9 @@ import {
 } from "../../atoms/form-layouts";
 import AccountAndRoutingModal from "../account-and-routing-modal";
 import { noop } from "../../../util/general";
+import { Cluster, Cover } from "../../atoms/layouts";
+import TermsAndConditionsModal from "../terms-and-conditions-modal/TermsAndConditionsModal";
+import Text from "../../atoms/text";
 
 const PaymentFormACH = ({
   variant = "default",
@@ -28,13 +31,18 @@ const PaymentFormACH = ({
   handleSubmit = noop,
   showWalletCheckbox,
   saveToWallet,
-  walletCheckboxMarked
+  walletCheckboxMarked,
+  termsContent,
+  termsTitle = "Terms & Conditions"
 }) => {
   if (clearOnDismount) {
     useEffect(() => () => actions.form.clear(), []);
   }
   const [showRouting, toggleShowRouting] = useState(false);
   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"
@@ -153,13 +161,32 @@ const PaymentFormACH = ({
             hidden={hideDefaultPayment}
           />
         )}
-        {showWalletCheckbox && (
-          <Checkbox
-            name="bank checkbox"
-            title="Save checking account to wallet"
-            checked={walletCheckboxMarked}
-            onChange={saveToWallet}
-          />
+        {(showWalletCheckbox || showTerms) && (
+          <Cluster childGap={"4px"}>
+            {showWalletCheckbox && (
+              <Checkbox
+                name="bank checkbox"
+                title="Save checking account to wallet."
+                checked={walletCheckboxMarked}
+                onChange={saveToWallet}
+              />
+            )}
+            {showTerms && (
+              <Cover singleChild>
+                <Cluster childGap={0}>
+                  <Text variant={showTermsLinkVariant}>View&nbsp;</Text>
+                  <TermsAndConditionsModal
+                    link={termsTitle}
+                    linkVariant={showTermsLinkVariant}
+                    terms={termsContent}
+                    title={termsTitle}
+                    isOpen={termsModalOpen}
+                    toggleOpen={setTermsModalOpen}
+                  />
+                </Cluster>
+              </Cover>
+            )}
+          </Cluster>
         )}
       </FormInputColumn>
     </FormContainer>

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

@@ -1,4 +1,4 @@
-import React, { useEffect, useContext } from "react";
+import React, { useEffect, useContext, useState } from "react";
 import { ThemeContext } from "styled-components";
 import {
   required,
@@ -26,8 +26,10 @@ import {
   FormContainer,
   FormInputRow
 } from "../../atoms/form-layouts";
-import { Box } from "../../atoms/layouts";
+import { Box, Cluster, Cover } from "../../atoms/layouts";
 import withWindowSize from "../../withWindowSize";
+import TermsAndConditionsModal from "../terms-and-conditions-modal/TermsAndConditionsModal";
+import Text from "../../atoms/text";
 
 const PaymentFormCard = ({
   variant = "default",
@@ -40,9 +42,15 @@ const PaymentFormCard = ({
   showWalletCheckbox,
   saveToWallet,
   walletCheckboxMarked,
-  deniedCards
+  deniedCards,
+  termsContent,
+  termsTitle = "Terms & Conditions"
 }) => {
   const { isMobile } = useContext(ThemeContext);
+  const [termsModalOpen, setTermsModalOpen] = useState(false);
+  const showTerms = !!termsContent;
+  const showTermsLinkVariant = showWalletCheckbox ? "p" : "pS";
+
   useEffect(() => {
     if (deniedCards) {
       deniedCards.map(card =>
@@ -177,13 +185,32 @@ const PaymentFormCard = ({
             />
           </Box>
         )}
-        {showWalletCheckbox && (
-          <Checkbox
-            name="credit card checkbox"
-            title="Save credit card to wallet"
-            checked={walletCheckboxMarked}
-            onChange={saveToWallet}
-          />
+        {(showWalletCheckbox || showTerms) && (
+          <Cluster childGap={"4px"}>
+            {showWalletCheckbox && (
+              <Checkbox
+                name="credit card checkbox"
+                title="Save credit card to wallet."
+                checked={walletCheckboxMarked}
+                onChange={saveToWallet}
+              />
+            )}
+            {showTerms && (
+              <Cover singleChild>
+                <Cluster childGap={0}>
+                  <Text variant={showTermsLinkVariant}>View&nbsp;</Text>
+                  <TermsAndConditionsModal
+                    link={termsTitle}
+                    linkVariant={showTermsLinkVariant}
+                    terms={termsContent}
+                    title={termsTitle}
+                    isOpen={termsModalOpen}
+                    toggleOpen={setTermsModalOpen}
+                  />
+                </Cluster>
+              </Cover>
+            )}
+          </Cluster>
         )}
       </FormInputColumn>
     </FormContainer>

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

@@ -9,7 +9,8 @@ const TermsAndConditions = ({
   isChecked,
   html,
   terms,
-  error = false
+  error = false,
+  linkVariant
 }) => {
   const [showTerms, toggleShowTerms] = useState(false);
   return (
@@ -31,6 +32,7 @@ const TermsAndConditions = ({
                 terms={terms}
                 isOpen={showTerms}
                 toggleOpen={toggleShowTerms}
+                linkVariant={linkVariant}
               />
             )}
           </Stack>

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

@@ -14,6 +14,7 @@ const TermsAndConditionsModal = ({
   acceptText,
   terms,
   variant,
+  linkVariant = "p",
   themeValues
 }) => (
   <Modal
@@ -42,14 +43,14 @@ const TermsAndConditionsModal = ({
     }}
   >
     <Text
-      variant={variant === "default" ? "pS" : "pXS"}
+      variant={linkVariant}
       onClick={() => toggleOpen(true)}
       onKeyPress={e => e.key === "Enter" && toggleOpen(true)}
       tabIndex="0"
       color={themeValues.linkColor}
       weight={themeValues.fontWeight}
       hoverStyles={themeValues.modalLinkHoverFocus}
-      extraStyles={`display: inline-block; width: fit-content;`}
+      extraStyles={`display: inline-block; width: fit-content; cursor: pointer`}
     >
       {link}
     </Text>

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)}
   />
 );