@graphcommerce/next-ui 10.1.0-canary.24 → 10.1.0-canary.26

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/CHANGELOG.md +14 -0
  2. package/Footer/Footer.tsx +3 -3
  3. package/LayoutDefault/components/LayoutDefault.tsx +8 -0
  4. package/Navigation/components/NavigationFab.tsx +52 -28
  5. package/package.json +8 -8
package/CHANGELOG.md CHANGED
@@ -1,5 +1,19 @@
1
1
  # Change Log
2
2
 
3
+ ## 10.1.0-canary.26
4
+
5
+ ## 10.1.0-canary.25
6
+
7
+ ### Minor Changes
8
+
9
+ - [#2637](https://github.com/graphcommerce-org/graphcommerce/pull/2637) [`bdaa6ec`](https://github.com/graphcommerce-org/graphcommerce/commit/bdaa6ec6aa2669b74fc6702ad46336db4c154b7c) - Refactored `LayoutNavigation` into composable pieces (`Header`, `HeaderContainer`, `MenuOverlay`, project-local `LayoutDefault`). `LayoutDefault` / `LayoutDefaultProps` in `@graphcommerce/next-ui` are marked `@deprecated`. If you are upgrading and do not want these changes, you can just discard them. This is just a structural change for more ease of use. No visually change. ([@bramvanderholst](https://github.com/bramvanderholst))
10
+
11
+ ### Patch Changes
12
+
13
+ - [#2637](https://github.com/graphcommerce-org/graphcommerce/pull/2637) [`9f5e765`](https://github.com/graphcommerce-org/graphcommerce/commit/9f5e76575e3932f8fcd8689d8ef42e4c44b923d1) - Added disableScrollEffects prop to CartFab & NavigationFab for easier customization of the header ([@bramvanderholst](https://github.com/bramvanderholst))
14
+
15
+ - [#2637](https://github.com/graphcommerce-org/graphcommerce/pull/2637) [`21a676b`](https://github.com/graphcommerce-org/graphcommerce/commit/21a676bb50888278d437b88a6e49e6f3d0c4d4bb) - Changed Footer props type to allow setting footer container props ([@bramvanderholst](https://github.com/bramvanderholst))
16
+
3
17
  ## 10.1.0-canary.24
4
18
 
5
19
  ## 10.1.0-canary.23
package/Footer/Footer.tsx CHANGED
@@ -1,7 +1,7 @@
1
1
  import { sxx } from '@graphcommerce/next-ui'
2
- import type { ContainerProps } from '@mui/material'
3
2
  import { Box } from '@mui/material'
4
- import React from 'react'
3
+ import type React from 'react'
4
+ import type { ContainerSizingProps } from '../Container/Container'
5
5
  import { Container } from '../Container/Container'
6
6
  import { LazyHydrate } from '../LazyHydrate'
7
7
  import { extendableComponent } from '../Styles'
@@ -12,7 +12,7 @@ export type FooterProps = {
12
12
  customerService?: React.ReactNode
13
13
  copyright?: React.ReactNode
14
14
  children?: React.ReactNode
15
- } & ContainerProps
15
+ } & ContainerSizingProps
16
16
 
17
17
  const { classes, selectors } = extendableComponent('Footer', [
18
18
  'root',
package/LayoutDefault/components/LayoutDefault.tsx CHANGED
@@ -10,6 +10,10 @@ import { SkipLink } from '../../SkipLink/SkipLink'
10
10
  import { extendableComponent } from '../../Styles'
11
11
  import { useFabSize } from '../../Theme'
12
12
 
13
+ /**
14
+ * @deprecated Import `LayoutDefaultProps` from your project's
15
+ * `components/Layout/LayoutDefault.tsx` instead.
16
+ */
13
17
  export type LayoutDefaultProps = {
14
18
  className?: string
15
19
  beforeHeader?: React.ReactNode
@@ -31,6 +35,10 @@ const { withState } = extendableComponent<OwnerState, 'LayoutDefault', typeof pa
31
35
  parts,
32
36
  )
33
37
 
38
+ /**
39
+ * @deprecated Import `LayoutDefault` from your project's
40
+ * `components/Layout/LayoutDefault.tsx` instead.
41
+ */
34
42
  export function LayoutDefault(props: LayoutDefaultProps) {
35
43
  const {
36
44
  children,
package/Navigation/components/NavigationFab.tsx CHANGED
@@ -17,6 +17,8 @@ const MotionDiv = styled(m.div)({})
17
17
  export type NavigationFabProps = {
18
18
  menuIcon?: React.ReactNode
19
19
  closeIcon?: React.ReactNode
20
+ disableScrollEffects?: boolean
21
+ disableElevation?: boolean
20
22
  sx?: SxProps<Theme>
21
23
  } & Pick<FabProps, 'color' | 'size' | 'variant' | 'onClick'>
22
24
 
@@ -29,7 +31,14 @@ type OwnerState = {
29
31
  const { withState } = extendableComponent<OwnerState, typeof name, typeof parts>(name, parts)
30
32
 
31
33
  export function NavigationFab(props: NavigationFabProps) {
32
- const { menuIcon, closeIcon, sx = [], ...fabProps } = props
34
+ const {
35
+ menuIcon,
36
+ closeIcon,
37
+ disableScrollEffects,
38
+ disableElevation,
39
+ sx = [],
40
+ ...fabProps
41
+ } = props
33
42
  const router = useRouter()
34
43
  const [openEl, setOpenEl] = React.useState<null | HTMLElement>(null)
35
44
 
@@ -53,28 +62,41 @@ export function NavigationFab(props: NavigationFabProps) {
53
62
  <Box sx={sxx({ position: 'relative', width: fabIconSize, height: fabIconSize }, sx)}>
54
63
  <MotionDiv
55
64
  className={classes.wrapper}
56
- sx={{
57
- [theme.breakpoints.down('md')]: {
58
- opacity: '1 !important',
59
- transform: 'none !important',
60
- },
61
- }}
65
+ sx={
66
+ disableScrollEffects
67
+ ? {
68
+ opacity: '1 !important',
69
+ transform: 'none !important',
70
+ }
71
+ : {
72
+ [theme.breakpoints.down('md')]: {
73
+ opacity: '1 !important',
74
+ transform: 'none !important',
75
+ },
76
+ }
77
+ }
62
78
  style={{ opacity }}
63
79
  >
64
80
  <Fab
65
81
  color='inherit'
66
82
  aria-label='Open Menu'
67
83
  size='responsive'
68
- sx={{
69
- boxShadow: 'none',
70
- '&:hover, &:focus': {
84
+ sx={sxx(
85
+ {
71
86
  boxShadow: 'none',
87
+ pointerEvents: 'all',
88
+ '&:hover, &:focus': {
89
+ boxShadow: 'none',
90
+ },
91
+ },
92
+ !fabProps.color && {
93
+ '&:hover, &:focus': {
94
+ background: theme.vars.palette.text.primary,
95
+ },
72
96
  background: theme.vars.palette.text.primary,
97
+ color: theme.vars.palette.background.paper,
73
98
  },
74
- background: theme.vars.palette.text.primary,
75
- pointerEvents: 'all',
76
- color: theme.vars.palette.background.paper,
77
- }}
99
+ )}
78
100
  className={classes.fab}
79
101
  {...fabProps}
80
102
  >
@@ -109,20 +131,22 @@ export function NavigationFab(props: NavigationFabProps) {
109
131
  />
110
132
  )}
111
133
  </Fab>
112
- <MotionDiv
113
- sx={{
114
- pointerEvents: 'none',
115
- borderRadius: '99em',
116
- position: 'absolute',
117
- height: '100%',
118
- width: '100%',
119
- boxShadow: theme.shadows[6],
120
- top: 0,
121
- [theme.breakpoints.down('md')]: { opacity: '1 !important' },
122
- }}
123
- className={classes.shadow}
124
- style={{ opacity: shadowOpacity }}
125
- />
134
+ {!disableElevation && (
135
+ <MotionDiv
136
+ sx={{
137
+ pointerEvents: 'none',
138
+ borderRadius: '99em',
139
+ position: 'absolute',
140
+ height: '100%',
141
+ width: '100%',
142
+ boxShadow: theme.shadows[6],
143
+ top: 0,
144
+ [theme.breakpoints.down('md')]: { opacity: '1 !important' },
145
+ }}
146
+ className={classes.shadow}
147
+ style={disableScrollEffects ? undefined : { opacity: shadowOpacity }}
148
+ />
149
+ )}
126
150
  </MotionDiv>
127
151
  </Box>
128
152
  )
package/package.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "name": "@graphcommerce/next-ui",
3
3
  "homepage": "https://www.graphcommerce.org/",
4
4
  "repository": "github:graphcommerce-org/graphcommerce",
5
- "version": "10.1.0-canary.24",
5
+ "version": "10.1.0-canary.26",
6
6
  "sideEffects": false,
7
7
  "prettier": "@graphcommerce/prettier-config-pwa",
8
8
  "eslintConfig": {
@@ -43,13 +43,13 @@
43
43
  "@emotion/react": "^11.14.0",
44
44
  "@emotion/server": "^11.11.0",
45
45
  "@emotion/styled": "^11.14.1",
46
- "@graphcommerce/eslint-config-pwa": "^10.1.0-canary.24",
47
- "@graphcommerce/framer-next-pages": "^10.1.0-canary.24",
48
- "@graphcommerce/framer-scroller": "^10.1.0-canary.24",
49
- "@graphcommerce/framer-utils": "^10.1.0-canary.24",
50
- "@graphcommerce/image": "^10.1.0-canary.24",
51
- "@graphcommerce/prettier-config-pwa": "^10.1.0-canary.24",
52
- "@graphcommerce/typescript-config-pwa": "^10.1.0-canary.24",
46
+ "@graphcommerce/eslint-config-pwa": "^10.1.0-canary.26",
47
+ "@graphcommerce/framer-next-pages": "^10.1.0-canary.26",
48
+ "@graphcommerce/framer-scroller": "^10.1.0-canary.26",
49
+ "@graphcommerce/framer-utils": "^10.1.0-canary.26",
50
+ "@graphcommerce/image": "^10.1.0-canary.26",
51
+ "@graphcommerce/prettier-config-pwa": "^10.1.0-canary.26",
52
+ "@graphcommerce/typescript-config-pwa": "^10.1.0-canary.26",
53
53
  "@lingui/core": "^5",
54
54
  "@lingui/macro": "^5",
55
55
  "@lingui/react": "^5",