@thecb/components 4.1.14-beta.0 → 4.1.14

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

@@ -1,4 +1,5 @@
-import React, { useEffect } from "react";
+import React, { useEffect, useState } from "react";
+import styled from "styled-components";
 import { required, hasLength, matchesRegex } from "redux-freeform";
 import Checkbox from "../../atoms/checkbox";
 import CountryDropdown from "../../atoms/country-dropdown";
@@ -16,6 +17,10 @@ import {
 } from "../../atoms/form-layouts";
 import { Box } from "../../atoms/layouts";
 
+const CheckboxWrapper = styled.div`
+  outline: none;
+`;
+
 const nameOnCardErrors = {
   [required.error]: "Name is required"
 };
@@ -53,6 +58,12 @@ 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();
@@ -137,12 +148,20 @@ const PaymentFormCard = ({
           </Box>
         )}
         {showWalletCheckbox && (
-          <Checkbox
-            name="credit card checkbox"
-            title="Save credit card to wallet"
-            checked={walletCheckboxMarked}
-            onChange={saveToWallet}
-          />
+          <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>
         )}
       </FormInputColumn>
     </FormContainer>

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

@@ -1,4 +1,5 @@
-import React, { useEffect } from "react";
+import React, { useEffect, useState } from "react";
+import styled from "styled-components";
 import { required, hasLength } from "redux-freeform";
 import { createFormat } from "formatted-input";
 import {
@@ -10,6 +11,10 @@ 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,
@@ -21,6 +26,13 @@ const PhoneForm = ({
   saveToWallet,
   walletCheckboxMarked
 }) => {
+  const [checkboxFocused, focusCheckbox] = useState(false);
+  const handleClick = (e, func) => {
+    if (e?.keyCode === 13) {
+      func();
+    }
+  };
+
   if (clearOnDismount) {
     useEffect(() => () => actions.form.clear(), []);
   }
@@ -42,12 +54,20 @@ const PhoneForm = ({
           onKeyUp={e => e.key === "Enter" && handleSubmit(e)}
         />
         {showWalletCheckbox && (
-          <Checkbox
-            name="phone checkbox"
-            title="Save phone number to wallet"
-            checked={walletCheckboxMarked}
-            onChange={saveToWallet}
-          />
+          <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>
         )}
       </FormInputColumn>
     </FormContainer>

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

@@ -1,4 +1,5 @@
 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";
@@ -6,6 +7,12 @@ 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,
@@ -14,27 +21,48 @@ 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">
-        <Checkbox
-          name="terms"
-          error={error}
-          checked={isChecked}
-          onChange={onCheck}
-        />
+        <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>
         <Stack>
           <Text variant="p" fontWeight={FONT_WEIGHT_BOLD}>
             Terms and Conditions
           </Text>
           <Box padding="0">{html}</Box>
           {terms && (
-            <TermsAndConditionsModal
-              link="Learn More"
-              terms={terms}
-              isOpen={showTerms}
-              toggleOpen={toggleShowTerms}
-            />
+            <ModalWrapper
+              tabIndex="0"
+              onKeyDown={e => handleClick(e, () => toggleShowTerms(!showTerms))}
+            >
+              <TermsAndConditionsModal
+                link="Learn More"
+                terms={terms}
+                isOpen={showTerms}
+                toggleOpen={toggleShowTerms}
+              />
+            </ModalWrapper>
           )}
         </Stack>
       </Stack>

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

@@ -17,6 +17,20 @@ 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)}
@@ -38,20 +52,7 @@ 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: `outline: none; text-decoration: underline;`,
+  default: ``,
   footer: `outline: none; text-decoration: underline;`
 };
 

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

@@ -1,27 +0,0 @@
-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;