@graphcommerce/next-ui 3.20.7 → 3.21.1

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,57 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [3.21.1](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/next-ui@3.21.0...@graphcommerce/next-ui@3.21.1) (2021-12-17)
+
+
+### Bug Fixes
+
+* darkMode fixes ([7d33d45](https://github.com/ho-nl/m2-pwa/commit/7d33d452ec801632565839b2fdfef0bc4959c14a))
+
+
+
+
+
+# [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)
+
+
+### Bug Fixes
+
+* simplify ButtonLinkList and made  more flexible ([e01cc82](https://github.com/ho-nl/m2-pwa/commit/e01cc825b87abf81d1cb8f9dc976f674b9e8e6d3))
+
+
+
+
+
+## [3.20.8](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/next-ui@3.20.7...@graphcommerce/next-ui@3.20.8) (2021-12-15)
+
+
+### Bug Fixes
+
+* could not scroll to the bottom of a left/right sheet ([b84c86e](https://github.com/ho-nl/m2-pwa/commit/b84c86efa090657fc4cd480547f576bf6d9e0709))
+* scroller should not snap to off-axis while dragging and direction isn't set to both ([9118bfc](https://github.com/ho-nl/m2-pwa/commit/9118bfcb1eb9ade5f144167e47e0c26724ce832f))
+
+
+
+
+
 ## [3.20.7](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/next-ui@3.20.6...@graphcommerce/next-ui@3.20.7) (2021-12-13)
 
 

package/Form/index.tsx

@@ -18,10 +18,10 @@ const useStyles = makeStyles(
       background:
         theme.palette.type === 'light'
           ? darken(theme.palette.background.default, 0.03)
-          : lighten(theme.palette.background.default, 0.2),
+          : lighten(theme.palette.background.default, 0.1),
     },
     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/FramerScroller/components/SidebarGallery.tsx

@@ -11,12 +11,11 @@ import {
 } from '@graphcommerce/framer-scroller'
 import { clientSize, useMotionValueValue } from '@graphcommerce/framer-utils'
 import { Fab, makeStyles, Theme, useTheme, alpha } from '@material-ui/core'
-import clsx from 'clsx'
 import { m, useDomEvent, useMotionValue } from 'framer-motion'
 import React, { useEffect, useRef } from 'react'
-import { classesPicker } from '../..'
 import Row from '../../Row'
 import { UseStyles } from '../../Styles'
+import { classesPicker } from '../../Styles/classesPicker'
 import { responsiveVal } from '../../Styles/responsiveVal'
 import SvgImageSimple from '../../SvgImage/SvgImageSimple'
 import { iconChevronLeft, iconChevronRight, iconFullscreen, iconFullscreenExit } from '../../icons'

package/LayoutOverlay/components/LayoutOverlay.tsx

@@ -11,9 +11,9 @@ export function LayoutOverlay(props: LayoutOverlayProps) {
   const { children, variantSm = 'bottom', variantMd = 'right', classes } = props
 
   const scrollSnapTypeSm: ScrollSnapType =
-    variantSm === 'left' || variantSm === 'right' ? 'both mandatory' : 'block proximity'
+    variantSm === 'left' || variantSm === 'right' ? 'inline mandatory' : 'block proximity'
   const scrollSnapTypeMd: ScrollSnapType =
-    variantMd === 'left' || variantMd === 'right' ? 'both mandatory' : 'block proximity'
+    variantMd === 'left' || variantMd === 'right' ? 'inline mandatory' : 'block proximity'
 
   return (
     <ScrollerProvider scrollSnapTypeSm={scrollSnapTypeSm} scrollSnapTypeMd={scrollSnapTypeMd}>

package/LayoutOverlay/components/LayoutOverlayBase.tsx

@@ -28,43 +28,43 @@ const useStyles = makeStyles(
       },
       [theme.breakpoints.down('sm')]: {
         width: '100vw',
-        borderRadius: theme.shape.borderRadius * 3,
       },
       [theme.breakpoints.up('md')]: {
         width: '100vw',
-        borderRadius: theme.shape.borderRadius * 4,
       },
     },
     rootVariantSmLeft: {
       [theme.breakpoints.down('sm')]: {
         gridTemplate: `"overlay beforeOverlay"`,
-        borderTopLeftRadius: 0,
-        borderBottomLeftRadius: 0,
+        borderTopRightRadius: theme.shape.borderRadius * 3,
+        borderBottomRightRadius: theme.shape.borderRadius * 3,
       },
     },
     rootVariantMdLeft: {
       [theme.breakpoints.up('md')]: {
         gridTemplate: `"overlay beforeOverlay"`,
-        borderTopLeftRadius: 0,
-        borderBottomLeftRadius: 0,
+        borderTopRightRadius: theme.shape.borderRadius * 4,
+        borderBottomRightRadius: theme.shape.borderRadius * 4,
       },
     },
     rootVariantSmRight: {
       [theme.breakpoints.down('sm')]: {
         gridTemplate: `"beforeOverlay overlay"`,
-        borderTopRightRadius: 0,
-        borderBottomRightRadius: 0,
+        borderTopLeftRadius: theme.shape.borderRadius * 3,
+        borderBottomLeftRadius: theme.shape.borderRadius * 3,
       },
     },
     rootVariantMdRight: {
       [theme.breakpoints.up('md')]: {
         gridTemplate: `"beforeOverlay overlay"`,
-        borderTopRightRadius: 0,
-        borderBottomRightRadius: 0,
+        borderTopLeftRadius: theme.shape.borderRadius * 4,
+        borderBottomLeftRadius: theme.shape.borderRadius * 4,
       },
     },
     rootVariantSmBottom: {
       [theme.breakpoints.down('sm')]: {
+        borderTopLeftRadius: theme.shape.borderRadius * 3,
+        borderTopRightRadius: theme.shape.borderRadius * 3,
         gridTemplate: `"beforeOverlay" "overlay"`,
         height: '100vh',
         '@supports (-webkit-touch-callout: none)': {
@@ -73,6 +73,8 @@ const useStyles = makeStyles(
       },
     },
     rootVariantMdBottom: {
+      borderTopLeftRadius: theme.shape.borderRadius * 4,
+      borderTopRightRadius: theme.shape.borderRadius * 4,
       [theme.breakpoints.up('md')]: {
         gridTemplate: `"beforeOverlay" "overlay"`,
         height: '100vh',
@@ -81,7 +83,6 @@ const useStyles = makeStyles(
     beforeOverlay: {
       gridArea: 'beforeOverlay',
       scrollSnapAlign: 'start',
-      scrollSnapStop: 'always',
       display: 'grid',
       alignContent: 'end',
     },
@@ -134,7 +135,6 @@ const useStyles = makeStyles(
       [theme.breakpoints.down('sm')]: {
         marginTop: `calc(${theme.appShell.headerHeightSm} * 0.5 * -1)`,
         paddingTop: `calc(${theme.appShell.headerHeightSm} * 0.5)`,
-        scrollSnapStop: 'always',
         display: 'grid',
       },
     },
@@ -142,8 +142,6 @@ const useStyles = makeStyles(
       [theme.breakpoints.up('md')]: {
         marginTop: `calc(${theme.appShell.headerHeightMd} + (${theme.appShell.appBarHeightMd} - ${theme.appShell.appBarInnerHeightMd}) * 0.5)`,
         paddingTop: `calc(${theme.appShell.headerHeightMd} + (${theme.appShell.appBarHeightMd} - ${theme.appShell.appBarInnerHeightMd}) * -0.5)`,
-        scrollSnapAlign: 'start',
-        scrollSnapStop: 'always',
         display: 'grid',
       },
     },
@@ -152,17 +150,20 @@ const useStyles = makeStyles(
       backgroundColor: theme.palette.background.paper,
       boxShadow: theme.shadows[24],
       minWidth: 'min(800px, 90vw)',
+      scrollSnapAlign: 'end',
     },
     overlayPaneVariantSmBottom: {
       [theme.breakpoints.down('sm')]: {
         width: '100vw',
-        borderRadius: theme.shape.borderRadius * 3,
+        borderTopLeftRadius: theme.shape.borderRadius * 3,
+        borderTopRightRadius: theme.shape.borderRadius * 3,
       },
     },
     overlayPaneVariantMdBottom: {
       [theme.breakpoints.up('md')]: {
         width: '100vw',
-        borderRadius: theme.shape.borderRadius * 4,
+        borderTopLeftRadius: theme.shape.borderRadius * 3,
+        borderTopRightRadius: theme.shape.borderRadius * 3,
       },
     },
     overlayPaneVariantSmLeft: {
@@ -290,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/Row/ButtonLinkList/{index.tsx → ButtonLinkList.tsx}

@@ -32,20 +32,20 @@ const useStyles = makeStyles(
 
 type ButtonLinkListPropsBase = {
   title: string
-  links: React.ReactNode
+  children: React.ReactNode
   containsBigLinks: boolean
 }
 
 export type ButtonLinkListProps = UseStyles<typeof useStyles> & ButtonLinkListPropsBase
 
-export default function ButtonLinkList(props: ButtonLinkListProps) {
-  const { title, links } = props
+export function ButtonLinkList(props: ButtonLinkListProps) {
+  const { title, children } = props
   const classes = useStyles(props)
 
   return (
     <Row maxWidth='md' className={classes.container}>
       <SectionContainer labelLeft={title}>
-        <div className={classes.links}>{links}</div>
+        <div className={classes.links}>{children}</div>
       </SectionContainer>
     </Row>
   )

package/{ButtonLink/index.tsx → Row/ButtonLinkList/ButtonLinkListItem.tsx}

@@ -1,10 +1,11 @@
 import { makeStyles, Theme } from '@material-ui/core'
+import clsx from 'clsx'
 import PageLink from 'next/link'
 import React from 'react'
-import Button, { ButtonProps } from '../Button'
-import { UseStyles } from '../Styles'
-import SvgImageSimple from '../SvgImage/SvgImageSimple'
-import { iconChevronRight } from '../icons'
+import Button, { ButtonProps } from '../../Button'
+import { UseStyles } from '../../Styles'
+import SvgImageSimple from '../../SvgImage/SvgImageSimple'
+import { iconChevronRight } from '../../icons'
 
 const useStyles = makeStyles((theme: Theme) => ({
   buttonLink: {
@@ -24,20 +25,20 @@ const useStyles = makeStyles((theme: Theme) => ({
 }))
 
 export type ButtonLinkProps = {
-  title: string | React.ReactNode
+  children: React.ReactNode
   url: string
   endIcon?: React.ReactNode
 } & ButtonProps &
   UseStyles<typeof useStyles>
 
-export default function ButtonLink(props: ButtonLinkProps) {
-  const { title, url, endIcon, ...buttonProps } = props
+export function ButtonLinkListItem(props: ButtonLinkProps) {
+  const { children, url, endIcon, className, ...buttonProps } = props
   const classes = useStyles(props)
 
   return (
     <PageLink href={url} passHref>
-      <Button {...buttonProps} className={classes.buttonLink}>
-        <span>{title}</span>
+      <Button {...buttonProps} className={clsx(classes.buttonLink, className)}>
+        <span>{children}</span>
         {endIcon ?? <SvgImageSimple src={iconChevronRight} />}
       </Button>
     </PageLink>

package/Row/ButtonLinkList/index.ts

@@ -0,0 +1,2 @@
+export * from './ButtonLinkList'
+export * from './ButtonLinkListItem'

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'
@@ -27,8 +24,7 @@ export * from './Blog/BlogListItem'
 export { default as BlogListItem } from './Blog/BlogListItem'
 export * from './Button'
 export { default as Button } from './Button'
-export * from './ButtonLink'
-export { default as ButtonLink } from './ButtonLink'
+
 export * from './ChipMenu'
 export { default as ChipMenu } from './ChipMenu'
 export * from './ContainerWithHeader'
@@ -66,7 +62,6 @@ export * from './RenderType'
 export { default as RenderType } from './RenderType'
 export { default as Row } from './Row'
 export * from './Row/ButtonLinkList'
-export { default as ButtonLinkList } from './Row/ButtonLinkList'
 export { default as ColumnOne } from './Row/ColumnOne'
 export { default as ColumnOneBoxed } from './Row/ColumnOneBoxed'
 export { default as ColumnOneCentered } from './Row/ColumnOneCentered'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@graphcommerce/next-ui",
-  "version": "3.20.7",
+  "version": "3.21.1",
   "author": "",
   "license": "MIT",
   "scripts": {
@@ -10,22 +10,22 @@
   },
   "dependencies": {
     "@apollo/client": "^3.5.6",
-    "@graphcommerce/framer-next-pages": "^2.108.2",
-    "@graphcommerce/framer-scroller": "^1.1.7",
-    "@graphcommerce/framer-utils": "^2.103.18",
-    "@graphcommerce/graphql": "^2.105.7",
-    "@graphcommerce/image": "^2.105.7",
+    "@graphcommerce/framer-next-pages": "^2.108.4",
+    "@graphcommerce/framer-scroller": "^1.1.11",
+    "@graphcommerce/framer-utils": "^2.103.19",
+    "@graphcommerce/graphql": "^2.105.9",
+    "@graphcommerce/image": "^2.105.8",
     "@lingui/macro": "^3.13.0",
     "@material-ui/core": "^4.12.3",
     "@material-ui/lab": "^4.0.0-alpha.60",
     "@material-ui/styles": "^4.11.4",
     "clsx": "^1.1.1",
-    "framer-motion": "^5.4.5",
+    "framer-motion": "^5.5.1",
     "graphql": "^16.1.0",
     "next": "^12.0.7",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "react-focus-lock": "^2.7.0",
+    "react-focus-lock": "^2.7.1",
     "react-is": "^17.0.2",
     "react-schemaorg": "^2.0.0",
     "schema-dts": "^1.0.0",
@@ -33,13 +33,13 @@
   },
   "devDependencies": {
     "@graphcommerce/browserslist-config-pwa": "^3.0.2",
-    "@graphcommerce/eslint-config-pwa": "^3.1.7",
+    "@graphcommerce/eslint-config-pwa": "^3.1.8",
     "@graphcommerce/prettier-config-pwa": "^3.0.4",
     "@graphcommerce/typescript-config-pwa": "^3.1.1",
     "@playwright/test": "^1.17.1",
     "@types/react-is": "^17.0.3",
     "graphql-tag": "2.12.6",
-    "typescript": "^4.5.3"
+    "typescript": "^4.5.4"
   },
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
@@ -52,5 +52,5 @@
       "project": "./tsconfig.json"
     }
   },
-  "gitHead": "f8974380ace982793000e5b181b5bb314a1945fb"
+  "gitHead": "6cab980582a62a8eee8d5f9bd77583cabc32c6f8"
 }