@thecb/components 9.3.5-beta.1 → 9.3.6-beta.0

package/package.json

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

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

@@ -1,6 +1,6 @@
 import React from "react";
 
-const ShoppingCartIcon = () => (
+const ShoppingCartIcon = ({ iconFill }) => (
   <svg
     width="32px"
     height="32px"
@@ -31,8 +31,7 @@ const ShoppingCartIcon = () => (
           <path
             d="M18.7499553,20.499994 C19.348912,20.499994 19.8632339,20.2851508 20.2929204,19.8554643 C20.7226068,19.4257779 20.9374501,18.911456 20.9374501,18.3124993 C20.9374501,17.8958334 20.8267735,17.5117199 20.6054196,17.1601583 C20.3840658,16.8085966 20.0780771,16.5416703 19.6874531,16.3593789 L19.6874531,16.3593789 L19.9218275,15.3828187 C19.9739105,15.0963613 19.9088069,14.835945 19.7265155,14.6015706 C19.544224,14.3671962 19.3098496,14.2500089 19.0233921,14.2500089 L19.0233921,14.2500089 L8.5156047,14.2500089 L8.28123026,13.0000119 L19.7265155,13.0000119 C19.9348481,13.0000119 20.1236501,12.9349077 20.2929204,12.8046999 C20.4621906,12.6744921 20.5728678,12.4922006 20.6249508,12.2578262 L20.6249508,12.2578262 L22.4608839,4.13284556 C22.5390088,3.84638811 22.4869258,3.58597187 22.3046343,3.35159742 C22.1223429,3.11722298 21.8749478,3.00004172 21.5624486,3.00004172 L21.5624486,3.00004172 L6.21092269,3.00004172 L5.85936103,1.24222745 C5.80727802,1.03389482 5.6966008,0.858113985 5.52733057,0.714884961 C5.35806034,0.571655937 5.16925831,0.500041723 4.96092567,0.500041723 L4.96092567,0.500041723 L0.937497765,0.500041723 C0.67708152,0.500041723 0.455728279,0.591187141 0.273436848,0.773478571 C0.0911454173,0.955770002 0,1.17712324 0,1.43753949 L0,1.43753949 L0,2.062538 C0,2.32295424 0.0911454173,2.54430748 0.273436848,2.72659891 C0.455728279,2.90889035 0.67708152,3.00004172 0.937497765,3.00004172 L0.937497765,3.00004172 L3.67186625,3.00004172 L6.40623473,16.3984413 C6.06769367,16.606774 5.80076742,16.8802108 5.60545539,17.2187519 C5.41014335,17.5572929 5.31248733,17.9218752 5.31248733,18.3124993 C5.31248733,18.911456 5.52733057,19.4257779 5.95701705,19.8554643 C6.38670352,20.2851508 6.90102541,20.499994 7.49998212,20.499994 C8.09893883,20.499994 8.61326071,20.2851508 9.04294719,19.8554643 C9.47263367,19.4257779 9.6874769,18.904946 9.6874769,18.2929681 C9.6874769,17.6809901 9.46612307,17.1666689 9.02341599,16.750003 L9.02341599,16.750003 L17.2265214,16.750003 C16.7838143,17.1666689 16.5624605,17.6809901 16.5624605,18.2929681 C16.5624605,18.904946 16.7773037,19.4257779 17.2069902,19.8554643 C17.6366767,20.2851508 18.1509986,20.499994 18.7499553,20.499994 Z"
             id="cart-badge-shopping-cart"
-            fill="#FFFFFF"
-            fillRule="nonzero"
+            fill={iconFill ?? "#FFFFFF"}
           ></path>
         </g>
       </g>

package/src/components/atoms/jumbo/Jumbo.js

@@ -20,7 +20,8 @@ const Jumbo = ({
   total,
   itemsCount,
   showCartStatus = false,
-  openCartSlider
+  openCartSlider,
+  extraStyles
 }) => {
   const { isMobile } = useContext(ThemeContext);
   return (
@@ -29,6 +30,7 @@ const Jumbo = ({
       minHeight="65px"
       id={`heroImage-${slug}`}
       className="themeJumboBackground"
+      extraStyles={extraStyles}
     >
       <Center maxWidth="76.5rem">
         <Cover singleChild minHeight="65px">

package/src/components/atoms/labeled-amount/LabeledAmount.js

@@ -1,14 +1,39 @@
 import React from "react";
 import { fallbackValues } from "./LabeledAmount.theme";
 import { themeComponent } from "../../../util/themeUtils";
-import LabeledAmountV1 from "./LabeledAmountV1";
-import LabeledAmountV2 from "./LabeledAmountV2";
+import { Stack } from "../layouts";
+import Heading from "../heading";
+import Paragraph from "../paragraph";
 
-const LabeledAmount = ({ version = "v1", ...rest }) => {
-  const LabeledAmountComponent =
-    version === "v1" ? LabeledAmountV1 : LabeledAmountV2;
-
-  return <LabeledAmountComponent {...rest} />;
+const LabeledAmount = ({
+  variant = "pL",
+  label,
+  amount,
+  themeValues,
+  as,
+  extraStyles
+}) => {
+  const LabeledAmountText = variant === "h6" ? Heading : Paragraph;
+  return (
+    <Stack direction="row">
+      <LabeledAmountText
+        variant={variant}
+        as={as}
+        weight={themeValues.fontWeight}
+        extraStyles={`${extraStyles}; text-align: start; flex: 3;`}
+      >
+        {label}:
+      </LabeledAmountText>
+      <LabeledAmountText
+        variant={variant}
+        as={as}
+        weight={themeValues.fontWeight}
+        extraStyles={`${extraStyles}; text-align: end; flex: 1;`}
+      >
+        {amount}
+      </LabeledAmountText>
+    </Stack>
+  );
 };
 
 export default themeComponent(

package/src/components/atoms/labeled-amount/LabeledAmount.stories.js

@@ -9,29 +9,16 @@ const variants = {
   p: "p",
   pL: "pL",
   h6: "h6",
-  small: "small",
-  regular: "regular",
-  large: "large",
   None: undefined
 };
 const defaultValue = "default";
-
-const versionsLabel = "version";
-const versions = {
-  v1: "v1",
-  v2: "v2"
-};
-const defaultVersion = "v1";
-
 const groupId = "props";
 
 export const labeledAmount = () => (
   <LabeledAmount
     variant={select(variantsLabel, variants, defaultValue, groupId)}
-    as={text("as", "p", groupId)}
     label={text("label", "Amount", groupId)}
     amount={text("amount", "$1.23", groupId)}
-    version={select(versionsLabel, versions, defaultVersion, groupId)}
   />
 );
 

package/src/components/atoms/labeled-amount/LabeledAmount.theme.js

@@ -1,15 +1,9 @@
 const fontWeight = {
-  // v1 variants
   default: "600",
   pS: "600",
   p: "600",
   pL: "600",
-  h6: "700",
-  // v2 variants
-  regular: "600", // fontsize Detail large
-  extraSmall: "600", //fontsize Detail small
-  small: "600", // fontsize Detail regular
-  large: "700" // fontsize Title small
+  h6: "700"
 };
 
 export const fallbackValues = {

package/src/components/atoms/line-item/LineItem.js

@@ -1,6 +1,6 @@
 import React from "react";
-import { Stack } from "../layouts";
-import Detail from "../detail";
+import { Cluster, Stack } from "../layouts";
+import Paragraph from "../paragraph";
 import { themeComponent } from "../../../util/themeUtils";
 import { fallbackValues } from "./LineItem.theme";
 import { STORM_GREY } from "../../../constants/colors";
@@ -28,29 +28,43 @@ const LineItem = ({
       attr => visibleFields?.includes(attr.key) && attr.key !== "description"
     )
     ?.map(attr => (
-      <Detail variant="small" weight="400" key={attr.key} color={STORM_GREY}>
+      <Paragraph variant="pS" weight="400" key={attr.key} color={STORM_GREY}>
         {`${formatAttrKeys(attr.key)}: ${attr.value}`}
-      </Detail>
+      </Paragraph>
     ));
+
   return (
-    <Stack childGap="0px">
-      <Detail
-        as="h3"
-        variant={themeValues.detailVariant}
-        weight={themeValues.weightTitle}
-        extraStyles={`display: flex; justify-content: space-between;`}
-      >
-        <span>{description}</span>
-        <span>{!!displayQuantity && `x${displayQuantity}`}</span>
-        <span>{amount}</span>
-      </Detail>
-      <Detail as="p" variant={themeValues.detailVariant} weight="400">
-        {subDescription}
-      </Detail>
-      {visibleCustomAttrs && (
-        <Stack childGap="0.25rem">{visibleCustomAttrs}</Stack>
+    <Cluster nowrap justify="space-between" align="start">
+      <Stack childGap="0px">
+        <Paragraph
+          variant={themeValues.paragraphVariant}
+          weight={themeValues.weightTitle}
+        >
+          {description}
+        </Paragraph>
+        <Paragraph variant={themeValues.paragraphVariant} weight="400">
+          {subDescription}
+        </Paragraph>
+        {visibleCustomAttrs && (
+          <Stack childGap="0.25rem">{visibleCustomAttrs}</Stack>
+        )}
+      </Stack>
+      {!!displayQuantity && (
+        <Paragraph
+          variant={themeValues.paragraphVariant}
+          weight={themeValues.weightTitle}
+        >
+          {`x${displayQuantity}`}
+        </Paragraph>
       )}
-    </Stack>
+      <Paragraph
+        variant={themeValues.paragraphVariant}
+        weight="600"
+        extraStyles="margin: 0; text-align: end; min-width: fit-content; padding-left: 32px;"
+      >
+        {amount}
+      </Paragraph>
+    </Cluster>
   );
 };
 

package/src/components/atoms/line-item/LineItem.theme.js

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

package/src/components/molecules/modal/Modal.js

@@ -4,7 +4,7 @@ import AriaModal from "react-aria-modal";
 import { WHITE, ATHENS_GREY, SILVER_GREY } from "../../../constants/colors";
 import { FONT_WEIGHT_SEMIBOLD } from "../../../constants/style_constants";
 import Paragraph from "../../atoms/paragraph";
-import Title from "../../atoms/title";
+import Heading from "../../atoms/heading";
 import ButtonWithAction from "../../atoms/button-with-action";
 import { Box, Stack, Cluster } from "../../atoms/layouts";
 
@@ -84,9 +84,9 @@ const Modal = ({
           >
             <Box background={modalHeaderBg} padding="1.5rem">
               <Cluster justify="flex-start" align="center">
-                <Title as="h2" weight={FONT_WEIGHT_SEMIBOLD} fontSize="1.25rem">
+                <Heading variant="h6" weight={FONT_WEIGHT_SEMIBOLD}>
                   {modalHeaderText}
-                </Title>
+                </Heading>
               </Cluster>
             </Box>
             <Box background={modalBodyBg} padding="1.5rem">

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

@@ -1,5 +1,12 @@
 import React, { useState, Fragment } from "react";
-import { Stack, Cluster, Box, Motion } from "../../atoms/layouts";
+import {
+  Stack,
+  Cluster,
+  Box,
+  Motion,
+  Cover,
+  Center
+} from "../../atoms/layouts";
 import { fallbackValues } from "./PaymentDetails.theme";
 
 import { displayCurrency } from "../../../util/general";
@@ -15,7 +22,7 @@ import {
   FONT_WEIGHT_BOLD,
   FONT_WEIGHT_REGULAR
 } from "../../../constants/style_constants";
-import { ATHENS_GREY } from "../../../constants/colors";
+import { ATHENS_GREY, GRECIAN_GREY } from "../../../constants/colors";
 import ButtonWithAction from "../../atoms/button-with-action";
 import Text from "../../atoms/text";
 import Alert from "../../atoms/alert";
@@ -77,9 +84,6 @@ const PaymentDetailsContent = ({
           <SolidDivider />
         </Box>
         <LabeledAmount
-          version="v2"
-          as="h3"
-          variant="small"
           extraStyles={`font-weight: ${FONT_WEIGHT_REGULAR}; font-size: 14px;`}
           label="Amount paid"
           amount={displayCurrency(voidableAmountPaid)}
@@ -93,11 +97,9 @@ const PaymentDetailsContent = ({
       <>
         <Box padding="0.5rem 0">
           <LabeledAmount
-            version="v2"
             variant={themeValues.labeledAmountSubtotal}
             label="Subtotal"
             amount={displayCurrency(subtotal)}
-            as="h3"
           />
           {feeElems}
         </Box>
@@ -107,14 +109,13 @@ const PaymentDetailsContent = ({
       <></>
     )}
     <LabeledAmount
-      version="v2"
-      as="h3"
+      as="p"
       variant={themeValues.labeledAmountTotal}
       label={hasVoidablePaymentsSection ? "Remaining amount due" : "Total"}
       amount={displayCurrency(
         typeof remainingBalance === "number" ? remainingBalance : total
       )}
-      extraStyles={`margin-top: 1rem;`}
+      extraStyles={variant === "small" && `font-weight: ${FONT_WEIGHT_BOLD};`}
     />
   </Stack>
 );
@@ -276,8 +277,6 @@ const PaymentDetails = ({
     <Fragment key={fee.label}>
       <Box padding="4px 0" />
       <LabeledAmount
-        version="v2"
-        as="h3"
         key={fee.label}
         variant={themeValues.labeledAmountSubtotal}
         {...fee}
@@ -329,7 +328,7 @@ const PaymentDetails = ({
       <Cluster justify="space-between" align="center">
         <Title
           weight={FONT_WEIGHT_BOLD}
-          as="h2"
+          as="h1"
           extraStyles={`font-size: 1.375rem;`}
           id="payment-details-title"
         >
@@ -346,7 +345,7 @@ const PaymentDetails = ({
     </Box>
   ) : (
     <Title
-      as="h2"
+      as="h1"
       weight={FONT_WEIGHT_BOLD}
       margin="1rem 0 0 0"
       extraStyles={`font-size: 1.75rem;`}

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

@@ -46,42 +46,6 @@ const payment = {
       description: "0034 Bednar Mission Unit: 79",
       quantity: 1,
       subDescription: "PIN: 71-83-630-216-0724"
-    },
-    {
-      amount: 42042,
-      customAttributes: [
-        {
-          key: "parcel_id",
-          value: "71-83-630-216-0724"
-        },
-        {
-          key: "property_city",
-          value: "North Breana"
-        },
-        {
-          key: "property_class",
-          value: "7-91"
-        },
-        {
-          key: "property_secondary_address",
-          value: "79"
-        },
-        {
-          key: "property_street_address",
-          value: "0034 Bednar Mission"
-        },
-        {
-          key: "property_zip_code",
-          value: "80326-6917"
-        },
-        {
-          key: "tax_rate",
-          value: "7.076"
-        }
-      ],
-      description: "42 Bednar Mission Unit: 42",
-      quantity: 1,
-      subDescription: "PIN: 71-83-630-216-0724"
     }
   ],
   subtotal: 77294,

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

@@ -1,7 +1,7 @@
 const backgroundColor = { default: "transparent", small: "transparent" };
 const lineItem = { default: "default", small: "small" };
-const labeledAmountSubtotal = { default: "regular", small: "small" };
-const labeledAmountTotal = { default: "large", small: "small" };
+const labeledAmountSubtotal = { default: "pL", small: "pS" };
+const labeledAmountTotal = { default: "h6", small: "p" };
 
 export const fallbackValues = {
   backgroundColor,

package/src/components/atoms/labeled-amount/LabeledAmountV1.js

@@ -1,37 +0,0 @@
-import React from "react";
-import { Stack } from "../layouts";
-import Heading from "../heading";
-import Paragraph from "../paragraph";
-
-const LabeledAmountV1 = ({
-  variant = "pL",
-  label,
-  amount,
-  themeValues,
-  as,
-  extraStyles
-}) => {
-  const LabeledAmountText = variant === "h6" ? Heading : Paragraph;
-  return (
-    <Stack direction="row">
-      <LabeledAmountText
-        variant={variant}
-        as={as}
-        weight={themeValues.fontWeight}
-        extraStyles={`${extraStyles}; text-align: start; flex: 3;`}
-      >
-        {label}:
-      </LabeledAmountText>
-      <LabeledAmountText
-        variant={variant}
-        as={as}
-        weight={themeValues.fontWeight}
-        extraStyles={`${extraStyles}; text-align: end; flex: 1;`}
-      >
-        {amount}
-      </LabeledAmountText>
-    </Stack>
-  );
-};
-
-export default LabeledAmountV1;

package/src/components/atoms/labeled-amount/LabeledAmountV2.js

@@ -1,34 +0,0 @@
-import React from "react";
-import Detail from "../detail";
-import Title from "../title";
-
-const LabeledAmountV2 = ({
-  variant = "regular",
-  label,
-  amount,
-  themeValues,
-  as,
-  extraStyles
-}) => {
-  const mappedDetailVariants = {
-    regular: "large",
-    small: "regular",
-    extraSmall: "small"
-  };
-  const LabeledAmountContainer = variant === "large" ? Title : Detail;
-  const containerVariant =
-    variant === "large" ? "small" : mappedDetailVariants[variant];
-  return (
-    <LabeledAmountContainer
-      variant={containerVariant}
-      as={as}
-      weight={themeValues.fontWeight}
-      extraStyles={`display: flex; justify-content: space-between; ${extraStyles}`}
-    >
-      <span>{label}</span>
-      <span>{amount}</span>
-    </LabeledAmountContainer>
-  );
-};
-
-export default LabeledAmountV2;