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

package/package.json

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

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

@@ -1,8 +1,10 @@
 import React from "react";
 import { Cluster, Stack } from "../layouts";
 import Paragraph from "../paragraph";
+import Text from "../text";
 import { themeComponent } from "../../../util/themeUtils";
 import { fallbackValues } from "./LineItem.theme";
+import { FONT_WEIGHT_SEMIBOLD } from "../../../constants/style_constants";
 
 const LineItem = ({
   description,
@@ -13,14 +15,30 @@ const LineItem = ({
   visibleFields = [],
   displayQuantity = null
 }) => {
+  const formatAttrKeys = key => {
+    const keyWithoutUnderscores = key.replace(/_/g, " ");
+    const capitalizedKey = keyWithoutUnderscores
+      .split(" ")
+      .map(word => word.charAt(0).toUpperCase())
+      .join(" ");
+    return capitalizedKey;
+  };
+
   const visibleCustomAttrs = customAttributes
-    ?.filter(attr => visibleFields.includes(attr.key))
+    ?.filter(
+      attr => visibleFields.includes(attr.key) && attr.key !== "description"
+    )
     ?.map(attr => (
       <Paragraph
         variant={themeValues.paragraphVariant}
         weight="400"
         key={attr.key}
-      >{`${attr.key}: ${attr.value}`}</Paragraph>
+      >
+        <Text weight={FONT_WEIGHT_SEMIBOLD}>{`${formatAttrKeys(
+          attr.key
+        )}:`}</Text>
+        <Text>{` ${attr.value}`}</Text>
+      </Paragraph>
     ));
 
   return (