@thecb/components 4.1.22 → 4.1.24

package/dist/index.cjs.js

@@ -34492,7 +34492,10 @@ var CollapsibleSection = function CollapsibleSection(_ref) {
       openHeight = _ref$openHeight === void 0 ? "auto" : _ref$openHeight,
       children = _ref.children,
       _ref$customTitle = _ref.customTitle,
-      customTitle = _ref$customTitle === void 0 ? false : _ref$customTitle;
+      customTitle = _ref$customTitle === void 0 ? false : _ref$customTitle,
+      _ref$stackTitle = _ref.stackTitle,
+      stackTitle = _ref$stackTitle === void 0 ? false : _ref$stackTitle,
+      stackTitleContent = _ref.stackTitleContent;
 
   var handleKeyDown = function handleKeyDown(e) {
     if (e.keyCode === 13) {
@@ -34536,8 +34539,8 @@ var CollapsibleSection = function CollapsibleSection(_ref) {
     hoverStyles: "outline: none;",
     animate: isOpen ? "open" : "closed",
     positionTransition: true
-  }, /*#__PURE__*/React__default.createElement(Stack, {
-    childGap: isOpen ? "0.5rem" : "0rem"
+  }, stackTitle && /*#__PURE__*/React__default.createElement(React.Fragment, null, stackTitleContent), /*#__PURE__*/React__default.createElement(Stack, {
+    childGap: isOpen && !isMobile ? "0.5rem" : "0rem"
   }, /*#__PURE__*/React__default.createElement(Box, {
     padding: customPadding ? customPadding : "0",
     background: themeValues.headingBackgroundColor,
@@ -34931,10 +34934,11 @@ var TableListItem = function TableListItem(_ref) {
       canEdit = _ref$canEdit === void 0 ? false : _ref$canEdit,
       _ref$canRemove = _ref.canRemove,
       canRemove = _ref$canRemove === void 0 ? false : _ref$canRemove,
-      isMobile = _ref.isMobile;
+      isMobile = _ref.isMobile,
+      borderTopItem = _ref.borderTopItem;
   return /*#__PURE__*/React__default.createElement(Box, {
     padding: "0px",
-    extraStyles: "&:last-child {\n    > * {\n      border-bottom: none;\n    }\n  }"
+    extraStyles: "&:last-child {\n    > * {\n      border-bottom: none;\n    }\n  }\n  ".concat(isMobile && borderTopItem && "&:first-child {\n    > * {\n      border-top: 1px solid ".concat(GHOST_GREY, ";\n    }\n  }"), "\n  ")
   }, /*#__PURE__*/React__default.createElement(ItemWrapper, null, /*#__PURE__*/React__default.createElement(EditableTableListItem, {
     isMobile: isMobile
   }, /*#__PURE__*/React__default.createElement(TableItemKey, {
@@ -38262,7 +38266,11 @@ var AmountModule = function AmountModule(_ref) {
     padding: "0 0.25rem 0 0"
   }, /*#__PURE__*/React__default.createElement(Stack, {
     childGap: "0"
-  }, /*#__PURE__*/React__default.createElement(AmountCallout$1, {
+  }, isMobile && /*#__PURE__*/React__default.createElement(Text$1, {
+    variant: "pS",
+    weight: FONT_WEIGHT_SEMIBOLD,
+    textAlign: "left"
+  }, "Amount Due"), /*#__PURE__*/React__default.createElement(AmountCallout$1, {
     amount: displayCurrency(totalAmountDue),
     textAlign: isMobile ? "left" : "right"
   }), autoPayEnabled && /*#__PURE__*/React__default.createElement(AutopayModalModule, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "4.1.22",
+  "version": "4.1.24",
   "description": "Common lib for CityBase react components",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",

package/src/components/molecules/collapsible-section/CollapsibleSection.js

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { Fragment } from "react";
 import { fallbackValues } from "./CollapsibleSection.theme";
 import { AnimatePresence } from "framer-motion";
 import { themeComponent } from "../../../util/themeUtils";
@@ -19,7 +19,9 @@ const CollapsibleSection = ({
   initiallyOpen = true,
   openHeight = "auto",
   children,
-  customTitle = false
+  customTitle = false,
+  stackTitle = false,
+  stackTitleContent
 }) => {
   const handleKeyDown = e => {
     if (e.keyCode === 13) {
@@ -68,7 +70,8 @@ const CollapsibleSection = ({
       animate={isOpen ? "open" : "closed"}
       positionTransition
     >
-      <Stack childGap={isOpen ? "0.5rem" : "0rem"}>
+      {stackTitle && <Fragment>{stackTitleContent}</Fragment>}
+      <Stack childGap={isOpen && !isMobile ? "0.5rem" : "0rem"}>
         <Box
           padding={customPadding ? customPadding : "0"}
           background={themeValues.headingBackgroundColor}

package/src/components/molecules/editable-table/TableListItem.js

@@ -9,14 +9,15 @@ import {
 } from "./EditableTable.styled";
 import { Box } from "../../atoms/layouts";
 import Text from "../../atoms/text";
-import { CHARADE_GREY } from "../../../constants/colors";
+import { CHARADE_GREY, GHOST_GREY } from "../../../constants/colors";
 
 const TableListItem = ({
   title,
   value,
   canEdit = false,
   canRemove = false,
-  isMobile
+  isMobile,
+  borderTopItem
 }) => (
   <Box
     padding="0px"
@@ -24,7 +25,15 @@ const TableListItem = ({
     > * {
       border-bottom: none;
     }
+  }
+  ${isMobile &&
+    borderTopItem &&
+    `&:first-child {
+    > * {
+      border-top: 1px solid ${GHOST_GREY};
+    }
   }`}
+  `}
   >
     <ItemWrapper>
       <EditableTableListItem isMobile={isMobile}>

package/src/components/molecules/obligation/modules/AmountModule.js

@@ -1,6 +1,8 @@
 import React, { useState } from "react";
 import AmountCallout from "../../../atoms/amount-callout";
 import { Box, Stack } from "../../../atoms/layouts";
+import Text from "../../../atoms/text";
+import { FONT_WEIGHT_SEMIBOLD } from "../../../../constants/style_constants";
 import { displayCurrency } from "../../../../util/general";
 import { AutopayModalModule } from "./AutopayModalModule";
 
@@ -19,6 +21,11 @@ const AmountModule = ({
   return (
     <Box padding="0 0.25rem 0 0">
       <Stack childGap="0">
+        {isMobile && (
+          <Text variant="pS" weight={FONT_WEIGHT_SEMIBOLD} textAlign="left">
+            Amount Due
+          </Text>
+        )}
         <AmountCallout
           amount={displayCurrency(totalAmountDue)}
           textAlign={isMobile ? "left" : "right"}