@graphcommerce/next-ui 3.19.1 → 3.20.0

package/FramerScroller/components/SidebarGallery.tsx

@@ -1,3 +1,4 @@
+import { usePageRouter } from '@graphcommerce/framer-next-pages'
 import { usePrevPageRouter } from '@graphcommerce/framer-next-pages/hooks/usePrevPageRouter'
 import {
   CenterSlide,
@@ -12,11 +13,11 @@ import { clientSize, useMotionValueValue } from '@graphcommerce/framer-utils'
 import { Fab, makeStyles, Theme, useTheme, alpha } from '@material-ui/core'
 import clsx from 'clsx'
 import { m, useDomEvent, useMotionValue } from 'framer-motion'
-import { useRouter } from 'next/router'
 import React, { useEffect, useRef } from 'react'
-import { Row } from '../..'
+import { classesPicker } from '../..'
+import Row from '../../Row'
 import { UseStyles } from '../../Styles'
-import responsiveVal from '../../Styles/responsiveVal'
+import { responsiveVal } from '../../Styles/responsiveVal'
 import SvgImageSimple from '../../SvgImage/SvgImageSimple'
 import { iconChevronLeft, iconChevronRight, iconFullscreen, iconFullscreenExit } from '../../icons'
 
@@ -42,14 +43,14 @@ const useStyles = makeStyles(
     rootZoomed: {
       position: 'relative',
       zIndex: theme.zIndex.modal,
-      marginTop: `calc(${theme.page.headerInnerHeight.sm} * -1)`,
+      marginTop: `calc(${theme.appShell.headerHeightSm} * -1)`,
       [theme.breakpoints.up('md')]: {
-        marginTop: `calc(${theme.page.headerInnerHeight.md} * -1  - ${theme.spacings.sm})`,
+        marginTop: `calc(${theme.appShell.headerHeightMd} * -1  - ${theme.spacings.lg})`,
       },
       paddingRight: 0,
     },
     scrollerContainer: ({ aspectRatio: [width, height] }: StyleProps) => {
-      const headerHeight = `${theme.page.headerInnerHeight.sm} - ${theme.spacings.sm} * 2`
+      const headerHeight = `${theme.appShell.headerHeightSm} - ${theme.spacings.sm} * 2`
       const galleryMargin = theme.spacings.lg
       const extraSpacing = theme.spacings.md
 
@@ -172,11 +173,18 @@ export type SidebarGalleryProps = {
 } & UseStyles<typeof useStyles>
 
 export default function SidebarGallery(props: SidebarGalleryProps) {
-  const { sidebar, images, aspectRatio = [1, 1], routeHash = 'gallery' } = props
-  const router = useRouter()
+  const {
+    sidebar,
+    images,
+    aspectRatio = [1, 1],
+    routeHash = 'gallery',
+    classes: classesBase,
+  } = props
+
+  const router = usePageRouter()
   const prevRoute = usePrevPageRouter()
   const clientHeight = useMotionValueValue(clientSize.y, (y) => y)
-  const classes = useStyles({ clientHeight, aspectRatio, classes: props.classes })
+  const classes = useStyles({ clientHeight, aspectRatio, classes: classesBase })
 
   const route = `#${routeHash}`
   // We're using the URL to manage the state of the gallery.
@@ -201,16 +209,12 @@ export default function SidebarGallery(props: SidebarGalleryProps) {
     }
   }
 
-  const clsxZoom = (key: string) => clsx(classes?.[key], zoomed && classes?.[`${key}Zoomed`])
+  const className = classesPicker(classes, { zoomed })
   const theme = useTheme()
   const windowRef = useRef(typeof window !== 'undefined' ? window : null)
 
   const handleEscapeKey = (e: KeyboardEvent | Event) => {
-    if (zoomed) {
-      if ((e as KeyboardEvent)?.key === 'Escape') {
-        toggle()
-      }
-    }
+    if (zoomed && (e as KeyboardEvent)?.key === 'Escape') toggle()
   }
 
   const dragStart = useMotionValue<number>(0)
@@ -228,16 +232,16 @@ export default function SidebarGallery(props: SidebarGalleryProps) {
   return (
     <ScrollerProvider scrollSnapAlign='center'>
       <Row maxWidth={false} disableGutters>
-        <m.div layout className={clsxZoom('root')}>
+        <m.div layout {...className('root')}>
           <m.div
             layout
-            className={clsxZoom('scrollerContainer')}
+            {...className('scrollerContainer')}
             onLayoutAnimationComplete={() => {
               if (!zoomed) document.body.style.overflow = ''
             }}
           >
             <Scroller
-              className={clsxZoom('scroller')}
+              {...className('scroller')}
               hideScrollbar
               onMouseDown={onMouseDownScroller}
               onMouseUp={onMouseUpScroller}
@@ -299,8 +303,8 @@ export default function SidebarGallery(props: SidebarGalleryProps) {
             </div>
           </m.div>
 
-          <div className={clsxZoom('sidebarWrapper')}>
-            <m.div layout className={clsxZoom('sidebar')}>
+          <div {...className('sidebarWrapper')}>
+            <m.div layout {...className('sidebar')}>
               {sidebar}
             </m.div>
           </div>

package/FramerScroller/components/SidebarSlider.tsx

@@ -8,7 +8,7 @@ import { Theme, makeStyles } from '@material-ui/core'
 import React, { ReactNode } from 'react'
 import Row from '../../Row'
 import { UseStyles } from '../../Styles'
-import responsiveVal from '../../Styles/responsiveVal'
+import { responsiveVal } from '../../Styles/responsiveVal'
 import SvgImageSimple from '../../SvgImage/SvgImageSimple'
 import { iconChevronLeft, iconChevronRight } from '../../icons'
 
@@ -29,10 +29,8 @@ const useStyles = makeStyles(
       minWidth: 1,
     },
     scroller: {
-      width: '100%',
       gridColumnGap: theme.spacings.md,
       gridRowGap: theme.spacings.lg,
-      alignContent: 'space-around',
       paddingRight: theme.page.horizontal,
       gridAutoColumns: responsiveVal(200, 400),
     },
@@ -78,9 +76,7 @@ export default function SidebarSlider(props: SidebarSliderProps) {
           </div>
 
           <div className={classes.scrollerContainer}>
-            <Scroller className={classes.scroller} hideScrollbar>
-              {children}
-            </Scroller>
+            <Scroller className={classes.scroller}>{children}</Scroller>
             <div className={classes.centerLeft}>
               <ScrollerButton layout direction='left' className={classes.sliderButtons}>
                 <SvgImageSimple src={iconChevronLeft} />

package/FullPageMessage/index.tsx

@@ -2,7 +2,7 @@ import { Container, Theme, Typography } from '@material-ui/core'
 import { makeStyles } from '@material-ui/styles'
 import clsx from 'clsx'
 import React from 'react'
-import responsiveVal from '../Styles/responsiveVal'
+import { responsiveVal } from '../Styles/responsiveVal'
 
 const useStyles = makeStyles(
   (theme: Theme) => ({

package/IconHeader/index.tsx

@@ -1,9 +1,8 @@
 import { makeStyles, Theme, Typography } from '@material-ui/core'
 import clsx from 'clsx'
 import React from 'react'
-import { SvgImageSimple } from '..'
-import responsiveVal from '../Styles/responsiveVal'
-import SvgImage, { SvgImageProps } from '../SvgImage'
+import { SvgImageProps } from '../SvgImage'
+import SvgImageSimple from '../SvgImage/SvgImageSimple'
 
 // TODO: remove all occurrences. deprecated component
 
@@ -73,18 +72,6 @@ export default function IconHeader(props: IconHeaderProps) {
     large: 'h2',
   }
 
-  const iconSizes = {
-    small: 32,
-    medium: 48,
-    large: 64,
-  }
-
-  const iconMobileSizes = {
-    small: 24,
-    medium: 32,
-    large: 40,
-  }
-
   return (
     <div className={clsx(classes.container, !noMargin && classes.margin)}>
       <div className={clsx(classes.innerContainer, !stayInline && classes.breakColumnsDesktop)}>

package/Layout/components/LayoutHeader.tsx

@@ -0,0 +1,151 @@
+import { usePageContext } from '@graphcommerce/framer-next-pages'
+import { makeStyles, Theme } from '@material-ui/core'
+import React from 'react'
+import { classesPicker } from '../../Styles/classesPicker'
+import LayoutHeaderBack, { useShowBack } from './LayoutHeaderBack'
+import LayoutHeaderClose, { useShowClose } from './LayoutHeaderClose'
+import LayoutHeaderContent, { ContentProps } from './LayoutHeaderContent'
+import { FloatingProps } from './LayoutHeadertypes'
+
+export type LayoutHeaderProps = FloatingProps &
+  Omit<ContentProps, 'leftAction' | 'rightAction'> & {
+    /**
+     * Button to display on the left side of the title
+     *
+     * - Assumes it can float on desktop
+     * - Assumes it can not float on mobile
+     */
+    primary?: React.ReactNode
+    /**
+     * Button to display on the right side of the title
+     *
+     * - Assumes it can float on desktop
+     * - Assumes it can not float on mobile
+     */
+    secondary?: React.ReactNode
+
+    additional?: React.ReactNode
+
+    noAlign?: boolean
+  }
+
+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' },
+)
+
+export function LayoutHeader(props: LayoutHeaderProps) {
+  const { children, additional, divider, primary, secondary, noAlign } = props
+  const classes = useStyles(props)
+  const showBack = useShowBack()
+  const showClose = useShowClose()
+
+  const floatFallback = !children
+  let { floatingSm = false, floatingMd = floatFallback } = props
+
+  if (divider) floatingMd = false
+
+  // When the primary or secondary is set, the header can't float on mobile even if the prop is passed.
+  if (divider || primary || secondary) floatingSm = false
+
+  const close = showClose && <LayoutHeaderClose />
+  const back = showBack && <LayoutHeaderBack variant={floatingSm ? 'pill' : 'pill-link'} />
+
+  let left = secondary
+  let right = primary
+
+  if (back) left = back
+
+  if (!left) left = close
+  else if (!right) right = close
+
+  if (!left && !right && !children) return null
+
+  const className = classesPicker(classes, {
+    floatingSm,
+    floatingMd,
+    visibleSm: !floatingSm,
+    visibleMd: !floatingMd,
+    noChildren: !children,
+    noAlign,
+    divider: !!divider,
+  })
+
+  return (
+    <div {...className('sticky')}>
+      <LayoutHeaderContent
+        left={left}
+        right={right}
+        divider={divider}
+        floatingMd={floatingMd}
+        floatingSm={floatingSm}
+      >
+        {children}
+        {additional}
+      </LayoutHeaderContent>
+    </div>
+  )
+}

package/Layout/components/LayoutHeaderBack.tsx

@@ -0,0 +1,50 @@
+import { usePageRouter, useUp, usePrevUp, usePageContext } from '@graphcommerce/framer-next-pages'
+import { Trans } from '@lingui/macro'
+import PageLink from 'next/link'
+import React from 'react'
+import Button, { ButtonProps } from '../../Button'
+import SvgImageSimple from '../../SvgImage/SvgImageSimple'
+import { iconChevronLeft } from '../../icons'
+
+export type BackProps = Omit<ButtonProps, 'onClick' | 'children'>
+
+export function useShowBack() {
+  const router = usePageRouter()
+  const up = useUp()
+  const prevUp = usePrevUp()
+  const { backSteps } = usePageContext()
+
+  const canClickBack = backSteps > 0 && router.asPath !== prevUp?.href
+
+  if (canClickBack) return true
+  if (up?.href && up.href !== router.asPath) return true
+  return false
+}
+
+export default function LayoutHeaderBack(props: BackProps) {
+  const router = usePageRouter()
+  const up = useUp()
+  const prevUp = usePrevUp()
+  const { backSteps } = usePageContext()
+
+  const backIcon = <SvgImageSimple src={iconChevronLeft} />
+  const canClickBack = backSteps > 0 && router.asPath !== prevUp?.href
+
+  if (canClickBack)
+    return (
+      <Button onClick={() => router.back()} variant='pill-link' startIcon={backIcon} {...props}>
+        {up?.href === router.asPath ? up.title : <Trans>Back</Trans>}
+      </Button>
+    )
+
+  if (up?.href && up.href !== router.asPath)
+    return (
+      <PageLink href={up.href} passHref>
+        <Button variant='pill-link' startIcon={backIcon} {...props}>
+          {up.title}
+        </Button>
+      </PageLink>
+    )
+
+  return null
+}

package/Layout/components/LayoutHeaderClose.tsx

@@ -0,0 +1,27 @@
+import { usePageRouter, usePageContext } from '@graphcommerce/framer-next-pages'
+import React from 'react'
+import Button from '../../Button'
+import SvgImageSimple from '../../SvgImage/SvgImageSimple'
+import { iconClose } from '../../icons'
+
+export function useShowClose() {
+  const { overlayGroup } = usePageContext()
+  return !!overlayGroup
+}
+
+export default function LayoutHeaderClose() {
+  const router = usePageRouter()
+  const { closeSteps } = usePageContext()
+
+  return (
+    <Button
+      type='button'
+      onClick={() => router.go(closeSteps * -1)}
+      aria-label='Close'
+      variant='pill-link'
+      startIcon={<SvgImageSimple src={iconClose} />}
+    >
+      Close
+    </Button>
+  )
+}

package/Layout/components/LayoutHeaderContent.tsx

@@ -0,0 +1,173 @@
+import { useMotionValueValue } from '@graphcommerce/framer-utils'
+import { Divider, makeStyles, Theme } from '@material-ui/core'
+import React, { useRef } from 'react'
+import { UseStyles } from '../../Styles'
+import { classesPicker } from '../../Styles/classesPicker'
+import { useScrollY } from '../hooks/useScrollY'
+import { FloatingProps } from './LayoutHeadertypes'
+
+type Classes = 'bg' | 'content' | 'left' | 'center' | 'right' | 'divider'
+
+const time = '150ms'
+
+const useStyles = makeStyles(
+  (theme: Theme) => ({
+    bg: {
+      position: 'absolute',
+      left: 0,
+      width: '100%',
+      backgroundColor: theme.palette.background.default,
+      opacity: 0,
+      transition: `opacity ${time}`,
+
+      height: theme.appShell.headerHeightSm,
+      [theme.breakpoints.up('md')]: {
+        height: theme.appShell.appBarHeightMd,
+      },
+    },
+    bgFloatingSm: {
+      [theme.breakpoints.down('sm')]: {
+        display: 'none',
+      },
+    },
+    bgFloatingMd: {
+      [theme.breakpoints.up('md')]: {
+        display: 'none',
+      },
+    },
+    bgScrolled: {
+      opacity: 1,
+    },
+    content: {
+      position: 'absolute',
+      left: 0,
+      width: '100%',
+      display: 'grid',
+      gridTemplateAreas: `"left center right"`,
+      gridTemplateColumns: '1fr auto 1fr',
+      alignItems: 'center',
+
+      height: theme.appShell.headerHeightSm,
+      [theme.breakpoints.up('md')]: {
+        padding: `0 ${theme.page.horizontal}`,
+        height: theme.appShell.appBarHeightMd,
+      },
+    },
+    contentFloatingMd: {
+      [theme.breakpoints.up('md')]: {
+        padding: `0 ${theme.page.horizontal}`,
+        background: 'none',
+        pointerEvents: 'none',
+      },
+    },
+    contentFloatingSm: {
+      [theme.breakpoints.down('sm')]: {
+        padding: `0 ${theme.page.horizontal}`,
+        background: 'none',
+        pointerEvents: 'none',
+      },
+    },
+    left: {
+      '& > *': { pointerEvents: 'all' },
+      display: 'grid',
+      gridAutoFlow: 'column',
+      gap: theme.spacings.sm,
+      gridArea: 'left',
+      justifyContent: 'start',
+    },
+    center: {
+      display: 'grid',
+      gridAutoFlow: 'column',
+      gap: theme.spacings.sm,
+      gridArea: 'center',
+      justifyContent: 'start',
+      overflow: 'hidden',
+      transition: `opacity ${time}`,
+      opacity: 0,
+    },
+    centerScrolled: {
+      opacity: 1,
+      '& > *': { pointerEvents: 'all' },
+    },
+    centerFloatingSm: {
+      [theme.breakpoints.down('sm')]: {
+        display: 'none',
+      },
+    },
+    centerFloatingMd: {
+      [theme.breakpoints.up('md')]: {
+        display: 'none',
+      },
+    },
+    right: {
+      '& > *': { pointerEvents: 'all' },
+      display: 'grid',
+      gridAutoFlow: 'column',
+      gap: theme.spacings.sm,
+      gridArea: 'right',
+      justifyContent: 'end',
+    },
+    divider: {
+      position: 'absolute',
+      bottom: 0,
+      left: 0,
+      right: 0,
+      transition: `opacity ${time}`,
+      opacity: 0,
+    },
+    dividerCustomDivider: {
+      opacity: 1,
+    },
+    dividerScrolled: {
+      opacity: 1,
+    },
+    dividerFloatingSm: {
+      [theme.breakpoints.down('sm')]: {
+        display: 'none',
+      },
+    },
+    dividerFloatingMd: {
+      [theme.breakpoints.up('md')]: {
+        display: 'none',
+      },
+    },
+  }),
+  { name: 'LayoutHeaderContent' },
+)
+
+export type ContentProps = FloatingProps &
+  UseStyles<typeof useStyles> & {
+    children?: React.ReactNode
+    left?: React.ReactNode
+    right?: React.ReactNode
+    divider?: React.ReactNode
+  }
+
+export default function LayoutHeaderContent(props: ContentProps) {
+  const ref = useRef<HTMLDivElement>(null)
+  const scroll = useScrollY()
+
+  const { left, children, right, divider, floatingMd = false, floatingSm = false } = props
+  const classes = useStyles(props)
+
+  const scrolled = useMotionValueValue(scroll, (y) => y > 50)
+
+  const className = classesPicker<Classes>(classes, {
+    floatingSm,
+    floatingMd,
+    scrolled,
+    customDivider: !!divider,
+  })
+
+  return (
+    <>
+      <div {...className('bg')} />
+      <div {...className('content')} ref={ref}>
+        <div {...className('left')}>{left}</div>
+        <div {...className('center')}>{children}</div>
+        <div {...className('right')}>{right}</div>
+        <div {...className('divider')}>{divider ?? <Divider />}</div>
+      </div>
+    </>
+  )
+}

package/Layout/components/LayoutHeadertypes.ts

@@ -0,0 +1,10 @@
+type Matrix<T extends string, M extends string> = `${T}${Capitalize<M>}`
+
+// Possible configurations for the AppShellHeader
+export type Variant = 'floating'
+export type Size = 'sm' | 'md'
+
+// Matrix
+export type VariantSize = Matrix<Variant, Size>
+
+export type FloatingProps = Partial<Record<Matrix<Variant, Size>, boolean>>

package/Layout/components/LayoutProvider.tsx

@@ -0,0 +1,17 @@
+import { MotionValue } from 'framer-motion'
+import { useMemo } from 'react'
+import layoutContext from '../context/layoutContext'
+
+export type LayoutProviderProps = {
+  children: React.ReactNode
+  scroll: MotionValue<number>
+}
+
+export default function LayoutProvider(props: LayoutProviderProps) {
+  const { children, scroll } = props
+  return (
+    <layoutContext.Provider value={useMemo(() => ({ scroll }), [scroll])}>
+      {children}
+    </layoutContext.Provider>
+  )
+}

package/{Title/index.tsx → Layout/components/LayoutTitle.tsx}

@@ -1,10 +1,10 @@
 import { makeStyles, Theme, Typography, TypographyProps } from '@material-ui/core'
-import clsx from 'clsx'
 import React from 'react'
-import { responsiveVal } from '..'
-import { UseStyles } from '../Styles'
-import SvgImage, { SvgImageProps } from '../SvgImage'
-import SvgImageSimple from '../SvgImage/SvgImageSimple'
+import { UseStyles } from '../../Styles'
+import { classesPicker } from '../../Styles/classesPicker'
+import { responsiveVal } from '../../Styles/responsiveVal'
+import { SvgImageProps } from '../../SvgImage'
+import SvgImageSimple from '../../SvgImage/SvgImageSimple'
 
 const useStyles = makeStyles(
   (theme: Theme) => ({
@@ -18,8 +18,7 @@ const useStyles = makeStyles(
         flexFlow: 'column',
       },
     },
-    typography: {},
-    small: {
+    containerSizeSmall: {
       flexFlow: 'unset',
       '& svg': {
         width: responsiveVal(24, 28),
@@ -27,10 +26,15 @@ const useStyles = makeStyles(
         strokeWidth: 1.4,
       },
     },
+    containerGutterTop: {
+      marginTop: theme.spacings.xl,
+    },
+    containerGutterBottom: {
+      marginBottom: theme.spacings.lg,
+    },
+    typography: {},
   }),
-  {
-    name: 'Title',
-  },
+  { name: 'Title' },
 )
 
 export type TitleProps = {
@@ -38,17 +42,24 @@ export type TitleProps = {
   icon?: SvgImageProps['src']
   size?: 'small' | 'medium'
   variant?: TypographyProps['variant']
+  gutterTop?: boolean
+  gutterBottom?: boolean
   component?: React.ElementType
 } & UseStyles<typeof useStyles>
 
-const Title = React.forwardRef<HTMLDivElement, TitleProps>((props, ref) => {
+export const LayoutTitle = React.forwardRef<HTMLDivElement, TitleProps>((props, ref) => {
   const { children, icon, size = 'medium', component, variant } = props
   const classes = useStyles(props)
   const small = size === 'small'
 
+  const gutterTop = !!(props.gutterTop ?? size !== 'small')
+  const gutterBottom = !!(props.gutterBottom ?? size !== 'small')
+
+  const className = classesPicker(classes, { size, gutterBottom, gutterTop })
+
   return (
-    <div className={clsx(classes.container, small && classes.small)}>
-      {icon && <SvgImageSimple src={icon} size='xl' />}
+    <div {...className('container')}>
+      {icon && <SvgImageSimple src={icon} size={small ? 'large' : 'xl'} />}
       <Typography
         ref={ref}
         variant={variant || (small ? 'h6' : 'h3')}
@@ -60,5 +71,3 @@ const Title = React.forwardRef<HTMLDivElement, TitleProps>((props, ref) => {
     </div>
   )
 })
-
-export default Title