@graphcommerce/next-ui 3.5.0 → 3.8.0

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/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,44 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [3.8.0](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/next-ui@3.7.1...@graphcommerce/next-ui@3.8.0) (2021-10-21)
+
+
+### Features
+
+* **graphql-mesh:** remove the api project and use a single project 🎉👩‍👩‍👦‍👦 ([ea4ad03](https://github.com/ho-nl/m2-pwa/commit/ea4ad0397d4ff289ef3b3253593fb0914c8c5246))
+
+
+
+
+
+# [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)
 
 

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/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/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.5.0",
+  "version": "3.8.0",
   "author": "",
   "license": "MIT",
   "scripts": {
@@ -10,12 +10,12 @@
   },
   "dependencies": {
     "@apollo/client": "^3.4.16",
-    "@graphcommerce/framer-next-pages": "^2.106.9",
-    "@graphcommerce/framer-scroller": "^0.2.11",
-    "@graphcommerce/framer-sheet": "^2.105.9",
-    "@graphcommerce/framer-utils": "^2.103.8",
-    "@graphcommerce/graphql": "^2.103.7",
-    "@graphcommerce/image": "^2.104.10",
+    "@graphcommerce/framer-next-pages": "^2.106.11",
+    "@graphcommerce/framer-scroller": "^0.3.2",
+    "@graphcommerce/framer-sheet": "^2.105.11",
+    "@graphcommerce/framer-utils": "^2.103.10",
+    "@graphcommerce/graphql": "^2.104.0",
+    "@graphcommerce/image": "^2.104.12",
     "@graphql-typed-document-node/core": "^3.1.0",
     "@material-ui/core": "^4.12.3",
     "@material-ui/lab": "^4.0.0-alpha.60",
@@ -31,15 +31,14 @@
     "react-is": "^17.0.2",
     "react-schemaorg": "^2.0.0",
     "schema-dts": "^1.0.0",
-    "type-fest": "^2.5.0"
+    "type-fest": "^2.5.1"
   },
   "devDependencies": {
     "@graphcommerce/browserslist-config-pwa": "^3.0.2",
-    "@graphcommerce/eslint-config-pwa": "^3.0.7",
+    "@graphcommerce/eslint-config-pwa": "^3.1.0",
     "@graphcommerce/prettier-config-pwa": "^3.0.3",
     "@graphcommerce/typescript-config-pwa": "^3.1.1",
     "@playwright/test": "^1.15.2",
-    "@types/react-dom": "^17.0.9",
     "@types/react-is": "^17.0.2",
     "graphql-tag": "2.12.5",
     "typescript": "^4.4.4"
@@ -55,5 +54,5 @@
       "project": "./tsconfig.json"
     }
   },
-  "gitHead": "08f4dbe739a38ece2c47aa1e94c10f8397da27fa"
+  "gitHead": "5a288cb32af2e48278c330ffb36d72be03700ffd"
 }

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