@thecb/components 4.1.32 → 4.2.0

package/dist/index.cjs.js

@@ -20956,7 +20956,7 @@ var FormattedCreditCard = function FormattedCreditCard(_ref) {
   }, "Autopay Enabled")));
 };
 
-var FormattedCreditCard$1 = themeComponent(FormattedCreditCard, "FormattedCreditCard", fallbackValues$j, "default");
+var FormattedCreditCard$1 = themeComponent(FormattedCreditCard, "FormattedCreditCard", fallbackValues$j);
 
 function _templateObject3$8() {
   var data = _taggedTemplateLiteral(["\n  display: block;\n  top: auto;\n  bottom: 6px;\n  left: 2px;\n  transition-duration: 0.13s;\n  transition-delay: 0.13s;\n  transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);\n  margin-top: 12px;\n  background-color: ", ";\n\n  &, &::before, &::after {\n    background-color: ", ";\n    width: 30px;\n    height: 3px;\n    position: absolute;\n    transition-property: transform;\n    transition-duration: 0.15s;\n    transition-timing-function: ease;\n  }\n\n  &::before, &::after {\n    content: \"\";\n    display: block;\n  }\n\n  &::before {\n    top: -10px;\n    transition: top 0.12s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), \n                transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19);\n  }\n\n  &::after {\n    bottom: -10px;\n    top: -20px;\n    transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), \n                opacity 0.1s linear;\n  }\n\n  &.active, &.active::before, &.active::after {\n    background-color: ", ";\n  }\n\n  &.active {\n    transform: translate3d(0, -10px, 0) rotate(-45deg);\n    transition-delay: 0.22s;\n    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);\n  }\n\n  &.active::after {\n    top: 0;\n    opacity: 0;\n    transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), \n                opacity: 0.1s 0.22s linear;\n  }\n\n  &.active::before {\n    top: 0;\n    transform: rotate(-90deg);\n    transition: top 0.1s 0.16s cubic-bezier(0.33333, 0, 0.66667, 0.33333), \n                transform 0.13s 0.25s cubic-bezier(0.215, 0.61, 0.355, 1);\n  }\n"]);
@@ -34778,7 +34778,7 @@ var EditableList = function EditableList(_ref) {
       useModal = _ref$useModal === void 0 ? false : _ref$useModal,
       Modal = _ref.modal,
       modalProps = _ref.modalProps,
-      autoPayMethod = _ref.autoPayMethod,
+      autoPayMethods = _ref.autoPayMethods,
       qaPrefix = _ref.qaPrefix;
   return /*#__PURE__*/React__default.createElement(Box, {
     padding: "0rem 0rem 1.5rem 0rem"
@@ -34805,7 +34805,9 @@ var EditableList = function EditableList(_ref) {
 
     var expiredItem = (_item$expirationStatu = item === null || item === void 0 ? void 0 : item.expirationStatus) !== null && _item$expirationStatu !== void 0 ? _item$expirationStatu : ACTIVE$1;
     return /*#__PURE__*/React__default.createElement(EditableListItem, {
-      listItemSize: !!item.id && item.id === autoPayMethod ? "big" : listItemSize,
+      listItemSize: !!item.id && (autoPayMethods === null || autoPayMethods === void 0 ? void 0 : autoPayMethods.some(function (methodID) {
+        return methodID === item.id;
+      })) ? "big" : listItemSize,
       key: item.id || item,
       disabled: expiredItem === EXPIRED$1
     }, /*#__PURE__*/React__default.createElement(Text$1, {

package/package.json

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

package/src/components/atoms/formatted-credit-card/FormattedCreditCard.js

@@ -89,6 +89,5 @@ const FormattedCreditCard = ({
 export default themeComponent(
   FormattedCreditCard,
   "FormattedCreditCard",
-  fallbackValues,
-  "default"
+  fallbackValues
 );

package/src/components/molecules/editable-list/EditableList.js

@@ -34,7 +34,7 @@ const EditableList = ({
   useModal = false,
   modal: Modal,
   modalProps,
-  autoPayMethod,
+  autoPayMethods,
   qaPrefix
 }) => (
   <Box padding="0rem 0rem 1.5rem 0rem">
@@ -63,7 +63,10 @@ const EditableList = ({
           return (
             <EditableListItem
               listItemSize={
-                !!item.id && item.id === autoPayMethod ? "big" : listItemSize
+                !!item.id &&
+                autoPayMethods?.some(methodID => methodID === item.id)
+                  ? "big"
+                  : listItemSize
               }
               key={item.id || item}
               disabled={expiredItem === EXPIRED}