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

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",
},
})