Merge branch 'bose/2460' into staging

equinor · Aug 16, 2024 · 5a832d4 · 5a832d4
2 parents 6a9a556 + 80e774f
commit 5a832d4
Show file tree

Hide file tree

Showing 7 changed files with 468 additions and 4,770 deletions.
diff --git a/sanityv3/schemas/objects/promotion/promoteEvents.tsx b/sanityv3/schemas/objects/promotion/promoteEvents.tsx
@@ -4,6 +4,8 @@ import { Flags } from '../../../src/lib/datasetHelpers'
 import routes from '../../routes'
 import { EventPromotionPreview } from '../../components/EventPromotion'
 import { EventPromotionInput } from '../../components/EventPromotion/EventPromotionInput'
+import { EventPromotionPreview } from '../../components/EventPromotion'
+import { EventPromotionInput } from '../../components/EventPromotion/EventPromotionInput'
 
 export type EventPromotion = {
   _key: string

diff --git a/web/core/Carousel/Carousel.tsx b/web/core/Carousel/Carousel.tsx
@@ -19,7 +19,6 @@ import { PortableTextBlock } from '@portabletext/types'
 import { toPlainText } from '@portabletext/react'
 import { useMediaQuery } from '../../lib/hooks/useMediaQuery'
 import { CarouselEventItem } from './CarouselEventItem'
-import { ScrollbarEvents } from 'swiper/types'
 
 export type DisplayModes = 'single' | 'scroll'
 export type Layouts = 'full' | 'default'
@@ -49,7 +48,6 @@ export const Carousel = forwardRef<HTMLElement, CarouselProps>(function Carousel
     items,
     variant = 'video',
     displayMode = 'scroll',
-    //layout = 'full',
     autoRotation = false,
     labelledbyId,
     title,
@@ -60,14 +58,13 @@ export const Carousel = forwardRef<HTMLElement, CarouselProps>(function Carousel
   ref,
 ) {
   const CarouselTag = hasSectionTitle ? (`div` as ElementType) : (`section` as ElementType)
-  //TODO translations
   const carouselItemsId = useId()
   const controlsId = useId()
   const sliderRef = useRef<HTMLUListElement>(null)
   const timeoutRef = useRef<NodeJS.Timeout | null>(null)
   //a prefers-reduced-motion user setting must always override autoplay
   const prefersReducedMotion = usePrefersReducedMotion()
-  const internalAutoRotation = prefersReducedMotion ? false : autoRotation
+  const internalAutoRotation = prefersReducedMotion ? false : autoRotation && displayMode === 'single'
   const [currentIndex, setCurrentIndex] = useState(0)
   const [currentXPosition, setCurrentXPosition] = useState(0)
   const [currentListTranslateX, setCurrentListTranslateX] = useState(0)
@@ -223,7 +220,7 @@ export const Carousel = forwardRef<HTMLElement, CarouselProps>(function Carousel
     image: `${
       displayMode === 'single'
         ? 'grid transition-transform ease-scroll delay-0 duration-[800ms]'
-        : 'flex gap-3 md:gap-8 lg:gap-12 w-full h-full overflow-y-hidden'
+        : 'flex gap-3 md:gap-8 w-full h-full overflow-y-hidden no-scrollbar'
     }`,
     event: `flex gap-3 lg:gap-6 w-full h-full overflow-y-hidden no-scrollbar`,
   }
@@ -258,10 +255,8 @@ export const Carousel = forwardRef<HTMLElement, CarouselProps>(function Carousel
                 style: {
                   transform: `translate3d(${itemsXPositions[i]}px, 0px, 0px)`,
                 },
+                onFocus: () => cancelTimeout(),
               })}
-            onFocus={() => {
-              cancelTimeout()
-            }}
           />
         )
       case 'event':
@@ -369,8 +364,7 @@ export const Carousel = forwardRef<HTMLElement, CarouselProps>(function Carousel
         ref={sliderRef}
         id={carouselItemsId}
         className={envisTwMerge(
-          `transparent-scrollbar
-          transition-all
+          `transition-all
           duration-300
           m-auto
           ${variant === 'event' ? 'p-[2px]' : ''}

diff --git a/web/core/Carousel/CarouselImageItem.tsx b/web/core/Carousel/CarouselImageItem.tsx
@@ -26,17 +26,23 @@ export const CarouselImageItem = forwardRef<HTMLLIElement, CarouselImageItemProp
       aria-hidden={!active}
       aria-roledescription="slide"
       className={envisTwMerge(
-        `aspect-4/5
+        `
+        aspect-4/5
         md:aspect-video
         relative
         h-full
-        ${!active && displayMode === 'single' ? 'opacity-30' : ''}
+        ${
+          displayMode === 'single'
+            ? `
         transition-opacity
         duration-1000
-        ease-[ease]
+        ease-[ease]`
+            : 'shrink-0'
+        }
+        ${!active && displayMode === 'single' ? 'opacity-30' : ''}
         ${
           displayMode === 'scroll'
-            ? 'snap-center scroll-ml-6 shrink-0'
+            ? 'w-[80%] snap-center scroll-ml-6'
             : 'w-[var(--image-carousel-card-w-sm)] md:w-[var(--image-carousel-card-w-md)] lg:w-[var(--image-carousel-card-w-lg)] ms-2 me-2 col-start-1 col-end-1 row-start-1 row-end-1'
         }
         `,

diff --git a/web/pageComponents/shared/VideoPlayer.tsx b/web/pageComponents/shared/VideoPlayer.tsx
@@ -13,9 +13,9 @@ import IngressText from './portableText/IngressText'
 import { VideoJS } from '@components/VideoJsPlayer'
 import { twMerge } from 'tailwind-merge'
 import { Heading } from '@core/Typography'
+import TranscriptAndActions from './TranscriptAndActions'
 import { PortableTextBlock } from '@portabletext/types'
 import Blocks from './portableText/Blocks'
-import TranscriptAndActions from './TranscriptAndActions'
 
 const DynamicVideoJsComponent = dynamic<React.ComponentProps<typeof VideoJS>>(
   () => import('../../components/src/VideoJsPlayer').then((mod) => mod.VideoJS),