@thecb/components 3.7.0-beta.2 → 4.0.0

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;

package/src/components/molecules/content/blocks/location-block/LocationBlock.js

@@ -1,228 +0,0 @@
-import React from "react";
-import {
-  IoMdTime,
-  IoIosPin,
-  IoIosCall,
-  IoMdMail,
-  IoMdPrint,
-  IoLogoFacebook,
-  IoLogoTwitter,
-  IoLogoInstagram
-} from "react-icons/io";
-import {
-  Box,
-  Stack,
-  Switcher,
-  Cluster,
-  Paragraph,
-  Heading
-} from "@thecb/components";
-
-const LocationBlock = ({
-  locationName = "",
-  address1 = "",
-  address2 = "",
-  address3 = "",
-  city = "",
-  state = "",
-  zip = "",
-  phone = "",
-  fax = "",
-  email = "",
-  hours1 = "",
-  hours2 = "",
-  facebookUrl = "",
-  twitterUrl = "",
-  instagramUrl = "",
-  themeValues,
-  variant = "default"
-}) => {
-  console.log("hey hey hey");
-  console.log("variant is...", variant);
-  console.log("zip is", zip);
-  console.log("state is", state);
-  console.log("address2 is", address2);
-  const cityString = `${city}, ${state} ${zip}`;
-  console.log("email is", email);
-  return (
-    <Box maxWidth="450px" minHeight={"auto"} padding="0" minWidth="100%">
-      <Box padding="16px" background="white" borderRadius="4px">
-        <Stack>
-          <Box
-            key="location-heading"
-            borderSize="1px"
-            borderColor="#cfd4de"
-            borderWidthOverride="0 0 1px 0"
-            padding="16px 0 32px 0"
-          >
-            <Stack>
-              <Paragraph
-                key="get-in-touch"
-                extraStyles={`text-transform: uppercase;`}
-              >
-                Get in touch
-              </Paragraph>
-              <Heading
-                key="location-name"
-                variant="h3"
-                color={themeValues.darkAccentText}
-                extraStyles={`margin-top: 16px;`}
-              >
-                {locationName}
-              </Heading>
-            </Stack>
-          </Box>
-          <Switcher key="location-info">
-            <Box key="hours-address">
-              <Stack>
-                {hours1 && hours2 && (
-                  <Box padding="0" key="hours">
-                    <Cluster justify="flex-start" align="flex-start">
-                      <Box padding="0">
-                        <IoMdTime size="29px" />
-                      </Box>
-                      <Box padding="0 0 0 16px">
-                        <Paragraph variant="pL">{`${hours1} am - ${hours2} pm (M-F)`}</Paragraph>
-                      </Box>
-                    </Cluster>
-                  </Box>
-                )}
-                {address1 && (
-                  <Box padding="0" key="address">
-                    <Cluster justify="flex-start" align="flex-start">
-                      <Box padding="0">
-                        <IoIosPin size="29px" />
-                      </Box>
-                      <Box padding="0 0 0 16px">
-                        <Stack childGap="1rem">
-                          <Paragraph key="address-1" variant="pL">
-                            {address1}
-                          </Paragraph>
-                          {address2 && (
-                            <Paragraph
-                              key="address-2"
-                              variant="pL"
-                              extraStyles={`margin-top: 1rem;`}
-                            >
-                              {address2}
-                            </Paragraph>
-                          )}
-                          {address3 && (
-                            <Paragraph
-                              key="address-3"
-                              variant="pL"
-                              extraStyles={`margin-top: 1rem;`}
-                            >
-                              {address3}
-                            </Paragraph>
-                          )}
-                          {city && (
-                            <Paragraph
-                              key="city-state"
-                              variant="pL"
-                              extraStyles={`margin-top: 1rem;`}
-                            >
-                              {cityString}
-                            </Paragraph>
-                          )}
-                        </Stack>
-                      </Box>
-                    </Cluster>
-                  </Box>
-                )}
-              </Stack>
-            </Box>
-            <Box key="phone-email">
-              <Stack>
-                {phone && (
-                  <Box padding="0" key="phone">
-                    <Cluster justify="flex-start" align="flex-start">
-                      <Box padding="0">
-                        <IoIosCall size="29px" />
-                      </Box>
-                      <Box padding="0 0 0 16px">
-                        <Paragraph variant="pL">{phone}</Paragraph>
-                      </Box>
-                    </Cluster>
-                  </Box>
-                )}
-                {fax && (
-                  <Box padding="0" key="email">
-                    <Cluster justify="flex-start" align="flex-start">
-                      <Box padding="0">
-                        <IoMdPrint size="29px" />
-                      </Box>
-                      <Box padding="0 0 0 16px">
-                        <Paragraph variant="pL">{fax}</Paragraph>
-                      </Box>
-                    </Cluster>
-                  </Box>
-                )}
-                {email && (
-                  <Box padding="0" key="email">
-                    <Cluster justify="flex-start" align="flex-start">
-                      <Box padding="0">
-                        <IoMdMail size="29px" />
-                      </Box>
-                      <Box padding="0 0 0 16px">
-                        <Paragraph variant="pL">{email}</Paragraph>
-                      </Box>
-                    </Cluster>
-                  </Box>
-                )}
-              </Stack>
-            </Box>
-            <Box key="social">
-              <Stack>
-                {facebookUrl && (
-                  <Box padding="0" key="fb">
-                    <Cluster justify="flex-start" align="flex-start">
-                      <Box padding="0">
-                        <IoLogoFacebook size="29px" />
-                      </Box>
-                      <Box padding="0 0 0 16px">
-                        <Paragraph variant="pL">
-                          Office&apos;s Facebook
-                        </Paragraph>
-                      </Box>
-                    </Cluster>
-                  </Box>
-                )}
-                {twitterUrl && (
-                  <Box padding="0" key="twitter">
-                    <Cluster justify="flex-start" align="flex-start">
-                      <Box padding="0">
-                        <IoLogoTwitter size="29px" />
-                      </Box>
-                      <Box padding="0 0 0 16px">
-                        <Paragraph variant="pL">
-                          Office&apos;s Twitter
-                        </Paragraph>
-                      </Box>
-                    </Cluster>
-                  </Box>
-                )}
-                {instagramUrl && (
-                  <Box padding="0" key="instagram">
-                    <Cluster justify="flex-start" align="flex-start">
-                      <Box padding="0">
-                        <IoLogoInstagram size="29px" />
-                      </Box>
-                      <Box padding="0 0 0 16px">
-                        <Paragraph variant="pL">
-                          Office&apos;s Instagram
-                        </Paragraph>
-                      </Box>
-                    </Cluster>
-                  </Box>
-                )}
-              </Stack>
-            </Box>
-          </Switcher>
-        </Stack>
-      </Box>
-    </Box>
-  );
-};
-
-export default LocationBlock;

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

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

package/src/components/molecules/content/blocks/related-links-block/RelatedLinksBlock.js

@@ -1,35 +0,0 @@
-import React from "react";
-import { Box, Stack, Paragraph, ExternalLink } from "@thecb/components";
-import { FONT_WEIGHT_SEMIBOLD } from "../../../../constants/style_constants";
-
-const RelatedLinksBlock = ({ links, themeValues }) => (
-  <Box
-    padding="0"
-    background="white"
-    extraStyles={`margin-bottom: 2.5rem;`}
-    borderRadius="2px"
-  >
-    <Paragraph variant="p" color={themeValues.darkAccentText}>
-      Related Links
-    </Paragraph>
-    <ul>
-      <Stack>
-        {links.map(({ text, url }) => (
-          <li key={text}>
-            <ExternalLink to={url}>
-              <Paragraph
-                variant="pL"
-                weight={FONT_WEIGHT_SEMIBOLD}
-                color={themeValues.linkColor}
-              >
-                {text}
-              </Paragraph>
-            </ExternalLink>
-          </li>
-        ))}
-      </Stack>
-    </ul>
-  </Box>
-);
-
-export default RelatedLinksBlock;

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

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