@thecb/components 10.3.3-beta.0 → 10.3.3-beta.1

package/package.json

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

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

@@ -34,9 +34,12 @@ const PaymentDetailsContent = ({
   voidableTransactionDetails,
   voidableAmountPaid,
   partialVoidAction,
-  remainingBalance
+  remainingBalance,
+  agencySubheading,
+  isCollapsible
 }) => (
   <Stack childGap="16px">
+    {isCollapsible && agencySubheading}
     {lineItemElems}
     {hasVoidablePaymentsSection && (
       <Box background={ATHENS_GREY}>
@@ -257,7 +260,7 @@ const PaymentDetails = ({
   // end partial void section
   isLoading = false,
   isError = false,
-  multiCartEnabled,
+  multiCartEnabled = false,
   agencyDisplayName
 }) => {
   const [isOpen, setIsOpen] = useState(initiallyOpen);
@@ -287,6 +290,30 @@ const PaymentDetails = ({
       />
     </Fragment>
   ));
+  const agencySubheading = (
+    <>
+      {multiCartEnabled && agencyDisplayName && (
+        <Cluster
+          justify="space-between"
+          align="center"
+          style={{ margin: isCollapsible ? "0" : "0.5rem 0" }}
+        >
+          <Title
+            weight={FONT_WEIGHT_REGULAR}
+            as="h3"
+            extraStyles={`font-size: 1rem;`}
+          >
+            {agencyDisplayName}
+          </Title>
+          {lineItems?.length && (
+            <Text variant="pS" color={themeValues.text} weight="400">
+              {`${lineItems.length}  item${lineItems.length > 1 ? "s" : ""}`}
+            </Text>
+          )}
+        </Cluster>
+      )}
+    </>
+  );
   const content = isCollapsible ? (
     <Stack childGap="0">
       <Box padding="4.5px" />
@@ -304,7 +331,9 @@ const PaymentDetails = ({
           voidableTransactionDetails,
           voidableAmountPaid,
           partialVoidAction,
-          remainingBalance
+          remainingBalance,
+          agencySubheading,
+          isCollapsible
         }}
       />
     </Stack>
@@ -321,7 +350,9 @@ const PaymentDetails = ({
         voidableTransactionDetails,
         voidableAmountPaid,
         partialVoidAction,
-        remainingBalance
+        remainingBalance,
+        agencySubheading,
+        isCollapsible
       }}
     />
   );
@@ -348,28 +379,18 @@ const PaymentDetails = ({
       </Cluster>
     </Box>
   ) : (
-    <Box width="100%" padding="none">
-      <Cluster justify="space-between" align="center">
-        <Title
-          as="h2"
-          weight={FONT_WEIGHT_BOLD}
-          margin="1rem 0 0 0"
-          extraStyles={`font-size: 1.75rem;`}
-          id="payment-details-title"
-        >
-          {titleText} HERE
-        </Title>
-        {multiCartEnabled && (
-          <Title
-            weight={FONT_WEIGHT_SEMIBOLD}
-            as="h3"
-            extraStyles={`font-size: 1.375rem;`}
-          >
-            {agencyDisplayName}
-          </Title>
-        )}
-      </Cluster>
-    </Box>
+    <>
+      <Title
+        as="h2"
+        weight={FONT_WEIGHT_BOLD}
+        margin="1rem 0 0 0"
+        extraStyles={`font-size: 1.75rem;`}
+        id="payment-details-title"
+      >
+        {titleText}
+      </Title>
+      {agencySubheading}
+    </>
   );
   return isCollapsible ? (
     <Collapsible

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

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