@thecb/components 3.6.0-beta.2 → 4.0.0

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

@@ -1,40 +0,0 @@
-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

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

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

@@ -1,40 +0,0 @@
-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

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

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

@@ -1,283 +0,0 @@
-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

@@ -1,11 +0,0 @@
-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

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

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

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