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

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>
           ) : (

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;