@graphcommerce/next-ui 3.25.3 → 4.1.0

package/Row/ColumnTwoWithTop/index.tsx

@@ -1,55 +1,49 @@
-import { makeStyles, Theme } from '@material-ui/core'
+import { Box, ContainerProps } from '@mui/material'
 import React from 'react'
-import Row from '..'
-import { UseStyles } from '../../Styles'
+import { Row } from '..'
+import { extendableComponent } from '../../Styles'
 
-const useStyles = makeStyles(
-  (theme: Theme) => ({
-    root: {
-      display: 'grid',
-      gap: `${theme.spacings.lg} 0`,
-      gridTemplateAreas: `
-        "top"
-        "left"
-        "right"
-      `,
-      [theme.breakpoints.up('md')]: {
-        gridTemplateAreas: `
-          "top  ."
-          "left right"
-        `,
-        gridTemplateColumns: '1fr auto',
-        gap: `${theme.spacings.sm} ${theme.spacings.xxl}`,
-      },
-    },
-    top: {
-      gridArea: 'top',
-    },
-    left: {
-      gridArea: 'left',
-    },
-    right: {
-      gridArea: 'right',
-    },
-  }),
-  { name: 'ColumnTwoWithTop' },
-)
-
-export type ColumnTwoWithTopProps = UseStyles<typeof useStyles> & {
+export type ColumnTwoWithTopProps = ContainerProps & {
   top: React.ReactNode
   left: React.ReactNode
   right: React.ReactNode
 }
 
-export default function ColumnTwoWithTop(props: ColumnTwoWithTopProps) {
-  const { top, left, right } = props
-  const classes = useStyles(props)
+const compName = 'ColumnTwoWithTop' as const
+const parts = ['root', 'colOne', 'colTwo'] as const
+const { classes } = extendableComponent(compName, parts)
+
+export function ColumnTwoWithTop(props: ColumnTwoWithTopProps) {
+  const { left, right, top, sx = [], ...containerProps } = props
 
   return (
-    <Row className={classes.root}>
-      <div className={classes.top}>{top}</div>
-      <div className={classes.left}>{left}</div>
-      <div className={classes.right}>{right}</div>
+    <Row
+      maxWidth='lg'
+      className={classes.root}
+      sx={[
+        (theme) => ({
+          display: 'grid',
+          gap: `${theme.spacings.lg} 0`,
+          gridTemplateAreas: `"top" "left" "right"`,
+          [theme.breakpoints.up('md')]: {
+            gridTemplateAreas: `"top  ." "left right"`,
+            gridTemplateColumns: '1fr auto',
+            gap: `${theme.spacings.sm} ${theme.spacings.xxl}`,
+          },
+        }),
+        ...(Array.isArray(sx) ? sx : [sx]),
+      ]}
+      {...containerProps}
+    >
+      <Box className={classes.colOne} gridArea='top'>
+        {top}
+      </Box>
+      <Box className={classes.colOne} gridArea='left'>
+        {left}
+      </Box>
+      <Box className={classes.colTwo} gridArea='right'>
+        {right}
+      </Box>
     </Row>
   )
 }

package/Row/ContentLinks/index.tsx

@@ -1,39 +1,38 @@
 import { Scroller, ScrollerProvider } from '@graphcommerce/framer-scroller'
-import { Container, makeStyles, Theme, Typography } from '@material-ui/core'
+import { Container, SxProps, Theme, Typography } from '@mui/material'
 import React from 'react'
-import { UseStyles } from '../../Styles'
+import { extendableComponent } from '../../Styles'
 
-const useStyles = makeStyles(
-  (theme: Theme) => ({
-    root: {
-      marginBottom: `${theme.spacings.lg}`,
-    },
-    scroller: {
-      justifyContent: 'start',
-      gap: `${theme.spacings.md}`,
-      gridAutoColumns: `max-content`,
-    },
-    title: {
-      fontWeight: 600,
-    },
-  }),
-  { name: 'ContentLinks' },
-)
-
-export type ContentLinksProps = UseStyles<typeof useStyles> & {
+export type ContentLinksProps = {
   title: string
   children: React.ReactNode
+  sx?: SxProps<Theme>
 }
 
-export default function ContentLinks(props: ContentLinksProps) {
+const compName = 'ContentLinks' as const
+const parts = ['root', 'scroller', 'title'] as const
+const { classes } = extendableComponent(compName, parts)
+
+export function ContentLinks(props: ContentLinksProps) {
   const { title, children } = props
-  const classes = useStyles(props)
 
   return (
-    <Container className={classes.root} maxWidth={false}>
+    <Container
+      className={classes.root}
+      maxWidth={false}
+      sx={(theme) => ({ marginBottom: `${theme.spacings.md}` })}
+    >
       <ScrollerProvider scrollSnapAlign='none'>
-        <Scroller className={classes.scroller} hideScrollbar>
-          <Typography variant='body1' component='h3' className={classes.title}>
+        <Scroller
+          className={classes.scroller}
+          hideScrollbar
+          sx={(theme) => ({
+            justifyContent: 'start',
+            gap: `${theme.spacings.md}`,
+            gridAutoColumns: `max-content`,
+          })}
+        >
+          <Typography variant='subtitle1' component='h3' className={classes.title}>
             {title}
           </Typography>
           {children}

package/Row/HeroBanner/index.tsx

@@ -1,89 +1,33 @@
-import { ContainerProps, Theme, makeStyles, useTheme, useMediaQuery } from '@material-ui/core'
+import { ContainerProps, useTheme, useMediaQuery, Box, styled } from '@mui/material'
 import { m, useTransform } from 'framer-motion'
 import React from 'react'
-import Row from '..'
+import { Row } from '..'
 import { useScrollY } from '../../Layout/hooks/useScrollY'
-import { UseStyles } from '../../Styles'
+import { extendableComponent } from '../../Styles'
 import { responsiveVal } from '../../Styles/responsiveVal'
 
-const useStyles = makeStyles(
-  (theme: Theme) => ({
-    wrapper: {
-      position: 'relative',
-    },
-    copy: {
-      zIndex: 1,
-      color: theme.palette.secondary.contrastText,
-      position: 'relative',
-      display: 'grid',
-      justifyItems: 'center',
-      alignContent: 'center',
-      padding: `${theme.spacings.lg} ${theme.spacings.md}`,
-      paddingTop: `calc(${theme.spacings.lg} - ${theme.spacings.md})`,
-      minHeight: `calc(100vh - ${theme.appShell.headerHeightSm})`,
-      '& > *': {
-        zIndex: 1,
-        maxWidth: 'max-content',
-      },
-      [theme.breakpoints.up('md')]: {
-        width: '70%',
-        minHeight: `calc(100vh - ${theme.appShell.headerHeightMd})`,
-      },
-      [theme.breakpoints.up('lg')]: {
-        padding: `${theme.spacings.lg} ${theme.spacings.lg}`,
-        paddingTop: `calc(${theme.spacings.lg} - ${theme.spacings.md})`,
-        width: '50%',
-      },
-    },
-    asset: {
-      position: 'absolute',
-      top: '0',
-      zIndex: 0,
-      width: '100%',
-      height: '100%',
-      display: 'grid',
-      justifyItems: 'center',
-      overflow: 'hidden',
-      paddingBottom: theme.page.horizontal,
-      '& video': {
-        objectFit: 'cover',
-        width: '100%',
-        height: '100%',
-        [theme.breakpoints.down('sm')]: {
-          borderRadius: responsiveVal(theme.shape.borderRadius * 2, theme.shape.borderRadius * 3),
-        },
-      },
-      [theme.breakpoints.up('md')]: {
-        height: '100%',
-      },
-    },
-    animated: {
-      borderRadius: responsiveVal(theme.shape.borderRadius * 2, theme.shape.borderRadius * 3),
-      overflow: 'hidden',
-      transform: 'translateZ(0)',
-    },
-  }),
-  { name: 'HeroBanner' },
-)
+export type HeroBannerProps = ContainerProps & {
+  pageLinks: React.ReactNode
+  videoSrc: string
+  children: React.ReactNode
+}
+
+const compName = 'HeroBanner' as const
+const parts = ['root', 'wrapper', 'copy', 'asset', 'animated', 'video'] as const
+const { classes } = extendableComponent(compName, parts)
 
-export type HeroBannerProps = UseStyles<typeof useStyles> &
-  ContainerProps & {
-    pageLinks: React.ReactNode
-    videoSrc: string
-    children: React.ReactNode
-  }
+const MotionDiv = styled(m.div)({})
 
-export default function HeroBanner(props: HeroBannerProps) {
+export function HeroBanner(props: HeroBannerProps) {
   const { pageLinks, videoSrc, children, ...containerProps } = props
-  const classes = useStyles(props)
-  const theme = useTheme()
+  const t = useTheme()
   const scrollY = useScrollY()
   const width = useTransform(
     scrollY,
     [10, 150],
     [`calc(100% - ${responsiveVal(20, 60)}))`, `calc(100% - ${responsiveVal(0, 0)})`],
   )
-  const matches = useMediaQuery(theme.breakpoints.down('sm'))
+  const matches = useMediaQuery(t.breakpoints.down('md'))
   const borderRadius = useTransform(
     scrollY,
     [10, 150],
@@ -91,18 +35,90 @@ export default function HeroBanner(props: HeroBannerProps) {
   )
 
   return (
-    <Row maxWidth={false} {...containerProps} disableGutters>
-      <div className={classes.wrapper}>
-        <div className={classes.copy}>
+    <Row maxWidth={false} {...containerProps} disableGutters className={classes.root}>
+      <Box className={classes.wrapper} sx={{ position: 'relative' }}>
+        <Box
+          className={classes.copy}
+          sx={(theme) => ({
+            zIndex: 1,
+            color: theme.palette.secondary.contrastText,
+            position: 'relative',
+            display: 'grid',
+            justifyItems: 'center',
+            alignContent: 'center',
+            padding: `${theme.spacings.lg} ${theme.spacings.md}`,
+            paddingTop: `calc(${theme.spacings.lg} - ${theme.spacings.md})`,
+            minHeight: `calc(100vh - ${theme.appShell.headerHeightSm})`,
+            '& > *': {
+              zIndex: 1,
+              maxWidth: 'max-content',
+            },
+            [theme.breakpoints.up('md')]: {
+              width: '70%',
+              minHeight: `calc(100vh - ${theme.appShell.headerHeightMd})`,
+            },
+            [theme.breakpoints.up('lg')]: {
+              padding: `${theme.spacings.lg} ${theme.spacings.lg}`,
+              paddingTop: `calc(${theme.spacings.lg} - ${theme.spacings.md})`,
+              width: '50%',
+            },
+          })}
+        >
           {children}
           {pageLinks}
-        </div>
-        <div className={classes.asset}>
-          <m.div style={{ width: !matches ? width : 0, borderRadius }} className={classes.animated}>
-            <video src={videoSrc} autoPlay muted loop playsInline disableRemotePlayback />
-          </m.div>
-        </div>
-      </div>
+        </Box>
+        <Box
+          className={classes.asset}
+          sx={(theme) => ({
+            position: 'absolute',
+            top: '0',
+            zIndex: 0,
+            width: '100%',
+            height: '100%',
+            display: 'grid',
+            justifyItems: 'center',
+            overflow: 'hidden',
+            paddingBottom: theme.page.horizontal,
+            '& video': {
+              objectFit: 'cover',
+              width: '100%',
+              height: '100%',
+              [theme.breakpoints.down('md')]: {
+                borderRadius: responsiveVal(
+                  theme.shape.borderRadius * 2,
+                  theme.shape.borderRadius * 3,
+                ),
+              },
+            },
+            [theme.breakpoints.up('md')]: {
+              height: '100%',
+            },
+          })}
+        >
+          <MotionDiv
+            style={{ width: !matches ? width : 0, borderRadius }}
+            className={classes.animated}
+            sx={(theme) => ({
+              borderRadius: responsiveVal(
+                theme.shape.borderRadius * 2,
+                theme.shape.borderRadius * 3,
+              ),
+              overflow: 'hidden',
+              transform: 'translateZ(0)',
+            })}
+          >
+            <video
+              src={videoSrc}
+              autoPlay
+              muted
+              loop
+              playsInline
+              disableRemotePlayback
+              className={classes.video}
+            />
+          </MotionDiv>
+        </Box>
+      </Box>
     </Row>
   )
 }

package/Row/IconBlocks/IconBlock/index.tsx

@@ -1,63 +1,71 @@
-import { makeStyles, Theme, Typography } from '@material-ui/core'
+import { Typography, Button, SxProps, Theme, Box } from '@mui/material'
 import React from 'react'
-import Button from '../../../Button'
-import { UseStyles } from '../../../Styles'
+import { extendableComponent } from '../../../Styles'
 
-const useStyles = makeStyles(
-  (theme: Theme) => ({
-    block: {
-      border: `1px solid ${theme.palette.divider}`,
-      padding: `${theme.spacings.sm}`,
-      borderRadius: '6px',
-      textAlign: 'center',
-      color: theme.palette.text.primary,
-      '& > * > *': {
-        display: 'grid',
-        gridAutoFlow: 'row',
-        justifyItems: 'center',
-        gap: `${theme.spacings.xxs}`,
-      },
-    },
-    link: {
-      textDecoration: 'none',
-    },
-    title: {
-      fontWeight: theme.typography.fontWeightBold,
-    },
-  }),
-  { name: 'IconBlock' },
-)
-
-export type IconBlockProps = UseStyles<typeof useStyles> & {
+export type IconBlockProps = {
   title: string
   icon: React.ReactNode
   children: React.ReactNode
   href?: string
+  sx?: SxProps<Theme>
 }
 
-const IconBlock = React.forwardRef<HTMLAnchorElement, IconBlockProps>((props, ref) => {
-  const { title, children, icon, href } = props
-  const classes = useStyles(props)
+const name = 'IconBlock' as const
+const parts = ['block', 'link', 'title'] as const
+const { classes } = extendableComponent(name, parts)
+
+export const IconBlock = React.forwardRef<HTMLAnchorElement, IconBlockProps>((props, ref) => {
+  const { title, children, icon, href, sx = [] } = props
 
   const content = (
     <>
       {icon}
-      <Typography variant='subtitle1' className={classes.title}>
+      <Typography
+        variant='subtitle1'
+        className={classes.title}
+        sx={(theme) => ({ fontWeight: theme.typography.fontWeightBold })}
+      >
         {title}
       </Typography>
       {children}
     </>
   )
 
+  const blockSx: SxProps<Theme> = [
+    (theme) => ({
+      border: `1px solid ${theme.palette.divider}`,
+      padding: `${theme.spacings.sm}`,
+      borderRadius: '6px',
+      textAlign: 'center',
+      color: theme.palette.text.primary,
+      '& > *': {
+        display: 'grid',
+        gridAutoFlow: 'row',
+        justifyItems: 'center',
+        gap: `${theme.spacings.xxs}`,
+      },
+    }),
+    ...(Array.isArray(sx) ? sx : [sx]),
+  ]
+
   if (href) {
     return (
-      <Button href={href} variant='text' color='primary' className={classes.block} ref={ref}>
+      <Button
+        href={href}
+        variant='text'
+        color='primary'
+        className={classes.block}
+        ref={ref}
+        sx={blockSx}
+      >
         <div>{content}</div>
       </Button>
     )
   }
 
-  return <div className={classes.block}>{content}</div>
+  return (
+    <Box className={classes.block} sx={blockSx}>
+      {content}
+    </Box>
+  )
 })
-
-export default IconBlock

package/Row/IconBlocks/index.tsx

@@ -1,57 +1,42 @@
-import { makeStyles, Theme, Typography } from '@material-ui/core'
+import { Box, SxProps, Theme } from '@mui/material'
 import React from 'react'
-import Row from '..'
-import { UseStyles } from '../../Styles'
+import { Row } from '..'
+import { extendableComponent } from '../../Styles'
 import { responsiveVal } from '../../Styles/responsiveVal'
 
-const useStyles = makeStyles(
-  (theme: Theme) => ({
-    container: {
-      maxWidth: 820,
-    },
-    title: {
-      marginBottom: `${theme.spacings.md}`,
-    },
-    optionsWrapper: {
-      display: 'grid',
-      gridTemplateColumns: `repeat(auto-fill, minmax(${responsiveVal(150, 280)}, 1fr))`,
-      gap: `${theme.spacings.sm}`,
-    },
-    block: {
-      display: 'grid',
-      gridAutoFlow: 'row',
-      justifyItems: 'center',
-      gap: `${theme.spacings.xs}`,
-      border: `1px solid ${theme.palette.divider}`,
-      padding: `${theme.spacings.sm}`,
-      borderRadius: '6px',
-      cursor: 'pointer',
-      textAlign: 'center',
-    },
-    wrapper: {
-      paddingTop: `${theme.spacings.lg}`,
-    },
-  }),
-  { name: 'ServiceOptions' },
-)
-
-export type IconBlocksProps = UseStyles<typeof useStyles> & {
+export type IconBlocksProps = {
   title: string
   children: React.ReactNode
+  sx?: SxProps<Theme>
 }
 
-export default function ServiceOptions(props: IconBlocksProps) {
-  const { title, children } = props
-  const classes = useStyles(props)
+const compName = 'IconBlocks' as const
+const parts = ['container', 'title', 'optionsWrapper', 'block', 'wrapper'] as const
+const { classes } = extendableComponent(compName, parts)
+
+export function IconBlocks(props: IconBlocksProps) {
+  const { title, children, sx = [] } = props
 
   return (
-    <Row className={classes.container}>
-      <div className={classes.wrapper}>
-        <Typography variant='h5' className={classes.title}>
+    <Row className={classes.container} sx={[{ maxWidth: 820 }, ...(Array.isArray(sx) ? sx : [sx])]}>
+      <Box className={classes.wrapper} sx={(theme) => ({ paddingTop: `${theme.spacings.lg}` })}>
+        <Box
+          className={classes.title}
+          sx={(theme) => ({ typography: 'h5', marginBottom: `${theme.spacings.md}` })}
+        >
           {title}
-        </Typography>
-        <div className={classes.optionsWrapper}>{children}</div>
-      </div>
+        </Box>
+        <Box
+          className={classes.optionsWrapper}
+          sx={(theme) => ({
+            display: 'grid',
+            gridTemplateColumns: `repeat(auto-fill, minmax(${responsiveVal(150, 280)}, 1fr))`,
+            gap: `${theme.spacings.sm}`,
+          })}
+        >
+          {children}
+        </Box>
+      </Box>
     </Row>
   )
 }