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}
             >

packages/design-system/lib/components/Link/link.module.css

@@ -117,22 +117,23 @@
   }
 }
 
-.regular {
-  font-family: var(--typography-Body-Regular-fontFamily);
-  font-size: var(--typography-Body-Regular-fontSize);
-  font-weight: 400;
-  letter-spacing: var(--typography-Body-Regular-letterSpacing);
-  line-height: var(--typography-Body-Regular-lineHeight);
+.large {
+  font-family: var(--Link-md-Font-family);
+  font-size: var(--Link-md-Size);
+  font-weight: var(--Link-md-Font-weight);
+  letter-spacing: var(--Link-md-Letter-spacing);
+  line-height: 150%;
 }
 
 .small {
-  font-family: var(--typography-Caption-Regular-fontFamily);
-  font-size: var(--typography-Caption-Regular-fontSize);
-  font-weight: 400;
-  letter-spacing: var(--typography-Caption-Regular-letterSpacing);
-  line-height: var(--typography-Caption-Regular-lineHeight);
+  font-family: var(--Link-sm-Font-family);
+  font-size: var(--Link-sm-Size);
+  font-weight: var(--Link-sm-Font-weight);
+  letter-spacing: var(--Link-sm-Letter-spacing);
+  line-height: 140%;
 }
 
+/* Tiny should be removed, it's not a variant of the Link*/
 .tiny {
   font-family: var(--typography-Footnote-Regular-fontFamily);
   font-size: var(--typography-Footnote-Regular-fontSize);

packages/design-system/lib/components/Link/variants.ts

@@ -17,7 +17,7 @@ export const linkVariants = cva(styles.link, {
     },
     size: {
       small: styles.small,
-      regular: styles.regular,
+      large: styles.large,
       tiny: styles.tiny,
       none: '',
     },
@@ -39,6 +39,6 @@ export const linkVariants = cva(styles.link, {
   },
   defaultVariants: {
     color: 'Text/Interactive/Default',
-    size: 'regular',
+    size: 'large',
   },
 })