🔧 WIP: introduce text under image #2611

equinor · Nov 19, 2024 · 6ead089 · 6ead089
1 parent 1f9b518
commit 6ead089
Show file tree

Hide file tree

Showing 7 changed files with 131 additions and 56 deletions.
diff --git a/sanityv3/schemas/objects/imageCarousel.tsx b/sanityv3/schemas/objects/imageCarousel.tsx
@@ -5,6 +5,7 @@ import { library_image } from '@equinor/eds-icons'
 import blocksToText from '../../helpers/blocksToText'
 import type { Rule } from 'sanity'
 import { validateCharCounterEditor } from '../validations/validateCharCounterEditor'
+import { getImageWithAltAndCaptionFields } from './imageWithAltAndCaption'
 
 const titleContentType = configureTitleBlockContent()
 const ingressBlockContentType = configureBlockContent({
@@ -56,7 +57,7 @@ export default {
       type: 'boolean',
       name: 'hideTitle',
       title: 'Hide title',
-      description: 'Hides the title, but screen readers will read title of carousel',
+      description: 'Hides the title, but screen readers will read the title of the carousel.',
     },
     {
       name: 'ingress',
@@ -71,13 +72,34 @@ export default {
       name: 'items',
       description: 'Add images for the carousel',
       title: 'Carousel items',
-      of: [{ type: 'imageWithAltAndCaption' }],
+      of: [
+        {
+          type: 'object',
+          name: 'imageWithAltAndCaption',
+          title: 'Image with Alt and Caption',
+          fields: getImageWithAltAndCaptionFields(true),
+          preview: {
+            select: {
+              imageUrl: 'image.asset.url',
+              alt: 'image.alt',
+              caption: 'caption',
+            },
+            prepare({ imageUrl, caption, alt }: { imageUrl: string; alt: string; caption: string }) {
+              return {
+                title: alt || 'No alt text',
+                subtitle: caption || 'No caption provided',
+                media: imageUrl ? <img src={imageUrl} alt={alt || ''} style={{ height: '100%' }} /> : null,
+              }
+            },
+          },
+        },
+      ],
       validation: (Rule: Rule) => Rule.required().min(2),
     },
     {
       type: 'number',
       name: 'delay',
-      title: 'Delay( Not in use anymore )',
+      title: 'Delay (Not in use anymore)',
       description: 'Time in seconds that an image should be visible for before transitioning to the next.',
       initialValue: 3,
       fieldset: 'carouselOptions',
@@ -116,4 +138,4 @@ export default {
       }
     },
   },
-}
+}
diff --git a/sanityv3/schemas/objects/imageWithAltAndCaption.tsx b/sanityv3/schemas/objects/imageWithAltAndCaption.tsx
@@ -7,42 +7,53 @@ export type ImageWithAltAndCaption = {
   attribution?: string
 }
 
+export const getImageWithAltAndCaptionFields = (showCaptionToggle?: boolean) => [
+  {
+    name: 'image',
+    title: 'Image with alt',
+    type: 'imageWithAlt',
+  },
+  {
+    name: 'caption',
+    title: 'Image caption',
+    type: 'string',
+  },
+  {
+    name: 'attribution',
+    title: 'Credit',
+    type: 'string',
+  },
+  {
+    type: 'boolean',
+    name: 'captionPositionUnderImage',
+    title: 'Position caption and credit under image',
+    description: 'Toggle to display caption and credit under the image.',
+    initialValue: false,
+    hidden: !showCaptionToggle,
+  },
+]
+
 export default {
   name: 'imageWithAltAndCaption',
   title: 'Image',
   type: 'object',
   options: {
     collapsed: false,
   },
-  fields: [
-    {
-      name: 'image',
-      title: 'Image with alt',
-      type: 'imageWithAlt',
-    },
-    {
-      name: 'caption',
-      title: 'Image caption',
-      type: 'string',
-    },
-    {
-      name: 'attribution',
-      title: 'Credit',
-      type: 'string',
-    },
-  ],
+  fields: getImageWithAltAndCaptionFields(),
   preview: {
     select: {
       imageUrl: 'image.asset.url',
       alt: 'image.alt',
       caption: 'caption',
+      captionPositionUnderImage: 'captionPositionUnderImage',
     },
     prepare({ imageUrl, caption, alt }: { imageUrl: string; alt: string; caption: string }) {
       return {
-        title: alt,
-        subtitle: caption,
-        media: <img src={imageUrl} alt={alt} style={{ height: '100%' }} />,
+        title: alt || 'No alt text',
+        subtitle: caption || 'No caption provided',
+        media: imageUrl ? <img src={imageUrl} alt={alt || ''} style={{ height: '100%' }} /> : null,
       }
     },
   },
-}
+}
diff --git a/web/core/Carousel/Carousel.tsx b/web/core/Carousel/Carousel.tsx
@@ -50,6 +50,7 @@ type CarouselProps = {
   autoRotation?: boolean
   hasSectionTitle?: boolean
   title?: PortableTextBlock[]
+  captionPositionUnderImage?: boolean
 } & Omit<HTMLAttributes<HTMLDivElement>, 'title'>
 
 const TRANSLATE_X_AMOUNT_LG = 1000
@@ -245,9 +246,9 @@ export const Carousel = forwardRef<HTMLElement, CarouselProps>(function Carousel
   }
 
   const getCarouselItem = (item: CarouselItemTypes, i: number) => {
-    const ariaLabel = `${i + 1} of ${items?.length}`
+    const ariaLabel = `${i + 1} of ${items?.length}`;
     switch (variant) {
-      case 'video':
+      case 'video': {
         return (
           <CarouselVideoItem
             key={item.id}
@@ -256,25 +257,49 @@ export const Carousel = forwardRef<HTMLElement, CarouselProps>(function Carousel
             aria-label={ariaLabel}
             active={i === currentIndex}
           />
-        )
-      case 'image':
+        );
+      }
+      case 'image': {
+        const { caption, attribution, captionPositionUnderImage } = item as ImageCarouselItem;
         return (
-          <CarouselImageItem
-            key={item.id}
-            {...(item as ImageCarouselItem)}
-            displayMode={displayMode}
-            aria-label={ariaLabel}
-            active={i === currentIndex}
-            {...(variant === 'image' &&
-              displayMode === 'single' && {
-                style: {
-                  transform: `translate3d(${itemsXPositions[i]}px, 0px, 0px)`,
-                },
-                onFocus: () => cancelTimeout(),
-              })}
-          />
-        )
-      case 'event':
+          <>
+            <CarouselImageItem
+              key={item.id}
+              {...(item as ImageCarouselItem)}
+              displayMode={displayMode}
+              aria-label={ariaLabel}
+              active={i === currentIndex}
+              {...(variant === 'image' &&
+                displayMode === 'single' && {
+                  style: {
+                    transform: `translate3d(${itemsXPositions[i]}px, 0px, 0px)`,
+                  },
+                  onFocus: () => cancelTimeout(),
+                })}
+            />
+            {captionPositionUnderImage && (caption || attribution) ? (
+              <figcaption
+                className={envisTwMerge(
+                  `${i === currentIndex ? 'block' : 'hidden'} `,
+                  ' bottom-0',
+                )}
+              >
+                <div
+                  className={`bg-spruce-wood-70/75 text-slate-80 px-8 pt-6 w-fit flex flex-col max-w-xl ${
+                    attribution ? 'pb-4' : 'pb-6'
+                  }`}
+                >
+                  {caption && <span className={`text-sm ${attribution ? 'pb-3' : ''}`}>{caption}</span>}
+                  {attribution && <span className="text-xs">{attribution}</span>}
+                </div>
+              </figcaption>
+            ) : (
+              ''
+            )}
+          </>
+        );
+      }
+      case 'event': {
         return (
           <CarouselEventItem
             key={item.id}
@@ -284,8 +309,9 @@ export const Carousel = forwardRef<HTMLElement, CarouselProps>(function Carousel
             active={i === currentIndex}
             hasSectionTitle={hasSectionTitle}
           />
-        )
-      case 'keyNumber':
+        );
+      }
+      case 'keyNumber': {
         return (
           <CarouselKeyNumberItem
             key={item.id}
@@ -295,8 +321,9 @@ export const Carousel = forwardRef<HTMLElement, CarouselProps>(function Carousel
             active={i === currentIndex}
             hasSectionTitle={hasSectionTitle}
           />
-        )
-      case 'iframe':
+        );
+      }
+      case 'iframe': {
         return (
           <CarouselIframeItem
             className="pt-lg"
@@ -313,9 +340,13 @@ export const Carousel = forwardRef<HTMLElement, CarouselProps>(function Carousel
             cookiePolicy={(item as IFrameCarouselItemData).cookiePolicy}
             aspectRatio={(item as IFrameCarouselItemData).aspectRatio}
           />
-        )
+        );
+      }
+      default: {
+        return null;
+      }
     }
-  }
+  };
 
   return (
     <CarouselTag

diff --git a/web/core/Carousel/CarouselImageItem.tsx b/web/core/Carousel/CarouselImageItem.tsx
@@ -12,12 +12,14 @@ type CarouselImageItemProps = {
   caption?: string
   attribution?: string
   active?: boolean
+  captionPositionUnderImage?: boolean
 } & HTMLAttributes<HTMLLIElement>
 
 export const CarouselImageItem = forwardRef<HTMLLIElement, CarouselImageItemProps>(function CarouselImageItem(
-  { active = false, image, caption, attribution, displayMode = 'single', className = '', ...rest },
+  { active = false, image, caption, attribution, displayMode = 'single', className = '', captionPositionUnderImage,  ...rest },
   ref,
 ) {
+  console.log('CarouselImageItem', {caption, captionPositionUnderImage })
   return (
     <li
       {...rest}
@@ -49,7 +51,7 @@ export const CarouselImageItem = forwardRef<HTMLLIElement, CarouselImageItemProp
         className,
       )}
     >
-      {caption || attribution ? (
+      {!captionPositionUnderImage && (caption || attribution) ? (
         <figure className="relative w-full h-full">
           <Image maxWidth={1420} image={image as ImageWithAlt} fill className="rounded-md" />
           <figcaption

diff --git a/web/lib/queries/common/imageCarouselFields.ts b/web/lib/queries/common/imageCarouselFields.ts
@@ -8,7 +8,8 @@ export const imageCarouselFields = /* groq */ `
     hideTitle,
     items[] {
     "id": _key,
-    ...
+    ...,
+    captionPositionUnderImage,
     },
     "options": {
       autoplay,

diff --git a/web/sections/ImageCarousel/ImageCarousel.tsx b/web/sections/ImageCarousel/ImageCarousel.tsx
@@ -19,6 +19,9 @@ const ImageCarousel = forwardRef<HTMLUListElement, ImageCarouselProps>(function
   const { background } = designOptions
   const headingId = useId()
 
+
+  console.log('ImageCarousel', { items })
+
   return (
     <BackgroundContainer background={background} id={anchor} className={envisTwMerge(`pb-page-content`, className)}>
       {((title && !hideTitle) || ingress) && (
@@ -36,7 +39,9 @@ const ImageCarousel = forwardRef<HTMLUListElement, ImageCarouselProps>(function
       )}
       <Carousel
         ref={ref}
-        items={items}
+        items={items.map((item) => ({
+          ...item,
+        }))}
         displayMode={items?.length < 3 ? 'scroll' : 'single'}
         variant="image"
         hasSectionTitle={title && !hideTitle}
@@ -48,4 +53,4 @@ const ImageCarousel = forwardRef<HTMLUListElement, ImageCarouselProps>(function
   )
 })
 
-export default ImageCarousel
+export default ImageCarousel
diff --git a/web/types/imageTypes.ts b/web/types/imageTypes.ts
@@ -5,6 +5,7 @@ import { PortableTextBlock } from '@portabletext/types'
 export type CaptionData = {
   attribution?: string
   caption?: string
+  captionPositionUnderImage?: boolean
 }
 
 export type ImageWithAlt = {
@@ -22,6 +23,7 @@ export type ImageWithCaptionData = {
   _key?: string
   image: ImageWithAlt
   asset: SanityImageObject
+  captionPositionUnderImage?: boolean
 } & CaptionData
 
 export type ImageBackground = {
@@ -65,4 +67,5 @@ export type ImageCarouselData = {
 
 export type ImageCarouselItem = {
   id: string
+  captionPositionUnderImage?: boolean
 } & ImageWithCaptionData