@graphcommerce/magento-product 3.0.17 → 3.0.21

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 (3) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/components/ProductListItem/index.tsx +48 -54
  3. package/package.json +7 -7
package/CHANGELOG.md CHANGED
@@ -3,6 +3,18 @@
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
+
6
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)
7
19
 
8
20
 
package/components/ProductListItem/index.tsx CHANGED
@@ -1,6 +1,6 @@
1
1
  import { Image, ImageProps } from '@graphcommerce/image'
2
- import { UseStyles, responsiveVal } from '@graphcommerce/next-ui'
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
- <div className={classes.item}>
167
- <PageLink href={productLink} passHref>
168
- <MuiLink underline='none'>
169
- <div className={classes.imageContainer}>
170
- {small_image ? (
171
- <Image
172
- layout='fill'
173
- sizes={sizes}
174
- dontReportWronglySizedImages={dontReportWronglySizedImages}
175
- src={small_image.url ?? ''}
176
- alt={small_image.label ?? ''}
177
- className={classes.image}
178
- loading={loading}
179
- />
180
- ) : (
181
- <div className={clsx(classes.placeholder, classes.image)}>GEEN AFBEELDING</div>
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
- {!imageOnly && (
185
- <div className={classes.overlayItems}>
186
- <div className={classes.overlayItem}>
187
- {discount > 0 && (
188
- <div className={classes.discount}>{format(discount / -100)}</div>
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
- </div>
202
- </MuiLink>
203
- </PageLink>
204
-
205
- {!imageOnly && (
206
- <>
207
- <div className={classes.itemTitleContainer}>
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
- <ProductListPrice {...price_range.minimum_price} classes={{ root: classes.price }} />
216
- </div>
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
- {children}
219
- </>
220
- )}
221
- </div>
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.17",
3
+ "version": "3.0.21",
4
4
  "sideEffects": false,
5
5
  "prettier": "@graphcommerce/prettier-config-pwa",
6
6
  "browserslist": [
@@ -21,12 +21,12 @@
21
21
  },
22
22
  "dependencies": {
23
23
  "@apollo/client": "^3.4.16",
24
- "@graphcommerce/framer-scroller": "^0.2.7",
24
+ "@graphcommerce/framer-scroller": "^0.2.9",
25
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",
26
+ "@graphcommerce/image": "^2.104.8",
27
+ "@graphcommerce/magento-cart": "^3.1.6",
28
+ "@graphcommerce/magento-store": "^3.0.17",
29
+ "@graphcommerce/next-ui": "^3.2.1",
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": "717bd3c1658e421c247c1f8b210935cdb7780197"
41
+ "gitHead": "e8e29078b5d241da5f90b930338e84ba543b0ea4"
42
42
  }