Merged in SW-3270-move-interactive-map-to-design-system-or-booking-flow (pull request #2681)

SW-3270 move interactive map to design system or booking flow * wip * wip * merge * wip * add support for locales in design-system * add story for HotelCard * setup alias * . * remove tracking from design-system for hotelcard * pass isUserLoggedIn * export design-system-new-deprecated.css from design-system * Add HotelMarkerByType to Storybook * Add interactive map to Storybook * fix reactintl in vitest * rename env variables * . * fix background colors * add storybook stories for <Link /> * merge * fix tracking for when clicking 'See rooms' in InteractiveMap * Merge branch 'master' of bitbucket.org:scandic-swap/web into SW-3270-move-interactive-map-to-design-system-or-booking-flow * remove deprecated comment Approved-by: Anton Gunnarsson
2025-08-25 11:26:16 +00:00
parent 4f8c51298f
commit c54c1ec540
139 changed files with 2511 additions and 1557 deletions
--- a/packages/design-system/lib/components/Map/InteractiveMap/interactiveMap.module.css
+++ b/packages/design-system/lib/components/Map/InteractiveMap/interactiveMap.module.css
@@ -0,0 +1,80 @@
+.mapContainer {
+  --button-box-shadow: 0 0 8px 1px rgba(0, 0, 0, 0.1);
+  width: 100%;
+  height: 100%;
+  position: relative;
+  z-index: 0;
+}
+
+.mapContainer :global(.gm-style .gm-style-iw-d) {
+  padding: 0 !important;
+  overflow: hidden !important;
+  max-height: none !important;
+  max-width: none !important;
+}
+
+.mapContainer :global(.gm-style .gm-style-iw-c) {
+  padding: 0 !important;
+  overflow: hidden !important;
+  max-height: none !important;
+  max-width: none !important;
+}
+
+.mapContainer::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  right: 0;
+  background: linear-gradient(
+    43deg,
+    rgba(172, 172, 172, 0) 57.66%,
+    rgba(0, 0, 0, 0.25) 92.45%
+  );
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+}
+
+.ctaButtons {
+  position: absolute;
+  top: var(--Spacing-x2);
+  right: var(--Spacing-x2);
+  z-index: 1;
+  display: flex;
+  flex-direction: column;
+  gap: var(--Spacing-x7);
+  align-items: flex-end;
+  pointer-events: none;
+}
+
+.zoomButtons {
+  display: grid;
+  gap: var(--Spacing-x2);
+}
+
+.closeButton {
+  pointer-events: initial;
+  box-shadow: var(--button-box-shadow);
+  gap: var(--Spacing-x-half);
+}
+
+.zoomButton {
+  width: var(--Space-x5);
+  height: var(--Space-x5);
+  padding: 0;
+  pointer-events: initial;
+  box-shadow: var(--button-box-shadow);
+}
+
+@media screen and (min-width: 768px) {
+  .ctaButtons {
+    top: var(--Spacing-x4);
+    right: var(--Spacing-x5);
+    bottom: var(--Spacing-x7);
+    justify-content: space-between;
+  }
+
+  .zoomButtons {
+    display: flex;
+  }
+}