@thecb/components 4.0.13 → 4.0.14-beta.0

package/dist/index.cjs.js

@@ -12633,7 +12633,7 @@ var ButtonWithAction = function ButtonWithAction(_ref) {
   var themeContext = React.useContext(styled.ThemeContext);
   var themeValues = createThemeValues(themeContext, fallbackValues$1, "Button", variant);
   var loadingExtraStyles = "".concat(extraStyles, "; padding-top: 0.75rem; padding-bottom: 0.75rem; height: ").concat(themeContext.isMobile ? "50px" : "57px", " ");
-  var hoverStyles = "\n    outline: none;\n    background-color: ".concat(themeValues.hoverBackgroundColor, ";\n    border-color: ").concat(themeValues.hoverBorderColor, ";\n    color: ").concat(themeValues.hoverColor, ";\n    text-decoration: ").concat(variant === "ghost" || variant === "smallGhost" ? "underline" : "none", ";\n  ");
+  var hoverStyles = "\n    outline: none;\n    background-color: ".concat(themeValues.hoverBackgroundColor, ";\n    border-color: ").concat(themeValues.hoverBorderColor, ";\n    color: ").concat(themeValues.hoverColor, ";\n    text-decoration: ").concat(variant === "ghost" || variant === "smallGhost" ? "underline" : "none", ";\n    cursor: pointer;\n  ");
   var activeStyles = "\n    outline: none;\n    background-color: ".concat(themeValues.activeBackgroundColor, ";\n    border-color: ").concat(themeValues.activeBorderColor, ";\n    color: ").concat(themeValues.activeColor, ";\n    text-decoration: ").concat(variant === "ghost" || variant === "smallGhost" ? "underline" : "none", ";\n  ");
   var disabledStyles = "\n    background-clor: #6E727E;\n    border-color: #6E727E;\n    color: #FFFFFF;\n    &:focus {\n      box-shadow: 0 0 10px #6E727E;\n      outline: none;\n    }\n  ";
   return /*#__PURE__*/React__default.createElement(Box, {
@@ -16293,9 +16293,10 @@ var ButtonWithLink = function ButtonWithLink(_ref) {
       _ref$fileLink = _ref.fileLink,
       fileLink = _ref$fileLink === void 0 ? false : _ref$fileLink,
       extraStyles = _ref.extraStyles,
+      linkExtraStyles = _ref.linkExtraStyles,
       _ref$newTab = _ref.newTab,
       newTab = _ref$newTab === void 0 ? false : _ref$newTab,
-      otherProps = _objectWithoutProperties(_ref, ["url", "disabled", "fileLink", "extraStyles", "newTab"]);
+      otherProps = _objectWithoutProperties(_ref, ["url", "disabled", "fileLink", "extraStyles", "linkExtraStyles", "newTab"]);
 
   var ButtonWithLinkWrapper = function ButtonWithLinkWrapper(_ref2) {
     var children = _ref2.children,
@@ -16324,7 +16325,7 @@ var ButtonWithLink = function ButtonWithLink(_ref) {
     url: url,
     disabled: disabled,
     newTab: newTab,
-    extraStyles: "text-decoration: none; &:hover {\n        text-decoration: none; }"
+    extraStyles: "".concat(linkExtraStyles, " text-decoration: none; &:hover {\n        text-decoration: none; }")
   }, /*#__PURE__*/React__default.createElement(ButtonWithAction, _extends({}, otherProps, {
     extraStyles: extraStyles
   })));
@@ -19916,9 +19917,7 @@ var ERRORS = {
   "71": "Passed invalid pixel value %s to %s(), please pass a value like \"12px\" or 12.\n\n",
   "72": "Passed invalid base value %s to %s(), please pass a value like \"12px\" or 12.\n\n",
   "73": "Please provide a valid CSS variable.\n\n",
-  "74": "CSS variable not found and no default was provided.\n\n",
-  "75": "important requires a valid style object, got a %s instead.\n\n",
-  "76": "fromSize and toSize must be provided as stringified numbers with the same units as minScreen and maxScreen.\n"
+  "74": "CSS variable not found.\n"
 };
 /**
  * super basic version of sprintf
@@ -33396,12 +33395,10 @@ ChangePasswordForm.mapDispatchToProps = mapDispatchToProps$1;
 var titleColor = "#292A33";
 var headingBackgroundColor = "transparent";
 var bodyBackgroundColor = "transparent";
-var focusStyles = "outline: none;";
 var fallbackValues$q = {
   titleColor: titleColor,
   headingBackgroundColor: headingBackgroundColor,
-  bodyBackgroundColor: bodyBackgroundColor,
-  focusStyles: focusStyles
+  bodyBackgroundColor: bodyBackgroundColor
 };
 
 var CollapsibleSection = function CollapsibleSection(_ref) {
@@ -33459,7 +33456,7 @@ var CollapsibleSection = function CollapsibleSection(_ref) {
     padding: "0",
     tabIndex: "0",
     onKeyDown: handleKeyDown,
-    hoverStyles: themeValues.focusStyles,
+    hoverStyles: "outline: none;",
     animate: isOpen ? "open" : "closed",
     positionTransition: true
   }, /*#__PURE__*/React__default.createElement(Stack, {
@@ -33469,7 +33466,8 @@ var CollapsibleSection = function CollapsibleSection(_ref) {
     background: themeValues.headingBackgroundColor,
     onClick: isMobile && supportsTouch ? noop : toggleSection,
     onTouchEnd: isMobile && supportsTouch ? toggleSection : noop,
-    key: "header"
+    key: "header",
+    hoverStyles: "cursor: pointer;"
   }, /*#__PURE__*/React__default.createElement(Cluster, {
     justify: "space-between",
     align: "center"
@@ -33483,10 +33481,7 @@ var CollapsibleSection = function CollapsibleSection(_ref) {
     as: "h6"
   }, title), /*#__PURE__*/React__default.createElement(Motion, {
     variants: icon,
-    style: {
-      display: "flex",
-      alignItems: "center"
-    }
+    extraStyles: "display: flex; align-items: center;"
   }, /*#__PURE__*/React__default.createElement(ChevronIcon$1, null)))), /*#__PURE__*/React__default.createElement(AnimatePresence, {
     initial: false
   }, isOpen && /*#__PURE__*/React__default.createElement(Motion, {
@@ -37963,7 +37958,6 @@ var PaymentFormACH = function PaymentFormACH(_ref) {
       fields = _ref.fields,
       actions = _ref.actions,
       showErrors = _ref.showErrors,
-      fees = _ref.fees,
       _ref$handleSubmit = _ref.handleSubmit,
       handleSubmit = _ref$handleSubmit === void 0 ? noop : _ref$handleSubmit;
 
@@ -38098,13 +38092,6 @@ var PaymentFormACH = function PaymentFormACH(_ref) {
     onChange: toggleCheckbox,
     checked: defaultMethod.value,
     hidden: hideDefaultPayment
-  }), !!(fees === null || fees === void 0 ? void 0 : fees.value) && /*#__PURE__*/React__default.createElement(Alert$1, {
-    heading: "Processing Fee",
-    text: "There is a processing fee of ".concat(fees.type === "FLAT" ? "".concat(displayCurrency(fees.value)) : "".concat(fees.value * 100, "%"), " ").concat(ifElse(isNil, always(""), function (a) {
-      return "with a minimum of ".concat(displayCurrency(a), " ");
-    })(fees.minimumInCents), "on all bank account payments."),
-    variant: "info",
-    showQuitLink: false
   })));
 };
 
@@ -38161,7 +38148,6 @@ var PaymentFormCard = function PaymentFormCard(_ref) {
       fields = _ref.fields,
       actions = _ref.actions,
       showErrors = _ref.showErrors,
-      fees = _ref.fees,
       _ref$handleSubmit = _ref.handleSubmit,
       handleSubmit = _ref$handleSubmit === void 0 ? noop : _ref$handleSubmit,
       isMobile = _ref.isMobile;
@@ -38321,13 +38307,13 @@ var headingBackgroundColor$1 = "".concat(WHITE);
 var headingDisabledColor = "".concat(ATHENS_GREY);
 var bodyBackgroundColor$1 = "#eeeeee";
 var borderColor$2 = "".concat(GREY_CHATEAU);
-var focusStyles$1 = "outline: none;";
+var focusStyles = "outline: none;";
 var fallbackValues$x = {
   headingBackgroundColor: headingBackgroundColor$1,
   headingDisabledColor: headingDisabledColor,
   bodyBackgroundColor: bodyBackgroundColor$1,
   borderColor: borderColor$2,
-  focusStyles: focusStyles$1
+  focusStyles: focusStyles
 };
 
 function _templateObject$A() {
@@ -38671,7 +38657,8 @@ var ResetConfirmationForm = function ResetConfirmationForm() {
     url: "/login",
     text: "Back to Login",
     variant: "primary",
-    extraStyles: "width: 100%;"
+    extraStyles: "width: 100%;",
+    linkExtraStyles: "width: 100%;"
   })))));
 };
 
@@ -38791,7 +38778,8 @@ var ResetConfirmationForm$2 = function ResetConfirmationForm() {
     url: "/login",
     text: "Log in",
     variant: "primary",
-    extraStyles: "width: 100%;"
+    extraStyles: "width: 100%;",
+    linkExtraStyles: "width: 100%;"
   }))))));
 };
 
@@ -39113,7 +39101,7 @@ var WelcomeModule = function WelcomeModule(_ref) {
   }, /*#__PURE__*/React__default.createElement(WelcomeImage, {
     src: welcomeImage
   }))), /*#__PURE__*/React__default.createElement(Box, {
-    padding: "0.875rem 1.5rem",
+    padding: isMobile ? "0.875rem 1rem" : "0.875rem 1.5rem",
     background: themeValues.headerBackgroundColor
   }, /*#__PURE__*/React__default.createElement(Heading$1, {
     variant: "h6",

package/package.json

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

package/src/components/atoms/button-with-action/ButtonWithAction.js

@@ -93,6 +93,7 @@ const ButtonWithAction = ({
     text-decoration: ${
       variant === "ghost" || variant === "smallGhost" ? "underline" : "none"
     };
+    cursor: pointer;
   `;
   const activeStyles = `
     outline: none;

package/src/components/atoms/button-with-link/ButtonWithLink.js

@@ -10,6 +10,7 @@ const ButtonWithLink = ({
   disabled = false,
   fileLink = false,
   extraStyles,
+  linkExtraStyles,
   newTab = false,
   ...otherProps
 }) => {
@@ -44,7 +45,7 @@ const ButtonWithLink = ({
       url={url}
       disabled={disabled}
       newTab={newTab}
-      extraStyles={`text-decoration: none; &:hover {
+      extraStyles={`${linkExtraStyles} text-decoration: none; &:hover {
         text-decoration: none; }`}
     >
       <ButtonWithAction {...otherProps} extraStyles={extraStyles} />

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

@@ -64,7 +64,7 @@ const CollapsibleSection = ({
       padding="0"
       tabIndex="0"
       onKeyDown={handleKeyDown}
-      hoverStyles={themeValues.focusStyles}
+      hoverStyles={`outline: none;`}
       animate={isOpen ? "open" : "closed"}
       positionTransition
     >
@@ -75,6 +75,7 @@ const CollapsibleSection = ({
           onClick={isMobile && supportsTouch ? noop : toggleSection}
           onTouchEnd={isMobile && supportsTouch ? toggleSection : noop}
           key="header"
+          hoverStyles={`cursor: pointer;`}
         >
           <Cluster justify="space-between" align="center">
             {customTitle ? (
@@ -93,7 +94,7 @@ const CollapsibleSection = ({
             )}
             <Motion
               variants={icon}
-              style={{ display: "flex", alignItems: "center" }}
+              extraStyles={`display: flex; align-items: center;`}
             >
               <ChevronIcon />
             </Motion>

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

@@ -1,11 +1,9 @@
 const titleColor = "#292A33";
 const headingBackgroundColor = "transparent";
 const bodyBackgroundColor = "transparent";
-const focusStyles = `outline: none;`;
 
 export const fallbackValues = {
   titleColor,
   headingBackgroundColor,
-  bodyBackgroundColor,
-  focusStyles
+  bodyBackgroundColor
 };

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

@@ -1,6 +1,5 @@
 import React, { useEffect, useState } from "react";
 import styled from "styled-components";
-import { ifElse, isNil, always } from "ramda";
 import Checkbox from "../../atoms/checkbox";
 import {
   required,
@@ -14,9 +13,8 @@ import {
   FormInputColumn,
   FormContainer
 } from "../../atoms/form-layouts";
-import Alert from "../../atoms/alert";
 import AccountAndRoutingModal from "../account-and-routing-modal";
-import { displayCurrency, noop } from "../../../util/general";
+import { noop } from "../../../util/general";
 
 const ModalWrapper = styled.div``;
 
@@ -30,7 +28,6 @@ const PaymentFormACH = ({
   fields,
   actions,
   showErrors,
-  fees,
   handleSubmit = noop
 }) => {
   if (clearOnDismount) {
@@ -165,22 +162,6 @@ const PaymentFormACH = ({
             hidden={hideDefaultPayment}
           />
         )}
-        {!!fees?.value && (
-          <Alert
-            heading="Processing Fee"
-            text={`There is a processing fee of ${
-              fees.type === "FLAT"
-                ? `${displayCurrency(fees.value)}`
-                : `${fees.value * 100}%`
-            } ${ifElse(
-              isNil,
-              always(""),
-              a => `with a minimum of ${displayCurrency(a)} `
-            )(fees.minimumInCents)}on all bank account payments.`}
-            variant="info"
-            showQuitLink={false}
-          />
-        )}
       </FormInputColumn>
     </FormContainer>
   );

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

@@ -1,7 +1,6 @@
 import React, { useEffect } from "react";
 import { required, hasLength, matchesRegex } from "redux-freeform";
-import { ifElse, isNil, always } from "ramda";
-import { checkCardBrand, displayCurrency, noop } from "../../../util/general";
+import { checkCardBrand, noop } from "../../../util/general";
 import { expirationDateFormat, creditCardFormat } from "../../../util/formats";
 import {
   FormInput,
@@ -10,7 +9,6 @@ import {
   FormInputRow
 } from "../../atoms/form-layouts";
 import { Box } from "../../atoms/layouts";
-import Alert from "../../atoms/alert";
 
 const nameOnCardErrors = {
   [required.error]: "Name is required"
@@ -40,7 +38,6 @@ const PaymentFormCard = ({
   fields,
   actions,
   showErrors,
-  fees,
   handleSubmit = noop,
   isMobile
 }) => {

package/src/components/molecules/reset-confirmation-form/ResetConfirmationForm.js

@@ -46,6 +46,7 @@ const ResetConfirmationForm = () => {
               text="Back to Login"
               variant="primary"
               extraStyles={`width: 100%;`}
+              linkExtraStyles={`width: 100%;`}
             />
           </Cluster>
         </Box>

package/src/components/molecules/reset-password-success/ResetPasswordSuccess.js

@@ -44,6 +44,7 @@ const ResetConfirmationForm = () => {
                 text="Log in"
                 variant="primary"
                 extraStyles={`width: 100%;`}
+                linkExtraStyles={`width: 100%;`}
               />
             </Cluster>
           </Box>

package/src/components/molecules/welcome-module/WelcomeModule.js

@@ -25,7 +25,7 @@ const WelcomeModule = ({ heading, isMobile, themeValues }) => {
           </Box>
         )}
         <Box
-          padding="0.875rem 1.5rem"
+          padding={isMobile ? "0.875rem 1rem" : "0.875rem 1.5rem"}
           background={themeValues.headerBackgroundColor}
         >
           <Heading

package/.tool-versions

@@ -1 +0,0 @@
-nodejs 10.15.3