@thecb/components 3.5.5-beta.0 → 3.5.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "3.5.5-beta.0",
+  "version": "3.5.7",
   "description": "Common lib for CityBase react components",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",

package/src/components/atoms/form-layouts/FormInput.js

@@ -135,6 +135,7 @@ const FormInput = ({
                   color={themeValues.linkColor}
                   weight={themeValues.fontWeight}
                   hoverStyles={themeValues.hoverFocusStyles}
+                  focusStyles={themeValues.hoverFocusStyles}
                   extraStyles={`cursor: pointer;`}
                   onClick={() => setShowPassword(!showPassword)}
                   aria-label="Show password"

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

@@ -6,7 +6,6 @@ export const CoverOuterContainer = styled.div`
   flex-direction: column;
   min-height: ${({ minHeight }) => minHeight};
   padding: ${({ padding }) => padding};
-  min-width: ${({ fillCenter }) => (fillCenter ? "100%" : "auto")};
 
   > * {
     margin-top: ${({ childGap }) => childGap};

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

@@ -16,5 +16,4 @@ export const ImposterWrapper = styled.div`
     max-width: calc(100% - (${horizontalMargin} * 2));
     max-height: calc(100% - (${verticalMargin} * 2));
   `}
-  ${({ extraStyles }) => extraStyles};
 `;

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

@@ -3,8 +3,11 @@ import Spinner from "../spinner";
 import { Box, Cover, Center } from "../layouts";
 
 const Loading = () => (
-  <Box key="spinner-container">
-    <Cover minHeight="100vh" singleChild>
+  <Box
+    key="spinner-container"
+    extraStyles={`position: fixed; top: 0; bottom: 0; left: 0; right: 0;`}
+  >
+    <Cover minHeight="100%" singleChild>
       <Center intrinsic>
         <Box>
           <Spinner size="100" />

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

@@ -20,7 +20,11 @@ const PaymentDetailsActions = ({
   const [isLoading, setIsLoading] = useState(false);
   const [modalOpen, toggleModal] = useState(false);
   const { obligationSlug } = config;
-  const { createPaymentFromProfile, setDetailedObligation } = actions;
+  const {
+    createPaymentFromProfile,
+    setDetailedObligation,
+    navigateToDetailedObligation
+  } = actions;
   const detailsSlug =
     config.type === "ACCOUNT"
       ? `/profile/accounts/details/${obligationSlug}`
@@ -30,7 +34,8 @@ const PaymentDetailsActions = ({
     createPaymentFromProfile(obligations, config);
   };
   const handleDetailsClick = () => {
-    setDetailedObligation(obligations, config, detailsSlug);
+    setDetailedObligation(obligations, config);
+    navigateToDetailedObligation(detailsSlug);
   };
   return (
     <Box
@@ -105,7 +110,10 @@ const PaymentDetailsActions = ({
               <ButtonWithAction
                 variant="tertiary"
                 text="Set Up Autopay"
-                action={handleAutopayAction}
+                action={() => {
+                  setDetailedObligation(obligations, config);
+                  handleAutopayAction();
+                }}
                 dataQa="Set Up Autopay"
                 extraStyles={isMobile && `flex-grow: 1; width: 100%;`}
               />

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

@@ -53,7 +53,7 @@ const PaymentFormACH = ({
   };
   const accountNumberErrors = {
     [required.error]: "Account number is required",
-    [hasLength.error]: "Account number must be between 6 and 17 digits"
+    [hasLength.error]: "Account number must be between 5 and 17 digits"
   };
   const confirmAccountNumberErrors = {
     [matchesField.error]:

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

@@ -20,7 +20,7 @@ const formConfig = {
     constraints: [onlyIntegers(), hasLength(0, 9)]
   },
   accountNumber: {
-    validators: [required(), hasLength(6, 17)],
+    validators: [required(), hasLength(5, 17)],
     constraints: [onlyIntegers(), hasLength(0, 17)]
   },
   confirmAccountNumber: {

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

@@ -0,0 +1,24 @@
+import React from "react";
+import { connect } from "react-redux";
+import { boolean } from "@storybook/addon-knobs";
+
+import PaymentFormACH from "./PaymentFormACH";
+import page from "../../../../.storybook/page";
+import * as PaymentFormACHState from "./PaymentFormACH.state";
+
+const story = page({
+  title: "Components|Molecules/PaymentFormACH",
+  Component: PaymentFormACH,
+  reducer: PaymentFormACHState.reducer,
+  mapStateToProps: PaymentFormACHState.mapStateToProps,
+  mapDispatchToProps: PaymentFormACHState.mapDispatchToProps
+});
+export default story;
+
+const ConnectedForm = connect(
+  PaymentFormACHState.mapStateToProps,
+  PaymentFormACHState.mapDispatchToProps
+)(PaymentFormACH);
+export const paymentFormACH = () => (
+  <ConnectedForm showErrors={boolean("showErrors", false, "props")} />
+);

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

@@ -0,0 +1,24 @@
+import React from "react";
+import { connect } from "react-redux";
+import { boolean } from "@storybook/addon-knobs";
+
+import PaymentFormCard from "./PaymentFormCard";
+import page from "../../../../.storybook/page";
+import * as PaymentFormCardState from "./PaymentFormCard.state";
+
+const story = page({
+  title: "Components|Molecules/PaymentFormCard",
+  Component: PaymentFormCard,
+  reducer: PaymentFormCardState.reducer,
+  mapStateToProps: PaymentFormCardState.mapStateToProps,
+  mapDispatchToProps: PaymentFormCardState.mapDispatchToProps
+});
+export default story;
+
+const ConnectedForm = connect(
+  PaymentFormCardState.mapStateToProps,
+  PaymentFormCardState.mapDispatchToProps
+)(PaymentFormCard);
+export const paymentFormCard = () => (
+  <ConnectedForm showErrors={boolean("showErrors", false, "props")} />
+);

package/src/components/molecules/content/Content.js

@@ -1,20 +0,0 @@
-import React from "react";
-import { blockRegistry } from "./blocks";
-import { themeComponent } from "../../util/themeUtils";
-import { fallbackValues } from "./Content.theme";
-
-const Content = ({
-  blockName,
-  defaultBlockName = "TextBlock",
-  pageType,
-  ...rest
-}) => {
-  console.log("other props", rest);
-  console.log("block name is", blockName);
-  const Block = blockRegistry?.[blockName] ?? blockRegistry[defaultBlockName];
-  console.log("pageType is....", pageType);
-
-  return <Block {...rest} useDarkText={pageType === "ActionPage"} />;
-};
-
-export default themeComponent(Content, "Content", fallbackValues, "default");

package/src/components/molecules/content/Content.theme.js

@@ -1,60 +0,0 @@
-const lightTextSingle = {
-  placeholder: ["#E5E7EC"],
-  default: "#FFFFFF"
-};
-
-const darkTextSingle = {
-  placeholder: ["#292A33"],
-  default: "#000000"
-};
-
-const lightText = {
-  placeholder: ["#E5E7EC", "#FFFFFF"],
-  default: "#FFFFFF"
-};
-
-const darkText = {
-  placeholder: ["#292A33", "#000000", "#31A9E1"],
-  default: "#000000"
-};
-
-const darkAccentText = {
-  placeholder: ["#0E506D"],
-  default: "#0E506D"
-};
-
-const lightAccentText = {
-  placeholder: ["#31A9E1"],
-  default: "#31A9E1"
-};
-
-const textDecoration = "#E5E7EC";
-
-const shape = {
-  placeholder: "#31A9E1"
-};
-
-const background = {
-  placeholder: "#002A62",
-  default: "#002A62"
-};
-
-const linkColor = {
-  default: "#31A9E1"
-};
-
-const pageBackground = "#F6F6F9";
-
-export const fallbackValues = {
-  lightTextSingle,
-  darkTextSingle,
-  lightText,
-  darkText,
-  lightAccentText,
-  darkAccentText,
-  textDecoration,
-  shape,
-  background,
-  pageBackground,
-  linkColor
-};

package/src/components/molecules/content/blocks/accordion-block/AccordionBlock.js

@@ -1,108 +0,0 @@
-import React, { useState } from "react";
-import {
-  Box,
-  Stack,
-  Heading,
-  Paragraph,
-  CollapsibleSection,
-  ExternalLink,
-  Motion
-} from "@thecb/components";
-import { FONT_WEIGHT_SEMIBOLD } from "../../../../constants/style_constants";
-
-const AccordionBlock = ({
-  themeValues,
-  description = "",
-  title = "",
-  accordionItems
-}) => {
-  console.log("desciprtion is", description);
-  console.log("accordion items are", accordionItems);
-  console.log("accordion link color", themeValues.linkColor);
-  console.log("theme values...", themeValues);
-  const [toggleKeyList, setToggleKeyList] = useState([]);
-  const handleCollapsibleSection = index => {
-    const newList = toggleKeyList.includes(index)
-      ? toggleKeyList.filter(i => i !== index)
-      : [...toggleKeyList, index];
-
-    setToggleKeyList(newList);
-  };
-  const accordionTitle = (
-    <Box minWidth="93%" padding="16px">
-      <Heading variant="h6" color={themeValues.darkText}>
-        {title}
-      </Heading>
-    </Box>
-  );
-  const items = accordionItems.map((item, index) => {
-    return (
-      <Box padding="0" key={index}>
-        {item.url ? (
-          <li>
-            <ExternalLink to={item.url}>
-              <Paragraph
-                variant="p"
-                weight={FONT_WEIGHT_SEMIBOLD}
-                color={themeValues.linkColor}
-              >
-                {item.title}
-              </Paragraph>
-            </ExternalLink>
-          </li>
-        ) : (
-          <li>
-            <Paragraph
-              variant="p"
-              weight={FONT_WEIGHT_SEMIBOLD}
-              color={themeValues.darkText}
-            >
-              {item.title}
-            </Paragraph>
-          </li>
-        )}
-        {item.description && (
-          <Box>
-            <Paragraph variant="pS" color={themeValues.darkText}>
-              {item.description}
-            </Paragraph>
-          </Box>
-        )}
-      </Box>
-    );
-  });
-  return (
-    <Box
-      background="white"
-      borderSize="2px"
-      borderColor="#cfd4de"
-      borderWidthOverride="0 0 2px 0"
-      minWidth="100%"
-    >
-      <CollapsibleSection
-        title={accordionTitle}
-        customTitle
-        toggleSection={() => handleCollapsibleSection(1)}
-        isOpen={!toggleKeyList.includes(1)}
-      >
-        <Motion
-          padding="0"
-          transition={{ duration: 0.3 }}
-          positionTransition
-          extraStyles={`transform-origin: 100% 0;`}
-        >
-          <Box padding="24px" background="#f6f6f9">
-            <Stack>{description}</Stack>
-            <ul>
-              <Box padding="0">
-                <Stack>{items}</Stack>
-              </Box>
-            </ul>
-          </Box>
-        </Motion>
-      </CollapsibleSection>
-    </Box>
-  );
-};
-
-export default AccordionBlock;

package/src/components/molecules/content/blocks/accordion-block/index.js

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

package/src/components/molecules/content/blocks/article-block/ArticleBlock.js

@@ -1,58 +0,0 @@
-import React from "react";
-import { Box, Stack, Heading, Paragraph } from "@thecb/components";
-
-const ArticleBlock = ({
-  themeValues,
-  description = "",
-  headline = "",
-  blockIndex,
-  variant = "placeholder",
-  useDarkText = false
-}) => {
-  console.log("article themevalues", themeValues);
-  console.log("article description", description);
-  console.log("article headline", headline);
-  console.log("article variant", variant);
-  console.log("useDarkText", useDarkText);
-  const paragraphs =
-    description.raw.children?.map((string, index) => (
-      <Box padding="0">
-        <Paragraph
-          key={`paragraph-${index}`}
-          variant="pL"
-          color={themeValues.darkText}
-        >
-          {string?.children?.[0]?.text ?? ""}
-        </Paragraph>
-      </Box>
-    )) ?? [];
-  return (
-    <Box maxWidth="100%" minHeight="500px" padding="0">
-      <Stack childGap="24px">
-        <Box padding="0 32px">
-          <Stack childGap="1rem">
-            <Heading
-              variant="h3"
-              color={
-                blockIndex === 0 && !useDarkText
-                  ? themeValues.lightText
-                  : themeValues.darkText
-              }
-              key="heading"
-              extraStyles={`margin-top: 16px;`}
-            >
-              {headline}
-            </Heading>
-          </Stack>
-        </Box>
-        <Box padding="0">
-          <Box padding="24px 32px" background="white" borderRadius="4px">
-            <Stack>{paragraphs}</Stack>
-          </Box>
-        </Box>
-      </Stack>
-    </Box>
-  );
-};
-
-export default ArticleBlock;

package/src/components/molecules/content/blocks/article-block/index.js

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

package/src/components/molecules/content/blocks/attached-file-block/AttachedFileBlock.js

@@ -1,60 +0,0 @@
-import React from "react";
-import {
-  Box,
-  Stack,
-  Cluster,
-  Paragraph,
-  ExternalLink
-} from "@thecb/components";
-import { FONT_WEIGHT_SEMIBOLD } from "../../../../constants/style_constants";
-import { IoIosArrowForward } from "react-icons/io";
-
-const AttachedFileBlock = ({ fileName, fileType, file, themeValues }) => {
-  console.log("file is...", file);
-  return (
-    <Box
-      background="white"
-      minWidth="100%"
-      extraStyles={`margin-bottom: 2.5rem`}
-      padding="0"
-    >
-      <Stack childGap="24px">
-        <Paragraph key="title">Attached Files</Paragraph>
-        <ExternalLink href={`https://media.graphcms.com/${file.handle}`}>
-          <Box
-            padding="24px 16px 24px 24px"
-            background="white"
-            borderRadius="1px"
-            boxShadow={`inset 0px 3px 0px 0px ${themeValues.lightAccentText},
-0px 1px 3px 0px rgba(0, 0, 0, 0.5)`}
-            key="file container"
-            minWidth={"100%"}
-          >
-            <Stack childGap="0.5rem">
-              <Paragraph
-                variant="pL"
-                weight={FONT_WEIGHT_SEMIBOLD}
-                color={themeValues.darkText}
-              >
-                {fileName}
-              </Paragraph>
-              <Box minWidth="100%" padding="0">
-                <Cluster justify="space-between" align="center">
-                  <Paragraph color={themeValues.darkAccentText}>
-                    {fileType}
-                  </Paragraph>
-                  <IoIosArrowForward
-                    size="29px"
-                    color={themeValues.linkColor}
-                  />
-                </Cluster>
-              </Box>
-            </Stack>
-          </Box>
-        </ExternalLink>
-      </Stack>
-    </Box>
-  );
-};
-
-export default AttachedFileBlock;

package/src/components/molecules/content/blocks/attached-file-block/index.js

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

package/src/components/molecules/content/blocks/hero-block/HeroBlock.js

@@ -1,54 +0,0 @@
-import React, { Fragment } from "react";
-import {
-  Box,
-  Stack,
-  Heading,
-  Paragraph,
-  Imposter,
-  ButtonWithLink
-} from "@thecb/components";
-
-const HeroBlock = ({
-  themeValues,
-  backgroundImage = { url: "" },
-  callToAction = "",
-  subTitle = "",
-  title = "",
-  link = ""
-  //variant = "placeholder",
-  //...rest
-}) => {
-  const heroImageBG = `background: url(${backgroundImage.url}); background-size: cover;`;
-  return (
-    <Box minWidth="100%" minHeight="500px" extraStyles={heroImageBG}>
-      <Imposter
-        verticalMargin="32px"
-        left="48px"
-        breakout={false}
-        extraStyles={`transform: translate(0, -50%);`}
-      >
-        <Box
-          padding={"32px"}
-          minWidth="320px"
-          minHeight="360px"
-          maxWidth="320px"
-          background={themeValues.background}
-        >
-          <Stack childGap="16px">
-            <Fragment>
-              <Heading variant="h2" color={themeValues.lightAccentText}>
-                {title}
-              </Heading>
-              <Paragraph variant="pS" color={themeValues.lightText}>
-                {subTitle}
-              </Paragraph>
-              <ButtonWithLink variant="primary" text={callToAction} to={link} />
-            </Fragment>
-          </Stack>
-        </Box>
-      </Imposter>
-    </Box>
-  );
-};
-
-export default HeroBlock;

package/src/components/molecules/content/blocks/hero-block/index.js

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

package/src/components/molecules/content/blocks/highlight-block/HighlightBlock.js

@@ -1,42 +0,0 @@
-import React from "react";
-import { Box, Grid, Cluster, Heading, Paragraph } from "@thecb/components";
-
-const HighlightBlock = ({
-  themeValues,
-  highlightComponents = []
-  //variant = "placeholder"
-}) => {
-  console.log("highlight components", highlightComponents);
-  const componentBlocks = highlightComponents.map(component => (
-    <Box padding="16px" key={component.title}>
-      <Cluster justify="flex-start" align="flex-start">
-        <Box padding="16px">
-          <Box
-            padding="0"
-            borderRadius="50%"
-            extraStyles={`background-image: url(${component.image.url}); background-size: cover;`}
-            minHeight="124px"
-            minWidth="124px"
-          />
-        </Box>
-        <Box padding="0" maxWidth="300px">
-          <Heading variant="h4" color={themeValues.lightAccentText}>
-            {component.title}
-          </Heading>
-          <Paragraph variant="pS" color={themeValues.lightText}>
-            {component.description}
-          </Paragraph>
-        </Box>
-      </Cluster>
-    </Box>
-  ));
-  return (
-    <Box minWidth="100%" minHeight="500px" background={themeValues.background}>
-      <Grid columnGap="1px" minColWidth={"400px"}>
-        {componentBlocks}
-      </Grid>
-    </Box>
-  );
-};
-
-export default HighlightBlock;

package/src/components/molecules/content/blocks/highlight-block/index.js

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

package/src/components/molecules/content/blocks/index.js

@@ -1,33 +0,0 @@
-import React, { Fragment } from "react";
-import AccordionBlock from "./accordion-block";
-import ArticleBlock from "./article-block";
-import AttachedFileBlock from "./attached-file-block";
-import HeroBlock from "./hero-block";
-import HighlightBlock from "./highlight-block";
-import InfoBlock from "./info-block";
-import LocationBlock from "./location-block";
-import RelatedLinksBlock from "./related-links-block";
-import ScreendoorBlock from "./screendoor-block";
-import TaglineBlock from "./tagline-block";
-import TaskBlock from "./task-block";
-import TextBlock from "./text-block";
-
-export const blockRegistry = {
-  Accordion: props => <AccordionBlock {...props} />,
-  Article: props => <ArticleBlock {...props} />,
-  AttachedFile: props => <AttachedFileBlock {...props} />,
-  HeroContainer: props => <HeroBlock {...props} />,
-  Highlight: props => <HighlightBlock {...props} />,
-  InfoAlert: props => <InfoBlock {...props} />,
-  GetInTouch: props => <LocationBlock {...props} />,
-  Markdown: () => <Fragment />,
-  RelatedPages: props => <RelatedLinksBlock {...props} />,
-  ScreendoorForm: props => <ScreendoorBlock {...props} />,
-  Tagline: props => <TaglineBlock {...props} />,
-  Task: props => <TaskBlock {...props} />,
-  Text: props => <TextBlock {...props} />
-};
-
-export default {
-  TaglineBlock
-};

package/src/components/molecules/content/blocks/info-block/InfoBlock.js

@@ -1,15 +0,0 @@
-import React from "react";
-import { Box, Alert } from "@thecb/components";
-
-const InfoBlock = ({ heading, text }) => (
-  <Box
-    padding="0"
-    minWidth="100%"
-    maxWidth="330px"
-    extraStyles={`margin-bottom: 1rem;`}
-  >
-    <Alert heading={heading} text={text} variant="info" showQuitLink={false} />
-  </Box>
-);
-
-export default InfoBlock;

package/src/components/molecules/content/blocks/info-block/index.js

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