@graphcommerce/magento-product 4.1.11 → 4.3.1

package/CHANGELOG.md

@@ -1,5 +1,37 @@
 # Change Log
 
+## 4.3.1
+
+### Patch Changes
+
+- Updated dependencies [[`25ef6cf08`](https://github.com/graphcommerce-org/graphcommerce/commit/25ef6cf08c278105307d6f604b7135d637e9046c), [`80e30bb77`](https://github.com/graphcommerce-org/graphcommerce/commit/80e30bb77015755fbc00a7935d590f80c1c1c18c)]:
+  - @graphcommerce/graphql@3.1.2
+  - @graphcommerce/graphql-mesh@4.1.3
+  - @graphcommerce/magento-cart@4.2.11
+  - @graphcommerce/magento-store@4.2.1
+  - @graphcommerce/next-ui@4.7.1
+  - @graphcommerce/framer-scroller@2.1.9
+
+## 4.3.0
+
+### Minor Changes
+
+- [#1256](https://github.com/graphcommerce-org/graphcommerce/pull/1256) [`669a17a97`](https://github.com/graphcommerce-org/graphcommerce/commit/669a17a973c47c00fed4a649a9da0bfc5670c5da) Thanks [@timhofman](https://github.com/timhofman)! - Wishlist
+
+## 4.2.0
+
+### Minor Changes
+
+- [#1416](https://github.com/graphcommerce-org/graphcommerce/pull/1416) [`f3d06dd83`](https://github.com/graphcommerce-org/graphcommerce/commit/f3d06dd836c9a76412b419d4d2c79bbd0ee92e04) Thanks [@ErwinOtten](https://github.com/ErwinOtten)! - SEO audit
+
+### Patch Changes
+
+- Updated dependencies [[`f3d06dd83`](https://github.com/graphcommerce-org/graphcommerce/commit/f3d06dd836c9a76412b419d4d2c79bbd0ee92e04)]:
+  - @graphcommerce/magento-store@4.2.0
+  - @graphcommerce/next-ui@4.7.0
+  - @graphcommerce/magento-cart@4.2.10
+  - @graphcommerce/framer-scroller@2.1.8
+
 ## 4.1.11
 
 ### Patch Changes

package/components/ProductAddToCart/ProductAddToCart.tsx

@@ -22,6 +22,7 @@ const { classes, selectors } = extendableComponent('ProductAddToCart', [
   'button',
   'price',
   'divider',
+  'buttonWrapper',
 ] as const)
 
 export type AddToCartProps = React.ComponentProps<typeof ProductAddToCart>
@@ -31,10 +32,11 @@ export function ProductAddToCart(
     variables: Omit<ProductAddToCartMutationVariables, 'cartId'>
     name: string
     price: MoneyProps
+    additionalButtons?: React.ReactNode
     children?: React.ReactNode
   } & Omit<ButtonProps, 'type' | 'name'>,
 ) {
-  const { name, children, variables, price, sx, ...buttonProps } = props
+  const { name, children, variables, price, sx, additionalButtons, ...buttonProps } = props
 
   const form = useFormGqlMutationCart(ProductAddToCartDocument, {
     defaultValues: { ...variables },
@@ -69,21 +71,32 @@ export function ProductAddToCart(
         size='small'
       />
       {children}
-      <Button
-        type='submit'
-        className={classes.button}
-        loading={formState.isSubmitting}
-        color='primary'
-        variant='pill'
-        size='large'
+      <Box
         sx={(theme) => ({
-          marginTop: theme.spacings.sm,
-          width: '100%',
+          display: 'flex',
+          alignItems: 'center',
+          columnGap: theme.spacings.xs,
         })}
-        {...buttonProps}
+        className={classes.buttonWrapper}
       >
-        <Trans>Add to Cart</Trans>
-      </Button>
+        <Button
+          type='submit'
+          className={classes.button}
+          loading={formState.isSubmitting}
+          color='primary'
+          variant='pill'
+          size='large'
+          sx={(theme) => ({
+            marginTop: theme.spacings.sm,
+            marginBottom: theme.spacings.sm,
+            width: '100%',
+          })}
+          {...buttonProps}
+        >
+          <Trans>Add to Cart</Trans>
+        </Button>
+        {additionalButtons}
+      </Box>
 
       <ApolloCartErrorAlert error={error} />
 

package/components/ProductListItem/ProductListItem.tsx

@@ -43,7 +43,10 @@ type BaseProps = PropsWithChildren<
     Pick<ImageProps, 'loading' | 'sizes' | 'dontReportWronglySizedImages'>
 >
 
-export type ProductListItemProps = BaseProps & { sx?: SxProps<Theme> }
+export type ProductListItemProps = BaseProps & {
+  sx?: SxProps<Theme>
+  titleComponent?: React.ElementType
+}
 
 const StyledImage = styled(Image)({})
 
@@ -63,6 +66,7 @@ export function ProductListItem(props: ProductListItemProps) {
     sizes,
     dontReportWronglySizedImages,
     aspectRatio = [4, 3],
+    titleComponent = 'h2',
     sx = [],
   } = props
 
@@ -218,7 +222,7 @@ export function ProductListItem(props: ProductListItemProps) {
               })}
             >
               <Typography
-                component='h2'
+                component={titleComponent}
                 variant='subtitle1'
                 sx={{
                   display: 'inline',

package/components/ProductListItems/ProductListItemsBase.tsx

@@ -12,11 +12,12 @@ export type ProductItemsGridProps = {
   renderers: ProductListItemRenderer
   loadingEager?: number
   size?: 'normal' | 'small'
+  titleComponent?: React.ElementType
   sx?: BoxProps['sx']
 }
 
 export function ProductListItemsBase(props: ProductItemsGridProps) {
-  const { items, sx = [], renderers, loadingEager = 0, size = 'normal' } = props
+  const { items, sx = [], renderers, loadingEager = 0, size = 'normal', titleComponent } = props
 
   return (
     <Box
@@ -47,6 +48,7 @@ export function ProductListItemsBase(props: ProductItemsGridProps) {
                 ? { 0: '100vw', 354: '50vw', 675: '30vw', 1255: '23vw', 1500: '337px' }
                 : { 0: '100vw', 367: '48vw', 994: '30vw', 1590: '23vw', 1920: '443px' }
             }
+            titleComponent={titleComponent}
             noReport
           />
         ) : null,

package/components/ProductPageCategory/productPageCategory.ts

@@ -13,5 +13,5 @@ export function productPageCategory(product?: ProductPageCategoryFragment | null
     const carryL = carry?.url_path?.split('/')?.length ?? 0
     const valueL = value?.url_path?.split('/')?.length ?? 0
     return carryL >= valueL ? carry : value
-  })
+  }, null)
 }

package/components/ProductPageDescription/ProductPageDescription.tsx

@@ -27,7 +27,7 @@ export function ProductPageDescription(props: ProductPageDescriptionProps) {
       className={classes.root}
       sx={sx}
       top={
-        <Typography variant='h1' component='h2'>
+        <Typography variant='h1' component='h1'>
           {name}
         </Typography>
       }

package/components/index.ts

@@ -1,5 +1,6 @@
 export * from './JsonLdProduct/jsonLdProduct'
 export * from './ProductAddToCart/ProductAddToCart'
+export * from './ProductAddToCart/ProductAddToCart.gql'
 export * from './ProductList/ProductList.gql'
 export * from './ProductListCount/ProductListCount'
 export * from './ProductListFilters/ProductListFilters'

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/magento-product",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "4.1.11",
+  "version": "4.3.1",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -19,13 +19,13 @@
     "type-fest": "^2.12.2"
   },
   "dependencies": {
-    "@graphcommerce/framer-scroller": "2.1.7",
-    "@graphcommerce/graphql": "3.1.1",
-    "@graphcommerce/graphql-mesh": "4.1.2",
+    "@graphcommerce/framer-scroller": "2.1.9",
+    "@graphcommerce/graphql": "3.1.2",
+    "@graphcommerce/graphql-mesh": "4.1.3",
     "@graphcommerce/image": "3.1.5",
-    "@graphcommerce/magento-cart": "4.2.9",
-    "@graphcommerce/magento-store": "4.1.9",
-    "@graphcommerce/next-ui": "4.6.2",
+    "@graphcommerce/magento-cart": "4.2.11",
+    "@graphcommerce/magento-store": "4.2.1",
+    "@graphcommerce/next-ui": "4.7.1",
     "schema-dts": "^1.1.0"
   },
   "peerDependencies": {