@thecb/components 3.5.6 → 3.5.9

package/dist/index.cjs.js

@@ -32430,7 +32430,7 @@ var CollapsibleSection = function CollapsibleSection(_ref) {
       display: "flex",
       alignItems: "center"
     }
-  }, /*#__PURE__*/React__default.createElement(IconChevron, null)))), /*#__PURE__*/React__default.createElement(AnimatePresence, {
+  }, /*#__PURE__*/React__default.createElement(ChevronIcon$1, null)))), /*#__PURE__*/React__default.createElement(AnimatePresence, {
     initial: false
   }, isOpen && /*#__PURE__*/React__default.createElement(Motion, {
     padding: "0",
@@ -34389,8 +34389,14 @@ var Module = function Module(_ref) {
 
 var Module$1 = /*#__PURE__*/React.memo(themeComponent(Module, "Module", fallbackValues$r, "default"));
 
-var backgroundColor$6 = "#3b414d";
-var shadowColor = "#292A33";
+var backgroundColor$6 = {
+  profile: "#3b414d",
+  cms: "#3b414d"
+};
+var shadowColor = {
+  profile: "#292A33",
+  cms: "#292A33"
+};
 var fallbackValues$s = {
   backgroundColor: backgroundColor$6,
   shadowColor: shadowColor
@@ -34430,7 +34436,7 @@ var NavMenuDesktop = function NavMenuDesktop(_ref) {
   }, menuContent));
 };
 
-var NavMenuDesktop$1 = themeComponent(NavMenuDesktop, "NavMenu", fallbackValues$s);
+var NavMenuDesktop$1 = themeComponent(NavMenuDesktop, "NavMenu", fallbackValues$s, "profile");
 
 function _templateObject$y() {
   var data = _taggedTemplateLiteral(["\n  position: fixed;\n  top: 72px;\n"]);
@@ -34490,7 +34496,7 @@ var NavMenuMobile = function NavMenuMobile(_ref) {
   }, menuContent));
 };
 
-var NavMenuMobile$1 = themeComponent(NavMenuMobile, "NavMenu", fallbackValues$s);
+var NavMenuMobile$1 = themeComponent(NavMenuMobile, "NavMenu", fallbackValues$s, "profile");
 
 var AccountBillIcon = function AccountBillIcon() {
   return /*#__PURE__*/React__default.createElement("svg", {
@@ -36772,7 +36778,7 @@ var PaymentFormACH = function PaymentFormACH(_ref) {
 
   var confirmRoutingNumberErrors = _defineProperty({}, matchesField.error, "Confirm routing number field must match routing number");
 
-  var accountNumberErrors = (_accountNumberErrors = {}, _defineProperty(_accountNumberErrors, required.error, "Account number is required"), _defineProperty(_accountNumberErrors, hasLength.error, "Account number must be between 6 and 17 digits"), _accountNumberErrors);
+  var accountNumberErrors = (_accountNumberErrors = {}, _defineProperty(_accountNumberErrors, required.error, "Account number is required"), _defineProperty(_accountNumberErrors, hasLength.error, "Account number must be between 5 and 17 digits"), _accountNumberErrors);
 
   var confirmAccountNumberErrors = _defineProperty({}, matchesField.error, "Confirm account number field must match account number");
 
@@ -36902,7 +36908,7 @@ var formConfig$6 = {
     constraints: [onlyIntegers(), hasLength(0, 9)]
   },
   accountNumber: {
-    validators: [required(), hasLength(6, 17)],
+    validators: [required(), hasLength(5, 17)],
     constraints: [onlyIntegers(), hasLength(0, 17)]
   },
   confirmAccountNumber: {
@@ -37854,7 +37860,10 @@ var Timeout$1 = withWindowSize(Timeout);
 var WorkflowTile = function WorkflowTile(_ref) {
   var _ref$workflowName = _ref.workflowName,
       workflowName = _ref$workflowName === void 0 ? "Test Workflow" : _ref$workflowName,
-      workflowDescription = _ref.workflowDescription,
+      _ref$workflowDescript = _ref.workflowDescription,
+      workflowDescription = _ref$workflowDescript === void 0 ? "Link your benefit plan" : _ref$workflowDescript,
+      _ref$workflowActionNa = _ref.workflowActionName,
+      workflowActionName = _ref$workflowActionNa === void 0 ? "Search" : _ref$workflowActionNa,
       slug = _ref.slug;
   return /*#__PURE__*/React__default.createElement(Box, {
     background: WHITE,
@@ -37877,7 +37886,7 @@ var WorkflowTile = function WorkflowTile(_ref) {
   }, /*#__PURE__*/React__default.createElement(Paragraph$1, {
     variant: "pS",
     color: STORM_GREY
-  }, workflowDescription || "Link your benefit plan")), /*#__PURE__*/React__default.createElement(Box, {
+  }, workflowDescription)), /*#__PURE__*/React__default.createElement(Box, {
     padding: "1.5rem 1rem",
     background: GRECIAN_GREY
   }, /*#__PURE__*/React__default.createElement(ButtonWithLink, {
@@ -37886,7 +37895,7 @@ var WorkflowTile = function WorkflowTile(_ref) {
     fontWeight: FONT_WEIGHT_SEMIBOLD,
     fontSize: "1.125rem",
     borderRadius: "0px",
-    text: "Link Benefits",
+    text: workflowActionName,
     minWidth: "100%",
     url: "/service/".concat(slug),
     extraStyles: "width: 100%;"

package/package.json

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

@@ -5,7 +5,7 @@ import { themeComponent } from "../../../util/themeUtils";
 import Heading from "../../atoms/heading";
 import { FONT_WEIGHT_SEMIBOLD } from "../../../constants/style_constants";
 import { Box, Cluster, Stack, Motion } from "../../atoms/layouts";
-import { IconChevron } from "../../../deprecated/icons";
+import { ChevronIcon } from "../../atoms/icons";
 import { noop } from "../../../util/general";
 
 const CollapsibleSection = ({
@@ -95,7 +95,7 @@ const CollapsibleSection = ({
               variants={icon}
               style={{ display: "flex", alignItems: "center" }}
             >
-              <IconChevron />
+              <ChevronIcon />
             </Motion>
           </Cluster>
         </Box>

package/src/components/molecules/nav-menu/NavMenu.theme.js

@@ -1,5 +1,12 @@
-const backgroundColor = "#3b414d";
-const shadowColor = "#292A33";
+const backgroundColor = {
+  profile: "#3b414d",
+  cms: "#3b414d"
+};
+
+const shadowColor = {
+  profile: "#292A33",
+  cms: "#292A33"
+};
 
 export const fallbackValues = {
   backgroundColor,

package/src/components/molecules/nav-menu/NavMenuDesktop.js

@@ -36,4 +36,9 @@ const NavMenuDesktop = ({
   );
 };
 
-export default themeComponent(NavMenuDesktop, "NavMenu", fallbackValues);
+export default themeComponent(
+  NavMenuDesktop,
+  "NavMenu",
+  fallbackValues,
+  "profile"
+);

package/src/components/molecules/nav-menu/NavMenuMobile.js

@@ -60,4 +60,9 @@ const NavMenuMobile = ({ menuContent = [], visible = false, themeValues }) => {
   );
 };
 
-export default themeComponent(NavMenuMobile, "NavMenu", fallbackValues);
+export default themeComponent(
+  NavMenuMobile,
+  "NavMenu",
+  fallbackValues,
+  "profile"
+);

package/src/components/molecules/payment-form-ach/PaymentFormACH.js

@@ -53,7 +53,7 @@ const PaymentFormACH = ({
   };
   const accountNumberErrors = {
     [required.error]: "Account number is required",
-    [hasLength.error]: "Account number must be between 6 and 17 digits"
+    [hasLength.error]: "Account number must be between 5 and 17 digits"
   };
   const confirmAccountNumberErrors = {
     [matchesField.error]:

package/src/components/molecules/payment-form-ach/PaymentFormACH.state.js

@@ -20,7 +20,7 @@ const formConfig = {
     constraints: [onlyIntegers(), hasLength(0, 9)]
   },
   accountNumber: {
-    validators: [required(), hasLength(6, 17)],
+    validators: [required(), hasLength(5, 17)],
     constraints: [onlyIntegers(), hasLength(0, 17)]
   },
   confirmAccountNumber: {

package/src/components/molecules/payment-form-ach/PaymentFormACH.stories.js

@@ -0,0 +1,24 @@
+import React from "react";
+import { connect } from "react-redux";
+import { boolean } from "@storybook/addon-knobs";
+
+import PaymentFormACH from "./PaymentFormACH";
+import page from "../../../../.storybook/page";
+import * as PaymentFormACHState from "./PaymentFormACH.state";
+
+const story = page({
+  title: "Components|Molecules/PaymentFormACH",
+  Component: PaymentFormACH,
+  reducer: PaymentFormACHState.reducer,
+  mapStateToProps: PaymentFormACHState.mapStateToProps,
+  mapDispatchToProps: PaymentFormACHState.mapDispatchToProps
+});
+export default story;
+
+const ConnectedForm = connect(
+  PaymentFormACHState.mapStateToProps,
+  PaymentFormACHState.mapDispatchToProps
+)(PaymentFormACH);
+export const paymentFormACH = () => (
+  <ConnectedForm showErrors={boolean("showErrors", false, "props")} />
+);

package/src/components/molecules/payment-form-card/PaymentFormCard.stories.js

@@ -0,0 +1,24 @@
+import React from "react";
+import { connect } from "react-redux";
+import { boolean } from "@storybook/addon-knobs";
+
+import PaymentFormCard from "./PaymentFormCard";
+import page from "../../../../.storybook/page";
+import * as PaymentFormCardState from "./PaymentFormCard.state";
+
+const story = page({
+  title: "Components|Molecules/PaymentFormCard",
+  Component: PaymentFormCard,
+  reducer: PaymentFormCardState.reducer,
+  mapStateToProps: PaymentFormCardState.mapStateToProps,
+  mapDispatchToProps: PaymentFormCardState.mapDispatchToProps
+});
+export default story;
+
+const ConnectedForm = connect(
+  PaymentFormCardState.mapStateToProps,
+  PaymentFormCardState.mapDispatchToProps
+)(PaymentFormCard);
+export const paymentFormCard = () => (
+  <ConnectedForm showErrors={boolean("showErrors", false, "props")} />
+);

package/src/components/molecules/workflow-tile/WorkflowTile.js

@@ -14,7 +14,8 @@ import ButtonWithLink from "../../atoms/button-with-link";
 import { Box, Stack } from "../../atoms/layouts";
 const WorkflowTile = ({
   workflowName = "Test Workflow",
-  workflowDescription,
+  workflowDescription = "Link your benefit plan",
+  workflowActionName = "Search",
   slug
 }) => (
   <Box
@@ -35,7 +36,7 @@ const WorkflowTile = ({
       </Box>
       <Box padding={"0 1rem 1rem 1rem"} minHeight={"4.25rem"}>
         <Paragraph variant="pS" color={STORM_GREY}>
-          {workflowDescription || `Link your benefit plan`}
+          {workflowDescription}
         </Paragraph>
       </Box>
       <Box padding={"1.5rem 1rem"} background={GRECIAN_GREY}>
@@ -45,7 +46,7 @@ const WorkflowTile = ({
           fontWeight={FONT_WEIGHT_SEMIBOLD}
           fontSize={"1.125rem"}
           borderRadius={"0px"}
-          text={"Link Benefits"}
+          text={workflowActionName}
           minWidth={"100%"}
           url={`/service/${slug}`}
           extraStyles={`width: 100%;`}