Feat/BOOK-63 hotel subpages branding

* feat(BOOK-63): Replaced css variables and components to apply hotel branding on subpages
* feat(BOOK-63): Replaced css variables and components to apply hotel branding on hotel page map view

Approved-by: Christel Westerberg
Approved-by: Matilda Landström

packages/design-system/lib/components/Map/InteractiveMap/interactiveMap.module.css

@@ -4,77 +4,63 @@
   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;
-}
+  &::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;
+  }
 
-.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;
+  :global(.gm-style .gm-style-iw-d),
+  :global(.gm-style .gm-style-iw-c) {
+    padding: 0 !important;
+    overflow: hidden !important;
+    max-height: none !important;
+    max-width: none !important;
+  }
 }
 
 .ctaButtons {
   position: absolute;
-  top: var(--Spacing-x2);
-  right: var(--Spacing-x2);
-  z-index: 1;
+  top: var(--Space-x2);
+  right: var(--Space-x2);
   display: flex;
+  gap: var(--Space-x7);
   flex-direction: column;
-  gap: var(--Spacing-x7);
   align-items: flex-end;
   pointer-events: none;
+  z-index: 1;
 }
 
 .zoomButtons {
-  display: grid;
-  gap: var(--Spacing-x2);
-}
-
-.closeButton {
-  pointer-events: initial;
-  box-shadow: var(--button-box-shadow);
-  gap: var(--Spacing-x-half);
+  display: flex;
+  gap: var(--Space-x2);
 }
 
 .zoomButton {
-  width: var(--Space-x5);
-  height: var(--Space-x5);
-  padding: 0;
   pointer-events: initial;
-  box-shadow: var(--button-box-shadow);
+}
+
+@media screen and (max-width: 767px) {
+  .zoomButtons {
+    flex-direction: column;
+  }
 }
 
 @media screen and (min-width: 768px) {
   .ctaButtons {
-    top: var(--Spacing-x4);
-    right: var(--Spacing-x5);
-    bottom: var(--Spacing-x7);
+    top: var(--Space-x4);
+    right: var(--Space-x5);
+    bottom: var(--Space-x7);
     justify-content: space-between;
   }
-
-  .zoomButtons {
-    display: flex;
-  }
 }

packages/design-system/lib/components/Map/Markers/PoiMarker/index.tsx

@@ -1,19 +1,14 @@
 import { IconByIconName } from '../../../Icons/IconByIconName'
 
-import { getIconByPoiGroupAndCategory } from '../utils'
+import {
+  getIconByPoiGroupAndCategory,
+  type PointOfInterestGroup,
+} from '../utils'
 import { poiVariants } from './variants'
 
-import { VariantProps } from 'class-variance-authority'
+import type { VariantProps } from 'class-variance-authority'
 
-export type PointOfInterestGroup =
-  | 'Public transport'
-  | 'Attractions'
-  | 'Business'
-  | 'Location'
-  | 'Parking'
-  | 'Shopping & Dining'
-
-export interface PoiMarkerProps extends VariantProps<typeof poiVariants> {
+interface PoiMarkerProps extends VariantProps<typeof poiVariants> {
   group: PointOfInterestGroup
   categoryName?: string
   className?: string
@@ -33,7 +28,7 @@ export function PoiMarker({
     <span className={classNames}>
       <IconByIconName
         iconName={iconName}
-        color={skipBackground ? 'Icon/Feedback/Neutral' : 'Icon/Inverted'}
+        color={skipBackground ? 'CurrentColor' : 'Icon/Inverted'}
         size={size === 'small' ? 16 : size === 'large' ? 24 : 20}
       />
     </span>

packages/design-system/lib/components/Map/Markers/PoiMarker/poiMarker.module.css

@@ -1,9 +1,37 @@
-.icon {
+.poiMarker {
   display: flex;
   justify-content: center;
   align-items: center;
   border-radius: var(--Corner-radius-rounded);
-  background-color: var(--Surface-UI-Fill-Default);
+  background-color: var(--Surface-Feedback-Neutral);
+
+  > span {
+    display: inline-flex;
+  }
+
+  &.skipBackground {
+    background-color: transparent;
+    padding: 0;
+  }
+}
+
+.shoppingDining {
+  background-color: var(--Surface-Accent-1);
+}
+.publicTransport {
+  background-color: var(--Surface-Accent-2);
+}
+.attractions {
+  background-color: var(--Surface-Accent-3);
+}
+.business {
+  background-color: var(--Surface-Accent-4);
+}
+.parking {
+  background-color: var(--Surface-Accent-5);
+}
+.location {
+  background-color: var(--Surface-Feedback-Neutral);
 }
 
 .small {
@@ -14,27 +42,3 @@
   width: var(--Space-x4);
   height: var(--Space-x4);
 }
-
-.attractions {
-  background-color: var(--Surface-Accent-3);
-}
-.business {
-  background-color: var(--Surface-Accent-4);
-}
-.location {
-  background-color: var(--Surface-Feedback-Neutral);
-}
-.parking {
-  background-color: var(--Surface-Accent-5);
-}
-.publicTransport {
-  background-color: var(--Surface-Accent-2);
-}
-.shoppingDining {
-  background-color: var(--Surface-Accent-1);
-}
-
-.icon.transparent {
-  background-color: transparent;
-  padding: 0;
-}

packages/design-system/lib/components/Map/Markers/PoiMarker/variants.ts

@@ -1,9 +1,9 @@
 import { cva } from 'class-variance-authority'
 
-import styles from './poi.module.css'
-import { PointOfInterestGroup } from '.'
+import type { PointOfInterestGroup } from '../utils'
+import styles from './poiMarker.module.css'
 
-export const poiVariants = cva(styles.icon, {
+export const poiVariants = cva(styles.poiMarker, {
   variants: {
     group: {
       ['Attractions']: styles.attractions,
@@ -14,7 +14,7 @@ export const poiVariants = cva(styles.icon, {
       ['Shopping & Dining']: styles.shoppingDining,
     } satisfies Record<PointOfInterestGroup, string>,
     skipBackground: {
-      true: styles.transparent,
+      true: styles.skipBackground,
       false: '',
     },
     size: {

packages/design-system/lib/components/Map/Markers/utils.ts

@@ -1,5 +1,12 @@
 import { IconName } from '../../Icons/iconName'
-import { PointOfInterestGroup } from './PoiMarker'
+
+export type PointOfInterestGroup =
+  | 'Public transport'
+  | 'Attractions'
+  | 'Business'
+  | 'Location'
+  | 'Parking'
+  | 'Shopping & Dining'
 
 export function getIconByPoiGroupAndCategory(
   group: PointOfInterestGroup,