@graphcommerce/next-ui 3.13.0 → 3.14.1

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/Logo.tsx

@@ -8,9 +8,6 @@ import { UseStyles } from '../Styles'
 const useStyles = makeStyles(
   (theme: Theme) => ({
     logo: {},
-    dark: {
-      filter: 'invert(100%)',
-    },
     link: {
       height: '100%',
       width: 'max-content',
@@ -47,14 +44,10 @@ export default function Logo(props: LogoProps) {
 
   return (
     <PageLink href={href ?? '/'} passHref>
-      <a className={classes.link}>
+      <a className={classes.link} aria-label='Logo'>
         <Image
           {...{ ...image }}
-          className={clsx(
-            classes.logo,
-            theme.palette.type === 'dark' && classes.dark,
-            !alwaysShow && classes.logoHideOnMobile,
-          )}
+          className={clsx(classes.logo, !alwaysShow && classes.logoHideOnMobile)}
         />
       </a>
     </PageLink>

package/AppShell/MenuFab.tsx

@@ -11,7 +11,7 @@ import {
 import { m } from 'framer-motion'
 import PageLink from 'next/link'
 import { Router, useRouter } from 'next/router'
-import React from 'react'
+import React, { useEffect } from 'react'
 import { UseStyles } from '../Styles'
 import responsiveVal from '../Styles/responsiveVal'
 import SvgImageSimple from '../SvgImage/SvgImageSimple'
@@ -56,10 +56,6 @@ const useStyles = makeStyles(
       ...theme.typography.h3,
       fontWeight: 550,
       lineHeight: 1,
-      // fontSize: '1.6em',
-      // fontWeight: 550,
-      // letterSpacing: '-0.0375em',
-      // lineHeight: 1,
     },
     menuItem: {},
   }),
@@ -81,7 +77,11 @@ export default function MenuFab(props: MenuFabProps) {
 
   const { filter, opacity, scale } = useFabAnimation()
 
-  Router.events.on('routeChangeStart', () => setOpenEl(null))
+  useEffect(() => {
+    const clear = () => setOpenEl(null)
+    router.events.on('routeChangeStart', clear)
+    return () => router.events.off('routeChangeStart', clear)
+  }, [router])
 
   return (
     <m.div className={classes.menuWrapper} style={{ opacity, scale, filter }}>

package/AppShell/PlaceholderFab/index.tsx

@@ -20,7 +20,7 @@ export default function PlaceholderFab(props: PlaceholderFabProps) {
   const classes = useStyles(props)
 
   return (
-    <Fab className={classes.placeholderCartFab} size='large' {...fabProps}>
+    <Fab className={classes.placeholderCartFab} size='large' {...fabProps} aria-label='Placeholder'>
       <></>
     </Fab>
   )

package/AppShell/SheetShellBase/index.tsx

@@ -60,7 +60,7 @@ function SheetShellBase(props: SheetShellBaseProps) {
   const sheetClasses = useSheetStyles(props)
   const router = useRouter()
   const pageRouter = usePageRouter()
-  const { depth, closeSteps, active } = usePageContext()
+  const { depth, closeSteps, active, direction } = usePageContext()
   const open = depth < 0 || router.asPath === pageRouter.asPath
   const initialLocale = useRef(router.locale)
 
@@ -95,7 +95,7 @@ function SheetShellBase(props: SheetShellBaseProps) {
         <Sheet open={open} onSnap={handleSnap} variant={variant} size={size}>
           <SheetBackdrop onTap={handleClose} classes={sheetClasses} />
           <SheetContainer classes={sheetContainerClasses}>
-            <SheetPanel classes={sheetClasses}>
+            <SheetPanel initial={direction === -1 ? 'snapPoint1' : 'closed'} classes={sheetClasses}>
               {/* <FocusLock returnFocus={{ preventScroll: true }} disabled={!isActive}> */}
               {children}
               {/* </FocusLock> */}

package/CHANGELOG.md

@@ -3,6 +3,57 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [3.14.1](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/next-ui@3.14.0...@graphcommerce/next-ui@3.14.1) (2021-11-04)
+
+
+### Bug Fixes
+
+* can't remove filters on click icon ([2528802](https://github.com/ho-nl/m2-pwa/commit/252880216994da7f8e65c1b565ff996bbab0472a))
+* Checkout button margin consistency ([9fcf7e7](https://github.com/ho-nl/m2-pwa/commit/9fcf7e7d96172448b2d2911771d6bf70ab976594))
+* remove hardcoded fontSize ([e4e09e1](https://github.com/ho-nl/m2-pwa/commit/e4e09e11baeb8edeff634550b8cdb88571d96911))
+
+
+
+
+
+# [3.14.0](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/next-ui@3.13.2...@graphcommerce/next-ui@3.14.0) (2021-11-04)
+
+
+### Bug Fixes
+
+* **menu-fab:** fix route change start event handling ([20dde65](https://github.com/ho-nl/m2-pwa/commit/20dde65f8e8ead449b21f4f5292d653d003e6ead))
+
+
+### Features
+
+* **sheet-shell-base:** stop animating drawer on browser back ([c6262f1](https://github.com/ho-nl/m2-pwa/commit/c6262f1c3a0d181e57bd5d4971efb469901503b1))
+
+
+
+
+
+## [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)
 
 

package/ChipMenu/index.tsx

@@ -67,7 +67,9 @@ export default function ChipMenu(props: ChipMenuProps) {
   const classes = useChipMenuStyles(props)
 
   let deleteIcon = selected ? (
-    <SvgImageSimple src={iconCancelAlt} className={classes.iconCancel} />
+    <div>
+      <SvgImageSimple src={iconCancelAlt} className={classes.iconCancel} />
+    </div>
   ) : (
     <SvgImageSimple src={iconChevronDown} />
   )

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/Form/FormActions.tsx

@@ -2,8 +2,8 @@ import { styled } from '@material-ui/core'
 
 const FormActions = styled('div')(
   ({ theme }) => ({
-    paddingTop: theme.spacings.xxs,
-    paddingBottom: theme.spacings.md,
+    paddingTop: theme.spacings.md,
+    paddingBottom: theme.spacings.lg,
     justifyContent: 'center',
     display: 'grid',
     gridAutoFlow: 'column',

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/IconHeader/index.tsx

@@ -10,8 +10,8 @@ import SvgImage, { SvgImageProps } from '../SvgImage'
 const useStyles = makeStyles(
   (theme: Theme) => ({
     container: {
+      ...theme.typography.subtitle1,
       textAlign: 'center',
-      fontSize: responsiveVal(16, 24),
     },
     innerContainer: {
       display: 'flex',

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/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/StyledBadge/index.tsx

@@ -3,12 +3,12 @@ import { Badge, withStyles } from '@material-ui/core'
 const StyledBadge = withStyles((theme) => ({
   colorError: {},
   badge: {
+    ...theme.typography.caption,
     right: 6,
     top: 6,
     padding: 3,
     color: '#FFF',
     borderRadius: '100%',
-    fontSize: 10,
     [theme.breakpoints.up('md')]: {
       padding: 6,
       right: 8,

package/TextInputNumber/index.tsx

@@ -27,9 +27,7 @@ const useStyles = makeStyles(
         appearance: 'none',
       },
     },
-    button: {
-      fontSize: 22,
-    },
+    button: {},
     adornedEnd: {
       paddingRight: responsiveVal(7, 14),
     },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@graphcommerce/next-ui",
-  "version": "3.13.0",
+  "version": "3.14.1",
   "author": "",
   "license": "MIT",
   "scripts": {
@@ -11,8 +11,8 @@
   "dependencies": {
     "@apollo/client": "^3.4.16",
     "@graphcommerce/framer-next-pages": "^2.107.3",
-    "@graphcommerce/framer-scroller": "^1.0.1",
-    "@graphcommerce/framer-sheet": "^2.105.15",
+    "@graphcommerce/framer-scroller": "^1.0.2",
+    "@graphcommerce/framer-sheet": "^2.106.0",
     "@graphcommerce/framer-utils": "^2.103.13",
     "@graphcommerce/graphql": "^2.105.3",
     "@graphcommerce/image": "^2.105.2",
@@ -53,5 +53,5 @@
       "project": "./tsconfig.json"
     }
   },
-  "gitHead": "5a9758c5144ecc75d5a04350d40cfe27cfd8212d"
+  "gitHead": "fe3be5507a3b323564cd53fca9831fb5053373ee"
 }