diff --git a/apps/scandic-web/components/ContentType/HotelPage/IntroSection/TripAdvisorLink/index.tsx b/apps/scandic-web/components/ContentType/HotelPage/IntroSection/TripAdvisorLink/index.tsx index 13626b88d..f8ce872f4 100644 --- a/apps/scandic-web/components/ContentType/HotelPage/IntroSection/TripAdvisorLink/index.tsx +++ b/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} > - + {formattedTripAdvisorText} ) diff --git a/apps/scandic-web/components/ContentType/HotelPage/IntroSection/index.tsx b/apps/scandic-web/components/ContentType/HotelPage/IntroSection/index.tsx index b43af5f88..a6caa232e 100644 --- a/apps/scandic-web/components/ContentType/HotelPage/IntroSection/index.tsx +++ b/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({

{hotelName}

- -

{formattedLocationText}

-
- +
+ + + + +

{formattedLocationText}

+
+
+ +
+ + + + {phoneNumber} + + +
{tripAdvisor ? : null}
diff --git a/apps/scandic-web/components/ContentType/HotelPage/IntroSection/introSection.module.css b/apps/scandic-web/components/ContentType/HotelPage/IntroSection/introSection.module.css index d3386eb22..ce9c9eeed 100644 --- a/apps/scandic-web/components/ContentType/HotelPage/IntroSection/introSection.module.css +++ b/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; + } +} diff --git a/apps/scandic-web/components/ContentType/HotelPage/IntroSection/types.ts b/apps/scandic-web/components/ContentType/HotelPage/IntroSection/types.ts deleted file mode 100644 index a565943c8..000000000 --- a/apps/scandic-web/components/ContentType/HotelPage/IntroSection/types.ts +++ /dev/null @@ -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 -} diff --git a/apps/scandic-web/components/ContentType/HotelPage/index.tsx b/apps/scandic-web/components/ContentType/HotelPage/index.tsx index 2dd2f6f47..9a848d573 100644 --- a/apps/scandic-web/components/ContentType/HotelPage/index.tsx +++ b/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} /> diff --git a/apps/scandic-web/components/Current/Header/MyPagesMobileDropdown/index.tsx b/apps/scandic-web/components/Current/Header/MyPagesMobileDropdown/index.tsx index 3271bcb65..cad130996 100644 --- a/apps/scandic-web/components/Current/Header/MyPagesMobileDropdown/index.tsx +++ b/apps/scandic-web/components/Current/Header/MyPagesMobileDropdown/index.tsx @@ -77,7 +77,7 @@ function PrimaryLinks({ handleOnClick }: { handleOnClick: () => void }) { diff --git a/packages/design-system/lib/components/Link/link.module.css b/packages/design-system/lib/components/Link/link.module.css index 5591a3714..db533d943 100644 --- a/packages/design-system/lib/components/Link/link.module.css +++ b/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); diff --git a/packages/design-system/lib/components/Link/variants.ts b/packages/design-system/lib/components/Link/variants.ts index 060c9bde6..0ad4dff94 100644 --- a/packages/design-system/lib/components/Link/variants.ts +++ b/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', }, })