@thecb/components 7.10.0-beta.0 → 7.10.0

package/package.json

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

package/src/components/atoms/button-with-action/ButtonWithAction.theme.js

@@ -1,7 +1,12 @@
-/*
-  For now I'm using string values, eventually shared components library will have its own constants file
-  for colors/values that should be used here instead
-*/
+import {
+  WHITE,
+  TRANSPARENT,
+  SAPPHIRE_BLUE,
+  PEACOCK_BLUE,
+  MATISSE_BLUE,
+  RASPBERRY,
+  ERROR_COLOR
+} from "../../../constants/colors";
 
 const padding = {
   primary: "0.75rem 1.5rem",
@@ -19,18 +24,18 @@ const padding = {
 };
 
 const color = {
-  primary: "#FFFFFF",
-  secondary: "#15749D",
-  back: "#15749D",
-  smallPrimary: "#FFFFFF",
-  smallSecondary: "#15749D",
-  smallGhost: "#15749D",
-  ghost: "#15749D",
-  tertiary: "#15749D",
-  danger: "#FFFFFF",
-  dangerSecondary: "#D11053",
-  whiteSecondary: "#FFFFFF",
-  whitePrimary: "#FFFFFF"
+  primary: WHITE,
+  secondary: MATISSE_BLUE,
+  back: MATISSE_BLUE,
+  smallPrimary: WHITE,
+  smallSecondary: MATISSE_BLUE,
+  smallGhost: MATISSE_BLUE,
+  ghost: MATISSE_BLUE,
+  tertiary: MATISSE_BLUE,
+  danger: WHITE,
+  dangerSecondary: ERROR_COLOR,
+  whiteSecondary: WHITE,
+  whitePrimary: WHITE
 };
 
 const fontSizeVariant = {
@@ -94,123 +99,123 @@ const minWidth = {
 };
 
 const backgroundColor = {
-  primary: "#15749D",
-  secondary: "transparent",
-  back: "transparent",
-  smallPrimary: "#15749D",
-  smallSecondary: "transparent",
-  smallGhost: "transparent",
-  ghost: "transparent",
-  tertiary: "transparent",
-  danger: "#ED125F",
-  dangerSecondary: "transparent",
-  whiteSecondary: "transparent",
-  whitePrimary: "transparent"
+  primary: MATISSE_BLUE,
+  secondary: TRANSPARENT,
+  back: TRANSPARENT,
+  smallPrimary: MATISSE_BLUE,
+  smallSecondary: TRANSPARENT,
+  smallGhost: TRANSPARENT,
+  ghost: TRANSPARENT,
+  tertiary: TRANSPARENT,
+  danger: RASPBERRY,
+  dangerSecondary: TRANSPARENT,
+  whiteSecondary: TRANSPARENT,
+  whitePrimary: TRANSPARENT
 };
 
 const border = {
-  primary: "2px solid #15749D",
-  secondary: "2px solid #15749D",
-  back: "2px solid #15749D",
-  smallPrimary: "2px solid #15749D",
-  smallSecondary: "2px solid #15749D",
+  primary: "2px solid " + MATISSE_BLUE,
+  secondary: "2px solid " + MATISSE_BLUE,
+  back: "2px solid " + MATISSE_BLUE,
+  smallPrimary: "2px solid " + MATISSE_BLUE,
+  smallSecondary: "2px solid " + MATISSE_BLUE,
   smallGhost: "none",
   ghost: "none",
   tertiary: "none",
-  danger: "2px solid #ED125F",
-  dangerSecondary: "2px solid #D11053",
-  whiteSecondary: "2px solid white",
-  whitePrimary: "2px solid transparent"
+  danger: "2px solid " + RASPBERRY,
+  dangerSecondary: "2px solid " + ERROR_COLOR,
+  whiteSecondary: "2px solid " + WHITE,
+  whitePrimary: "2px solid " + TRANSPARENT
 };
 
 const hoverBackgroundColor = {
-  primary: "#116285",
+  primary: SAPPHIRE_BLUE,
   secondary: "#DBEAF0",
-  back: "transparent",
-  smallPrimary: "#116285",
+  back: TRANSPARENT,
+  smallPrimary: SAPPHIRE_BLUE,
   smallSecondary: "#DBEAF0",
-  smallGhost: "transparent",
-  ghost: "transparent",
-  tertiary: "transparent",
+  smallGhost: TRANSPARENT,
+  ghost: TRANSPARENT,
+  tertiary: TRANSPARENT,
   danger: "#BA002C",
-  dangerSecondary: "transparent",
-  whiteSecondary: "transparent",
-  whitePrimary: "transparent"
+  dangerSecondary: "#FAE7EE",
+  whiteSecondary: TRANSPARENT,
+  whitePrimary: TRANSPARENT
 };
 
 const hoverBorderColor = {
-  primary: "#116285",
-  secondary: "#15749D",
+  primary: SAPPHIRE_BLUE,
+  secondary: MATISSE_BLUE,
   back: "#DCEAF1",
-  smallPrimary: "#116285",
-  smallSecondary: "#15749D",
-  smallGhost: "transparent",
-  ghost: "transparent",
-  tertiary: "transparent",
+  smallPrimary: SAPPHIRE_BLUE,
+  smallSecondary: MATISSE_BLUE,
+  smallGhost: TRANSPARENT,
+  ghost: TRANSPARENT,
+  tertiary: TRANSPARENT,
   danger: "#BA002C",
   dangerSecondary: "#B10541",
-  whiteSecondary: "2px solid transparent",
-  whitePrimary: "2px solid transparent"
+  whiteSecondary: "2px solid " + TRANSPARENT,
+  whitePrimary: "2px solid " + TRANSPARENT
 };
 
 const hoverColor = {
-  primary: "#FFFFFF",
-  secondary: "#116285",
-  back: "#116285",
-  smallPrimary: "#FFFFFF",
-  smallSecondary: "#116285",
-  smallGhost: "#116285",
-  ghost: "#116285",
-  tertiary: "#116285",
-  danger: "#FFFFFF",
+  primary: WHITE,
+  secondary: SAPPHIRE_BLUE,
+  back: SAPPHIRE_BLUE,
+  smallPrimary: WHITE,
+  smallSecondary: SAPPHIRE_BLUE,
+  smallGhost: SAPPHIRE_BLUE,
+  ghost: SAPPHIRE_BLUE,
+  tertiary: SAPPHIRE_BLUE,
+  danger: WHITE,
   dangerSecondary: "#B10541",
-  whiteSecondary: "#FFFFFF",
-  whitePrimary: "#FFFFFF"
+  whiteSecondary: WHITE,
+  whitePrimary: WHITE
 };
 
 const activeBackgroundColor = {
-  primary: "#0E506D",
+  primary: PEACOCK_BLUE,
   secondary: "#B8D5E1",
-  back: "transparent",
-  smallPrimary: "#0E506D",
+  back: TRANSPARENT,
+  smallPrimary: PEACOCK_BLUE,
   smallSecondary: "#B8D5E1",
-  smallGhost: "transparent",
-  ghost: "transparent",
-  tertiary: "transparent",
+  smallGhost: TRANSPARENT,
+  ghost: TRANSPARENT,
+  tertiary: TRANSPARENT,
   danger: "#870000",
-  dangerSecondary: "transparent",
-  whiteSecondary: "transparent",
-  whitePrimary: "transparent"
+  dangerSecondary: "#FAE7EE",
+  whiteSecondary: TRANSPARENT,
+  whitePrimary: TRANSPARENT
 };
 
 const activeBorderColor = {
-  primary: "#0E506D",
-  secondary: "#15749D",
-  back: "#0E506D",
-  smallPrimary: "#0E506D",
-  smallSecondary: "#15749D",
-  smallGhost: "transparent",
-  ghost: "transparent",
-  tertiary: "transparent",
+  primary: PEACOCK_BLUE,
+  secondary: MATISSE_BLUE,
+  back: PEACOCK_BLUE,
+  smallPrimary: PEACOCK_BLUE,
+  smallSecondary: MATISSE_BLUE,
+  smallGhost: TRANSPARENT,
+  ghost: TRANSPARENT,
+  tertiary: TRANSPARENT,
   danger: "#870000",
   dangerSecondary: "#910029",
-  whiteSecondary: "2px solid transparent",
-  whitePrimary: "2px solid transparent"
+  whiteSecondary: "2px solid " + TRANSPARENT,
+  whitePrimary: "2px solid " + TRANSPARENT
 };
 
 const activeColor = {
-  primary: "#FFFFFF",
-  secondary: "#15749D",
-  back: "#0E506D",
-  smallPrimary: "#FFFFFF",
-  smallSecondary: "#0E506D",
-  smallGhost: "#0E506D",
-  ghost: "#0E506D",
-  tertiary: "#0E506D",
-  danger: "#FFFFFF",
+  primary: WHITE,
+  secondary: MATISSE_BLUE,
+  back: PEACOCK_BLUE,
+  smallPrimary: WHITE,
+  smallSecondary: PEACOCK_BLUE,
+  smallGhost: PEACOCK_BLUE,
+  ghost: PEACOCK_BLUE,
+  tertiary: PEACOCK_BLUE,
+  danger: WHITE,
   dangerSecondary: "#910029",
-  whiteSecondary: "#FFFFFF",
-  whitePrimary: "#FFFFFF"
+  whiteSecondary: WHITE,
+  whitePrimary: WHITE
 };
 
 export const fallbackValues = {

package/src/components/atoms/icons/PencilIcon.js

@@ -0,0 +1,22 @@
+import React from "react";
+import { fallbackValues } from "./Icons.theme";
+import { themeComponent } from "../../../util/themeUtils";
+
+const PencilIcon = ({ ariaLabel = "Edit", themeValues }) => (
+  <svg
+    aria-label={ariaLabel}
+    width="24px"
+    height="24px"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M19.74 6.84a.885.885 0 0 1 0 1.253l-1.626 1.626-3.333-3.333 1.626-1.626a.885.885 0 0 1 1.253 0l2.08 2.08ZM4 20.5v-3.333l9.83-9.83 3.333 3.333-9.83 9.83H4Z"
+      fill={themeValues.subIconColor}
+    />
+  </svg>
+);
+
+export default themeComponent(PencilIcon, "Icons", fallbackValues, "info");

package/src/components/atoms/icons/icons.stories.js

@@ -31,6 +31,7 @@ import {
   DuplicateIcon,
   ErroredIcon,
   FailedIcon,
+  PencilIcon,
   PendingIcon,
   RefundIcon,
   RejectedIcon,
@@ -75,6 +76,7 @@ export const chargebackReversalIcon = () => <ChargebackReversalIcon />;
 export const duplicateIcon = () => <DuplicateIcon />;
 export const erroredIcon = () => <ErroredIcon />;
 export const failedIcon = () => <FailedIcon />;
+export const pencilIcon = () => <PencilIcon />;
 export const pendingIcon = () => <PendingIcon />;
 export const refundIcon = () => <RefundIcon />;
 export const rejectedIcon = () => <RejectedIcon />;

package/src/components/atoms/icons/index.js

@@ -35,6 +35,7 @@ import DuplicateIcon from "./DuplicateIcon";
 import ErroredIcon from "./ErroredIcon";
 import ExternalLinkIcon from "./ExternalLinkIcon";
 import FailedIcon from "./FailedIcon";
+import PencilIcon from "./PencilIcon";
 import PendingIcon from "./PendingIcon";
 import RefundIcon from "./RefundIcon";
 import RejectedIcon from "./RejectedIcon";
@@ -118,6 +119,7 @@ export {
   ErroredIcon,
   ExternalLinkIcon,
   FailedIcon,
+  PencilIcon,
   PendingIcon,
   RefundIcon,
   RejectedIcon,

package/src/components/atoms/layouts/Box.styled.js

@@ -49,10 +49,10 @@ export const BoxWrapper = styled(
   text-align: ${({ textAlign }) => textAlign};
 
   &:hover {
-    ${({ hoverStyles, as }) =>
+    ${({ hoverStyles, as, disabled }) =>
       css`
         ${hoverStyles}
-        ${as === "button"
+        ${as === "button" && !disabled
           ? `> * > span {
           ${hoverStyles}
           border: none;

package/src/components/atoms/layouts/Cluster.d.ts

@@ -13,6 +13,7 @@ export interface ClusterProps {
   justifySelf?: string;
   alignSelf?: string;
   flexGrow?: string;
+  innerWrapperAs?: string;
 }
 
 export const Cluster: React.FC<Expand<ClusterProps> &

package/src/components/atoms/layouts/Cluster.js

@@ -24,6 +24,7 @@ const Cluster = ({
   flexGrow,
   extraStyles,
   children,
+  innerWrapperAs = "div",
   ...rest
 }) => (
   <ClusterWrapper
@@ -41,6 +42,7 @@ const Cluster = ({
       minHeight={minHeight}
       minWidth={minWidth}
       $nowrap={nowrap}
+      as={innerWrapperAs}
     >
       {safeChildren(children, <Fragment />)}
     </ClusterInnerWrapper>

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,
+  displayQuantity = 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>
+    {!!displayQuantity && (
+      <Paragraph
+        variant={themeValues.paragraphVariant}
+        weight={themeValues.weightTitle}
+      >
+        {`x${displayQuantity}`}
+      </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")}
+    displayQuantity={2}
+  />
+);

package/src/components/molecules/nav-menu/NavMenuMobile.js

@@ -39,13 +39,14 @@ const menu = posed.div({
 
 const ImposterMenu = styled(menu)`
   position: fixed;
-  top: 72px;
+  top: ${({ headerSize }) => headerSize};
 `;
 
 const NavMenuMobile = ({
   id,
   menuContent = [],
   visible = false,
+  headerSize = "72px",
   themeValues
 }) => {
   return (
@@ -53,6 +54,7 @@ const NavMenuMobile = ({
       id={id}
       initialPose="invisible"
       pose={visible ? "visible" : "invisible"}
+      headerSize={headerSize}
     >
       <Box
         width="100vw"

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

@@ -23,6 +23,7 @@ const PrevNextPlaceholder = ({ buttonHeight, buttonWidth }) => (
 
 const PrevNextButton = ({
   action,
+  ariaLabel,
   arrowColor,
   borderRadius,
   buttonHeight,
@@ -34,11 +35,13 @@ const PrevNextButton = ({
     padding="0"
     minHeight={buttonHeight}
     extraStyles={`max-height: ${buttonHeight};`}
+    as="li"
   >
     <ButtonWithAction
       action={action}
       contentOverride
       dataQa={type}
+      aria-label={ariaLabel}
       extraStyles={`
         background-color: ${numberColor};
         border-color: ${numberColor};
@@ -48,9 +51,6 @@ const PrevNextButton = ({
         min-height: 100%;
         min-width: ${buttonWidth};
         padding: 0;
-        &:focus {
-          outline: none
-        }
       `}
     >
       <Box padding="0" extraStyles={type === "prev" && "transform: scaleX(-1)"}>
@@ -68,19 +68,23 @@ export const getPagesPanel = (page, pagesCount) => {
   const space = page === 1 ? PAGING_INIT_SPACE : PAGING_SPACE;
   const pages = [{ index: 1, isButton: true }];
   if (page > space + 1) {
-    pages.push({ isDelimiter: true });
+    pages.push({ isDelimiter: true, id: "first-delimiter" });
   }
   for (
     let j = Math.max(1, page - space) + 1;
     j < Math.min(lastPageNumber, page + space);
     j++
   ) {
-    pages.push({ index: j, isButton: true });
+    pages.push({ index: j, isButton: true, id: `page-${j}` });
   }
   if (page < lastPageNumber - space) {
-    pages.push({ isDelimiter: true });
+    pages.push({ isDelimiter: true, id: "last-delimiter" });
   }
-  pages.push({ index: lastPageNumber, isButton: true });
+  pages.push({
+    index: lastPageNumber,
+    isButton: true,
+    id: `page-${lastPageNumber}`
+  });
   const activePage = pages.find(p => p.index === page);
   if (activePage) {
     activePage.active = true;
@@ -103,6 +107,7 @@ const Pagination = ({
   pageNext,
   pagePrevious,
   setCurrentPage,
+  ariaLabel,
   themeValues
 }) => {
   const { isMobile } = useContext(ThemeContext);
@@ -123,12 +128,9 @@ const Pagination = ({
     &:hover {
         background-color: ${themeValues.hoverBackgroundColor}
     }
-    &:focus {
-      outline: none
-    }
   `;
 
-  const extraDisabledStyles = `
+  const currentPageStyles = `
     border: ${activeBorderWidth} solid ${numberColor ??
     themeValues.numberColor};
     color: ${numberColor ?? themeValues.activeColor};
@@ -138,14 +140,27 @@ const Pagination = ({
     }
     &:hover {
       background-color: initial;
+      border: ${activeBorderWidth} solid ${numberColor ??
+    themeValues.numberColor};
+      background-color: ${themeValues.activeBackgroundColor};
     }
   `;
 
   return (
-    <Cluster justify="center" childGap={childGap}>
+    <Cluster
+      justify="center"
+      childGap={childGap}
+      overflow={true}
+      as="nav"
+      role="navigation"
+      innerWrapperAs="ul"
+      aria-label={ariaLabel}
+      extraStyles="> ul { padding: 0px; > li { list-style-type: none; } };"
+    >
       {currentPage > 1 ? (
         <PrevNextButton
           action={pagePrevious}
+          ariaLabel={`Previous Page`}
           arrowColor={arrowColor ?? themeValues.arrowColor}
           borderRadius={borderRadius}
           buttonHeight={buttonHeight}
@@ -178,35 +193,43 @@ const Pagination = ({
           )
         : getPagesPanel(currentPage, pageCount).map((item, index) =>
             item.isButton ? (
-              <Box padding="0" extraStyles={`max-height: ${buttonHeight};`}>
+              <Box
+                padding="0"
+                extraStyles={`max-height: ${buttonHeight};`}
+                as="li"
+                key={item.id}
+              >
                 <ButtonWithAction
                   variant="ghost"
-                  key={item.index}
                   text={item.index}
-                  disabled={item.active}
-                  extraDisabledStyles={extraDisabledStyles}
+                  aria-current={item.active ? "page" : undefined}
+                  aria-label={`${
+                    item.index == pageCount ? "Last Page, " : ""
+                  }page ${item.index}`}
                   action={
                     !item.active
                       ? () => setCurrentPage({ pageNumber: item.index })
                       : noop
                   }
                   textExtraStyles={`font-size: ${fontSize}; font-weight: ${fontWeight};`}
-                  extraStyles={extraStyles}
+                  extraStyles={`${extraStyles}${
+                    item.active ? currentPageStyles : ""
+                  }`}
                   dataQa={index}
                 >
                   {item.index}
                 </ButtonWithAction>
               </Box>
             ) : (
-              <Box padding="0 10px">
+              <Box padding="0 10px" as="li" key={item.id}>
                 <Cluster justify="flex-end">
                   <Text
-                    key={index}
                     variant="pXL"
                     weight={fontWeight}
                     color={numberColor ?? themeValues.numberColor}
+                    role="presentation"
                   >
-                    {"..."}
+                    {"…"}
                   </Text>
                 </Cluster>
               </Box>
@@ -215,6 +238,7 @@ const Pagination = ({
       {currentPage < pageCount ? (
         <PrevNextButton
           action={pageNext}
+          ariaLabel={`Next Page`}
           arrowColor={arrowColor ?? themeValues.arrowColor}
           borderRadius={borderRadius}
           buttonHeight={buttonHeight}

package/src/components/molecules/pagination/index.d.ts

@@ -14,6 +14,7 @@ export interface PaginationProps {
   fontWeight?: string;
   numberColor?: string;
   pageCount: number;
+  ariaLabel?: string;
   pageNext: () => void;
   pagePrevious: () => void;
   setCurrentPage: ({ currentPage: number }) => void;

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>