@graphcommerce/magento-review 2.106.0 → 2.107.1

package/CHANGELOG.md

@@ -3,6 +3,38 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.107.1](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/magento-review@2.107.0...@graphcommerce/magento-review@2.107.1) (2021-10-28)
+
+
+### Bug Fixes
+
+* External SVG's can't have alt tags ([1b1414a](https://github.com/ho-nl/m2-pwa/commit/1b1414a782d55d3acf7b0e6bcaa50f2ad5f18f39))
+
+
+
+
+
+# [2.107.0](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/magento-review@2.106.2...@graphcommerce/magento-review@2.107.0) (2021-10-28)
+
+
+### Bug Fixes
+
+* keep original review chip ([3f2f834](https://github.com/ho-nl/m2-pwa/commit/3f2f834478b7b8252f6164442815e5c081de6411))
+* keep original review chip for now ([9664cd9](https://github.com/ho-nl/m2-pwa/commit/9664cd90801c6776e1c694eec8f393118810a792))
+* review button size ([9074102](https://github.com/ho-nl/m2-pwa/commit/9074102c1866b14d0e7f1f0f3dfabe6e6c0b324d))
+* size of default ReviewChip ([e1d4969](https://github.com/ho-nl/m2-pwa/commit/e1d49699776b15fa056677f042f6c9939b6acada))
+
+
+### Features
+
+* cleanup grid, add visual star chip ([0571569](https://github.com/ho-nl/m2-pwa/commit/057156937f603bc399f5f8f8ac2837ff5cfaef28))
+* dynamic icons, update SvgImage uses to SvgImageSimple ([3d3cc0e](https://github.com/ho-nl/m2-pwa/commit/3d3cc0e0336fcde1cce6ba19705f82c1edf9bfc6))
+* enable use of both small and medium chips in design ([4536f96](https://github.com/ho-nl/m2-pwa/commit/4536f96b031734a71faf7c10f94aa5d5da90b9a8))
+
+
+
+
+
 # [2.106.0](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/magento-review@2.105.37...@graphcommerce/magento-review@2.106.0) (2021-10-27)
 
 

package/components/CustomerReview/index.tsx

@@ -50,7 +50,7 @@ const useStyles = makeStyles(
     date: {
       gridArea: 'date',
       fontStyle: 'italic',
-      color: theme.palette.primary.mutedText,
+      color: theme.palette.text.disabled,
     },
   }),
   { name: 'CustomerReview' },
@@ -88,11 +88,7 @@ export default function CustomerReview(props: CustomerReviewProps) {
       </div>
       <div className={classes.stars}>
         {[...new Array(totalStars)].map((value, index) => (
-          <Image
-            src={index < totalFilledStars ? filledStar : outlinedStar}
-            alt='star'
-            loading='eager'
-          />
+          <Image src={index < totalFilledStars ? filledStar : outlinedStar} />
         ))}
       </div>
       <div className={classes.title}>{product?.name}</div>

package/components/ProductReviewChip/index.tsx

@@ -1,15 +1,43 @@
-import { SvgImageSimple, iconStarYellow } from '@graphcommerce/next-ui'
-import { Chip, ChipProps } from '@material-ui/core'
+import { SvgImageSimple, iconStar } from '@graphcommerce/next-ui'
+import { Chip, ChipProps, makeStyles } from '@material-ui/core'
 import React from 'react'
 
 export type ProductReviewChipProps = {
   rating?: number
   reviewSectionId?: string
   max?: number
+  shapeOnly?: boolean
 } & ChipProps
 
+const useStyles = makeStyles({
+  ratingContainer: {
+    width: '100%',
+    position: 'relative',
+  },
+  rating: {
+    position: 'absolute',
+    overflow: 'hidden',
+    '& > img': {
+      display: 'inline',
+    },
+    zIndex: 1,
+  },
+  maxRating: {
+    opacity: 0.4,
+    '& > img': {
+      display: 'inline',
+      filter: 'grayscale(100%)',
+    },
+  },
+  iconStar: {
+    stroke: '#FFDA1C',
+    fill: '#FFDA1C',
+  },
+})
+
 export default function ProductReviewChip(props: ProductReviewChipProps) {
-  const { rating, reviewSectionId = '', max = 5, ...chipProps } = props
+  const { rating, reviewSectionId = '', shapeOnly = false, max = 5, ...chipProps } = props
+  const classes = useStyles()
 
   if (!rating) return null
 
@@ -32,8 +60,9 @@ export default function ProductReviewChip(props: ProductReviewChipProps) {
       variant='outlined'
       clickable={!!reviewSectionId}
       onClick={handleClick}
-      icon={<SvgImageSimple src={iconStarYellow} alt='Stars' />}
+      icon={<SvgImageSimple src={iconStar} size='small' className={classes.iconStar} />}
       color='default'
+      size='small'
       label={`${normalizedRating}/5`}
       {...chipProps}
     />

package/components/ProductReviews/index.tsx

@@ -1,8 +1,7 @@
 import { useQuery } from '@apollo/client'
 import {
   Button,
-  iconStarFilledMuted,
-  iconStarYellow,
+  iconStar,
   Pagination,
   responsiveVal,
   StarRatingField,
@@ -37,8 +36,12 @@ const useStyles = makeStyles(
       gridAutoFlow: 'column',
       justifyContent: 'space-between',
     },
-    nickname: {},
-    date: {},
+    nickname: {
+      ...theme.typography.body2,
+    },
+    date: {
+      ...theme.typography.body2,
+    },
     reviewsBottomContainer: {
       display: 'flex',
       alignItems: 'center',
@@ -128,7 +131,7 @@ export default function ProductReviews(props: ProductReviewsProps) {
           variant='pill'
           color='primary'
           text='bold'
-          size='large'
+          size='medium'
           className={classes.writeReviewButton}
         >
           Write a review
@@ -169,7 +172,7 @@ export default function ProductReviews(props: ProductReviewsProps) {
         myReviews.items.map((review) => (
           <div key={review?.summary} className={classes.review}>
             <div className={classes.title}>
-              <ProductReviewChip rating={review?.average_rating} variant='default' />
+              <ProductReviewChip rating={review?.average_rating} size='small' />
               <Typography variant='h5'> {review?.summary}</Typography>
             </div>
             <Typography variant='body1'>{review?.text}</Typography>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@graphcommerce/magento-review",
-  "version": "2.106.0",
+  "version": "2.107.1",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "browserslist": [
@@ -14,26 +14,26 @@
   },
   "devDependencies": {
     "@graphcommerce/browserslist-config-pwa": "^3.0.2",
-    "@graphcommerce/eslint-config-pwa": "^3.1.1",
+    "@graphcommerce/eslint-config-pwa": "^3.1.2",
     "@graphcommerce/prettier-config-pwa": "^3.0.3",
     "@graphcommerce/typescript-config-pwa": "^3.1.1",
-    "@playwright/test": "^1.15.2"
+    "@playwright/test": "^1.16.2"
   },
   "dependencies": {
     "@apollo/client": "^3.4.16",
-    "@graphcommerce/graphql": "^2.105.0",
-    "@graphcommerce/image": "^2.105.0",
-    "@graphcommerce/magento-product": "^3.3.0",
-    "@graphcommerce/magento-store": "^3.1.0",
-    "@graphcommerce/next-ui": "^3.10.0",
+    "@graphcommerce/graphql": "^2.105.1",
+    "@graphcommerce/image": "^2.105.1",
+    "@graphcommerce/magento-product": "^3.4.1",
+    "@graphcommerce/magento-store": "^3.1.4",
+    "@graphcommerce/next-ui": "^3.11.1",
     "@graphql-typed-document-node/core": "^3.1.0",
     "@material-ui/core": "^4.12.3",
     "@material-ui/lab": "^4.0.0-alpha.60",
     "clsx": "^1.1.1",
-    "next": "^12.0.0",
+    "next": "^12.0.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "schema-dts": "^1.0.0"
   },
-  "gitHead": "e34fa8877d4596971c861c0c2438cb4c82f6fcaa"
+  "gitHead": "e01d10a0e89c68c316c3e4bb6a306e9a6959a7f6"
 }