@graphcommerce/next-ui 3.24.2 → 3.25.2

package/AppShell/DesktopNavActions.tsx

@@ -1,5 +1,6 @@
 import { makeStyles, Theme } from '@material-ui/core'
 import React from 'react'
+import { UseStyles } from '../Styles'
 
 const useStyles = makeStyles(
   (theme: Theme) => ({
@@ -20,8 +21,12 @@ const useStyles = makeStyles(
   { name: 'DesktopNavActions' },
 )
 
-export default function DesktopNavActions(props: { children?: React.ReactNode }) {
+export default function DesktopNavActions(
+  props: {
+    children?: React.ReactNode
+  } & UseStyles<typeof useStyles>,
+) {
   const { children } = props
-  const classes = useStyles()
+  const classes = useStyles(props)
   return <div className={classes.actions}>{children}</div>
 }

package/AppShell/Logo.tsx

@@ -32,7 +32,7 @@ export default function Logo(props: LogoProps) {
   const router = useRouter()
   const classes = useStyles(props)
 
-  return router.asPath === '/' ? (
+  return router.asPath.split('?')[0] === '/' ? (
     <div className={classes.parent}>
       <Image layout='fixed' loading='eager' {...image} className={classes.logo} />
     </div>

package/AppShell/MenuFab.tsx

@@ -22,19 +22,11 @@ import { useFabAnimation } from './useFabAnimation'
 const useStyles = makeStyles(
   (theme: Theme) => ({
     menuWrapper: {
-      position: 'fixed',
-      zIndex: 99,
       left: theme.page.horizontal,
       [theme.breakpoints.down('sm')]: {
-        top: 'unset',
-        left: 20,
-        bottom: 20,
         transform: 'none !important',
         opacity: '1 !important',
       },
-      [theme.breakpoints.up('md')]: {
-        top: `calc(${theme.appShell.headerHeightMd} / 2 - 28px)`,
-      },
     },
     menuFab: {
       boxShadow: 'none',
@@ -140,7 +132,7 @@ export default function MenuFab(props: MenuFabProps) {
             <ListItem
               button
               dense
-              selected={router.asPath === '/'}
+              selected={router.asPath.split('?')[0] === '/'}
               classes={{ root: classes.menuItem }}
             >
               <ListItemText classes={{ primary: classes.menuItemText }}>Home</ListItemText>

package/AppShell/index.ts

@@ -3,7 +3,6 @@ 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'

package/CHANGELOG.md

@@ -3,6 +3,51 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [3.25.2](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/next-ui@3.25.1...@graphcommerce/next-ui@3.25.2) (2022-02-09)
+
+
+### Bug Fixes
+
+* change breakpoints down in footer component ([9ec181c](https://github.com/ho-nl/m2-pwa/commit/9ec181cc44f6b73450645b3b8a3ab57fd1a68d2e))
+
+
+
+
+
+## [3.25.1](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/next-ui@3.25.0...@graphcommerce/next-ui@3.25.1) (2022-02-01)
+
+
+### Bug Fixes
+
+* make DesktopNavActions stylable ([db31369](https://github.com/ho-nl/m2-pwa/commit/db3136931d2ace1bfb6e7fecad0e01758aa2b397))
+
+
+
+
+
+# [3.25.0](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/next-ui@3.24.3...@graphcommerce/next-ui@3.25.0) (2022-01-25)
+
+
+### Features
+
+* add beforeHeader prop ([00501ef](https://github.com/ho-nl/m2-pwa/commit/00501efab97fae2469f783751702db95e4e2c93e))
+* remove fixed fap and position cart with parent sticky ([bfd8adf](https://github.com/ho-nl/m2-pwa/commit/bfd8adf1372f77e6b27f6e0482ec03762d9148e4))
+
+
+
+
+
+## [3.24.3](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/next-ui@3.24.2...@graphcommerce/next-ui@3.24.3) (2022-01-21)
+
+
+### Bug Fixes
+
+* prevent layout from breaking when url has params ([9197bf7](https://github.com/ho-nl/m2-pwa/commit/9197bf72c5c3e422d70741cadbc40b19a1ae4936))
+
+
+
+
+
 ## [3.24.2](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/next-ui@3.24.1...@graphcommerce/next-ui@3.24.2) (2022-01-21)
 
 

package/Footer/Footer.tsx

@@ -15,7 +15,7 @@ const useStyles = makeStyles(
       display: 'grid',
       gap: theme.spacings.xs,
       alignItems: 'center',
-      [theme.breakpoints.down('xs')]: {
+      [theme.breakpoints.down('sm')]: {
         paddingTop: theme.spacings.lg,
         paddingBottom: theme.spacings.lg,
         justifyItems: 'center',
@@ -43,7 +43,7 @@ const useStyles = makeStyles(
       gridArea: 'links',
       ...theme.typography.body2,
       gap: theme.spacings.sm,
-      [theme.breakpoints.down('xs')]: {
+      [theme.breakpoints.down('sm')]: {
         gridAutoFlow: 'row',
         textAlign: 'center',
         gap: 8,
@@ -52,7 +52,7 @@ const useStyles = makeStyles(
     support: {
       gridArea: 'support',
       justifySelf: 'flex-end',
-      [theme.breakpoints.down('xs')]: {
+      [theme.breakpoints.down('sm')]: {
         justifySelf: 'center',
       },
     },
@@ -65,14 +65,14 @@ const useStyles = makeStyles(
       '& > *': {
         minWidth: 'min-content',
       },
-      [theme.breakpoints.down('xs')]: {
+      [theme.breakpoints.down('sm')]: {
         gap: `0 ${theme.spacings.sm}`,
       },
     },
     storeSwitcher: {
       gridArea: 'switcher',
       justifySelf: 'end',
-      [theme.breakpoints.down('xs')]: {
+      [theme.breakpoints.down('sm')]: {
         justifySelf: 'center',
       },
     },

package/Layout/components/LayoutHeader.tsx

@@ -131,7 +131,7 @@ export function LayoutHeader(props: LayoutHeaderProps) {
     divider: !!divider,
   })
 
-  return (
+  return children ? (
     <div {...className('sticky')}>
       <LayoutHeaderContent
         left={left}
@@ -144,5 +144,7 @@ export function LayoutHeader(props: LayoutHeaderProps) {
         {children}
       </LayoutHeaderContent>
     </div>
+  ) : (
+    <></>
   )
 }

package/LayoutDefault/components/LayoutDefault.tsx

@@ -4,7 +4,7 @@ import clsx from 'clsx'
 import { useTransform, useViewportScroll } from 'framer-motion'
 import React from 'react'
 import LayoutProvider from '../../Layout/components/LayoutProvider'
-import { UseStyles } from '../../Styles'
+import { responsiveVal, UseStyles } from '../../Styles'
 
 const useStyles = makeStyles(
   (theme: Theme) => ({
@@ -19,12 +19,31 @@ const useStyles = makeStyles(
       background: theme.palette.background.default,
     },
     hideFabsOnVirtualKeyboardOpen: {
+      display: 'flex',
+      justifyContent: 'space-between',
+      width: '100%',
+      height: 0,
+      zIndex: 2,
+      [theme.breakpoints.up('sm')]: {
+        padding: `0 ${theme.page.horizontal}`,
+        position: 'sticky',
+        marginTop: `calc(${theme.appShell.headerHeightMd} * -1 + calc(${responsiveVal(
+          42,
+          56,
+        )} / 2))`,
+        top: `calc(${theme.appShell.headerHeightMd} / 2 - 28px)`,
+      },
       [theme.breakpoints.down('sm')]: {
+        position: 'fixed',
+        top: 'unset',
+        bottom: `calc(20px + ${responsiveVal(42, 56)})`,
+        padding: `0 20px`,
         '@media (max-height: 530px)': {
           display: 'none',
         },
       },
     },
+
     header: {
       zIndex: theme.zIndex.appBar - 1,
       display: 'flex',
@@ -44,6 +63,7 @@ const useStyles = makeStyles(
         width: '100%',
       },
     },
+
     headerSticky: {
       [theme.breakpoints.down('sm')]: {
         position: 'sticky',
@@ -56,6 +76,7 @@ const useStyles = makeStyles(
 
 export type LayoutDefaultProps = {
   className?: string
+  beforeHeader?: React.ReactNode
   header: React.ReactNode
   footer: React.ReactNode
   menuFab?: React.ReactNode
@@ -65,7 +86,7 @@ export type LayoutDefaultProps = {
 } & UseStyles<typeof useStyles>
 
 export function LayoutDefault(props: LayoutDefaultProps) {
-  const { children, header, footer, menuFab, cartFab, noSticky, className } = props
+  const { children, header, beforeHeader, footer, menuFab, cartFab, noSticky, className } = props
   const classes = useStyles(props)
 
   const offset = useScrollOffset().y
@@ -74,16 +95,15 @@ export function LayoutDefault(props: LayoutDefaultProps) {
   return (
     <div className={clsx(classes.root, className)}>
       <LayoutProvider scroll={scrollWithOffset}>
+        {beforeHeader}
         <header className={clsx(classes.header, !noSticky && classes.headerSticky)}>
           {header}
         </header>
-        <div>
-          <div className={classes.hideFabsOnVirtualKeyboardOpen}>
-            {menuFab}
-            {cartFab}
-          </div>
-          {children}
+        <div className={classes.hideFabsOnVirtualKeyboardOpen}>
+          {menuFab}
+          {cartFab}
         </div>
+        <div>{children}</div>
         <div>{footer}</div>
       </LayoutProvider>
     </div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@graphcommerce/next-ui",
-  "version": "3.24.2",
+  "version": "3.25.2",
   "author": "",
   "license": "MIT",
   "scripts": {
@@ -11,7 +11,7 @@
   "dependencies": {
     "@apollo/client": "^3.5.6",
     "@graphcommerce/framer-next-pages": "^2.109.2",
-    "@graphcommerce/framer-scroller": "^1.2.7",
+    "@graphcommerce/framer-scroller": "^1.2.11",
     "@graphcommerce/framer-utils": "^2.103.21",
     "@graphcommerce/graphql": "^2.105.13",
     "@graphcommerce/image": "^2.105.13",
@@ -51,5 +51,5 @@
       "project": "./tsconfig.json"
     }
   },
-  "gitHead": "75d3f01a066d04aa82515011971619e48048bfd4"
+  "gitHead": "110ddb032ee3ce6e363b9f5f7d21af71fb51b527"
 }

package/AppShell/FixedFab.tsx

@@ -1,34 +0,0 @@
-import { makeStyles, Theme } from '@material-ui/core'
-import { m } from 'framer-motion'
-import { UseStyles } from '../Styles'
-
-const useStyles = makeStyles(
-  (theme: Theme) => ({
-    root: {
-      position: 'fixed',
-      bottom: 20,
-      right: 20,
-      zIndex: 100,
-      borderRadius: 99,
-      maxWidth: 56,
-      [theme.breakpoints.up('md')]: {
-        pointerEvents: 'all',
-        top: `calc(${theme.appShell.headerHeightMd} / 2 - 28px)`,
-        left: `calc((100vw - (100vw - 100%)) - ${theme.page.horizontal} - 56px)`,
-        bottom: 'unset',
-      },
-    },
-  }),
-  { name: 'FixedFab' },
-)
-
-type FixedFabProps = {
-  children: React.ReactNode
-} & UseStyles<typeof useStyles>
-
-export default function FixedFab(props: FixedFabProps) {
-  const { children } = props
-  const classes = useStyles(props)
-
-  return <m.div className={classes.root}>{children}</m.div>
-}