@thecb/components 12.1.0-beta.1 → 12.1.0-beta.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "12.1.0-beta.1",
+  "version": "12.1.0-beta.3",
   "description": "Common lib for CityBase react components",
   "main": "dist/index.cjs.js",
   "typings": "dist/index.d.ts",
@@ -9,7 +9,9 @@
   "scripts": {
     "storybook": "storybook dev -p 6006",
     "build": "rollup -cm",
-    "build-storybook": "storybook build"
+    "build-storybook": "storybook build",
+    "sync": "./scripts/sync-to-project.sh",
+    "publish-beta": "./scripts/publish-beta.sh"
   },
   "repository": {
     "type": "git",

package/src/components/atoms/checkbox/Checkbox.js

@@ -122,47 +122,41 @@ const Checkbox = forwardRef(
       }
     };
 
-    const titleId = title ? `checkboxlabel-${name}` : undefined;
-    const ariaLabelledById = labelledById ?? titleId;
-    const ariaLabel = ariaLabelledById ? undefined : name;
+    const normalizedName = name ? name.replace(/\s+/g, "-") : name;
+    const checkboxId = `checkbox-${normalizedName}`;
+    const titleId = title ? `checkboxlabel-${normalizedName}` : undefined;
+    // aria-label fallback when no visible title or external labelledById is provided
+    const ariaLabel = !labelledById && !title ? name : undefined;
 
     return (
       <Box
         ref={ref}
         padding="0"
-        tabIndex="0"
-        role="checkbox"
-        aria-checked={checked}
-        aria-required={isRequired || undefined}
-        aria-invalid={error}
-        aria-label={ariaLabel}
-        aria-labelledby={ariaLabelledById}
-        aria-describedby={error ? `${name}-error-message` : undefined}
-        onFocus={() => setFocused(true)}
-        onBlur={() => setFocused(false)}
-        onKeyDown={e => handleClick(e, onChange)}
         hiddenStyles={hidden}
         background={themeValues.backgroundColor}
         extraStyles={`
-          :focus {
-            outline: 0;
-          }
           ${extraStyles}; 
           margin: ${checkboxMargin};
         `}
         {...rest}
       >
-        <CheckboxLabelContainer data-qa={dataQa}>
+        <CheckboxLabelContainer htmlFor={checkboxId} data-qa={dataQa}>
           <CheckboxContainer data-qa="Checkbox">
             <HiddenCheckbox
-              id={`checkbox-${name}`}
+              id={checkboxId}
               disabled={disabled}
               name={name}
               checked={checked}
               onChange={onChange}
-              tabIndex="-1"
+              tabIndex="0"
               required={isRequired}
-              aria-hidden="true"
+              aria-invalid={error}
+              aria-label={ariaLabel}
+              aria-labelledby={labelledById}
+              aria-describedby={error ? `${name}-error-message` : undefined}
+              onKeyDown={e => handleClick(e, onChange)}
+              onFocus={() => setFocused(true)}
+              onBlur={() => setFocused(false)}
             />
             <StyledCheckbox
               aria-hidden="true"

package/src/components/atoms/checkbox/Checkbox.stories.js

@@ -95,9 +95,15 @@ const RequiredCheckbox = props => {
         onChange={onChange}
         checked={checked}
         error={!checked}
+        extraStyles="display: inline-block;"
       />
       {!checked && (
-        <div id={`${props.name}-error-message`}>You must check this!</div>
+        <div
+          id={`${props.name}-error-message`}
+          style={{ display: "inline-block" }}
+        >
+          This box is required.
+        </div>
       )}
     </div>
   );

package/src/components/molecules/partial-amount-form/PartialAmountField.js

@@ -39,7 +39,7 @@ const PartialAmountField = ({
               variant={themeValues.detailVariant}
               weight="400"
             >
-              {lineItem.subDescription} payment amount
+              {lineItem.subDescription}
             </Detail>
           </Box>
         </Stack>
@@ -53,7 +53,6 @@ const PartialAmountField = ({
       placeholder="$0.00"
       formatter={moneyFormat}
       isNum
-      isRequired
       decorator={
         <Text variant="p">
           Amount owed:{"  "}

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

@@ -14,8 +14,10 @@ import {
 } from "../../atoms/form-layouts";
 import AccountAndRoutingModal from "../account-and-routing-modal";
 import { noop } from "../../../util/general";
-import { Cluster, Cover } from "../../atoms/layouts";
+import { Cluster } from "../../atoms/layouts";
 import TermsAndConditions from "../terms-and-conditions";
+import TermsAndConditionsModal from "../terms-and-conditions-modal";
+import { useScrollTo } from "../../../hooks";
 
 const PaymentFormACH = ({
   variant = "default",
@@ -38,8 +40,16 @@ const PaymentFormACH = ({
   }
   const [showRouting, toggleShowRouting] = useState(false);
   const [showAccount, toggleShowAccount] = useState(false);
+  const [showTermsModal, setShowTermsModal] = useState(false);
   const showTerms = !!termsContent;
 
+  const toggleTermsModal = open => {
+    setShowTermsModal(open);
+    if (open) {
+      useScrollTo("terms-body-text", 0, 0, "smooth", 100);
+    }
+  };
+
   const nameErrors = {
     [required.error]: "Name is required"
   };
@@ -172,29 +182,39 @@ const PaymentFormACH = ({
             hidden={hideDefaultPayment}
           />
         )}
-        {(showWalletCheckbox || showTerms) && (
-          <Cluster childGap={"4px"} align="center">
-            {showWalletCheckbox && (
-              <Checkbox
-                name="bank checkbox"
-                dataQa="Save checking account to wallet"
-                title="Save checking account to wallet."
-                checked={walletCheckboxMarked}
-                onChange={saveToWallet}
-              />
-            )}
-            {showTerms && (
-              <Cover singleChild>
-                <TermsAndConditions
-                  version="v2"
-                  showCheckbox={false}
-                  description="View"
-                  terms={termsContent}
-                  initialFocusSelector={".modal-close-button"}
-                />
-              </Cover>
-            )}
-          </Cluster>
+        {showWalletCheckbox && (
+          <Checkbox
+            name="bank checkbox"
+            dataQa="Save checking account to wallet"
+            title={
+              <>
+                Save checking account to wallet (optional).{" "}
+                {showTerms && (
+                  <span onClick={e => e.stopPropagation()}>
+                    View{" "}
+                    <TermsAndConditionsModal
+                      link="Terms and Conditions"
+                      terms={termsContent}
+                      isOpen={showTermsModal}
+                      toggleOpen={toggleTermsModal}
+                      initialFocusSelector=".modal-close-button"
+                    />
+                  </span>
+                )}
+              </>
+            }
+            checked={walletCheckboxMarked}
+            onChange={saveToWallet}
+          />
+        )}
+        {!showWalletCheckbox && showTerms && (
+          <TermsAndConditions
+            version="v2"
+            showCheckbox={false}
+            description="View"
+            terms={termsContent}
+            initialFocusSelector=".modal-close-button"
+          />
         )}
       </FormInputColumn>
     </FormContainer>

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

@@ -0,0 +1,133 @@
+import React, { useState } from "react";
+import { connect, Provider } from "react-redux";
+import { createStore } from "redux";
+import PaymentFormACH from "./PaymentFormACH";
+import * as PaymentFormACHState from "./PaymentFormACH.state";
+import { noop } from "../../../util/general";
+import { fn } from "@storybook/test";
+
+const store = createStore(
+  PaymentFormACHState.reducer,
+  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
+);
+
+const FormWrapper = props => {
+  const [walletChecked, setWalletChecked] = useState(
+    props.walletCheckboxMarked ?? false
+  );
+  return (
+    <PaymentFormACH
+      {...props}
+      walletCheckboxMarked={walletChecked}
+      saveToWallet={() => setWalletChecked(!walletChecked)}
+    />
+  );
+};
+
+const ConnectedForm = connect(
+  PaymentFormACHState.mapStateToProps,
+  PaymentFormACHState.mapDispatchToProps
+)(FormWrapper);
+
+export default {
+  title: "Molecules/PaymentFormACH",
+  component: ConnectedForm,
+  tags: ["!autodocs"],
+  parameters: {
+    layout: "centered",
+    controls: { expanded: true }
+  },
+  args: {
+    showErrors: false,
+    hideDefaultPayment: true,
+    allowBankAccountType: false,
+    showWalletCheckbox: false,
+    handleSubmit: noop
+  },
+  argTypes: {
+    showErrors: {
+      description: "Displays validation error messages on each field.",
+      control: { type: "boolean" },
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: false }
+      }
+    },
+    hideDefaultPayment: {
+      description:
+        "Hides the 'Save as Default Payment Method' checkbox. Defaults to `true`.",
+      control: { type: "boolean" },
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: true }
+      }
+    },
+    allowBankAccountType: {
+      description: "Shows the account type dropdown (Checking / Savings).",
+      control: { type: "boolean" },
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: false }
+      }
+    },
+    showWalletCheckbox: {
+      description:
+        'Shows the "Save checking account to wallet (optional)." checkbox.',
+      control: { type: "boolean" },
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: false }
+      }
+    },
+    handleSubmit: {
+      description: "Function called when Enter is pressed on any text input.",
+      control: { type: "object" },
+      table: {
+        type: { summary: "function" },
+        defaultValue: { summary: undefined }
+      }
+    }
+  },
+  decorators: [
+    Story => (
+      <Provider store={store}>
+        <Story />
+      </Provider>
+    )
+  ]
+};
+
+export const Basic = args => <ConnectedForm {...args} />;
+
+export const WithWalletCheckbox = {
+  args: {
+    showWalletCheckbox: true
+  },
+  render: args => <ConnectedForm {...args} />
+};
+
+export const ShowErrors = {
+  args: {
+    showErrors: true
+  },
+  render: args => <ConnectedForm {...args} />
+};
+
+export const WithAccountType = {
+  args: {
+    allowBankAccountType: true
+  },
+  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

@@ -27,9 +27,11 @@ import {
   FormContainer,
   FormInputRow
 } from "../../atoms/form-layouts";
-import { Box, Cluster, Cover } from "../../atoms/layouts";
+import { Box, Cluster } from "../../atoms/layouts";
 import withWindowSize from "../../withWindowSize";
 import TermsAndConditions from "../terms-and-conditions";
+import TermsAndConditionsModal from "../terms-and-conditions-modal";
+import { useScrollTo } from "../../../hooks";
 
 const PaymentFormCard = ({
   variant = "default",
@@ -46,8 +48,16 @@ const PaymentFormCard = ({
   termsContent
 }) => {
   const { isMobile } = useContext(ThemeContext);
+  const [showTermsModal, setShowTermsModal] = useState(false);
   const showTerms = !!termsContent;
 
+  const toggleTermsModal = open => {
+    setShowTermsModal(open);
+    if (open) {
+      useScrollTo("terms-body-text", 0, 0, "smooth", 100);
+    }
+  };
+
   useEffect(() => {
     if (deniedCards) {
       deniedCards.map(card =>
@@ -196,29 +206,39 @@ const PaymentFormCard = ({
             />
           </Box>
         )}
-        {(showWalletCheckbox || showTerms) && (
-          <Cluster childGap={"4px"} align="center">
-            {showWalletCheckbox && (
-              <Checkbox
-                name="credit card checkbox"
-                dataQa="Save credit card to wallet"
-                title="Save credit card to wallet."
-                checked={walletCheckboxMarked}
-                onChange={saveToWallet}
-              />
-            )}
-            {showTerms && (
-              <Cover singleChild>
-                <TermsAndConditions
-                  version="v2"
-                  showCheckbox={false}
-                  description="View"
-                  terms={termsContent}
-                  initialFocusSelector={".modal-close-button"}
-                />
-              </Cover>
-            )}
-          </Cluster>
+        {showWalletCheckbox && (
+          <Checkbox
+            name="credit card checkbox"
+            dataQa="Save credit card to wallet"
+            title={
+              <>
+                Save credit card to wallet (optional).{" "}
+                {showTerms && (
+                  <span onClick={e => e.stopPropagation()}>
+                    View{" "}
+                    <TermsAndConditionsModal
+                      link="Terms and Conditions"
+                      terms={termsContent}
+                      isOpen={showTermsModal}
+                      toggleOpen={toggleTermsModal}
+                      initialFocusSelector=".modal-close-button"
+                    />
+                  </span>
+                )}
+              </>
+            }
+            checked={walletCheckboxMarked}
+            onChange={saveToWallet}
+          />
+        )}
+        {!showWalletCheckbox && showTerms && (
+          <TermsAndConditions
+            version="v2"
+            showCheckbox={false}
+            description="View"
+            terms={termsContent}
+            initialFocusSelector=".modal-close-button"
+          />
         )}
       </FormInputColumn>
     </FormContainer>

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

@@ -0,0 +1,131 @@
+import React, { useState } from "react";
+import { connect, Provider } from "react-redux";
+import { createStore } from "redux";
+import PaymentFormCard from "./PaymentFormCard";
+import * as PaymentFormCardState from "./PaymentFormCard.state";
+import { noop } from "../../../util/general";
+
+const store = createStore(
+  PaymentFormCardState.reducer,
+  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
+);
+
+const FormWrapper = props => {
+  const [walletChecked, setWalletChecked] = useState(
+    props.walletCheckboxMarked ?? false
+  );
+  return (
+    <PaymentFormCard
+      {...props}
+      walletCheckboxMarked={walletChecked}
+      saveToWallet={() => setWalletChecked(!walletChecked)}
+    />
+  );
+};
+
+const ConnectedForm = connect(
+  PaymentFormCardState.mapStateToProps,
+  PaymentFormCardState.mapDispatchToProps
+)(FormWrapper);
+
+export default {
+  title: "Molecules/PaymentFormCard",
+  component: ConnectedForm,
+  tags: ["!autodocs"],
+  parameters: {
+    layout: "centered",
+    controls: { expanded: true }
+  },
+  args: {
+    showErrors: false,
+    hideZipCode: false,
+    showWalletCheckbox: false,
+    deniedCards: undefined,
+    handleSubmit: noop
+  },
+  argTypes: {
+    showErrors: {
+      description: "Displays validation error messages on each field.",
+      control: { type: "boolean" },
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: false }
+      }
+    },
+    hideZipCode: {
+      description: "Hides the country dropdown and zip code field.",
+      control: { type: "boolean" },
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: false }
+      }
+    },
+    showWalletCheckbox: {
+      description:
+        'Shows the "Save credit card to wallet (optional)." checkbox.',
+      control: { type: "boolean" },
+      table: {
+        type: { summary: "boolean" },
+        defaultValue: { summary: false }
+      }
+    },
+    deniedCards: {
+      description: 'Array of card brand strings to deny (e.g. `["AMEX"]`).',
+      control: { type: "object" },
+      table: {
+        type: { summary: "string[]" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    handleSubmit: {
+      description: "Function called when Enter is pressed on any text input.",
+      control: { type: "object" },
+      table: {
+        type: { summary: "function" },
+        defaultValue: { summary: undefined }
+      }
+    }
+  },
+  decorators: [
+    Story => (
+      <Provider store={store}>
+        <Story />
+      </Provider>
+    )
+  ]
+};
+
+export const Basic = args => <ConnectedForm {...args} />;
+
+export const WithWalletCheckbox = {
+  args: {
+    showWalletCheckbox: true
+  },
+  render: args => <ConnectedForm {...args} />
+};
+
+export const ShowErrors = {
+  args: {
+    showErrors: true
+  },
+  render: args => <ConnectedForm {...args} />
+};
+
+export const WithDeniedCards = {
+  args: {
+    deniedCards: ["AMEX"]
+  },
+  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>}