@graphcommerce/magento-product 3.3.0 → 3.4.1

package/CHANGELOG.md

@@ -3,6 +3,43 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [3.4.1](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/magento-product@3.4.0...@graphcommerce/magento-product@3.4.1) (2021-10-28)
+
+
+### Bug Fixes
+
+* External SVG's can't have alt tags ([1b1414a](https://github.com/ho-nl/m2-pwa/commit/1b1414a782d55d3acf7b0e6bcaa50f2ad5f18f39))
+
+
+
+
+
+# [3.4.0](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/magento-product@3.3.2...@graphcommerce/magento-product@3.4.0) (2021-10-28)
+
+
+### Bug Fixes
+
+* bug causing filter chips missing bottom border on drag ([04f5695](https://github.com/ho-nl/m2-pwa/commit/04f56959d8cdc078c7af70fecadd9cb74ee55ebc))
+* manual styling for productpage description since unique ([7989214](https://github.com/ho-nl/m2-pwa/commit/79892147f547de67537737ca19fda002c16497a6))
+* only show active borders for color filters ([fc136ae](https://github.com/ho-nl/m2-pwa/commit/fc136aef13deae758ed2d70cf6508a2e925304d0))
+* only show dash when relevant ([77ee56f](https://github.com/ho-nl/m2-pwa/commit/77ee56f44cc39447d2e778530da11c5408e6e5b8))
+* update SvgImage to SvgImageSimple ([f116543](https://github.com/ho-nl/m2-pwa/commit/f116543730853fa9782abff0ccacee7032e85789))
+* use font from theme ([7c11eb0](https://github.com/ho-nl/m2-pwa/commit/7c11eb000aecbe3a0a12fd579011c51c9da4f4ed))
+
+
+### Features
+
+* cleaner delivery banner ([a275773](https://github.com/ho-nl/m2-pwa/commit/a275773fce305324cd20df30125d1f86ebf796f6))
+* color swatches ([886145f](https://github.com/ho-nl/m2-pwa/commit/886145fdaa14fc92e364d7e9d3a7ed019d594c86))
+* dynamic icons, update SvgImage uses to SvgImageSimple ([3d3cc0e](https://github.com/ho-nl/m2-pwa/commit/3d3cc0e0336fcde1cce6ba19705f82c1edf9bfc6))
+* enable use of both small and medium chips in design ([4536f96](https://github.com/ho-nl/m2-pwa/commit/4536f96b031734a71faf7c10f94aa5d5da90b9a8))
+* full width category pages ([5f5c264](https://github.com/ho-nl/m2-pwa/commit/5f5c26487e7264fdbbf38ca51c7c453c7f5b6a17))
+* Larger category page size for more realistic shop experience ([47f0cd5](https://github.com/ho-nl/m2-pwa/commit/47f0cd5424bec9a1b15e450bb6f7a47caaed41fc))
+
+
+
+
+
 # [3.3.0](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/magento-product@3.2.6...@graphcommerce/magento-product@3.3.0) (2021-10-27)
 
 

package/components/ProductList/ProductList.graphql

@@ -1,5 +1,5 @@
 query ProductList(
-  $pageSize: Int = 23
+  $pageSize: Int = 33
   $currentPage: Int = 1
   $filters: ProductAttributeFilterInput = {}
   $sort: ProductAttributeSortInput = {}

package/components/ProductListCount/index.tsx

@@ -29,7 +29,7 @@ const useStyles = makeStyles(
       background: theme.palette.background.default,
       display: 'inline-block',
       padding: `0 ${theme.spacings.xs} 0 ${theme.spacings.xs}`,
-      color: theme.palette.primary.mutedText,
+      color: theme.palette.text.disabled,
       transform: 'translateY(calc(-50% - 1px))',
     },
   }),

package/components/ProductListFilters/FilterCheckboxType.tsx

@@ -1,5 +1,10 @@
 import { cloneDeep } from '@apollo/client/utilities'
-import { useChipMenuStyles, SvgImage, iconCloseCircle } from '@graphcommerce/next-ui'
+import {
+  useChipMenuStyles,
+  SvgImage,
+  iconCloseCircle,
+  SvgImageSimple,
+} from '@graphcommerce/next-ui'
 import { Chip, ChipProps } from '@material-ui/core'
 import clsx from 'clsx'
 import React from 'react'
@@ -51,11 +56,7 @@ export default function FilterCheckboxType(props: FilterCheckboxTypeProps) {
               }
             : undefined
         }
-        deleteIcon={
-          isActive ? (
-            <SvgImage src={iconCloseCircle} alt='remove' size='small' loading='eager' />
-          ) : undefined
-        }
+        deleteIcon={isActive ? <SvgImageSimple src={iconCloseCircle} size='small' /> : undefined}
         label={label}
         clickable
         {...chipProps}

package/components/ProductListFilters/FilterEqualType.tsx

@@ -9,6 +9,7 @@ import {
   makeStyles,
   Theme,
 } from '@material-ui/core'
+import clsx from 'clsx'
 import React from 'react'
 import { SetRequired } from 'type-fest'
 import { useProductListLinkReplace } from '../../hooks/useProductListLinkReplace'
@@ -78,6 +79,16 @@ const useFilterEqualStyles = makeStyles(
       overflow: 'hidden',
       whiteSpace: 'break-spaces',
     },
+    isColor: {
+      border: `1px solid ${theme.palette.divider}`,
+      '& > *': {
+        opacity: 0,
+      },
+    },
+    isActive: {
+      border: `1px solid ${theme.palette.primary.main}`,
+      boxShadow: `inset 0 0 0 4px #fff`,
+    },
   }),
   { name: 'FilterEqual' },
 )
@@ -121,6 +132,11 @@ export default function FilterEqualType(props: FilterEqualTypeProps) {
           if (!option?.value) return null
           const labelId = `filter-equal-${attribute_code}-${option?.value}`
           const filters = cloneDeep(params.filters)
+          let isColor = false
+
+          if (label?.toLowerCase().includes('color')) {
+            isColor = true
+          }
 
           if (currentFilter.in?.includes(option.value)) {
             filters[attribute_code] = {
@@ -155,11 +171,22 @@ export default function FilterEqualType(props: FilterEqualTypeProps) {
                       edge='start'
                       checked={currentFilter.in?.includes(option?.value ?? '')}
                       tabIndex={-1}
-                      size='small'
+                      size='medium'
                       color='primary'
                       disableRipple
                       inputProps={{ 'aria-labelledby': labelId }}
-                      className={classes.checkbox}
+                      className={clsx(
+                        classes.checkbox,
+                        isColor && classes.isColor,
+                        currentFilter.in?.includes(option?.value) && isColor
+                          ? classes.isActive
+                          : false,
+                      )}
+                      style={
+                        isColor
+                          ? { background: `${option?.label}`, color: `${option?.label}` }
+                          : undefined
+                      }
                     />
                   </ListItemSecondaryAction>
                 </div>

package/components/ProductListFilters/FilterRangeType.tsx

@@ -26,7 +26,7 @@ const useFilterRangeType = makeStyles(
       display: 'block',
       paddingBottom: 32,
       '& .MuiSlider-rail': {
-        color: theme.palette.secondary.mutedText,
+        color: theme.palette.text.disabled,
         height: 4,
         borderRadius: 10,
       },
@@ -144,7 +144,7 @@ export default function FilterRangeType(props: FilterRangeTypeProps) {
       labelRight={
         <>
           <Money round value={value[0]} />
-          {' — '}
+          {value[0] ? ' — ' : false}
           <Money round value={value[1]} />
         </>
       }

package/components/ProductListFiltersContainer/index.tsx

@@ -2,6 +2,7 @@ import { Scroller, ScrollerButton, ScrollerProvider } from '@graphcommerce/frame
 import {
   iconChevronLeft,
   iconChevronRight,
+  responsiveVal,
   SvgImageSimple,
   UseStyles,
 } from '@graphcommerce/next-ui'
@@ -15,7 +16,7 @@ const useStyles = makeStyles(
     wrapper: {
       display: 'flex',
       justifyContent: 'center',
-      height: 44,
+      height: responsiveVal(44, 52),
       marginBottom: theme.spacings.sm,
       position: 'sticky',
       top: theme.page.vertical,
@@ -36,13 +37,16 @@ const useStyles = makeStyles(
       padding: 6,
       [theme.breakpoints.up('md')]: {
         background: '#fff',
-        borderRadius: 22,
-        // padding: `0 3px`,
+        borderRadius: '99em',
+      },
+      [theme.breakpoints.down('sm')]: {
+        boxShadow: 'none !important',
       },
     },
     containerSticky: {},
     scroller: {
-      borderRadius: 22,
+      paddingBottom: 1,
+      borderRadius: '99em',
       columnGap: 6,
       gridAutoColumns: 'min-content',
     },

package/components/ProductListItems/ProductListItemsBase.tsx

@@ -11,13 +11,21 @@ export const useStyles = makeStyles(
   (theme: Theme) => ({
     productList: {
       display: 'grid',
-      gridColumnGap: theme.spacings.sm,
+      gridColumnGap: theme.spacings.md,
       gridRowGap: theme.spacings.md,
-      gridTemplateColumns: `repeat(auto-fill, minmax(${responsiveVal(150, 360)}, 1fr))`,
     },
     productListsmall: {
       gridTemplateColumns: `repeat(auto-fill, minmax(${responsiveVal(150, 280)}, 1fr))`,
     },
+    productListnormal: {
+      gridTemplateColumns: `repeat(2, 1fr)`,
+      [theme.breakpoints.up('md')]: {
+        gridTemplateColumns: `repeat(3, 1fr)`,
+      },
+      [theme.breakpoints.up('lg')]: {
+        gridTemplateColumns: `repeat(4, 1fr)`,
+      },
+    },
   }),
   { name: 'ProductList' },
 )
@@ -34,7 +42,7 @@ export type ProductItemsGridProps = {
   JSX.IntrinsicElements['div']
 
 export default function ProductListItemsBase(props: ProductItemsGridProps) {
-  const { items, renderers, loadingEager = 0, size, ...divProps } = props
+  const { items, renderers, loadingEager = 0, size = 'normal', ...divProps } = props
   const classes = useStyles(props)
 
   return (

package/components/ProductListPrice/index.tsx

@@ -9,7 +9,7 @@ const useStyles = makeStyles(
     root: {},
     discount: {
       textDecoration: 'line-through',
-      color: theme.palette.primary.mutedText,
+      color: theme.palette.text.disabled,
       display: 'inline',
       marginRight: 8,
     },

package/components/ProductPageDescription/index.tsx

@@ -1,3 +1,4 @@
+import { responsiveVal } from '@graphcommerce/next-ui'
 import { makeStyles, Theme } from '@material-ui/core'
 import React from 'react'
 import { ProductPageDescriptionFragment } from './ProductPageDescription.gql'
@@ -8,7 +9,8 @@ const useStyles = makeStyles((theme: Theme) => ({
     ...theme.typography.h4,
     fontWeight: 400,
     [theme.breakpoints.up('md')]: {
-      ...theme.typography.h3,
+      fontSize: responsiveVal(18, 30),
+      lineHeight: 1.7,
       fontWeight: 400,
     },
     '& p:first-of-type': {

package/components/ProductSidebarDelivery/index.tsx

@@ -1,4 +1,4 @@
-import { SvgImage, responsiveVal, iconBox } from '@graphcommerce/next-ui'
+import { SvgImage, responsiveVal, iconBox, SvgImageSimple } from '@graphcommerce/next-ui'
 import { makeStyles, Theme, Typography } from '@material-ui/core'
 import React from 'react'
 
@@ -9,22 +9,28 @@ const useStyles = makeStyles(
       alignItems: 'center',
       gridTemplate: `
         "image title"
-        "image subtitle"
+        ". subtitle"
       `,
       gridTemplateColumns: `min-content auto`,
-      columnGap: theme.spacings.xs,
-      marginTop: theme.spacings.xs,
+      columnGap: theme.spacings.xxs,
+      marginTop: theme.spacings.xxs,
+      background: '#fff',
+      padding: theme.spacings.xxs,
+      borderRadius: responsiveVal(4, 6),
     },
     text: {},
     image: {
       gridArea: 'image',
+      width: responsiveVal(18, 24),
+      height: responsiveVal(18, 24),
     },
     title: {
       gridArea: 'title',
+      fontWeight: 600,
     },
     subtitle: {
       gridArea: 'subtitle',
-      color: theme.palette.primary.mutedText,
+      color: theme.palette.text.disabled,
     },
   }),
   { name: 'ProductSidebarDelivery' },
@@ -35,11 +41,11 @@ export default function ProductSidebarDelivery() {
 
   return (
     <div className={classes.root}>
-      <SvgImage className={classes.image} size='medium' src={iconBox} alt='box' loading='eager' />
-      <Typography className={classes.title} variant='subtitle2' component='div'>
-        Order before 22:00 and
+      <SvgImageSimple className={classes.image} src={iconBox} />
+      <Typography className={classes.title} variant='body2' component='div'>
+        Order before 22:00
       </Typography>
-      <Typography className={classes.subtitle} variant='body2' component='div' color='error'>
+      <Typography className={classes.subtitle} variant='body2' component='div'>
         Next day delivery - Shipping free
       </Typography>
     </div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@graphcommerce/magento-product",
-  "version": "3.3.0",
+  "version": "3.4.1",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "browserslist": [
@@ -14,29 +14,29 @@
   },
   "devDependencies": {
     "@graphcommerce/browserslist-config-pwa": "^3.0.2",
-    "@graphcommerce/eslint-config-pwa": "^3.1.1",
+    "@graphcommerce/eslint-config-pwa": "^3.1.2",
     "@graphcommerce/prettier-config-pwa": "^3.0.3",
     "@graphcommerce/typescript-config-pwa": "^3.1.1",
-    "@playwright/test": "^1.15.2"
+    "@playwright/test": "^1.16.2"
   },
   "dependencies": {
     "@apollo/client": "^3.4.16",
-    "@graphcommerce/framer-scroller": "^0.4.0",
-    "@graphcommerce/graphql": "^2.105.0",
-    "@graphcommerce/image": "^2.105.0",
-    "@graphcommerce/magento-cart": "^3.3.0",
-    "@graphcommerce/magento-store": "^3.1.0",
-    "@graphcommerce/next-ui": "^3.10.0",
+    "@graphcommerce/framer-scroller": "^0.4.1",
+    "@graphcommerce/graphql": "^2.105.1",
+    "@graphcommerce/image": "^2.105.1",
+    "@graphcommerce/magento-cart": "^3.4.1",
+    "@graphcommerce/magento-store": "^3.1.4",
+    "@graphcommerce/next-ui": "^3.11.1",
     "@graphql-typed-document-node/core": "^3.1.0",
     "@material-ui/core": "^4.12.3",
     "@material-ui/lab": "^4.0.0-alpha.60",
     "clsx": "^1.1.1",
     "framer-motion": "^4.1.17",
-    "next": "^12.0.0",
+    "next": "^12.0.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "schema-dts": "^1.0.0",
     "type-fest": "^2.5.1"
   },
-  "gitHead": "e34fa8877d4596971c861c0c2438cb4c82f6fcaa"
+  "gitHead": "e01d10a0e89c68c316c3e4bb6a306e9a6959a7f6"
 }