scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
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
Download Patch File Download Diff File Expand all files Collapse all files

4
apps/scandic-web/components/ContentType/DestinationPage/DestinationCityPage/index.tsx
View File

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

7
apps/scandic-web/components/ContentType/DestinationPage/DestinationCountryPage/index.tsx
View File

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

18
apps/scandic-web/components/ContentType/DestinationPage/SidebarContentWrapper/index.tsx
View File

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

7
apps/scandic-web/components/ContentType/DestinationPage/SidebarContentWrapper/sidebarContentWrapper.module.css
View File

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