@graphcommerce/demo-magento-graphcommerce 10.0.0-canary.67 → 10.0.0-canary.68
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
|
@@ -62,7 +62,6 @@ export default function IconsPage() {
|
|
|
62
62
|
// eslint-disable-next-line react/no-array-index-key
|
|
63
63
|
<React.Fragment key={propVariant}>
|
|
64
64
|
<IconSvg {...props} style={{ fontSize: size }} ref={ref} />
|
|
65
|
-
|
|
66
65
|
<Typography variant='h1' sx={{ mt: 8 }}>
|
|
67
66
|
{propVariant} <IconSvg {...props} />
|
|
68
67
|
</Typography>
|
|
@@ -6,7 +6,7 @@ import {
|
|
|
6
6
|
LayoutOverlayDemo,
|
|
7
7
|
useLayoutState,
|
|
8
8
|
} from '@graphcommerce/next-ui/LayoutOverlay/test/LayoutOverlayDemo'
|
|
9
|
-
import { capitalize, Container,
|
|
9
|
+
import { Box, capitalize, Container, ListItemButton, Typography } from '@mui/material'
|
|
10
10
|
import { m } from 'framer-motion'
|
|
11
11
|
import { useState } from 'react'
|
|
12
12
|
|
|
@@ -30,22 +30,22 @@ function SheetDemo() {
|
|
|
30
30
|
<FormAutoSubmit control={form.control} submit={submit} wait={0} />
|
|
31
31
|
<LayoutOverlayHeader>
|
|
32
32
|
<LayoutTitle size='small'>
|
|
33
|
-
<
|
|
33
|
+
<Box component='span' sx={{ display: { xs: 'none', md: 'inline' } }}>
|
|
34
34
|
Overlay Md {variantMd} {justifyMd} {sizeMd}
|
|
35
|
-
</
|
|
36
|
-
<
|
|
35
|
+
</Box>
|
|
36
|
+
<Box component='span' sx={{ display: { xs: 'inline', sm: 'none' } }}>
|
|
37
37
|
Overlay Sm {variantSm} {justifySm} {sizeSm}
|
|
38
|
-
</
|
|
38
|
+
</Box>
|
|
39
39
|
</LayoutTitle>
|
|
40
40
|
</LayoutOverlayHeader>
|
|
41
41
|
|
|
42
42
|
<LayoutTitle>
|
|
43
|
-
<
|
|
43
|
+
<Box component='span' sx={{ display: { xs: 'none', md: 'inline' } }}>
|
|
44
44
|
Overlay Md {variantMd} {justifyMd} {sizeMd}
|
|
45
|
-
</
|
|
46
|
-
<
|
|
45
|
+
</Box>
|
|
46
|
+
<Box component='span' sx={{ display: { xs: 'inline', sm: 'none' } }}>
|
|
47
47
|
Overlay Sm {variantSm} {justifySm} {sizeSm}
|
|
48
|
-
</
|
|
48
|
+
</Box>
|
|
49
49
|
</LayoutTitle>
|
|
50
50
|
<Container maxWidth={false} sx={{ minWidth: responsiveVal(250, 500) }}>
|
|
51
51
|
<form style={{ paddingTop: '100px' }} onSubmit={submit}>
|
|
@@ -35,40 +35,89 @@ function TypographyOverview() {
|
|
|
35
35
|
<LayoutHeader>
|
|
36
36
|
<LayoutTitle size='small'>Typography</LayoutTitle>
|
|
37
37
|
</LayoutHeader>
|
|
38
|
-
|
|
39
38
|
<LayoutTitle>Typography</LayoutTitle>
|
|
40
|
-
|
|
41
39
|
<Container>
|
|
42
|
-
<Typography
|
|
40
|
+
<Typography
|
|
41
|
+
variant='h1'
|
|
42
|
+
gutterBottom
|
|
43
|
+
sx={{
|
|
44
|
+
display: 'block',
|
|
45
|
+
}}
|
|
46
|
+
>
|
|
43
47
|
Headline 1 {useRenderedSize()}
|
|
44
48
|
</Typography>
|
|
45
49
|
|
|
46
|
-
<Typography
|
|
50
|
+
<Typography
|
|
51
|
+
variant='h2'
|
|
52
|
+
gutterBottom
|
|
53
|
+
sx={{
|
|
54
|
+
display: 'block',
|
|
55
|
+
}}
|
|
56
|
+
>
|
|
47
57
|
Headline 2 {useRenderedSize()}
|
|
48
58
|
</Typography>
|
|
49
59
|
|
|
50
|
-
<Typography
|
|
60
|
+
<Typography
|
|
61
|
+
variant='h3'
|
|
62
|
+
gutterBottom
|
|
63
|
+
sx={{
|
|
64
|
+
display: 'block',
|
|
65
|
+
}}
|
|
66
|
+
>
|
|
51
67
|
Headline 3 {useRenderedSize()}
|
|
52
68
|
</Typography>
|
|
53
69
|
|
|
54
|
-
<Typography
|
|
70
|
+
<Typography
|
|
71
|
+
variant='h4'
|
|
72
|
+
gutterBottom
|
|
73
|
+
sx={{
|
|
74
|
+
display: 'block',
|
|
75
|
+
marginBottom: '16px',
|
|
76
|
+
}}
|
|
77
|
+
>
|
|
55
78
|
Headline 4 — Maecenas efficitur velit a metus.
|
|
56
79
|
{useRenderedSize()}
|
|
57
80
|
</Typography>
|
|
58
81
|
|
|
59
|
-
<Typography
|
|
82
|
+
<Typography
|
|
83
|
+
variant='h5'
|
|
84
|
+
gutterBottom
|
|
85
|
+
sx={{
|
|
86
|
+
display: 'block',
|
|
87
|
+
}}
|
|
88
|
+
>
|
|
60
89
|
Headline 5 — Morbi posuere nunc diam {useRenderedSize()}
|
|
61
90
|
</Typography>
|
|
62
91
|
|
|
63
|
-
<Typography
|
|
92
|
+
<Typography
|
|
93
|
+
variant='h6'
|
|
94
|
+
gutterBottom
|
|
95
|
+
sx={{
|
|
96
|
+
display: 'block',
|
|
97
|
+
}}
|
|
98
|
+
>
|
|
64
99
|
Headline 6 — Ut luctus mi ante {useRenderedSize()}
|
|
65
100
|
</Typography>
|
|
66
101
|
|
|
67
|
-
<Typography
|
|
102
|
+
<Typography
|
|
103
|
+
variant='subtitle1'
|
|
104
|
+
gutterBottom
|
|
105
|
+
sx={{
|
|
106
|
+
display: 'block',
|
|
107
|
+
marginBottom: '16px',
|
|
108
|
+
}}
|
|
109
|
+
>
|
|
68
110
|
Subtitle 1 — In dictum velit quis lorem dignissim volutpat. {useRenderedSize()}
|
|
69
111
|
</Typography>
|
|
70
112
|
|
|
71
|
-
<Typography
|
|
113
|
+
<Typography
|
|
114
|
+
variant='body1'
|
|
115
|
+
gutterBottom
|
|
116
|
+
sx={{
|
|
117
|
+
display: 'block',
|
|
118
|
+
marginBottom: '16px',
|
|
119
|
+
}}
|
|
120
|
+
>
|
|
72
121
|
Body1 — Maecenas efficitur velit a metus feugiat egestas. Donec sit amet maximus sapien,
|
|
73
122
|
in malesuada mi. Duis eget finibus urna, vitae suscipit felis. Duis aliquet tortor a
|
|
74
123
|
turpis euismod gravida. Nunc eu hendrerit leo. Integer dapibus dapibus augue, sit amet
|
|
@@ -78,11 +127,24 @@ function TypographyOverview() {
|
|
|
78
127
|
{useRenderedSize()}
|
|
79
128
|
</Typography>
|
|
80
129
|
|
|
81
|
-
<Typography
|
|
130
|
+
<Typography
|
|
131
|
+
variant='subtitle2'
|
|
132
|
+
gutterBottom
|
|
133
|
+
sx={{
|
|
134
|
+
display: 'block',
|
|
135
|
+
}}
|
|
136
|
+
>
|
|
82
137
|
Subtitle 2 — Nunc eu hendrerit leo {useRenderedSize()}
|
|
83
138
|
</Typography>
|
|
84
139
|
|
|
85
|
-
<Typography
|
|
140
|
+
<Typography
|
|
141
|
+
variant='body2'
|
|
142
|
+
gutterBottom
|
|
143
|
+
sx={{
|
|
144
|
+
display: 'block',
|
|
145
|
+
marginBottom: '16px',
|
|
146
|
+
}}
|
|
147
|
+
>
|
|
86
148
|
Body2 — Suspendisse nec consectetur massa. Proin mollis ante lorem, a lacinia orci
|
|
87
149
|
pellentesque ut. Donec porta fringilla commodo. In hac habitasse platea dictumst. Donec
|
|
88
150
|
quis elementum mauris. Cras rutrum lectus et magna convallis, vitae dignissim elit
|
|
@@ -94,15 +156,33 @@ function TypographyOverview() {
|
|
|
94
156
|
{useRenderedSize()}
|
|
95
157
|
</Typography>
|
|
96
158
|
|
|
97
|
-
<Typography
|
|
159
|
+
<Typography
|
|
160
|
+
variant='button'
|
|
161
|
+
gutterBottom
|
|
162
|
+
sx={{
|
|
163
|
+
display: 'block',
|
|
164
|
+
}}
|
|
165
|
+
>
|
|
98
166
|
Button: Sed laoreet {useRenderedSize()}
|
|
99
167
|
</Typography>
|
|
100
168
|
|
|
101
|
-
<Typography
|
|
169
|
+
<Typography
|
|
170
|
+
variant='caption'
|
|
171
|
+
gutterBottom
|
|
172
|
+
sx={{
|
|
173
|
+
display: 'block',
|
|
174
|
+
}}
|
|
175
|
+
>
|
|
102
176
|
Caption: vitae enim quis cursus. {useRenderedSize()}
|
|
103
177
|
</Typography>
|
|
104
178
|
|
|
105
|
-
<Typography
|
|
179
|
+
<Typography
|
|
180
|
+
variant='overline'
|
|
181
|
+
gutterBottom
|
|
182
|
+
sx={{
|
|
183
|
+
display: 'block',
|
|
184
|
+
}}
|
|
185
|
+
>
|
|
106
186
|
Overline: Nunc scelerisque at massa nec imperdiet {useRenderedSize()}
|
|
107
187
|
</Typography>
|
|
108
188
|
</Container>
|
package/package.json
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
"name": "@graphcommerce/demo-magento-graphcommerce",
|
|
3
3
|
"homepage": "https://www.graphcommerce.org/",
|
|
4
4
|
"repository": "github:graphcommerce-org/graphcommerce",
|
|
5
|
-
"version": "10.0.0-canary.
|
|
5
|
+
"version": "10.0.0-canary.68",
|
|
6
6
|
"sideEffects": false,
|
|
7
7
|
"scripts": {
|
|
8
8
|
"dev": "tsc -W"
|
|
@@ -21,15 +21,15 @@
|
|
|
21
21
|
}
|
|
22
22
|
},
|
|
23
23
|
"peerDependencies": {
|
|
24
|
-
"@graphcommerce/eslint-config-pwa": "^10.0.0-canary.
|
|
25
|
-
"@graphcommerce/framer-scroller": "^10.0.0-canary.
|
|
26
|
-
"@graphcommerce/magento-product": "^10.0.0-canary.
|
|
27
|
-
"@graphcommerce/magento-product-configurable": "^10.0.0-canary.
|
|
28
|
-
"@graphcommerce/magento-recently-viewed-products": "^10.0.0-canary.
|
|
29
|
-
"@graphcommerce/next-ui": "^10.0.0-canary.
|
|
30
|
-
"@graphcommerce/prettier-config-pwa": "^10.0.0-canary.
|
|
31
|
-
"@graphcommerce/typescript-config-pwa": "^10.0.0-canary.
|
|
32
|
-
"@mui/material": "^
|
|
24
|
+
"@graphcommerce/eslint-config-pwa": "^10.0.0-canary.68",
|
|
25
|
+
"@graphcommerce/framer-scroller": "^10.0.0-canary.68",
|
|
26
|
+
"@graphcommerce/magento-product": "^10.0.0-canary.68",
|
|
27
|
+
"@graphcommerce/magento-product-configurable": "^10.0.0-canary.68",
|
|
28
|
+
"@graphcommerce/magento-recently-viewed-products": "^10.0.0-canary.68",
|
|
29
|
+
"@graphcommerce/next-ui": "^10.0.0-canary.68",
|
|
30
|
+
"@graphcommerce/prettier-config-pwa": "^10.0.0-canary.68",
|
|
31
|
+
"@graphcommerce/typescript-config-pwa": "^10.0.0-canary.68",
|
|
32
|
+
"@mui/material": "^7.0.0",
|
|
33
33
|
"framer-motion": "^11.0.0",
|
|
34
34
|
"next": "*",
|
|
35
35
|
"react": "^19.2.0",
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import type { PluginConfig, PluginProps } from '@graphcommerce/next-config'
|
|
2
2
|
import type { RowLinksProps } from '@graphcommerce/next-ui'
|
|
3
|
-
import { responsiveVal } from '@graphcommerce/next-ui'
|
|
3
|
+
import { responsiveVal, sxx } from '@graphcommerce/next-ui'
|
|
4
4
|
|
|
5
5
|
export const config: PluginConfig = {
|
|
6
6
|
type: 'component',
|
|
@@ -21,7 +21,7 @@ export function RowLinks(props: PluginProps<RowLinksProps>) {
|
|
|
21
21
|
{...rest}
|
|
22
22
|
maxWidth={false}
|
|
23
23
|
title={title}
|
|
24
|
-
sx={
|
|
24
|
+
sx={sxx(
|
|
25
25
|
(theme) => ({
|
|
26
26
|
display: 'flex',
|
|
27
27
|
flexDirection: 'column',
|
|
@@ -80,8 +80,8 @@ export function RowLinks(props: PluginProps<RowLinksProps>) {
|
|
|
80
80
|
},
|
|
81
81
|
},
|
|
82
82
|
}),
|
|
83
|
-
|
|
84
|
-
|
|
83
|
+
sx,
|
|
84
|
+
)}
|
|
85
85
|
>
|
|
86
86
|
{children}
|
|
87
87
|
</Prev>
|