Merge branch 'bose/3876' into staging

Author: BorghildSelle

studio/schemas/objects/ImageWithRichText.tsx

@@ -46,9 +46,12 @@ export default {
       type: 'array',
       of: [blockContentType],
       validation: (Rule: Rule) =>
-        Rule.custom((value: PortableTextBlock[]) => {
-          return validateCharCounterEditor(value, 600, true)
-        }).error(),
+        Rule.required()
+          .min(1)
+          .custom((value: PortableTextBlock[]) => {
+            return validateCharCounterEditor(value, 600, true)
+          })
+          .error(),
     },
     singleItemArray({
       name: 'action',

web/core/Carousel/Carousel.tsx

@@ -301,11 +301,18 @@ export const Carousel = forwardRef<HTMLElement, CarouselProps>(
     }, [initialPositions])
 
     const getTranslatedItemCountLabel = (item: number) => {
-      return intl('carouselItemCountLabel', {
+      let label = `Item ${item} of ${items.length}`
+      const translatedLabel = intl('carouselItemCountLabel', {
         x: item,
         carouselLength: items.length,
       }).toString()
+      if (translatedLabel && translatedLabel.length > 0) {
+        label = translatedLabel
+      }
+
+      return label
     }
+
     const cancelTimeout = () => {
       timeoutRef.current && clearTimeout(timeoutRef.current)
     }
@@ -431,6 +438,7 @@ export const Carousel = forwardRef<HTMLElement, CarouselProps>(
       )
     }
     const getCarouselItem = (item: CarouselItemTypes, i: number) => {
+      console.log('getCarouselItem', item, i)
       switch (variant) {
         case 'video':
           return getVideoVariantBody(item as VideoPlayerCarouselItem, i)

web/core/Carousel/CarouselImageItem.tsx

@@ -62,7 +62,9 @@ export const CarouselImageItem = forwardRef<
     className = '',
     action,
     wasUserPress = false,
-    ...rest
+    ['aria-label']: ariaLabel,
+    style,
+    onFocus,
   },
   ref,
 ) {
@@ -71,10 +73,6 @@ export const CarouselImageItem = forwardRef<
     () => mergeRefs<HTMLLIElement>(itemRef, ref),
     [ref],
   )
-  const isImageWithRichTextCaption = useMemo(
-    () => type === 'imageWithRichTextBelow' && !!caption,
-    [caption, type],
-  )
   const isJustImage =
     type === 'imageWithAltAndCaption' && !caption && !attribution
   const isImageWithSimpleCaption =
@@ -181,16 +179,18 @@ export const CarouselImageItem = forwardRef<
         />
       )
     }
-    if (isImageWithRichTextCaption && image) {
+    if (type === 'imageWithRichTextBelow' && image) {
       return (
         <figure className='flex h-full w-full flex-col'>
-          <Image
-            grid='sm'
-            image={image}
-            fill
-            className={`min-h-single-carousel-card-h-sm w-full rounded-card md:min-h-single-carousel-card-h-md lg:min-h-single-carousel-card-h-lg`}
-            imageClassName='aspect-4/3 rounded-card md:aspect-video'
-          />
+          <div className='relative aspect-video w-full shrink-0'>
+            <Image
+              grid='sm'
+              image={image}
+              fill
+              className='absolute inset-0'
+              imageClassName='rounded-t-card object-cover'
+            />
+          </div>
           <figcaption
             className={twMerge(
               'h-fit max-w-text p-4 lg:px-8 lg:py-6',
@@ -237,15 +237,17 @@ export const CarouselImageItem = forwardRef<
 
   return (
     <li
-      {...rest}
       ref={combinedItemRef}
+      aria-label={ariaLabel}
       {...(displayMode === 'single' && {
         'aria-current': active,
         tabIndex: active ? 0 : -1,
       })}
       {...(displayMode === 'scroll' && {
         tabIndex: 0,
       })}
+      style={style}
+      onFocus={onFocus}
       className={twMerge(
         `relative mt-1 focus:outline-hidden focus-visible:outline-dashed focus-visible:outline-2 focus-visible:outline-grey-50 focus-visible:outline-offset-2 dark:focus-visible:outline-white-100`,
         displayMode === 'single' &&

web/sanity/lib/utils.ts

@@ -118,7 +118,7 @@ export const resolveImage = (props: ResolveImageProps) => {
   }
   //Crops the image to fill the specified width (w) and height (h).
   url = urlForImage(image)?.width(width).height(height).fit('crop').url()
-
+  console.log('resolveImage url', url)
   return { url, width, height }
 }