@thecb/components 2.2.0 → 3.0.0

package/src/components/atoms/loading/Loading.js

@@ -0,0 +1,17 @@
+import React from "react";
+import Spinner from "../spinner";
+import { Box, Cover, Center } from "../layouts";
+
+const Loading = () => (
+  <Box key="spinner-container">
+    <Cover minHeight="100%" singleChild>
+      <Center intrinsic>
+        <Box>
+          <Spinner size="100" />
+        </Box>
+      </Center>
+    </Cover>
+  </Box>
+);
+
+export default Loading;

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

@@ -0,0 +1,3 @@
+import Loading from "./Loading";
+
+export default Loading;

package/src/components/atoms/nav-header/NavHeader.js

@@ -10,7 +10,7 @@ const NavHeader = ({
   ...rest
 }) => (
   <Box
-    padding="0 1rem 0.25rem 1rem"
+    padding="0 16px 4px"
     background={backgroundColor}
     extraStyles={
       isMobile

package/src/components/index.js

@@ -1,3 +1,4 @@
 export * from "./atoms";
 export * from "./molecules";
 export * from "./templates";
+export { default as withWindowSize } from "./withWindowSize";

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

@@ -0,0 +1,75 @@
+import React, { Fragment } from "react";
+import Modal from "../modal";
+import Text from "../../atoms/text";
+import Paragraph from "../../atoms/paragraph";
+import { Box, Stack, Center } from "../../atoms/layouts";
+import { fallbackValues } from "./AccountAndRoutingModal.theme";
+import { themeComponent } from "../../../util/themeUtils";
+import { AccountNumberImage, RoutingNumberImage } from "../../atoms/icons";
+
+const AccountAndRoutingModal = ({
+  link,
+  title,
+  isOpen,
+  toggleOpen,
+  toggleAccepted,
+  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}
+        focusStyles={themeValues.modalLinkHoverFocus}
+        extraStyles={`cursor: pointer;`}
+        tabIndex="0"
+        onKeyPress={e => e.key === "Enter" && toggleOpen(true)}
+      >
+        {link}
+      </Text>
+    )}
+    modalOpen={isOpen}
+    hideModal={() => toggleOpen(false)}
+    showModal={() => toggleOpen(true)}
+    modalHeaderText={title}
+    modalBodyText={
+      <Box extraStyles="overflow: scroll; max-height: 20rem;">
+        <Stack>
+          <Paragraph variant="p">{content}</Paragraph>
+          {imageType === "Account" ? (
+            <Center intrinsic>
+              <AccountNumberImage />
+            </Center>
+          ) : imageType === "Routing" ? (
+            <Center intrinsic>
+              <RoutingNumberImage />
+            </Center>
+          ) : (
+            <Fragment />
+          )}
+        </Stack>
+      </Box>
+    }
+    defaultWrapper={false}
+    onlyCloseButton={!acceptText}
+    continueButtonText={acceptText}
+    continueAction={() => {
+      toggleAccepted(true);
+      toggleOpen(false);
+    }}
+  />
+);
+
+export default themeComponent(
+  AccountAndRoutingModal,
+  "AccountAndRoutingModal",
+  fallbackValues,
+  "default"
+);

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

@@ -0,0 +1,24 @@
+import {
+  FONT_WEIGHT_REGULAR,
+  FONT_WEIGHT_SEMIBOLD
+} 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 fontWeight = {
+  default: FONT_WEIGHT_REGULAR,
+  footer: FONT_WEIGHT_SEMIBOLD
+};
+const modalLinkHoverFocus = {
+  default: ``,
+  footer: `outline: none; text-decoration: underline;`
+};
+
+export const fallbackValues = {
+  linkColor,
+  fontSize,
+  lineHeight,
+  fontWeight,
+  modalLinkHoverFocus
+};

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

@@ -0,0 +1,3 @@
+import AccountAndRoutingModal from "./AccountAndRoutingModal";
+
+export default AccountAndRoutingModal;

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

@@ -3,6 +3,7 @@ import { required, hasLength } from "redux-freeform";
 import StateProvinceDropdown from "../../atoms/state-province-dropdown";
 // import CountryDropdown from "../../atoms/country-dropdown";
 import { zipFormat } from "../../../util/formats";
+import { noop } from "../../../util/general";
 import {
   FormInput,
   FormContainer,
@@ -15,7 +16,7 @@ const AddressForm = ({
   actions,
   clearOnDismount,
   showErrors,
-  handleSubmit
+  handleSubmit = noop
 }) => {
   if (clearOnDismount) {
     useEffect(() => () => actions.form.clear(), []);

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

@@ -1,11 +1,11 @@
-import AddressFrom from "./AddressForm";
+import AddressForm from "./AddressForm";
 import {
   reducer,
   mapStateToProps,
-  mapDispatchToProps,
+  mapDispatchToProps
 } from "./AddressForm.state";
 
-AddressFrom.reducer = reducer;
-AddressFrom.mapStateToProps = mapStateToProps;
-AddressFrom.mapDispatchToProps = mapDispatchToProps;
-export default AddressFrom;
+AddressForm.reducer = reducer;
+AddressForm.mapStateToProps = mapStateToProps;
+AddressForm.mapDispatchToProps = mapDispatchToProps;
+export default AddressForm;

package/src/components/molecules/change-password-form/ChangePasswordForm.js

@@ -15,12 +15,13 @@ import {
 } from "../../atoms/form-layouts";
 import { Box, Cluster } from "../../atoms/layouts";
 import PasswordRequirements from "../../atoms/password-requirements";
+import { noop } from "../../../util/general";
 
 const ChangePasswordForm = ({
   clearOnDismount,
   fields,
   actions,
-  handleSubmit,
+  handleSubmit = noop,
   showErrors,
   isMobile
 }) => {

package/src/components/molecules/change-password-form/index.js

@@ -2,7 +2,7 @@ import ChangePasswordForm from "./ChangePasswordForm";
 import {
   reducer,
   mapStateToProps,
-  mapDispatchToProps,
+  mapDispatchToProps
 } from "./ChangePasswordForm.state";
 
 ChangePasswordForm.reducer = reducer;

package/src/components/molecules/edit-name-form/EditNameForm.js

@@ -5,13 +5,14 @@ import {
   FormContainer,
   FormInputColumn
 } from "../../atoms/form-layouts";
+import { noop } from "../../../util/general";
 
 const EditNameForm = ({
   fields,
   actions,
   clearOnDismount,
   showErrors,
-  handleSubmit
+  handleSubmit = noop
 }) => {
   if (clearOnDismount) {
     useEffect(() => () => actions.form.clear(), []);

package/src/components/molecules/edit-name-form/index.js

@@ -2,7 +2,7 @@ import EditNameForm from "./EditNameForm";
 import {
   reducer,
   mapStateToProps,
-  mapDispatchToProps,
+  mapDispatchToProps
 } from "./EditNameForm.state";
 
 EditNameForm.reducer = reducer;

package/src/components/molecules/editable-list/EditableList.js

@@ -0,0 +1,139 @@
+import React, { useState } from "react";
+
+import {
+  EditableListItem,
+  EditableListItemControls
+} from "./EditableList.styled";
+import { Box, Stack } from "../../atoms/layouts";
+import Placeholder from "../../atoms/placeholder";
+import ButtonWithAction from "../../atoms/button-with-action";
+import Text from "../../atoms/text";
+import Paragraph from "../../atoms/paragraph";
+import {
+  STORM_GREY,
+  BOSTON_BLUE,
+  CHARADE_GREY
+} from "../../../constants/colors";
+
+const EditableList = ({
+  title = "",
+  titleWeight = "400",
+  addItem,
+  removeItem,
+  editItem,
+  itemName,
+  renderItem,
+  items,
+  canEdit = true,
+  canRemove = true,
+  listItemSize = "small",
+  maxItems,
+  useModal = false,
+  modal: Modal,
+  modalProps,
+  autoPayMethod,
+  qaPrefix
+}) => (
+  <Box padding="0rem 0rem 1.5rem 0rem">
+    <Stack childGap="0rem">
+      {title !== "" && (
+        <Box padding="0rem 0rem 0.5rem 0rem">
+          <Paragraph
+            variant="pL"
+            weight={titleWeight}
+            color={CHARADE_GREY}
+            extraStyles="letter-spacing: 0.29px;"
+            aria-level="3"
+          >
+            {title}
+          </Paragraph>
+        </Box>
+      )}
+      <Box
+        padding="0"
+        borderRadius="4px"
+        extraStyles={`box-shadow: 0px 2px 14px 0px rgb(246, 246, 249),
+    0px 3px 8px 0px rgb(202, 206, 216);`}
+      >
+        {items.map(props => {
+          const [modalOpen, toggleModal] = useState(false);
+          return (
+            <EditableListItem
+              listItemSize={
+                !!props.id && props.id === autoPayMethod ? "big" : listItemSize
+              }
+              key={props.id}
+            >
+              <Text variant="p" color={CHARADE_GREY}>
+                {renderItem(props)}
+              </Text>
+              <EditableListItemControls>
+                {props.isPrimary && (
+                  <Text
+                    variant="p"
+                    color={STORM_GREY}
+                    extraStyles={`font-style: italic;`}
+                  >
+                    Default {itemName}
+                  </Text>
+                )}
+                {canRemove && (
+                  <Box
+                    padding="0 0.5rem"
+                    border="2px solid transparent"
+                    extraStyles={`:not(:first-child) { border-left: 2px solid ${BOSTON_BLUE};}`}
+                    dataQa={qaPrefix + " Remove"}
+                  >
+                    {useModal ? (
+                      <Modal
+                        item={{ ...props }}
+                        {...modalProps}
+                        modalOpen={modalOpen}
+                        toggleModal={toggleModal}
+                      />
+                    ) : (
+                      <ButtonWithAction
+                        variant="smallGhost"
+                        text="Remove"
+                        action={() => removeItem(props.id)}
+                        extraStyles={`min-width: 0;`}
+                      />
+                    )}
+                  </Box>
+                )}
+                {canEdit && (
+                  <Box
+                    padding="0 0.5rem"
+                    border="2px solid transparent"
+                    extraStyles={`:not(:first-child) { border-left: 2px solid ${BOSTON_BLUE};}`}
+                    dataQa={qaPrefix + " Edit"}
+                  >
+                    <ButtonWithAction
+                      variant="smallGhost"
+                      text="Edit"
+                      action={() => editItem(props.id)}
+                      extraStyles={`min-width: 0;`}
+                    />
+                  </Box>
+                )}
+              </EditableListItemControls>
+            </EditableListItem>
+          );
+        })}
+      </Box>
+      {(!maxItems || items.length < maxItems) && (
+        <Box padding={items.length === 0 ? "0" : "1rem 0 0"}>
+          <Placeholder
+            text={`Add a${
+              itemName[0].match(/[aieouAIEOU]/) ? "n" : ""
+            } ${itemName}`}
+            action={addItem}
+            dataQa={"Add " + qaPrefix}
+          />
+        </Box>
+      )}
+    </Stack>
+  </Box>
+);
+
+export default EditableList;

package/src/components/molecules/editable-list/EditableList.styled.js

@@ -0,0 +1,31 @@
+import styled from "styled-components";
+import { WHITE } from "../../../constants/colors";
+
+export const EditableListItem = styled.div`
+  box-sizing: border-box;
+  background: ${WHITE};
+  height: ${({ listItemSize }) => (listItemSize === "big" ? "120px" : "72px")};
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 1.5rem;
+  :not(:last-child),
+  :not(:first-child) {
+    box-shadow: inset 0px -1px 0px 0px rgb(202, 206, 216);
+  }
+  :first-child {
+    border-top-left-radius: 3px;
+    border-top-right-radius: 3px;
+  }
+  :last-child {
+    border-bottom-left-radius: 3px;
+    border-bottom-right-radius: 3px;
+    box-shadow: none;
+  }
+`;
+
+export const EditableListItemControls = styled.div`
+  display: flex;
+  justify-content: space-evenly;
+  align-items: center;
+`;

package/src/components/molecules/editable-list/index.js

@@ -0,0 +1,3 @@
+import EditableList from "./EditableList";
+
+export default EditableList;

package/src/components/molecules/editable-table/EditableTable.js

@@ -0,0 +1,30 @@
+import React, { Fragment } from "react";
+import { EditableTableContainer, TableWrapper } from "./EditableTable.styled";
+import { Box } from "../../atoms/layouts";
+import Paragraph from "../../atoms/paragraph";
+import { GHOST_GREY } from "../../../constants/colors";
+import { FONT_WEIGHT_SEMIBOLD } from "../../../constants/style_constants";
+import { safeChildren } from "../../../util/general";
+
+const EditableTable = ({ title, renderItem, items, isMobile }) => {
+  const titleChild = title && (
+    <Box
+      padding={"0 0 0.5rem 0.5rem"}
+      borderSize="1px"
+      borderColor={GHOST_GREY}
+      borderWidthOverride="0 0 1px 0"
+    >
+      <Paragraph variant="pL" weight={FONT_WEIGHT_SEMIBOLD}>
+        {title}
+      </Paragraph>
+    </Box>
+  );
+  return (
+    <EditableTableContainer isMobile={isMobile}>
+      {safeChildren(titleChild, <Fragment />)}
+      <TableWrapper>{renderItem(items)}</TableWrapper>
+    </EditableTableContainer>
+  );
+};
+
+export default EditableTable;

package/src/components/molecules/editable-table/EditableTable.styled.js

@@ -0,0 +1,80 @@
+import styled from "styled-components";
+import {
+  BRIGHT_GREY,
+  STORM_GREY,
+  GHOST_GREY,
+  MATISSE_BLUE
+} from "../../../constants/colors";
+
+export const EditableTableContainer = styled.div`
+  display: ${({ hide }) => (hide ? "none" : "flex")};
+  flex-direction: column;
+  flex: 1;
+`;
+
+export const EditableTableListItem = styled.div`
+  width: 100%;
+  display: flex;
+  ${({ isMobile }) => isMobile && "justify-content: center"};
+  align-items: ${({ isMobile }) => (isMobile ? "flex-start" : "center")};
+  flex-direction: ${({ isMobile }) => (isMobile ? "column" : "row")};
+  flex: 1;
+  ${({ isMobile }) =>
+    isMobile ? "padding: 1rem 0.5rem" : "padding: 0 0.5rem"};
+`;
+
+export const EditableListItemControls = styled.div`
+  display: flex;
+  justify-content: space-evenly;
+  align-items: center;
+`;
+
+export const EditableListAction = styled.div`
+  color: ${MATISSE_BLUE};
+  align-items: center;
+  font-size: 1rem;
+  padding-right: 1rem;
+  cursor: pointer;
+  display: ${({ hide }) => (hide ? "none" : "flex")};
+`;
+
+export const ItemWrapper = styled.div`
+  display: flex;
+  flex-direction: row;
+  flex: 1;
+  width: 100%;
+  border-bottom: 1px solid ${GHOST_GREY};
+`;
+
+export const ActionWrapper = styled.div`
+  display: flex;
+  align-self: center;
+  justify-content: flex-end;
+  ${({ isMobile }) => isMobile && `display: none`};
+  flex: 1;
+`;
+
+export const TableItemKey = styled.div`
+  display: flex;
+  ${({ isMobile }) => !isMobile && "flex: 1"};
+  ${({ isMobile }) => isMobile && "align-items: center"};
+  ${({ isMobile }) => !isMobile && "padding: 1.25rem 0"};
+  font-size: ${({ isMobile }) => (isMobile ? "1rem" : "1.125rem")};
+  color: ${STORM_GREY};
+`;
+
+export const TableItemValue = styled.div`
+  display: flex;
+  ${({ isMobile }) => !isMobile && "flex: 1"};
+  ${({ isMobile }) => !isMobile && "padding: 1.25rem 0"};
+  ${({ isMobile }) => isMobile && "align-items: center"};
+  font-size: ${({ isMobile }) => (isMobile ? "1.125rem" : "1.0625rem")};
+  color: ${BRIGHT_GREY};
+`;
+
+export const TableWrapper = styled.div`
+  display: flex;
+  flex-direction: row;
+  flex: 1;
+  width: 100%;
+`;

package/src/components/molecules/editable-table/TableListItem.js

@@ -0,0 +1,64 @@
+import React, { Fragment } from "react";
+import {
+  EditableTableListItem,
+  EditableListAction,
+  ItemWrapper,
+  ActionWrapper,
+  TableItemKey,
+  TableItemValue
+} from "./EditableTable.styled";
+import { Box } from "../../atoms/layouts";
+import Text from "../../atoms/text";
+import { CHARADE_GREY } from "../../../constants/colors";
+
+const TableListItem = ({
+  title,
+  value,
+  canEdit = false,
+  canRemove = false,
+  isMobile
+}) => (
+  <Box
+    padding="0px"
+    extraStyles={`&:last-child {
+    > * {
+      border-bottom: none;
+    }
+  }`}
+  >
+    <ItemWrapper>
+      <EditableTableListItem isMobile={isMobile}>
+        <TableItemKey isMobile={isMobile}>
+          <Text variant="pS" color={CHARADE_GREY} aria-level="3">
+            {title}
+          </Text>
+        </TableItemKey>
+        <TableItemValue isMobile={isMobile}>
+          <Text variant="p" color={CHARADE_GREY}>
+            {value}
+          </Text>
+        </TableItemValue>
+        {canRemove || canEdit ? (
+          <ActionWrapper isMobile={isMobile}>
+            <EditableListAction
+              hide={!canRemove}
+              onClick={() => console.log("Remove Item Coming Soon...")}
+            >
+              Remove
+            </EditableListAction>
+            <EditableListAction
+              hide={!canEdit}
+              onClick={() => console.log("Edit Item Coming Soon...")}
+            >
+              Edit
+            </EditableListAction>
+          </ActionWrapper>
+        ) : (
+          <Fragment />
+        )}
+      </EditableTableListItem>
+    </ItemWrapper>
+  </Box>
+);
+
+export default TableListItem;

package/src/components/molecules/editable-table/index.js

@@ -0,0 +1,4 @@
+import EditableTable from "./EditableTable";
+import TableListItem from "./TableListItem";
+
+export { EditableTable, TableListItem };

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

@@ -5,6 +5,7 @@ import {
   FormContainer,
   FormInputColumn
 } from "../../atoms/form-layouts";
+import { noop } from "../../../util/general";
 
 const EmailForm = ({
   variant = "default",
@@ -12,7 +13,7 @@ const EmailForm = ({
   fields,
   actions,
   showErrors,
-  handleSubmit
+  handleSubmit = noop
 }) => {
   if (clearOnDismount) {
     useEffect(() => () => actions.form.clear(), []);

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

@@ -2,7 +2,7 @@ import EmailForm from "./EmailForm";
 import {
   reducer,
   mapStateToProps,
-  mapDispatchToProps,
+  mapDispatchToProps
 } from "./EmailForm.state";
 
 EmailForm.reducer = reducer;

package/src/components/molecules/forgot-password-form/ForgotPasswordForm.js

@@ -1,13 +1,14 @@
 import React, { useEffect } from "react";
 import { required, isProbablyEmail } from "redux-freeform";
 import { FormInput } from "../../atoms/form-layouts";
+import { noop } from "../../../util/general";
 
 const ForgotPasswordForm = ({
   fields,
   actions,
   clearOnDismount,
   showErrors,
-  handleSubmit
+  handleSubmit = noop
 }) => {
   if (clearOnDismount) {
     useEffect(() => () => actions.form.clear(), []);

package/src/components/molecules/forgot-password-form/index.js

@@ -2,7 +2,7 @@ import ForgotPasswordForm from "./ForgotPasswordForm";
 import {
   reducer,
   mapStateToProps,
-  mapDispatchToProps,
+  mapDispatchToProps
 } from "./ForgotPasswordForm.state";
 
 ForgotPasswordForm.reducer = reducer;

package/src/components/molecules/index.js

@@ -2,6 +2,8 @@ export { default as AddressForm } from "./address-form";
 export { default as ChangePasswordForm } from "./change-password-form";
 export { default as CollapsibleSection } from "./collapsible-section";
 export { default as EditNameForm } from "./edit-name-form";
+export { default as EditableList } from "./editable-list";
+export * from "./editable-table";
 export { default as EmailForm } from "./email-form";
 export { default as ForgotPasswordForm } from "./forgot-password-form";
 export { default as HighlightTabRow } from "./highlight-tab-row";
@@ -10,8 +12,11 @@ export { default as Modal } from "./modal";
 export { default as Module } from "./module";
 export * from "./nav-menu";
 export { default as Obligation } from "./obligation";
+export * from "./partial-amount-form";
 export { default as PaymentButtonBar } from "./payment-button-bar";
 export { default as PaymentDetails } from "./payment-details";
+export { default as PaymentFormACH } from "./payment-form-ach";
+export { default as PaymentFormCard } from "./payment-form-card";
 export { default as PhoneForm } from "./phone-form";
 export { default as RadioSection } from "./radio-section";
 export { default as RegistrationForm } from "./registration-form";