@thecb/components 9.4.0 → 9.4.1

package/package.json

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

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

@@ -1,39 +1,14 @@
 import React from "react";
 import { fallbackValues } from "./LabeledAmount.theme";
 import { themeComponent } from "../../../util/themeUtils";
-import { Stack } from "../layouts";
-import Heading from "../heading";
-import Paragraph from "../paragraph";
+import LabeledAmountV1 from "./LabeledAmountV1";
+import LabeledAmountV2 from "./LabeledAmountV2";
 
-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>
-  );
+const LabeledAmount = ({ version = "v1", ...rest }) => {
+  const LabeledAmountComponent =
+    version === "v1" ? LabeledAmountV1 : LabeledAmountV2;
+
+  return <LabeledAmountComponent {...rest} />;
 };
 
 export default themeComponent(

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

@@ -9,16 +9,29 @@ 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,9 +1,15 @@
 const fontWeight = {
+  // v1 variants
   default: "600",
   pS: "600",
   p: "600",
   pL: "600",
-  h6: "700"
+  h6: "700",
+  // v2 variants
+  regular: "600", // fontsize Detail large
+  extraSmall: "600", //fontsize Detail small
+  small: "600", // fontsize Detail regular
+  large: "700" // fontsize Title small
 };
 
 export const fallbackValues = {

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

@@ -0,0 +1,37 @@
+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

@@ -0,0 +1,34 @@
+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;

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

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

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

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

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 Heading from "../../atoms/heading";
+import Title from "../../atoms/title";
 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">
-                <Heading variant="h6" weight={FONT_WEIGHT_SEMIBOLD}>
+                <Title as="h2" weight={FONT_WEIGHT_SEMIBOLD} fontSize="1.25rem">
                   {modalHeaderText}
-                </Heading>
+                </Title>
               </Cluster>
             </Box>
             <Box background={modalBodyBg} padding="1.5rem">

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

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

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

@@ -46,6 +46,42 @@ 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: "pL", small: "pS" };
-const labeledAmountTotal = { default: "h6", small: "p" };
+const labeledAmountSubtotal = { default: "regular", small: "small" };
+const labeledAmountTotal = { default: "large", small: "small" };
 
 export const fallbackValues = {
   backgroundColor,