@graphcommerce/next-ui 3.19.1 → 3.20.0

package/Row/HeroBanner/index.tsx

@@ -1,9 +1,10 @@
 import { ContainerProps, Theme, makeStyles, useTheme, useMediaQuery } from '@material-ui/core'
-import { m, useTransform, useViewportScroll } from 'framer-motion'
+import { m, useTransform } from 'framer-motion'
 import React from 'react'
 import Row from '..'
+import { useScrollY } from '../../Layout/hooks/useScrollY'
 import { UseStyles } from '../../Styles'
-import responsiveVal from '../../Styles/responsiveVal'
+import { responsiveVal } from '../../Styles/responsiveVal'
 
 const useStyles = makeStyles(
   (theme: Theme) => ({
@@ -19,19 +20,14 @@ const useStyles = makeStyles(
       alignContent: 'center',
       padding: `${theme.spacings.lg} ${theme.spacings.md}`,
       paddingTop: `calc(${theme.spacings.lg} - ${theme.spacings.md})`,
-      minHeight: `calc(100vh - ${theme.page.headerInnerHeight.sm})`,
+      minHeight: `calc(100vh - ${theme.appShell.headerHeightSm})`,
       '& > *': {
         zIndex: 1,
         maxWidth: 'max-content',
       },
-      [theme.breakpoints.down('sm')]: {
-        ['@supports (-webkit-touch-callout: none)']: {
-          minHeight: '-webkit-fill-available',
-        },
-      },
       [theme.breakpoints.up('md')]: {
         width: '70%',
-        minHeight: `calc(100vh - ${theme.page.headerInnerHeight.md})`,
+        minHeight: `calc(100vh - ${theme.appShell.headerHeightMd})`,
       },
       [theme.breakpoints.up('lg')]: {
         padding: `${theme.spacings.lg} ${theme.spacings.lg}`,
@@ -48,7 +44,7 @@ const useStyles = makeStyles(
       display: 'grid',
       justifyItems: 'center',
       overflow: 'hidden',
-      paddingBottom: theme.spacings.md,
+      paddingBottom: theme.page.horizontal,
       '& video': {
         objectFit: 'cover',
         width: '100%',
@@ -80,7 +76,7 @@ export default function HeroBanner(props: HeroBannerProps) {
   const { pageLinks, videoSrc, children, ...containerProps } = props
   const classes = useStyles(props)
   const theme = useTheme()
-  const { scrollY } = useViewportScroll()
+  const scrollY = useScrollY()
   const width = useTransform(
     scrollY,
     [10, 150],

package/Row/IconBlocks/index.tsx

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

package/Row/ImageText/index.tsx

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

package/Row/ImageTextBoxed/index.tsx

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

package/Row/ParagraphWithSidebarSlide/index.tsx

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

package/Row/SpecialBanner/index.tsx

@@ -1,10 +1,11 @@
 import { ContainerProps, makeStyles, Theme, Typography } from '@material-ui/core'
 import Row from '..'
 import { UseStyles } from '../../Styles'
-import responsiveVal from '../../Styles/responsiveVal'
+import { responsiveVal } from '../../Styles/responsiveVal'
 
 const useStyles = makeStyles(
   (theme: Theme) => ({
+    root: {},
     wrapper: {
       display: 'grid',
       background: theme.palette.background.paper,
@@ -90,10 +91,10 @@ export type SpecialBannerProps = UseStyles<typeof useStyles> &
 
 export default function SpecialBanner(props: SpecialBannerProps) {
   const { asset, topic, pageLinks, children, ...containerProps } = props
-  const classes = useStyles(props)
+  const { root, ...classes } = useStyles(props)
 
   return (
-    <Row maxWidth={false} {...containerProps}>
+    <Row maxWidth={false} {...containerProps} classes={{ root }}>
       <Row maxWidth={false} className={classes.wrapper} disableGutters>
         <div className={classes.asset}>{asset}</div>
         <div className={classes.copy}>

package/Row/index.tsx

@@ -2,7 +2,7 @@ import { Container, styled } from '@material-ui/core'
 
 const Row = styled(Container)(
   ({ theme }) => ({
-    marginBottom: theme.spacings.xl,
+    marginBottom: theme.spacings.xxl,
   }),
   { name: 'Row' },
 )

package/Snackbar/MessageSnackbarImpl.tsx

@@ -141,7 +141,7 @@ export default function MessageSnackbarImpl(props: MessageSnackbarImplProps) {
   }
 
   let icon = iconCheckmark
-  if (severity == 'error') icon = iconSadFace
+  if (severity === 'error') icon = iconSadFace
 
   return (
     <Portal>

package/StarRatingField/index.tsx

@@ -1,13 +1,12 @@
+import { makeStyles, Theme } from '@material-ui/core'
 import { Rating, RatingProps } from '@material-ui/lab'
 import React from 'react'
-import { SvgImageSimple } from '..'
+import SvgImageSimple from '../SvgImage/SvgImageSimple'
 import { iconStar } from '../icons'
-import { makeStyles, Theme } from '@material-ui/core'
 
 export type StarRatingFieldProps = {
   id?: string
   onChange?: (id: string, value: number) => void
-  iconSize?: number
 } & Omit<RatingProps, 'id' | 'onChange'>
 
 const useStyles = makeStyles(
@@ -29,7 +28,7 @@ const useStyles = makeStyles(
 )
 
 export default function StarRatingField(props: StarRatingFieldProps) {
-  const { id, onChange = () => {}, iconSize = 20, ...ratingProps } = props
+  const { id, onChange = () => {}, ...ratingProps } = props
   const classes = useStyles(props)
 
   return (

package/Stepper/Stepper.tsx

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

package/Styles/breakpointVal.tsx

@@ -1,8 +1,8 @@
-export default function breakpointVal(
+export function breakpointVal(
   property: string,
   min: number,
   max: number,
-  breakpointsObject: object,
+  breakpointsObject: Record<string, number>,
 ) {
   const minSize = 320
   const breakpoints = Object.values(breakpointsObject)

package/Styles/classesPicker.ts

@@ -0,0 +1,41 @@
+import { capitalize } from '@material-ui/core'
+import clsx from 'clsx'
+
+/**
+ * This will pick classNames from the classes object based on the given value object.sf
+ *
+ * Example:
+ *
+ * ```tsx
+ * const classes = makeStyles({
+ *   root: {},
+ *   rootColorRed: { color: 'red' }
+ *   rootFloating: { display: 'inline-block' }
+ * })
+ *
+ * function MyComponent() {
+ *   const classes = useStyles(props)
+ *   const classNames = pickClasses(classes, { color: 'red', floating: true })
+ *
+ *   return <div {...className('root')}>Hello</div>
+ * }
+ * ```
+ */
+export function classesPicker<K extends string>(
+  classes: Record<string, string>,
+  values: Record<string, boolean | string | undefined>,
+) {
+  return (className: K, addClassName?: string) => {
+    const mapped: Record<string, string> = Object.fromEntries(
+      Object.entries(values)
+        .map(([key, value]) =>
+          typeof value === 'boolean' || typeof value === 'undefined'
+            ? [classes[`${className}${capitalize(key)}`], !!value]
+            : [classes[`${className}${capitalize(key)}${capitalize(value)}`], true],
+        )
+        .filter((v) => !!v[0] && v[1]),
+    )
+
+    return { className: clsx(classes[className], mapped, addClassName) }
+  }
+}

package/Styles/responsiveVal.tsx

@@ -3,7 +3,7 @@
  *
  * E.g.: `responsiveVal(16, 22)` -> Will render 16px at 320px window width, 22 ad 1280 window width
  */
-export default function responsiveVal(
+export function responsiveVal(
   min: number,
   max: number,
   maxBreakpoint = 1280,

package/SvgImage/SvgImageSimple.tsx

@@ -1,13 +1,13 @@
-import { Image, ImageProps, isStaticImport, isStaticRequire } from '@graphcommerce/image'
-import { makeStyles, capitalize, Theme } from '@material-ui/core'
+import { ImageProps, isStaticImport, isStaticRequire } from '@graphcommerce/image'
+import { makeStyles, capitalize } from '@material-ui/core'
 import clsx from 'clsx'
 import { forwardRef } from 'react'
-import responsiveVal from '../Styles/responsiveVal'
+import { responsiveVal } from '../Styles/responsiveVal'
 
 export type SvgImageShade = 'muted' | 'default' | 'inverted'
 
 const useStyles = makeStyles(
-  (theme: Theme) => ({
+  {
     image: {
       userSelect: 'none',
       width: responsiveVal(22, 24),
@@ -48,7 +48,7 @@ const useStyles = makeStyles(
     },
     muted: {},
     inverted: {},
-  }),
+  },
   { name: 'SvgImageSimple' },
 )
 
@@ -60,7 +60,7 @@ type SvgImageSimpleProps = Omit<ImageProps, 'fixed'> & {
   inverted?: boolean
 }
 
-const SvgImageSimple = forwardRef<HTMLImageElement, SvgImageSimpleProps>((props, ref) => {
+const SvgImageSimple = forwardRef<SVGSVGElement, SvgImageSimpleProps>((props, ref) => {
   const {
     style,
     className,
@@ -73,13 +73,14 @@ const SvgImageSimple = forwardRef<HTMLImageElement, SvgImageSimpleProps>((props,
   } = props
   const classes = useStyles()
 
-  let src = imageProps.src
+  let { src } = imageProps
   let staticSrc = ''
   if (isStaticImport(src)) staticSrc = (isStaticRequire(src) ? src.default : src).src
   src = typeof src === 'string' ? src : staticSrc
 
   return (
     <svg
+      ref={ref}
       className={clsx(
         className,
         classes.image,
@@ -90,7 +91,7 @@ const SvgImageSimple = forwardRef<HTMLImageElement, SvgImageSimpleProps>((props,
       aria-hidden='true'
       style={style}
     >
-      <use href={`${src}#icon`}></use>
+      <use href={`${src}#icon`} />
     </svg>
   )
 })

package/SvgImage/index.tsx

@@ -61,16 +61,14 @@ export default function SvgImage(props: SvgImageProps) {
   })
 
   return (
-    <>
-      <Image
-        layout='fixed'
-        unoptimized
-        src={src}
-        className={classes.root}
-        // height={24}
-        // width={24}
-        {...imageProps}
-      />
-    </>
+    <Image
+      layout='fixed'
+      unoptimized
+      src={src}
+      className={classes.root}
+      // height={24}
+      // width={24}
+      {...imageProps}
+    />
   )
 }

package/TextInputNumber/index.tsx

@@ -5,18 +5,17 @@ import {
   OutlinedTextFieldProps,
   TextField,
   TextFieldProps,
-  Theme,
   useForkRef,
 } from '@material-ui/core'
 import clsx from 'clsx'
 import React, { ChangeEvent, Ref, useCallback, useEffect, useRef, useState } from 'react'
 import { UseStyles } from '../Styles'
-import responsiveVal from '../Styles/responsiveVal'
+import { responsiveVal } from '../Styles/responsiveVal'
 import SvgImageSimple from '../SvgImage/SvgImageSimple'
 import { iconMin, iconPlus } from '../icons'
 
 const useStyles = makeStyles(
-  (theme: Theme) => ({
+  {
     quantity: {
       width: responsiveVal(80, 120),
       backgroundColor: 'inherit',
@@ -34,7 +33,7 @@ const useStyles = makeStyles(
     adornedStart: {
       paddingLeft: responsiveVal(7, 14),
     },
-  }),
+  },
   { name: 'TextInputNumber' },
 )
 

package/Theme/types.ts

@@ -7,7 +7,7 @@ declare module '@material-ui/core/styles/createPalette' {
 }
 
 declare module '@material-ui/core/styles/createTheme' {
-  interface Theme {
+  interface ThemeOptions {
     spacings: {
       xxs: string
       xs: string
@@ -20,14 +20,15 @@ declare module '@material-ui/core/styles/createTheme' {
     page: {
       horizontal: string
       vertical: string
-      headerInnerHeight: {
-        xs: string
-        sm: string
-        md: string
-      }
+    }
+    appShell: {
+      headerHeightSm: string
+      headerHeightMd: string
+      appBarHeightMd: string
+      appBarInnerHeightMd: string
     }
   }
-  interface ThemeOptions {
+  interface Theme {
     spacings: {
       xxs: string
       xs: string
@@ -40,11 +41,12 @@ declare module '@material-ui/core/styles/createTheme' {
     page: {
       horizontal: string | number
       vertical: string | number
-      headerInnerHeight: {
-        xs: string
-        sm: string
-        md: string
-      }
+    }
+    appShell: {
+      headerHeightSm: string
+      headerHeightMd: string
+      appBarHeightMd: string
+      appBarInnerHeightMd: string
     }
   }
 }

package/ToggleButton/index.tsx

@@ -1,11 +1,9 @@
-// @inheritedComponent ButtonBase
-
-import { capitalize, lighten, makeStyles, Theme } from '@material-ui/core'
+import { makeStyles, Theme } from '@material-ui/core'
 import clsx from 'clsx'
 import React, { FormEvent } from 'react'
-import { responsiveVal } from '..'
 import Button, { ButtonProps } from '../Button'
 import { UseStyles } from '../Styles'
+import { responsiveVal } from '../Styles/responsiveVal'
 
 type StyleProps = { selected?: boolean; color?: ButtonProps['color'] }
 

package/UspList/UspListItem.tsx

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

package/index.ts

@@ -1,42 +1,15 @@
+export * from './AppShell'
+export * from './Layout'
+export * from './LayoutDefault'
+export * from './LayoutOverlay'
+export * from './Footer'
+
 export * from './AnimatedRow'
 export { default as AnimatedRow } from './AnimatedRow'
 export * from './ApolloError/ApolloErrorAlert'
 export { default as ApolloErrorAlert } from './ApolloError/ApolloErrorAlert'
 export * from './ApolloError/ApolloErrorFullPage'
 export { default as ApolloErrorFullPage } from './ApolloError/ApolloErrorFullPage'
-export * from './AppShell/AppShellHeader'
-export { default as AppShellHeader } from './AppShell/AppShellHeader'
-export { default as AppShellProvider } from './AppShell/AppShellProvider'
-export { default as AppShellSticky } from './AppShell/AppShellSticky'
-export { default as AppShellTitle } from './AppShell/AppShellTitle'
-export { default as DesktopNavActions } from './AppShell/DesktopNavActions'
-export * from './AppShell/DesktopNavBar'
-export { default as DesktopNavBar } from './AppShell/DesktopNavBar'
-export { default as FixedFab } from './AppShell/FixedFab'
-export * from './AppShell/ForwardButton'
-export { default as ForwardButton } from './AppShell/ForwardButton'
-export * from './AppShell/FullPageShellBase'
-export { default as Logo } from './AppShell/Logo'
-export * from './AppShell/Logo'
-export { default as FullPageShellBase } from './AppShell/FullPageShellBase'
-export * from './AppShell/Menu'
-export * from './AppShell/MenuFab'
-export { default as MenuFab } from './AppShell/MenuFab'
-export * from './AppShell/MenuFabSecondaryItem'
-export { default as Footer } from './AppShell/Footer'
-export { default as MenuFabSecondaryItem } from './AppShell/MenuFabSecondaryItem'
-export { default as SocialIcon } from './AppShell/Footer/SocialIcon'
-export * from './AppShell/PageShellHeader'
-export { default as PlaceholderFab } from './AppShell/PlaceholderFab'
-export { default as PageShellHeader } from './AppShell/PageShellHeader'
-export * from './AppShell/SheetShellBase'
-export { default as SheetShellBase } from './AppShell/SheetShellBase'
-export { default as SheetShellDragIndicator } from './AppShell/SheetShellDragIndicator'
-export { default as SheetShellHeader } from './AppShell/SheetShellHeader'
-export * from './AppShell/ShellBase'
-export { default as ShellBase } from './AppShell/ShellBase'
-export { default as useFabAnimation } from './AppShell/useFabAnimation'
-export { default as useFixedFabAnimation } from './AppShell/useFixedFabAnimation'
 export * from './AspectRatioContainer'
 export { default as AspectRationContainer } from './AspectRatioContainer'
 export * from './Blog/BlogContent'
@@ -45,7 +18,6 @@ export * from './Blog/BlogHeader'
 export { default as BlogHeader } from './Blog/BlogHeader'
 export * from './Blog/BlogTitle'
 export { default as BlogTitle } from './Blog/BlogTitle'
-export * from './Blog/BlogTags'
 export { default as BlogTags } from './Blog/BlogTags'
 export * from './Blog/BlogAuthor'
 export { default as BlogAuthor } from './Blog/BlogAuthor'
@@ -61,8 +33,6 @@ export * from './ChipMenu'
 export { default as ChipMenu } from './ChipMenu'
 export * from './ContainerWithHeader'
 export { default as ContainerWithHeader } from './ContainerWithHeader'
-export * from './Debug/DebugSpacer'
-export { default as DebugSpacer } from './Debug/DebugSpacer'
 export * from './FlagAvatar'
 export { default as FlagAvatar } from './FlagAvatar'
 export * from './Form'
@@ -73,10 +43,6 @@ export { default as FormHeader } from './Form/FormHeader'
 export { default as FormRow } from './Form/FormRow'
 export * from './Form/InputCheckmark'
 export { default as InputCheckmark } from './Form/InputCheckmark'
-export * from './FramerNextPagesSlider/Slide'
-export { default as Slide } from './FramerNextPagesSlider/Slide'
-export * from './FramerNextPagesSlider/Slider'
-export { default as Slider } from './FramerNextPagesSlider/Slider'
 export * from './FramerScroller/components/SidebarGallery'
 export { default as SidebarGallery } from './FramerScroller/components/SidebarGallery'
 export * from './FramerScroller/components/SidebarSlider'
@@ -145,8 +111,9 @@ export * from './Stepper/Stepper'
 export { default as Stepper } from './Stepper/Stepper'
 export { default as StyledBadge } from './StyledBadge'
 export * from './Styles'
-export { default as responsiveVal } from './Styles/responsiveVal'
-export { default as breakpointVal } from './Styles/breakpointVal'
+export * from './Styles/breakpointVal'
+export * from './Styles/responsiveVal'
+export * from './Styles/classesPicker'
 export * from './SvgImage'
 export { default as SvgImage } from './SvgImage'
 export { default as SvgImageSimple } from './SvgImage/SvgImageSimple'
@@ -154,7 +121,6 @@ export * from './TextInputNumber'
 export { default as TextInputNumber } from './TextInputNumber'
 export * from './TimeAgo'
 export { default as TimeAgo } from './TimeAgo'
-export { default as Title } from './Title'
 export { default as ToggleButton } from './ToggleButton'
 export type { ToggleButtonProps } from './ToggleButton'
 export { default as ToggleButtonGroup } from './ToggleButtonGroup'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@graphcommerce/next-ui",
-  "version": "3.19.1",
+  "version": "3.20.0",
   "author": "",
   "license": "MIT",
   "scripts": {
@@ -10,12 +10,11 @@
   },
   "dependencies": {
     "@apollo/client": "^3.4.16",
-    "@graphcommerce/framer-next-pages": "^2.107.5",
-    "@graphcommerce/framer-scroller": "^1.0.4",
-    "@graphcommerce/framer-sheet": "^2.106.2",
-    "@graphcommerce/framer-utils": "^2.103.15",
-    "@graphcommerce/graphql": "^2.105.5",
-    "@graphcommerce/image": "^2.105.4",
+    "@graphcommerce/framer-next-pages": "^2.108.0",
+    "@graphcommerce/framer-scroller": "^1.1.0",
+    "@graphcommerce/framer-utils": "^2.103.16",
+    "@graphcommerce/graphql": "^2.105.6",
+    "@graphcommerce/image": "^2.105.5",
     "@lingui/macro": "^3.12.1",
     "@material-ui/core": "^4.12.3",
     "@material-ui/lab": "^4.0.0-alpha.60",
@@ -34,7 +33,7 @@
   },
   "devDependencies": {
     "@graphcommerce/browserslist-config-pwa": "^3.0.2",
-    "@graphcommerce/eslint-config-pwa": "^3.1.5",
+    "@graphcommerce/eslint-config-pwa": "^3.1.6",
     "@graphcommerce/prettier-config-pwa": "^3.0.4",
     "@graphcommerce/typescript-config-pwa": "^3.1.1",
     "@playwright/test": "^1.16.2",
@@ -53,5 +52,5 @@
       "project": "./tsconfig.json"
     }
   },
-  "gitHead": "a145ddd41ca83136c7a478e791a9e843b2aee15f"
+  "gitHead": "8f156415c7f5a963e363f0d6d18fe5d6bbd5dba2"
 }

package/AppShell/AppShellHeader/appShellHeaderContext.tsx

@@ -1,11 +0,0 @@
-import React from 'react'
-
-export type AppShellHeaderContext = {
-  titleRef: React.RefObject<HTMLDivElement>
-  contentHeaderRef: React.RefObject<HTMLDivElement>
-}
-
-const appShellHeaderContext = React.createContext(undefined as unknown as AppShellHeaderContext)
-appShellHeaderContext.displayName = 'appShellHeaderContext'
-
-export default appShellHeaderContext