@graphcommerce/magento-product 3.6.4 → 3.7.3

package/CHANGELOG.md

@@ -3,6 +3,36 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [3.7.2](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/magento-product@3.7.1...@graphcommerce/magento-product@3.7.2) (2021-12-03)
+
+
+### Bug Fixes
+
+* make sure elements that use scroll positioning are using the right hook ([80ee33f](https://github.com/ho-nl/m2-pwa/commit/80ee33f68ecc223147d63fc37e5b9ba94df4564e))
+
+
+
+
+
+# [3.7.0](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/magento-product@3.6.4...@graphcommerce/magento-product@3.7.0) (2021-12-01)
+
+
+### Bug Fixes
+
+* borderRadius ([b9cffcc](https://github.com/ho-nl/m2-pwa/commit/b9cffccf444cb2ff8d6257ef3a64c0ea18e30477))
+* icon OrderBefore ([25a2390](https://github.com/ho-nl/m2-pwa/commit/25a2390321c7047c5191a15a9352020b8161ff7a))
+
+
+### Features
+
+* borderRadius based on theme.shape.borderRadius ([7c34937](https://github.com/ho-nl/m2-pwa/commit/7c349376cd41a131c628324c299106fdb7e60484))
+* introduce borderRadius ([183afbc](https://github.com/ho-nl/m2-pwa/commit/183afbc8ee269f6694c372b06afdf41302f86c09))
+* variable font weights ([bfd8142](https://github.com/ho-nl/m2-pwa/commit/bfd8142b96742efd1208556e3c48de382d8d8ceb))
+
+
+
+
+
 ## [3.6.4](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/magento-product@3.6.3...@graphcommerce/magento-product@3.6.4) (2021-11-27)
 
 

package/components/ProductListFilters/FilterCheckboxType.tsx

@@ -1,5 +1,5 @@
 import { cloneDeep } from '@apollo/client/utilities'
-import { useChipMenuStyles, SvgImage, iconCancelAlt, SvgImageSimple } from '@graphcommerce/next-ui'
+import { useChipMenuStyles, iconCancelAlt, SvgImageSimple } from '@graphcommerce/next-ui'
 import { Chip, ChipProps } from '@material-ui/core'
 import clsx from 'clsx'
 import React from 'react'

package/components/ProductListFilters/FilterEqualType.tsx

@@ -3,7 +3,6 @@ import { FilterEqualTypeInput } from '@graphcommerce/graphql'
 import { ChipMenu, ChipMenuProps, responsiveVal } from '@graphcommerce/next-ui'
 import {
   Checkbox,
-  lighten,
   ListItem,
   ListItemSecondaryAction,
   ListItemText,

package/components/ProductListFilters/index.tsx

@@ -53,7 +53,11 @@ export default function ProductListFilters(props: ProductFiltersProps) {
               />
             )
         }
-        console.log('Filter not recognized', aggregation)
+        console.log(
+          'Filter not recognized',
+          aggregation.attribute_code,
+          filterTypes[aggregation.attribute_code],
+        )
         return null // `FilterMatchTypeInput not ${aggregation.attribute_code}`
       })}
     </>

package/components/ProductListFiltersContainer/index.tsx

@@ -4,11 +4,12 @@ import {
   iconChevronRight,
   responsiveVal,
   SvgImageSimple,
+  useScrollY,
   UseStyles,
 } from '@graphcommerce/next-ui'
 import { makeStyles, Theme } from '@material-ui/core'
 import clsx from 'clsx'
-import { m, useMotionTemplate, useTransform, useViewportScroll } from 'framer-motion'
+import { m, useTransform } from 'framer-motion'
 import React, { PropsWithChildren, useEffect, useRef, useState } from 'react'
 
 const useStyles = makeStyles(
@@ -91,7 +92,7 @@ export type ProductListFiltersContainerProps = PropsWithChildren<UseStyles<typeo
 export default function ProductListFiltersContainer(props: ProductListFiltersContainerProps) {
   const { children } = props
   const classes = useStyles(props)
-  const { scrollY } = useViewportScroll()
+  const scrollY = useScrollY()
 
   const [isSticky, setIsSticky] = useState<boolean>(false)
   const [startPosition, setStartPosition] = useState<number>(100)
@@ -148,7 +149,7 @@ export default function ProductListFiltersContainer(props: ProductListFiltersCon
           >
             {children}
           </Scroller>
-          <m.div className={classes.shadow} style={{ opacity }}></m.div>
+          <m.div className={classes.shadow} style={{ opacity }} />
         </div>
         <ScrollerButton direction='right' className={classes.sliderNext}>
           <SvgImageSimple src={iconChevronRight} />

package/components/ProductListItem/index.tsx

@@ -1,9 +1,9 @@
+import { usePageRouter } from '@graphcommerce/framer-next-pages'
 import { Image, ImageProps } from '@graphcommerce/image'
 import { responsiveVal, UseStyles } from '@graphcommerce/next-ui'
-import { ButtonBase, Link as MuiLink, makeStyles, Theme, Typography } from '@material-ui/core'
+import { ButtonBase, makeStyles, Theme, Typography } from '@material-ui/core'
 import clsx from 'clsx'
 import PageLink from 'next/link'
-import { useRouter } from 'next/router'
 import React, { PropsWithChildren, useCallback } from 'react'
 import { ProductListItemFragment } from '../../Api/ProductListItem.gql'
 import { useProductLink } from '../../hooks/useProductLink'
@@ -88,6 +88,7 @@ export const useProductListItemStyles = makeStyles(
       position: 'relative',
       paddingTop: `calc(100% / ${aspectRatio[0]} * ${aspectRatio[1]})`,
       background: theme.palette.background.image, // theme specific,
+      borderRadius: responsiveVal(theme.shape.borderRadius * 2, theme.shape.borderRadius * 3),
     }),
     placeholder: {
       display: 'flex',
@@ -156,7 +157,7 @@ export default function ProductListItem(props: ProductListItemProps) {
   const classes = useProductListItemStyles(props)
   const productLink = useProductLink(props)
   const discount = Math.floor(price_range.minimum_price.discount?.percent_off ?? 0)
-  const { locale } = useRouter()
+  const { locale } = usePageRouter()
 
   // eslint-disable-next-line react-hooks/exhaustive-deps
   const format = useCallback(

package/components/ProductListItems/ProductListItemsBase.tsx

@@ -1,4 +1,3 @@
-import { Maybe } from '@graphcommerce/graphql'
 import { RenderType, UseStyles, responsiveVal } from '@graphcommerce/next-ui'
 import { Theme, makeStyles } from '@material-ui/core'
 import clsx from 'clsx'

package/components/ProductListItems/ProductListParamsProvider.tsx

@@ -1,4 +1,4 @@
-import { PropsWithChildren, useState, useEffect } from 'react'
+import { PropsWithChildren, useState, useEffect, useMemo } from 'react'
 import { productListParamsContext } from '../../context/productListParamsContext'
 import { ProductListParams } from './filterTypes'
 
@@ -8,13 +8,11 @@ export default function ProductListParamsProvider({
 }: PropsWithChildren<{ value: ProductListParams }>) {
   const [params, setParams] = useState<ProductListParams>(value)
 
-  useEffect(() => {
-    setParams(value)
-  }, [value])
+  useEffect(() => setParams(value), [value])
+
+  const prov = useMemo(() => ({ params, setParams }), [params])
 
   return (
-    <productListParamsContext.Provider value={{ params, setParams }}>
-      {children}
-    </productListParamsContext.Provider>
+    <productListParamsContext.Provider value={prov}>{children}</productListParamsContext.Provider>
   )
 }

package/components/ProductListSort/index.tsx

@@ -53,7 +53,7 @@ export default function ProductListSort(props: ProductListSortProps) {
             key={option?.value ?? ''}
             dense
             selected={option?.value === currentSort}
-            component={(chipProps) => (
+            component={React.memo((chipProps) => (
               <ProductListLink
                 {...chipProps}
                 {...linkParams}
@@ -61,7 +61,7 @@ export default function ProductListSort(props: ProductListSortProps) {
                 underline='none'
                 link={{ scroll: false, replace: true }}
               />
-            )}
+            ))}
           >
             <ListItemText secondary>{option?.label}</ListItemText>
           </ListItem>

package/components/ProductPageDescription/index.tsx

@@ -6,22 +6,19 @@ import { ProductPageDescriptionFragment } from './ProductPageDescription.gql'
 const useStyles = makeStyles((theme: Theme) => ({
   /* nested styles because we don't know beforehand which elements the description contains */
   description: {
-    ...theme.typography.body2,
-    fontWeight: 400,
-    [theme.breakpoints.up('md')]: {
-      ...theme.typography.h4,
-      lineHeight: 1.7,
-      fontWeight: 400,
-    },
     '& p:first-of-type': {
       marginTop: 0,
     },
     '& p, & li': {
-      ...theme.typography.h4,
+      ...theme.typography.body1,
       fontWeight: 400,
+
       [theme.breakpoints.up('md')]: {
         ...theme.typography.h3,
         fontWeight: 400,
+        '@supports (font-variation-settings: normal)': {
+          fontVariationSettings: "'wght' 420",
+        },
       },
     },
     '& ul': {
@@ -44,23 +41,22 @@ export default function ProductPageDescription(props: ProductPageDescriptionProp
   const { description, name, right } = props
 
   return (
-    <>
-      <ColumnTwoWithTop
-        top={
-          <Typography variant='h1' component='h2'>
-            {name}
-          </Typography>
-        }
-        left={
-          description && (
-            <div
-              className={classes.description}
-              dangerouslySetInnerHTML={{ __html: description.html }}
-            />
-          )
-        }
-        right={right}
-      />
-    </>
+    <ColumnTwoWithTop
+      top={
+        <Typography variant='h1' component='h2'>
+          {name}
+        </Typography>
+      }
+      left={
+        description && (
+          <div
+            className={classes.description}
+            // eslint-disable-next-line react/no-danger
+            dangerouslySetInnerHTML={{ __html: description.html }}
+          />
+        )
+      }
+      right={right}
+    />
   )
 }

package/components/ProductShortDescription/index.tsx

@@ -1,19 +1,17 @@
 import { UseStyles } from '@graphcommerce/next-ui'
-import { makeStyles, Theme, Typography } from '@material-ui/core'
+import { makeStyles, Typography } from '@material-ui/core'
 import React from 'react'
 import { ProductShortDescriptionFragment } from './ProductShortDescription.gql'
 
 const useStyles = makeStyles(
-  (theme: Theme) => ({
+  {
     root: {
       '& > p': {
         marginTop: 0,
       },
     },
-  }),
-  {
-    name: 'ProductShortDescription',
   },
+  { name: 'ProductShortDescription' },
 )
 
 type ProductShortDescriptionProps = ProductShortDescriptionFragment & UseStyles<typeof useStyles>

package/components/ProductSidebarDelivery/index.tsx

@@ -1,5 +1,5 @@
-import { SvgImage, responsiveVal, iconBox, SvgImageSimple } from '@graphcommerce/next-ui'
-import { makeStyles, Theme, Typography } from '@material-ui/core'
+import { responsiveVal, iconOrderBefore, SvgImageSimple } from '@graphcommerce/next-ui'
+import { darken, lighten, makeStyles, Theme, Typography } from '@material-ui/core'
 import React from 'react'
 
 const useStyles = makeStyles(
@@ -14,16 +14,16 @@ const useStyles = makeStyles(
       gridTemplateColumns: `min-content auto`,
       columnGap: theme.spacings.xxs,
       marginTop: theme.spacings.xxs,
-      background: theme.palette.background.paper,
-      border: `1px solid ${theme.palette.divider}`,
+      background:
+        theme.palette.type === 'light'
+          ? darken(theme.palette.background.default, 0.01)
+          : lighten(theme.palette.background.default, 0.2),
       padding: theme.spacings.xxs,
-      borderRadius: responsiveVal(4, 6),
+      borderRadius: responsiveVal(theme.shape.borderRadius * 3, theme.shape.borderRadius * 4),
     },
     text: {},
     image: {
       gridArea: 'image',
-      width: responsiveVal(18, 24),
-      height: responsiveVal(18, 24),
     },
     title: {
       gridArea: 'title',
@@ -42,7 +42,7 @@ export default function ProductSidebarDelivery() {
 
   return (
     <div className={classes.root}>
-      <SvgImageSimple className={classes.image} src={iconBox} />
+      <SvgImageSimple className={classes.image} src={iconOrderBefore} size='small' />
       <Typography className={classes.title} variant='body2' component='div'>
         Order before 22:00
       </Typography>

package/hooks/useProductListLinkReplace.ts

@@ -1,4 +1,4 @@
-import { default as Router } from 'next/router'
+import { useRouter } from 'next/router'
 import { ProductListParams } from '../components/ProductListItems/filterTypes'
 import { createProductListLink } from './useProductListLink'
 import { useProductListParamsContext } from './useProductListParamsContext'
@@ -11,9 +11,10 @@ type UseProductLinkPushProps = {
 
 export function useProductListLinkReplace(props?: UseProductLinkPushProps) {
   const { setParams } = useProductListParamsContext()
+  const router = useRouter()
 
   return (params: ProductListParams) => {
-    const queryUrl = Router.query.url ?? []
+    const queryUrl = router.query.url ?? []
     const comingFromURLWithoutFilters = !queryUrl.includes('q')
 
     setParams(params)
@@ -23,10 +24,10 @@ export function useProductListLinkReplace(props?: UseProductLinkPushProps) {
     // push the first filter, so the new route (on browser back) will be e.g. /women/fruit instead of /women
     if (comingFromURLWithoutFilters) {
       // eslint-disable-next-line @typescript-eslint/no-floating-promises
-      Router.push(path, path, props)
+      router.push(path, path, props)
     } else {
       // eslint-disable-next-line @typescript-eslint/no-floating-promises
-      Router.replace(path, path, props)
+      router.replace(path, path, props)
     }
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@graphcommerce/magento-product",
-  "version": "3.6.4",
+  "version": "3.7.3",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "browserslist": [
@@ -14,19 +14,19 @@
   },
   "devDependencies": {
     "@graphcommerce/browserslist-config-pwa": "^3.0.2",
-    "@graphcommerce/eslint-config-pwa": "^3.1.5",
+    "@graphcommerce/eslint-config-pwa": "^3.1.6",
     "@graphcommerce/prettier-config-pwa": "^3.0.4",
     "@graphcommerce/typescript-config-pwa": "^3.1.1",
     "@playwright/test": "^1.16.2"
   },
   "dependencies": {
     "@apollo/client": "^3.4.16",
-    "@graphcommerce/framer-scroller": "^1.0.4",
-    "@graphcommerce/graphql": "^2.105.5",
-    "@graphcommerce/image": "^2.105.4",
-    "@graphcommerce/magento-cart": "^3.7.4",
-    "@graphcommerce/magento-store": "^3.3.4",
-    "@graphcommerce/next-ui": "^3.18.2",
+    "@graphcommerce/framer-scroller": "^1.1.1",
+    "@graphcommerce/graphql": "^2.105.6",
+    "@graphcommerce/image": "^2.105.5",
+    "@graphcommerce/magento-cart": "^3.8.3",
+    "@graphcommerce/magento-store": "^3.3.8",
+    "@graphcommerce/next-ui": "^3.20.1",
     "@lingui/macro": "^3.12.1",
     "@material-ui/core": "^4.12.3",
     "@material-ui/lab": "^4.0.0-alpha.60",
@@ -38,5 +38,5 @@
     "schema-dts": "^1.0.0",
     "type-fest": "^2.5.1"
   },
-  "gitHead": "4d36627aeb43cba320c249b9a876384627064f18"
+  "gitHead": "b4bdc1cd365ebdd0bad8e1ed6afd374123bb2908"
 }