@graphcommerce/magento-category 3.4.3 → 3.5.2

package/CHANGELOG.md

@@ -3,6 +3,29 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [3.5.2](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/magento-category@3.5.1...@graphcommerce/magento-category@3.5.2) (2021-12-03)
+
+
+### Bug Fixes
+
+* spacing of LayoutTItle ([7afcd31](https://github.com/ho-nl/m2-pwa/commit/7afcd3163d16e902cf2ff7917f56ee6a8798f55b))
+
+
+
+
+
+# [3.5.0](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/magento-category@3.4.4...@graphcommerce/magento-category@3.5.0) (2021-12-01)
+
+
+### 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))
+
+
+
+
+
 # [3.4.0](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/magento-category@3.3.29...@graphcommerce/magento-category@3.4.0) (2021-11-12)
 
 

package/components/CategoryDescription/CategoryDescription.tsx

@@ -1,5 +1,5 @@
 import { UseStyles } from '@graphcommerce/next-ui'
-import { makeStyles, Theme, Typography } from '@material-ui/core'
+import { makeStyles, Theme } from '@material-ui/core'
 import React from 'react'
 import { CategoryDescriptionFragment } from './CategoryDescription.gql'
 
@@ -20,7 +20,6 @@ const useStyles = makeStyles(
       [theme.breakpoints.up('xl')]: {
         maxWidth: '30%',
       },
-
       ...theme.typography.subtitle1,
     },
   }),
@@ -32,6 +31,7 @@ export default function CategoryDescription(props: CategoryDescriptionProps) {
   const classes = useStyles(props)
 
   return description ? (
+    // eslint-disable-next-line react/no-danger
     <div {...divProps} className={classes.root} dangerouslySetInnerHTML={{ __html: description }} />
   ) : null
 }

package/components/CategoryHeroNav/CategoryHeroNav.tsx

@@ -1,4 +1,5 @@
 import { ProductListLink } from '@graphcommerce/magento-product'
+import { responsiveVal, Row } from '@graphcommerce/next-ui'
 import { makeStyles, Theme, Typography } from '@material-ui/core'
 import React from 'react'
 import { CategoryHeroNavFragment } from './CategoryHeroNav.gql'
@@ -15,8 +16,7 @@ const useStyles = makeStyles(
       `,
       gridTemplateRows: 'auto auto 1fr',
       borderBottom: `1px solid ${theme.palette.divider}`,
-      marginBottom: theme.spacings.xl,
-      paddingRight: 0,
+      marginBottom: theme.spacings.xxl,
       paddingBottom: theme.page.vertical,
       [theme.breakpoints.up('md')]: {
         rowGap: theme.spacings.md,
@@ -27,7 +27,7 @@ const useStyles = makeStyles(
     categories: {
       gridArea: 'categories',
       display: 'grid',
-      gridColumnGap: theme.spacings.xl,
+      gridColumnGap: theme.spacings.xxl,
       gridRowGap: theme.spacings.lg,
       height: 'min-content',
       maxWidth: '80vw',
@@ -62,6 +62,7 @@ const useStyles = makeStyles(
       '& video': {
         objectFit: 'cover',
         width: '100%',
+        borderRadius: responsiveVal(theme.shape.borderRadius * 2, theme.shape.borderRadius * 3),
       },
     },
     [theme.breakpoints.up('md')]: {
@@ -95,32 +96,30 @@ export default function CategoryHeroNav({ children, title, asset }: CategoryHero
   const classes = useStyles()
 
   return (
-    <>
-      <div className={classes.wrapper}>
-        <div className={classes.title}>{title}</div>
-        <div className={classes.categories}>
-          {children?.map((category) => {
-            if (!category?.url_path || !category.uid || !category.name) return null
-            return (
-              <ProductListLink
-                underline='none'
-                color='textPrimary'
-                url={category.url_path}
-                filters={{}}
-                sort={{}}
-                key={category.uid}
-              >
-                <Typography variant='h4' component='span'>
-                  {category.name}
-                </Typography>
-              </ProductListLink>
-            )
-          })}
-        </div>
-        <div className={classes.placeholder}>
-          <div>{asset}</div>
-        </div>
+    <Row className={classes.wrapper} maxWidth={false}>
+      <div className={classes.title}>{title}</div>
+      <div className={classes.categories}>
+        {children?.map((category) => {
+          if (!category?.url_path || !category.uid || !category.name) return null
+          return (
+            <ProductListLink
+              underline='none'
+              color='textPrimary'
+              url={category.url_path}
+              filters={{}}
+              sort={{}}
+              key={category.uid}
+            >
+              <Typography variant='h4' component='span'>
+                {category.name}
+              </Typography>
+            </ProductListLink>
+          )
+        })}
       </div>
-    </>
+      <div className={classes.placeholder}>
+        <div>{asset}</div>
+      </div>
+    </Row>
   )
 }

package/components/CategoryHeroNav/CategoryHeroNavTitle.tsx

@@ -1,11 +1,10 @@
-import { AppShellTitle } from '@graphcommerce/next-ui'
+import { LayoutTitle } from '@graphcommerce/next-ui'
 import { makeStyles, Theme } from '@material-ui/core'
 import React from 'react'
 
 const useStyles = makeStyles(
   (theme: Theme) => ({
-    title: {
-      // alignItems: 'center',
+    container: {
       justifyContent: 'center',
       [theme.breakpoints.up('md')]: {
         margin: 0,
@@ -26,8 +25,8 @@ export default function CategoryHeroNavTitle(props: CategoryHeroNavTitleProps) {
   const classes = useStyles()
 
   return (
-    <AppShellTitle classes={classes} variant='h1'>
+    <LayoutTitle classes={classes} variant='h1'>
       {children}
-    </AppShellTitle>
+    </LayoutTitle>
   )
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@graphcommerce/magento-category",
-  "version": "3.4.3",
+  "version": "3.5.2",
   "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-product": "^3.6.3",
-    "@graphcommerce/magento-store": "^3.3.3",
-    "@graphcommerce/next-ui": "^3.18.1",
+    "@graphcommerce/framer-scroller": "^1.1.0",
+    "@graphcommerce/graphql": "^2.105.6",
+    "@graphcommerce/image": "^2.105.5",
+    "@graphcommerce/magento-product": "^3.7.2",
+    "@graphcommerce/magento-store": "^3.3.7",
+    "@graphcommerce/next-ui": "^3.20.0",
     "@lingui/macro": "^3.12.1",
     "@material-ui/core": "^4.12.3",
     "next": "^12.0.3",
@@ -34,5 +34,5 @@
     "react-dom": "^17.0.2",
     "type-fest": "^2.5.1"
   },
-  "gitHead": "5ed153aa2213be8363138c0956872fe2fde2f590"
+  "gitHead": "8f156415c7f5a963e363f0d6d18fe5d6bbd5dba2"
 }