@graphcommerce/next-ui 3.1.3 → 3.1.7

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 (9) hide show
  1. package/ApolloError/ApolloErrorFullPage.tsx +10 -3
  2. package/AppShell/FixedFab.tsx +5 -2
  3. package/AppShell/useFixedFabAnimation.tsx +4 -6
  4. package/CHANGELOG.md +35 -0
  5. package/Form/index.tsx +1 -1
  6. package/FullPageMessage/index.tsx +29 -23
  7. package/SvgImage/SvgImageSimple.tsx +2 -2
  8. package/icons/icon_shopping_bag.svg +2 -2
  9. package/package.json +10 -11
package/ApolloError/ApolloErrorFullPage.tsx CHANGED
@@ -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 { error, graphqlErrorAlertProps, networkErrorAlertProps, ...fullPageMessageProps } = props
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: `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/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/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.7](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/next-ui@3.1.6...@graphcommerce/next-ui@3.1.7) (2021-10-08)
7
+
8
+
9
+ ### Bug Fixes
10
+
11
+ * SvgImageSimple should pass the layout prop ([a0b5c81](https://github.com/ho-nl/m2-pwa/commit/a0b5c818f93ba24a34c6ce8aa21f8af50bd05dd2))
12
+
13
+
14
+
15
+
16
+
17
+ ## [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)
18
+
19
+
20
+ ### Bug Fixes
21
+
22
+ * Form component added classes attribute ([269fd46](https://github.com/ho-nl/m2-pwa/commit/269fd4629cedcaab74043604ac21a4557b4e514f))
23
+
24
+
25
+
26
+
27
+
28
+ ## [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)
29
+
30
+
31
+ ### Bug Fixes
32
+
33
+ * cart fab alignment ([209ad30](https://github.com/ho-nl/m2-pwa/commit/209ad3027eff32e174c1774d21e9f33a3051a819))
34
+ * **cart-fab:** box shadow in safari ([4eb316d](https://github.com/ho-nl/m2-pwa/commit/4eb316dd0f2ab7ee2806a3acdb306af1eb72854b))
35
+ * **cart-fab:** positioning ([7bb31b4](https://github.com/ho-nl/m2-pwa/commit/7bb31b4bf6e663d14220aedaddf420b24d427b3a))
36
+
37
+
38
+
39
+
40
+
6
41
  ## [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)
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
package/FullPageMessage/index.tsx CHANGED
@@ -1,67 +1,73 @@
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',
12
- },
13
- subject: {
14
- textAlign: 'center',
15
- margin: `${theme.spacings.sm} 0`,
16
- },
17
- description: {
18
- marginTop: 8,
11
+ marginTop: theme.spacings.md,
12
+ marginBottom: theme.spacings.md,
19
13
  },
20
14
  innerContainer: {
21
15
  display: 'grid',
22
16
  alignItems: 'center',
23
17
  justifyItems: 'center',
24
18
  },
19
+ rootMargin: {
20
+ marginTop: responsiveVal(50, 250),
21
+ },
22
+ subject: {
23
+ textAlign: 'center',
24
+ marginTop: theme.spacings.sm,
25
+ },
26
+
25
27
  button: {
28
+ marginTop: theme.spacings.sm,
29
+ },
30
+ altButton: {
26
31
  marginTop: 6,
27
32
  },
33
+ icon: {
34
+ height: responsiveVal(120, 180),
35
+ },
28
36
  }),
29
- {
30
- name: 'FullPageMessage',
31
- },
37
+ { name: 'FullPageMessage' },
32
38
  )
33
39
 
34
40
  export type FullPageMessageProps = {
35
41
  icon: React.ReactNode
36
42
  title: React.ReactNode
37
- description?: React.ReactNode
43
+ children?: React.ReactNode
38
44
  button?: React.ReactNode
39
45
  altButton?: React.ReactNode
46
+ disableMargin?: boolean
40
47
  }
41
48
 
42
49
  export default function FullPageMessage(props: FullPageMessageProps) {
43
- const { icon, title, description, button, altButton } = props
50
+ const { icon, title, children, button, altButton, disableMargin = false } = props
44
51
  const classes = useStyles()
45
52
 
46
53
  return (
47
- <div className={classes.root}>
54
+ <div className={clsx(classes.root, disableMargin || classes.rootMargin)}>
48
55
  <Container maxWidth='md' className={classes.innerContainer}>
49
- <PageMeta title='Account' metaDescription='Account Dashboard' metaRobots={['noindex']} />
50
- {icon}
56
+ <div className={classes.icon}>{icon}</div>
51
57
 
52
58
  <div className={classes.subject}>
53
- <Typography component='h2' variant='h4'>
59
+ <Typography variant='h3' gutterBottom>
54
60
  {title}
55
61
  </Typography>
56
- {description && (
57
- <Typography component='p' variant='body1' className={classes.description}>
58
- {description}
62
+ {children && (
63
+ <Typography component='div' variant='body1'>
64
+ {children}
59
65
  </Typography>
60
66
  )}
61
67
  </div>
62
68
 
63
- <div>{button}</div>
64
- <div className={classes.button}>{altButton}</div>
69
+ <div className={classes.button}>{button}</div>
70
+ <div className={classes.altButton}>{altButton}</div>
65
71
  </Container>
66
72
  </div>
67
73
  )
package/SvgImage/SvgImageSimple.tsx CHANGED
@@ -42,14 +42,14 @@ type SvgImageSimpleProps = Omit<ImageProps, 'fixed'> & {
42
42
  }
43
43
 
44
44
  const SvgImageSimple = forwardRef<HTMLImageElement, SvgImageSimpleProps>((props, ref) => {
45
- const { className, size = 'medium', muted, inverted, ...imageProps } = props
45
+ const { className, size = 'medium', muted, inverted, layout = 'fixed', ...imageProps } = props
46
46
  const classes = useStyles()
47
47
 
48
48
  return (
49
49
  <Image
50
50
  {...imageProps}
51
51
  ref={ref}
52
- layout='fixed'
52
+ layout={layout}
53
53
  className={clsx(
54
54
  className,
55
55
  classes.image,
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.3",
3
+ "version": "3.1.7",
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.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.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": "148ed6eb34bf3b3da72c1791c4195d8d141bc6e6"
58
+ "gitHead": "7c6ad9b6fdf91e48b33013218d962ad15f931db8"
60
59
  }