@graphcommerce/magento-search 3.5.45 → 4.0.1
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 +145 -147
- package/CategorySearchResult/index.tsx +33 -43
- package/NoSearchResults/index.tsx +26 -22
- package/SearchButton/index.tsx +31 -31
- package/SearchDivider/index.tsx +7 -10
- package/SearchForm/index.tsx +34 -32
- package/package.json +15 -19
package/CHANGELOG.md
CHANGED
|
@@ -1,261 +1,259 @@
|
|
|
1
1
|
# Change Log
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
|
-
|
|
6
|
-
## [3.5.40](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/magento-search@3.5.39...@graphcommerce/magento-search@3.5.40) (2022-01-20)
|
|
3
|
+
## 4.0.1
|
|
7
4
|
|
|
5
|
+
### Patch Changes
|
|
8
6
|
|
|
9
|
-
|
|
7
|
+
- [`0cbaa878b`](https://github.com/ho-nl/m2-pwa/commit/0cbaa878b8a844d5abbeb1797b625a33130e6514)
|
|
8
|
+
Thanks [@paales](https://github.com/paales)! - Added homepage and repository package.json files,
|
|
9
|
+
so that the packages link to back to the website and repository
|
|
10
|
+
- Updated dependencies
|
|
11
|
+
[[`0cbaa878b`](https://github.com/ho-nl/m2-pwa/commit/0cbaa878b8a844d5abbeb1797b625a33130e6514)]:
|
|
12
|
+
- @graphcommerce/graphql@3.0.1
|
|
13
|
+
- @graphcommerce/image@3.0.1
|
|
14
|
+
- @graphcommerce/next-ui@4.0.1
|
|
15
|
+
- @graphcommerce/react-hook-form@3.0.1
|
|
10
16
|
|
|
11
|
-
|
|
17
|
+
## 4.0.0
|
|
12
18
|
|
|
19
|
+
### Major Changes
|
|
13
20
|
|
|
21
|
+
- [#1258](https://github.com/ho-nl/m2-pwa/pull/1258)
|
|
22
|
+
[`ad36382a4`](https://github.com/ho-nl/m2-pwa/commit/ad36382a4d55d83d9e47b7eb6a02671a2a631a05)
|
|
23
|
+
Thanks [@paales](https://github.com/paales)! - Upgraded to Material UI 5
|
|
14
24
|
|
|
25
|
+
### Patch Changes
|
|
15
26
|
|
|
27
|
+
- Updated dependencies
|
|
28
|
+
[[`ad36382a4`](https://github.com/ho-nl/m2-pwa/commit/ad36382a4d55d83d9e47b7eb6a02671a2a631a05)]:
|
|
29
|
+
- @graphcommerce/graphql@3.0.0
|
|
30
|
+
- @graphcommerce/image@3.0.0
|
|
31
|
+
- @graphcommerce/next-ui@4.0.0
|
|
32
|
+
- @graphcommerce/react-hook-form@3.0.0
|
|
16
33
|
|
|
17
|
-
|
|
34
|
+
All notable changes to this project will be documented in this file. See
|
|
35
|
+
[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
18
36
|
|
|
37
|
+
## [3.5.40](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/magento-search@3.5.39...@graphcommerce/magento-search@3.5.40) (2022-01-20)
|
|
19
38
|
|
|
20
39
|
### Bug Fixes
|
|
21
40
|
|
|
22
|
-
|
|
23
|
-
|
|
41
|
+
- search result label translation
|
|
42
|
+
([7e14ff5](https://github.com/ho-nl/m2-pwa/commit/7e14ff5548d86bc6b4f7afd51c259c0b833878f7))
|
|
24
43
|
|
|
44
|
+
## [3.5.39](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/magento-search@3.5.38...@graphcommerce/magento-search@3.5.39) (2022-01-20)
|
|
25
45
|
|
|
46
|
+
### Bug Fixes
|
|
26
47
|
|
|
48
|
+
- search result label
|
|
49
|
+
([a55fdc0](https://github.com/ho-nl/m2-pwa/commit/a55fdc07e3aeb57d3b3a2cb0378ecb227ebf23a2))
|
|
27
50
|
|
|
28
51
|
## [3.5.8](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/magento-search@3.5.7...@graphcommerce/magento-search@3.5.8) (2021-12-03)
|
|
29
52
|
|
|
30
|
-
|
|
31
53
|
### Bug Fixes
|
|
32
54
|
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
55
|
+
- search page
|
|
56
|
+
([85cf721](https://github.com/ho-nl/m2-pwa/commit/85cf72130bce4c3d2c392a3745adf05bca8618b1))
|
|
38
57
|
|
|
39
58
|
## [3.5.5](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/magento-search@3.5.4...@graphcommerce/magento-search@3.5.5) (2021-12-01)
|
|
40
59
|
|
|
41
|
-
|
|
42
60
|
### Bug Fixes
|
|
43
61
|
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
62
|
+
- ios zoom bug when using search. Fontsize should always be > 16
|
|
63
|
+
([22abcd4](https://github.com/ho-nl/m2-pwa/commit/22abcd499b152448b3c38f84325debe07d2b9a68))
|
|
49
64
|
|
|
50
65
|
## [3.5.4](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/magento-search@3.5.3...@graphcommerce/magento-search@3.5.4) (2021-11-27)
|
|
51
66
|
|
|
52
|
-
|
|
53
67
|
### Bug Fixes
|
|
54
68
|
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
69
|
+
- replace shadow with border
|
|
70
|
+
([56b2078](https://github.com/ho-nl/m2-pwa/commit/56b20786920c5c73faf35c8fbde425c01a88f411))
|
|
60
71
|
|
|
61
72
|
# [3.5.0](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/magento-search@3.4.20...@graphcommerce/magento-search@3.5.0) (2021-11-12)
|
|
62
73
|
|
|
63
|
-
|
|
64
74
|
### Features
|
|
65
75
|
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
76
|
+
- added tons of translations
|
|
77
|
+
([9bb0ac7](https://github.com/ho-nl/m2-pwa/commit/9bb0ac709b58df6ea6141e92e4923a5ca9ae2963))
|
|
71
78
|
|
|
72
79
|
## [3.4.20](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/magento-search@3.4.19...@graphcommerce/magento-search@3.4.20) (2021-11-12)
|
|
73
80
|
|
|
74
|
-
|
|
75
81
|
### Bug Fixes
|
|
76
82
|
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
83
|
+
- searchButton styling
|
|
84
|
+
([846e0cd](https://github.com/ho-nl/m2-pwa/commit/846e0cdb76eec7c5baf5fbfc4c501f99ebe59bf5))
|
|
82
85
|
|
|
83
86
|
## [3.4.19](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/magento-search@3.4.18...@graphcommerce/magento-search@3.4.19) (2021-11-12)
|
|
84
87
|
|
|
85
|
-
|
|
86
88
|
### Bug Fixes
|
|
87
89
|
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
90
|
+
- **search-button:** spacings
|
|
91
|
+
([ccb7274](https://github.com/ho-nl/m2-pwa/commit/ccb727444a57941e22f14dff15ce20101cbc160c))
|
|
93
92
|
|
|
94
93
|
## [3.4.16](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/magento-search@3.4.15...@graphcommerce/magento-search@3.4.16) (2021-11-09)
|
|
95
94
|
|
|
96
|
-
|
|
97
95
|
### Bug Fixes
|
|
98
96
|
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
97
|
+
- restyle menu to h4
|
|
98
|
+
([642e166](https://github.com/ho-nl/m2-pwa/commit/642e16635dc06f38bed91ffd1a374922ac70439b))
|
|
99
|
+
- **search-button:** add label for accessibility score
|
|
100
|
+
([1871e5b](https://github.com/ho-nl/m2-pwa/commit/1871e5b0b264ae4c98ebf3af1d074bb23d4dbbd8))
|
|
105
101
|
|
|
106
102
|
## [3.4.7](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/magento-search@3.4.6...@graphcommerce/magento-search@3.4.7) (2021-11-03)
|
|
107
103
|
|
|
108
|
-
|
|
109
104
|
### Bug Fixes
|
|
110
105
|
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
106
|
+
- various accessibility improvements
|
|
107
|
+
([47481a9](https://github.com/ho-nl/m2-pwa/commit/47481a9a882ba87968de6dd797557b0b275d75fb))
|
|
116
108
|
|
|
117
109
|
# [3.4.0](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/magento-search@3.3.5...@graphcommerce/magento-search@3.4.0) (2021-11-02)
|
|
118
110
|
|
|
119
|
-
|
|
120
111
|
### Bug Fixes
|
|
121
112
|
|
|
122
|
-
|
|
123
|
-
|
|
113
|
+
- darkMode
|
|
114
|
+
([c7573de](https://github.com/ho-nl/m2-pwa/commit/c7573de6bb80643b26931c35ac61735539e7fbf0))
|
|
124
115
|
|
|
125
116
|
### Features
|
|
126
117
|
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
118
|
+
- darkTheme
|
|
119
|
+
([968f4f1](https://github.com/ho-nl/m2-pwa/commit/968f4f1360417bf7daa36454c19e6bc5cf53ae90))
|
|
132
120
|
|
|
133
121
|
## [3.3.1](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/magento-search@3.3.0...@graphcommerce/magento-search@3.3.1) (2021-10-28)
|
|
134
122
|
|
|
135
|
-
|
|
136
123
|
### Bug Fixes
|
|
137
124
|
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
125
|
+
- External SVG's can't have alt tags
|
|
126
|
+
([1b1414a](https://github.com/ho-nl/m2-pwa/commit/1b1414a782d55d3acf7b0e6bcaa50f2ad5f18f39))
|
|
143
127
|
|
|
144
128
|
# [3.3.0](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/magento-search@3.2.2...@graphcommerce/magento-search@3.3.0) (2021-10-28)
|
|
145
129
|
|
|
146
|
-
|
|
147
130
|
### Bug Fixes
|
|
148
131
|
|
|
149
|
-
|
|
150
|
-
|
|
132
|
+
- update SvgImage to SvgImageSimple
|
|
133
|
+
([f116543](https://github.com/ho-nl/m2-pwa/commit/f116543730853fa9782abff0ccacee7032e85789))
|
|
151
134
|
|
|
152
135
|
### Features
|
|
153
136
|
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
137
|
+
- dynamic icons, update SvgImage uses to SvgImageSimple
|
|
138
|
+
([3d3cc0e](https://github.com/ho-nl/m2-pwa/commit/3d3cc0e0336fcde1cce6ba19705f82c1edf9bfc6))
|
|
139
|
+
- mobile menu styling
|
|
140
|
+
([3cc3085](https://github.com/ho-nl/m2-pwa/commit/3cc308585d4ded68d2ac8ebf97f96288424ee914))
|
|
160
141
|
|
|
161
142
|
# [3.2.0](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/magento-search@3.1.12...@graphcommerce/magento-search@3.2.0) (2021-10-27)
|
|
162
143
|
|
|
163
|
-
|
|
164
144
|
### Features
|
|
165
145
|
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
146
|
+
- **nextjs:** upgraded to nextjs 12
|
|
147
|
+
([9331bc8](https://github.com/ho-nl/m2-pwa/commit/9331bc801f6419522115cc47d291d49d608d5a90))
|
|
171
148
|
|
|
172
149
|
# [3.1.0](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/magento-search@3.0.18...@graphcommerce/magento-search@3.1.0) (2021-10-13)
|
|
173
150
|
|
|
174
|
-
|
|
175
151
|
### Features
|
|
176
152
|
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
153
|
+
- allow adding placeholder to SearchButton
|
|
154
|
+
([95f601a](https://github.com/ho-nl/m2-pwa/commit/95f601ac526991130ba319142452950793661f7b))
|
|
155
|
+
- allow changing SearchButton icon
|
|
156
|
+
([9725ab1](https://github.com/ho-nl/m2-pwa/commit/9725ab14920f585c83457f11908d7e5e408cadb8))
|
|
157
|
+
- implement extensibility for DesktopNavBar, SearchButton
|
|
158
|
+
([5710de8](https://github.com/ho-nl/m2-pwa/commit/5710de8936f59c7d0fcc648978183f0e7fdd26b7))
|
|
184
159
|
|
|
185
160
|
## [3.0.1](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/magento-search@3.0.0...@graphcommerce/magento-search@3.0.1) (2021-09-27)
|
|
186
161
|
|
|
187
162
|
**Note:** Version bump only for package @graphcommerce/magento-search
|
|
188
163
|
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
164
|
# 3.0.0 (2021-09-27)
|
|
194
165
|
|
|
195
|
-
|
|
196
166
|
### Bug Fixes
|
|
197
167
|
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
168
|
+
- **404-page:** prevent auto focus search form
|
|
169
|
+
([9e89ed3](https://github.com/ho-nl/m2-pwa/commit/9e89ed31ea192312641f46f01b69dc5f319331e8))
|
|
170
|
+
- add dependencies for searchbutton
|
|
171
|
+
([c8f9608](https://github.com/ho-nl/m2-pwa/commit/c8f960828daa77675c4f359e971690b227563445))
|
|
172
|
+
- **app-shell:** pages after app shell changes
|
|
173
|
+
([fb74510](https://github.com/ho-nl/m2-pwa/commit/fb74510121f6124009db72ad2ddebf6459c52a85))
|
|
174
|
+
- caption styles bugs
|
|
175
|
+
([f223918](https://github.com/ho-nl/m2-pwa/commit/f223918cc557a996b5f321fbf6910b4981646dcb))
|
|
176
|
+
- empty grid rows still have a gap
|
|
177
|
+
([7ba50c7](https://github.com/ho-nl/m2-pwa/commit/7ba50c740aa7ac5133b933b3e6a22fab853b55a6))
|
|
178
|
+
- ignore md files from triggering version updates
|
|
179
|
+
([4f98392](https://github.com/ho-nl/m2-pwa/commit/4f9839250b3a32d3070da5290e5efcc5e2243fba))
|
|
180
|
+
- **image:** make sure unoptimized images are preloaded correctly and remove preloads from lots of
|
|
181
|
+
images
|
|
182
|
+
([fb2b4fc](https://github.com/ho-nl/m2-pwa/commit/fb2b4fcb5336ff880a9b32775847d7b6738ba1ea))
|
|
183
|
+
- implement next-ui barrel imports
|
|
184
|
+
([75bea70](https://github.com/ho-nl/m2-pwa/commit/75bea703dba898f18a2a1dfa3243ebd0a4e6f0e1))
|
|
185
|
+
- make fab-menu more configurable
|
|
186
|
+
([f73d7ec](https://github.com/ho-nl/m2-pwa/commit/f73d7ecccfba7d5cd9eecdcdd65abb5393a9e7a9))
|
|
187
|
+
- no search results message
|
|
188
|
+
([2ecd6e3](https://github.com/ho-nl/m2-pwa/commit/2ecd6e36481e546dc78acfb46dfff08dcfdd8e6a))
|
|
189
|
+
- pagination & janky search form
|
|
190
|
+
([b4fb982](https://github.com/ho-nl/m2-pwa/commit/b4fb982980c92f3819bb563582979dd66893a733))
|
|
191
|
+
- readonly search field
|
|
192
|
+
([5524847](https://github.com/ho-nl/m2-pwa/commit/552484706520c14b7b3d1708daf8cc64b91f3fe7))
|
|
193
|
+
- rename NextButton to Button, change imports
|
|
194
|
+
([976adb0](https://github.com/ho-nl/m2-pwa/commit/976adb0bf906310d1efce888dcc9be1e28ce0f1b))
|
|
195
|
+
- search button on click type
|
|
196
|
+
([33a6a08](https://github.com/ho-nl/m2-pwa/commit/33a6a0826acf795750503b39bd0d224baa795a47))
|
|
197
|
+
- search not submitting after empying the field
|
|
198
|
+
([a15b5cf](https://github.com/ho-nl/m2-pwa/commit/a15b5cf94f4619e0087c8871a98617ab160f671a))
|
|
199
|
+
- search page routes
|
|
200
|
+
([4161179](https://github.com/ho-nl/m2-pwa/commit/4161179aaf2ecbc0fde0efbba891a7b85524e283))
|
|
201
|
+
- search results text
|
|
202
|
+
([33a496c](https://github.com/ho-nl/m2-pwa/commit/33a496c07fe6b5b0b05f3287dc86f6a32ca34b3b))
|
|
203
|
+
- **search-page:** hide menu and cart fabs when opened virtual keyboard mobile
|
|
204
|
+
([e728768](https://github.com/ho-nl/m2-pwa/commit/e7287680545f33079d0af47df1c6ea519b208978))
|
|
205
|
+
- since all links are of next/link we need to add passHref for custom components
|
|
206
|
+
([16fb931](https://github.com/ho-nl/m2-pwa/commit/16fb93100d367203ea79bb4f93357221253f2ecd))
|
|
207
|
+
- yarn workspace packages hot reload
|
|
208
|
+
([d03fc9f](https://github.com/ho-nl/m2-pwa/commit/d03fc9fdda3486476761786f2b56a934cc92befc))
|
|
219
209
|
|
|
220
210
|
### Features
|
|
221
211
|
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
212
|
+
- Add customer service icon and define MuiIconButton size
|
|
213
|
+
([eefcc52](https://github.com/ho-nl/m2-pwa/commit/eefcc52eeffa03b364464709e1860135127cc4b5))
|
|
214
|
+
- **app-shell:** now consistent
|
|
215
|
+
([fb5b506](https://github.com/ho-nl/m2-pwa/commit/fb5b5062729002b508e888a4962f1b2578e5199b))
|
|
216
|
+
- created stacked-pages package
|
|
217
|
+
([d86008e](https://github.com/ho-nl/m2-pwa/commit/d86008ee659ccb25b194a41d624b394a1ddbd088))
|
|
218
|
+
- full page ui desktop variant
|
|
219
|
+
([a70f301](https://github.com/ho-nl/m2-pwa/commit/a70f3013da36fa131f82fb44457b107fb7705df6))
|
|
220
|
+
- **graphql:** introduced new graphql package that holds all generated files
|
|
221
|
+
([a3e7aa0](https://github.com/ho-nl/m2-pwa/commit/a3e7aa05540540533b5ced9a95f1f802ecbe499f))
|
|
222
|
+
- **image:** introduced completely rewritten Image component
|
|
223
|
+
([e3413b3](https://github.com/ho-nl/m2-pwa/commit/e3413b3a57392d6571ea64cb8d9c8dca05ea31df))
|
|
224
|
+
- minimal page shell
|
|
225
|
+
([1693674](https://github.com/ho-nl/m2-pwa/commit/1693674631fc8438c60d9b74b73e607e08971a2d))
|
|
226
|
+
- next.js 11
|
|
227
|
+
([7d61407](https://github.com/ho-nl/m2-pwa/commit/7d614075a778f488045034f74be4f75b93f63c43))
|
|
228
|
+
- **playwright:** added new playwright package to enable browser testing
|
|
229
|
+
([6f49ec7](https://github.com/ho-nl/m2-pwa/commit/6f49ec7595563775b96ebf21c27e39da1282e8d9))
|
|
230
|
+
- renamed all packages to use [@graphcommerce](https://github.com/graphcommerce) instead of
|
|
231
|
+
[@reachdigital](https://github.com/reachdigital)
|
|
232
|
+
([491e4ce](https://github.com/ho-nl/m2-pwa/commit/491e4cec9a2686472dac36b79f999257c0811ffe))
|
|
233
|
+
- search page
|
|
234
|
+
([c89291b](https://github.com/ho-nl/m2-pwa/commit/c89291b7a65c93cbdb5f131f061f7232fdce3b99))
|
|
235
|
+
- svgimage component
|
|
236
|
+
([f369605](https://github.com/ho-nl/m2-pwa/commit/f3696051e381a24c543fd24e199da5b17f9e124f))
|
|
237
|
+
- upgrade to node 14
|
|
238
|
+
([d079a75](https://github.com/ho-nl/m2-pwa/commit/d079a751e9bfd8dc7f5009d2c9f31c336a0c96ab))
|
|
239
|
+
- upgraded to nextjs 11
|
|
240
|
+
([0053beb](https://github.com/ho-nl/m2-pwa/commit/0053beb7ef597c190add7264256a0eaec35868da))
|
|
238
241
|
|
|
239
242
|
## 2.0.8 (2020-10-28)
|
|
240
243
|
|
|
241
|
-
|
|
242
244
|
### Bug Fixes
|
|
243
245
|
|
|
244
|
-
|
|
245
|
-
|
|
246
|
+
- make sure themes extensions are found
|
|
247
|
+
([5aa18db](https://github.com/ho-nl/m2-pwa/commit/5aa18db514fd2e2f50681367e39523f8e742ece0))
|
|
246
248
|
|
|
247
249
|
### Features
|
|
248
250
|
|
|
249
|
-
|
|
250
|
-
|
|
251
|
+
- split into packages
|
|
252
|
+
([2ee7fd6](https://github.com/ho-nl/m2-pwa/commit/2ee7fd6c0056f467d114f04d92c6c0ddf622d151))
|
|
251
253
|
|
|
252
254
|
### BREAKING CHANGES
|
|
253
255
|
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
256
|
+
- huge folder structure refactor, please read README to reinstall
|
|
259
257
|
|
|
260
258
|
# Change Log
|
|
261
259
|
|
|
@@ -1,60 +1,50 @@
|
|
|
1
|
-
import {
|
|
2
|
-
|
|
3
|
-
Highlight,
|
|
4
|
-
iconChevronRight,
|
|
5
|
-
SvgImageSimple,
|
|
6
|
-
UseStyles,
|
|
7
|
-
} from '@graphcommerce/next-ui'
|
|
8
|
-
import { makeStyles, Theme } from '@material-ui/core'
|
|
1
|
+
import { Highlight, iconChevronRight, SvgIcon, extendableComponent } from '@graphcommerce/next-ui'
|
|
2
|
+
import { Button, SxProps, Theme } from '@mui/material'
|
|
9
3
|
import PageLink from 'next/link'
|
|
10
4
|
import React from 'react'
|
|
11
5
|
import { CategorySearchResultFragment } from './CategorySearchResult.gql'
|
|
12
6
|
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
padding: `${theme.spacings.xs} 18px ${theme.spacings.xs} 14px`,
|
|
18
|
-
display: 'flex',
|
|
19
|
-
justifyContent: 'space-between',
|
|
20
|
-
minWidth: '100%',
|
|
21
|
-
maxWidth: 'unset',
|
|
22
|
-
borderRadius: '0',
|
|
23
|
-
'&:not(&:last-child)': {
|
|
24
|
-
borderBottom: `1px solid ${theme.palette.divider}`,
|
|
25
|
-
},
|
|
26
|
-
'&:focus': {
|
|
27
|
-
boxShadow: 'none',
|
|
28
|
-
},
|
|
29
|
-
'&:hover': {
|
|
30
|
-
background: theme.palette.background.paper,
|
|
31
|
-
},
|
|
32
|
-
},
|
|
33
|
-
totalProducts: {
|
|
34
|
-
minWidth: 'max-content',
|
|
35
|
-
paddingRight: 7,
|
|
36
|
-
},
|
|
37
|
-
}),
|
|
38
|
-
{
|
|
39
|
-
name: 'CategorySearchResult',
|
|
40
|
-
},
|
|
41
|
-
)
|
|
7
|
+
export type CategorySearchResultProps = Omit<CategorySearchResultFragment, 'uid'> & {
|
|
8
|
+
search?: string
|
|
9
|
+
sx?: SxProps<Theme>
|
|
10
|
+
}
|
|
42
11
|
|
|
43
|
-
|
|
44
|
-
|
|
12
|
+
const name = 'CategorySearchResult' as const
|
|
13
|
+
const parts = ['root'] as const
|
|
14
|
+
const { classes } = extendableComponent(name, parts)
|
|
45
15
|
|
|
46
16
|
export default function CategorySearchResult(props: CategorySearchResultProps) {
|
|
47
|
-
const { search = '', ...catProps } = props
|
|
48
|
-
const classes = useStyles(props)
|
|
17
|
+
const { search = '', sx = [], ...catProps } = props
|
|
49
18
|
|
|
50
19
|
return (
|
|
51
20
|
<PageLink href={`/${catProps?.url_path ?? ''}`}>
|
|
52
21
|
<Button
|
|
53
22
|
fullWidth
|
|
54
23
|
variant='contained'
|
|
55
|
-
className={classes.
|
|
24
|
+
className={classes.root}
|
|
56
25
|
disableElevation
|
|
57
|
-
endIcon={<
|
|
26
|
+
endIcon={<SvgIcon src={iconChevronRight} size='small' />}
|
|
27
|
+
sx={[
|
|
28
|
+
(theme) => ({
|
|
29
|
+
background: theme.palette.background.default,
|
|
30
|
+
padding: `${theme.spacings.xs} 18px ${theme.spacings.xs} 14px`,
|
|
31
|
+
display: 'flex',
|
|
32
|
+
justifyContent: 'space-between',
|
|
33
|
+
minWidth: '100%',
|
|
34
|
+
maxWidth: 'unset',
|
|
35
|
+
borderRadius: '0',
|
|
36
|
+
'&:not(&:last-of-type)': {
|
|
37
|
+
borderBottom: `1px solid ${theme.palette.divider}`,
|
|
38
|
+
},
|
|
39
|
+
'&:focus': {
|
|
40
|
+
boxShadow: 'none',
|
|
41
|
+
},
|
|
42
|
+
'&:hover': {
|
|
43
|
+
background: theme.palette.background.paper,
|
|
44
|
+
},
|
|
45
|
+
}),
|
|
46
|
+
...(Array.isArray(sx) ? sx : [sx]),
|
|
47
|
+
]}
|
|
58
48
|
>
|
|
59
49
|
<div>
|
|
60
50
|
{catProps?.breadcrumbs?.map((breadcrumb) => (
|
|
@@ -1,32 +1,36 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
3
|
-
import
|
|
1
|
+
import { extendableComponent } from '@graphcommerce/next-ui'
|
|
2
|
+
import { Trans } from '@lingui/macro'
|
|
3
|
+
import { Box, SxProps, Theme, Typography } from '@mui/material'
|
|
4
4
|
|
|
5
|
-
|
|
6
|
-
(theme: Theme) => ({
|
|
7
|
-
container: {
|
|
8
|
-
marginTop: theme.spacings.md,
|
|
9
|
-
marginBottom: theme.spacings.sm,
|
|
10
|
-
textAlign: 'center',
|
|
11
|
-
},
|
|
12
|
-
}),
|
|
13
|
-
{
|
|
14
|
-
name: 'NoSearchResults',
|
|
15
|
-
},
|
|
16
|
-
)
|
|
5
|
+
export type NoSearchResultsProps = { search: string; sx?: SxProps<Theme> }
|
|
17
6
|
|
|
18
|
-
|
|
7
|
+
const name = 'NoSearchResults' as const
|
|
8
|
+
const parts = ['root'] as const
|
|
9
|
+
const { classes } = extendableComponent(name, parts)
|
|
19
10
|
|
|
20
11
|
export default function NoSearchResults(props: NoSearchResultsProps) {
|
|
21
|
-
const { search } = props
|
|
22
|
-
|
|
12
|
+
const { search, sx = [] } = props
|
|
13
|
+
|
|
14
|
+
const term = `'${search}'`
|
|
23
15
|
|
|
24
16
|
return (
|
|
25
|
-
<
|
|
17
|
+
<Box
|
|
18
|
+
className={classes.root}
|
|
19
|
+
sx={[
|
|
20
|
+
(theme) => ({
|
|
21
|
+
marginTop: theme.spacings.md,
|
|
22
|
+
marginBottom: theme.spacings.sm,
|
|
23
|
+
textAlign: 'center',
|
|
24
|
+
}),
|
|
25
|
+
...(Array.isArray(sx) ? sx : [sx]),
|
|
26
|
+
]}
|
|
27
|
+
>
|
|
26
28
|
<Typography variant='h5' align='center'>
|
|
27
|
-
We couldn't find any results for {
|
|
29
|
+
<Trans>We couldn't find any results for {term}</Trans>
|
|
28
30
|
</Typography>
|
|
29
|
-
<p>
|
|
30
|
-
|
|
31
|
+
<p>
|
|
32
|
+
<Trans>Try a different search</Trans>
|
|
33
|
+
</p>
|
|
34
|
+
</Box>
|
|
31
35
|
)
|
|
32
36
|
}
|
package/SearchButton/index.tsx
CHANGED
|
@@ -1,51 +1,51 @@
|
|
|
1
|
-
import { iconSearch, responsiveVal,
|
|
2
|
-
import {
|
|
3
|
-
import
|
|
4
|
-
import React from 'react'
|
|
1
|
+
import { iconSearch, responsiveVal, SvgIcon, extendableComponent } from '@graphcommerce/next-ui'
|
|
2
|
+
import { Trans } from '@lingui/macro'
|
|
3
|
+
import { TextField, TextFieldProps } from '@mui/material'
|
|
5
4
|
|
|
6
|
-
|
|
7
|
-
(theme: Theme) => ({
|
|
8
|
-
root: {
|
|
9
|
-
marginRight: theme.spacings.xxs,
|
|
10
|
-
width: responsiveVal(64, 172),
|
|
11
|
-
'& fieldset': {
|
|
12
|
-
border: `1px solid ${theme.palette.divider}`,
|
|
13
|
-
},
|
|
14
|
-
[theme.breakpoints.down('sm')]: {
|
|
15
|
-
width: '100%',
|
|
16
|
-
marginRight: 0,
|
|
17
|
-
},
|
|
18
|
-
},
|
|
19
|
-
inputRoot: {},
|
|
20
|
-
fullWidth: {
|
|
21
|
-
width: '100%',
|
|
22
|
-
marginRight: 0,
|
|
23
|
-
},
|
|
24
|
-
}),
|
|
25
|
-
{ name: 'SearchButton' },
|
|
26
|
-
)
|
|
5
|
+
export type SearchButtonProps = TextFieldProps
|
|
27
6
|
|
|
28
|
-
|
|
7
|
+
type OwnerState = { fullWidth?: boolean }
|
|
8
|
+
const name = 'SearchButton' as const
|
|
9
|
+
const parts = ['root', 'inputRoot'] as const
|
|
10
|
+
const { withState } = extendableComponent<OwnerState, typeof name, typeof parts>(name, parts)
|
|
29
11
|
|
|
30
12
|
export default function SearchButton(props: SearchButtonProps) {
|
|
31
|
-
const { InputProps, label =
|
|
32
|
-
const classes =
|
|
13
|
+
const { InputProps, label, fullWidth = false, sx = [], ...textFieldProps } = props
|
|
14
|
+
const classes = withState({ fullWidth })
|
|
33
15
|
|
|
34
16
|
return (
|
|
35
17
|
<TextField
|
|
36
18
|
variant='outlined'
|
|
37
19
|
size='small'
|
|
38
|
-
className={
|
|
39
|
-
label={label}
|
|
20
|
+
className={classes.root}
|
|
21
|
+
label={label ?? <Trans>Search...</Trans>}
|
|
40
22
|
id='search-input'
|
|
41
23
|
InputLabelProps={{ shrink: false }}
|
|
42
24
|
InputProps={{
|
|
43
25
|
readOnly: true,
|
|
44
|
-
endAdornment: <
|
|
26
|
+
endAdornment: <SvgIcon src={iconSearch} size='medium' />,
|
|
45
27
|
classes: { root: classes.inputRoot },
|
|
46
28
|
...InputProps,
|
|
47
29
|
}}
|
|
48
30
|
{...textFieldProps}
|
|
31
|
+
sx={[
|
|
32
|
+
(theme) => ({
|
|
33
|
+
marginRight: theme.spacings.xxs,
|
|
34
|
+
width: responsiveVal(64, 172),
|
|
35
|
+
'& fieldset': {
|
|
36
|
+
border: `1px solid ${theme.palette.divider}`,
|
|
37
|
+
},
|
|
38
|
+
[theme.breakpoints.down('md')]: {
|
|
39
|
+
width: '100%',
|
|
40
|
+
marginRight: 0,
|
|
41
|
+
},
|
|
42
|
+
'&.fullWidth': {
|
|
43
|
+
width: '100%',
|
|
44
|
+
marginRight: 0,
|
|
45
|
+
},
|
|
46
|
+
}),
|
|
47
|
+
...(Array.isArray(sx) ? sx : [sx]),
|
|
48
|
+
]}
|
|
49
49
|
/>
|
|
50
50
|
)
|
|
51
51
|
}
|
package/SearchDivider/index.tsx
CHANGED
|
@@ -1,13 +1,10 @@
|
|
|
1
|
-
import { styled } from '@material
|
|
1
|
+
import { styled } from '@mui/material'
|
|
2
2
|
|
|
3
|
-
const SearchDivider = styled('div')(
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
}),
|
|
10
|
-
{ name: 'FormDivider' },
|
|
11
|
-
)
|
|
3
|
+
const SearchDivider = styled('div', { name: 'SearchDivider' })(({ theme }) => ({
|
|
4
|
+
borderBottom: `1px solid ${theme.palette.divider}`,
|
|
5
|
+
width: '100%',
|
|
6
|
+
marginTop: theme.spacings.md,
|
|
7
|
+
marginBottom: theme.spacings.md,
|
|
8
|
+
}))
|
|
12
9
|
|
|
13
10
|
export default SearchDivider
|
package/SearchForm/index.tsx
CHANGED
|
@@ -1,22 +1,14 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import {
|
|
2
|
+
FormRow,
|
|
3
|
+
iconClose,
|
|
4
|
+
iconSearch,
|
|
5
|
+
SvgIcon,
|
|
6
|
+
extendableComponent,
|
|
7
|
+
} from '@graphcommerce/next-ui'
|
|
2
8
|
import { useForm, useFormAutoSubmit, useFormMuiRegister } from '@graphcommerce/react-hook-form'
|
|
3
|
-
import { t,
|
|
4
|
-
import { IconButton,
|
|
9
|
+
import { t, Trans } from '@lingui/macro'
|
|
10
|
+
import { Box, IconButton, SxProps, TextField, TextFieldProps, Theme } from '@mui/material'
|
|
5
11
|
import { useRouter } from 'next/router'
|
|
6
|
-
import React from 'react'
|
|
7
|
-
|
|
8
|
-
const useStyles = makeStyles(
|
|
9
|
-
(theme: Theme) => ({
|
|
10
|
-
totalProducts: {
|
|
11
|
-
minWidth: 'max-content',
|
|
12
|
-
color: theme.palette.grey[500],
|
|
13
|
-
paddingRight: 7,
|
|
14
|
-
},
|
|
15
|
-
}),
|
|
16
|
-
{
|
|
17
|
-
name: 'SearchIndexPage',
|
|
18
|
-
},
|
|
19
|
-
)
|
|
20
12
|
|
|
21
13
|
export type SearchFormProps = {
|
|
22
14
|
totalResults?: number
|
|
@@ -24,11 +16,15 @@ export type SearchFormProps = {
|
|
|
24
16
|
urlHandle?: string
|
|
25
17
|
autoFocus?: boolean
|
|
26
18
|
textFieldProps?: TextFieldProps
|
|
27
|
-
|
|
19
|
+
sx?: SxProps<Theme>
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
const name = 'SearchForm' as const
|
|
23
|
+
const parts = ['root', 'totalProducts'] as const
|
|
24
|
+
const { classes } = extendableComponent(name, parts)
|
|
28
25
|
|
|
29
26
|
export default function SearchForm(props: SearchFormProps) {
|
|
30
|
-
const { totalResults = 0, search = '', urlHandle = 'search', textFieldProps } = props
|
|
31
|
-
const classes = useStyles(props)
|
|
27
|
+
const { totalResults = 0, search = '', urlHandle = 'search', textFieldProps, sx = [] } = props
|
|
32
28
|
const router = useRouter()
|
|
33
29
|
|
|
34
30
|
const form = useForm({ mode: 'onChange', defaultValues: { search } })
|
|
@@ -51,28 +47,33 @@ export default function SearchForm(props: SearchFormProps) {
|
|
|
51
47
|
|
|
52
48
|
const endAdornment = !watch('search') ? (
|
|
53
49
|
<IconButton size='small'>
|
|
54
|
-
<
|
|
50
|
+
<SvgIcon src={iconSearch} />
|
|
55
51
|
</IconButton>
|
|
56
52
|
) : (
|
|
57
53
|
<>
|
|
58
54
|
{totalResults > 0 && (
|
|
59
|
-
<
|
|
60
|
-
{
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
)}
|
|
66
|
-
|
|
55
|
+
<Box
|
|
56
|
+
className={classes.totalProducts}
|
|
57
|
+
sx={(theme) => ({
|
|
58
|
+
minWidth: 'max-content',
|
|
59
|
+
color: theme.palette.text.disabled,
|
|
60
|
+
paddingRight: '7px',
|
|
61
|
+
})}
|
|
62
|
+
>
|
|
63
|
+
{totalResults === 1 && <Trans>{totalResults} result</Trans>}
|
|
64
|
+
{totalResults > 1 && <Trans>{totalResults} results</Trans>}
|
|
65
|
+
</Box>
|
|
67
66
|
)}
|
|
68
67
|
<IconButton onClick={handleReset} size='small'>
|
|
69
|
-
<
|
|
68
|
+
<SvgIcon src={iconClose} />
|
|
70
69
|
</IconButton>
|
|
71
70
|
</>
|
|
72
71
|
)
|
|
73
72
|
|
|
74
73
|
return (
|
|
75
|
-
<
|
|
74
|
+
<Box
|
|
75
|
+
className={classes.root}
|
|
76
|
+
component='form'
|
|
76
77
|
noValidate
|
|
77
78
|
onSubmit={submit}
|
|
78
79
|
onChange={() => {
|
|
@@ -81,6 +82,7 @@ export default function SearchForm(props: SearchFormProps) {
|
|
|
81
82
|
router.replace(`/search`)
|
|
82
83
|
}
|
|
83
84
|
}}
|
|
85
|
+
sx={sx}
|
|
84
86
|
>
|
|
85
87
|
<FormRow>
|
|
86
88
|
<TextField
|
|
@@ -95,6 +97,6 @@ export default function SearchForm(props: SearchFormProps) {
|
|
|
95
97
|
{...textFieldProps}
|
|
96
98
|
/>
|
|
97
99
|
</FormRow>
|
|
98
|
-
</
|
|
100
|
+
</Box>
|
|
99
101
|
)
|
|
100
102
|
}
|
package/package.json
CHANGED
|
@@ -1,11 +1,10 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@graphcommerce/magento-search",
|
|
3
|
-
"
|
|
3
|
+
"homepage": "https://www.graphcommerce.org/",
|
|
4
|
+
"repository": "github:graphcommerce-org/graphcommerce",
|
|
5
|
+
"version": "4.0.1",
|
|
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,23 +12,20 @@
|
|
|
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.1",
|
|
16
|
+
"@graphcommerce/prettier-config-pwa": "^4.0.1",
|
|
17
|
+
"@graphcommerce/typescript-config-pwa": "^4.0.1",
|
|
18
|
+
"@playwright/test": "^1.18.1"
|
|
21
19
|
},
|
|
22
20
|
"dependencies": {
|
|
23
|
-
"@graphcommerce/graphql": "^
|
|
24
|
-
"@graphcommerce/image": "^
|
|
25
|
-
"@graphcommerce/next-ui": "^
|
|
26
|
-
"@graphcommerce/react-hook-form": "^
|
|
27
|
-
"@lingui/macro": "^3.13.
|
|
28
|
-
"@material
|
|
29
|
-
"
|
|
30
|
-
"next": "^12.0.7",
|
|
21
|
+
"@graphcommerce/graphql": "^3.0.1",
|
|
22
|
+
"@graphcommerce/image": "^3.0.1",
|
|
23
|
+
"@graphcommerce/next-ui": "^4.0.1",
|
|
24
|
+
"@graphcommerce/react-hook-form": "^3.0.1",
|
|
25
|
+
"@lingui/macro": "^3.13.2",
|
|
26
|
+
"@mui/material": "^5.4.1",
|
|
27
|
+
"next": "^12.0.10",
|
|
31
28
|
"react": "^17.0.2",
|
|
32
29
|
"react-dom": "^17.0.2"
|
|
33
|
-
}
|
|
34
|
-
"gitHead": "110ddb032ee3ce6e363b9f5f7d21af71fb51b527"
|
|
30
|
+
}
|
|
35
31
|
}
|