@graphcommerce/next-ui 3.25.1 → 4.0.0

package/Row/ImageText/index.tsx

@@ -1,79 +1,83 @@
-import { makeStyles, Theme } 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) => ({
-    wrapper: {
-      display: 'grid',
-      background:
-        theme.palette.type === 'light'
-          ? theme.palette.background.image
-          : theme.palette.background.paper,
-      justifyItems: 'center',
-      columnGap: theme.spacings.lg,
-      paddingTop: theme.spacings.lg,
-      paddingBottom: theme.spacings.lg,
-      [theme.breakpoints.up('md')]: {
-        paddingTop: 0,
-        paddingBottom: 0,
-        background: 'none',
-        gridTemplateColumns: '1fr 1fr',
-      },
-      borderRadius: responsiveVal(theme.shape.borderRadius * 2, theme.shape.borderRadius * 3),
-    },
-    asset: {
-      height: '100%',
-      width: '100%',
-      '& img': {
-        height: '100%',
-        width: '100%',
-        objectFit: 'cover',
-        borderRadius: responsiveVal(theme.shape.borderRadius * 2, theme.shape.borderRadius * 3),
-      },
-    },
-    copy: {
-      marginTop: theme.spacings.lg,
-      color: theme.palette.text.primary,
-      maxWidth: '80%',
-      display: 'grid',
-      alignContent: 'center',
-      [theme.breakpoints.up('md')]: {
-        maxWidth: '70%',
-        marginTop: 0,
-      },
-      '& > *': {
-        maxWidth: 'max-content',
-      },
-    },
-    url: {
-      ...theme.typography.body2,
-      [theme.breakpoints.up('md')]: {
-        ...theme.typography.h4,
-      },
-      color: theme.palette.text.primary,
-    },
-  }),
-  { name: 'ImageText' },
-)
-
-export type ImageTextProps = UseStyles<typeof useStyles> & {
+export type ImageTextProps = {
   item?: React.ReactNode
   children: React.ReactNode
+  sx?: SxProps<Theme>
 }
 
-export default function ImageText(props: ImageTextProps) {
-  const { item, children } = props
-  const classes = useStyles(props)
+const name = 'ImageText' as const
+const parts = ['root', 'wrapper', 'asset', 'copy'] as const
+const { classes } = extendableComponent(name, parts)
+
+export function ImageText(props: ImageTextProps) {
+  const { item, children, sx } = props
 
   return (
-    <Row maxWidth={false}>
-      <Row className={classes.wrapper}>
-        <div className={classes.asset}>{item}</div>
-        <div className={classes.copy}>{children}</div>
-      </Row>{' '}
+    <Row maxWidth={false} className={classes.root} sx={sx}>
+      <Box
+        className={classes.wrapper}
+        sx={(theme) => ({
+          display: 'grid',
+          background:
+            theme.palette.mode === 'light'
+              ? theme.palette.background.image
+              : theme.palette.background.paper,
+          justifyItems: 'center',
+          columnGap: theme.spacings.lg,
+          paddingTop: theme.spacings.lg,
+          paddingBottom: theme.spacings.lg,
+          [theme.breakpoints.up('md')]: {
+            paddingTop: 0,
+            paddingBottom: 0,
+            background: 'none',
+            gridTemplateColumns: '1fr 1fr',
+          },
+          borderRadius: responsiveVal(theme.shape.borderRadius * 2, theme.shape.borderRadius * 3),
+        })}
+      >
+        <Box
+          className={classes.asset}
+          sx={(theme) => ({
+            height: '100%',
+            width: '100%',
+            '& img': {
+              height: '100%',
+              width: '100%',
+              objectFit: 'cover',
+              borderRadius: responsiveVal(
+                theme.shape.borderRadius * 2,
+                theme.shape.borderRadius * 3,
+              ),
+            },
+          })}
+        >
+          {item}
+        </Box>
+        <Box
+          className={classes.copy}
+          sx={(theme) => ({
+            marginTop: theme.spacings.lg,
+            color: theme.palette.text.primary,
+            maxWidth: '80%',
+            display: 'grid',
+            alignContent: 'center',
+            [theme.breakpoints.up('md')]: {
+              maxWidth: '70%',
+              marginTop: 0,
+            },
+            '& > *': {
+              maxWidth: 'max-content',
+            },
+          })}
+        >
+          {children}
+        </Box>
+      </Box>
     </Row>
   )
 }

package/Row/ImageTextBoxed/index.tsx

@@ -1,77 +1,78 @@
-import { makeStyles, Theme } 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) => ({
-    wrapper: {
-      display: 'grid',
-      border: `1px solid ${theme.palette.divider}`,
-      justifyItems: 'center',
-      columnGap: `${theme.spacings.lg}`,
-      padding: 0,
-      [theme.breakpoints.up('md')]: {
-        background: 'none',
-        gridTemplateColumns: '1fr auto',
-        columnGap: `${theme.spacings.lg}`,
-      },
-      borderRadius: responsiveVal(theme.shape.borderRadius * 2, theme.shape.borderRadius * 3),
-      overflow: 'hidden',
-    },
-    asset: {
-      height: '100%',
-      width: '100%',
-      [theme.breakpoints.up('md')]: {
-        height: '100%',
-        width: responsiveVal(100, 600),
-      },
-      '& img': {
-        height: '100% !important',
-        width: '100% !important',
-        objectFit: `cover`,
-      },
-    },
-    copy: {
-      padding: `${theme.spacings.lg} 0`,
-      color: theme.palette.text.primary,
-      maxWidth: '80%',
-      display: 'grid',
-      alignContent: 'center',
-      [theme.breakpoints.up('md')]: {
-        maxWidth: '70%',
-      },
-      '& > *': {
-        maxWidth: 'max-content',
-      },
-    },
-    url: {
-      ...theme.typography.body2,
-      [theme.breakpoints.up('md')]: {
-        ...theme.typography.h4,
-      },
-      color: theme.palette.text.primary,
-    },
-  }),
-  { name: 'ImageTextBoxed' },
-)
-
-export type ImageTextBoxedProps = UseStyles<typeof useStyles> & {
+export type ImageTextBoxedProps = {
   children: React.ReactNode
   item?: React.ReactNode
+  sx?: SxProps<Theme>
 }
 
-export default function ImageTextBoxed(props: ImageTextBoxedProps) {
-  const { children, item } = props
-  const classes = useStyles(props)
+const name = 'ImageTextBoxed' as const
+const parts = ['root', 'wrapper', 'asset', 'copy'] as const
+const { classes } = extendableComponent(name, parts)
+
+export function ImageTextBoxed(props: ImageTextBoxedProps) {
+  const { children, item, sx = [] } = props
 
   return (
-    <Row>
-      <div className={classes.wrapper}>
-        <div className={classes.copy}>{children}</div>
-        <div className={classes.asset}>{item}</div>
-      </div>
+    <Row className={classes.root} sx={sx}>
+      <Box
+        className={classes.wrapper}
+        sx={(theme) => ({
+          display: 'grid',
+          border: `1px solid ${theme.palette.divider}`,
+          justifyItems: 'center',
+          columnGap: `${theme.spacings.lg}`,
+          padding: 0,
+          [theme.breakpoints.up('md')]: {
+            background: 'none',
+            gridTemplateColumns: '1fr auto',
+            columnGap: `${theme.spacings.lg}`,
+          },
+          borderRadius: responsiveVal(theme.shape.borderRadius * 2, theme.shape.borderRadius * 3),
+          overflow: 'hidden',
+        })}
+      >
+        <Box
+          className={classes.copy}
+          sx={(theme) => ({
+            padding: `${theme.spacings.lg} 0`,
+            color: theme.palette.text.primary,
+            maxWidth: '80%',
+            display: 'grid',
+            alignContent: 'center',
+            [theme.breakpoints.up('md')]: {
+              maxWidth: '70%',
+            },
+            '& > *': {
+              maxWidth: 'max-content',
+            },
+          })}
+        >
+          {children}
+        </Box>
+        <Box
+          className={classes.asset}
+          sx={(theme) => ({
+            height: '100%',
+            width: '100%',
+            [theme.breakpoints.up('md')]: {
+              height: '100%',
+              width: responsiveVal(100, 600),
+            },
+            '& img': {
+              height: '100% !important',
+              width: '100% !important',
+              objectFit: `cover`,
+            },
+          })}
+        >
+          {item}
+        </Box>
+      </Box>
     </Row>
   )
 }

package/Row/ParagraphWithSidebarSlide/index.tsx

@@ -1,87 +1,91 @@
-import { ContainerProps, makeStyles, Theme } from '@material-ui/core'
-import Row from '..'
-import { UseStyles } from '../../Styles'
+import { Box, ContainerProps } from '@mui/material'
+import { Row } from '..'
+import { extendableComponent } from '../../Styles'
 import { responsiveVal } from '../../Styles/responsiveVal'
 
-const useStyles = makeStyles(
-  (theme: Theme) => ({
-    wrapper: {
-      overflow: 'hidden',
-      display: 'grid',
-      gridTemplateColumns: '1fr 1fr',
-      gap: `${theme.spacings.md}`,
-      [theme.breakpoints.up('md')]: {
-        gridTemplateColumns: '8fr 3fr',
-      },
-    },
-    backstory: {
-      position: 'relative',
-      '& img': {
-        position: 'absolute',
-        top: '0',
-        zIndex: 0,
-        width: '100%',
-        height: '100% !important',
-        objectFit: 'cover',
-        filter: 'brightness(80%)',
-        [theme.breakpoints.up('md')]: {
-          filter: 'brightness(100%)',
-          height: '100%',
-        },
-        borderRadius: responsiveVal(theme.shape.borderRadius * 2, theme.shape.borderRadius * 3),
-      },
-    },
-    copy: {
-      color: theme.palette.secondary.contrastText,
-      display: 'grid',
-      zIndex: 1,
-      justifyItems: 'start',
-      alignContent: 'end',
-      position: 'relative',
-      padding: `${theme.spacings.md}`,
-      '& > *': {
-        zIndex: 1,
-        maxWidth: 'max-content',
-      },
-      [theme.breakpoints.up('md')]: {
-        background: 'none',
-        width: '60%',
-        minHeight: '130vh',
-      },
-      [theme.breakpoints.up('lg')]: {
-        padding: `${theme.spacings.lg} ${theme.spacings.lg}`,
-        width: '50%',
-      },
-    },
-    slidingItems: {
-      '& > *': {
-        height: 'auto !important',
-      },
-    },
-  }),
-  { name: 'ParagraphWithSidebarSlide' },
-)
+export type ParagraphWithSidebarSlideProps = ContainerProps & {
+  slidingItems: React.ReactNode
+  background: React.ReactNode
+  children: React.ReactNode
+}
 
-export type ParagraphWithSidebarSlideProps = UseStyles<typeof useStyles> &
-  ContainerProps & {
-    slidingItems: React.ReactNode
-    background: React.ReactNode
-    children: React.ReactNode
-  }
+const name = 'ParagraphWithSidebarSlide' as const
+const parts = ['root', 'wrapper', 'backstory', 'copy', 'slidingItems'] as const
+const { classes } = extendableComponent(name, parts)
 
-export default function ParagraphWithSidebarSlide(props: ParagraphWithSidebarSlideProps) {
+export function ParagraphWithSidebarSlide(props: ParagraphWithSidebarSlideProps) {
   const { background, slidingItems, children, ...containerProps } = props
-  const classes = useStyles(props)
 
   return (
-    <Row maxWidth={false} {...containerProps}>
-      <div className={classes.wrapper}>
-        <div className={classes.backstory}>
-          <div className={classes.copy}>{children}</div>
+    <Row maxWidth={false} {...containerProps} className={classes.root}>
+      <Box
+        className={classes.wrapper}
+        sx={(theme) => ({
+          overflow: 'hidden',
+          display: 'grid',
+          gridTemplateColumns: '1fr 1fr',
+          gap: `${theme.spacings.md}`,
+          [theme.breakpoints.up('md')]: {
+            gridTemplateColumns: '8fr 3fr',
+          },
+        })}
+      >
+        <Box
+          className={classes.backstory}
+          sx={(theme) => ({
+            position: 'relative',
+            '& img': {
+              position: 'absolute',
+              top: '0',
+              zIndex: 0,
+              width: '100%',
+              height: '100% !important',
+              objectFit: 'cover',
+              filter: 'brightness(80%)',
+              [theme.breakpoints.up('md')]: {
+                filter: 'brightness(100%)',
+                height: '100%',
+              },
+              borderRadius: responsiveVal(
+                theme.shape.borderRadius * 2,
+                theme.shape.borderRadius * 3,
+              ),
+            },
+          })}
+        >
+          <Box
+            className={classes.copy}
+            sx={(theme) => ({
+              color: theme.palette.secondary.contrastText,
+              display: 'grid',
+              zIndex: 1,
+              justifyItems: 'start',
+              alignContent: 'end',
+              position: 'relative',
+              padding: `${theme.spacings.md}`,
+              '& > *': {
+                zIndex: 1,
+                maxWidth: 'max-content',
+              },
+              [theme.breakpoints.up('md')]: {
+                background: 'none',
+                width: '60%',
+                minHeight: '130vh',
+              },
+              [theme.breakpoints.up('lg')]: {
+                padding: `${theme.spacings.lg} ${theme.spacings.lg}`,
+                width: '50%',
+              },
+            })}
+          >
+            {children}
+          </Box>
           {background}
-        </div>
-        <div className={classes.slidingItems}>{slidingItems}</div>
-      </div>
+        </Box>
+        <Box className={classes.slidingItems} sx={{ '& > *': { height: 'auto !important' } }}>
+          {slidingItems}
+        </Box>
+      </Box>
     </Row>
   )
 }

package/Row/Quote/index.tsx

@@ -1,12 +1,12 @@
-import { ContainerProps } from '@material-ui/core'
+import { ContainerProps } from '@mui/material'
 import React from 'react'
-import Row from '..'
+import { Row } from '..'
 
 export type QuoteProps = {
   children: React.ReactElement
 } & ContainerProps
 
-export default function Quote(props: QuoteProps) {
+export function Quote(props: QuoteProps) {
   const { children, ...containerProps } = props
 
   return <Row {...containerProps}>{children}</Row>

package/Row/SpecialBanner/index.tsx

@@ -1,111 +1,111 @@
-import { ContainerProps, makeStyles, Theme, Typography } from '@material-ui/core'
-import Row from '..'
-import { UseStyles } from '../../Styles'
+import { Box, ContainerProps, Typography } from '@mui/material'
+import { Row } from '..'
+import { extendableComponent } from '../../Styles'
 import { responsiveVal } from '../../Styles/responsiveVal'
 
-const useStyles = makeStyles(
-  (theme: Theme) => ({
-    root: {},
-    wrapper: {
-      display: 'grid',
-      background: theme.palette.background.paper,
-      justifyItems: 'center',
-      columnGap: `${theme.spacings.lg}`,
-      paddingTop: theme.spacings.lg,
-      paddingBottom: theme.spacings.lg,
-      justifySelf: 'start',
-      borderRadius: responsiveVal(theme.shape.borderRadius * 2, theme.shape.borderRadius * 3),
-      [theme.breakpoints.up('md')]: {
-        padding: 0,
-        background: 'none',
-        justifySelf: 'center',
-        gridTemplateColumns: '1fr 1fr',
-        columnGap: `${theme.spacings.lg}`,
-      },
-    },
-    asset: {
-      width: responsiveVal(200, 900),
-      height: 'auto',
-      marginBottom: theme.spacings.md,
-      '& img': {
-        width: responsiveVal(200, 900),
-        height: 'auto',
-        objectFit: 'cover',
-        borderRadius: responsiveVal(theme.shape.borderRadius * 2, theme.shape.borderRadius * 3),
-      },
-      [theme.breakpoints.up('lg')]: {
-        width: responsiveVal(250, 900),
-        height: 'auto',
-        '& img': {
-          width: responsiveVal(250, 900),
-          height: 'auto',
-          objectFit: 'cover',
-        },
-      },
-      [theme.breakpoints.between('md', 'lg')]: {
-        width: '100%',
-        '& img': {
-          width: '100%',
-        },
-      },
-    },
-    copy: {
-      color: theme.palette.text.primary,
-      maxWidth: '70%',
-      display: 'grid',
-      alignContent: 'center',
-      justifyContent: 'center',
-      '& > *': {
-        maxWidth: 'max-content',
-      },
-    },
-    topic: {
-      ...theme.typography.overline,
-    },
-    links: {
-      ...theme.typography.body2,
-      [theme.breakpoints.up('md')]: {
-        ...theme.typography.h4,
-      },
-      '& > *': {
-        color: theme.palette.text.primary,
-      },
-    },
-    textContainer: {
-      maxWidth: '70%',
-      [theme.breakpoints.up('md')]: {
-        maxWidth: '100%',
-      },
-    },
-  }),
-  { name: 'SpecialBanner' },
-)
+export type SpecialBannerProps = ContainerProps & {
+  asset?: React.ReactNode
+  pageLinks?: React.ReactNode
+  topic: React.ReactNode
+  children: React.ReactNode
+}
 
-export type SpecialBannerProps = UseStyles<typeof useStyles> &
-  ContainerProps & {
-    asset?: React.ReactNode
-    pageLinks?: React.ReactNode
-    topic: React.ReactNode
-    children: React.ReactNode
-  }
+const name = 'SpecialBanner' as const
+const parts = ['root', 'wrapper', 'copy', 'asset', 'topic', 'links', 'textContainer'] as const
+const { classes } = extendableComponent(name, parts)
 
-export default function SpecialBanner(props: SpecialBannerProps) {
+export function SpecialBanner(props: SpecialBannerProps) {
   const { asset, topic, pageLinks, children, ...containerProps } = props
-  const { root, ...classes } = useStyles(props)
 
   return (
-    <Row maxWidth={false} {...containerProps} classes={{ root }}>
-      <Row maxWidth={false} className={classes.wrapper} disableGutters>
-        <div className={classes.asset}>{asset}</div>
-        <div className={classes.copy}>
+    <Row maxWidth={false} {...containerProps} className={classes.root}>
+      <Row
+        maxWidth={false}
+        className={classes.wrapper}
+        disableGutters
+        sx={(theme) => ({
+          display: 'grid',
+          background: theme.palette.background.paper,
+          justifyItems: 'center',
+          columnGap: `${theme.spacings.lg}`,
+          paddingTop: theme.spacings.lg,
+          paddingBottom: theme.spacings.lg,
+          justifySelf: 'start',
+          borderRadius: responsiveVal(theme.shape.borderRadius * 2, theme.shape.borderRadius * 3),
+          [theme.breakpoints.up('md')]: {
+            padding: 0,
+            background: 'none',
+            justifySelf: 'center',
+            gridTemplateColumns: '1fr 1fr',
+            columnGap: `${theme.spacings.lg}`,
+          },
+        })}
+      >
+        <Box
+          className={classes.asset}
+          sx={(theme) => ({
+            width: responsiveVal(200, 900),
+            height: 'auto',
+            marginBottom: theme.spacings.md,
+            '& img': {
+              width: responsiveVal(200, 900),
+              height: 'auto',
+              objectFit: 'cover',
+              borderRadius: responsiveVal(
+                theme.shape.borderRadius * 2,
+                theme.shape.borderRadius * 3,
+              ),
+            },
+            [theme.breakpoints.up('lg')]: {
+              width: responsiveVal(250, 900),
+              height: 'auto',
+              '& img': {
+                width: responsiveVal(250, 900),
+                height: 'auto',
+                objectFit: 'cover',
+              },
+            },
+            [theme.breakpoints.between('md', 'xl')]: {
+              width: '100%',
+              '& img': {
+                width: '100%',
+              },
+            },
+          })}
+        >
+          {asset}
+        </Box>
+        <Box
+          className={classes.copy}
+          sx={(theme) => ({
+            color: theme.palette.text.primary,
+            maxWidth: '70%',
+            display: 'grid',
+            alignContent: 'center',
+            justifyContent: 'center',
+            '& > *': {
+              maxWidth: 'max-content',
+            },
+          })}
+        >
           {topic && (
-            <Typography variant='body2' className={classes.topic}>
+            <Typography variant='overline' className={classes.topic}>
               {topic}
             </Typography>
           )}
-          <div className={classes.textContainer}>{children}</div>
-          <div className={classes.links}>{pageLinks}</div>
-        </div>
+          <Box
+            className={classes.textContainer}
+            sx={(theme) => ({
+              maxWidth: '70%',
+              [theme.breakpoints.up('md')]: { maxWidth: '100%' },
+            })}
+          >
+            {children}
+          </Box>
+          <Box className={classes.links} sx={{ typography: { xs: 'body2', md: 'h4' } }}>
+            {pageLinks}
+          </Box>
+        </Box>
       </Row>
     </Row>
   )