@thecb/components 9.3.5-beta.0 → 9.4.0-beta.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "9.3.5-beta.0",
+  "version": "9.4.0-beta.0",
   "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,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

@@ -3,11 +3,7 @@ const fontWeight = {
   pS: "600",
   p: "600",
   pL: "600",
-  h6: "700",
-  regular: "600",
-  extraSmall: "600",
-  small: "600",
-  large: "600"
+  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/atoms/searchable-select/SearchableSelect.js

@@ -38,6 +38,7 @@ const SearchableSelect = ({
       selectItem(value);
     }
   };
+
   return (
     <Box
       padding="1rem"
@@ -60,20 +61,25 @@ const SearchableSelect = ({
         extraStyles={`overflow-y: scroll; max-height: 250px;`}
       >
         <Stack>
-          {itemList.map(value => (
-            <Checkbox
-              key={value.name}
-              title={value.name}
-              name={value.name}
-              checked={
-                selectedItems?.find(item => item?.name === value?.name) ?? false
-              }
-              onChange={() => handleSelect(value)}
-              textExtraStyles={`margin: 0;`}
-              disabled={disabled}
-              extraStyles={`margin: 0.5rem;`}
-            />
-          ))}
+          {itemList
+            .sort((a, b) =>
+              a.name.toLowerCase().localeCompare(b.name.toLowerCase())
+            )
+            .map(value => (
+              <Checkbox
+                key={value.name}
+                title={value.name}
+                name={value.name}
+                checked={
+                  selectedItems?.find(item => item?.name === value?.name) ??
+                  false
+                }
+                onChange={() => handleSelect(value)}
+                textExtraStyles={`margin: 0;`}
+                disabled={disabled}
+                extraStyles={`margin: 0.5rem;`}
+              />
+            ))}
         </Stack>
       </Box>
     </Box>

package/src/components/atoms/searchable-select/SearchableSelect.stories.js

@@ -14,8 +14,8 @@ const { mapStateToProps, mapDispatchToProps, reducer } = createFormState({
 
 const items = [
   { name: "Foo", value: "foo-value" },
-  { name: "Bar", value: "bar-value" },
-  { name: "Baz", value: "baz-value" }
+  { name: "Baz", value: "baz-value" },
+  { name: "Bar", value: "bar-value" }
 ];
 
 const FormWrapper = props => {

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: "large", 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,25 +0,0 @@
-import React from "react";
-import Detail from "../detail";
-
-const LabeledAmountV2 = ({
-  variant = "regular",
-  label,
-  amount,
-  themeValues,
-  as,
-  extraStyles
-}) => {
-  return (
-    <Detail
-      variant={variant}
-      as={as}
-      weight={themeValues.fontWeight}
-      extraStyles={`display: flex; justify-content: space-between; ${extraStyles}`}
-    >
-      <span>{label}</span>
-      <span>{amount}</span>
-    </Detail>
-  );
-};
-
-export default LabeledAmountV2;