feat(SW-1907): Not rendering preamble when at least one filter is active on destination pages

Approved-by: Fredrik Thorsson
Approved-by: Matilda Landström
This commit is contained in:
Erik Tiekstra
2025-03-19 08:46:44 +00:00
parent b2b197b1ef
commit 9688232b2d
4 changed files with 26 additions and 10 deletions

View File

@@ -6,7 +6,6 @@ import { getDestinationCityPage } from "@/lib/trpc/memoizedRequests"
import Blocks from "@/components/Blocks"
import Breadcrumbs from "@/components/Breadcrumbs"
import Body from "@/components/TempDesignSystem/Text/Body"
import ExperienceList from "../ExperienceList"
import HotelDataContainer, { preload } from "../HotelDataContainer"
@@ -60,8 +59,7 @@ export default async function DestinationCityPage() {
{blocks && <Blocks blocks={blocks} />}
</main>
<aside className={styles.sidebar}>
<SidebarContentWrapper location={city.name}>
<Body color="uiTextMediumContrast">{preamble}</Body>
<SidebarContentWrapper location={city.name} preamble={preamble}>
<ExperienceList experiences={experiences} />
{has_sidepeek && sidepeek_content && (
<DestinationPageSidePeek

View File

@@ -5,7 +5,6 @@ import { getDestinationCountryPage } from "@/lib/trpc/memoizedRequests"
import Blocks from "@/components/Blocks"
import Breadcrumbs from "@/components/Breadcrumbs"
import BreadcrumbsSkeleton from "@/components/TempDesignSystem/Breadcrumbs/BreadcrumbsSkeleton"
import Body from "@/components/TempDesignSystem/Text/Body"
import CityDataContainer, { preload } from "../CityDataContainer"
import CityListing from "../CityListing"
@@ -64,8 +63,10 @@ export default async function DestinationCountryPage() {
{blocks && <Blocks blocks={blocks} />}
</main>
<aside className={styles.sidebar}>
<SidebarContentWrapper location={translatedCountry}>
<Body color="uiTextMediumContrast">{preamble}</Body>
<SidebarContentWrapper
location={translatedCountry}
preamble={preamble}
>
<ExperienceList experiences={experiences} />
{has_sidepeek && sidepeek_content && (
<DestinationPageSidePeek

View File

@@ -3,10 +3,11 @@
import { useRef } from "react"
import { useIntl } from "react-intl"
import { Typography } from "@scandic-hotels/design-system/Typography"
import { useDestinationDataStore } from "@/stores/destination-data"
import { StickyElementNameEnum } from "@/stores/sticky-position"
import Title from "@/components/TempDesignSystem/Text/Title"
import useStickyPosition from "@/hooks/useStickyPosition"
import { getHeadingText } from "../utils"
@@ -15,10 +16,12 @@ import styles from "./sidebarContentWrapper.module.css"
interface SidebarContentWrapperProps extends React.PropsWithChildren {
location: string
preamble: string
}
export default function SidebarContentWrapper({
location,
preamble,
children,
}: SidebarContentWrapperProps) {
const intl = useIntl()
@@ -34,9 +37,16 @@ export default function SidebarContentWrapper({
return (
<div ref={sidebarRef} className={styles.sidebarContent}>
<Title level="h1" as="h2">
{getHeadingText(intl, location, allFilters, activeFilters[0])}
</Title>
<Typography variant="Title/md">
<h1 className={styles.heading}>
{getHeadingText(intl, location, allFilters, activeFilters[0])}
</h1>
</Typography>
{!activeFilters.length && (
<Typography variant="Body/Paragraph/mdRegular">
<p className={styles.text}>{preamble}</p>
</Typography>
)}
{children}
</div>
)

View File

@@ -5,6 +5,13 @@
padding: var(--Spacing-x4);
}
.heading {
color: var(--Text-Heading);
}
.text {
color: var(--Text-Default);
}
@media screen and (min-width: 1367px) {
.sidebarContent {
position: sticky;