@thecb/components 11.1.13-beta.0 → 11.1.13

package/package.json

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

package/src/components/atoms/form-layouts/FormInput.js

@@ -99,6 +99,7 @@ const FormattedInputField = styled(({ showErrors, themeValues, ...props }) => (
 
 const FormInput = ({
   type = "text",
+  labelDisplayOverride = null,
   labelTextWhenNoError = "",
   errorMessages,
   isNum = false,
@@ -147,39 +148,47 @@ const FormInput = ({
       <Box padding="0">
         {helperModal ? (
           <Cluster justify="space-between" align="center">
-            <Text
-              as="label"
-              color={themeValues.labelColor}
-              variant={labelTextVariant}
-              weight={themeValues.fontWeight}
-              extraStyles={`word-break: break-word;
+            {labelDisplayOverride ? (
+              labelDisplayOverride
+            ) : (
+              <Text
+                as="label"
+                color={themeValues.labelColor}
+                variant={labelTextVariant}
+                weight={themeValues.fontWeight}
+                extraStyles={`word-break: break-word;
                   font-family: Public Sans;
                   &::first-letter {
                     text-transform: uppercase;
                   }`}
-              id={createIdFromString(labelTextWhenNoError)}
-            >
-              {labelTextWhenNoError}
-            </Text>
+                id={createIdFromString(labelTextWhenNoError)}
+              >
+                {labelTextWhenNoError}
+              </Text>
+            )}
             {helperModal()}
           </Cluster>
         ) : (
           <Box padding="0" minWidth="100%">
             <Cluster justify="space-between" align="center">
-              <Text
-                as="label"
-                color={themeValues.labelColor}
-                variant={labelTextVariant}
-                fontWeight={themeValues.fontWeight}
-                extraStyles={`word-break: break-word;
+              {labelDisplayOverride ? (
+                labelDisplayOverride
+              ) : (
+                <Text
+                  as="label"
+                  color={themeValues.labelColor}
+                  variant={labelTextVariant}
+                  fontWeight={themeValues.fontWeight}
+                  extraStyles={`word-break: break-word;
                     font-family: Public Sans;
                     &::first-letter {
                       text-transform: uppercase;
                     }`}
-                id={createIdFromString(labelTextWhenNoError)}
-              >
-                {labelTextWhenNoError}
-              </Text>
+                  id={createIdFromString(labelTextWhenNoError)}
+                >
+                  {labelTextWhenNoError}
+                </Text>
+              )}
               {type === "password" && (
                 <Text
                   variant={labelTextVariant}

package/src/components/molecules/partial-amount-form/PartialAmountField.js

@@ -2,18 +2,39 @@ import React from "react";
 import { equals } from "ramda";
 import { FormInput } from "../../atoms/form-layouts";
 import { displayCurrency } from "../../../util/general";
-import Text from "../../atoms/text";
-
+import { Stack, Detail, Text } from "../../atoms";
+import { themeComponent } from "../../../util/themeUtils";
+import { fallbackValues } from "./PartialAmountField.theme";
 const PartialAmountField = ({
   lineItem,
   field,
   showErrors,
   errorMessages,
   moneyFormat,
-  fieldActions
+  fieldActions,
+  themeValues
 }) => (
   <FormInput
     labelTextWhenNoError={lineItem.description}
+    labelDisplayOverride={
+      <Stack childGap="0px">
+        <Detail
+          as="h3"
+          variant={themeValues.detailVariant}
+          weight={themeValues.weightTitle}
+        >
+          <span>{lineItem.description}</span>
+        </Detail>
+        <Detail
+          id={lineItem.subDescription}
+          as="p"
+          variant={themeValues.detailVariant}
+          weight="400"
+        >
+          {lineItem.subDescription}
+        </Detail>
+      </Stack>
+    }
     key={lineItem.id}
     field={field}
     fieldActions={fieldActions}
@@ -46,4 +67,12 @@ function arePropsEqual(prevProps, nextProps) {
   );
 }
 
-export default React.memo(PartialAmountField, arePropsEqual);
+export default React.memo(
+  themeComponent(
+    PartialAmountField,
+    "PartialAmountField",
+    fallbackValues,
+    "default"
+  ),
+  arePropsEqual
+);

package/src/components/molecules/partial-amount-form/PartialAmountField.theme.js

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