@graphcommerce/magento-review 3.2.33 → 3.3.0

package/CHANGELOG.md

@@ -1,5 +1,30 @@
 # Change Log
 
+## 3.3.0
+
+### Minor Changes
+
+- [#1602](https://github.com/graphcommerce-org/graphcommerce/pull/1602) [`5f781a217`](https://github.com/graphcommerce-org/graphcommerce/commit/5f781a217ce63ed56bc1a9983487b04400a8a315) Thanks [@ErwinOtten](https://github.com/ErwinOtten)! - Default styles and layout fixes
+
+  - Scaled icons and fonts down. Size in typography is now more gradual: https://graphcommerce.vercel.app/test/typography
+  - Multiple accessibility fixes. Missing button/input labels, and fixed spacing issues resulting in high % appropriately sized tap targets
+  - Replaced responsiveVal usage with better performaning breakpointVal where possible
+  - All buttons are now Pill by default.
+  - Cleaned up checkout styles
+
+### Patch Changes
+
+- [#1609](https://github.com/graphcommerce-org/graphcommerce/pull/1609) [`e573278e4`](https://github.com/graphcommerce-org/graphcommerce/commit/e573278e43506a6b17a2981e61d0e9fad41eb2eb) Thanks [@ErwinOtten](https://github.com/ErwinOtten)! - Fix the account review modal
+
+- Updated dependencies [[`b40a352f7`](https://github.com/graphcommerce-org/graphcommerce/commit/b40a352f7bccdb831dce1d45baf98d51b0921d58), [`3ff0e7f2d`](https://github.com/graphcommerce-org/graphcommerce/commit/3ff0e7f2d26edad228848268d24e9aaf56cd2c30), [`04708dacc`](https://github.com/graphcommerce-org/graphcommerce/commit/04708daccc213c6ea927bc67fa3bd0d5b1fad619), [`bb94e7045`](https://github.com/graphcommerce-org/graphcommerce/commit/bb94e7045460cb671c45d612a0833731d7c20c30), [`b0dc4e2e1`](https://github.com/graphcommerce-org/graphcommerce/commit/b0dc4e2e1982d502d38dd50a0f493396360a7a15), [`4a5286dfe`](https://github.com/graphcommerce-org/graphcommerce/commit/4a5286dfeaa1719e594a0078f274fbab53969c4e), [`0ad5159eb`](https://github.com/graphcommerce-org/graphcommerce/commit/0ad5159ebef54b4ce7fee6f71b4bf710dba9ef8e), [`40983df17`](https://github.com/graphcommerce-org/graphcommerce/commit/40983df170ed0435c47496285dfe30aafeb2eeac), [`d46d5ed0c`](https://github.com/graphcommerce-org/graphcommerce/commit/d46d5ed0cc5794391b7527fc17bbb68ec2212e33), [`5f781a217`](https://github.com/graphcommerce-org/graphcommerce/commit/5f781a217ce63ed56bc1a9983487b04400a8a315), [`ec96a0eb0`](https://github.com/graphcommerce-org/graphcommerce/commit/ec96a0eb049ee2204f32f9c578455cf9c131dbd2)]:
+  - @graphcommerce/magento-product@4.5.0
+  - @graphcommerce/graphql-mesh@4.1.8
+  - @graphcommerce/next-ui@4.22.0
+  - @graphcommerce/magento-customer@4.10.0
+  - @graphcommerce/magento-store@4.2.28
+  - @graphcommerce/graphql@3.4.7
+  - @graphcommerce/image@3.1.9
+
 ## 3.2.33
 
 ### Patch Changes

package/components/AccountReviews/AccountReviews.tsx

@@ -1,28 +1,18 @@
 import { SectionContainer, extendableComponent } from '@graphcommerce/next-ui'
-import { Box, Skeleton } from '@mui/material'
+import { Box } from '@mui/material'
 import { CustomerReview } from '../CustomerReview/CustomerReview'
 import { AccountReviewsFragment } from './AccountReviews.gql'
 
-type AccountReviewsProps = AccountReviewsFragment & { loading: boolean }
+type AccountReviewsProps = AccountReviewsFragment
 
 const { classes } = extendableComponent('AccountReviews', ['root', 'older'] as const)
 
 export function AccountReviews(props: AccountReviewsProps) {
-  const { items, loading } = props
+  const { items } = props
   const showLatestReviews = 2
   const latestReviews = items?.slice(0, Math.min(items?.length, showLatestReviews))
   const olderReviews = items?.slice(Math.min(items?.length, showLatestReviews), items?.length)
 
-  if (loading) {
-    return (
-      <Box className={classes.root} sx={(theme) => ({ marginBottom: theme.spacings.md })}>
-        <SectionContainer labelLeft='Latest'>
-          <Skeleton height={196} />
-          <Skeleton height={196} />
-        </SectionContainer>
-      </Box>
-    )
-  }
   return (
     <Box className={classes.root} sx={(theme) => ({ marginBottom: theme.spacings.md })}>
       <SectionContainer labelLeft='Latest'>

package/components/CreateProductReviewForm/CreateProductReviewForm.tsx

@@ -199,8 +199,6 @@ export function CreateProductReviewForm(props: CreateProductReviewFormProps) {
         className={classes.formActions}
         sx={(theme) => ({
           gridAutoFlow: 'row',
-          gap: 8,
-          marginTop: theme.spacings.xxs,
         })}
       >
         <Button
@@ -209,23 +207,15 @@ export function CreateProductReviewForm(props: CreateProductReviewFormProps) {
           type='submit'
           size='medium'
           className={classes.submitButton}
-          sx={{
-            width: responsiveVal(200, 250),
-            height: responsiveVal(40, 50),
-          }}
         >
           <Trans id='Submit review' />
         </Button>
         <Button
           variant='text'
           color='primary'
+          size='medium'
           onClick={() => router.back()}
           className={classes.cancelButton}
-          sx={{
-            display: 'block',
-            maxWidth: 'max-content',
-            margin: '0 auto',
-          }}
         >
           <Trans id='Cancel' />
         </Button>

package/components/CustomerReview/CustomerReview.tsx

@@ -1,5 +1,10 @@
 import { Image } from '@graphcommerce/image'
-import { responsiveVal, extendableComponent, useDateTimeFormat } from '@graphcommerce/next-ui'
+import {
+  responsiveVal,
+  extendableComponent,
+  useDateTimeFormat,
+  IconSvg,
+} from '@graphcommerce/next-ui'
 import { Box, SxProps, Theme } from '@mui/material'
 import { CustomerReviewFragment } from './CustomerReview.gql'
 import filledStar from './review_star_filled.svg'
@@ -73,7 +78,7 @@ export function CustomerReview(props: CustomerReviewProps) {
       <Box className={classes.stars} sx={{ gridArea: 'stars', margin: '-6px 0 -6px -6px' }}>
         {[...new Array(totalStars)].map((_, index) => (
           // eslint-disable-next-line react/no-array-index-key
-          <Image key={index} src={index < totalFilledStars ? filledStar : outlinedStar} />
+          <IconSvg key={index} src={index < totalFilledStars ? filledStar : outlinedStar} />
         ))}
       </Box>
       <Box

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/magento-review",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "3.2.33",
+  "version": "3.3.0",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -18,13 +18,13 @@
     "@playwright/test": "^1.21.1"
   },
   "dependencies": {
-    "@graphcommerce/graphql": "3.4.6",
-    "@graphcommerce/graphql-mesh": "4.1.7",
-    "@graphcommerce/image": "3.1.8",
-    "@graphcommerce/magento-customer": "4.9.5",
-    "@graphcommerce/magento-product": "4.4.25",
-    "@graphcommerce/magento-store": "4.2.27",
-    "@graphcommerce/next-ui": "4.21.0",
+    "@graphcommerce/graphql": "3.4.7",
+    "@graphcommerce/graphql-mesh": "4.1.8",
+    "@graphcommerce/image": "3.1.9",
+    "@graphcommerce/magento-customer": "4.10.0",
+    "@graphcommerce/magento-product": "4.5.0",
+    "@graphcommerce/magento-store": "4.2.28",
+    "@graphcommerce/next-ui": "4.22.0",
     "@graphcommerce/react-hook-form": "3.3.2",
     "schema-dts": "^1.1.0"
   },