From 12a03aba4aa631157b89c40020e04b1e926b3d9d Mon Sep 17 00:00:00 2001
From: Borghild <borghild.vikoyr@miles.no>
Date: Thu, 13 Feb 2025 11:55:14 +0100
Subject: [PATCH] :art: typescript

---
 web/core/Carousel/Carousel.tsx                |  3 +-
 web/core/Carousel/CarouselImageItem.tsx       |  8 +-
 .../shared/ImageCarousel/ImageCarousel.tsx    | 79 -----------------
 .../ImageCarousel/ImageCarouselItem.tsx       | 84 -------------------
 .../shared/ImageCarousel/Navigation.tsx       | 51 -----------
 5 files changed, 9 insertions(+), 216 deletions(-)
 delete mode 100644 web/pageComponents/shared/ImageCarousel/ImageCarousel.tsx
 delete mode 100644 web/pageComponents/shared/ImageCarousel/ImageCarouselItem.tsx
 delete mode 100644 web/pageComponents/shared/ImageCarousel/Navigation.tsx

diff --git a/web/core/Carousel/Carousel.tsx b/web/core/Carousel/Carousel.tsx
index 383779c34..4b712406a 100644
--- a/web/core/Carousel/Carousel.tsx
+++ b/web/core/Carousel/Carousel.tsx
@@ -466,6 +466,7 @@ export const Carousel = forwardRef<HTMLElement, CarouselProps>(function Carousel
       case 'image':
         return (
           <CarouselImageItem
+            //@ts-ignore:TOdo
             key={item?.id ?? item?._key ?? `image_carousel_${sliderRef.current}_item_${i}`}
             {...(item as ImageCarouselItem)}
             displayMode={displayMode}
@@ -486,7 +487,7 @@ export const Carousel = forwardRef<HTMLElement, CarouselProps>(function Carousel
       case 'event':
         return getEventVariantBody(item as EventCardData, i)
       case 'keyNumber':
-        return getKeyNumberVariantBody(item as KeyNumberItemData, i)
+        return getKeyNumberVariantBody(item as KeyNumberItemData)
       case 'iframe':
         return getIframeVariantBody(item as IFrameCarouselItemData, i)
     }
diff --git a/web/core/Carousel/CarouselImageItem.tsx b/web/core/Carousel/CarouselImageItem.tsx
index dbf34b308..50d46af94 100644
--- a/web/core/Carousel/CarouselImageItem.tsx
+++ b/web/core/Carousel/CarouselImageItem.tsx
@@ -116,6 +116,7 @@ export const CarouselImageItem = forwardRef<HTMLLIElement, CarouselImageItemProp
       return (
         <ImageWithOverlay
           teaserTitle={captionTeaserTitle}
+          //@ts-ignore:TODO
           title={captionTitle as PortableTextBlock[]}
           text={captionText}
           image={image}
@@ -135,7 +136,12 @@ export const CarouselImageItem = forwardRef<HTMLLIElement, CarouselImageItemProp
           <figcaption
             className={`max-w-text py-6 px-8 ${displayMode === 'single' ? singleClassname : scrollClassname}`}
           >
-            {caption && <Blocks value={caption} />}
+            {caption && (
+              <Blocks
+                //@ts-ignore:TODO
+                value={caption}
+              />
+            )}
           </figcaption>
         </figure>
       )
diff --git a/web/pageComponents/shared/ImageCarousel/ImageCarousel.tsx b/web/pageComponents/shared/ImageCarousel/ImageCarousel.tsx
deleted file mode 100644
index 6a41f1a30..000000000
--- a/web/pageComponents/shared/ImageCarousel/ImageCarousel.tsx
+++ /dev/null
@@ -1,79 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-/* eslint-disable import/no-unresolved */
-import { Swiper, SwiperSlide } from 'swiper/react'
-import { Autoplay, Pagination } from 'swiper'
-import { BackgroundContainer } from '@components'
-import styled from 'styled-components'
-import TitleText from '../portableText/TitleText'
-import { CarouselItem } from './ImageCarouselItem'
-import type { ImageCarouselData } from '../../../types/index'
-
-import 'swiper/css'
-import 'swiper/css/pagination'
-import { twMerge } from 'tailwind-merge'
-
-const Container = styled.div`
-  & > figure {
-    margin: 0;
-  }
-`
-
-const StyledHeading = styled(TitleText)`
-  padding: 0 0 var(--space-large) 0;
-  text-align: left;
-`
-
-type ImageCarouselProps = {
-  data: ImageCarouselData
-  anchor?: string
-  className?: string
-}
-
-const ImageCarousel = ({ data, anchor, className, ...rest }: ImageCarouselProps) => {
-  const { title, items, options, designOptions } = data
-  const { background } = designOptions
-  const { autoplay, delay } = options
-
-  return (
-    <BackgroundContainer background={background} {...rest} id={anchor}>
-      <Container className={twMerge(`pb-page-content px-layout-sm max-w-viewport mx-auto`, className)}>
-        {title && <StyledHeading value={title} />}
-        <Swiper
-          spaceBetween={30}
-          centeredSlides={true}
-          pagination={{
-            type: 'fraction',
-            el: '.paginationWrapper',
-          }}
-          navigation={true}
-          modules={[Autoplay, Pagination]}
-          {...(autoplay
-            ? {
-                autoplay: {
-                  delay: delay * 1000,
-                  disableOnInteraction: false,
-                  pauseOnMouseEnter: true,
-                },
-              }
-            : {})}
-        >
-          {items.map((item, index, array) => {
-            const pagination = (index + 1).toString() + ' / ' + array.length.toString()
-            return (
-              <SwiperSlide key={item._key}>
-                <CarouselItem
-                  image={item.image}
-                  caption={item.caption}
-                  attribution={item.attribution}
-                  pagination={pagination}
-                />
-              </SwiperSlide>
-            )
-          })}
-        </Swiper>
-      </Container>
-    </BackgroundContainer>
-  )
-}
-
-export default ImageCarousel
diff --git a/web/pageComponents/shared/ImageCarousel/ImageCarouselItem.tsx b/web/pageComponents/shared/ImageCarousel/ImageCarouselItem.tsx
deleted file mode 100644
index 0a423d397..000000000
--- a/web/pageComponents/shared/ImageCarousel/ImageCarouselItem.tsx
+++ /dev/null
@@ -1,84 +0,0 @@
-import styled from 'styled-components'
-import Image, { Ratios } from '../SanityImage'
-import { Caption } from '../image/Caption'
-import { EdsProvider } from '@equinor/eds-core-react'
-import { NavButton } from './Navigation'
-import type { ImageWithAlt } from '../../../types/index'
-
-const StyledFigure = styled.figure`
-  margin: 0;
-`
-
-const CaptionContainer = styled.div`
-  display: grid;
-  grid-gap: var(--space-small);
-  padding: var(--space-medium);
-  grid-template-areas:
-    'controls'
-    'caption';
-
-  @media (min-width: 800px) {
-    grid-template-columns: 1fr auto;
-    grid-template-areas: 'caption controls';
-    grid-gap: var(--space-large);
-  }
-`
-
-const NavContainer = styled.div`
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: min-content;
-  grid-area: controls;
-`
-
-const StyledCaption = styled(Caption)`
-  max-width: 100%;
-  grid-area: caption;
-`
-
-const PaginationContainer = styled.div.attrs({ className: 'paginationWrapper' })`
-  text-align: center;
-  padding: 0 var(--space-medium);
-  font-size: var(--typeScale-0);
-`
-
-type CarouselItemProps = {
-  image: ImageWithAlt
-  pagination: string
-  caption?: string
-  attribution?: string
-}
-
-export const CarouselItem = ({ image, pagination, caption, attribution }: CarouselItemProps) => {
-  return (
-    <StyledFigure>
-      <Image
-        maxWidth={1420}
-        aspectRatio={Ratios.ONE_TO_TWO}
-        image={image}
-        sizes="
-            (max-width: 340px) 295px,
-            (max-width: 600px) 490px,
-            (max-width: 800px) 630px,
-            (max-width: 1050px) 810px,
-            (max-width: 1250px) 950px,
-            (max-width: 1450px) 1100px,
-            (max-width: 1700px) 1270px,
-            1420px
-          "
-        priority
-      />
-      <CaptionContainer>
-        <StyledCaption caption={caption} attribution={attribution} />
-        <NavContainer>
-          <EdsProvider density="compact">
-            <NavButton type="prev" />
-            <PaginationContainer>{pagination}</PaginationContainer>
-            <NavButton type="next" />
-          </EdsProvider>
-        </NavContainer>
-      </CaptionContainer>
-    </StyledFigure>
-  )
-}
diff --git a/web/pageComponents/shared/ImageCarousel/Navigation.tsx b/web/pageComponents/shared/ImageCarousel/Navigation.tsx
deleted file mode 100644
index d7ec55872..000000000
--- a/web/pageComponents/shared/ImageCarousel/Navigation.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-import { Button } from '@components'
-import { Icon } from '@equinor/eds-core-react'
-import { chevron_left, chevron_right } from '@equinor/eds-icons'
-import styled from 'styled-components'
-import { useSwiper } from 'swiper/react'
-
-const ButtonWrapper = styled.div``
-
-const StyledButton = styled(Button)`
-  background: var(--white-100);
-  border: 1px solid var(--black-80);
-  color: var(--black-80);
-
-  &:hover {
-    background: var(--black-80);
-    color: var(--white-100);
-  }
-`
-
-export const NavButton = ({ type }: { type: 'next' | 'prev' }) => {
-  const swiper = useSwiper()
-
-  const ButtonIcon = type === 'next' ? chevron_right : chevron_left
-
-  const handlePrev = () => {
-    if (swiper.isBeginning) {
-      swiper.slideTo(swiper.slides.length - 1)
-    } else {
-      swiper.slidePrev()
-    }
-  }
-
-  const handleNext = () => {
-    if (swiper.isEnd) {
-      swiper.slideTo(0)
-    } else {
-      swiper.slideNext()
-    }
-  }
-
-  const handler = type === 'next' ? handleNext : handlePrev
-  const title = type === 'next' ? 'Next image' : 'Previous image'
-
-  return (
-    <ButtonWrapper>
-      <StyledButton variant="contained_icon" onClick={() => handler()} title={title}>
-        <Icon size={16} data={ButtonIcon} />
-      </StyledButton>
-    </ButtonWrapper>
-  )
-}