@thecb/components 3.7.0-beta.1 → 4.0.2

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;