@graphcommerce/magento-search 3.5.44 → 4.0.0
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 +133 -149
- 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 +13 -19
package/CHANGELOG.md
CHANGED
|
@@ -1,261 +1,245 @@
|
|
|
1
1
|
# Change Log
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
3
|
+
## 4.0.0
|
|
5
4
|
|
|
6
|
-
|
|
5
|
+
### Major Changes
|
|
7
6
|
|
|
7
|
+
- [#1258](https://github.com/ho-nl/m2-pwa/pull/1258)
|
|
8
|
+
[`ad36382a4`](https://github.com/ho-nl/m2-pwa/commit/ad36382a4d55d83d9e47b7eb6a02671a2a631a05)
|
|
9
|
+
Thanks [@paales](https://github.com/paales)! - Upgraded to Material UI 5
|
|
8
10
|
|
|
9
|
-
###
|
|
11
|
+
### Patch Changes
|
|
10
12
|
|
|
11
|
-
|
|
13
|
+
- Updated dependencies
|
|
14
|
+
[[`ad36382a4`](https://github.com/ho-nl/m2-pwa/commit/ad36382a4d55d83d9e47b7eb6a02671a2a631a05)]:
|
|
15
|
+
- @graphcommerce/graphql@3.0.0
|
|
16
|
+
- @graphcommerce/image@3.0.0
|
|
17
|
+
- @graphcommerce/next-ui@4.0.0
|
|
18
|
+
- @graphcommerce/react-hook-form@3.0.0
|
|
12
19
|
|
|
20
|
+
All notable changes to this project will be documented in this file. See
|
|
21
|
+
[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
13
22
|
|
|
23
|
+
## [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)
|
|
14
24
|
|
|
25
|
+
### Bug Fixes
|
|
15
26
|
|
|
27
|
+
- search result label translation
|
|
28
|
+
([7e14ff5](https://github.com/ho-nl/m2-pwa/commit/7e14ff5548d86bc6b4f7afd51c259c0b833878f7))
|
|
16
29
|
|
|
17
30
|
## [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)
|
|
18
31
|
|
|
19
|
-
|
|
20
32
|
### Bug Fixes
|
|
21
33
|
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
34
|
+
- search result label
|
|
35
|
+
([a55fdc0](https://github.com/ho-nl/m2-pwa/commit/a55fdc07e3aeb57d3b3a2cb0378ecb227ebf23a2))
|
|
27
36
|
|
|
28
37
|
## [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
38
|
|
|
30
|
-
|
|
31
39
|
### Bug Fixes
|
|
32
40
|
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
41
|
+
- search page
|
|
42
|
+
([85cf721](https://github.com/ho-nl/m2-pwa/commit/85cf72130bce4c3d2c392a3745adf05bca8618b1))
|
|
38
43
|
|
|
39
44
|
## [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
45
|
|
|
41
|
-
|
|
42
46
|
### Bug Fixes
|
|
43
47
|
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
48
|
+
- ios zoom bug when using search. Fontsize should always be > 16
|
|
49
|
+
([22abcd4](https://github.com/ho-nl/m2-pwa/commit/22abcd499b152448b3c38f84325debe07d2b9a68))
|
|
49
50
|
|
|
50
51
|
## [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
52
|
|
|
52
|
-
|
|
53
53
|
### Bug Fixes
|
|
54
54
|
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
55
|
+
- replace shadow with border
|
|
56
|
+
([56b2078](https://github.com/ho-nl/m2-pwa/commit/56b20786920c5c73faf35c8fbde425c01a88f411))
|
|
60
57
|
|
|
61
58
|
# [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
59
|
|
|
63
|
-
|
|
64
60
|
### Features
|
|
65
61
|
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
62
|
+
- added tons of translations
|
|
63
|
+
([9bb0ac7](https://github.com/ho-nl/m2-pwa/commit/9bb0ac709b58df6ea6141e92e4923a5ca9ae2963))
|
|
71
64
|
|
|
72
65
|
## [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
66
|
|
|
74
|
-
|
|
75
67
|
### Bug Fixes
|
|
76
68
|
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
69
|
+
- searchButton styling
|
|
70
|
+
([846e0cd](https://github.com/ho-nl/m2-pwa/commit/846e0cdb76eec7c5baf5fbfc4c501f99ebe59bf5))
|
|
82
71
|
|
|
83
72
|
## [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
73
|
|
|
85
|
-
|
|
86
74
|
### Bug Fixes
|
|
87
75
|
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
76
|
+
- **search-button:** spacings
|
|
77
|
+
([ccb7274](https://github.com/ho-nl/m2-pwa/commit/ccb727444a57941e22f14dff15ce20101cbc160c))
|
|
93
78
|
|
|
94
79
|
## [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
80
|
|
|
96
|
-
|
|
97
81
|
### Bug Fixes
|
|
98
82
|
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
83
|
+
- restyle menu to h4
|
|
84
|
+
([642e166](https://github.com/ho-nl/m2-pwa/commit/642e16635dc06f38bed91ffd1a374922ac70439b))
|
|
85
|
+
- **search-button:** add label for accessibility score
|
|
86
|
+
([1871e5b](https://github.com/ho-nl/m2-pwa/commit/1871e5b0b264ae4c98ebf3af1d074bb23d4dbbd8))
|
|
105
87
|
|
|
106
88
|
## [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
89
|
|
|
108
|
-
|
|
109
90
|
### Bug Fixes
|
|
110
91
|
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
92
|
+
- various accessibility improvements
|
|
93
|
+
([47481a9](https://github.com/ho-nl/m2-pwa/commit/47481a9a882ba87968de6dd797557b0b275d75fb))
|
|
116
94
|
|
|
117
95
|
# [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
96
|
|
|
119
|
-
|
|
120
97
|
### Bug Fixes
|
|
121
98
|
|
|
122
|
-
|
|
123
|
-
|
|
99
|
+
- darkMode
|
|
100
|
+
([c7573de](https://github.com/ho-nl/m2-pwa/commit/c7573de6bb80643b26931c35ac61735539e7fbf0))
|
|
124
101
|
|
|
125
102
|
### Features
|
|
126
103
|
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
104
|
+
- darkTheme
|
|
105
|
+
([968f4f1](https://github.com/ho-nl/m2-pwa/commit/968f4f1360417bf7daa36454c19e6bc5cf53ae90))
|
|
132
106
|
|
|
133
107
|
## [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
108
|
|
|
135
|
-
|
|
136
109
|
### Bug Fixes
|
|
137
110
|
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
111
|
+
- External SVG's can't have alt tags
|
|
112
|
+
([1b1414a](https://github.com/ho-nl/m2-pwa/commit/1b1414a782d55d3acf7b0e6bcaa50f2ad5f18f39))
|
|
143
113
|
|
|
144
114
|
# [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
115
|
|
|
146
|
-
|
|
147
116
|
### Bug Fixes
|
|
148
117
|
|
|
149
|
-
|
|
150
|
-
|
|
118
|
+
- update SvgImage to SvgImageSimple
|
|
119
|
+
([f116543](https://github.com/ho-nl/m2-pwa/commit/f116543730853fa9782abff0ccacee7032e85789))
|
|
151
120
|
|
|
152
121
|
### Features
|
|
153
122
|
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
123
|
+
- dynamic icons, update SvgImage uses to SvgImageSimple
|
|
124
|
+
([3d3cc0e](https://github.com/ho-nl/m2-pwa/commit/3d3cc0e0336fcde1cce6ba19705f82c1edf9bfc6))
|
|
125
|
+
- mobile menu styling
|
|
126
|
+
([3cc3085](https://github.com/ho-nl/m2-pwa/commit/3cc308585d4ded68d2ac8ebf97f96288424ee914))
|
|
160
127
|
|
|
161
128
|
# [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
129
|
|
|
163
|
-
|
|
164
130
|
### Features
|
|
165
131
|
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
132
|
+
- **nextjs:** upgraded to nextjs 12
|
|
133
|
+
([9331bc8](https://github.com/ho-nl/m2-pwa/commit/9331bc801f6419522115cc47d291d49d608d5a90))
|
|
171
134
|
|
|
172
135
|
# [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
136
|
|
|
174
|
-
|
|
175
137
|
### Features
|
|
176
138
|
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
139
|
+
- allow adding placeholder to SearchButton
|
|
140
|
+
([95f601a](https://github.com/ho-nl/m2-pwa/commit/95f601ac526991130ba319142452950793661f7b))
|
|
141
|
+
- allow changing SearchButton icon
|
|
142
|
+
([9725ab1](https://github.com/ho-nl/m2-pwa/commit/9725ab14920f585c83457f11908d7e5e408cadb8))
|
|
143
|
+
- implement extensibility for DesktopNavBar, SearchButton
|
|
144
|
+
([5710de8](https://github.com/ho-nl/m2-pwa/commit/5710de8936f59c7d0fcc648978183f0e7fdd26b7))
|
|
184
145
|
|
|
185
146
|
## [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
147
|
|
|
187
148
|
**Note:** Version bump only for package @graphcommerce/magento-search
|
|
188
149
|
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
150
|
# 3.0.0 (2021-09-27)
|
|
194
151
|
|
|
195
|
-
|
|
196
152
|
### Bug Fixes
|
|
197
153
|
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
154
|
+
- **404-page:** prevent auto focus search form
|
|
155
|
+
([9e89ed3](https://github.com/ho-nl/m2-pwa/commit/9e89ed31ea192312641f46f01b69dc5f319331e8))
|
|
156
|
+
- add dependencies for searchbutton
|
|
157
|
+
([c8f9608](https://github.com/ho-nl/m2-pwa/commit/c8f960828daa77675c4f359e971690b227563445))
|
|
158
|
+
- **app-shell:** pages after app shell changes
|
|
159
|
+
([fb74510](https://github.com/ho-nl/m2-pwa/commit/fb74510121f6124009db72ad2ddebf6459c52a85))
|
|
160
|
+
- caption styles bugs
|
|
161
|
+
([f223918](https://github.com/ho-nl/m2-pwa/commit/f223918cc557a996b5f321fbf6910b4981646dcb))
|
|
162
|
+
- empty grid rows still have a gap
|
|
163
|
+
([7ba50c7](https://github.com/ho-nl/m2-pwa/commit/7ba50c740aa7ac5133b933b3e6a22fab853b55a6))
|
|
164
|
+
- ignore md files from triggering version updates
|
|
165
|
+
([4f98392](https://github.com/ho-nl/m2-pwa/commit/4f9839250b3a32d3070da5290e5efcc5e2243fba))
|
|
166
|
+
- **image:** make sure unoptimized images are preloaded correctly and remove preloads from lots of
|
|
167
|
+
images
|
|
168
|
+
([fb2b4fc](https://github.com/ho-nl/m2-pwa/commit/fb2b4fcb5336ff880a9b32775847d7b6738ba1ea))
|
|
169
|
+
- implement next-ui barrel imports
|
|
170
|
+
([75bea70](https://github.com/ho-nl/m2-pwa/commit/75bea703dba898f18a2a1dfa3243ebd0a4e6f0e1))
|
|
171
|
+
- make fab-menu more configurable
|
|
172
|
+
([f73d7ec](https://github.com/ho-nl/m2-pwa/commit/f73d7ecccfba7d5cd9eecdcdd65abb5393a9e7a9))
|
|
173
|
+
- no search results message
|
|
174
|
+
([2ecd6e3](https://github.com/ho-nl/m2-pwa/commit/2ecd6e36481e546dc78acfb46dfff08dcfdd8e6a))
|
|
175
|
+
- pagination & janky search form
|
|
176
|
+
([b4fb982](https://github.com/ho-nl/m2-pwa/commit/b4fb982980c92f3819bb563582979dd66893a733))
|
|
177
|
+
- readonly search field
|
|
178
|
+
([5524847](https://github.com/ho-nl/m2-pwa/commit/552484706520c14b7b3d1708daf8cc64b91f3fe7))
|
|
179
|
+
- rename NextButton to Button, change imports
|
|
180
|
+
([976adb0](https://github.com/ho-nl/m2-pwa/commit/976adb0bf906310d1efce888dcc9be1e28ce0f1b))
|
|
181
|
+
- search button on click type
|
|
182
|
+
([33a6a08](https://github.com/ho-nl/m2-pwa/commit/33a6a0826acf795750503b39bd0d224baa795a47))
|
|
183
|
+
- search not submitting after empying the field
|
|
184
|
+
([a15b5cf](https://github.com/ho-nl/m2-pwa/commit/a15b5cf94f4619e0087c8871a98617ab160f671a))
|
|
185
|
+
- search page routes
|
|
186
|
+
([4161179](https://github.com/ho-nl/m2-pwa/commit/4161179aaf2ecbc0fde0efbba891a7b85524e283))
|
|
187
|
+
- search results text
|
|
188
|
+
([33a496c](https://github.com/ho-nl/m2-pwa/commit/33a496c07fe6b5b0b05f3287dc86f6a32ca34b3b))
|
|
189
|
+
- **search-page:** hide menu and cart fabs when opened virtual keyboard mobile
|
|
190
|
+
([e728768](https://github.com/ho-nl/m2-pwa/commit/e7287680545f33079d0af47df1c6ea519b208978))
|
|
191
|
+
- since all links are of next/link we need to add passHref for custom components
|
|
192
|
+
([16fb931](https://github.com/ho-nl/m2-pwa/commit/16fb93100d367203ea79bb4f93357221253f2ecd))
|
|
193
|
+
- yarn workspace packages hot reload
|
|
194
|
+
([d03fc9f](https://github.com/ho-nl/m2-pwa/commit/d03fc9fdda3486476761786f2b56a934cc92befc))
|
|
219
195
|
|
|
220
196
|
### Features
|
|
221
197
|
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
198
|
+
- Add customer service icon and define MuiIconButton size
|
|
199
|
+
([eefcc52](https://github.com/ho-nl/m2-pwa/commit/eefcc52eeffa03b364464709e1860135127cc4b5))
|
|
200
|
+
- **app-shell:** now consistent
|
|
201
|
+
([fb5b506](https://github.com/ho-nl/m2-pwa/commit/fb5b5062729002b508e888a4962f1b2578e5199b))
|
|
202
|
+
- created stacked-pages package
|
|
203
|
+
([d86008e](https://github.com/ho-nl/m2-pwa/commit/d86008ee659ccb25b194a41d624b394a1ddbd088))
|
|
204
|
+
- full page ui desktop variant
|
|
205
|
+
([a70f301](https://github.com/ho-nl/m2-pwa/commit/a70f3013da36fa131f82fb44457b107fb7705df6))
|
|
206
|
+
- **graphql:** introduced new graphql package that holds all generated files
|
|
207
|
+
([a3e7aa0](https://github.com/ho-nl/m2-pwa/commit/a3e7aa05540540533b5ced9a95f1f802ecbe499f))
|
|
208
|
+
- **image:** introduced completely rewritten Image component
|
|
209
|
+
([e3413b3](https://github.com/ho-nl/m2-pwa/commit/e3413b3a57392d6571ea64cb8d9c8dca05ea31df))
|
|
210
|
+
- minimal page shell
|
|
211
|
+
([1693674](https://github.com/ho-nl/m2-pwa/commit/1693674631fc8438c60d9b74b73e607e08971a2d))
|
|
212
|
+
- next.js 11
|
|
213
|
+
([7d61407](https://github.com/ho-nl/m2-pwa/commit/7d614075a778f488045034f74be4f75b93f63c43))
|
|
214
|
+
- **playwright:** added new playwright package to enable browser testing
|
|
215
|
+
([6f49ec7](https://github.com/ho-nl/m2-pwa/commit/6f49ec7595563775b96ebf21c27e39da1282e8d9))
|
|
216
|
+
- renamed all packages to use [@graphcommerce](https://github.com/graphcommerce) instead of
|
|
217
|
+
[@reachdigital](https://github.com/reachdigital)
|
|
218
|
+
([491e4ce](https://github.com/ho-nl/m2-pwa/commit/491e4cec9a2686472dac36b79f999257c0811ffe))
|
|
219
|
+
- search page
|
|
220
|
+
([c89291b](https://github.com/ho-nl/m2-pwa/commit/c89291b7a65c93cbdb5f131f061f7232fdce3b99))
|
|
221
|
+
- svgimage component
|
|
222
|
+
([f369605](https://github.com/ho-nl/m2-pwa/commit/f3696051e381a24c543fd24e199da5b17f9e124f))
|
|
223
|
+
- upgrade to node 14
|
|
224
|
+
([d079a75](https://github.com/ho-nl/m2-pwa/commit/d079a751e9bfd8dc7f5009d2c9f31c336a0c96ab))
|
|
225
|
+
- upgraded to nextjs 11
|
|
226
|
+
([0053beb](https://github.com/ho-nl/m2-pwa/commit/0053beb7ef597c190add7264256a0eaec35868da))
|
|
238
227
|
|
|
239
228
|
## 2.0.8 (2020-10-28)
|
|
240
229
|
|
|
241
|
-
|
|
242
230
|
### Bug Fixes
|
|
243
231
|
|
|
244
|
-
|
|
245
|
-
|
|
232
|
+
- make sure themes extensions are found
|
|
233
|
+
([5aa18db](https://github.com/ho-nl/m2-pwa/commit/5aa18db514fd2e2f50681367e39523f8e742ece0))
|
|
246
234
|
|
|
247
235
|
### Features
|
|
248
236
|
|
|
249
|
-
|
|
250
|
-
|
|
237
|
+
- split into packages
|
|
238
|
+
([2ee7fd6](https://github.com/ho-nl/m2-pwa/commit/2ee7fd6c0056f467d114f04d92c6c0ddf622d151))
|
|
251
239
|
|
|
252
240
|
### BREAKING CHANGES
|
|
253
241
|
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
242
|
+
- huge folder structure refactor, please read README to reinstall
|
|
259
243
|
|
|
260
244
|
# Change Log
|
|
261
245
|
|
|
@@ -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,8 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@graphcommerce/magento-search",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "4.0.0",
|
|
4
4
|
"sideEffects": false,
|
|
5
5
|
"prettier": "@graphcommerce/prettier-config-pwa",
|
|
6
|
-
"browserslist": [
|
|
7
|
-
"extends @graphcommerce/browserslist-config-pwa"
|
|
8
|
-
],
|
|
9
6
|
"eslintConfig": {
|
|
10
7
|
"extends": "@graphcommerce/eslint-config-pwa",
|
|
11
8
|
"parserOptions": {
|
|
@@ -13,23 +10,20 @@
|
|
|
13
10
|
}
|
|
14
11
|
},
|
|
15
12
|
"devDependencies": {
|
|
16
|
-
"@graphcommerce/
|
|
17
|
-
"@graphcommerce/
|
|
18
|
-
"@graphcommerce/
|
|
19
|
-
"@
|
|
20
|
-
"@playwright/test": "^1.17.1"
|
|
13
|
+
"@graphcommerce/eslint-config-pwa": "^4.0.0",
|
|
14
|
+
"@graphcommerce/prettier-config-pwa": "^4.0.0",
|
|
15
|
+
"@graphcommerce/typescript-config-pwa": "^4.0.0",
|
|
16
|
+
"@playwright/test": "^1.18.1"
|
|
21
17
|
},
|
|
22
18
|
"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",
|
|
19
|
+
"@graphcommerce/graphql": "^3.0.0",
|
|
20
|
+
"@graphcommerce/image": "^3.0.0",
|
|
21
|
+
"@graphcommerce/next-ui": "^4.0.0",
|
|
22
|
+
"@graphcommerce/react-hook-form": "^3.0.0",
|
|
23
|
+
"@lingui/macro": "^3.13.2",
|
|
24
|
+
"@mui/material": "^5.4.1",
|
|
25
|
+
"next": "^12.0.10",
|
|
31
26
|
"react": "^17.0.2",
|
|
32
27
|
"react-dom": "^17.0.2"
|
|
33
|
-
}
|
|
34
|
-
"gitHead": "4f7fd2440fa20b9ad619b1172bc12deaaf8b2456"
|
|
28
|
+
}
|
|
35
29
|
}
|