@graphcommerce/next-ui 3.20.2 → 3.20.6

package/CHANGELOG.md

@@ -3,6 +3,28 @@
 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)
 
 

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/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

@@ -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: {

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.2",
+  "version": "3.20.6",
   "author": "",
   "license": "MIT",
   "scripts": {
@@ -9,23 +9,23 @@
     "start": "next start"
   },
   "dependencies": {
-    "@apollo/client": "^3.4.16",
-    "@graphcommerce/framer-next-pages": "^2.108.0",
-    "@graphcommerce/framer-scroller": "^1.1.2",
-    "@graphcommerce/framer-utils": "^2.103.16",
-    "@graphcommerce/graphql": "^2.105.6",
-    "@graphcommerce/image": "^2.105.5",
-    "@lingui/macro": "^3.12.1",
+    "@apollo/client": "^3.5.6",
+    "@graphcommerce/framer-next-pages": "^2.108.1",
+    "@graphcommerce/framer-scroller": "^1.1.6",
+    "@graphcommerce/framer-utils": "^2.103.17",
+    "@graphcommerce/graphql": "^2.105.7",
+    "@graphcommerce/image": "^2.105.6",
+    "@lingui/macro": "^3.13.0",
     "@material-ui/core": "^4.12.3",
     "@material-ui/lab": "^4.0.0-alpha.60",
     "@material-ui/styles": "^4.11.4",
     "clsx": "^1.1.1",
     "framer-motion": "^4.1.17",
-    "graphql": "^15.6.1",
-    "next": "^12.0.3",
+    "graphql": "^16.1.0",
+    "next": "^12.0.7",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "react-focus-lock": "^2.5.2",
+    "react-focus-lock": "^2.7.0",
     "react-is": "^17.0.2",
     "react-schemaorg": "^2.0.0",
     "schema-dts": "^1.0.0",
@@ -33,13 +33,13 @@
   },
   "devDependencies": {
     "@graphcommerce/browserslist-config-pwa": "^3.0.2",
-    "@graphcommerce/eslint-config-pwa": "^3.1.6",
+    "@graphcommerce/eslint-config-pwa": "^3.1.7",
     "@graphcommerce/prettier-config-pwa": "^3.0.4",
     "@graphcommerce/typescript-config-pwa": "^3.1.1",
-    "@playwright/test": "^1.16.2",
+    "@playwright/test": "^1.17.1",
     "@types/react-is": "^17.0.3",
-    "graphql-tag": "2.12.5",
-    "typescript": "^4.4.4"
+    "graphql-tag": "2.12.6",
+    "typescript": "^4.5.3"
   },
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
@@ -52,5 +52,5 @@
       "project": "./tsconfig.json"
     }
   },
-  "gitHead": "688a7042901bf36f8ab8bbf8e1886570a5350b9e"
+  "gitHead": "d1e17a76798279be4ceb3429238e1e736061899b"
 }