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/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
}

2
packages/design-system/.storybook/preview.tsx
View File

@@ -43,7 +43,7 @@ const preview: Preview = {
fi: { icon: "🇫🇮", title: "Suomi", right: "FI" },
de: { icon: "🇩🇪", title: "Deutsch", right: "DE" },
},
backgrounds: { value: "scandicSubtle" },
backgrounds: { value: "scandicPrimary" },
},
parameters: {
reactIntl,

0
apps/scandic-web/components/TempDesignSystem/Breadcrumbs/Arrow/arrow.module.css → packages/design-system/lib/components/Breadcrumbs/Arrow/arrow.module.css
View File

3
apps/scandic-web/components/TempDesignSystem/Breadcrumbs/Arrow/arrow.ts → packages/design-system/lib/components/Breadcrumbs/Arrow/arrow.ts
View File

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

0
apps/scandic-web/components/TempDesignSystem/Breadcrumbs/Arrow/index.tsx → packages/design-system/lib/components/Breadcrumbs/Arrow/index.tsx
View File

0
apps/scandic-web/components/TempDesignSystem/Breadcrumbs/Arrow/variants.ts → packages/design-system/lib/components/Breadcrumbs/Arrow/variants.ts
View File

27
packages/design-system/lib/components/Breadcrumbs/Breadcrumb/BreadcrumbSkeleton.tsx Normal file
View File

@@ -0,0 +1,27 @@
import styles from "./breadcrumb.module.css"
import { MaterialIcon } from "../../Icons/MaterialIcon"
import { Typography } from "../../Typography"
export function BreadcrumbSkeleton({
children,
isLastBreadcrumb,
}: React.PropsWithChildren<{ isLastBreadcrumb?: boolean }>) {
return (
<li className={styles.breadcrumb}>
<Typography variant="Label/xsRegular">
<span className={styles.link}>{children}</span>
</Typography>
{!isLastBreadcrumb ? (
<MaterialIcon
icon="chevron_right"
size={20}
aria-hidden="true"
color="CurrentColor"
className={styles.icon}
/>
) : null}
</li>
)
}

27
packages/design-system/lib/components/Breadcrumbs/Breadcrumb/breadcrumb.module.css Normal file
View File

@@ -0,0 +1,27 @@
.breadcrumb {
display: flex;
align-items: center;
gap: var(--Space-x025);
flex-shrink: 0;
flex-grow: 0;
&:last-of-type {
flex: 1;
max-width: 100%;
min-width: 0;
}
}
.link {
display: flex;
color: var(--breadcrumbs-text-color);
&:hover {
color: var(--breadcrumbs-text-hover-color);
text-decoration: underline;
}
}
.icon {
flex-shrink: 0;
}

47
packages/design-system/lib/components/Breadcrumbs/Breadcrumb/index.tsx Normal file
View File

@@ -0,0 +1,47 @@
import { cx } from "class-variance-authority"
import NextLink from "next/link"
import {
Breadcrumb as BreadcrumbRAC,
type BreadcrumbProps as BreadcrumbRACProps,
} from "react-aria-components"
import styles from "./breadcrumb.module.css"
import { PropsWithChildren } from "react"
import { MaterialIcon } from "../../Icons/MaterialIcon"
import { Typography } from "../../Typography"
interface BreadcrumbProps extends PropsWithChildren<BreadcrumbRACProps> {
className?: string
href?: string
}
export function Breadcrumb({
className = "",
href,
children,
...props
}: BreadcrumbProps) {
return (
<BreadcrumbRAC className={cx(styles.breadcrumb, className)} {...props}>
{href ? (
<>
<Typography variant="Label/xsRegular">
<NextLink className={styles.link} href={href}>
{children}
</NextLink>
</Typography>
<MaterialIcon
icon="chevron_right"
size={20}
aria-hidden="true"
color="CurrentColor"
className={styles.icon}
/>
</>
) : (
children
)}
</BreadcrumbRAC>
)
}

139
packages/design-system/lib/components/Breadcrumbs/Breadcrumbs.stories.tsx Normal file
View File

@@ -0,0 +1,139 @@
import type { Meta, StoryObj } from "@storybook/nextjs-vite"
import { themes } from "../../../.storybook/preview"
import { Breadcrumbs } from "./Breadcrumbs"
import { BreadcrumbsSkeleton } from "./BreadcrumbsSkeleton"
import { Breadcrumb } from "./types"
import { config } from "./variants"
const meta: Meta<typeof Breadcrumbs> = {
title: "Core Components/Breadcrumbs",
component: Breadcrumbs,
argTypes: {
breadcrumbs: {
table: {
type: { summary: "Breadcrumb[]" },
},
},
color: {
control: "select",
options: Object.keys(config.variants.color),
table: {
defaultValue: { summary: config.defaultVariants.color },
type: { summary: Object.keys(config.variants.color).join(" | ") },
},
description: "Sets the background color of the breadcrumbs component.",
},
size: {
control: "select",
options: Object.keys(config.variants.size),
table: {
defaultValue: { summary: config.defaultVariants.size },
type: { summary: Object.keys(config.variants.size).join(" | ") },
},
description:
"Sets the maximum width of the breadcrumbs component. The breadcrumbs will be centered.",
},
isThemed: {
control: "select",
options: Object.keys(config.variants.isThemed),
table: {
defaultValue: { summary: config.defaultVariants.isThemed.toString() },
type: { summary: Object.keys(config.variants.isThemed).join(" | ") },
},
description:
"Applies theming styles for mobile and/or desktop based on the selected option. This should only be used if the hotel theme is something else than Scandic.",
},
},
}
export default meta
type Story = StoryObj<typeof Breadcrumbs>
const sampleBreadcrumbs: Breadcrumb[] = [
{ uid: "home", title: "Home", href: "/" },
{ uid: "category", title: "Category", href: "/category" },
{ uid: "subcategory", title: "Subcategory", href: "/category/subcategory" },
{
uid: "subcategory2",
title: "Subcategory 2",
href: "/category/subcategory",
},
{
uid: "current-page",
title: "Current page",
href: "/category/subcategory/current-page",
},
]
export const Default: Story = {
args: {
breadcrumbs: sampleBreadcrumbs,
},
}
export const Transparent: Story = {
args: {
...Default.args,
color: "transparent",
},
}
export const BackgroundPrimary: Story = {
args: {
...Default.args,
color: "Background/Primary",
},
}
export const SurfaceSecondaryDefault: Story = {
args: {
...Default.args,
color: "Surface/Secondary/Default",
},
}
export const Themed: Story = {
args: {
...Default.args,
isThemed: true,
},
decorators: [
(Story) => (
<>
{Object.entries(themes.themes)
.filter(([key]) => key !== "Scandic")
.map(([key, value], ix) => {
return (
<div key={ix} className={value} style={{ padding: "1em 0" }}>
<h2 style={{ paddingBottom: "0.5em" }}>{key}</h2>
<Story />
</div>
)
})}
</>
),
],
}
export const Skeleton: Story = {
render: () => <BreadcrumbsSkeleton />,
}
export const MobileView: Story = {
globals: {
viewport: { value: "mobile1", isRotated: false },
},
parameters: {
docs: {
description: {
story:
"To view the mobile behavior of the Breadcrumbs component, open the story in story viewer and adjust the browser's viewport.",
},
},
},
args: {
...Default.args,
},
}

66
apps/scandic-web/components/TempDesignSystem/Breadcrumbs/index.tsx → packages/design-system/lib/components/Breadcrumbs/Breadcrumbs.tsx
View File

@@ -1,32 +1,32 @@
"use client"
import { cx } from "class-variance-authority"
import Link from "next/link"
import NextLink from "next/link"
import { useEffect, useState } from "react"
import {
Breadcrumbs as BreadcrumbsRAC,
Button,
Dialog,
DialogTrigger,
OverlayArrow,
Popover,
Button as ButtonRAC,
Dialog as DialogRAC,
DialogTrigger as DialogTriggerRAC,
OverlayArrow as OverlayArrowRAC,
Popover as PopoverRAC,
} 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 { variants } from "./variants"
import styles from "./breadcrumbs.module.css"
import type { BreadcrumbsProps } from "./breadcrumbs"
import { MaterialIcon } from "../Icons/MaterialIcon"
import { Typography } from "../Typography"
import { BreadcrumbsProps } from "./types"
export default function Breadcrumbs({
export function Breadcrumbs({
breadcrumbs,
color,
size,
@@ -61,7 +61,7 @@ export default function Breadcrumbs({
return null
}
const classNames = breadcrumbsVariants({
const classNames = variants({
color,
size,
isThemed,
@@ -78,7 +78,7 @@ export default function Breadcrumbs({
})}
className={classNames}
>
<BreadcrumbsRAC className={styles.list}>
<BreadcrumbsRAC className={styles.breadcrumbs}>
<Breadcrumb
href={homeBreadcrumb.href}
aria-label={homeBreadcrumb.title}
@@ -96,29 +96,29 @@ export default function Breadcrumbs({
{remainingBreadcrumbs[0].title}
</Breadcrumb>
<Breadcrumb className={styles.mobile}>
<DialogTrigger>
<DialogTriggerRAC>
<Typography variant="Label/xsRegular">
{/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
<Button className={styles.button}>…</Button>
<ButtonRAC className={styles.showMoreButton}>…</ButtonRAC>
</Typography>
<Popover>
<Dialog className={styles.dialog}>
<PopoverRAC>
<DialogRAC className={styles.dialog}>
{remainingBreadcrumbs.slice(1).map((breadcrumb) => (
<Typography
key={breadcrumb.uid}
variant="Label/xsRegular"
>
<Link
<NextLink
href={breadcrumb.href!}
className={styles.dialogLink}
>
{breadcrumb.title}
</Link>
</NextLink>
</Typography>
))}
</Dialog>
</Popover>
</DialogTrigger>
</DialogRAC>
</PopoverRAC>
</DialogTriggerRAC>
<MaterialIcon
icon="chevron_right"
size={20}
@@ -152,27 +152,27 @@ export default function Breadcrumbs({
{/* Current page breadcrumb */}
<Breadcrumb>
<DialogTrigger>
<DialogTriggerRAC>
<Typography variant="Label/xsBold">
<Button
className={cx(styles.button, styles.lastBreadcrumb)}
<ButtonRAC
className={cx(styles.showMoreButton, styles.lastBreadcrumb)}
ref={attachRef}
isDisabled={isTooltipDisabled}
>
{lastBreadcrumb.title}
</Button>
</ButtonRAC>
</Typography>
<Popover placement="bottom" offset={16}>
<Dialog className={styles.tooltip}>
<OverlayArrow>
<PopoverRAC placement="bottom" offset={16}>
<DialogRAC className={styles.tooltip}>
<OverlayArrowRAC>
<Arrow color="black" size="small" />
</OverlayArrow>
</OverlayArrowRAC>
<Typography variant="Label/xsRegular">
<span>{lastBreadcrumb.title}</span>
</Typography>
</Dialog>
</Popover>
</DialogTrigger>
</DialogRAC>
</PopoverRAC>
</DialogTriggerRAC>
</Breadcrumb>
</BreadcrumbsRAC>
</nav>

30
packages/design-system/lib/components/Breadcrumbs/BreadcrumbsSkeleton.tsx Normal file
View File

@@ -0,0 +1,30 @@
import { MaterialIcon } from "../Icons/MaterialIcon"
import { BreadcrumbSkeleton } from "./Breadcrumb/BreadcrumbSkeleton"
import { BreadcrumbsProps } from "./types"
import { variants } from "./variants"
import SkeletonShimmer from "../SkeletonShimmer"
import styles from "./breadcrumbs.module.css"
export function BreadcrumbsSkeleton({
color,
size,
}: Pick<BreadcrumbsProps, "color" | "size">) {
const classNames = variants({ color, size })
return (
<nav className={classNames}>
<ol className={styles.breadcrumbs}>
<BreadcrumbSkeleton>
<MaterialIcon icon="home" size={20} color="CurrentColor" />
</BreadcrumbSkeleton>
<BreadcrumbSkeleton>
<SkeletonShimmer width="20ch" />
</BreadcrumbSkeleton>
<BreadcrumbSkeleton isLastBreadcrumb>
<SkeletonShimmer width="20ch" />
</BreadcrumbSkeleton>
</ol>
</nav>
)
}

127
packages/design-system/lib/components/Breadcrumbs/breadcrumbs.module.css Normal file
View File

@@ -0,0 +1,127 @@
.breadcrumbsWrapper {
--breadcrumbs-background-color: transparent;
--breadcrumbs-text-color: var(--Text-Interactive-Secondary);
--breadcrumbs-button-color: var(--Text-Interactive-Default);
--breadcrumbs-button-hover-color: var(--Text-Interactive-Hover);
padding: var(--Space-x4) 0 var(--Space-x3);
margin: 0 auto;
width: 100%;
color: var(--breadcrumbs-text-color);
background-color: var(--breadcrumbs-background-color);
&.surfaceSecondaryDefault {
--breadcrumbs-background-color: var(--Surface-Secondary-Default);
}
&.backgroundPrimary {
--breadcrumbs-background-color: var(--Background-Primary);
}
&.contentWidth .breadcrumbs {
max-width: var(--max-width-content);
}
&.headerWidth .breadcrumbs {
max-width: min(
var(--max-width-page),
calc(100% - var(--max-width-spacing))
);
}
&.pageWidth .breadcrumbs {
max-width: var(--max-width-page);
}
}
.breadcrumbs {
display: flex;
gap: var(--Space-x025);
padding-inline-start: 0;
margin: 0 auto;
}
.showMoreButton {
border: none;
background-color: transparent;
height: 100%;
/* this increases the width of the button for tapping */
padding: 0 5px;
margin: 0 -5px;
color: var(--breadcrumbs-button-color);
&:not(.lastBreadcrumb) {
cursor: pointer;
&:hover {
color: var(--breadcrumbs-button-hover-color);
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;
}
.breadcrumbsWrapper.isThemedMobile {
--breadcrumbs-background-color: var(--Surface-Brand-Primary-1-Default);
--breadcrumbs-text-color: var(--Text-Brand-OnPrimary-1-Default);
--breadcrumbs-button-color: var(--Text-Brand-OnPrimary-1-Default);
--breadcrumbs-button-hover-color: var(--Text-Brand-OnPrimary-1-Hover);
}
}
@media screen and (min-width: 768px) {
.mobile {
display: none;
}
.breadcrumbsWrapper.isThemedDesktop {
--breadcrumbs-background-color: var(--Surface-Brand-Primary-1-Default);
--breadcrumbs-text-color: var(--Text-Brand-OnPrimary-1-Default);
--breadcrumbs-button-color: var(--Text-Brand-OnPrimary-1-Default);
--breadcrumbs-button-hover-color: var(--Text-Brand-OnPrimary-1-Hover);
}
}

4
packages/design-system/lib/components/Breadcrumbs/index.tsx Normal file
View File

@@ -0,0 +1,4 @@
export { BreadcrumbSkeleton } from "./Breadcrumb/BreadcrumbSkeleton"
export { Breadcrumbs } from "./Breadcrumbs"
export { BreadcrumbsSkeleton } from "./BreadcrumbsSkeleton"
export type { BreadcrumbsProps } from "./types"

22
packages/design-system/lib/components/Breadcrumbs/types.ts Normal file
View File

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

2
apps/scandic-web/components/TempDesignSystem/Breadcrumbs/utils.ts → packages/design-system/lib/components/Breadcrumbs/utils.ts
View File

@@ -1,4 +1,4 @@
import type { Breadcrumb } from "./breadcrumbs"
import type { Breadcrumb } from "./types"
function splitBreadcrumbs(
breadcrumbs: Breadcrumb[]

8
apps/scandic-web/components/TempDesignSystem/Breadcrumbs/variants.ts → packages/design-system/lib/components/Breadcrumbs/variants.ts
View File

@@ -2,13 +2,11 @@ import { cva } from "class-variance-authority"
import styles from "./breadcrumbs.module.css"
export const breadcrumbsVariants = cva(styles.breadcrumbs, {
export const config = {
variants: {
color: {
transparent: styles.transparent,
"Surface/Secondary/Default": styles.surfaceSecondaryDefault,
"Surface/Primary/OnSurface/Default":
styles.surfacePrimaryOnSurfaceDefault,
"Background/Primary": styles.backgroundPrimary,
},
size: {
@@ -28,4 +26,6 @@ export const breadcrumbsVariants = cva(styles.breadcrumbs, {
size: "pageWidth",
isThemed: false,
},
})
} as const
export const variants = cva(styles.breadcrumbsWrapper, config)

1
packages/design-system/package.json
View File

@@ -11,6 +11,7 @@
"./BackToTopButton": "./lib/components/BackToTopButton/index.tsx",
"./Badge": "./lib/components/Badge/index.tsx",
"./BookingCodeChip": "./lib/components/BookingCodeChip/index.tsx",
"./Breadcrumbs": "./lib/components/Breadcrumbs/index.tsx",
"./Button": "./lib/components/Button/index.tsx",
"./ButtonLink": "./lib/components/ButtonLink/index.tsx",
"./CampaignRateCard": "./lib/components/RateCard/Campaign/index.tsx",