@graphcommerce/next-ui 3.20.9 → 3.21.0

package/ApolloError/ApolloErrorSnackbar.tsx

@@ -0,0 +1,35 @@
+import { ApolloError } from '@apollo/client'
+import { Trans } from '@lingui/macro'
+import Button from '../Button'
+import MessageSnackbar from '../Snackbar/MessageSnackbar'
+import { MessageSnackbarImplProps } from '../Snackbar/MessageSnackbarImpl'
+
+export type ApolloErrorSnackbarProps = {
+  error?: ApolloError
+} & Pick<MessageSnackbarImplProps, 'action' | 'onClose'>
+
+export default function ApolloErrorSnackbar(props: ApolloErrorSnackbarProps) {
+  const { error, action, ...passedProps } = props
+
+  if (!error) return null
+  return (
+    <MessageSnackbar
+      variant='pill'
+      severity='error'
+      {...passedProps}
+      open={!!error}
+      action={
+        action ?? (
+          <Button size='medium' variant='pill' color='secondary'>
+            <Trans>Ok</Trans>
+          </Button>
+        )
+      }
+    >
+      <>
+        {error.graphQLErrors.map((e) => e.message)}
+        {error.networkError && <>Network Error: {error.networkError.message}</>}
+      </>
+    </MessageSnackbar>
+  )
+}

package/ApolloError/index.ts

@@ -0,0 +1,6 @@
+export * from './ApolloErrorAlert'
+export { default as ApolloErrorAlert } from './ApolloErrorAlert'
+export * from './ApolloErrorFullPage'
+export { default as ApolloErrorFullPage } from './ApolloErrorFullPage'
+export * from './ApolloErrorSnackbar'
+export { default as ApolloErrorSnackbar } from './ApolloErrorSnackbar'

package/AppShell/GlobalHead.tsx

@@ -4,7 +4,7 @@ import React from 'react'
 
 export type GlobalHeadProps = { name: string }
 
-const GlobalHead = (props: { name: string }) => {
+export function GlobalHead(props: GlobalHeadProps) {
   const { name } = props
   const theme = useTheme()
 
@@ -32,5 +32,3 @@ const GlobalHead = (props: { name: string }) => {
     </Head>
   )
 }
-
-export default GlobalHead

package/AppShell/MenuFab.tsx

@@ -17,7 +17,7 @@ import { responsiveVal } from '../Styles/responsiveVal'
 import SvgImageSimple from '../SvgImage/SvgImageSimple'
 import { iconMenu, iconClose } from '../icons'
 import { MenuProps } from './Menu'
-import useFabAnimation from './useFabAnimation'
+import { useFabAnimation } from './useFabAnimation'
 
 const useStyles = makeStyles(
   (theme: Theme) => ({

package/AppShell/MenuFabSecondaryItem.tsx

@@ -17,7 +17,7 @@ export type FabMenuSecondaryItemProps = {
   icon: React.ReactNode
 }
 
-export default function MenuFabSecondaryItem(props: FabMenuSecondaryItemProps) {
+export function MenuFabSecondaryItem(props: FabMenuSecondaryItemProps) {
   const { href, children, icon } = props
   const classes = useStyles()
 

package/AppShell/{index.tsx → index.ts}

@@ -11,9 +11,7 @@ export * from './Menu'
 export * from './MenuFab'
 export { default as MenuFab } from './MenuFab'
 export * from './MenuFabSecondaryItem'
-export { default as MenuFabSecondaryItem } from './MenuFabSecondaryItem'
 export * from './PlaceholderFab'
 export * from './GlobalHead'
-export { default as GlobalHead } from './GlobalHead'
-export { default as useFabAnimation } from './useFabAnimation'
-export { default as useFixedFabAnimation } from './useFixedFabAnimation'
+export * from './useFabAnimation'
+export * from './useFixedFabAnimation'

package/AppShell/{useFabAnimation.tsx → useFabAnimation.ts}

@@ -2,7 +2,7 @@ import { useMediaQuery, useTheme } from '@material-ui/core'
 import { useMotionTemplate, useTransform } from 'framer-motion'
 import { useScrollY } from '../Layout/hooks/useScrollY'
 
-export default function useFabAnimation() {
+export function useFabAnimation() {
   const theme = useTheme()
   const isMobile = useMediaQuery(theme.breakpoints.down('sm'))
   const scrollY = useScrollY()

package/AppShell/{useFixedFabAnimation.tsx → useFixedFabAnimation.ts}

@@ -2,7 +2,7 @@ import { alpha, useTheme } from '@material-ui/core'
 import { useMotionTemplate, useTransform } from 'framer-motion'
 import { useScrollY } from '../Layout/hooks/useScrollY'
 
-export default function useFixedFabAnimation() {
+export function useFixedFabAnimation() {
   const theme = useTheme()
   const scrollY = useScrollY()
   const opacity = useTransform(scrollY, [50, 60], [0, 1])

package/CHANGELOG.md

@@ -3,6 +3,23 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [3.21.0](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/next-ui@3.20.9...@graphcommerce/next-ui@3.21.0) (2021-12-17)
+
+
+### Bug Fixes
+
+* Form contained should be less spacious ([7d9557e](https://github.com/ho-nl/m2-pwa/commit/7d9557e9a75622a3dc40a3c7aab86da152d2e399))
+* make sure the snackbar message is formatted correctly ([b9e1e26](https://github.com/ho-nl/m2-pwa/commit/b9e1e2623ec2aff6b623603aa38fe8d71ff59e1c))
+
+
+### Features
+
+* added ApolloErrorSnackbar ([96bc92e](https://github.com/ho-nl/m2-pwa/commit/96bc92e24bac735b28f5f32e1154f715ddf8cd6c))
+
+
+
+
+
 ## [3.20.9](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/next-ui@3.20.8...@graphcommerce/next-ui@3.20.9) (2021-12-16)
 
 

package/Form/index.tsx

@@ -21,7 +21,7 @@ const useStyles = makeStyles(
           : lighten(theme.palette.background.default, 0.2),
     },
     contained: {
-      padding: theme.spacings.sm,
+      padding: `${theme.spacings.xxs} ${theme.spacings.sm}`,
       // paddingTop: theme.spacings.md,
       overflow: 'hidden',
       borderRadius: responsiveVal(theme.shape.borderRadius * 3, theme.shape.borderRadius * 4),

package/LayoutOverlay/components/LayoutOverlayBase.tsx

@@ -291,6 +291,7 @@ export function LayoutOverlayBase(props: LayoutOverlayBaseProps) {
     // The scroller context shouldn't be changing, but at the moment it is.
   }, [positions, scrollerRef])
 
+  // When the overlay is closed by navigating away, we're closing the overlay.
   useEffect(() => {
     if (isPresent) return
 

package/Snackbar/MessageSnackbarImpl.tsx

@@ -51,10 +51,12 @@ const useStyles = makeStyles(
       gap: theme.spacings.xs,
       gridTemplate: `
         "children close"
-        "action action"
+        "action   action"
       `,
+      gridTemplateColumns: '1fr auto',
       [theme.breakpoints.up('md')]: {
         gridTemplate: `"children action close"`,
+        gridTemplateColumns: 'auto auto auto',
       },
     },
     children: {

package/index.ts

@@ -6,10 +6,7 @@ export * from './Footer'
 
 export * from './AnimatedRow'
 export { default as AnimatedRow } from './AnimatedRow'
-export * from './ApolloError/ApolloErrorAlert'
-export { default as ApolloErrorAlert } from './ApolloError/ApolloErrorAlert'
-export * from './ApolloError/ApolloErrorFullPage'
-export { default as ApolloErrorFullPage } from './ApolloError/ApolloErrorFullPage'
+export * from './ApolloError'
 export * from './AspectRatioContainer'
 export { default as AspectRationContainer } from './AspectRatioContainer'
 export * from './Blog/BlogContent'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@graphcommerce/next-ui",
-  "version": "3.20.9",
+  "version": "3.21.0",
   "author": "",
   "license": "MIT",
   "scripts": {
@@ -10,10 +10,10 @@
   },
   "dependencies": {
     "@apollo/client": "^3.5.6",
-    "@graphcommerce/framer-next-pages": "^2.108.3",
-    "@graphcommerce/framer-scroller": "^1.1.9",
+    "@graphcommerce/framer-next-pages": "^2.108.4",
+    "@graphcommerce/framer-scroller": "^1.1.10",
     "@graphcommerce/framer-utils": "^2.103.19",
-    "@graphcommerce/graphql": "^2.105.8",
+    "@graphcommerce/graphql": "^2.105.9",
     "@graphcommerce/image": "^2.105.8",
     "@lingui/macro": "^3.13.0",
     "@material-ui/core": "^4.12.3",
@@ -52,5 +52,5 @@
       "project": "./tsconfig.json"
     }
   },
-  "gitHead": "874fc99dcc129872cd7577482ab26c5ea256a7fb"
+  "gitHead": "f18eba6b141623d926f5ae3a6efc1409d3bd365c"
 }