fix(SW-2376): Vertically centered previous/next buttons inside carousel cards

Approved-by: Matilda Landström

apps/scandic-web/components/Blocks/CardGallery/cardGallery.module.css

@@ -5,7 +5,7 @@
 }
 
 .navigationButton {
-  top: 30%;
+  top: 125px; /* Content card image has a fixed height of 250px, this centers the button */
 }
 
 @media screen and (min-width: 768px) {

apps/scandic-web/components/Blocks/CarouselCards/carouselCards.module.css

@@ -1,3 +1,3 @@
 .navigationButton {
-  top: 25%;
+  top: 125px; /* Content card image has a fixed height of 250px, this centers the button */
 }

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

@@ -3,6 +3,7 @@
 import { cx } from "class-variance-authority"
 import { useIntl } from "react-intl"
 
+import { IconButton } from "@scandic-hotels/design-system/IconButton"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 
 import { useCarousel } from "./CarouselContext"
@@ -11,7 +12,7 @@ import styles from "./carousel.module.css"
 
 import type { CarouselButtonProps } from "./types"
 
-export function CarouselPrevious({ className, ...props }: CarouselButtonProps) {
+export function CarouselPrevious({ className }: CarouselButtonProps) {
   const { scrollPrev, canScrollPrev } = useCarousel()
 
   const intl = useIntl()
@@ -19,20 +20,22 @@ export function CarouselPrevious({ className, ...props }: CarouselButtonProps) {
   if (!canScrollPrev()) return null
 
   return (
-    <button
+    <span className={cx(styles.buttonWrapper, styles.previous, className)}>
-      className={cx(styles.button, styles.buttonPrev, className)}
+      <IconButton
-      onClick={scrollPrev}
+        theme="Inverted"
-      aria-label={intl.formatMessage({
+        style="Elevated"
-        defaultMessage: "Previous slide",
+        onPress={scrollPrev}
-      })}
+        aria-label={intl.formatMessage({
-      {...props}
+          defaultMessage: "Previous slide",
-    >
+        })}
-      <MaterialIcon color="Icon/Interactive/Default" icon="arrow_back" />
+      >
-    </button>
+        <MaterialIcon color="Icon/Interactive/Default" icon="arrow_back" />
+      </IconButton>
+    </span>
   )
 }
 
-export function CarouselNext({ className, ...props }: CarouselButtonProps) {
+export function CarouselNext({ className }: CarouselButtonProps) {
   const { scrollNext, canScrollNext } = useCarousel()
 
   const intl = useIntl()
@@ -40,15 +43,17 @@ export function CarouselNext({ className, ...props }: CarouselButtonProps) {
   if (!canScrollNext()) return null
 
   return (
-    <button
+    <span className={cx(styles.buttonWrapper, styles.next, className)}>
-      className={cx(styles.button, styles.buttonNext, className)}
+      <IconButton
-      onClick={scrollNext}
+        theme="Inverted"
-      aria-label={intl.formatMessage({
+        style="Elevated"
-        defaultMessage: "Next slide",
+        onPress={scrollNext}
-      })}
+        aria-label={intl.formatMessage({
-      {...props}
+          defaultMessage: "Next slide",
-    >
+        })}
-      <MaterialIcon color="Icon/Interactive/Default" icon="arrow_forward" />
+      >
-    </button>
+        <MaterialIcon color="Icon/Interactive/Default" icon="arrow_forward" />
+      </IconButton>
+    </span>
   )
 }

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

@@ -17,28 +17,20 @@
   min-width: 0;
 }
 
-.button {
+.buttonWrapper {
-  display: none;
-  align-items: center;
-  justify-content: center;
   position: absolute;
   top: 50%;
-  transform: translateY(-50%);
-  background: var(--Base-Surface-Primary-light-Normal);
-  box-shadow: 0px 0px 8px 1px rgba(0, 0, 0, 0.1);
-  border: none;
-  border-radius: 50%;
-  padding: var(--Spacing-x1);
-  cursor: pointer;
   z-index: 1;
-}
 
-.buttonPrev {
+  &.previous {
-  left: -20px;
+    left: 0;
-}
+    transform: translate(-50%, -50%);
+  }
 
-.buttonNext {
+  &.next {
-  right: -20px;
+    right: 0;
+    transform: translate(50%, -50%);
+  }
 }
 
 .dots {
@@ -61,17 +53,19 @@
   background: var(--UI-Text-Medium-contrast);
 }
 
-@media (min-width: 768px) {
+@media screen and (max-width: 767px) {
-  .container {
+  .buttonWrapper {
-    grid-auto-columns: calc(50% - var(--Spacing-x2) / 2);
+    display: none;
-  }
-
-  .button {
-    display: flex;
   }
 }
 
-@media (min-width: 1024px) {
+@media screen and (min-width: 768px) {
+  .container {
+    grid-auto-columns: calc(50% - var(--Spacing-x2) / 2);
+  }
+}
+
+@media screen and (min-width: 1024px) {
   .container {
     grid-auto-columns: calc(33.33% - var(--Spacing-x2) * 2 / 3);
   }

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

@@ -31,7 +31,6 @@ export interface CarouselContextProps extends Omit<CarouselProps, "className"> {
   selectedIndex: number
 }
 
-export interface CarouselButtonProps
+export interface CarouselButtonProps {
-  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   className?: string
 }

apps/scandic-web/components/ContentCard/contentCard.module.css

@@ -4,7 +4,8 @@
 
 .imageContainer {
   position: relative;
-  aspect-ratio: 16/9;
+  width: 100%;
+  height: 250px;
   border-radius: var(--Corner-radius-md);
   overflow: hidden;
   transition: border-radius 0.3s ease-in-out;
@@ -12,6 +13,9 @@
 
 .image {
   border-radius: var(--Corner-radius-md);
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
   transition:
     transform 0.3s ease-in-out,
     border-radius 0.3s ease-in-out;

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

@@ -23,7 +23,8 @@ export default function ContentCard({
           src={image.url}
           alt={image.meta.alt || image.meta.caption || ""}
           className={styles.image}
-          fill
+          width={400}
+          height={250}
           sizes="(min-width: 768px) 413px, 100vw"
           focalPoint={image.focalPoint}
         />

apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/index.tsx

@@ -121,8 +121,6 @@ export function Ancillaries({
                     )
                   })}
                 </Carousel.Content>
-                <Carousel.Previous />
-                <Carousel.Next />
                 <Carousel.Dots />
               </Carousel>
             </div>