@thecb/components 4.1.14 → 4.1.16

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

@@ -1,5 +1,4 @@
-import React, { useEffect, useState } from "react";
-import styled from "styled-components";
+import React, { useEffect } from "react";
 import { required, isProbablyEmail } from "redux-freeform";
 import {
   FormInput,
@@ -10,10 +9,6 @@ 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,
@@ -26,13 +21,6 @@ const EmailForm = ({
   saveToWallet,
   walletCheckboxMarked
 }) => {
-  const [checkboxFocused, focusCheckbox] = useState(false);
-  const handleClick = (e, func) => {
-    if (e?.keyCode === 13) {
-      func();
-    }
-  };
-
   if (clearOnDismount) {
     useEffect(() => () => actions.form.clear(), []);
   }
@@ -59,20 +47,12 @@ const EmailForm = ({
           onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
         />
         {showWalletCheckbox && (
-          <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>
+          <Checkbox
+            name="email checkbox"
+            title="Save email address to wallet"
+            checked={walletCheckboxMarked}
+            onChange={saveToWallet}
+          />
         )}
       </FormInputColumn>
     </FormContainer>

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

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

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

@@ -21,7 +21,6 @@ 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,
@@ -36,12 +35,12 @@ const Modal = ({
   defaultWrapper = true,
   onlyCloseButton = false,
   maxHeight,
-  underlayClickExits = true
+  underlayClickExits = true,
+  children
 }) => {
   const { isMobile } = useContext(ThemeContext);
   return (
     <Fragment>
-      <ModalLink />
       {modalOpen && (
         <AriaModal
           onExit={hideModal}
@@ -134,6 +133,7 @@ const Modal = ({
           </Box>
         </AriaModal>
       )}
+      {children}
     </Fragment>
   );
 };

package/src/components/molecules/obligation/modules/AmountModule.stories.js

@@ -0,0 +1,27 @@
+import React from "react";
+import { text, boolean } from "@storybook/addon-knobs";
+
+import AmountModule from "./AmountModule";
+import page from "../../../../../.storybook/page";
+import { noop } from "../../../../util/general";
+
+const groupId = "props";
+
+export const amountModule = () => (
+  <AmountModule
+    totalAmountDue={text("totalAmountDue", "123", groupId)}
+    autoPayEnabled={boolean("autopayEnabled", true, groupId)}
+    isMobile={boolean("isMobile", false, groupId)}
+    deactivatePaymentSchedule={noop}
+    navigateToSettings={noop}
+    autoPaySchedule={{}}
+    paymentPlanSchedule={{}}
+    isPaymentPlan={boolean("isPaymentPlan", false, groupId)}
+  />
+);
+
+const story = page({
+  title: "Components|Molecules/AmountModule",
+  Component: AmountModule
+});
+export default story;

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

@@ -1,6 +1,7 @@
 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";
@@ -61,48 +62,56 @@ 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,9 +1,20 @@
+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
+  activeColor,
+  linkColor,
+  fontWeight,
+  modalLinkHoverFocus
 };

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

@@ -1,5 +1,4 @@
 import React, { useEffect, useState } from "react";
-import styled from "styled-components";
 import Checkbox from "../../atoms/checkbox";
 import {
   required,
@@ -16,12 +15,6 @@ 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,
@@ -37,12 +30,6 @@ const PaymentFormACH = ({
   saveToWallet,
   walletCheckboxMarked
 }) => {
-  const [checkboxFocused, focusCheckbox] = useState(false);
-  const handleClick = (e, func) => {
-    if (e?.keyCode === 13) {
-      func();
-    }
-  };
   if (clearOnDismount) {
     useEffect(() => () => actions.form.clear(), []);
   }
@@ -91,22 +78,15 @@ const PaymentFormACH = ({
           fieldActions={actions.fields.routingNumber}
           showErrors={showErrors}
           helperModal={() => (
-            <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
+            <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}
-              />
-            </ModalWrapper>
+              imageType="Routing"
+              isOpen={showRouting}
+              toggleOpen={toggleShowRouting}
+            />
           )}
           onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
         />
@@ -125,22 +105,15 @@ const PaymentFormACH = ({
           fieldActions={actions.fields.accountNumber}
           showErrors={showErrors}
           helperModal={() => (
-            <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
+            <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}
-              />
-            </ModalWrapper>
+              imageType="Account"
+              isOpen={showAccount}
+              toggleOpen={toggleShowAccount}
+            />
           )}
           onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
         />
@@ -176,20 +149,12 @@ const PaymentFormACH = ({
           />
         )}
         {showWalletCheckbox && (
-          <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>
+          <Checkbox
+            name="bank checkbox"
+            title="Save bank account to wallet"
+            checked={walletCheckboxMarked}
+            onChange={saveToWallet}
+          />
         )}
       </FormInputColumn>
     </FormContainer>

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

@@ -1,5 +1,4 @@
-import React, { useEffect, useState } from "react";
-import styled from "styled-components";
+import React, { useEffect } from "react";
 import { required, hasLength, matchesRegex } from "redux-freeform";
 import Checkbox from "../../atoms/checkbox";
 import CountryDropdown from "../../atoms/country-dropdown";
@@ -17,10 +16,6 @@ import {
 } from "../../atoms/form-layouts";
 import { Box } from "../../atoms/layouts";
 
-const CheckboxWrapper = styled.div`
-  outline: none;
-`;
-
 const nameOnCardErrors = {
   [required.error]: "Name is required"
 };
@@ -58,12 +53,6 @@ const PaymentFormCard = ({
   saveToWallet,
   walletCheckboxMarked
 }) => {
-  const [checkboxFocused, focusCheckbox] = useState(false);
-  const handleClick = (e, func) => {
-    if (e?.keyCode === 13) {
-      func();
-    }
-  };
   useEffect(() => {
     if (clearOnDismount) {
       return () => actions.form.clear();
@@ -148,20 +137,12 @@ const PaymentFormCard = ({
           </Box>
         )}
         {showWalletCheckbox && (
-          <CheckboxWrapper
-            tabIndex="0"
-            onFocus={() => focusCheckbox(true)}
-            onBlur={() => focusCheckbox(false)}
-            onKeyDown={e => handleClick(e, saveToWallet)}
-          >
-            <Checkbox
-              name="credit card checkbox"
-              title="Save credit card to wallet"
-              checked={walletCheckboxMarked}
-              onChange={saveToWallet}
-              focused={checkboxFocused}
-            />
-          </CheckboxWrapper>
+          <Checkbox
+            name="credit card checkbox"
+            title="Save credit card to wallet"
+            checked={walletCheckboxMarked}
+            onChange={saveToWallet}
+          />
         )}
       </FormInputColumn>
     </FormContainer>

package/src/components/molecules/phone-form/PhoneForm.js

@@ -1,5 +1,4 @@
-import React, { useEffect, useState } from "react";
-import styled from "styled-components";
+import React, { useEffect } from "react";
 import { required, hasLength } from "redux-freeform";
 import { createFormat } from "formatted-input";
 import {
@@ -11,10 +10,6 @@ import Checkbox from "../../atoms/checkbox";
 import { noop } from "../../../util/general";
 import { phoneFormats, formatDelimiter } from "../../../util/formats";
 
-const CheckboxWrapper = styled.div`
-  outline: none;
-`;
-
 const PhoneForm = ({
   variant = "default",
   fields,
@@ -26,13 +21,6 @@ const PhoneForm = ({
   saveToWallet,
   walletCheckboxMarked
 }) => {
-  const [checkboxFocused, focusCheckbox] = useState(false);
-  const handleClick = (e, func) => {
-    if (e?.keyCode === 13) {
-      func();
-    }
-  };
-
   if (clearOnDismount) {
     useEffect(() => () => actions.form.clear(), []);
   }
@@ -54,20 +42,12 @@ const PhoneForm = ({
           onKeyUp={e => e.key === "Enter" && handleSubmit(e)}
         />
         {showWalletCheckbox && (
-          <CheckboxWrapper
-            tabIndex="0"
-            onFocus={() => focusCheckbox(true)}
-            onBlur={() => focusCheckbox(false)}
-            onKeyDown={e => handleClick(e, saveToWallet)}
-          >
-            <Checkbox
-              name="phone checkbox"
-              title="Save phone number to wallet"
-              checked={walletCheckboxMarked}
-              onChange={saveToWallet}
-              focused={checkboxFocused}
-            />
-          </CheckboxWrapper>
+          <Checkbox
+            name="phone checkbox"
+            title="Save phone number to wallet"
+            checked={walletCheckboxMarked}
+            onChange={saveToWallet}
+          />
         )}
       </FormInputColumn>
     </FormContainer>

package/src/components/molecules/terms-and-conditions/TermsAndConditions.js

@@ -1,5 +1,4 @@
 import React, { useState } from "react";
-import styled from "styled-components";
 import Checkbox from "../../atoms/checkbox";
 import Text from "../../atoms/text";
 import { Box, Stack } from "../../atoms/layouts";
@@ -7,12 +6,6 @@ import DisplayBox from "../../atoms/display-box";
 import { FONT_WEIGHT_BOLD } from "../../../constants/style_constants";
 import TermsAndConditionsModal from "../../molecules/terms-and-conditions-modal";
 
-const CheckboxWrapper = styled.div`
-  outline: none;
-`;
-
-const ModalWrapper = styled.div``;
-
 const TermsAndConditions = ({
   onCheck,
   isChecked,
@@ -21,48 +14,27 @@ const TermsAndConditions = ({
   error = false
 }) => {
   const [showTerms, toggleShowTerms] = useState(false);
-  const [checkboxFocused, focusCheckbox] = useState(false);
-
-  const handleClick = (e, func) => {
-    if (e?.keyCode === 13) {
-      func();
-    }
-  };
-
   return (
     <DisplayBox>
       <Stack direction="row">
-        <CheckboxWrapper
-          tabIndex="0"
-          onFocus={() => focusCheckbox(true)}
-          onBlur={() => focusCheckbox(false)}
-          onKeyDown={e => handleClick(e, onCheck)}
-        >
-          <Checkbox
-            name="terms"
-            error={error}
-            checked={isChecked}
-            onChange={onCheck}
-            focused={checkboxFocused}
-          />
-        </CheckboxWrapper>
+        <Checkbox
+          name="terms"
+          error={error}
+          checked={isChecked}
+          onChange={onCheck}
+        />
         <Stack>
           <Text variant="p" fontWeight={FONT_WEIGHT_BOLD}>
             Terms and Conditions
           </Text>
           <Box padding="0">{html}</Box>
           {terms && (
-            <ModalWrapper
-              tabIndex="0"
-              onKeyDown={e => handleClick(e, () => toggleShowTerms(!showTerms))}
-            >
-              <TermsAndConditionsModal
-                link="Learn More"
-                terms={terms}
-                isOpen={showTerms}
-                toggleOpen={toggleShowTerms}
-              />
-            </ModalWrapper>
+            <TermsAndConditionsModal
+              link="Learn More"
+              terms={terms}
+              isOpen={showTerms}
+              toggleOpen={toggleShowTerms}
+            />
           )}
         </Stack>
       </Stack>

package/src/components/molecules/terms-and-conditions-modal/TermsAndConditionsModal.js

@@ -17,20 +17,6 @@ const TermsAndConditionsModal = ({
   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)}
@@ -52,7 +38,20 @@ const TermsAndConditionsModal = ({
       toggleAccepted(true);
       toggleOpen(false);
     }}
-  />
+  >
+    <Text
+      variant={variant === "default" ? "pS" : "pXS"}
+      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/terms-and-conditions-modal/TermsAndConditionsModal.theme.js

@@ -13,7 +13,7 @@ const fontWeight = {
   footer: FONT_WEIGHT_SEMIBOLD
 };
 const modalLinkHoverFocus = {
-  default: ``,
+  default: `outline: none; text-decoration: underline;`,
   footer: `outline: none; text-decoration: underline;`
 };