From dac8d8bce15b39bb5ad02faa7ceb559ba2de9a59 Mon Sep 17 00:00:00 2001
From: Niclas Edenvin <niclas.edenvin@scandichotels.com>
Date: Thu, 8 May 2025 08:38:13 +0000
Subject: [PATCH] Merged in fix/SW-2158-map-link-focus (pull request #2006)

fix(SW-2158): focus state for map link

* fix(SW-2158): focus state for map link

The text `See map` didn't have the correct keyboard focus design. I
noticed the text used a button component, which I don't think is the
best, semantically. I removed the button component and just used text
since everything was wrapped in an a tag anyway.

* Use new space variable


Approved-by: Bianca Widstam
---
 .../components/HotelReservation/SelectHotel/index.tsx    | 5 ++---
 .../HotelReservation/SelectHotel/selectHotel.module.css  | 9 ++++++++-
 2 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/apps/scandic-web/components/HotelReservation/SelectHotel/index.tsx b/apps/scandic-web/components/HotelReservation/SelectHotel/index.tsx
index 5f4bb57cd..4ccc9a484 100644
--- a/apps/scandic-web/components/HotelReservation/SelectHotel/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/SelectHotel/index.tsx
@@ -12,7 +12,6 @@ import {
 } from "@/constants/routes/hotelReservation"
 
 import StaticMap from "@/components/Maps/StaticMap"
-import Button from "@/components/TempDesignSystem/Button"
 import Link from "@/components/TempDesignSystem/Link"
 import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
 import TrackingSDK from "@/components/TrackingSDK"
@@ -196,7 +195,7 @@ export default async function SelectHotel({
                   mapType="roadmap"
                   altText={`Map of ${city.name} city center`}
                 />
-                <Button wrapping size="medium" intent="text" theme="base">
+                <div className={styles.linkText}>
                   {intl.formatMessage({
                     defaultMessage: "See map",
                   })}
@@ -205,7 +204,7 @@ export default async function SelectHotel({
                     size={20}
                     color="CurrentColor"
                   />
-                </Button>
+                </div>
               </div>
             </Link>
           ) : (
diff --git a/apps/scandic-web/components/HotelReservation/SelectHotel/selectHotel.module.css b/apps/scandic-web/components/HotelReservation/SelectHotel/selectHotel.module.css
index 8006d9e9a..1a6a825e6 100644
--- a/apps/scandic-web/components/HotelReservation/SelectHotel/selectHotel.module.css
+++ b/apps/scandic-web/components/HotelReservation/SelectHotel/selectHotel.module.css
@@ -68,6 +68,13 @@
   margin-bottom: var(--Spacing-x3);
 }
 
+.linkText {
+  display: flex;
+  padding: var(--Space-x15) 0;
+  justify-content: center;
+  font-weight: var(--Link-md-Font-weight);
+}
+
 @media (min-width: 768px) {
   .main {
     padding: var(--Spacing-x5) 0;
@@ -109,7 +116,7 @@
 
   .link {
     display: flex;
-    padding-bottom: var(--Spacing-x6);
+    margin-bottom: var(--Space-x6);
   }
   .mapContainer {
     display: flex;