From ba956f51ae13c5e1cb7be38a21d8d045af336ab1 Mon Sep 17 00:00:00 2001
From: "Malin J." <millianapia@gmail.com>
Date: Tue, 19 Nov 2024 16:52:36 +0100
Subject: [PATCH 01/11] =?UTF-8?q?=F0=9F=94=A7=20Sanity=20CTA=20setup=20#26?=
 =?UTF-8?q?10?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 sanityv3/schemas/index.ts                  |  2 +
 sanityv3/schemas/objects/carouselImage.tsx | 51 ++++++++++++++++++++++
 sanityv3/schemas/objects/imageCarousel.tsx |  4 +-
 3 files changed, 56 insertions(+), 1 deletion(-)
 create mode 100644 sanityv3/schemas/objects/carouselImage.tsx

diff --git a/sanityv3/schemas/index.ts b/sanityv3/schemas/index.ts
index c1d8eb62f..5d55d6a83 100644
--- a/sanityv3/schemas/index.ts
+++ b/sanityv3/schemas/index.ts
@@ -25,6 +25,7 @@ import fullWidthVideo from './objects/fullWidthVideo'
 import iframe from './objects/iframe'
 import imageWithAlt from './objects/imageWithAlt'
 import imageWithAltAndCaption from './objects/imageWithAltAndCaption'
+import carouselImage from './objects/carouselImage'
 import largeTable from './objects/largeTable'
 import linkSelector from './objects/linkSelector'
 import menuGroup from './objects/menuGroup'
@@ -139,6 +140,7 @@ const RemainingSchemas = [
   internalServerError,
   imageWithAlt,
   imageWithAltAndCaption,
+  carouselImage,
   pullQuote,
   factbox,
   relatedLinks,
diff --git a/sanityv3/schemas/objects/carouselImage.tsx b/sanityv3/schemas/objects/carouselImage.tsx
new file mode 100644
index 000000000..fc9d8951b
--- /dev/null
+++ b/sanityv3/schemas/objects/carouselImage.tsx
@@ -0,0 +1,51 @@
+import { ImageWithAltAndCaption } from './imageWithAltAndCaption'
+
+export type CarouselImage = {
+  _type: 'carouselImage'
+  image: ImageWithAltAndCaption
+  caption?: string
+  attribution?: string
+}
+
+export default {
+  name: 'carouselImage',
+  title: 'Image with options',
+  type: 'object',
+  options: {
+    collapsed: false,
+  },
+  fields: [
+    {
+      name: 'image',
+      title: 'Image with alt and Caption',
+      type: 'imageWithAltAndCaption',
+    },
+  {
+    type: 'boolean',
+    name: 'captionPositionUnderImage',
+    title: 'Position caption and credit under image',
+    description: 'Toggle to display caption and credit under the image.',
+    initialValue: false,
+  },
+    {
+      name: 'link',
+      title: 'Link',
+      type: 'linkSelector',
+      description: 'Optional link associated with the image.',
+    },
+  ],
+  preview: {
+    select: {
+      imageUrl: 'image.image.asset.url',
+      alt: 'image.image.alt',
+      caption: 'image.caption',
+    },
+    prepare({ imageUrl, caption, alt }: { imageUrl: string; alt: string; caption: string }) {
+      return {
+        title: alt || 'No alt text',
+        subtitle: caption || 'No caption',
+        media: <img src={imageUrl} alt={alt} style={{ height: '100%' }} />,
+      }
+    },
+  },
+}
diff --git a/sanityv3/schemas/objects/imageCarousel.tsx b/sanityv3/schemas/objects/imageCarousel.tsx
index 5311f31bb..706c7c56f 100644
--- a/sanityv3/schemas/objects/imageCarousel.tsx
+++ b/sanityv3/schemas/objects/imageCarousel.tsx
@@ -71,7 +71,9 @@ export default {
       name: 'items',
       description: 'Add images for the carousel',
       title: 'Carousel items',
-      of: [{ type: 'imageWithAltAndCaption' }],
+      of: [{ type: 'imageWithAltAndCaption' },
+           { type: 'carouselImage' }
+      ],
       validation: (Rule: Rule) => Rule.required().min(2),
     },
     {

From 1f4ecc3aabee6a13040ca3532f6f83ea29817898 Mon Sep 17 00:00:00 2001
From: "Malin J." <millianapia@gmail.com>
Date: Tue, 19 Nov 2024 16:58:51 +0100
Subject: [PATCH 02/11] =?UTF-8?q?=F0=9F=8E=A8=20Introduce=20fields=20and?=
 =?UTF-8?q?=20types=20#2610?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/core/Carousel/CarouselImageItem.tsx       | 4 +++-
 web/lib/queries/common/imageCarouselFields.ts | 2 ++
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/web/core/Carousel/CarouselImageItem.tsx b/web/core/Carousel/CarouselImageItem.tsx
index bb94cd8b4..351c22677 100644
--- a/web/core/Carousel/CarouselImageItem.tsx
+++ b/web/core/Carousel/CarouselImageItem.tsx
@@ -12,10 +12,12 @@ type CarouselImageItemProps = {
   caption?: string
   attribution?: string
   active?: boolean
+  captionPositionUnderImage?: boolean
+  link?: string
 } & HTMLAttributes<HTMLLIElement>
 
 export const CarouselImageItem = forwardRef<HTMLLIElement, CarouselImageItemProps>(function CarouselImageItem(
-  { active = false, image, caption, attribution, displayMode = 'single', className = '', ...rest },
+  { active = false, image, caption, attribution, displayMode = 'single', className = '', link, captionPositionUnderImage, ...rest },
   ref,
 ) {
   return (
diff --git a/web/lib/queries/common/imageCarouselFields.ts b/web/lib/queries/common/imageCarouselFields.ts
index c0d1e31c6..330f8be82 100644
--- a/web/lib/queries/common/imageCarouselFields.ts
+++ b/web/lib/queries/common/imageCarouselFields.ts
@@ -14,6 +14,8 @@ export const imageCarouselFields = /* groq */ `
       autoplay,
       delay
     },
+    captionPositionUnderImage,
+    link,
     "designOptions": {
      ${background}
     },

From 57c1739c8459309cf4961137e886035c9a2bf972 Mon Sep 17 00:00:00 2001
From: "Malin J." <millianapia@gmail.com>
Date: Tue, 19 Nov 2024 17:25:02 +0100
Subject: [PATCH 03/11] =?UTF-8?q?=F0=9F=8E=A8=20Add=20CTA=20#2610?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 sanityv3/schemas/objects/carouselImage.tsx    |  2 +-
 web/core/Carousel/CarouselImageItem.tsx       | 22 ++++++++++++++++---
 web/lib/queries/common/imageCarouselFields.ts |  7 ++++--
 3 files changed, 25 insertions(+), 6 deletions(-)

diff --git a/sanityv3/schemas/objects/carouselImage.tsx b/sanityv3/schemas/objects/carouselImage.tsx
index fc9d8951b..a8a433e02 100644
--- a/sanityv3/schemas/objects/carouselImage.tsx
+++ b/sanityv3/schemas/objects/carouselImage.tsx
@@ -28,7 +28,7 @@ export default {
     initialValue: false,
   },
     {
-      name: 'link',
+      name: 'action',
       title: 'Link',
       type: 'linkSelector',
       description: 'Optional link associated with the image.',
diff --git a/web/core/Carousel/CarouselImageItem.tsx b/web/core/Carousel/CarouselImageItem.tsx
index 351c22677..445021b24 100644
--- a/web/core/Carousel/CarouselImageItem.tsx
+++ b/web/core/Carousel/CarouselImageItem.tsx
@@ -1,8 +1,11 @@
 import envisTwMerge from '../../twMerge'
 import Image from '../../pageComponents/shared/SanityImage'
-import { ImageWithAlt, ImageWithCaptionData } from '../../types/index'
+import { ImageWithAlt, ImageWithCaptionData, LinkData } from '../../types/index'
 import { DisplayModes } from './Carousel'
 import { forwardRef, HTMLAttributes } from 'react'
+import { ButtonLink } from '@core/Link'
+import { getUrlFromAction } from '../../common/helpers/getUrlFromAction'
+import { getLocaleFromName } from '../../lib/localization'
 
 type CarouselImageItemProps = {
   image?: ImageWithAlt | ImageWithCaptionData
@@ -13,11 +16,11 @@ type CarouselImageItemProps = {
   attribution?: string
   active?: boolean
   captionPositionUnderImage?: boolean
-  link?: string
+  action?: LinkData
 } & HTMLAttributes<HTMLLIElement>
 
 export const CarouselImageItem = forwardRef<HTMLLIElement, CarouselImageItemProps>(function CarouselImageItem(
-  { active = false, image, caption, attribution, displayMode = 'single', className = '', link, captionPositionUnderImage, ...rest },
+  { active = false, image, caption, attribution, displayMode = 'single', className = '', action, captionPositionUnderImage, ...rest },
   ref,
 ) {
   return (
@@ -68,6 +71,18 @@ export const CarouselImageItem = forwardRef<HTMLLIElement, CarouselImageItemProp
               {attribution && <span className="text-sm">{attribution}</span>}
             </div>
           </figcaption>
+        
+          {action && action.label && (
+          <ButtonLink
+            href={getUrlFromAction(action) || ''}
+            aria-label={action?.ariaLabel}
+            variant="outlined-secondary"
+            className={`w-full md:mb-8 mb-4 justify-center mt-xl `}
+            locale={action?.type === 'internalUrl' ? getLocaleFromName(action?.link?.lang) : undefined}
+          >
+            {action.label}
+          </ButtonLink>
+        )}
         </figure>
       ) : (
         <Image maxWidth={1420} image={image as ImageWithAlt} fill className="rounded-md" />
@@ -75,3 +90,4 @@ export const CarouselImageItem = forwardRef<HTMLLIElement, CarouselImageItemProp
     </li>
   )
 })
+
diff --git a/web/lib/queries/common/imageCarouselFields.ts b/web/lib/queries/common/imageCarouselFields.ts
index 330f8be82..582078335 100644
--- a/web/lib/queries/common/imageCarouselFields.ts
+++ b/web/lib/queries/common/imageCarouselFields.ts
@@ -1,3 +1,4 @@
+import linkSelectorFields from './actions/linkSelectorFields'
 import background from './background'
 
 export const imageCarouselFields = /* groq */ `
@@ -15,8 +16,10 @@ export const imageCarouselFields = /* groq */ `
       delay
     },
     captionPositionUnderImage,
-    link,
-    "designOptions": {
+"action": action[0]{
+${linkSelectorFields},
+},
+  "designOptions": {
      ${background}
     },
 `

From 29ce8bec58416da480d890f48447b3cef676664f Mon Sep 17 00:00:00 2001
From: "Malin J." <millianapia@gmail.com>
Date: Thu, 5 Dec 2024 17:01:12 +0100
Subject: [PATCH 04/11] WIP: change to gridlinkarrow #2610

---
 sanityv3/schemas/objects/carouselImage.tsx | 28 +++++++++++++++-------
 web/core/Carousel/CarouselImageItem.tsx    | 23 ++++++------------
 web/types/imageTypes.ts                    |  2 ++
 3 files changed, 28 insertions(+), 25 deletions(-)

diff --git a/sanityv3/schemas/objects/carouselImage.tsx b/sanityv3/schemas/objects/carouselImage.tsx
index a8a433e02..33338d69c 100644
--- a/sanityv3/schemas/objects/carouselImage.tsx
+++ b/sanityv3/schemas/objects/carouselImage.tsx
@@ -1,10 +1,10 @@
-import { ImageWithAltAndCaption } from './imageWithAltAndCaption'
+import { ImageWithAlt } from './imageWithAlt'
 
 export type CarouselImage = {
   _type: 'carouselImage'
-  image: ImageWithAltAndCaption
-  caption?: string
-  attribution?: string
+  image: ImageWithAlt
+  captionPositionUnderImage?: boolean
+  action?: any
 }
 
 export default {
@@ -17,8 +17,18 @@ export default {
   fields: [
     {
       name: 'image',
-      title: 'Image with alt and Caption',
-      type: 'imageWithAltAndCaption',
+      title: 'Image with alt',
+      type: 'imageWithAlt',
+    },
+    {
+      name: 'caption',
+      title: 'Image caption',
+      type: 'string',
+    },
+    {
+      name: 'attribution',
+      title: 'Credit',
+      type: 'string',
     },
   {
     type: 'boolean',
@@ -36,9 +46,9 @@ export default {
   ],
   preview: {
     select: {
-      imageUrl: 'image.image.asset.url',
-      alt: 'image.image.alt',
-      caption: 'image.caption',
+      imageUrl: 'image.asset.url',
+      alt: 'image.alt',
+      caption: 'caption',
     },
     prepare({ imageUrl, caption, alt }: { imageUrl: string; alt: string; caption: string }) {
       return {
diff --git a/web/core/Carousel/CarouselImageItem.tsx b/web/core/Carousel/CarouselImageItem.tsx
index 445021b24..a12dc747a 100644
--- a/web/core/Carousel/CarouselImageItem.tsx
+++ b/web/core/Carousel/CarouselImageItem.tsx
@@ -3,9 +3,7 @@ import Image from '../../pageComponents/shared/SanityImage'
 import { ImageWithAlt, ImageWithCaptionData, LinkData } from '../../types/index'
 import { DisplayModes } from './Carousel'
 import { forwardRef, HTMLAttributes } from 'react'
-import { ButtonLink } from '@core/Link'
-import { getUrlFromAction } from '../../common/helpers/getUrlFromAction'
-import { getLocaleFromName } from '../../lib/localization'
+import GridLinkArrow from '@sections/Grid/GridLinkArrow'
 
 type CarouselImageItemProps = {
   image?: ImageWithAlt | ImageWithCaptionData
@@ -71,21 +69,14 @@ export const CarouselImageItem = forwardRef<HTMLLIElement, CarouselImageItemProp
               {attribution && <span className="text-sm">{attribution}</span>}
             </div>
           </figcaption>
-        
-          {action && action.label && (
-          <ButtonLink
-            href={getUrlFromAction(action) || ''}
-            aria-label={action?.ariaLabel}
-            variant="outlined-secondary"
-            className={`w-full md:mb-8 mb-4 justify-center mt-xl `}
-            locale={action?.type === 'internalUrl' ? getLocaleFromName(action?.link?.lang) : undefined}
-          >
-            {action.label}
-          </ButtonLink>
-        )}
+          <GridLinkArrow action={action}/>
         </figure>
       ) : (
-        <Image maxWidth={1420} image={image as ImageWithAlt} fill className="rounded-md" />
+        <>
+    <Image maxWidth={1420} image={image as ImageWithAlt} fill className="rounded-md" />
+    <GridLinkArrow action={action} />
+
+        </>
       )}
     </li>
   )
diff --git a/web/types/imageTypes.ts b/web/types/imageTypes.ts
index 06ade2a03..a507e3e47 100644
--- a/web/types/imageTypes.ts
+++ b/web/types/imageTypes.ts
@@ -65,4 +65,6 @@ export type ImageCarouselData = {
 
 export type ImageCarouselItem = {
   id: string
+  captionPositionUnderImage?: boolean
+  action?: any
 } & ImageWithCaptionData

From e16bae99f5e3390106500eb2151885df41784d04 Mon Sep 17 00:00:00 2001
From: "Malin J." <millianapia@gmail.com>
Date: Thu, 5 Dec 2024 17:07:10 +0100
Subject: [PATCH 05/11] WIP: still no link #2610

---
 web/core/Carousel/Carousel.tsx                | 1 +
 web/lib/queries/common/imageCarouselFields.ts | 6 +++---
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/web/core/Carousel/Carousel.tsx b/web/core/Carousel/Carousel.tsx
index a653fe83c..e8c0781a6 100644
--- a/web/core/Carousel/Carousel.tsx
+++ b/web/core/Carousel/Carousel.tsx
@@ -266,6 +266,7 @@ export const Carousel = forwardRef<HTMLElement, CarouselProps>(function Carousel
             displayMode={displayMode}
             aria-label={ariaLabel}
             active={i === currentIndex}
+            action={(item as ImageCarouselItem).action}
             {...(variant === 'image' &&
               displayMode === 'single' && {
                 style: {
diff --git a/web/lib/queries/common/imageCarouselFields.ts b/web/lib/queries/common/imageCarouselFields.ts
index 582078335..b19d7f099 100644
--- a/web/lib/queries/common/imageCarouselFields.ts
+++ b/web/lib/queries/common/imageCarouselFields.ts
@@ -9,6 +9,9 @@ export const imageCarouselFields = /* groq */ `
     hideTitle,
     items[] {
     "id": _key,
+    "action": action[0]{
+      ${linkSelectorFields},
+    },
     ...
     },
     "options": {
@@ -16,9 +19,6 @@ export const imageCarouselFields = /* groq */ `
       delay
     },
     captionPositionUnderImage,
-"action": action[0]{
-${linkSelectorFields},
-},
   "designOptions": {
      ${background}
     },

From 4bb38ce5f0305e51bef60ed6ca91653416aa9dc7 Mon Sep 17 00:00:00 2001
From: "Malin J." <millianapia@gmail.com>
Date: Thu, 5 Dec 2024 19:36:10 +0100
Subject: [PATCH 06/11] linkselector type

---
 sanityv3/schemas/objects/carouselImage.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/sanityv3/schemas/objects/carouselImage.tsx b/sanityv3/schemas/objects/carouselImage.tsx
index 33338d69c..dbd10231c 100644
--- a/sanityv3/schemas/objects/carouselImage.tsx
+++ b/sanityv3/schemas/objects/carouselImage.tsx
@@ -1,10 +1,11 @@
 import { ImageWithAlt } from './imageWithAlt'
+import type { Reference } from 'sanity'
 
 export type CarouselImage = {
   _type: 'carouselImage'
   image: ImageWithAlt
   captionPositionUnderImage?: boolean
-  action?: any
+  action?: Reference[]
 }
 
 export default {
@@ -40,7 +41,8 @@ export default {
     {
       name: 'action',
       title: 'Link',
-      type: 'linkSelector',
+      type: 'array',
+      of: [{ type: 'linkSelector', title: 'Link' }], 
       description: 'Optional link associated with the image.',
     },
   ],

From 8866dc04221db971d8699a6b442aa019e3b6a26d Mon Sep 17 00:00:00 2001
From: Borghild <borghild.vikoyr@miles.no>
Date: Thu, 5 Dec 2024 21:08:24 +0100
Subject: [PATCH 07/11] :art: rewrite groq

---
 web/core/Carousel/CarouselImageItem.tsx       | 20 +++++++++++++------
 web/lib/queries/common/imageCarouselFields.ts |  8 ++++----
 2 files changed, 18 insertions(+), 10 deletions(-)

diff --git a/web/core/Carousel/CarouselImageItem.tsx b/web/core/Carousel/CarouselImageItem.tsx
index a12dc747a..2eca1ba88 100644
--- a/web/core/Carousel/CarouselImageItem.tsx
+++ b/web/core/Carousel/CarouselImageItem.tsx
@@ -18,7 +18,17 @@ type CarouselImageItemProps = {
 } & HTMLAttributes<HTMLLIElement>
 
 export const CarouselImageItem = forwardRef<HTMLLIElement, CarouselImageItemProps>(function CarouselImageItem(
-  { active = false, image, caption, attribution, displayMode = 'single', className = '', action, captionPositionUnderImage, ...rest },
+  {
+    active = false,
+    image,
+    caption,
+    attribution,
+    displayMode = 'single',
+    className = '',
+    action,
+    captionPositionUnderImage,
+    ...rest
+  },
   ref,
 ) {
   return (
@@ -69,16 +79,14 @@ export const CarouselImageItem = forwardRef<HTMLLIElement, CarouselImageItemProp
               {attribution && <span className="text-sm">{attribution}</span>}
             </div>
           </figcaption>
-          <GridLinkArrow action={action}/>
+          <GridLinkArrow action={action} />
         </figure>
       ) : (
         <>
-    <Image maxWidth={1420} image={image as ImageWithAlt} fill className="rounded-md" />
-    <GridLinkArrow action={action} />
-
+          <Image maxWidth={1420} image={image as ImageWithAlt} fill className="rounded-md" />
+          <GridLinkArrow action={action} />
         </>
       )}
     </li>
   )
 })
-
diff --git a/web/lib/queries/common/imageCarouselFields.ts b/web/lib/queries/common/imageCarouselFields.ts
index b19d7f099..e30e164f8 100644
--- a/web/lib/queries/common/imageCarouselFields.ts
+++ b/web/lib/queries/common/imageCarouselFields.ts
@@ -7,12 +7,12 @@ export const imageCarouselFields = /* groq */ `
     title,
     ingress,
     hideTitle,
-    items[] {
+    items[]{
+      ...,
     "id": _key,
-    "action": action[0]{
+    action[0]{
       ${linkSelectorFields},
-    },
-    ...
+    }
     },
     "options": {
       autoplay,

From 102f2d7c2bfbfc6c52afe7dc8f4594451c58e5a8 Mon Sep 17 00:00:00 2001
From: "Malin J." <millianapia@gmail.com>
Date: Fri, 6 Dec 2024 10:48:25 +0100
Subject: [PATCH 08/11] =?UTF-8?q?=F0=9F=92=A1Working=20CTA=20#2610?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/core/Carousel/CarouselImageItem.tsx |  4 +-
 web/sections/Grid/GridLinkArrow.tsx     | 63 +++++++++++++------------
 2 files changed, 36 insertions(+), 31 deletions(-)

diff --git a/web/core/Carousel/CarouselImageItem.tsx b/web/core/Carousel/CarouselImageItem.tsx
index 2eca1ba88..f5fb79435 100644
--- a/web/core/Carousel/CarouselImageItem.tsx
+++ b/web/core/Carousel/CarouselImageItem.tsx
@@ -79,12 +79,12 @@ export const CarouselImageItem = forwardRef<HTMLLIElement, CarouselImageItemProp
               {attribution && <span className="text-sm">{attribution}</span>}
             </div>
           </figcaption>
-          <GridLinkArrow action={action} />
+          <GridLinkArrow action={action} rounded />
         </figure>
       ) : (
         <>
           <Image maxWidth={1420} image={image as ImageWithAlt} fill className="rounded-md" />
-          <GridLinkArrow action={action} />
+          <GridLinkArrow action={action} rounded />
         </>
       )}
     </li>
diff --git a/web/sections/Grid/GridLinkArrow.tsx b/web/sections/Grid/GridLinkArrow.tsx
index 6aadad850..64bd1341a 100644
--- a/web/sections/Grid/GridLinkArrow.tsx
+++ b/web/sections/Grid/GridLinkArrow.tsx
@@ -1,23 +1,24 @@
 /* eslint-disable @typescript-eslint/ban-ts-comment */
-import { twMerge } from 'tailwind-merge'
-import { getUrlFromAction } from '../../common/helpers'
-import { BaseLink } from '@core/Link'
-import { getLocaleFromName } from '../../lib/localization'
-import { ArrowRight } from '../../icons'
-import { LinkData } from '../../types/index'
-import { forwardRef } from 'react'
+import { twMerge } from 'tailwind-merge';
+import { getUrlFromAction } from '../../common/helpers';
+import { BaseLink } from '@core/Link';
+import { getLocaleFromName } from '../../lib/localization';
+import { ArrowRight } from '../../icons';
+import { LinkData } from '../../types/index';
+import { forwardRef } from 'react';
 
 type GridLinkArrowProps = {
-  action?: LinkData
-  className?: string
-  bgColor?: string
-}
+  action?: LinkData;
+  className?: string;
+  bgColor?: string;
+  rounded?: boolean;
+};
 
 const GridLinkArrow = forwardRef<HTMLDivElement, GridLinkArrowProps>(function GridLinkArrow(
-  { action, className = '', bgColor },
+  { action, className = '', bgColor, rounded = false },
   ref,
 ) {
-  const url = action && getUrlFromAction(action)
+  const url = action && getUrlFromAction(action);
 
   const variantClassName = () => {
     switch (bgColor) {
@@ -27,15 +28,17 @@ const GridLinkArrow = forwardRef<HTMLDivElement, GridLinkArrowProps>(function Gr
       case 'bg-mist-blue-100':
       case 'bg-moss-green-50':
       case 'bg-spruce-wood-90':
-        return `text-slate-80 hover:bg-slate-80 hover:text-white-100 focus-visible:bg-slate-80 focus-visible:text-white-100`
+        return `text-slate-80 hover:bg-slate-80 hover:text-white-100 focus-visible:bg-slate-80 focus-visible:text-white-100`;
       case 'bg-white-100':
-        return `text-slate-80 hover:bg-grey-50 hover:text-white-100 focus-visible:bg-grey-50 focus-visible:text-white-100`
+        return `text-slate-80 hover:bg-grey-50 hover:text-white-100 focus-visible:bg-grey-50 focus-visible:text-white-100`;
       case 'bg-blue-50':
       case 'bg-slate-80':
       default:
-        return `text-white-100 hover:bg-white-100 hover:text-slate-80 focus-visible:bg-white-100 focus-visible:text-slate-80`
+        return `text-white-100 hover:bg-white-100 hover:text-slate-80 focus-visible:bg-white-100 focus-visible:text-slate-80`;
     }
-  }
+  };
+
+  const roundedClassName = rounded ? 'm-1 p-2 hover:rounded-full' : '';
 
   return (
     <>
@@ -51,24 +54,26 @@ const GridLinkArrow = forwardRef<HTMLDivElement, GridLinkArrowProps>(function Gr
             href={url as string}
             {...(action.link?.lang && { locale: getLocaleFromName(action.link?.lang) })}
             type={action.type}
-            className={`group
-            py-2
-            px-4
-            focus:outline-none 
-            ${variantClassName()}
-            focus-visible:envis-outline
-            dark:focus-visible:envis-outline
-             `}
+            className={twMerge(
+              `group
+              py-2
+              px-4
+              focus:outline-none
+              ${variantClassName()}
+              focus-visible:envis-outline
+              dark:focus-visible:envis-outline`,
+              roundedClassName,
+            )}
           >
             <span className="sr-only">{`${action.label} ${
               action.extension ? `(${action.extension.toUpperCase()})` : ''
             }`}</span>
-            <ArrowRight className={`size-10`} />
+            <ArrowRight className={rounded ? 'size-7' :`size-10`} />
           </BaseLink>
         </div>
       )}
     </>
-  )
-})
+  );
+});
 
-export default GridLinkArrow
+export default GridLinkArrow;
\ No newline at end of file

From 44c4fcd7296365ef346db85012b26624788b7bc0 Mon Sep 17 00:00:00 2001
From: "Malin J." <millianapia@gmail.com>
Date: Fri, 6 Dec 2024 10:54:56 +0100
Subject: [PATCH 09/11] Adjust amount of actions #2610

---
 sanityv3/schemas/objects/carouselImage.tsx | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/sanityv3/schemas/objects/carouselImage.tsx b/sanityv3/schemas/objects/carouselImage.tsx
index dbd10231c..85b31aefb 100644
--- a/sanityv3/schemas/objects/carouselImage.tsx
+++ b/sanityv3/schemas/objects/carouselImage.tsx
@@ -1,5 +1,7 @@
 import { ImageWithAlt } from './imageWithAlt'
 import type { Reference } from 'sanity'
+import { Rule } from 'sanity'
+
 
 export type CarouselImage = {
   _type: 'carouselImage'
@@ -44,6 +46,7 @@ export default {
       type: 'array',
       of: [{ type: 'linkSelector', title: 'Link' }], 
       description: 'Optional link associated with the image.',
+      validation: (Rule: Rule) => Rule.max(1).error('Only one action is permitted'),
     },
   ],
   preview: {

From 493fbe1818c4821f282e6e54c89cbb47e5a60166 Mon Sep 17 00:00:00 2001
From: "Malin J." <millianapia@gmail.com>
Date: Fri, 6 Dec 2024 13:07:19 +0100
Subject: [PATCH 10/11] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20Refactor=20gridlinka?=
 =?UTF-8?q?rrow=20variant=20#2610?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/core/Carousel/CarouselImageItem.tsx |  4 ++--
 web/sections/Grid/GridLinkArrow.tsx     | 19 +++++++++++++------
 2 files changed, 15 insertions(+), 8 deletions(-)

diff --git a/web/core/Carousel/CarouselImageItem.tsx b/web/core/Carousel/CarouselImageItem.tsx
index f5fb79435..4454abeef 100644
--- a/web/core/Carousel/CarouselImageItem.tsx
+++ b/web/core/Carousel/CarouselImageItem.tsx
@@ -79,12 +79,12 @@ export const CarouselImageItem = forwardRef<HTMLLIElement, CarouselImageItemProp
               {attribution && <span className="text-sm">{attribution}</span>}
             </div>
           </figcaption>
-          <GridLinkArrow action={action} rounded />
+          <GridLinkArrow action={action} variant='circle' />
         </figure>
       ) : (
         <>
           <Image maxWidth={1420} image={image as ImageWithAlt} fill className="rounded-md" />
-          <GridLinkArrow action={action} rounded />
+          <GridLinkArrow action={action} variant='circle' />
         </>
       )}
     </li>
diff --git a/web/sections/Grid/GridLinkArrow.tsx b/web/sections/Grid/GridLinkArrow.tsx
index 64bd1341a..e32776892 100644
--- a/web/sections/Grid/GridLinkArrow.tsx
+++ b/web/sections/Grid/GridLinkArrow.tsx
@@ -11,16 +11,16 @@ type GridLinkArrowProps = {
   action?: LinkData;
   className?: string;
   bgColor?: string;
-  rounded?: boolean;
+  variant?: "square" | "circle" ;
 };
 
 const GridLinkArrow = forwardRef<HTMLDivElement, GridLinkArrowProps>(function GridLinkArrow(
-  { action, className = '', bgColor, rounded = false },
+  { action, className = '', bgColor, variant = 'square' },
   ref,
 ) {
   const url = action && getUrlFromAction(action);
 
-  const variantClassName = () => {
+  const bgClassName = () => {
     switch (bgColor) {
       case 'bg-yellow-50':
       case 'bg-green-50':
@@ -38,7 +38,14 @@ const GridLinkArrow = forwardRef<HTMLDivElement, GridLinkArrowProps>(function Gr
     }
   };
 
-  const roundedClassName = rounded ? 'm-1 p-2 hover:rounded-full' : '';
+  const variantClassName = () => {
+    switch (variant) {
+      case 'circle':
+        return `m-1 p-2 hover:rounded-full`;
+      default:
+        return ``;
+    }
+  }
 
   return (
     <>
@@ -59,16 +66,16 @@ const GridLinkArrow = forwardRef<HTMLDivElement, GridLinkArrowProps>(function Gr
               py-2
               px-4
               focus:outline-none
+              ${bgClassName()}
               ${variantClassName()}
               focus-visible:envis-outline
               dark:focus-visible:envis-outline`,
-              roundedClassName,
             )}
           >
             <span className="sr-only">{`${action.label} ${
               action.extension ? `(${action.extension.toUpperCase()})` : ''
             }`}</span>
-            <ArrowRight className={rounded ? 'size-7' :`size-10`} />
+            <ArrowRight className={variant === 'circle' ? 'size-7' :`size-10`} />
           </BaseLink>
         </div>
       )}

From dc55cb8ad952d87c699ea36c17f178539a85f7ec Mon Sep 17 00:00:00 2001
From: "Malin J." <millianapia@gmail.com>
Date: Fri, 6 Dec 2024 14:34:59 +0100
Subject: [PATCH 11/11] WIP: moved buttons #2610

still missing working autoplay, making it toggle between the modes and styling the text correctly
---
 web/core/Carousel/Carousel.tsx          |  4 +-
 web/core/Carousel/CarouselImageItem.tsx | 52 ++++++++-----------------
 2 files changed, 18 insertions(+), 38 deletions(-)

diff --git a/web/core/Carousel/Carousel.tsx b/web/core/Carousel/Carousel.tsx
index e8c0781a6..1b8aee973 100644
--- a/web/core/Carousel/Carousel.tsx
+++ b/web/core/Carousel/Carousel.tsx
@@ -358,9 +358,9 @@ export const Carousel = forwardRef<HTMLElement, CarouselProps>(function Carousel
           variant === 'image' && displayMode === 'single'
             ? 'w-[var(--image-carousel-card-w-sm)] md:w-[var(--image-carousel-card-w-md)] lg:w-[var(--image-carousel-card-w-lg)] mx-auto col-start-1 col-end-1 row-start-2 row-end-2'
             : ''
-        } pt-6 pb-2 ${items.length === 3 ? 'lg:hidden' : ''} flex ${
+        }  pb-2 ${items.length === 3 ? 'lg:hidden' : ''} flex ${
           internalAutoRotation ? 'justify-between' : 'justify-end'
-        }`}
+        } absolute bottom-10 left-0 right-0 z-10 min-w-0 mx-layout-sm`} 
       >
         <div id={controlsId} className="sr-only">
           <FormattedMessage id="carousel_controls" defaultMessage="Carousel controls" />
diff --git a/web/core/Carousel/CarouselImageItem.tsx b/web/core/Carousel/CarouselImageItem.tsx
index 4454abeef..56628d13a 100644
--- a/web/core/Carousel/CarouselImageItem.tsx
+++ b/web/core/Carousel/CarouselImageItem.tsx
@@ -16,7 +16,6 @@ type CarouselImageItemProps = {
   captionPositionUnderImage?: boolean
   action?: LinkData
 } & HTMLAttributes<HTMLLIElement>
-
 export const CarouselImageItem = forwardRef<HTMLLIElement, CarouselImageItemProps>(function CarouselImageItem(
   {
     active = false,
@@ -40,53 +39,34 @@ export const CarouselImageItem = forwardRef<HTMLLIElement, CarouselImageItemProp
       aria-roledescription="slide"
       className={envisTwMerge(
         `
-        aspect-4/5
-        md:aspect-video
         relative
         h-full
-        ${
-          displayMode === 'single'
-            ? `
-        transition-opacity
-        duration-1000
-        ease-[ease]`
-            : 'shrink-0'
-        }
+        ${displayMode === 'single' ? 'transition-opacity duration-1000 ease-[ease]' : 'shrink-0'}
         ${!active && displayMode === 'single' ? 'opacity-30' : ''}
         ${
           displayMode === 'scroll'
             ? 'w-[80%] snap-center scroll-ml-6'
-            : 'w-[var(--image-carousel-card-w-sm)] md:w-[var(--image-carousel-card-w-md)] lg:w-[var(--image-carousel-card-w-lg)] ms-2 me-2 col-start-1 col-end-1 row-start-1 row-end-1'
+            : 'w-[var(--image-carousel-card-w-sm)] md:w-[var(--image-carousel-card-w-md)] lg:w-[var(--image-carousel-card-w-lg)] ms-2 me-2'
         }
         `,
         className,
       )}
     >
-      {caption || attribution ? (
-        <figure className="relative w-full h-full">
-          <Image maxWidth={1420} image={image as ImageWithAlt} fill className="rounded-md" />
-          <figcaption
-            className={`${
-              active ? 'block' : 'hidden'
-            } absolute bottom-0 left-4 right-4 lg:left-8 lg:right-8 mb-4 lg:mb-8`}
-          >
-            <div
-              className={`bg-spruce-wood-70/75 text-slate-80 px-8 pt-6 w-fit flex flex-col max-w-text ${
-                attribution ? 'pb-4' : 'pb-6'
-              }`}
-            >
-              {caption && <span className={`text-lg ${attribution ? 'pb-3' : ''}`}>{caption}</span>}
-              {attribution && <span className="text-sm">{attribution}</span>}
-            </div>
+      {/* Image Section */}
+      <div className="relative w-full aspect-4/5 md:aspect-video">
+        <Image maxWidth={1420} image={image as ImageWithAlt} fill className="rounded-md" />
+        <GridLinkArrow action={action} variant="circle" />
+      </div>
+
+      {/* Caption Section */}
+      {(caption || attribution) && (
+        <figure className="relative w-full mt-4 ml-10">
+          <figcaption className="bg-spruce-wood-70/75 text-slate-80 px-4 py-2 rounded-md flex flex-col">
+            {caption && <span className="text-lg">{caption}</span>}
+            {attribution && <span className="text-sm mt-2">{attribution}</span>}
           </figcaption>
-          <GridLinkArrow action={action} variant='circle' />
         </figure>
-      ) : (
-        <>
-          <Image maxWidth={1420} image={image as ImageWithAlt} fill className="rounded-md" />
-          <GridLinkArrow action={action} variant='circle' />
-        </>
       )}
     </li>
-  )
-})
+  );
+});
\ No newline at end of file