@graphcommerce/next-ui 4.1.2 → 4.1.5

package/CHANGELOG.md

@@ -1,5 +1,46 @@
 # 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
+
+- [#1287](https://github.com/ho-nl/m2-pwa/pull/1287)
+  [`d17f97d3a`](https://github.com/ho-nl/m2-pwa/commit/d17f97d3a786c33a99a10e4e949251c52fdbbdac)
+  Thanks [@paales](https://github.com/paales)! - Allow passing sx prop to SidebarGallery and
+  ContentLinks
+
+## 4.1.3
+
+### Patch Changes
+
+- [#1285](https://github.com/ho-nl/m2-pwa/pull/1285)
+  [`c85294ba6`](https://github.com/ho-nl/m2-pwa/commit/c85294ba6d742ce78c074559a1e95409b25a5017)
+  Thanks [@paales](https://github.com/paales)! - upgraded dependencies
+
+- Updated dependencies
+  [[`16d77b280`](https://github.com/ho-nl/m2-pwa/commit/16d77b2806e49e376d06bc0d578d38eb724b0c17)]:
+  - @graphcommerce/framer-scroller@2.0.4
+
 ## 4.1.2
 
 ### 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/FramerScroller/SidebarGallery.tsx

@@ -8,7 +8,7 @@ import {
   ScrollerProvider,
 } from '@graphcommerce/framer-scroller'
 import { clientSize, useMotionValueValue } from '@graphcommerce/framer-utils'
-import { Fab, useTheme, alpha, Box, styled } from '@mui/material'
+import { Fab, useTheme, alpha, Box, styled, SxProps, Theme } from '@mui/material'
 import { m, useDomEvent, useMotionValue } from 'framer-motion'
 import { useRouter } from 'next/router'
 import React, { useEffect, useRef } from 'react'
@@ -47,10 +47,17 @@ export type SidebarGalleryProps = {
   images: MotionImageAspectProps[]
   aspectRatio?: [number, number]
   routeHash?: string
+  sx?: SxProps<Theme>
 }
 
 export function SidebarGallery(props: SidebarGalleryProps) {
-  const { sidebar, images, aspectRatio: [width, height] = [1, 1], routeHash = 'gallery' } = props
+  const {
+    sidebar,
+    images,
+    aspectRatio: [width, height] = [1, 1],
+    sx,
+    routeHash = 'gallery',
+  } = props
 
   const router = useRouter()
   const prevRoute = usePrevPageRouter()
@@ -109,7 +116,7 @@ export function SidebarGallery(props: SidebarGalleryProps) {
 
   return (
     <ScrollerProvider scrollSnapAlign='center'>
-      <Row maxWidth={false} disableGutters className={classes.row}>
+      <Row maxWidth={false} disableGutters className={classes.row} sx={sx}>
         <MotionBox
           layout
           className={classes.root}

package/FramerScroller/SidebarSlider.tsx

@@ -1,6 +1,7 @@
 import {
   Scroller,
   ScrollerButton,
+  ScrollerButtonProps as ScrollerButtonPropsType,
   ScrollerPageCounter,
   ScrollerProvider,
 } from '@graphcommerce/framer-scroller'
@@ -23,10 +24,15 @@ const { classes, selectors } = extendableComponent('SidebarSlider', [
   'centerRight',
 ] as const)
 
-export type SidebarSliderProps = { children: ReactNode; sidebar: ReactNode; sx?: SxProps<Theme> }
+export type SidebarSliderProps = {
+  children: ReactNode
+  sidebar: ReactNode
+  sx?: SxProps<Theme>
+  buttonSize?: ScrollerButtonPropsType['size']
+}
 
 export function SidebarSlider(props: SidebarSliderProps) {
-  const { children, sidebar, sx } = props
+  const { children, sidebar, sx, buttonSize } = props
 
   return (
     <Row maxWidth={false} disableGutters className={classes.root} sx={sx}>
@@ -79,6 +85,7 @@ export function SidebarSlider(props: SidebarSliderProps) {
                 direction='left'
                 className={classes.sliderButtons}
                 sx={{ display: { xs: 'none', md: 'flex' } }}
+                size={buttonSize}
               >
                 <SvgIcon src={iconChevronLeft} />
               </ScrollerButton>
@@ -93,7 +100,12 @@ export function SidebarSlider(props: SidebarSliderProps) {
                 top: `calc(50% - 28px)`,
               })}
             >
-              <ScrollerButton direction='right' className={classes.sliderButtons}>
+              <ScrollerButton
+                direction='right'
+                className={classes.sliderButtons}
+                sx={{ display: { xs: 'none', md: 'flex' } }}
+                size={buttonSize}
+              >
                 <SvgIcon src={iconChevronRight} />
               </ScrollerButton>
             </Box>

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/Row/ButtonLinkList/ButtonLinkListItem.tsx

@@ -13,7 +13,7 @@ const ButtonItem = styled(Button)(({ theme }) => ({
   borderBottom: `1px solid ${theme.palette.divider}`,
   borderRadius: 0,
   justifyContent: 'space-between',
-  ...theme.typography.body1,
+  typography: 'body1',
 }))
 
 export function ButtonLinkListItem(props: ButtonLinkProps) {

package/Row/ContentLinks/index.tsx

@@ -14,13 +14,18 @@ const parts = ['root', 'scroller', 'title'] as const
 const { classes } = extendableComponent(compName, parts)
 
 export function ContentLinks(props: ContentLinksProps) {
-  const { title, children } = props
+  const { title, children, sx = [] } = props
 
   return (
     <Container
       className={classes.root}
       maxWidth={false}
-      sx={(theme) => ({ marginBottom: `${theme.spacings.md}` })}
+      sx={[
+        (theme) => ({
+          marginBottom: `${theme.spacings.md}`,
+        }),
+        ...(Array.isArray(sx) ? sx : [sx]),
+      ]}
     >
       <ScrollerProvider scrollSnapAlign='none'>
         <Scroller

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.2",
+  "version": "4.1.5",
   "author": "",
   "license": "MIT",
   "sideEffects": false,
@@ -20,12 +20,12 @@
     "@emotion/server": "^11.4.0",
     "@emotion/styled": "^11.6.0",
     "@graphcommerce/framer-next-pages": "^3.1.0",
-    "@graphcommerce/framer-scroller": "^2.0.3",
+    "@graphcommerce/framer-scroller": "^2.0.4",
     "@graphcommerce/framer-utils": "^3.0.3",
     "@graphcommerce/image": "^3.1.0",
     "react-is": "^17.0.2",
     "react-schemaorg": "^2.0.0",
-    "schema-dts": "^1.0.0",
+    "schema-dts": "^1.1.0",
     "type-fest": "^2.12.0"
   },
   "peerDependencies": {
@@ -39,7 +39,7 @@
     "react-dom": "^17.0.2"
   },
   "devDependencies": {
-    "@graphcommerce/eslint-config-pwa": "^4.0.3",
+    "@graphcommerce/eslint-config-pwa": "^4.0.4",
     "@graphcommerce/prettier-config-pwa": "^4.0.2",
     "@graphcommerce/typescript-config-pwa": "^4.0.2",
     "@playwright/test": "^1.19.1",