Keep working on StoryImage and create utility getIimageSources

Author: yvonnetangsu

components/Image/FullWidthImage.tsx

@@ -2,6 +2,7 @@ import { useMemo } from 'react';
 import { cnb } from 'cnbuilder';
 import { getProcessedImage } from '@/utilities/getProcessedImage';
 import { getSbImageSize } from '@/utilities/getSbImageSize';
+import { getImageSources } from '@/utilities/getImageSources';
 import { type SbImageType } from '@/components/Storyblok/Storyblok.types';
 import * as styles from './Image.styles';
 
@@ -42,7 +43,7 @@ export const FullWidthImage = ({
     // For example, if the original image is 1100px, it will be used for the min-width: 992px breakpoint
     if (largestBp) {
       sources.push({
-        srcSet: getProcessedImage(filename, ''), // Original size
+        srcSet: getProcessedImage(filename), // Original size
         media: `(min-width: ${largestBp.minWidth}px)`,
         width: originalWidth,
         height: originalHeight,

components/Image/StoryImage.tsx

@@ -7,7 +7,6 @@ import * as styles from './Image.styles';
 
 export type StoryImageProps = React.HTMLAttributes<HTMLDivElement> & MediaWrapperProps & {
   imageSrc: string;
-  imageFocus?: string;
   alt?: string;
   visibleVertical?: styles.VisibleVerticalType;
   backgroundColor?: LightPageBgColorsType;
@@ -16,10 +15,10 @@ export type StoryImageProps = React.HTMLAttributes<HTMLDivElement> & MediaWrappe
 
 export const StoryImage = ({
   imageSrc,
-  imageFocus,
   imageWidth,
   alt,
   caption,
+  captionAlign,
   isCard,
   backgroundColor,
   visibleVertical,
@@ -29,28 +28,23 @@ export const StoryImage = ({
 }: StoryImageProps) => {
   const { width: originalWidth, height: originalHeight } = getSbImageSize(imageSrc);
   const cropSize = styles.imageCropsDesktop['free'];
-  /**
-   * Crop width and height are used for width and height attributes on the img element.
-   * They don't need to be exact as long as the aspect ratio is correct.
-   */
-  const cropWidth = parseInt(cropSize?.split('x')[0], 10);
-  // const cropHeight = !aspectRatio || !aspectRatio
-  //   ? Math.round(originalHeight * 1000 / originalWidth)
-  //   : parseInt(cropSize?.split('x')[1], 10);
 
   return (
     <MediaWrapper
       width={imageWidth !== 'su-w-full' && imageWidth !== 'fit-container' ? 'site' : 'full'}
       imageWidth={imageWidth || 'su-w-story'}
       caption={caption}
+      captionAlign={captionAlign}
+      captionBgColor={backgroundColor}
+      isCard={isCard}
       pt={pt}
       pb={pb}
       {...props}
     >
       {!!imageSrc && (
         <picture>
           <source
-            srcSet={getProcessedImage(imageSrc, cropSize, imageFocus)}
+            srcSet={getProcessedImage(imageSrc, cropSize)}
             media="(min-width: 1500px)"
           />
           {/* <source
@@ -66,9 +60,9 @@ export const StoryImage = ({
             media="(max-width: 575px)"
           /> */}
           <img
-            src={getProcessedImage(imageSrc, cropSize, imageFocus)}
+            src={getProcessedImage(imageSrc, cropSize)}
             loading="lazy"
-            width={cropWidth}
+            // width={cropWidth}
             // height={cropHeight}
             alt={alt || ''}
             className={cnb(styles.image, styles.objectPositions('center', visibleVertical))}

components/Media/Caption.tsx

@@ -1,3 +1,8 @@
+import { cnb } from 'cnbuilder';
+import { Container } from '@/components/Container';
+import { type StoryImageWidthType } from '@/components/Image';
+import { lightPageBgColors, type LightPageBgColorsType } from '@/utilities/datasource';
+import { type TextAlignType } from '@/components/Typography';
 import * as styles from './MediaWrapper.styles';
 
 /**
@@ -6,17 +11,37 @@ import * as styles from './MediaWrapper.styles';
  */
 
 export type CaptionProps = React.HTMLAttributes<HTMLDivElement> & {
+  imageWidth?: StoryImageWidthType;
   caption?: React.ReactNode;
+  captionAlign?: TextAlignType;
+  isCard?: boolean;
+  // Inset the caption to centered container width when the media is edge-to-edge
+  isCaptionInset?: boolean;
+  captionBgColor?: LightPageBgColorsType;
 };
 
 export const Caption = ({
+  imageWidth,
   caption,
+  captionAlign,
+  isCaptionInset,
+  isCard,
+  captionBgColor = 'white',
   className,
   ...props
 }: CaptionProps) => {
+  if (!caption) return null;
+
   return (
-    <figcaption {...props} className={styles.caption} data-component="Caption">
-      {caption}
-    </figcaption>
+    <Container
+      as="figcaption"
+      width={isCaptionInset ? 'site' : 'full'}
+      className={cnb(styles.captionWrapper, lightPageBgColors[captionBgColor])}
+      {...props}
+    >
+      <div className={styles.caption(isCard, imageWidth, captionBgColor, captionAlign)}>
+        {caption}
+      </div>
+    </Container>
   );
 };

components/Media/MediaWrapper.styles.ts

@@ -1,9 +1,25 @@
 import { cnb } from 'cnbuilder';
 import { type StoryImageWidthType } from '@/components/Image';
+import { type TextAlignType } from '@/components/Typography';
+import { lightPageBgColors, type LightPageBgColorsType } from '@/utilities/datasource';
 
 export const root = 'relative flex';
 export const wrapper = (imageWidth: StoryImageWidthType) => cnb('mx-auto', imageWidth === 'su-w-full' && 'w-full');
 
 // Caption component styles
-export const captionWrapper = 'mt-0';
-export const caption = '*:*:leading-display *:*:xl:leading-snug max-w-prose-wide first:*:*:mt-0';
+export const captionWrapper = 'mt-0 caption';
+export const caption = (
+  isCard: boolean,
+  imageWidth: StoryImageWidthType,
+  captionBgColor: LightPageBgColorsType,
+  captionAlign: TextAlignType,
+) => cnb(
+  '*:*:leading-display *:*:xl:leading-snug first:*:*:mt-0',
+  isCard ? 'rs-px-0 pt-08em rs-pb-2' : 'pt-06em',
+  lightPageBgColors[captionBgColor],
+  {
+    'text-center mx-auto': captionAlign === 'center' || imageWidth === 'su-w-full',
+    'text-left': captionAlign === 'left' && imageWidth !== 'su-w-full',
+    'text-right mr-0': captionAlign === 'right' && imageWidth !== 'su-w-full',
+  },
+);

components/Media/MediaWrapper.tsx

@@ -1,26 +1,20 @@
 import { cnb } from 'cnbuilder';
 import { Caption, type CaptionProps } from './Caption';
 import { Container, type ContainerProps } from '@/components/Container';
-import { storyImageWidths, type StoryImageWidthType } from '@/components/Image';
-import { type TextAlignType } from '@/components/Typography';
+import { storyImageWidths } from '@/components/Image';
 import * as styles from './MediaWrapper.styles';
 
 /**
  * This is a wrapper component for images and media elements.
  * that provides a shared set of layout and caption options.
  */
-export type MediaWrapperProps = React.HTMLAttributes<HTMLDivElement> & CaptionProps & ContainerProps & {
-  captionAlign?: TextAlignType;
-  imageWidth?: StoryImageWidthType;
-  // mt?: LargeMarginType;
-  // mb?: LargeMarginType;
-  // pt?: PaddingType;
-  // pb?: PaddingType;
-};
+export type MediaWrapperProps = React.HTMLAttributes<HTMLDivElement> & CaptionProps & ContainerProps;
 
 export const MediaWrapper = ({
   caption,
   captionAlign,
+  isCard,
+  captionBgColor,
   width, // This is the bounding width of the Container
   imageWidth, // This is the width of the wrapper inside the Container
   mt,
@@ -47,7 +41,14 @@ export const MediaWrapper = ({
           {children}
         </div>
         {caption && (
-          <Caption caption={caption} />
+          <Caption
+            imageWidth={imageWidth}
+            caption={caption}
+            isCard={isCard}
+            captionBgColor={captionBgColor}
+            captionAlign={captionAlign}
+            isCaptionInset={imageWidth === 'su-w-full'}
+          />
         )}
       </div>
     </Container>

components/RichText/RichText.tsx

@@ -167,7 +167,6 @@ export const RichText = ({
         textAligns[textAlign],
         className,
       )}
-      data-component="RichText"
     >
       {rendered}
     </div>

components/Storyblok/SbStoryImage.tsx

@@ -9,7 +9,6 @@ import { type SbImageType } from '@/components/Storyblok/Storyblok.types';
 
 type SbStoryImageProps = {
   blok: SbBlokData & {
-    _uid: string;
     image: SbImageType;
     alt?: string;
     imageWidth?: StoryImageWidthType;
@@ -25,30 +24,37 @@ type SbStoryImageProps = {
 
 export const SbStoryImage = ({
   blok: {
-    image: { filename, alt, focus } = {},
+    image: { filename, alt } = {},
     caption,
     captionAlign,
     isCard,
+    backgroundColor,
     imageWidth,
     visibleVertical,
-    backgroundColor,
     spacingTop,
     spacingBottom,
   },
   blok,
 }: SbStoryImageProps) => {
-  const Caption = hasRichText(caption) ? <RichText textColor="black-70" wysiwyg={caption} /> : undefined;
+  const Caption = hasRichText(caption)
+    ? <RichText
+        textColor="cool-grey"
+        wysiwyg={caption}
+        // Edge-to-edge images always have center aligned caption
+        textAlign={imageWidth !== 'su-w-full' ? captionAlign : 'center'}
+      />
+    : undefined;
 
   return (
     <StoryImage
       {...storyblokEditable(blok)}
       imageSrc={filename}
-      imageFocus={focus}
       imageWidth={imageWidth}
       visibleVertical={visibleVertical}
       alt={alt}
       caption={Caption}
       captionAlign={captionAlign}
+      isCard={isCard}
       backgroundColor={backgroundColor}
       pt={spacingTop}
       pb={spacingBottom}

components/Typography/typography.styles.ts

@@ -63,6 +63,7 @@ export const textColors = {
   default: '', // Inherit from the base
   black: 'text-black',
   white: 'text-white',
+  'cool-grey': 'text-cool-grey',
   'black-70': 'text-black-70', // For caption
   'digital-red': 'text-digital-red',
 };

utilities/getImageSources.ts

@@ -0,0 +1,79 @@
+import { getProcessedImage } from './getProcessedImage';
+
+export type ResponsiveBreakpoint = {
+  cropWidth: number;
+  minWidth: number;
+};
+
+export type ImageSource = {
+  srcSet: string;
+  media: string;
+  width?: number;
+  height?: number;
+};
+
+// Define standard breakpoints for generating responsive images
+const defaultResponsiveBreakpoints: ResponsiveBreakpoint[] = [
+  { cropWidth: 2000, minWidth: 1500 },
+  { cropWidth: 1500, minWidth: 1200 },
+  { cropWidth: 1200, minWidth: 992 },
+  { cropWidth: 1000, minWidth: 768 },
+  { cropWidth: 800, minWidth: 461 },
+  { cropWidth: 460, minWidth: 0 }, // Mobile/smallest size
+];
+
+/**
+ * Generates responsive image sources for use with picture element
+ *
+ * @param filename - The image filename from Storyblok
+ * @param originalWidth - Original width of the image
+ * @param originalHeight - Original height of the image
+ * @param imageFocus - Optional focus point for image cropping
+ * @param customBreakpoints - Optional custom breakpoints to override defaults
+ * @returns Array of image sources with srcSet and media queries
+ */
+export const getImageSources = (
+  filename: string,
+  originalWidth: number,
+  originalHeight: number,
+  imageFocus?: string,
+  customBreakpoints?: ResponsiveBreakpoint[],
+): ImageSource[] => {
+  const sources: ImageSource[] = [];
+  const breakpoints = customBreakpoints || defaultResponsiveBreakpoints;
+
+  // If the original image width is < 2000px, find out what breakpoint range it falls into
+  const largestBp = breakpoints.find(bp => originalWidth >= bp.minWidth && originalWidth < bp.cropWidth);
+
+  // If we found an appropriate breakpoint, insert the original image at that breakpoint
+  // For example, if the original image is 1100px, it will be used for the min-width: 992px breakpoint
+  if (largestBp) {
+    sources.push({
+      srcSet: getProcessedImage(filename, '', imageFocus), // Original size
+      media: `(min-width: ${largestBp.minWidth}px)`,
+      width: originalWidth,
+      height: originalHeight,
+    });
+  }
+
+  // Add all smaller sizes that are relevant
+  breakpoints
+    // First pass: always include the mobile size, and keep all the breakpoints with minWidth < the original image width
+    .filter(bp => bp.cropWidth < originalWidth || bp.cropWidth === 460)
+    // If the original image is wider than 2000px (no largestBp assigned), keep all the breakpoints from the first pass
+    // Otherwise, keep only the breakpoints that are smaller than the largestBp
+    .filter(bp => !largestBp || bp.minWidth < largestBp.minWidth)
+    .forEach(bp => {
+      const cropSize = `${bp.cropWidth}x0`;
+
+      sources.push({
+        srcSet: getProcessedImage(filename, cropSize, imageFocus),
+        // The smaller source uses max-width while the larger uses min-width for the media attribute
+        media: bp.minWidth > 0 ? `(min-width: ${bp.minWidth}px)` : `(max-width: ${bp.cropWidth}px)`,
+        width: bp.cropWidth,
+        height: Math.round(bp.cropWidth * (originalHeight / originalWidth)), // Maintain aspect ratio
+      });
+    });
+
+  return sources;
+};