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 = ({
+ {!!getNumBloks(cta) && (
+
+
+
+ )}
);
};
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 = ({
+ {!!getNumBloks(cta) && (
+
+
+
+ )}
{hasRichText(caption) && (