🎨 Add CTA #2610

equinor · Nov 19, 2024 · 57c1739 · 57c1739
1 parent 1f4ecc3
commit 57c1739
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 6 deletions.
diff --git 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
@@ -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,10 +71,23 @@ 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" />
       )}
     </li>
   )
 })
+
diff --git 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}
     },
 `