@thecb/components 3.5.4 → 3.5.5-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;