Merged in feat/SW-3276-hotel-page-phone-number (pull request #2703)

feat(SW-3276): update hotel page intro section

* feat(SW-3276): update hotel page intro section

* fix(SW-3276): update Link component


Approved-by: Erik Tiekstra

apps/scandic-web/components/ContentType/HotelPage/IntroSection/TripAdvisorLink/index.tsx

@@ -50,9 +50,10 @@ export default async function TripAdvisorLink({
       variant="icon"
       textDecoration="underline"
       color="Text/Interactive/Secondary"
+      size="small"
       href={tripAdvisorHref}
     >
-      <TripadvisorIcon color="CurrentColor" />
+      <TripadvisorIcon color="CurrentColor" size={20} />
       {formattedTripAdvisorText}
     </Link>
   )

apps/scandic-web/components/ContentType/HotelPage/IntroSection/index.tsx

@@ -1,5 +1,6 @@
 import { getSingleDecimal } from "@scandic-hotels/common/utils/numberFormatting"
 import ButtonLink from "@scandic-hotels/design-system/ButtonLink"
+import { Divider } from "@scandic-hotels/design-system/Divider"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
@@ -9,8 +10,23 @@ import TripAdvisorLink from "./TripAdvisorLink"
 
 import styles from "./introSection.module.css"
 
+import type {
+  Hotel,
+  HotelAddress,
+  HotelLocation,
+  HotelTripAdvisor,
+} from "@scandic-hotels/trpc/types/hotel"
+
 import { SidepeekSlugs } from "@/types/components/hotelPage/hotelPage"
-import type { IntroSectionProps } from "./types"
+
+interface IntroSectionProps {
+  address: HotelAddress
+  hotelDescription: string | undefined
+  hotelName: Hotel["name"]
+  location: HotelLocation
+  tripAdvisor: HotelTripAdvisor
+  phoneNumber: string
+}
 
 export default async function IntroSection({
   hotelName,
@@ -18,6 +34,7 @@ export default async function IntroSection({
   location,
   address,
   tripAdvisor,
+  phoneNumber,
 }: IntroSectionProps) {
   const intl = await getIntl()
   const { streetAddress, city } = address
@@ -46,10 +63,27 @@ export default async function IntroSection({
             <h1 className={styles.title}>{hotelName}</h1>
           </Typography>
         </div>
-        <Typography variant="Body/Supporting text (caption)/smRegular">
-          <p className={styles.bodyText}>{formattedLocationText}</p>
-        </Typography>
-
+        <address className={styles.adressPhoneNumber}>
+          <span className={styles.location}>
+            <span className={styles.address}>
+              <MaterialIcon icon="location_on" color="CurrentColor" size={20} />
+              <Typography variant="Body/Supporting text (caption)/smRegular">
+                <p>{formattedLocationText}</p>
+              </Typography>
+            </span>
+            <Divider
+              variant="vertical"
+              color="Border/Divider/Default"
+              className={styles.divider}
+            />
+          </span>
+          <Typography variant="Body/Underline/sm">
+            <a href={`tel:${phoneNumber}`} className={styles.phoneNumber}>
+              <MaterialIcon icon="phone" color="CurrentColor" size={20} />
+              {phoneNumber}
+            </a>
+          </Typography>
+        </address>
         {tripAdvisor ? <TripAdvisorLink tripAdvisor={tripAdvisor} /> : null}
       </div>
       <div className={styles.subtitleContent}>

apps/scandic-web/components/ContentType/HotelPage/IntroSection/introSection.module.css

@@ -7,7 +7,7 @@
 
 .mainContent {
   display: grid;
-  gap: var(--Space-x1);
+  gap: var(--Space-x15);
   justify-items: start;
 }
 
@@ -21,10 +21,6 @@
   color: var(--Text-Heading);
 }
 
-.bodyText {
-  color: var(--Text-Secondary);
-}
-
 .script {
   transform: rotate(-4deg);
   color: var(--Text-Accent-Primary);
@@ -34,3 +30,45 @@
   display: grid;
   gap: var(--Space-x2);
 }
+
+.adressPhoneNumber {
+  font-style: normal;
+  display: grid;
+  gap: var(--Space-x15);
+  align-items: center;
+}
+
+.phoneNumber {
+  color: var(--Text-Interactive-Default);
+  display: flex;
+  gap: var(--Space-x05);
+  align-items: center;
+}
+
+.address {
+  color: var(--Text-Secondary);
+  gap: var(--Space-x05);
+  align-items: start;
+  display: flex;
+}
+
+.location {
+  display: flex;
+  gap: var(--Space-x2);
+}
+
+.divider {
+  height: 20px;
+}
+
+@media screen and (min-width: 767px) {
+  .adressPhoneNumber {
+    display: flex;
+    flex-direction: row;
+    gap: var(--Space-x2);
+  }
+
+  .address {
+    align-items: center;
+  }
+}

apps/scandic-web/components/ContentType/HotelPage/IntroSection/types.ts

@@ -1,14 +0,0 @@
-import type {
-  Hotel,
-  HotelAddress,
-  HotelLocation,
-  HotelTripAdvisor,
-} from "@scandic-hotels/trpc/types/hotel"
-
-export type IntroSectionProps = {
-  address: HotelAddress
-  hotelDescription: string | undefined
-  hotelName: Hotel["name"]
-  location: HotelLocation
-  tripAdvisor: HotelTripAdvisor
-}

apps/scandic-web/components/ContentType/HotelPage/index.tsx

@@ -182,6 +182,7 @@ export default async function HotelPage({ hotelId }: HotelPageProps) {
               location={location}
               address={address}
               tripAdvisor={ratings?.tripAdvisor}
+              phoneNumber={contactInformation.phoneNumber}
             />
 
             <AmenitiesList detailedFacilities={detailedFacilities} />

apps/scandic-web/components/Current/Header/MyPagesMobileDropdown/index.tsx

@@ -77,7 +77,7 @@ function PrimaryLinks({ handleOnClick }: { handleOnClick: () => void }) {
             <Link
               href={link.href}
               partialMatch
-              size="regular"
+              size="large"
               variant="myPageMobileDropdown"
               onClick={handleOnClick}
             >