@graphcommerce/next-ui 10.1.0-canary.36 → 10.1.0-canary.39
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.
- package/CHANGELOG.md +21 -0
- package/Row/HeroBanner/HeroBanner.tsx +36 -28
- package/package.json +8 -8
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,26 @@
|
|
|
1
1
|
# Change Log
|
|
2
2
|
|
|
3
|
+
## 10.1.0-canary.39
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- [#2652](https://github.com/graphcommerce-org/graphcommerce/pull/2652) [`132d1e1`](https://github.com/graphcommerce-org/graphcommerce/commit/132d1e1075b22843ed5934314c723df06ea13a6a) - `HeroBanner` gains an `asset?: React.ReactNode` prop, and `videoSrc` is deprecated.
|
|
8
|
+
|
|
9
|
+
The banner rendered a `<video>` itself, from a raw URL — so it could only ever hold a video, and left nowhere to hang a poster, the one place a poster matters most (a full-bleed autoplaying video above the fold). It now takes a node and renders it, the way its sibling `SpecialBanner` already does; positioning stays with the banner, stretching whatever is passed to fill via `& img, & video`.
|
|
10
|
+
|
|
11
|
+
```diff
|
|
12
|
+
- <HeroBanner videoSrc={asset.filename} … />
|
|
13
|
+
+ <HeroBanner asset={<Asset asset={asset} poster={poster} />} … />
|
|
14
|
+
```
|
|
15
|
+
|
|
16
|
+
Taking a node rather than a source also keeps `next-ui` free of any CMS: the Storyblok and Hygraph examples each pass their own `<Asset>`, both of which already render images and video.
|
|
17
|
+
|
|
18
|
+
`videoSrc` still works but is deprecated: when set (and `asset` is not) it renders a bare autoplaying video, keeping the `HeroBanner-video` class. The only behavioural change on that path is that the scroll parallax is gone, along with the `framer-motion`, `useScrollY` and `clientSize` machinery it needed. Migrate to `asset` to regain images, posters, and control over how the media is rendered. ([@bramvanderholst](https://github.com/bramvanderholst))
|
|
19
|
+
|
|
20
|
+
## 10.1.0-canary.38
|
|
21
|
+
|
|
22
|
+
## 10.1.0-canary.37
|
|
23
|
+
|
|
3
24
|
## 10.1.0-canary.36
|
|
4
25
|
|
|
5
26
|
## 10.1.0-canary.35
|
|
@@ -1,32 +1,37 @@
|
|
|
1
|
-
import { clientSize } from '@graphcommerce/framer-utils'
|
|
2
|
-
import { sxx } from '@graphcommerce/next-ui'
|
|
3
1
|
import type { ContainerProps, SxProps, Theme } from '@mui/material'
|
|
4
|
-
import { Box
|
|
5
|
-
import { m, useTransform } from 'framer-motion'
|
|
2
|
+
import { Box } from '@mui/material'
|
|
6
3
|
import React from 'react'
|
|
7
|
-
import { useScrollY } from '../../Layout/hooks/useScrollY'
|
|
8
4
|
import { extendableComponent, responsiveVal } from '../../Styles'
|
|
9
5
|
import { Row } from '../Row'
|
|
10
6
|
|
|
11
7
|
export type HeroBannerProps = ContainerProps & {
|
|
12
8
|
pageLinks: React.ReactNode
|
|
13
|
-
|
|
9
|
+
/**
|
|
10
|
+
* Rendered full-bleed behind the copy. Takes a node rather than a source, so
|
|
11
|
+
* the banner is agnostic about what fills it — an image, a video, a CMS
|
|
12
|
+
* component. See `SpecialBanner`, which takes its asset the same way.
|
|
13
|
+
*/
|
|
14
|
+
asset?: React.ReactNode
|
|
15
|
+
/**
|
|
16
|
+
* @deprecated Pass an `asset` node instead — e.g. `<Asset asset={…} />`,
|
|
17
|
+
* which also renders images and can carry a poster. When set (and `asset`
|
|
18
|
+
* is not), it renders a bare autoplaying video, without the scroll parallax
|
|
19
|
+
* earlier versions applied.
|
|
20
|
+
*/
|
|
21
|
+
videoSrc?: string
|
|
14
22
|
children: React.ReactNode
|
|
15
23
|
sx?: SxProps<Theme>
|
|
16
24
|
}
|
|
17
25
|
|
|
18
26
|
const compName = 'HeroBanner'
|
|
27
|
+
// `video` and `animated` are unused since the banner stopped rendering its own
|
|
28
|
+
// motion video, but stay in the parts list so the generated class names remain
|
|
29
|
+
// available to consumers targeting them in global CSS.
|
|
19
30
|
const parts = ['root', 'wrapper', 'copy', 'asset', 'animated', 'video'] as const
|
|
20
31
|
const { classes } = extendableComponent(compName, parts)
|
|
21
32
|
|
|
22
|
-
const MotionVideo = styled(m.video)({})
|
|
23
|
-
|
|
24
33
|
export function HeroBanner(props: HeroBannerProps) {
|
|
25
|
-
const { pageLinks, videoSrc, children, sx = [], ...containerProps } = props
|
|
26
|
-
const scrollY = useScrollY()
|
|
27
|
-
const scale = useTransform([scrollY, clientSize.y], ([scrollYCurr, clientSizeYCurr]: number[]) =>
|
|
28
|
-
clientSizeYCurr ? (scrollYCurr / clientSizeYCurr) * 1.7 + 1 : 1,
|
|
29
|
-
)
|
|
34
|
+
const { pageLinks, asset, videoSrc, children, sx = [], ...containerProps } = props
|
|
30
35
|
|
|
31
36
|
return (
|
|
32
37
|
<Row maxWidth={false} {...containerProps} className={classes.root} sx={sx}>
|
|
@@ -60,25 +65,28 @@ export function HeroBanner(props: HeroBannerProps) {
|
|
|
60
65
|
sx={{
|
|
61
66
|
gridArea: '1 / 1',
|
|
62
67
|
position: 'relative',
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
src={videoSrc}
|
|
67
|
-
autoPlay
|
|
68
|
-
muted
|
|
69
|
-
loop
|
|
70
|
-
playsInline
|
|
71
|
-
disableRemotePlayback
|
|
72
|
-
className={classes.video}
|
|
73
|
-
style={{ scale }}
|
|
74
|
-
sx={{
|
|
68
|
+
// The banner sizes itself from its copy, so whatever is passed has
|
|
69
|
+
// to fill the box rather than dictate it.
|
|
70
|
+
'& img, & video': {
|
|
75
71
|
position: 'absolute',
|
|
76
|
-
transition: 'transform 0.5s cubic-bezier(0.33, 1, 0.68, 1)',
|
|
77
72
|
objectFit: 'cover',
|
|
78
73
|
width: '100%',
|
|
79
74
|
height: '100%',
|
|
80
|
-
}
|
|
81
|
-
|
|
75
|
+
},
|
|
76
|
+
}}
|
|
77
|
+
>
|
|
78
|
+
{asset ??
|
|
79
|
+
(videoSrc ? (
|
|
80
|
+
<video
|
|
81
|
+
src={videoSrc}
|
|
82
|
+
autoPlay
|
|
83
|
+
muted
|
|
84
|
+
loop
|
|
85
|
+
playsInline
|
|
86
|
+
disableRemotePlayback
|
|
87
|
+
className={classes.video}
|
|
88
|
+
/>
|
|
89
|
+
) : null)}
|
|
82
90
|
</Box>
|
|
83
91
|
</Box>
|
|
84
92
|
</Row>
|
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.
|
|
5
|
+
"version": "10.1.0-canary.39",
|
|
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.
|
|
47
|
-
"@graphcommerce/framer-next-pages": "^10.1.0-canary.
|
|
48
|
-
"@graphcommerce/framer-scroller": "^10.1.0-canary.
|
|
49
|
-
"@graphcommerce/framer-utils": "^10.1.0-canary.
|
|
50
|
-
"@graphcommerce/image": "^10.1.0-canary.
|
|
51
|
-
"@graphcommerce/prettier-config-pwa": "^10.1.0-canary.
|
|
52
|
-
"@graphcommerce/typescript-config-pwa": "^10.1.0-canary.
|
|
46
|
+
"@graphcommerce/eslint-config-pwa": "^10.1.0-canary.39",
|
|
47
|
+
"@graphcommerce/framer-next-pages": "^10.1.0-canary.39",
|
|
48
|
+
"@graphcommerce/framer-scroller": "^10.1.0-canary.39",
|
|
49
|
+
"@graphcommerce/framer-utils": "^10.1.0-canary.39",
|
|
50
|
+
"@graphcommerce/image": "^10.1.0-canary.39",
|
|
51
|
+
"@graphcommerce/prettier-config-pwa": "^10.1.0-canary.39",
|
|
52
|
+
"@graphcommerce/typescript-config-pwa": "^10.1.0-canary.39",
|
|
53
53
|
"@lingui/core": "^5",
|
|
54
54
|
"@lingui/macro": "^5",
|
|
55
55
|
"@lingui/react": "^5",
|