@thecb/components 4.1.32-beta.0 → 4.2.0

package/dist/index.cjs.js

@@ -4859,7 +4859,8 @@ var HINT_GREEN = "#E8FFEF";
 var SEA_GREEN = "#317D4F"; // YELLOW
 
 var SELECTIVE_YELLOW = "#F8B700";
-var MUSTARD_YELLOW = "#FFD459"; // ORANGE
+var MUSTARD_YELLOW = "#FFD459";
+var FIRE_YELLOW = "#B34A00"; // ORANGE
 
 var CARROT_ORANGE = "#ED9620";
 var ZEST_ORANGE = "#F47820";
@@ -4961,6 +4962,7 @@ var colors = /*#__PURE__*/Object.freeze({
   SEA_GREEN: SEA_GREEN,
   SELECTIVE_YELLOW: SELECTIVE_YELLOW,
   MUSTARD_YELLOW: MUSTARD_YELLOW,
+  FIRE_YELLOW: FIRE_YELLOW,
   CARROT_ORANGE: CARROT_ORANGE,
   ZEST_ORANGE: ZEST_ORANGE,
   APRICOT_ORANGE: APRICOT_ORANGE,
@@ -20899,6 +20901,9 @@ function _templateObject$q() {
 
   return data;
 }
+var ACTIVE = "ACTIVE";
+var EXPIRING_SOON = "EXPIRING_SOON";
+var EXPIRED = "EXPIRED";
 var CreditCardWrapper = styled__default.div(_templateObject$q());
 var CCIconWrapper = styled__default.div(_templateObject2$e());
 
@@ -20906,7 +20911,34 @@ var FormattedCreditCard = function FormattedCreditCard(_ref) {
   var lastFour = _ref.lastFour,
       autoPay = _ref.autoPay,
       expireDate = _ref.expireDate,
+      expirationStatus = _ref.expirationStatus,
       themeValues = _ref.themeValues;
+
+  var renderCardStatus = function renderCardStatus() {
+    switch (expirationStatus) {
+      case ACTIVE:
+        return /*#__PURE__*/React__default.createElement(Paragraph$1, {
+          variant: "pXS",
+          color: ASH_GREY,
+          textAlign: "left"
+        }, "Exp Date ", expireDate);
+
+      case EXPIRING_SOON:
+        return /*#__PURE__*/React__default.createElement(Paragraph$1, {
+          variant: "pXS",
+          color: FIRE_YELLOW,
+          textAlign: "left"
+        }, "Expiring Soon ", expireDate);
+
+      case EXPIRED:
+        return /*#__PURE__*/React__default.createElement(Paragraph$1, {
+          variant: "pXS",
+          color: ASH_GREY,
+          textAlign: "left"
+        }, "Expired");
+    }
+  };
+
   return /*#__PURE__*/React__default.createElement(CreditCardWrapper, null, /*#__PURE__*/React__default.createElement(CCIconWrapper, null, /*#__PURE__*/React__default.createElement(GenericCard, null)), /*#__PURE__*/React__default.createElement(Stack, {
     childGap: "0"
   }, /*#__PURE__*/React__default.createElement(Box, {
@@ -20917,18 +20949,14 @@ var FormattedCreditCard = function FormattedCreditCard(_ref) {
     color: themeValues.textColor,
     textAlign: "left",
     extraStyles: "display: inline-block;"
-  }, "Card ending in ".concat(lastFour)), expireDate && /*#__PURE__*/React__default.createElement(Paragraph$1, {
-    variant: "pXS",
-    color: ASH_GREY,
-    textAlign: "left"
-  }, "Exp ".concat(expireDate))), autoPay && /*#__PURE__*/React__default.createElement(Text$1, {
+  }, "Card ending in ".concat(lastFour)), expireDate && /*#__PURE__*/React__default.createElement(React.Fragment, null, renderCardStatus())), autoPay && /*#__PURE__*/React__default.createElement(Text$1, {
     variant: "p",
     color: themeValues.autopayTextColor,
     extraStyles: "font-style: italic;"
   }, "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"]);
@@ -34627,7 +34655,7 @@ var CollapsibleSection = function CollapsibleSection(_ref) {
     initial: initiallyOpen ? "open" : "closed",
     exit: "closed",
     variants: wrapper,
-    extraStyles: "transform-origin: 100% 0; overflow-y: hidden;"
+    extraStyles: "transform-origin: 100% 0;"
   }, children))));
 };
 
@@ -34706,7 +34734,7 @@ function _templateObject2$j() {
 }
 
 function _templateObject$x() {
-  var data = _taggedTemplateLiteral(["\n  box-sizing: border-box;\n  background: ", ";\n  height: ", ";\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 1.5rem;\n  :not(:last-child),\n  :not(:first-child) {\n    box-shadow: inset 0px -1px 0px 0px rgb(202, 206, 216);\n  }\n  :first-child {\n    border-top-left-radius: 3px;\n    border-top-right-radius: 3px;\n  }\n  :last-child {\n    border-bottom-left-radius: 3px;\n    border-bottom-right-radius: 3px;\n    box-shadow: none;\n  }\n"]);
+  var data = _taggedTemplateLiteral(["\n  box-sizing: border-box;\n  background: ", ";\n  border-color: ", ";\n  height: ", ";\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 1.5rem;\n  :not(:last-child),\n  :not(:first-child) {\n    box-shadow: inset 0px -1px 0px 0px rgb(202, 206, 216);\n  }\n  :first-child {\n    border-top-left-radius: 3px;\n    border-top-right-radius: 3px;\n  }\n  :last-child {\n    border-bottom-left-radius: 3px;\n    border-bottom-right-radius: 3px;\n    box-shadow: none;\n  }\n"]);
 
   _templateObject$x = function _templateObject() {
     return data;
@@ -34714,12 +34742,18 @@ function _templateObject$x() {
 
   return data;
 }
-var EditableListItem = styled__default.div(_templateObject$x(), WHITE, function (_ref) {
-  var listItemSize = _ref.listItemSize;
+var EditableListItem = styled__default.div(_templateObject$x(), function (_ref) {
+  var disabled = _ref.disabled;
+  return disabled ? "rgba(246, 246, 249, 0.7)" : WHITE;
+}, GHOST_GREY, function (_ref2) {
+  var listItemSize = _ref2.listItemSize;
   return listItemSize === "big" ? "120px" : "72px";
 });
 var EditableListItemControls = styled__default.div(_templateObject2$j());
 
+var ACTIVE$1 = "ACTIVE";
+var EXPIRED$1 = "EXPIRED";
+
 var EditableList = function EditableList(_ref) {
   var _ref$title = _ref.title,
       title = _ref$title === void 0 ? "" : _ref$title,
@@ -34762,16 +34796,20 @@ var EditableList = function EditableList(_ref) {
     borderRadius: "4px",
     extraStyles: "box-shadow: 0px 2px 14px 0px rgb(246, 246, 249),\n    0px 3px 8px 0px rgb(202, 206, 216);"
   }, items.map(function (item) {
+    var _item$expirationStatu;
+
     var _useState = React.useState(false),
         _useState2 = _slicedToArray(_useState, 2),
         modalOpen = _useState2[0],
         toggleModal = _useState2[1];
 
+    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 && autoPayMethods.some(function (methodID) {
+      listItemSize: !!item.id && (autoPayMethods === null || autoPayMethods === void 0 ? void 0 : autoPayMethods.some(function (methodID) {
         return methodID === item.id;
-      }) ? "big" : listItemSize,
-      key: item.id || item
+      })) ? "big" : listItemSize,
+      key: item.id || item,
+      disabled: expiredItem === EXPIRED$1
     }, /*#__PURE__*/React__default.createElement(Text$1, {
       variant: "p",
       color: CHARADE_GREY
@@ -39566,6 +39604,10 @@ function _templateObject$A() {
 
 */
 
+var ACTIVE$2 = "ACTIVE";
+var EXPIRING_SOON$1 = "EXPIRING_SOON";
+var EXPIRED$2 = "EXPIRED";
+
 var RadioSection = function RadioSection(_ref) {
   var themeValues = _ref.themeValues,
       isMobile = _ref.isMobile,
@@ -39588,6 +39630,34 @@ var RadioSection = function RadioSection(_ref) {
     }
   };
 
+  var renderCardStatus = function renderCardStatus(item) {
+    var expirationStatus = item.expirationStatus,
+        expireDate = item.expireDate;
+
+    switch (expirationStatus) {
+      case ACTIVE$2:
+        return /*#__PURE__*/React__default.createElement(Text$1, {
+          variant: "pXS",
+          color: ASH_GREY,
+          extraStyles: "text-align: right;"
+        }, "Exp Date ", expireDate);
+
+      case EXPIRING_SOON$1:
+        return /*#__PURE__*/React__default.createElement(Text$1, {
+          variant: "pXS",
+          color: FIRE_YELLOW,
+          extraStyles: "text-align: right;"
+        }, "Expiring Soon ", expireDate);
+
+      case EXPIRED$2:
+        return /*#__PURE__*/React__default.createElement(Text$1, {
+          variant: "pXS",
+          color: ASH_GREY,
+          extraStyles: "text-align: right;"
+        }, "Expired");
+    }
+  };
+
   var wrapper = {
     open: {
       height: openHeight,
@@ -39704,7 +39774,7 @@ var RadioSection = function RadioSection(_ref) {
         isMobile: isMobile,
         alt: icon.altText
       });
-    })))), /*#__PURE__*/React__default.createElement(AnimatePresence, {
+    })), section.shouldDisplayCardExpiration && /*#__PURE__*/React__default.createElement(React.Fragment, null, renderCardStatus(section)))), /*#__PURE__*/React__default.createElement(AnimatePresence, {
       initial: false
     }, openSection === section.id && /*#__PURE__*/React__default.createElement(Motion, {
       key: "content-".concat(section.id),

package/package.json

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

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { Fragment } from "react";
 import styled from "styled-components";
 import GenericCard from "../icons/GenericCard";
 import Text from "../text";
@@ -6,7 +6,11 @@ import Paragraph from "../paragraph";
 import { Box, Stack } from "../layouts";
 import { fallbackValues } from "./FormattedCreditCard.theme";
 import { themeComponent } from "../../../util/themeUtils";
-import { ASH_GREY } from "../../../constants/colors";
+import { ASH_GREY, FIRE_YELLOW } from "../../../constants/colors";
+
+const ACTIVE = "ACTIVE";
+const EXPIRING_SOON = "EXPIRING_SOON";
+const EXPIRED = "EXPIRED";
 
 export const CreditCardWrapper = styled.div`
   display: flex;
@@ -25,43 +29,65 @@ const FormattedCreditCard = ({
   lastFour,
   autoPay,
   expireDate,
+  expirationStatus,
   themeValues
-}) => (
-  <CreditCardWrapper>
-    <CCIconWrapper>
-      <GenericCard />
-    </CCIconWrapper>
-    <Stack childGap="0">
-      <Box padding="0">
-        <Text
-          variant="p"
-          padding="0 0 0 8px"
-          color={themeValues.textColor}
-          textAlign="left"
-          extraStyles={`display: inline-block;`}
-        >
-          {`Card ending in ${lastFour}`}
-        </Text>
-        {expireDate && (
+}) => {
+  const renderCardStatus = () => {
+    switch (expirationStatus) {
+      case ACTIVE:
+        return (
           <Paragraph variant="pXS" color={ASH_GREY} textAlign="left">
-            {`Exp ${expireDate}`}
+            Exp Date {expireDate}
+          </Paragraph>
+        );
+      case EXPIRING_SOON:
+        return (
+          <Paragraph variant="pXS" color={FIRE_YELLOW} textAlign="left">
+            Expiring Soon {expireDate}
           </Paragraph>
+        );
+      case EXPIRED:
+        return (
+          <Paragraph variant="pXS" color={ASH_GREY} textAlign="left">
+            Expired
+          </Paragraph>
+        );
+      default:
+        null;
+    }
+  };
+  return (
+    <CreditCardWrapper>
+      <CCIconWrapper>
+        <GenericCard />
+      </CCIconWrapper>
+      <Stack childGap="0">
+        <Box padding="0">
+          <Text
+            variant="p"
+            padding="0 0 0 8px"
+            color={themeValues.textColor}
+            textAlign="left"
+            extraStyles={`display: inline-block;`}
+          >
+            {`Card ending in ${lastFour}`}
+          </Text>
+          {expireDate && <Fragment>{renderCardStatus()}</Fragment>}
+        </Box>
+        {autoPay && (
+          <Text
+            variant="p"
+            color={themeValues.autopayTextColor}
+            extraStyles={`font-style: italic;`}
+          >{`Autopay Enabled`}</Text>
         )}
-      </Box>
-      {autoPay && (
-        <Text
-          variant="p"
-          color={themeValues.autopayTextColor}
-          extraStyles={`font-style: italic;`}
-        >{`Autopay Enabled`}</Text>
-      )}
-    </Stack>
-  </CreditCardWrapper>
-);
+      </Stack>
+    </CreditCardWrapper>
+  );
+};
 
 export default themeComponent(
   FormattedCreditCard,
   "FormattedCreditCard",
-  fallbackValues,
-  "default"
+  fallbackValues
 );

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

@@ -113,7 +113,7 @@ const CollapsibleSection = ({
               initial={initiallyOpen ? "open" : "closed"}
               exit="closed"
               variants={wrapper}
-              extraStyles={`transform-origin: 100% 0; overflow-y: hidden;`}
+              extraStyles={`transform-origin: 100% 0;`}
             >
               {children}
             </Motion>

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

@@ -1,5 +1,4 @@
 import React, { useState } from "react";
-
 import {
   EditableListItem,
   EditableListItemControls
@@ -15,6 +14,9 @@ import {
   CHARADE_GREY
 } from "../../../constants/colors";
 
+const ACTIVE = "ACTIVE";
+const EXPIRED = "EXPIRED";
+
 const EditableList = ({
   title = "",
   titleWeight = "400",
@@ -57,15 +59,17 @@ const EditableList = ({
       >
         {items.map(item => {
           const [modalOpen, toggleModal] = useState(false);
+          const expiredItem = item?.expirationStatus ?? ACTIVE;
           return (
             <EditableListItem
               listItemSize={
                 !!item.id &&
-                autoPayMethods.some(methodID => methodID === item.id)
+                autoPayMethods?.some(methodID => methodID === item.id)
                   ? "big"
                   : listItemSize
               }
               key={item.id || item}
+              disabled={expiredItem === EXPIRED}
             >
               <Text variant="p" color={CHARADE_GREY}>
                 {renderItem(item)}

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

@@ -1,9 +1,11 @@
 import styled from "styled-components";
-import { WHITE } from "../../../constants/colors";
+import { WHITE, GHOST_GREY } from "../../../constants/colors";
 
 export const EditableListItem = styled.div`
   box-sizing: border-box;
-  background: ${WHITE};
+  background: ${({ disabled }) =>
+    disabled ? `rgba(246, 246, 249, 0.7)` : WHITE};
+  border-color: ${GHOST_GREY};
   height: ${({ listItemSize }) => (listItemSize === "big" ? "120px" : "72px")};
   display: flex;
   justify-content: space-between;

package/src/components/molecules/radio-section/RadioSection.js

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { Fragment, useState } from "react";
 import styled from "styled-components";
 import { themeComponent } from "../../../util/themeUtils";
 import { fallbackValues } from "./RadioSection.theme";
@@ -7,7 +7,7 @@ import RadioButton from "../../atoms/radio-button";
 import { Box, Cluster, Stack, Motion } from "../../atoms/layouts";
 import { noop } from "../../../util/general";
 import Text from "../../atoms/text";
-import { CHARADE_GREY } from "../../../constants/colors";
+import { CHARADE_GREY, ASH_GREY, FIRE_YELLOW } from "../../../constants/colors";
 /*
   Takes an array of section objects, each object should look like:
     {
@@ -28,6 +28,10 @@ import { CHARADE_GREY } from "../../../constants/colors";
 
 */
 
+const ACTIVE = "ACTIVE";
+const EXPIRING_SOON = "EXPIRING_SOON";
+const EXPIRED = "EXPIRED";
+
 const RadioSection = ({
   themeValues,
   isMobile,
@@ -45,6 +49,44 @@ const RadioSection = ({
     }
   };
 
+  const renderCardStatus = item => {
+    const { expirationStatus, expireDate } = item;
+    switch (expirationStatus) {
+      case ACTIVE:
+        return (
+          <Text
+            variant="pXS"
+            color={ASH_GREY}
+            extraStyles={`text-align: right;`}
+          >
+            Exp Date {expireDate}
+          </Text>
+        );
+      case EXPIRING_SOON:
+        return (
+          <Text
+            variant="pXS"
+            color={FIRE_YELLOW}
+            extraStyles={`text-align: right;`}
+          >
+            Expiring Soon {expireDate}
+          </Text>
+        );
+      case EXPIRED:
+        return (
+          <Text
+            variant="pXS"
+            color={ASH_GREY}
+            extraStyles={`text-align: right;`}
+          >
+            Expired
+          </Text>
+        );
+      default:
+        null;
+    }
+  };
+
   const wrapper = {
     open: {
       height: openHeight,
@@ -186,6 +228,9 @@ const RadioSection = ({
                         ))}
                       </Cluster>
                     )}
+                    {section.shouldDisplayCardExpiration && (
+                      <Fragment>{renderCardStatus(section)}</Fragment>
+                    )}
                   </Cluster>
                 </Box>
                 <AnimatePresence initial={false}>

package/src/constants/colors.js

@@ -64,6 +64,7 @@ const SEA_GREEN = "#317D4F";
 // YELLOW
 const SELECTIVE_YELLOW = "#F8B700";
 const MUSTARD_YELLOW = "#FFD459";
+const FIRE_YELLOW = "#B34A00";
 // ORANGE
 const CARROT_ORANGE = "#ED9620";
 const ZEST_ORANGE = "#F47820";
@@ -166,6 +167,7 @@ export {
   SEA_GREEN,
   SELECTIVE_YELLOW,
   MUSTARD_YELLOW,
+  FIRE_YELLOW,
   CARROT_ORANGE,
   ZEST_ORANGE,
   APRICOT_ORANGE,