@graphcommerce/next-ui 8.1.0-canary.8 → 9.0.0-canary.100

package/Breadcrumbs/BreadcrumbsPopper.tsx

@@ -0,0 +1,48 @@
+import { Box, Popper } from '@mui/material'
+import { BreadcrumbsList } from './BreadcrumbsList'
+import type { BreadcrumbsType } from './types'
+
+export type BreadcrumbsPopperType = BreadcrumbsType & {
+  anchorElement: HTMLButtonElement | null
+  showDesktopAmount?: number
+  showMobileAmount?: number
+  onClose: () => void
+}
+
+export function BreadcrumbsPopper(props: BreadcrumbsPopperType) {
+  const { anchorElement, breadcrumbs, showDesktopAmount, showMobileAmount, onClose } = props
+
+  return (
+    <Popper
+      anchorEl={anchorElement}
+      open={Boolean(anchorElement)}
+      disablePortal
+      placement='bottom-start'
+      modifiers={[
+        { name: 'offset', options: { offset: [0, 10] } },
+        {
+          name: 'preventOverflow',
+          enabled: true,
+          options: { altBoundary: false, padding: 10 },
+        },
+      ]}
+      sx={(theme) => ({
+        maxWidth: {
+          md: `calc(100vw - ${theme.spacings.xxl} * 2)`,
+          xs: `calc(100vw - ${theme.page.horizontal} * 2)`,
+        },
+        zIndex: 100,
+      })}
+    >
+      <Box>
+        <BreadcrumbsList
+          autoFocus={Boolean(anchorElement)}
+          breadcrumbs={breadcrumbs}
+          showDesktopAmount={showDesktopAmount}
+          showMobileAmount={showMobileAmount}
+          onClose={onClose}
+        />
+      </Box>
+    </Popper>
+  )
+}

package/Breadcrumbs/index.ts

@@ -0,0 +1,4 @@
+export * from './Breadcrumbs'
+export * from './types'
+export * from './BreadcrumbsJsonLd'
+export * from './jsonLdBreadcrumb'

package/Breadcrumbs/jsonLdBreadcrumb.tsx

@@ -0,0 +1,19 @@
+import { NextRouter } from 'next/router'
+import type { BreadcrumbList } from 'schema-dts'
+import { canonicalize } from '../PageMeta/canonicalize'
+import type { BreadcrumbsType } from './types'
+
+export function jsonLdBreadcrumb(
+  breadcrumbs: BreadcrumbsType['breadcrumbs'],
+  router: NextRouter,
+): BreadcrumbList {
+  return {
+    '@type': 'BreadcrumbList',
+    itemListElement: breadcrumbs.map(({ name, href }, index) => ({
+      '@type': 'ListItem',
+      position: index + 1,
+      name,
+      item: canonicalize(router, href),
+    })),
+  }
+}

package/Breadcrumbs/types.ts

@@ -0,0 +1,11 @@
+import { Theme } from '@emotion/react'
+import { SxProps } from '@mui/material'
+
+export type BreadcrumbItem = {
+  name: string
+  href: string
+}
+
+export type BreadcrumbsType = {
+  breadcrumbs: ({ sx?: SxProps<Theme> } & BreadcrumbItem)[]
+}