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

Approved-by: Matilda Landström

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
-      className={cx(styles.button, styles.buttonPrev, className)}
-      onClick={scrollPrev}
-      aria-label={intl.formatMessage({
-        defaultMessage: "Previous slide",
-      })}
-      {...props}
-    >
-      <MaterialIcon color="Icon/Interactive/Default" icon="arrow_back" />
-    </button>
+    <span className={cx(styles.buttonWrapper, styles.previous, className)}>
+      <IconButton
+        theme="Inverted"
+        style="Elevated"
+        onPress={scrollPrev}
+        aria-label={intl.formatMessage({
+          defaultMessage: "Previous slide",
+        })}
+      >
+        <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
-      className={cx(styles.button, styles.buttonNext, className)}
-      onClick={scrollNext}
-      aria-label={intl.formatMessage({
-        defaultMessage: "Next slide",
-      })}
-      {...props}
-    >
-      <MaterialIcon color="Icon/Interactive/Default" icon="arrow_forward" />
-    </button>
+    <span className={cx(styles.buttonWrapper, styles.next, className)}>
+      <IconButton
+        theme="Inverted"
+        style="Elevated"
+        onPress={scrollNext}
+        aria-label={intl.formatMessage({
+          defaultMessage: "Next slide",
+        })}
+      >
+        <MaterialIcon color="Icon/Interactive/Default" icon="arrow_forward" />
+      </IconButton>
+    </span>
   )
 }