@graphcommerce/next-ui 3.2.1 → 3.3.1

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 (5) hide show
  1. package/AppShell/DesktopNavBar.tsx +54 -16
  2. package/AppShell/MenuFab.tsx +5 -0
  3. package/CHANGELOG.md +36 -0
  4. package/ChipMenu/index.tsx +9 -2
  5. package/package.json +12 -12
package/AppShell/DesktopNavBar.tsx CHANGED
@@ -1,9 +1,12 @@
1
1
  import { Scroller, ScrollerButton, ScrollerProvider } from '@graphcommerce/framer-scroller'
2
- import { Link, makeStyles, Theme } from '@material-ui/core'
2
+ import { Link, LinkProps as MuiLinkProps, makeStyles, Theme } from '@material-ui/core'
3
+ import { Variant as ThemeVariant } from '@material-ui/core/styles/createTypography'
3
4
  import clsx from 'clsx'
5
+ import { m } from 'framer-motion'
4
6
  import PageLink from 'next/link'
5
7
  import { useRouter } from 'next/router'
6
8
  import React from 'react'
9
+ import { UseStyles } from '../Styles'
7
10
  import SvgImageSimple from '../SvgImage/SvgImageSimple'
8
11
  import { iconChevronLeft, iconChevronRight } from '../icons'
9
12
  import { MenuProps } from './Menu'
@@ -25,20 +28,33 @@ const useStyles = makeStyles(
25
28
  padding: '0 40px',
26
29
  minHeight: 40,
27
30
  },
28
- prevNext: {
29
- pointerEvents: 'all',
31
+ prevNextBtnWrapper: {
30
32
  position: 'absolute',
31
- background: theme.palette.background.default,
32
- top: 5,
33
- [theme.breakpoints.down('sm')]: { display: 'none' },
34
- boxShadow: 'none',
33
+ top: 0,
35
34
  },
36
- prev: {
35
+ left: {
37
36
  left: 0,
38
37
  },
39
- next: {
38
+ right: {
40
39
  right: 0,
41
40
  },
41
+ prevNextBtn: {
42
+ pointerEvents: 'all',
43
+ background: theme.palette.background.default,
44
+ boxShadow: 'none',
45
+ height: 48,
46
+ [theme.breakpoints.down('sm')]: {
47
+ display: 'none',
48
+ },
49
+ },
50
+ prevBtn: {
51
+ borderTopLeftRadius: 0,
52
+ borderBottomLeftRadius: 0,
53
+ },
54
+ nextBtn: {
55
+ borderTopRightRadius: 0,
56
+ borderBottomRightRadius: 0,
57
+ },
42
58
  link: {
43
59
  whiteSpace: 'nowrap',
44
60
  color: 'black',
@@ -65,11 +81,11 @@ const useStyles = makeStyles(
65
81
  { name: 'DesktopNavBar' },
66
82
  )
67
83
 
68
- export type MenuTabsProps = MenuProps
84
+ export type MenuTabsProps = MenuProps & UseStyles<typeof useStyles> & { LinkProps?: MuiLinkProps }
69
85
 
70
86
  export default function DesktopNavBar(props: MenuTabsProps) {
71
- const { menu } = props
72
- const classes = useStyles()
87
+ const { menu, LinkProps } = props
88
+ const classes = useStyles(props)
73
89
  const router = useRouter()
74
90
 
75
91
  return (
@@ -78,7 +94,7 @@ export default function DesktopNavBar(props: MenuTabsProps) {
78
94
  <Scroller className={classes.scroller} hideScrollbar>
79
95
  {menu.map(({ href, children, ...linkProps }) => (
80
96
  <PageLink key={href.toString()} href={href} {...linkProps} passHref>
81
- <Link className={classes.link} variant='h6'>
97
+ <Link {...LinkProps} className={clsx(classes.link, LinkProps?.className)}>
82
98
  {children}
83
99
  <div
84
100
  className={clsx(
@@ -89,22 +105,44 @@ export default function DesktopNavBar(props: MenuTabsProps) {
89
105
  </Link>
90
106
  </PageLink>
91
107
  ))}
108
+ </Scroller>
109
+
110
+ <m.div className={clsx(classes.prevNextBtnWrapper, classes.left)}>
92
111
  <ScrollerButton
93
112
  direction='left'
94
113
  size='small'
95
- className={clsx(classes.prevNext, classes.prev)}
114
+ classes={{ root: clsx(classes.prevNextBtn, classes.prevBtn) }}
96
115
  >
97
116
  <SvgImageSimple src={iconChevronLeft} />
98
117
  </ScrollerButton>
118
+ </m.div>
119
+
120
+ <m.div className={clsx(classes.prevNextBtnWrapper, classes.right)}>
99
121
  <ScrollerButton
100
122
  direction='right'
101
123
  size='small'
102
- className={clsx(classes.prevNext, classes.next)}
124
+ classes={{ root: clsx(classes.prevNextBtn, classes.nextBtn) }}
103
125
  >
104
126
  <SvgImageSimple src={iconChevronRight} />
105
127
  </ScrollerButton>
106
- </Scroller>
128
+ </m.div>
107
129
  </div>
130
+
131
+ {/* <ScrollerButton
132
+ direction='left'
133
+ size='small'
134
+ className={clsx(classes.prevNext, classes.prev)}
135
+ >
136
+ <SvgImageSimple src={iconChevronLeft} />
137
+ </ScrollerButton>
138
+
139
+ <ScrollerButton
140
+ direction='right'
141
+ size='small'
142
+ className={clsx(classes.prevNext, classes.next)}
143
+ >
144
+ <SvgImageSimple src={iconChevronRight} />
145
+ </ScrollerButton> */}
108
146
  </ScrollerProvider>
109
147
  )
110
148
  }
package/AppShell/MenuFab.tsx CHANGED
@@ -91,6 +91,11 @@ export default function MenuFab(props: MenuFabProps) {
91
91
  onClose={() => setOpenEl(null)}
92
92
  classes={{ paper: classes.menu }}
93
93
  disableScrollLock
94
+ transitionDuration={{
95
+ appear: 175,
96
+ enter: 175,
97
+ exit: 175,
98
+ }}
94
99
  >
95
100
  {search && (
96
101
  <List>
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.3.0](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/next-ui@3.2.3...@graphcommerce/next-ui@3.3.0) (2021-10-13)
7
+
8
+
9
+ ### Features
10
+
11
+ * allow styling DesktopNavBar ([12f99a6](https://github.com/ho-nl/m2-pwa/commit/12f99a603d9e9f89e28ec2452823b58abee59c4c))
12
+ * implement extensibility for DesktopNavBar, SearchButton ([5710de8](https://github.com/ho-nl/m2-pwa/commit/5710de8936f59c7d0fcc648978183f0e7fdd26b7))
13
+ * make DesktopNavBar Link variant customizable ([d47172f](https://github.com/ho-nl/m2-pwa/commit/d47172f3ebe0cc0b769e0d17c171ae4bb2045bbb))
14
+
15
+
16
+
17
+
18
+
19
+ ## [3.2.3](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/next-ui@3.2.2...@graphcommerce/next-ui@3.2.3) (2021-10-11)
20
+
21
+
22
+ ### Bug Fixes
23
+
24
+ * **desktop-nav-bar:** prev/next button alignment in menu ([c7fabf0](https://github.com/ho-nl/m2-pwa/commit/c7fabf0474100aaf40a7526858fa2b01566b3250))
25
+ * **section-heeader-filter-items:** remove large paddings ([18f4d77](https://github.com/ho-nl/m2-pwa/commit/18f4d77e4eb1b029bf2e5656b753e2f18fde90ab))
26
+
27
+
28
+
29
+
30
+
31
+ ## [3.2.2](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/next-ui@3.2.1...@graphcommerce/next-ui@3.2.2) (2021-10-11)
32
+
33
+
34
+ ### Bug Fixes
35
+
36
+ * **menu-fab:** animation duration ([5b9ece2](https://github.com/ho-nl/m2-pwa/commit/5b9ece293fb7e12663386f9f9cbc99bc4e22aaa9))
37
+
38
+
39
+
40
+
41
+
6
42
  ## [3.2.1](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/next-ui@3.2.0...@graphcommerce/next-ui@3.2.1) (2021-10-11)
7
43
 
8
44
 
package/ChipMenu/index.tsx CHANGED
@@ -55,6 +55,9 @@ export const useChipMenuStyles = makeStyles(
55
55
  outline: 'none',
56
56
  },
57
57
  },
58
+ sectionHeaderWrapper: {
59
+ marginTop: 10,
60
+ },
58
61
  }),
59
62
  { name: 'ChipMenu' },
60
63
  )
@@ -109,7 +112,6 @@ export default function ChipMenu(props: ChipMenuProps) {
109
112
  selectedAndMenuHidden && classes.chipSelected,
110
113
  )}
111
114
  />
112
-
113
115
  <Menu
114
116
  anchorEl={openEl}
115
117
  open={!!openEl}
@@ -122,7 +124,12 @@ export default function ChipMenu(props: ChipMenuProps) {
122
124
  anchorOrigin={{ horizontal: 'left', vertical: 'bottom' }}
123
125
  classes={{ paper: classes.menuPaper, list: classes.menuList }}
124
126
  >
125
- <SectionHeader labelLeft={label ?? ''} labelRight={labelRight ?? ''} usePadding />
127
+ <SectionHeader
128
+ labelLeft={label ?? ''}
129
+ labelRight={labelRight ?? ''}
130
+ usePadding
131
+ classes={{ sectionHeaderWrapper: classes.sectionHeaderWrapper }}
132
+ />
126
133
  {children}
127
134
  </Menu>
128
135
  </>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@graphcommerce/next-ui",
3
- "version": "3.2.1",
3
+ "version": "3.3.1",
4
4
  "author": "",
5
5
  "license": "MIT",
6
6
  "scripts": {
@@ -10,12 +10,12 @@
10
10
  },
11
11
  "dependencies": {
12
12
  "@apollo/client": "^3.4.16",
13
- "@graphcommerce/framer-next-pages": "^2.106.7",
14
- "@graphcommerce/framer-scroller": "^0.2.9",
15
- "@graphcommerce/framer-sheet": "^2.105.6",
16
- "@graphcommerce/framer-utils": "^2.103.6",
17
- "@graphcommerce/graphql": "^2.103.5",
18
- "@graphcommerce/image": "^2.104.8",
13
+ "@graphcommerce/framer-next-pages": "^2.106.8",
14
+ "@graphcommerce/framer-scroller": "^0.2.10",
15
+ "@graphcommerce/framer-sheet": "^2.105.8",
16
+ "@graphcommerce/framer-utils": "^2.103.7",
17
+ "@graphcommerce/graphql": "^2.103.6",
18
+ "@graphcommerce/image": "^2.104.9",
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",
@@ -34,10 +34,10 @@
34
34
  "type-fest": "^2.3.4"
35
35
  },
36
36
  "devDependencies": {
37
- "@graphcommerce/browserslist-config-pwa": "^3.0.1",
38
- "@graphcommerce/eslint-config-pwa": "^3.0.5",
39
- "@graphcommerce/prettier-config-pwa": "^3.0.2",
40
- "@graphcommerce/typescript-config-pwa": "^3.1.0",
37
+ "@graphcommerce/browserslist-config-pwa": "^3.0.2",
38
+ "@graphcommerce/eslint-config-pwa": "^3.0.6",
39
+ "@graphcommerce/prettier-config-pwa": "^3.0.3",
40
+ "@graphcommerce/typescript-config-pwa": "^3.1.1",
41
41
  "@playwright/test": "^1.15.0",
42
42
  "@types/react-dom": "^17.0.9",
43
43
  "@types/react-is": "^17.0.2",
@@ -55,5 +55,5 @@
55
55
  "project": "./tsconfig.json"
56
56
  }
57
57
  },
58
- "gitHead": "e8e29078b5d241da5f90b930338e84ba543b0ea4"
58
+ "gitHead": "06977d2e65b4ab4eb4a472fc56f8b1a99512f1bd"
59
59
  }