@graphcommerce/next-ui 3.0.6 → 3.1.3

package/AppShell/AppShellHeader/index.tsx

@@ -38,7 +38,7 @@ const useStyles = makeStyles(
       borderBottom: `1px solid ${theme.palette.divider}`,
     },
     dividerSpacer: {
-      minHeight: 2,
+      minHeight: 1,
     },
     dividerSheetShell: {
       marginTop: `calc((${theme.page.headerInnerHeight.md} * 0.15))`,
@@ -130,8 +130,8 @@ const useStyles = makeStyles(
     sheetHeaderFillMobileOnly: {
       [theme.breakpoints.up('md')]: {
         pointerEvents: 'none',
-        background: 'transparent',
-        marginBottom: `calc((${theme.page.headerInnerHeight.md} * -1) + ${theme.spacings.xxs} * 2)`,
+        background: 'green',
+        position: 'fixed',
       },
     },
     innerContainer: {

package/AppShell/FullPageShellBase.tsx

@@ -20,6 +20,7 @@ const useStyles = makeStyles(
       justifyContent: 'center',
       [theme.breakpoints.up('md')]: {
         padding: `${theme.spacings.xxs} ${theme.page.horizontal} 0`,
+        marginBottom: theme.spacings.xxs,
         top: 0,
         display: 'flex',
         pointerEvents: 'none',

package/Blog/BlogTitle/index.tsx

@@ -1,6 +1,6 @@
-import { makeStyles, Theme, Typography } from '@material-ui/core'
+import { makeStyles, Theme } from '@material-ui/core'
 import React from 'react'
-import Row from '../../Row'
+import AppShellTitle from '../../AppShell/AppShellTitle'
 import { UseStyles } from '../../Styles'
 
 const useStyles = makeStyles(
@@ -23,7 +23,7 @@ export default function BlogTitle(props: BlogTitleProps) {
 
   return (
     <div className={classes.wrapper}>
-      <Typography variant='h1'>{title}</Typography>
+      <AppShellTitle variant='h2'>{title}</AppShellTitle>
     </div>
   )
 }

package/CHANGELOG.md

@@ -3,6 +3,52 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [3.1.3](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/next-ui@3.1.2...@graphcommerce/next-ui@3.1.3) (2021-10-04)
+
+
+### Bug Fixes
+
+* **blog:** use app shell title ([987bb15](https://github.com/ho-nl/m2-pwa/commit/987bb157c4064141b1c2978935e66cf47ae24ff0))
+
+
+
+
+
+## [3.1.2](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/next-ui@3.1.1...@graphcommerce/next-ui@3.1.2) (2021-10-04)
+
+
+### Bug Fixes
+
+* **hero-banner:** too large top spacing ([0ad8499](https://github.com/ho-nl/m2-pwa/commit/0ad8499a1702caf8e121f38e1ccb70fba4f418db))
+* **sheet-shell:** mobile border bottom gap ([70104d8](https://github.com/ho-nl/m2-pwa/commit/70104d88994c2324f415eec1efeeba21de7872b9))
+
+
+
+
+
+## [3.1.1](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/next-ui@3.1.0...@graphcommerce/next-ui@3.1.1) (2021-10-04)
+
+
+### Bug Fixes
+
+* cart icon alignment ([8b75b40](https://github.com/ho-nl/m2-pwa/commit/8b75b40bcdecf6d43579ee824677bf1a03763157))
+* **icon-block:** render href ([738fd82](https://github.com/ho-nl/m2-pwa/commit/738fd82629dd3be92fe0cdd63ed8eeaa5d4886f6))
+
+
+
+
+
+# [3.1.0](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/next-ui@3.0.6...@graphcommerce/next-ui@3.1.0) (2021-10-01)
+
+
+### Features
+
+* **sidebar-gallery:** close using esc key ([fd46fe1](https://github.com/ho-nl/m2-pwa/commit/fd46fe1029f436c1e0e04cbcc3b66deca4d1b0b6))
+
+
+
+
+
 ## [3.0.1](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/next-ui@3.0.0...@graphcommerce/next-ui@3.0.1) (2021-09-27)
 
 **Note:** Version bump only for package @graphcommerce/next-ui

package/FramerScroller/components/SidebarGallery.tsx

@@ -1,17 +1,17 @@
 import {
+  CenterSlide,
+  MotionImageAspect,
+  MotionImageAspectProps,
+  Scroller,
   ScrollerButton,
   ScrollerDots,
   ScrollerProvider,
-  Scroller,
-  MotionImageAspectProps,
-  CenterSlide,
-  MotionImageAspect,
 } from '@graphcommerce/framer-scroller'
 import { clientSize, useMotionValueValue } from '@graphcommerce/framer-utils'
 import { Fab, makeStyles, Theme, useTheme } from '@material-ui/core'
 import clsx from 'clsx'
-import { m } from 'framer-motion'
-import React, { useState } from 'react'
+import { m, useDomEvent } from 'framer-motion'
+import React, { useRef, useState } from 'react'
 import { UseStyles } from '../../Styles'
 import responsiveVal from '../../Styles/responsiveVal'
 import SvgImage from '../../SvgImage'
@@ -44,7 +44,7 @@ const useStyles = makeStyles(
       zIndex: theme.zIndex.modal,
       marginTop: 0,
       [theme.breakpoints.up('md')]: {
-        marginTop: `calc(${theme.page.headerInnerHeight.md} * -1  - ${theme.spacings.sm} * 2)`,
+        marginTop: `calc(${theme.page.headerInnerHeight.md} * -1  - ${theme.spacings.sm})`,
       },
       paddingRight: 0,
     },
@@ -55,6 +55,7 @@ const useStyles = makeStyles(
 
       const maxHeight = `calc(100vh - ${headerHeight} - ${galleryMargin} - ${extraSpacing})`
       const ratio = `calc(${height} / ${width} * 100%)`
+
       return {
         height: 0, // https://stackoverflow.com/questions/44770074/css-grid-row-height-safari-bug
         position: 'relative',
@@ -183,6 +184,18 @@ export default function SidebarGallery(props: SidebarGalleryProps) {
 
   const theme = useTheme()
 
+  const windowRef = useRef(typeof window !== 'undefined' ? window : null)
+
+  const handleEscapeKey = (e: KeyboardEvent | Event) => {
+    if (zoomed) {
+      if ((e as KeyboardEvent)?.key === 'Escape') {
+        toggle()
+      }
+    }
+  }
+
+  useDomEvent(windowRef, 'keyup', handleEscapeKey, { passive: true })
+
   return (
     <ScrollerProvider scrollSnapAlign='center'>
       <m.div layout className={clsxZoom('root')}>

package/Row/HeroBanner/index.tsx

@@ -9,9 +9,6 @@ import responsiveVal from '../../Styles/responsiveVal'
 const useStyles = makeStyles(
   (theme: Theme) => ({
     container: {
-      [theme.breakpoints.up('md')]: {
-        paddingTop: theme.spacings.xxs,
-      },
       paddingLeft: 0,
       paddingRight: 0,
     },

package/Row/IconBlocks/IconBlock/index.tsx

@@ -44,7 +44,7 @@ const IconBlock = React.forwardRef<HTMLAnchorElement, IconBlockProps>((props, re
 
   if (href) {
     return (
-      <Button variant='text' color='primary' className={classes.block} ref={ref}>
+      <Button href={href} variant='text' color='primary' className={classes.block} ref={ref}>
         <div>{content}</div>
       </Button>
     )

package/icons/icon_shopping_bag.svg

@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<svg width="32px" height="32px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-     <g transform="translate(0.25,-1.85)" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+<svg transform="translate(0.25, 0.25)" width="32px" height="32px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+     <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
         <path d="M22.7211388,13.8851398 L23.5468356,26.00354 L8.74931805,26.00354 L9.57501488,13.8851398 L22.7211388,13.8851398 Z" id="Rectangle-6" stroke="#000000" stroke-width="1.4"></path>
         <path d="M12.4444055,14.953 L12.4444055,11.4552028 C12.4444055,9.54694698 13.9458954,8 15.798077,8 C17.6502587,8 19.1517485,9.54694698 19.1517485,11.4552028 L19.1517485,14.9497766" id="Path" stroke="#000000" stroke-width="1.4" stroke-linecap="square" stroke-linejoin="bevel"></path>
     </g>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@graphcommerce/next-ui",
-  "version": "3.0.6",
+  "version": "3.1.3",
   "author": "",
   "license": "MIT",
   "scripts": {
@@ -56,5 +56,5 @@
       "project": "./tsconfig.json"
     }
   },
-  "gitHead": "cf2b61fa96aca043ff841b018334ca8c28e5e6cf"
+  "gitHead": "148ed6eb34bf3b3da72c1791c4195d8d141bc6e6"
 }