@graphcommerce/magento-cart 3.9.8 → 3.10.3
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/CHANGELOG.md +11 -0
- package/components/CartFab/CartFab.tsx +13 -6
- package/package.json +6 -6
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,17 @@
|
|
|
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.10.0](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/magento-cart@3.9.8...@graphcommerce/magento-cart@3.10.0) (2022-01-25)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### Features
|
|
10
|
+
|
|
11
|
+
* remove fixed fap and position cart with parent sticky ([bfd8adf](https://github.com/ho-nl/m2-pwa/commit/bfd8adf1372f77e6b27f6e0482ec03762d9148e4))
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
|
|
6
17
|
# [3.9.0](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/magento-cart@3.8.29...@graphcommerce/magento-cart@3.9.0) (2022-01-03)
|
|
7
18
|
|
|
8
19
|
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import {
|
|
2
|
-
FixedFab,
|
|
3
2
|
iconShoppingBag,
|
|
4
3
|
responsiveVal,
|
|
5
4
|
StyledBadge,
|
|
@@ -8,7 +7,7 @@ import {
|
|
|
8
7
|
UseStyles,
|
|
9
8
|
} from '@graphcommerce/next-ui'
|
|
10
9
|
import { t } from '@lingui/macro'
|
|
11
|
-
import { alpha,
|
|
10
|
+
import { alpha, Fab, FabProps, makeStyles, NoSsr, Theme, useTheme } from '@material-ui/core'
|
|
12
11
|
import { m, useTransform } from 'framer-motion'
|
|
13
12
|
import PageLink from 'next/link'
|
|
14
13
|
import React from 'react'
|
|
@@ -18,13 +17,20 @@ import { CartTotalQuantityFragment } from './CartTotalQuantity.gql'
|
|
|
18
17
|
|
|
19
18
|
const useStyles = makeStyles(
|
|
20
19
|
(theme: Theme) => ({
|
|
21
|
-
|
|
20
|
+
placeholderFab: {
|
|
22
21
|
width: responsiveVal(42, 56),
|
|
23
22
|
height: responsiveVal(42, 56),
|
|
24
23
|
[theme.breakpoints.down('sm')]: {
|
|
25
24
|
backgroundColor: `${theme.palette.background.paper} !important`,
|
|
26
25
|
},
|
|
27
26
|
},
|
|
27
|
+
cartFab: {
|
|
28
|
+
boxShadow: 'none',
|
|
29
|
+
width: responsiveVal(42, 56),
|
|
30
|
+
height: responsiveVal(42, 56),
|
|
31
|
+
pointerEvents: 'all',
|
|
32
|
+
color: theme.palette.text.primary,
|
|
33
|
+
},
|
|
28
34
|
shadow: {
|
|
29
35
|
pointerEvents: 'none',
|
|
30
36
|
borderRadius: '99em',
|
|
@@ -74,7 +80,7 @@ function CartFabContent(props: CartFabContentProps) {
|
|
|
74
80
|
aria-label={t`Cart`}
|
|
75
81
|
color='inherit'
|
|
76
82
|
size='large'
|
|
77
|
-
classes={{ root: classes.
|
|
83
|
+
classes={{ root: classes.placeholderFab }}
|
|
78
84
|
style={{ backgroundColor }}
|
|
79
85
|
>
|
|
80
86
|
{total_quantity > 0 ? (
|
|
@@ -102,6 +108,7 @@ function CartFabContent(props: CartFabContentProps) {
|
|
|
102
108
|
* product to the cart. This would mean that it would immediately start executing this query.
|
|
103
109
|
*/
|
|
104
110
|
export default function CartFab(props: CartFabProps) {
|
|
111
|
+
const classes = useStyles(props)
|
|
105
112
|
const { data } = useCartQuery(CartFabDocument, {
|
|
106
113
|
fetchPolicy: 'cache-only',
|
|
107
114
|
nextFetchPolicy: 'cache-first',
|
|
@@ -109,10 +116,10 @@ export default function CartFab(props: CartFabProps) {
|
|
|
109
116
|
const qty = data?.cart?.total_quantity ?? 0
|
|
110
117
|
|
|
111
118
|
return (
|
|
112
|
-
<
|
|
119
|
+
<Fab color='inherit' aria-label='Open Menu' size='medium' className={classes.cartFab}>
|
|
113
120
|
<NoSsr fallback={<CartFabContent {...props} total_quantity={0} />}>
|
|
114
121
|
<CartFabContent total_quantity={qty} {...props} />
|
|
115
122
|
</NoSsr>
|
|
116
|
-
</
|
|
123
|
+
</Fab>
|
|
117
124
|
)
|
|
118
125
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@graphcommerce/magento-cart",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.10.3",
|
|
4
4
|
"sideEffects": false,
|
|
5
5
|
"prettier": "@graphcommerce/prettier-config-pwa",
|
|
6
6
|
"browserslist": [
|
|
@@ -22,13 +22,13 @@
|
|
|
22
22
|
"dependencies": {
|
|
23
23
|
"@apollo/client": "^3.5.6",
|
|
24
24
|
"@graphcommerce/framer-next-pages": "^2.109.2",
|
|
25
|
-
"@graphcommerce/framer-scroller": "^1.2.
|
|
25
|
+
"@graphcommerce/framer-scroller": "^1.2.12",
|
|
26
26
|
"@graphcommerce/graphql": "^2.105.13",
|
|
27
27
|
"@graphcommerce/image": "^2.105.13",
|
|
28
|
-
"@graphcommerce/magento-customer": "^3.6.
|
|
28
|
+
"@graphcommerce/magento-customer": "^3.6.44",
|
|
29
29
|
"@graphcommerce/magento-graphql": "^2.104.13",
|
|
30
|
-
"@graphcommerce/magento-store": "^3.4.
|
|
31
|
-
"@graphcommerce/next-ui": "^3.
|
|
30
|
+
"@graphcommerce/magento-store": "^3.4.12",
|
|
31
|
+
"@graphcommerce/next-ui": "^3.25.3",
|
|
32
32
|
"@graphcommerce/react-hook-form": "^2.104.7",
|
|
33
33
|
"@lingui/macro": "^3.13.0",
|
|
34
34
|
"@material-ui/core": "^4.12.3",
|
|
@@ -39,5 +39,5 @@
|
|
|
39
39
|
"react": "^17.0.2",
|
|
40
40
|
"react-dom": "^17.0.2"
|
|
41
41
|
},
|
|
42
|
-
"gitHead": "
|
|
42
|
+
"gitHead": "41e42c8cd6f565ab0cbba81a1954a0041dc46768"
|
|
43
43
|
}
|