chore: Moved Breadcrumbs to design system and added stories

Approved-by: Bianca Widstam

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

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

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

@@ -1,9 +1,11 @@
 import { Suspense } from "react"
 
-import Breadcrumbs from "@/components/Breadcrumbs"
+import {
-import BreadcrumbsSkeleton from "@/components/TempDesignSystem/Breadcrumbs/BreadcrumbsSkeleton"
+  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"> = {

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

@@ -1,9 +1,11 @@
 import { Suspense } from "react"
 
-import Breadcrumbs from "@/components/Breadcrumbs"
+import {
-import BreadcrumbsSkeleton from "@/components/TempDesignSystem/Breadcrumbs/BreadcrumbsSkeleton"
+  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"> = {

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

@@ -1,10 +1,12 @@
 import { Suspense } from "react"
 
-import Breadcrumbs from "@/components/Breadcrumbs"
+import {
-import BreadcrumbsSkeleton from "@/components/TempDesignSystem/Breadcrumbs/BreadcrumbsSkeleton"
+  type BreadcrumbsProps,
-import { isLoggedInUser } from "@/utils/isLoggedInUser"
+  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()

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

@@ -1,9 +1,11 @@
 import { Suspense } from "react"
 
-import Breadcrumbs from "@/components/Breadcrumbs"
+import {
-import BreadcrumbsSkeleton from "@/components/TempDesignSystem/Breadcrumbs/BreadcrumbsSkeleton"
+  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"> = {

apps/scandic-web/components/Breadcrumbs/index.tsx

@@ -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"
+export async function Breadcrumbs({
-
+  subpageTitle,
-interface Props extends Omit<BreadcrumbsProps, "breadcrumbs"> {
+  ...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} />
     </>
   )
 }

apps/scandic-web/components/ContentType/CollectionPage/index.tsx

@@ -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()

apps/scandic-web/components/ContentType/ContentPage/index.tsx

@@ -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"

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

@@ -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>

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

@@ -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"

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

@@ -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>

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

@@ -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"

apps/scandic-web/components/ContentType/HotelPage/index.tsx

@@ -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"

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

@@ -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"
 

apps/scandic-web/components/TempDesignSystem/Breadcrumbs/Breadcrumb.tsx

@@ -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>
-  )
-}

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

@@ -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>
-  )
-}

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

@@ -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;
-      }
-    }
-  }
-}

apps/scandic-web/components/TempDesignSystem/Breadcrumbs/breadcrumbs.ts

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

packages/design-system/.storybook/preview.tsx

@@ -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,

packages/design-system/lib/components/Breadcrumbs/Arrow/arrow.ts

@@ -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> {}

packages/design-system/lib/components/Breadcrumbs/Breadcrumb/BreadcrumbSkeleton.tsx

@@ -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>
+  )
+}

packages/design-system/lib/components/Breadcrumbs/Breadcrumb/breadcrumb.module.css

@@ -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;
+}

packages/design-system/lib/components/Breadcrumbs/Breadcrumb/index.tsx

@@ -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>
+  )
+}

packages/design-system/lib/components/Breadcrumbs/Breadcrumbs.stories.tsx

@@ -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,
+  },
+}

packages/design-system/lib/components/Breadcrumbs/Breadcrumbs.tsx

@@ -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,
+  Button as ButtonRAC,
-  Dialog,
+  Dialog as DialogRAC,
-  DialogTrigger,
+  DialogTrigger as DialogTriggerRAC,
-  OverlayArrow,
+  OverlayArrow as OverlayArrowRAC,
-  Popover,
+  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>
+                <PopoverRAC>
-                  <Dialog className={styles.dialog}>
+                  <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>
+                  </DialogRAC>
-                </Popover>
+                </PopoverRAC>
-              </DialogTrigger>
+              </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
+              <ButtonRAC
-                className={cx(styles.button, styles.lastBreadcrumb)}
+                className={cx(styles.showMoreButton, styles.lastBreadcrumb)}
                 ref={attachRef}
                 isDisabled={isTooltipDisabled}
               >
                 {lastBreadcrumb.title}
-              </Button>
+              </ButtonRAC>
             </Typography>
-            <Popover placement="bottom" offset={16}>
+            <PopoverRAC placement="bottom" offset={16}>
-              <Dialog className={styles.tooltip}>
+              <DialogRAC className={styles.tooltip}>
-                <OverlayArrow>
+                <OverlayArrowRAC>
                   <Arrow color="black" size="small" />
-                </OverlayArrow>
+                </OverlayArrowRAC>
                 <Typography variant="Label/xsRegular">
                   <span>{lastBreadcrumb.title}</span>
                 </Typography>
-              </Dialog>
+              </DialogRAC>
-            </Popover>
+            </PopoverRAC>
-          </DialogTrigger>
+          </DialogTriggerRAC>
         </Breadcrumb>
       </BreadcrumbsRAC>
     </nav>

packages/design-system/lib/components/Breadcrumbs/BreadcrumbsSkeleton.tsx

@@ -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>
+  )
+}

packages/design-system/lib/components/Breadcrumbs/breadcrumbs.module.css

@@ -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);
+  }
+}

packages/design-system/lib/components/Breadcrumbs/index.tsx

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

packages/design-system/lib/components/Breadcrumbs/types.ts

@@ -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
+}

packages/design-system/lib/components/Breadcrumbs/utils.ts

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

packages/design-system/lib/components/Breadcrumbs/variants.ts

@@ -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)

packages/design-system/package.json

@@ -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",