@graphcommerce/magento-category 3.5.43 → 4.0.2
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 +220 -160
- package/components/CategoryChildren/CategoryChildren.tsx +55 -52
- package/components/CategoryDescription/CategoryDescription.tsx +28 -27
- package/components/CategoryHeroNav/CategoryHeroNav.tsx +101 -96
- package/components/CategoryHeroNav/CategoryHeroNavTitle.tsx +17 -18
- package/package.json +21 -23
- package/queries/getCategoryStaticPaths.ts +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,257 +1,318 @@
|
|
|
1
1
|
# Change Log
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
|
|
3
|
+
## 4.0.2
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [#1276](https://github.com/ho-nl/m2-pwa/pull/1276)
|
|
8
|
+
[`ce09388e0`](https://github.com/ho-nl/m2-pwa/commit/ce09388e0d7ef33aee660612340f6fbae15ceec2)
|
|
9
|
+
Thanks [@paales](https://github.com/paales)! - We've moved lots of internal packages from
|
|
10
|
+
`dependencies` to `peerDependencies`. The result of this is that there will be significantly less
|
|
11
|
+
duplicate packages in the node_modules folders.
|
|
12
|
+
|
|
13
|
+
* [#1276](https://github.com/ho-nl/m2-pwa/pull/1276)
|
|
14
|
+
[`52a45bba4`](https://github.com/ho-nl/m2-pwa/commit/52a45bba4dc6dd6df3c81f5023df7d23ed8a534d)
|
|
15
|
+
Thanks [@paales](https://github.com/paales)! - Upgraded to
|
|
16
|
+
[NextJS 12.1](https://nextjs.org/blog/next-12-1)! This is just for compatibility, but we'll be
|
|
17
|
+
implementing
|
|
18
|
+
[On-demand Incremental Static Regeneration](https://nextjs.org/blog/next-12-1#on-demand-incremental-static-regeneration-beta)
|
|
19
|
+
soon.
|
|
20
|
+
|
|
21
|
+
This will greatly reduce the requirement to rebuid stuff and we'll add a management UI on the
|
|
22
|
+
frontend to be able to revalidate pages manually.
|
|
23
|
+
|
|
24
|
+
* Updated dependencies
|
|
25
|
+
[[`381e4c86a`](https://github.com/ho-nl/m2-pwa/commit/381e4c86a8321ce96e1fa5c7d3c0a0c0ff3e02c7),
|
|
26
|
+
[`ce09388e0`](https://github.com/ho-nl/m2-pwa/commit/ce09388e0d7ef33aee660612340f6fbae15ceec2),
|
|
27
|
+
[`e7c8e2756`](https://github.com/ho-nl/m2-pwa/commit/e7c8e2756d637cbcd2e793d62ef5721d35d9fa7b),
|
|
28
|
+
[`b08a8eb1d`](https://github.com/ho-nl/m2-pwa/commit/b08a8eb1d024b9d3e7712ef034029151670db275),
|
|
29
|
+
[`52a45bba4`](https://github.com/ho-nl/m2-pwa/commit/52a45bba4dc6dd6df3c81f5023df7d23ed8a534d)]:
|
|
30
|
+
- @graphcommerce/next-ui@4.1.1
|
|
31
|
+
- @graphcommerce/framer-scroller@2.0.2
|
|
32
|
+
- @graphcommerce/graphql@3.0.2
|
|
33
|
+
- @graphcommerce/image@3.0.2
|
|
34
|
+
- @graphcommerce/magento-product@4.0.2
|
|
35
|
+
- @graphcommerce/magento-store@4.0.2
|
|
36
|
+
|
|
37
|
+
## 4.0.1
|
|
38
|
+
|
|
39
|
+
### Patch Changes
|
|
40
|
+
|
|
41
|
+
- [`0cbaa878b`](https://github.com/ho-nl/m2-pwa/commit/0cbaa878b8a844d5abbeb1797b625a33130e6514)
|
|
42
|
+
Thanks [@paales](https://github.com/paales)! - Added homepage and repository package.json files,
|
|
43
|
+
so that the packages link to back to the website and repository
|
|
44
|
+
- Updated dependencies
|
|
45
|
+
[[`0cbaa878b`](https://github.com/ho-nl/m2-pwa/commit/0cbaa878b8a844d5abbeb1797b625a33130e6514)]:
|
|
46
|
+
- @graphcommerce/framer-scroller@2.0.1
|
|
47
|
+
- @graphcommerce/graphql@3.0.1
|
|
48
|
+
- @graphcommerce/image@3.0.1
|
|
49
|
+
- @graphcommerce/magento-product@4.0.1
|
|
50
|
+
- @graphcommerce/magento-store@4.0.1
|
|
51
|
+
- @graphcommerce/next-ui@4.0.1
|
|
52
|
+
|
|
53
|
+
## 4.0.0
|
|
54
|
+
|
|
55
|
+
### Major Changes
|
|
56
|
+
|
|
57
|
+
- [#1258](https://github.com/ho-nl/m2-pwa/pull/1258)
|
|
58
|
+
[`ad36382a4`](https://github.com/ho-nl/m2-pwa/commit/ad36382a4d55d83d9e47b7eb6a02671a2a631a05)
|
|
59
|
+
Thanks [@paales](https://github.com/paales)! - Upgraded to Material UI 5
|
|
60
|
+
|
|
61
|
+
### Patch Changes
|
|
62
|
+
|
|
63
|
+
- Updated dependencies
|
|
64
|
+
[[`ad36382a4`](https://github.com/ho-nl/m2-pwa/commit/ad36382a4d55d83d9e47b7eb6a02671a2a631a05)]:
|
|
65
|
+
- @graphcommerce/framer-scroller@2.0.0
|
|
66
|
+
- @graphcommerce/graphql@3.0.0
|
|
67
|
+
- @graphcommerce/image@3.0.0
|
|
68
|
+
- @graphcommerce/magento-product@4.0.0
|
|
69
|
+
- @graphcommerce/magento-store@4.0.0
|
|
70
|
+
- @graphcommerce/next-ui@4.0.0
|
|
5
71
|
|
|
6
|
-
|
|
72
|
+
All notable changes to this project will be documented in this file. See
|
|
73
|
+
[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
7
74
|
|
|
75
|
+
## [3.5.2](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/magento-category@3.5.1...@graphcommerce/magento-category@3.5.2) (2021-12-03)
|
|
8
76
|
|
|
9
77
|
### Bug Fixes
|
|
10
78
|
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
79
|
+
- spacing of LayoutTItle
|
|
80
|
+
([7afcd31](https://github.com/ho-nl/m2-pwa/commit/7afcd3163d16e902cf2ff7917f56ee6a8798f55b))
|
|
16
81
|
|
|
17
82
|
# [3.5.0](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/magento-category@3.4.4...@graphcommerce/magento-category@3.5.0) (2021-12-01)
|
|
18
83
|
|
|
19
|
-
|
|
20
84
|
### Features
|
|
21
85
|
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
86
|
+
- borderRadius based on theme.shape.borderRadius
|
|
87
|
+
([7c34937](https://github.com/ho-nl/m2-pwa/commit/7c349376cd41a131c628324c299106fdb7e60484))
|
|
88
|
+
- introduce borderRadius
|
|
89
|
+
([183afbc](https://github.com/ho-nl/m2-pwa/commit/183afbc8ee269f6694c372b06afdf41302f86c09))
|
|
28
90
|
|
|
29
91
|
# [3.4.0](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/magento-category@3.3.29...@graphcommerce/magento-category@3.4.0) (2021-11-12)
|
|
30
92
|
|
|
31
|
-
|
|
32
93
|
### Features
|
|
33
94
|
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
95
|
+
- added tons of translations
|
|
96
|
+
([9bb0ac7](https://github.com/ho-nl/m2-pwa/commit/9bb0ac709b58df6ea6141e92e4923a5ca9ae2963))
|
|
39
97
|
|
|
40
98
|
## [3.3.28](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/magento-category@3.3.27...@graphcommerce/magento-category@3.3.28) (2021-11-12)
|
|
41
99
|
|
|
42
|
-
|
|
43
100
|
### Bug Fixes
|
|
44
101
|
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
102
|
+
- fix spacing category video
|
|
103
|
+
([592f569](https://github.com/ho-nl/m2-pwa/commit/592f5690b28a423f10efaa4e685fdf7aaa9260dd))
|
|
104
|
+
- safari video height stretch fix
|
|
105
|
+
([76a800b](https://github.com/ho-nl/m2-pwa/commit/76a800b80bd29fd92f55ff9d9e24bb8e1bfdf830))
|
|
51
106
|
|
|
52
107
|
## [3.3.26](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/magento-category@3.3.25...@graphcommerce/magento-category@3.3.26) (2021-11-11)
|
|
53
108
|
|
|
54
|
-
|
|
55
109
|
### Bug Fixes
|
|
56
110
|
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
111
|
+
- **category-hero-nav:** category children mobile styles
|
|
112
|
+
([7928853](https://github.com/ho-nl/m2-pwa/commit/79288538bb3b99682a7beea22223d35106a5d9c2))
|
|
113
|
+
- **category-hero-nav:** category positioning
|
|
114
|
+
([2921dde](https://github.com/ho-nl/m2-pwa/commit/2921ddec4731e19c1ccb11f941ec59826a1f908d))
|
|
115
|
+
- **category-hero-nav:** spacing
|
|
116
|
+
([94de2cf](https://github.com/ho-nl/m2-pwa/commit/94de2cf7be9c82a6408dbe33438275051d57143d))
|
|
64
117
|
|
|
65
118
|
## [3.3.6](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/magento-category@3.3.5...@graphcommerce/magento-category@3.3.6) (2021-11-02)
|
|
66
119
|
|
|
67
|
-
|
|
68
120
|
### Bug Fixes
|
|
69
121
|
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
122
|
+
- darkMode
|
|
123
|
+
([c7573de](https://github.com/ho-nl/m2-pwa/commit/c7573de6bb80643b26931c35ac61735539e7fbf0))
|
|
75
124
|
|
|
76
125
|
## [3.3.3](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/magento-category@3.3.2...@graphcommerce/magento-category@3.3.3) (2021-11-01)
|
|
77
126
|
|
|
78
|
-
|
|
79
127
|
### Bug Fixes
|
|
80
128
|
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
129
|
+
- category page design fixs
|
|
130
|
+
([d3fccc2](https://github.com/ho-nl/m2-pwa/commit/d3fccc2a86106b854e9a1fd89040a248fe20c99a))
|
|
86
131
|
|
|
87
132
|
## [3.3.2](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/magento-category@3.3.1...@graphcommerce/magento-category@3.3.2) (2021-10-29)
|
|
88
133
|
|
|
89
|
-
|
|
90
134
|
### Bug Fixes
|
|
91
135
|
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
136
|
+
- spacing of title on category landing on mobile
|
|
137
|
+
([8ed3550](https://github.com/ho-nl/m2-pwa/commit/8ed35502fd231d1d6a8e0a282f8961335d9dead3))
|
|
97
138
|
|
|
98
139
|
# [3.3.0](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/magento-category@3.2.2...@graphcommerce/magento-category@3.3.0) (2021-10-28)
|
|
99
140
|
|
|
100
|
-
|
|
101
141
|
### Bug Fixes
|
|
102
142
|
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
143
|
+
- category h2 styling
|
|
144
|
+
([5b26f2b](https://github.com/ho-nl/m2-pwa/commit/5b26f2b92f55356c58cc207fa028d03a38a8b16a))
|
|
145
|
+
- remove legacy, title from category description
|
|
146
|
+
([574208c](https://github.com/ho-nl/m2-pwa/commit/574208ca71e6ed387f1f355d5c4a22f5c13783ea))
|
|
147
|
+
- subtitles
|
|
148
|
+
([9ef1d8b](https://github.com/ho-nl/m2-pwa/commit/9ef1d8b9079c50340015e482fe6f1bf577610269))
|
|
107
149
|
|
|
108
150
|
### Features
|
|
109
151
|
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
152
|
+
- set correct font sizes
|
|
153
|
+
([9317448](https://github.com/ho-nl/m2-pwa/commit/9317448c94a9fb4408dfbcaa320adccc363964d0))
|
|
115
154
|
|
|
116
155
|
# [3.2.0](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/magento-category@3.1.7...@graphcommerce/magento-category@3.2.0) (2021-10-27)
|
|
117
156
|
|
|
118
|
-
|
|
119
157
|
### Features
|
|
120
158
|
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
159
|
+
- **nextjs:** upgraded to nextjs 12
|
|
160
|
+
([9331bc8](https://github.com/ho-nl/m2-pwa/commit/9331bc801f6419522115cc47d291d49d608d5a90))
|
|
126
161
|
|
|
127
162
|
## [3.1.2](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/magento-category@3.1.1...@graphcommerce/magento-category@3.1.2) (2021-10-19)
|
|
128
163
|
|
|
129
|
-
|
|
130
164
|
### Bug Fixes
|
|
131
165
|
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
166
|
+
- positioning children categories
|
|
167
|
+
([33568ee](https://github.com/ho-nl/m2-pwa/commit/33568ee7a798f8cab149b6c23b6e044d81642f53))
|
|
137
168
|
|
|
138
169
|
# [3.1.0](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/magento-category@3.0.30...@graphcommerce/magento-category@3.1.0) (2021-10-19)
|
|
139
170
|
|
|
140
|
-
|
|
141
171
|
### Features
|
|
142
172
|
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
173
|
+
- **framer-scroller:** better defaults so the Scroller doesn't look broken when providing no props
|
|
174
|
+
([b177ce9](https://github.com/ho-nl/m2-pwa/commit/b177ce9570abb9ccfd4eb5cc34e43d157bb4e81a))
|
|
148
175
|
|
|
149
176
|
## [3.0.11](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/magento-category@3.0.10...@graphcommerce/magento-category@3.0.11) (2021-10-04)
|
|
150
177
|
|
|
151
|
-
|
|
152
178
|
### Bug Fixes
|
|
153
179
|
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
180
|
+
- **category-childeren:** scrollbar shown
|
|
181
|
+
([638e3ef](https://github.com/ho-nl/m2-pwa/commit/638e3efea3a537f90d23fb2f8953a62acb370288))
|
|
182
|
+
- **category-children:** scrollbar shown
|
|
183
|
+
([3ccc78b](https://github.com/ho-nl/m2-pwa/commit/3ccc78b329fa844c57bfeb2406c593d0533039d2))
|
|
160
184
|
|
|
161
185
|
## [3.0.1](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/magento-category@3.0.0...@graphcommerce/magento-category@3.0.1) (2021-09-27)
|
|
162
186
|
|
|
163
187
|
**Note:** Version bump only for package @graphcommerce/magento-category
|
|
164
188
|
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
189
|
# 3.0.0 (2021-09-27)
|
|
170
190
|
|
|
171
|
-
|
|
172
191
|
### Bug Fixes
|
|
173
192
|
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
193
|
+
- **app-shell-header:** title offset top not correctly set
|
|
194
|
+
([c144309](https://github.com/ho-nl/m2-pwa/commit/c1443095317c1779074f3a4058f4041159c8e31b))
|
|
195
|
+
- **app-shell:** pages after app shell changes
|
|
196
|
+
([fb74510](https://github.com/ho-nl/m2-pwa/commit/fb74510121f6124009db72ad2ddebf6459c52a85))
|
|
197
|
+
- canonical urls
|
|
198
|
+
([9ff8d3f](https://github.com/ho-nl/m2-pwa/commit/9ff8d3f950098fb28440f31f5dd93a835dce0bda))
|
|
199
|
+
- category children and swatch renderer
|
|
200
|
+
([1ee008d](https://github.com/ho-nl/m2-pwa/commit/1ee008d9ecf3bf5ec4b2d82243e4bcbbec384411))
|
|
201
|
+
- category children mobile positioning
|
|
202
|
+
([fafa02d](https://github.com/ho-nl/m2-pwa/commit/fafa02d393919cdb7f89d72afa17da07228f8093))
|
|
203
|
+
- category hero nav margin top
|
|
204
|
+
([31f8dee](https://github.com/ho-nl/m2-pwa/commit/31f8deed1d545d78bb856d4cfdfe0c7ec8671308))
|
|
205
|
+
- CategoryHeroNav styles
|
|
206
|
+
([6f185e7](https://github.com/ho-nl/m2-pwa/commit/6f185e74ee4c756efdf94ebcdee9b4593077f415))
|
|
207
|
+
- empty grid rows still have a gap
|
|
208
|
+
([7ba50c7](https://github.com/ho-nl/m2-pwa/commit/7ba50c740aa7ac5133b933b3e6a22fab853b55a6))
|
|
209
|
+
- filters sometimes do not apply
|
|
210
|
+
([b8bc412](https://github.com/ho-nl/m2-pwa/commit/b8bc4122c82c6b27bdc76481dd6ece1da021266a))
|
|
211
|
+
- **framer-next-page:** usePageRouter in SharedLayout
|
|
212
|
+
([c2fb164](https://github.com/ho-nl/m2-pwa/commit/c2fb164b342770089b787378a3f79529c36d2152))
|
|
213
|
+
- getStaticPaths shouldn’t have the url suffix
|
|
214
|
+
([0fc9e1c](https://github.com/ho-nl/m2-pwa/commit/0fc9e1cec78ba653e32de042fb60a3ca88eb494d))
|
|
215
|
+
- ignore md files from triggering version updates
|
|
216
|
+
([4f98392](https://github.com/ho-nl/m2-pwa/commit/4f9839250b3a32d3070da5290e5efcc5e2243fba))
|
|
217
|
+
- implement next-ui barrel imports
|
|
218
|
+
([75bea70](https://github.com/ho-nl/m2-pwa/commit/75bea703dba898f18a2a1dfa3243ebd0a4e6f0e1))
|
|
219
|
+
- remove conflicting files
|
|
220
|
+
([0c17ae4](https://github.com/ho-nl/m2-pwa/commit/0c17ae46be62b775ac83b35f11c532ce2d9401a3))
|
|
221
|
+
- remove magento-category package from magento-product solving a circular dependency
|
|
222
|
+
([7379e6e](https://github.com/ho-nl/m2-pwa/commit/7379e6ede4829392b35008c17743181d9cac0636))
|
|
223
|
+
- search page routes
|
|
224
|
+
([4161179](https://github.com/ho-nl/m2-pwa/commit/4161179aaf2ecbc0fde0efbba891a7b85524e283))
|
|
225
|
+
- since all links are of next/link we need to add passHref for custom components
|
|
226
|
+
([16fb931](https://github.com/ho-nl/m2-pwa/commit/16fb93100d367203ea79bb4f93357221253f2ecd))
|
|
227
|
+
- solve issue if an attribute was named ‘size’
|
|
228
|
+
([dab088e](https://github.com/ho-nl/m2-pwa/commit/dab088ed5f1a2916dc991a7d5c0b8d703a2ea3b7))
|
|
229
|
+
- spelling errors, wrong imports
|
|
230
|
+
([01cb889](https://github.com/ho-nl/m2-pwa/commit/01cb889513d69ce0555ac7aaa1a37702d75b0a0d))
|
|
231
|
+
- update magento-product imports
|
|
232
|
+
([63621b4](https://github.com/ho-nl/m2-pwa/commit/63621b44be7149014f4a5af8ac87ad1c4b0327be))
|
|
233
|
+
- word-break for category hero nav
|
|
234
|
+
([be47595](https://github.com/ho-nl/m2-pwa/commit/be4759519a23889950430d60a9264d9806df552c))
|
|
235
|
+
- yarn workspace packages hot reload
|
|
236
|
+
([d03fc9f](https://github.com/ho-nl/m2-pwa/commit/d03fc9fdda3486476761786f2b56a934cc92befc))
|
|
197
237
|
|
|
198
238
|
### Features
|
|
199
239
|
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
240
|
+
- add barrel file for magento-category
|
|
241
|
+
([c5ba8c9](https://github.com/ho-nl/m2-pwa/commit/c5ba8c98cbb8192f1c1c85242ff6efa83b1fbdcc))
|
|
242
|
+
- add getFilterTypes to shared client, faster generation
|
|
243
|
+
([beccfde](https://github.com/ho-nl/m2-pwa/commit/beccfde6ebc8aaf6223f0e8b33fabf4f5039efed))
|
|
244
|
+
- add graphcms asset to category page
|
|
245
|
+
([a760f25](https://github.com/ho-nl/m2-pwa/commit/a760f2547485e56b1fd4ecb03dd3cfb0a1c4819e))
|
|
246
|
+
- animated filters
|
|
247
|
+
([846e233](https://github.com/ho-nl/m2-pwa/commit/846e233c9653821afbe9cfe7742dc42bb869a078))
|
|
248
|
+
- better 404 handling and simplified getStaticProps
|
|
249
|
+
([321ace1](https://github.com/ho-nl/m2-pwa/commit/321ace1850642ee3eddfa674c37e6fca8adcdb74))
|
|
250
|
+
- canonical urls using abstract page meta component
|
|
251
|
+
([7d52cfc](https://github.com/ho-nl/m2-pwa/commit/7d52cfc76af2766dedf883b1e3fa5a5101eca823))
|
|
252
|
+
- category navigation
|
|
253
|
+
([00d1997](https://github.com/ho-nl/m2-pwa/commit/00d199741bb1ab266900869d27ac7251841aaf94))
|
|
254
|
+
- created stable layout for category filters
|
|
255
|
+
([08d9351](https://github.com/ho-nl/m2-pwa/commit/08d9351dac5c9ede864ff336a60d758875d8efe4))
|
|
256
|
+
- created stacked-pages package
|
|
257
|
+
([d86008e](https://github.com/ho-nl/m2-pwa/commit/d86008ee659ccb25b194a41d624b394a1ddbd088))
|
|
258
|
+
- data agnostic animated header
|
|
259
|
+
([17047a6](https://github.com/ho-nl/m2-pwa/commit/17047a6d754494d9443c8f2e486cc232cf199c45))
|
|
260
|
+
- **framer-next-pages:** implemented the FullPageShell for the remaining pages
|
|
261
|
+
([88386b4](https://github.com/ho-nl/m2-pwa/commit/88386b4652abb7765d6e755c7fb7a3cb6285a0e7))
|
|
262
|
+
- **framer-scroller:** implemented the scroller on all pages
|
|
263
|
+
([73fb518](https://github.com/ho-nl/m2-pwa/commit/73fb518eff74edb2b3212e892b3d8cc2b088011b))
|
|
264
|
+
- **graphql:** introduced new graphql package that holds all generated files
|
|
265
|
+
([a3e7aa0](https://github.com/ho-nl/m2-pwa/commit/a3e7aa05540540533b5ced9a95f1f802ecbe499f))
|
|
266
|
+
- i18n routing added (/ and /fr for demo)
|
|
267
|
+
([bb3b339](https://github.com/ho-nl/m2-pwa/commit/bb3b339fbc9fceddd264a891ad81f00327a241ae))
|
|
268
|
+
- **image:** introduced completely rewritten Image component
|
|
269
|
+
([e3413b3](https://github.com/ho-nl/m2-pwa/commit/e3413b3a57392d6571ea64cb8d9c8dca05ea31df))
|
|
270
|
+
- introduced magento-product-types package
|
|
271
|
+
([1a0932b](https://github.com/ho-nl/m2-pwa/commit/1a0932b5d882608dcf8fd2e3b17ee9868f5f5776))
|
|
272
|
+
- introduces framer-next-pages and framer-sheet to next-ui and soxbase package
|
|
273
|
+
([e04ad8a](https://github.com/ho-nl/m2-pwa/commit/e04ad8a94cd1fd5a7c5575c9db7916b6e8a88f16))
|
|
274
|
+
- **magento-graphql:** added core magentoTypePolicies
|
|
275
|
+
([bdf15d0](https://github.com/ho-nl/m2-pwa/commit/bdf15d0d3c04e88339a8385d76f3b1ab9589fde3))
|
|
276
|
+
- major performance refactor
|
|
277
|
+
([03f8e2f](https://github.com/ho-nl/m2-pwa/commit/03f8e2fa16ef919bd6bd6eadd36922d0245ed960))
|
|
278
|
+
- next.js 11
|
|
279
|
+
([7d61407](https://github.com/ho-nl/m2-pwa/commit/7d614075a778f488045034f74be4f75b93f63c43))
|
|
280
|
+
- **playwright:** added new playwright package to enable browser testing
|
|
281
|
+
([6f49ec7](https://github.com/ho-nl/m2-pwa/commit/6f49ec7595563775b96ebf21c27e39da1282e8d9))
|
|
282
|
+
- remove wrapper div from ScrollSnapSlider
|
|
283
|
+
([476add8](https://github.com/ho-nl/m2-pwa/commit/476add8db64811f2c7e3fc482487967cd7573cf6))
|
|
284
|
+
- renamed all packages to use [@graphcommerce](https://github.com/graphcommerce) instead of
|
|
285
|
+
[@reachdigital](https://github.com/reachdigital)
|
|
286
|
+
([491e4ce](https://github.com/ho-nl/m2-pwa/commit/491e4cec9a2686472dac36b79f999257c0811ffe))
|
|
287
|
+
- upgrade to node 14
|
|
288
|
+
([d079a75](https://github.com/ho-nl/m2-pwa/commit/d079a751e9bfd8dc7f5009d2c9f31c336a0c96ab))
|
|
289
|
+
- upgraded to nextjs 11
|
|
290
|
+
([0053beb](https://github.com/ho-nl/m2-pwa/commit/0053beb7ef597c190add7264256a0eaec35868da))
|
|
291
|
+
- video support for CategoryHeroNav
|
|
292
|
+
([e24fe60](https://github.com/ho-nl/m2-pwa/commit/e24fe600f776aaf41735178472b2d1343c5252e6))
|
|
227
293
|
|
|
228
294
|
### Reverts
|
|
229
295
|
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
296
|
+
- Revert "chore: upgrade @apollo/client"
|
|
297
|
+
([55ff24e](https://github.com/ho-nl/m2-pwa/commit/55ff24ede0e56c85b8095edadadd1ec5e0b1b8d2))
|
|
233
298
|
|
|
234
299
|
## 2.0.8 (2020-10-28)
|
|
235
300
|
|
|
236
|
-
|
|
237
301
|
### Bug Fixes
|
|
238
302
|
|
|
239
|
-
|
|
240
|
-
|
|
303
|
+
- make sure themes extensions are found
|
|
304
|
+
([5aa18db](https://github.com/ho-nl/m2-pwa/commit/5aa18db514fd2e2f50681367e39523f8e742ece0))
|
|
241
305
|
|
|
242
306
|
### Features
|
|
243
307
|
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
308
|
+
- added generated graphql.ts files
|
|
309
|
+
([3e44415](https://github.com/ho-nl/m2-pwa/commit/3e44415b018e74b502e9e98479aa5e84041f337d))
|
|
310
|
+
- split into packages
|
|
311
|
+
([2ee7fd6](https://github.com/ho-nl/m2-pwa/commit/2ee7fd6c0056f467d114f04d92c6c0ddf622d151))
|
|
247
312
|
|
|
248
313
|
### BREAKING CHANGES
|
|
249
314
|
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
315
|
+
- huge folder structure refactor, please read README to reinstall
|
|
255
316
|
|
|
256
317
|
# Change Log
|
|
257
318
|
|
|
@@ -290,8 +351,7 @@ All notable changes to this project will be documented in this file. See
|
|
|
290
351
|
|
|
291
352
|
### Bug Fixes
|
|
292
353
|
|
|
293
|
-
- remove magento-category package from magento-product solving a circular
|
|
294
|
-
dependency
|
|
354
|
+
- remove magento-category package from magento-product solving a circular dependency
|
|
295
355
|
([7379e6e](https://github.com/ho-nl/m2-pwa/commit/7379e6ede4829392b35008c17743181d9cac0636))
|
|
296
356
|
|
|
297
357
|
# [2.101.0](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/magento-category@2.100.18...@graphcommerce/magento-category@2.101.0) (2021-07-26)
|
|
@@ -1,67 +1,42 @@
|
|
|
1
|
-
import { cloneDeep } from '@apollo/client/utilities'
|
|
2
1
|
import { Scroller, ScrollerProvider } from '@graphcommerce/framer-scroller'
|
|
2
|
+
import { cloneDeep } from '@graphcommerce/graphql'
|
|
3
3
|
import { ProductListLink, ProductListParams } from '@graphcommerce/magento-product'
|
|
4
|
-
import {
|
|
5
|
-
import {
|
|
6
|
-
import React from 'react'
|
|
4
|
+
import { extendableComponent } from '@graphcommerce/next-ui'
|
|
5
|
+
import { Box, SxProps, Theme } from '@mui/material'
|
|
7
6
|
import { CategoryChildrenFragment } from './CategoryChildren.gql'
|
|
8
7
|
|
|
9
|
-
const useStyles = makeStyles(
|
|
10
|
-
(theme: Theme) => ({
|
|
11
|
-
container: {
|
|
12
|
-
display: 'flex',
|
|
13
|
-
justifyContent: 'center',
|
|
14
|
-
marginBottom: theme.spacings.sm,
|
|
15
|
-
},
|
|
16
|
-
scroller: {
|
|
17
|
-
gridAutoColumns: `max-content`,
|
|
18
|
-
},
|
|
19
|
-
link: {
|
|
20
|
-
whiteSpace: 'nowrap',
|
|
21
|
-
display: 'block',
|
|
22
|
-
marginRight: `${theme.spacings.xxs}`,
|
|
23
|
-
marginLeft: `${theme.spacings.xxs}`,
|
|
24
|
-
...theme.typography.h6,
|
|
25
|
-
position: 'relative',
|
|
26
|
-
paddingBottom: 8,
|
|
27
|
-
'&:before': {
|
|
28
|
-
content: '""',
|
|
29
|
-
width: 40,
|
|
30
|
-
height: 2,
|
|
31
|
-
background: theme.palette.primary.main,
|
|
32
|
-
position: 'absolute',
|
|
33
|
-
left: 0,
|
|
34
|
-
right: 0,
|
|
35
|
-
margin: '0 auto',
|
|
36
|
-
opacity: 0,
|
|
37
|
-
transition: 'opacity .2s ease, bottom .2s ease',
|
|
38
|
-
bottom: 0,
|
|
39
|
-
},
|
|
40
|
-
'&:hover': {
|
|
41
|
-
'&:before': {
|
|
42
|
-
opacity: 1,
|
|
43
|
-
bottom: 5,
|
|
44
|
-
},
|
|
45
|
-
},
|
|
46
|
-
},
|
|
47
|
-
}),
|
|
48
|
-
{ name: 'CategoryChildren' },
|
|
49
|
-
)
|
|
50
|
-
|
|
51
8
|
type CategoryChildrenProps = Omit<CategoryChildrenFragment, 'uid'> & {
|
|
52
9
|
params: ProductListParams
|
|
53
|
-
|
|
10
|
+
sx?: SxProps<Theme>
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
const name = 'CategoryChildren' as const
|
|
14
|
+
const parts = ['container', 'scroller', 'link'] as const
|
|
15
|
+
const { classes } = extendableComponent(name, parts)
|
|
54
16
|
|
|
55
17
|
export default function CategoryChildren(props: CategoryChildrenProps) {
|
|
56
|
-
const { children, params } = props
|
|
57
|
-
const classes = useStyles(props)
|
|
18
|
+
const { children, params, sx = [] } = props
|
|
58
19
|
|
|
59
20
|
if (!children || children.length === 0) return null
|
|
60
21
|
|
|
61
22
|
return (
|
|
62
23
|
<ScrollerProvider scrollSnapAlign='none'>
|
|
63
|
-
<
|
|
64
|
-
|
|
24
|
+
<Box
|
|
25
|
+
className={classes.container}
|
|
26
|
+
sx={[
|
|
27
|
+
(theme) => ({
|
|
28
|
+
display: 'flex',
|
|
29
|
+
justifyContent: 'center',
|
|
30
|
+
marginBottom: theme.spacings.sm,
|
|
31
|
+
}),
|
|
32
|
+
...(Array.isArray(sx) ? sx : [sx]),
|
|
33
|
+
]}
|
|
34
|
+
>
|
|
35
|
+
<Scroller
|
|
36
|
+
className={classes.scroller}
|
|
37
|
+
hideScrollbar
|
|
38
|
+
sx={{ gridAutoColumns: `max-content` }}
|
|
39
|
+
>
|
|
65
40
|
{children.map((cat) => {
|
|
66
41
|
if (!cat?.url_path || !cat.name) return null
|
|
67
42
|
|
|
@@ -76,13 +51,41 @@ export default function CategoryChildren(props: CategoryChildrenProps) {
|
|
|
76
51
|
color='inherit'
|
|
77
52
|
{...linkParams}
|
|
78
53
|
className={classes.link}
|
|
54
|
+
sx={(theme) => ({
|
|
55
|
+
whiteSpace: 'nowrap',
|
|
56
|
+
display: 'block',
|
|
57
|
+
marginRight: `${theme.spacings.xxs}`,
|
|
58
|
+
marginLeft: `${theme.spacings.xxs}`,
|
|
59
|
+
typography: 'h6',
|
|
60
|
+
position: 'relative',
|
|
61
|
+
paddingBottom: '8px',
|
|
62
|
+
'&:before': {
|
|
63
|
+
content: '""',
|
|
64
|
+
width: 40,
|
|
65
|
+
height: 2,
|
|
66
|
+
background: theme.palette.primary.main,
|
|
67
|
+
position: 'absolute',
|
|
68
|
+
left: 0,
|
|
69
|
+
right: 0,
|
|
70
|
+
margin: '0 auto',
|
|
71
|
+
opacity: 0,
|
|
72
|
+
transition: 'opacity .2s ease, bottom .2s ease',
|
|
73
|
+
bottom: 0,
|
|
74
|
+
},
|
|
75
|
+
'&:hover': {
|
|
76
|
+
'&:before': {
|
|
77
|
+
opacity: 1,
|
|
78
|
+
bottom: 5,
|
|
79
|
+
},
|
|
80
|
+
},
|
|
81
|
+
})}
|
|
79
82
|
>
|
|
80
83
|
{cat.name}
|
|
81
84
|
</ProductListLink>
|
|
82
85
|
)
|
|
83
86
|
})}
|
|
84
87
|
</Scroller>
|
|
85
|
-
</
|
|
88
|
+
</Box>
|
|
86
89
|
</ScrollerProvider>
|
|
87
90
|
)
|
|
88
91
|
}
|
|
@@ -1,37 +1,38 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
3
|
-
import React from 'react'
|
|
1
|
+
import { extendableComponent } from '@graphcommerce/next-ui'
|
|
2
|
+
import { Box, SxProps, Theme } from '@mui/material'
|
|
4
3
|
import { CategoryDescriptionFragment } from './CategoryDescription.gql'
|
|
5
4
|
|
|
6
|
-
type CategoryDescriptionProps = Omit<CategoryDescriptionFragment, 'uid'> &
|
|
7
|
-
JSX.IntrinsicElements['div'] &
|
|
8
|
-
UseStyles<typeof useStyles>
|
|
5
|
+
type CategoryDescriptionProps = Omit<CategoryDescriptionFragment, 'uid'> & { sx?: SxProps<Theme> }
|
|
9
6
|
|
|
10
|
-
const
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
gridArea: 'description',
|
|
14
|
-
margin: `0 auto ${theme.spacings.sm}`,
|
|
15
|
-
padding: `0 ${theme.page.horizontal}`,
|
|
16
|
-
textAlign: 'center',
|
|
17
|
-
[theme.breakpoints.up('md')]: {
|
|
18
|
-
maxWidth: '50%',
|
|
19
|
-
},
|
|
20
|
-
[theme.breakpoints.up('xl')]: {
|
|
21
|
-
maxWidth: '30%',
|
|
22
|
-
},
|
|
23
|
-
...theme.typography.subtitle1,
|
|
24
|
-
},
|
|
25
|
-
}),
|
|
26
|
-
{ name: 'CategoryDescription' },
|
|
27
|
-
)
|
|
7
|
+
const cmpName = 'CategoryDescription' as const
|
|
8
|
+
const parts = ['root'] as const
|
|
9
|
+
const { classes } = extendableComponent(cmpName, parts)
|
|
28
10
|
|
|
29
11
|
export default function CategoryDescription(props: CategoryDescriptionProps) {
|
|
30
|
-
const { name, description, display_mode, ...divProps } = props
|
|
31
|
-
const classes = useStyles(props)
|
|
12
|
+
const { name, description, display_mode, sx = [], ...divProps } = props
|
|
32
13
|
|
|
33
14
|
return description ? (
|
|
34
15
|
// eslint-disable-next-line react/no-danger
|
|
35
|
-
<
|
|
16
|
+
<Box
|
|
17
|
+
{...divProps}
|
|
18
|
+
className={classes.root}
|
|
19
|
+
dangerouslySetInnerHTML={{ __html: description }}
|
|
20
|
+
sx={[
|
|
21
|
+
(theme) => ({
|
|
22
|
+
gridArea: 'description',
|
|
23
|
+
margin: `0 auto ${theme.spacings.sm}`,
|
|
24
|
+
padding: `0 ${theme.page.horizontal}`,
|
|
25
|
+
textAlign: 'center',
|
|
26
|
+
[theme.breakpoints.up('md')]: {
|
|
27
|
+
maxWidth: '50%',
|
|
28
|
+
},
|
|
29
|
+
[theme.breakpoints.up('xl')]: {
|
|
30
|
+
maxWidth: '30%',
|
|
31
|
+
},
|
|
32
|
+
typography: 'subtitle1',
|
|
33
|
+
}),
|
|
34
|
+
...(Array.isArray(sx) ? sx : [sx]),
|
|
35
|
+
]}
|
|
36
|
+
/>
|
|
36
37
|
) : null
|
|
37
38
|
}
|
|
@@ -1,104 +1,90 @@
|
|
|
1
1
|
import { ProductListLink } from '@graphcommerce/magento-product'
|
|
2
|
-
import { responsiveVal, Row } from '@graphcommerce/next-ui'
|
|
3
|
-
import {
|
|
2
|
+
import { responsiveVal, Row, extendableComponent } from '@graphcommerce/next-ui'
|
|
3
|
+
import { Box, SxProps, Theme, Typography } from '@mui/material'
|
|
4
4
|
import React from 'react'
|
|
5
5
|
import { CategoryHeroNavFragment } from './CategoryHeroNav.gql'
|
|
6
6
|
|
|
7
|
-
|
|
8
|
-
(theme: Theme) => ({
|
|
9
|
-
wrapper: {
|
|
10
|
-
display: 'grid',
|
|
11
|
-
gridTemplateColumns: '1fr',
|
|
12
|
-
gridTemplateAreas: `
|
|
13
|
-
"title"
|
|
14
|
-
"categories"
|
|
15
|
-
"placeholder"
|
|
16
|
-
`,
|
|
17
|
-
gridTemplateRows: 'auto auto 1fr',
|
|
18
|
-
borderBottom: `1px solid ${theme.palette.divider}`,
|
|
19
|
-
marginBottom: theme.spacings.xxl,
|
|
20
|
-
paddingBottom: theme.page.vertical,
|
|
21
|
-
[theme.breakpoints.up('md')]: {
|
|
22
|
-
rowGap: theme.spacings.md,
|
|
23
|
-
width: '100%',
|
|
24
|
-
paddingRight: theme.page.horizontal,
|
|
25
|
-
},
|
|
26
|
-
},
|
|
27
|
-
categories: {
|
|
28
|
-
gridArea: 'categories',
|
|
29
|
-
display: 'grid',
|
|
30
|
-
gridColumnGap: theme.spacings.xxl,
|
|
31
|
-
gridRowGap: theme.spacings.lg,
|
|
32
|
-
height: 'min-content',
|
|
33
|
-
maxWidth: '80vw',
|
|
34
|
-
justifySelf: 'center',
|
|
35
|
-
alignSelf: 'start',
|
|
36
|
-
gridTemplateColumns: '1fr 1fr',
|
|
37
|
-
marginBottom: theme.spacings.lg,
|
|
38
|
-
[theme.breakpoints.up('md')]: {
|
|
39
|
-
margin: 0,
|
|
40
|
-
gridColumnGap: theme.spacings.md,
|
|
41
|
-
gridRowGap: theme.spacings.md,
|
|
42
|
-
maxWidth: '100vw',
|
|
43
|
-
width: '100%',
|
|
44
|
-
justifySelf: 'start',
|
|
45
|
-
},
|
|
46
|
-
},
|
|
47
|
-
title: {
|
|
48
|
-
gridArea: 'title',
|
|
49
|
-
alignSelf: 'center',
|
|
50
|
-
[theme.breakpoints.up('md')]: {
|
|
51
|
-
alignSelf: 'end',
|
|
52
|
-
},
|
|
53
|
-
},
|
|
54
|
-
placeholder: {
|
|
55
|
-
gridArea: 'placeholder',
|
|
56
|
-
minHeight: '40vh',
|
|
57
|
-
overflow: 'hidden',
|
|
58
|
-
display: 'flex',
|
|
59
|
-
'& > div': {
|
|
60
|
-
display: 'flex',
|
|
61
|
-
},
|
|
62
|
-
'& video': {
|
|
63
|
-
objectFit: 'cover',
|
|
64
|
-
width: '100%',
|
|
65
|
-
borderRadius: responsiveVal(theme.shape.borderRadius * 2, theme.shape.borderRadius * 3),
|
|
66
|
-
},
|
|
67
|
-
},
|
|
68
|
-
[theme.breakpoints.up('md')]: {
|
|
69
|
-
placeholder: {
|
|
70
|
-
minHeight: '80vh',
|
|
71
|
-
},
|
|
72
|
-
wrapper: {
|
|
73
|
-
paddingTop: 0,
|
|
74
|
-
gridColumnGap: 0,
|
|
75
|
-
display: 'grid',
|
|
76
|
-
gridTemplateAreas: `
|
|
77
|
-
". title . placeholder"
|
|
78
|
-
". categories . placeholder"
|
|
79
|
-
`,
|
|
80
|
-
gridTemplateColumns: '1fr 4.6fr 0.4fr 8fr',
|
|
81
|
-
gridTemplateRows: '0.3fr 0.7fr',
|
|
82
|
-
},
|
|
83
|
-
},
|
|
84
|
-
}),
|
|
85
|
-
{ name: 'CategoryHeroNav' },
|
|
86
|
-
)
|
|
87
|
-
|
|
88
|
-
type Props = {
|
|
7
|
+
export type CategoryHeroNavProps = {
|
|
89
8
|
title: React.ReactNode
|
|
90
9
|
asset?: React.ReactNode
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
type CategoryHeroNavProps = Props & CategoryHeroNavFragment
|
|
10
|
+
sx?: SxProps<Theme>
|
|
11
|
+
} & CategoryHeroNavFragment
|
|
94
12
|
|
|
95
|
-
|
|
96
|
-
|
|
13
|
+
const cmpName = 'CategoryHeroNav' as const
|
|
14
|
+
const parts = ['wrapper', 'categories', 'title', 'placeholder'] as const
|
|
15
|
+
const { classes } = extendableComponent(cmpName, parts)
|
|
97
16
|
|
|
17
|
+
export default function CategoryHeroNav({ children, title, asset, sx = [] }: CategoryHeroNavProps) {
|
|
98
18
|
return (
|
|
99
|
-
<Row
|
|
100
|
-
|
|
101
|
-
|
|
19
|
+
<Row
|
|
20
|
+
className={classes.wrapper}
|
|
21
|
+
maxWidth={false}
|
|
22
|
+
sx={[
|
|
23
|
+
(theme) => ({
|
|
24
|
+
display: 'grid',
|
|
25
|
+
gridTemplateColumns: '1fr',
|
|
26
|
+
gridTemplateAreas: `
|
|
27
|
+
"title"
|
|
28
|
+
"categories"
|
|
29
|
+
"placeholder"
|
|
30
|
+
`,
|
|
31
|
+
gridTemplateRows: 'auto auto 1fr',
|
|
32
|
+
borderBottom: `1px solid ${theme.palette.divider}`,
|
|
33
|
+
marginBottom: theme.spacings.xxl,
|
|
34
|
+
paddingBottom: theme.page.vertical,
|
|
35
|
+
[theme.breakpoints.up('md')]: {
|
|
36
|
+
rowGap: theme.spacings.md,
|
|
37
|
+
width: '100%',
|
|
38
|
+
paddingRight: theme.page.horizontal,
|
|
39
|
+
paddingTop: 0,
|
|
40
|
+
gridColumnGap: 0,
|
|
41
|
+
display: 'grid',
|
|
42
|
+
gridTemplateAreas: `
|
|
43
|
+
". title . placeholder"
|
|
44
|
+
". categories . placeholder"
|
|
45
|
+
`,
|
|
46
|
+
gridTemplateColumns: '1fr 4.6fr 0.4fr 8fr',
|
|
47
|
+
gridTemplateRows: '0.3fr 0.7fr',
|
|
48
|
+
},
|
|
49
|
+
}),
|
|
50
|
+
...(Array.isArray(sx) ? sx : [sx]),
|
|
51
|
+
]}
|
|
52
|
+
>
|
|
53
|
+
<Box
|
|
54
|
+
className={classes.title}
|
|
55
|
+
sx={(theme) => ({
|
|
56
|
+
gridArea: 'title',
|
|
57
|
+
alignSelf: 'center',
|
|
58
|
+
[theme.breakpoints.up('md')]: {
|
|
59
|
+
alignSelf: 'end',
|
|
60
|
+
},
|
|
61
|
+
})}
|
|
62
|
+
>
|
|
63
|
+
{title}
|
|
64
|
+
</Box>
|
|
65
|
+
<Box
|
|
66
|
+
className={classes.categories}
|
|
67
|
+
sx={(theme) => ({
|
|
68
|
+
gridArea: 'categories',
|
|
69
|
+
display: 'grid',
|
|
70
|
+
gridColumnGap: theme.spacings.xxl,
|
|
71
|
+
gridRowGap: theme.spacings.lg,
|
|
72
|
+
height: 'min-content',
|
|
73
|
+
maxWidth: '80vw',
|
|
74
|
+
justifySelf: 'center',
|
|
75
|
+
alignSelf: 'start',
|
|
76
|
+
gridTemplateColumns: '1fr 1fr',
|
|
77
|
+
marginBottom: theme.spacings.lg,
|
|
78
|
+
[theme.breakpoints.up('md')]: {
|
|
79
|
+
margin: 0,
|
|
80
|
+
gridColumnGap: theme.spacings.md,
|
|
81
|
+
gridRowGap: theme.spacings.md,
|
|
82
|
+
maxWidth: '100vw',
|
|
83
|
+
width: '100%',
|
|
84
|
+
justifySelf: 'start',
|
|
85
|
+
},
|
|
86
|
+
})}
|
|
87
|
+
>
|
|
102
88
|
{children?.map((category) => {
|
|
103
89
|
if (!category?.url_path || !category.uid || !category.name) return null
|
|
104
90
|
return (
|
|
@@ -116,10 +102,29 @@ export default function CategoryHeroNav({ children, title, asset }: CategoryHero
|
|
|
116
102
|
</ProductListLink>
|
|
117
103
|
)
|
|
118
104
|
})}
|
|
119
|
-
</
|
|
120
|
-
<
|
|
121
|
-
|
|
122
|
-
|
|
105
|
+
</Box>
|
|
106
|
+
<Box
|
|
107
|
+
className={classes.placeholder}
|
|
108
|
+
sx={(theme) => ({
|
|
109
|
+
gridArea: 'placeholder',
|
|
110
|
+
minHeight: '40vh',
|
|
111
|
+
overflow: 'hidden',
|
|
112
|
+
display: 'flex',
|
|
113
|
+
'& > div': {
|
|
114
|
+
display: 'flex',
|
|
115
|
+
},
|
|
116
|
+
'& video': {
|
|
117
|
+
objectFit: 'cover',
|
|
118
|
+
width: '100%',
|
|
119
|
+
borderRadius: responsiveVal(theme.shape.borderRadius * 2, theme.shape.borderRadius * 3),
|
|
120
|
+
},
|
|
121
|
+
[theme.breakpoints.up('md')]: {
|
|
122
|
+
minHeight: '80vh',
|
|
123
|
+
},
|
|
124
|
+
})}
|
|
125
|
+
>
|
|
126
|
+
<Box>{asset}</Box>
|
|
127
|
+
</Box>
|
|
123
128
|
</Row>
|
|
124
129
|
)
|
|
125
130
|
}
|
|
@@ -1,31 +1,30 @@
|
|
|
1
1
|
import { LayoutTitle } from '@graphcommerce/next-ui'
|
|
2
|
-
import {
|
|
2
|
+
import { SxProps, Theme } from '@mui/material'
|
|
3
3
|
import React from 'react'
|
|
4
4
|
|
|
5
|
-
const useStyles = makeStyles(
|
|
6
|
-
(theme: Theme) => ({
|
|
7
|
-
container: {
|
|
8
|
-
justifyContent: 'center',
|
|
9
|
-
[theme.breakpoints.up('md')]: {
|
|
10
|
-
margin: 0,
|
|
11
|
-
alignItems: 'start',
|
|
12
|
-
justifyContent: 'end',
|
|
13
|
-
},
|
|
14
|
-
},
|
|
15
|
-
}),
|
|
16
|
-
{ name: 'CategoryHeroNavTitle' },
|
|
17
|
-
)
|
|
18
|
-
|
|
19
5
|
type CategoryHeroNavTitleProps = {
|
|
20
6
|
children: React.ReactNode
|
|
7
|
+
sx?: SxProps<Theme>
|
|
21
8
|
}
|
|
22
9
|
|
|
23
10
|
export default function CategoryHeroNavTitle(props: CategoryHeroNavTitleProps) {
|
|
24
|
-
const { children } = props
|
|
25
|
-
const classes = useStyles()
|
|
11
|
+
const { children, sx = [] } = props
|
|
26
12
|
|
|
27
13
|
return (
|
|
28
|
-
<LayoutTitle
|
|
14
|
+
<LayoutTitle
|
|
15
|
+
variant='h1'
|
|
16
|
+
sx={[
|
|
17
|
+
(theme) => ({
|
|
18
|
+
justifyContent: 'center',
|
|
19
|
+
[theme.breakpoints.up('md')]: {
|
|
20
|
+
margin: 0,
|
|
21
|
+
alignItems: 'start',
|
|
22
|
+
justifyContent: 'end',
|
|
23
|
+
},
|
|
24
|
+
}),
|
|
25
|
+
...(Array.isArray(sx) ? sx : [sx]),
|
|
26
|
+
]}
|
|
27
|
+
>
|
|
29
28
|
{children}
|
|
30
29
|
</LayoutTitle>
|
|
31
30
|
)
|
package/package.json
CHANGED
|
@@ -1,11 +1,10 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@graphcommerce/magento-category",
|
|
3
|
-
"
|
|
3
|
+
"homepage": "https://www.graphcommerce.org/",
|
|
4
|
+
"repository": "github:graphcommerce-org/graphcommerce",
|
|
5
|
+
"version": "4.0.2",
|
|
4
6
|
"sideEffects": false,
|
|
5
7
|
"prettier": "@graphcommerce/prettier-config-pwa",
|
|
6
|
-
"browserslist": [
|
|
7
|
-
"extends @graphcommerce/browserslist-config-pwa"
|
|
8
|
-
],
|
|
9
8
|
"eslintConfig": {
|
|
10
9
|
"extends": "@graphcommerce/eslint-config-pwa",
|
|
11
10
|
"parserOptions": {
|
|
@@ -13,26 +12,25 @@
|
|
|
13
12
|
}
|
|
14
13
|
},
|
|
15
14
|
"devDependencies": {
|
|
16
|
-
"@graphcommerce/
|
|
17
|
-
"@graphcommerce/
|
|
18
|
-
"@graphcommerce/
|
|
19
|
-
"@
|
|
20
|
-
"@playwright/test": "^1.17.1"
|
|
15
|
+
"@graphcommerce/eslint-config-pwa": "^4.0.2",
|
|
16
|
+
"@graphcommerce/prettier-config-pwa": "^4.0.1",
|
|
17
|
+
"@graphcommerce/typescript-config-pwa": "^4.0.1",
|
|
18
|
+
"@playwright/test": "^1.19.1"
|
|
21
19
|
},
|
|
22
20
|
"dependencies": {
|
|
23
|
-
"@
|
|
24
|
-
"@graphcommerce/
|
|
25
|
-
"@graphcommerce/
|
|
26
|
-
"@graphcommerce/
|
|
27
|
-
"@graphcommerce/magento-
|
|
28
|
-
"@graphcommerce/
|
|
29
|
-
"
|
|
30
|
-
"@lingui/macro": "^3.13.0",
|
|
31
|
-
"@material-ui/core": "^4.12.3",
|
|
32
|
-
"next": "^12.0.7",
|
|
33
|
-
"react": "^17.0.2",
|
|
34
|
-
"react-dom": "^17.0.2",
|
|
35
|
-
"type-fest": "^2.8.0"
|
|
21
|
+
"@graphcommerce/framer-scroller": "^2.0.2",
|
|
22
|
+
"@graphcommerce/graphql": "^3.0.2",
|
|
23
|
+
"@graphcommerce/image": "^3.0.2",
|
|
24
|
+
"@graphcommerce/magento-product": "^4.0.2",
|
|
25
|
+
"@graphcommerce/magento-store": "^4.0.2",
|
|
26
|
+
"@graphcommerce/next-ui": "^4.1.1",
|
|
27
|
+
"type-fest": "^2.11.2"
|
|
36
28
|
},
|
|
37
|
-
"
|
|
29
|
+
"peerDependencies": {
|
|
30
|
+
"@lingui/macro": "^3.13.2",
|
|
31
|
+
"@mui/material": "^5.4.1",
|
|
32
|
+
"next": "^12.0.10",
|
|
33
|
+
"react": "^17.0.2",
|
|
34
|
+
"react-dom": "^17.0.2"
|
|
35
|
+
}
|
|
38
36
|
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { ApolloClient, NormalizedCacheObject } from '@
|
|
1
|
+
import { ApolloClient, NormalizedCacheObject } from '@graphcommerce/graphql'
|
|
2
2
|
import { StoreConfigDocument } from '@graphcommerce/magento-store'
|
|
3
3
|
import { GetStaticPathsResult } from 'next'
|
|
4
4
|
import {
|