@thecb/components 4.1.15 → 4.1.17

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "4.1.15",
+  "version": "4.1.17",
   "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 from "react";
+import React, { useState } from "react";
 import styled, { css } from "styled-components";
 import { fallbackValues } from "./Checkbox.theme";
 import { noop } from "../../../util/general";
@@ -87,58 +87,72 @@ const Checkbox = ({
   checked,
   onChange = noop,
   disabled = false,
-  focused = false,
   themeValues,
   hidden = false,
   error = false
-}) => (
-  <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"
+}) => {
+  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}
-            disabledCheckColor={themeValues.disabledCheckColor}
-            checkColor={themeValues.checkColor}
+            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}
           >
-            <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>
-);
+            <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>
+  );
+};
 
 export default themeComponent(Checkbox, "Checkbox", fallbackValues, "default");

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

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

package/src/components/atoms/icons/GenericCardLarge.js

@@ -0,0 +1,39 @@
+import React from "react";
+
+const GenericCardLarge = () => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="34"
+      height="28"
+      viewBox="0 0 34 28"
+    >
+      <g fill="none" fillRule="evenodd" stroke="none" strokeWidth="1">
+        <g fillRule="nonzero" transform="translate(-142 -927)">
+          <g transform="translate(94 518)">
+            <g transform="translate(24 350)">
+              <g transform="translate(0 35)">
+                <g transform="translate(24 24)">
+                  <path
+                    fill="#CACED8"
+                    d="M29.259.699H3.282C1.497.699.035 2.217.035 4.074v20.25c0 1.856 1.462 3.375 3.247 3.375H29.26c1.786 0 3.247-1.52 3.247-3.375V4.074c0-1.857-1.461-3.375-3.247-3.375z"
+                  ></path>
+                  <path
+                    fill="#000"
+                    d="M0.035 6.699H32.50599999999999V13.699H0.035z"
+                  ></path>
+                  <path
+                    fill="#000"
+                    d="M27.51 22.699h-6.244c-.468 0-.937-.47-.937-.938v-3.125c0-.469.469-.937.937-.937h6.244c.469 0 .937.468.937.937v3.125c0 .625-.312.938-.937.938z"
+                  ></path>
+                </g>
+              </g>
+            </g>
+          </g>
+        </g>
+      </g>
+    </svg>
+  );
+};
+
+export default GenericCardLarge;

package/src/components/atoms/icons/index.js

@@ -41,6 +41,7 @@ import VoidedIcon from "./VoidedIcon";
 import StatusUnknownIcon from "./StatusUnknownIcon";
 import CarrotIcon from "./CarrotIcon";
 import ProfileIcon from "./ProfileIcon";
+import GenericCardLarge from "./GenericCardLarge";
 
 export {
   AccountsIcon,
@@ -85,5 +86,6 @@ export {
   VoidedIcon,
   StatusUnknownIcon,
   CarrotIcon,
-  ProfileIcon
+  ProfileIcon,
+  GenericCardLarge
 };

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

@@ -13,6 +13,7 @@ const Text = ({
   extraStyles = ``,
   hoverStyles,
   onClick,
+  onKeyPress,
   as,
   dataQa,
   children,
@@ -27,6 +28,7 @@ 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,24 +16,9 @@ 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)}
@@ -63,7 +48,20 @@ 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,18 +1,13 @@
-import {
-  FONT_WEIGHT_REGULAR,
-  FONT_WEIGHT_SEMIBOLD
-} from "../../../constants/style_constants";
+import { FONT_WEIGHT_REGULAR } from "../../../constants/style_constants";
 
-const linkColor = { default: "#357fb8", footer: "#ffffff" };
-const fontSize = { default: "1rem", footer: "0.875rem" };
-const lineHeight = { default: "1.5rem", footer: "1.25rem" };
+const linkColor = { default: "#357fb8" };
+const fontSize = { default: "1rem" };
+const lineHeight = { default: "1.5rem" };
 const fontWeight = {
-  default: FONT_WEIGHT_REGULAR,
-  footer: FONT_WEIGHT_SEMIBOLD
+  default: FONT_WEIGHT_REGULAR
 };
 const modalLinkHoverFocus = {
-  default: ``,
-  footer: `outline: none; text-decoration: underline;`
+  default: `outline: none; text-decoration: underline;`
 };
 
 export const fallbackValues = {

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

@@ -1,6 +1,5 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect } 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";
@@ -12,10 +11,6 @@ import {
   FormInputColumn
 } from "../../atoms/form-layouts";
 
-const CheckboxWrapper = styled.div`
-  outline: none;
-`;
-
 const AddressForm = ({
   variant = "default",
   fields,
@@ -27,13 +22,6 @@ const AddressForm = ({
   saveToWallet,
   walletCheckboxMarked
 }) => {
-  const [checkboxFocused, focusCheckbox] = useState(false);
-
-  const handleClick = (e, func) => {
-    if (e?.keyCode === 13) {
-      func();
-    }
-  };
   if (clearOnDismount) {
     useEffect(() => () => actions.form.clear(), []);
   }
@@ -120,20 +108,12 @@ const AddressForm = ({
           onKeyDown={e => e.key === "Enter" && handleSubmit(e)}
         />
         {showWalletCheckbox && (
-          <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>
+          <Checkbox
+            name="address checkbox"
+            title="Save address to wallet"
+            checked={walletCheckboxMarked}
+            onChange={saveToWallet}
+          />
         )}
       </FormInputColumn>
     </FormContainer>

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
 };