@thecb/components 7.8.4 → 7.9.0-beta.2

package/package.json

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

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

@@ -13,7 +13,6 @@ 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,7 +24,6 @@ const Cluster = ({
   flexGrow,
   extraStyles,
   children,
-  innerWrapperAs = "div",
   ...rest
 }) => (
   <ClusterWrapper
@@ -42,7 +41,6 @@ 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/pagination/Pagination.js

@@ -23,7 +23,6 @@ const PrevNextPlaceholder = ({ buttonHeight, buttonWidth }) => (
 
 const PrevNextButton = ({
   action,
-  ariaLabel,
   arrowColor,
   borderRadius,
   buttonHeight,
@@ -35,13 +34,11 @@ 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};
@@ -51,6 +48,9 @@ const PrevNextButton = ({
         min-height: 100%;
         min-width: ${buttonWidth};
         padding: 0;
+        &:focus {
+          outline: none
+        }
       `}
     >
       <Box padding="0" extraStyles={type === "prev" && "transform: scaleX(-1)"}>
@@ -68,23 +68,19 @@ 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, id: "first-delimiter" });
+    pages.push({ isDelimiter: true });
   }
   for (
     let j = Math.max(1, page - space) + 1;
     j < Math.min(lastPageNumber, page + space);
     j++
   ) {
-    pages.push({ index: j, isButton: true, id: `page-${j}` });
+    pages.push({ index: j, isButton: true });
   }
   if (page < lastPageNumber - space) {
-    pages.push({ isDelimiter: true, id: "last-delimiter" });
+    pages.push({ isDelimiter: true });
   }
-  pages.push({
-    index: lastPageNumber,
-    isButton: true,
-    id: `page-${lastPageNumber}`
-  });
+  pages.push({ index: lastPageNumber, isButton: true });
   const activePage = pages.find(p => p.index === page);
   if (activePage) {
     activePage.active = true;
@@ -107,7 +103,6 @@ const Pagination = ({
   pageNext,
   pagePrevious,
   setCurrentPage,
-  ariaLabel,
   themeValues
 }) => {
   const { isMobile } = useContext(ThemeContext);
@@ -128,9 +123,12 @@ const Pagination = ({
     &:hover {
         background-color: ${themeValues.hoverBackgroundColor}
     }
+    &:focus {
+      outline: none
+    }
   `;
 
-  const currentPageStyles = `
+  const extraDisabledStyles = `
     border: ${activeBorderWidth} solid ${numberColor ??
     themeValues.numberColor};
     color: ${numberColor ?? themeValues.activeColor};
@@ -140,27 +138,14 @@ const Pagination = ({
     }
     &:hover {
       background-color: initial;
-      border: ${activeBorderWidth} solid ${numberColor ??
-    themeValues.numberColor};
-      background-color: ${themeValues.activeBackgroundColor};
     }
   `;
 
   return (
-    <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; } };"
-    >
+    <Cluster justify="center" childGap={childGap}>
       {currentPage > 1 ? (
         <PrevNextButton
           action={pagePrevious}
-          ariaLabel={`Previous Page`}
           arrowColor={arrowColor ?? themeValues.arrowColor}
           borderRadius={borderRadius}
           buttonHeight={buttonHeight}
@@ -193,43 +178,35 @@ const Pagination = ({
           )
         : getPagesPanel(currentPage, pageCount).map((item, index) =>
             item.isButton ? (
-              <Box
-                padding="0"
-                extraStyles={`max-height: ${buttonHeight};`}
-                as="li"
-                key={item.id}
-              >
+              <Box padding="0" extraStyles={`max-height: ${buttonHeight};`}>
                 <ButtonWithAction
                   variant="ghost"
+                  key={item.index}
                   text={item.index}
-                  aria-current={item.active ? "page" : undefined}
-                  aria-label={`${
-                    item.index == pageCount ? "Last Page, " : ""
-                  }page ${item.index}`}
+                  disabled={item.active}
+                  extraDisabledStyles={extraDisabledStyles}
                   action={
                     !item.active
                       ? () => setCurrentPage({ pageNumber: item.index })
                       : noop
                   }
                   textExtraStyles={`font-size: ${fontSize}; font-weight: ${fontWeight};`}
-                  extraStyles={`${extraStyles}${
-                    item.active ? currentPageStyles : ""
-                  }`}
+                  extraStyles={extraStyles}
                   dataQa={index}
                 >
                   {item.index}
                 </ButtonWithAction>
               </Box>
             ) : (
-              <Box padding="0 10px" as="li" key={item.id}>
+              <Box padding="0 10px">
                 <Cluster justify="flex-end">
                   <Text
+                    key={index}
                     variant="pXL"
                     weight={fontWeight}
                     color={numberColor ?? themeValues.numberColor}
-                    role="presentation"
                   >
-                    {"…"}
+                    {"..."}
                   </Text>
                 </Cluster>
               </Box>
@@ -238,7 +215,6 @@ 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,7 +14,6 @@ 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,9 +14,6 @@ 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",
@@ -31,18 +28,13 @@ const PaymentFormACH = ({
   handleSubmit = noop,
   showWalletCheckbox,
   saveToWallet,
-  walletCheckboxMarked,
-  termsContent,
-  termsTitle = "Terms & Conditions"
+  walletCheckboxMarked
 }) => {
   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"
@@ -161,32 +153,13 @@ const PaymentFormACH = ({
             hidden={hideDefaultPayment}
           />
         )}
-        {(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>
+        {showWalletCheckbox && (
+          <Checkbox
+            name="bank checkbox"
+            title="Save checking account to wallet"
+            checked={walletCheckboxMarked}
+            onChange={saveToWallet}
+          />
         )}
       </FormInputColumn>
     </FormContainer>

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

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

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

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

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

@@ -14,7 +14,6 @@ const TermsAndConditionsModal = ({
   acceptText,
   terms,
   variant,
-  linkVariant = "p",
   themeValues
 }) => (
   <Modal
@@ -43,14 +42,14 @@ const TermsAndConditionsModal = ({
     }}
   >
     <Text
-      variant={linkVariant}
+      variant={variant === "default" ? "pS" : "pXS"}
       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; cursor: pointer`}
+      extraStyles={`display: inline-block; width: fit-content;`}
     >
       {link}
     </Text>

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

@@ -11,15 +11,6 @@ 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)}
@@ -30,7 +21,6 @@ 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)}
   />
 );