@graphcommerce/next-ui 3.22.0 → 3.23.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.23.1](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/next-ui@3.23.0...@graphcommerce/next-ui@3.23.1) (2022-01-04)
+
+
+### Bug Fixes
+
+* close button on mobile ([a0c6c07](https://github.com/ho-nl/m2-pwa/commit/a0c6c075a1ee2541c864a561cd5318ed5fb5760c))
+
+
+
+
+
+# [3.23.0](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/next-ui@3.22.2...@graphcommerce/next-ui@3.23.0) (2022-01-04)
+
+
+### Bug Fixes
+
+* backbutton wasn't translated ([5f841c0](https://github.com/ho-nl/m2-pwa/commit/5f841c052b454c0d565a68829f78492c5a3b6dab))
+
+
+### Features
+
+* introduced a withTheme hoc to allow theming per route ([55e3fc1](https://github.com/ho-nl/m2-pwa/commit/55e3fc178b385d0ccdc19a5c09a7887be5db14dc))
+
+
+
+
+
+## [3.22.2](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/next-ui@3.22.1...@graphcommerce/next-ui@3.22.2) (2022-01-04)
+
+
+### Bug Fixes
+
+* broder radius of drawer was too small on desktop ([f8b3962](https://github.com/ho-nl/m2-pwa/commit/f8b3962825972e6bc232387e0a2e801289fcc492))
+* close button of bottom sheet spacing ([be33c20](https://github.com/ho-nl/m2-pwa/commit/be33c20fc8f41ad85d90bff15842738bc370b81e))
+* regression where primary action wasn't visible ([66f8ed2](https://github.com/ho-nl/m2-pwa/commit/66f8ed20ea0728881be81994d49bd6c399f2e914))
+
+
+
+
+
+## [3.22.1](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/next-ui@3.22.0...@graphcommerce/next-ui@3.22.1) (2022-01-04)
+
+
+### Bug Fixes
+
+* overlay would have a height instead of minHeight ([07dba4b](https://github.com/ho-nl/m2-pwa/commit/07dba4b875a37beac2ab6a8afe50e6b7a7ba1bf9))
+
+
+
+
+
 # [3.22.0](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/next-ui@3.21.15...@graphcommerce/next-ui@3.22.0) (2022-01-03)
 
 

package/Layout/components/LayoutHeader.tsx

@@ -117,7 +117,7 @@ export function LayoutHeader(props: LayoutHeaderProps) {
   if (back) left = back
 
   if (!right) right = close
-  else if (!left) right = close
+  else if (!left) left = close
 
   if (!left && !right && !children) return null
 

package/Layout/components/LayoutHeaderClose.tsx

@@ -3,15 +3,28 @@ import React from 'react'
 import Button from '../../Button'
 import SvgImageSimple from '../../SvgImage/SvgImageSimple'
 import { iconClose } from '../../icons'
+import { makeStyles, Theme } from '@material-ui/core'
+import { responsiveVal } from '../../Styles/responsiveVal'
+import { Trans } from '@lingui/macro'
 
 export function useShowClose() {
   const { overlayGroup } = usePageContext()
   return !!overlayGroup
 }
 
+const useStyles = makeStyles((theme: Theme) => ({
+  close: {
+    [theme.breakpoints.up('md')]: {
+      marginLeft: `calc(${responsiveVal(12, 22)} * -1)`,
+      marginRight: `calc(${responsiveVal(12, 22)} * -1)`,
+    },
+  },
+}))
+
 export default function LayoutHeaderClose() {
   const { closeSteps } = usePageContext()
   const onClick = useGo(closeSteps * -1)
+  const classes = useStyles()
 
   return (
     <Button
@@ -20,8 +33,9 @@ export default function LayoutHeaderClose() {
       aria-label='Close'
       variant='text'
       startIcon={<SvgImageSimple src={iconClose} />}
+      className={classes.close}
     >
-      Close
+      <Trans>Close</Trans>
     </Button>
   )
 }

package/LayoutDefault/components/LayoutDefault.tsx

@@ -55,6 +55,7 @@ const useStyles = makeStyles(
 )
 
 export type LayoutDefaultProps = {
+  className?: string
   header: React.ReactNode
   footer: React.ReactNode
   menuFab?: React.ReactNode
@@ -64,14 +65,14 @@ export type LayoutDefaultProps = {
 } & UseStyles<typeof useStyles>
 
 export function LayoutDefault(props: LayoutDefaultProps) {
-  const { children, header, footer, menuFab, cartFab, noSticky } = props
+  const { children, header, footer, menuFab, cartFab, noSticky, className } = props
   const classes = useStyles(props)
 
   const offset = useScrollOffset().y
   const scrollWithOffset = useTransform(useViewportScroll().scrollY, (y) => y + offset)
 
   return (
-    <div className={classes.root}>
+    <div className={clsx(classes.root, className)}>
       <LayoutProvider scroll={scrollWithOffset}>
         <header className={clsx(classes.header, !noSticky && classes.headerSticky)}>
           {header}

package/LayoutOverlay/components/LayoutOverlayBase.tsx

@@ -94,8 +94,8 @@ const useStyles = makeStyles(
     },
     overlayPaneVariantMdBottom: {
       [theme.breakpoints.up('md')]: {
-        borderTopLeftRadius: theme.shape.borderRadius * 3,
-        borderTopRightRadius: theme.shape.borderRadius * 3,
+        borderTopLeftRadius: theme.shape.borderRadius * 4,
+        borderTopRightRadius: theme.shape.borderRadius * 4,
       },
     },
     overlayPaneSizeSmFloating: {
@@ -105,7 +105,7 @@ const useStyles = makeStyles(
     },
     overlayPaneSizeMdFloating: {
       [theme.breakpoints.up('md')]: {
-        borderRadius: theme.shape.borderRadius * 3,
+        borderRadius: theme.shape.borderRadius * 4,
       },
     },
     overlayPaneSmVariantSizeLeftFull: {
@@ -178,6 +178,7 @@ type StyleProps = {
 
 export type LayoutOverlayBaseProps = {
   children?: React.ReactNode
+  className?: string
 } & StyleProps &
   UseStyles<typeof useStyles>
 
@@ -193,6 +194,7 @@ export function LayoutOverlayBase(props: LayoutOverlayBaseProps) {
     variantSm,
     variantMd,
     classes: _classes,
+    className,
     sizeSm = 'full',
     sizeMd = 'full',
     justifySm = 'stretch',
@@ -211,7 +213,7 @@ export function LayoutOverlayBase(props: LayoutOverlayBaseProps) {
   const position = useMotionValue<OverlayPosition>(OverlayPosition.UNOPENED)
 
   const classes = useStyles({ classes: _classes, sizeSm, sizeMd, justifySm, justifyMd })
-  const className = classesPicker(classes, {
+  const clsName = classesPicker(classes, {
     variantSm,
     variantMd,
     sizeSm,
@@ -353,17 +355,12 @@ export function LayoutOverlayBase(props: LayoutOverlayBaseProps) {
       // scrollSnapAlign: 'end',
       [theme.breakpoints.down('sm')]: {
         minWidth: '80vw',
-        ...((sizeSm === 'full' || sizeSm === 'minimal') && {
-          paddingBottom: 56,
-        }),
-        ...(variantSm === 'bottom' && sizeSm === 'full' && { height: 'calc(100vh - 56px)' }),
+        ...((sizeSm === 'full' || sizeSm === 'minimal') && { paddingBottom: 56 }),
+        ...(variantSm === 'bottom' && sizeSm === 'full' && { minHeight: 'calc(100vh - 56px)' }),
       },
       [theme.breakpoints.up('md')]: {
-        ...(variantMd === 'bottom' && sizeMd === 'full' && { height: '100vh' }),
-
-        ...(sizeMd === 'full' && {
-          minWidth: 'max(600px, 50vw)',
-        }),
+        ...(variantMd === 'bottom' && sizeMd === 'full' && { minHeight: '100vh' }),
+        ...(sizeMd === 'full' && { minWidth: 'max(600px, 50vw)' }),
       },
     }),
     { name: 'OverlayPane' },
@@ -395,11 +392,11 @@ export function LayoutOverlayBase(props: LayoutOverlayBaseProps) {
 
   return (
     <>
-      <m.div {...className('backdrop')} style={{ opacity: positions.open.visible }} />
-      <Scroller {...className('root')} grid={false} hideScrollbar onClick={onClickAway}>
+      <m.div {...clsName('backdrop')} style={{ opacity: positions.open.visible }} />
+      <Scroller {...clsName('root')} grid={false} hideScrollbar onClick={onClickAway}>
         <BeforeOverlay onClick={onClickAway} ref={beforeRef} />
-        <Overlay {...className('overlay')} ref={overlayRef}>
-          <OverlayPane {...className('overlayPane')}>
+        <Overlay {...clsName('overlay')} ref={overlayRef}>
+          <OverlayPane {...clsName('overlayPane', className)}>
             <LayoutProvider scroll={scrollWithoffset}>{children}</LayoutProvider>
           </OverlayPane>
         </Overlay>

package/Styles/index.tsx

@@ -1,3 +1,8 @@
 export type UseStyles<T extends (...args: never[]) => unknown> = {
   classes?: Partial<ReturnType<T>>
 }
+
+export * from './breakpointVal'
+export * from './responsiveVal'
+export * from './classesPicker'
+export * from './withTheme'

package/Styles/withTheme.tsx

@@ -0,0 +1,51 @@
+import { makeStyles, Theme, ThemeProvider } from '@material-ui/core'
+
+const useStyles = makeStyles(
+  {
+    // These theme specific styles are copied from
+    // https://github.com/mui-org/material-ui/blob/master/packages/mui-material/src/CssBaseline/CssBaseline.js#L18-L24
+    root: (theme: Theme) => ({
+      color: theme.palette.text.primary,
+      ...theme.typography.body1,
+      backgroundColor: theme.palette.background.default,
+    }),
+  },
+  { name: 'Theme' },
+)
+
+/**
+ * It will provide a theme for the underlying tree and will set the color/font and backgroundColor
+ * for the child.
+ *
+ * To use it, wrap your component with it.
+ *
+ * Example:
+ *
+ * ```tsx
+ * const MyPage = () => {
+ *   return <div>Your regular page content</div>
+ * }
+ * export default MyPage
+ * ```
+ *
+ * Becomes:
+ *
+ * ```tsx
+ * const MyPage = () => {
+ *   return <div>Your regular page content, but now in darkMode</div>
+ * }
+ *
+ * export default withTheme(MyPage, darkTheme)
+ * ```
+ */
+export function withTheme<P extends { className?: string }>(Component: React.FC<P>, theme: Theme) {
+  return (props: P) => {
+    const classes = useStyles(theme)
+
+    return (
+      <ThemeProvider theme={theme}>
+        <Component {...props} className={classes.root} />
+      </ThemeProvider>
+    )
+  }
+}

package/index.ts

@@ -106,9 +106,6 @@ export * from './Stepper/Stepper'
 export { default as Stepper } from './Stepper/Stepper'
 export { default as StyledBadge } from './StyledBadge'
 export * from './Styles'
-export * from './Styles/breakpointVal'
-export * from './Styles/responsiveVal'
-export * from './Styles/classesPicker'
 export * from './SvgImage'
 export { default as SvgImage } from './SvgImage'
 export { default as SvgImageSimple } from './SvgImage/SvgImageSimple'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@graphcommerce/next-ui",
-  "version": "3.22.0",
+  "version": "3.23.1",
   "author": "",
   "license": "MIT",
   "scripts": {
@@ -10,11 +10,11 @@
   },
   "dependencies": {
     "@apollo/client": "^3.5.6",
-    "@graphcommerce/framer-next-pages": "^2.109.0",
-    "@graphcommerce/framer-scroller": "^1.2.0",
+    "@graphcommerce/framer-next-pages": "^2.109.2",
+    "@graphcommerce/framer-scroller": "^1.2.4",
     "@graphcommerce/framer-utils": "^2.103.21",
     "@graphcommerce/graphql": "^2.105.13",
-    "@graphcommerce/image": "^2.105.12",
+    "@graphcommerce/image": "^2.105.13",
     "@lingui/macro": "^3.13.0",
     "@material-ui/core": "^4.12.3",
     "@material-ui/lab": "^4.0.0-alpha.60",
@@ -25,7 +25,6 @@
     "next": "^12.0.7",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "react-focus-lock": "^2.7.1",
     "react-is": "^17.0.2",
     "react-schemaorg": "^2.0.0",
     "schema-dts": "^1.0.0",
@@ -52,5 +51,5 @@
       "project": "./tsconfig.json"
     }
   },
-  "gitHead": "bc5423d7547f8685db4cd8fc6d8f7a2a51ebed05"
+  "gitHead": "7f9638808769894f9804b7a7f476833d4adf74e4"
 }