@graphcommerce/next-ui 7.1.0-canary.32 → 7.1.0-canary.34

package/CHANGELOG.md

@@ -1,5 +1,9 @@
 # Change Log
 
+## 7.1.0-canary.34
+
+## 7.1.0-canary.33
+
 ## 7.1.0-canary.32
 
 ## 7.1.0-canary.31

package/Config.graphqls

@@ -0,0 +1,24 @@
+extend input GraphCommerceConfig {
+  """
+  Configuration for the SidebarGallery component
+  """
+  sidebarGallery: SidebarGalleryConfig
+}
+
+"""
+Enumeration of all possible positions for the sidebar gallery thumbnails.
+"""
+enum SidebarGalleryPaginationVariant {
+  DOTS
+  THUMBNAILS_BOTTOM
+}
+
+"""
+SidebarGalleryConfig will contain all configuration values for the Sidebar Gallery component.
+"""
+input SidebarGalleryConfig {
+  """
+  Variant used for the pagination
+  """
+  paginationVariant: SidebarGalleryPaginationVariant
+}

package/FramerScroller/SidebarGallery.tsx

@@ -3,11 +3,12 @@ import {
   MotionImageAspect,
   MotionImageAspectProps,
   Scroller,
-  ScrollerButton,
-  ScrollerButtonProps,
   ScrollerDots,
+  ScrollerButton,
   ScrollerProvider,
   unstable_usePreventScroll as usePreventScroll,
+  ScrollerButtonProps,
+  ScrollerThumbnails,
 } from '@graphcommerce/framer-scroller'
 import { dvh } from '@graphcommerce/framer-utils'
 import {
@@ -30,7 +31,7 @@ import { iconChevronLeft, iconChevronRight, iconFullscreen, iconFullscreenExit }
 
 const MotionBox = styled(m.div)({})
 
-type OwnerState = { zoomed: boolean }
+type OwnerState = { zoomed: boolean; disableZoom: boolean }
 const name = 'SidebarGallery' as const
 const parts = [
   'row',
@@ -68,8 +69,8 @@ export function SidebarGallery(props: SidebarGalleryProps) {
     aspectRatio: [width, height] = [1, 1],
     sx,
     routeHash = 'gallery',
-    disableZoom,
     showButtons,
+    disableZoom = false,
   } = props
 
   const router = useRouter()
@@ -102,7 +103,7 @@ export function SidebarGallery(props: SidebarGalleryProps) {
     }
   }
 
-  const classes = withState({ zoomed })
+  const classes = withState({ zoomed, disableZoom })
   const theme = useTheme()
   const windowRef = useRef(typeof window !== 'undefined' ? window : null)
 
@@ -317,7 +318,6 @@ export function SidebarGallery(props: SidebarGalleryProps) {
                 className={classes.bottomCenter}
                 sx={{
                   display: 'flex',
-                  px: theme.page.horizontal,
                   gap: theme.spacings.xxs,
                   position: 'absolute',
                   bottom: theme.spacings.xxs,
@@ -329,11 +329,15 @@ export function SidebarGallery(props: SidebarGalleryProps) {
                   },
                 }}
               >
-                <ScrollerDots layout='position' layoutDependency={zoomed} />
+                {import.meta.graphCommerce.sidebarGallery?.paginationVariant ===
+                'THUMBNAILS_BOTTOM' ? (
+                  <ScrollerThumbnails images={images} />
+                ) : (
+                  <ScrollerDots />
+                )}
               </Box>
             </MotionBox>
           </TrapFocus>
-
           <Box
             className={classes.sidebarWrapper}
             sx={[

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/next-ui",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "7.1.0-canary.32",
+  "version": "7.1.0-canary.34",
   "author": "",
   "license": "MIT",
   "sideEffects": false,
@@ -18,18 +18,18 @@
     "@emotion/react": "^11.11.1",
     "@emotion/server": "^11.11.0",
     "@emotion/styled": "^11.11.0",
-    "@graphcommerce/framer-next-pages": "7.1.0-canary.32",
-    "@graphcommerce/framer-scroller": "7.1.0-canary.32",
-    "@graphcommerce/framer-utils": "7.1.0-canary.32",
-    "@graphcommerce/image": "7.1.0-canary.32",
+    "@graphcommerce/framer-next-pages": "7.1.0-canary.34",
+    "@graphcommerce/framer-scroller": "7.1.0-canary.34",
+    "@graphcommerce/framer-utils": "7.1.0-canary.34",
+    "@graphcommerce/image": "7.1.0-canary.34",
     "cookie": "^0.5.0",
     "react-is": "^18.2.0",
     "schema-dts": "^1.1.0"
   },
   "devDependencies": {
-    "@graphcommerce/eslint-config-pwa": "7.1.0-canary.32",
-    "@graphcommerce/prettier-config-pwa": "7.1.0-canary.32",
-    "@graphcommerce/typescript-config-pwa": "7.1.0-canary.32",
+    "@graphcommerce/eslint-config-pwa": "7.1.0-canary.34",
+    "@graphcommerce/prettier-config-pwa": "7.1.0-canary.34",
+    "@graphcommerce/typescript-config-pwa": "7.1.0-canary.34",
     "@types/cookie": "^0.5.2",
     "@types/react-is": "^18.2.1",
     "typescript": "5.2.2"