Merge branch 'bose/2190' into staging

sanityv3/schemas/objects/imageWithAltAndCaption.tsx

@@ -1,4 +1,5 @@
 import type { ImageWithAlt } from './imageWithAlt'
+import type { Rule } from 'sanity'
 
 export type ImageWithAltAndCaption = {
   _type: 'imageWithAltAndCaption'

web/core/Carousel/Carousel.tsx

@@ -19,6 +19,7 @@ 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'
@@ -74,6 +75,8 @@ export const Carousel = forwardRef<HTMLElement, CarouselProps>(function Carousel
   let TRANSLATE_X_AMOUNT = TRANSLATE_X_AMOUNT_SM
   const isMedium = useMediaQuery(`(min-width: 768px)`)
   const isLarge = useMediaQuery(`(min-width: 1024px)`)
+  const [scrollPosition, setScrollPosition] = useState<'start' | 'middle' | 'end'>('start')
+
   if (isMedium) {
     TRANSLATE_X_AMOUNT = TRANSLATE_X_AMOUNT_MD
   }
@@ -108,6 +111,14 @@ export const Carousel = forwardRef<HTMLElement, CarouselProps>(function Carousel
         left: -calculatedOffset,
         behavior: prefersReducedMotion ? 'auto' : 'smooth',
       })
+      const calculatedYPos = Math.abs(sliderRef?.current.scrollLeft - calculatedOffset)
+      const isAtStart = calculatedYPos <= 0 + itemWidth / 2
+      if (scrollPosition === 'end') {
+        setScrollPosition('middle')
+      }
+      if (isAtStart) {
+        setScrollPosition('start')
+      }
     }
   }
 
@@ -125,6 +136,15 @@ export const Carousel = forwardRef<HTMLElement, CarouselProps>(function Carousel
         left: calculatedOffset,
         behavior: 'smooth',
       })
+      const calculatedYPos = Math.abs(sliderRef?.current.scrollLeft + calculatedOffset)
+      const maxW = sliderRef?.current.scrollWidth - sliderRef?.current.clientWidth
+      const isAtEnd = calculatedYPos >= maxW - itemWidth / 2
+      if (scrollPosition === 'start') {
+        setScrollPosition('middle')
+      }
+      if (isAtEnd) {
+        setScrollPosition('end')
+      }
     }
   }
 
@@ -199,7 +219,7 @@ export const Carousel = forwardRef<HTMLElement, CarouselProps>(function Carousel
   }
 
   const listVariantClassName = {
-    video: 'flex gap-3 lg:gap-12 w-full h-full overflow-y-hidden',
+    video: 'flex gap-3 lg:gap-12 w-full h-full overflow-y-hidden no-scrollbar',
     image: `${
       displayMode === 'single'
         ? 'grid transition-transform ease-scroll delay-0 duration-[800ms]'
@@ -310,9 +330,10 @@ export const Carousel = forwardRef<HTMLElement, CarouselProps>(function Carousel
         )}
         <div className="flex gap-3 items-center">
           <MediaButton
-            title={`Go to slide `}
+            title={`Go to previous`}
             aria-controls={carouselItemsId}
             mode="previous"
+            disabled={displayMode === 'scroll' && scrollPosition === 'start'}
             onClick={() => {
               if (variant === 'image' && displayMode === 'single') {
                 loopSlidePrev()
@@ -329,6 +350,7 @@ export const Carousel = forwardRef<HTMLElement, CarouselProps>(function Carousel
             title={`Go to next`}
             mode="next"
             aria-controls={carouselItemsId}
+            disabled={displayMode === 'scroll' && scrollPosition === 'end'}
             onClick={() => {
               if (variant === 'image' && displayMode === 'single') {
                 loopSlideNext()

web/core/MediaButton/MediaButton.tsx

@@ -53,7 +53,10 @@ export const MediaButton = forwardRef<HTMLButtonElement, ButtonProps>(
           focus-visible:outline-slate-blue-95
           dark:hover:bg-white-100
           dark:hover:border-white-100
-          dark:focus-visible:outline-white-100`
+          dark:focus-visible:outline-white-100
+          disabled:border-grey-40
+          dark:disabled:border-white-100/40
+          disabled:pointer-events-none`
       }
     }
     const getIconVariantClassNames = () => {
@@ -64,7 +67,7 @@ export const MediaButton = forwardRef<HTMLButtonElement, ButtonProps>(
           hover:bg-black-100
           text-white-100`
         default:
-          return `size-10 dark:text-white-100 dark:group-hover/mediabutton:text-slate-80`
+          return `size-10 dark:text-white-100 dark:group-hover/mediabutton:text-slate-80 group-disabled/mediabutton:text-grey-40`
       }
     }
 

web/pageComponents/topicPages/promotions/pastEvents/PastEventsListItem.tsx

@@ -5,7 +5,7 @@ import { twMerge } from 'tailwind-merge'
 import { getEventDates } from '../../../../common/helpers/dateUtilities'
 import { toPlainText } from '@portabletext/react'
 import { PortableTextBlock } from '@portabletext/types'
-import { useIntl } from 'react-intl'
+import { FormattedDateParts, useIntl } from 'react-intl'
 import { BaseLink } from '@core/Link'
 import Blocks from '../../../../pageComponents/shared/portableText/Blocks'
 import FormattedDateTime from '@core/FormattedDateTime/FormattedDateTime'
@@ -38,25 +38,44 @@ const PastEventsListItem = forwardRef<HTMLAnchorElement, PastEventsListItemProps
       className={twMerge(
         `h-full
         w-full
-        flex
+        grid
+        grid-cols-[18%_auto]
         flex-col
-        pt-6
-        pb-10
         dark:text-white-100
         group
       `,
         className,
       )}
       {...rest}
     >
-      {start && <FormattedDateTime date={start} className="uppercase pb-3" timeClassName="text-xs" hideIcon />}
-      <Heading
-        value={title}
-        as={hasSectionTitle ? 'h3' : 'h2'}
-        variant="h5"
-        className="text-base pb-4 group-hover:underline"
-      />
-      {ingress && <Blocks value={ingress} className="text-xs max-w-prose text-pretty" />}
+      <div className="w-full h-full aspect-square bg-norwegian-woods-100 text-white-100 flex justify-center items-center p-2">
+        {/*   {start && <FormattedDateTime date={start} className="uppercase pb-3" timeClassName="text-sm" hideIcon />} */}
+        {start && (
+          <FormattedDateParts value={start} year="numeric" month="short" day="2-digit">
+            {(parts) => {
+              return (
+                <div className="flex flex-col gap-4 justify-start items-center">
+                  <span className="text-md">{`${parts[0].value} ${parts[2].value}`}</span>
+                  {/*                   <div className="flex flex-col">
+                    <span className="text-lg">{parts[0].value}</span>
+                    <span className="text-base">{parts[2].value}</span>
+                  </div> */}
+                  <span className="text-sm">{parts[4].value}</span>
+                </div>
+              )
+            }}
+          </FormattedDateParts>
+        )}
+      </div>
+      <div className="px-6 py-6">
+        <Heading
+          value={title}
+          as={hasSectionTitle ? 'h3' : 'h2'}
+          variant="h5"
+          className="text-base pb-4 group-hover:underline"
+        />
+        {ingress && <Blocks value={ingress} className="text-xs max-w-prose text-pretty" />}
+      </div>
     </BaseLink>
   )
 })

web/styles/tailwind.css

@@ -175,6 +175,16 @@
     .transparent-scrollbar::-webkit-scrollbar-thumb {
       @apply bg-grey-40 hover:bg-grey-70 dark:bg-white-100 dark:hover:bg-white-100/70 rounded-lg;
     }
+    /* Hide scrollbar for Chrome, Safari and Opera */
+    .no-scrollbar::-webkit-scrollbar {
+      display: none;
+    }
+  }
+
+  /* Hide scrollbar for IE, Edge and Firefox */
+  .no-scrollbar {
+    -ms-overflow-style: none; /* IE and Edge */
+    scrollbar-width: none; /* Firefox */
   }
   .modal-enter {
     opacity: 0;