@thecb/components 2.2.1 → 3.1.1

package/src/components/atoms/layouts/Box.js

@@ -23,7 +23,6 @@ const Box = ({
   border,
   textAlign,
   hoverStyles,
-  focusStyles,
   activeStyles,
   disabledStyles,
   variant,
@@ -57,7 +56,6 @@ const Box = ({
     borderWidthOverride={borderWidthOverride}
     border={border}
     hoverStyles={hoverStyles}
-    focusStyles={focusStyles}
     activeStyles={activeStyles}
     disabledStyles={disabledStyles}
     variant={variant}

package/src/components/atoms/layouts/Box.styled.js

@@ -13,7 +13,6 @@ import styled, { css } from "styled-components";
 export const BoxWrapper = styled(
   ({
     activeStyles,
-    focusStyles,
     hoverStyles,
     disabledStyles,
     extraStyles,
@@ -48,7 +47,7 @@ export const BoxWrapper = styled(
   border: ${({ border }) => border};
   text-align: ${({ textAlign }) => textAlign};
 
-  &:hover {
+  &:hover, &:focus {
     ${({ hoverStyles, as }) =>
       css`
         ${hoverStyles}
@@ -63,21 +62,6 @@ export const BoxWrapper = styled(
       `}
   }
 
-  &:focus {
-    ${({ focusStyles, as }) =>
-      css`
-        ${focusStyles}
-        ${as === "button"
-          ? `> * > span {
-          ${focusStyles}
-          border: none;
-          outline: none;
-          box-shadow: none;
-        }`
-          : ``}
-      `}
-  }
-
   &:active {
     ${({ activeStyles, as }) =>
       css`

package/src/components/atoms/layouts/Motion.styled.js

@@ -21,7 +21,8 @@ export const MotionWrapper = styled(motion.div)`
   text-align: ${({ textAlign }) => textAlign};
   margin: ${({ margin }) => margin};
 
-  &:hover {
+  &:hover,
+  &:focus {
     ${({ hoverStyles }) => hoverStyles};
   }
 
@@ -29,10 +30,6 @@ export const MotionWrapper = styled(motion.div)`
     ${({ activeStyles }) => activeStyles};
   }
 
-  &:focus {
-    ${({ focusStyles }) => focusStyles};
-  }
-
   &:disabled {
     ${({ disabledStyles }) => disabledStyles};
   }

package/src/components/atoms/link/ExternalLink.js

@@ -4,7 +4,7 @@ import { fallbackValues } from "./Link.theme";
 import { createThemeValues } from "../../../util/themeUtils";
 import { StyledExternalLink } from "./ExternalLink.styled";
 import { FONT_WEIGHT_REGULAR } from "../../../constants/style_constants";
-import { CONGRESS_BLUE, SCIENCE_BLUE } from "../../../constants/colors";
+import { CONGRESS_BLUE } from "../../../constants/colors";
 import { safeChildren } from "../../../util/general";
 
 const ExternalLink = ({
@@ -14,7 +14,6 @@ const ExternalLink = ({
   size = "1rem",
   lineHeight = "1.5rem",
   weight = FONT_WEIGHT_REGULAR,
-  hoverColor = SCIENCE_BLUE,
   extraStyles = ``,
   variant = "primary",
   tabIndex = "0",
@@ -36,7 +35,8 @@ const ExternalLink = ({
       size={size}
       lineheight={lineHeight}
       weight={weight}
-      hovercolor={hoverColor}
+      hovercolor={themeValues.hoverColor}
+      activeColor={themeValues.activeColor}
       fontFamily={themeValues.fontFamily}
       tabIndex={tabIndex}
       extrastyles={extraStyles}

package/src/components/atoms/link/ExternalLink.styled.js

@@ -8,7 +8,7 @@ import styled from "styled-components";
 
 /* eslint-disable no-unused-vars */
 export const StyledExternalLink = styled(
-  ({ hoverColor, extraStyles, ...props }) => <a {...props} />
+  ({ hoverColor, activeColor, extraStyles, ...props }) => <a {...props} />
 )`
   display: flex;
   font-size: ${({ size }) => size};
@@ -17,8 +17,15 @@ export const StyledExternalLink = styled(
   font-family: ${({ fontFamily }) => fontFamily};
   line-height: ${({ lineheight }) => lineheight};
 
-  &:hover {
+  &:hover,
+  &:focus {
     color: ${({ hovercolor }) => hovercolor};
+    text-decoration: underline;
+  }
+
+  &:active {
+    text-decoration: underline;
+    color: ${({ activeColor }) => activeColor};
   }
 
   ${({ extrastyles }) => extrastyles}

package/src/components/atoms/link/InternalLink.js

@@ -9,14 +9,12 @@ const InternalLink = ({
   to = "",
   color,
   children,
-  activeStyles,
   active,
   fontSize,
   lineheight,
   fontWeight,
   variant = "primary",
   margin,
-  hoverStyles,
   tabIndex = "0",
   extraStyles = ``
 }) => {
@@ -33,13 +31,13 @@ const InternalLink = ({
       to={to}
       color={color}
       lineheight={lineheight}
-      activeStyles={activeStyles}
       active={active}
       fontWeight={fontWeight}
       fontSize={fontSize}
       fontFamily={themeValues.fontFamily}
       margin={margin}
-      hoverStyles={hoverStyles}
+      hoverColor={themeValues.hoverColor}
+      activeColor={themeValues.activeColor}
       tabIndex={tabIndex}
       extrastyles={extraStyles}
     >

package/src/components/atoms/link/InternalLink.styled.js

@@ -1,5 +1,5 @@
 import React from "react";
-import styled, { css } from "styled-components";
+import styled from "styled-components";
 import { Link } from "react-router-dom";
 
 /*
@@ -9,30 +9,28 @@ import { Link } from "react-router-dom";
 
 /* eslint-disable no-unused-vars */
 export const StyledInternalLink = styled(
-  ({ hoverStyles, activeStyles, active, ...props }) => <Link {...props} />
+  ({ hoverColor, activeColor, active, ...props }) => <Link {...props} />
 )`
   display: flex;
-  color: ${({ color }) => color};
+  color: ${({ color, active, activeColor }) =>
+    active === true ? activeColor : color};
   font-weight: ${({ fontWeight }) => fontWeight};
   line-height: ${({ lineheight }) => lineheight};
   font-size: ${({ fontSize }) => fontSize};
   font-family: ${({ fontFamily }) => fontFamily};
   margin: ${({ margin }) => margin};
+  text-decoration: ${({ active }) => (active === true ? "underline" : "none")};
 
-  &:hover {
-    ${({ hoverStyles }) =>
-      css`
-        ${hoverStyles}
-      `}
+  &:hover,
+  &:focus {
+    color: ${({ hovercolor }) => hovercolor};
+    text-decoration: underline;
   }
 
-  ${({ activeStyles, active }) =>
-    active === "true" &&
-    css`
-      ${activeStyles}
-      cursor: default;
-      pointer-events: none;
-    `}
+  &:active {
+    text-decoration: underline;
+    color: ${({ activeColor }) => activeColor};
+  }
 
   ${({ extrastyles }) => extrastyles}
 `;

package/src/components/atoms/link/Link.theme.js

@@ -3,6 +3,12 @@ const fontFamily = {
   secondary: "Open Sans"
 };
 
+const hoverColor = "#116285";
+
+const activeColor = "#0E506D";
+
 export const fallbackValues = {
-  fontFamily
+  fontFamily,
+  hoverColor,
+  activeColor
 };

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/atoms/placeholder/Placeholder.js

@@ -6,7 +6,7 @@ import { Box, Switcher, Center, Cluster } from "../layouts";
 import { fallbackValues } from "./Placeholder.theme";
 import { themeComponent } from "../../../util/themeUtils";
 import { IconAdd } from "../../../deprecated/icons";
-import { STORM_GREY } from "../../../constants/colors";
+import { STORM_GREY, GRECIAN_GREY } from "../../../constants/colors";
 import { AccountsAddIcon, PropertiesAddIcon } from "../icons";
 import { FONT_WEIGHT_REGULAR } from "../../../constants/style_constants";
 import withWindowSize from "../../withWindowSize";
@@ -72,6 +72,7 @@ const Placeholder = ({
         display: flex;
         justify-content: center;
         align-items:center;`}
+      hoverStyles={`background-color: ${GRECIAN_GREY};`}
     >
       <PlaceholderContentWrapper
         isLink={isLink}

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

@@ -12,7 +12,6 @@ const Text = ({
   color = FIREFLY_GREY,
   extraStyles = ``,
   hoverStyles,
-  focusStyles,
   onClick,
   dataQa,
   children,
@@ -25,7 +24,6 @@ const Text = ({
     fontFamily={themeValues.fontFamily}
     extraStyles={extraStyles}
     hoverStyles={hoverStyles}
-    focusStyles={focusStyles}
     onClick={onClick}
     data-qa={dataQa}
     {...rest}

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

@@ -8,20 +8,14 @@ export const TextSpan = styled.span`
   font-family: ${({ fontFamily }) => fontFamily};
   color: ${({ color }) => color};
 
-  &:hover {
+  &:hover,
+  &:focus {
     ${({ hoverStyles }) =>
       css`
         ${hoverStyles}
       `}
   }
 
-  &:focus {
-    ${({ focusStyles }) =>
-      css`
-        ${focusStyles}
-      `}
-  }
-
   ${({ disabled, disabledStyles }) =>
     disabled &&
     css`

package/src/components/atoms/toggle-switch/ToggleSwitch.js

@@ -159,7 +159,7 @@ const ToggleSwitch = ({
       extraStyles={
         labelLeft ? themeValues.leftLabelStyles : themeValues.rightLabelStyles
       }
-      focusStyles={`outline: ${themeValues.onBackground} auto 5px`}
+      hoverStyles={`outline: ${themeValues.onBackground} auto 5px`}
     >
       <Center>
         <Cluster justify="stretch" align="center">

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,74 @@
+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}
+        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/collapsible-section/CollapsibleSection.js

@@ -63,7 +63,7 @@ const CollapsibleSection = ({
       padding="0"
       tabIndex="0"
       onKeyDown={handleKeyDown}
-      focusStyles={themeValues.focusStyles}
+      hoverStyles={themeValues.focusStyles}
       animate={isOpen ? "open" : "closed"}
       positionTransition
     >

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;