@graphcommerce/magento-cart-items 8.1.0-canary.16 → 8.1.0-canary.17
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
CHANGED
|
@@ -1,5 +1,12 @@
|
|
|
1
1
|
# Change Log
|
|
2
2
|
|
|
3
|
+
## 8.1.0-canary.17
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- [#2209](https://github.com/graphcommerce-org/graphcommerce/pull/2209) [`2872cab`](https://github.com/graphcommerce-org/graphcommerce/commit/2872cabdca9ee4f0378fd411c6a633f71bb92f1f) - Removed useMediaQuery from the wishlist and cart ItemActionCard and replaced it with a new responsive size prop.
|
|
8
|
+
([@Jessevdpoel](https://github.com/Jessevdpoel))
|
|
9
|
+
|
|
3
10
|
## 8.1.0-canary.16
|
|
4
11
|
|
|
5
12
|
## 8.1.0-canary.15
|
|
@@ -30,7 +30,7 @@ const typographySizes = {
|
|
|
30
30
|
}
|
|
31
31
|
|
|
32
32
|
export function CartItemActionCard(props: CartItemActionCardProps) {
|
|
33
|
-
const { cartItem, sx = [], size = '
|
|
33
|
+
const { cartItem, sx = [], size = 'responsive', readOnly = false, ...rest } = props
|
|
34
34
|
const { uid, quantity, prices, errors, product } = cartItem
|
|
35
35
|
const { name, thumbnail, url_key } = product
|
|
36
36
|
|
|
@@ -65,6 +65,11 @@ export function CartItemActionCard(props: CartItemActionCardProps) {
|
|
|
65
65
|
'&.sizeSmall': {
|
|
66
66
|
px: 0,
|
|
67
67
|
},
|
|
68
|
+
'&.sizeResponsive': {
|
|
69
|
+
[theme.breakpoints.down('md')]: {
|
|
70
|
+
px: 0,
|
|
71
|
+
},
|
|
72
|
+
},
|
|
68
73
|
'& .ActionCard-end': {
|
|
69
74
|
justifyContent: readOnly ? 'center' : 'space-between',
|
|
70
75
|
},
|
|
@@ -75,7 +80,14 @@ export function CartItemActionCard(props: CartItemActionCardProps) {
|
|
|
75
80
|
alignSelf: 'flex-start',
|
|
76
81
|
},
|
|
77
82
|
'& .ActionCard-secondaryAction': {
|
|
78
|
-
typography:
|
|
83
|
+
typography:
|
|
84
|
+
size === 'responsive'
|
|
85
|
+
? {
|
|
86
|
+
xs: typographySizes.small,
|
|
87
|
+
md: typographySizes.medium,
|
|
88
|
+
lg: typographySizes.large,
|
|
89
|
+
}
|
|
90
|
+
: typographySizes[size],
|
|
79
91
|
display: 'flex',
|
|
80
92
|
alignItems: 'center',
|
|
81
93
|
color: 'text.secondary',
|
|
@@ -84,7 +96,14 @@ export function CartItemActionCard(props: CartItemActionCardProps) {
|
|
|
84
96
|
justifyContent: 'start',
|
|
85
97
|
},
|
|
86
98
|
'& .ActionCard-price': {
|
|
87
|
-
typography:
|
|
99
|
+
typography:
|
|
100
|
+
size === 'responsive'
|
|
101
|
+
? {
|
|
102
|
+
xs: typographySizes.small,
|
|
103
|
+
md: typographySizes.medium,
|
|
104
|
+
lg: typographySizes.large,
|
|
105
|
+
}
|
|
106
|
+
: typographySizes[size],
|
|
88
107
|
pr: readOnly ? 0 : theme.spacings.xs,
|
|
89
108
|
mb: { xs: 0.5, sm: 0 },
|
|
90
109
|
},
|
|
@@ -97,13 +116,27 @@ export function CartItemActionCard(props: CartItemActionCardProps) {
|
|
|
97
116
|
layout='fill'
|
|
98
117
|
src={thumbnail?.url}
|
|
99
118
|
sx={{
|
|
100
|
-
width:
|
|
101
|
-
|
|
119
|
+
width:
|
|
120
|
+
size === 'responsive'
|
|
121
|
+
? {
|
|
122
|
+
xs: productImageSizes.small,
|
|
123
|
+
md: productImageSizes.medium,
|
|
124
|
+
lg: productImageSizes.large,
|
|
125
|
+
}
|
|
126
|
+
: productImageSizes[size],
|
|
127
|
+
height:
|
|
128
|
+
size === 'responsive'
|
|
129
|
+
? {
|
|
130
|
+
xs: productImageSizes.small,
|
|
131
|
+
md: productImageSizes.medium,
|
|
132
|
+
lg: productImageSizes.large,
|
|
133
|
+
}
|
|
134
|
+
: productImageSizes[size],
|
|
102
135
|
display: 'block',
|
|
103
136
|
borderRadius: 1,
|
|
104
137
|
objectFit: 'contain',
|
|
105
138
|
}}
|
|
106
|
-
sizes={productImageSizes[size]}
|
|
139
|
+
sizes={size === 'responsive' ? productImageSizes.small : productImageSizes[size]}
|
|
107
140
|
/>
|
|
108
141
|
)
|
|
109
142
|
}
|
|
@@ -133,7 +166,14 @@ export function CartItemActionCard(props: CartItemActionCardProps) {
|
|
|
133
166
|
</>
|
|
134
167
|
}
|
|
135
168
|
price={<Money {...(inclTaxes ? prices?.row_total_including_tax : prices?.row_total)} />}
|
|
136
|
-
action={
|
|
169
|
+
action={
|
|
170
|
+
!readOnly && (
|
|
171
|
+
<RemoveItemFromCart
|
|
172
|
+
{...cartItem}
|
|
173
|
+
buttonProps={{ size: size === 'responsive' ? 'large' : size }}
|
|
174
|
+
/>
|
|
175
|
+
)
|
|
176
|
+
}
|
|
137
177
|
size={size}
|
|
138
178
|
after={filterNonNullableKeys(errors).map((error) => (
|
|
139
179
|
<Box sx={{ color: 'error.main', typography: 'caption' }} key={error.message}>
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import { ActionCardLayout, ActionCardLayoutProps, nonNullable } from '@graphcommerce/next-ui'
|
|
2
|
-
import { Theme, useMediaQuery } from '@mui/material'
|
|
3
2
|
import { CartItemsFragment } from '../../Api/CartItems.gql'
|
|
4
3
|
import {
|
|
5
4
|
CartItemActionCard,
|
|
@@ -31,32 +30,25 @@ export function CartItemsActionCards(props: CartProps) {
|
|
|
31
30
|
children,
|
|
32
31
|
layout = 'list',
|
|
33
32
|
itemProps = {},
|
|
34
|
-
sizeSm = 'medium',
|
|
35
|
-
sizeMd = 'large',
|
|
36
33
|
variant = 'default',
|
|
37
34
|
...remainingProps
|
|
38
35
|
} = props
|
|
39
36
|
|
|
40
|
-
const isMobile = useMediaQuery<Theme>((theme) => theme.breakpoints.down('md'), {
|
|
41
|
-
defaultMatches: false,
|
|
42
|
-
})
|
|
43
|
-
|
|
44
|
-
const size = isMobile ? sizeSm : sizeMd
|
|
45
|
-
|
|
46
37
|
if (!cart?.items?.length) return null
|
|
47
38
|
|
|
48
39
|
return (
|
|
49
40
|
<ActionCardLayout layout={layout} {...remainingProps}>
|
|
50
|
-
{cart.items
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
41
|
+
{cart.items
|
|
42
|
+
?.filter(nonNullable)
|
|
43
|
+
.map((item) => (
|
|
44
|
+
<CartItemActionCard
|
|
45
|
+
key={item.uid}
|
|
46
|
+
cartItem={item}
|
|
47
|
+
layout={layout}
|
|
48
|
+
variant={variant}
|
|
49
|
+
{...itemProps}
|
|
50
|
+
/>
|
|
51
|
+
))}
|
|
60
52
|
{children}
|
|
61
53
|
</ActionCardLayout>
|
|
62
54
|
)
|
package/package.json
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
"name": "@graphcommerce/magento-cart-items",
|
|
3
3
|
"homepage": "https://www.graphcommerce.org/",
|
|
4
4
|
"repository": "github:graphcommerce-org/graphcommerce",
|
|
5
|
-
"version": "8.1.0-canary.
|
|
5
|
+
"version": "8.1.0-canary.17",
|
|
6
6
|
"sideEffects": false,
|
|
7
7
|
"prettier": "@graphcommerce/prettier-config-pwa",
|
|
8
8
|
"eslintConfig": {
|
|
@@ -12,17 +12,17 @@
|
|
|
12
12
|
}
|
|
13
13
|
},
|
|
14
14
|
"peerDependencies": {
|
|
15
|
-
"@graphcommerce/eslint-config-pwa": "^8.1.0-canary.
|
|
16
|
-
"@graphcommerce/graphql": "^8.1.0-canary.
|
|
17
|
-
"@graphcommerce/image": "^8.1.0-canary.
|
|
18
|
-
"@graphcommerce/magento-cart": "^8.1.0-canary.
|
|
19
|
-
"@graphcommerce/magento-customer": "^8.1.0-canary.
|
|
20
|
-
"@graphcommerce/magento-product": "^8.1.0-canary.
|
|
21
|
-
"@graphcommerce/magento-store": "^8.1.0-canary.
|
|
22
|
-
"@graphcommerce/next-ui": "^8.1.0-canary.
|
|
23
|
-
"@graphcommerce/prettier-config-pwa": "^8.1.0-canary.
|
|
24
|
-
"@graphcommerce/react-hook-form": "^8.1.0-canary.
|
|
25
|
-
"@graphcommerce/typescript-config-pwa": "^8.1.0-canary.
|
|
15
|
+
"@graphcommerce/eslint-config-pwa": "^8.1.0-canary.17",
|
|
16
|
+
"@graphcommerce/graphql": "^8.1.0-canary.17",
|
|
17
|
+
"@graphcommerce/image": "^8.1.0-canary.17",
|
|
18
|
+
"@graphcommerce/magento-cart": "^8.1.0-canary.17",
|
|
19
|
+
"@graphcommerce/magento-customer": "^8.1.0-canary.17",
|
|
20
|
+
"@graphcommerce/magento-product": "^8.1.0-canary.17",
|
|
21
|
+
"@graphcommerce/magento-store": "^8.1.0-canary.17",
|
|
22
|
+
"@graphcommerce/next-ui": "^8.1.0-canary.17",
|
|
23
|
+
"@graphcommerce/prettier-config-pwa": "^8.1.0-canary.17",
|
|
24
|
+
"@graphcommerce/react-hook-form": "^8.1.0-canary.17",
|
|
25
|
+
"@graphcommerce/typescript-config-pwa": "^8.1.0-canary.17",
|
|
26
26
|
"@lingui/core": "^4.2.1",
|
|
27
27
|
"@lingui/macro": "^4.2.1",
|
|
28
28
|
"@lingui/react": "^4.2.1",
|