feat(SW-1888): Removed link from tripadvisor text on hotel pages

* feat(SW-1888): Removed link from tripadvisor text on hotel pages


Approved-by: Fredrik Thorsson
This commit is contained in:
Erik Tiekstra
2025-03-12 10:39:12 +00:00
parent ad05f792fb
commit 198f0da748
2 changed files with 17 additions and 14 deletions

View File

@@ -30,9 +30,7 @@ export default async function IntroSection({
const formattedLocationText = `${streetAddress}, ${city} (${formattedDistanceText})` const formattedLocationText = `${streetAddress}, ${city} (${formattedDistanceText})`
const hasTripAdvisorData = !!( const hasTripAdvisorData = !!(
tripAdvisor?.rating && tripAdvisor?.rating && tripAdvisor?.numberOfReviews
tripAdvisor?.numberOfReviews &&
tripAdvisor?.webUrl
) )
const formattedTripAdvisorText = hasTripAdvisorData const formattedTripAdvisorText = hasTripAdvisorData
? intl.formatMessage( ? intl.formatMessage(
@@ -53,18 +51,11 @@ export default async function IntroSection({
</Typography> </Typography>
</div> </div>
<Body color="uiTextMediumContrast">{formattedLocationText}</Body> <Body color="uiTextMediumContrast">{formattedLocationText}</Body>
{hasTripAdvisorData && ( {formattedTripAdvisorText && (
<Link <span className={styles.tripAdvisorText}>
className={styles.introLink} <TripAdvisorIcon />
target="_blank"
variant="icon"
textDecoration="underline"
color="peach80"
href={tripAdvisor.webUrl}
>
<TripAdvisorIcon color="peach80" />
{formattedTripAdvisorText} {formattedTripAdvisorText}
</Link> </span>
)} )}
</div> </div>
<div className={styles.subtitleContent}> <div className={styles.subtitleContent}>

View File

@@ -15,6 +15,18 @@
gap: var(--Spacing-x-one-and-half); gap: var(--Spacing-x-one-and-half);
} }
.tripAdvisorText {
display: flex;
gap: var(--Space-x05);
align-items: center;
color: var(--Text-Interactive-Secondary);
}
.tripAdvisorText svg,
.tripAdvisorText svg * {
fill: var(--Text-Interactive-Secondary);
}
.introLink { .introLink {
text-decoration-color: var(--Scandic-Peach-80); text-decoration-color: var(--Scandic-Peach-80);
width: fit-content; width: fit-content;