Merged in feat/SW-1790-mobile-city-map (pull request #1497)

Feat/SW-1790 : Mobile city destination map

Approved-by: Christian Andolf
Approved-by: Fredrik Thorsson

apps/scandic-web/components/Carousel/CarouselContent.tsx

@@ -1,6 +1,7 @@
 "use client"
 
 import { cx } from "class-variance-authority"
+import { useEffect, useState } from "react"
 
 import { useCarousel } from "./CarouselContext"
 
@@ -11,11 +12,21 @@ export function CarouselContent({
   children,
   ...props
 }: React.HTMLAttributes<HTMLDivElement>) {
-  const { carouselRef } = useCarousel()
+  const { carouselRef, canScrollNext, canScrollPrev } = useCarousel()
+  const [isOneItem, setIsOneItem] = useState(false)
+
+  useEffect(() => {
+    setIsOneItem(!canScrollPrev() && !canScrollNext())
+  }, [canScrollPrev, canScrollNext])
 
   return (
     <div ref={carouselRef} className={styles.viewport}>
-      <div className={cx(styles.container, className)} {...props}>
+      <div
+        className={cx(styles.container, className, {
+          [styles.centerContent]: isOneItem,
+        })}
+        {...props}
+      >
         {children}
       </div>
     </div>

apps/scandic-web/components/Carousel/carousel.module.css

@@ -13,6 +13,10 @@
   gap: var(--Spacing-x2);
 }
 
+.centerContent {
+  justify-content: center;
+}
+
 .item {
   min-width: 0;
 }

apps/scandic-web/components/Carousel/index.tsx

@@ -20,17 +20,19 @@ function Carousel({
   plugins,
   className,
   children,
+  scrollToIdx = 0,
+  align = "start",
 }: CarouselProps) {
   const [carouselRef, api] = useEmblaCarousel(
     {
       containScroll: "trimSnaps",
-      align: "start",
+      align,
       axis: "x",
       ...opts,
     },
     plugins
   )
-  const [selectedIndex, setSelectedIndex] = useState(0)
+  const [selectedIndex, setSelectedIndex] = useState(scrollToIdx)
 
   const onSelect = useCallback((api: CarouselApi) => {
     if (!api) return
@@ -62,7 +64,6 @@ function Carousel({
 
   useEffect(() => {
     if (!api) return
-
     onSelect(api)
     api.on("reInit", onSelect)
     api.on("select", onSelect)
@@ -72,6 +73,11 @@ function Carousel({
     }
   }, [api, onSelect])
 
+  useEffect(() => {
+    if (!api || scrollToIdx === -1) return
+    api.scrollTo(scrollToIdx)
+  }, [api, scrollToIdx])
+
   return (
     <CarouselContext.Provider
       value={{

apps/scandic-web/components/Carousel/types.ts

@@ -16,6 +16,9 @@ export interface CarouselProps extends PropsWithChildren {
   plugins?: CarouselPlugin
   setApi?: (api: CarouselApi) => void
   className?: string
+  handleScrollSelected?: (idx: number) => void
+  scrollToIdx?: number
+  align?: "start" | "center"
 }
 
 export interface CarouselContextProps extends Omit<CarouselProps, "className"> {