@graphcommerce/next-ui 8.1.0-canary.26 → 8.1.0-canary.28

package/Breadcrumbs/Breadcrumbs.tsx

@@ -0,0 +1,195 @@
+import { Trans } from '@lingui/react'
+import {
+  Box,
+  Breadcrumbs as MuiBreadcrumbs,
+  BreadcrumbsProps as MuiBreadcrumbProps,
+  ClickAwayListener,
+  IconButton,
+  Link,
+  Typography,
+  useEventCallback,
+  useTheme,
+  SxProps,
+  Theme,
+  LinkProps,
+} from '@mui/material'
+import dynamic from 'next/dynamic'
+import { useState, MouseEvent } from 'react'
+import { IconSvg } from '../IconSvg'
+import { iconClose, iconEllypsis } from '../icons'
+import type { BreadcrumbsType } from './types'
+import { i18n } from '@lingui/core'
+import { Button } from '../Button'
+
+const BreadcrumbsPopper = dynamic(
+  async () => (await import('./BreadcrumbsPopper')).BreadcrumbsPopper,
+)
+
+export type BreadcrumbsProps = BreadcrumbsType &
+  Omit<MuiBreadcrumbProps, 'children'> & {
+    maxItems?: number
+    lastIsLink?: boolean
+    breadcrumbsAmountDesktop?: number
+    breadcrumbsAmountMobile?: number
+    itemSx?: SxProps<Theme>
+    linkProps?: Omit<LinkProps, 'href'>
+  }
+
+export function Breadcrumbs(props: BreadcrumbsProps) {
+  const {
+    breadcrumbs,
+    sx,
+    breadcrumbsAmountDesktop = 4,
+    breadcrumbsAmountMobile = 2,
+    lastIsLink = false,
+    maxItems,
+    itemSx = [],
+    linkProps,
+    ...rest
+  } = props
+  const [anchorElement, setAnchorElement] = useState<HTMLButtonElement | null>(null)
+  const theme = useTheme()
+
+  const isDefaultMobile = breadcrumbsAmountMobile === 0
+  const showButtonMobile = breadcrumbs.length > breadcrumbsAmountMobile && !isDefaultMobile
+  const isDefaultDesktop = breadcrumbsAmountDesktop === 0
+  const showButtonDesktop = breadcrumbs.length > breadcrumbsAmountDesktop && !isDefaultDesktop
+
+  const handleClick = useEventCallback((event: MouseEvent<HTMLButtonElement>) => {
+    setAnchorElement((el) => (el !== event.currentTarget ? event.currentTarget : null))
+  })
+
+  const handleClose = () => setAnchorElement(null)
+
+  const breadcrumbLinks = [...(lastIsLink ? breadcrumbs : breadcrumbs.slice(0, -1))]
+  const last = lastIsLink ? null : breadcrumbs[breadcrumbs.length - 1]
+
+  return (
+    <MuiBreadcrumbs
+      {...rest}
+      aria-label={i18n._(/* i18n*/ `Breadcrumbs`)}
+      maxItems={maxItems}
+      color='inherit'
+      sx={[
+        {},
+        !maxItems && {
+          '& .MuiBreadcrumbs-ol': {
+            flexWrap: 'nowrap',
+            '& .MuiBreadcrumbs-li': {
+              '&:nth-of-type(1)': {
+                display: {
+                  xs: showButtonMobile ? 'flex' : 'none',
+                  md: showButtonDesktop ? 'flex' : 'none',
+                },
+              },
+              '&:nth-last-of-type(1)': {
+                display: 'inline-flex',
+                overflowX: 'hidden',
+              },
+            },
+          },
+          '& .MuiBreadcrumbs-separator': {
+            '&:nth-of-type(2)': {
+              display: {
+                xs: !showButtonMobile && 'none',
+                md: !showButtonDesktop && 'none',
+              },
+            },
+          },
+
+          [theme.breakpoints.down('md')]: showButtonMobile && {
+            '& .MuiBreadcrumbs-li, & .MuiBreadcrumbs-separator': {
+              display: 'none',
+              [`&:nth-last-of-type(-n+${breadcrumbsAmountMobile * 2})`]: {
+                display: 'flex',
+              },
+            },
+          },
+
+          [theme.breakpoints.up('md')]: showButtonDesktop && {
+            '& .MuiBreadcrumbs-li, & .MuiBreadcrumbs-separator': {
+              display: 'none',
+              [`&:nth-last-of-type(-n+${breadcrumbsAmountDesktop * 2})`]: {
+                display: 'flex',
+              },
+            },
+          },
+        },
+        ...(Array.isArray(sx) ? sx : [sx]),
+      ]}
+    >
+      {!maxItems && (
+        <ClickAwayListener
+          mouseEvent='onMouseDown'
+          touchEvent='onTouchStart'
+          onClickAway={handleClose}
+        >
+          <Box sx={{ position: 'relative', display: 'flex' }}>
+            <Button
+              aria-describedby={anchorElement ? 'breadcrumb-list' : undefined}
+              color='inherit'
+              variant='pill'
+              size='small'
+              onClick={handleClick}
+              sx={{
+                minWidth: 0,
+                // borderRadius: 2,
+                // boxShadow: 6,
+                // color: 'text.primary',
+                // px: 1,
+                // py: { xs: 0.3, md: 0.5 },
+                // typography: 'caption',
+                // backgroundColor: 'background.paper',
+              }}
+            >
+              <IconSvg src={anchorElement ? iconClose : iconEllypsis} />
+            </Button>
+            <BreadcrumbsPopper
+              breadcrumbs={breadcrumbs}
+              anchorElement={anchorElement}
+              onClose={handleClose}
+              showDesktopAmount={breadcrumbsAmountDesktop}
+              showMobileAmount={breadcrumbsAmountMobile}
+            />
+          </Box>
+        </ClickAwayListener>
+      )}
+
+      <Link
+        href='/'
+        color='inherit'
+        underline='hover'
+        {...linkProps}
+        sx={[...(Array.isArray(itemSx) ? itemSx : [itemSx])]}
+      >
+        <Trans id='Home' />
+      </Link>
+      {breadcrumbLinks.map((breadcrumb) => (
+        <Link
+          key={breadcrumb.href}
+          color='inherit'
+          underline='hover'
+          {...breadcrumb}
+          {...linkProps}
+          sx={[
+            ...(Array.isArray(breadcrumb.sx) ? breadcrumb.sx : [breadcrumb.sx]),
+            ...(Array.isArray(itemSx) ? itemSx : [itemSx]),
+          ]}
+        >
+          {breadcrumb.name}
+        </Link>
+      ))}
+
+      {last && (
+        <Typography
+          component='span'
+          noWrap
+          color='inherit'
+          sx={[{ fontWeight: '600' }, ...(Array.isArray(itemSx) ? itemSx : [itemSx])]}
+        >
+          {last.name}
+        </Typography>
+      )}
+    </MuiBreadcrumbs>
+  )
+}

package/Breadcrumbs/BreadcrumbsJsonLd.tsx

@@ -0,0 +1,13 @@
+import { JsonLd } from '../JsonLd/JsonLd'
+import type { BreadcrumbsType } from './types'
+
+type BreadcrumbsJsonLdProps<T extends { '@type': string }> = BreadcrumbsType & {
+  render: (breadcrumbs: BreadcrumbsType['breadcrumbs']) => T & { '@context': 'https://schema.org' }
+}
+
+export function BreadcrumbsJsonLd<T extends { '@type': string }>(props: BreadcrumbsJsonLdProps<T>) {
+  const { render, breadcrumbs } = props
+
+  if (!breadcrumbs.length) return null
+  return <JsonLd<T> item={render(breadcrumbs)} keyVal='breadcrumb-jsonld' />
+}

package/Breadcrumbs/BreadcrumbsList.tsx

@@ -0,0 +1,101 @@
+import { Trans } from '@lingui/react'
+import { Box, Link, alpha, useTheme } from '@mui/material'
+import { useEffect, useRef, KeyboardEvent } from 'react'
+import type { BreadcrumbsType } from './types'
+
+type PopperBreadcrumbsListProps = {
+  autoFocus: boolean
+  breadcrumbs: BreadcrumbsType['breadcrumbs']
+  showDesktopAmount?: number
+  showMobileAmount?: number
+  onClose: () => void
+}
+
+export function BreadcrumbsList(props: PopperBreadcrumbsListProps) {
+  const { autoFocus, breadcrumbs, showDesktopAmount = 4, showMobileAmount = 3, onClose } = props
+  const listRef = useRef<HTMLDivElement | null>(null)
+  const theme = useTheme()
+
+  const handleKeyDown = (event: KeyboardEvent) => {
+    if (event.key === 'Escape') {
+      onClose()
+    }
+  }
+
+  useEffect(() => {
+    if (autoFocus) {
+      listRef.current?.focus()
+    }
+  }, [autoFocus])
+
+  return (
+    <Box
+      ref={listRef}
+      onKeyDown={handleKeyDown}
+      tabIndex={-1}
+      sx={{
+        backgroundColor: 'background.paper',
+        borderRadius: 3,
+        boxShadow: 12,
+        display: 'flex',
+        flexDirection: 'column',
+        overflow: 'hidden auto',
+        py: `calc(${theme.spacings.xxs} / 2)`,
+        [theme.breakpoints.up('md')]: {
+          '& .MuiLink-root': {
+            [`:nth-last-of-type(-n+${showDesktopAmount})`]: {
+              display: 'none',
+            },
+          },
+        },
+        [theme.breakpoints.down('md')]: {
+          '& .MuiLink-root': {
+            [`:nth-last-of-type(-n+${showMobileAmount})`]: {
+              display: 'none',
+            },
+          },
+        },
+      }}
+    >
+      <Link
+        href='/'
+        underline='none'
+        color='text.primary'
+        variant='body1'
+        noWrap
+        onClick={onClose}
+        tabIndex={0}
+        sx={{
+          flex: 1,
+          padding: `calc(${theme.spacings.xxs} / 2) ${theme.spacings.xs}`,
+          '&:hover': {
+            backgroundColor: alpha(theme.palette.action.hover, 0.025),
+          },
+        }}
+      >
+        <Trans id='Home' />
+      </Link>
+      {breadcrumbs.slice(0, breadcrumbs.length).map((breadcrumb) => (
+        <Link
+          {...breadcrumb}
+          key={breadcrumb.href}
+          underline='none'
+          color='text.primary'
+          variant='body1'
+          noWrap
+          onClick={onClose}
+          tabIndex={0}
+          sx={{
+            flex: 1,
+            padding: `calc(${theme.spacings.xxs} / 2) ${theme.spacings.xs}`,
+            '&:hover': {
+              backgroundColor: alpha(theme.palette.action.hover, 0.025),
+            },
+          }}
+        >
+          {breadcrumb.name}
+        </Link>
+      ))}
+    </Box>
+  )
+}

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/PageMeta'
+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)[]
+}

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # Change Log
 
+## 8.1.0-canary.28
+
+## 8.1.0-canary.27
+
+### Minor Changes
+
+- [#2273](https://github.com/graphcommerce-org/graphcommerce/pull/2273) [`77955c5`](https://github.com/graphcommerce-org/graphcommerce/commit/77955c56ac8633ab1c5e0f3ddb25e3a87236e2bb) - Improve Breadcrumbs on Category and Product pages
+  ([@Jessevdpoel](https://github.com/Jessevdpoel))
+
 ## 8.1.0-canary.26
 
 ### Minor Changes

package/Config.graphqls

@@ -3,6 +3,11 @@ extend input GraphCommerceConfig {
   Configuration for the SidebarGallery component
   """
   sidebarGallery: SidebarGalleryConfig
+
+  """
+  Configuration for the SidebarGallery component
+  """
+  breadcrumbs: Boolean = false
 }
 
 """

package/FramerScroller/SidebarGallery.tsx

@@ -356,7 +356,7 @@ export function SidebarGallery(props: SidebarGalleryProps) {
                 'THUMBNAILS_BOTTOM' ? (
                   <ScrollerThumbnails images={images} />
                 ) : (
-                  <ScrollerDots />
+                  <ScrollerDots layout />
                 )}
               </Box>
             </MotionBox>

package/JsonLd/JsonLd.tsx

@@ -2,14 +2,15 @@ import Head from 'next/head'
 import { safeJsonLdReplacer } from './safeJsonLdReplacer'
 
 export function JsonLd<T extends { '@type': string }>(props: {
+  keyVal?: string
   item: T & { '@context': 'https://schema.org' }
 }) {
-  const { item } = props
+  const { item, keyVal } = props
 
   return (
     <Head>
       <script
-        key='jsonld'
+        key={keyVal ?? 'jsonld'}
         type='application/ld+json'
         // eslint-disable-next-line react/no-danger
         dangerouslySetInnerHTML={{ __html: JSON.stringify(item, safeJsonLdReplacer) }}

package/Layout/components/LayoutHeader.tsx

@@ -140,6 +140,9 @@ export function LayoutHeader(props: LayoutHeaderProps) {
             '&.divider': {
               marginBottom: 0,
             },
+            '& .LayoutHeaderContent-left': import.meta.graphCommerce.breadcrumbs && {
+              display: 'none',
+            },
           },
         }),
         ...(Array.isArray(sx) ? sx : [sx]),

package/Layout/components/LayoutTitle.tsx

@@ -40,12 +40,7 @@ export const LayoutTitle = React.forwardRef<HTMLDivElement, TitleProps>((props,
           alignItems: 'center',
           justifyContent: 'center',
           gap: `6px`,
-          flexFlow: 'unset',
-          [theme.breakpoints.up('md')]: {
-            flexFlow: 'column',
-          },
           '&.sizeSmall': {
-            flexFlow: 'unset',
             overflow: 'hidden',
             '& svg': {
               width: responsiveVal(24, 28),

package/index.ts

@@ -8,6 +8,7 @@ export * from './Blog/BlogListItem/BlogListItem'
 export * from './Blog/BlogTags/BlogTags'
 export * from './Blog/BlogTitle/BlogTitle'
 export * from './Button'
+export * from './Breadcrumbs'
 export * from './ChipMenu/ChipMenu'
 export * from './ContainerWithHeader/ContainerWithHeader'
 export * from './Fab'

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/next-ui",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "8.1.0-canary.26",
+  "version": "8.1.0-canary.28",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -26,14 +26,14 @@
     "typescript": "5.3.3"
   },
   "peerDependencies": {
-    "@graphcommerce/eslint-config-pwa": "^8.1.0-canary.26",
-    "@graphcommerce/framer-next-pages": "^8.1.0-canary.26",
-    "@graphcommerce/framer-scroller": "^8.1.0-canary.26",
-    "@graphcommerce/framer-utils": "^8.1.0-canary.26",
-    "@graphcommerce/image": "^8.1.0-canary.26",
-    "@graphcommerce/lingui-next": "^8.1.0-canary.26",
-    "@graphcommerce/prettier-config-pwa": "^8.1.0-canary.26",
-    "@graphcommerce/typescript-config-pwa": "^8.1.0-canary.26",
+    "@graphcommerce/eslint-config-pwa": "^8.1.0-canary.28",
+    "@graphcommerce/framer-next-pages": "^8.1.0-canary.28",
+    "@graphcommerce/framer-scroller": "^8.1.0-canary.28",
+    "@graphcommerce/framer-utils": "^8.1.0-canary.28",
+    "@graphcommerce/image": "^8.1.0-canary.28",
+    "@graphcommerce/lingui-next": "^8.1.0-canary.28",
+    "@graphcommerce/prettier-config-pwa": "^8.1.0-canary.28",
+    "@graphcommerce/typescript-config-pwa": "^8.1.0-canary.28",
     "@lingui/core": "^4.2.1",
     "@lingui/macro": "^4.2.1",
     "@lingui/react": "^4.2.1",