Skip to content

Commit

Permalink
GIVCAMP-304 | Add CTA region to Section and Homepage Theme/Story Sect…
Browse files Browse the repository at this point in the history
…ion (#239)

* Add CTA region to Section and HomepageThemeStorySection

* clean up
  • Loading branch information
yvonnetangsu authored Mar 4, 2024
1 parent f6e1928 commit fb1c80c
Show file tree
Hide file tree
Showing 4 changed files with 19 additions and 1 deletion.
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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: {
Expand All @@ -21,6 +23,7 @@ type SbHomepageThemeSectionProps = {
heading?: string;
intro?: StoryblokRichtext;
content?: SbBlokData[];
cta?: SbBlokData[];
bgImage?: SbImageType;
bgBlur?: BgBlurType;
gradientTop?: GradientToType;
Expand All @@ -34,6 +37,7 @@ export const SbHomepageThemeSection = ({
heading,
intro,
content,
cta,
bgImage: { filename, focus } = {},
bgBlur,
gradientTop,
Expand Down Expand Up @@ -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>
);
};
2 changes: 1 addition & 1 deletion components/Storyblok/SbSection/SbSection.styles.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
import { header } from '@/components/Scrollytelling';
import { cnb } from 'cnbuilder';

export type AlignType = 'left' | 'center' | 'right';
Expand Down Expand Up @@ -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';
8 changes: 8 additions & 0 deletions components/Storyblok/SbSection/SbSection.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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 = {
Expand All @@ -36,6 +37,7 @@ type SbSectionProps = {
headingLevel?: HeadingType;
isSerifHeader?: boolean;
subheading?: string;
cta?: SbBlokData[];
caption?: StoryblokRichtext;
captionColumnWidth?: '12' | '10' | '8' | '6' | '4';
barColor?: {
Expand All @@ -61,6 +63,7 @@ export const SbSection = ({
isSerifHeader,
headingLevel,
subheading,
cta,
caption,
captionColumnWidth,
barColor: { value: barColorValue } = {},
Expand Down Expand Up @@ -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) && (
Expand Down

0 comments on commit fb1c80c

Please sign in to comment.