@graphcommerce/magento-product 3.0.14 → 3.0.18
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
CHANGED
|
@@ -3,6 +3,30 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
## [3.0.18](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/magento-product@3.0.17...@graphcommerce/magento-product@3.0.18) (2021-10-08)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### Bug Fixes
|
|
10
|
+
|
|
11
|
+
* **product-grid:** product title is not a link ([d5707f9](https://github.com/ho-nl/m2-pwa/commit/d5707f97a53a01c18db967db3420d78b1132c53c))
|
|
12
|
+
* **product-list-item:** add ripple effect ([cdb2b9a](https://github.com/ho-nl/m2-pwa/commit/cdb2b9a63f65e6c1e8c819e6a20aca75c6cc286a))
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
|
|
18
|
+
## [3.0.15](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/magento-product@3.0.14...@graphcommerce/magento-product@3.0.15) (2021-10-06)
|
|
19
|
+
|
|
20
|
+
|
|
21
|
+
### Bug Fixes
|
|
22
|
+
|
|
23
|
+
* **cart-fab:** box shadow in safari ([4eb316d](https://github.com/ho-nl/m2-pwa/commit/4eb316dd0f2ab7ee2806a3acdb306af1eb72854b))
|
|
24
|
+
* **product-list-filters-container:** drop shadow fades in too fast ([2e8f848](https://github.com/ho-nl/m2-pwa/commit/2e8f84809baa3fe6c2861f8992f46b6a07842ec6))
|
|
25
|
+
|
|
26
|
+
|
|
27
|
+
|
|
28
|
+
|
|
29
|
+
|
|
6
30
|
## [3.0.8](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/magento-product@3.0.7...@graphcommerce/magento-product@3.0.8) (2021-09-30)
|
|
7
31
|
|
|
8
32
|
|
|
@@ -68,12 +68,13 @@ export type ProductListFiltersContainerProps = PropsWithChildren<UseStyles<typeo
|
|
|
68
68
|
|
|
69
69
|
export default function ProductListFiltersContainer(props: ProductListFiltersContainerProps) {
|
|
70
70
|
const { children } = props
|
|
71
|
-
|
|
72
71
|
const classes = useStyles(props)
|
|
73
72
|
const { scrollY } = useViewportScroll()
|
|
73
|
+
|
|
74
74
|
const [isSticky, setIsSticky] = useState<boolean>(false)
|
|
75
|
-
const [startPosition, setStartPosition] = useState(100)
|
|
76
|
-
const [spacing, setSpacing] = useState(20)
|
|
75
|
+
const [startPosition, setStartPosition] = useState<number>(100)
|
|
76
|
+
const [spacing, setSpacing] = useState<number>(20)
|
|
77
|
+
|
|
77
78
|
const scrollHalfway = startPosition + spacing
|
|
78
79
|
|
|
79
80
|
const wrapperRef = useRef<HTMLDivElement>(null)
|
|
@@ -87,8 +88,9 @@ export default function ProductListFiltersContainer(props: ProductListFiltersCon
|
|
|
87
88
|
const nextOffset =
|
|
88
89
|
(wrapperRef.current?.parentElement?.nextElementSibling as HTMLElement | null)?.offsetTop ??
|
|
89
90
|
0
|
|
91
|
+
const modifier = 5
|
|
90
92
|
|
|
91
|
-
setSpacing(nextOffset - elemHeigh - offset + 20)
|
|
93
|
+
setSpacing((nextOffset - elemHeigh - offset + 20) * modifier)
|
|
92
94
|
setStartPosition(offset)
|
|
93
95
|
})
|
|
94
96
|
if (wrapperRef.current) observer.observe(wrapperRef.current)
|
|
@@ -108,11 +110,10 @@ export default function ProductListFiltersContainer(props: ProductListFiltersCon
|
|
|
108
110
|
return scrollY.onChange(onCheckStickyChange)
|
|
109
111
|
}, [isSticky, scrollHalfway, scrollY])
|
|
110
112
|
|
|
111
|
-
const opacity = useTransform(scrollY, [startPosition, startPosition + spacing], [0, 0.
|
|
112
|
-
const
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
drop-shadow(0 4px 10px rgba(0,0,0,${opacity2}))`
|
|
113
|
+
const opacity = useTransform(scrollY, [startPosition, startPosition + spacing], [0, 0.1])
|
|
114
|
+
const boxShadow = useMotionTemplate`
|
|
115
|
+
0 4px 12px 0 rgba(0, 0, 0, ${opacity})
|
|
116
|
+
`
|
|
116
117
|
|
|
117
118
|
return (
|
|
118
119
|
<m.div className={classes.wrapper} ref={wrapperRef}>
|
|
@@ -122,7 +123,7 @@ export default function ProductListFiltersContainer(props: ProductListFiltersCon
|
|
|
122
123
|
</ScrollerButton>
|
|
123
124
|
<m.div
|
|
124
125
|
className={clsx(classes.container, isSticky && classes.containerSticky)}
|
|
125
|
-
style={{
|
|
126
|
+
style={{ boxShadow }}
|
|
126
127
|
>
|
|
127
128
|
<Scroller
|
|
128
129
|
className={clsx(classes.scroller, isSticky && classes.scrollerSticky)}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { Image, ImageProps } from '@graphcommerce/image'
|
|
2
|
-
import {
|
|
3
|
-
import { Link as MuiLink, makeStyles, Theme, Typography } from '@material-ui/core'
|
|
2
|
+
import { responsiveVal, UseStyles } from '@graphcommerce/next-ui'
|
|
3
|
+
import { ButtonBase, Link as MuiLink, makeStyles, Theme, Typography } from '@material-ui/core'
|
|
4
4
|
import clsx from 'clsx'
|
|
5
5
|
import PageLink from 'next/link'
|
|
6
6
|
import { useRouter } from 'next/router'
|
|
@@ -11,6 +11,9 @@ import ProductListPrice from '../ProductListPrice'
|
|
|
11
11
|
|
|
12
12
|
export const useProductListItemStyles = makeStyles(
|
|
13
13
|
(theme: Theme) => ({
|
|
14
|
+
buttonBase: {
|
|
15
|
+
display: 'block',
|
|
16
|
+
},
|
|
14
17
|
item: {
|
|
15
18
|
position: 'relative',
|
|
16
19
|
height: '100%',
|
|
@@ -163,61 +166,52 @@ export default function ProductListItem(props: ProductListItemProps) {
|
|
|
163
166
|
)
|
|
164
167
|
|
|
165
168
|
return (
|
|
166
|
-
<
|
|
167
|
-
<
|
|
168
|
-
<
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
)
|
|
181
|
-
|
|
182
|
-
)}
|
|
169
|
+
<PageLink href={productLink} passHref>
|
|
170
|
+
<ButtonBase classes={{ root: clsx(classes.buttonBase, classes.item) }} component='a'>
|
|
171
|
+
<div className={classes.imageContainer}>
|
|
172
|
+
{small_image ? (
|
|
173
|
+
<Image
|
|
174
|
+
layout='fill'
|
|
175
|
+
sizes={sizes}
|
|
176
|
+
dontReportWronglySizedImages={dontReportWronglySizedImages}
|
|
177
|
+
src={small_image.url ?? ''}
|
|
178
|
+
alt={small_image.label ?? ''}
|
|
179
|
+
className={classes.image}
|
|
180
|
+
loading={loading}
|
|
181
|
+
/>
|
|
182
|
+
) : (
|
|
183
|
+
<div className={clsx(classes.placeholder, classes.image)}>NO IMAGE</div>
|
|
184
|
+
)}
|
|
183
185
|
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
)}
|
|
190
|
-
{topLeft}
|
|
191
|
-
</div>
|
|
192
|
-
<div className={clsx(classes.overlayItem, classes.cellAlignRight)}>{topRight}</div>
|
|
193
|
-
<div className={clsx(classes.overlayItem, classes.cellAlignBottom)}>
|
|
194
|
-
{bottomLeft}
|
|
195
|
-
</div>
|
|
196
|
-
<div className={clsx(classes.cellAlignBottom, classes.cellAlignRight)}>
|
|
197
|
-
{bottomRight}
|
|
198
|
-
</div>
|
|
186
|
+
{!imageOnly && (
|
|
187
|
+
<div className={classes.overlayItems}>
|
|
188
|
+
<div className={classes.overlayItem}>
|
|
189
|
+
{discount > 0 && <div className={classes.discount}>{format(discount / -100)}</div>}
|
|
190
|
+
{topLeft}
|
|
199
191
|
</div>
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
{/* <div> */}
|
|
209
|
-
<Typography component='h2' variant='subtitle1' className={classes.title}>
|
|
210
|
-
{name}
|
|
211
|
-
</Typography>
|
|
212
|
-
{/* </div> */}
|
|
213
|
-
<div className={classes.subtitle}>{subTitle}</div>
|
|
192
|
+
<div className={clsx(classes.overlayItem, classes.cellAlignRight)}>{topRight}</div>
|
|
193
|
+
<div className={clsx(classes.overlayItem, classes.cellAlignBottom)}>{bottomLeft}</div>
|
|
194
|
+
<div className={clsx(classes.cellAlignBottom, classes.cellAlignRight)}>
|
|
195
|
+
{bottomRight}
|
|
196
|
+
</div>
|
|
197
|
+
</div>
|
|
198
|
+
)}
|
|
199
|
+
</div>
|
|
214
200
|
|
|
215
|
-
|
|
216
|
-
|
|
201
|
+
{!imageOnly && (
|
|
202
|
+
<>
|
|
203
|
+
<div className={classes.itemTitleContainer}>
|
|
204
|
+
<Typography component='h2' variant='subtitle1' className={classes.title}>
|
|
205
|
+
{name}
|
|
206
|
+
</Typography>
|
|
207
|
+
<div className={classes.subtitle}>{subTitle}</div>
|
|
217
208
|
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
209
|
+
<ProductListPrice {...price_range.minimum_price} classes={{ root: classes.price }} />
|
|
210
|
+
</div>
|
|
211
|
+
{children}
|
|
212
|
+
</>
|
|
213
|
+
)}
|
|
214
|
+
</ButtonBase>
|
|
215
|
+
</PageLink>
|
|
222
216
|
)
|
|
223
217
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@graphcommerce/magento-product",
|
|
3
|
-
"version": "3.0.
|
|
3
|
+
"version": "3.0.18",
|
|
4
4
|
"sideEffects": false,
|
|
5
5
|
"prettier": "@graphcommerce/prettier-config-pwa",
|
|
6
6
|
"browserslist": [
|
|
@@ -14,19 +14,19 @@
|
|
|
14
14
|
},
|
|
15
15
|
"devDependencies": {
|
|
16
16
|
"@graphcommerce/browserslist-config-pwa": "^3.0.1",
|
|
17
|
-
"@graphcommerce/eslint-config-pwa": "^3.0.
|
|
17
|
+
"@graphcommerce/eslint-config-pwa": "^3.0.5",
|
|
18
18
|
"@graphcommerce/prettier-config-pwa": "^3.0.2",
|
|
19
19
|
"@graphcommerce/typescript-config-pwa": "^3.1.0",
|
|
20
20
|
"@playwright/test": "^1.15.0"
|
|
21
21
|
},
|
|
22
22
|
"dependencies": {
|
|
23
|
-
"@apollo/client": "^3.
|
|
24
|
-
"@graphcommerce/framer-scroller": "^0.2.
|
|
25
|
-
"@graphcommerce/graphql": "^2.103.
|
|
26
|
-
"@graphcommerce/image": "^2.104.
|
|
27
|
-
"@graphcommerce/magento-cart": "^3.1.
|
|
28
|
-
"@graphcommerce/magento-store": "^3.0.
|
|
29
|
-
"@graphcommerce/next-ui": "^3.1.
|
|
23
|
+
"@apollo/client": "^3.4.16",
|
|
24
|
+
"@graphcommerce/framer-scroller": "^0.2.7",
|
|
25
|
+
"@graphcommerce/graphql": "^2.103.5",
|
|
26
|
+
"@graphcommerce/image": "^2.104.6",
|
|
27
|
+
"@graphcommerce/magento-cart": "^3.1.3",
|
|
28
|
+
"@graphcommerce/magento-store": "^3.0.14",
|
|
29
|
+
"@graphcommerce/next-ui": "^3.1.6",
|
|
30
30
|
"@graphql-typed-document-node/core": "^3.1.0",
|
|
31
31
|
"@material-ui/core": "^4.12.3",
|
|
32
32
|
"@material-ui/lab": "^4.0.0-alpha.60",
|
|
@@ -38,5 +38,5 @@
|
|
|
38
38
|
"schema-dts": "^1.0.0",
|
|
39
39
|
"type-fest": "^2.3.4"
|
|
40
40
|
},
|
|
41
|
-
"gitHead": "
|
|
41
|
+
"gitHead": "b2ca803d587d5d2771347cd825e428be8b33be34"
|
|
42
42
|
}
|