@graphcommerce/magento-category 3.2.2 → 3.3.3

package/CHANGELOG.md

@@ -3,6 +3,46 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [3.3.3](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/magento-category@3.3.2...@graphcommerce/magento-category@3.3.3) (2021-11-01)
+
+
+### Bug Fixes
+
+* category page design fixs ([d3fccc2](https://github.com/ho-nl/m2-pwa/commit/d3fccc2a86106b854e9a1fd89040a248fe20c99a))
+
+
+
+
+
+## [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

@@ -11,11 +11,17 @@ const useStyles = makeStyles(
   (theme: Theme) => ({
     root: {
       gridArea: 'description',
-      margin: '0 auto',
+      margin: `0 auto ${theme.spacings.sm}`,
+      padding: `0 ${theme.page.horizontal}`,
       textAlign: 'center',
-      maxWidth: 732,
-      marginTop: theme.spacings.md,
-      marginBottom: theme.spacings.sm,
+      [theme.breakpoints.up('md')]: {
+        maxWidth: '50%',
+      },
+      [theme.breakpoints.up('xl')]: {
+        maxWidth: '30%',
+      },
+
+      ...theme.typography.subtitle1,
     },
   }),
   { name: 'CategoryDescription' },
@@ -25,14 +31,7 @@ export default function CategoryDescription(props: CategoryDescriptionProps) {
   const { name, description, display_mode, ...divProps } = props
   const classes = useStyles(props)
 
-  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 }} />}
-    </div>
-  )
+  return description ? (
+    <div {...divProps} className={classes.root} dangerouslySetInnerHTML={{ __html: description }} />
+  ) : null
 }

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,13 @@ 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 +25,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.2",
+  "version": "3.3.3",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "browserslist": [
@@ -21,12 +21,12 @@
   },
   "dependencies": {
     "@apollo/client": "^3.4.16",
-    "@graphcommerce/framer-scroller": "^0.4.1",
+    "@graphcommerce/framer-scroller": "^0.4.2",
     "@graphcommerce/graphql": "^2.105.1",
     "@graphcommerce/image": "^2.105.1",
-    "@graphcommerce/magento-product": "^3.3.2",
-    "@graphcommerce/magento-store": "^3.1.2",
-    "@graphcommerce/next-ui": "^3.10.2",
+    "@graphcommerce/magento-product": "^3.4.3",
+    "@graphcommerce/magento-store": "^3.1.6",
+    "@graphcommerce/next-ui": "^3.11.3",
     "@graphql-typed-document-node/core": "^3.1.0",
     "@material-ui/core": "^4.12.3",
     "next": "^12.0.1",
@@ -34,5 +34,5 @@
     "react-dom": "^17.0.2",
     "type-fest": "^2.5.1"
   },
-  "gitHead": "7f5e13261ccb398f5a7e6bac70d3f4d5f757fa5f"
+  "gitHead": "570a61e72f88ef0a4bd1472d48c7a7dd28154f59"
 }