@graphcommerce/next-ui 4.1.4 → 4.1.5

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # Change Log
 
+## 4.1.5
+
+### Patch Changes
+
+- [#1290](https://github.com/ho-nl/m2-pwa/pull/1290)
+  [`47ae012c1`](https://github.com/ho-nl/m2-pwa/commit/47ae012c10f5762f99019ec38409177632377a98)
+  Thanks [@paales](https://github.com/paales)! - `withTheme` didn’t apply styles correcty
+
+* [#1290](https://github.com/ho-nl/m2-pwa/pull/1290)
+  [`39e28a4cd`](https://github.com/ho-nl/m2-pwa/commit/39e28a4cd6cdfaa4fc6dc4500ae86c14f7069150)
+  Thanks [@paales](https://github.com/paales)! - Allow background color on header
+
+- [#1289](https://github.com/ho-nl/m2-pwa/pull/1289)
+  [`ec8026cc5`](https://github.com/ho-nl/m2-pwa/commit/ec8026cc5a5be8d97a6e5dbf208808154fa1d618)
+  Thanks [@LaurensFranken](https://github.com/LaurensFranken)! - add sx prop to UspsList component
+
+* [#1290](https://github.com/ho-nl/m2-pwa/pull/1290)
+  [`35672d8e8`](https://github.com/ho-nl/m2-pwa/commit/35672d8e87011bf4eb049f449e86e851fc91a525)
+  Thanks [@paales](https://github.com/paales)! - Footer didn't accept sx prop
+
 ## 4.1.4
 
 ### Patch Changes

package/Footer/Footer.tsx

@@ -18,39 +18,49 @@ const { classes, selectors } = extendableComponent('Footer', [
 ] as const)
 
 export function Footer(props: FooterProps) {
-  const { socialLinks, storeSwitcher, customerService, copyright, ...containerProps } = props
+  const {
+    socialLinks,
+    storeSwitcher,
+    customerService,
+    copyright,
+    sx = [],
+    ...containerProps
+  } = props
 
   return (
     <Container
-      sx={(theme) => ({
-        gridTemplateColumns: '5fr 3fr',
-        borderTop: `1px solid ${theme.palette.divider}`,
-        display: 'grid',
-        alignItems: 'center',
+      sx={[
+        (theme) => ({
+          gridTemplateColumns: '5fr 3fr',
+          borderTop: `1px solid ${theme.palette.divider}`,
+          display: 'grid',
+          alignItems: 'center',
 
-        padding: `${theme.spacings.lg} ${theme.page.horizontal} ${theme.page.vertical}`,
-        justifyItems: 'center',
-        gridTemplateAreas: `
+          padding: `${theme.spacings.lg} ${theme.page.horizontal} ${theme.page.vertical}`,
+          justifyItems: 'center',
+          gridTemplateAreas: `
           'switcher switcher'
           'support support'
           'social social'
           'links links'
         `,
-        gap: theme.spacings.md,
-        '& > *': { maxWidth: 'max-content' },
+          gap: theme.spacings.md,
+          '& > *': { maxWidth: 'max-content' },
 
-        [theme.breakpoints.up('sm')]: {
-          gridTemplateAreas: `
+          [theme.breakpoints.up('sm')]: {
+            gridTemplateAreas: `
             'social switcher'
             'links support'
           `,
-          justifyItems: 'start',
-          padding: `${theme.page.vertical} ${theme.page.horizontal}`,
-          gridTemplateColumns: 'auto auto',
-          gridTemplateRows: 'auto',
-          justifyContent: 'space-between',
-        },
-      })}
+            justifyItems: 'start',
+            padding: `${theme.page.vertical} ${theme.page.horizontal}`,
+            gridTemplateColumns: 'auto auto',
+            gridTemplateRows: 'auto',
+            justifyContent: 'space-between',
+          },
+        }),
+        ...(Array.isArray(sx) ? sx : [sx]),
+      ]}
       maxWidth={false}
       className={classes.root}
       {...containerProps}

package/LayoutDefault/components/LayoutDefault.tsx

@@ -92,7 +92,7 @@ export function LayoutDefault(props: LayoutDefaultProps) {
               justifyContent: 'space-between',
               width: '100%',
               height: 0,
-              zIndex: 2,
+              zIndex: 'drawer',
               [theme.breakpoints.up('sm')]: {
                 padding: `0 ${theme.page.horizontal}`,
                 position: 'sticky',

package/Styles/withTheme.tsx

@@ -1,4 +1,7 @@
-import { css, Theme, ThemeProvider } from '@mui/material'
+import { SxProps, Theme, ThemeProvider } from '@mui/material'
+import React from 'react'
+
+type WithSx = { sx?: SxProps<Theme> }
 
 /**
  * It will provide a theme for the underlying tree and will set the color/font and backgroundColor
@@ -21,22 +24,37 @@ import { css, Theme, ThemeProvider } from '@mui/material'
  * const MyPage = () => {
  *   return <div>Your regular page content, but now in darkMode</div>
  * }
- *
  * export default withTheme(MyPage, darkTheme)
  * ```
+ *
+ * If you are trying to theme a complete page:
+ *
+ * ```tsx
+ * MyPage.pageOptions = {
+ *   Layout: withTheme(LayoutFull, darkTheme),
+ * } as PageOptions
+ * ```
  */
-export function withTheme(Component: React.FC<{ className?: string }>, theme: Theme) {
-  return (props: Record<string, unknown>) => (
-    <ThemeProvider theme={theme}>
-      <Component
-        {...props}
-        // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
-        css={css({
-          color: theme.palette.text.primary,
-          backgroundColor: theme.palette.background.default,
-          ...(theme.typography.body1 as any),
-        })}
-      />
-    </ThemeProvider>
-  )
+export function withTheme<T>(
+  Component: (value: T & WithSx) => React.ReactElement<any, any> | null,
+  theme: Theme,
+): React.FC<T & WithSx> {
+  return (data: T & WithSx) => {
+    const sx = data.sx ?? []
+    return (
+      <ThemeProvider theme={theme}>
+        <Component
+          {...data}
+          sx={[
+            {
+              typography: 'body1',
+              color: theme.palette.text.primary,
+              backgroundColor: theme.palette.background.default,
+            },
+            ...(Array.isArray(sx) ? sx : [sx]),
+          ]}
+        />
+      </ThemeProvider>
+    )
+  }
 }

package/UspList/index.tsx

@@ -1,8 +1,9 @@
-import { Box } from '@mui/material'
+import { Box, SxProps, Theme } from '@mui/material'
 import { extendableComponent } from '../Styles'
 
 export type UspListProps = OwnerState & {
   children: React.ReactNode
+  sx?: SxProps<Theme>
 }
 
 type OwnerState = { size?: 'small' | 'medium' }
@@ -11,24 +12,27 @@ const parts = ['root'] as const
 const { withState } = extendableComponent<OwnerState, typeof name, typeof parts>(name, parts)
 
 export function UspList(props: UspListProps) {
-  const { children, size } = props
+  const { children, size, sx = [] } = props
   const classes = withState({ size })
 
   return (
     <Box
       component='ul'
       className={classes.root}
-      sx={(theme) => ({
-        listStyleType: 'none',
-        padding: 0,
-        margin: 0,
-        display: 'grid',
-        alignContent: 'start',
-        rowGap: theme.spacings.xs,
-        '&.sizeSmall': {
-          rowGap: '3px',
-        },
-      })}
+      sx={[
+        (theme) => ({
+          listStyleType: 'none',
+          padding: 0,
+          margin: 0,
+          display: 'grid',
+          alignContent: 'start',
+          rowGap: theme.spacings.xs,
+          '&.sizeSmall': {
+            rowGap: '3px',
+          },
+        }),
+        ...(Array.isArray(sx) ? sx : [sx]),
+      ]}
     >
       {children}
     </Box>

package/icons/index.tsx

@@ -38,3 +38,4 @@ export { default as iconEmailOutline } from './envelope-alt.svg'
 export { default as icon404 } from './explore.svg'
 export { default as iconSun } from './sun.svg'
 export { default as iconMoon } from './moon.svg'
+export { default as iconPlay } from './play.svg'

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/next-ui",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "4.1.4",
+  "version": "4.1.5",
   "author": "",
   "license": "MIT",
   "sideEffects": false,