@thecb/components 3.5.5 → 3.5.8

package/.tool-versions

@@ -1 +1 @@
-nodejs 10.13.0
+nodejs 10.15.3

package/dist/index.cjs.js

@@ -19069,9 +19069,10 @@ var Spinner$2 = themeComponent(Spinner$1, "Spinner", fallbackValues$j);
 
 var Loading = function Loading() {
   return /*#__PURE__*/React__default.createElement(Box, {
-    key: "spinner-container"
+    key: "spinner-container",
+    extraStyles: "position: fixed; top: 0; bottom: 0; left: 0; right: 0;"
   }, /*#__PURE__*/React__default.createElement(Cover, {
-    minHeight: "100vh",
+    minHeight: "100%",
     singleChild: true
   }, /*#__PURE__*/React__default.createElement(Center, {
     intrinsic: true
@@ -32429,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",
@@ -34388,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
@@ -34429,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"]);
@@ -34489,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", {
@@ -36771,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");
 
@@ -36901,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: {

package/package.json

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

package/src/components/atoms/loading/Loading.js

@@ -3,8 +3,11 @@ import Spinner from "../spinner";
 import { Box, Cover, Center } from "../layouts";
 
 const Loading = () => (
-  <Box key="spinner-container">
-    <Cover minHeight="100vh" singleChild>
+  <Box
+    key="spinner-container"
+    extraStyles={`position: fixed; top: 0; bottom: 0; left: 0; right: 0;`}
+  >
+    <Cover minHeight="100%" singleChild>
       <Center intrinsic>
         <Box>
           <Spinner size="100" />

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")} />
+);