@graphcommerce/next-ui 3.24.3 → 3.25.0

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',

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,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [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)
 
 

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.3",
+  "version": "3.25.0",
   "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.8",
+    "@graphcommerce/framer-scroller": "^1.2.9",
     "@graphcommerce/framer-utils": "^2.103.21",
     "@graphcommerce/graphql": "^2.105.13",
     "@graphcommerce/image": "^2.105.13",
@@ -51,5 +51,5 @@
       "project": "./tsconfig.json"
     }
   },
-  "gitHead": "058c76b8990aae1a2a018a5b659dc7dda0651af8"
+  "gitHead": "64e5665f27e32fde21e5bc3a6d1b322e065d7718"
 }

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>
-}