@graphcommerce/next-ui 3.20.1 → 3.20.5

package/CHANGELOG.md

@@ -3,6 +3,40 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [3.20.5](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/next-ui@3.20.4...@graphcommerce/next-ui@3.20.5) (2021-12-06)
+
+
+### Bug Fixes
+
+* Accessibility, SEO ([a258837](https://github.com/ho-nl/m2-pwa/commit/a258837476d94d20d33e13a4c4f950fff57f7dca))
+
+
+
+
+
+## [3.20.4](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/next-ui@3.20.3...@graphcommerce/next-ui@3.20.4) (2021-12-06)
+
+
+### Bug Fixes
+
+* use Locale to set storeSwitcher icons ([65ea397](https://github.com/ho-nl/m2-pwa/commit/65ea397ec53aa27f545b43feda8e35227e119ebe))
+
+
+
+
+
+## [3.20.2](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/next-ui@3.20.1...@graphcommerce/next-ui@3.20.2) (2021-12-03)
+
+
+### Bug Fixes
+
+* aria-labels missing ([16570d1](https://github.com/ho-nl/m2-pwa/commit/16570d11efcb264eba6c620c5508c9616c2d0a2a))
+* make sure the overlay can be clicked away ([5b43e2f](https://github.com/ho-nl/m2-pwa/commit/5b43e2f0568c2587be63b74271409123fc0a44e2))
+
+
+
+
+
 ## [3.20.1](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/next-ui@3.20.0...@graphcommerce/next-ui@3.20.1) (2021-12-03)
 
 

package/FlagAvatar/index.tsx

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

package/FramerScroller/components/SidebarGallery.tsx

@@ -159,7 +159,8 @@ const useStyles = makeStyles(
       top: `calc(50% - 28px)`,
     },
     dots: {
-      background: alpha(theme.palette.background.paper, 0.7),
+      background: alpha(theme.palette.background.paper, 1),
+      boxShadow: theme.shadows[6],
     },
   }),
   { name: 'SidebarGallery' },
@@ -258,6 +259,7 @@ export default function SidebarGallery(props: SidebarGalleryProps) {
                       0: '100vw',
                       [theme.breakpoints.values.md]: zoomed ? '100vw' : '60vw',
                     }}
+                    alt={image.alt || `Product Image ${idx}` || undefined}
                     dontReportWronglySizedImages
                   />
                 </CenterSlide>

package/Layout/components/LayoutHeaderBack.tsx

@@ -1,5 +1,5 @@
 import { usePageRouter, useUp, usePrevUp, usePageContext } from '@graphcommerce/framer-next-pages'
-import { Trans } from '@lingui/macro'
+import { t } from '@lingui/macro'
 import PageLink from 'next/link'
 import React from 'react'
 import Button, { ButtonProps } from '../../Button'
@@ -30,17 +30,25 @@ export default function LayoutHeaderBack(props: BackProps) {
   const backIcon = <SvgImageSimple src={iconChevronLeft} />
   const canClickBack = backSteps > 0 && router.asPath !== prevUp?.href
 
-  if (canClickBack)
+  if (canClickBack) {
+    const label = up?.href === router.asPath ? up.title : t`Back`
     return (
-      <Button onClick={() => router.back()} variant='pill-link' startIcon={backIcon} {...props}>
-        {up?.href === router.asPath ? up.title : <Trans>Back</Trans>}
+      <Button
+        onClick={() => router.back()}
+        variant='pill-link'
+        startIcon={backIcon}
+        aria-label={label}
+        {...props}
+      >
+        {label}
       </Button>
     )
+  }
 
   if (up?.href && up.href !== router.asPath)
     return (
       <PageLink href={up.href} passHref>
-        <Button variant='pill-link' startIcon={backIcon} {...props}>
+        <Button variant='pill-link' startIcon={backIcon} aria-label={up.title} {...props}>
           {up.title}
         </Button>
       </PageLink>

package/Layout/components/LayoutHeaderContent.tsx

@@ -17,6 +17,7 @@ const useStyles = makeStyles(
       left: 0,
       width: '100%',
       backgroundColor: theme.palette.background.default,
+      boxShadow: theme.shadows[2],
       opacity: 0,
       transition: `opacity ${time}`,
 
@@ -25,6 +26,9 @@ const useStyles = makeStyles(
         height: theme.appShell.appBarHeightMd,
       },
     },
+    bgDivider: {
+      boxShadow: 'unset',
+    },
     bgFloatingSm: {
       [theme.breakpoints.down('sm')]: {
         display: 'none',
@@ -112,14 +116,6 @@ const useStyles = makeStyles(
       bottom: 0,
       left: 0,
       right: 0,
-      transition: `opacity ${time}`,
-      opacity: 0,
-    },
-    dividerCustomDivider: {
-      opacity: 1,
-    },
-    dividerScrolled: {
-      opacity: 1,
     },
     dividerFloatingSm: {
       [theme.breakpoints.down('sm')]: {
@@ -165,7 +161,7 @@ export default function LayoutHeaderContent(props: ContentProps) {
     floatingSm,
     floatingMd,
     scrolled,
-    customDivider: !!divider,
+    divider: !!divider,
   })
 
   return (
@@ -175,7 +171,7 @@ export default function LayoutHeaderContent(props: ContentProps) {
         <div {...className('left')}>{left}</div>
         <div {...className('center')}>{children}</div>
         <div {...className('right')}>{right}</div>
-        <div {...className('divider')}>{divider ?? <Divider />}</div>
+        {divider && <div {...className('divider')}>{divider}</div>}
       </div>
     </>
   )

package/LayoutOverlay/components/LayoutOverlayBase.tsx

@@ -1,7 +1,7 @@
 import { usePageContext, usePageRouter, useScrollOffset } from '@graphcommerce/framer-next-pages'
 import { Scroller, useScrollerContext, useScrollTo } from '@graphcommerce/framer-scroller'
 import { useElementScroll, useIsomorphicLayoutEffect } from '@graphcommerce/framer-utils'
-import { makeStyles, Theme } from '@material-ui/core'
+import { makeStyles, Theme, ClickAwayListener } from '@material-ui/core'
 import {
   m,
   MotionValue,
@@ -26,6 +26,14 @@ const useStyles = makeStyles(
       '@supports (-webkit-touch-callout: none)': {
         height: '-webkit-fill-available',
       },
+      [theme.breakpoints.down('sm')]: {
+        width: '100vw',
+        borderRadius: theme.shape.borderRadius * 3,
+      },
+      [theme.breakpoints.up('md')]: {
+        width: '100vw',
+        borderRadius: theme.shape.borderRadius * 4,
+      },
     },
     rootVariantSmLeft: {
       [theme.breakpoints.down('sm')]: {
@@ -152,13 +160,13 @@ const useStyles = makeStyles(
     overlayPaneVariantSmBottom: {
       [theme.breakpoints.down('sm')]: {
         width: '100vw',
-        borderRadius: 10,
+        borderRadius: theme.shape.borderRadius * 3,
       },
     },
     overlayPaneVariantMdBottom: {
       [theme.breakpoints.up('md')]: {
         width: '100vw',
-        borderRadius: 10,
+        borderRadius: theme.shape.borderRadius * 4,
       },
     },
     overlayPaneVariantSmLeft: {
@@ -339,11 +347,13 @@ export function LayoutOverlayBase(props: LayoutOverlayBaseProps) {
     <>
       <m.div {...className('backdrop')} style={{ opacity: positions.open.visible }} />
       <Scroller {...className('root')} grid={false} hideScrollbar>
-        <div {...className('beforeOverlay')} onClick={closeOverlay} />
+        <div {...className('beforeOverlay')} />
         <div {...className('overlay')} ref={overlayRef}>
-          <div {...className('overlayPane')}>
-            <LayoutProvider scroll={scrollWithoffset}>{children}</LayoutProvider>
-          </div>
+          <ClickAwayListener onClickAway={closeOverlay}>
+            <div {...className('overlayPane')}>
+              <LayoutProvider scroll={scrollWithoffset}>{children}</LayoutProvider>
+            </div>
+          </ClickAwayListener>
         </div>
         <div {...className('afterOverlay')} />
       </Scroller>

package/TextInputNumber/index.tsx

@@ -114,12 +114,15 @@ export default function TextInputNumber(props: TextInputNumberProps) {
       inputRef={forkRef}
       className={clsx(textFieldProps.className, classes.quantity)}
       autoComplete='off'
+      label={' '}
+      id='quantity-input'
+      InputLabelProps={{ shrink: false }}
       InputProps={{
         ...textFieldProps.InputProps,
         startAdornment: (
           <IconButton
             aria-label='step down'
-            size='small'
+            size='medium'
             edge='start'
             onPointerDown={() => setDirection('down')}
             onPointerUp={stop}
@@ -135,7 +138,7 @@ export default function TextInputNumber(props: TextInputNumberProps) {
         endAdornment: (
           <IconButton
             aria-label='step up'
-            size='small'
+            size='medium'
             edge='end'
             onPointerDown={() => setDirection('up')}
             onPointerUp={() => setDirection(null)}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@graphcommerce/next-ui",
-  "version": "3.20.1",
+  "version": "3.20.5",
   "author": "",
   "license": "MIT",
   "scripts": {
@@ -11,7 +11,7 @@
   "dependencies": {
     "@apollo/client": "^3.4.16",
     "@graphcommerce/framer-next-pages": "^2.108.0",
-    "@graphcommerce/framer-scroller": "^1.1.1",
+    "@graphcommerce/framer-scroller": "^1.1.5",
     "@graphcommerce/framer-utils": "^2.103.16",
     "@graphcommerce/graphql": "^2.105.6",
     "@graphcommerce/image": "^2.105.5",
@@ -52,5 +52,5 @@
       "project": "./tsconfig.json"
     }
   },
-  "gitHead": "b4bdc1cd365ebdd0bad8e1ed6afd374123bb2908"
+  "gitHead": "9a8007742437e8d0d88e60376c3402a46f20908d"
 }