From ae470055570155dd1e95504b31a68914876bdf45 Mon Sep 17 00:00:00 2001
From: Borghild Selle <104756130+BorghildSelle@users.noreply.github.com>
Date: Tue, 18 Jun 2024 10:28:04 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20=20same=20size=20on=20the=20arro?=
 =?UTF-8?q?w=20#2375=20(#2381)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* :bug: same size on the arrow

* :art: cleanup

* :art: adjust size
---
 web/core/Link/ReadMoreLink.tsx          | 3 ++-
 web/core/Link/ResourceLink.tsx          | 2 +-
 web/icons/ArrowRight.tsx                | 3 +--
 web/sections/Grid/GridLinkArrow.tsx     | 2 +-
 web/sections/PromoTiles/PromoTile.tsx   | 4 +++-
 web/sections/cards/Card/CardContent.tsx | 2 +-
 web/tailwind.config.cjs                 | 3 +++
 web/twMerge/index.ts                    | 3 ++-
 8 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/web/core/Link/ReadMoreLink.tsx b/web/core/Link/ReadMoreLink.tsx
index ff8f758df..eb69dfd70 100644
--- a/web/core/Link/ReadMoreLink.tsx
+++ b/web/core/Link/ReadMoreLink.tsx
@@ -49,13 +49,14 @@ export const ReadMoreLink = forwardRef<HTMLAnchorElement, ReadMoreLinkProps>(fun
   }
   const iconClassNames = twMerge(
     `
+    size-arrow-right
     text-energy-red-100
     dark:text-white-100
     ml-2
     ${
       type === 'downloadableFile' || type === 'downloadableImage'
         ? 'group-hover:translate-y-0.5'
-        : '-translate-y-1 group-hover:translate-x-2'
+        : '-translate-y-0.5 group-hover:translate-x-2'
     }
     transition-all
     duration-300
diff --git a/web/core/Link/ResourceLink.tsx b/web/core/Link/ResourceLink.tsx
index 732f345ef..76c93e46d 100644
--- a/web/core/Link/ResourceLink.tsx
+++ b/web/core/Link/ResourceLink.tsx
@@ -43,10 +43,10 @@ export const ResourceLink = forwardRef<HTMLAnchorElement, ResourceLinkProps>(fun
 
   const iconClassNames = twMerge(
     `
+    size-arrow-right
     text-energy-red-100
     dark:text-white-100
     justify-self-end
-    max-h-[25px]
     ${iconRotation[type]}
     ${
       type === 'downloadableFile' || type === 'downloadableImage'
diff --git a/web/icons/ArrowRight.tsx b/web/icons/ArrowRight.tsx
index 4d7e528ee..26184375c 100644
--- a/web/icons/ArrowRight.tsx
+++ b/web/icons/ArrowRight.tsx
@@ -1,6 +1,5 @@
 import { forwardRef, Ref, SVGProps } from 'react'
 import { arrow_forward } from '@equinor/eds-icons'
-import { twMerge } from 'tailwind-merge'
 
 export type ArrowRightProps = {
   /** Size, use if you need large icon resolutions
@@ -29,7 +28,7 @@ export const ArrowRight = forwardRef<SVGSVGElement, ArrowRightProps>(function Ar
       viewBox={`0 0 ${size} ${size}`}
       fill="currentColor"
       aria-hidden
-      className={twMerge(`h-full w-auto`, className)}
+      className={className}
       {...rest}
     >
       {Array.isArray(icon.svgPathData) ? (
diff --git a/web/sections/Grid/GridLinkArrow.tsx b/web/sections/Grid/GridLinkArrow.tsx
index 4488dd511..148435d46 100644
--- a/web/sections/Grid/GridLinkArrow.tsx
+++ b/web/sections/Grid/GridLinkArrow.tsx
@@ -53,7 +53,7 @@ const GridLinkArrow = ({ theme, action, className }: GridLinkArrowProps) => {
             <span className="sr-only">{`${action.label} ${
               action.extension ? `(${action.extension.toUpperCase()})` : ''
             }`}</span>
-            <ArrowRight className={`w-10 h-10`} />
+            <ArrowRight className={`size-10`} />
           </BaseLink>
         </div>
       )}
diff --git a/web/sections/PromoTiles/PromoTile.tsx b/web/sections/PromoTiles/PromoTile.tsx
index 5a15916f4..c0d1cfcf2 100644
--- a/web/sections/PromoTiles/PromoTile.tsx
+++ b/web/sections/PromoTiles/PromoTile.tsx
@@ -35,7 +35,9 @@ export const FakeReadMoreLink = ({ type = 'internalUrl', children }: FakeReadMor
   after:duration-300
   group-hover/card:after:w-full
   `
-  const iconClassNames = `text-energy-red-100
+  const iconClassNames = `
+    size-arrow-right
+    text-energy-red-100
     ${type === 'externalUrl' ? '-rotate-45' : ''}
     dark:text-white-100
     ml-2
diff --git a/web/sections/cards/Card/CardContent.tsx b/web/sections/cards/Card/CardContent.tsx
index 32024ba8e..7885b1ec0 100644
--- a/web/sections/cards/Card/CardContent.tsx
+++ b/web/sections/cards/Card/CardContent.tsx
@@ -42,7 +42,7 @@ export const CardContent = forwardRef<HTMLDivElement, CardContentProps>(function
   }
   const iconClassNames = twMerge(
     `
-    max-h-8
+    size-arrow-right
     text-energy-red-100
     dark:text-white-100
     mr-2
diff --git a/web/tailwind.config.cjs b/web/tailwind.config.cjs
index f09af3787..194353cd5 100644
--- a/web/tailwind.config.cjs
+++ b/web/tailwind.config.cjs
@@ -234,6 +234,9 @@ module.exports = {
         '5xl': ['clamp(calc(51.97 / 16 * 1rem), 2.55vw + 2.64rem, calc(91.31 / 16 * 1rem))'],
         '6xl': ['clamp(calc(58.05 / 16 * 1rem), 2.94vw + 2.925rem, calc(103.39 / 16 * 1rem))'],
       },
+      size: {
+        'arrow-right': '1.58rem',
+      },
       fontWeight: {
         semibolder: 650,
         //--fontWeight-bold: tw -> semibold
diff --git a/web/twMerge/index.ts b/web/twMerge/index.ts
index bbbe35a53..2aa801292 100644
--- a/web/twMerge/index.ts
+++ b/web/twMerge/index.ts
@@ -9,7 +9,8 @@ const envisTwMerge = extendTailwindMerge({
       // eslint-disable-next-line @typescript-eslint/ban-ts-comment
       //@ts-ignore
       maxWidth: ['viewport'],
-      minWidthh: ['viewport'],
+      minWidth: ['viewport'],
+      size: ['arrow-right'],
     },
   },
 })