@thecb/components 3.5.5-beta.0 → 3.5.5

package/.tool-versions

@@ -0,0 +1 @@
+nodejs 10.13.0

package/dist/index.cjs.js

@@ -6730,7 +6730,7 @@ var Stack = function Stack(_ref) {
 };
 
 function _templateObject$7() {
-  var data = _taggedTemplateLiteral(["\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  min-height: ", ";\n  padding: ", ";\n  min-width: ", ";\n\n  > * {\n    margin-top: ", ";\n    margin-bottom: ", ";\n  }\n\n  > :first-child {\n    margin-top: 0;\n  }\n\n  ", "\n\n  ", "\n\n  > :last-child {\n    margin-bottom: 0;\n  }\n"]);
+  var data = _taggedTemplateLiteral(["\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  min-height: ", ";\n  padding: ", ";\n\n  > * {\n    margin-top: ", ";\n    margin-bottom: ", ";\n  }\n\n  > :first-child {\n    margin-top: 0;\n  }\n\n  ", "\n\n  ", "\n\n  > :last-child {\n    margin-bottom: 0;\n  }\n"]);
 
   _templateObject$7 = function _templateObject() {
     return data;
@@ -6745,19 +6745,16 @@ var CoverOuterContainer = styled__default.div(_templateObject$7(), function (_re
   var padding = _ref2.padding;
   return padding;
 }, function (_ref3) {
-  var fillCenter = _ref3.fillCenter;
-  return fillCenter ? "100%" : "auto";
+  var childGap = _ref3.childGap;
+  return childGap;
 }, function (_ref4) {
   var childGap = _ref4.childGap;
   return childGap;
 }, function (_ref5) {
-  var childGap = _ref5.childGap;
-  return childGap;
-}, function (_ref6) {
-  var fillCenter = _ref6.fillCenter;
+  var fillCenter = _ref5.fillCenter;
   return fillCenter ? "> :nth-child(2) {flex-grow: 1;}" : "";
-}, function (_ref7) {
-  var centerOverride = _ref7.centerOverride;
+}, function (_ref6) {
+  var centerOverride = _ref6.centerOverride;
   return centerOverride ? "> :nth-child(2) {margin-top: 0; margin-bottom: auto;}" : "> :nth-child(2) {margin-top: auto; margin-bottom: auto;}";
 });
 
@@ -6955,7 +6952,7 @@ var Switcher = function Switcher(_ref) {
 };
 
 function _templateObject$a() {
-  var data = _taggedTemplateLiteral(["\n  position: ", ";\n  top: ", ";\n  left: ", ";\n  display: ", ";\n\n  ", "\n\n  ", "\n  ", ";\n"]);
+  var data = _taggedTemplateLiteral(["\n  position: ", ";\n  top: ", ";\n  left: ", ";\n  display: ", ";\n\n  ", "\n\n  ", "\n"]);
 
   _templateObject$a = function _templateObject() {
     return data;
@@ -6983,9 +6980,6 @@ var ImposterWrapper = styled__default.div(_templateObject$a(), function (_ref) {
       verticalMargin = _ref6.verticalMargin,
       horizontalMargin = _ref6.horizontalMargin;
   return breakout ? "" : "\n    overflow: auto;\n    max-width: calc(100% - (".concat(horizontalMargin, " * 2));\n    max-height: calc(100% - (").concat(verticalMargin, " * 2));\n  ");
-}, function (_ref7) {
-  var extraStyles = _ref7.extraStyles;
-  return extraStyles;
 });
 
 /*
@@ -18562,6 +18556,7 @@ var FormInput = function FormInput(_ref9) {
     color: themeValues.linkColor,
     weight: themeValues.fontWeight,
     hoverStyles: themeValues.hoverFocusStyles,
+    focusStyles: themeValues.hoverFocusStyles,
     extraStyles: "cursor: pointer;",
     onClick: function onClick() {
       return setShowPassword(!showPassword);
@@ -36126,7 +36121,8 @@ var PaymentDetailsActions = function PaymentDetailsActions(_ref) {
 
   var obligationSlug = config.obligationSlug;
   var createPaymentFromProfile = actions.createPaymentFromProfile,
-      setDetailedObligation = actions.setDetailedObligation;
+      setDetailedObligation = actions.setDetailedObligation,
+      navigateToDetailedObligation = actions.navigateToDetailedObligation;
   var detailsSlug = config.type === "ACCOUNT" ? "/profile/accounts/details/".concat(obligationSlug) : "/profile/properties/details/".concat(obligationSlug);
 
   var handleClick = function handleClick(obligations) {
@@ -36135,7 +36131,8 @@ var PaymentDetailsActions = function PaymentDetailsActions(_ref) {
   };
 
   var handleDetailsClick = function handleDetailsClick() {
-    setDetailedObligation(obligations, config, detailsSlug);
+    setDetailedObligation(obligations, config);
+    navigateToDetailedObligation(detailsSlug);
   };
 
   return /*#__PURE__*/React__default.createElement(Box, {
@@ -36199,7 +36196,10 @@ var PaymentDetailsActions = function PaymentDetailsActions(_ref) {
   }, autoPayAvailable && !autoPayEnabled ? /*#__PURE__*/React__default.createElement(ButtonWithAction, {
     variant: "tertiary",
     text: "Set Up Autopay",
-    action: handleAutopayAction,
+    action: function action() {
+      setDetailedObligation(obligations, config);
+      handleAutopayAction();
+    },
     dataQa: "Set Up Autopay",
     extraStyles: isMobile && "flex-grow: 1; width: 100%;"
   }) : /*#__PURE__*/React__default.createElement(AutopayModalModule, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "3.5.5-beta.0",
+  "version": "3.5.5",
   "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/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/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;