@graphcommerce/next-ui 3.25.1 → 4.0.0

package/IconHeader/index.tsx

@@ -1,70 +1,42 @@
-import { makeStyles, Theme, Typography } from '@material-ui/core'
-import clsx from 'clsx'
-import React from 'react'
-import { SvgImageProps } from '../SvgImage'
-import SvgImageSimple from '../SvgImage/SvgImageSimple'
+import { Box, SxProps, Theme, Typography } from '@mui/material'
+import { extendableComponent } from '../Styles'
+import { SvgIcon, SvgIconProps } from '../SvgIcon/SvgIcon'
 
 // TODO: remove all occurrences. deprecated component
 
-const useStyles = makeStyles(
-  (theme: Theme) => ({
-    container: {
-      ...theme.typography.subtitle1,
-      textAlign: 'center',
-    },
-    innerContainer: {
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'center',
-      gap: 4,
-    },
-    breakColumnsDesktop: {
-      [theme.breakpoints.up('md')]: {
-        display: 'unset',
-      },
-    },
-    margin: {
-      marginTop: theme.spacings.sm,
-      marginBottom: theme.spacings.sm,
-    },
-    ellipsis: {
-      whiteSpace: 'nowrap',
-      overflow: 'hidden',
-      textOverflow: 'ellipsis',
-    },
-    mediumFontWeight: {
-      fontWeight: 700,
-    },
-  }),
-  { name: 'IconHeader' },
-)
-
 export type IconHeaderSize = 'small' | 'medium' | 'large'
 
 type IconHeaderProps = {
-  title: string
+  children: React.ReactNode
   size?: IconHeaderSize
-  iconSize?: number
-  iconSizeMobile?: number
   noMargin?: boolean
   stayInline?: boolean
   ellipsis?: boolean
-} & Pick<SvgImageProps, 'src' | 'alt'>
+  sx?: SxProps<Theme>
+} & Pick<SvgIconProps, 'src'>
 
 type IconHeaderHeadings = 'h2' | 'h4' | 'h5'
 
-export default function IconHeader(props: IconHeaderProps) {
+const { classes, selectors } = extendableComponent('IconHeader', [
+  'root',
+  'container',
+  'innerContainer',
+  'breakColumnsDesktop',
+  'margin',
+  'ellipsis',
+  'mediumFontWeight',
+] as const)
+
+export function IconHeader(props: IconHeaderProps) {
   const {
-    title,
+    children,
     size = 'large',
     stayInline = false,
     noMargin = false,
     ellipsis = false,
-    iconSize,
-    iconSizeMobile,
-    ...svgImageProps
+    src,
+    sx = [],
   } = props
-  const classes = useStyles()
 
   const variants: Record<IconHeaderSize, IconHeaderHeadings> = {
     small: 'h5',
@@ -73,20 +45,53 @@ export default function IconHeader(props: IconHeaderProps) {
   }
 
   return (
-    <div className={clsx(classes.container, !noMargin && classes.margin)}>
-      <div className={clsx(classes.innerContainer, !stayInline && classes.breakColumnsDesktop)}>
-        <SvgImageSimple {...svgImageProps} />
+    <Box
+      className={classes.root}
+      sx={[
+        {
+          typography: 'subtitle1',
+          textAlign: 'center',
+        },
+        !noMargin &&
+          ((theme) => ({
+            marginTop: theme.spacings.sm,
+            marginBottom: theme.spacings.sm,
+          })),
+        ...(Array.isArray(sx) ? sx : [sx]),
+      ]}
+    >
+      <Box
+        className={`${classes.innerContainer} ${!stayInline ? classes.breakColumnsDesktop : ''}`}
+        sx={[
+          {
+            display: { xs: 'flex', md: stayInline ? 'flex' : 'unset' },
+            alignItems: 'center',
+            justifyContent: 'center',
+            gap: 4,
+          },
+        ]}
+      >
+        <SvgIcon src={src} />
         <Typography
           variant={variants[size]}
           component='h2'
-          className={clsx(
-            ellipsis && classes.ellipsis,
-            size === 'medium' && classes.mediumFontWeight,
-          )}
+          className={`${ellipsis ? classes.ellipsis : ''} ${
+            size === 'medium' ? classes.mediumFontWeight : ''
+          }`}
+          sx={[
+            ellipsis && {
+              whiteSpace: 'nowrap',
+              overflow: 'hidden',
+              textOverflow: 'ellipsis',
+            },
+            size === 'medium' && { fontWeight: 'bold' },
+          ]}
         >
-          {title}
+          {children}
         </Typography>
-      </div>
-    </div>
+      </Box>
+    </Box>
   )
 }
+
+IconHeader.selectors = selectors

package/JsonLd/index.tsx

@@ -1,13 +1,14 @@
 import Head from 'next/head'
-import React from 'react'
 import { jsonLdScriptProps } from 'react-schemaorg'
 import { Thing, WithContext } from 'schema-dts'
 
+export * as SchemaDts from 'schema-dts'
+
 export type JsonLdProps<T extends Thing> = {
   item: WithContext<T>
 }
 
-export default function JsonLd<T extends Thing>(props: JsonLdProps<T>) {
+export function JsonLd<T extends Thing>(props: JsonLdProps<T>) {
   const { item } = props
 
   return (

package/Layout/components/LayoutHeader.tsx

@@ -1,13 +1,13 @@
-import { makeStyles, Theme } from '@material-ui/core'
+import { Box, SxProps, Theme } from '@mui/material'
 import React from 'react'
-import { classesPicker } from '../../Styles/classesPicker'
+import { extendableComponent } from '../../Styles'
 import LayoutHeaderBack, { useShowBack } from './LayoutHeaderBack'
 import LayoutHeaderClose, { useShowClose } from './LayoutHeaderClose'
-import LayoutHeaderContent, { ContentProps } from './LayoutHeaderContent'
+import LayoutHeaderContent, { LayoutHeaderContentProps } from './LayoutHeaderContent'
 import { FloatingProps } from './LayoutHeadertypes'
 
 export type LayoutHeaderProps = FloatingProps &
-  Omit<ContentProps, 'left' | 'right'> & {
+  Omit<LayoutHeaderContentProps, 'left' | 'right'> & {
     /**
      * Button to display on the left side of the title
      *
@@ -24,79 +24,25 @@ export type LayoutHeaderProps = FloatingProps &
     secondary?: React.ReactNode
 
     noAlign?: boolean
+
+    sx?: SxProps<Theme>
   }
 
-const useStyles = makeStyles(
-  (theme: Theme) => ({
-    sticky: {
-      zIndex: theme.zIndex.appBar,
-      position: 'sticky',
-      pointerEvents: 'none',
-
-      [theme.breakpoints.up('md')]: {
-        top: 0,
-        height: theme.appShell.appBarHeightMd,
-        marginTop: `calc((${theme.appShell.appBarHeightMd} - ${theme.appShell.appBarInnerHeightMd}) * -0.5)`,
-        marginBottom: `calc(${theme.appShell.appBarHeightMd} * -1 - calc((${theme.appShell.appBarHeightMd} - ${theme.appShell.appBarInnerHeightMd}) * -0.5))`,
-      },
-    },
-    stickyNoChildren: {
-      zIndex: theme.zIndex.appBar - 2,
-    },
-    stickyVisibleSm: {
-      [theme.breakpoints.down('sm')]: {
-        top: 0,
-        marginTop: `calc(${theme.appShell.headerHeightSm} * -1)`,
-        height: theme.appShell.headerHeightSm,
-      },
-    },
-    stickyFloatingSm: {
-      [theme.breakpoints.down('sm')]: {
-        top: 0,
-        marginTop: `calc(${theme.appShell.headerHeightSm} * -1)`,
-        height: theme.appShell.headerHeightSm,
-      },
-    },
-    stickyFloatingMd: {
-      [theme.breakpoints.up('md')]: {
-        top: `calc(${theme.appShell.headerHeightMd} + calc((${theme.appShell.appBarHeightMd} - ${theme.appShell.appBarInnerHeightMd}) * -0.5))`,
-      },
-    },
-    stickyNoAlign: {
-      [theme.breakpoints.down('sm')]: {
-        position: 'sticky',
-        left: 0,
-        right: 0,
-        top: 0,
-        marginTop: 0,
-        height: theme.appShell.headerHeightSm,
-        marginBottom: `calc(${theme.appShell.headerHeightSm} * -1)`,
-      },
-      [theme.breakpoints.up('md')]: {
-        position: 'sticky',
-        left: 0,
-        right: 0,
-        top: 0,
-        marginTop: 0,
-        height: theme.appShell.appBarHeightMd,
-        marginBottom: `calc(${theme.appShell.appBarHeightMd} * -1)`,
-      },
-    },
-    stickyDivider: {
-      [theme.breakpoints.down('sm')]: {
-        marginBottom: 0,
-      },
-      [theme.breakpoints.up('md')]: {
-        marginBottom: 0,
-      },
-    },
-  }),
-  { name: 'LayoutHeader' },
+type ComponentStyleProps = {
+  noAlign: boolean
+  divider: boolean
+  children: boolean
+  floatingSm: boolean
+  floatingMd: boolean
+}
+
+const { selectors, withState } = extendableComponent<ComponentStyleProps, 'LayoutHeader'>(
+  'LayoutHeader',
+  ['root'] as const,
 )
 
 export function LayoutHeader(props: LayoutHeaderProps) {
-  const { children, divider, primary, secondary, noAlign, switchPoint } = props
-  const classes = useStyles(props)
+  const { children, divider, primary, secondary, noAlign = false, switchPoint, sx = [] } = props
   const showBack = useShowBack()
   const showClose = useShowClose()
 
@@ -109,7 +55,7 @@ export function LayoutHeader(props: LayoutHeaderProps) {
   if (divider || primary || secondary) floatingSm = false
 
   const close = showClose && <LayoutHeaderClose />
-  const back = showBack && <LayoutHeaderBack variant={floatingSm ? 'pill' : 'pill-link'} />
+  const back = showBack && <LayoutHeaderBack breakpoint={floatingSm ? 'xs' : undefined} />
 
   let left = secondary
   let right = primary
@@ -121,18 +67,66 @@ export function LayoutHeader(props: LayoutHeaderProps) {
 
   if (!left && !right && !children) return null
 
-  const className = classesPicker(classes, {
+  const classes = withState({
     floatingSm,
     floatingMd,
-    visibleSm: !floatingSm,
-    visibleMd: !floatingMd,
-    noChildren: !children,
     noAlign,
+    children: !!children,
     divider: !!divider,
   })
 
-  return children ? (
-    <div {...className('sticky')}>
+  return (
+    <Box
+      className={classes.root}
+      sx={[
+        (theme) => ({
+          zIndex: children ? theme.zIndex.appBar : theme.zIndex.appBar - 2,
+          position: 'sticky',
+          pointerEvents: 'none',
+
+          [theme.breakpoints.down('md')]: {
+            top: 0,
+            marginTop: `calc(${theme.appShell.headerHeightSm} * -1)`,
+            height: theme.appShell.headerHeightSm,
+            '&.noAlign': {
+              position: 'sticky',
+              left: 0,
+              right: 0,
+              top: 0,
+              marginTop: 0,
+              height: theme.appShell.headerHeightSm,
+              marginBottom: `calc(${theme.appShell.headerHeightSm} * -1)`,
+            },
+            '&.divider': {
+              marginBottom: 0,
+            },
+          },
+
+          [theme.breakpoints.up('md')]: {
+            top: 0,
+            height: theme.appShell.appBarHeightMd,
+            marginTop: `calc((${theme.appShell.appBarHeightMd} - ${theme.appShell.appBarInnerHeightMd}) * -0.5)`,
+            marginBottom: `calc(${theme.appShell.appBarHeightMd} * -1 - calc((${theme.appShell.appBarHeightMd} - ${theme.appShell.appBarInnerHeightMd}) * -0.5))`,
+            '&.floatingMd': {
+              top: `calc(${theme.appShell.headerHeightMd} + calc((${theme.appShell.appBarHeightMd} - ${theme.appShell.appBarInnerHeightMd}) * -0.5))`,
+            },
+            '&.noAlign': {
+              position: 'sticky',
+              left: 0,
+              right: 0,
+              top: 0,
+              marginTop: 0,
+              height: theme.appShell.appBarHeightMd,
+              marginBottom: `calc(${theme.appShell.appBarHeightMd} * -1)`,
+            },
+            '&.divider': {
+              marginBottom: 0,
+            },
+          },
+        }),
+        ...(Array.isArray(sx) ? sx : [sx]),
+      ]}
+    >
       <LayoutHeaderContent
         left={left}
         right={right}
@@ -143,8 +137,7 @@ export function LayoutHeader(props: LayoutHeaderProps) {
       >
         {children}
       </LayoutHeaderContent>
-    </div>
-  ) : (
-    <></>
+    </Box>
   )
 }
+LayoutHeader.selectors = selectors

package/Layout/components/LayoutHeaderBack.tsx

@@ -1,14 +1,13 @@
 import { useUp, usePrevUp, usePageContext } from '@graphcommerce/framer-next-pages'
+import { usePrevPageRouter } from '@graphcommerce/framer-next-pages/hooks/usePrevPageRouter'
 import { t } from '@lingui/macro'
 import PageLink from 'next/link'
 import { useRouter } from 'next/router'
-import React from 'react'
-import Button, { ButtonProps } from '../../Button'
-import SvgImageSimple from '../../SvgImage/SvgImageSimple'
+import { LinkOrButton, LinkOrButtonProps } from '../../Button/LinkOrButton'
+import { SvgIcon } from '../../SvgIcon/SvgIcon'
 import { iconChevronLeft } from '../../icons'
-import { usePrevPageRouter } from '@graphcommerce/framer-next-pages/hooks/usePrevPageRouter'
 
-export type BackProps = Omit<ButtonProps, 'onClick' | 'children'>
+export type BackProps = Omit<LinkOrButtonProps, 'onClick' | 'children'>
 
 export function useShowBack() {
   const router = useRouter()
@@ -30,30 +29,40 @@ export default function LayoutHeaderBack(props: BackProps) {
   const prevUp = usePrevUp()
   const { backSteps } = usePageContext()
 
-  const backIcon = <SvgImageSimple src={iconChevronLeft} />
+  const backIcon = <SvgIcon src={iconChevronLeft} size='medium' />
   const canClickBack = backSteps > 0 && router.asPath !== prevUp?.href
 
+  let label = t`Back`
+  if (up?.href === prevRouter?.asPath && up?.title) label = up.title
+  if (prevUp?.href === prevRouter?.asPath && prevUp?.title) label = prevUp.title
+
   if (canClickBack) {
-    const label = up?.href === prevRouter?.asPath ? up?.title : t`Back`
     return (
-      <Button
+      <LinkOrButton
         onClick={() => router.back()}
-        variant='pill-link'
+        button={{ variant: 'pill' }}
+        color='inherit'
         startIcon={backIcon}
         aria-label={label}
         {...props}
       >
         {label}
-      </Button>
+      </LinkOrButton>
     )
   }
 
   if (up?.href && up.href !== router.asPath)
     return (
       <PageLink href={up.href} passHref>
-        <Button variant='pill-link' startIcon={backIcon} aria-label={up.title} {...props}>
+        <LinkOrButton
+          button={{ variant: 'pill' }}
+          startIcon={backIcon}
+          aria-label={up.title}
+          color='inherit'
+          {...props}
+        >
           {up.title}
-        </Button>
+        </LinkOrButton>
       </PageLink>
     )
 

package/Layout/components/LayoutHeaderClose.tsx

@@ -1,41 +1,28 @@
 import { useGo, usePageContext } from '@graphcommerce/framer-next-pages'
-import React from 'react'
-import Button from '../../Button'
-import SvgImageSimple from '../../SvgImage/SvgImageSimple'
-import { iconClose } from '../../icons'
-import { makeStyles, Theme } from '@material-ui/core'
-import { responsiveVal } from '../../Styles/responsiveVal'
 import { Trans } from '@lingui/macro'
+import { LinkOrButton } from '../../Button/LinkOrButton'
+import { SvgIcon } from '../../SvgIcon/SvgIcon'
+import { iconClose } from '../../icons'
 
 export function useShowClose() {
   const { overlayGroup } = usePageContext()
   return !!overlayGroup
 }
 
-const useStyles = makeStyles((theme: Theme) => ({
-  close: {
-    [theme.breakpoints.up('md')]: {
-      marginLeft: `calc(${responsiveVal(12, 22)} * -1)`,
-      marginRight: `calc(${responsiveVal(12, 22)} * -1)`,
-    },
-  },
-}))
-
 export default function LayoutHeaderClose() {
   const { closeSteps } = usePageContext()
   const onClick = useGo(closeSteps * -1)
-  const classes = useStyles()
 
   return (
-    <Button
-      type='button'
+    <LinkOrButton
+      button={{ type: 'button', variant: 'pill' }}
+      color='inherit'
       onClick={onClick}
       aria-label='Close'
-      variant='text'
-      startIcon={<SvgImageSimple src={iconClose} />}
-      className={classes.close}
+      startIcon={<SvgIcon src={iconClose} />}
+      // className={classes.close}
     >
       <Trans>Close</Trans>
-    </Button>
+    </LinkOrButton>
   )
 }