@graphcommerce/magento-category 3.2.1 → 3.3.2

package/CHANGELOG.md

@@ -3,6 +3,35 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [3.3.2](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/magento-category@3.3.1...@graphcommerce/magento-category@3.3.2) (2021-10-29)
+
+
+### Bug Fixes
+
+* spacing of title on category landing on mobile ([8ed3550](https://github.com/ho-nl/m2-pwa/commit/8ed35502fd231d1d6a8e0a282f8961335d9dead3))
+
+
+
+
+
+# [3.3.0](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/magento-category@3.2.2...@graphcommerce/magento-category@3.3.0) (2021-10-28)
+
+
+### Bug Fixes
+
+* category h2 styling ([5b26f2b](https://github.com/ho-nl/m2-pwa/commit/5b26f2b92f55356c58cc207fa028d03a38a8b16a))
+* remove legacy, title from category description ([574208c](https://github.com/ho-nl/m2-pwa/commit/574208ca71e6ed387f1f355d5c4a22f5c13783ea))
+* subtitles ([9ef1d8b](https://github.com/ho-nl/m2-pwa/commit/9ef1d8b9079c50340015e482fe6f1bf577610269))
+
+
+### Features
+
+* set correct font sizes ([9317448](https://github.com/ho-nl/m2-pwa/commit/9317448c94a9fb4408dfbcaa320adccc363964d0))
+
+
+
+
+
 # [3.2.0](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/magento-category@3.1.7...@graphcommerce/magento-category@3.2.0) (2021-10-27)
 
 

package/components/CategoryDescription/CategoryDescription.tsx

@@ -13,9 +13,16 @@ const useStyles = makeStyles(
       gridArea: 'description',
       margin: '0 auto',
       textAlign: 'center',
-      maxWidth: 732,
+      maxWidth: '90%',
+      [theme.breakpoints.up('md')]: {
+        maxWidth: '50%',
+      },
+      [theme.breakpoints.up('xl')]: {
+        maxWidth: '30%',
+      },
       marginTop: theme.spacings.md,
       marginBottom: theme.spacings.sm,
+      ...theme.typography.subtitle1,
     },
   }),
   { name: 'CategoryDescription' },
@@ -27,9 +34,6 @@ export default function CategoryDescription(props: CategoryDescriptionProps) {
 
   return (
     <div {...divProps} className={classes.root}>
-      <Typography variant='h2' component='h1' align='center'>
-        {name}
-      </Typography>
       {/* todo: replace with proper content renderer */}
       {/* eslint-disable-next-line react/no-danger */}
       {description && <div dangerouslySetInnerHTML={{ __html: description }} />}

package/components/CategoryHeroNav/CategoryHeroNav.tsx

@@ -36,20 +36,18 @@ const useStyles = makeStyles(
         gridTemplateColumns: 'repeat(2, 1fr)',
         maxWidth: '100vw',
         width: '100%',
-        alignSelf: 'flex-start',
+        alignSelf: 'start',
       },
     },
     title: {
       gridArea: 'title',
-      position: 'relative',
       alignSelf: 'center',
       [theme.breakpoints.up('md')]: {
-        alignSelf: 'flex-end',
+        alignSelf: 'end',
       },
     },
     placeholder: {
       gridArea: 'placeholder',
-      background: '#fff',
       minHeight: '40vh',
       overflow: 'hidden',
 

package/components/CategoryHeroNav/CategoryHeroNavTitle.tsx

@@ -4,19 +4,16 @@ import React from 'react'
 
 const useStyles = makeStyles(
   (theme: Theme) => ({
-    root: {
-      marginTop: 0,
-      marginBottom: 0,
-    },
     container: {
       padding: 0,
     },
     title: {
-      alignItems: 'center',
+      // alignItems: 'center',
       justifyContent: 'center',
       [theme.breakpoints.up('md')]: {
-        alignItems: 'flex-start',
-        justifyContent: 'flex-end',
+        margin: 0,
+        alignItems: 'start',
+        justifyContent: 'end',
       },
     },
   }),
@@ -31,5 +28,9 @@ export default function CategoryHeroNavTitle(props: CategoryHeroNavTitleProps) {
   const { children } = props
   const classes = useStyles()
 
-  return <AppShellTitle classes={classes}>{children}</AppShellTitle>
+  return (
+    <AppShellTitle classes={classes} variant='h1'>
+      {children}
+    </AppShellTitle>
+  )
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@graphcommerce/magento-category",
-  "version": "3.2.1",
+  "version": "3.3.2",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "browserslist": [
@@ -14,25 +14,25 @@
   },
   "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-product": "^3.3.1",
-    "@graphcommerce/magento-store": "^3.1.1",
-    "@graphcommerce/next-ui": "^3.10.1",
+    "@graphcommerce/framer-scroller": "^0.4.2",
+    "@graphcommerce/graphql": "^2.105.1",
+    "@graphcommerce/image": "^2.105.1",
+    "@graphcommerce/magento-product": "^3.4.2",
+    "@graphcommerce/magento-store": "^3.1.5",
+    "@graphcommerce/next-ui": "^3.11.2",
     "@graphql-typed-document-node/core": "^3.1.0",
     "@material-ui/core": "^4.12.3",
-    "next": "^12.0.0",
+    "next": "^12.0.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "type-fest": "^2.5.1"
   },
-  "gitHead": "b90c6285a14368a76de8ad1d104f3d535bc3cafb"
+  "gitHead": "ed70123f0b4c4552ca413deff6fe786156d0772f"
 }