diff --git a/components/BlurryPoster/BlurryPoster.styles.tsx b/components/BlurryPoster/BlurryPoster.styles.tsx index 421201da..608b5f19 100644 --- a/components/BlurryPoster/BlurryPoster.styles.tsx +++ b/components/BlurryPoster/BlurryPoster.styles.tsx @@ -26,7 +26,7 @@ export const heading = (imageOnLeft: boolean, isSmallHeading: boolean) => cnb('m export const customHeading = (imageOnLeft: boolean) => cnb('flex flex-wrap gap-x-[1em] items-center mb-0 -mt-05em lg:-mt-08em children:inline-block', { '3xl:pl-[calc(100%-750px-40px)] lg:w-[140%] xl:w-[130%]': !imageOnLeft, }); -export const customHeadingText = (font: 'druk' | 'serif', isSmallHeading: boolean) => cnb('first:ml-0 last:mr-0', { +export const customHeadingText = (font: 'druk' | 'serif', isSmallHeading: boolean) => cnb('hyphens-auto first:ml-0 last:mr-0', { 'fluid-type-7': font === 'druk', 'md:fluid-type-9' : font === 'druk' && !isSmallHeading, 'md:fluid-type-8 lg:fluid-type-7 3xl:fluid-type-8 4xl:text-[17.1rem]' : font === 'druk' && isSmallHeading, diff --git a/components/ImageOverlay.tsx b/components/ImageOverlay.tsx index 01d4b019..3e12b7b0 100644 --- a/components/ImageOverlay.tsx +++ b/components/ImageOverlay.tsx @@ -11,6 +11,7 @@ export const overlays = { 'black-gradient-dark': 'bg-gradient-to-b from-transparent via-black-true/30 to-black-true/80', 'black-top-bottom': 'bg-gradient-to-b from-gc-black via-transparent via-40% to-gc-black', 'black-top-sm': 'bg-gradient-to-b from-gc-black via-periwinkle via-20% to-transparent', + 'white-70': 'bg-white/70', }; export type OverlayType = keyof typeof overlays | ''; diff --git a/components/Storyblok/SbSection.tsx b/components/Storyblok/SbSection.tsx index 537b8b88..ddb43f5e 100644 --- a/components/Storyblok/SbSection.tsx +++ b/components/Storyblok/SbSection.tsx @@ -3,11 +3,14 @@ import { storyblokEditable, type SbBlokData } from '@storyblok/react/rsc'; import { CreateBloks } from '../CreateBloks'; import { FlexBox } from '../FlexBox'; import { - Heading, type HeadingType, SrOnlyText, Text, + Heading, type HeadingType, SrOnlyText, Text, Paragraph, } from '../Typography'; import { Container, type BgColorType } from '../Container'; -import { accentBgColors, type AccentColorType, type PaddingType } from '@/utilities/datasource'; +import { ImageOverlay } from '../ImageOverlay'; +import { accentBgColors, type PaddingType } from '@/utilities/datasource'; import { paletteAccentColors, type PaletteAccentHexColorType } from '@/utilities/colorPalettePlugin'; +import { type SbImageType } from './Storyblok.types'; +import { getProcessedImage } from '@/utilities/getProcessedImage'; type SbSectionProps = { blok: { @@ -15,11 +18,14 @@ type SbSectionProps = { content?: SbBlokData[]; superhead?: string; heading?: string; + isSmallHeading?: boolean; headingLevel?: HeadingType; + subheading?: string; barColor?: { value?: PaletteAccentHexColorType; } bgColor?: BgColorType; + bgImage?: SbImageType; paddingTop?: PaddingType; paddingBottom?: PaddingType; }; @@ -30,9 +36,12 @@ export const SbSection = ({ content, superhead, heading, + isSmallHeading, headingLevel, + subheading, barColor: { value: barColorValue } = {}, bgColor, + bgImage: { filename, focus } = {}, paddingTop, paddingBottom, }, @@ -46,8 +55,11 @@ export const SbSection = ({ pb={paddingBottom} className="relative overflow-hidden" > + {filename && ( + + )} {(heading || superhead) && ( - + {barColorValue && (
{superhead && ( - + {superhead} )} {heading && ( )} - + {subheading && ( + + + {subheading} + + + )} + diff --git a/components/VerticalCard/VerticalCard.tsx b/components/VerticalCard/VerticalCard.tsx index 283beffe..99dffca0 100644 --- a/components/VerticalCard/VerticalCard.tsx +++ b/components/VerticalCard/VerticalCard.tsx @@ -99,8 +99,8 @@ export const VerticalCard = ({ )}
- {/* Display max 3 topic tags */} - {!!taxonomy?.length && ( + {/* No taxonomy for MVP; display max 3 topic tags */} + {/* {!!taxonomy?.length && (
    {taxonomy.slice(0, 3).map((item) => (
  • @@ -108,7 +108,7 @@ export const VerticalCard = ({
  • ))}
- )} + )} */} );