Merged in fix/SW-1877-new-responsive-breadcrumbs (pull request #1671)

fix(SW-1877): new responsive breadcrumbs

Approved-by: Erik Tiekstra

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

@@ -5,10 +5,11 @@ import { generateBreadcrumbsSchema } from "@/utils/jsonSchemas"
 
 import type { BreadcrumbsProps } from "@/components/TempDesignSystem/Breadcrumbs/breadcrumbs"
 
-export default async function Breadcrumbs({
+interface Props extends Pick<BreadcrumbsProps, "variant"> {
-  variant,
+  subpageTitle?: string
-  subpageTitle,
+}
-}: Pick<BreadcrumbsProps, "variant" | "subpageTitle">) {
+
+export default async function Breadcrumbs({ variant, subpageTitle }: Props) {
   const breadcrumbs = await serverClient().contentstack.breadcrumbs.get()
   if (!breadcrumbs?.length) {
     return null

apps/scandic-web/components/ContentType/HotelPage/Map/MobileMapToggle/mobileToggle.module.css

@@ -1,5 +1,7 @@
 .mobileToggle {
-  position: sticky;
+  position: fixed;
+  left: 50%;
+  transform: translate(-50%, 0);
   bottom: var(--Spacing-x5);
   z-index: var(--hotel-mobile-map-toggle-button-z-index);
   margin: 0 auto;

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

@@ -0,0 +1,37 @@
+import { cx } from "class-variance-authority"
+import { Breadcrumb as AriaBreadcrumb } from "react-aria-components"
+
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
+
+import Link from "@/components/TempDesignSystem/Link"
+
+import styles from "./breadcrumbs.module.css"
+
+import type { BreadcrumbProps } from "./breadcrumbs"
+
+export function Breadcrumb({
+  className = "",
+  href,
+  children,
+  ...props
+}: BreadcrumbProps) {
+  return (
+    <AriaBreadcrumb className={cx(styles.listItem, className)} {...props}>
+      {href ? (
+        <>
+          <Link color="peach80" href={href} variant="breadcrumb">
+            {children}
+          </Link>
+          <MaterialIcon
+            icon="chevron_right"
+            size={20}
+            aria-hidden="true"
+            color="Icon/Interactive/Secondary"
+          />
+        </>
+      ) : (
+        children
+      )}
+    </AriaBreadcrumb>
+  )
+}

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

@@ -9,9 +9,11 @@ export default function BreadcrumbsSkeleton() {
     <nav className={styles.breadcrumbs}>
       <ul className={styles.list}>
         <li className={styles.listItem}>
-          <span className={styles.homeLink} color="peach80">
+          <MaterialIcon
-            <MaterialIcon icon="home" color="Icon/Interactive/Secondary" />
+            icon="home"
-          </span>
+            size={16}
+            color="Icon/Interactive/Secondary"
+          />
           <MaterialIcon
             icon="chevron_right"
             aria-hidden="true"

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

@@ -1,43 +1,114 @@
 .breadcrumbs {
-  display: block;
   padding: var(--Spacing-x4) 0 var(--Spacing-x3);
   margin: 0 auto;
   width: 100%;
+  max-width: var(--max-width-page);
 }
 
-.contentWidth.breadcrumbs {
+.breadcrumbs.fullWidth {
+  max-width: var(--max-width-page);
+}
+
+.breadcrumbs.contentWidth {
+  max-width: var(--max-width-content);
+}
+
+.breadcrumbs.contentWidth {
   background-color: var(--Base-Surface-Subtle-Normal);
   padding-bottom: 0;
 }
 
-.headerWidth.breadcrumbs {
+.breadcrumbs.headerWidth {
   max-width: min(var(--max-width-page), calc(100% - var(--max-width-spacing)));
 }
 
-.fullWidth .list {
-  max-width: var(--max-width-page);
-}
-
-.contentWidth .list {
-  max-width: var(--max-width-content);
-}
-
 .list {
-  align-items: center;
   display: flex;
   gap: var(--Spacing-x-quarter);
-  justify-content: flex-start;
+  padding-inline-start: 0;
-  list-style: none;
+}
-  margin: 0 auto;
+
-  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(--Spacing-x-quarter);
+  flex-shrink: 0;
+  flex-grow: 0;
 }
 
-.homeLink {
+.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;
+}
+
+.dialog {
+  background-color: var(--Base-Surface-Primary-light-Normal);
+  padding: var(--Spacing-x1);
+  display: flex;
+  flex-direction: column;
+  gap: var(--Spacing-x-half);
+  border-radius: var(--Corner-radius-Medium);
+  min-width: 169px;
+  outline: none;
+  box-shadow: 0 0 4px 2px rgb(0 0 0 / 10%);
+}
+
+.dialogLink {
+  display: block;
+  border-radius: var(--Corner-radius-Medium);
+  padding: var(--Spacing-x1);
+}
+
+.dialogLink:focus,
+.dialogLink:hover {
+  background-color: var(--Base-Surface-Primary-light-Hover);
+}
+
+.tooltipTrigger {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  text-align: left;
+}
+
+.tooltip {
+  background-color: var(--Surface-UI-Fill-Intense);
+  padding: var(--Spacing-x-half) var(--Spacing-x1);
+  border-radius: var(--Corner-radius-sm);
+  color: var(--Text-Inverted);
+  outline: none;
+}
+
+@media screen and (width <= 767px) {
+  .desktop {
+    display: none;
+  }
+}
+
+@media screen and (width >= 768px) {
+  .mobile {
+    display: none;
+  }
+  .desktop {
+    display: flex;
+  }
+}

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

@@ -1,15 +1,22 @@
 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
 }
 
-export interface BreadcrumbsProps
+interface BreadcrumbsProps extends VariantProps<typeof breadcrumbsVariants> {
-  extends VariantProps<typeof breadcrumbsVariants> {
-  subpageTitle?: string
   breadcrumbs: Breadcrumb[]
 }
+
+interface BreadcrumbProps extends PropsWithChildren<AriaBreadcrumbProps> {
+  className?: string
+  href?: string
+}

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

@@ -1,18 +1,59 @@
+"use client"
+
+import { cx } from "class-variance-authority"
+import { useEffect, useState } from "react"
+import {
+  Breadcrumbs as AriaBreadcrumbs,
+  Button,
+  Dialog,
+  DialogTrigger,
+  OverlayArrow,
+  Popover,
+} from "react-aria-components"
+
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
+import { Typography } from "@scandic-hotels/design-system/Typography"
 
-import Link from "@/components/TempDesignSystem/Link"
+import { debounce } from "@/utils/debounce"
-import Footnote from "@/components/TempDesignSystem/Text/Footnote"
 
+import Link from "../Link"
+import { Arrow } from "../Popover/Arrow"
+import Footnote from "../Text/Footnote"
+import { Breadcrumb } from "./Breadcrumb"
+import { splitBreadcrumbs } from "./utils"
 import { breadcrumbsVariants } from "./variants"
 
 import styles from "./breadcrumbs.module.css"
 
-import type { BreadcrumbsProps } from "@/components/TempDesignSystem/Breadcrumbs/breadcrumbs"
+import type { BreadcrumbsProps } from "./breadcrumbs"
 
 export default function Breadcrumbs({
   breadcrumbs,
   variant,
 }: BreadcrumbsProps) {
+  // 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
   }
@@ -21,60 +62,99 @@ export default function Breadcrumbs({
     variant,
   })
 
-  const homeBreadcrumb = breadcrumbs.shift()
+  const [homeBreadcrumb, remainingBreadcrumbs, lastBreadcrumb] =
+    splitBreadcrumbs(breadcrumbs)
+
   return (
-    <nav className={classNames}>
+    <nav aria-label="Breadcrumbs" className={classNames}>
-      <ul className={styles.list}>
+      <AriaBreadcrumbs className={styles.list}>
-        {homeBreadcrumb ? (
+        <Breadcrumb
-          <li className={styles.listItem}>
+          href={homeBreadcrumb.href}
-            <Link
+          aria-label={homeBreadcrumb.title}
-              className={styles.homeLink}
+        >
-              color="peach80"
+          <MaterialIcon icon="home" size={16} color="CurrentColor" />
-              href={homeBreadcrumb.href!}
+        </Breadcrumb>
-              variant="breadcrumb"
+
-              aria-label={homeBreadcrumb.title}
+        {remainingBreadcrumbs.length >= 3 ? (
+          <>
+            <Breadcrumb
+              href={remainingBreadcrumbs[0].href!}
+              className={styles.mobile}
             >
-              <MaterialIcon icon="home" size={16} color="CurrentColor" />
+              {remainingBreadcrumbs[0].title}
-            </Link>
+            </Breadcrumb>
-            <MaterialIcon
+            <Breadcrumb className={styles.mobile}>
-              icon="chevron_right"
+              <DialogTrigger>
-              size={20}
+                <Footnote color="burgundy" type="bold" asChild>
-              aria-hidden="true"
+                  <Button className={styles.button}>…</Button>
-              color="Icon/Interactive/Secondary"
+                </Footnote>
-            />
+                <Popover>
-          </li>
+                  <Dialog className={styles.dialog}>
-        ) : null}
+                    {remainingBreadcrumbs.slice(1).map((breadcrumb) => (
-
+                      <Link
-        {breadcrumbs.map((breadcrumb, index) => {
+                        href={breadcrumb.href!}
-          if (breadcrumb.href && index < breadcrumbs.length - 1) {
+                        size="tiny"
-            return (
+                        key={breadcrumb.uid}
-              <li key={breadcrumb.uid} className={styles.listItem}>
+                        className={styles.dialogLink}
-                <Link
+                      >
-                  color="peach80"
+                        {breadcrumb.title}
-                  href={breadcrumb.href}
+                      </Link>
-                  variant="breadcrumb"
+                    ))}
-                >
+                  </Dialog>
-                  {breadcrumb.title}
+                </Popover>
-                </Link>
+              </DialogTrigger>
-                <MaterialIcon
+              <MaterialIcon
-                  icon="chevron_right"
+                icon="chevron_right"
-                  size={20}
+                size={20}
-                  aria-hidden="true"
+                aria-hidden="true"
-                  color="Icon/Interactive/Secondary"
+                color="Icon/Interactive/Secondary"
-                />
+              />
-              </li>
+            </Breadcrumb>
-            )
+          </>
-          }
+        ) : (
-
+          remainingBreadcrumbs.map((breadcrumb) => (
-          return (
+            <Breadcrumb
-            <li key={breadcrumb.uid} className={styles.listItem}>
+              key={breadcrumb.uid}
-              <Footnote color="burgundy" type="bold">
+              href={breadcrumb.href}
-                {breadcrumb.title}
+              className={styles.mobile}
-              </Footnote>
+            >
-            </li>
+              {breadcrumb.title}
-          )
+            </Breadcrumb>
-        })}
+          ))
-      </ul>
+        )}
+        {remainingBreadcrumbs.map((breadcrumb) => (
+          <Breadcrumb
+            key={breadcrumb.uid}
+            href={breadcrumb.href}
+            className={styles.desktop}
+          >
+            {breadcrumb.title}
+          </Breadcrumb>
+        ))}
+        <Breadcrumb>
+          <DialogTrigger>
+            <Footnote color="burgundy" type="bold" asChild>
+              <Button
+                className={cx(styles.button, styles.tooltipTrigger)}
+                ref={attachRef}
+                isDisabled={isTooltipDisabled}
+              >
+                {lastBreadcrumb.title}
+              </Button>
+            </Footnote>
+            <Popover placement="bottom" offset={16}>
+              <Dialog className={styles.tooltip}>
+                <OverlayArrow>
+                  <Arrow color="black" size="small" />
+                </OverlayArrow>
+                <Typography variant="Label/xsRegular">
+                  <span>{lastBreadcrumb.title}</span>
+                </Typography>
+              </Dialog>
+            </Popover>
+          </DialogTrigger>
+        </Breadcrumb>
+      </AriaBreadcrumbs>
     </nav>
   )
 }

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

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

apps/scandic-web/components/TempDesignSystem/Popover/Arrow/arrow.module.css

@@ -1,22 +1,39 @@
-.arrow {
+.arrow > svg {
-  transform-origin: center;
+  display: block;
-  transform: translateY(-2px);
 }
 
 [data-placement="left"] .arrow,
 [data-placement="left top"] .arrow,
 [data-placement="left bottom"] .arrow {
-  transform: rotate(270deg) translateY(-6px);
+  transform: rotate(270deg);
 }
 
 [data-placement="right"] .arrow,
 [data-placement="right top"] .arrow,
 [data-placement="right bottom"] .arrow {
-  transform: rotate(90deg) translateY(-6px);
+  transform: rotate(90deg);
 }
 
 [data-placement="bottom"] .arrow,
 [data-placement="bottom left"] .arrow,
 [data-placement="bottom right"] .arrow {
-  transform: rotate(180deg) translateY(-2px);
+  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);
 }

apps/scandic-web/components/TempDesignSystem/Popover/Arrow/arrow.ts

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

apps/scandic-web/components/TempDesignSystem/Popover/Arrow/index.tsx

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

apps/scandic-web/components/TempDesignSystem/Popover/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",
+  },
+})

apps/scandic-web/server/routers/contentstack/breadcrumbs/output.ts

@@ -52,24 +52,26 @@ export const rawBreadcrumbsDataSchema = z.object({
   system: systemSchema,
 })
 
-export const breadcrumbsSchema = rawBreadcrumbsDataSchema.transform((data) => {
+export const breadcrumbsSchema = rawBreadcrumbsDataSchema.transform(
-  const { parentsConnection, title } = data.web.breadcrumbs
+  (data): { title: string; href: string; uid: string }[] => {
-  const parentBreadcrumbs = parentsConnection.edges.map((breadcrumb) => {
+    const { parentsConnection, title } = data.web.breadcrumbs
-    return {
+    const parentBreadcrumbs = parentsConnection.edges.map((breadcrumb) => {
-      href: removeMultipleSlashes(
+      return {
-        `/${breadcrumb.node.system.locale}/${breadcrumb.node.url}`
+        href: removeMultipleSlashes(
-      ),
+          `/${breadcrumb.node.system.locale}/${breadcrumb.node.url}`
-      title: breadcrumb.node.web.breadcrumbs.title,
+        ),
-      uid: breadcrumb.node.system.uid,
+        title: breadcrumb.node.web.breadcrumbs.title,
+        uid: breadcrumb.node.system.uid,
+      }
+    })
+
+    const pageBreadcrumb = {
+      title,
+      uid: data.system.uid,
+      href: removeMultipleSlashes(`/${data.system.locale}/${data.url}`),
     }
-  })
+    const homeBreadcrumb = homeBreadcrumbs[data.system.locale]
 
-  const pageBreadcrumb = {
+    return [homeBreadcrumb, parentBreadcrumbs, pageBreadcrumb].flat()
-    title,
-    uid: data.system.uid,
-    href: removeMultipleSlashes(`/${data.system.locale}/${data.url}`),
   }
-  const homeBreadcrumb = homeBreadcrumbs[data.system.locale]
+)
-
-  return [homeBreadcrumb, parentBreadcrumbs, pageBreadcrumb].flat()
-})