@graphcommerce/next-ui 8.1.0-canary.9 → 9.0.0-canary.55

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'
 
@@ -37,9 +37,9 @@ export type ActionCardProps = {
   price?: React.ReactNode
   after?: React.ReactNode
   secondaryAction?: React.ReactNode
-  onClick?: (event: React.MouseEvent<HTMLElement>, value: string | number | null) => void
+  onClick?: (event: React.MouseEvent<HTMLElement>, value: string | number | boolean | null) => void
   selected?: boolean
-  value: string | number | null
+  value: string | number | boolean | null
   reset?: React.ReactNode
   disabled?: boolean
   error?: boolean
@@ -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,18 +148,24 @@ 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',
-            '&::after': {
-              content: '""',
-              position: 'absolute',
-              width: '100%',
-              left: 0,
-              bottom: '-1px',
-              borderBottom: `1px solid ${theme.palette.divider}`,
-              display: 'block',
-            },
+            // '&::after': {
+            //   content: '""',
+            //   position: 'absolute',
+            //   width: '100%',
+            //   left: 0,
+            //   bottom: '-1px',
+            //   borderBottom: `1px solid ${theme.palette.divider}`,
+            //   display: 'block',
+            // },
             '&.selected': {
               backgroundColor:
                 theme.palette.mode === 'light'
@@ -165,27 +179,34 @@ export function ActionCard(props: ActionCardProps) {
               )}`,
             },
 
-            '&.sizeSmall': {
-              mt: { xs: '2px', sm: '3px', md: '5px' },
-              mb: { xs: '3px', sm: '4px', md: '6px' },
-              '&::after': {
-                mb: { xs: '-2px', sm: '-3px', md: '-5px' },
-              },
-            },
-            '&.sizeMedium': {
-              mt: { xs: '4px', sm: '5px', md: '6px' },
-              mb: { xs: '5px', sm: '6px', md: '7px' },
-              '&::after': {
-                mb: { xs: '-4px', sm: '-5px', md: '-6px' },
-              },
-            },
-            '&.sizeLarge': {
-              mt: { xs: '5px', sm: '7px', md: '8px' },
-              mb: { xs: '6px', sm: '8px', md: '9px' },
-              '&::after': {
-                mb: { xs: '-5px', sm: '-7px', md: '-8px' },
-              },
-            },
+            // '&.sizeSmall': {
+            //   mt: { xs: '2px', sm: '3px', md: '5px' },
+            //   mb: { xs: '3px', sm: '4px', md: '6px' },
+            //   '&::after': {
+            //     mb: { xs: '-2px', sm: '-3px', md: '-5px' },
+            //   },
+            // },
+            // '&.sizeMedium': {
+            //   mt: { xs: '4px', sm: '5px', md: '6px' },
+            //   mb: { xs: '5px', sm: '6px', md: '7px' },
+            //   '&::after': {
+            //     mb: { xs: '-4px', sm: '-5px', md: '-6px' },
+            //   },
+            // },
+            // '&.sizeLarge': {
+            //   mt: { xs: '5px', sm: '7px', md: '8px' },
+            //   mb: { xs: '6px', sm: '8px', md: '9px' },
+            //   '&::after': {
+            //     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',
@@ -298,9 +320,10 @@ export function ActionCard(props: ActionCardProps) {
               <Box
                 className={classes.title}
                 sx={{
-                  '&.sizeSmall': { typography: 'body2' },
+                  '&.sizeSmall': { typography: 'body1' },
                   '&.sizeMedium': { typography: 'body1' },
                   '&.sizeLarge': { typography: 'h6' },
+                  '&.sizeResponsive': { typography: { xs: 'body1', md: 'body1', lg: 'body1' } },
                 }}
               >
                 {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/ActionCardAccordion.tsx

@@ -29,6 +29,7 @@ export function ActionCardAccordion(props: ActionCardAccordionProps) {
           '&.Mui-expanded': { my: 0 },
           '::before': { display: 'none' },
           border: 'none',
+          borderBottom: `1px solid ${theme.palette.divider}`,
           '&:not(.Mui-expanded)': { borderBottom: `1px solid ${theme.palette.divider}` },
         }),
         ...(Array.isArray(sx) ? sx : [sx]),
@@ -39,7 +40,7 @@ export function ActionCardAccordion(props: ActionCardAccordionProps) {
         expandIcon={<IconSvg src={iconChevronDown} />}
         sx={{
           px: 0,
-          typography: 'h6',
+          typography: 'subtitle1',
           minHeight: 54,
           '& .MuiAccordionSummary-content': {
             display: 'flex',

package/ActionCard/ActionCardList.tsx

@@ -12,13 +12,13 @@ import { ActionCardLayout } from './ActionCardLayout'
 type MultiSelect = {
   multiple: true
   collapse?: false
-  value: (string | number | null)[]
+  value: (string | boolean | number | null)[]
 
   onChange?: (event: React.MouseEvent<HTMLElement>, value: MultiSelect['value']) => void
 }
 type Select = {
   multiple?: boolean
-  value: string | number | null
+  value: string | boolean | number | null
   collapse?: boolean
 
   /** Value is null when deselected when not required */
@@ -44,6 +44,7 @@ function isValueSelected(
   candidate?: Select['value'] | MultiSelect['value'],
 ) {
   if (candidate === undefined) return false
+  if (typeof value === 'boolean') return value
   if (Array.isArray(candidate)) return candidate.indexOf(value) >= 0
   return value === candidate
 }

package/ActionCard/ActionCardListForm.tsx

@@ -74,7 +74,7 @@ export function ActionCardListForm<
       {items.map((item) => (
         <RenderItem
           {...item}
-          key={item.value ?? ''}
+          key={`${item.value}`}
           value={item.value}
           selected={onSelect(item.value, value)}
           onReset={(e) => {

package/Blog/BlogAuthor/BlogAuthor.tsx

@@ -1,6 +1,6 @@
 import { Avatar, Box, Chip, SxProps, Theme } from '@mui/material'
 import { responsiveVal } from '../../Styles/responsiveVal'
-import { useDateTimeFormat } from '../../hooks'
+import { DateFormat } from '../../Intl/DateTimeFormat'
 
 export type BlogAuthorProps = {
   author: string
@@ -11,8 +11,6 @@ export type BlogAuthorProps = {
 export function BlogAuthor(props: BlogAuthorProps) {
   const { author, date, sx = [] } = props
 
-  const formatter = useDateTimeFormat({ month: 'long', day: 'numeric' })
-
   return (
     <Box
       maxWidth='md'
@@ -48,7 +46,7 @@ export function BlogAuthor(props: BlogAuthorProps) {
               {author}
             </Box>
             <Box sx={(theme) => ({ lineHeight: 1.4, color: theme.palette.text.disabled })}>
-              {formatter.format(new Date(date))}
+              <DateFormat dateStyle='long'>{date}</DateFormat>
             </Box>
           </section>
         }

package/Blog/BlogListItem/BlogListItem.tsx

@@ -2,7 +2,7 @@ import { Box, Link, SxProps, Theme, Typography } from '@mui/material'
 import React from 'react'
 import { extendableComponent } from '../../Styles'
 import { breakpointVal } from '../../Styles/breakpointVal'
-import { useDateTimeFormat } from '../../hooks'
+import { DateFormat } from '../../Intl'
 
 export type BlogListItemProps = {
   asset: React.ReactNode
@@ -19,8 +19,6 @@ const { classes } = extendableComponent(name, parts)
 export function BlogListItem(props: BlogListItemProps) {
   const { asset, url, date, title, sx = [] } = props
 
-  const formatter = useDateTimeFormat({ dateStyle: 'long' })
-
   return (
     <Box
       className={classes.item}
@@ -67,7 +65,7 @@ export function BlogListItem(props: BlogListItemProps) {
             color: theme.palette.text.secondary,
           })}
         >
-          {formatter.format(new Date(date))}
+          <DateFormat dateStyle='long'>{date}</DateFormat>
         </Box>
       )}
 

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