@graphcommerce/next-ui 3.1.0 → 3.1.4

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/FixedFab.tsx

@@ -10,15 +10,18 @@ const useStyles = makeStyles(
       bottom: 20,
       right: 20,
       zIndex: 100,
+      width: 56,
       boxShadow: theme.shadows[4],
       borderRadius: 99,
+      maxWidth: 56,
       [theme.breakpoints.down('sm')]: {
         top: 'unset !important',
       },
       [theme.breakpoints.up('md')]: {
         pointerEvents: 'all',
-        top: `calc(${theme.spacings.xxs} - 2px)`,
-        left: `calc(100vw - ${theme.page.horizontal} - 70px)`,
+        top: theme.spacings.xxs,
+        // hacky way to measure page width without scrollbar width
+        left: `calc((100vw - (100vw - 100%)) - ${theme.page.horizontal} - 56px)`,
         bottom: 'unset',
         boxShadow: 'unset',
       },

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/AppShell/useFixedFabAnimation.tsx

@@ -6,13 +6,11 @@ export default function useFixedFabAnimation() {
   const isMobile = useMediaQuery(theme.breakpoints.down('sm'))
   const { scrollY } = useViewportScroll()
   const scrollTo = isMobile ? 0 : 60
-
   const opacity = useTransform(scrollY, [50, scrollTo], [0, 1])
   const opacity1 = useTransform(scrollY, [0, scrollTo], [0, 0.08])
-  const opacity2 = useTransform(scrollY, [0, scrollTo], [0, 0.1])
-  const filter = useMotionTemplate`
-    drop-shadow(0 1px 4px rgba(0,0,0,${opacity1}))
-    drop-shadow(0 4px 10px rgba(0,0,0,${opacity2}))`
+  const boxShadow = useMotionTemplate`
+    0 2px 10px 0 rgba(0, 0, 0, ${opacity1})
+    `
 
-  return { filter, opacity }
+  return { boxShadow, opacity }
 }

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,54 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [3.1.4](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/next-ui@3.1.3...@graphcommerce/next-ui@3.1.4) (2021-10-06)
+
+
+### Bug Fixes
+
+* cart fab alignment ([209ad30](https://github.com/ho-nl/m2-pwa/commit/209ad3027eff32e174c1774d21e9f33a3051a819))
+* **cart-fab:** box shadow in safari ([4eb316d](https://github.com/ho-nl/m2-pwa/commit/4eb316dd0f2ab7ee2806a3acdb306af1eb72854b))
+* **cart-fab:** positioning ([7bb31b4](https://github.com/ho-nl/m2-pwa/commit/7bb31b4bf6e663d14220aedaddf420b24d427b3a))
+
+
+
+
+
+## [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)
 
 

package/FramerScroller/components/SidebarGallery.tsx

@@ -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',

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">
+     <g transform='translate(0.0, -2.0)' 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.1.0",
+  "version": "3.1.4",
   "author": "",
   "license": "MIT",
   "scripts": {
@@ -56,5 +56,5 @@
       "project": "./tsconfig.json"
     }
   },
-  "gitHead": "88c9c0b170964ec794f59c97bac253a29a7d58e0"
+  "gitHead": "3cdea8f8c2a7a717955e81634ffdf769a1317584"
 }