@graphcommerce/next-ui 3.18.1 → 3.20.0

package/CHANGELOG.md

@@ -3,6 +3,79 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [3.20.0](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/next-ui@3.19.1...@graphcommerce/next-ui@3.20.0) (2021-12-03)
+
+
+### Bug Fixes
+
+* classesPicker would sometimes return 'undefined' as a class ([baa51f1](https://github.com/ho-nl/m2-pwa/commit/baa51f1ac6d47460bfc713bd2c10ae14f1f6ecbf))
+* close button should always be present ([32d4173](https://github.com/ho-nl/m2-pwa/commit/32d4173e44c6e77815cf483590c1f703d48a386b))
+* horizontal scroll on page ([d025a16](https://github.com/ho-nl/m2-pwa/commit/d025a16a02b43756fc58b0b764faa404eb06da6c))
+* make sure elements that use scroll positioning are using the right hook ([80ee33f](https://github.com/ho-nl/m2-pwa/commit/80ee33f68ecc223147d63fc37e5b9ba94df4564e))
+* make sure galleries are scrollable properly ([8653316](https://github.com/ho-nl/m2-pwa/commit/86533167891f0ae197fdf096b84fdda8e89a0f6e))
+* make sure it doesn't error when trying to override root ([99a69a3](https://github.com/ho-nl/m2-pwa/commit/99a69a36579b4c934f3b1be187130983bdf133bf))
+* make sure that pill link buttons get the right background color etc. ([c142b31](https://github.com/ho-nl/m2-pwa/commit/c142b31552417d2296341785994e2f7b35462793))
+* make sure the overlay becomes visible, even if the overlay is scrolled ([1738c98](https://github.com/ho-nl/m2-pwa/commit/1738c982ea84ec2b93daa824c4b8c86ab2a3f5ed))
+* make the headerHeight properly configurable ([c39c942](https://github.com/ho-nl/m2-pwa/commit/c39c942a62a9bb9687ea553be28e37fb49a6b065))
+* minHeight of page on iOS is sometimes less high than expected ([8a0bc23](https://github.com/ho-nl/m2-pwa/commit/8a0bc234d153d974ac415369483ddabfb5e7fb0c))
+* missing CssBaseline ([d2a7126](https://github.com/ho-nl/m2-pwa/commit/d2a7126295b99b0446dc31b0cf7c60671a18f976))
+* only apply page meta when the current page is active ([f099a51](https://github.com/ho-nl/m2-pwa/commit/f099a519d169dcc9e2653db8353ce93d7b0a138e))
+* spacing of LayoutTItle ([7afcd31](https://github.com/ho-nl/m2-pwa/commit/7afcd3163d16e902cf2ff7917f56ee6a8798f55b))
+
+
+### Features
+
+* **framer-scroller-sheet:** created package replacing the framer-sheet package ([f9f2e91](https://github.com/ho-nl/m2-pwa/commit/f9f2e9101191f5cb5c4514ceb9534ddeb2476763))
+* **framer-scroller:** split the grid functionality from the scroller ([81307ea](https://github.com/ho-nl/m2-pwa/commit/81307ea2652bf31a1f94e8db72af4ee161bdca2e))
+* refactor page shell ([594bdb3](https://github.com/ho-nl/m2-pwa/commit/594bdb32927b797208b2a295bc0db9f9ceb94676))
+
+
+
+
+
+# [3.19.0](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/next-ui@3.18.2...@graphcommerce/next-ui@3.19.0) (2021-12-01)
+
+
+### Bug Fixes
+
+* borderRadius ([0999901](https://github.com/ho-nl/m2-pwa/commit/0999901f6a3265f40fef18e72702d80158d8c4a9))
+* borderRadius ([b9cffcc](https://github.com/ho-nl/m2-pwa/commit/b9cffccf444cb2ff8d6257ef3a64c0ea18e30477))
+* borderRadius toggleButton ([4a97800](https://github.com/ho-nl/m2-pwa/commit/4a97800150bbfe03692a66d7fbde5705a32b9cd7))
+* build ([ba97378](https://github.com/ho-nl/m2-pwa/commit/ba97378d40d70b3f47c4c252600c669a53568c27))
+* build ([b6cb704](https://github.com/ho-nl/m2-pwa/commit/b6cb7048c1208648687621000ab0d6789032d480))
+* finetune svg stroke width ([d788d72](https://github.com/ho-nl/m2-pwa/commit/d788d72c88d5b924a14e9fdde1a52f62be7c274c))
+* flicker on menu icon ([04d9633](https://github.com/ho-nl/m2-pwa/commit/04d96331cfdd4678a56a4eb9170141800c03a6a1))
+* hero text spacing ([79dd6aa](https://github.com/ho-nl/m2-pwa/commit/79dd6aa2fe576104ebbbdd092f6b415d319dec48))
+* icon OrderBefore ([25a2390](https://github.com/ho-nl/m2-pwa/commit/25a2390321c7047c5191a15a9352020b8161ff7a))
+* icons ([c561e20](https://github.com/ho-nl/m2-pwa/commit/c561e20a247fef5ea33ac10dbecf55d1e5500dec))
+* prevent scaling of video on mobile ([168b5b9](https://github.com/ho-nl/m2-pwa/commit/168b5b9451dbe373703ebc76c44516d1c0eb316f))
+* Tap targets are not sized appropriately ([b3b3339](https://github.com/ho-nl/m2-pwa/commit/b3b33398c26cfe775f2e9fc4dacd8eaad2e02725))
+
+
+### Features
+
+* borderRadius based on theme.shape.borderRadius ([7c34937](https://github.com/ho-nl/m2-pwa/commit/7c349376cd41a131c628324c299106fdb7e60484))
+* breakpointVal ([0294503](https://github.com/ho-nl/m2-pwa/commit/029450343051cf6995babad9f9b42c7e6ad1094e))
+* closeable menu ([5f94bb5](https://github.com/ho-nl/m2-pwa/commit/5f94bb5644ce1058ec705a8acced71ba2ba95e04))
+* icon for 404 ([ff32915](https://github.com/ho-nl/m2-pwa/commit/ff3291578719cb7105d1045d68a78952b27da7fe))
+* introduce borderRadius ([183afbc](https://github.com/ho-nl/m2-pwa/commit/183afbc8ee269f6694c372b06afdf41302f86c09))
+* responsiveTyp ([6108b61](https://github.com/ho-nl/m2-pwa/commit/6108b6148e76ddbbe2db1614f10aaf88423db5ca))
+
+
+
+
+
+## [3.18.2](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/next-ui@3.18.1...@graphcommerce/next-ui@3.18.2) (2021-11-27)
+
+
+### Bug Fixes
+
+* shadow snackbar with elevation ([8d7d011](https://github.com/ho-nl/m2-pwa/commit/8d7d0119357325f5c838def4ae8dc4ae19a43a6f))
+
+
+
+
+
 ## [3.18.1](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/next-ui@3.18.0...@graphcommerce/next-ui@3.18.1) (2021-11-22)
 
 

package/ChipMenu/index.tsx

@@ -1,8 +1,8 @@
-import { Chip, ChipProps, lighten, makeStyles, Menu, Theme } from '@material-ui/core'
+import { Chip, ChipProps, makeStyles, Menu, Theme } from '@material-ui/core'
 import clsx from 'clsx'
 import React, { PropsWithChildren, useState } from 'react'
 import SectionHeader from '../SectionHeader'
-import responsiveVal from '../Styles/responsiveVal'
+import { responsiveVal } from '../Styles/responsiveVal'
 import SvgImageSimple from '../SvgImage/SvgImageSimple'
 import { iconChevronDown, iconChevronUp, iconCancelAlt } from '../icons'
 

package/FlagAvatar/index.tsx

@@ -1,10 +1,10 @@
-import { makeStyles, Theme, Avatar, AvatarProps } from '@material-ui/core'
+import { makeStyles, Avatar, AvatarProps } from '@material-ui/core'
 import React from 'react'
 
 const useStyles = makeStyles(
-  (theme: Theme) => ({
+  {
     root: {},
-  }),
+  },
   { name: 'FlagAvatar' },
 )
 

package/{AppShell/Footer/index.tsx → Footer/Footer.tsx}

@@ -1,6 +1,6 @@
 import { ContainerProps, Theme, makeStyles, Container } from '@material-ui/core'
 import React from 'react'
-import { UseStyles } from '../../Styles'
+import { UseStyles } from '../Styles'
 
 const useStyles = makeStyles(
   (theme: Theme) => ({
@@ -46,7 +46,7 @@ const useStyles = makeStyles(
       [theme.breakpoints.down('xs')]: {
         gridAutoFlow: 'row',
         textAlign: 'center',
-        gap: 4,
+        gap: 8,
       },
     },
     support: {
@@ -80,14 +80,14 @@ const useStyles = makeStyles(
   { name: 'Footer' },
 )
 
-type FooterProps = UseStyles<typeof useStyles> & {
+export type FooterProps = UseStyles<typeof useStyles> & {
   storeSwitcher?: React.ReactNode
   socialLinks?: React.ReactElement
   customerService?: React.ReactNode
   copyright?: React.ReactElement
 } & Omit<ContainerProps, 'children'>
 
-export default function Footer(props: FooterProps) {
+export function Footer(props: FooterProps) {
   const { socialLinks, storeSwitcher, customerService, copyright, ...containerProps } = props
   const classes = useStyles(props)
 

package/{AppShell/Footer → Footer}/SocialIcon.tsx

@@ -1,7 +1,7 @@
 import { makeStyles, Theme } from '@material-ui/core'
 import React from 'react'
-import { UseStyles } from '../../Styles'
-import SvgImage, { SvgImageProps } from '../../SvgImage'
+import { UseStyles } from '../Styles'
+import SvgImage, { SvgImageProps } from '../SvgImage'
 
 const useStyles = makeStyles(
   (theme: Theme) => ({
@@ -16,7 +16,7 @@ const useStyles = makeStyles(
 
 type SocialIconProps = UseStyles<typeof useStyles> & SvgImageProps
 
-export default function SocialIcon(props: SocialIconProps) {
+export function SocialIcon(props: SocialIconProps) {
   const classes = useStyles(props)
 
   return <SvgImage {...props} className={classes.root} />

package/Footer/index.ts

@@ -0,0 +1,2 @@
+export * from './Footer'
+export * from './SocialIcon'

package/Form/InputCheckmark.tsx

@@ -1,4 +1,4 @@
-import { makeStyles, Theme } from '@material-ui/core'
+import { makeStyles } from '@material-ui/core'
 import clsx from 'clsx'
 import React, { PropsWithChildren } from 'react'
 import SvgImageSimple from '../SvgImage/SvgImageSimple'
@@ -6,14 +6,14 @@ import { iconCheckmark } from '../icons'
 
 export type InputCheckmarkProps = PropsWithChildren<{ show?: boolean; select?: boolean }>
 const useStyles = makeStyles(
-  (theme: Theme) => ({
+  {
     iconCheckmark: {
       stroke: '#01D26A',
     },
     select: {
       marginRight: 15,
     },
-  }),
+  },
   { name: 'InputCheckmark' },
 )
 

package/Form/index.tsx

@@ -1,7 +1,8 @@
-import { darken, makeStyles, Theme } from '@material-ui/core'
+import { darken, lighten, makeStyles, Theme } from '@material-ui/core'
 import clsx from 'clsx'
 import React from 'react'
 import { UseStyles } from '../Styles'
+import { responsiveVal } from '../Styles/responsiveVal'
 
 const useStyles = makeStyles(
   (theme: Theme) => ({
@@ -14,12 +15,16 @@ const useStyles = makeStyles(
       background: theme.palette.secondary.light,
     },
     default: {
-      background: darken(theme.palette.background.paper, 0.02),
+      background:
+        theme.palette.type === 'light'
+          ? darken(theme.palette.background.default, 0.03)
+          : lighten(theme.palette.background.default, 0.2),
     },
     contained: {
       padding: theme.spacings.sm,
+      // paddingTop: theme.spacings.md,
       overflow: 'hidden',
-      borderRadius: 6,
+      borderRadius: responsiveVal(theme.shape.borderRadius * 3, theme.shape.borderRadius * 4),
     },
   }),
   { name: 'Form' },

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
 
@@ -108,7 +109,7 @@ const useStyles = makeStyles(
     sidebar: {
       boxSizing: 'border-box',
       width: '100%',
-      padding: `${theme.spacings.md} ${theme.page.horizontal}`,
+      padding: `${theme.spacings.lg} ${theme.page.horizontal}`,
       [theme.breakpoints.up('md')]: {
         paddingLeft: theme.spacings.lg,
       },
@@ -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>
+  )
+}