@thecb/components 4.0.3 → 4.0.5

package/dist/index.cjs.js

@@ -6164,16 +6164,6 @@ var Text = function Text(_ref) {
 
 var Text$1 = themeComponent(Text, "Text", fallbackValues, "p");
 
-function _templateObject7() {
-  var data = _taggedTemplateLiteral(["\n      display: none;\n    "]);
-
-  _templateObject7 = function _templateObject7() {
-    return data;
-  };
-
-  return data;
-}
-
 function _templateObject6() {
   var data = _taggedTemplateLiteral(["\n      ", "\n    "]);
 
@@ -6225,7 +6215,7 @@ function _templateObject2$1() {
 }
 
 function _templateObject$1() {
-  var data = _taggedTemplateLiteral(["\n  position: relative;\n  box-sizing: border-box;\n  padding: ", ";\n  border: ", ";\n  box-shadow: ", ";\n  background-color: ", ";\n  min-height: ", ";\n  ", "\n  min-width: ", ";\n  max-width: ", ";\n  color: ", ";\n  border-radius: ", ";\n  border-width: ", ";\n  border: ", ";\n  text-align: ", ";\n\n  &:hover, &:focus {\n    ", "\n  }\n\n  &:active {\n    ", "\n  }\n\n  &:disabled {\n    ", "\n  }\n\n  & * {\n    color: ", ";\n  }\n\n  ", "\n  ", "\n\n  ", "\n"]);
+  var data = _taggedTemplateLiteral(["\n  position: relative;\n  box-sizing: border-box;\n  padding: ", ";\n  border: ", ";\n  box-shadow: ", ";\n  background-color: ", ";\n  min-height: ", ";\n  ", "\n  min-width: ", ";\n  max-width: ", ";\n  color: ", ";\n  border-radius: ", ";\n  border-width: ", ";\n  border: ", ";\n  text-align: ", ";\n\n  &:hover, &:focus {\n    ", "\n  }\n\n  &:active {\n    ", "\n  }\n\n  &:disabled {\n    ", "\n  }\n\n  & * {\n    color: ", ";\n  }\n\n  ", "\n  ", "\n"]);
 
   _templateObject$1 = function _templateObject() {
     return data;
@@ -6259,9 +6249,14 @@ var BoxWrapper = styled__default(function (_ref) {
       maxWidth = _ref.maxWidth,
       padding = _ref.padding,
       hiddenStyles = _ref.hiddenStyles,
-      props = _objectWithoutProperties(_ref, ["activeStyles", "hoverStyles", "disabledStyles", "extraStyles", "borderSize", "borderColor", "borderWidthOverride", "borderRadius", "textAlign", "boxShadow", "minHeight", "minWidth", "maxWidth", "padding", "hiddenStyles"]);
-
-  return /*#__PURE__*/React__default.createElement("div", props);
+      ariaControls = _ref.ariaControls,
+      ariaLabel = _ref.ariaLabel,
+      props = _objectWithoutProperties(_ref, ["activeStyles", "hoverStyles", "disabledStyles", "extraStyles", "borderSize", "borderColor", "borderWidthOverride", "borderRadius", "textAlign", "boxShadow", "minHeight", "minWidth", "maxWidth", "padding", "hiddenStyles", "ariaControls", "ariaLabel"]);
+
+  return /*#__PURE__*/React__default.createElement("div", _extends({
+    "aria-controls": ariaControls,
+    "aria-label": ariaLabel
+  }, props));
 })(_templateObject$1(), function (_ref2) {
   var padding = _ref2.padding;
   return padding;
@@ -6324,9 +6319,6 @@ var BoxWrapper = styled__default(function (_ref) {
 }, function (_ref20) {
   var extraStyles = _ref20.extraStyles;
   return styled.css(_templateObject6(), extraStyles);
-}, function (_ref21) {
-  var hiddenStyles = _ref21.hiddenStyles;
-  return hiddenStyles && styled.css(_templateObject7());
 });
 /* eslint-enable no-unused-vars */
 
@@ -16388,10 +16380,10 @@ function _templateObject8() {
   return data;
 }
 
-function _templateObject7$1() {
+function _templateObject7() {
   var data = _taggedTemplateLiteral(["\n  display: inline-block;\n  width: 24px;\n  height: 24px;\n  border-radius: 2px;\n  transition: all 150ms;\n\n  ", " {\n    visibility: ", ";\n  }\n\n  ", ";\n"]);
 
-  _templateObject7$1 = function _templateObject7() {
+  _templateObject7 = function _templateObject7() {
     return data;
   };
 
@@ -16468,7 +16460,7 @@ var CheckboxIcon = styled__default.svg(_templateObject3$3(), function (_ref) {
 var HiddenCheckbox = styled__default.input.attrs({
   type: "checkbox"
 })(_templateObject6$1());
-var StyledCheckbox = styled__default.div(_templateObject7$1(), CheckboxIcon, function (_ref2) {
+var StyledCheckbox = styled__default.div(_templateObject7(), CheckboxIcon, function (_ref2) {
   var checked = _ref2.checked;
   return checked ? "visible" : "hidden";
 }, function (_ref3) {
@@ -18867,16 +18859,23 @@ var CCIconWrapper = styled__default.div(_templateObject2$e());
 var FormattedCreditCard = function FormattedCreditCard(_ref) {
   var lastFour = _ref.lastFour,
       autoPay = _ref.autoPay,
+      expireDate = _ref.expireDate,
       themeValues = _ref.themeValues;
   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, {
+    padding: "0"
   }, /*#__PURE__*/React__default.createElement(Text$1, {
     variant: "p",
     padding: "0 0 0 8px",
     color: themeValues.textColor,
     textAlign: "left",
     extraStyles: "display: inline-block;"
-  }, "Card ending in ".concat(lastFour)), autoPay && /*#__PURE__*/React__default.createElement(Text$1, {
+  }, "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, {
     variant: "p",
     color: themeValues.autopayTextColor,
     extraStyles: "font-style: italic;"
@@ -19312,10 +19311,10 @@ function _templateObject8$1() {
   return data;
 }
 
-function _templateObject7$2() {
+function _templateObject7$1() {
   var data = _taggedTemplateLiteral(["", " needs an uppercase letter"]);
 
-  _templateObject7$2 = function _templateObject7() {
+  _templateObject7$1 = function _templateObject7() {
     return data;
   };
 
@@ -19421,7 +19420,7 @@ with interpolation.
 */
 
 
-var DEFAULT_ERROR_MESSAGES = (_DEFAULT_ERROR_MESSAG = {}, _defineProperty(_DEFAULT_ERROR_MESSAG, MIN_LENGTH_ERROR, genErrorMessage(_templateObject$t(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, MAX_LENGTH_ERROR, genErrorMessage(_templateObject2$h(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, EXACT_LENGTH_ERROR, genErrorMessage(_templateObject3$9(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, MULTIPLE_LENGTHS_ERROR, genErrorMessage(_templateObject4$5(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, EMAIL_ERROR, genErrorMessage(_templateObject5$2(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, HAS_NUMBER_ERROR, genErrorMessage(_templateObject6$2(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, HAS_UPPERCASE_LETTER_ERROR, genErrorMessage(_templateObject7$2(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, HAS_LOWERCASE_LETTER_ERROR, genErrorMessage(_templateObject8$1(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, HAS_SPECIAL_CHARACTER_ERROR, genErrorMessage(_templateObject9$1(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, ONLY_NUMBERS_ERROR, genErrorMessage(_templateObject10$1(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, ONLY_LETTERS_ERROR, genErrorMessage(_templateObject11$1(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, REQUIRED_FIELD_ERROR, genErrorMessage(_templateObject12(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, NUM_GREATER_THAN_ERROR, genErrorMessage(_templateObject13(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, NUM_LESS_THAN_ERROR, genErrorMessage(_templateObject14(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, MATCHES_FIELD_ERROR, genErrorMessage(_templateObject15(), "fieldLabel", "matchField")), _defineProperty(_DEFAULT_ERROR_MESSAG, VALID_SELECT_OPTION_ERROR, genErrorMessage(_templateObject16(), "fieldLabel")), _DEFAULT_ERROR_MESSAG); // Constants to represent an input's state
+var DEFAULT_ERROR_MESSAGES = (_DEFAULT_ERROR_MESSAG = {}, _defineProperty(_DEFAULT_ERROR_MESSAG, MIN_LENGTH_ERROR, genErrorMessage(_templateObject$t(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, MAX_LENGTH_ERROR, genErrorMessage(_templateObject2$h(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, EXACT_LENGTH_ERROR, genErrorMessage(_templateObject3$9(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, MULTIPLE_LENGTHS_ERROR, genErrorMessage(_templateObject4$5(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, EMAIL_ERROR, genErrorMessage(_templateObject5$2(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, HAS_NUMBER_ERROR, genErrorMessage(_templateObject6$2(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, HAS_UPPERCASE_LETTER_ERROR, genErrorMessage(_templateObject7$1(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, HAS_LOWERCASE_LETTER_ERROR, genErrorMessage(_templateObject8$1(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, HAS_SPECIAL_CHARACTER_ERROR, genErrorMessage(_templateObject9$1(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, ONLY_NUMBERS_ERROR, genErrorMessage(_templateObject10$1(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, ONLY_LETTERS_ERROR, genErrorMessage(_templateObject11$1(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, REQUIRED_FIELD_ERROR, genErrorMessage(_templateObject12(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, NUM_GREATER_THAN_ERROR, genErrorMessage(_templateObject13(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, NUM_LESS_THAN_ERROR, genErrorMessage(_templateObject14(), "fieldLabel")), _defineProperty(_DEFAULT_ERROR_MESSAG, MATCHES_FIELD_ERROR, genErrorMessage(_templateObject15(), "fieldLabel", "matchField")), _defineProperty(_DEFAULT_ERROR_MESSAG, VALID_SELECT_OPTION_ERROR, genErrorMessage(_templateObject16(), "fieldLabel")), _DEFAULT_ERROR_MESSAG); // Constants to represent an input's state
 // Neutral - has not been validated
 // Invalid - has been validated and has an error
 // Valid - has been validated and has no error
@@ -32714,10 +32713,10 @@ function _templateObject8$2() {
   return data;
 }
 
-function _templateObject7$3() {
+function _templateObject7$2() {
   var data = _taggedTemplateLiteral(["\n  display: flex;\n  ", ";\n  ", ";\n  ", ";\n  font-size: ", ";\n  color: ", ";\n"]);
 
-  _templateObject7$3 = function _templateObject7() {
+  _templateObject7$2 = function _templateObject7() {
     return data;
   };
 
@@ -32810,7 +32809,7 @@ var ActionWrapper = styled__default.div(_templateObject6$3(), function (_ref7) {
   var isMobile = _ref7.isMobile;
   return isMobile && "display: none";
 });
-var TableItemKey = styled__default.div(_templateObject7$3(), function (_ref8) {
+var TableItemKey = styled__default.div(_templateObject7$2(), function (_ref8) {
   var isMobile = _ref8.isMobile;
   return !isMobile && "flex: 1";
 }, function (_ref9) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "4.0.3",
+  "version": "4.0.5",
   "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

@@ -2,9 +2,11 @@ import React from "react";
 import styled from "styled-components";
 import GenericCard from "../icons/GenericCard";
 import Text from "../text";
-import { Stack } from "../layouts";
+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";
 
 export const CreditCardWrapper = styled.div`
   display: flex;
@@ -19,21 +21,33 @@ export const CCIconWrapper = styled.div`
   display: flex;
 `;
 
-const FormattedCreditCard = ({ lastFour, autoPay, themeValues }) => (
+const FormattedCreditCard = ({
+  lastFour,
+  autoPay,
+  expireDate,
+  themeValues
+}) => (
   <CreditCardWrapper>
     <CCIconWrapper>
       <GenericCard />
     </CCIconWrapper>
     <Stack childGap="0">
-      <Text
-        variant="p"
-        padding="0 0 0 8px"
-        color={themeValues.textColor}
-        textAlign="left"
-        extraStyles={`display: inline-block;`}
-      >
-        {`Card ending in ${lastFour}`}
-      </Text>
+      <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 && (
+          <Paragraph variant="pXS" color={ASH_GREY} textAlign="left">
+            {`Exp ${expireDate}`}
+          </Paragraph>
+        )}
+      </Box>
       {autoPay && (
         <Text
           variant="p"

package/src/components/atoms/layouts/Box.styled.js

@@ -27,8 +27,10 @@ export const BoxWrapper = styled(
     maxWidth,
     padding,
     hiddenStyles,
+    ariaControls,
+    ariaLabel,
     ...props
-  }) => <div {...props} />
+  }) => <div aria-controls={ariaControls} aria-label={ariaLabel} {...props} />
 )`
   position: relative;
   box-sizing: border-box;
@@ -106,11 +108,5 @@ export const BoxWrapper = styled(
     css`
       ${extraStyles}
     `}
-
-  ${({ hiddenStyles }) =>
-    hiddenStyles &&
-    css`
-      display: none;
-    `}
 `;
 /* eslint-enable no-unused-vars */