@graphcommerce/next-ui 3.3.2 → 3.6.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()
 
@@ -94,7 +99,11 @@ 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 {...LinkProps} className={clsx(classes.link, LinkProps?.className)}>
+              <Link
+                variant='h6'
+                {...LinkProps}
+                className={clsx(classes.link, LinkProps?.className)}
+              >
                 {children}
                 <div
                   className={clsx(
@@ -113,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>
 
@@ -123,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/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/CHANGELOG.md

@@ -3,6 +3,50 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [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)
+
+
+### Bug Fixes
+
+* regression in header ([4738fb7](https://github.com/ho-nl/m2-pwa/commit/4738fb7e13fb3be187f58b474219497783525d72))
+
+
+
+
+
 # [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)
 
 

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/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/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.2",
+  "version": "3.6.0",
   "author": "",
   "license": "MIT",
   "scripts": {
@@ -55,5 +55,5 @@
       "project": "./tsconfig.json"
     }
   },
-  "gitHead": "5e31b902147a68bfce513451e4e10d1c74d23823"
+  "gitHead": "beb4b83268176f7c6579cee2fe844752315e2378"
 }

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} />
-}