🐛 same size on the arrow #2375 (#2381)

* 🐛 same size on the arrow * 🎨 cleanup * 🎨 adjust size
equinor · Jun 18, 2024 · ae47005 · ae47005
1 parent b075ada
commit ae47005
Show file tree

Hide file tree

Showing 8 changed files with 14 additions and 8 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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'],
     },
   },
 })