@graphcommerce/next-ui 3.2.0 → 3.3.0

package/AppShell/DesktopNavBar.tsx

@@ -1,9 +1,12 @@
 import { Scroller, ScrollerButton, ScrollerProvider } from '@graphcommerce/framer-scroller'
-import { Link, makeStyles, Theme } from '@material-ui/core'
+import { Link, LinkProps as MuiLinkProps, makeStyles, Theme } from '@material-ui/core'
+import { Variant as ThemeVariant } from '@material-ui/core/styles/createTypography'
 import clsx from 'clsx'
+import { m } from 'framer-motion'
 import PageLink from 'next/link'
 import { useRouter } from 'next/router'
 import React from 'react'
+import { UseStyles } from '../Styles'
 import SvgImageSimple from '../SvgImage/SvgImageSimple'
 import { iconChevronLeft, iconChevronRight } from '../icons'
 import { MenuProps } from './Menu'
@@ -25,20 +28,33 @@ const useStyles = makeStyles(
       padding: '0 40px',
       minHeight: 40,
     },
-    prevNext: {
-      pointerEvents: 'all',
+    prevNextBtnWrapper: {
       position: 'absolute',
-      background: theme.palette.background.default,
-      top: 5,
-      [theme.breakpoints.down('sm')]: { display: 'none' },
-      boxShadow: 'none',
+      top: 0,
     },
-    prev: {
+    left: {
       left: 0,
     },
-    next: {
+    right: {
       right: 0,
     },
+    prevNextBtn: {
+      pointerEvents: 'all',
+      background: theme.palette.background.default,
+      boxShadow: 'none',
+      height: 48,
+      [theme.breakpoints.down('sm')]: {
+        display: 'none',
+      },
+    },
+    prevBtn: {
+      borderTopLeftRadius: 0,
+      borderBottomLeftRadius: 0,
+    },
+    nextBtn: {
+      borderTopRightRadius: 0,
+      borderBottomRightRadius: 0,
+    },
     link: {
       whiteSpace: 'nowrap',
       color: 'black',
@@ -65,11 +81,11 @@ const useStyles = makeStyles(
   { name: 'DesktopNavBar' },
 )
 
-export type MenuTabsProps = MenuProps
+export type MenuTabsProps = MenuProps & UseStyles<typeof useStyles> & { LinkProps?: MuiLinkProps }
 
 export default function DesktopNavBar(props: MenuTabsProps) {
-  const { menu } = props
-  const classes = useStyles()
+  const { menu, LinkProps } = props
+  const classes = useStyles(props)
   const router = useRouter()
 
   return (
@@ -78,7 +94,7 @@ export default function DesktopNavBar(props: MenuTabsProps) {
         <Scroller className={classes.scroller} hideScrollbar>
           {menu.map(({ href, children, ...linkProps }) => (
             <PageLink key={href.toString()} href={href} {...linkProps} passHref>
-              <Link className={classes.link} variant='h6'>
+              <Link {...LinkProps} className={clsx(classes.link, LinkProps?.className)}>
                 {children}
                 <div
                   className={clsx(
@@ -89,22 +105,44 @@ export default function DesktopNavBar(props: MenuTabsProps) {
               </Link>
             </PageLink>
           ))}
+        </Scroller>
+
+        <m.div className={clsx(classes.prevNextBtnWrapper, classes.left)}>
           <ScrollerButton
             direction='left'
             size='small'
-            className={clsx(classes.prevNext, classes.prev)}
+            classes={{ root: clsx(classes.prevNextBtn, classes.prevBtn) }}
           >
             <SvgImageSimple src={iconChevronLeft} />
           </ScrollerButton>
+        </m.div>
+
+        <m.div className={clsx(classes.prevNextBtnWrapper, classes.right)}>
           <ScrollerButton
             direction='right'
             size='small'
-            className={clsx(classes.prevNext, classes.next)}
+            classes={{ root: clsx(classes.prevNextBtn, classes.nextBtn) }}
           >
             <SvgImageSimple src={iconChevronRight} />
           </ScrollerButton>
-        </Scroller>
+        </m.div>
       </div>
+
+      {/* <ScrollerButton
+          direction='left'
+          size='small'
+          className={clsx(classes.prevNext, classes.prev)}
+        >
+          <SvgImageSimple src={iconChevronLeft} />
+        </ScrollerButton>
+
+        <ScrollerButton
+          direction='right'
+          size='small'
+          className={clsx(classes.prevNext, classes.next)}
+        >
+          <SvgImageSimple src={iconChevronRight} />
+        </ScrollerButton> */}
     </ScrollerProvider>
   )
 }

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,53 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [3.3.0](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/next-ui@3.2.3...@graphcommerce/next-ui@3.3.0) (2021-10-13)
+
+
+### Features
+
+* allow styling DesktopNavBar ([12f99a6](https://github.com/ho-nl/m2-pwa/commit/12f99a603d9e9f89e28ec2452823b58abee59c4c))
+* implement extensibility for DesktopNavBar, SearchButton ([5710de8](https://github.com/ho-nl/m2-pwa/commit/5710de8936f59c7d0fcc648978183f0e7fdd26b7))
+* make DesktopNavBar Link variant customizable ([d47172f](https://github.com/ho-nl/m2-pwa/commit/d47172f3ebe0cc0b769e0d17c171ae4bb2045bbb))
+
+
+
+
+
+## [3.2.3](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/next-ui@3.2.2...@graphcommerce/next-ui@3.2.3) (2021-10-11)
+
+
+### Bug Fixes
+
+* **desktop-nav-bar:** prev/next button alignment in menu ([c7fabf0](https://github.com/ho-nl/m2-pwa/commit/c7fabf0474100aaf40a7526858fa2b01566b3250))
+* **section-heeader-filter-items:** remove large paddings ([18f4d77](https://github.com/ho-nl/m2-pwa/commit/18f4d77e4eb1b029bf2e5656b753e2f18fde90ab))
+
+
+
+
+
+## [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)
 
 

package/ChipMenu/index.tsx

@@ -55,6 +55,9 @@ export const useChipMenuStyles = makeStyles(
         outline: 'none',
       },
     },
+    sectionHeaderWrapper: {
+      marginTop: 10,
+    },
   }),
   { name: 'ChipMenu' },
 )
@@ -109,7 +112,6 @@ export default function ChipMenu(props: ChipMenuProps) {
           selectedAndMenuHidden && classes.chipSelected,
         )}
       />
-
       <Menu
         anchorEl={openEl}
         open={!!openEl}
@@ -122,7 +124,12 @@ export default function ChipMenu(props: ChipMenuProps) {
         anchorOrigin={{ horizontal: 'left', vertical: 'bottom' }}
         classes={{ paper: classes.menuPaper, list: classes.menuList }}
       >
-        <SectionHeader labelLeft={label ?? ''} labelRight={labelRight ?? ''} usePadding />
+        <SectionHeader
+          labelLeft={label ?? ''}
+          labelRight={labelRight ?? ''}
+          usePadding
+          classes={{ sectionHeaderWrapper: classes.sectionHeaderWrapper }}
+        />
         {children}
       </Menu>
     </>

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.3.0",
   "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-sheet": "^2.105.6",
+    "@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.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",
@@ -54,6 +54,5 @@
     "parserOptions": {
       "project": "./tsconfig.json"
     }
-  },
-  "gitHead": "b3dd4c996ac571874bb03d0a5c16b2c37f41abcb"
+  }
 }