WIP: Move captionposition logic #2610

equinor · Jan 28, 2025 · 160c62b · 160c62b
1 parent d54b21d
commit 160c62b
Show file tree

Hide file tree

Showing 5 changed files with 13 additions and 10 deletions.
diff --git a/sanityv3/schemas/objects/carouselImage.tsx b/sanityv3/schemas/objects/carouselImage.tsx
@@ -33,13 +33,6 @@ export default {
       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,
-  },
     {
       name: 'action',
       title: 'Link',

diff --git a/sanityv3/schemas/objects/imageCarousel.tsx b/sanityv3/schemas/objects/imageCarousel.tsx
@@ -75,6 +75,13 @@ export default {
            { type: 'carouselImage' }],
       validation: (Rule: Rule) => Rule.required().min(2),
     },
+    {
+      type: 'boolean',
+      name: 'captionPositionUnderImage',
+      title: 'Position caption and credit under image',
+      description: 'Toggle to display caption and credit under the images.',
+      initialValue: false,
+    },
     {
       type: 'number',
       name: 'delay',

diff --git a/web/core/Carousel/Carousel.tsx b/web/core/Carousel/Carousel.tsx
@@ -51,6 +51,7 @@ type CarouselProps = {
   autoRotation?: boolean
   hasSectionTitle?: boolean
   title?: PortableTextBlock[]
+  captionPositionUnderImage?: boolean
 } & Omit<HTMLAttributes<HTMLDivElement>, 'title'>
 
 const TRANSLATE_X_AMOUNT_LG = 1000
@@ -68,7 +69,7 @@ export const Carousel = forwardRef<HTMLElement, CarouselProps>(function Carousel
     className = '',
     listClassName = '',
     hasSectionTitle = false,
-  },
+    captionPositionUnderImage},
   ref,
 ) {
   const CarouselTag = hasSectionTitle ? (`div` as ElementType) : (`section` as ElementType)
@@ -266,6 +267,7 @@ export const Carousel = forwardRef<HTMLElement, CarouselProps>(function Carousel
             displayMode={displayMode}
             aria-label={ariaLabel}
             active={i === currentIndex}
+            captionPositionUnderImage={captionPositionUnderImage} 
             {...(variant === 'image' &&
               displayMode === 'single' && {
                 style: {

diff --git a/web/sections/ImageCarousel/ImageCarousel.tsx b/web/sections/ImageCarousel/ImageCarousel.tsx
@@ -15,7 +15,7 @@ const ImageCarousel = forwardRef<HTMLUListElement, ImageCarouselProps>(function
   { anchor, data, className },
   ref,
 ) {
-  const { title, hideTitle, ingress, items, designOptions, options } = data
+  const { title, hideTitle, ingress, items, designOptions, options, captionPositionUnderImage } = data
   const { background } = designOptions
   const headingId = useId()
 
@@ -43,6 +43,7 @@ const ImageCarousel = forwardRef<HTMLUListElement, ImageCarouselProps>(function
         labelledbyId={title && !hideTitle ? headingId : undefined}
         title={title}
         autoRotation={options?.autoplay}
+        captionPositionUnderImage={captionPositionUnderImage}
       />
     </BackgroundContainer>
   )

diff --git a/web/types/imageTypes.ts b/web/types/imageTypes.ts
@@ -56,6 +56,7 @@ export type ImageCarouselData = {
   ingress?: PortableTextBlock[]
   hideTitle?: boolean
   items: ImageCarouselItem[]
+  captionPositionUnderImage?: boolean
   options: {
     autoplay: boolean
     delay: number
@@ -65,6 +66,5 @@ export type ImageCarouselData = {
 
 export type ImageCarouselItem = {
   id: string
-  captionPositionUnderImage?: boolean
   action?: any
 } & ImageWithCaptionData