@graphcommerce/next-ui 3.1.1 → 3.1.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/AppShell/AppShellHeader/index.tsx +3 -3
  2. package/AppShell/FixedFab.tsx +5 -2
  3. package/AppShell/FullPageShellBase.tsx +1 -0
  4. package/AppShell/useFixedFabAnimation.tsx +4 -6
  5. package/Blog/BlogTitle/index.tsx +3 -3
  6. package/CHANGELOG.md +36 -0
  7. package/FramerScroller/components/SidebarGallery.tsx +2 -1
  8. package/Row/HeroBanner/index.tsx +0 -3
  9. package/icons/icon_shopping_bag.svg +2 -2
  10. package/package.json +10 -11
package/AppShell/AppShellHeader/index.tsx CHANGED
@@ -38,7 +38,7 @@ const useStyles = makeStyles(
38
38
  borderBottom: `1px solid ${theme.palette.divider}`,
39
39
  },
40
40
  dividerSpacer: {
41
- minHeight: 2,
41
+ minHeight: 1,
42
42
  },
43
43
  dividerSheetShell: {
44
44
  marginTop: `calc((${theme.page.headerInnerHeight.md} * 0.15))`,
@@ -130,8 +130,8 @@ const useStyles = makeStyles(
130
130
  sheetHeaderFillMobileOnly: {
131
131
  [theme.breakpoints.up('md')]: {
132
132
  pointerEvents: 'none',
133
- background: 'transparent',
134
- marginBottom: `calc((${theme.page.headerInnerHeight.md} * -1) + ${theme.spacings.xxs} * 2)`,
133
+ background: 'green',
134
+ position: 'fixed',
135
135
  },
136
136
  },
137
137
  innerContainer: {
package/AppShell/FixedFab.tsx CHANGED
@@ -10,15 +10,18 @@ const useStyles = makeStyles(
10
10
  bottom: 20,
11
11
  right: 20,
12
12
  zIndex: 100,
13
+ width: 56,
13
14
  boxShadow: theme.shadows[4],
14
15
  borderRadius: 99,
16
+ maxWidth: 56,
15
17
  [theme.breakpoints.down('sm')]: {
16
18
  top: 'unset !important',
17
19
  },
18
20
  [theme.breakpoints.up('md')]: {
19
21
  pointerEvents: 'all',
20
- top: `calc(${theme.spacings.xxs} - 2px)`,
21
- left: `calc(100vw - ${theme.page.horizontal} - 70px)`,
22
+ top: theme.spacings.xxs,
23
+ // hacky way to measure page width without scrollbar width
24
+ left: `calc((100vw - (100vw - 100%)) - ${theme.page.horizontal} - 56px)`,
22
25
  bottom: 'unset',
23
26
  boxShadow: 'unset',
24
27
  },
package/AppShell/FullPageShellBase.tsx CHANGED
@@ -20,6 +20,7 @@ const useStyles = makeStyles(
20
20
  justifyContent: 'center',
21
21
  [theme.breakpoints.up('md')]: {
22
22
  padding: `${theme.spacings.xxs} ${theme.page.horizontal} 0`,
23
+ marginBottom: theme.spacings.xxs,
23
24
  top: 0,
24
25
  display: 'flex',
25
26
  pointerEvents: 'none',
package/AppShell/useFixedFabAnimation.tsx CHANGED
@@ -6,13 +6,11 @@ export default function useFixedFabAnimation() {
6
6
  const isMobile = useMediaQuery(theme.breakpoints.down('sm'))
7
7
  const { scrollY } = useViewportScroll()
8
8
  const scrollTo = isMobile ? 0 : 60
9
-
10
9
  const opacity = useTransform(scrollY, [50, scrollTo], [0, 1])
11
10
  const opacity1 = useTransform(scrollY, [0, scrollTo], [0, 0.08])
12
- const opacity2 = useTransform(scrollY, [0, scrollTo], [0, 0.1])
13
- const filter = useMotionTemplate`
14
- drop-shadow(0 1px 4px rgba(0,0,0,${opacity1}))
15
- drop-shadow(0 4px 10px rgba(0,0,0,${opacity2}))`
11
+ const boxShadow = useMotionTemplate`
12
+ 0 2px 10px 0 rgba(0, 0, 0, ${opacity1})
13
+ `
16
14
 
17
- return { filter, opacity }
15
+ return { boxShadow, opacity }
18
16
  }
package/Blog/BlogTitle/index.tsx CHANGED
@@ -1,6 +1,6 @@
1
- import { makeStyles, Theme, Typography } from '@material-ui/core'
1
+ import { makeStyles, Theme } from '@material-ui/core'
2
2
  import React from 'react'
3
- import Row from '../../Row'
3
+ import AppShellTitle from '../../AppShell/AppShellTitle'
4
4
  import { UseStyles } from '../../Styles'
5
5
 
6
6
  const useStyles = makeStyles(
@@ -23,7 +23,7 @@ export default function BlogTitle(props: BlogTitleProps) {
23
23
 
24
24
  return (
25
25
  <div className={classes.wrapper}>
26
- <Typography variant='h1'>{title}</Typography>
26
+ <AppShellTitle variant='h2'>{title}</AppShellTitle>
27
27
  </div>
28
28
  )
29
29
  }
package/CHANGELOG.md CHANGED
@@ -3,6 +3,42 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ## [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)
7
+
8
+
9
+ ### Bug Fixes
10
+
11
+ * cart fab alignment ([209ad30](https://github.com/ho-nl/m2-pwa/commit/209ad3027eff32e174c1774d21e9f33a3051a819))
12
+ * **cart-fab:** box shadow in safari ([4eb316d](https://github.com/ho-nl/m2-pwa/commit/4eb316dd0f2ab7ee2806a3acdb306af1eb72854b))
13
+ * **cart-fab:** positioning ([7bb31b4](https://github.com/ho-nl/m2-pwa/commit/7bb31b4bf6e663d14220aedaddf420b24d427b3a))
14
+
15
+
16
+
17
+
18
+
19
+ ## [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)
20
+
21
+
22
+ ### Bug Fixes
23
+
24
+ * **blog:** use app shell title ([987bb15](https://github.com/ho-nl/m2-pwa/commit/987bb157c4064141b1c2978935e66cf47ae24ff0))
25
+
26
+
27
+
28
+
29
+
30
+ ## [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)
31
+
32
+
33
+ ### Bug Fixes
34
+
35
+ * **hero-banner:** too large top spacing ([0ad8499](https://github.com/ho-nl/m2-pwa/commit/0ad8499a1702caf8e121f38e1ccb70fba4f418db))
36
+ * **sheet-shell:** mobile border bottom gap ([70104d8](https://github.com/ho-nl/m2-pwa/commit/70104d88994c2324f415eec1efeeba21de7872b9))
37
+
38
+
39
+
40
+
41
+
6
42
  ## [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)
7
43
 
8
44
 
package/FramerScroller/components/SidebarGallery.tsx CHANGED
@@ -44,7 +44,7 @@ const useStyles = makeStyles(
44
44
  zIndex: theme.zIndex.modal,
45
45
  marginTop: 0,
46
46
  [theme.breakpoints.up('md')]: {
47
- marginTop: `calc(${theme.page.headerInnerHeight.md} * -1 - ${theme.spacings.sm} * 2)`,
47
+ marginTop: `calc(${theme.page.headerInnerHeight.md} * -1 - ${theme.spacings.sm})`,
48
48
  },
49
49
  paddingRight: 0,
50
50
  },
@@ -55,6 +55,7 @@ const useStyles = makeStyles(
55
55
 
56
56
  const maxHeight = `calc(100vh - ${headerHeight} - ${galleryMargin} - ${extraSpacing})`
57
57
  const ratio = `calc(${height} / ${width} * 100%)`
58
+
58
59
  return {
59
60
  height: 0, // https://stackoverflow.com/questions/44770074/css-grid-row-height-safari-bug
60
61
  position: 'relative',
package/Row/HeroBanner/index.tsx CHANGED
@@ -9,9 +9,6 @@ import responsiveVal from '../../Styles/responsiveVal'
9
9
  const useStyles = makeStyles(
10
10
  (theme: Theme) => ({
11
11
  container: {
12
- [theme.breakpoints.up('md')]: {
13
- paddingTop: theme.spacings.xxs,
14
- },
15
12
  paddingLeft: 0,
16
13
  paddingRight: 0,
17
14
  },
package/icons/icon_shopping_bag.svg CHANGED
@@ -1,6 +1,6 @@
1
1
  <?xml version="1.0" encoding="UTF-8"?>
2
- <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">
3
- <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
2
+ <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">
3
+ <g transform='translate(0.0, -2.0)' stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
4
4
  <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>
5
5
  <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>
6
6
  </g>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@graphcommerce/next-ui",
3
- "version": "3.1.1",
3
+ "version": "3.1.5",
4
4
  "author": "",
5
5
  "license": "MIT",
6
6
  "scripts": {
@@ -9,13 +9,13 @@
9
9
  "start": "next start"
10
10
  },
11
11
  "dependencies": {
12
- "@apollo/client": "^3.3.21",
13
- "@graphcommerce/framer-next-pages": "^2.106.5",
14
- "@graphcommerce/framer-scroller": "^0.2.5",
15
- "@graphcommerce/framer-sheet": "^2.105.4",
16
- "@graphcommerce/framer-utils": "^2.103.4",
17
- "@graphcommerce/graphql": "^2.103.4",
18
- "@graphcommerce/image": "^2.104.5",
12
+ "@apollo/client": "^3.4.16",
13
+ "@graphcommerce/framer-next-pages": "^2.106.6",
14
+ "@graphcommerce/framer-scroller": "^0.2.6",
15
+ "@graphcommerce/framer-sheet": "^2.105.5",
16
+ "@graphcommerce/framer-utils": "^2.103.5",
17
+ "@graphcommerce/graphql": "^2.103.5",
18
+ "@graphcommerce/image": "^2.104.6",
19
19
  "@graphql-typed-document-node/core": "^3.1.0",
20
20
  "@material-ui/core": "^4.12.3",
21
21
  "@material-ui/lab": "^4.0.0-alpha.60",
@@ -35,11 +35,10 @@
35
35
  },
36
36
  "devDependencies": {
37
37
  "@graphcommerce/browserslist-config-pwa": "^3.0.1",
38
- "@graphcommerce/eslint-config-pwa": "^3.0.4",
38
+ "@graphcommerce/eslint-config-pwa": "^3.0.5",
39
39
  "@graphcommerce/prettier-config-pwa": "^3.0.2",
40
40
  "@graphcommerce/typescript-config-pwa": "^3.1.0",
41
41
  "@playwright/test": "^1.15.0",
42
- "@types/react": "^17.0.25",
43
42
  "@types/react-dom": "^17.0.9",
44
43
  "@types/react-is": "^17.0.2",
45
44
  "graphql-tag": "2.12.5",
@@ -56,5 +55,5 @@
56
55
  "project": "./tsconfig.json"
57
56
  }
58
57
  },
59
- "gitHead": "d543ebfabe185d01354c9aed619ab83ec816944f"
58
+ "gitHead": "f1d0e488921787f39a260c410790ec13d32c8143"
60
59
  }