@graphcommerce/magento-product 4.0.6 → 4.1.0

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # Change Log
 
+## 4.1.0
+
+### Minor Changes
+
+- [#1322](https://github.com/graphcommerce-org/graphcommerce/pull/1322) [`0298a0de1`](https://github.com/graphcommerce-org/graphcommerce/commit/0298a0de1d13e543c4124a6a099297b4e27e2b05) Thanks [@paales](https://github.com/paales)! - Added `<Slider size='large' />` and made styling with variants
+
+* [#1322](https://github.com/graphcommerce-org/graphcommerce/pull/1322) [`e4ded94d7`](https://github.com/graphcommerce-org/graphcommerce/commit/e4ded94d7b0f0c87f86abcd31340d75533bde73e) Thanks [@paales](https://github.com/paales)! - Added a fontSize property to the ProductPageDescription to change the fontSize for the rendered paragraph
+
+### Patch Changes
+
+- [#1322](https://github.com/graphcommerce-org/graphcommerce/pull/1322) [`bc8826b9d`](https://github.com/graphcommerce-org/graphcommerce/commit/bc8826b9dc1e6418b2720c9211e46791c33fca8a) Thanks [@paales](https://github.com/paales)! - ProductListFiltersContainer button alignment
+
+* [#1322](https://github.com/graphcommerce-org/graphcommerce/pull/1322) [`7e910f3b8`](https://github.com/graphcommerce-org/graphcommerce/commit/7e910f3b8eb73cff33261956937124f95520d8e5) Thanks [@paales](https://github.com/paales)! - Allow overwriting ProductListLink underline
+
+* Updated dependencies [[`5266388ea`](https://github.com/graphcommerce-org/graphcommerce/commit/5266388eaffda41592623ef7a3ddbbe03c8e0dad), [`9b35403d9`](https://github.com/graphcommerce-org/graphcommerce/commit/9b35403d9dbb2606ac7cf3bb641a0f9cc3d8a2ba), [`0298a0de1`](https://github.com/graphcommerce-org/graphcommerce/commit/0298a0de1d13e543c4124a6a099297b4e27e2b05), [`815132ea4`](https://github.com/graphcommerce-org/graphcommerce/commit/815132ea43937b4b84b59ec9974ac593cb4eb456), [`3326742a0`](https://github.com/graphcommerce-org/graphcommerce/commit/3326742a0dceb45f0cac4741ca09dc4d4f09ad90), [`7a3799bfc`](https://github.com/graphcommerce-org/graphcommerce/commit/7a3799bfc107f26aa9991a91db5f228e3476f4aa), [`9a77f88ed`](https://github.com/graphcommerce-org/graphcommerce/commit/9a77f88ed26cbecdae9a135c3cb234a5b7ecf4df), [`1e2a07141`](https://github.com/graphcommerce-org/graphcommerce/commit/1e2a071414154600430e6dcf0513d86ab78e0b28), [`0eeaad304`](https://github.com/graphcommerce-org/graphcommerce/commit/0eeaad30461b1d5b486438f0287fa76d49429044), [`bc5213547`](https://github.com/graphcommerce-org/graphcommerce/commit/bc52135471479c83d989449dad24798112e898f4), [`3f1912f55`](https://github.com/graphcommerce-org/graphcommerce/commit/3f1912f553318d5888f8af2b841918ef4ae96a84), [`d91359871`](https://github.com/graphcommerce-org/graphcommerce/commit/d91359871b023a9f0d305b37353c1ee2d0912248), [`b6c68cda8`](https://github.com/graphcommerce-org/graphcommerce/commit/b6c68cda8836a1d0c78ef351899cec9ec1037385)]:
+  - @graphcommerce/next-ui@4.3.0
+  - @graphcommerce/magento-store@4.1.3
+  - @graphcommerce/magento-cart@4.2.0
+  - @graphcommerce/framer-scroller@2.1.0
+
 ## 4.0.6
 
 ### Patch Changes

package/components/ProductListFilters/FilterCheckboxType.tsx

@@ -8,7 +8,8 @@ import { FilterIn } from './FilterEqualType'
 import { ProductListFiltersFragment } from './ProductListFilters.gql'
 
 type Filter = NonNullable<NonNullable<ProductListFiltersFragment['aggregations']>[number]>
-export type FilterCheckboxTypeProps = Filter & Omit<ChipProps, 'selected'> & { sx?: SxProps<Theme> }
+export type FilterCheckboxTypeProps = Filter &
+  Omit<ChipProps<'button'>, 'selected' | 'onDelete' | 'component'> & { sx?: SxProps<Theme> }
 
 export function FilterCheckboxType(props: FilterCheckboxTypeProps) {
   const { attribute_code, count, label, options, ...chipProps } = props
@@ -32,7 +33,8 @@ export function FilterCheckboxType(props: FilterCheckboxTypeProps) {
       link={{ scroll: false, replace: true }}
     >
       <Chip
-        color={isActive ? undefined : 'default'}
+        component='button'
+        color={isActive ? 'primary' : 'default'}
         onDelete={
           isActive
             ? () => {

package/components/ProductListFilters/FilterRangeType.tsx

@@ -1,6 +1,7 @@
 import { cloneDeep, FilterRangeTypeInput } from '@graphcommerce/graphql'
 import { Money } from '@graphcommerce/magento-store'
 import { ChipMenu, ChipMenuProps, extendableComponent } from '@graphcommerce/next-ui'
+import { Trans } from '@lingui/macro'
 import { Box, Slider } from '@mui/material'
 import React, { useEffect } from 'react'
 import { useProductListLinkReplace } from '../../hooks/useProductListLinkReplace'
@@ -12,8 +13,6 @@ type FilterRangeTypeProps = NonNullable<
 > &
   Omit<ChipMenuProps, 'selected'>
 
-const sliderThumbWidth = 28
-
 const { classes } = extendableComponent('FilterRangeType', ['root', 'container', 'slider'] as const)
 
 export function FilterRangeType(props: FilterRangeTypeProps) {
@@ -79,16 +78,16 @@ export function FilterRangeType(props: FilterRangeTypeProps) {
 
     if (from === min && to !== max)
       currentLabel = (
-        <>
-          {'Below '} <Money round value={Number(currentFilter?.to)} />
-        </>
+        <Trans>
+          Below <Money round value={Number(currentFilter?.to)} />
+        </Trans>
       )
 
     if (from !== min && to === max)
       currentLabel = (
-        <>
-          {'Above '} <Money round value={Number(currentFilter?.from)} />
-        </>
+        <Trans>
+          Above <Money round value={Number(currentFilter?.from)} />
+        </Trans>
       )
 
     if (from !== min && to !== max)
@@ -128,6 +127,7 @@ export function FilterRangeType(props: FilterRangeTypeProps) {
         <Slider
           min={min}
           max={max}
+          size='large'
           aria-labelledby='range-slider'
           value={value}
           onChange={(e, newValue) => {
@@ -142,23 +142,6 @@ export function FilterRangeType(props: FilterRangeTypeProps) {
           }}
           valueLabelDisplay='off'
           className={classes.slider}
-          sx={(theme) => ({
-            maxWidth: `calc(100% - ${sliderThumbWidth}px)`,
-            margin: `${theme.spacings.xxs} auto`,
-            display: 'block',
-            paddingBottom: '32px',
-            '& .MuiSlider-rail': {
-              height: 4,
-              borderRadius: '10px',
-            },
-            '& .MuiSlider-track': {
-              height: 4,
-            },
-            '& .MuiSlider-thumb': {
-              width: sliderThumbWidth,
-              height: sliderThumbWidth,
-            },
-          })}
         />
       </Box>
     </ChipMenu>

package/components/ProductListFiltersContainer/ProductListFiltersContainer.tsx

@@ -87,7 +87,6 @@ export function ProductListFiltersContainer(props: ProductListFiltersContainerPr
         (theme) => ({
           display: 'flex',
           justifyContent: 'center',
-          height: responsiveVal(44, 52),
           marginBottom: theme.spacings.sm,
           position: 'sticky',
           top: theme.page.vertical,
@@ -108,7 +107,7 @@ export function ProductListFiltersContainer(props: ProductListFiltersContainerPr
           direction='left'
           className={classes.sliderPrev}
           size='small'
-          sx={{ position: 'absolute', top: 2, left: 2, zIndex: 10 }}
+          sx={{ position: 'absolute', top: 4, left: 2, zIndex: 10 }}
         >
           <IconSvg src={iconChevronLeft} />
         </ScrollerButton>
@@ -124,6 +123,8 @@ export function ProductListFiltersContainer(props: ProductListFiltersContainerPr
               background: theme.palette.background.default,
               borderRadius: '99em',
             },
+            display: 'grid',
+            alignItems: 'center',
           })}
         >
           <Scroller
@@ -166,7 +167,7 @@ export function ProductListFiltersContainer(props: ProductListFiltersContainerPr
           direction='right'
           className={classes.sliderNext}
           size='small'
-          sx={{ position: 'absolute', top: 2, right: 2, zIndex: 10 }}
+          sx={{ position: 'absolute', top: 4, right: 2, zIndex: 10 }}
         >
           <IconSvg src={iconChevronRight} />
         </ScrollerButton>

package/components/ProductListLink/ProductListLink.tsx

@@ -43,7 +43,7 @@ export const ProductListLink = React.forwardRef<HTMLAnchorElement, ProductListLi
         {noLink ? (
           children
         ) : (
-          <Link rel={rel} {...linkProps} ref={ref} onClick={updateParams} underline='hover'>
+          <Link rel={rel} underline='hover' {...linkProps} ref={ref} onClick={updateParams}>
             {children}
           </Link>
         )}

package/components/ProductPageDescription/ProductPageDescription.tsx

@@ -2,17 +2,25 @@ import {
   ColumnTwoWithTop,
   ColumnTwoWithTopProps,
   extendableComponent,
+  responsiveVal,
 } from '@graphcommerce/next-ui'
 import { Box, SxProps, Theme, Typography } from '@mui/material'
+import { Variant } from '@mui/material/styles/createTypography'
 import { ProductPageDescriptionFragment } from './ProductPageDescription.gql'
 
 export type ProductPageDescriptionProps = ProductPageDescriptionFragment &
-  Omit<ColumnTwoWithTopProps, 'top' | 'left'> & { sx?: SxProps<Theme> }
+  Omit<ColumnTwoWithTopProps, 'top' | 'left'> & {
+    sx?: SxProps<Theme>
+    fontSize: 'responsive' | Variant
+  }
 
-const { classes } = extendableComponent('ProductPageDescription', ['root', 'description'] as const)
+const componentName = 'ProductPageDescription'
+const parts = ['root', 'description'] as const
+
+const { classes } = extendableComponent(componentName, parts)
 
 export function ProductPageDescription(props: ProductPageDescriptionProps) {
-  const { description, name, right, sx = [] } = props
+  const { description, name, right, fontSize = 'subtitle1', sx = [] } = props
 
   return (
     <ColumnTwoWithTop
@@ -29,31 +37,32 @@ export function ProductPageDescription(props: ProductPageDescriptionProps) {
             className={classes.description}
             // eslint-disable-next-line react/no-danger
             dangerouslySetInnerHTML={{ __html: description.html }}
-            sx={(theme) => ({
-              '& p:first-of-type': {
-                marginTop: 0,
-              },
-              '& p, & li': {
-                typography: 'body1',
-                fontWeight: 400,
-                [theme.breakpoints.up('md')]: {
-                  typography: 'h3',
-                  fontWeight: 400,
-                  '@supports (font-variation-settings: normal)': {
-                    fontVariationSettings: "'wght' 420",
-                  },
+            sx={[
+              {
+                '& p:first-of-type': {
+                  marginTop: 0,
+                },
+                '& ul': {
+                  padding: 0,
+                  margin: 0,
+                  display: 'inline',
+                  listStyleType: 'none',
+                },
+                '& li': {
+                  display: 'inline',
                 },
               },
-              '& ul': {
-                padding: 0,
-                margin: 0,
-                display: 'inline',
-                listStyleType: 'none',
+              fontSize === 'responsive' && {
+                '& p, & li': {
+                  fontSize: responsiveVal(16, 30),
+                },
               },
-              '& li': {
-                display: 'inline',
+              fontSize !== 'responsive' && {
+                '& p, & li': {
+                  fontSize,
+                },
               },
-            })}
+            ]}
           />
         )
       }

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/magento-product",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "4.0.6",
+  "version": "4.1.0",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -18,12 +18,12 @@
     "@playwright/test": "^1.19.2"
   },
   "dependencies": {
-    "@graphcommerce/framer-scroller": "^2.0.6",
+    "@graphcommerce/framer-scroller": "^2.1.0",
     "@graphcommerce/graphql": "^3.0.4",
     "@graphcommerce/image": "^3.1.1",
-    "@graphcommerce/magento-cart": "^4.1.4",
-    "@graphcommerce/magento-store": "^4.1.2",
-    "@graphcommerce/next-ui": "^4.2.4",
+    "@graphcommerce/magento-cart": "^4.2.0",
+    "@graphcommerce/magento-store": "^4.1.3",
+    "@graphcommerce/next-ui": "^4.3.0",
     "schema-dts": "^1.1.0",
     "type-fest": "^2.12.0"
   },