WIP caption

SU-SWS · Apr 5, 2024 · 769fda2 · 769fda2
1 parent 02c20d4
commit 769fda2
Show file tree

Hide file tree

Showing 3 changed files with 178 additions and 159 deletions.
diff --git a/components/Storyblok/SbVerticalPoster.tsx b/components/Storyblok/SbVerticalPoster.tsx
@@ -24,6 +24,7 @@ type SbVerticalPosterProps = {
     publishedDate?: string;
     cta?: SbBlokData[];
     image?: SbImageType;
+    caption?: StoryblokRichtext;
     alt?: string;
     bgImage?: SbImageType;
     bgAlt?: string;
@@ -46,6 +47,7 @@ export const SbVerticalPoster = ({
     publishedDate,
     cta,
     image: { filename, focus } = {},
+    caption,
     alt,
     bgImage: { filename: bgImageSrc, focus: bgImageFocus } = {},
     bgAlt,
@@ -56,6 +58,7 @@ export const SbVerticalPoster = ({
 }: SbVerticalPosterProps) => {
   const Cta = !!getNumBloks(cta) ? <CreateBloks blokSection={cta} /> : undefined;
   const Body = hasRichText(body) ? <RichText textAlign="center" textColor={bgColor === 'black' ? 'white' : 'black'} wysiwyg={body} /> : undefined;
+  const Caption = hasRichText(caption) ? <RichText textColor='black-70' wysiwyg={caption} /> : undefined;
 
   return (
     <VerticalPoster
@@ -71,6 +74,7 @@ export const SbVerticalPoster = ({
       byline={byline}
       publishedDate={publishedDate}
       cta={Cta}
+      caption={Caption}
       imageSrc={filename}
       imageFocus={focus}
       alt={alt}

diff --git a/components/VerticalPoster/VerticalPoster.styles.ts b/components/VerticalPoster/VerticalPoster.styles.ts
@@ -3,7 +3,7 @@ import { type BgColorType } from '@/components/Container';
 
 export const root = 'relative overflow-hidden break-words';
 
-export const grid = 'w-full';
+export const grid = 'relative w-full';
 
 export const contentWrapper = (imageOnLeft: boolean, isParallax: boolean) => cnb('relative px-20 sm:px-30 md:px-50 rs-py-6 lg:px-[6vw]', {
   'lg:order-last': imageOnLeft,