@graphcommerce/next-ui 7.1.0-canary.53 → 7.1.0-canary.55

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Change Log
 
+## 7.1.0-canary.55
+
+### Patch Changes
+
+- [#2004](https://github.com/graphcommerce-org/graphcommerce/pull/2004) [`da2135744`](https://github.com/graphcommerce-org/graphcommerce/commit/da2135744dddfa0d211c59589090ebb1977c38c9) - Added info icon for Snackbar when severity is set to info ([@bramvanderholst](https://github.com/bramvanderholst))
+
+- [#2004](https://github.com/graphcommerce-org/graphcommerce/pull/2004) [`d608830ce`](https://github.com/graphcommerce-org/graphcommerce/commit/d608830ce77f85ff725cc106b9fc55a22012c74c) - Added ‘disableBackdropClick’ prop to MessageSnackbar to allow page interaction without closing the snackbar ([@bramvanderholst](https://github.com/bramvanderholst))
+
+- [#2004](https://github.com/graphcommerce-org/graphcommerce/pull/2004) [`94e1ae811`](https://github.com/graphcommerce-org/graphcommerce/commit/94e1ae811fe9eb0051863e8be91c6399ddcdf22f) - Added DismissibleSnackbar component to allow messages to be shown only once ([@bramvanderholst](https://github.com/bramvanderholst))
+
+- [#2004](https://github.com/graphcommerce-org/graphcommerce/pull/2004) [`53947d39f`](https://github.com/graphcommerce-org/graphcommerce/commit/53947d39f2f3ee578c14903c96a2b356d99d9475) - Implemented Message variant for RowColumnOne to show an important message which, after dismissing, will not show again ([@bramvanderholst](https://github.com/bramvanderholst))
+
+## 7.1.0-canary.54
+
 ## 7.1.0-canary.53
 
 ## 7.1.0-canary.52

package/Row/ColumnOne/variant/VariantMessage.tsx

@@ -0,0 +1,12 @@
+import {
+  DismissibleSnackbar,
+  DismissibleSnackbarProps,
+} from '../../../Snackbar/DismissibleSnackbar'
+
+export type VariantMessageProps = DismissibleSnackbarProps
+
+export function VariantMessage(props: VariantMessageProps) {
+  const { ...rest } = props
+
+  return <DismissibleSnackbar variant='pill' severity='info' disableBackdropClick {...rest} />
+}

package/Row/ColumnOne/variant/index.ts

@@ -0,0 +1 @@
+export * from './VariantMessage'

package/Row/index.ts

@@ -1,6 +1,7 @@
 export * from './Row'
 export * from './ButtonLinkList'
 export * from './ColumnOne/ColumnOne'
+export * from './ColumnOne/variant'
 export * from './ColumnOneBoxed/ColumnOneBoxed'
 export * from './ColumnOneCentered/ColumnOneCentered'
 export * from './ColumnThree/ColumnThree'

package/Snackbar/DismissibleSnackbar.tsx

@@ -0,0 +1,28 @@
+import { useEffect, useState } from 'react'
+import { MessageSnackbar } from './MessageSnackbar'
+import { MessageSnackbarProps } from './MessageSnackbarImpl'
+
+export type DismissibleSnackbarProps = MessageSnackbarProps & {
+  id: string
+  storageType?: 'localStorage' | 'sessionStorage'
+}
+export function DismissibleSnackbar(props: DismissibleSnackbarProps) {
+  const { storageType = 'localStorage', id, onClose, ...rest } = props
+  const messageId = `DismissibleSnackbar_${id}`
+  const [open, setOpen] = useState(false)
+
+  useEffect(() => {
+    setOpen(!globalThis[storageType]?.getItem(messageId))
+  }, [messageId, storageType])
+
+  return (
+    <MessageSnackbar
+      {...rest}
+      open={open}
+      onClose={() => {
+        globalThis[storageType]?.setItem(messageId, `${Date.now()}`)
+        onClose?.()
+      }}
+    />
+  )
+}

package/Snackbar/MessageSnackbarImpl.tsx

@@ -14,6 +14,7 @@ import React, { useEffect, useState } from 'react'
 import { IconSvg } from '../IconSvg'
 import { extendableComponent, breakpointVal } from '../Styles'
 import { iconClose, iconCheckmark, iconSadFace } from '../icons'
+import iconInfo from '../icons/info.svg'
 
 type Size = 'normal' | 'wide'
 type Variant = 'contained' | 'pill'
@@ -34,6 +35,10 @@ type OwnerState = {
   size?: Size
   severity?: 'success' | 'info' | 'warning' | 'error'
   variant?: Variant
+  /**
+   * Setting this to true allows interaction with the rest of the page without closing the Snackbar
+   */
+  disableBackdropClick?: boolean
 }
 
 const name = 'MessageSnackbarImpl' as const
@@ -56,6 +61,7 @@ export default function MessageSnackbarImpl(props: MessageSnackbarProps) {
     onClose,
     severity = 'info',
     sx,
+    disableBackdropClick,
     ...snackbarProps
   } = props
 
@@ -65,7 +71,11 @@ export default function MessageSnackbarImpl(props: MessageSnackbarProps) {
     setShowSnackbar(!!open)
   }, [open])
 
-  const hideSnackbar = () => {
+  const hideSnackbar = (event: React.SyntheticEvent | Event, reason?: string) => {
+    if (disableBackdropClick && reason === 'clickaway') {
+      return
+    }
+
     setShowSnackbar(false)
     onClose?.()
   }
@@ -80,6 +90,7 @@ export default function MessageSnackbarImpl(props: MessageSnackbarProps) {
   }
 
   let icon = iconCheckmark
+  if (severity === 'info') icon = iconInfo
   if (severity === 'error') icon = iconSadFace
 
   return (
@@ -91,7 +102,13 @@ export default function MessageSnackbarImpl(props: MessageSnackbarProps) {
         open={showSnackbar}
         autoHideDuration={autoHide ? 5000 : null}
         className={classes.root}
-        sx={sx}
+        sx={[
+          {
+            pointerEvents: 'none',
+            '& > *': { pointerEvents: 'auto' },
+          },
+          ...(Array.isArray(sx) ? sx : [sx]),
+        ]}
         onClose={hideSnackbar}
       >
         <SnackbarContent

package/Theme/MuiSnackbar.ts

@@ -22,8 +22,10 @@ export const MuiSnackbar: SnackbarVariants = [
           },
         },
       '&.MuiSnackbar-anchorOriginBottomCenter': {
-        left: 0,
-        right: 0,
+        [theme.breakpoints.up('md')]: {
+          left: theme.page.horizontal,
+          right: theme.page.horizontal,
+        },
         transform: 'unset',
       },
     }),

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/next-ui",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "7.1.0-canary.53",
+  "version": "7.1.0-canary.55",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -26,13 +26,13 @@
     "typescript": "5.2.2"
   },
   "peerDependencies": {
-    "@graphcommerce/eslint-config-pwa": "^7.1.0-canary.53",
-    "@graphcommerce/framer-next-pages": "^7.1.0-canary.53",
-    "@graphcommerce/framer-scroller": "^7.1.0-canary.53",
-    "@graphcommerce/framer-utils": "^7.1.0-canary.53",
-    "@graphcommerce/image": "^7.1.0-canary.53",
-    "@graphcommerce/prettier-config-pwa": "^7.1.0-canary.53",
-    "@graphcommerce/typescript-config-pwa": "^7.1.0-canary.53",
+    "@graphcommerce/eslint-config-pwa": "^7.1.0-canary.55",
+    "@graphcommerce/framer-next-pages": "^7.1.0-canary.55",
+    "@graphcommerce/framer-scroller": "^7.1.0-canary.55",
+    "@graphcommerce/framer-utils": "^7.1.0-canary.55",
+    "@graphcommerce/image": "^7.1.0-canary.55",
+    "@graphcommerce/prettier-config-pwa": "^7.1.0-canary.55",
+    "@graphcommerce/typescript-config-pwa": "^7.1.0-canary.55",
     "@lingui/core": "^4.2.1",
     "@lingui/macro": "^4.2.1",
     "@lingui/react": "^4.2.1",