@graphcommerce/next-ui 3.2.0 → 3.2.1

package/Button/index.tsx

@@ -56,7 +56,7 @@ const useStyles = makeStyles<
       [theme.breakpoints.up('md')]: {
         background: theme.palette.secondary.main,
         color: theme.palette.secondary.contrastText,
-        boxShadow: theme.shadows[2],
+        boxShadow: theme.shadows[6],
         borderRadius: 25,
         padding: '6px 16px',
         fontWeight: theme.typography.fontWeightBold,

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [3.2.1](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/next-ui@3.2.0...@graphcommerce/next-ui@3.2.1) (2021-10-11)
+
+
+### Bug Fixes
+
+* **framer-scroller:** dots should have a background ([8f2e1a1](https://github.com/ho-nl/m2-pwa/commit/8f2e1a1ffc9de3369938fe2f9e9f25f592739d8d))
+
+
+
+
+
 # [3.2.0](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/next-ui@3.1.7...@graphcommerce/next-ui@3.2.0) (2021-10-09)
 
 

package/FramerScroller/components/SidebarGallery.tsx

@@ -9,7 +9,7 @@ import {
   ScrollerProvider,
 } from '@graphcommerce/framer-scroller'
 import { clientSize, useMotionValueValue } from '@graphcommerce/framer-utils'
-import { Fab, makeStyles, Theme, useTheme } from '@material-ui/core'
+import { Fab, makeStyles, Theme, useTheme, alpha } from '@material-ui/core'
 import clsx from 'clsx'
 import { m, useDomEvent, useMotionValue } from 'framer-motion'
 import { useRouter } from 'next/router'
@@ -23,6 +23,7 @@ import { iconChevronLeft, iconChevronRight, iconFullscreen, iconFullscreenExit }
 type StyleProps = {
   aspectRatio: [number, number]
   clientHeight: number
+  classes?: Record<string, unknown>
 }
 
 const useStyles = makeStyles(
@@ -131,7 +132,7 @@ const useStyles = makeStyles(
       },
     },
     toggleIcon: {
-      boxShadow: theme.shadows[2],
+      boxShadow: theme.shadows[6],
     },
     topRight: {
       display: 'grid',
@@ -156,6 +157,9 @@ const useStyles = makeStyles(
       right: theme.spacings.sm,
       top: `calc(50% - 28px)`,
     },
+    dots: {
+      background: alpha(theme.palette.background.highlight, 0.7),
+    },
   }),
   { name: 'SidebarGallery' },
 )
@@ -172,7 +176,7 @@ export default function SidebarGallery(props: SidebarGalleryProps) {
   const router = useRouter()
   const prevRoute = usePrevPageRouter()
   const clientHeight = useMotionValueValue(clientSize.y, (y) => y)
-  const classes = useStyles({ clientHeight, aspectRatio })
+  const classes = useStyles({ clientHeight, aspectRatio, classes: props.classes })
 
   const route = `#${routeHash}`
   // We're using the URL to manage the state of the gallery.
@@ -275,7 +279,7 @@ export default function SidebarGallery(props: SidebarGalleryProps) {
           </div>
 
           <div className={classes.bottomCenter}>
-            <ScrollerDots layout />
+            <ScrollerDots layout classes={{ dots: classes.dots }} />
           </div>
         </m.div>
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@graphcommerce/next-ui",
-  "version": "3.2.0",
+  "version": "3.2.1",
   "author": "",
   "license": "MIT",
   "scripts": {
@@ -11,11 +11,11 @@
   "dependencies": {
     "@apollo/client": "^3.4.16",
     "@graphcommerce/framer-next-pages": "^2.106.7",
-    "@graphcommerce/framer-scroller": "^0.2.8",
+    "@graphcommerce/framer-scroller": "^0.2.9",
     "@graphcommerce/framer-sheet": "^2.105.6",
     "@graphcommerce/framer-utils": "^2.103.6",
     "@graphcommerce/graphql": "^2.103.5",
-    "@graphcommerce/image": "^2.104.7",
+    "@graphcommerce/image": "^2.104.8",
     "@graphql-typed-document-node/core": "^3.1.0",
     "@material-ui/core": "^4.12.3",
     "@material-ui/lab": "^4.0.0-alpha.60",
@@ -55,5 +55,5 @@
       "project": "./tsconfig.json"
     }
   },
-  "gitHead": "b3dd4c996ac571874bb03d0a5c16b2c37f41abcb"
+  "gitHead": "e8e29078b5d241da5f90b930338e84ba543b0ea4"
 }