💡Working CTA #2610

equinor · Dec 6, 2024 · 102f2d7 · 102f2d7
1 parent 8866dc0
commit 102f2d7
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 31 deletions.
diff --git 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
@@ -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;