@thecb/components 4.1.14-beta.0 → 4.1.14

package/package.json

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

package/src/components/atoms/checkbox/Checkbox.js

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React from "react";
 import styled, { css } from "styled-components";
 import { fallbackValues } from "./Checkbox.theme";
 import { noop } from "../../../util/general";
@@ -87,72 +87,58 @@ const Checkbox = ({
   checked,
   onChange = noop,
   disabled = false,
+  focused = false,
   themeValues,
   hidden = false,
   error = false
-}) => {
-  const [focused, setFocused] = useState(false);
-
-  const handleClick = (e, func) => {
-    if (e?.keyCode === 13) {
-      func();
-    }
-  };
-
-  return (
-    <Box
-      padding="0"
-      tabIndex="0"
-      onFocus={() => setFocused(true)}
-      onBlur={() => setFocused(false)}
-      onKeyDown={e => handleClick(e, onChange)}
-      hiddenStyles={hidden}
-      background={themeValues.backgroundColor}
-      extraStyles="outline: none;"
-    >
-      <CheckboxLabelContainer>
-        <CheckboxContainer data-qa="Checkbox">
-          <HiddenCheckbox
-            id={`checkbox-${name}`}
-            disabled={disabled}
-            name={name}
-            aria-label={name}
-            checked={checked}
-            onChange={onChange}
-            tabIndex="-1"
-          />
-          <StyledCheckbox
-            error={error}
+}) => (
+  <Box
+    padding="0"
+    hiddenStyles={hidden}
+    background={themeValues.backgroundColor}
+  >
+    <CheckboxLabelContainer>
+      <CheckboxContainer data-qa="Checkbox">
+        <HiddenCheckbox
+          id={`checkbox-${name}`}
+          disabled={disabled}
+          name={name}
+          aria-label={name}
+          checked={checked}
+          onChange={onChange}
+          tabIndex="-1"
+        />
+        <StyledCheckbox
+          error={error}
+          disabled={disabled}
+          checked={checked}
+          focused={focused}
+          defaultStyles={themeValues.defaultStyles}
+          checkedStyles={themeValues.checkedStyles}
+          errorStyles={themeValues.errorStyles}
+          disabledStyles={themeValues.disabledStyles}
+          focusedStyles={themeValues.focusedStyles}
+        >
+          <CheckboxIcon
+            viewBox="0 0 24 24"
             disabled={disabled}
-            checked={checked}
-            focused={focused}
-            defaultStyles={themeValues.defaultStyles}
-            checkedStyles={themeValues.checkedStyles}
-            errorStyles={themeValues.errorStyles}
-            disabledStyles={themeValues.disabledStyles}
-            focusedStyles={themeValues.focusedStyles}
+            disabledCheckColor={themeValues.disabledCheckColor}
+            checkColor={themeValues.checkColor}
           >
-            <CheckboxIcon
-              viewBox="0 0 24 24"
-              disabled={disabled}
-              disabledCheckColor={themeValues.disabledCheckColor}
-              checkColor={themeValues.checkColor}
-            >
-              <polyline points="20 6 9 17 4 12" />
-            </CheckboxIcon>
-          </StyledCheckbox>
-        </CheckboxContainer>
-        <Text
-          variant="p"
-          weight={themeValues.textFontWeight}
-          color={themeValues.textColor}
-          extraStyles={`margin-left: 1rem`}
-        >
-          {title}
-        </Text>
-      </CheckboxLabelContainer>
-    </Box>
-  );
-};
+            <polyline points="20 6 9 17 4 12" />
+          </CheckboxIcon>
+        </StyledCheckbox>
+      </CheckboxContainer>
+      <Text
+        variant="p"
+        weight={themeValues.textFontWeight}
+        color={themeValues.textColor}
+        extraStyles={`margin-left: 1rem`}
+      >
+        {title}
+      </Text>
+    </CheckboxLabelContainer>
+  </Box>
+);
 
 export default themeComponent(Checkbox, "Checkbox", fallbackValues, "default");

package/src/components/atoms/dropdown/Dropdown.js

@@ -201,6 +201,7 @@ const Dropdown = ({
     <Box
       onKeyDown={onKeyDown}
       onClick={onClick}
+      tabIndex={0}
       padding="0"
       width="100%"
       hoverStyles={`background-color: ${themeValues.hoverColor};`}
@@ -221,8 +222,7 @@ const Dropdown = ({
             : GREY_CHATEAU
         }
         borderRadius="2px"
-        tabIndex={0}
-        extraStyles={`height: 48px;`}
+        extraStyles={`tabindex: 0; height: 48px;`}
         dataQa={placeholder}
       >
         <Stack direction="row" bottomItem={2}>

package/src/components/atoms/text/Text.js

@@ -13,7 +13,6 @@ const Text = ({
   extraStyles = ``,
   hoverStyles,
   onClick,
-  onKeyPress,
   as,
   dataQa,
   children,
@@ -28,7 +27,6 @@ const Text = ({
     extraStyles={extraStyles}
     hoverStyles={hoverStyles}
     onClick={onClick}
-    onKeyPress={onKeyPress}
     data-qa={dataQa}
     {...rest}
   >

package/src/components/molecules/account-and-routing-modal/AccountAndRoutingModal.js

@@ -16,9 +16,24 @@ const AccountAndRoutingModal = ({
   acceptText,
   content,
   imageType,
+  variant,
   themeValues
 }) => (
   <Modal
+    ModalLink={() => (
+      <Text
+        variant={variant === "default" ? "pS" : "pXS"}
+        onClick={() => toggleOpen(true)}
+        color={themeValues.linkColor}
+        weight={themeValues.fontWeight}
+        hoverStyles={themeValues.modalLinkHoverFocus}
+        extraStyles={`cursor: pointer;`}
+        tabIndex="0"
+        onKeyPress={e => e.key === "Enter" && toggleOpen(true)}
+      >
+        {link}
+      </Text>
+    )}
     modalOpen={isOpen}
     hideModal={() => toggleOpen(false)}
     showModal={() => toggleOpen(true)}
@@ -48,20 +63,7 @@ const AccountAndRoutingModal = ({
       toggleAccepted(true);
       toggleOpen(false);
     }}
-  >
-    <Text
-      variant="pS"
-      onClick={() => toggleOpen(true)}
-      onKeyPress={e => e.key === "Enter" && toggleOpen(true)}
-      tabIndex="0"
-      color={themeValues.linkColor}
-      weight={themeValues.fontWeight}
-      hoverStyles={themeValues.modalLinkHoverFocus}
-      extraStyles={`cursor: pointer;`}
-    >
-      {link}
-    </Text>
-  </Modal>
+  />
 );
 
 export default themeComponent(

package/src/components/molecules/account-and-routing-modal/AccountAndRoutingModal.theme.js

@@ -1,13 +1,18 @@
-import { FONT_WEIGHT_REGULAR } from "../../../constants/style_constants";
+import {
+  FONT_WEIGHT_REGULAR,
+  FONT_WEIGHT_SEMIBOLD
+} from "../../../constants/style_constants";
 
-const linkColor = { default: "#357fb8" };
-const fontSize = { default: "1rem" };
-const lineHeight = { default: "1.5rem" };
+const linkColor = { default: "#357fb8", footer: "#ffffff" };
+const fontSize = { default: "1rem", footer: "0.875rem" };
+const lineHeight = { default: "1.5rem", footer: "1.25rem" };
 const fontWeight = {
-  default: FONT_WEIGHT_REGULAR
+  default: FONT_WEIGHT_REGULAR,
+  footer: FONT_WEIGHT_SEMIBOLD
 };
 const modalLinkHoverFocus = {
-  default: `outline: none; text-decoration: underline;`
+  default: ``,
+  footer: `outline: none; text-decoration: underline;`
 };
 
 export const fallbackValues = {

package/src/components/molecules/address-form/AddressForm.js

@@ -1,5 +1,6 @@
-import React, { useEffect } from "react";
+import React, { useEffect, useState } from "react";
 import { required, hasLength } from "redux-freeform";
+import styled from "styled-components";
 import StateProvinceDropdown from "../../atoms/state-province-dropdown";
 import Checkbox from "../../atoms/checkbox";
 import CountryDropdown from "../../atoms/country-dropdown";
@@ -11,6 +12,10 @@ import {
   FormInputColumn
 } from "../../atoms/form-layouts";
 
+const CheckboxWrapper = styled.div`
+  outline: none;
+`;
+
 const AddressForm = ({
   variant = "default",
   fields,
@@ -22,6 +27,13 @@ const AddressForm = ({
   saveToWallet,
   walletCheckboxMarked
 }) => {
+  const [checkboxFocused, focusCheckbox] = useState(false);
+
+  const handleClick = (e, func) => {
+    if (e?.keyCode === 13) {
+      func();
+    }
+  };
   if (clearOnDismount) {
     useEffect(() => () => actions.form.clear(), []);
   }
@@ -108,12 +120,20 @@ const AddressForm = ({
           onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
         />
         {showWalletCheckbox && (
-          <Checkbox
-            name="address checkbox"
-            title="Save address to wallet"
-            checked={walletCheckboxMarked}
-            onChange={saveToWallet}
-          />
+          <CheckboxWrapper
+            tabIndex="0"
+            onFocus={() => focusCheckbox(true)}
+            onBlur={() => focusCheckbox(false)}
+            onKeyDown={e => handleClick(e, saveToWallet)}
+          >
+            <Checkbox
+              name="address checkbox"
+              title="Save address to wallet"
+              checked={walletCheckboxMarked}
+              onChange={saveToWallet}
+              focused={checkboxFocused}
+            />
+          </CheckboxWrapper>
         )}
       </FormInputColumn>
     </FormContainer>

package/src/components/molecules/email-form/EmailForm.js

@@ -1,4 +1,5 @@
-import React, { useEffect } from "react";
+import React, { useEffect, useState } from "react";
+import styled from "styled-components";
 import { required, isProbablyEmail } from "redux-freeform";
 import {
   FormInput,
@@ -9,6 +10,10 @@ import Checkbox from "../../atoms/checkbox";
 import Paragraph from "../../atoms/paragraph";
 import { noop } from "../../../util/general";
 
+const CheckboxWrapper = styled.div`
+  outline: none;
+`;
+
 const EmailForm = ({
   variant = "default",
   clearOnDismount,
@@ -21,6 +26,13 @@ const EmailForm = ({
   saveToWallet,
   walletCheckboxMarked
 }) => {
+  const [checkboxFocused, focusCheckbox] = useState(false);
+  const handleClick = (e, func) => {
+    if (e?.keyCode === 13) {
+      func();
+    }
+  };
+
   if (clearOnDismount) {
     useEffect(() => () => actions.form.clear(), []);
   }
@@ -47,12 +59,20 @@ const EmailForm = ({
           onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
         />
         {showWalletCheckbox && (
-          <Checkbox
-            name="email checkbox"
-            title="Save email address to wallet"
-            checked={walletCheckboxMarked}
-            onChange={saveToWallet}
-          />
+          <CheckboxWrapper
+            tabIndex="0"
+            onFocus={() => focusCheckbox(true)}
+            onBlur={() => focusCheckbox(false)}
+            onKeyDown={e => handleClick(e, saveToWallet)}
+          >
+            <Checkbox
+              name="email checkbox"
+              title="Save email address to wallet"
+              checked={walletCheckboxMarked}
+              onChange={saveToWallet}
+              focused={checkboxFocused}
+            />
+          </CheckboxWrapper>
         )}
       </FormInputColumn>
     </FormContainer>

package/src/components/molecules/email-form/EmailForm.stories.js

@@ -20,8 +20,5 @@ const ConnectedForm = connect(
   EmailFormState.mapDispatchToProps
 )(EmailForm);
 export const emailForm = () => (
-  <ConnectedForm
-    showErrors={boolean("showErrors", false, "props")}
-    showWalletCheckbox={boolean("showWalletCheckbox", false, "props")}
-  />
+  <ConnectedForm showErrors={boolean("showErrors", false, "props")} />
 );

package/src/components/molecules/modal/Modal.js

@@ -21,6 +21,7 @@ a different route (as with a link) connect() and use "push" from connected-react
 const getApplicationNode = () => document.getElementById("root");
 
 const Modal = ({
+  ModalLink,
   hideModal,
   continueAction,
   cancelAction,
@@ -35,12 +36,12 @@ const Modal = ({
   defaultWrapper = true,
   onlyCloseButton = false,
   maxHeight,
-  underlayClickExits = true,
-  children
+  underlayClickExits = true
 }) => {
   const { isMobile } = useContext(ThemeContext);
   return (
     <Fragment>
+      <ModalLink />
       {modalOpen && (
         <AriaModal
           onExit={hideModal}
@@ -133,7 +134,6 @@ const Modal = ({
           </Box>
         </AriaModal>
       )}
-      {children}
     </Fragment>
   );
 };

package/src/components/molecules/obligation/modules/AutopayModalModule.js

@@ -1,7 +1,6 @@
 import React from "react";
 import Modal from "../../modal";
 import ButtonWithAction from "../../../atoms/button-with-action";
-import Text from "../../../atoms/text";
 import { AutopayOnIcon } from "../../../atoms/icons";
 import { Box, Cluster } from "../../../atoms/layouts";
 import { fallbackValues } from "./AutopayModalModule.theme";
@@ -62,56 +61,48 @@ const AutopayModal = ({
      `;
   return (
     <Modal
+      ModalLink={() =>
+        buttonLinkType ? (
+          <ButtonWithAction
+            text={autoPayActive ? `Manage ${planType}` : `Set Up ${planType}`}
+            variant="tertiary"
+            action={() => {
+              toggleModal(true);
+            }}
+            dataQa="Manage Autopay"
+            extraStyles={isMobile && `flex-grow: 1; width: 100%;`}
+          />
+        ) : (
+          <Box
+            padding="0"
+            onClick={() => {
+              toggleModal(true);
+            }}
+            hoverStyles={hoverStyles}
+            activeStyles={activeStyles}
+            extraStyles={defaultStyles}
+          >
+            <Cluster
+              justify={isMobile ? "flex-start" : "flex-end"}
+              align="center"
+            >
+              <AutopayOnIcon />
+              <ButtonWithAction
+                text={`${planType} On`}
+                variant="smallGhost"
+                dataQa="Autopay On"
+                textExtraStyles={`font-size: 0.875rem; `}
+                extraStyles={`min-width: auto; padding: 0 0 0 6px;`}
+              />
+            </Cluster>
+          </Box>
+        )
+      }
       showModal={() => toggleModal(true)}
       hideModal={() => toggleModal(false)}
       modalOpen={modalOpen}
       {...modalExtraProps}
-    >
-      {buttonLinkType ? (
-        <ButtonWithAction
-          text={autoPayActive ? `Manage ${planType}` : `Set Up ${planType}`}
-          variant="tertiary"
-          action={() => {
-            toggleModal(true);
-          }}
-          dataQa="Manage Autopay"
-          extraStyles={isMobile && `flex-grow: 1; width: 100%;`}
-        />
-      ) : (
-        <Box
-          padding="0"
-          onClick={() => {
-            toggleModal(true);
-          }}
-          hoverStyles={hoverStyles}
-          activeStyles={activeStyles}
-          extraStyles={defaultStyles}
-        >
-          <Cluster
-            justify={isMobile ? "flex-start" : "flex-end"}
-            align="center"
-          >
-            <AutopayOnIcon />
-            <Text
-              variant="pS"
-              onClick={() => toggleModal(true)}
-              onKeyPress={e => {
-                console.log({ e });
-                e.key === "Enter" && toggleModal(true);
-              }}
-              tabIndex="0"
-              dataQa={`${planType} On`}
-              color={themeValues.linkColor}
-              weight={themeValues.fontWeight}
-              hoverStyles={themeValues.modalLinkHoverFocus}
-              extraStyles={`padding: 0 0 0 6px;`}
-            >
-              {`${planType} On`}
-            </Text>
-          </Cluster>
-        </Box>
-      )}
-    </Modal>
+    />
   );
 };
 

package/src/components/molecules/obligation/modules/AutopayModalModule.theme.js

@@ -1,20 +1,9 @@
-import { FONT_WEIGHT_REGULAR } from "../../../../constants/style_constants";
-
 const color = "#15749D";
 const hoverColor = "#116285";
 const activeColor = "#0E506D";
-const linkColor = "#357fb8";
-const fontWeight = FONT_WEIGHT_REGULAR;
-const modalLinkHoverFocus = `outline: none;
-  cursor: pointer;
-  text-decoration: underline;
-  text-decoration-color: #357fb8;`;
 
 export const fallbackValues = {
   color,
   hoverColor,
-  activeColor,
-  linkColor,
-  fontWeight,
-  modalLinkHoverFocus
+  activeColor
 };

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

@@ -1,4 +1,5 @@
 import React, { useEffect, useState } from "react";
+import styled from "styled-components";
 import Checkbox from "../../atoms/checkbox";
 import {
   required,
@@ -15,6 +16,12 @@ import {
 import AccountAndRoutingModal from "../account-and-routing-modal";
 import { noop } from "../../../util/general";
 
+const ModalWrapper = styled.div``;
+
+const CheckboxWrapper = styled.div`
+  outline: none;
+`;
+
 const PaymentFormACH = ({
   variant = "default",
   defaultMethod,
@@ -30,6 +37,12 @@ const PaymentFormACH = ({
   saveToWallet,
   walletCheckboxMarked
 }) => {
+  const [checkboxFocused, focusCheckbox] = useState(false);
+  const handleClick = (e, func) => {
+    if (e?.keyCode === 13) {
+      func();
+    }
+  };
   if (clearOnDismount) {
     useEffect(() => () => actions.form.clear(), []);
   }
@@ -78,15 +91,22 @@ const PaymentFormACH = ({
           fieldActions={actions.fields.routingNumber}
           showErrors={showErrors}
           helperModal={() => (
-            <AccountAndRoutingModal
-              link="What is this?"
-              title="Where is my routing number?"
-              content="Your routing number is the 9-digit number in the bottom left
+            <ModalWrapper
+              tabIndex="0"
+              onKeyDown={e =>
+                e.key === "Enter" && toggleShowAccount(!showRouting)
+              }
+            >
+              <AccountAndRoutingModal
+                link="What is this?"
+                title="Where is my routing number?"
+                content="Your routing number is the 9-digit number in the bottom left
                   corner of your check."
-              imageType="Routing"
-              isOpen={showRouting}
-              toggleOpen={toggleShowRouting}
-            />
+                imageType="Routing"
+                isOpen={showRouting}
+                toggleOpen={toggleShowRouting}
+              />
+            </ModalWrapper>
           )}
           onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
         />
@@ -105,15 +125,22 @@ const PaymentFormACH = ({
           fieldActions={actions.fields.accountNumber}
           showErrors={showErrors}
           helperModal={() => (
-            <AccountAndRoutingModal
-              link="What is this?"
-              title="Where is my account number?"
-              content="Your account number is usually the 10-digit number in the bottom
+            <ModalWrapper
+              tabIndex="0"
+              onKeyDown={e =>
+                e.key === "Enter" && toggleShowAccount(!showAccount)
+              }
+            >
+              <AccountAndRoutingModal
+                link="What is this?"
+                title="Where is my account number?"
+                content="Your account number is usually the 10-digit number in the bottom
                 of your check to the right of the routing number."
-              imageType="Account"
-              isOpen={showAccount}
-              toggleOpen={toggleShowAccount}
-            />
+                imageType="Account"
+                isOpen={showAccount}
+                toggleOpen={toggleShowAccount}
+              />
+            </ModalWrapper>
           )}
           onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
         />
@@ -149,12 +176,20 @@ const PaymentFormACH = ({
           />
         )}
         {showWalletCheckbox && (
-          <Checkbox
-            name="bank checkbox"
-            title="Save bank account to wallet"
-            checked={walletCheckboxMarked}
-            onChange={saveToWallet}
-          />
+          <CheckboxWrapper
+            tabIndex="0"
+            onFocus={() => focusCheckbox(true)}
+            onBlur={() => focusCheckbox(false)}
+            onKeyDown={e => handleClick(e, saveToWallet)}
+          >
+            <Checkbox
+              name="bank checkbox"
+              title="Save bank account to wallet"
+              checked={walletCheckboxMarked}
+              onChange={saveToWallet}
+              focused={checkboxFocused}
+            />
+          </CheckboxWrapper>
         )}
       </FormInputColumn>
     </FormContainer>