first commit

examples/cms-payload/components/Blocks/CallToAction/index.module.scss

@@ -0,0 +1,34 @@
+@use "../.../../../../css/queries.scss" as *;
+
+$spacer-h: calc(var(--block-padding) / 2);
+
+.callToAction {
+  padding-left: $spacer-h;
+  padding-right: $spacer-h;
+}
+
+.background--white {
+  background-color: var(--color-base-1000);
+  color: var(--color-base-0);
+}
+
+.richText {
+  :last-child {
+    margin-bottom: 0;
+  }
+}
+
+.linkGroup {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  height: 100%;
+
+  :last-child {
+    margin-bottom: 0;
+  }
+
+  @include mid-break {
+    margin-top: 20px;
+  }
+}

examples/cms-payload/components/Blocks/CallToAction/index.tsx

@@ -0,0 +1,71 @@
+import React from "react";
+import { Cell, Grid } from "@faceless-ui/css-grid";
+import { Page } from "../../../payload-types";
+import { BackgroundColor } from "../../BackgroundColor";
+import { Gutter } from "../../Gutter";
+import { CMSLink } from "../../Link";
+import RichText from "../../RichText";
+
+import classes from "./index.module.scss";
+
+type Props = {
+  ctaBackgroundColor?: "white" | "black";
+  richText: {
+    [k: string]: unknown;
+  }[];
+  links: {
+    link: {
+      type?: "reference" | "custom";
+      newTab?: boolean;
+      reference: {
+        value: string | Page;
+        relationTo: "pages";
+      };
+      url: string;
+      label: string;
+    };
+    id?: string;
+  }[];
+  id?: string;
+  blockName?: string;
+  blockType: "cta";
+};
+export const CallToActionBlock: React.FC<Props> = ({
+  ctaBackgroundColor,
+  links,
+  richText,
+}) => {
+  const oppositeBackgroundColor =
+    ctaBackgroundColor === "white" ? "black" : "white";
+
+  return (
+    <Gutter>
+      <BackgroundColor color={oppositeBackgroundColor}>
+        <div className={classes.callToAction}>
+          <Grid>
+            <Cell cols={8} colsL={7} colsM={12}>
+              <div>
+                <RichText className={classes.richText} content={richText} />
+              </div>
+            </Cell>
+
+            <Cell
+              start={10}
+              cols={3}
+              startL={9}
+              colsL={4}
+              startM={1}
+              colsM={12}
+            >
+              <div className={classes.linkGroup}>
+                {(links || []).map(({ link }, i) => {
+                  return <CMSLink key={i} {...link} />;
+                })}
+              </div>
+            </Cell>
+          </Grid>
+        </div>
+      </BackgroundColor>
+    </Gutter>
+  );
+};

examples/cms-payload/components/Blocks/Content/index.module.scss

@@ -0,0 +1,3 @@
+.link {
+  margin-top: var(--base);
+}

examples/cms-payload/components/Blocks/Content/index.tsx

@@ -0,0 +1,96 @@
+import React from "react";
+import { Grid, Cell } from "@faceless-ui/css-grid";
+import { Page } from "../../../payload-types";
+import RichText from "../../RichText";
+import { Gutter } from "../../Gutter";
+import { CMSLink } from "../../Link";
+import classes from "./index.module.scss";
+
+type Props = Extract<Page["layout"][0], { blockType: "content" }>;
+
+const Columns: React.FC<Props> = ({
+  layout,
+  columnOne,
+  columnTwo,
+  columnThree,
+}) => {
+  switch (layout) {
+    case "oneColumn": {
+      return (
+        <Cell cols={9} colsM={4}>
+          <RichText content={columnOne.richText} />
+          {columnOne.enableLink && (
+            <CMSLink className={classes.link} {...columnOne.link} />
+          )}
+        </Cell>
+      );
+    }
+
+    case "halfAndHalf":
+    case "twoThirdsOneThird": {
+      let col1Cols = 6;
+      let col2Cols = 6;
+
+      if (layout === "twoThirdsOneThird") {
+        col1Cols = 8;
+        col2Cols = 4;
+      }
+
+      return (
+        <React.Fragment>
+          <Cell cols={col1Cols} colsM={4}>
+            <RichText content={columnOne.richText} />
+            {columnOne.enableLink && (
+              <CMSLink className={classes.link} {...columnOne.link} />
+            )}
+          </Cell>
+          <Cell cols={col2Cols} colsM={4}>
+            <RichText content={columnTwo.richText} />
+            {columnTwo.enableLink && (
+              <CMSLink className={classes.link} {...columnTwo.link} />
+            )}
+          </Cell>
+        </React.Fragment>
+      );
+    }
+
+    case "threeColumns": {
+      return (
+        <React.Fragment>
+          <Cell cols={4} colsM={4}>
+            <RichText content={columnOne.richText} />
+            {columnOne.enableLink && (
+              <CMSLink className={classes.link} {...columnOne.link} />
+            )}
+          </Cell>
+          <Cell cols={4} colsM={4}>
+            <RichText content={columnTwo.richText} />
+            {columnTwo.enableLink && (
+              <CMSLink className={classes.link} {...columnTwo.link} />
+            )}
+          </Cell>
+          <Cell cols={4} colsM={4}>
+            <RichText content={columnThree.richText} />
+            {columnThree.enableLink && (
+              <CMSLink className={classes.link} {...columnThree.link} />
+            )}
+          </Cell>
+        </React.Fragment>
+      );
+    }
+    default:
+      break;
+  }
+
+  return null;
+};
+
+export const ContentBlock: React.FC<Props> = (props) => {
+  return (
+    <Gutter className={classes.mediaBlock}>
+      <Grid>
+        <Columns {...props} />
+      </Grid>
+    </Gutter>
+  );
+};

examples/cms-payload/components/Blocks/MediaBlock/index.module.scss

@@ -0,0 +1,7 @@
+.mediaBlock {
+  position: relative;
+}
+
+.caption {
+  margin-top: var(--base);
+}

examples/cms-payload/components/Blocks/MediaBlock/index.tsx

@@ -0,0 +1,37 @@
+import React from "react";
+import { Gutter } from "../../Gutter";
+import { Media } from "../../Media";
+import { Media as MediaType } from "../../../payload-types";
+import RichText from "../../RichText";
+import classes from "./index.module.scss";
+
+export const MediaBlock: React.FC<{
+  media?: MediaType;
+  caption?: string;
+  position?: "default" | "fullscreen";
+  mediaBackgroundColor?: string;
+}> = (props) => {
+  const { media, caption, position = "default" } = props;
+
+  return (
+    <div className={classes.mediaBlock}>
+      {position === "fullscreen" && (
+        <div>
+          <Media resource={media} />
+        </div>
+      )}
+      {position === "default" && (
+        <Gutter>
+          <div>
+            <Media resource={media} />
+          </div>
+        </Gutter>
+      )}
+      {caption && (
+        <Gutter className={classes.caption}>
+          <RichText content={caption} />
+        </Gutter>
+      )}
+    </div>
+  );
+};

examples/cms-payload/components/Blocks/index.tsx

@@ -0,0 +1,79 @@
+"use client";
+
+import React, { Fragment } from "react";
+import { Page } from "../../payload-types";
+import { toKebabCase } from "../../utilities/toKebabCase";
+import { BackgroundColor } from "../BackgroundColor";
+import { VerticalPaddingOptions } from "../VerticalPadding";
+import { CallToActionBlock } from "./CallToAction";
+import { ContentBlock } from "./Content";
+import { MediaBlock } from "./MediaBlock";
+
+const blockComponents = {
+  cta: CallToActionBlock,
+  content: ContentBlock,
+  mediaBlock: MediaBlock,
+};
+
+const Blocks: React.FC<{
+  blocks: Page["layout"];
+}> = (props) => {
+  const { blocks } = props;
+
+  const hasBlocks = blocks && Array.isArray(blocks) && blocks.length > 0;
+
+  if (hasBlocks) {
+    return (
+      <Fragment>
+        {blocks.map((block, index) => {
+          const { blockName, blockType } = block;
+
+          if (blockType && blockType in blockComponents) {
+            const Block = blockComponents[blockType];
+            const backgroundColor = block[`${blockType}BackgroundColor`];
+            const prevBlock = blocks[index - 1];
+            const nextBlock = blocks[index + 1];
+
+            const prevBlockBackground =
+              prevBlock?.[`${prevBlock.blockType}BackgroundColor`];
+            const nextBlockBackground =
+              nextBlock?.[`${nextBlock.blockType}BackgroundColor`];
+
+            let paddingTop: VerticalPaddingOptions = "large";
+            let paddingBottom: VerticalPaddingOptions = "large";
+
+            if (backgroundColor === prevBlockBackground) {
+              paddingTop = "medium";
+            }
+
+            if (backgroundColor === nextBlockBackground) {
+              paddingBottom = "medium";
+            }
+
+            if (Block) {
+              return (
+                <BackgroundColor
+                  key={index}
+                  paddingTop={paddingTop}
+                  paddingBottom={paddingBottom}
+                  color={backgroundColor}
+                >
+                  <Block
+                    // @ts-ignore
+                    id={toKebabCase(blockName)}
+                    {...block}
+                  />
+                </BackgroundColor>
+              );
+            }
+          }
+          return null;
+        })}
+      </Fragment>
+    );
+  }
+
+  return null;
+};
+
+export default Blocks;