@graphcommerce/next-ui 3.12.3 → 3.13.2

package/AppShell/AppShellHeader/index.tsx

@@ -323,12 +323,13 @@ export default function AppShellHeader(props: AppShellHeaderProps) {
         type='button'
         classes={{ root: classes.fab }}
         onClick={() => router.go(closeSteps * -1)}
+        aria-label='Close'
       >
         <SvgImageSimple src={iconClose} />
       </Fab>
     ) : (
       <PageLink href='/' passHref>
-        <Fab size='small' classes={{ root: classes.fab }}>
+        <Fab size='small' classes={{ root: classes.fab }} aria-label='Close'>
           <SvgImageSimple src={iconClose} />
         </Fab>
       </PageLink>
@@ -345,6 +346,7 @@ export default function AppShellHeader(props: AppShellHeaderProps) {
         size='small'
         className={classes.backButton}
         startIcon={backIcon}
+        aria-label='Back'
       >
         {historyOnClick ? up?.title : 'Back'}
       </Button>
@@ -353,7 +355,12 @@ export default function AppShellHeader(props: AppShellHeaderProps) {
   if (!canClickBack && up?.href) {
     back = (
       <PageLink href={up?.href} passHref>
-        <Button variant='pill-link' className={classes.backButton} startIcon={backIcon}>
+        <Button
+          variant='pill-link'
+          className={classes.backButton}
+          startIcon={backIcon}
+          aria-label='Back'
+        >
           {up?.title ?? 'Back'}
         </Button>
       </PageLink>

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} aria-label='Logo'>
+        <Image
+          {...{ ...image }}
+          className={clsx(classes.logo, !alwaysShow && classes.logoHideOnMobile)}
+        />
+      </a>
+    </PageLink>
+  )
+}

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} aria-label='Placeholder'>
+      <></>
+    </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.2](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/next-ui@3.13.1...@graphcommerce/next-ui@3.13.2) (2021-11-03)
+
+
+### Bug Fixes
+
+* various accessibility improvements ([47481a9](https://github.com/ho-nl/m2-pwa/commit/47481a9a882ba87968de6dd797557b0b275d75fb))
+
+
+
+
+
+## [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)
 
 

package/FlagAvatar/index.tsx

@@ -19,7 +19,7 @@ export default function FlagAvatar(props: FlagAvatarProps) {
       {...avatarProps}
       classes={classes}
       imgProps={{ loading: 'lazy' }}
-      alt=''
+      alt={country}
       src={`https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/3.4.3/flags/4x3/${country}.svg`}
     >
       {country.toLocaleUpperCase()}

package/FramerScroller/components/SidebarGallery.tsx

@@ -261,7 +261,12 @@ export default function SidebarGallery(props: SidebarGalleryProps) {
               ))}
             </Scroller>
             <m.div layout className={classes.topRight}>
-              <Fab size='small' className={classes.toggleIcon} onMouseUp={toggle}>
+              <Fab
+                size='small'
+                className={classes.toggleIcon}
+                onMouseUp={toggle}
+                aria-label='Toggle Fullscreen'
+              >
                 {!zoomed ? (
                   <SvgImageSimple src={iconFullscreen} />
                 ) : (

package/Pagination/index.tsx

@@ -66,13 +66,13 @@ export default function Pagination(props: PagePaginationProps) {
   const nextBtnProps = items[items.length - 1]
 
   const chevronLeft = (
-    <Fab size='medium' disabled={page === 1} color='inherit'>
+    <Fab size='medium' disabled={page === 1} color='inherit' aria-label='Previous page'>
       <SvgImageSimple src={iconChevronLeft} />
     </Fab>
   )
 
   const chevronRight = (
-    <Fab size='medium' disabled={page === count} color='inherit'>
+    <Fab size='medium' disabled={page === count} color='inherit' aria-label='Next page'>
       <SvgImageSimple src={iconChevronRight} />
     </Fab>
   )

package/Row/ContentLinks/index.tsx

@@ -33,7 +33,7 @@ export default function ContentLinks(props: ContentLinksProps) {
     <Container className={classes.root} maxWidth={false}>
       <ScrollerProvider scrollSnapAlign='none'>
         <Scroller className={classes.scroller} hideScrollbar>
-          <Typography variant='body1' component='h4' className={classes.title}>
+          <Typography variant='body1' component='h3' className={classes.title}>
             {title}
           </Typography>
           {children}

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/Snackbar/MessageSnackbarImpl.tsx

@@ -177,12 +177,7 @@ export default function MessageSnackbarImpl(props: MessageSnackbarImplProps) {
                   {action}
                 </div>
               )}
-              <Fab
-                className={classes.close}
-                aria-label='Close snackbar'
-                size='small'
-                onClick={hideSnackbar}
-              >
+              <Fab className={classes.close} aria-label='Close' size='small' onClick={hideSnackbar}>
                 <SvgImageSimple src={iconClose} />
               </Fab>
             </>

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.3",
+  "version": "3.13.2",
   "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.2",
     "@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": "8fc77cf7261a01a54e82d2c9bdb2b59c31faeffc"
+  "gitHead": "db0c7ff1a81b75e4e6eeee3717a1fc608d9c3c86"
 }