From 053cfb46fabac68f707c70e7456ceb151cfc1e75 Mon Sep 17 00:00:00 2001
From: Borghild Selle <104756130+BorghildSelle@users.noreply.github.com>
Date: Mon, 22 Apr 2024 10:29:36 +0200
Subject: [PATCH] :bug: fix issues with resourcelink and promotile (#2249)

---
 web/core/Link/ResourceLink.tsx                   |  3 ++-
 web/core/List/List.tsx                           |  2 +-
 web/pageComponents/topicPages/PromoTileArray.tsx | 15 ++++++++++-----
 web/sections/cards/Card/CardContent.tsx          |  3 +--
 web/styles/colorKeyToUtilityMap.ts               |  9 +++++++++
 5 files changed, 23 insertions(+), 9 deletions(-)

diff --git a/web/core/Link/ResourceLink.tsx b/web/core/Link/ResourceLink.tsx
index f1be6807e..07c9d8b06 100644
--- a/web/core/Link/ResourceLink.tsx
+++ b/web/core/Link/ResourceLink.tsx
@@ -46,6 +46,7 @@ export const ResourceLink = forwardRef<HTMLAnchorElement, ResourceLinkProps>(fun
     text-energy-red-100
     dark:text-white-100
     justify-self-end
+    max-h-[25px]
     ${iconRotation[type]}
     ${
       type === 'downloadableFile' || type === 'downloadableImage'
@@ -60,7 +61,7 @@ export const ResourceLink = forwardRef<HTMLAnchorElement, ResourceLinkProps>(fun
 
   return (
     <BaseLink className={classNames} ref={ref} href={href} {...rest}>
-      <span className="grid grid-cols-[auto_1fr] align-baseline pb-5 pr-2">
+      <span className="grid grid-cols-[1fr_max-content] gap-2 items-end  pb-5 pr-2">
         {children}
         <ArrowRight className={iconClassNames} />
       </span>
diff --git a/web/core/List/List.tsx b/web/core/List/List.tsx
index f6893a31d..b6c862c8b 100644
--- a/web/core/List/List.tsx
+++ b/web/core/List/List.tsx
@@ -49,7 +49,7 @@ export const List = forwardRef<HTMLDivElement, ListProps>(
           className={twMerge(
             `list-inside
           ${ListTag === 'ul' ? 'list-disc' : 'list-decimal'}
-          ${split ? 'md:grid md:grid-cols-2 md:gap-8' : ''}`,
+          ${split ? 'md:grid md:grid-cols-2 gap-x-8 gap-y-6 items-end' : ''}`,
             className,
           )}
         >
diff --git a/web/pageComponents/topicPages/PromoTileArray.tsx b/web/pageComponents/topicPages/PromoTileArray.tsx
index 59fd0f191..24bd5cf2c 100644
--- a/web/pageComponents/topicPages/PromoTileArray.tsx
+++ b/web/pageComponents/topicPages/PromoTileArray.tsx
@@ -1,16 +1,14 @@
-import { BackgroundContainer } from '@components'
 import Card from '@sections/cards/Card'
-import { tokens } from '@equinor/eds-tokens'
 import styled from 'styled-components'
 import type { PromoTileArrayData, PromoTileData } from '../../types/types'
-import Image, { Ratios } from '../shared/SanityImage'
+import { Ratios } from '../shared/SanityImage'
 import { Carousel } from '../shared/Carousel'
 import { useMediaQuery } from '../../lib/hooks/useMediaQuery'
 import { useSanityLoader } from '../../lib/hooks/useSanityLoader'
 import { BaseLinkProps } from '@core/Link'
 import { ArrowRight } from '../../icons'
 import { getUrlFromAction } from '../../common/helpers'
-import { colorKeyToUtilityMap } from '../../styles/colorKeyToUtilityMap'
+import { ColorKeyTokens, colorKeyToUtilityMap } from '../../styles/colorKeyToUtilityMap'
 import { twMerge } from 'tailwind-merge'
 
 /* const { Header, Action, Media } = Card */
@@ -91,7 +89,14 @@ const TWPromoTile = ({ id, designOptions, image, title, action, linkLabelAsTitle
   const bgImage = useSanityLoader(image, 400, Ratios.FIVE_TO_FOUR)
   const url = getUrlFromAction(action)
   const { background } = designOptions
-  const twBg = background?.backgroundUtility && colorKeyToUtilityMap[background.backgroundUtility]?.background
+  const colorName =
+    Object.keys(colorKeyToUtilityMap).find(
+      (key) => colorKeyToUtilityMap[key as keyof ColorKeyTokens]?.backgroundName === background?.backgroundColor,
+    ) ?? 'white-100'
+
+  const twBg = background?.backgroundUtility
+    ? colorKeyToUtilityMap[background.backgroundUtility]?.background
+    : colorKeyToUtilityMap[colorName as keyof ColorKeyTokens]?.background
 
   return (
     <Card
diff --git a/web/sections/cards/Card/CardContent.tsx b/web/sections/cards/Card/CardContent.tsx
index a29b18fde..9ab277090 100644
--- a/web/sections/cards/Card/CardContent.tsx
+++ b/web/sections/cards/Card/CardContent.tsx
@@ -28,7 +28,7 @@ export const CardContent = forwardRef<HTMLDivElement, CardContentProps>(function
 ) {
   const variantClassNames = {
     primary: `flex-col items-start border border-grey-10 border-t-0`,
-    secondary: `flex-row items-center`,
+    secondary: `pb-12 lg:pb-16 flex-row items-center justify-between items-center`,
   }
   const variantLinkClassNames = {
     primary: `self-end mt-auto`,
@@ -36,7 +36,6 @@ export const CardContent = forwardRef<HTMLDivElement, CardContentProps>(function
   }
   const iconClassNames = twMerge(
     `
-    mt-4
     max-h-8
     text-energy-red-100
     dark:text-white-100
diff --git a/web/styles/colorKeyToUtilityMap.ts b/web/styles/colorKeyToUtilityMap.ts
index eb4cc764d..7c4724f77 100644
--- a/web/styles/colorKeyToUtilityMap.ts
+++ b/web/styles/colorKeyToUtilityMap.ts
@@ -1,37 +1,46 @@
 export const colorKeyToUtilityMap = {
   'blue-50': {
+    backgroundName: 'Mid blue',
     background: 'bg-blue-50',
     text: 'text-blue-50',
   },
   'white-100': {
+    backgroundName: 'White',
     background: 'bg-white-100',
     text: 'text-white-100',
   },
   'moss-green-50': {
+    backgroundName: 'Moss Green Light',
     background: 'bg-moss-green-50',
     text: 'text-moss-green-50',
   },
   'spruce-wood-90': {
+    backgroundName: 'Spruce Wood',
     background: 'bg-spruce-wood-90',
     text: 'text-spruce-wood-90',
   },
   'mist-blue-100': {
+    backgroundName: 'Mist Blue',
     background: 'bg-mist-blue-100',
     text: 'text-mist-blue-100',
   },
   'energy-red-100': {
+    backgroundName: 'Energy Red',
     background: 'bg-energy-red-100',
     text: 'text-energy-red-100',
   },
   'green-50': {
+    backgroundName: 'Mid Green',
     background: 'bg-green-50',
     text: 'text-green-50',
   },
   'yellow-50': {
+    backgroundName: 'Mid Yellow',
     background: 'bg-yellow-50',
     text: 'text-yellow-50',
   },
   'orange-50': {
+    backgroundName: 'Mid Orange',
     background: 'bg-orange-50',
     text: 'text-orange-50',
   },