From fb1c80c1f81c86ddb2b52dee8a1ca4bbf19640db Mon Sep 17 00:00:00 2001
From: Yvonne Tang <42749717+yvonnetangsu@users.noreply.github.com>
Date: Mon, 4 Mar 2024 14:29:06 -0800
Subject: [PATCH] GIVCAMP-304 | Add CTA region to Section and Homepage
 Theme/Story Section (#239)

* Add CTA region to Section and HomepageThemeStorySection

* clean up
---
 .../SbHomepageThemeSection.styles.ts                     | 1 +
 .../SbHomepageThemeSection/SbHomepageThemeSection.tsx    | 9 +++++++++
 components/Storyblok/SbSection/SbSection.styles.ts       | 2 +-
 components/Storyblok/SbSection/SbSection.tsx             | 8 ++++++++
 4 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/components/Storyblok/SbHomepageThemeSection/SbHomepageThemeSection.styles.ts b/components/Storyblok/SbHomepageThemeSection/SbHomepageThemeSection.styles.ts
index 00b327be..04d10758 100644
--- a/components/Storyblok/SbHomepageThemeSection/SbHomepageThemeSection.styles.ts
+++ b/components/Storyblok/SbHomepageThemeSection/SbHomepageThemeSection.styles.ts
@@ -9,3 +9,4 @@ export const heading = 'fluid-type-7 md:gc-splash mb-0 whitespace-pre-line';
 export const introWrapper = 'cc relative z-20';
 export const intro = 'intro-text *:leading-display *:md:leading-cozy *:text-shadow-sm rs-mt-7 max-w-1000';
 export const contentWrapper = 'relative z-20';
+export const cta = 'relative cc md:flex-row *:mx-auto rs-mt-6 gap-20 lg:gap-27 w-fit';
diff --git a/components/Storyblok/SbHomepageThemeSection/SbHomepageThemeSection.tsx b/components/Storyblok/SbHomepageThemeSection/SbHomepageThemeSection.tsx
index 0823cde2..2b61d9d3 100644
--- a/components/Storyblok/SbHomepageThemeSection/SbHomepageThemeSection.tsx
+++ b/components/Storyblok/SbHomepageThemeSection/SbHomepageThemeSection.tsx
@@ -3,6 +3,7 @@ import { AnimateInView } from '@/components/Animate';
 import { storyblokEditable, type SbBlokData } from '@storyblok/react/rsc';
 import { type StoryblokRichtext } from 'storyblok-rich-text-react-renderer-ts';
 import { CreateBloks } from '@/components/CreateBloks';
+import { FlexBox } from '@/components/FlexBox';
 import { Heading, SrOnlyText, Text } from '@/components/Typography';
 import { Container } from '@/components/Container';
 import { RichText } from '@/components/RichText';
@@ -13,6 +14,7 @@ import * as styles from './SbHomepageThemeSection.styles';
 import {
   bgBlurs, type BgBlurType, gradientFroms, type GradientFromType, gradientTos, type GradientToType,
 } from '@/utilities/datasource';
+import { getNumBloks } from '@/utilities/getNumBloks';
 
 type SbHomepageThemeSectionProps = {
   blok: {
@@ -21,6 +23,7 @@ type SbHomepageThemeSectionProps = {
     heading?: string;
     intro?: StoryblokRichtext;
     content?: SbBlokData[];
+    cta?: SbBlokData[];
     bgImage?: SbImageType;
     bgBlur?: BgBlurType;
     gradientTop?: GradientToType;
@@ -34,6 +37,7 @@ export const SbHomepageThemeSection = ({
     heading,
     intro,
     content,
+    cta,
     bgImage: { filename, focus } = {},
     bgBlur,
     gradientTop,
@@ -137,6 +141,11 @@ export const SbHomepageThemeSection = ({
       <Container pt={8} width="full" className={styles.contentWrapper}>
         <CreateBloks blokSection={content} isDarkTheme />
       </Container>
+      {!!getNumBloks(cta) && (
+        <FlexBox direction="col" className={styles.cta}>
+          <CreateBloks blokSection={cta} />
+        </FlexBox>
+      )}
     </Container>
   );
 };
diff --git a/components/Storyblok/SbSection/SbSection.styles.ts b/components/Storyblok/SbSection/SbSection.styles.ts
index 8157dcc5..3f801cac 100644
--- a/components/Storyblok/SbSection/SbSection.styles.ts
+++ b/components/Storyblok/SbSection/SbSection.styles.ts
@@ -1,4 +1,3 @@
-import { header } from '@/components/Scrollytelling';
 import { cnb } from 'cnbuilder';
 
 export type AlignType = 'left' | 'center' | 'right';
@@ -35,4 +34,5 @@ export const subhead = (headerAlign?: AlignType) => cnb('relative z-10 rs-mt-3 '
   'max-w-prose': headerAlign !== 'center',
 });
 export const contentWrapper = 'relative z-10';
+export const cta = 'cc md:flex-row *:mx-auto rs-mt-3 gap-20 lg:gap-27 w-fit';
 export const caption = 'caption *:leading-display mt-08em max-w-prose-wide';
diff --git a/components/Storyblok/SbSection/SbSection.tsx b/components/Storyblok/SbSection/SbSection.tsx
index a5e54e6e..f08644ae 100644
--- a/components/Storyblok/SbSection/SbSection.tsx
+++ b/components/Storyblok/SbSection/SbSection.tsx
@@ -23,6 +23,7 @@ import { paletteAccentColors, type PaletteAccentHexColorType } from '@/utilities
 import { type SbImageType, type SbColorStopProps } from '../Storyblok.types';
 import { getProcessedImage } from '@/utilities/getProcessedImage';
 import { hasRichText } from '@/utilities/hasRichText';
+import { getNumBloks } from '@/utilities/getNumBloks';
 import * as styles from './SbSection.styles';
 
 type SbSectionProps = {
@@ -36,6 +37,7 @@ type SbSectionProps = {
     headingLevel?: HeadingType;
     isSerifHeader?: boolean;
     subheading?: string;
+    cta?: SbBlokData[];
     caption?: StoryblokRichtext;
     captionColumnWidth?: '12' | '10' | '8' | '6' | '4';
     barColor?: {
@@ -61,6 +63,7 @@ export const SbSection = ({
     isSerifHeader,
     headingLevel,
     subheading,
+    cta,
     caption,
     captionColumnWidth,
     barColor: { value: barColorValue } = {},
@@ -182,6 +185,11 @@ export const SbSection = ({
           <Container pt={hasHeader ? 8 : undefined} width="full" className={styles.contentWrapper}>
             <CreateBloks blokSection={content} isDarkTheme={bgColor === 'black'} />
           </Container>
+          {!!getNumBloks(cta) && (
+            <FlexBox direction="col" className={styles.cta}>
+              <CreateBloks blokSection={cta} />
+            </FlexBox>
+          )}
         </Container>
       </m.div>
       {hasRichText(caption) && (