@graphcommerce/next-ui 3.12.2 → 3.13.1

package/AppShell/Footer/SocialIcon.tsx

@@ -0,0 +1,23 @@
+import { makeStyles, Theme } from '@material-ui/core'
+import React from 'react'
+import { UseStyles } from '../../Styles'
+import SvgImage, { SvgImageProps } from '../../SvgImage'
+
+const useStyles = makeStyles(
+  (theme: Theme) => ({
+    root: {
+      filter: theme.palette.type === 'light' ? undefined : 'brightness(1) invert(1)',
+    },
+  }),
+  {
+    name: 'SocialIcon',
+  },
+)
+
+type SocialIconProps = UseStyles<typeof useStyles> & SvgImageProps
+
+export default function SocialIcon(props: SocialIconProps) {
+  const classes = useStyles(props)
+
+  return <SvgImage {...props} className={classes.root} />
+}

package/AppShell/Footer/index.tsx

@@ -0,0 +1,119 @@
+import { ContainerProps, Theme, makeStyles, Container } from '@material-ui/core'
+import clsx from 'clsx'
+import React from 'react'
+import { UseStyles } from '../../Styles'
+
+const useStyles = makeStyles(
+  (theme: Theme) => ({
+    footer: {
+      gridTemplateColumns: '2.5fr 1.5fr',
+      gridTemplateAreas: `
+        'social switcher'
+        'links support'
+      `,
+      borderTop: `1px solid ${theme.palette.divider}`,
+      padding: `${theme.page.vertical} ${theme.page.horizontal} ${theme.page.vertical}`,
+      display: 'grid',
+      gap: theme.spacings.xs,
+      alignItems: 'center',
+      [theme.breakpoints.down('xs')]: {
+        paddingTop: theme.spacings.lg,
+        justifyItems: 'center',
+        gridTemplateAreas: `
+          'switcher switcher'
+          'support support'
+          'social social'
+          'links links'
+        `,
+        gap: theme.spacings.md,
+        '& > *': {
+          maxWidth: 'max-content',
+        },
+      },
+      [theme.breakpoints.up('md')]: {
+        gridTemplateColumns: 'auto auto',
+        gridTemplateRows: 'auto',
+        justifyContent: 'space-between',
+      },
+    },
+    disableMargin: {
+      [theme.breakpoints.down('xs')]: {
+        marginBottom: 0,
+      },
+    },
+    copyright: {
+      display: 'grid',
+      gridAutoFlow: 'column',
+      alignContent: 'center',
+      gridArea: 'links',
+      ...theme.typography.body2,
+      gap: theme.spacings.sm,
+      [theme.breakpoints.down('xs')]: {
+        gridAutoFlow: 'row',
+        textAlign: 'center',
+        gap: 0,
+      },
+    },
+    support: {
+      gridArea: 'support',
+      justifySelf: 'flex-end',
+      [theme.breakpoints.down('xs')]: {
+        justifySelf: 'center',
+      },
+    },
+    social: {
+      display: 'grid',
+      justifyContent: 'start',
+      gridAutoFlow: 'column',
+      gridArea: 'social',
+      gap: `0 ${theme.spacings.xs}`,
+      '& > *': {
+        minWidth: 'min-content',
+      },
+      [theme.breakpoints.down('xs')]: {
+        gap: `0 ${theme.spacings.sm}`,
+      },
+    },
+    storeSwitcher: {
+      gridArea: 'switcher',
+      justifySelf: 'end',
+      [theme.breakpoints.down('xs')]: {
+        justifySelf: 'center',
+      },
+    },
+  }),
+  { name: 'Footer' },
+)
+
+type FooterProps = UseStyles<typeof useStyles> & {
+  disableMargin?: boolean
+  storeSwitcher?: React.ReactNode
+  socialLinks?: React.ReactElement
+  customerService?: React.ReactNode
+  copyright?: React.ReactElement
+} & Omit<ContainerProps, 'children'>
+
+export default function Footer(props: FooterProps) {
+  const {
+    disableMargin,
+    socialLinks,
+    storeSwitcher,
+    customerService,
+    copyright,
+    ...containerProps
+  } = props
+  const classes = useStyles(props)
+
+  return (
+    <Container
+      maxWidth={false}
+      className={clsx(classes.footer, disableMargin && classes.disableMargin)}
+      {...containerProps}
+    >
+      <div className={classes.social}>{socialLinks}</div>
+      <div className={classes.storeSwitcher}>{storeSwitcher}</div>
+      <div className={classes.support}>{customerService}</div>
+      <div className={classes.copyright}>{copyright}</div>
+    </Container>
+  )
+}

package/AppShell/FullPageShellBase.tsx

@@ -1,5 +1,5 @@
 import { makeStyles, Theme } from '@material-ui/core'
-import { m } from 'framer-motion'
+import clsx from 'clsx'
 import React from 'react'
 import { UseStyles } from '../Styles'
 import AppShellProvider from './AppShellProvider'
@@ -14,6 +14,13 @@ const useStyles = makeStyles(
       gridTemplateRows: `auto 1fr auto`,
       gridTemplateColumns: '100%',
     },
+    hideFabsOnVirtualKeyboardOpen: {
+      [theme.breakpoints.down('sm')]: {
+        '@media (max-height: 530px)': {
+          display: 'none',
+        },
+      },
+    },
     header: {
       display: 'flex',
       alignItems: 'center',
@@ -29,6 +36,12 @@ const useStyles = makeStyles(
         height: theme.page.headerInnerHeight.md,
       },
     },
+    headerAlwaysShow: {
+      [theme.breakpoints.down('sm')]: {
+        marginTop: 20,
+        marginBottom: 22,
+      },
+    },
   }),
   { name: 'FullPageShellBase' },
 )
@@ -36,20 +49,31 @@ const useStyles = makeStyles(
 export type FullPageShellBaseProps = {
   header: React.ReactNode
   footer: React.ReactNode
+  menuFab?: React.ReactNode
+  cartFab?: React.ReactNode
   children?: React.ReactNode
+  alwaysShowHeader?: boolean
 } & UseStyles<typeof useStyles> &
   PageLayoutBaseProps
 
 export default function FullPageShellBase(props: FullPageShellBaseProps) {
-  const { children, header, footer, name } = props
+  const { children, header, footer, menuFab, cartFab, name, alwaysShowHeader } = props
   const classes = useStyles(props)
 
   return (
     <div className={classes.root}>
       <AppShellProvider>
         <ShellBase name={name}>
-          <header className={classes.header}>{header}</header>
-          <div>{children}</div>
+          <header className={clsx(classes.header, alwaysShowHeader && classes.headerAlwaysShow)}>
+            {header}
+          </header>
+          <div>
+            <div className={classes.hideFabsOnVirtualKeyboardOpen}>
+              {menuFab}
+              {cartFab}
+            </div>
+            {children}
+          </div>
           <div>{footer}</div>
         </ShellBase>
       </AppShellProvider>

package/AppShell/Logo.tsx

@@ -0,0 +1,55 @@
+import { Image, ImageProps } from '@graphcommerce/image'
+import { makeStyles, Theme, useTheme } from '@material-ui/core'
+import clsx from 'clsx'
+import PageLink from 'next/link'
+import React from 'react'
+import { UseStyles } from '../Styles'
+
+const useStyles = makeStyles(
+  (theme: Theme) => ({
+    logo: {},
+    link: {
+      height: '100%',
+      width: 'max-content',
+      display: 'flex',
+      alignItems: 'center',
+      margin: '0 auto',
+      justifyContent: 'center',
+      [theme.breakpoints.up('md')]: {
+        display: 'flex',
+        margin: 'unset',
+        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 default function Logo(props: LogoProps) {
+  const { href, alwaysShow, image } = props
+  const classes = useStyles(props)
+  const theme = useTheme()
+
+  return (
+    <PageLink href={href ?? '/'} passHref>
+      <a className={classes.link}>
+        <Image
+          {...{ ...image }}
+          className={clsx(classes.logo, !alwaysShow && classes.logoHideOnMobile)}
+        />
+      </a>
+    </PageLink>
+  )
+}

package/AppShell/MenuFab.tsx

@@ -67,10 +67,14 @@ const useStyles = makeStyles(
 )
 
 export type MenuFabProps = MenuProps &
-  UseStyles<typeof useStyles> & { children?: React.ReactNode; search?: React.ReactNode }
+  UseStyles<typeof useStyles> & {
+    children?: React.ReactNode
+    search?: React.ReactNode
+    menuIcon?: React.ReactNode
+  }
 
 export default function MenuFab(props: MenuFabProps) {
-  const { menu, children, search } = props
+  const { menu, children, search, menuIcon } = props
   const classes = useStyles(props)
   const router = useRouter()
   const [openEl, setOpenEl] = React.useState<null | HTMLElement>(null)
@@ -88,7 +92,7 @@ export default function MenuFab(props: MenuFabProps) {
         onClick={(event) => setOpenEl(event.currentTarget)}
         className={classes.menuFab}
       >
-        <SvgImageSimple src={iconMenu} inverted />
+        {menuIcon ?? <SvgImageSimple src={iconMenu} inverted />}
       </Fab>
 
       <Menu

package/AppShell/PlaceholderFab/index.tsx

@@ -0,0 +1,27 @@
+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}>
+      <></>
+    </Fab>
+  )
+}

package/CHANGELOG.md

@@ -3,6 +3,45 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [3.13.1](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/next-ui@3.13.0...@graphcommerce/next-ui@3.13.1) (2021-11-03)
+
+
+### Bug Fixes
+
+* logo shouldnt invert, because it depends on the logo if it can be inverted. ([8426b09](https://github.com/ho-nl/m2-pwa/commit/8426b09688c7c77f45f912c56684ad1f378fc263))
+
+
+
+
+
+# [3.13.0](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/next-ui@3.12.4...@graphcommerce/next-ui@3.13.0) (2021-11-03)
+
+
+### Bug Fixes
+
+* **full-page-shell:** show logo on mobile ([abe2af7](https://github.com/ho-nl/m2-pwa/commit/abe2af7001ce9a31ba67a9fa326c50a07fe86135))
+* **logo:** correct props propagation ([968025b](https://github.com/ho-nl/m2-pwa/commit/968025bc0bed4843cce7d11c0ef2740edb2ea02b))
+
+
+### Features
+
+* **next-ui:** introducing footer component ([a98129b](https://github.com/ho-nl/m2-pwa/commit/a98129b935b9fd45e985f958a60a4ad6b21c880c))
+
+
+
+
+
+## [3.12.3](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/next-ui@3.12.2...@graphcommerce/next-ui@3.12.3) (2021-11-02)
+
+
+### Bug Fixes
+
+* **MenuFab:** make icon customizable ([375bafd](https://github.com/ho-nl/m2-pwa/commit/375bafd901b3c53405e02d681ea0dca3af190e35))
+
+
+
+
+
 ## [3.12.2](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/next-ui@3.12.1...@graphcommerce/next-ui@3.12.2) (2021-11-02)
 
 

package/Row/{RowImageText → ImageText}/index.tsx

@@ -51,15 +51,15 @@ const useStyles = makeStyles(
       color: theme.palette.text.primary,
     },
   }),
-  { name: 'RowImageText' },
+  { name: 'ImageText' },
 )
 
-export type RowImageTextProps = UseStyles<typeof useStyles> & {
+export type ImageTextProps = UseStyles<typeof useStyles> & {
   item?: React.ReactNode
   children: React.ReactNode
 }
 
-export default function RowImageText(props: RowImageTextProps) {
+export default function ImageText(props: ImageTextProps) {
   const { item, children } = props
   const classes = useStyles(props)
 

package/Row/{RowImageTextBoxed → ImageTextBoxed}/index.tsx

@@ -1,4 +1,4 @@
-import { Container, makeStyles, Theme } from '@material-ui/core'
+import { makeStyles, Theme } from '@material-ui/core'
 import React from 'react'
 import Row from '..'
 import { UseStyles } from '../../Styles'
@@ -52,15 +52,15 @@ const useStyles = makeStyles(
       color: theme.palette.text.primary,
     },
   }),
-  { name: 'RowImageTextBoxed' },
+  { name: 'ImageTextBoxed' },
 )
 
-export type RowImageTextBoxedProps = UseStyles<typeof useStyles> & {
+export type ImageTextBoxedProps = UseStyles<typeof useStyles> & {
   children: React.ReactNode
   item?: React.ReactNode
 }
 
-export default function RowImageTextBoxed(props: RowImageTextBoxedProps) {
+export default function ImageTextBoxed(props: ImageTextBoxedProps) {
   const { children, item } = props
   const classes = useStyles(props)
 

package/index.ts

@@ -16,13 +16,18 @@ 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'
@@ -119,10 +124,10 @@ export * from './Row/ParagraphWithSidebarSlide'
 export { default as ParagraphWithSidebarSlide } from './Row/ParagraphWithSidebarSlide'
 export * from './Row/Quote'
 export { default as Quote } from './Row/Quote'
-export * from './Row/RowImageText'
-export { default as RowImageText } from './Row/RowImageText'
-export * from './Row/RowImageTextBoxed'
-export { default as RowImageTextBoxed } from './Row/RowImageTextBoxed'
+export * from './Row/ImageText'
+export { default as ImageText } from './Row/ImageText'
+export * from './Row/ImageTextBoxed'
+export { default as ImageTextBoxed } from './Row/ImageTextBoxed'
 export * from './Row/SpecialBanner'
 export { default as SpecialBanner } from './Row/SpecialBanner'
 export * from './SectionContainer'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@graphcommerce/next-ui",
-  "version": "3.12.2",
+  "version": "3.13.1",
   "author": "",
   "license": "MIT",
   "scripts": {
@@ -11,10 +11,10 @@
   "dependencies": {
     "@apollo/client": "^3.4.16",
     "@graphcommerce/framer-next-pages": "^2.107.3",
-    "@graphcommerce/framer-scroller": "^0.4.3",
+    "@graphcommerce/framer-scroller": "^1.0.1",
     "@graphcommerce/framer-sheet": "^2.105.15",
     "@graphcommerce/framer-utils": "^2.103.13",
-    "@graphcommerce/graphql": "^2.105.2",
+    "@graphcommerce/graphql": "^2.105.3",
     "@graphcommerce/image": "^2.105.2",
     "@graphql-typed-document-node/core": "^3.1.0",
     "@material-ui/core": "^4.12.3",
@@ -53,5 +53,5 @@
       "project": "./tsconfig.json"
     }
   },
-  "gitHead": "afae9da3ec938f2c088c254bcde22e1db2636ace"
+  "gitHead": "c9eac9065491268d26c187d9fe864f7e9232c0fb"
 }