@thecb/components 3.5.16 → 3.6.0-beta.0

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/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,23 +155,14 @@ 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>
                       )}
-                      {section.titleIcon && (
-                        <Cluster align="center">{section.titleIcon}</Cluster>
-                      )}
-                      <Box padding={section.titleIcon ? "0 0 0 8px" : "0"}>
-                        <Text variant="p" color={CHARADE_GREY} aria-level="3">
-                          {section.title}
-                        </Text>
-                      </Box>
+                      <Text variant="p" color={CHARADE_GREY} aria-level="3">
+                        {section.title}
+                      </Text>
                     </Cluster>
                     {section.rightIcons && (
                       <Cluster childGap="0.5rem">

package/src/components/molecules/workflow-tile/WorkflowTile.js

@@ -14,8 +14,7 @@ import ButtonWithLink from "../../atoms/button-with-link";
 import { Box, Stack } from "../../atoms/layouts";
 const WorkflowTile = ({
   workflowName = "Test Workflow",
-  workflowDescription = "Link your benefit plan",
-  workflowActionName = "Search",
+  workflowDescription,
   slug
 }) => (
   <Box
@@ -36,7 +35,7 @@ const WorkflowTile = ({
       </Box>
       <Box padding={"0 1rem 1rem 1rem"} minHeight={"4.25rem"}>
         <Paragraph variant="pS" color={STORM_GREY}>
-          {workflowDescription}
+          {workflowDescription || `Link your benefit plan`}
         </Paragraph>
       </Box>
       <Box padding={"1.5rem 1rem"} background={GRECIAN_GREY}>
@@ -46,7 +45,7 @@ const WorkflowTile = ({
           fontWeight={FONT_WEIGHT_SEMIBOLD}
           fontSize={"1.125rem"}
           borderRadius={"0px"}
-          text={workflowActionName}
+          text={"Link Benefits"}
           minWidth={"100%"}
           url={`/service/${slug}`}
           extraStyles={`width: 100%;`}

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>
 );

package/src/deprecated/icons/AlertSuccessIcon.js

@@ -11,7 +11,7 @@ export const AlertSuccessIcon = () => (
     <defs>
       <path
         d="M12,24 C18.627417,24 24,18.627417 24,12 C24,5.372583 18.627417,0 12,0 C5.372583,0 0,5.372583 0,12 C0,18.627417 5.372583,24 12,24 Z M16.9497475,7.46446609 L18.363961,8.87867966 L9.87867966,17.363961 L5.63603897,13.1213203 L7.05025253,11.7071068 L9.87803897,14.5354661 L16.9497475,7.46446609 Z"
-        id="alertSuccess"
+        id="path-1"
       ></path>
     </defs>
     <g
@@ -27,13 +27,13 @@ export const AlertSuccessIcon = () => (
           transform="translate(24.000000, 34.000000)"
         >
           <mask id="mask-2" fill="white">
-            <use xlinkHref="#alertSuccess"></use>
+            <use xlinkHref="#path-1"></use>
           </mask>
           <use
             id="background-2"
             fill="#47B872"
             fillRule="nonzero"
-            xlinkHref="#alertSuccess"
+            xlinkHref="#path-1"
           ></use>
         </g>
       </g>

package/src/deprecated/icons/IconInvalid.js

@@ -16,23 +16,47 @@ export const IconInvalid = ({
     xmlns="http://www.w3.org/2000/svg"
     xmlnsXlink="http://www.w3.org/1999/xlink"
     style={{ margin }}
-    aria-label="Invalid"
   >
-    <g stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
-      <g transform="translate(-538.000000, -1064.000000)" fillRule="nonzero">
-        <g transform="translate(457.000000, 938.000000)">
-          <g transform="translate(81.000000, 20.000000)">
-            <g transform="translate(0.000000, 106.000000)">
+    <g
+      id="icon-invalid-Authentication"
+      stroke="none"
+      strokeWidth="1"
+      fill="none"
+      fillRule="evenodd"
+    >
+      <g
+        id="icon-invalid-00.1.0.1---HSS---Register---Already-Exists-Error"
+        transform="translate(-538.000000, -1064.000000)"
+        fillRule="nonzero"
+      >
+        <g
+          id="icon-invalid-Password-Requirements"
+          transform="translate(457.000000, 938.000000)"
+        >
+          <g
+            id="icon-invalid-Group-2"
+            transform="translate(81.000000, 20.000000)"
+          >
+            <g
+              id="icon-invalid-PasswordVerification-Error"
+              transform="translate(0.000000, 106.000000)"
+            >
               <circle
+                id="icon-invalid-Oval"
                 stroke={bgFill}
                 fill={bgFill}
                 cx="9"
                 cy="9"
                 r="8.5"
               ></circle>
-              <g transform="translate(2.000000, 2.000000)" fill={iconFill}>
+              <g
+                id="icon-invalid-Icon/Close"
+                transform="translate(2.000000, 2.000000)"
+                fill={iconFill}
+              >
                 <path
                   d="M7.58333333,7.58333333 L7.58333333,11.6666667 L6.41666667,11.6666667 L6.41666667,7.58333333 L2.33333333,7.58333333 L2.33333333,6.41666667 L6.41666667,6.41666667 L6.41666667,2.33333333 L7.58333333,2.33333333 L7.58333333,6.41666667 L11.6666667,6.41666667 L11.6666667,7.58333333 L7.58333333,7.58333333 Z"
+                  id="icon-invalid-x"
                   transform="translate(7.000000, 7.000000) rotate(45.000000) translate(-7.000000, -7.000000) "
                 ></path>
               </g>