@graphcommerce/next-ui 3.1.5 → 3.1.6

package/ApolloError/ApolloErrorFullPage.tsx

@@ -11,15 +11,22 @@ export type ApolloErrorFullPageProps = {
 } & Omit<FullPageMessageProps, 'title' | 'description'>
 
 export default function ApolloErrorFullPage(props: ApolloErrorFullPageProps) {
-  const { error, graphqlErrorAlertProps, networkErrorAlertProps, ...fullPageMessageProps } = props
+  const {
+    error,
+    graphqlErrorAlertProps,
+    networkErrorAlertProps,
+    children,
+    ...fullPageMessageProps
+  } = props
 
   const singleError = error?.graphQLErrors.length === 1
 
   return (
     <FullPageMessage
       title={singleError ? error?.graphQLErrors[0].message : 'Several errors occured'}
-      description={singleError ? undefined : <ApolloErrorAlert error={error} />}
       {...fullPageMessageProps}
-    />
+    >
+      {singleError ? children : <ApolloErrorAlert error={error} />}
+    </FullPageMessage>
   )
 }

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [3.1.6](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/next-ui@3.1.5...@graphcommerce/next-ui@3.1.6) (2021-10-07)
+
+
+### Bug Fixes
+
+* Form component added classes attribute ([269fd46](https://github.com/ho-nl/m2-pwa/commit/269fd4629cedcaab74043604ac21a4557b4e514f))
+
+
+
+
+
 ## [3.1.4](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/next-ui@3.1.3...@graphcommerce/next-ui@3.1.4) (2021-10-06)
 
 

package/Form/index.tsx

@@ -46,7 +46,7 @@ export type DivFormProps = BaseFormProps & JSX.IntrinsicElements['div']
 
 export const FormDiv = React.forwardRef<HTMLDivElement, DivFormProps>((props, ref) => {
   const classes = useStyles(props)
-  const { contained, background = 'default', ...formProps } = props
+  const { contained, background = 'default', classes: _classes, ...formProps } = props
 
   return (
     <div

package/FullPageMessage/index.tsx

@@ -1,21 +1,22 @@
 import { Container, Theme, Typography } from '@material-ui/core'
 import { makeStyles } from '@material-ui/styles'
+import clsx from 'clsx'
 import React from 'react'
-import PageMeta from '../PageMeta'
 import responsiveVal from '../Styles/responsiveVal'
 
 const useStyles = makeStyles(
   (theme: Theme) => ({
     root: {
-      marginTop: responsiveVal(50, 250),
       alignItems: 'center',
+      marginTop: theme.spacings.md,
+      marginBottom: theme.spacings.md,
+    },
+    rootMargin: {
+      marginTop: responsiveVal(50, 250),
     },
     subject: {
       textAlign: 'center',
-      margin: `${theme.spacings.sm} 0`,
-    },
-    description: {
-      marginTop: 8,
+      marginTop: theme.spacings.sm,
     },
     innerContainer: {
       display: 'grid',
@@ -23,6 +24,9 @@ const useStyles = makeStyles(
       justifyItems: 'center',
     },
     button: {
+      marginTop: theme.spacings.sm,
+    },
+    altButton: {
       marginTop: 6,
     },
   }),
@@ -34,34 +38,34 @@ const useStyles = makeStyles(
 export type FullPageMessageProps = {
   icon: React.ReactNode
   title: React.ReactNode
-  description?: React.ReactNode
+  children?: React.ReactNode
   button?: React.ReactNode
   altButton?: React.ReactNode
+  disableMargin?: boolean
 }
 
 export default function FullPageMessage(props: FullPageMessageProps) {
-  const { icon, title, description, button, altButton } = props
+  const { icon, title, children, button, altButton, disableMargin = false } = props
   const classes = useStyles()
 
   return (
-    <div className={classes.root}>
+    <div className={clsx(classes.root, disableMargin || classes.rootMargin)}>
       <Container maxWidth='md' className={classes.innerContainer}>
-        <PageMeta title='Account' metaDescription='Account Dashboard' metaRobots={['noindex']} />
         {icon}
 
         <div className={classes.subject}>
-          <Typography component='h2' variant='h4'>
+          <Typography variant='h3' gutterBottom>
             {title}
           </Typography>
-          {description && (
-            <Typography component='p' variant='body1' className={classes.description}>
-              {description}
+          {children && (
+            <Typography component='div' variant='body1'>
+              {children}
             </Typography>
           )}
         </div>
 
-        <div>{button}</div>
-        <div className={classes.button}>{altButton}</div>
+        <div className={classes.button}>{button}</div>
+        <div className={classes.altButton}>{altButton}</div>
       </Container>
     </div>
   )

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@graphcommerce/next-ui",
-  "version": "3.1.5",
+  "version": "3.1.6",
   "author": "",
   "license": "MIT",
   "scripts": {
@@ -11,7 +11,7 @@
   "dependencies": {
     "@apollo/client": "^3.4.16",
     "@graphcommerce/framer-next-pages": "^2.106.6",
-    "@graphcommerce/framer-scroller": "^0.2.6",
+    "@graphcommerce/framer-scroller": "^0.2.7",
     "@graphcommerce/framer-sheet": "^2.105.5",
     "@graphcommerce/framer-utils": "^2.103.5",
     "@graphcommerce/graphql": "^2.103.5",
@@ -55,5 +55,5 @@
       "project": "./tsconfig.json"
     }
   },
-  "gitHead": "f1d0e488921787f39a260c410790ec13d32c8143"
+  "gitHead": "717bd3c1658e421c247c1f8b210935cdb7780197"
 }