@graphcommerce/next-ui 3.3.3 → 3.7.0

package/AppShell/DesktopNavBar.tsx

@@ -81,10 +81,15 @@ const useStyles = makeStyles(
   { name: 'DesktopNavBar' },
 )
 
-export type MenuTabsProps = MenuProps & UseStyles<typeof useStyles> & { LinkProps?: MuiLinkProps }
+export type MenuTabsProps = MenuProps &
+  UseStyles<typeof useStyles> & {
+    LinkProps?: MuiLinkProps
+    iconScrollerBtnLeft?: React.ReactNode
+    iconScrollerBtnRight?: React.ReactNode
+  }
 
 export default function DesktopNavBar(props: MenuTabsProps) {
-  const { menu, LinkProps } = props
+  const { menu, LinkProps, iconScrollerBtnLeft, iconScrollerBtnRight } = props
   const classes = useStyles(props)
   const router = useRouter()
 
@@ -117,7 +122,7 @@ export default function DesktopNavBar(props: MenuTabsProps) {
             size='small'
             classes={{ root: clsx(classes.prevNextBtn, classes.prevBtn) }}
           >
-            <SvgImageSimple src={iconChevronLeft} />
+            {iconScrollerBtnLeft ?? <SvgImageSimple src={iconChevronLeft} />}
           </ScrollerButton>
         </m.div>
 
@@ -127,7 +132,7 @@ export default function DesktopNavBar(props: MenuTabsProps) {
             size='small'
             classes={{ root: clsx(classes.prevNextBtn, classes.nextBtn) }}
           >
-            <SvgImageSimple src={iconChevronRight} />
+            {iconScrollerBtnRight ?? <SvgImageSimple src={iconChevronRight} />}
           </ScrollerButton>
         </m.div>
       </div>

package/AspectRatioContainer/index.tsx

@@ -1,4 +1,4 @@
-import { makeStyles } from '@material-ui/styles'
+import { makeStyles } from '@material-ui/core'
 import React from 'react'
 import { UseStyles } from '../Styles'
 

package/Blog/BlogAuthor/index.tsx

@@ -1,6 +1,5 @@
 import { Avatar, Chip, makeStyles, Theme } from '@material-ui/core'
 import React from 'react'
-import Row from '../../Row'
 import { UseStyles } from '../../Styles'
 
 const useStyles = makeStyles(

package/Button/index.tsx

@@ -1,5 +1,9 @@
-import { Button as MuiButton, ButtonClassKey as MuiButtonClassKey, Theme } from '@material-ui/core'
-import { makeStyles } from '@material-ui/styles'
+import {
+  Button as MuiButton,
+  ButtonClassKey as MuiButtonClassKey,
+  Theme,
+  makeStyles,
+} from '@material-ui/core'
 import clsx from 'clsx'
 import React from 'react'
 

package/CHANGELOG.md

@@ -3,6 +3,55 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [3.7.0](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/next-ui@3.6.0...@graphcommerce/next-ui@3.7.0) (2021-10-19)
+
+
+### Bug Fixes
+
+* solve import issue where @material-ui/styles couldn't be found ([efb3771](https://github.com/ho-nl/m2-pwa/commit/efb3771e8c173799779691d4d52857678dab4c15))
+
+
+### Features
+
+* **framer-scroller:** better defaults so the Scroller doesn't look broken when providing no props ([b177ce9](https://github.com/ho-nl/m2-pwa/commit/b177ce9570abb9ccfd4eb5cc34e43d157bb4e81a))
+
+
+
+
+
+# [3.6.0](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/next-ui@3.5.0...@graphcommerce/next-ui@3.6.0) (2021-10-18)
+
+
+### Features
+
+* **message-snackbar:** severity props ([c7be8a5](https://github.com/ho-nl/m2-pwa/commit/c7be8a51faf7a5937b7fab5bb352df2089ae4eea))
+
+
+
+
+
+# [3.5.0](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/next-ui@3.4.0...@graphcommerce/next-ui@3.5.0) (2021-10-18)
+
+
+### Features
+
+* **graphcms:** combined multiple models to bypass model creation limit ([fd6dc14](https://github.com/ho-nl/m2-pwa/commit/fd6dc140cb60c5733dab2e0a43b5df2059e0c739))
+
+
+
+
+
+# [3.4.0](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/next-ui@3.3.3...@graphcommerce/next-ui@3.4.0) (2021-10-15)
+
+
+### Features
+
+* **DesktopNavBar:** allow custom scroller button icons ([401f457](https://github.com/ho-nl/m2-pwa/commit/401f4572ce67dbe52008dca8e1d4473e2fcbf5cf))
+
+
+
+
+
 ## [3.3.3](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/next-ui@3.3.2...@graphcommerce/next-ui@3.3.3) (2021-10-13)
 
 

package/FramerNextPagesSlider/Slider.tsx

@@ -1,5 +1,5 @@
 import { usePageContext, usePageRouter } from '@graphcommerce/framer-next-pages'
-import { makeStyles } from '@material-ui/styles'
+import { makeStyles } from '@material-ui/core'
 import { AnimatePresence } from 'framer-motion'
 import React, { useRef } from 'react'
 import RouterSlide from './Slide'

package/FramerScroller/components/SidebarGallery.tsx

@@ -73,9 +73,7 @@ const useStyles = makeStyles(
       top: 0,
       width: '100%',
       height: '100%',
-      display: `grid`,
-      gridAutoFlow: `column`,
-      gridTemplateColumns: `repeat(100, 100%)`,
+      gridAutoColumns: `100%`,
       gridTemplateRows: `100%`,
       cursor: 'zoom-in',
     },

package/FramerScroller/components/SidebarSlider.tsx

@@ -4,8 +4,7 @@ import {
   ScrollerPageCounter,
   ScrollerProvider,
 } from '@graphcommerce/framer-scroller'
-import { Theme } from '@material-ui/core'
-import { makeStyles } from '@material-ui/styles'
+import { Theme, makeStyles } from '@material-ui/core'
 import React, { ReactNode } from 'react'
 import { UseStyles } from '../../Styles'
 import responsiveVal from '../../Styles/responsiveVal'
@@ -31,15 +30,11 @@ const useStyles = makeStyles(
     },
     scroller: {
       width: '100%',
-      display: 'grid',
-      gridAutoFlow: 'column',
       gridColumnGap: theme.spacings.md,
       gridRowGap: theme.spacings.lg,
       alignContent: 'space-around',
       paddingRight: theme.page.horizontal,
-      '& > *': {
-        minWidth: responsiveVal(200, 400),
-      },
+      gridAutoColumns: responsiveVal(200, 400),
     },
     sliderButtons: {
       [theme.breakpoints.down('sm')]: {

package/RenderType/index.tsx

@@ -13,14 +13,14 @@ type TypeRenderMethod<P> = (props: P) => React.ReactElement | null
 type TypeRenderMap<
   T extends TypeObject,
   TypeNames extends string,
-  TAdd extends Record<string, unknown>
+  TAdd extends Record<string, unknown>,
 > = {
   [K in TypeNames]: TypeRenderMethod<FilterTypeByTypename<T, K> & TAdd>
 }
 
 export type TypeRenderer<
   T extends TypeObject,
-  TAdd extends Record<string, unknown> = Record<string, unknown>
+  TAdd extends Record<string, unknown> = Record<string, unknown>,
 > = TypeRenderMap<T, T['__typename'], TAdd>
 
 /**
@@ -29,12 +29,12 @@ export type TypeRenderer<
  */
 export default function RenderType<
   T extends TypeObject,
-  A extends Record<string, unknown> = Record<string, unknown>
+  A extends Record<string, unknown> = Record<string, unknown>,
 >(props: { renderer: TypeRenderer<T, A> } & FilterTypeByTypename<T, T['__typename']> & A) {
   const { renderer, __typename, ...typeItemProps } = props
   const TypeItem: TypeRenderMethod<typeof typeItemProps> = renderer[__typename]
     ? renderer[__typename]
-    : () => <>{__typename}</>
+    : () => <>{process.env.NODE_ENV !== 'production' ? __typename : ''}</>
 
   return <TypeItem {...typeItemProps} __typename={__typename} />
 }

package/Row/ButtonLinkList/index.tsx

@@ -1,5 +1,4 @@
-import { Theme } from '@material-ui/core'
-import { makeStyles } from '@material-ui/styles'
+import { Theme, makeStyles } from '@material-ui/core'
 import React from 'react'
 import Row from '..'
 import SectionContainer from '../../SectionContainer'

package/Row/ContentLinks/index.tsx

@@ -8,14 +8,10 @@ const useStyles = makeStyles(
     root: {},
     scroller: {
       marginBottom: `${theme.spacings.lg}`,
-      display: 'grid',
-      gridAutoFlow: 'column',
       justifyContent: 'start',
       gap: `${theme.spacings.md}`,
       alignContent: 'center',
-      '& > *': {
-        minWidth: 'max-content',
-      },
+      gridAutoColumns: `max-content`,
     },
     title: {
       fontWeight: 600,

package/Row/HeroBanner/index.tsx

@@ -1,5 +1,4 @@
-import { ContainerProps, Theme } from '@material-ui/core'
-import { makeStyles } from '@material-ui/styles'
+import { ContainerProps, Theme, makeStyles } from '@material-ui/core'
 import { m, useTransform, useViewportScroll } from 'framer-motion'
 import React from 'react'
 import Row from '..'

package/Row/SpecialBanner/index.tsx

@@ -78,7 +78,7 @@ const useStyles = makeStyles(
 
 export type SpecialBannerProps = UseStyles<typeof useStyles> &
   ContainerProps & {
-    asset: React.ReactNode
+    asset?: React.ReactNode
     pageLinks?: React.ReactNode
     topic: React.ReactNode
     children: React.ReactNode

package/Snackbar/MessageSnackbarImpl.tsx

@@ -1,17 +1,16 @@
 import {
-  Button,
   Fab,
   makeStyles,
-  PropTypes,
   Snackbar,
   SnackbarContent,
   SnackbarProps,
   Theme,
+  Portal,
 } from '@material-ui/core'
 import clsx from 'clsx'
 import React, { useEffect, useState } from 'react'
-import SvgImage from '../SvgImage'
-import { iconClose } from '../icons'
+import SvgImageSimple from '../SvgImage/SvgImageSimple'
+import { iconClose, iconCheckmark, iconSadFace } from '../icons'
 
 type Size = 'normal' | 'wide'
 type Variant = 'contained' | 'pill'
@@ -42,10 +41,8 @@ const useStyles = makeStyles(
       },
     },
     rootPillLarge: {},
-    rootPillColorPrimary: {
-      backgroundColor: theme.palette.primary.main,
-      color: theme.palette.primary.contrastText,
-    },
+    rootPillSeverityInfo: {},
+    rootPillSeverityError: {},
     message: {
       width: '100%',
       padding: theme.spacings.xxs,
@@ -61,8 +58,9 @@ const useStyles = makeStyles(
       },
     },
     children: {
+      // display: 'flex',
       gridArea: 'children',
-      ...theme.typography.h4,
+      ...theme.typography.h6,
       fontWeight: 400,
 
       '& .MuiSvgIcon-root': {
@@ -111,21 +109,26 @@ const useStyles = makeStyles(
     sticky: {
       position: 'sticky',
     },
+    messageIcon: {
+      display: 'inline-block',
+      marginRight: 5,
+    },
   }),
   { name: 'MessageSnackbar' },
 )
 
 export type MessageSnackbarImplProps = Omit<
   SnackbarProps,
-  'autoHideDuration' | 'onClose' | 'anchorOrigin'
+  'autoHideDuration' | 'anchorOrigin' | 'color'
 > & {
   autoHide?: boolean
   sticky?: boolean
   variant?: Variant
   size?: Size
-  color?: PropTypes.Color
+  severity?: 'success' | 'info' | 'warning' | 'error'
   action?: React.ReactNode
   children?: React.ReactNode
+  onClose?: () => void
 }
 
 export default function MessageSnackbarImpl(props: MessageSnackbarImplProps) {
@@ -134,13 +137,14 @@ export default function MessageSnackbarImpl(props: MessageSnackbarImplProps) {
   const {
     variant = 'contained',
     size = 'normal',
-    color = 'default',
     autoHide,
     action,
     open,
     message,
     sticky,
     children,
+    onClose,
+    severity = 'info',
     ...snackbarProps
   } = props
 
@@ -150,53 +154,77 @@ export default function MessageSnackbarImpl(props: MessageSnackbarImplProps) {
     setShowSnackbar(!!open)
   }, [open])
 
+  const hideSnackbar = () => {
+    setShowSnackbar(false)
+    onClose?.()
+  }
+
   const clsxBonus = (base: string) => {
     const Size = size[0].toUpperCase() + size.slice(1)
-    const Color = color[0].toUpperCase() + color.slice(1)
+    const Severity = severity[0].toUpperCase() + severity.slice(1)
     const Variant = variant[0].toUpperCase() + variant.slice(1)
 
     return clsx(
       classes[base],
       classes[`${base}${Variant}`],
       classes[`${base}${Variant}Size${Size}`],
-      classes[`${base}${Variant}Color${Color}`],
+      classes[`${base}${Variant}Severity${Severity}`],
     )
   }
 
+  let icon = iconCheckmark
+  if (severity == 'error') icon = iconSadFace
+
   return (
-    <Snackbar
-      {...snackbarProps}
-      message={message}
-      anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}
-      open={showSnackbar}
-      autoHideDuration={autoHide ? 6000 : null}
-      classes={{
-        root: classes.snackbarRoot,
-        anchorOriginBottomCenter: clsx(classes.anchorOriginBottomCenter, sticky && classes.sticky),
-      }}
-    >
-      <SnackbarContent
+    <Portal>
+      <Snackbar
+        {...snackbarProps}
+        message={message}
+        anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}
+        open={showSnackbar}
+        autoHideDuration={autoHide ? 6000 : null}
         classes={{
-          root: clsxBonus('root'),
-          message: clsxBonus('message'),
-          action: clsxBonus('action'),
+          root: classes.snackbarRoot,
+          anchorOriginBottomCenter: clsx(
+            classes.anchorOriginBottomCenter,
+            sticky && classes.sticky,
+          ),
         }}
-        message={
-          <>
-            <div className={classes.children}>{children}</div>
-            {action && (
-              <div className={classes.actionButton} onClick={() => setShowSnackbar(false)}>
-                {action}
+        onClose={hideSnackbar}
+      >
+        <SnackbarContent
+          classes={{
+            root: clsxBonus('root'),
+            message: clsxBonus('message'),
+            action: clsxBonus('action'),
+          }}
+          message={
+            <>
+              <div className={classes.children}>
+                <div>
+                  <SvgImageSimple
+                    src={icon}
+                    alt='checkmark'
+                    size='large'
+                    className={classes.messageIcon}
+                  />
+                  {children}
+                </div>
+              </div>
+              {action && (
+                <div className={classes.actionButton} onClick={hideSnackbar}>
+                  {action}
+                </div>
+              )}
+              <div className={classes.closeButton}>
+                <Fab aria-label='Close snackbar' size='medium' onClick={hideSnackbar}>
+                  <SvgImageSimple src={iconClose} size='small' alt='close' />
+                </Fab>
               </div>
-            )}
-            <div className={classes.closeButton}>
-              <Fab aria-label='Close snackbar' size='medium' onClick={() => setShowSnackbar(false)}>
-                <SvgImage src={iconClose} size='small' alt='close' />
-              </Fab>
-            </div>
-          </>
-        }
-      />
-    </Snackbar>
+            </>
+          }
+        />
+      </Snackbar>
+    </Portal>
   )
 }

package/StyledBadge/index.tsx

@@ -1,5 +1,4 @@
-import { Badge } from '@material-ui/core'
-import { withStyles } from '@material-ui/styles'
+import { Badge, withStyles } from '@material-ui/core'
 
 const StyledBadge = withStyles((theme) => ({
   colorError: {},

package/index.ts

@@ -131,8 +131,6 @@ export * from './SectionHeader'
 export { default as SectionHeader } from './SectionHeader'
 export * from './Separator'
 export { default as Separator } from './Separator'
-export * from './Snackbar/ErrorSnackbar'
-export { default as ErrorSnackbar } from './Snackbar/ErrorSnackbar'
 export { default as MessageSnackbar } from './Snackbar/MessageSnackbar'
 export * from './Snackbar/MessageSnackbarImpl'
 export { default as MessageSnackbarImpl } from './Snackbar/MessageSnackbarImpl'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@graphcommerce/next-ui",
-  "version": "3.3.3",
+  "version": "3.7.0",
   "author": "",
   "license": "MIT",
   "scripts": {
@@ -11,7 +11,7 @@
   "dependencies": {
     "@apollo/client": "^3.4.16",
     "@graphcommerce/framer-next-pages": "^2.106.9",
-    "@graphcommerce/framer-scroller": "^0.2.11",
+    "@graphcommerce/framer-scroller": "^0.3.0",
     "@graphcommerce/framer-sheet": "^2.105.9",
     "@graphcommerce/framer-utils": "^2.103.8",
     "@graphcommerce/graphql": "^2.103.7",
@@ -55,5 +55,5 @@
       "project": "./tsconfig.json"
     }
   },
-  "gitHead": "996d782db6b91323acf71868a7790d608367d918"
+  "gitHead": "a7749d81f482a77bc6bcbf237aca551ed3b7a835"
 }

package/Snackbar/ErrorSnackbar.tsx

@@ -1,9 +0,0 @@
-import React from 'react'
-import MessageSnackbar from './MessageSnackbar'
-import { MessageSnackbarImplProps } from './MessageSnackbarImpl'
-
-export type ErrorSnackbarProps = Omit<MessageSnackbarImplProps, 'severity' | 'action'>
-
-export default function ErrorSnackbarImpl(props: ErrorSnackbarProps) {
-  return <MessageSnackbar {...props} />
-}