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

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

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

3
apps/scandic-web/app/[lang]/(live)/(protected)/my-pages/@breadcrumbs/[...path]/page.tsx
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>
)
}

23
apps/scandic-web/app/[lang]/(live)/(public)/[contentType]/[uid]/@breadcrumbs/page.tsx
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>
)
}

10
apps/scandic-web/components/Breadcrumbs/index.tsx
View File

@@ -5,11 +5,15 @@ import { generateBreadcrumbsSchema } from "@/utils/jsonSchemas"
import type { BreadcrumbsProps } from "@/components/TempDesignSystem/Breadcrumbs/breadcrumbs"
interface Props extends Pick<BreadcrumbsProps, "variant"> {
interface Props extends Pick<BreadcrumbsProps, "color" | "size"> {
subpageTitle?: string
}
export default async function Breadcrumbs({ variant, subpageTitle }: Props) {
export default async function Breadcrumbs({
color,
size,
subpageTitle,
}: Props) {
const breadcrumbs = await serverClient().contentstack.breadcrumbs.get()
if (!breadcrumbs?.length) {
return null
@@ -29,7 +33,7 @@ export default async function Breadcrumbs({ variant, subpageTitle }: Props) {
__html: JSON.stringify(jsonSchema.jsonLd),
}}
/>
<BreadcrumbsComp breadcrumbs={breadcrumbs} variant={variant} />
<BreadcrumbsComp breadcrumbs={breadcrumbs} color={color} size={size} />
</>
)
}

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

@@ -21,8 +21,6 @@ import DestinationCityPageSkeleton from "./DestinationCityPageSkeleton"
import styles from "./destinationCityPage.module.css"
import { PageContentTypeEnum } from "@/types/requests/contentType"
export default async function DestinationCityPage() {
const pageData = await getDestinationCityPage()
@@ -51,9 +49,7 @@ export default async function DestinationCityPage() {
<div className={styles.pageContainer}>
<header className={styles.header}>
<Suspense fallback={<BreadcrumbsSkeleton />}>
<Breadcrumbs
variant={PageContentTypeEnum.destinationCityPage}
/>
<Breadcrumbs />
</Suspense>
{images?.length ? (
<TopImages images={images} destinationName={city.name} />

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

@@ -18,8 +18,6 @@ import DestinationCountryPageSkeleton from "./DestinationCountryPageSkeleton"
import styles from "./destinationCountryPage.module.css"
import { PageContentTypeEnum } from "@/types/requests/contentType"
export default async function DestinationCountryPage() {
const pageData = await getDestinationCountryPage()
@@ -48,9 +46,7 @@ export default async function DestinationCountryPage() {
<div className={styles.pageContainer}>
<header className={styles.header}>
<Suspense fallback={<BreadcrumbsSkeleton />}>
<Breadcrumbs
variant={PageContentTypeEnum.destinationCityPage}
/>
<Breadcrumbs />
</Suspense>
{images?.length ? (
<TopImages

5
apps/scandic-web/components/ContentType/HotelPage/index.tsx
View File

@@ -43,7 +43,6 @@ import styles from "./hotelPage.module.css"
import type { HotelPageProps } from "@/types/components/hotelPage/hotelPage"
import { HotelHashValues } from "@/types/components/hotelPage/tabNavigation"
import { PageContentTypeEnum } from "@/types/requests/contentType"
export default async function HotelPage({ hotelId }: HotelPageProps) {
const lang = getLang()
@@ -147,8 +146,8 @@ export default async function HotelPage({ hotelId }: HotelPageProps) {
}}
/>
<header className={styles.header}>
<Suspense fallback={<BreadcrumbsSkeleton />}>
<Breadcrumbs variant={PageContentTypeEnum.hotelPage} />
<Suspense fallback={<BreadcrumbsSkeleton size="headerWidth" />}>
<Breadcrumbs size="headerWidth" />
</Suspense>
{images?.length ? (
<PreviewImages images={images} hotelName={name} />

1
apps/scandic-web/components/ContentType/HotelSubpage/hotelSubpage.module.css
View File

@@ -4,7 +4,6 @@
.header {
display: grid;
gap: var(--Spacing-x4);
background-color: var(--Base-Surface-Subtle-Normal);
padding-bottom: var(--Spacing-x4);
}

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

@@ -77,11 +77,8 @@ export default async function HotelSubpage({
<StickyMeetingPackageWidget destination={meetingPackageDestination} />
)}
<div className={styles.header}>
<Suspense fallback={<BreadcrumbsSkeleton />}>
<Breadcrumbs
variant="hotelSubpage"
subpageTitle={pageData.heading}
/>
<Suspense fallback={<BreadcrumbsSkeleton size="contentWidth" />}>
<Breadcrumbs subpageTitle={pageData.heading} size="contentWidth" />
</Suspense>
{pageData.heroImage ? (

13
apps/scandic-web/components/ContentType/StaticPages/ContentPage/index.tsx
View File

@@ -8,8 +8,6 @@ import BreadcrumbsSkeleton from "@/components/TempDesignSystem/Breadcrumbs/Bread
import StaticPage from ".."
import { PageContentTypeEnum } from "@/types/requests/contentType"
export default async function ContentPage() {
const contentPageRes = await serverClient().contentstack.contentPage.get()
@@ -26,8 +24,15 @@ export default async function ContentPage() {
destination={contentPage.meeting_package.location}
/>
)}
<Suspense fallback={<BreadcrumbsSkeleton />}>
<Breadcrumbs variant={PageContentTypeEnum.contentPage} />
<Suspense
fallback={
<BreadcrumbsSkeleton
color="Surface/Secondary/Default"
size="contentWidth"
/>
}
>
<Breadcrumbs color="Surface/Secondary/Default" size="contentWidth" />
</Suspense>
<StaticPage
content={contentPage}

15
apps/scandic-web/components/ContentType/StaticPages/staticPage.module.css
View File

@@ -4,7 +4,7 @@
.header {
background-color: var(--Base-Surface-Subtle-Normal);
padding: var(--Spacing-x4) 0;
padding-bottom: var(--Spacing-x4);
}
.headerContent {
@@ -32,7 +32,6 @@
}
.contentContainer {
padding-top: var(--Spacing-x4);
width: 100%;
padding: var(--Spacing-x4) var(--Spacing-x2) 0;
}
@@ -83,21 +82,9 @@
.headerIntro {
gap: var(--Spacing-x3);
}
.header {
padding: var(--Spacing-x4) 0;
}
}
@media (min-width: 1367px) {
.heroContainer {
padding: var(--Spacing-x4) 0;
}
.contentContainer {
padding: var(--Spacing-x4) 0 0;
}
.content .contentContainer {
grid-template-areas: "main sidebar";
grid-template-columns: var(--max-width-text-block) 1fr;

12
apps/scandic-web/components/TempDesignSystem/Breadcrumbs/Breadcrumb.tsx
View File

@@ -1,9 +1,9 @@
import { cx } from "class-variance-authority"
import Link from "next/link"
import { Breadcrumb as AriaBreadcrumb } from "react-aria-components"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import Link from "@/components/TempDesignSystem/Link"
import { Typography } from "@scandic-hotels/design-system/Typography"
import styles from "./breadcrumbs.module.css"
@@ -19,9 +19,11 @@ export function Breadcrumb({
<AriaBreadcrumb className={cx(styles.listItem, className)} {...props}>
{href ? (
<>
<Link color="peach80" href={href} variant="breadcrumb">
{children}
</Link>
<Typography variant="Label/xsRegular">
<Link className={styles.link} href={href}>
{children}
</Link>
</Typography>
<MaterialIcon
icon="chevron_right"
size={20}

22
apps/scandic-web/components/TempDesignSystem/Breadcrumbs/BreadcrumbsSkeleton/index.tsx
View File

@@ -1,17 +1,25 @@
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import { Typography } from "@scandic-hotels/design-system/Typography"
import SkeletonShimmer from "@/components/SkeletonShimmer"
import styles from "@/components/TempDesignSystem/Breadcrumbs/breadcrumbs.module.css"
import Footnote from "@/components/TempDesignSystem/Text/Footnote"
export default function BreadcrumbsSkeleton() {
import { breadcrumbsVariants } from "../variants"
import type { BreadcrumbsProps } from "../breadcrumbs"
export default function BreadcrumbsSkeleton({
color,
size,
}: Pick<BreadcrumbsProps, "color" | "size">) {
const classNames = breadcrumbsVariants({ color, size })
return (
<nav className={styles.breadcrumbs}>
<nav className={classNames}>
<ul className={styles.list}>
<li className={styles.listItem}>
<MaterialIcon
icon="home"
size={16}
size={20}
color="Icon/Interactive/Secondary"
/>
<MaterialIcon
@@ -23,9 +31,9 @@ export default function BreadcrumbsSkeleton() {
</li>
<li className={styles.listItem}>
<Footnote color="burgundy" type="bold">
<SkeletonShimmer width={"12ch"} />
</Footnote>
<Typography variant="Label/xsBold">
<SkeletonShimmer width="20ch" />
</Typography>
</li>
</ul>
</nav>

48
apps/scandic-web/components/TempDesignSystem/Breadcrumbs/breadcrumbs.module.css
View File

@@ -2,30 +2,33 @@
padding: var(--Spacing-x4) 0 var(--Spacing-x3);
margin: 0 auto;
width: 100%;
max-width: var(--max-width-page);
}
.breadcrumbs.fullWidth {
max-width: var(--max-width-page);
.breadcrumbs.transparent {
background-color: transparent;
}
.breadcrumbs.surfaceSecondaryDefault {
background-color: var(--Surface-Secondary-Default);
}
.breadcrumbs.surfacePrimaryOnSurfaceDefault {
background-color: var(--Surface-Primary-On-Surface-Default);
}
.breadcrumbs.contentWidth {
max-width: var(--max-width-content);
}
.breadcrumbs.contentWidth {
background-color: var(--Base-Surface-Subtle-Normal);
padding-bottom: 0;
}
.breadcrumbs.headerWidth {
max-width: min(var(--max-width-page), calc(100% - var(--max-width-spacing)));
}
.list {
.breadcrumbs .list {
display: flex;
gap: var(--Spacing-x-quarter);
padding-inline-start: 0;
margin: 0 auto;
}
.breadcrumbs.contentWidth .list {
max-width: var(--max-width-content);
}
.breadcrumbs.headerWidth .list {
max-width: min(var(--max-width-page), calc(100% - var(--max-width-spacing)));
}
.breadcrumbs.pageWidth .list {
max-width: var(--max-width-page);
}
.list .listItem:last-of-type {
@@ -58,6 +61,16 @@
/* this increases the width of the button for tapping */
padding: 0 5px;
margin: 0 -5px;
color: var(--Base-Text-High-contrast);
}
.link {
color: var(--Text-Interactive-Secondary);
}
.link:hover,
.button:hover {
color: var(--Text-Interactive-Hover-Secondary);
}
.dialog {
@@ -76,6 +89,7 @@
display: block;
border-radius: var(--Corner-radius-Medium);
padding: var(--Spacing-x1);
color: var(--Text-Default);
}
.dialogLink:focus,

44
apps/scandic-web/components/TempDesignSystem/Breadcrumbs/index.tsx
View File

@@ -1,6 +1,7 @@
"use client"
import { cx } from "class-variance-authority"
import Link from "next/link"
import { useEffect, useState } from "react"
import {
Breadcrumbs as AriaBreadcrumbs,
@@ -16,9 +17,7 @@ import { Typography } from "@scandic-hotels/design-system/Typography"
import { debounce } from "@/utils/debounce"
import Link from "../Link"
import { Arrow } from "../Popover/Arrow"
import Footnote from "../Text/Footnote"
import { Breadcrumb } from "./Breadcrumb"
import { splitBreadcrumbs } from "./utils"
import { breadcrumbsVariants } from "./variants"
@@ -29,7 +28,8 @@ import type { BreadcrumbsProps } from "./breadcrumbs"
export default function Breadcrumbs({
breadcrumbs,
variant,
color,
size,
}: BreadcrumbsProps) {
// using a ref instead to detect when the element is available and forcing a render
const [element, attachRef] = useState<HTMLButtonElement | null>(null)
@@ -59,7 +59,8 @@ export default function Breadcrumbs({
}
const classNames = breadcrumbsVariants({
variant,
color,
size,
})
const [homeBreadcrumb, remainingBreadcrumbs, lastBreadcrumb] =
@@ -72,9 +73,14 @@ export default function Breadcrumbs({
href={homeBreadcrumb.href}
aria-label={homeBreadcrumb.title}
>
<MaterialIcon icon="home" size={16} color="CurrentColor" />
<MaterialIcon
icon="home"
size={20}
color="Icon/Interactive/Secondary"
/>
</Breadcrumb>
{/* These breadcrumbs are visible on mobile only */}
{remainingBreadcrumbs.length >= 3 ? (
<>
<Breadcrumb
@@ -85,20 +91,24 @@ export default function Breadcrumbs({
</Breadcrumb>
<Breadcrumb className={styles.mobile}>
<DialogTrigger>
<Footnote color="burgundy" type="bold" asChild>
<Typography variant="Label/xsRegular">
<Button className={styles.button}>…</Button>
</Footnote>
</Typography>
<Popover>
<Dialog className={styles.dialog}>
{remainingBreadcrumbs.slice(1).map((breadcrumb) => (
<Link
href={breadcrumb.href!}
size="tiny"
<Typography
key={breadcrumb.uid}
className={styles.dialogLink}
variant="Label/xsRegular"
className={styles.dialogItem}
>
{breadcrumb.title}
</Link>
<Link
href={breadcrumb.href!}
className={styles.dialogLink}
>
{breadcrumb.title}
</Link>
</Typography>
))}
</Dialog>
</Popover>
@@ -122,6 +132,8 @@ export default function Breadcrumbs({
</Breadcrumb>
))
)}
{/* These breadcrumbs are visible on desktop only */}
{remainingBreadcrumbs.map((breadcrumb) => (
<Breadcrumb
key={breadcrumb.uid}
@@ -131,9 +143,11 @@ export default function Breadcrumbs({
{breadcrumb.title}
</Breadcrumb>
))}
{/* Current page breadcrumb */}
<Breadcrumb>
<DialogTrigger>
<Footnote color="burgundy" type="bold" asChild>
<Typography variant="Label/xsBold">
<Button
className={cx(styles.button, styles.tooltipTrigger)}
ref={attachRef}
@@ -141,7 +155,7 @@ export default function Breadcrumbs({
>
{lastBreadcrumb.title}
</Button>
</Footnote>
</Typography>
<Popover placement="bottom" offset={16}>
<Dialog className={styles.tooltip}>
<OverlayArrow>

4
apps/scandic-web/components/TempDesignSystem/Breadcrumbs/utils.ts
View File

@@ -1,7 +1,5 @@
import type { Breadcrumb } from "./breadcrumbs"
export { splitBreadcrumbs }
function splitBreadcrumbs(
breadcrumbs: Breadcrumb[]
): [Breadcrumb, Breadcrumb[], Breadcrumb] {
@@ -10,3 +8,5 @@ function splitBreadcrumbs(
const last = copy.pop()!
return [first, copy, last]
}
export { splitBreadcrumbs }

27
apps/scandic-web/components/TempDesignSystem/Breadcrumbs/variants.ts
View File

@@ -2,25 +2,22 @@ import { cva } from "class-variance-authority"
import styles from "./breadcrumbs.module.css"
import { PageContentTypeEnum } from "@/types/requests/contentType"
export const breadcrumbsVariants = cva(styles.breadcrumbs, {
variants: {
variant: {
[PageContentTypeEnum.accountPage]: styles.fullWidth,
[PageContentTypeEnum.contentPage]: styles.contentWidth,
[PageContentTypeEnum.collectionPage]: styles.contentWidth,
[PageContentTypeEnum.destinationOverviewPage]: styles.fullWidth,
[PageContentTypeEnum.destinationCountryPage]: styles.fullWidth,
[PageContentTypeEnum.destinationCityPage]: styles.fullWidth,
[PageContentTypeEnum.hotelPage]: styles.headerWidth,
[PageContentTypeEnum.loyaltyPage]: styles.fullWidth,
[PageContentTypeEnum.startPage]: styles.contentWidth,
hotelSubpage: styles.contentWidth,
default: styles.fullWidth,
color: {
transparent: styles.transparent,
"Surface/Secondary/Default": styles.surfaceSecondaryDefault,
"Surface/Primary/OnSurface/Default":
styles.surfacePrimaryOnSurfaceDefault,
},
size: {
pageWidth: styles.pageWidth,
headerWidth: styles.headerWidth,
contentWidth: styles.contentWidth,
},
},
defaultVariants: {
variant: "default",
color: "transparent",
size: "pageWidth",
},
})