Merged in fix/SW-2118-breadcrumbs (pull request #1721)

fix(SW-2118): changed variants for breadcrumbs to handle different background-colors and widths

* fix(SW-2118): changed variants for breadcrumbs to handle different background-colors and widths


Approved-by: Christian Andolf
Approved-by: Linus Flood
This commit is contained in:
Erik Tiekstra
2025-04-07 14:02:39 +00:00
committed by Linus Flood
parent a9c6901752
commit 85a90baa12
16 changed files with 141 additions and 105 deletions

View File

@@ -4,12 +4,11 @@ import Breadcrumbs from "@/components/Breadcrumbs"
import BreadcrumbsSkeleton from "@/components/TempDesignSystem/Breadcrumbs/BreadcrumbsSkeleton"
import type { LangParams, PageArgs } from "@/types/params"
import { PageContentTypeEnum } from "@/types/requests/contentType"
export default function AllBreadcrumbs({}: PageArgs<LangParams>) {
return (
<Suspense fallback={<BreadcrumbsSkeleton />}>
<Breadcrumbs variant={PageContentTypeEnum.accountPage} />
<Breadcrumbs />
</Suspense>
)
}

View File

@@ -5,14 +5,31 @@ import BreadcrumbsSkeleton from "@/components/TempDesignSystem/Breadcrumbs/Bread
import type { ContentTypeParams, LangParams, PageArgs } from "@/types/params"
import { PageContentTypeEnum } from "@/types/requests/contentType"
import type { BreadcrumbsProps } from "@/components/TempDesignSystem/Breadcrumbs/breadcrumbs"
// This is a temporary solution to avoid showing breadcrumbs on certain content types.
// This should be refactored in the future to handle content types differently, similar to `destination_overview_page`.
const IGNORED_CONTENT_TYPES = [
PageContentTypeEnum.hotelPage,
PageContentTypeEnum.contentPage,
PageContentTypeEnum.destinationCityPage,
PageContentTypeEnum.destinationCountryPage,
PageContentTypeEnum.destinationOverviewPage,
PageContentTypeEnum.startPage,
]
// This function is temporary until the content types are refactored and handled differently, similar to `destination_overview_page`.
function getBreadcrumbsVariantsByContentType(
contentType: PageContentTypeEnum
): Pick<BreadcrumbsProps, "color" | "size"> | null {
switch (contentType) {
case PageContentTypeEnum.collectionPage:
return { color: "Surface/Secondary/Default", size: "contentWidth" }
default:
return null
}
}
export default function PageBreadcrumbs({
params,
}: PageArgs<LangParams & ContentTypeParams>) {
@@ -20,9 +37,11 @@ export default function PageBreadcrumbs({
return null
}
const variants = getBreadcrumbsVariantsByContentType(params.contentType)
return (
<Suspense fallback={<BreadcrumbsSkeleton />}>
<Breadcrumbs variant={params.contentType} />
<Suspense fallback={<BreadcrumbsSkeleton {...variants} />}>
<Breadcrumbs {...variants} />
</Suspense>
)
}