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({
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',
},
})