@graphcommerce/next-ui 3.1.2 → 3.1.6
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.
- package/ApolloError/ApolloErrorFullPage.tsx +10 -3
- package/AppShell/FixedFab.tsx +5 -2
- package/AppShell/useFixedFabAnimation.tsx +4 -6
- package/Blog/BlogTitle/index.tsx +3 -3
- package/CHANGELOG.md +35 -0
- package/Form/index.tsx +1 -1
- package/FullPageMessage/index.tsx +20 -16
- package/icons/icon_shopping_bag.svg +2 -2
- package/package.json +10 -11
|
@@ -11,15 +11,22 @@ export type ApolloErrorFullPageProps = {
|
|
|
11
11
|
} & Omit<FullPageMessageProps, 'title' | 'description'>
|
|
12
12
|
|
|
13
13
|
export default function ApolloErrorFullPage(props: ApolloErrorFullPageProps) {
|
|
14
|
-
const {
|
|
14
|
+
const {
|
|
15
|
+
error,
|
|
16
|
+
graphqlErrorAlertProps,
|
|
17
|
+
networkErrorAlertProps,
|
|
18
|
+
children,
|
|
19
|
+
...fullPageMessageProps
|
|
20
|
+
} = props
|
|
15
21
|
|
|
16
22
|
const singleError = error?.graphQLErrors.length === 1
|
|
17
23
|
|
|
18
24
|
return (
|
|
19
25
|
<FullPageMessage
|
|
20
26
|
title={singleError ? error?.graphQLErrors[0].message : 'Several errors occured'}
|
|
21
|
-
description={singleError ? undefined : <ApolloErrorAlert error={error} />}
|
|
22
27
|
{...fullPageMessageProps}
|
|
23
|
-
|
|
28
|
+
>
|
|
29
|
+
{singleError ? children : <ApolloErrorAlert error={error} />}
|
|
30
|
+
</FullPageMessage>
|
|
24
31
|
)
|
|
25
32
|
}
|
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:
|
|
21
|
-
|
|
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
|
},
|
|
@@ -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
|
|
13
|
-
|
|
14
|
-
|
|
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 {
|
|
15
|
+
return { boxShadow, opacity }
|
|
18
16
|
}
|
package/Blog/BlogTitle/index.tsx
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { makeStyles, Theme
|
|
1
|
+
import { makeStyles, Theme } from '@material-ui/core'
|
|
2
2
|
import React from 'react'
|
|
3
|
-
import
|
|
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
|
-
<
|
|
26
|
+
<AppShellTitle variant='h2'>{title}</AppShellTitle>
|
|
27
27
|
</div>
|
|
28
28
|
)
|
|
29
29
|
}
|
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,41 @@
|
|
|
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.6](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/next-ui@3.1.5...@graphcommerce/next-ui@3.1.6) (2021-10-07)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### Bug Fixes
|
|
10
|
+
|
|
11
|
+
* Form component added classes attribute ([269fd46](https://github.com/ho-nl/m2-pwa/commit/269fd4629cedcaab74043604ac21a4557b4e514f))
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
## [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)
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
### Bug Fixes
|
|
21
|
+
|
|
22
|
+
* cart fab alignment ([209ad30](https://github.com/ho-nl/m2-pwa/commit/209ad3027eff32e174c1774d21e9f33a3051a819))
|
|
23
|
+
* **cart-fab:** box shadow in safari ([4eb316d](https://github.com/ho-nl/m2-pwa/commit/4eb316dd0f2ab7ee2806a3acdb306af1eb72854b))
|
|
24
|
+
* **cart-fab:** positioning ([7bb31b4](https://github.com/ho-nl/m2-pwa/commit/7bb31b4bf6e663d14220aedaddf420b24d427b3a))
|
|
25
|
+
|
|
26
|
+
|
|
27
|
+
|
|
28
|
+
|
|
29
|
+
|
|
30
|
+
## [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)
|
|
31
|
+
|
|
32
|
+
|
|
33
|
+
### Bug Fixes
|
|
34
|
+
|
|
35
|
+
* **blog:** use app shell title ([987bb15](https://github.com/ho-nl/m2-pwa/commit/987bb157c4064141b1c2978935e66cf47ae24ff0))
|
|
36
|
+
|
|
37
|
+
|
|
38
|
+
|
|
39
|
+
|
|
40
|
+
|
|
6
41
|
## [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)
|
|
7
42
|
|
|
8
43
|
|
package/Form/index.tsx
CHANGED
|
@@ -46,7 +46,7 @@ export type DivFormProps = BaseFormProps & JSX.IntrinsicElements['div']
|
|
|
46
46
|
|
|
47
47
|
export const FormDiv = React.forwardRef<HTMLDivElement, DivFormProps>((props, ref) => {
|
|
48
48
|
const classes = useStyles(props)
|
|
49
|
-
const { contained, background = 'default', ...formProps } = props
|
|
49
|
+
const { contained, background = 'default', classes: _classes, ...formProps } = props
|
|
50
50
|
|
|
51
51
|
return (
|
|
52
52
|
<div
|
|
@@ -1,21 +1,22 @@
|
|
|
1
1
|
import { Container, Theme, Typography } from '@material-ui/core'
|
|
2
2
|
import { makeStyles } from '@material-ui/styles'
|
|
3
|
+
import clsx from 'clsx'
|
|
3
4
|
import React from 'react'
|
|
4
|
-
import PageMeta from '../PageMeta'
|
|
5
5
|
import responsiveVal from '../Styles/responsiveVal'
|
|
6
6
|
|
|
7
7
|
const useStyles = makeStyles(
|
|
8
8
|
(theme: Theme) => ({
|
|
9
9
|
root: {
|
|
10
|
-
marginTop: responsiveVal(50, 250),
|
|
11
10
|
alignItems: 'center',
|
|
11
|
+
marginTop: theme.spacings.md,
|
|
12
|
+
marginBottom: theme.spacings.md,
|
|
13
|
+
},
|
|
14
|
+
rootMargin: {
|
|
15
|
+
marginTop: responsiveVal(50, 250),
|
|
12
16
|
},
|
|
13
17
|
subject: {
|
|
14
18
|
textAlign: 'center',
|
|
15
|
-
|
|
16
|
-
},
|
|
17
|
-
description: {
|
|
18
|
-
marginTop: 8,
|
|
19
|
+
marginTop: theme.spacings.sm,
|
|
19
20
|
},
|
|
20
21
|
innerContainer: {
|
|
21
22
|
display: 'grid',
|
|
@@ -23,6 +24,9 @@ const useStyles = makeStyles(
|
|
|
23
24
|
justifyItems: 'center',
|
|
24
25
|
},
|
|
25
26
|
button: {
|
|
27
|
+
marginTop: theme.spacings.sm,
|
|
28
|
+
},
|
|
29
|
+
altButton: {
|
|
26
30
|
marginTop: 6,
|
|
27
31
|
},
|
|
28
32
|
}),
|
|
@@ -34,34 +38,34 @@ const useStyles = makeStyles(
|
|
|
34
38
|
export type FullPageMessageProps = {
|
|
35
39
|
icon: React.ReactNode
|
|
36
40
|
title: React.ReactNode
|
|
37
|
-
|
|
41
|
+
children?: React.ReactNode
|
|
38
42
|
button?: React.ReactNode
|
|
39
43
|
altButton?: React.ReactNode
|
|
44
|
+
disableMargin?: boolean
|
|
40
45
|
}
|
|
41
46
|
|
|
42
47
|
export default function FullPageMessage(props: FullPageMessageProps) {
|
|
43
|
-
const { icon, title,
|
|
48
|
+
const { icon, title, children, button, altButton, disableMargin = false } = props
|
|
44
49
|
const classes = useStyles()
|
|
45
50
|
|
|
46
51
|
return (
|
|
47
|
-
<div className={classes.root}>
|
|
52
|
+
<div className={clsx(classes.root, disableMargin || classes.rootMargin)}>
|
|
48
53
|
<Container maxWidth='md' className={classes.innerContainer}>
|
|
49
|
-
<PageMeta title='Account' metaDescription='Account Dashboard' metaRobots={['noindex']} />
|
|
50
54
|
{icon}
|
|
51
55
|
|
|
52
56
|
<div className={classes.subject}>
|
|
53
|
-
<Typography
|
|
57
|
+
<Typography variant='h3' gutterBottom>
|
|
54
58
|
{title}
|
|
55
59
|
</Typography>
|
|
56
|
-
{
|
|
57
|
-
<Typography component='
|
|
58
|
-
{
|
|
60
|
+
{children && (
|
|
61
|
+
<Typography component='div' variant='body1'>
|
|
62
|
+
{children}
|
|
59
63
|
</Typography>
|
|
60
64
|
)}
|
|
61
65
|
</div>
|
|
62
66
|
|
|
63
|
-
<div>{button}</div>
|
|
64
|
-
<div className={classes.
|
|
67
|
+
<div className={classes.button}>{button}</div>
|
|
68
|
+
<div className={classes.altButton}>{altButton}</div>
|
|
65
69
|
</Container>
|
|
66
70
|
</div>
|
|
67
71
|
)
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
<?xml version="1.0" encoding="UTF-8"?>
|
|
2
|
-
<svg
|
|
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.
|
|
3
|
+
"version": "3.1.6",
|
|
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.
|
|
13
|
-
"@graphcommerce/framer-next-pages": "^2.106.
|
|
14
|
-
"@graphcommerce/framer-scroller": "^0.2.
|
|
15
|
-
"@graphcommerce/framer-sheet": "^2.105.
|
|
16
|
-
"@graphcommerce/framer-utils": "^2.103.
|
|
17
|
-
"@graphcommerce/graphql": "^2.103.
|
|
18
|
-
"@graphcommerce/image": "^2.104.
|
|
12
|
+
"@apollo/client": "^3.4.16",
|
|
13
|
+
"@graphcommerce/framer-next-pages": "^2.106.6",
|
|
14
|
+
"@graphcommerce/framer-scroller": "^0.2.7",
|
|
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.
|
|
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": "
|
|
58
|
+
"gitHead": "717bd3c1658e421c247c1f8b210935cdb7780197"
|
|
60
59
|
}
|