Section image and other options

SU-SWS · Oct 2, 2023 · a1da9b9 · a1da9b9
1 parent 79e2f64
commit a1da9b9
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 10 deletions.
diff --git 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
@@ -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
@@ -3,23 +3,29 @@ 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: {
     _uid: string;
     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 && (
+      <ImageOverlay imageSrc={getProcessedImage(filename, '2000x1600', focus)} overlay={bgColor === 'black' ? 'black-70' : 'white-70'} />
+    )}
     {(heading || superhead) && (
-      <FlexBox className="rs-mb-6">
+      <FlexBox className="relative z-10">
         {barColorValue && (
           <div className={cnb(
             'block w-8 md:w-20 lg:w-40',
@@ -62,14 +74,14 @@ export const SbSection = ({
         )}
         >
           {superhead && (
-            <Text size={2} leading="tight" font="serif" aria-hidden>
+            <Text size={2} leading="tight" font="serif" weight="semibold" aria-hidden>
               {superhead}
             </Text>
           )}
           {heading && (
             <Heading
               as={headingLevel}
-              size="splash"
+              size={isSmallHeading ? 'f8' : 'splash'}
               leading="none"
               uppercase
               font="druk"
@@ -81,7 +93,20 @@ export const SbSection = ({
         </div>
       </FlexBox>
     )}
-    <Container>
+    {subheading && (
+      <Container>
+        <Paragraph
+          variant="overview"
+          weight="normal"
+          color={bgColor === 'black' ? 'black-20' : 'black-80'}
+          noMargin
+          className="relative z-10 max-w-prose ml-0 rs-mt-3"
+        >
+          {subheading}
+        </Paragraph>
+      </Container>
+    )}
+    <Container className="rs-mt-8">
       <CreateBloks blokSection={content} isDarkTheme={bgColor === 'black'} />
     </Container>
   </Container>

diff --git a/components/VerticalCard/VerticalCard.tsx b/components/VerticalCard/VerticalCard.tsx
@@ -99,16 +99,16 @@ export const VerticalCard = ({
           </CtaLink>
         )}
       </div>
-      {/* Display max 3 topic tags */}
-      {!!taxonomy?.length && (
+      {/* No taxonomy for MVP; display max 3 topic tags */}
+      {/* {!!taxonomy?.length && (
         <ul className={styles.taxonomy(!!tabColor)}>
           {taxonomy.slice(0, 3).map((item) => (
             <li key={item} className={styles.taxonomyItem}>
               <CtaLink href={`/stories?topic=${slugify(item)}`} variant="storyCardTag">{item}</CtaLink>
             </li>
           ))}
         </ul>
-      )}
+      )} */}
     </article>
   </AnimateInView>
 );