From 670bef996bf0f8cbce46deb67dd88703bbc2c902 Mon Sep 17 00:00:00 2001 From: Yvonne Tang Date: Mon, 18 Mar 2024 18:40:26 -0700 Subject: [PATCH 1/6] Stacked story hero variant --- components/BlurryPoster/BlurryPoster.tsx | 81 +++++++------- components/Hero/StoryHeroMvp.styles.ts | 19 ---- components/Hero/StoryHeroMvp.tsx | 76 ++++++++----- components/Hero/StoryHeroStacked.styles.ts | 23 ++++ components/Hero/StoryHeroStacked.tsx | 105 ++++++++++++++++++ components/Hero/index.ts | 1 + .../Storyblok/SbStoryMvp/SbStoryMvp.tsx | 4 + 7 files changed, 222 insertions(+), 87 deletions(-) create mode 100644 components/Hero/StoryHeroStacked.styles.ts create mode 100644 components/Hero/StoryHeroStacked.tsx diff --git a/components/BlurryPoster/BlurryPoster.tsx b/components/BlurryPoster/BlurryPoster.tsx index 82ab4356..39137274 100644 --- a/components/BlurryPoster/BlurryPoster.tsx +++ b/components/BlurryPoster/BlurryPoster.tsx @@ -93,42 +93,44 @@ export const BlurryPoster = ({ return ( - - - - - - {bgImageAlt - + {bgImageSrc && ( + + + + + + {bgImageAlt + + )}
)} - {/* No authors and published dates for MVP */} - {/* {byline && ( - {byline} - )} - {date && ( - - )} */} {cta && (
{cta} diff --git a/components/Hero/StoryHeroMvp.styles.ts b/components/Hero/StoryHeroMvp.styles.ts index e147ca3a..28bc02e6 100644 --- a/components/Hero/StoryHeroMvp.styles.ts +++ b/components/Hero/StoryHeroMvp.styles.ts @@ -2,25 +2,6 @@ import { cnb } from 'cnbuilder'; export const root = 'relative'; -export const imageCrops = { - '1x1': '1200x1200', - '2x1': '2000x1000', - '3x2': '2100x1400', - '5x8': '1000x1600', - '16x9': '2000x1125', - 'free': '2000x0', -}; -export type ImageCropType = keyof typeof imageCrops; - -export const mobileImageCrops = { - '1x1': '1000x1000', - '2x1': '1000x500', - '3x2': '1200x800', - '5x8': '1000x1600', - '16x9': '1600x900', - 'free': '1000x0', -}; - export const image = (renderTwoImages: boolean) => cnb( 'size-full', renderTwoImages ? 'hidden lg:block' : '', diff --git a/components/Hero/StoryHeroMvp.tsx b/components/Hero/StoryHeroMvp.tsx index e41b5d6a..350be942 100644 --- a/components/Hero/StoryHeroMvp.tsx +++ b/components/Hero/StoryHeroMvp.tsx @@ -3,6 +3,7 @@ import { Container } from '@/components/Container'; import { BlurryPoster } from '@/components/BlurryPoster'; import { CreateBloks } from '@/components/CreateBloks'; import { RichText } from '@/components/RichText'; +import { StoryHeroStacked } from '@/components/Hero/StoryHeroStacked'; import { type SbImageType, type SbTypographyProps } from '@/components/Storyblok/Storyblok.types'; import { type SbBlokData } from '@storyblok/react/rsc'; import { paletteAccentColors, type PaletteAccentHexColorType } from '@/utilities/colorPalettePlugin'; @@ -11,6 +12,11 @@ import { hasRichText } from '@/utilities/hasRichText'; import{ type HeroOverlayType } from '@/utilities/datasource'; import * as styles from './StoryHeroMvp.styles'; +export type ColorPickerType = { + _uid: string; + color: string; +}; + export type StoryHeroMvpProps = { title: string; superhead?: string; @@ -20,6 +26,8 @@ export type StoryHeroMvpProps = { byline?: string; publishedDate?: string; dek?: string; + heroVariant?: 'default' | 'stacked'; + heroBgColor?: ColorPickerType; // Hex color value from Storyblok native color picker heroImage?: SbImageType; bgImage?: SbImageType; bgImageAlt?: string; @@ -46,6 +54,8 @@ export const StoryHeroMvp = ({ byline, dek, publishedDate, + heroVariant, + heroBgColor, heroImage: { filename, focus } = {}, bgImage: { filename: bgImageSrc, focus: bgImageFocus } = {}, bgImageAlt, @@ -78,31 +88,47 @@ export const StoryHeroMvp = ({ width="full" className={styles.root} > - + {heroVariant === 'stacked' ? ( + + ) : ( + + )} {!!getNumBloks(heroTexturedBar) && ( )} diff --git a/components/Hero/StoryHeroStacked.styles.ts b/components/Hero/StoryHeroStacked.styles.ts new file mode 100644 index 00000000..a04d28ec --- /dev/null +++ b/components/Hero/StoryHeroStacked.styles.ts @@ -0,0 +1,23 @@ +import { cnb } from 'cnbuilder'; + +export const root = 'relative'; + +export const superhead = 'cc rs-mb-1 w-full text-shadow-sm'; +export const heading = ( + isSmallHeading?: boolean, + headingFont?: 'druk' | 'serif', +) => cnb('mb-0 -mt-01em', { + 'fluid-type-7 md:fluid-type-8 lg:fluid-type-7 3xl:fluid-type-8 4xl:text-[17.1rem]': isSmallHeading && headingFont === 'druk', + 'fluid-type-7 md:fluid-type-9': !isSmallHeading && headingFont === 'druk', + 'fluid-type-5 lg:fluid-type-4 xl:fluid-type-5 2xl:fluid-type-6 xl:max-w-1200 lg:hyphens-auto 3xl:hyphens-none' : headingFont === 'serif' && !isSmallHeading, + 'fluid-type-5 lg:fluid-type-4 xl:fluid-type-5 xl:max-w-1200 lg:hyphens-auto 3xl:hyphens-none' : headingFont === 'serif' && isSmallHeading, +}); + + +export const image = (renderTwoImages: boolean) => cnb( + 'size-full', + renderTwoImages ? 'hidden lg:block' : '', +); +export const mobileImage = 'size-full lg:hidden'; +export const captionWrapper = 'mt-06em'; +export const caption = 'caption *:leading-display mt-08em max-w-prose-wide'; diff --git a/components/Hero/StoryHeroStacked.tsx b/components/Hero/StoryHeroStacked.tsx new file mode 100644 index 00000000..b1a8a18a --- /dev/null +++ b/components/Hero/StoryHeroStacked.tsx @@ -0,0 +1,105 @@ +import { type StoryblokRichtext } from 'storyblok-rich-text-react-renderer-ts'; +import { AnimateInView } from '@/components/Animate'; +import { Container } from '@/components/Container'; +import { Heading, Text, SrOnlyText } from '@/components/Typography'; +import { type SbImageType, type SbTypographyProps } from '@/components/Storyblok/Storyblok.types'; +import { type SbBlokData } from '@storyblok/react/rsc'; +import { paletteAccentColors, type PaletteAccentHexColorType } from '@/utilities/colorPalettePlugin'; +import { getProcessedImage } from '@/utilities/getProcessedImage'; +import * as styles from './StoryHeroStacked.styles'; + +export type StoryHeroStackedProps = { + title: string; + superhead?: string; + headingFont?: 'serif' | 'druk'; + isSmallHeading?: boolean; + dek?: string; + heroBgColor?: string; // Hex color value from Storyblok native color picker + imageSrc?: string; + imageFocus?: string; + alt?: string; + caption?: StoryblokRichtext; + isLightHero?: boolean; + tabColor?: { + value?: PaletteAccentHexColorType; + } +}; + +export const StoryHeroStacked = ({ + title, + superhead, + headingFont, + isSmallHeading, + dek, + heroBgColor, + imageSrc, + imageFocus, + alt, + caption, + isLightHero = false, + tabColor: { value: tabColorValue } = {}, +}: StoryHeroStackedProps) => { + return ( + + {superhead && ( + + {superhead} + + )} + {title && ( + + {superhead && {`${superhead}:`}}{title} + + )} + {imageSrc && ( + + + + + + {alt + + +)} + + ); +}; diff --git a/components/Hero/index.ts b/components/Hero/index.ts index d49cde69..6475fd2d 100644 --- a/components/Hero/index.ts +++ b/components/Hero/index.ts @@ -2,3 +2,4 @@ export * from './Hero'; export * from './BasicHero'; export * from './StoryHero'; export * from './StoryHeroMvp'; +export * from './StoryHeroStacked'; diff --git a/components/Storyblok/SbStoryMvp/SbStoryMvp.tsx b/components/Storyblok/SbStoryMvp/SbStoryMvp.tsx index 4e675db2..b1cbaddf 100644 --- a/components/Storyblok/SbStoryMvp/SbStoryMvp.tsx +++ b/components/Storyblok/SbStoryMvp/SbStoryMvp.tsx @@ -30,6 +30,8 @@ export const SbStoryMvp = ({ byline, dek, publishedDate, + heroVariant, + heroBgColor, heroImage, bgImage, bgImageAlt, @@ -70,6 +72,8 @@ export const SbStoryMvp = ({ dek={dek} byline={byline} publishedDate={publishedDate} + heroVariant={heroVariant} + heroBgColor={heroBgColor} heroImage={heroImage} bgImage={bgImage} bgImageAlt={bgImageAlt} From e3b689395df20d66df7ca507f26e87bd890c5ebf Mon Sep 17 00:00:00 2001 From: Yvonne Tang Date: Mon, 18 Mar 2024 18:53:31 -0700 Subject: [PATCH 2/6] hero headline sizes --- components/Hero/StoryHeroStacked.styles.ts | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/components/Hero/StoryHeroStacked.styles.ts b/components/Hero/StoryHeroStacked.styles.ts index a04d28ec..388aa3f7 100644 --- a/components/Hero/StoryHeroStacked.styles.ts +++ b/components/Hero/StoryHeroStacked.styles.ts @@ -7,10 +7,11 @@ export const heading = ( isSmallHeading?: boolean, headingFont?: 'druk' | 'serif', ) => cnb('mb-0 -mt-01em', { - 'fluid-type-7 md:fluid-type-8 lg:fluid-type-7 3xl:fluid-type-8 4xl:text-[17.1rem]': isSmallHeading && headingFont === 'druk', - 'fluid-type-7 md:fluid-type-9': !isSmallHeading && headingFont === 'druk', - 'fluid-type-5 lg:fluid-type-4 xl:fluid-type-5 2xl:fluid-type-6 xl:max-w-1200 lg:hyphens-auto 3xl:hyphens-none' : headingFont === 'serif' && !isSmallHeading, - 'fluid-type-5 lg:fluid-type-4 xl:fluid-type-5 xl:max-w-1200 lg:hyphens-auto 3xl:hyphens-none' : headingFont === 'serif' && isSmallHeading, + 'fluid-type-7': headingFont === 'druk', + 'md:fluid-type-8': isSmallHeading && headingFont === 'druk', + 'md:fluid-type-9': !isSmallHeading && headingFont === 'druk', + 'fluid-type-5 md:fluid-type-7 xl:max-w-1200 xl:mx-auto': headingFont === 'serif', + 'xl:fluid-type-8 ': headingFont === 'serif' && !isSmallHeading, }); From f7f39c6d61054323793dc22333e09a87ddd75bb0 Mon Sep 17 00:00:00 2001 From: Yvonne Tang Date: Tue, 19 Mar 2024 11:23:25 -0700 Subject: [PATCH 3/6] Hero variant styles --- components/Hero/StoryHeroMvp.styles.ts | 8 -- components/Hero/StoryHeroMvp.tsx | 10 +-- components/Hero/StoryHeroStacked.styles.ts | 4 +- components/Hero/StoryHeroStacked.tsx | 95 +++++++++++++--------- 4 files changed, 61 insertions(+), 56 deletions(-) diff --git a/components/Hero/StoryHeroMvp.styles.ts b/components/Hero/StoryHeroMvp.styles.ts index 28bc02e6..147c2407 100644 --- a/components/Hero/StoryHeroMvp.styles.ts +++ b/components/Hero/StoryHeroMvp.styles.ts @@ -1,11 +1,3 @@ -import { cnb } from 'cnbuilder'; - export const root = 'relative'; - -export const image = (renderTwoImages: boolean) => cnb( - 'size-full', - renderTwoImages ? 'hidden lg:block' : '', -); -export const mobileImage = 'size-full lg:hidden'; export const captionWrapper = 'mt-06em'; export const caption = 'caption *:leading-display mt-08em max-w-prose-wide'; diff --git a/components/Hero/StoryHeroMvp.tsx b/components/Hero/StoryHeroMvp.tsx index 350be942..6f3b0c8a 100644 --- a/components/Hero/StoryHeroMvp.tsx +++ b/components/Hero/StoryHeroMvp.tsx @@ -77,10 +77,8 @@ export const StoryHeroMvp = ({ day: 'numeric', year: 'numeric', }); - - const Caption = hasRichText(caption) - ? - : undefined; + const hasCaption = hasRichText(caption); + const Caption = hasCaption ? : undefined; return ( ) : ( )} {!!getNumBloks(heroTexturedBar) && ( diff --git a/components/Hero/StoryHeroStacked.styles.ts b/components/Hero/StoryHeroStacked.styles.ts index 388aa3f7..80b3cb33 100644 --- a/components/Hero/StoryHeroStacked.styles.ts +++ b/components/Hero/StoryHeroStacked.styles.ts @@ -2,11 +2,11 @@ import { cnb } from 'cnbuilder'; export const root = 'relative'; -export const superhead = 'cc rs-mb-1 w-full text-shadow-sm'; +export const superhead = 'cc mb-04em w-full text-shadow-sm'; export const heading = ( isSmallHeading?: boolean, headingFont?: 'druk' | 'serif', -) => cnb('mb-0 -mt-01em', { +) => cnb('mb-0 text-balance mx-auto whitespace-pre-line', { 'fluid-type-7': headingFont === 'druk', 'md:fluid-type-8': isSmallHeading && headingFont === 'druk', 'md:fluid-type-9': !isSmallHeading && headingFont === 'druk', diff --git a/components/Hero/StoryHeroStacked.tsx b/components/Hero/StoryHeroStacked.tsx index b1a8a18a..053b75b1 100644 --- a/components/Hero/StoryHeroStacked.tsx +++ b/components/Hero/StoryHeroStacked.tsx @@ -1,10 +1,8 @@ -import { type StoryblokRichtext } from 'storyblok-rich-text-react-renderer-ts'; import { AnimateInView } from '@/components/Animate'; import { Container } from '@/components/Container'; -import { Heading, Text, SrOnlyText } from '@/components/Typography'; -import { type SbImageType, type SbTypographyProps } from '@/components/Storyblok/Storyblok.types'; -import { type SbBlokData } from '@storyblok/react/rsc'; -import { paletteAccentColors, type PaletteAccentHexColorType } from '@/utilities/colorPalettePlugin'; +import { + Heading, Paragraph, Text, SrOnlyText, +} from '@/components/Typography'; import { getProcessedImage } from '@/utilities/getProcessedImage'; import * as styles from './StoryHeroStacked.styles'; @@ -18,11 +16,8 @@ export type StoryHeroStackedProps = { imageSrc?: string; imageFocus?: string; alt?: string; - caption?: StoryblokRichtext; + hasCaption?: boolean; isLightHero?: boolean; - tabColor?: { - value?: PaletteAccentHexColorType; - } }; export const StoryHeroStacked = ({ @@ -35,9 +30,8 @@ export const StoryHeroStacked = ({ imageSrc, imageFocus, alt, - caption, + hasCaption, isLightHero = false, - tabColor: { value: tabColorValue } = {}, }: StoryHeroStackedProps) => { return ( - {superhead && ( - - {superhead} - - )} - {title && ( - - {superhead && {`${superhead}:`}}{title} - - )} + + {superhead && ( + + {superhead} + + )} + {title && ( + + {superhead && {`${superhead}:`}}{title} + + )} + {dek && ( + + {dek} + + )} + {imageSrc && ( @@ -85,21 +94,27 @@ export const StoryHeroStacked = ({ height={900} /> + {alt -)} + )} ); }; From 27a894cb78d1c0caa8718a44d2e4cd0e7291b91d Mon Sep 17 00:00:00 2001 From: Yvonne Tang Date: Tue, 19 Mar 2024 12:26:01 -0700 Subject: [PATCH 4/6] Stretch image to full width --- components/Hero/StoryHeroStacked.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/Hero/StoryHeroStacked.tsx b/components/Hero/StoryHeroStacked.tsx index 053b75b1..9e3051e8 100644 --- a/components/Hero/StoryHeroStacked.tsx +++ b/components/Hero/StoryHeroStacked.tsx @@ -110,7 +110,7 @@ export const StoryHeroStacked = ({ alt={alt || ''} aria-describedby={hasCaption ? 'story-hero-caption' : undefined} fetchPriority="high" - className="rs-mt-4" + className="rs-mt-4 w-full" /> From 095fd24312da5adae4c1d346adfc05e4ae62bc97 Mon Sep 17 00:00:00 2001 From: Yvonne Tang Date: Tue, 19 Mar 2024 14:42:24 -0700 Subject: [PATCH 5/6] Optimize images; clean up --- components/Hero/StoryHeroMvp.tsx | 15 +-- components/Hero/StoryHeroStacked.styles.ts | 15 ++- components/Hero/StoryHeroStacked.tsx | 104 +++++++++++---------- components/Storyblok/Storyblok.types.ts | 5 + 4 files changed, 73 insertions(+), 66 deletions(-) diff --git a/components/Hero/StoryHeroMvp.tsx b/components/Hero/StoryHeroMvp.tsx index 6f3b0c8a..fdb593d7 100644 --- a/components/Hero/StoryHeroMvp.tsx +++ b/components/Hero/StoryHeroMvp.tsx @@ -4,19 +4,14 @@ import { BlurryPoster } from '@/components/BlurryPoster'; import { CreateBloks } from '@/components/CreateBloks'; import { RichText } from '@/components/RichText'; import { StoryHeroStacked } from '@/components/Hero/StoryHeroStacked'; -import { type SbImageType, type SbTypographyProps } from '@/components/Storyblok/Storyblok.types'; +import { type SbImageType, type SbTypographyProps, type SbColorPickerType } from '@/components/Storyblok/Storyblok.types'; import { type SbBlokData } from '@storyblok/react/rsc'; import { paletteAccentColors, type PaletteAccentHexColorType } from '@/utilities/colorPalettePlugin'; import { getNumBloks } from '@/utilities/getNumBloks'; import { hasRichText } from '@/utilities/hasRichText'; -import{ type HeroOverlayType } from '@/utilities/datasource'; +import { type HeroOverlayType } from '@/utilities/datasource'; import * as styles from './StoryHeroMvp.styles'; -export type ColorPickerType = { - _uid: string; - color: string; -}; - export type StoryHeroMvpProps = { title: string; superhead?: string; @@ -27,7 +22,7 @@ export type StoryHeroMvpProps = { publishedDate?: string; dek?: string; heroVariant?: 'default' | 'stacked'; - heroBgColor?: ColorPickerType; // Hex color value from Storyblok native color picker + heroBgColor?: SbColorPickerType; heroImage?: SbImageType; bgImage?: SbImageType; bgImageAlt?: string; @@ -55,7 +50,7 @@ export const StoryHeroMvp = ({ dek, publishedDate, heroVariant, - heroBgColor, + heroBgColor: { color: bgHexColor } = {}, heroImage: { filename, focus } = {}, bgImage: { filename: bgImageSrc, focus: bgImageFocus } = {}, bgImageAlt, @@ -93,7 +88,7 @@ export const StoryHeroMvp = ({ headingFont={headingFont} isSmallHeading={isSmallHeading} dek={dek} - heroBgColor={heroBgColor?.color} + heroBgColor={bgHexColor} imageSrc={filename} imageFocus={focus} alt={alt} diff --git a/components/Hero/StoryHeroStacked.styles.ts b/components/Hero/StoryHeroStacked.styles.ts index 80b3cb33..9e9d3a96 100644 --- a/components/Hero/StoryHeroStacked.styles.ts +++ b/components/Hero/StoryHeroStacked.styles.ts @@ -2,23 +2,20 @@ import { cnb } from 'cnbuilder'; export const root = 'relative'; -export const superhead = 'cc mb-04em w-full text-shadow-sm'; +export const contentWrapper = 'mt-40 md:-mt-60 xl:mt-0'; +export const superhead = (isLightHero: boolean) => cnb('cc mb-04em w-full', !isLightHero && 'text-shadow-sm'); export const heading = ( isSmallHeading?: boolean, headingFont?: 'druk' | 'serif', ) => cnb('mb-0 text-balance mx-auto whitespace-pre-line', { - 'fluid-type-7': headingFont === 'druk', + 'fluid-type-7 max-w-1400': headingFont === 'druk', 'md:fluid-type-8': isSmallHeading && headingFont === 'druk', 'md:fluid-type-9': !isSmallHeading && headingFont === 'druk', - 'fluid-type-5 md:fluid-type-7 xl:max-w-1200 xl:mx-auto': headingFont === 'serif', + 'fluid-type-5 md:fluid-type-7 max-w-1200': headingFont === 'serif', 'xl:fluid-type-8 ': headingFont === 'serif' && !isSmallHeading, }); - - -export const image = (renderTwoImages: boolean) => cnb( - 'size-full', - renderTwoImages ? 'hidden lg:block' : '', -); +export const dek = 'max-w-900 text-balance mx-auto rs-mt-3'; +export const image = 'rs-mt-4 w-full'; export const mobileImage = 'size-full lg:hidden'; export const captionWrapper = 'mt-06em'; export const caption = 'caption *:leading-display mt-08em max-w-prose-wide'; diff --git a/components/Hero/StoryHeroStacked.tsx b/components/Hero/StoryHeroStacked.tsx index 9e3051e8..ec6bfb61 100644 --- a/components/Hero/StoryHeroStacked.tsx +++ b/components/Hero/StoryHeroStacked.tsx @@ -4,6 +4,7 @@ import { Heading, Paragraph, Text, SrOnlyText, } from '@/components/Typography'; import { getProcessedImage } from '@/utilities/getProcessedImage'; +import { getSbImageSize } from '@/utilities/getSbImageSize'; import * as styles from './StoryHeroStacked.styles'; export type StoryHeroStackedProps = { @@ -33,6 +34,10 @@ export const StoryHeroStacked = ({ hasCaption, isLightHero = false, }: StoryHeroStackedProps) => { + // We keep the original image aspect ratio + const imageSize = getSbImageSize(imageSrc) || { width: 0, height: 0 }; + const { width: imageWidth, height: imageHeight } = imageSize; + return ( - + {superhead && ( - - {superhead} - + + + {superhead} + + )} {title && ( - - {superhead && {`${superhead}:`}}{title} - + + + {superhead && {`${superhead}:`}}{title} + + )} {dek && ( - - {dek} - + + + {dek} + + )} {imageSrc && ( @@ -84,33 +95,32 @@ export const StoryHeroStacked = ({ + {alt diff --git a/components/Storyblok/Storyblok.types.ts b/components/Storyblok/Storyblok.types.ts index de2aab84..716215b7 100644 --- a/components/Storyblok/Storyblok.types.ts +++ b/components/Storyblok/Storyblok.types.ts @@ -50,3 +50,8 @@ export type SbColorStopProps = { stop: string; hexColor: string; }; + +// Storyblok Native Color Picker +export type SbColorPickerType = { + color?: string; +}; From 7a2601912c1204da6213ef1e3338b38927ec3921 Mon Sep 17 00:00:00 2001 From: Yvonne Tang Date: Tue, 19 Mar 2024 14:44:53 -0700 Subject: [PATCH 6/6] Add fallback hero bg color before a proper value is entered --- components/Hero/StoryHeroStacked.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/Hero/StoryHeroStacked.tsx b/components/Hero/StoryHeroStacked.tsx index ec6bfb61..4831df2c 100644 --- a/components/Hero/StoryHeroStacked.tsx +++ b/components/Hero/StoryHeroStacked.tsx @@ -43,7 +43,7 @@ export const StoryHeroStacked = ({ width="full" className={styles.root} pt={10} - style={{ backgroundColor: heroBgColor }} + style={{ backgroundColor: heroBgColor || '#888' }} > {superhead && (