@thecb/components 3.5.18 → 3.6.0-beta.2

package/src/components/molecules/content/blocks/task-block/TaskBlock.js

@@ -0,0 +1,40 @@
+import React from "react";
+
+import {
+  Box,
+  Stack,
+  Cluster,
+  Heading,
+  Paragraph,
+  ButtonWithLink
+} from "@thecb/components";
+import { FONT_WEIGHT_SEMIBOLD } from "../../../../constants/style_constants";
+
+const TaskBlock = ({ themeValues, headline, text, callToAction, url }) => (
+  <Box
+    padding="24px 16px"
+    boxShadow={`inset 0px 3px 0px 0px rgb(21, 116, 157),
+0px 2px 4px 0px rgba(41, 42, 51, 0.4);`}
+    borderRadius="4px"
+    background="#ffffff"
+    maxWidth="47.5rem"
+  >
+    <Stack childGap="1.5rem">
+      <Heading
+        variant="h3"
+        color={themeValues.darkText}
+        weight={FONT_WEIGHT_SEMIBOLD}
+      >
+        {headline}
+      </Heading>
+      <Paragraph color={themeValues.darkText}>{text}</Paragraph>
+      <Box padding="0" minWidth="100%">
+        <Cluster justify="flex-end" align="center">
+          <ButtonWithLink variant="secondary" url={url} text={callToAction} />
+        </Cluster>
+      </Box>
+    </Stack>
+  </Box>
+);
+
+export default TaskBlock;

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

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

package/src/components/molecules/content/blocks/text-block/TextBlock.js

@@ -0,0 +1,40 @@
+import React from "react";
+import { Box, Stack, Paragraph } from "@thecb/components";
+
+const TextBlock = ({
+  themeValues,
+  textContent = ""
+  //variant = "placeholder"
+}) => {
+  const paragraphs =
+    textContent
+      ?.split("\n")
+      .filter(string => string !== "")
+      .map((string, index) => (
+        <Box padding="0">
+          <Paragraph
+            key={`paragraph-${index}`}
+            variant="pL"
+            color={themeValues.darkText}
+          >
+            {string}
+          </Paragraph>
+        </Box>
+      )) ?? [];
+  return (
+    <Box
+      minWidth="100%"
+      minHeight="500px"
+      padding={"32px 24px"}
+      background="white"
+    >
+      <Stack childGap="24px">
+        <Box padding="0">
+          <Stack>{paragraphs}</Stack>
+        </Box>
+      </Stack>
+    </Box>
+  );
+};
+
+export default TextBlock;

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

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

package/src/components/molecules/content/header/Header.js

@@ -0,0 +1,283 @@
+import React, { useContext, useState, Fragment } from "react";
+import { ThemeContext } from "styled-components";
+import { IoIosArrowRoundForward } from "react-icons/io";
+import {
+  Box,
+  Cover,
+  Cluster,
+  Stack,
+  Heading,
+  Paragraph,
+  //Imposter,
+  NavHeader,
+  //HamburgerButton,
+  ExternalLink,
+  InternalLink,
+  withWindowSize,
+  Switcher,
+  Motion,
+  Center
+} from "@thecb/components";
+import { Helmet } from "react-helmet";
+import { fallbackValues } from "./Header.theme";
+import { themeComponent } from "../../../util/themeUtils";
+//import { URL_TEST } from "../../constants/regex_constants";
+import {
+  FONT_WEIGHT_SEMIBOLD,
+  FONT_WEIGHT_BOLD
+} from "../../../constants/style_constants";
+
+const Header = ({ navigation, title, themeValues }) => {
+  const { isMobile } = useContext(ThemeContext);
+  const [navMenuOpen, setNavMenuOpen] = useState();
+  const [selectedNavMenu, setSelectedMenu] = useState(0);
+  const [isAnimating, setIsAnimating] = useState();
+  const headerLogoSrc =
+    "https://cb-public-assets.s3-us-west-2.amazonaws.com/mgw/water-works.png";
+  const headerLogoLink = "/cms/home";
+  const favicon =
+    "https://cb-public-assets.s3-us-west-2.amazonaws.com/mgw/water-works.ico";
+  const HeaderLogoWrapper = ({ children }) =>
+    headerLogoLink ? (
+      false ? (
+        <ExternalLink href={headerLogoLink}>{children}</ExternalLink>
+      ) : (
+        <InternalLink to={headerLogoLink}>{children}</InternalLink>
+      )
+    ) : (
+      <Fragment>{children}</Fragment>
+    );
+  const headerLogo = (
+    <HeaderLogoWrapper>
+      <Box padding="0" minHeight="100%">
+        <Cover singleChild minHeight="100%">
+          <Box padding="0">
+            <img
+              src={headerLogoSrc}
+              height={isMobile ? "42px" : themeValues.logoHeight}
+              alt="header logo"
+            />
+          </Box>
+        </Cover>
+      </Box>
+    </HeaderLogoWrapper>
+  );
+
+  const navLinks = navigation?.sections?.map((link, index) => (
+    <Box
+      padding="2rem 1.5rem"
+      borderColor={navMenuOpen ? themeValues.darkText : "transparent"}
+      borderSize="4px"
+      borderWidthOverride="0 0 4px 0"
+      onClick={() => {
+        console.log("i'm getting called!");
+        setSelectedMenu(index);
+        setNavMenuOpen(!navMenuOpen);
+        setIsAnimating(true);
+        setTimeout(() => {
+          setIsAnimating(false);
+        }, 600);
+      }}
+      onMouseEnter={() => {
+        if (navMenuOpen !== true) {
+          setSelectedMenu(index);
+          setNavMenuOpen(true);
+          setIsAnimating(true);
+          setTimeout(() => {
+            setIsAnimating(false);
+          }, 600);
+        } else if (selectedNavMenu !== index) {
+          setSelectedMenu(index);
+        }
+      }}
+    >
+      <Heading variant="h5" color={themeValues.darkText}>
+        {link?.name}
+      </Heading>
+    </Box>
+  ));
+
+  const navLinksContainer = (
+    <Box padding="0" minWidth="100%">
+      <Cluster justify="space-between" align="stretch">
+        <Box padding="1.5rem">{headerLogo}</Box>
+        {navLinks}
+      </Cluster>
+    </Box>
+  );
+  console.log("navigation in header is", navigation);
+  const navItems =
+    navigation?.sections?.map(section => (
+      <Fragment key={section?.id}>
+        <Box key="title-desc" padding="0">
+          <Stack>
+            <Box padding="0">
+              <Cluster justify="flex-start" align="center">
+                <Heading
+                  variant="h4"
+                  color={themeValues.darkText}
+                  weight={FONT_WEIGHT_BOLD}
+                >
+                  {section?.name}
+                </Heading>
+                <Box padding="0 8px" extraStyles={`margin-top: 8px;`}>
+                  <IoIosArrowRoundForward
+                    size="29px"
+                    color={themeValues.darkText}
+                  />
+                </Box>
+              </Cluster>
+            </Box>
+            <Box padding="0">
+              <Paragraph>{section?.description}</Paragraph>
+            </Box>
+          </Stack>
+        </Box>
+        <Box key="linked-items" padding="0" minWidth="70%">
+          <Cluster justify="space-around" align="stretch">
+            {section?.linkLists?.map(linkList => (
+              <Box padding="0" extraStyles={`flex: 1;`}>
+                <Stack>
+                  <Cluster justify="flex-start" align="center">
+                    <Heading
+                      variant="h4"
+                      color={themeValues.darkText}
+                      weight={FONT_WEIGHT_BOLD}
+                    >
+                      {linkList?.name}
+                    </Heading>
+                    <Box padding="0 8px" extraStyles={`margin-top: 8px;`}>
+                      <IoIosArrowRoundForward
+                        size="29px"
+                        color={themeValues.darkText}
+                      />
+                    </Box>
+                  </Cluster>
+                  <Box padding="24px 0">
+                    <Stack>
+                      {linkList?.links?.map(link => (
+                        <Box padding="0">
+                          <InternalLink to={link.externalUrl}>
+                            <Paragraph color={themeValues.darkText}>
+                              {link.text}
+                            </Paragraph>
+                          </InternalLink>
+                        </Box>
+                      ))}
+                    </Stack>
+                  </Box>
+                </Stack>
+              </Box>
+            ))}
+            <Box padding="0" key="featured-items" extraStyles={`flex: 1;`}>
+              <Stack>
+                <Heading
+                  variant="h4"
+                  weight={FONT_WEIGHT_BOLD}
+                  color={themeValues.darkText}
+                >
+                  Featured Items
+                </Heading>
+                {section?.featuredLinks?.links?.map(feat => (
+                  <Box padding="0" minWidth="100%">
+                    <Cluster justify="space-between" align="center">
+                      <InternalLink to={feat.url}>
+                        <Cluster justify="flex-start" align="center">
+                          <Heading
+                            variant="h6"
+                            weight={FONT_WEIGHT_SEMIBOLD}
+                            color={themeValues.darkText}
+                          >
+                            {feat.text}
+                          </Heading>
+                          <Box padding="0 8px" extraStyles={`margin-top: 8px;`}>
+                            <IoIosArrowRoundForward
+                              size="29px"
+                              color={themeValues.darkText}
+                            />
+                          </Box>
+                        </Cluster>
+                      </InternalLink>
+                    </Cluster>
+                  </Box>
+                ))}
+              </Stack>
+            </Box>
+          </Cluster>
+        </Box>
+      </Fragment>
+    )) ?? [];
+
+  const menuWrapper = {
+    open: {
+      top: "0px",
+      transition: {
+        duration: 0.5
+      }
+    },
+    closed: {
+      top: "-500px",
+      transition: {
+        duration: 0.5
+      }
+    }
+  };
+  console.log("nav items are", navItems);
+  const menu = (
+    <Motion
+      padding="0"
+      variants={menuWrapper}
+      animate={navMenuOpen ? "open" : "closed"}
+      extraStyles={`position: absolute; z-index: 3;`}
+      positionTransition
+      minWidth="100%"
+    >
+      <Box
+        minWidth="100%"
+        background={themeValues.menuColor}
+        padding="0"
+        minHeight="29rem"
+        onMouseLeave={() => {
+          if (isAnimating === false) {
+            setNavMenuOpen(false);
+          }
+        }}
+      >
+        <Center maxWidth={isMobile ? "100%" : "76.5rem"} intrinsic={!isMobile}>
+          <Cluster justify="center" align="center" minWidth="100%">
+            <Box minHeight="29rem" padding="24px 0">
+              <Switcher breakpoint="45rem" largeChild="4" largeChildSize="2">
+                {navItems[selectedNavMenu]}
+              </Switcher>
+            </Box>
+          </Cluster>
+        </Center>
+      </Box>
+    </Motion>
+  );
+  console.log("navMenuOpen is....", navMenuOpen);
+  return (
+    <Box padding="0" role="banner">
+      <Helmet>
+        <title>{title.text}</title>
+        <link rel="shortcut icon" href={favicon} />
+      </Helmet>
+      <Box
+        padding="0"
+        extraStyles={`z-index: 25;`}
+        boxShadow={`0px 4px 2px 0px rgba(0, 0, 0, 0.19);`}
+      >
+        <NavHeader
+          backgroundColor={"#FFFFFF"}
+          leftContent={navLinksContainer}
+          isMobile={isMobile}
+        />
+      </Box>
+      <Box padding="0" minWidth="100%">
+        {menu}
+      </Box>
+    </Box>
+  );
+};
+
+export default withWindowSize(themeComponent(Header, "Header", fallbackValues));

package/src/components/molecules/content/header/Header.theme.js

@@ -0,0 +1,11 @@
+const backgroundColor = "#FFFFFF";
+const linkColor = "#292A33";
+const logoHeight = "50px";
+const menuColor = "#f6f6f9";
+
+export const fallbackValues = {
+  backgroundColor,
+  linkColor,
+  logoHeight,
+  menuColor
+};

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

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

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

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

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

@@ -55,25 +55,24 @@ const EditableList = ({
         extraStyles={`box-shadow: 0px 2px 14px 0px rgb(246, 246, 249),
     0px 3px 8px 0px rgb(202, 206, 216);`}
       >
-        {items.map(item => {
+        {items.map(props => {
           const [modalOpen, toggleModal] = useState(false);
           return (
             <EditableListItem
               listItemSize={
-                !!item.id && item.id === autoPayMethod ? "big" : listItemSize
+                !!props.id && props.id === autoPayMethod ? "big" : listItemSize
               }
-              key={item.id || item}
+              key={props.id}
             >
               <Text variant="p" color={CHARADE_GREY}>
-                {renderItem(item)}
+                {renderItem(props)}
               </Text>
               <EditableListItemControls>
-                {item.isPrimary && (
+                {props.isPrimary && (
                   <Text
                     variant="p"
                     color={STORM_GREY}
                     extraStyles={`font-style: italic;`}
-                    key={`Default ${itemName}`}
                   >
                     Default {itemName}
                   </Text>
@@ -84,11 +83,10 @@ const EditableList = ({
                     border="2px solid transparent"
                     extraStyles={`:not(:first-child) { border-left: 2px solid ${BOSTON_BLUE};}`}
                     dataQa={qaPrefix + " Remove"}
-                    key={`Remove ${item.id}`}
                   >
                     {useModal ? (
                       <Modal
-                        item={{ ...item }}
+                        item={{ ...props }}
                         {...modalProps}
                         modalOpen={modalOpen}
                         toggleModal={toggleModal}
@@ -97,7 +95,7 @@ const EditableList = ({
                       <ButtonWithAction
                         variant="smallGhost"
                         text="Remove"
-                        action={() => removeItem(item.id)}
+                        action={() => removeItem(props.id)}
                         extraStyles={`min-width: 0;`}
                       />
                     )}
@@ -109,12 +107,11 @@ const EditableList = ({
                     border="2px solid transparent"
                     extraStyles={`:not(:first-child) { border-left: 2px solid ${BOSTON_BLUE};}`}
                     dataQa={qaPrefix + " Edit"}
-                    key={`Edit ${item.id}`}
                   >
                     <ButtonWithAction
                       variant="smallGhost"
                       text="Edit"
-                      action={() => editItem(item.id)}
+                      action={() => editItem(props.id)}
                       extraStyles={`min-width: 0;`}
                     />
                   </Box>

package/src/components/molecules/nav-menu/NavMenuDesktop.js

@@ -4,7 +4,6 @@ import { fallbackValues } from "./NavMenu.theme.js";
 import { themeComponent } from "../../../util/themeUtils";
 
 const NavMenuDesktop = ({
-  id,
   top = "125%",
   left = "-100%",
   menuContent = [],
@@ -18,7 +17,7 @@ const NavMenuDesktop = ({
   const menuCarat = `&:after { bottom: 100%; right: 10px; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border-color: ${themeValues.backgroundColor}00; border-bottom-color: ${themeValues.backgroundColor}; border-width: 10px; margin-left: -10px; }`;
 
   return (
-    <Imposter id={id} breakout top={top} left={left} visible={visible}>
+    <Imposter breakout top={top} left={left} visible={visible}>
       <Box
         minWidth="240px"
         padding="1rem 0.5rem"

package/src/components/molecules/nav-menu/NavMenuMobile.js

@@ -42,15 +42,9 @@ const ImposterMenu = styled(menu)`
   top: 72px;
 `;
 
-const NavMenuMobile = ({
-  id,
-  menuContent = [],
-  visible = false,
-  themeValues
-}) => {
+const NavMenuMobile = ({ menuContent = [], visible = false, themeValues }) => {
   return (
     <ImposterMenu
-      id={id}
       initialPose="invisible"
       pose={visible ? "visible" : "invisible"}
     >

package/src/components/molecules/obligation/Obligation.js

@@ -39,15 +39,13 @@ const Obligation = ({
             >
               <Box padding="0">
                 <Cluster justify="flex-start" align="center">
-                  {!isMobile && (
-                    <IconModule
-                      icon={config.icon}
-                      iconDefault={config.iconDefault}
-                      configIconMap={config.iconMap}
-                      iconValue={config.iconValue}
-                      customAttributes={customAttributes}
-                    />
-                  )}
+                  <IconModule
+                    icon={config.icon}
+                    iconDefault={config.iconDefault}
+                    configIconMap={config.iconMap}
+                    iconValue={config.iconValue}
+                    customAttributes={customAttributes}
+                  />
                   <TitleModule
                     title={obligation.description}
                     subtitle={obligation.subDescription}

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

@@ -54,17 +54,29 @@ const PaymentDetailsActions = ({
           borderWidthOverride="0 0 1px 0"
         >
           <Cluster justify="space-between" align="center" nowrap>
-            <AmountModule
-              totalAmountDue={obligations.reduce(
-                (acc, curr) => acc + curr.amountDue,
-                0
-              )}
-              autoPayEnabled={autoPayEnabled}
-              isMobile={isMobile}
-              deactivatePaymentSchedule={deactivatePaymentSchedule}
-              navigateToSettings={navigateToSettings}
-              autoPaySchedule={autoPaySchedule}
-            />
+            <Box padding="0" width="100%">
+              <AmountModule
+                totalAmountDue={obligations.reduce(
+                  (acc, curr) => acc + curr.amountDue,
+                  0
+                )}
+                autoPayEnabled={autoPayEnabled}
+                isMobile={isMobile}
+                deactivatePaymentSchedule={deactivatePaymentSchedule}
+                navigateToSettings={navigateToSettings}
+                autoPaySchedule={autoPaySchedule}
+              />
+            </Box>
+            <Box padding="0" width="100%">
+              <ButtonWithAction
+                isLoading={isLoading}
+                action={() => handleClick(obligations)}
+                text="Pay Now"
+                variant={isMobile ? "smallSecondary" : "secondary"}
+                dataQa="Pay Now"
+                extraStyles={isMobile && `flex-grow: 1; width: 100%;`}
+              />
+            </Box>
           </Cluster>
         </Box>
       )}
@@ -134,18 +146,6 @@ const PaymentDetailsActions = ({
             </Box>
           )}
         </Cluster>
-        {isMobile && (
-          <Box padding="8px 0 0" width="100%">
-            <ButtonWithAction
-              isLoading={isLoading}
-              action={() => handleClick(obligations)}
-              text="Pay Now"
-              variant={isMobile ? "smallSecondary" : "secondary"}
-              dataQa="Pay Now"
-              extraStyles={isMobile && `flex-grow: 1; width: 100%;`}
-            />
-          </Box>
-        )}
       </Box>
     </Box>
   );

package/src/components/molecules/radio-section/RadioSection.js

@@ -122,12 +122,12 @@ const RadioSection = ({
                       : themeValues.headingBackgroundColor
                   }
                   onClick={
-                    (isMobile && supportsTouch) || section.disabled
+                    isMobile && supportsTouch
                       ? noop
                       : () => toggleOpenSection(section.id)
                   }
                   onTouchEnd={
-                    (isMobile && supportsTouch) || !section.disabled
+                    isMobile && supportsTouch
                       ? () => toggleOpenSection(section.id)
                       : noop
                   }
@@ -155,11 +155,7 @@ const RadioSection = ({
                             name={section.id}
                             radioOn={openSection === section.id}
                             radioFocused={focused === section.id}
-                            toggleRadio={
-                              section.disabled
-                                ? noop
-                                : () => toggleOpenSection(section.id)
-                            }
+                            toggleRadio={() => toggleOpenSection(section.id)}
                             tabIndex="-1"
                           />
                         </Box>

package/src/deprecated/components/radio-button/radio-button.js

@@ -36,11 +36,7 @@ const RadioButtonCenter = styled.div`
 RadioButtonCenter.defaultProps = defaultTheme;
 
 const RadioButton = ({ isSelected, name }) => (
-  <RadioButtonBorder
-    isSelected={isSelected}
-    name={name}
-    aria-checked={isSelected}
-  >
+  <RadioButtonBorder isSelected={isSelected} name={name}>
     {isSelected && <RadioButtonCenter />}
   </RadioButtonBorder>
 );