@graphcommerce/next-ui 3.1.6 → 3.2.2

package/AppShell/MenuFab.tsx

@@ -91,6 +91,11 @@ export default function MenuFab(props: MenuFabProps) {
         onClose={() => setOpenEl(null)}
         classes={{ paper: classes.menu }}
         disableScrollLock
+        transitionDuration={{
+          appear: 175,
+          enter: 175,
+          exit: 175,
+        }}
       >
         {search && (
           <List>

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,63 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [3.2.2](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/next-ui@3.2.1...@graphcommerce/next-ui@3.2.2) (2021-10-11)
+
+
+### Bug Fixes
+
+* **menu-fab:** animation duration ([5b9ece2](https://github.com/ho-nl/m2-pwa/commit/5b9ece293fb7e12663386f9f9cbc99bc4e22aaa9))
+
+
+
+
+
+## [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)
+
+
+### Bug Fixes
+
+* **framer-scroller:** pan snap does not work on mobile ([660f242](https://github.com/ho-nl/m2-pwa/commit/660f242a38558669fa896a74e14cafdd85069d57))
+* **framer-slider:** route changes ([4cadbea](https://github.com/ho-nl/m2-pwa/commit/4cadbea3e494326377e74e2fa9370ab80f8d8c35))
+* make sure the gallery never gets higher than 100% ([1eae8c7](https://github.com/ho-nl/m2-pwa/commit/1eae8c7cfb2a9e67f03f1e4e4db5c95213d2dbe0))
+* poistioning on mobile ([bec497f](https://github.com/ho-nl/m2-pwa/commit/bec497fca426346b80b453a3871b9c66521a2161))
+* **sidebar-gallery:** differentiate drag from click ([acd408e](https://github.com/ho-nl/m2-pwa/commit/acd408e400f8285e2b3a9105b4694d5fd839dd99))
+* **sidebar-gallery:** push gallery to history one time ([2c45b64](https://github.com/ho-nl/m2-pwa/commit/2c45b64e171577f7b584662d56416eeae4a22554))
+* **sidebar-gallery:** route handling ([1c3b8b1](https://github.com/ho-nl/m2-pwa/commit/1c3b8b1687b0bf637da6c88d2d9b30a734b98d11))
+* **sidebar-gallery:** use fullscreen and fullscreen exit icons ([1328d22](https://github.com/ho-nl/m2-pwa/commit/1328d220030f766be2d4046abd87d45175e4fe38))
+* use better URL handling and remove drag temporarily ([0b99387](https://github.com/ho-nl/m2-pwa/commit/0b993876280270320eef5301130c5cc3eb339ea9))
+
+
+### Features
+
+* **sidebar-gallery:** toggle with browser back buttons ([a2f804b](https://github.com/ho-nl/m2-pwa/commit/a2f804b0cedb98df8f6a7b197aeeeeda43c6b1ba))
+
+
+
+
+
+## [3.1.7](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/next-ui@3.1.6...@graphcommerce/next-ui@3.1.7) (2021-10-08)
+
+
+### Bug Fixes
+
+* SvgImageSimple should pass the layout prop ([a0b5c81](https://github.com/ho-nl/m2-pwa/commit/a0b5c818f93ba24a34c6ce8aa21f8af50bd05dd2))
+
+
+
+
+
 ## [3.1.6](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/next-ui@3.1.5...@graphcommerce/next-ui@3.1.6) (2021-10-07)
 
 

package/FramerScroller/components/SidebarGallery.tsx

@@ -1,3 +1,4 @@
+import { usePrevPageRouter } from '@graphcommerce/framer-next-pages/hooks/usePrevPageRouter'
 import {
   CenterSlide,
   MotionImageAspect,
@@ -8,24 +9,21 @@ 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 } from 'framer-motion'
-import React, { useRef, useState } from 'react'
+import { m, useDomEvent, useMotionValue } from 'framer-motion'
+import { useRouter } from 'next/router'
+import React, { useEffect, useRef } from 'react'
 import { UseStyles } from '../../Styles'
 import responsiveVal from '../../Styles/responsiveVal'
 import SvgImage from '../../SvgImage'
 import SvgImageSimple from '../../SvgImage/SvgImageSimple'
-import {
-  iconChevronLeft,
-  iconChevronRight,
-  iconCollapseVertical,
-  iconExpandVertical,
-} from '../../icons'
+import { iconChevronLeft, iconChevronRight, iconFullscreen, iconFullscreenExit } from '../../icons'
 
 type StyleProps = {
   aspectRatio: [number, number]
   clientHeight: number
+  classes?: Record<string, unknown>
 }
 
 const useStyles = makeStyles(
@@ -42,7 +40,7 @@ const useStyles = makeStyles(
     rootZoomed: {
       position: 'relative',
       zIndex: theme.zIndex.modal,
-      marginTop: 0,
+      marginTop: `calc(${theme.page.headerInnerHeight.sm} * -1)`,
       [theme.breakpoints.up('md')]: {
         marginTop: `calc(${theme.page.headerInnerHeight.md} * -1  - ${theme.spacings.sm})`,
       },
@@ -79,8 +77,12 @@ const useStyles = makeStyles(
       gridAutoFlow: `column`,
       gridTemplateColumns: `repeat(100, 100%)`,
       gridTemplateRows: `100%`,
+      cursor: 'zoom-in',
     },
-
+    scrollerZoomed: ({ clientHeight }: StyleProps) => ({
+      height: clientHeight,
+      cursor: 'inherit',
+    }),
     sidebarWrapper: {
       boxSizing: 'content-box',
       display: 'grid',
@@ -130,7 +132,7 @@ const useStyles = makeStyles(
       },
     },
     toggleIcon: {
-      boxShadow: theme.shadows[2],
+      boxShadow: theme.shadows[6],
     },
     topRight: {
       display: 'grid',
@@ -155,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' },
 )
@@ -163,27 +168,41 @@ export type SidebarGalleryProps = {
   sidebar: React.ReactNode
   images: MotionImageAspectProps[]
   aspectRatio?: [number, number]
+  routeHash?: string
 } & UseStyles<typeof useStyles>
 
 export default function SidebarGallery(props: SidebarGalleryProps) {
-  const { sidebar, images, aspectRatio = [1, 1] } = props
-  const [zoomed, setZoomed] = useState(false)
-
+  const { sidebar, images, aspectRatio = [1, 1], routeHash = 'gallery' } = props
+  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.
+  const zoomed = router.asPath.endsWith(route)
+
+  // cleanup if someone enters the page with #gallery
+  useEffect(() => {
+    if (!prevRoute?.pathname && zoomed) {
+      // eslint-disable-next-line @typescript-eslint/no-floating-promises
+      router.replace(router.asPath.replace(route, ''))
+    }
+  }, [prevRoute?.pathname, route, router, zoomed])
 
   const toggle = () => {
-    setZoomed(!zoomed)
     if (!zoomed) {
+      // eslint-disable-next-line @typescript-eslint/no-floating-promises
+      router.push(route, undefined, { shallow: true })
       document.body.style.overflow = 'hidden'
       window.scrollTo({ top: 0, behavior: 'smooth' })
+    } else {
+      router.back()
     }
   }
 
   const clsxZoom = (key: string) => clsx(classes?.[key], zoomed && classes?.[`${key}Zoomed`])
-
   const theme = useTheme()
-
   const windowRef = useRef(typeof window !== 'undefined' ? window : null)
 
   const handleEscapeKey = (e: KeyboardEvent | Event) => {
@@ -194,6 +213,16 @@ export default function SidebarGallery(props: SidebarGalleryProps) {
     }
   }
 
+  const dragStart = useMotionValue<number>(0)
+  const onMouseDownScroller: React.MouseEventHandler<HTMLDivElement> = (e) => {
+    if (dragStart.get() === e.clientX) return
+    dragStart.set(e.clientX)
+  }
+  const onMouseUpScroller: React.MouseEventHandler<HTMLDivElement> = (e) => {
+    const currentDragLoc = e.clientX
+    if (Math.abs(currentDragLoc - dragStart.get()) < 8) toggle()
+  }
+
   useDomEvent(windowRef, 'keyup', handleEscapeKey, { passive: true })
 
   return (
@@ -206,7 +235,12 @@ export default function SidebarGallery(props: SidebarGalleryProps) {
             if (!zoomed) document.body.style.overflow = ''
           }}
         >
-          <Scroller className={clsxZoom('scroller')} hideScrollbar>
+          <Scroller
+            className={clsxZoom('scroller')}
+            hideScrollbar
+            onMouseDown={onMouseDownScroller}
+            onMouseUp={onMouseUpScroller}
+          >
             {images.map((image, idx) => (
               <CenterSlide key={typeof image.src === 'string' ? image.src : idx}>
                 <MotionImageAspect
@@ -225,11 +259,11 @@ export default function SidebarGallery(props: SidebarGalleryProps) {
             ))}
           </Scroller>
           <m.div layout className={classes.topRight}>
-            <Fab color='inherit' size='small' className={classes.toggleIcon} onClick={toggle}>
+            <Fab color='inherit' size='small' className={classes.toggleIcon} onMouseUp={toggle}>
               {!zoomed ? (
-                <SvgImage src={iconExpandVertical} alt='Zoom in' loading='eager' />
+                <SvgImage src={iconFullscreen} alt='Zoom in' loading='eager' size='small' />
               ) : (
-                <SvgImage src={iconCollapseVertical} alt='Zoom out' loading='eager' />
+                <SvgImage src={iconFullscreenExit} alt='Zoom out' loading='eager' size='small' />
               )}
             </Fab>
           </m.div>
@@ -245,9 +279,10 @@ export default function SidebarGallery(props: SidebarGalleryProps) {
           </div>
 
           <div className={classes.bottomCenter}>
-            <ScrollerDots layout />
+            <ScrollerDots layout classes={{ dots: classes.dots }} />
           </div>
         </m.div>
+
         <div className={clsxZoom('sidebarWrapper')}>
           <m.div layout className={clsxZoom('sidebar')}>
             {sidebar}

package/FramerScroller/components/SidebarSlider.tsx

@@ -1,4 +1,3 @@
-import { relative } from 'path/posix'
 import {
   Scroller,
   ScrollerButton,
@@ -8,9 +7,10 @@ import {
 import { Theme } from '@material-ui/core'
 import { makeStyles } from '@material-ui/styles'
 import React, { ReactNode } from 'react'
-import { SvgImageSimple, iconChevronLeft, iconChevronRight } from '../..'
 import { UseStyles } from '../../Styles'
 import responsiveVal from '../../Styles/responsiveVal'
+import SvgImageSimple from '../../SvgImage/SvgImageSimple'
+import { iconChevronLeft, iconChevronRight } from '../../icons'
 
 const useStyles = makeStyles(
   (theme: Theme) => ({
@@ -37,7 +37,6 @@ const useStyles = makeStyles(
       gridRowGap: theme.spacings.lg,
       alignContent: 'space-around',
       paddingRight: theme.page.horizontal,
-
       '& > *': {
         minWidth: responsiveVal(200, 400),
       },

package/FullPageMessage/index.tsx

@@ -11,6 +11,11 @@ const useStyles = makeStyles(
       marginTop: theme.spacings.md,
       marginBottom: theme.spacings.md,
     },
+    innerContainer: {
+      display: 'grid',
+      alignItems: 'center',
+      justifyItems: 'center',
+    },
     rootMargin: {
       marginTop: responsiveVal(50, 250),
     },
@@ -18,21 +23,18 @@ const useStyles = makeStyles(
       textAlign: 'center',
       marginTop: theme.spacings.sm,
     },
-    innerContainer: {
-      display: 'grid',
-      alignItems: 'center',
-      justifyItems: 'center',
-    },
+
     button: {
       marginTop: theme.spacings.sm,
     },
     altButton: {
       marginTop: 6,
     },
+    icon: {
+      height: responsiveVal(120, 180),
+    },
   }),
-  {
-    name: 'FullPageMessage',
-  },
+  { name: 'FullPageMessage' },
 )
 
 export type FullPageMessageProps = {
@@ -51,7 +53,7 @@ export default function FullPageMessage(props: FullPageMessageProps) {
   return (
     <div className={clsx(classes.root, disableMargin || classes.rootMargin)}>
       <Container maxWidth='md' className={classes.innerContainer}>
-        {icon}
+        <div className={classes.icon}>{icon}</div>
 
         <div className={classes.subject}>
           <Typography variant='h3' gutterBottom>

package/SvgImage/SvgImageSimple.tsx

@@ -42,14 +42,14 @@ type SvgImageSimpleProps = Omit<ImageProps, 'fixed'> & {
 }
 
 const SvgImageSimple = forwardRef<HTMLImageElement, SvgImageSimpleProps>((props, ref) => {
-  const { className, size = 'medium', muted, inverted, ...imageProps } = props
+  const { className, size = 'medium', muted, inverted, layout = 'fixed', ...imageProps } = props
   const classes = useStyles()
 
   return (
     <Image
       {...imageProps}
       ref={ref}
-      layout='fixed'
+      layout={layout}
       className={clsx(
         className,
         classes.image,

package/icons/icon_fullscreen.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z"/></svg>

package/icons/icon_fullscreen_exit.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M5 16h3v3h2v-5H5v2zm3-8H5v2h5V5H8v3zm6 11h2v-3h3v-2h-5v5zm2-11V5h-2v5h5V8h-3z"/></svg>

package/icons/index.tsx

@@ -12,11 +12,9 @@ export { default as iconChevronRight } from './icon_chevron_right.svg'
 export { default as iconChevronUp } from './icon_chevron_up.svg'
 export { default as iconClose } from './icon_close.svg'
 export { default as iconCloseCircle } from './icon_close_circle.svg'
-export { default as iconCollapseVertical } from './icon_collapse_vertical.svg'
 export { default as iconCustomerService } from './icon_customer_service.svg'
 export { default as iconEmail } from './icon_email.svg'
 export { default as iconEmailOutline } from './icon_email_outline.svg'
-export { default as iconExpandVertical } from './icon_expand_vertical.svg'
 export { default as iconHeart } from './icon_heart.svg'
 export { default as iconHome } from './icon_home.svg'
 export { default as iconId } from './icon_id.svg'
@@ -40,3 +38,5 @@ export { default as iconStar } from './icon_star.svg'
 export { default as iconStarFilledMuted } from './icon_star_filled_muted.svg'
 export { default as iconStarYellow } from './icon_star_yellow.svg'
 export { default as iconParty } from './icon_party.svg'
+export { default as iconFullscreenExit } from './icon_fullscreen_exit.svg'
+export { default as iconFullscreen } from './icon_fullscreen.svg'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@graphcommerce/next-ui",
-  "version": "3.1.6",
+  "version": "3.2.2",
   "author": "",
   "license": "MIT",
   "scripts": {
@@ -10,12 +10,12 @@
   },
   "dependencies": {
     "@apollo/client": "^3.4.16",
-    "@graphcommerce/framer-next-pages": "^2.106.6",
-    "@graphcommerce/framer-scroller": "^0.2.7",
-    "@graphcommerce/framer-sheet": "^2.105.5",
-    "@graphcommerce/framer-utils": "^2.103.5",
+    "@graphcommerce/framer-next-pages": "^2.106.7",
+    "@graphcommerce/framer-scroller": "^0.2.9",
+    "@graphcommerce/framer-sheet": "^2.105.7",
+    "@graphcommerce/framer-utils": "^2.103.6",
     "@graphcommerce/graphql": "^2.103.5",
-    "@graphcommerce/image": "^2.104.6",
+    "@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": "717bd3c1658e421c247c1f8b210935cdb7780197"
+  "gitHead": "be6fb6e501c76d846b06935bf61e949f82f0c50f"
 }

package/icons/icon_collapse_vertical.svg

@@ -1,11 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="32px" height="32px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
-        <g id="arrow-bar-right" transform="translate(16.000000, 16.000000) scale(-1, 1) translate(-16.000000, -16.000000) translate(8.000000, 8.000000)" stroke="#000000" stroke-width="1.5">
-            <line x1="16" y1="8" x2="6" y2="8" id="Path"></line>
-            <line x1="16" y1="8" x2="12" y2="12" id="Path"></line>
-            <line x1="16" y1="8" x2="12" y2="4" id="Path"></line>
-            <line x1="1" y1="0" x2="1" y2="16" id="Path"></line>
-        </g>
-    </g>
-</svg>

package/icons/icon_expand_vertical.svg

@@ -1,11 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="32px" height="32px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
-        <g id="arrow-bar-right" transform="translate(8.000000, 8.000000)" stroke="#000000" stroke-width="1.5">
-            <line x1="16" y1="8" x2="6" y2="8" id="Path"></line>
-            <line x1="16" y1="8" x2="12" y2="12" id="Path"></line>
-            <line x1="16" y1="8" x2="12" y2="4" id="Path"></line>
-            <line x1="1" y1="0" x2="1" y2="16" id="Path"></line>
-        </g>
-    </g>
-</svg>