@graphcommerce/next-ui 8.1.0-canary.3 → 8.1.0-canary.30

package/ActionCard/ActionCard.tsx

@@ -13,7 +13,7 @@ import { extendableComponent, responsiveVal } from '../Styles'
 import { breakpointVal } from '../Styles/breakpointVal'
 
 type Variants = 'outlined' | 'default'
-type Size = 'large' | 'medium' | 'small'
+type Size = 'large' | 'medium' | 'small' | 'responsive'
 type Color = 'primary' | 'secondary' | 'success' | 'error' | 'info' | 'warning'
 type Layout = 'inline' | 'grid' | 'list' | 'stack'
 
@@ -47,6 +47,7 @@ export type ActionCardProps = {
 
 const parts = [
   'root',
+  'rootInner',
   'image',
   'title',
   'action',
@@ -77,6 +78,13 @@ const { withState, selectors } = extendableComponent<StateProps, typeof name, ty
 
 export const actionCardSelectors = selectors
 
+export const actionCardImageSizes = {
+  small: responsiveVal(60, 80),
+  medium: responsiveVal(60, 80),
+  large: responsiveVal(100, 120),
+  responsive: responsiveVal(60, 120),
+}
+
 export function ActionCard(props: ActionCardProps) {
   const {
     title,
@@ -92,7 +100,7 @@ export function ActionCard(props: ActionCardProps) {
     selected = false,
     reset,
     disabled = false,
-    size = 'medium',
+    size = 'responsive',
     color = 'primary',
     variant = 'outlined',
     layout = 'list',
@@ -140,6 +148,12 @@ export function ActionCard(props: ActionCardProps) {
             py: responsiveVal(12, 14),
             display: 'block',
           },
+          '&.sizeResponsive': {
+            px: responsiveVal(8, 16),
+            py: responsiveVal(4, 14),
+            display: { xs: 'flex', md: 'block', lg: 'block' },
+            [theme.breakpoints.down('md')]: { typography: 'body2' },
+          },
 
           '&.variantDefault': {
             position: 'relative',
@@ -186,6 +200,13 @@ export function ActionCard(props: ActionCardProps) {
                 mb: { xs: '-5px', sm: '-7px', md: '-8px' },
               },
             },
+            '&.sizeResponsive': {
+              mt: responsiveVal(2, 8),
+              mb: responsiveVal(3, 9),
+              '&::after': {
+                mb: responsiveVal(-2, -8),
+              },
+            },
           },
 
           '&.variantOutlined': {
@@ -261,6 +282,7 @@ export function ActionCard(props: ActionCardProps) {
       ]}
     >
       <Box
+        className={classes.rootInner}
         sx={{
           display: 'flex',
           flexDirection: 'row',
@@ -301,6 +323,7 @@ export function ActionCard(props: ActionCardProps) {
                   '&.sizeSmall': { typography: 'body2' },
                   '&.sizeMedium': { typography: 'body1' },
                   '&.sizeLarge': { typography: 'h6' },
+                  '&.sizeResponsive': { typography: { xs: 'body2', md: 'body1', lg: 'h6' } },
                 }}
               >
                 {title}
@@ -341,8 +364,9 @@ export function ActionCard(props: ActionCardProps) {
               sx={{
                 textAlign: 'right',
                 typography: 'body1',
-                '&.sizeMedium': { typographty: 'subtitle1' },
+                '&.sizeMedium': { typography: 'subtitle1' },
                 '&.sizeLarge': { typography: 'h6' },
+                '&.sizeResponsive': { typography: { xs: 'body1', md: 'subtitle1', lg: 'h6' } },
               }}
             >
               {price}

package/ActionCard/ActionCardListForm.tsx

@@ -1,5 +1,10 @@
 /* eslint-disable import/no-extraneous-dependencies */
-import { Controller, ControllerProps, FieldValues } from '@graphcommerce/react-hook-form'
+import {
+  Controller,
+  ControllerProps,
+  FieldValues,
+  useController,
+} from '@graphcommerce/react-hook-form'
 import React, { MouseEventHandler } from 'react'
 import { ActionCardProps } from './ActionCard'
 import { ActionCardList, ActionCardListProps } from './ActionCardList'
@@ -43,38 +48,41 @@ export function ActionCardListForm<
       : selectValues === itemValue
   }
 
+  const {
+    field: { onChange, value, ref },
+    fieldState,
+    formState,
+  } = useController({
+    ...props,
+    control,
+    name,
+    defaultValue,
+    rules: { required: errorMessage || required, ...rules },
+  })
+
   return (
-    <Controller
-      {...props}
-      control={control}
-      name={name}
-      defaultValue={defaultValue}
-      rules={{ required: errorMessage || required, ...rules }}
-      render={({ field: { onChange, value, ref }, fieldState, formState }) => (
-        <ActionCardList
-          {...other}
-          multiple={multiple}
-          required={required}
-          value={value}
-          ref={ref}
-          onChange={(_, incomming) => onChange(incomming)}
-          error={formState.isSubmitted && !!fieldState.error}
-          errorMessage={fieldState.error?.message}
-        >
-          {items.map((item) => (
-            <RenderItem
-              {...item}
-              key={item.value ?? ''}
-              value={item.value}
-              selected={onSelect(item.value, value)}
-              onReset={(e) => {
-                e.preventDefault()
-                onChange(null)
-              }}
-            />
-          ))}
-        </ActionCardList>
-      )}
-    />
+    <ActionCardList
+      {...other}
+      multiple={multiple}
+      required={required}
+      value={value}
+      ref={ref}
+      onChange={(_, incomming) => onChange(incomming)}
+      error={formState.isSubmitted && !!fieldState.error}
+      errorMessage={fieldState.error?.message}
+    >
+      {items.map((item) => (
+        <RenderItem
+          {...item}
+          key={item.value ?? ''}
+          value={item.value}
+          selected={onSelect(item.value, value)}
+          onReset={(e) => {
+            e.preventDefault()
+            onChange(null)
+          }}
+        />
+      ))}
+    </ActionCardList>
   )
 }

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