chore: Moved Breadcrumbs to design system and added stories

Approved-by: Bianca Widstam

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.module.css

@@ -0,0 +1,39 @@
+.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);
+}

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

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

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

@@ -0,0 +1,15 @@
+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>
+  )
+}

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

@@ -0,0 +1,20 @@
+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",
+  },
+})

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

@@ -0,0 +1,180 @@
+"use client"
+
+import { cx } from "class-variance-authority"
+import NextLink from "next/link"
+import { useEffect, useState } from "react"
+import {
+  Breadcrumbs as BreadcrumbsRAC,
+  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 { Arrow } from "./Arrow"
+import { Breadcrumb } from "./Breadcrumb"
+import { splitBreadcrumbs } from "./utils"
+import { variants } from "./variants"
+
+import styles from "./breadcrumbs.module.css"
+
+import { MaterialIcon } from "../Icons/MaterialIcon"
+import { Typography } from "../Typography"
+import { BreadcrumbsProps } from "./types"
+
+export 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 = variants({
+    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.breadcrumbs}>
+        <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}>
+              <DialogTriggerRAC>
+                <Typography variant="Label/xsRegular">
+                  {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
+                  <ButtonRAC className={styles.showMoreButton}>…</ButtonRAC>
+                </Typography>
+                <PopoverRAC>
+                  <DialogRAC className={styles.dialog}>
+                    {remainingBreadcrumbs.slice(1).map((breadcrumb) => (
+                      <Typography
+                        key={breadcrumb.uid}
+                        variant="Label/xsRegular"
+                      >
+                        <NextLink
+                          href={breadcrumb.href!}
+                          className={styles.dialogLink}
+                        >
+                          {breadcrumb.title}
+                        </NextLink>
+                      </Typography>
+                    ))}
+                  </DialogRAC>
+                </PopoverRAC>
+              </DialogTriggerRAC>
+              <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>
+          <DialogTriggerRAC>
+            <Typography variant="Label/xsBold">
+              <ButtonRAC
+                className={cx(styles.showMoreButton, styles.lastBreadcrumb)}
+                ref={attachRef}
+                isDisabled={isTooltipDisabled}
+              >
+                {lastBreadcrumb.title}
+              </ButtonRAC>
+            </Typography>
+            <PopoverRAC placement="bottom" offset={16}>
+              <DialogRAC className={styles.tooltip}>
+                <OverlayArrowRAC>
+                  <Arrow color="black" size="small" />
+                </OverlayArrowRAC>
+                <Typography variant="Label/xsRegular">
+                  <span>{lastBreadcrumb.title}</span>
+                </Typography>
+              </DialogRAC>
+            </PopoverRAC>
+          </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

@@ -0,0 +1,12 @@
+import type { Breadcrumb } from "./types"
+
+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 }

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

@@ -0,0 +1,31 @@
+import { cva } from "class-variance-authority"
+
+import styles from "./breadcrumbs.module.css"
+
+export const config = {
+  variants: {
+    color: {
+      transparent: styles.transparent,
+      "Surface/Secondary/Default": styles.surfaceSecondaryDefault,
+      "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,
+  },
+} 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",