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

package/src/components/molecules/pagination/Pagination.stories.js

@@ -0,0 +1,181 @@
+import React, { useState } from "react";
+import { WHITE, GHOST_GREY } from "../../../constants/colors";
+import { Box } from "../../atoms/layouts";
+import Pagination from "./Pagination";
+import { fn } from "@storybook/test";
+import { FONT_WEIGHT_SEMIBOLD } from "../../../constants/style_constants";
+
+const meta = {
+  title: "Molecules/Pagination",
+  component: Pagination,
+  parameters: {
+    layout: "centered"
+  },
+  tags: ["!autodocs"],
+  args: {
+    activeBorderWidth: "3px",
+    ariaLabel: undefined,
+    arrowColor: undefined,
+    borderRadius: "3px",
+    buttonHeight: "44px",
+    buttonWidth: "44px",
+    childGap: "24px",
+    currentPage: undefined,
+    fontSize: "17px",
+    fontWeight: "900",
+    numberColor: undefined,
+    pageCount: undefined,
+    pageNext: fn(),
+    pagePrevious: fn(),
+    setCurrentPage: fn()
+  },
+  argTypes: {
+    activeBorderWidth: {
+      description: "The width of the border around the active page number",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "3px" }
+      }
+    },
+    ariaLabel: {
+      description: "aria-label value for pagination container",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    arrowColor: {
+      description:
+        "Override for arrow color, if undefined component uses themed values",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    borderRadius: {
+      description: "Border radius of the border around pagination controls",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "3px" }
+      }
+    },
+    buttonHeight: {
+      description: "Height of pagination buttons",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "44px" }
+      }
+    },
+    buttonWidth: {
+      description: "Width of pagination buttons",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "44px" }
+      }
+    },
+    childGap: {
+      description: "Gap between pagination buttons",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "24px" }
+      }
+    },
+    currentPage: {
+      description: "Current active page",
+      table: {
+        type: { summary: "number" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    fontSize: {
+      descripton: "Font size of page buttons",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "17px" }
+      }
+    },
+    fontWeight: {
+      description: "Font weight of page buttons",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: "900" }
+      }
+    },
+    numberColor: {
+      description:
+        "Override for color of pagination number buttons, if undefined will use themed values",
+      table: {
+        type: { summary: "string" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    pageCount: {
+      description: "Total number of pages",
+      table: {
+        type: { summary: "number" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    pageNext: {
+      description: "Function to call when next button is clicked",
+      table: {
+        type: { summary: "function" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    pagePrevious: {
+      description: "Function to call when previous button is clicked",
+      table: {
+        type: { summary: "function" },
+        defaultValue: { summary: undefined }
+      }
+    },
+    setCurrentPage: {
+      description: "Function to call when user selects a numerical page button",
+      table: {
+        type: { summary: "function" },
+        defaultValue: { summary: undefined }
+      }
+    }
+  }
+};
+
+export default meta;
+
+export const BasicPagination = {
+  args: {
+    activeBorderWidth: "3px",
+    childGap: "24px",
+    borderRadius: "4px",
+    fontSize: "14px",
+    buttonHeight: "44px",
+    buttonWidth: "44px",
+    fontWeight: FONT_WEIGHT_SEMIBOLD,
+    pageCount: 12,
+    ariaLabel: "Pagination"
+  },
+  render: args => {
+    const [currentPage, setCurrentPage] = useState(5);
+
+    return (
+      <Box
+        background={WHITE}
+        borderRadius="4px"
+        boxShadow={`0px 0px 5px 0px ${GHOST_GREY}`}
+        padding={"24px"}
+      >
+        <Pagination
+          {...args}
+          currentPage={currentPage}
+          pageNext={() =>
+            currentPage < 12 ? setCurrentPage(currentPage + 1) : fn()
+          }
+          pagePrevious={() =>
+            currentPage > 1 ? setCurrentPage(currentPage - 1) : fn()
+          }
+          setCurrentPage={page => setCurrentPage(page.pageNumber)}
+        />
+      </Box>
+    );
+  }
+};

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

@@ -1,40 +1,71 @@
 import React from "react";
 import { equals } from "ramda";
 import { FormInput } from "../../atoms/form-layouts";
-import { displayCurrency } from "../../../util/general";
-import Text from "../../atoms/text";
-
+import { createIdFromString, displayCurrency } from "../../../util/general";
+import { Stack, Detail, Text, Box } from "../../atoms";
+import { themeComponent } from "../../../util/themeUtils";
+import { fallbackValues } from "./PartialAmountField.theme";
 const PartialAmountField = ({
   lineItem,
   field,
   showErrors,
   errorMessages,
   moneyFormat,
-  fieldActions
-}) => (
-  <FormInput
-    labelTextWhenNoError={lineItem.description}
-    key={lineItem.id}
-    field={field}
-    fieldActions={fieldActions}
-    showErrors={showErrors}
-    errorMessages={errorMessages}
-    style={{ textAlign: "right" }}
-    placeholder="$0.00"
-    formatter={moneyFormat}
-    isNum
-    decorator={
-      <Text variant="p">
-        Amount owed:{"  "}
-        {
-          <Text variant="p" weight="600">
-            {displayCurrency(lineItem.amount)}
-          </Text>
-        }
-      </Text>
-    }
-  />
-);
+  fieldActions,
+  themeValues
+}) => {
+  const id = createIdFromString(
+    `${lineItem.description}-${lineItem.subDescription}`
+  );
+  return (
+    <FormInput
+      ariaLabelledBy={null}
+      id={id}
+      labelTextWhenNoError={id}
+      labelDisplayOverride={
+        <Stack childGap="0px">
+          <Box as="label" for={id} padding="0">
+            <Detail
+              as="span"
+              extraStyles="display: block;"
+              variant={themeValues.detailVariant}
+              weight={themeValues.weightTitle}
+            >
+              {lineItem.description}
+            </Detail>
+            <Detail
+              as="span"
+              extraStyles="display: block;"
+              variant={themeValues.detailVariant}
+              weight="400"
+            >
+              {lineItem.subDescription}
+            </Detail>
+          </Box>
+        </Stack>
+      }
+      key={lineItem.id}
+      field={field}
+      fieldActions={fieldActions}
+      showErrors={showErrors}
+      errorMessages={errorMessages}
+      style={{ textAlign: "right" }}
+      placeholder="$0.00"
+      formatter={moneyFormat}
+      isNum
+      decorator={
+        <Text variant="p">
+          Amount owed:{"  "}
+          {
+            <Text variant="p" weight="600">
+              {displayCurrency(lineItem.amount)}
+            </Text>
+          }
+        </Text>
+      }
+    />
+  );
+};
 
 function arePropsEqual(prevProps, nextProps) {
   return (
@@ -46,4 +77,12 @@ function arePropsEqual(prevProps, nextProps) {
   );
 }
 
-export default React.memo(PartialAmountField, arePropsEqual);
+export default React.memo(
+  themeComponent(
+    PartialAmountField,
+    "PartialAmountField",
+    fallbackValues,
+    "default"
+  ),
+  arePropsEqual
+);

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

@@ -0,0 +1,7 @@
+const weightTitle = { default: "600", small: "400" };
+const detailVariant = { default: "large", small: "small" };
+
+export const fallbackValues = {
+  weightTitle,
+  detailVariant
+};

package/src/components/molecules/payment-button-bar/PaymentButtonBar.js

@@ -25,19 +25,26 @@ const PaymentButtonBar = ({
   hideBackButton = false,
   buttonGroupStyles,
   hideAdditionalButton = false,
-  additionalButton
+  additionalButton,
+  nextButtonTestId = null,
+  backButtonTestId = null
 }) => {
   const { isMobile } = useContext(ThemeContext);
 
+  // cancel URLs are external (back to client system)
+  const handleCancel = () => {
+    window.location.href = cancelURL;
+  };
+
   const backButton =
     !!cancelURL && !!cancelText ? (
-      <ButtonWithLink
+      <ButtonWithAction
         text={cancelText}
-        url={cancelURL}
+        action={handleCancel}
         variant={backButtonVariant}
         extraStyles={isMobile && "flex-grow: 1"}
-        dataQa={cancelText}
-        aria-labelledby={`${kebabCaseString(cancelText)}-button`}
+        dataQa={backButtonTestId || cancelText}
+        aria-label={`${cancelText}, navigate back to previous site`}
         role="link"
       />
     ) : (
@@ -48,7 +55,7 @@ const PaymentButtonBar = ({
           action={backButtonAction}
           extraStyles={isMobile && "flex-grow: 1"}
           dataQa="Back"
-          aria-labelledby="back-button"
+          aria-label={"Back, navigate to previous page"}
           role="link"
         />
       )
@@ -60,7 +67,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 +80,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/payment-details/PaymentDetails.js

@@ -260,7 +260,6 @@ const PaymentDetails = ({
   // end partial void section
   isLoading = false,
   isError = false,
-  multiCartEnabled = false,
   agencyDisplayName
 }) => {
   const [isOpen, setIsOpen] = useState(initiallyOpen);
@@ -292,7 +291,7 @@ const PaymentDetails = ({
   ));
   const agencySubheading = (
     <>
-      {multiCartEnabled && agencyDisplayName && (
+      {agencyDisplayName && (
         <Cluster
           justify="space-between"
           align="center"

package/src/components/molecules/payment-details/PaymentDetails.oldstories.js

@@ -160,7 +160,6 @@ export const paymentDetails = () => (
     collapsibleOnMobile={boolean("collapsibleOnMobile", false, "props")}
     initiallyOpen={boolean("initiallyOpen", true, "props")}
     hideTitle={boolean("hideTitle", false, "props")}
-    multiCartEnabled={true}
     agencyDisplayName="Office of Charitable Trust"
   />
 );

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

@@ -49,6 +49,7 @@ const PaymentFormACH = ({
     [isRoutingNumber.error]: "Invalid routing number"
   };
   const confirmRoutingNumberErrors = {
+    [required.error]: "Confirm routing number is required",
     [matchesField.error]:
       "Confirm routing number field must match routing number"
   };
@@ -57,6 +58,7 @@ const PaymentFormACH = ({
     [hasLength.error]: "Account number must be between 5 and 17 digits"
   };
   const confirmAccountNumberErrors = {
+    [required.error]: "Confirm account number is required",
     [matchesField.error]:
       "Confirm account number field must match account number"
   };

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

@@ -16,7 +16,7 @@ const formConfig = {
     constraints: [onlyIntegers(), hasLength(0, 9)]
   },
   confirmRoutingNumber: {
-    validators: [matchesField("routingNumber")],
+    validators: [required(), matchesField("routingNumber")],
     constraints: [onlyIntegers(), hasLength(0, 9)]
   },
   accountNumber: {
@@ -24,7 +24,7 @@ const formConfig = {
     constraints: [onlyIntegers(), hasLength(0, 17)]
   },
   confirmAccountNumber: {
-    validators: [matchesField("accountNumber")],
+    validators: [required(), matchesField("accountNumber")],
     constraints: [onlyIntegers(), hasLength(0, 17)]
   },
   accountType: {

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

@@ -5,7 +5,8 @@ import {
   hasLength,
   matchesRegex,
   dateAfterToday,
-  isValidMonth
+  isValidMonth,
+  includesPotentialCardNumber
 } from "redux-freeform";
 import Checkbox from "../../atoms/checkbox";
 import CountryDropdown from "../../atoms/country-dropdown";
@@ -64,7 +65,9 @@ const PaymentFormCard = ({
   }, []);
 
   const nameOnCardErrors = {
-    [required.error]: "Name is required"
+    [required.error]: "Name is required",
+    [includesPotentialCardNumber.error]:
+      "Please only enter your name or business name"
   };
   const creditCardNumberErrors = {
     [required.error]: "Credit card number is required",
@@ -134,6 +137,7 @@ const PaymentFormCard = ({
           onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
           isNum
           autocompleteValue="cc-number"
+          name="cc-number"
           isRequired={true}
         />
         <FormInputRow

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

@@ -3,6 +3,7 @@ import {
   required,
   onlyIntegers,
   hasLength,
+  includesPotentialCardNumber,
   matchesRegex,
   validateWhen,
   dateAfterToday,
@@ -18,7 +19,7 @@ const formConfig = {
     validators: [required()]
   },
   nameOnCard: {
-    validators: [required()]
+    validators: [required(), includesPotentialCardNumber()]
   },
   creditCardNumber: {
     validators: [required(), hasLength(15, 16)],

package/src/components/molecules/phone-form/PhoneForm.js

@@ -9,6 +9,7 @@ import {
 import { noop } from "../../../util/general";
 import Checkbox from "../../atoms/checkbox";
 import { phoneFormats, formatDelimiter } from "../../../util/formats";
+import { useConditionallyAddValidator } from "../../../hooks";
 
 const PhoneForm = ({
   variant = "default",
@@ -25,11 +26,16 @@ const PhoneForm = ({
   if (clearOnDismount) {
     useEffect(() => () => actions.form.clear(), []);
   }
+  useConditionallyAddValidator(
+    isRequired,
+    required,
+    actions.fields.phone.addValidator,
+    actions.fields.phone.removeValidator
+  );
   const phoneErrorMessage = {
     [required.error]: "Phone number is required",
     [hasLength.error]: "Phone number must be 10 digits"
   };
-
   return (
     <FormContainer variant={variant} role="form" aria-label="Phone number">
       <FormInputColumn>

package/src/components/molecules/phone-form/PhoneForm.state.js

@@ -7,7 +7,7 @@ import {
 
 const formConfig = {
   phone: {
-    validators: [required(), hasLength(10, 10)],
+    validators: [hasLength(10, 10)], // 'required' validator is conditionally added based on `isRequired` prop
     constraints: [onlyIntegers(), hasLength(0, 10)]
   }
 };

package/src/components/molecules/popover/Popover.js

@@ -5,24 +5,10 @@ import Paragraph from "../../atoms/paragraph";
 import { Box } from "../../atoms/layouts";
 import ButtonWithAction from "../../atoms/button-with-action";
 import { useOutsideClick } from "../../../hooks";
-import { noop } from "../../../util/general";
+import { noop, arrowBorder } from "../../../util/general";
 import { ESCAPE } from "../../../constants/keyboard";
 import { fallbackValues } from "./Popover.theme";
 
-const arrowBorder = (borderColor, direction, width = "8px") => {
-  const angle = `${width} solid transparent`;
-  const straight = `${width} solid ${borderColor}`;
-  if (direction == "down") {
-    return `border-left: ${angle}; border-right: ${angle}; border-top: ${straight}`;
-  } else if (direction == "up") {
-    return `border-left: ${angle}; border-right: ${angle}; border-bottom: ${straight}`;
-  } else if (direction == "left") {
-    return `border-top: ${angle}; border-bottom: ${angle}; border-right: ${straight}`;
-  } else if (direction == "right") {
-    return `border-top: ${angle}; border-bottom: ${angle}; border-left: ${straight}`;
-  }
-};
-
 const Popover = ({
   themeValues,
   triggerText = "",

package/src/components/molecules/popover/Popover.mdx

@@ -0,0 +1,15 @@
+import { Canvas, Meta, Title, Story, Controls } from '@storybook/blocks';
+
+import * as PopoverStories from './Popover.stories.js';
+
+<Meta of={PopoverStories} />
+
+<Title />
+
+The Popover is a fully accessible widget to display additional information when a user hovers over a specified trigger element. The trigger can either be text supplied using the `triggerText` prop, or a custom Icon component supplied using the `icon` prop.
+
+The Popover can be positioned to appear anywhere around the trigger element using the position props. Content and style of the Popover are customizable.
+
+<Controls />
+
+<Story />