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

chore: Moved Breadcrumbs to design system and added stories

Browse Source 
Approved-by: Bianca Widstam
This commit is contained in:
Erik Tiekstra
2026-01-21 07:19:19 +00:00
parent 17c78be916
commit 8a143a2916
35 changed files with 524 additions and 357 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
apps/scandic-web/app/[lang]/(live)/(protected)/my-pages/@breadcrumbs/[...path]/page.tsx
View File

@@ -1,11 +1,12 @@
import { Suspense } from "react"
import Breadcrumbs from "@/components/Breadcrumbs"
import BreadcrumbsSkeleton from "@/components/TempDesignSystem/Breadcrumbs/BreadcrumbsSkeleton"
import { BreadcrumbsSkeleton } from "@scandic-hotels/design-system/Breadcrumbs"
import { Breadcrumbs } from "@/components/Breadcrumbs"
export default function AllBreadcrumbs() {
return (
<Suspense fallback={<BreadcrumbsSkeleton />}>
<Suspense fallback={<BreadcrumbsSkeleton size="contentWidth" />}>
<Breadcrumbs size="contentWidth" />
</Suspense>
)

8
apps/scandic-web/app/[lang]/(live)/(public)/(contentTypes)/@breadcrumbs/campaign_overview_page/[uid]/page.tsx
View File

@@ -1,9 +1,11 @@
import { Suspense } from "react"
import Breadcrumbs from "@/components/Breadcrumbs"
import BreadcrumbsSkeleton from "@/components/TempDesignSystem/Breadcrumbs/BreadcrumbsSkeleton"
import {
type BreadcrumbsProps,
BreadcrumbsSkeleton,
} from "@scandic-hotels/design-system/Breadcrumbs"
import type { BreadcrumbsProps } from "@/components/TempDesignSystem/Breadcrumbs/breadcrumbs"
import { Breadcrumbs } from "@/components/Breadcrumbs"
export default function CampaignOverviewPageBreadcrumbs() {
const variants: Pick<BreadcrumbsProps, "color" | "size"> = {

8
apps/scandic-web/app/[lang]/(live)/(public)/(contentTypes)/@breadcrumbs/campaign_page/[uid]/page.tsx
View File

@@ -1,9 +1,11 @@
import { Suspense } from "react"
import Breadcrumbs from "@/components/Breadcrumbs"
import BreadcrumbsSkeleton from "@/components/TempDesignSystem/Breadcrumbs/BreadcrumbsSkeleton"
import {
type BreadcrumbsProps,
BreadcrumbsSkeleton,
} from "@scandic-hotels/design-system/Breadcrumbs"
import type { BreadcrumbsProps } from "@/components/TempDesignSystem/Breadcrumbs/breadcrumbs"
import { Breadcrumbs } from "@/components/Breadcrumbs"
export default function CampaignPageBreadcrumbs() {
const variants: Pick<BreadcrumbsProps, "color" | "size"> = {

10
apps/scandic-web/app/[lang]/(live)/(public)/(contentTypes)/@breadcrumbs/loyalty_page/[uid]/page.tsx
View File

@@ -1,10 +1,12 @@
import { Suspense } from "react"
import Breadcrumbs from "@/components/Breadcrumbs"
import BreadcrumbsSkeleton from "@/components/TempDesignSystem/Breadcrumbs/BreadcrumbsSkeleton"
import { isLoggedInUser } from "@/utils/isLoggedInUser"
import {
type BreadcrumbsProps,
BreadcrumbsSkeleton,
} from "@scandic-hotels/design-system/Breadcrumbs"
import type { BreadcrumbsProps } from "@/components/TempDesignSystem/Breadcrumbs/breadcrumbs"
import { Breadcrumbs } from "@/components/Breadcrumbs"
import { isLoggedInUser } from "@/utils/isLoggedInUser"
export default async function LoyaltyPageBreadcrumbs() {
const isUserLoggedIn = await isLoggedInUser()

8
apps/scandic-web/app/[lang]/(live)/(public)/(contentTypes)/@breadcrumbs/promo_campaign_page/[uid]/page.tsx
View File

@@ -1,9 +1,11 @@
import { Suspense } from "react"
import Breadcrumbs from "@/components/Breadcrumbs"
import BreadcrumbsSkeleton from "@/components/TempDesignSystem/Breadcrumbs/BreadcrumbsSkeleton"
import {
type BreadcrumbsProps,
BreadcrumbsSkeleton,
} from "@scandic-hotels/design-system/Breadcrumbs"
import type { BreadcrumbsProps } from "@/components/TempDesignSystem/Breadcrumbs/breadcrumbs"
import { Breadcrumbs } from "@/components/Breadcrumbs"
export default function PromoCampaignPageBreadcrumbs() {
const variants: Pick<BreadcrumbsProps, "color" | "size"> = {

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

@@ -1,15 +1,18 @@
import {
Breadcrumbs as BreadcrumbsComponent,
type BreadcrumbsProps,
} from "@scandic-hotels/design-system/Breadcrumbs"
import { serverClient } from "@/lib/trpc/server"
import BreadcrumbsComp from "@/components/TempDesignSystem/Breadcrumbs"
import { generateBreadcrumbsSchema } from "@/utils/jsonSchemas"
import type { BreadcrumbsProps } from "@/components/TempDesignSystem/Breadcrumbs/breadcrumbs"
interface Props extends Omit<BreadcrumbsProps, "breadcrumbs"> {
export async function Breadcrumbs({
subpageTitle,
...props
}: Omit<BreadcrumbsProps, "breadcrumbs"> & {
subpageTitle?: string
}
export default async function Breadcrumbs({ subpageTitle, ...props }: Props) {
}) {
const caller = await serverClient()
const breadcrumbs = await caller.contentstack.breadcrumbs.get()
if (!breadcrumbs?.length) {
@@ -30,7 +33,7 @@ export default async function Breadcrumbs({ subpageTitle, ...props }: Props) {
__html: JSON.stringify(jsonSchema.jsonLd),
}}
/>
<BreadcrumbsComp breadcrumbs={breadcrumbs} {...props} />
<BreadcrumbsComponent breadcrumbs={breadcrumbs} {...props} />
</>
)
}

9
apps/scandic-web/components/ContentType/CollectionPage/index.tsx
View File

@@ -1,6 +1,10 @@
import { cx } from "class-variance-authority"
import { Suspense } from "react"
import {
type BreadcrumbsProps,
BreadcrumbsSkeleton,
} from "@scandic-hotels/design-system/Breadcrumbs"
import ButtonLink from "@scandic-hotels/design-system/ButtonLink"
import Image from "@scandic-hotels/design-system/Image"
import { Typography } from "@scandic-hotels/design-system/Typography"
@@ -9,17 +13,14 @@ import { TrackingSDK } from "@scandic-hotels/tracking/TrackingSDK"
import { serverClient } from "@/lib/trpc/server"
import Blocks from "@/components/Blocks"
import Breadcrumbs from "@/components/Breadcrumbs"
import { Breadcrumbs } from "@/components/Breadcrumbs"
import HeaderDynamicContent from "@/components/Headers/DynamicContent"
import { HeroVideo } from "@/components/HeroVideo"
import MeetingPackageWidget from "@/components/MeetingPackageWidget"
import BreadcrumbsSkeleton from "@/components/TempDesignSystem/Breadcrumbs/BreadcrumbsSkeleton"
import LinkChips from "@/components/TempDesignSystem/LinkChips"
import styles from "./collectionPage.module.css"
import type { BreadcrumbsProps } from "@/components/TempDesignSystem/Breadcrumbs/breadcrumbs"
export async function CollectionPage() {
const caller = await serverClient()
const collectionPageRes = await caller.contentstack.collectionPage.get()

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

@@ -1,5 +1,6 @@
import { Suspense } from "react"
import { BreadcrumbsSkeleton } from "@scandic-hotels/design-system/Breadcrumbs"
import ButtonLink from "@scandic-hotels/design-system/ButtonLink"
import { Typography } from "@scandic-hotels/design-system/Typography"
import { TrackingSDK } from "@scandic-hotels/tracking/TrackingSDK"
@@ -7,14 +8,13 @@ import { TrackingSDK } from "@scandic-hotels/tracking/TrackingSDK"
import { serverClient } from "@/lib/trpc/server"
import Blocks from "@/components/Blocks"
import Breadcrumbs from "@/components/Breadcrumbs"
import { Breadcrumbs } from "@/components/Breadcrumbs"
import HeaderDynamicContent from "@/components/Headers/DynamicContent"
import Hero from "@/components/Hero"
import { HeroVideo } from "@/components/HeroVideo"
import Sidebar from "@/components/Sidebar"
import SidebarSkeleton from "@/components/Sidebar/SidebarSkeleton"
import StickyMeetingPackageWidget from "@/components/StickyMeetingPackageWidget"
import BreadcrumbsSkeleton from "@/components/TempDesignSystem/Breadcrumbs/BreadcrumbsSkeleton"
import LinkChips from "@/components/TempDesignSystem/LinkChips"
import styles from "./contentPage.module.css"

7
apps/scandic-web/components/ContentType/DestinationPage/DestinationCityPage/DestinationCityPageSkeleton.tsx
View File

@@ -1,9 +1,8 @@
"use client"
import { BreadcrumbsSkeleton } from "@scandic-hotels/design-system/Breadcrumbs"
import SkeletonShimmer from "@scandic-hotels/design-system/SkeletonShimmer"
import BreadcrumbsSkeleton from "@/components/TempDesignSystem/Breadcrumbs/BreadcrumbsSkeleton"
import HotelListingSkeleton from "../DestinationListing/HotelListing/HotelListingSkeleton"
import ExperienceListSkeleton from "../ExperienceList/ExperienceListSkeleton"
import SidebarContentWrapperSkeleton from "../SidebarContentWrapper/SidebarContentWrapperSkeleton"
@@ -19,7 +18,9 @@ export default function DestinationCityPageSkeleton() {
<TopImagesSkeleton />
</header>
<main className={styles.mainContent}>
<HotelListingSkeleton />
<div className={styles.listingContent}>
<HotelListingSkeleton />
</div>
</main>
<aside className={styles.sidebar}>
<SidebarContentWrapperSkeleton>

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

@@ -1,6 +1,7 @@
import { notFound } from "next/navigation"
import { Suspense } from "react"
import { BreadcrumbsSkeleton } from "@scandic-hotels/design-system/Breadcrumbs"
import {
type HotelSortItem,
HotelSortOption,
@@ -13,9 +14,8 @@ import {
getHotelsByCityIdentifier,
} from "@/lib/trpc/memoizedRequests"
import Breadcrumbs from "@/components/Breadcrumbs"
import { Breadcrumbs } from "@/components/Breadcrumbs"
import { SeoFilters } from "@/components/ContentType/DestinationPage/SeoFilters"
import BreadcrumbsSkeleton from "@/components/TempDesignSystem/Breadcrumbs/BreadcrumbsSkeleton"
import { getIntl } from "@/i18n"
import DestinationDataProvider from "@/providers/DestinationDataProvider"
import { getPathname } from "@/utils/getPathname"

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

@@ -1,9 +1,8 @@
"use client"
import { BreadcrumbsSkeleton } from "@scandic-hotels/design-system/Breadcrumbs"
import SkeletonShimmer from "@scandic-hotels/design-system/SkeletonShimmer"
import BreadcrumbsSkeleton from "@/components/TempDesignSystem/Breadcrumbs/BreadcrumbsSkeleton"
import CityListingSkeleton from "../DestinationListing/CityListing/CityListingSkeleton"
import ExperienceListSkeleton from "../ExperienceList/ExperienceListSkeleton"
import SidebarContentWrapperSkeleton from "../SidebarContentWrapper/SidebarContentWrapperSkeleton"
@@ -19,7 +18,9 @@ export default function DestinationCountryPageSkeleton() {
<TopImagesSkeleton />
</header>
<main className={styles.mainContent}>
<CityListingSkeleton />
<div className={styles.listingContent}>
<CityListingSkeleton />
</div>
</main>
<aside className={styles.sidebar}>
<SidebarContentWrapperSkeleton>

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

@@ -1,6 +1,7 @@
import { notFound } from "next/navigation"
import { Suspense } from "react"
import { BreadcrumbsSkeleton } from "@scandic-hotels/design-system/Breadcrumbs"
import {
type HotelSortItem,
HotelSortOption,
@@ -14,9 +15,8 @@ import {
getHotelsByCountry,
} from "@/lib/trpc/memoizedRequests"
import Breadcrumbs from "@/components/Breadcrumbs"
import { Breadcrumbs } from "@/components/Breadcrumbs"
import { SeoFilters } from "@/components/ContentType/DestinationPage/SeoFilters"
import BreadcrumbsSkeleton from "@/components/TempDesignSystem/Breadcrumbs/BreadcrumbsSkeleton"
import { getIntl } from "@/i18n"
import DestinationDataProvider from "@/providers/DestinationDataProvider"
import { getPathname } from "@/utils/getPathname"

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

@@ -8,16 +8,16 @@ import { safeTry } from "@scandic-hotels/common/utils/safeTry"
import { DEFAULT_THEME } from "@scandic-hotels/common/utils/theme"
import { getTheme } from "@scandic-hotels/common/utils/theme/serverContext"
import { Alert } from "@scandic-hotels/design-system/Alert"
import { BreadcrumbsSkeleton } from "@scandic-hotels/design-system/Breadcrumbs"
import { TrackingSDK } from "@scandic-hotels/tracking/TrackingSDK"
import { type HotelPageData } from "@scandic-hotels/trpc/types/hotelPage"
import { getMeetingRooms } from "@/lib/trpc/memoizedRequests"
import AccordionSection from "@/components/Blocks/Accordion"
import Breadcrumbs from "@/components/Breadcrumbs"
import { Breadcrumbs } from "@/components/Breadcrumbs"
import HotelCampaigns from "@/components/ContentType/HotelPage/Campaigns"
import { HotelPageHero } from "@/components/ContentType/HotelPage/Hero"
import BreadcrumbsSkeleton from "@/components/TempDesignSystem/Breadcrumbs/BreadcrumbsSkeleton"
import { getIntl } from "@/i18n"
import { getLang } from "@/i18n/serverContext"
import { mapApiImagesToGalleryImages } from "@/utils/imageGallery"

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

@@ -3,10 +3,10 @@ import { Suspense } from "react"
import { DEFAULT_THEME } from "@scandic-hotels/common/utils/theme"
import { getTheme } from "@scandic-hotels/common/utils/theme/serverContext"
import { BreadcrumbsSkeleton } from "@scandic-hotels/design-system/Breadcrumbs"
import Breadcrumbs from "@/components/Breadcrumbs"
import { Breadcrumbs } from "@/components/Breadcrumbs"
import Hero from "@/components/Hero"
import BreadcrumbsSkeleton from "@/components/TempDesignSystem/Breadcrumbs/BreadcrumbsSkeleton"
import styles from "./heroHeader.module.css"

39
apps/scandic-web/components/TempDesignSystem/Breadcrumbs/Arrow/arrow.module.css
View File

@@ -1,39 +0,0 @@
.arrow > svg {
display: block;
}
[data-placement="left"] .arrow,
[data-placement="left top"] .arrow,
[data-placement="left bottom"] .arrow {
transform: rotate(270deg);
}
[data-placement="right"] .arrow,
[data-placement="right top"] .arrow,
[data-placement="right bottom"] .arrow {
transform: rotate(90deg);
}
[data-placement="bottom"] .arrow,
[data-placement="bottom left"] .arrow,
[data-placement="bottom right"] .arrow {
transform: rotate(180deg);
}
.small {
width: 14px;
height: 8px;
}
.medium {
width: 27px;
height: 13px;
}
.black {
fill: var(--Surface-UI-Fill-Intense);
}
.white {
fill: var(--Surface-UI-Fill-Default);
}

7
apps/scandic-web/components/TempDesignSystem/Breadcrumbs/Arrow/arrow.ts
View File

@@ -1,7 +0,0 @@
import type { VariantProps } from "class-variance-authority"
import type { arrowVariants } from "./variants"
export interface ArrowProps
extends Omit<React.HTMLAttributes<HTMLDivElement>, "color">,
VariantProps<typeof arrowVariants> {}

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

@@ -1,15 +0,0 @@
import { arrowVariants } from "./variants"
import type { ArrowProps } from "./arrow"
export function Arrow({ color, size }: ArrowProps) {
const className = arrowVariants({ color, size })
return (
<div className={className}>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 27 13">
<path d="M13.093 12.193.9 0h25.8L14.508 12.193a1 1 0 0 1-1.415 0Z" />
</svg>
</div>
)
}

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

@@ -1,20 +0,0 @@
import { cva } from "class-variance-authority"
import styles from "./arrow.module.css"
export const arrowVariants = cva(styles.arrow, {
variants: {
color: {
black: styles.black,
white: styles.white,
},
size: {
small: styles.small,
medium: styles.medium,
},
},
defaultVariants: {
color: "white",
size: "medium",
},
})

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

@@ -1,39 +0,0 @@
import { cx } from "class-variance-authority"
import Link from "next/link"
import { Breadcrumb as BreadcrumbRAC } from "react-aria-components"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import { Typography } from "@scandic-hotels/design-system/Typography"
import styles from "./breadcrumbs.module.css"
import type { BreadcrumbProps } from "./breadcrumbs"
export function Breadcrumb({
className = "",
href,
children,
...props
}: BreadcrumbProps) {
return (
<BreadcrumbRAC className={cx(styles.listItem, className)} {...props}>
{href ? (
<>
<Typography variant="Label/xsRegular">
<Link className={styles.link} href={href}>
{children}
</Link>
</Typography>
<MaterialIcon
icon="chevron_right"
size={20}
aria-hidden="true"
color="CurrentColor"
/>
</>
) : (
children
)}
</BreadcrumbRAC>
)
}

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

@@ -1,41 +0,0 @@
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import SkeletonShimmer from "@scandic-hotels/design-system/SkeletonShimmer"
import { Typography } from "@scandic-hotels/design-system/Typography"
import styles from "@/components/TempDesignSystem/Breadcrumbs/breadcrumbs.module.css"
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={classNames}>
<ul className={styles.list}>
<li className={styles.listItem}>
<MaterialIcon
icon="home"
size={20}
color="Icon/Interactive/Secondary"
/>
<MaterialIcon
icon="chevron_right"
aria-hidden="true"
color="Icon/Interactive/Secondary"
size={20}
/>
</li>
<li className={styles.listItem}>
<Typography variant="Label/xsBold">
<SkeletonShimmer width="20ch" />
</Typography>
</li>
</ul>
</nav>
)
}

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

@@ -1,171 +0,0 @@
.breadcrumbs {
padding: var(--Space-x4) 0 var(--Space-x3);
margin: 0 auto;
width: 100%;
color: var(--Text-Interactive-Secondary);
}
.breadcrumbs.transparent {
background-color: transparent;
}
.breadcrumbs.surfaceSecondaryDefault {
background-color: var(--Surface-Secondary-Default);
}
.breadcrumbs.surfacePrimaryOnSurfaceDefault {
background-color: var(--Surface-Primary-On-Surface-Default);
}
.breadcrumbs.backgroundPrimary {
background-color: var(--Background-Primary);
}
.breadcrumbs .list {
display: flex;
gap: var(--Space-x025);
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 {
flex: 1;
max-width: 100%;
min-width: 0;
}
.listItem {
align-items: center;
display: flex;
gap: var(--Space-x025);
flex-shrink: 0;
flex-grow: 0;
}
.listItem > a {
display: flex;
}
.listItem > svg {
flex-shrink: 0;
}
.button {
border: none;
background: transparent;
height: 100%;
/* this increases the width of the button for tapping */
padding: 0 5px;
margin: 0 -5px;
color: var(--Text-Interactive-Default);
&.button:not(.lastBreadcrumb) {
cursor: pointer;
&:hover {
color: var(--Text-Interactive-Default-Hover);
text-decoration: underline;
}
}
}
.link {
color: var(--Text-Interactive-Secondary);
&:hover {
color: var(--Text-Interactive-Secondary-Hover);
text-decoration: underline;
}
}
.dialog {
background-color: var(--Surface-Primary-Default);
padding: var(--Space-x1);
display: flex;
flex-direction: column;
gap: var(--Space-x05);
border-radius: var(--Corner-radius-md);
min-width: 169px;
outline: none;
box-shadow: 0 0 4px 2px rgb(0 0 0 / 10%);
}
.dialogLink {
display: block;
border-radius: var(--Corner-radius-md);
padding: var(--Space-x1);
color: var(--Text-Default);
&:hover,
&:focus {
background-color: var(--Surface-Primary-Hover);
}
}
.lastBreadcrumb {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
text-align: left;
}
.tooltip {
background-color: var(--Surface-UI-Fill-Intense);
padding: var(--Space-x05) var(--Space-x1);
border-radius: var(--Corner-radius-sm);
color: var(--Text-Inverted);
outline: none;
}
@media screen and (max-width: 767px) {
.desktop {
display: none;
}
.breadcrumbs.isThemedMobile {
background-color: var(--Surface-Brand-Primary-1-Default);
color: var(--Text-Brand-OnPrimary-1-Default);
.link,
.button {
color: var(--Text-Brand-OnPrimary-1-Default);
&:not(.lastBreadcrumb):hover {
color: var(--Text-Brand-OnPrimary-1-Hover);
text-decoration: underline;
}
}
}
}
@media screen and (min-width: 768px) {
.mobile {
display: none;
}
.desktop {
display: flex;
}
.breadcrumbs.isThemedDesktop {
background-color: var(--Surface-Brand-Primary-1-Default);
color: var(--Text-Brand-OnPrimary-1-Default);
.link,
.button {
color: var(--Text-Brand-OnPrimary-1-Default);
&:not(.lastBreadcrumb):hover {
color: var(--Text-Brand-OnPrimary-1-Hover);
text-decoration: underline;
}
}
}
}

22
apps/scandic-web/components/TempDesignSystem/Breadcrumbs/breadcrumbs.ts
View File

@@ -1,22 +0,0 @@
import type { VariantProps } from "class-variance-authority"
import type { PropsWithChildren } from "react"
import type { BreadcrumbProps as AriaBreadcrumbProps } from "react-aria-components"
import type { breadcrumbsVariants } from "./variants"
export type { Breadcrumb, BreadcrumbProps, BreadcrumbsProps }
type Breadcrumb = {
title: string
uid: string
href?: string
}
interface BreadcrumbsProps extends VariantProps<typeof breadcrumbsVariants> {
breadcrumbs: Breadcrumb[]
}
interface BreadcrumbProps extends PropsWithChildren<AriaBreadcrumbProps> {
className?: string
href?: string
}

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

@@ -1,180 +0,0 @@
"use client"
import { cx } from "class-variance-authority"
import Link from "next/link"
import { useEffect, useState } from "react"
import {
Breadcrumbs as BreadcrumbsRAC,
Button,
Dialog,
DialogTrigger,
OverlayArrow,
Popover,
} from "react-aria-components"
import { useIntl } from "react-intl"
import { debounce } from "@scandic-hotels/common/utils/debounce"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import { Typography } from "@scandic-hotels/design-system/Typography"
import { Arrow } from "./Arrow"
import { Breadcrumb } from "./Breadcrumb"
import { splitBreadcrumbs } from "./utils"
import { breadcrumbsVariants } from "./variants"
import styles from "./breadcrumbs.module.css"
import type { BreadcrumbsProps } from "./breadcrumbs"
export default function Breadcrumbs({
breadcrumbs,
color,
size,
isThemed,
}: BreadcrumbsProps) {
const intl = useIntl()
// using a ref instead to detect when the element is available and forcing a render
const [element, attachRef] = useState<HTMLButtonElement | null>(null)
const [isTooltipDisabled, setIsTooltipDisabled] = useState(false)
useEffect(() => {
const observer = new ResizeObserver(
debounce(([entry]) => {
const el = entry.target
setIsTooltipDisabled(el.clientWidth >= el.scrollWidth)
}, 200)
)
if (element) {
observer.observe(element)
}
return () => {
if (element) {
observer.unobserve(element)
}
}
}, [element])
if (!breadcrumbs?.length) {
return null
}
const classNames = breadcrumbsVariants({
color,
size,
isThemed,
})
const [homeBreadcrumb, remainingBreadcrumbs, lastBreadcrumb] =
splitBreadcrumbs(breadcrumbs)
return (
<nav
aria-label={intl.formatMessage({
id: "breadcrumbs.label",
defaultMessage: "Breadcrumbs",
})}
className={classNames}
>
<BreadcrumbsRAC className={styles.list}>
<Breadcrumb
href={homeBreadcrumb.href}
aria-label={homeBreadcrumb.title}
>
<MaterialIcon icon="home" size={20} color="CurrentColor" />
</Breadcrumb>
{/* These breadcrumbs are visible on mobile only */}
{remainingBreadcrumbs.length >= 3 ? (
<>
<Breadcrumb
href={remainingBreadcrumbs[0].href!}
className={styles.mobile}
>
{remainingBreadcrumbs[0].title}
</Breadcrumb>
<Breadcrumb className={styles.mobile}>
<DialogTrigger>
<Typography variant="Label/xsRegular">
{/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
<Button className={styles.button}>…</Button>
</Typography>
<Popover>
<Dialog className={styles.dialog}>
{remainingBreadcrumbs.slice(1).map((breadcrumb) => (
<Typography
key={breadcrumb.uid}
variant="Label/xsRegular"
>
<Link
href={breadcrumb.href!}
className={styles.dialogLink}
>
{breadcrumb.title}
</Link>
</Typography>
))}
</Dialog>
</Popover>
</DialogTrigger>
<MaterialIcon
icon="chevron_right"
size={20}
aria-hidden="true"
color="CurrentColor"
/>
</Breadcrumb>
</>
) : (
remainingBreadcrumbs.map((breadcrumb) => (
<Breadcrumb
key={breadcrumb.uid}
href={breadcrumb.href}
className={styles.mobile}
>
{breadcrumb.title}
</Breadcrumb>
))
)}
{/* These breadcrumbs are visible on desktop only */}
{remainingBreadcrumbs.map((breadcrumb) => (
<Breadcrumb
key={breadcrumb.uid}
href={breadcrumb.href}
className={styles.desktop}
>
{breadcrumb.title}
</Breadcrumb>
))}
{/* Current page breadcrumb */}
<Breadcrumb>
<DialogTrigger>
<Typography variant="Label/xsBold">
<Button
className={cx(styles.button, styles.lastBreadcrumb)}
ref={attachRef}
isDisabled={isTooltipDisabled}
>
{lastBreadcrumb.title}
</Button>
</Typography>
<Popover placement="bottom" offset={16}>
<Dialog className={styles.tooltip}>
<OverlayArrow>
<Arrow color="black" size="small" />
</OverlayArrow>
<Typography variant="Label/xsRegular">
<span>{lastBreadcrumb.title}</span>
</Typography>
</Dialog>
</Popover>
</DialogTrigger>
</Breadcrumb>
</BreadcrumbsRAC>
</nav>
)
}

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

@@ -1,12 +0,0 @@
import type { Breadcrumb } from "./breadcrumbs"
function splitBreadcrumbs(
breadcrumbs: Breadcrumb[]
): [Breadcrumb, Breadcrumb[], Breadcrumb] {
const copy = breadcrumbs.slice(0)
const first = copy.shift()!
const last = copy.pop()!
return [first, copy, last]
}
export { splitBreadcrumbs }

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

@@ -1,31 +0,0 @@
import { cva } from "class-variance-authority"
import styles from "./breadcrumbs.module.css"
export const breadcrumbsVariants = cva(styles.breadcrumbs, {
variants: {
color: {
transparent: styles.transparent,
"Surface/Secondary/Default": styles.surfaceSecondaryDefault,
"Surface/Primary/OnSurface/Default":
styles.surfacePrimaryOnSurfaceDefault,
"Background/Primary": styles.backgroundPrimary,
},
size: {
pageWidth: styles.pageWidth,
headerWidth: styles.headerWidth,
contentWidth: styles.contentWidth,
},
isThemed: {
mobileOnly: styles.isThemedMobile,
desktopOnly: styles.isThemedDesktop,
true: [styles.isThemedMobile, styles.isThemedDesktop],
false: "",
},
},
defaultVariants: {
color: "transparent",
size: "pageWidth",
isThemed: false,
},
})