@graphcommerce/next-ui 3.18.1 → 3.20.0

package/AppShell/AppShellSticky/index.tsx

@@ -1,10 +1,7 @@
 import { Container, makeStyles, Theme } from '@material-ui/core'
 import clsx from 'clsx'
-import { useMotionValue } from 'framer-motion'
-import React, { useEffect } from 'react'
-import { useMotionValueValue } from '../../../framer-utils'
+import React from 'react'
 import { UseStyles } from '../../Styles'
-import useAppShellHeaderContext from '../AppShellHeader/useAppShellHeaderContext'
 
 const useStyles = makeStyles(
   (theme: Theme) => ({
@@ -38,21 +35,8 @@ export default function AppShellSticky(props: AppShellStickyProps) {
   const { children, headerFill = 'both' } = props
   const classes = useStyles(props)
 
-  const { contentHeaderRef } = useAppShellHeaderContext()
-  const offsetTop = useMotionValue<number>(0)
-
-  useEffect(() => {
-    if (!contentHeaderRef?.current) return () => {}
-
-    const ro = new ResizeObserver(([entry]) =>
-      offsetTop.set(contentHeaderRef?.current?.clientHeight ?? 0),
-    )
-
-    ro.observe(contentHeaderRef.current)
-    return () => ro.disconnect()
-  }, [contentHeaderRef, offsetTop])
-
-  const top = useMotionValueValue(offsetTop, (v) => v)
+  // todo
+  const top = 0
 
   return (
     <Container

package/AppShell/DesktopNavActions.tsx

@@ -1,5 +1,4 @@
 import { makeStyles, Theme } from '@material-ui/core'
-import { m } from 'framer-motion'
 import React from 'react'
 
 const useStyles = makeStyles(
@@ -7,11 +6,12 @@ const useStyles = makeStyles(
     actions: {
       display: 'none',
       [theme.breakpoints.up('md')]: {
+        display: 'grid',
+        pointerEvents: 'none !important',
         '& > *': {
           pointerEvents: 'all',
         },
         alignItems: 'center',
-        display: 'grid',
         gridAutoFlow: 'column',
         columnGap: 6,
       },
@@ -23,6 +23,5 @@ const useStyles = makeStyles(
 export default function DesktopNavActions(props: { children?: React.ReactNode }) {
   const { children } = props
   const classes = useStyles()
-
-  return <m.div className={classes.actions}>{children}</m.div>
+  return <div className={classes.actions}>{children}</div>
 }

package/AppShell/DesktopNavBar.tsx

@@ -1,10 +1,9 @@
+import { usePageRouter } from '@graphcommerce/framer-next-pages'
 import { Scroller, ScrollerButton, ScrollerProvider } from '@graphcommerce/framer-scroller'
 import { Link, LinkProps as MuiLinkProps, makeStyles, Theme } from '@material-ui/core'
-import { Variant as ThemeVariant } from '@material-ui/core/styles/createTypography'
 import clsx from 'clsx'
 import { m } from 'framer-motion'
 import PageLink from 'next/link'
-import { useRouter } from 'next/router'
 import React from 'react'
 import { UseStyles } from '../Styles'
 import SvgImageSimple from '../SvgImage/SvgImageSimple'
@@ -62,6 +61,7 @@ const useStyles = makeStyles(
       '&:hover': {
         textDecoration: 'none',
       },
+      fontWeight: theme.typography.fontWeightBold,
       paddingTop: 6,
     },
     line: {
@@ -92,7 +92,7 @@ export type MenuTabsProps = MenuProps &
 export default function DesktopNavBar(props: MenuTabsProps) {
   const { menu, LinkProps, iconScrollerBtnLeft, iconScrollerBtnRight } = props
   const classes = useStyles(props)
-  const router = useRouter()
+  const router = usePageRouter()
 
   return (
     <ScrollerProvider scrollSnapAlign='none'>
@@ -101,7 +101,7 @@ export default function DesktopNavBar(props: MenuTabsProps) {
           {menu.map(({ href, children, ...linkProps }) => (
             <PageLink key={href.toString()} href={href} {...linkProps} passHref>
               <Link
-                variant='h6'
+                variant='subtitle1'
                 {...LinkProps}
                 className={clsx(classes.link, LinkProps?.className)}
               >

package/AppShell/FixedFab.tsx

@@ -6,20 +6,15 @@ const useStyles = makeStyles(
   (theme: Theme) => ({
     root: {
       position: 'fixed',
-      top: 'unset',
       bottom: 20,
       right: 20,
       zIndex: 100,
       boxShadow: theme.shadows[4],
       borderRadius: 99,
       maxWidth: 56,
-      [theme.breakpoints.down('sm')]: {
-        top: 'unset !important',
-      },
       [theme.breakpoints.up('md')]: {
         pointerEvents: 'all',
-        top: theme.spacings.xxs,
-        // hacky way to measure page width without scrollbar width
+        top: `calc(${theme.appShell.headerHeightMd} / 2 - 28px)`,
         left: `calc((100vw - (100vw - 100%)) - ${theme.page.horizontal} - 56px)`,
         bottom: 'unset',
         boxShadow: 'unset',

package/AppShell/GlobalHead.tsx

@@ -0,0 +1,36 @@
+import { useTheme } from '@material-ui/core'
+import Head from 'next/head'
+import React from 'react'
+
+export type GlobalHeadProps = { name: string }
+
+const GlobalHead = (props: { name: string }) => {
+  const { name } = props
+  const theme = useTheme()
+
+  return (
+    <Head>
+      <meta name='theme-color' content={theme.palette.background.default} key='theme-color' />
+      <meta
+        name='viewport'
+        content='minimum-scale=1, initial-scale=1, width=device-width'
+        key='viewport'
+      />
+      <meta name='application-name' content={name} key='application-name' />
+      <meta name='apple-mobile-web-app-capable' content='yes' key='apple-mobile-web-app-capable' />
+      <meta
+        name='apple-mobile-web-app-status-bar-style'
+        content='default'
+        key='apple-mobile-web-app-status-bar-style'
+      />
+      <meta name='apple-mobile-web-app-title' content={name} key='apple-mobile-web-app-title' />
+      <meta name='format-detection' content='telephone=no' key='format-detection' />
+      <meta name='mobile-web-app-capable' content='yes' key='mobile-web-app-capable' />
+      <link rel='apple-touch-icon' href='/manifest/icon-512-512.png' key='apple-touch-icon' />
+      <link rel='manifest' href='/manifest.webmanifest' key='manifest' />
+      <link rel='icon' href='/manifest/favicon.ico' key='icon' />
+    </Head>
+  )
+}
+
+export default GlobalHead

package/AppShell/Logo.tsx

@@ -1,6 +1,6 @@
+import { usePageRouter } from '@graphcommerce/framer-next-pages'
 import { Image, ImageProps } from '@graphcommerce/image'
-import { makeStyles, Theme, useTheme } from '@material-ui/core'
-import clsx from 'clsx'
+import { makeStyles, Theme } from '@material-ui/core'
 import PageLink from 'next/link'
 import React from 'react'
 import { UseStyles } from '../Styles'
@@ -21,34 +21,25 @@ const useStyles = makeStyles(
         justifyContent: 'left',
       },
     },
-    logoHideOnMobile: {
-      display: 'none',
-      [theme.breakpoints.up('md')]: {
-        display: 'unset',
-      },
-    },
   }),
   { name: 'Logo' },
 )
 
-export type LogoProps = {
-  href?: `/${string}`
-  image: ImageProps
-  alwaysShow?: boolean
-} & UseStyles<typeof useStyles>
+export type LogoProps = { href?: `/${string}`; image: ImageProps } & UseStyles<typeof useStyles>
 
 export default function Logo(props: LogoProps) {
-  const { href, alwaysShow, image } = props
+  const { href, image } = props
+  const router = usePageRouter()
   const classes = useStyles(props)
-  const theme = useTheme()
 
-  return (
+  return router.asPath === '/' ? (
+    <div className={classes.logo}>
+      <Image layout='fixed' loading='eager' {...image} className={classes.logo} />
+    </div>
+  ) : (
     <PageLink href={href ?? '/'} passHref>
       <a className={classes.link} aria-label='Logo'>
-        <Image
-          {...{ ...image }}
-          className={clsx(classes.logo, !alwaysShow && classes.logoHideOnMobile)}
-        />
+        <Image layout='fixed' loading='eager' {...image} className={classes.logo} />
       </a>
     </PageLink>
   )

package/AppShell/MenuFab.tsx

@@ -10,12 +10,12 @@ import {
 } from '@material-ui/core'
 import { m } from 'framer-motion'
 import PageLink from 'next/link'
-import { Router, useRouter } from 'next/router'
+import { useRouter } from 'next/router'
 import React, { useEffect } from 'react'
 import { UseStyles } from '../Styles'
-import responsiveVal from '../Styles/responsiveVal'
+import { responsiveVal } from '../Styles/responsiveVal'
 import SvgImageSimple from '../SvgImage/SvgImageSimple'
-import { iconMenu } from '../icons'
+import { iconMenu, iconClose } from '../icons'
 import { MenuProps } from './Menu'
 import useFabAnimation from './useFabAnimation'
 
@@ -25,7 +25,6 @@ const useStyles = makeStyles(
       position: 'fixed',
       zIndex: 99,
       left: theme.page.horizontal,
-      top: `calc(${theme.spacings.xxs} - 5px)`,
       [theme.breakpoints.down('sm')]: {
         top: 'unset',
         left: 20,
@@ -33,10 +32,12 @@ const useStyles = makeStyles(
         transform: 'none !important',
         opacity: '1 !important',
       },
+      [theme.breakpoints.up('md')]: {
+        top: `calc(${theme.appShell.headerHeightMd} / 2 - 28px)`,
+      },
     },
     menuFab: {
       background: theme.palette.text.primary,
-      boxShadow: theme.shadows[2],
       width: responsiveVal(42, 56),
       height: responsiveVal(42, 56),
       pointerEvents: 'all',
@@ -44,13 +45,17 @@ const useStyles = makeStyles(
         background: theme.palette.text.primary,
       },
       '& svg': {
-        stroke: theme.palette.background.default,
+        color: theme.palette.background.paper,
       },
     },
     menu: {
       backgroundColor: theme.palette.background.paper,
       color: theme.palette.text.primary,
       minWidth: responsiveVal(200, 280),
+      marginTop: `calc(${responsiveVal(42, 56)} + 3px)`,
+      [theme.breakpoints.down('sm')]: {
+        marginTop: `calc((${responsiveVal(42, 56)} + 12px) * -1)`,
+      },
     },
     menuItemText: {
       ...theme.typography.h4,
@@ -66,10 +71,11 @@ export type MenuFabProps = MenuProps &
     children?: React.ReactNode
     search?: React.ReactNode
     menuIcon?: React.ReactNode
+    closeIcon?: React.ReactNode
   }
 
 export default function MenuFab(props: MenuFabProps) {
-  const { menu, children, search, menuIcon } = props
+  const { menu, children, search, menuIcon, closeIcon } = props
   const classes = useStyles(props)
   const router = useRouter()
   const [openEl, setOpenEl] = React.useState<null | HTMLElement>(null)
@@ -91,7 +97,12 @@ export default function MenuFab(props: MenuFabProps) {
         onClick={(event) => setOpenEl(event.currentTarget)}
         className={classes.menuFab}
       >
-        {menuIcon ?? <SvgImageSimple src={iconMenu} inverted />}
+        {closeIcon ?? (
+          <SvgImageSimple src={iconClose} inverted style={{ display: openEl ? 'block' : 'none' }} />
+        )}
+        {menuIcon ?? (
+          <SvgImageSimple src={iconMenu} inverted style={{ display: openEl ? 'none' : 'block' }} />
+        )}
       </Fab>
 
       <Menu

package/AppShell/MenuFabSecondaryItem.tsx

@@ -1,13 +1,13 @@
-import { ListItem, ListItemIcon, ListItemText, makeStyles, Theme } from '@material-ui/core'
+import { ListItem, ListItemIcon, ListItemText, makeStyles } from '@material-ui/core'
 import PageLink from 'next/link'
 import router from 'next/router'
 import React from 'react'
 
 const useStyles = makeStyles(
-  (theme: Theme) => ({
+  {
     listItemText: {},
     icon: { minWidth: 30 },
-  }),
+  },
   { name: 'FabMenuSecondaryItem' },
 )
 

package/AppShell/PlaceholderFab/index.tsx

@@ -1,27 +1,8 @@
-import { Fab, FabProps, makeStyles } from '@material-ui/core'
-import React from 'react'
-import { UseStyles } from '../../Styles'
-
-const useStyles = makeStyles(
-  () => ({
-    placeholderCartFab: {
-      boxShadow: 'none',
-      background: 'none',
-      pointerEvents: 'none',
-    },
-  }),
-  { name: 'FullPageShell' },
-)
-
-type PlaceholderFabProps = Omit<FabProps, 'children'> & UseStyles<typeof useStyles>
-
-export default function PlaceholderFab(props: PlaceholderFabProps) {
-  const { ...fabProps } = props
-  const classes = useStyles(props)
-
-  return (
-    <Fab className={classes.placeholderCartFab} size='large' {...fabProps} aria-label='Placeholder'>
-      <></>
-    </Fab>
-  )
-}
+import { Fab, FabProps, styled } from '@material-ui/core'
+
+export const PlaceholderFab = styled((props: Omit<FabProps, 'children'>) => (
+  <Fab {...props}>
+    {/* eslint-disable-next-line react/jsx-no-useless-fragment */}
+    <></>
+  </Fab>
+))({ visibility: 'hidden', pointerEvents: 'none' })

package/AppShell/index.tsx

@@ -0,0 +1,19 @@
+export { default as AppShellSticky } from './AppShellSticky'
+export { default as DesktopNavActions } from './DesktopNavActions'
+
+export * from './DesktopNavBar'
+export { default as DesktopNavBar } from './DesktopNavBar'
+export { default as FixedFab } from './FixedFab'
+
+export { default as Logo } from './Logo'
+export * from './Logo'
+export * from './Menu'
+export * from './MenuFab'
+export { default as MenuFab } from './MenuFab'
+export * from './MenuFabSecondaryItem'
+export { default as MenuFabSecondaryItem } from './MenuFabSecondaryItem'
+export * from './PlaceholderFab'
+export * from './GlobalHead'
+export { default as GlobalHead } from './GlobalHead'
+export { default as useFabAnimation } from './useFabAnimation'
+export { default as useFixedFabAnimation } from './useFixedFabAnimation'

package/AppShell/useFabAnimation.tsx

@@ -1,10 +1,11 @@
 import { useMediaQuery, useTheme } from '@material-ui/core'
-import { useMotionTemplate, useTransform, useViewportScroll } from 'framer-motion'
+import { useMotionTemplate, useTransform } from 'framer-motion'
+import { useScrollY } from '../Layout/hooks/useScrollY'
 
 export default function useFabAnimation() {
   const theme = useTheme()
   const isMobile = useMediaQuery(theme.breakpoints.down('sm'))
-  const { scrollY } = useViewportScroll()
+  const scrollY = useScrollY()
   const scrollTo = isMobile ? 0 : 130
 
   const scale = useTransform(scrollY, [50, scrollTo], [0.4, 1])

package/AppShell/useFixedFabAnimation.tsx

@@ -1,16 +1,16 @@
 import { alpha, useTheme } from '@material-ui/core'
-import { useMotionTemplate, useTransform, useViewportScroll } from 'framer-motion'
+import { useMotionTemplate, useTransform } from 'framer-motion'
+import { useScrollY } from '../Layout/hooks/useScrollY'
 
 export default function useFixedFabAnimation() {
   const theme = useTheme()
-  const { scrollY } = useViewportScroll()
-  const opacity = useTransform(scrollY, [50, 60], [0, 0.08])
+  const scrollY = useScrollY()
+  const opacity = useTransform(scrollY, [50, 60], [0, 1])
   const opacity1 = useTransform(
     scrollY,
     [0, 10],
     [alpha(theme.palette.background.paper, 0), alpha(theme.palette.background.paper, 1)],
   )
-  const boxShadow = useMotionTemplate`0 2px 10px 0 rgba(0, 0, 0, ${opacity})`
   const backgroundColor = useMotionTemplate`${opacity1}`
-  return { boxShadow, backgroundColor, opacity }
+  return { backgroundColor, opacity }
 }

package/Blog/BlogAuthor/index.tsx

@@ -1,6 +1,7 @@
 import { Avatar, Chip, makeStyles, Theme } from '@material-ui/core'
 import React from 'react'
 import { UseStyles } from '../../Styles'
+import { responsiveVal } from '../../Styles/responsiveVal'
 
 const useStyles = makeStyles(
   (theme: Theme) => ({
@@ -12,20 +13,23 @@ const useStyles = makeStyles(
       marginBottom: theme.spacings.md,
     },
     authorChip: {
-      height: 66,
+      height: responsiveVal(44, 66),
       '& .MuiChip-label': {
-        paddingLeft: 14,
-        paddingRight: 14,
+        paddingLeft: responsiveVal(10, 14),
+        paddingRight: responsiveVal(14, 18),
       },
       '& .MuiAvatar-root': {
-        width: 44,
-        height: 44,
+        width: responsiveVal(28, 44),
+        height: responsiveVal(28, 44),
       },
     },
     date: {
+      lineHeight: 1.4,
       color: theme.palette.text.disabled,
     },
-    author: {},
+    author: {
+      lineHeight: 1.4,
+    },
   }),
   { name: 'BlogAuthor' },
 )

package/Blog/BlogHeader/index.tsx

@@ -1,7 +1,7 @@
-import { makeStyles, Theme, Typography } from '@material-ui/core'
+import { makeStyles, Theme } from '@material-ui/core'
 import React from 'react'
-import Row from '../../Row'
 import { UseStyles } from '../../Styles'
+import { responsiveVal } from '../../Styles/responsiveVal'
 
 const useStyles = makeStyles(
   (theme: Theme) => ({
@@ -10,7 +10,11 @@ const useStyles = makeStyles(
       margin: `0 auto`,
       marginBottom: theme.spacings.md,
     },
-    asset: {},
+    asset: {
+      '& img': {
+        borderRadius: responsiveVal(theme.shape.borderRadius * 2, theme.shape.borderRadius * 3),
+      },
+    },
   }),
   { name: 'BlogHeader' },
 )

package/Blog/BlogList/index.tsx

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

package/Blog/BlogListItem/index.tsx

@@ -2,7 +2,7 @@ import { Link, makeStyles, Theme, Typography } from '@material-ui/core'
 import PageLink from 'next/link'
 import React from 'react'
 import { UseStyles } from '../../Styles'
-import responsiveVal from '../../Styles/responsiveVal'
+import { responsiveVal } from '../../Styles/responsiveVal'
 
 const useStyles = makeStyles(
   (theme: Theme) => ({
@@ -24,6 +24,7 @@ const useStyles = makeStyles(
       overflow: 'hidden',
       height: '100%',
       width: '100%',
+      borderRadius: responsiveVal(theme.shape.borderRadius * 2, theme.shape.borderRadius * 3),
       '& img': {
         height: '100% !important',
         objectFit: 'cover',

package/Blog/BlogTitle/index.tsx

@@ -1,15 +1,15 @@
-import { makeStyles, Theme } from '@material-ui/core'
+import { makeStyles } from '@material-ui/core'
 import React from 'react'
-import AppShellTitle from '../../AppShell/AppShellTitle'
+import { LayoutTitle } from '../../Layout'
 import { UseStyles } from '../../Styles'
 
 const useStyles = makeStyles(
-  (theme: Theme) => ({
+  {
     wrapper: {
       maxWidth: 800,
       margin: `0 auto`,
     },
-  }),
+  },
   { name: 'BlogTitle' },
 )
 
@@ -23,7 +23,7 @@ export default function BlogTitle(props: BlogTitleProps) {
 
   return (
     <div className={classes.wrapper}>
-      <AppShellTitle variant='h1'>{title}</AppShellTitle>
+      <LayoutTitle variant='h1'>{title}</LayoutTitle>
     </div>
   )
 }

package/Button/index.tsx

@@ -3,11 +3,9 @@ import {
   ButtonClassKey as MuiButtonClassKey,
   Theme,
   makeStyles,
-  lighten,
 } from '@material-ui/core'
 import clsx from 'clsx'
 import React from 'react'
-import { responsiveVal } from '..'
 
 type BaseButtonProps = Omit<Parameters<typeof MuiButton>['0'], 'variant' | 'classes'> & {
   variant?: 'text' | 'outlined' | 'contained' | 'pill' | 'pill-link'
@@ -58,33 +56,40 @@ const useStyles = makeStyles<
       borderRadius: '99em',
     },
     pillLink: {
-      [theme.breakpoints.up('sm')]: {
+      [theme.breakpoints.up('md')]: {
         // manually match MuiButton and containedPrimary styles
         textTransform: 'none',
         ...theme.typography.body2,
         fontWeight: 400,
-        padding: `${responsiveVal(8, 10)} ${responsiveVal(16, 20)}`,
-        backgroundColor: theme.palette.secondary.main,
-        color: theme.palette.primary.contrastText,
         borderRadius: '99em',
-        boxShadow: theme.shadows[1],
+        boxShadow: theme.shadows[6],
+        backgroundColor: theme.palette.background.paper,
+        color: theme.palette.text.primary,
         '&:hover': {
-          background: theme.palette.secondary.dark,
+          background: theme.palette.background.paper,
         },
       },
     },
     pillPrimary: {
-      //
+      [theme.breakpoints.up('md')]: {
+        backgroundColor: theme.palette.primary.main,
+        color: theme.palette.primary.contrastText,
+        '&:hover': {
+          background: theme.palette.primary.dark,
+        },
+      },
     },
     pillSecondary: {
-      //
-    },
-    pillSizeLarge: {
-      //
-    },
-    pillSizeSmall: {
-      //
+      [theme.breakpoints.up('md')]: {
+        backgroundColor: theme.palette.secondary.main,
+        color: theme.palette.secondary.contrastText,
+        '&:hover': {
+          background: theme.palette.secondary.dark,
+        },
+      },
     },
+    pillSizeLarge: {},
+    pillSizeSmall: {},
     pillNoElevation: {
       /* disableElevation does not stop adding box shadow on active... ?! */
       '&:active': {
@@ -152,13 +157,13 @@ export default React.forwardRef<any, ButtonProps>((props, ref) => {
       disabled={loading || disabled}
       className={clsx(
         {
-          [pillClasses.pill]: variant === 'pill',
-          [pillClasses.pillPrimary]: variant === 'pill' && color === 'primary',
-          [pillClasses.pillSecondary]: variant === 'pill' && color === 'secondary',
-          [pillClasses.pillSizeLarge]: variant === 'pill' && size === 'large',
-          [pillClasses.pillSizeSmall]: variant === 'pill' && size === 'small',
-          [pillClasses.pillNoElevation]: buttonProps.disableElevation,
+          [pillClasses.pill]: variant?.startsWith('pill'),
           [pillClasses.pillLink]: variant === 'pill-link',
+          [pillClasses.pillPrimary]: variant?.startsWith('pill') && color === 'primary',
+          [pillClasses.pillSecondary]: variant?.startsWith('pill') && color === 'secondary',
+          [pillClasses.pillSizeLarge]: variant?.startsWith('pill') && size === 'large',
+          [pillClasses.pillSizeSmall]: variant?.startsWith('pill') && size === 'small',
+          [pillClasses.pillNoElevation]: buttonProps.disableElevation,
           [pillClasses.loading]: loading,
           [pillClasses.withStartIcon]: withIcon,
         },

package/ButtonLink/index.tsx

@@ -24,7 +24,7 @@ const useStyles = makeStyles((theme: Theme) => ({
 }))
 
 export type ButtonLinkProps = {
-  title: string
+  title: string | React.ReactNode
   url: string
   endIcon?: React.ReactNode
 } & ButtonProps &