@graphcommerce/magento-review 2.109.1 → 2.111.0

package/CHANGELOG.md

@@ -3,6 +3,41 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.111.0](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/magento-review@2.110.2...@graphcommerce/magento-review@2.111.0) (2021-12-01)
+
+
+### Features
+
+* borderRadius based on theme.shape.borderRadius ([7c34937](https://github.com/ho-nl/m2-pwa/commit/7c349376cd41a131c628324c299106fdb7e60484))
+
+
+
+
+
+# [2.110.0](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/magento-review@2.109.1...@graphcommerce/magento-review@2.110.0) (2021-11-22)
+
+
+### Bug Fixes
+
+* allow styling from parent ([ed1b4dc](https://github.com/ho-nl/m2-pwa/commit/ed1b4dc446fa19244cc73f87063256809b914d15))
+* cleanup ([7937ac5](https://github.com/ho-nl/m2-pwa/commit/7937ac5c6163a4ffe10d8a8d61847fcc86e82a9d))
+* make stylable ([54aea4c](https://github.com/ho-nl/m2-pwa/commit/54aea4c177c708de07df9ef9c590da6bff43aea8))
+* remove styles ([fabde1f](https://github.com/ho-nl/m2-pwa/commit/fabde1f1dba9f75dea60bb2c7c69d4793c6197cd))
+* rename summary chip fragment ([bb23dfc](https://github.com/ho-nl/m2-pwa/commit/bb23dfc8bb82e99832196b4080d2c4c9f269cc5d))
+* revert to SvgImageSimple ([b247c6b](https://github.com/ho-nl/m2-pwa/commit/b247c6b96979bc313e597a8ffe1275b73f38bd6a))
+* review form size large ([9f45336](https://github.com/ho-nl/m2-pwa/commit/9f45336d310b120088fe6440dd95a51944ff77cb))
+* use fragment types ([0a06309](https://github.com/ho-nl/m2-pwa/commit/0a0630916e191c59eed402904b9ace6b87831bd8))
+
+
+### Features
+
+* add ReviewSummary component ([b823669](https://github.com/ho-nl/m2-pwa/commit/b823669d32e92238d05cac181c3453a13da49601))
+* use Rating component ([ec54f45](https://github.com/ho-nl/m2-pwa/commit/ec54f4522adb2d330bbdecc2ce032f86f13fb7a6))
+
+
+
+
+
 # [2.109.0](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/magento-review@2.108.6...@graphcommerce/magento-review@2.109.0) (2021-11-12)
 
 

package/components/CreateProductReviewForm/index.tsx

@@ -36,7 +36,6 @@ const useStyles = makeStyles(
     submitButton: {
       width: responsiveVal(200, 250),
       height: responsiveVal(40, 50),
-      borderRadius: responsiveVal(20, 25),
     },
     cancelButton: {
       display: 'block',
@@ -139,6 +138,7 @@ export default function CreateProductReviewForm(props: CreateProductReviewFormPr
             {prrvm && (
               <StarRatingField
                 id={prrvm?.id ?? ''}
+                size='large'
                 onChange={(id, value) => {
                   const productReviewRatingInputValue =
                     data.productReviewRatingsMetadata.items.find((meta) => meta?.id === id)?.values[

package/components/ProductReviewChip/ProductReviewSummaryChip.graphql

@@ -0,0 +1,4 @@
+fragment ProductReviewSummaryChip on ProductInterface
+@inject(into: ["ProductListItem", "ProductPageItem"]) {
+  rating_summary
+}

package/components/ProductReviewChip/index.tsx

@@ -6,30 +6,10 @@ export type ProductReviewChipProps = {
   rating?: number
   reviewSectionId?: string
   max?: number
-  shapeOnly?: boolean
 } & ChipProps
 
 const useStyles = makeStyles(
   (theme: Theme) => ({
-    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',
@@ -39,7 +19,7 @@ const useStyles = makeStyles(
 )
 
 export default function ProductReviewChip(props: ProductReviewChipProps) {
-  const { rating, reviewSectionId = '', shapeOnly = false, max = 5, ...chipProps } = props
+  const { rating, reviewSectionId = '', max = 5, ...chipProps } = props
   const classes = useStyles()
 
   if (!rating) return null

package/components/ProductReviewSummary/index.tsx

@@ -0,0 +1,63 @@
+import { SvgImageSimple, iconStar, responsiveVal, UseStyles } from '@graphcommerce/next-ui'
+import { makeStyles, Theme } from '@material-ui/core'
+import { ProductReviewSummaryFragment } from './ProductReviewSummary.gql'
+import React from 'react'
+
+export type ProductReviewSummaryProps = ProductReviewSummaryFragment & UseStyles<typeof useStyles>
+
+const useStyles = makeStyles(
+  (theme: Theme) => ({
+    root: {
+      width: 'max-content',
+      position: 'relative',
+      '& > div': {
+        lineHeight: 0,
+      },
+    },
+    rating: {
+      position: 'absolute',
+      top: 0,
+      overflow: 'hidden',
+      '& > div': {
+        whiteSpace: 'nowrap',
+      },
+    },
+    iconStar: {
+      stroke: 'none',
+      fill: '#FFDA1C',
+    },
+    iconStarDisabled: {
+      stroke: 'none',
+      fill: theme.palette.grey[300],
+    },
+  }),
+  { name: 'ProductListReviewSummary' },
+)
+
+export default function ProductReviewSummary(props: ProductReviewSummaryProps) {
+  const { rating_summary } = props
+  const classes = useStyles(props)
+
+  if (!rating_summary) return null
+
+  return (
+    <div className={classes.root}>
+      <div>
+        <SvgImageSimple src={iconStar} size='xs' className={classes.iconStarDisabled} />
+        <SvgImageSimple src={iconStar} size='xs' className={classes.iconStarDisabled} />
+        <SvgImageSimple src={iconStar} size='xs' className={classes.iconStarDisabled} />
+        <SvgImageSimple src={iconStar} size='xs' className={classes.iconStarDisabled} />
+        <SvgImageSimple src={iconStar} size='xs' className={classes.iconStarDisabled} />
+      </div>
+      <div className={classes.rating} style={{ width: `${rating_summary}%` }}>
+        <div>
+          <SvgImageSimple src={iconStar} size='xs' className={classes.iconStar} />
+          <SvgImageSimple src={iconStar} size='xs' className={classes.iconStar} />
+          <SvgImageSimple src={iconStar} size='xs' className={classes.iconStar} />
+          <SvgImageSimple src={iconStar} size='xs' className={classes.iconStar} />
+          <SvgImageSimple src={iconStar} size='xs' className={classes.iconStar} />
+        </div>
+      </div>
+    </div>
+  )
+}

package/components/index.ts

@@ -3,11 +3,13 @@ export { default as CreateProductReviewForm } from './CreateProductReviewForm'
 export { default as CustomerReview } from './CustomerReview'
 export { default as ProductReviews } from './ProductReviews'
 export { default as ProductReviewChip } from './ProductReviewChip'
+export { default as ProductReviewSummary } from './ProductReviewSummary'
 
 export * from './AccountReviews/AccountReviews.gql'
 export * from './ProductReviews'
 export * from './CustomerReview/CustomerReview.gql'
-export * from './ProductReviewChip/ProductReviewSummary.gql'
+export * from './ProductReviewSummary/ProductReviewSummary.gql'
+export * from './ProductReviewChip/ProductReviewSummaryChip.gql'
 export * from './ProductReviews/ProductReviewProductName.gql'
 export * from './CreateProductReviewForm/CreateProductReview.gql'
 export * from './CreateProductReviewForm/ProductReviewRatingsMetadata.gql'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@graphcommerce/magento-review",
-  "version": "2.109.1",
+  "version": "2.111.0",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "browserslist": [
@@ -23,10 +23,10 @@
     "@apollo/client": "^3.4.16",
     "@graphcommerce/graphql": "^2.105.5",
     "@graphcommerce/image": "^2.105.4",
-    "@graphcommerce/magento-customer": "^3.6.1",
-    "@graphcommerce/magento-product": "^3.6.1",
-    "@graphcommerce/magento-store": "^3.3.1",
-    "@graphcommerce/next-ui": "^3.17.1",
+    "@graphcommerce/magento-customer": "^3.6.5",
+    "@graphcommerce/magento-product": "^3.7.0",
+    "@graphcommerce/magento-store": "^3.3.5",
+    "@graphcommerce/next-ui": "^3.19.0",
     "@graphcommerce/react-hook-form": "^2.104.0",
     "@lingui/macro": "^3.12.1",
     "@material-ui/core": "^4.12.3",
@@ -37,5 +37,5 @@
     "react-dom": "^17.0.2",
     "schema-dts": "^1.0.0"
   },
-  "gitHead": "e8578cc336e58d896531179f5fcb6973e8a983ce"
+  "gitHead": "f079c0b5b96dd1a048ca4d3c1d07916353c6bc33"
 }