♻️ Rewrite and move breadcrumbs #2604 (#2605)

* ♻️ Rewrite and move breadcrumbs #2604

* ♻️ rewrite forwardref #2604

* ✨ Remove core and replace with ol/li #2604

* ✨ adjustments and move file into core #2604

* remove breadcrumbs from pagecomponents #2604

web/components/src/index.ts

@@ -16,4 +16,3 @@ export * from './Heading'
 export * from './Table'
 export * from './Tabs'
 export * from './Form'
-export * from './Breadcrumbs'

web/core/Breadcrumbs/BreadcrumbList.tsx

@@ -0,0 +1,15 @@
+import { forwardRef, HTMLAttributes } from 'react'
+import { twMerge } from 'tailwind-merge'
+
+export type BreadcrumbsProps = HTMLAttributes<HTMLOListElement>
+
+export const BreadcrumbsList = forwardRef<HTMLOListElement, BreadcrumbsProps>(function Breadcrumbs(
+  { children, className = '' },
+  ref
+) {
+  return (
+    <ol ref={ref} className={twMerge('p-0 list-none text-sm leading-8', className)}>
+      {children}
+    </ol>
+  )
+})

web/core/Breadcrumbs/BreadcrumbListItem.tsx

@@ -0,0 +1,23 @@
+import { forwardRef, HTMLAttributes } from 'react'
+import { twMerge } from 'tailwind-merge'
+
+export type BreadcrumbsListItemProps = HTMLAttributes<HTMLLIElement> & {
+  active?: boolean
+}
+
+export const BreadcrumbsListItem = forwardRef<HTMLLIElement, BreadcrumbsListItemProps>(
+  ({ children, active, ...rest }, ref) => {
+    return (
+      <li
+        ref={ref}
+        {...rest}
+        className={twMerge(
+          'inline-block pr-2 text-grey-90 after:content-[">"] after:pl-2 last:after:content-[""]',
+          active ? 'font-medium text-slate-blue-90' : 'font-bold'
+        )}
+      >
+        {children}
+      </li>
+    )
+  }
+)

web/core/Breadcrumbs/Breadcrumbs.tsx

@@ -0,0 +1,79 @@
+import { BreadcrumbsList } from './index'
+import { BackgroundContainer, BackgroundContainerProps } from '@components'
+import { BreadcrumbJsonLd } from 'next-seo'
+import { useRouter } from 'next/router'
+import { twMerge } from 'tailwind-merge'
+import NextLink from 'next/link'
+import type { Breadcrumb } from '../../types'
+
+type BreadcrumbsProps = {
+  slug: string
+  useCustomBreadcrumbs: boolean
+  defaultBreadcrumbs: Breadcrumb[]
+  customBreadcrumbs: Breadcrumb[]
+  className?: string
+} & BackgroundContainerProps
+
+const buildJsonLdElements = (crumbs: Breadcrumb[], router: ReturnType<typeof useRouter>) => {
+  const { pathname, locale } = router
+
+  return crumbs.map((item, index) => ({
+    position: index + 1,
+    name: item.label,
+    item: `${pathname}/${item.slug}`,
+  }))
+}
+
+const capitalize = (text: string): string => text[0].toUpperCase() + text.slice(1)
+
+const parseBreadcrumbs = (crumbs: Breadcrumb[]) => {
+  return crumbs.map((item) => ({
+    ...item,
+    label: capitalize(item.label),
+  }))
+}
+
+export const Breadcrumbs = ({
+  slug,
+  useCustomBreadcrumbs,
+  defaultBreadcrumbs,
+  customBreadcrumbs,
+  background,
+  className = '',
+}: BreadcrumbsProps) => {
+  const router = useRouter()
+  const crumbs =
+    useCustomBreadcrumbs && customBreadcrumbs.length >= 3
+      ? parseBreadcrumbs(customBreadcrumbs)
+      : parseBreadcrumbs(defaultBreadcrumbs)
+
+  if (crumbs.length < 2) return null
+
+  return (
+    <BackgroundContainer background={background} renderFragmentWhenPossible className="mx-auto max-w-viewport">
+      <nav aria-label="Breadcrumbs">
+        <BreadcrumbsList className={twMerge(`py-10 px-layout-lg`, className)}>
+          {crumbs.map((item) => {
+            const isActive = item.slug === slug
+            const label = item.label
+            return (
+              <BreadcrumbsList.BreadcrumbsListItem key={item.slug} active={isActive}>
+                {isActive ? (
+                  <span aria-current="page">{label}</span>
+                ) : (
+                  <NextLink
+                    href={item.slug}
+                    className="hover:underline no-underline focus:outline-none focus-visible:envis-outline dark:focus-visible:envis-outline-invert"
+                  >
+                    {label}
+                  </NextLink>
+                )}
+              </BreadcrumbsList.BreadcrumbsListItem>
+            )
+          })}
+        </BreadcrumbsList>
+      </nav>
+      <BreadcrumbJsonLd itemListElements={buildJsonLdElements(crumbs, router)} />
+    </BackgroundContainer>
+  )
+}

web/components/src/Breadcrumbs/index.ts → web/core/Breadcrumbs/index.ts

@@ -1,5 +1,6 @@
 import { BreadcrumbsList as Wrapper } from './BreadcrumbList'
 import { BreadcrumbsListItem } from './BreadcrumbListItem'
+import { Breadcrumbs } from './Breadcrumbs'
 
 type BreadcrumbsListCompoundProps = typeof Wrapper & {
   BreadcrumbsListItem: typeof BreadcrumbsListItem
@@ -9,4 +10,4 @@ const BreadcrumbsList = Wrapper as BreadcrumbsListCompoundProps
 
 BreadcrumbsList.BreadcrumbsListItem = BreadcrumbsListItem
 
-export { BreadcrumbsList }
+export { Breadcrumbs, BreadcrumbsList }

web/pageComponents/pageTemplates/TopicPage.tsx

@@ -5,7 +5,7 @@ import Seo from '../shared/Seo'
 import { SharedBanner } from './shared/SharedBanner'
 import { PageContent } from './shared/SharedPageContent'
 import SharedTitle from './shared/SharedTitle'
-import { Breadcrumbs } from '../topicPages/Breadcrumbs'
+import { Breadcrumbs } from '@core/Breadcrumbs'
 
 type TopicPageProps = {
   data: TopicPageSchema