@graphcommerce/magento-product 4.1.8 → 4.1.11

package/CHANGELOG.md

@@ -1,5 +1,34 @@
 # Change Log
 
+## 4.1.11
+
+### Patch Changes
+
+- Updated dependencies [[`ba8cd4d34`](https://github.com/graphcommerce-org/graphcommerce/commit/ba8cd4d3480a7ec7e555b051cfd0fbc809c7aa12)]:
+  - @graphcommerce/graphql-mesh@4.1.2
+  - @graphcommerce/magento-cart@4.2.9
+  - @graphcommerce/magento-store@4.1.9
+
+## 4.1.10
+
+### Patch Changes
+
+- [#1394](https://github.com/graphcommerce-org/graphcommerce/pull/1394) [`b6b8bb5b3`](https://github.com/graphcommerce-org/graphcommerce/commit/b6b8bb5b31b0891ea24733de34a3bd5c0a9604e4) Thanks [@paales](https://github.com/paales)! - Made fragments injectable so they can be extended
+
+- Updated dependencies [[`06f7bdff8`](https://github.com/graphcommerce-org/graphcommerce/commit/06f7bdff882396f2b0e1a2873fbb718c7b06fab4), [`100f4c38c`](https://github.com/graphcommerce-org/graphcommerce/commit/100f4c38c8fcda4bc6e0425e38028b550b60adc2)]:
+  - @graphcommerce/graphql-mesh@4.1.1
+  - @graphcommerce/graphql@3.1.1
+  - @graphcommerce/next-ui@4.6.2
+  - @graphcommerce/magento-store@4.1.8
+  - @graphcommerce/magento-cart@4.2.8
+  - @graphcommerce/framer-scroller@2.1.7
+
+## 4.1.9
+
+### Patch Changes
+
+- [#1419](https://github.com/graphcommerce-org/graphcommerce/pull/1419) [`a52a863f9`](https://github.com/graphcommerce-org/graphcommerce/commit/a52a863f9c69c6b3ae657dcce3bc9b14413ce125) Thanks [@NickdeK](https://github.com/NickdeK)! - Make ProductListSort stylable and translate "Sort By" string
+
 ## 4.1.8
 
 ### Patch Changes

package/components/ProductListSort/ProductListSort.tsx

@@ -1,7 +1,8 @@
 import { useQuery, cloneDeep } from '@graphcommerce/graphql'
 import { StoreConfigDocument } from '@graphcommerce/magento-store'
-import { ChipMenu, ChipMenuProps } from '@graphcommerce/next-ui'
-import { ListItem, ListItemText } from '@mui/material'
+import { ChipMenu, ChipMenuProps, extendableComponent } from '@graphcommerce/next-ui'
+import { Trans } from '@lingui/macro'
+import { ListItem, ListItemText, SxProps, Theme } from '@mui/material'
 import React from 'react'
 import { useProductListLinkReplace } from '../../hooks/useProductListLinkReplace'
 import { useProductListParamsContext } from '../../hooks/useProductListParamsContext'
@@ -9,10 +10,16 @@ import { ProductListLink } from '../ProductListLink/ProductListLink'
 import { ProductListSortFragment } from './ProductListSort.gql'
 
 export type ProductListSortProps = ProductListSortFragment &
-  Omit<ChipMenuProps, 'selected' | 'selectedLabel' | 'children' | 'label' | 'onDelete'>
+  Omit<ChipMenuProps, 'selected' | 'selectedLabel' | 'children' | 'label' | 'onDelete'> & {
+    sx?: SxProps<Theme>
+  }
+
+const name = 'ProductListSort' as const
+const parts = ['menu', 'item', 'link'] as const
+const { classes } = extendableComponent(name, parts)
 
 export function ProductListSort(props: ProductListSortProps) {
-  const { sort_fields, total_count, ...filterMenuProps } = props
+  const { sort_fields, total_count, sx = [], ...filterMenuProps } = props
   const { params } = useProductListParamsContext()
   const replaceRoute = useProductListLinkReplace()
   const { data: storeConfigQuery } = useQuery(StoreConfigDocument)
@@ -21,7 +28,7 @@ export function ProductListSort(props: ProductListSortProps) {
   const [currentSort = defaultSort] = Object.keys(params.sort)
   const currentOption = sort_fields?.options?.find((option) => option?.value === currentSort)
   const selected = currentSort !== defaultSort
-  const label = 'Sort By'
+  const label = <Trans>Sort By</Trans>
 
   const removeFilter = () => {
     const linkParams = cloneDeep(params)
@@ -33,12 +40,14 @@ export function ProductListSort(props: ProductListSortProps) {
 
   return (
     <ChipMenu
+      className={classes.menu}
       variant='outlined'
       selected={selected}
       label={label}
       {...filterMenuProps}
       selectedLabel={selected ? currentOption?.label ?? '' : label}
       onDelete={selected ? removeFilter : undefined}
+      sx={Array.isArray(sx) ? sx : [sx]}
     >
       {sort_fields?.options?.map((option) => {
         const linkParams = cloneDeep(params)
@@ -48,6 +57,7 @@ export function ProductListSort(props: ProductListSortProps) {
 
         return (
           <ListItem
+            className={classes.item}
             button
             key={option?.value ?? ''}
             dense
@@ -57,6 +67,7 @@ export function ProductListSort(props: ProductListSortProps) {
                 <ProductListLink
                   {...chipProps}
                   {...linkParams}
+                  className={classes.link}
                   ref={ref}
                   color='inherit'
                   underline='none'

package/components/ProductPageDescription/ComplexTextValue.graphql

@@ -0,0 +1,4 @@
+fragment ComplexTextValue on ComplexTextValue @injectable {
+  html
+  __typename
+}

package/components/ProductPageDescription/ProductPageDescription.graphql

@@ -2,6 +2,6 @@ fragment ProductPageDescription on ProductInterface {
   name
   ...ProductShortDescription
   description {
-    html
+    ...ComplexTextValue
   }
 }

package/components/ProductShortDescription/ProductShortDescription.graphql

@@ -1,5 +1,5 @@
 fragment ProductShortDescription on ProductInterface {
   short_description {
-    html
+    ...ComplexTextValue
   }
 }

package/hooks/useProductLink.ts

@@ -1,6 +1,6 @@
 import { ProductLinkFragment } from './ProductLink.gql'
 
-type ProductLinkProps = Omit<ProductLinkFragment, 'uid'>
+export type ProductLinkProps = Omit<ProductLinkFragment, 'uid'>
 
 export function productLink(link: ProductLinkProps) {
   const { __typename, url_key } = link

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/magento-product",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "4.1.8",
+  "version": "4.1.11",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -12,20 +12,20 @@
     }
   },
   "devDependencies": {
-    "@graphcommerce/eslint-config-pwa": "^4.1.5",
+    "@graphcommerce/eslint-config-pwa": "^4.1.6",
     "@graphcommerce/prettier-config-pwa": "^4.0.6",
     "@graphcommerce/typescript-config-pwa": "^4.0.2",
     "@playwright/test": "^1.21.1",
     "type-fest": "^2.12.2"
   },
   "dependencies": {
-    "@graphcommerce/framer-scroller": "2.1.6",
-    "@graphcommerce/graphql": "3.1.0",
-    "@graphcommerce/graphql-mesh": "4.1.0",
+    "@graphcommerce/framer-scroller": "2.1.7",
+    "@graphcommerce/graphql": "3.1.1",
+    "@graphcommerce/graphql-mesh": "4.1.2",
     "@graphcommerce/image": "3.1.5",
-    "@graphcommerce/magento-cart": "4.2.7",
-    "@graphcommerce/magento-store": "4.1.7",
-    "@graphcommerce/next-ui": "4.6.1",
+    "@graphcommerce/magento-cart": "4.2.9",
+    "@graphcommerce/magento-store": "4.1.9",
+    "@graphcommerce/next-ui": "4.6.2",
     "schema-dts": "^1.1.0"
   },
   "peerDependencies": {