@graphcommerce/next-ui 3.0.1

package/Row/IconBlocks/IconBlock/index.tsx

@@ -0,0 +1,56 @@
+import { makeStyles, Theme, Typography } from '@material-ui/core'
+import React, { useRef } from 'react'
+import Button from '../../../Button'
+import { UseStyles } from '../../../Styles'
+
+const useStyles = makeStyles(
+  (theme: Theme) => ({
+    block: {
+      display: 'grid',
+      gridAutoFlow: 'row',
+      justifyItems: 'center',
+      gap: `${theme.spacings.xs}`,
+      border: `1px solid ${theme.palette.grey[300]}`,
+      padding: `${theme.spacings.sm}`,
+      borderRadius: '6px',
+      textAlign: 'center',
+      color: theme.palette.primary.contrastText,
+    },
+    link: {
+      textDecoration: 'none',
+    },
+  }),
+  { name: 'IconBlock' },
+)
+
+export type IconBlockProps = UseStyles<typeof useStyles> & {
+  title: string
+  icon: React.ReactNode
+  children: React.ReactNode
+  href?: string
+}
+
+const IconBlock = React.forwardRef<HTMLAnchorElement, IconBlockProps>((props, ref) => {
+  const { title, children, icon, href } = props
+  const classes = useStyles(props)
+
+  const content = (
+    <>
+      {icon}
+      <Typography variant='h6'>{title}</Typography>
+      {children}
+    </>
+  )
+
+  if (href) {
+    return (
+      <Button variant='text' color='primary' className={classes.block} ref={ref}>
+        <div>{content}</div>
+      </Button>
+    )
+  }
+
+  return <div className={classes.block}>{content}</div>
+})
+
+export default IconBlock

package/Row/IconBlocks/index.tsx

@@ -0,0 +1,57 @@
+import { makeStyles, Theme, Typography } from '@material-ui/core'
+import React from 'react'
+import Row from '..'
+import { UseStyles } 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.grey[300]}`,
+      padding: `${theme.spacings.sm}`,
+      borderRadius: '6px',
+      cursor: 'pointer',
+      textAlign: 'center',
+    },
+    wrapper: {
+      paddingTop: `${theme.spacings.lg}`,
+    },
+  }),
+  { name: 'ServiceOptions' },
+)
+
+export type IconBlocksProps = UseStyles<typeof useStyles> & {
+  title: string
+  children: React.ReactNode
+}
+
+export default function ServiceOptions(props: IconBlocksProps) {
+  const { title, children } = props
+  const classes = useStyles(props)
+
+  return (
+    <Row className={classes.container}>
+      <div className={classes.wrapper}>
+        <Typography variant='h5' className={classes.title}>
+          {title}
+        </Typography>
+        <div className={classes.optionsWrapper}>{children}</div>
+      </div>
+    </Row>
+  )
+}

package/Row/ParagraphWithSidebarSlide/index.tsx

@@ -0,0 +1,114 @@
+import { ContainerProps, makeStyles, Theme } from '@material-ui/core'
+import { m, useSpring, useTransform, useViewportScroll } from 'framer-motion'
+import React, { useEffect, useRef, useState } from 'react'
+import Row from '..'
+import { UseStyles } from '../../Styles'
+
+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%',
+        },
+      },
+    },
+    copy: {
+      color: '#fff',
+      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: {
+      maxWidth: '100%',
+    },
+  }),
+  { name: 'ParagraphWithSidebarSlide' },
+)
+
+export type ParagraphWithSidebarSlideProps = UseStyles<typeof useStyles> &
+  ContainerProps & {
+    slidingItems: React.ReactNode
+    background: React.ReactNode
+    children: React.ReactNode
+  }
+
+export default function ParagraphWithSidebarSlide(props: ParagraphWithSidebarSlideProps) {
+  const { background, slidingItems, children, ...containerProps } = props
+  const classes = useStyles(props)
+
+  const [windowHeight, setHeight] = useState(0)
+  const [itemY, setItemY] = useState(0)
+  const [parentHeight, setParentHeight] = useState(0)
+  const sidebar = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    if (!sidebar.current) return () => {}
+    const ro = new ResizeObserver(([entry]) => {
+      if (entry.target instanceof HTMLElement) {
+        setParentHeight(entry.target.offsetHeight)
+        setHeight(window.innerHeight)
+        setItemY(entry.target.offsetTop)
+      }
+    })
+    ro.observe(sidebar.current)
+    return () => ro.disconnect()
+  }, [])
+
+  const { scrollY } = useViewportScroll()
+  const y = useSpring(
+    useTransform(
+      scrollY,
+      [itemY - windowHeight / 4, itemY + windowHeight / 2],
+      [0, parentHeight > windowHeight / 2 ? windowHeight / 2 : 0],
+    ),
+  )
+
+  return (
+    <Row maxWidth={false} {...containerProps}>
+      <div className={classes.wrapper}>
+        <div className={classes.backstory}>
+          <div className={classes.copy}>{children}</div>
+          {background}
+        </div>
+        <m.div ref={sidebar} transition={{ ease: 'linear' }} style={{ y }}>
+          {slidingItems}
+        </m.div>
+      </div>
+    </Row>
+  )
+}

package/Row/Quote/index.tsx

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

package/Row/RowImageText/index.tsx

@@ -0,0 +1,67 @@
+import { makeStyles, Theme } from '@material-ui/core'
+import React from 'react'
+import Row from '..'
+import { UseStyles } from '../../Styles'
+
+const useStyles = makeStyles(
+  (theme: Theme) => ({
+    wrapper: {
+      display: 'grid',
+      background: 'rgba(0,0,0,0.03)',
+      justifyItems: 'center',
+      columnGap: theme.spacings.lg,
+      padding: `${theme.spacings.xl} 0`,
+      [theme.breakpoints.up('md')]: {
+        padding: 0,
+        background: 'none',
+        gridTemplateColumns: '1fr 1fr',
+      },
+    },
+    asset: {
+      height: '100%',
+      width: '100%',
+      '& img': {
+        height: '100%',
+        width: '100%',
+        objectFit: 'cover',
+      },
+    },
+    copy: {
+      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: 'RowImageText' },
+)
+
+export type RowImageTextProps = UseStyles<typeof useStyles> & {
+  item?: React.ReactNode
+  children: React.ReactNode
+}
+
+export default function RowImageText(props: RowImageTextProps) {
+  const { item, children } = props
+  const classes = useStyles(props)
+
+  return (
+    <Row className={classes.wrapper}>
+      <div className={classes.asset}>{item}</div>
+      <div className={classes.copy}>{children}</div>
+    </Row>
+  )
+}

package/Row/RowImageTextBoxed/index.tsx

@@ -0,0 +1,75 @@
+import { Container, makeStyles, Theme } from '@material-ui/core'
+import React from 'react'
+import Row from '..'
+import { UseStyles } 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}`,
+      },
+    },
+    asset: {
+      height: '100%',
+      width: '100%',
+      [theme.breakpoints.up('md')]: {
+        height: '100%',
+        width: responsiveVal(100, 600),
+      },
+      '& img': {
+        height: '100%',
+        width: '100%',
+        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: 'RowImageTextBoxed' },
+)
+
+export type RowImageTextBoxedProps = UseStyles<typeof useStyles> & {
+  children: React.ReactNode
+  item?: React.ReactNode
+}
+
+export default function RowImageTextBoxed(props: RowImageTextBoxedProps) {
+  const { children, item } = props
+  const classes = useStyles(props)
+
+  return (
+    <Row>
+      <div className={classes.wrapper}>
+        <div className={classes.copy}>{children}</div>
+        <div className={classes.asset}>{item}</div>
+      </div>
+    </Row>
+  )
+}

package/Row/SpecialBanner/index.tsx

@@ -0,0 +1,107 @@
+import { ContainerProps, makeStyles, Theme, Typography } from '@material-ui/core'
+import Row from '..'
+import { UseStyles } from '../../Styles'
+import responsiveVal from '../../Styles/responsiveVal'
+
+const useStyles = makeStyles(
+  (theme: Theme) => ({
+    wrapper: {
+      display: 'grid',
+      background: 'rgba(0,0,0,0.03)',
+      justifyItems: 'center',
+      columnGap: `${theme.spacings.lg}`,
+      padding: `${theme.spacings.lg} 0`,
+      justifySelf: 'start',
+      [theme.breakpoints.up('md')]: {
+        padding: 0,
+        background: 'none',
+        justifySelf: 'center',
+        gridTemplateColumns: '1fr 1fr',
+        columnGap: `${theme.spacings.md}`,
+      },
+    },
+    asset: {
+      width: responsiveVal(200, 900),
+      height: 'auto',
+      '& img': {
+        width: responsiveVal(200, 900),
+        height: 'auto',
+        objectFit: 'cover',
+      },
+      [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 = UseStyles<typeof useStyles> &
+  ContainerProps & {
+    asset: React.ReactNode
+    pageLinks?: React.ReactNode
+    topic: React.ReactNode
+    children: React.ReactNode
+  }
+
+export default function SpecialBanner(props: SpecialBannerProps) {
+  const { asset, topic, pageLinks, children, ...containerProps } = props
+  const classes = useStyles()
+
+  return (
+    <Row maxWidth={false} {...containerProps}>
+      <div className={classes.wrapper}>
+        <div className={classes.asset}>{asset}</div>
+        <div className={classes.copy}>
+          {topic && (
+            <Typography variant='body2' className={classes.topic}>
+              {topic}
+            </Typography>
+          )}
+          <div className={classes.textContainer}>{children}</div>
+          <div className={classes.links}>{pageLinks}</div>
+        </div>
+      </div>
+    </Row>
+  )
+}

package/Row/index.tsx

@@ -0,0 +1,13 @@
+import { Container, styled } from '@material-ui/core'
+
+const Row = styled(Container)(
+  ({ theme }) => ({
+    marginBottom: theme.spacings.lg,
+    [theme.breakpoints.up('md')]: {
+      marginBottom: `${theme.spacings.xl}`,
+    },
+  }),
+  { name: 'Row' },
+)
+
+export default Row

package/SectionContainer/index.tsx

@@ -0,0 +1,39 @@
+import { makeStyles, Theme } from '@material-ui/core'
+import clsx from 'clsx'
+import React, { PropsWithChildren } from 'react'
+import SectionHeader, { SectionHeaderProps } from '../SectionHeader'
+import { UseStyles } from '../Styles'
+
+const useStyles = makeStyles(
+  (theme: Theme) => ({
+    sectionContainer: {},
+    sectionHeaderSidePadding: {},
+    sectionHeaderWrapper: {
+      borderBottom: `1px solid ${theme.palette.divider}`,
+      paddingBottom: theme.spacings.xxs,
+      marginBottom: theme.spacings.xxs,
+    },
+    labelLeft: {},
+    labelRight: {},
+    borderBottom: {
+      borderBottom: `1px solid ${theme.palette.divider}`,
+    },
+  }),
+  { name: 'SectionContainer' },
+)
+
+export type SectionContainerProps = PropsWithChildren<{ borderBottom?: boolean }> &
+  UseStyles<typeof useStyles> &
+  SectionHeaderProps
+
+export default function SectionContainer(props: SectionContainerProps) {
+  const { children, borderBottom } = props
+  const { sectionContainer, borderBottom: borderBottomClass, ...classes } = useStyles(props)
+
+  return (
+    <div className={clsx(sectionContainer, { [borderBottomClass]: borderBottom })}>
+      <SectionHeader {...props} classes={classes} />
+      {children}
+    </div>
+  )
+}

package/SectionHeader/index.tsx

@@ -0,0 +1,69 @@
+import { makeStyles, Theme, Typography, TypographyProps } from '@material-ui/core'
+import clsx from 'clsx'
+import React from 'react'
+import { UseStyles } from '../Styles'
+
+const useStyles = makeStyles(
+  (theme: Theme) => ({
+    sectionHeaderSidePadding: {
+      paddingLeft: theme.spacings.xxs,
+      paddingRight: theme.spacings.xxs,
+    },
+    sectionHeaderWrapper: {
+      position: 'relative',
+      '&:focus': {
+        outline: 'none',
+      },
+      display: 'flex',
+      justifyContent: 'space-between',
+      alignItems: 'center',
+      marginTop: theme.spacings.sm,
+      marginBottom: theme.spacings.xxs,
+    },
+    labelLeft: {},
+    labelRight: {
+      color: theme.palette.primary.contrastText,
+      lineHeight: 1,
+    },
+  }),
+  { name: 'SectionHeader' },
+)
+
+export type SectionHeaderProps = {
+  variantLeft?: TypographyProps['variant']
+  variantRight?: TypographyProps['variant']
+  usePadding?: boolean
+} & UseStyles<typeof useStyles> &
+  (
+    | { labelLeft: React.ReactNode; labelRight?: React.ReactNode }
+    | { labelLeft?: React.ReactNode; labelRight: React.ReactNode }
+  )
+
+export default function SectionHeader(props: SectionHeaderProps) {
+  const {
+    labelLeft,
+    labelRight,
+    usePadding,
+    variantLeft = 'overline',
+    variantRight = 'body2',
+  } = props
+  const classes = useStyles(props)
+
+  return (
+    <div
+      className={clsx({
+        [classes.sectionHeaderWrapper]: true,
+        [classes.sectionHeaderSidePadding]: usePadding,
+      })}
+    >
+      <Typography className={classes.labelLeft} variant={variantLeft} component='div'>
+        {labelLeft}
+      </Typography>
+      {labelRight && (
+        <Typography className={classes.labelRight} variant={variantRight} component='div'>
+          {labelRight}
+        </Typography>
+      )}
+    </div>
+  )
+}

package/Separator/index.tsx

@@ -0,0 +1,33 @@
+import { makeStyles, Theme, Typography, TypographyProps } from '@material-ui/core'
+import React from 'react'
+import { UseStyles } from '../Styles'
+
+export type DividedLinksProps = {
+  icon?: React.ReactNode
+} & Pick<TypographyProps, 'color'> &
+  UseStyles<typeof useStyles>
+
+const useStyles = makeStyles(
+  (theme: Theme) => ({
+    root: {
+      display: 'inline',
+      padding: `0 ${theme.spacings.xxs} 0 ${theme.spacings.xxs}`,
+    },
+  }),
+  { name: 'Separator' },
+)
+
+export default function Separator(props: DividedLinksProps) {
+  const { color, icon } = props
+  const classes = useStyles(props)
+
+  return (
+    <div className={classes.root}>
+      {icon ?? (
+        <Typography component='span' variant='body1' color={color}>
+          |
+        </Typography>
+      )}
+    </div>
+  )
+}

package/Snackbar/ErrorSnackbar.tsx

@@ -0,0 +1,9 @@
+import React from 'react'
+import MessageSnackbar from './MessageSnackbar'
+import { MessageSnackbarImplProps } from './MessageSnackbarImpl'
+
+export type ErrorSnackbarProps = Omit<MessageSnackbarImplProps, 'severity' | 'action'>
+
+export default function ErrorSnackbarImpl(props: ErrorSnackbarProps) {
+  return <MessageSnackbar {...props} />
+}

package/Snackbar/MessageSnackbar.tsx

@@ -0,0 +1,5 @@
+import dynamic from 'next/dynamic'
+
+/** Always load the MessageSnackbar dynamically */
+const MessageSnackbar = dynamic(() => import('./MessageSnackbarImpl'), { ssr: false })
+export default MessageSnackbar