@asante-org/leybold-design-system 1.2.0 → 1.2.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/README.md +163 -163
- package/dist/app/layout.d.ts +9 -0
- package/dist/app/page.d.ts +2 -0
- package/dist/assets/.gitkeep +2 -2
- package/dist/assets/desktop-layout-alt.svg +27 -27
- package/dist/assets/desktop-layout.svg +29 -29
- package/dist/assets/globe.svg +7 -7
- package/dist/assets/leybold-footer-logo.svg +19 -19
- package/dist/assets/leybold-white.svg +18 -18
- package/dist/assets/list-product-overlay-tip-active.svg +3 -3
- package/dist/assets/list-product-overlay-tip.svg +3 -3
- package/dist/assets/logo-example.svg +9 -9
- package/dist/assets/logo.svg +19 -19
- package/dist/assets/phone-layout.svg +14 -14
- package/dist/assets/red-tip.svg +10 -10
- package/dist/assets/tablet-layout.svg +28 -28
- package/dist/index.css +88 -0
- package/dist/index.d.ts +3 -0
- package/dist/index.esm.css +88 -0
- package/dist/index.esm.js +1066 -1093
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +1148 -1135
- package/dist/index.js.map +1 -1
- package/dist/src/experience/algolia-dynamic-search/AlgoliaDynamicSearch.d.ts +0 -1
- package/dist/src/experience/qr-form-journey/QrFormJourney.d.ts +0 -1
- package/dist/src/stories/foundation/Typography/TypographyComponents.d.ts +0 -1
- package/dist/src/types/cards.d.ts +3 -0
- package/dist/stories/components/Algolia-dynamic-search/algolia-dynamic-search.d.ts +4 -0
- package/dist/stories/components/Algolia-dynamic-search/algolia-dynamic-search.stories.d.ts +7 -0
- package/dist/stories/components/Button/Button.d.ts +35 -0
- package/dist/stories/components/Button/Button.stories.d.ts +15 -0
- package/dist/stories/components/Button/index.d.ts +2 -0
- package/dist/stories/components/QRFormJourney/Qr-form/Qr-form.d.ts +2 -0
- package/dist/stories/components/QRFormJourney/Qr-form/Qr-form.stories.d.ts +7 -0
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/dist/utils/styles/index.d.ts +1 -0
- package/package.json +115 -115
- package/dist/.next/types/app/layout.d.ts +0 -9
- package/dist/.next/types/app/page.d.ts +0 -9
package/dist/index.esm.js
CHANGED
|
@@ -3,7 +3,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
|
|
3
3
|
import { faArrowLeft, faArrowLeftLong, faArrowRight, faArrowRightLong, faChevronRight, faChevronLeft, faArrowUpRightFromSquare, faGlobe, faXmark as faXmark$1 } from '@fortawesome/free-solid-svg-icons';
|
|
4
4
|
import { faInstagram, faYoutube, faLinkedinIn, faXTwitter, faFacebookF } from '@fortawesome/free-brands-svg-icons';
|
|
5
5
|
import { faChevronRight as faChevronRight$1, faArrowUpRightFromSquare as faArrowUpRightFromSquare$1 } from '@fortawesome/pro-solid-svg-icons';
|
|
6
|
-
import { ProductDetailsCard, AlgoliaDynamicSearchRaw, QrForm } from '@
|
|
6
|
+
import { ProductDetailsCard, AlgoliaDynamicSearchRaw, QrForm } from '@asante-org/edwardsvacuum-design-system';
|
|
7
7
|
|
|
8
8
|
function _extends() {
|
|
9
9
|
return _extends = Object.assign ? Object.assign.bind() : function (n) {
|
|
@@ -15,45 +15,6 @@ function _extends() {
|
|
|
15
15
|
}, _extends.apply(null, arguments);
|
|
16
16
|
}
|
|
17
17
|
|
|
18
|
-
/******************************************************************************
|
|
19
|
-
Copyright (c) Microsoft Corporation.
|
|
20
|
-
|
|
21
|
-
Permission to use, copy, modify, and/or distribute this software for any
|
|
22
|
-
purpose with or without fee is hereby granted.
|
|
23
|
-
|
|
24
|
-
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
|
|
25
|
-
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
|
|
26
|
-
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
|
|
27
|
-
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
|
|
28
|
-
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
|
|
29
|
-
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
|
|
30
|
-
PERFORMANCE OF THIS SOFTWARE.
|
|
31
|
-
***************************************************************************** */
|
|
32
|
-
/* global Reflect, Promise, SuppressedError, Symbol, Iterator */
|
|
33
|
-
|
|
34
|
-
var __assign = function () {
|
|
35
|
-
__assign = Object.assign || function __assign(t) {
|
|
36
|
-
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
37
|
-
s = arguments[i];
|
|
38
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
|
|
39
|
-
}
|
|
40
|
-
return t;
|
|
41
|
-
};
|
|
42
|
-
return __assign.apply(this, arguments);
|
|
43
|
-
};
|
|
44
|
-
function __rest(s, e) {
|
|
45
|
-
var t = {};
|
|
46
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
|
|
47
|
-
if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
48
|
-
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
|
|
49
|
-
}
|
|
50
|
-
return t;
|
|
51
|
-
}
|
|
52
|
-
typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
|
|
53
|
-
var e = new Error(message);
|
|
54
|
-
return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
|
|
55
|
-
};
|
|
56
|
-
|
|
57
18
|
var styles$k = {"button":"Button-module__button___18Bed","button--primary":"Button-module__button--primary___VuF-P","button--disabled":"Button-module__button--disabled___IuOY8","button--secondary":"Button-module__button--secondary___lD5E3","button--solid-grey":"Button-module__button--solid-grey___oRbEy","button--solid-black":"Button-module__button--solid-black___1Ma5K","button--solid-white":"Button-module__button--solid-white___bE-Z0","button--outlined-grey":"Button-module__button--outlined-grey___xWGbB","button--outlined-black":"Button-module__button--outlined-black___qfX5o","button--outlined-white":"Button-module__button--outlined-white___QLXNP","button--link-text":"Button-module__button--link-text___R2kun","button__icon":"Button-module__button__icon___hlcHo","button--link-text-alt":"Button-module__button--link-text-alt___1p7wH","button--external-link":"Button-module__button--external-link___Mhxuk","button--carousel-arrow-left":"Button-module__button--carousel-arrow-left___Wx-Jo","button--carousel-arrow-right":"Button-module__button--carousel-arrow-right___3ZtgT","button__icon__default":"Button-module__button__icon__default___0qlF1","button__icon__hover":"Button-module__button__icon__hover___3xPGT","button--extra-small":"Button-module__button--extra-small___R0QTM","button--small":"Button-module__button--small___ADJQe","button--medium":"Button-module__button--medium___ZuR4Z","button--large":"Button-module__button--large___-FaV5","button__icon--left":"Button-module__button__icon--left___wMCeH","button__icon--right":"Button-module__button__icon--right___-pGHl"};
|
|
58
19
|
|
|
59
20
|
function getDefaultExportFromCjs (x) {
|
|
@@ -131,10 +92,22 @@ function requireClassnames() {
|
|
|
131
92
|
var classnamesExports = requireClassnames();
|
|
132
93
|
var classNames = /*@__PURE__*/getDefaultExportFromCjs(classnamesExports);
|
|
133
94
|
|
|
134
|
-
/**
|
|
135
|
-
*
|
|
95
|
+
/**
|
|
96
|
+
* Button variant types
|
|
97
|
+
*/
|
|
98
|
+
|
|
99
|
+
/**
|
|
100
|
+
* Icon types for button
|
|
101
|
+
*/
|
|
102
|
+
|
|
103
|
+
/**
|
|
104
|
+
* Icon position
|
|
105
|
+
*/
|
|
106
|
+
|
|
107
|
+
/**
|
|
108
|
+
* Get the icon component based on icon type
|
|
136
109
|
*/
|
|
137
|
-
|
|
110
|
+
const getIcon = icon => {
|
|
138
111
|
switch (icon) {
|
|
139
112
|
case "arrow-right":
|
|
140
113
|
return /*#__PURE__*/React.createElement(FontAwesomeIcon, {
|
|
@@ -156,10 +129,11 @@ var getIcon = function (icon) {
|
|
|
156
129
|
return null;
|
|
157
130
|
}
|
|
158
131
|
};
|
|
159
|
-
|
|
160
|
-
|
|
132
|
+
|
|
133
|
+
/**
|
|
134
|
+
* Get default icon for certain variants
|
|
161
135
|
*/
|
|
162
|
-
|
|
136
|
+
const getDefaultIcon = variant => {
|
|
163
137
|
switch (variant) {
|
|
164
138
|
case "link-text":
|
|
165
139
|
case "link-text-alt":
|
|
@@ -176,10 +150,11 @@ var getDefaultIcon = function (variant) {
|
|
|
176
150
|
return "none";
|
|
177
151
|
}
|
|
178
152
|
};
|
|
179
|
-
|
|
180
|
-
|
|
153
|
+
|
|
154
|
+
/**
|
|
155
|
+
* Map alias variants to their actual CSS class variants
|
|
181
156
|
*/
|
|
182
|
-
|
|
157
|
+
const mapVariantToClass = variant => {
|
|
183
158
|
switch (variant) {
|
|
184
159
|
case "text":
|
|
185
160
|
return "link-text";
|
|
@@ -187,41 +162,42 @@ var mapVariantToClass = function (variant) {
|
|
|
187
162
|
return variant;
|
|
188
163
|
}
|
|
189
164
|
};
|
|
190
|
-
|
|
191
|
-
|
|
165
|
+
|
|
166
|
+
/**
|
|
167
|
+
* Primary UI component for user interaction
|
|
192
168
|
*/
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
_g = _a.iconPosition,
|
|
208
|
-
iconPosition = _g === void 0 ? "right" : _g,
|
|
209
|
-
ariaLabel = _a.ariaLabel;
|
|
210
|
-
_a.opensInNewTab;
|
|
211
|
-
var props = __rest(_a, ["children", "variant", "size", "disabled", "onClick", "type", "className", "icon", "iconPosition", "ariaLabel", "opensInNewTab"]);
|
|
169
|
+
const Button = ({
|
|
170
|
+
children,
|
|
171
|
+
variant = "primary",
|
|
172
|
+
size = "medium",
|
|
173
|
+
disabled = false,
|
|
174
|
+
onClick,
|
|
175
|
+
type = "button",
|
|
176
|
+
className,
|
|
177
|
+
icon,
|
|
178
|
+
iconPosition = "right",
|
|
179
|
+
ariaLabel,
|
|
180
|
+
opensInNewTab,
|
|
181
|
+
...props
|
|
182
|
+
}) => {
|
|
212
183
|
// Map alias variants to actual class names
|
|
213
|
-
|
|
184
|
+
const cssVariant = mapVariantToClass(variant);
|
|
185
|
+
|
|
214
186
|
// Determine the icon to display
|
|
215
|
-
|
|
216
|
-
|
|
187
|
+
const displayIcon = icon ?? getDefaultIcon(variant);
|
|
188
|
+
const iconElement = getIcon(displayIcon);
|
|
189
|
+
|
|
217
190
|
// Check if this is an icon-only button (carousel arrows)
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
191
|
+
const isIconOnly = variant === "carousel-arrow-left" || variant === "carousel-arrow-right";
|
|
192
|
+
const isCarouselLeft = variant === "carousel-arrow-left";
|
|
193
|
+
const isCarouselRight = variant === "carousel-arrow-right";
|
|
194
|
+
const buttonClasses = classNames(styles$k.button, styles$k[`button--${cssVariant}`], styles$k[`button--${size}`], {
|
|
195
|
+
[styles$k["button--disabled"]]: disabled
|
|
196
|
+
}, className);
|
|
197
|
+
const iconClasses = classNames(styles$k.button__icon, styles$k[`button__icon--${iconPosition}`]);
|
|
198
|
+
|
|
223
199
|
// Generate accessible label for icon-only buttons
|
|
224
|
-
|
|
200
|
+
const accessibleLabel = ariaLabel || (isIconOnly ? variant === "carousel-arrow-left" ? "Previous" : "Next" : undefined);
|
|
225
201
|
return /*#__PURE__*/React.createElement("button", _extends({
|
|
226
202
|
type: type,
|
|
227
203
|
className: buttonClasses,
|
|
@@ -252,62 +228,64 @@ var Button = function (_a) {
|
|
|
252
228
|
|
|
253
229
|
var styles$j = {"footer":"Footer-module__footer___Oavyx","footer--mobile":"Footer-module__footer--mobile___9HQC-","footer__container":"Footer-module__footer__container___ohvnm","footer__links":"Footer-module__footer__links___DdVK8","footer__linkGroup":"Footer-module__footer__linkGroup___1B7JA","footer__linkList":"Footer-module__footer__linkList___j-DWF","footer__linkHeading":"Footer-module__footer__linkHeading___LtE6X","footer__link":"Footer-module__footer__link___G5HPW","footer__cta":"Footer-module__footer__cta___MRJLr","footer__socialIcons":"Footer-module__footer__socialIcons___j0aRp","footer__socialIcon":"Footer-module__footer__socialIcon___1uVTm","footer__countrySelector":"Footer-module__footer__countrySelector___pVtN5","footer__bottom":"Footer-module__footer__bottom___77bPL","footer__bottomLeft":"Footer-module__footer__bottomLeft___tlst1","footer__bottomLinks":"Footer-module__footer__bottomLinks___s22h7","footer__bottomLink":"Footer-module__footer__bottomLink___SLzwY","footer__copyright":"Footer-module__footer__copyright___4bZOF","footer__brandSection":"Footer-module__footer__brandSection___BBr5f","footer__logo":"Footer-module__footer__logo___mv-9M","footer__leftCol":"Footer-module__footer__leftCol___vmKNN","footer__motto":"Footer-module__footer__motto___QtB2m","footer__main":"Footer-module__footer__main___NSU9d","footer__badge":"Footer-module__footer__badge___faejb","footer__badgeIcon":"Footer-module__footer__badgeIcon___xJ519","footer__badgeText":"Footer-module__footer__badgeText___imXgG","footer__linkText":"Footer-module__footer__linkText___Gc18Z","footer__linkIcon":"Footer-module__footer__linkIcon___IZzJM","footer__countrySelectorIcon":"Footer-module__footer__countrySelectorIcon___hhEd4"};
|
|
254
230
|
|
|
255
|
-
/**
|
|
256
|
-
* External link icon (↗) for footer links that open in new tabs
|
|
231
|
+
/**
|
|
232
|
+
* External link icon (↗) for footer links that open in new tabs
|
|
257
233
|
*/
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
/**
|
|
280
|
-
* Atlas Copco Group badge icon (square)
|
|
234
|
+
const ExternalLinkIcon = ({
|
|
235
|
+
className,
|
|
236
|
+
size = 15
|
|
237
|
+
}) => /*#__PURE__*/React.createElement("svg", {
|
|
238
|
+
width: size,
|
|
239
|
+
height: size,
|
|
240
|
+
viewBox: "0 0 15 15",
|
|
241
|
+
fill: "none",
|
|
242
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
243
|
+
className: className,
|
|
244
|
+
"aria-hidden": "true"
|
|
245
|
+
}, /*#__PURE__*/React.createElement("path", {
|
|
246
|
+
d: "M11.25 8.125V11.875C11.25 12.2065 11.1183 12.5245 10.8839 12.7589C10.6495 12.9933 10.3315 13.125 10 13.125H3.125C2.79348 13.125 2.47554 12.9933 2.24112 12.7589C2.0067 12.5245 1.875 12.2065 1.875 11.875V5C1.875 4.66848 2.0067 4.35054 2.24112 4.11612C2.47554 3.8817 2.79348 3.75 3.125 3.75H6.875M9.375 1.875H13.125M13.125 1.875V5.625M13.125 1.875L6.25 8.75",
|
|
247
|
+
stroke: "currentColor",
|
|
248
|
+
strokeWidth: "1.5",
|
|
249
|
+
strokeLinecap: "round",
|
|
250
|
+
strokeLinejoin: "round"
|
|
251
|
+
}));
|
|
252
|
+
|
|
253
|
+
/**
|
|
254
|
+
* Atlas Copco Group badge icon (square)
|
|
281
255
|
*/
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
256
|
+
const AtlasCopcoIcon = ({
|
|
257
|
+
className,
|
|
258
|
+
size = 14
|
|
259
|
+
}) => /*#__PURE__*/React.createElement("svg", {
|
|
260
|
+
width: size,
|
|
261
|
+
height: size,
|
|
262
|
+
viewBox: "0 0 14 14",
|
|
263
|
+
fill: "none",
|
|
264
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
265
|
+
className: className,
|
|
266
|
+
"aria-hidden": "true"
|
|
267
|
+
}, /*#__PURE__*/React.createElement("rect", {
|
|
268
|
+
x: "0.5",
|
|
269
|
+
y: "0.5",
|
|
270
|
+
width: "13",
|
|
271
|
+
height: "13",
|
|
272
|
+
rx: "1.5",
|
|
273
|
+
fill: "#D9D9D9",
|
|
274
|
+
stroke: "#D9D9D9"
|
|
275
|
+
}));
|
|
276
|
+
|
|
277
|
+
// =============================================================================
|
|
278
|
+
// TYPE DEFINITIONS
|
|
279
|
+
// =============================================================================
|
|
304
280
|
|
|
305
281
|
// =============================================================================
|
|
306
282
|
// SOCIAL ICON COMPONENT
|
|
307
283
|
// =============================================================================
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
284
|
+
|
|
285
|
+
const SocialIconComponent = ({
|
|
286
|
+
platform
|
|
287
|
+
}) => {
|
|
288
|
+
const iconMap = {
|
|
311
289
|
facebook: faFacebookF,
|
|
312
290
|
x: faXTwitter,
|
|
313
291
|
linkedin: faLinkedinIn,
|
|
@@ -318,14 +296,19 @@ var SocialIconComponent = function (_a) {
|
|
|
318
296
|
icon: iconMap[platform]
|
|
319
297
|
});
|
|
320
298
|
};
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
299
|
+
|
|
300
|
+
// =============================================================================
|
|
301
|
+
// FOOTER LINK COMPONENT
|
|
302
|
+
// =============================================================================
|
|
303
|
+
|
|
304
|
+
const FooterLink = ({
|
|
305
|
+
item,
|
|
306
|
+
className,
|
|
307
|
+
variant = 'default'
|
|
308
|
+
}) => {
|
|
309
|
+
const baseClass = variant === 'bottom' ? styles$j.footer__bottomLink : styles$j.footer__link;
|
|
310
|
+
const linkClasses = classNames(baseClass, className);
|
|
311
|
+
const handleClick = e => {
|
|
329
312
|
if (item.onClick) {
|
|
330
313
|
e.preventDefault();
|
|
331
314
|
item.onClick();
|
|
@@ -346,71 +329,89 @@ var FooterLink = function (_a) {
|
|
|
346
329
|
size: 15
|
|
347
330
|
})));
|
|
348
331
|
};
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
332
|
+
|
|
333
|
+
// =============================================================================
|
|
334
|
+
// FOOTER LINK GROUP COMPONENT
|
|
335
|
+
// =============================================================================
|
|
336
|
+
|
|
337
|
+
const FooterLinkGroup = ({
|
|
338
|
+
heading,
|
|
339
|
+
links,
|
|
340
|
+
className,
|
|
341
|
+
children
|
|
342
|
+
}) => {
|
|
354
343
|
return /*#__PURE__*/React.createElement("div", {
|
|
355
344
|
className: classNames(styles$j.footer__linkGroup, className)
|
|
356
345
|
}, /*#__PURE__*/React.createElement("h3", {
|
|
357
346
|
className: styles$j.footer__linkHeading
|
|
358
347
|
}, heading), /*#__PURE__*/React.createElement("ul", {
|
|
359
348
|
className: styles$j.footer__linkList
|
|
360
|
-
}, links.map(
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
}));
|
|
366
|
-
})), children);
|
|
349
|
+
}, links.map((link, index) => /*#__PURE__*/React.createElement("li", {
|
|
350
|
+
key: index
|
|
351
|
+
}, /*#__PURE__*/React.createElement(FooterLink, {
|
|
352
|
+
item: link
|
|
353
|
+
})))), children);
|
|
367
354
|
};
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
|
|
355
|
+
|
|
356
|
+
// =============================================================================
|
|
357
|
+
// FOOTER SOCIAL ICONS COMPONENT
|
|
358
|
+
// =============================================================================
|
|
359
|
+
|
|
360
|
+
const FooterSocialIcons = ({
|
|
361
|
+
links,
|
|
362
|
+
className
|
|
363
|
+
}) => {
|
|
371
364
|
return /*#__PURE__*/React.createElement("div", {
|
|
372
365
|
className: classNames(styles$j.footer__socialIcons, className)
|
|
373
|
-
}, links.map(
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
|
|
383
|
-
}));
|
|
384
|
-
}));
|
|
366
|
+
}, links.map((link, index) => /*#__PURE__*/React.createElement("a", {
|
|
367
|
+
key: index,
|
|
368
|
+
href: link.href,
|
|
369
|
+
className: styles$j.footer__socialIcon,
|
|
370
|
+
"aria-label": link.ariaLabel,
|
|
371
|
+
target: "_blank",
|
|
372
|
+
rel: "noopener noreferrer"
|
|
373
|
+
}, /*#__PURE__*/React.createElement(SocialIconComponent, {
|
|
374
|
+
platform: link.platform
|
|
375
|
+
}))));
|
|
385
376
|
};
|
|
386
|
-
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
|
|
377
|
+
|
|
378
|
+
// =============================================================================
|
|
379
|
+
// FOOTER SOCIAL ICON (STANDALONE) COMPONENT
|
|
380
|
+
// =============================================================================
|
|
381
|
+
|
|
382
|
+
const FooterSocialIcon = ({
|
|
383
|
+
platform,
|
|
384
|
+
className
|
|
385
|
+
}) => {
|
|
386
|
+
const iconClasses = classNames(styles$j.footer__socialIcon, className);
|
|
390
387
|
return /*#__PURE__*/React.createElement("span", {
|
|
391
388
|
className: iconClasses
|
|
392
389
|
}, /*#__PURE__*/React.createElement(SocialIconComponent, {
|
|
393
390
|
platform: platform
|
|
394
391
|
}));
|
|
395
392
|
};
|
|
396
|
-
|
|
397
|
-
|
|
398
|
-
|
|
399
|
-
|
|
400
|
-
|
|
393
|
+
|
|
394
|
+
// =============================================================================
|
|
395
|
+
// FOOTER BOTTOM COMPONENT
|
|
396
|
+
// =============================================================================
|
|
397
|
+
|
|
398
|
+
const FooterBottom = ({
|
|
399
|
+
links,
|
|
400
|
+
copyright,
|
|
401
|
+
countrySelector,
|
|
402
|
+
className
|
|
403
|
+
}) => {
|
|
401
404
|
return /*#__PURE__*/React.createElement("div", {
|
|
402
405
|
className: classNames(styles$j.footer__bottom, className)
|
|
403
406
|
}, /*#__PURE__*/React.createElement("div", {
|
|
404
407
|
className: styles$j.footer__bottomLeft
|
|
405
408
|
}, /*#__PURE__*/React.createElement("div", {
|
|
406
409
|
className: styles$j.footer__bottomLinks
|
|
407
|
-
}, links.map(
|
|
408
|
-
|
|
409
|
-
|
|
410
|
-
|
|
411
|
-
|
|
412
|
-
});
|
|
413
|
-
})), /*#__PURE__*/React.createElement("p", {
|
|
410
|
+
}, links.map((link, index) => /*#__PURE__*/React.createElement(FooterLink, {
|
|
411
|
+
key: index,
|
|
412
|
+
item: link,
|
|
413
|
+
variant: "bottom"
|
|
414
|
+
}))), /*#__PURE__*/React.createElement("p", {
|
|
414
415
|
className: styles$j.footer__copyright
|
|
415
416
|
}, copyright)), countrySelector && /*#__PURE__*/React.createElement("a", {
|
|
416
417
|
href: countrySelector.href || '#',
|
|
@@ -421,61 +422,61 @@ var FooterBottom = function (_a) {
|
|
|
421
422
|
icon: faGlobe
|
|
422
423
|
})), countrySelector.label));
|
|
423
424
|
};
|
|
425
|
+
|
|
424
426
|
// =============================================================================
|
|
425
427
|
// MAIN FOOTER COMPONENT
|
|
426
428
|
// =============================================================================
|
|
427
|
-
|
|
428
|
-
|
|
429
|
-
*
|
|
430
|
-
*
|
|
431
|
-
* -
|
|
429
|
+
|
|
430
|
+
/**
|
|
431
|
+
* Footer component with brand identity, navigation links, social icons, and legal information.
|
|
432
|
+
* Supports two layout variants:
|
|
433
|
+
* - desktop: Logo at top, 3-column main content
|
|
434
|
+
* - mobile: Logo at bottom, stacked layout with CTA button
|
|
432
435
|
*/
|
|
433
|
-
|
|
434
|
-
|
|
435
|
-
|
|
436
|
-
|
|
437
|
-
|
|
438
|
-
|
|
439
|
-
|
|
440
|
-
|
|
441
|
-
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
|
|
445
|
-
|
|
446
|
-
|
|
447
|
-
|
|
448
|
-
|
|
449
|
-
|
|
450
|
-
|
|
451
|
-
|
|
452
|
-
|
|
453
|
-
var LogoWrapper = logo.href ? 'a' : 'div';
|
|
454
|
-
var logoProps = logo.href ? {
|
|
436
|
+
const Footer = ({
|
|
437
|
+
variant = 'desktop',
|
|
438
|
+
logo,
|
|
439
|
+
motto,
|
|
440
|
+
atlasCopcoBadge,
|
|
441
|
+
quickLinks,
|
|
442
|
+
quickLinksHeading = 'Quick links',
|
|
443
|
+
contactLinks,
|
|
444
|
+
contactHeading = 'Contact us',
|
|
445
|
+
socialLinks,
|
|
446
|
+
contactFormButton,
|
|
447
|
+
bottomLinks,
|
|
448
|
+
copyright,
|
|
449
|
+
countrySelector,
|
|
450
|
+
className
|
|
451
|
+
}) => {
|
|
452
|
+
const isMobile = variant === 'mobile';
|
|
453
|
+
const footerClasses = classNames(styles$j.footer, isMobile && styles$j['footer--mobile'], className);
|
|
454
|
+
const LogoWrapper = logo.href ? 'a' : 'div';
|
|
455
|
+
const logoProps = logo.href ? {
|
|
455
456
|
href: logo.href,
|
|
456
457
|
className: styles$j.footer__logo
|
|
457
458
|
} : {
|
|
458
459
|
className: styles$j.footer__logo
|
|
459
460
|
};
|
|
461
|
+
|
|
460
462
|
// Logo + Motto + Badge component (used in both layouts)
|
|
461
|
-
|
|
462
|
-
|
|
463
|
-
|
|
464
|
-
|
|
465
|
-
|
|
466
|
-
|
|
467
|
-
|
|
468
|
-
|
|
469
|
-
|
|
470
|
-
|
|
471
|
-
|
|
472
|
-
|
|
473
|
-
|
|
474
|
-
|
|
475
|
-
|
|
476
|
-
|
|
477
|
-
|
|
478
|
-
};
|
|
463
|
+
const LogoSection = () => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(LogoWrapper, logoProps, /*#__PURE__*/React.createElement("img", {
|
|
464
|
+
src: logo.src,
|
|
465
|
+
alt: logo.alt
|
|
466
|
+
})), /*#__PURE__*/React.createElement("div", {
|
|
467
|
+
className: styles$j.footer__leftCol
|
|
468
|
+
}, /*#__PURE__*/React.createElement("h2", {
|
|
469
|
+
className: styles$j.footer__motto
|
|
470
|
+
}, motto), atlasCopcoBadge && /*#__PURE__*/React.createElement("div", {
|
|
471
|
+
className: styles$j.footer__badge
|
|
472
|
+
}, atlasCopcoBadge.showIcon !== false && /*#__PURE__*/React.createElement("span", {
|
|
473
|
+
className: styles$j.footer__badgeIcon
|
|
474
|
+
}, /*#__PURE__*/React.createElement(AtlasCopcoIcon, {
|
|
475
|
+
size: 14
|
|
476
|
+
})), /*#__PURE__*/React.createElement("span", {
|
|
477
|
+
className: styles$j.footer__badgeText
|
|
478
|
+
}, atlasCopcoBadge.text))));
|
|
479
|
+
|
|
479
480
|
// Mobile layout: Links at top, logo/motto at bottom
|
|
480
481
|
if (isMobile) {
|
|
481
482
|
return /*#__PURE__*/React.createElement("footer", {
|
|
@@ -513,6 +514,7 @@ var Footer = function (_a) {
|
|
|
513
514
|
className: styles$j.footer__brandSection
|
|
514
515
|
}, /*#__PURE__*/React.createElement(LogoSection, null))));
|
|
515
516
|
}
|
|
517
|
+
|
|
516
518
|
// Desktop layout: Logo at top, 3-column main content
|
|
517
519
|
return /*#__PURE__*/React.createElement("footer", {
|
|
518
520
|
className: footerClasses
|
|
@@ -554,17 +556,18 @@ var Footer = function (_a) {
|
|
|
554
556
|
|
|
555
557
|
var styles$i = {"pagination":"Pagination-module__pagination___Kih79","dividerLine":"Pagination-module__dividerLine___85LAX","paginationList":"Pagination-module__paginationList___-lZpm","paginationItem":"Pagination-module__paginationItem___VsGFa","pageButton":"Pagination-module__pageButton___b6UNF","pageButtonActive":"Pagination-module__pageButtonActive___D9m18","navButton":"Pagination-module__navButton___ZCIai","navButtonDisabled":"Pagination-module__navButtonDisabled___IZK8H","navIcon":"Pagination-module__navIcon___-BVJ3","ellipsis":"Pagination-module__ellipsis___iAsGN","ellipsisText":"Pagination-module__ellipsisText___fd6u1"};
|
|
556
558
|
|
|
557
|
-
|
|
558
|
-
|
|
559
|
-
|
|
560
|
-
|
|
561
|
-
|
|
562
|
-
|
|
559
|
+
const PaginationItem = ({
|
|
560
|
+
page,
|
|
561
|
+
isActive,
|
|
562
|
+
onClick,
|
|
563
|
+
className
|
|
564
|
+
}) => {
|
|
565
|
+
const handleClick = () => {
|
|
563
566
|
if (!isActive) {
|
|
564
567
|
onClick(page);
|
|
565
568
|
}
|
|
566
569
|
};
|
|
567
|
-
|
|
570
|
+
const handleKeyDown = event => {
|
|
568
571
|
if (event.key === "Enter" || event.key === " ") {
|
|
569
572
|
event.preventDefault();
|
|
570
573
|
handleClick();
|
|
@@ -576,22 +579,23 @@ var PaginationItem = function (_a) {
|
|
|
576
579
|
type: "button",
|
|
577
580
|
onClick: handleClick,
|
|
578
581
|
onKeyDown: handleKeyDown,
|
|
579
|
-
className:
|
|
582
|
+
className: `${styles$i.pageButton} ${isActive ? styles$i.pageButtonActive : ""} ${className || ""}`,
|
|
580
583
|
"aria-current": isActive ? "page" : undefined,
|
|
581
|
-
"aria-label":
|
|
584
|
+
"aria-label": `Page ${page}`,
|
|
582
585
|
disabled: isActive,
|
|
583
586
|
tabIndex: isActive ? -1 : 0
|
|
584
587
|
}, page));
|
|
585
588
|
};
|
|
586
589
|
|
|
587
|
-
|
|
588
|
-
|
|
589
|
-
|
|
590
|
-
|
|
591
|
-
|
|
592
|
-
|
|
593
|
-
|
|
594
|
-
|
|
590
|
+
const PaginationButton = ({
|
|
591
|
+
label,
|
|
592
|
+
disabled,
|
|
593
|
+
onClick,
|
|
594
|
+
direction,
|
|
595
|
+
className,
|
|
596
|
+
ariaLabel
|
|
597
|
+
}) => {
|
|
598
|
+
const handleKeyDown = event => {
|
|
595
599
|
if (event.key === "Enter" || event.key === " ") {
|
|
596
600
|
event.preventDefault();
|
|
597
601
|
if (!disabled) {
|
|
@@ -606,7 +610,7 @@ var PaginationButton = function (_a) {
|
|
|
606
610
|
onClick: onClick,
|
|
607
611
|
onKeyDown: handleKeyDown,
|
|
608
612
|
disabled: disabled,
|
|
609
|
-
className:
|
|
613
|
+
className: `${styles$i.navButton} ${styles$i[`navButton--${direction}`]} ${disabled ? styles$i.navButtonDisabled : ""} ${className || ""}`,
|
|
610
614
|
"aria-label": ariaLabel || label,
|
|
611
615
|
tabIndex: disabled ? -1 : 0
|
|
612
616
|
}, /*#__PURE__*/React.createElement("span", null, label), direction === "next" && /*#__PURE__*/React.createElement(FontAwesomeIcon, {
|
|
@@ -616,98 +620,98 @@ var PaginationButton = function (_a) {
|
|
|
616
620
|
})));
|
|
617
621
|
};
|
|
618
622
|
|
|
619
|
-
|
|
620
|
-
|
|
623
|
+
const PaginationEllipsis = ({
|
|
624
|
+
className
|
|
625
|
+
}) => {
|
|
621
626
|
return /*#__PURE__*/React.createElement("li", {
|
|
622
|
-
className:
|
|
627
|
+
className: `${styles$i.paginationItem} ${styles$i.ellipsis}`,
|
|
623
628
|
"aria-hidden": "true"
|
|
624
629
|
}, /*#__PURE__*/React.createElement("span", {
|
|
625
|
-
className:
|
|
630
|
+
className: `${styles$i.ellipsisText} ${className || ""}`
|
|
626
631
|
}, "..."));
|
|
627
632
|
};
|
|
628
633
|
|
|
629
|
-
/**
|
|
630
|
-
* Generate page numbers to display with ellipsis logic
|
|
634
|
+
/**
|
|
635
|
+
* Generate page numbers to display with ellipsis logic
|
|
631
636
|
*/
|
|
632
|
-
|
|
637
|
+
const generatePageNumbers = (currentPage, totalPages, maxVisiblePages) => {
|
|
633
638
|
if (totalPages <= maxVisiblePages) {
|
|
634
639
|
return Array.from({
|
|
635
640
|
length: totalPages
|
|
636
|
-
},
|
|
637
|
-
return i + 1;
|
|
638
|
-
});
|
|
641
|
+
}, (_, i) => i + 1);
|
|
639
642
|
}
|
|
640
|
-
|
|
641
|
-
|
|
643
|
+
const pages = [];
|
|
644
|
+
const halfVisible = Math.floor(maxVisiblePages / 2);
|
|
645
|
+
|
|
642
646
|
// Always show first page
|
|
643
647
|
pages.push(1);
|
|
644
|
-
|
|
645
|
-
|
|
648
|
+
let startPage = Math.max(2, currentPage - halfVisible);
|
|
649
|
+
let endPage = Math.min(totalPages - 1, currentPage + halfVisible);
|
|
650
|
+
|
|
646
651
|
// Adjust if we're near the start
|
|
647
652
|
if (currentPage <= halfVisible + 1) {
|
|
648
653
|
endPage = Math.min(maxVisiblePages - 1, totalPages - 1);
|
|
649
654
|
startPage = 2;
|
|
650
655
|
}
|
|
656
|
+
|
|
651
657
|
// Adjust if we're near the end
|
|
652
658
|
if (currentPage >= totalPages - halfVisible) {
|
|
653
659
|
startPage = Math.max(2, totalPages - maxVisiblePages + 2);
|
|
654
660
|
endPage = totalPages - 1;
|
|
655
661
|
}
|
|
662
|
+
|
|
656
663
|
// Add ellipsis after first page if needed
|
|
657
664
|
if (startPage > 2) {
|
|
658
665
|
pages.push("ellipsis-start");
|
|
659
666
|
}
|
|
667
|
+
|
|
660
668
|
// Add middle pages
|
|
661
|
-
for (
|
|
669
|
+
for (let i = startPage; i <= endPage; i++) {
|
|
662
670
|
pages.push(i);
|
|
663
671
|
}
|
|
672
|
+
|
|
664
673
|
// Add ellipsis before last page if needed
|
|
665
674
|
if (endPage < totalPages - 1) {
|
|
666
675
|
pages.push("ellipsis-end");
|
|
667
676
|
}
|
|
677
|
+
|
|
668
678
|
// Always show last page
|
|
669
679
|
if (totalPages > 1) {
|
|
670
680
|
pages.push(totalPages);
|
|
671
681
|
}
|
|
672
682
|
return pages;
|
|
673
683
|
};
|
|
674
|
-
|
|
675
|
-
|
|
676
|
-
|
|
677
|
-
|
|
678
|
-
|
|
679
|
-
|
|
680
|
-
|
|
681
|
-
|
|
682
|
-
|
|
683
|
-
|
|
684
|
-
|
|
685
|
-
|
|
686
|
-
|
|
687
|
-
|
|
688
|
-
className = _a.className,
|
|
689
|
-
_g = _a.ariaLabel,
|
|
690
|
-
ariaLabel = _g === void 0 ? "Pagination" : _g;
|
|
691
|
-
var pageNumbers = useMemo(function () {
|
|
692
|
-
return generatePageNumbers(currentPage, totalPages, maxVisiblePages);
|
|
693
|
-
}, [currentPage, totalPages, maxVisiblePages]);
|
|
694
|
-
var handlePageChange = function (page) {
|
|
684
|
+
const Pagination = ({
|
|
685
|
+
currentPage,
|
|
686
|
+
totalPages,
|
|
687
|
+
onPageChange,
|
|
688
|
+
maxVisiblePages = 10,
|
|
689
|
+
showPrevious = true,
|
|
690
|
+
showNext = true,
|
|
691
|
+
previousLabel = "Previous",
|
|
692
|
+
nextLabel = "Next",
|
|
693
|
+
className,
|
|
694
|
+
ariaLabel = "Pagination"
|
|
695
|
+
}) => {
|
|
696
|
+
const pageNumbers = useMemo(() => generatePageNumbers(currentPage, totalPages, maxVisiblePages), [currentPage, totalPages, maxVisiblePages]);
|
|
697
|
+
const handlePageChange = page => {
|
|
695
698
|
if (page >= 1 && page <= totalPages && page !== currentPage) {
|
|
696
699
|
onPageChange(page);
|
|
697
700
|
}
|
|
698
701
|
};
|
|
699
|
-
|
|
702
|
+
const handlePrevious = () => {
|
|
700
703
|
handlePageChange(currentPage - 1);
|
|
701
704
|
};
|
|
702
|
-
|
|
705
|
+
const handleNext = () => {
|
|
703
706
|
handlePageChange(currentPage + 1);
|
|
704
707
|
};
|
|
708
|
+
|
|
705
709
|
// Don't render if there's only one page or no pages
|
|
706
710
|
if (totalPages <= 1) {
|
|
707
711
|
return null;
|
|
708
712
|
}
|
|
709
713
|
return /*#__PURE__*/React.createElement("nav", {
|
|
710
|
-
className:
|
|
714
|
+
className: `${styles$i.pagination} ${className || ""}`,
|
|
711
715
|
"aria-label": ariaLabel,
|
|
712
716
|
role: "navigation"
|
|
713
717
|
}, /*#__PURE__*/React.createElement("div", {
|
|
@@ -720,10 +724,10 @@ var Pagination = function (_a) {
|
|
|
720
724
|
onClick: handlePrevious,
|
|
721
725
|
direction: "previous",
|
|
722
726
|
ariaLabel: "Go to previous page"
|
|
723
|
-
}), pageNumbers.map(
|
|
727
|
+
}), pageNumbers.map((page, index) => {
|
|
724
728
|
if (page === "ellipsis-start" || page === "ellipsis-end") {
|
|
725
729
|
return /*#__PURE__*/React.createElement(PaginationEllipsis, {
|
|
726
|
-
key:
|
|
730
|
+
key: `ellipsis-${index}`
|
|
727
731
|
});
|
|
728
732
|
}
|
|
729
733
|
return /*#__PURE__*/React.createElement(PaginationItem, {
|
|
@@ -745,76 +749,71 @@ var styles$h = {"productCard":"ProductCardHorizontal-module__productCard___Nl4jK
|
|
|
745
749
|
|
|
746
750
|
var styles$g = {"imageContainer":"Image-module__imageContainer___iD5Kd","loading":"Image-module__loading___Sh1zO","image":"Image-module__image___1pa50","error":"Image-module__error___0LGZ2","skeleton":"Image-module__skeleton___0bGS6","shimmer":"Image-module__shimmer___aanrl","errorState":"Image-module__errorState___TjV-8","errorIcon":"Image-module__errorIcon___QCKvj","errorText":"Image-module__errorText___Q8pnb"};
|
|
747
751
|
|
|
748
|
-
|
|
749
|
-
|
|
750
|
-
|
|
751
|
-
|
|
752
|
-
|
|
753
|
-
|
|
754
|
-
|
|
755
|
-
|
|
756
|
-
|
|
757
|
-
|
|
758
|
-
|
|
759
|
-
|
|
760
|
-
|
|
761
|
-
|
|
762
|
-
|
|
763
|
-
|
|
764
|
-
|
|
765
|
-
|
|
766
|
-
|
|
767
|
-
|
|
768
|
-
|
|
769
|
-
|
|
770
|
-
sizes = _a.sizes;
|
|
771
|
-
var _h = useState(true),
|
|
772
|
-
isLoading = _h[0],
|
|
773
|
-
setIsLoading = _h[1];
|
|
774
|
-
var _j = useState(false),
|
|
775
|
-
hasError = _j[0],
|
|
776
|
-
setHasError = _j[1];
|
|
777
|
-
var _k = useState(src),
|
|
778
|
-
currentSrc = _k[0],
|
|
779
|
-
setCurrentSrc = _k[1];
|
|
780
|
-
var handleLoad = useCallback(function () {
|
|
752
|
+
const Image = ({
|
|
753
|
+
src,
|
|
754
|
+
alt,
|
|
755
|
+
width,
|
|
756
|
+
height,
|
|
757
|
+
loading = "lazy",
|
|
758
|
+
decoding = "async",
|
|
759
|
+
objectFit = "cover",
|
|
760
|
+
objectPosition = "center",
|
|
761
|
+
aspectRatio,
|
|
762
|
+
isDecorative = false,
|
|
763
|
+
fallbackSrc,
|
|
764
|
+
onLoad,
|
|
765
|
+
onError,
|
|
766
|
+
className = "",
|
|
767
|
+
srcSet,
|
|
768
|
+
sizes
|
|
769
|
+
}) => {
|
|
770
|
+
const [isLoading, setIsLoading] = useState(true);
|
|
771
|
+
const [hasError, setHasError] = useState(false);
|
|
772
|
+
const [currentSrc, setCurrentSrc] = useState(src);
|
|
773
|
+
const handleLoad = useCallback(() => {
|
|
781
774
|
setIsLoading(false);
|
|
782
775
|
setHasError(false);
|
|
783
|
-
onLoad
|
|
776
|
+
onLoad?.();
|
|
784
777
|
}, [onLoad]);
|
|
785
|
-
|
|
778
|
+
const handleError = useCallback(() => {
|
|
786
779
|
setIsLoading(false);
|
|
787
780
|
setHasError(true);
|
|
781
|
+
|
|
788
782
|
// Try fallback if available and not already using it
|
|
789
783
|
if (fallbackSrc && currentSrc !== fallbackSrc) {
|
|
790
784
|
setCurrentSrc(fallbackSrc);
|
|
791
785
|
setHasError(false);
|
|
792
786
|
setIsLoading(true);
|
|
793
787
|
} else {
|
|
794
|
-
onError
|
|
788
|
+
onError?.();
|
|
795
789
|
}
|
|
796
790
|
}, [fallbackSrc, currentSrc, onError]);
|
|
791
|
+
|
|
797
792
|
// Accessibility: decorative images should have empty alt and be hidden from screen readers
|
|
798
|
-
|
|
793
|
+
const accessibilityProps = isDecorative ? {
|
|
799
794
|
alt: "",
|
|
800
795
|
"aria-hidden": true,
|
|
801
796
|
role: "presentation"
|
|
802
797
|
} : {
|
|
803
|
-
alt
|
|
798
|
+
alt
|
|
804
799
|
};
|
|
805
|
-
|
|
806
|
-
aspectRatio
|
|
807
|
-
|
|
808
|
-
|
|
809
|
-
|
|
810
|
-
|
|
811
|
-
|
|
812
|
-
|
|
813
|
-
|
|
814
|
-
|
|
800
|
+
const containerStyle = {
|
|
801
|
+
...(aspectRatio && {
|
|
802
|
+
aspectRatio
|
|
803
|
+
}),
|
|
804
|
+
...(width && {
|
|
805
|
+
width: typeof width === "number" ? `${width}px` : width
|
|
806
|
+
}),
|
|
807
|
+
...(height && {
|
|
808
|
+
height: typeof height === "number" ? `${height}px` : height
|
|
809
|
+
})
|
|
810
|
+
};
|
|
811
|
+
const imageStyle = {
|
|
812
|
+
objectFit,
|
|
813
|
+
objectPosition
|
|
815
814
|
};
|
|
816
815
|
return /*#__PURE__*/React.createElement("div", {
|
|
817
|
-
className:
|
|
816
|
+
className: `${styles$g.imageContainer} ${className} ${isLoading ? styles$g.loading : ""} ${hasError ? styles$g.error : ""}`,
|
|
818
817
|
style: containerStyle
|
|
819
818
|
}, isLoading && /*#__PURE__*/React.createElement("div", {
|
|
820
819
|
className: styles$g.skeleton,
|
|
@@ -877,26 +876,28 @@ const faArrowUpRight = {
|
|
|
877
876
|
icon: [384, 512, [], "e09f", "M328 96c13.3 0 24 10.7 24 24l0 240c0 13.3-10.7 24-24 24s-24-10.7-24-24l0-182.1L73 409c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l231-231L88 144c-13.3 0-24-10.7-24-24s10.7-24 24-24l240 0z"]
|
|
878
877
|
};
|
|
879
878
|
|
|
880
|
-
|
|
881
|
-
|
|
882
|
-
|
|
883
|
-
|
|
884
|
-
|
|
885
|
-
|
|
886
|
-
|
|
887
|
-
|
|
888
|
-
|
|
889
|
-
|
|
890
|
-
|
|
879
|
+
const ProductCardHorizontal = ({
|
|
880
|
+
id,
|
|
881
|
+
imageUrl,
|
|
882
|
+
url,
|
|
883
|
+
title,
|
|
884
|
+
description,
|
|
885
|
+
price,
|
|
886
|
+
productId,
|
|
887
|
+
button,
|
|
888
|
+
utm,
|
|
889
|
+
className = ""
|
|
890
|
+
}) => {
|
|
891
891
|
if (!title) {
|
|
892
892
|
return null;
|
|
893
893
|
}
|
|
894
|
+
const href = !utm || url && url.indexOf("utm") > -1 ? url : url + `?utm_source=${utm.utmSource}&utm_medium=${utm.utmMedium}&utm_campaign=${utm.utmCampaign}`;
|
|
894
895
|
return /*#__PURE__*/React.createElement("a", {
|
|
895
|
-
href:
|
|
896
|
-
className:
|
|
897
|
-
"aria-label":
|
|
896
|
+
href: href,
|
|
897
|
+
className: `${styles$h.productCard} ${className}`,
|
|
898
|
+
"aria-label": `View product: ${title}`
|
|
898
899
|
}, /*#__PURE__*/React.createElement("div", {
|
|
899
|
-
className:
|
|
900
|
+
className: `${styles$h.productWrapper} ${imageUrl ? styles$h.withImage : ""}`
|
|
900
901
|
}, imageUrl && /*#__PURE__*/React.createElement("div", {
|
|
901
902
|
className: styles$h.productImage
|
|
902
903
|
}, /*#__PURE__*/React.createElement(Image, {
|
|
@@ -922,61 +923,66 @@ var ProductCardHorizontal = function (_a) {
|
|
|
922
923
|
"aria-hidden": "true"
|
|
923
924
|
}))));
|
|
924
925
|
};
|
|
926
|
+
|
|
925
927
|
// Alias for backward compatibility
|
|
926
|
-
|
|
928
|
+
const ProductCardHorizontalParts = ProductCardHorizontal;
|
|
927
929
|
|
|
928
930
|
var styles$f = {"productDetails":"ProductCardDetails-module__productDetails___-sx2l","spareCard":"ProductCardDetails-module__spareCard___vC1Ju"};
|
|
929
931
|
|
|
930
932
|
// Adapter to map design system props to ProductCardHorizontalParts props
|
|
931
|
-
|
|
932
|
-
|
|
933
|
-
|
|
933
|
+
const SpareCardAdapter = props => {
|
|
934
|
+
const {
|
|
935
|
+
spare,
|
|
936
|
+
...rest
|
|
937
|
+
} = props;
|
|
934
938
|
return /*#__PURE__*/React.createElement(ProductCardHorizontalParts, {
|
|
935
939
|
className: styles$f.spareCard,
|
|
936
|
-
url:
|
|
937
|
-
title:
|
|
938
|
-
description:
|
|
939
|
-
price:
|
|
940
|
-
imageUrl:
|
|
940
|
+
url: spare?.url || spare?.link || "#",
|
|
941
|
+
title: spare?.name || spare?.title || "",
|
|
942
|
+
description: spare?.description || "",
|
|
943
|
+
price: spare?.priceValue || spare?.price || "",
|
|
944
|
+
imageUrl: spare?.["img-product"] || spare?.image || "",
|
|
945
|
+
utm: props.utm,
|
|
941
946
|
button: {
|
|
942
947
|
label: rest.cta || "View Product",
|
|
943
|
-
onClick:
|
|
944
|
-
return window.open((spare === null || spare === void 0 ? void 0 : spare.url) || (spare === null || spare === void 0 ? void 0 : spare.link) || "#", "_blank");
|
|
945
|
-
}
|
|
948
|
+
onClick: () => window.open(spare?.url || spare?.link || "#", "_blank")
|
|
946
949
|
}
|
|
947
950
|
});
|
|
948
951
|
};
|
|
952
|
+
|
|
949
953
|
// Re-export the design system component with Leybold styling
|
|
950
|
-
|
|
951
|
-
|
|
952
|
-
|
|
953
|
-
|
|
954
|
-
|
|
955
|
-
|
|
956
|
-
|
|
957
|
-
|
|
958
|
-
|
|
959
|
-
|
|
960
|
-
|
|
961
|
-
|
|
962
|
-
|
|
954
|
+
const ProductCardDetails = ({
|
|
955
|
+
id,
|
|
956
|
+
imageUrl,
|
|
957
|
+
title,
|
|
958
|
+
description,
|
|
959
|
+
price,
|
|
960
|
+
code,
|
|
961
|
+
facets,
|
|
962
|
+
hit,
|
|
963
|
+
utm,
|
|
964
|
+
className = "",
|
|
965
|
+
ProductCardComponent,
|
|
966
|
+
hidespares
|
|
967
|
+
}) => {
|
|
963
968
|
// Build the hit object expected by ProductDetailsCard
|
|
964
|
-
|
|
965
|
-
id
|
|
966
|
-
title
|
|
967
|
-
description
|
|
968
|
-
price
|
|
969
|
-
code
|
|
969
|
+
const hitData = hit || {
|
|
970
|
+
id,
|
|
971
|
+
title,
|
|
972
|
+
description,
|
|
973
|
+
price,
|
|
974
|
+
code,
|
|
970
975
|
image: imageUrl
|
|
971
976
|
};
|
|
972
977
|
return /*#__PURE__*/React.createElement("div", {
|
|
973
978
|
className: styles$f.productDetails
|
|
974
979
|
}, /*#__PURE__*/React.createElement(ProductDetailsCard, {
|
|
975
|
-
className:
|
|
980
|
+
className: `${className}`,
|
|
976
981
|
title: title,
|
|
977
982
|
imageUrl: imageUrl,
|
|
978
983
|
imageAlt: title,
|
|
979
984
|
hit: hitData,
|
|
985
|
+
utm: utm,
|
|
980
986
|
facets: facets,
|
|
981
987
|
usePlainClasses: true,
|
|
982
988
|
ProductCardComponent: ProductCardComponent || SpareCardAdapter,
|
|
@@ -986,68 +992,74 @@ var ProductCardDetails = function (_a) {
|
|
|
986
992
|
|
|
987
993
|
// Adapter component that maps props from AlgoliaDynamicSearchRaw to ProductCardHorizontal
|
|
988
994
|
// AlgoliaDynamicSearchRaw passes: title, cardLink, productPrice, cta, hit (original data)
|
|
989
|
-
|
|
990
|
-
|
|
991
|
-
|
|
992
|
-
|
|
993
|
-
|
|
994
|
-
|
|
995
|
-
|
|
996
|
-
|
|
997
|
-
|
|
995
|
+
const ProductCardAdapter = props => {
|
|
996
|
+
const {
|
|
997
|
+
hit,
|
|
998
|
+
title,
|
|
999
|
+
cardLink,
|
|
1000
|
+
productPrice,
|
|
1001
|
+
cta,
|
|
1002
|
+
showProductPrice,
|
|
1003
|
+
className,
|
|
1004
|
+
code,
|
|
1005
|
+
utm
|
|
1006
|
+
} = props;
|
|
998
1007
|
console.log(props);
|
|
999
1008
|
// Get values from direct props or fallback to hit object
|
|
1000
|
-
|
|
1001
|
-
|
|
1002
|
-
|
|
1003
|
-
|
|
1004
|
-
|
|
1005
|
-
|
|
1009
|
+
const url = cardLink || hit?.link || "#";
|
|
1010
|
+
const imageUrl = "";
|
|
1011
|
+
const price = showProductPrice ? productPrice || hit?.price || "" : "";
|
|
1012
|
+
const productTitle = title || hit?.title || "";
|
|
1013
|
+
const productCode = code || hit?.code || "";
|
|
1014
|
+
const buttonLabel = cta || "View Product";
|
|
1006
1015
|
return /*#__PURE__*/React.createElement(ProductCardHorizontalParts, {
|
|
1007
1016
|
imageUrl: imageUrl,
|
|
1008
1017
|
url: url,
|
|
1018
|
+
utm: utm,
|
|
1009
1019
|
title: productTitle,
|
|
1010
1020
|
description: productCode,
|
|
1011
1021
|
price: price,
|
|
1012
1022
|
button: {
|
|
1013
1023
|
label: buttonLabel,
|
|
1014
|
-
onClick:
|
|
1015
|
-
return window.open(url, "_blank");
|
|
1016
|
-
}
|
|
1024
|
+
onClick: () => window.open(url, "_blank")
|
|
1017
1025
|
},
|
|
1018
1026
|
className: className
|
|
1019
1027
|
});
|
|
1020
1028
|
};
|
|
1021
|
-
|
|
1022
|
-
|
|
1023
|
-
|
|
1024
|
-
|
|
1025
|
-
|
|
1026
|
-
|
|
1027
|
-
|
|
1028
|
-
|
|
1029
|
-
|
|
1030
|
-
|
|
1031
|
-
|
|
1032
|
-
|
|
1029
|
+
const ProductCardDetailsAdapter = props => {
|
|
1030
|
+
const {
|
|
1031
|
+
hit,
|
|
1032
|
+
title,
|
|
1033
|
+
cardLink,
|
|
1034
|
+
productPrice,
|
|
1035
|
+
cta,
|
|
1036
|
+
showProductPrice,
|
|
1037
|
+
className,
|
|
1038
|
+
code,
|
|
1039
|
+
utm,
|
|
1040
|
+
facets,
|
|
1041
|
+
related_products,
|
|
1042
|
+
hidespares
|
|
1043
|
+
} = props;
|
|
1033
1044
|
if (!title) {
|
|
1034
1045
|
return null;
|
|
1035
1046
|
}
|
|
1036
1047
|
return /*#__PURE__*/React.createElement(ProductCardDetails, {
|
|
1037
|
-
imageUrl:
|
|
1048
|
+
imageUrl: hit?.image || "",
|
|
1038
1049
|
title: title,
|
|
1039
|
-
description:
|
|
1040
|
-
price:
|
|
1041
|
-
code:
|
|
1050
|
+
description: hit?.description || "",
|
|
1051
|
+
price: hit?.price || "" || productPrice,
|
|
1052
|
+
code: hit?.code || "" || code,
|
|
1042
1053
|
hit: hit,
|
|
1054
|
+
utm: utm,
|
|
1043
1055
|
className: className,
|
|
1044
1056
|
facets: facets,
|
|
1045
|
-
relatedProducts:
|
|
1057
|
+
relatedProducts: hit?.related_products || related_products,
|
|
1046
1058
|
hidespares: hidespares
|
|
1047
1059
|
});
|
|
1048
1060
|
};
|
|
1049
|
-
|
|
1050
|
-
|
|
1061
|
+
const AlgoliaDynamicSearchLeybold = props => {
|
|
1062
|
+
const innerComponents = {
|
|
1051
1063
|
ProductCard: ProductCardAdapter,
|
|
1052
1064
|
ProductDetailsCard: ProductCardDetailsAdapter
|
|
1053
1065
|
};
|
|
@@ -1056,20 +1068,22 @@ var AlgoliaDynamicSearchLeybold = function (props) {
|
|
|
1056
1068
|
}));
|
|
1057
1069
|
};
|
|
1058
1070
|
|
|
1059
|
-
|
|
1060
|
-
|
|
1061
|
-
|
|
1062
|
-
|
|
1063
|
-
|
|
1064
|
-
|
|
1065
|
-
|
|
1066
|
-
|
|
1067
|
-
|
|
1068
|
-
|
|
1069
|
-
|
|
1070
|
-
|
|
1071
|
+
// Adapter to map QrForm's expected button props to our Button component
|
|
1072
|
+
|
|
1073
|
+
const QrFormButtonAdapter = ({
|
|
1074
|
+
label,
|
|
1075
|
+
onClick,
|
|
1076
|
+
buttonStyle = "primary",
|
|
1077
|
+
href,
|
|
1078
|
+
target,
|
|
1079
|
+
type = "button",
|
|
1080
|
+
element,
|
|
1081
|
+
"data-page_target": pageTarget,
|
|
1082
|
+
className
|
|
1083
|
+
}) => {
|
|
1071
1084
|
// Map buttonStyle to our variant
|
|
1072
|
-
|
|
1085
|
+
const variant = buttonStyle === "secondary" ? "secondary" : "primary";
|
|
1086
|
+
|
|
1073
1087
|
// If it's an anchor element (has href or element='a'), render as link
|
|
1074
1088
|
if (element === "a" || href) {
|
|
1075
1089
|
return /*#__PURE__*/React.createElement("a", {
|
|
@@ -1088,19 +1102,18 @@ var QrFormButtonAdapter = function (_a) {
|
|
|
1088
1102
|
size: "small"
|
|
1089
1103
|
}, label));
|
|
1090
1104
|
}
|
|
1105
|
+
|
|
1091
1106
|
// Otherwise render as button
|
|
1092
1107
|
return /*#__PURE__*/React.createElement(Button, {
|
|
1093
1108
|
variant: variant,
|
|
1094
1109
|
type: type,
|
|
1095
|
-
onClick: onClick ?
|
|
1096
|
-
return onClick(e);
|
|
1097
|
-
} : undefined,
|
|
1110
|
+
onClick: onClick ? e => onClick(e) : undefined,
|
|
1098
1111
|
className: className,
|
|
1099
1112
|
"data-page_target": pageTarget,
|
|
1100
1113
|
size: "small"
|
|
1101
1114
|
}, label);
|
|
1102
1115
|
};
|
|
1103
|
-
|
|
1116
|
+
const QrFormLeybold = props => {
|
|
1104
1117
|
return /*#__PURE__*/React.createElement("div", {
|
|
1105
1118
|
className: "qr-journey-form-wrapper"
|
|
1106
1119
|
}, /*#__PURE__*/React.createElement(QrForm, _extends({}, props, {
|
|
@@ -1110,17 +1123,16 @@ var QrFormLeybold = function (props) {
|
|
|
1110
1123
|
|
|
1111
1124
|
var styles$e = {"overlay":"SearchModal-module__overlay___Vbvg9","modal":"SearchModal-module__modal___1k5gO","closeButton":"SearchModal-module__closeButton___AN0zt","closeButton__icon":"SearchModal-module__closeButton__icon___vISSw","closeButton__text":"SearchModal-module__closeButton__text___-4EH1","closeButtonDesktop":"SearchModal-module__closeButtonDesktop___Lxxb0","closeButtonMobile":"SearchModal-module__closeButtonMobile___WIIMS","stickyHeader":"SearchModal-module__stickyHeader___wp-gA","scrollableContent":"SearchModal-module__scrollableContent___lrZP3"};
|
|
1112
1125
|
|
|
1113
|
-
|
|
1114
|
-
|
|
1115
|
-
|
|
1116
|
-
|
|
1117
|
-
|
|
1118
|
-
className = _c === void 0 ? '' : _c;
|
|
1126
|
+
const ModalCloseButton = ({
|
|
1127
|
+
onClick,
|
|
1128
|
+
ariaLabel = 'Close search',
|
|
1129
|
+
className = ''
|
|
1130
|
+
}) => {
|
|
1119
1131
|
return /*#__PURE__*/React.createElement("button", {
|
|
1120
1132
|
type: "button",
|
|
1121
1133
|
onClick: onClick,
|
|
1122
1134
|
"aria-label": ariaLabel,
|
|
1123
|
-
className:
|
|
1135
|
+
className: `${styles$e.closeButton} ${className}`
|
|
1124
1136
|
}, /*#__PURE__*/React.createElement("span", {
|
|
1125
1137
|
className: styles$e.closeButton__icon
|
|
1126
1138
|
}, /*#__PURE__*/React.createElement("svg", {
|
|
@@ -1147,80 +1159,79 @@ var ModalCloseButton = function (_a) {
|
|
|
1147
1159
|
}, "CLOSE X"));
|
|
1148
1160
|
};
|
|
1149
1161
|
|
|
1150
|
-
|
|
1151
|
-
|
|
1152
|
-
|
|
1153
|
-
|
|
1154
|
-
|
|
1155
|
-
|
|
1156
|
-
|
|
1157
|
-
|
|
1158
|
-
|
|
1159
|
-
|
|
1160
|
-
|
|
1161
|
-
useEffect(function () {
|
|
1162
|
+
const SearchModal = ({
|
|
1163
|
+
isOpen,
|
|
1164
|
+
onClose,
|
|
1165
|
+
title = 'Search',
|
|
1166
|
+
children,
|
|
1167
|
+
className = '',
|
|
1168
|
+
stickyHeaderContent
|
|
1169
|
+
}) => {
|
|
1170
|
+
const modalRef = useRef(null);
|
|
1171
|
+
const previouslyFocusedElement = useRef(null);
|
|
1172
|
+
useEffect(() => {
|
|
1162
1173
|
if (isOpen) {
|
|
1163
1174
|
// Store the previously focused element
|
|
1164
1175
|
previouslyFocusedElement.current = document.activeElement;
|
|
1176
|
+
|
|
1165
1177
|
// Focus the modal
|
|
1166
1178
|
if (modalRef.current) {
|
|
1167
1179
|
modalRef.current.focus();
|
|
1168
1180
|
}
|
|
1181
|
+
|
|
1169
1182
|
// Prevent body scroll
|
|
1170
1183
|
document.body.style.overflow = 'hidden';
|
|
1171
1184
|
} else {
|
|
1172
1185
|
// Restore body scroll
|
|
1173
1186
|
document.body.style.overflow = '';
|
|
1187
|
+
|
|
1174
1188
|
// Return focus to previously focused element
|
|
1175
1189
|
if (previouslyFocusedElement.current) {
|
|
1176
1190
|
previouslyFocusedElement.current.focus();
|
|
1177
1191
|
}
|
|
1178
1192
|
}
|
|
1179
|
-
return
|
|
1193
|
+
return () => {
|
|
1180
1194
|
document.body.style.overflow = '';
|
|
1181
1195
|
};
|
|
1182
1196
|
}, [isOpen]);
|
|
1183
|
-
useEffect(
|
|
1184
|
-
|
|
1197
|
+
useEffect(() => {
|
|
1198
|
+
const handleEscape = event => {
|
|
1185
1199
|
if (event.key === 'Escape' && isOpen) {
|
|
1186
1200
|
onClose();
|
|
1187
1201
|
}
|
|
1188
1202
|
};
|
|
1189
1203
|
document.addEventListener('keydown', handleEscape);
|
|
1190
|
-
return
|
|
1191
|
-
return document.removeEventListener('keydown', handleEscape);
|
|
1192
|
-
};
|
|
1204
|
+
return () => document.removeEventListener('keydown', handleEscape);
|
|
1193
1205
|
}, [isOpen, onClose]);
|
|
1206
|
+
|
|
1194
1207
|
// Focus trap implementation
|
|
1195
|
-
useEffect(
|
|
1208
|
+
useEffect(() => {
|
|
1196
1209
|
if (!isOpen || !modalRef.current) return;
|
|
1197
|
-
|
|
1198
|
-
|
|
1199
|
-
|
|
1200
|
-
|
|
1201
|
-
|
|
1210
|
+
const modal = modalRef.current;
|
|
1211
|
+
const focusableElements = modal.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
|
|
1212
|
+
const firstElement = focusableElements[0];
|
|
1213
|
+
const lastElement = focusableElements[focusableElements.length - 1];
|
|
1214
|
+
const handleTab = event => {
|
|
1202
1215
|
if (event.key !== 'Tab') return;
|
|
1203
1216
|
if (event.shiftKey) {
|
|
1204
1217
|
// Shift + Tab
|
|
1205
1218
|
if (document.activeElement === firstElement) {
|
|
1206
1219
|
event.preventDefault();
|
|
1207
|
-
lastElement
|
|
1220
|
+
lastElement?.focus();
|
|
1208
1221
|
}
|
|
1209
1222
|
} else {
|
|
1210
1223
|
// Tab
|
|
1211
1224
|
if (document.activeElement === lastElement) {
|
|
1212
1225
|
event.preventDefault();
|
|
1213
|
-
firstElement
|
|
1226
|
+
firstElement?.focus();
|
|
1214
1227
|
}
|
|
1215
1228
|
}
|
|
1216
1229
|
};
|
|
1217
1230
|
modal.addEventListener('keydown', handleTab);
|
|
1218
|
-
return
|
|
1219
|
-
return modal.removeEventListener('keydown', handleTab);
|
|
1220
|
-
};
|
|
1231
|
+
return () => modal.removeEventListener('keydown', handleTab);
|
|
1221
1232
|
}, [isOpen]);
|
|
1222
1233
|
if (!isOpen) return null;
|
|
1223
|
-
|
|
1234
|
+
const handleOverlayClick = event => {
|
|
1224
1235
|
if (event.target === event.currentTarget) {
|
|
1225
1236
|
onClose();
|
|
1226
1237
|
}
|
|
@@ -1235,7 +1246,7 @@ var SearchModal = function (_a) {
|
|
|
1235
1246
|
"aria-modal": "true",
|
|
1236
1247
|
"aria-label": title,
|
|
1237
1248
|
tabIndex: -1,
|
|
1238
|
-
className:
|
|
1249
|
+
className: `${styles$e.modal} ${className}`
|
|
1239
1250
|
}, /*#__PURE__*/React.createElement("div", {
|
|
1240
1251
|
className: styles$e.stickyHeader
|
|
1241
1252
|
}, /*#__PURE__*/React.createElement(ModalCloseButton, {
|
|
@@ -1251,11 +1262,11 @@ var SearchModal = function (_a) {
|
|
|
1251
1262
|
|
|
1252
1263
|
var styles$d = {"searchBar":"SearchBar-module__searchBar___5ak1g","inputWrapper":"SearchBar-module__inputWrapper___-4wrM","searchIcon":"SearchBar-module__searchIcon___VAuDz","searchInput":"SearchBar-module__searchInput___1K4GN","clearButton":"SearchBar-module__clearButton___JQYg-","submitButton":"SearchBar-module__submitButton___DZWsQ","submitButton__text":"SearchBar-module__submitButton__text___WkUsL","submitButton__icon":"SearchBar-module__submitButton__icon___s-ltv"};
|
|
1253
1264
|
|
|
1254
|
-
|
|
1255
|
-
|
|
1256
|
-
|
|
1265
|
+
const SearchIcon = ({
|
|
1266
|
+
className = ''
|
|
1267
|
+
}) => {
|
|
1257
1268
|
return /*#__PURE__*/React.createElement("svg", {
|
|
1258
|
-
className:
|
|
1269
|
+
className: `${styles$d.searchIcon} ${className}`,
|
|
1259
1270
|
xmlns: "http://www.w3.org/2000/svg",
|
|
1260
1271
|
viewBox: "0 0 24 24",
|
|
1261
1272
|
fill: "none",
|
|
@@ -1273,17 +1284,15 @@ var SearchIcon = function (_a) {
|
|
|
1273
1284
|
}));
|
|
1274
1285
|
};
|
|
1275
1286
|
|
|
1276
|
-
|
|
1277
|
-
|
|
1278
|
-
|
|
1279
|
-
|
|
1280
|
-
|
|
1281
|
-
|
|
1282
|
-
|
|
1283
|
-
|
|
1284
|
-
|
|
1285
|
-
className = _d === void 0 ? '' : _d;
|
|
1286
|
-
var handleChange = function (event) {
|
|
1287
|
+
const SearchInput = ({
|
|
1288
|
+
value,
|
|
1289
|
+
onChange,
|
|
1290
|
+
onKeyDown,
|
|
1291
|
+
placeholder = 'Discover products, innovations, and resources...',
|
|
1292
|
+
autoFocus = false,
|
|
1293
|
+
className = ''
|
|
1294
|
+
}) => {
|
|
1295
|
+
const handleChange = event => {
|
|
1287
1296
|
onChange(event.target.value);
|
|
1288
1297
|
};
|
|
1289
1298
|
return /*#__PURE__*/React.createElement("input", {
|
|
@@ -1294,27 +1303,24 @@ var SearchInput = function (_a) {
|
|
|
1294
1303
|
placeholder: placeholder,
|
|
1295
1304
|
autoFocus: autoFocus,
|
|
1296
1305
|
"aria-label": "Search",
|
|
1297
|
-
className:
|
|
1306
|
+
className: `${styles$d.searchInput} ${className}`
|
|
1298
1307
|
});
|
|
1299
1308
|
};
|
|
1300
1309
|
|
|
1301
|
-
|
|
1302
|
-
|
|
1303
|
-
|
|
1304
|
-
|
|
1305
|
-
|
|
1306
|
-
|
|
1307
|
-
|
|
1308
|
-
|
|
1309
|
-
_a.variant;
|
|
1310
|
-
var _f = _a.className,
|
|
1311
|
-
className = _f === void 0 ? '' : _f;
|
|
1310
|
+
const SearchSubmitButton = ({
|
|
1311
|
+
onClick,
|
|
1312
|
+
disabled = false,
|
|
1313
|
+
ariaLabel = 'Search',
|
|
1314
|
+
label = 'Search',
|
|
1315
|
+
variant = 'instant',
|
|
1316
|
+
className = ''
|
|
1317
|
+
}) => {
|
|
1312
1318
|
return /*#__PURE__*/React.createElement("button", {
|
|
1313
1319
|
type: "submit",
|
|
1314
1320
|
onClick: onClick,
|
|
1315
1321
|
disabled: disabled,
|
|
1316
1322
|
"aria-label": ariaLabel,
|
|
1317
|
-
className:
|
|
1323
|
+
className: `${styles$d.submitButton} ${className}`
|
|
1318
1324
|
}, /*#__PURE__*/React.createElement("span", {
|
|
1319
1325
|
className: styles$d.submitButton__text
|
|
1320
1326
|
}, label), /*#__PURE__*/React.createElement("span", {
|
|
@@ -1322,34 +1328,32 @@ var SearchSubmitButton = function (_a) {
|
|
|
1322
1328
|
}, /*#__PURE__*/React.createElement(SearchIcon, null)));
|
|
1323
1329
|
};
|
|
1324
1330
|
|
|
1325
|
-
|
|
1326
|
-
|
|
1327
|
-
|
|
1328
|
-
|
|
1329
|
-
|
|
1330
|
-
|
|
1331
|
-
|
|
1332
|
-
|
|
1333
|
-
|
|
1334
|
-
|
|
1335
|
-
variant = _d === void 0 ? 'instant' : _d;
|
|
1336
|
-
var handleSubmit = function (event) {
|
|
1331
|
+
const SearchBar = ({
|
|
1332
|
+
value,
|
|
1333
|
+
onChange,
|
|
1334
|
+
onSubmit,
|
|
1335
|
+
placeholder,
|
|
1336
|
+
autoFocus = false,
|
|
1337
|
+
className = '',
|
|
1338
|
+
variant = 'instant'
|
|
1339
|
+
}) => {
|
|
1340
|
+
const handleSubmit = event => {
|
|
1337
1341
|
event.preventDefault();
|
|
1338
1342
|
onSubmit();
|
|
1339
1343
|
};
|
|
1340
|
-
|
|
1344
|
+
const handleKeyDown = event => {
|
|
1341
1345
|
if (event.key === 'Enter') {
|
|
1342
1346
|
event.preventDefault();
|
|
1343
1347
|
onSubmit();
|
|
1344
1348
|
}
|
|
1345
1349
|
};
|
|
1346
|
-
|
|
1350
|
+
const handleClear = () => {
|
|
1347
1351
|
onChange('');
|
|
1348
1352
|
};
|
|
1349
|
-
|
|
1353
|
+
const showClearButton = value.length > 0;
|
|
1350
1354
|
return /*#__PURE__*/React.createElement("form", {
|
|
1351
1355
|
onSubmit: handleSubmit,
|
|
1352
|
-
className:
|
|
1356
|
+
className: `${styles$d.searchBar} ${className}`
|
|
1353
1357
|
}, /*#__PURE__*/React.createElement("div", {
|
|
1354
1358
|
className: styles$d.inputWrapper
|
|
1355
1359
|
}, /*#__PURE__*/React.createElement(SearchIcon, null), /*#__PURE__*/React.createElement(SearchInput, {
|
|
@@ -1372,22 +1376,21 @@ var SearchBar = function (_a) {
|
|
|
1372
1376
|
|
|
1373
1377
|
var styles$c = {"contentCard":"ContentCardHorizontal-module__contentCard___l-Kim","contentCard--instant-view":"ContentCardHorizontal-module__contentCard--instant-view___4wK9-","contentExcerpt":"ContentCardHorizontal-module__contentExcerpt___tqg1v","contentCard--results-view":"ContentCardHorizontal-module__contentCard--results-view___oBP2u","contentMeta":"ContentCardHorizontal-module__contentMeta___rEW-X","contentCategory":"ContentCardHorizontal-module__contentCategory___NssVD","contentMetaText":"ContentCardHorizontal-module__contentMetaText___muYBN","contentTitle":"ContentCardHorizontal-module__contentTitle___54gEo"};
|
|
1374
1378
|
|
|
1375
|
-
|
|
1376
|
-
|
|
1377
|
-
|
|
1378
|
-
|
|
1379
|
-
|
|
1380
|
-
|
|
1381
|
-
|
|
1382
|
-
|
|
1383
|
-
|
|
1384
|
-
|
|
1385
|
-
|
|
1386
|
-
var cardClasses = classNames(styles$c.contentCard, styles$c["contentCard--".concat(variant)], className);
|
|
1379
|
+
const ContentCardHorizontal = ({
|
|
1380
|
+
id,
|
|
1381
|
+
title,
|
|
1382
|
+
url,
|
|
1383
|
+
category,
|
|
1384
|
+
meta,
|
|
1385
|
+
excerpt,
|
|
1386
|
+
className = "",
|
|
1387
|
+
variant = "instant-view"
|
|
1388
|
+
}) => {
|
|
1389
|
+
const cardClasses = classNames(styles$c.contentCard, styles$c[`contentCard--${variant}`], className);
|
|
1387
1390
|
return /*#__PURE__*/React.createElement("a", {
|
|
1388
1391
|
href: url,
|
|
1389
1392
|
className: cardClasses,
|
|
1390
|
-
"aria-label":
|
|
1393
|
+
"aria-label": `View content: ${title}`
|
|
1391
1394
|
}, /*#__PURE__*/React.createElement("div", {
|
|
1392
1395
|
className: styles$c.contentMeta
|
|
1393
1396
|
}, category && /*#__PURE__*/React.createElement("span", {
|
|
@@ -1403,21 +1406,23 @@ var ContentCardHorizontal = function (_a) {
|
|
|
1403
1406
|
|
|
1404
1407
|
var styles$b = {"instantResultsLayout":"InstantResults-module__instantResultsLayout___oy-o4","columnsGrid":"InstantResults-module__columnsGrid___bHRUM","resultsColumn":"InstantResults-module__resultsColumn___ZBSlT","columnHeader":"InstantResults-module__columnHeader___VYYhi","showingText":"InstantResults-module__showingText___lECiA","seeAllButton":"InstantResults-module__seeAllButton___xEDAX","chevronIcon":"InstantResults-module__chevronIcon___bjb3q","resultsList":"InstantResults-module__resultsList___7s3PT","divider":"InstantResults-module__divider___Ky6zK","loadingState":"InstantResults-module__loadingState___l0fMq","errorState":"InstantResults-module__errorState___hTBbE","spinner":"InstantResults-module__spinner___85jF-"};
|
|
1405
1408
|
|
|
1406
|
-
|
|
1407
|
-
|
|
1408
|
-
|
|
1409
|
-
|
|
1410
|
-
|
|
1411
|
-
|
|
1412
|
-
|
|
1413
|
-
|
|
1414
|
-
|
|
1415
|
-
|
|
1416
|
-
|
|
1409
|
+
const FederatedInstantResultsLayout = ({
|
|
1410
|
+
query,
|
|
1411
|
+
products,
|
|
1412
|
+
contents,
|
|
1413
|
+
isLoadingProducts,
|
|
1414
|
+
isLoadingContents,
|
|
1415
|
+
productsError,
|
|
1416
|
+
contentsError,
|
|
1417
|
+
onSeeAllProducts,
|
|
1418
|
+
onSeeAllContents,
|
|
1419
|
+
onSeeAllCombined
|
|
1420
|
+
}) => {
|
|
1417
1421
|
products.length + contents.length;
|
|
1422
|
+
|
|
1418
1423
|
// Show first 3 results from each category
|
|
1419
|
-
|
|
1420
|
-
|
|
1424
|
+
const displayProducts = products.slice(0, 3);
|
|
1425
|
+
const displayContents = contents.slice(0, 3);
|
|
1421
1426
|
return /*#__PURE__*/React.createElement("div", {
|
|
1422
1427
|
className: styles$b.instantResultsLayout
|
|
1423
1428
|
}, /*#__PURE__*/React.createElement("div", {
|
|
@@ -1455,13 +1460,11 @@ var FederatedInstantResultsLayout = function (_a) {
|
|
|
1455
1460
|
className: styles$b.errorState
|
|
1456
1461
|
}, /*#__PURE__*/React.createElement("p", null, productsError)) : displayProducts.length > 0 ? /*#__PURE__*/React.createElement("div", {
|
|
1457
1462
|
className: styles$b.resultsList
|
|
1458
|
-
}, displayProducts.map(
|
|
1459
|
-
|
|
1460
|
-
|
|
1461
|
-
|
|
1462
|
-
|
|
1463
|
-
}));
|
|
1464
|
-
})) : null), /*#__PURE__*/React.createElement("div", {
|
|
1463
|
+
}, displayProducts.map((product, index) => /*#__PURE__*/React.createElement(React.Fragment, {
|
|
1464
|
+
key: product.id
|
|
1465
|
+
}, /*#__PURE__*/React.createElement(ProductCardHorizontal, product), index < displayProducts.length - 1 && /*#__PURE__*/React.createElement("hr", {
|
|
1466
|
+
className: styles$b.divider
|
|
1467
|
+
})))) : null), /*#__PURE__*/React.createElement("div", {
|
|
1465
1468
|
className: styles$b.resultsColumn
|
|
1466
1469
|
}, /*#__PURE__*/React.createElement("div", {
|
|
1467
1470
|
className: styles$b.columnHeader
|
|
@@ -1494,42 +1497,39 @@ var FederatedInstantResultsLayout = function (_a) {
|
|
|
1494
1497
|
className: styles$b.errorState
|
|
1495
1498
|
}, /*#__PURE__*/React.createElement("p", null, contentsError)) : displayContents.length > 0 ? /*#__PURE__*/React.createElement("div", {
|
|
1496
1499
|
className: styles$b.resultsList
|
|
1497
|
-
}, displayContents.map(
|
|
1498
|
-
|
|
1499
|
-
|
|
1500
|
-
|
|
1501
|
-
|
|
1502
|
-
|
|
1503
|
-
|
|
1504
|
-
}));
|
|
1505
|
-
})) : null)));
|
|
1500
|
+
}, displayContents.map((content, index) => /*#__PURE__*/React.createElement(React.Fragment, {
|
|
1501
|
+
key: content.id
|
|
1502
|
+
}, /*#__PURE__*/React.createElement(ContentCardHorizontal, _extends({}, content, {
|
|
1503
|
+
variant: "instant-view"
|
|
1504
|
+
})), index < displayContents.length - 1 && /*#__PURE__*/React.createElement("hr", {
|
|
1505
|
+
className: styles$b.divider
|
|
1506
|
+
})))) : null)));
|
|
1506
1507
|
};
|
|
1507
1508
|
|
|
1508
1509
|
var styles$a = {"resultsCount":"ResultsCount-module__resultsCount___cNM6f"};
|
|
1509
1510
|
|
|
1510
|
-
|
|
1511
|
-
|
|
1512
|
-
|
|
1513
|
-
|
|
1514
|
-
|
|
1515
|
-
|
|
1511
|
+
const ResultsCount = ({
|
|
1512
|
+
count,
|
|
1513
|
+
type,
|
|
1514
|
+
className = ''
|
|
1515
|
+
}) => {
|
|
1516
|
+
const label = count === 1 ? type.slice(0, -1) : type;
|
|
1516
1517
|
return /*#__PURE__*/React.createElement("span", {
|
|
1517
|
-
className:
|
|
1518
|
+
className: `${styles$a.resultsCount} ${className}`
|
|
1518
1519
|
}, count, " ", label);
|
|
1519
1520
|
};
|
|
1520
1521
|
|
|
1521
1522
|
var styles$9 = {"seeAllButton":"SeeAllLinkButton-module__seeAllButton___eAQqJ"};
|
|
1522
1523
|
|
|
1523
|
-
|
|
1524
|
-
|
|
1525
|
-
|
|
1526
|
-
|
|
1527
|
-
|
|
1528
|
-
className = _c === void 0 ? '' : _c;
|
|
1524
|
+
const SeeAllLinkButton = ({
|
|
1525
|
+
onClick,
|
|
1526
|
+
label = 'See all results',
|
|
1527
|
+
className = ''
|
|
1528
|
+
}) => {
|
|
1529
1529
|
return /*#__PURE__*/React.createElement("button", {
|
|
1530
1530
|
type: "button",
|
|
1531
1531
|
onClick: onClick,
|
|
1532
|
-
className:
|
|
1532
|
+
className: `${styles$9.seeAllButton} ${className}`
|
|
1533
1533
|
}, label, /*#__PURE__*/React.createElement("svg", {
|
|
1534
1534
|
xmlns: "http://www.w3.org/2000/svg",
|
|
1535
1535
|
viewBox: "0 0 24 24",
|
|
@@ -1546,17 +1546,17 @@ var SeeAllLinkButton = function (_a) {
|
|
|
1546
1546
|
|
|
1547
1547
|
var styles$8 = {"resultsColumn":"ResultsColumn-module__resultsColumn___AexF5","columnHeader":"ResultsColumn-module__columnHeader___-aUWU","columnTitle":"ResultsColumn-module__columnTitle___Gddr-","resultsList":"ResultsColumn-module__resultsList___BkEie","columnFooter":"ResultsColumn-module__columnFooter___4zJUp","loadingState":"ResultsColumn-module__loadingState___wme5F","errorState":"ResultsColumn-module__errorState___NI4fW","emptyState":"ResultsColumn-module__emptyState___tvefj","spinner":"ResultsColumn-module__spinner___hhntn"};
|
|
1548
1548
|
|
|
1549
|
-
|
|
1550
|
-
|
|
1551
|
-
|
|
1552
|
-
|
|
1553
|
-
|
|
1554
|
-
|
|
1555
|
-
|
|
1556
|
-
|
|
1557
|
-
|
|
1549
|
+
const ResultsColumn = ({
|
|
1550
|
+
title,
|
|
1551
|
+
count,
|
|
1552
|
+
isLoading,
|
|
1553
|
+
error,
|
|
1554
|
+
onSeeAll,
|
|
1555
|
+
children,
|
|
1556
|
+
className = ''
|
|
1557
|
+
}) => {
|
|
1558
1558
|
return /*#__PURE__*/React.createElement("div", {
|
|
1559
|
-
className:
|
|
1559
|
+
className: `${styles$8.resultsColumn} ${className}`
|
|
1560
1560
|
}, /*#__PURE__*/React.createElement("div", {
|
|
1561
1561
|
className: styles$8.columnHeader
|
|
1562
1562
|
}, /*#__PURE__*/React.createElement("h3", {
|
|
@@ -1579,7 +1579,7 @@ var ResultsColumn = function (_a) {
|
|
|
1579
1579
|
className: styles$8.columnFooter
|
|
1580
1580
|
}, /*#__PURE__*/React.createElement(SeeAllLinkButton, {
|
|
1581
1581
|
onClick: onSeeAll,
|
|
1582
|
-
label:
|
|
1582
|
+
label: `See all ${title.toLowerCase()}`
|
|
1583
1583
|
}))));
|
|
1584
1584
|
};
|
|
1585
1585
|
|
|
@@ -1601,23 +1601,23 @@ const faXmark = {
|
|
|
1601
1601
|
icon: [384, 512, [128473, 10005, 10006, 10060, 215, "close", "multiply", "remove", "times"], "f00d", "M324.5 411.1c6.2 6.2 16.4 6.2 22.6 0s6.2-16.4 0-22.6L214.6 256 347.1 123.5c6.2-6.2 6.2-16.4 0-22.6s-16.4-6.2-22.6 0L192 233.4 59.6 100.9c-6.2-6.2-16.4-6.2-22.6 0s-6.2 16.4 0 22.6L169.4 256 36.9 388.5c-6.2 6.2-6.2 16.4 0 22.6s16.4 6.2 22.6 0L192 278.6 324.5 411.1z"]
|
|
1602
1602
|
};
|
|
1603
1603
|
|
|
1604
|
-
/**
|
|
1605
|
-
* FilterSearch - Search input for filtering facet values
|
|
1604
|
+
/**
|
|
1605
|
+
* FilterSearch - Search input for filtering facet values
|
|
1606
1606
|
*/
|
|
1607
|
-
|
|
1608
|
-
|
|
1609
|
-
|
|
1610
|
-
|
|
1611
|
-
|
|
1612
|
-
|
|
1613
|
-
|
|
1607
|
+
const FilterSearch = ({
|
|
1608
|
+
value,
|
|
1609
|
+
onChange,
|
|
1610
|
+
placeholder = "Search",
|
|
1611
|
+
className
|
|
1612
|
+
}) => {
|
|
1613
|
+
const handleChange = e => {
|
|
1614
1614
|
onChange(e.target.value);
|
|
1615
1615
|
};
|
|
1616
|
-
|
|
1616
|
+
const handleClear = () => {
|
|
1617
1617
|
onChange("");
|
|
1618
1618
|
};
|
|
1619
1619
|
return /*#__PURE__*/React.createElement("div", {
|
|
1620
|
-
className:
|
|
1620
|
+
className: `${styles$7.filterSearch} ${className || ""}`
|
|
1621
1621
|
}, !value && /*#__PURE__*/React.createElement(FontAwesomeIcon, {
|
|
1622
1622
|
icon: faMagnifyingGlass,
|
|
1623
1623
|
className: styles$7.searchIcon,
|
|
@@ -1639,43 +1639,42 @@ var FilterSearch = function (_a) {
|
|
|
1639
1639
|
})));
|
|
1640
1640
|
};
|
|
1641
1641
|
|
|
1642
|
-
|
|
1643
|
-
|
|
1644
|
-
|
|
1645
|
-
|
|
1646
|
-
|
|
1647
|
-
|
|
1648
|
-
|
|
1649
|
-
|
|
1650
|
-
|
|
1651
|
-
|
|
1652
|
-
|
|
1653
|
-
|
|
1654
|
-
|
|
1655
|
-
* FilterItem - Individual facet item with checkbox and count
|
|
1642
|
+
const CheckIcon = () => /*#__PURE__*/React.createElement("svg", {
|
|
1643
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
1644
|
+
width: "9",
|
|
1645
|
+
height: "7",
|
|
1646
|
+
viewBox: "0 0 9 7",
|
|
1647
|
+
fill: "none"
|
|
1648
|
+
}, /*#__PURE__*/React.createElement("path", {
|
|
1649
|
+
d: "M8.73456 0.104504C9.02185 0.279451 9.08614 0.615889 8.8772 0.856441L3.7342 6.77774C3.62371 6.90558 3.45294 6.98465 3.2641 6.99811C3.07525 7.01156 2.89244 6.95269 2.75984 6.84166L0.188342 4.68846C-0.0627808 4.47819 -0.0627808 4.13671 0.188342 3.92643C0.439465 3.71616 0.847289 3.71616 1.09841 3.92643L3.13753 5.63385L7.83856 0.222257C8.04749 -0.0182957 8.44929 -0.0721258 8.73658 0.102822L8.73456 0.104504Z",
|
|
1650
|
+
fill: "#E2001A"
|
|
1651
|
+
}));
|
|
1652
|
+
|
|
1653
|
+
/**
|
|
1654
|
+
* FilterItem - Individual facet item with checkbox and count
|
|
1656
1655
|
*/
|
|
1657
|
-
|
|
1658
|
-
|
|
1659
|
-
|
|
1660
|
-
|
|
1661
|
-
|
|
1662
|
-
|
|
1663
|
-
|
|
1664
|
-
|
|
1665
|
-
var handleChange = function () {
|
|
1656
|
+
const FilterItem = ({
|
|
1657
|
+
value,
|
|
1658
|
+
onToggle,
|
|
1659
|
+
className,
|
|
1660
|
+
variant = 'desktop',
|
|
1661
|
+
showCheckbox = true
|
|
1662
|
+
}) => {
|
|
1663
|
+
const handleChange = () => {
|
|
1666
1664
|
onToggle(value.value);
|
|
1667
1665
|
};
|
|
1668
|
-
|
|
1666
|
+
const handleKeyDown = e => {
|
|
1669
1667
|
if (e.key === "Enter" || e.key === " ") {
|
|
1670
1668
|
e.preventDefault();
|
|
1671
1669
|
onToggle(value.value);
|
|
1672
1670
|
}
|
|
1673
1671
|
};
|
|
1672
|
+
|
|
1674
1673
|
// Mobile variant: Plain button (no checkbox)
|
|
1675
1674
|
if (variant === 'mobile') {
|
|
1676
1675
|
return /*#__PURE__*/React.createElement("button", {
|
|
1677
1676
|
type: "button",
|
|
1678
|
-
className:
|
|
1677
|
+
className: `${styles$7.filterItemMobile} ${value.isRefined ? styles$7.filterItemMobileRefined : ''} ${className || ""}`,
|
|
1679
1678
|
onClick: handleChange,
|
|
1680
1679
|
onKeyDown: handleKeyDown,
|
|
1681
1680
|
"aria-pressed": value.isRefined
|
|
@@ -1685,11 +1684,12 @@ var FilterItem = function (_a) {
|
|
|
1685
1684
|
className: styles$7.filterCount
|
|
1686
1685
|
}, "(", value.count, ")"));
|
|
1687
1686
|
}
|
|
1687
|
+
|
|
1688
1688
|
// Desktop without checkbox (Content tab): Plain button with red text when selected
|
|
1689
1689
|
if (!showCheckbox) {
|
|
1690
1690
|
return /*#__PURE__*/React.createElement("button", {
|
|
1691
1691
|
type: "button",
|
|
1692
|
-
className:
|
|
1692
|
+
className: `${styles$7.filterItemDesktopNoCheckbox} ${value.isRefined ? styles$7.filterItemDesktopRefined : ''} ${className || ""}`,
|
|
1693
1693
|
onClick: handleChange,
|
|
1694
1694
|
onKeyDown: handleKeyDown,
|
|
1695
1695
|
"aria-pressed": value.isRefined
|
|
@@ -1699,16 +1699,17 @@ var FilterItem = function (_a) {
|
|
|
1699
1699
|
className: styles$7.filterCount
|
|
1700
1700
|
}, "(", value.count, ")"));
|
|
1701
1701
|
}
|
|
1702
|
+
|
|
1702
1703
|
// Desktop with checkbox (Products tab): Multi-select checkboxes
|
|
1703
1704
|
return /*#__PURE__*/React.createElement("label", {
|
|
1704
|
-
className:
|
|
1705
|
+
className: `${styles$7.filterItem} ${className || ""}`,
|
|
1705
1706
|
onKeyDown: handleKeyDown
|
|
1706
1707
|
}, /*#__PURE__*/React.createElement("input", {
|
|
1707
1708
|
type: "checkbox",
|
|
1708
1709
|
checked: value.isRefined,
|
|
1709
1710
|
onChange: handleChange,
|
|
1710
1711
|
className: styles$7.filterCheckboxInput,
|
|
1711
|
-
"aria-label":
|
|
1712
|
+
"aria-label": `${value.value} (${value.count} results)`
|
|
1712
1713
|
}), /*#__PURE__*/React.createElement("div", {
|
|
1713
1714
|
className: styles$7.filterCheckbox
|
|
1714
1715
|
}, value.isRefined && /*#__PURE__*/React.createElement(CheckIcon, null)), /*#__PURE__*/React.createElement("span", {
|
|
@@ -1718,61 +1719,57 @@ var FilterItem = function (_a) {
|
|
|
1718
1719
|
}, "(", value.count, ")"));
|
|
1719
1720
|
};
|
|
1720
1721
|
|
|
1721
|
-
/**
|
|
1722
|
-
* FilterAccordion - Collapsible facet section with optional search
|
|
1722
|
+
/**
|
|
1723
|
+
* FilterAccordion - Collapsible facet section with optional search
|
|
1723
1724
|
*/
|
|
1724
|
-
|
|
1725
|
-
|
|
1726
|
-
|
|
1727
|
-
|
|
1728
|
-
|
|
1729
|
-
|
|
1730
|
-
|
|
1731
|
-
|
|
1732
|
-
|
|
1733
|
-
|
|
1734
|
-
|
|
1735
|
-
searchQuery = _d[0],
|
|
1736
|
-
setSearchQuery = _d[1];
|
|
1725
|
+
const FilterAccordion = ({
|
|
1726
|
+
facet,
|
|
1727
|
+
isExpanded,
|
|
1728
|
+
onToggle,
|
|
1729
|
+
onValueToggle,
|
|
1730
|
+
className,
|
|
1731
|
+
variant = 'desktop',
|
|
1732
|
+
showCheckbox = true
|
|
1733
|
+
}) => {
|
|
1734
|
+
const [searchQuery, setSearchQuery] = useState("");
|
|
1735
|
+
|
|
1737
1736
|
// Filter facet values based on search query
|
|
1738
|
-
|
|
1737
|
+
const filteredValues = useMemo(() => {
|
|
1739
1738
|
if (!searchQuery.trim()) {
|
|
1740
1739
|
return facet.values;
|
|
1741
1740
|
}
|
|
1742
|
-
|
|
1743
|
-
return facet.values.filter(
|
|
1744
|
-
return value.value.toLowerCase().includes(query);
|
|
1745
|
-
});
|
|
1741
|
+
const query = searchQuery.toLowerCase();
|
|
1742
|
+
return facet.values.filter(value => value.value.toLowerCase().includes(query));
|
|
1746
1743
|
}, [facet.values, searchQuery]);
|
|
1747
|
-
|
|
1744
|
+
const handleToggle = () => {
|
|
1748
1745
|
onToggle();
|
|
1749
1746
|
// Clear search when collapsing
|
|
1750
1747
|
if (isExpanded) {
|
|
1751
1748
|
setSearchQuery("");
|
|
1752
1749
|
}
|
|
1753
1750
|
};
|
|
1754
|
-
|
|
1751
|
+
const handleKeyDown = e => {
|
|
1755
1752
|
if (e.key === "Enter" || e.key === " ") {
|
|
1756
1753
|
e.preventDefault();
|
|
1757
1754
|
handleToggle();
|
|
1758
1755
|
}
|
|
1759
1756
|
};
|
|
1760
|
-
|
|
1757
|
+
const handleValueToggle = value => {
|
|
1761
1758
|
onValueToggle(facet.attribute, value);
|
|
1762
1759
|
};
|
|
1763
1760
|
return /*#__PURE__*/React.createElement("div", {
|
|
1764
|
-
className:
|
|
1761
|
+
className: `${styles$7.filterAccordion} ${className || ""}`
|
|
1765
1762
|
}, /*#__PURE__*/React.createElement("button", {
|
|
1766
1763
|
type: "button",
|
|
1767
|
-
className:
|
|
1764
|
+
className: `${styles$7.accordionHeader} ${isExpanded ? styles$7.accordionHeaderExpanded : ""}`,
|
|
1768
1765
|
onClick: handleToggle,
|
|
1769
1766
|
onKeyDown: handleKeyDown,
|
|
1770
1767
|
"aria-expanded": isExpanded,
|
|
1771
|
-
"aria-controls":
|
|
1768
|
+
"aria-controls": `accordion-${facet.id}`
|
|
1772
1769
|
}, /*#__PURE__*/React.createElement("span", {
|
|
1773
1770
|
className: styles$7.accordionTitle
|
|
1774
1771
|
}, facet.label), /*#__PURE__*/React.createElement("svg", {
|
|
1775
|
-
className:
|
|
1772
|
+
className: `${styles$7.accordionIcon} ${isExpanded ? styles$7.accordionIconExpanded : ""}`,
|
|
1776
1773
|
width: "16",
|
|
1777
1774
|
height: "16",
|
|
1778
1775
|
viewBox: "0 0 16 16",
|
|
@@ -1786,7 +1783,7 @@ var FilterAccordion = function (_a) {
|
|
|
1786
1783
|
strokeLinecap: "round",
|
|
1787
1784
|
strokeLinejoin: "round"
|
|
1788
1785
|
}))), isExpanded && /*#__PURE__*/React.createElement("div", {
|
|
1789
|
-
id:
|
|
1786
|
+
id: `accordion-${facet.id}`,
|
|
1790
1787
|
className: styles$7.accordionContent
|
|
1791
1788
|
}, variant === 'desktop' && facet.searchable && facet.values.length > 5 && /*#__PURE__*/React.createElement("div", {
|
|
1792
1789
|
className: styles$7.accordionSearch
|
|
@@ -1796,39 +1793,38 @@ var FilterAccordion = function (_a) {
|
|
|
1796
1793
|
placeholder: "Search"
|
|
1797
1794
|
})), /*#__PURE__*/React.createElement("div", {
|
|
1798
1795
|
className: styles$7.filterList
|
|
1799
|
-
}, filteredValues.length > 0 ? filteredValues.map(
|
|
1800
|
-
|
|
1801
|
-
|
|
1802
|
-
|
|
1803
|
-
|
|
1804
|
-
|
|
1805
|
-
|
|
1806
|
-
});
|
|
1807
|
-
}) : /*#__PURE__*/React.createElement("div", {
|
|
1796
|
+
}, filteredValues.length > 0 ? filteredValues.map(value => /*#__PURE__*/React.createElement(FilterItem, {
|
|
1797
|
+
key: value.value,
|
|
1798
|
+
value: value,
|
|
1799
|
+
onToggle: handleValueToggle,
|
|
1800
|
+
variant: variant,
|
|
1801
|
+
showCheckbox: showCheckbox
|
|
1802
|
+
})) : /*#__PURE__*/React.createElement("div", {
|
|
1808
1803
|
className: styles$7.noResults
|
|
1809
1804
|
}, "No results found"))));
|
|
1810
1805
|
};
|
|
1811
1806
|
|
|
1812
|
-
/**
|
|
1813
|
-
* AppliedFilterTag - Individual removable filter tag/chip
|
|
1807
|
+
/**
|
|
1808
|
+
* AppliedFilterTag - Individual removable filter tag/chip
|
|
1814
1809
|
*/
|
|
1815
|
-
|
|
1816
|
-
|
|
1817
|
-
|
|
1818
|
-
|
|
1819
|
-
|
|
1820
|
-
|
|
1821
|
-
|
|
1810
|
+
const AppliedFilterTag = ({
|
|
1811
|
+
attribute,
|
|
1812
|
+
value,
|
|
1813
|
+
label,
|
|
1814
|
+
onRemove,
|
|
1815
|
+
className
|
|
1816
|
+
}) => {
|
|
1817
|
+
const handleRemove = () => {
|
|
1822
1818
|
onRemove(attribute, value);
|
|
1823
1819
|
};
|
|
1824
|
-
|
|
1820
|
+
const handleKeyDown = e => {
|
|
1825
1821
|
if (e.key === "Enter" || e.key === " ") {
|
|
1826
1822
|
e.preventDefault();
|
|
1827
1823
|
handleRemove();
|
|
1828
1824
|
}
|
|
1829
1825
|
};
|
|
1830
1826
|
return /*#__PURE__*/React.createElement("div", {
|
|
1831
|
-
className:
|
|
1827
|
+
className: `${styles$7.appliedFilterTag} ${className || ""}`
|
|
1832
1828
|
}, /*#__PURE__*/React.createElement("span", {
|
|
1833
1829
|
className: styles$7.tagLabel
|
|
1834
1830
|
}, label || value), /*#__PURE__*/React.createElement("button", {
|
|
@@ -1836,7 +1832,7 @@ var AppliedFilterTag = function (_a) {
|
|
|
1836
1832
|
onClick: handleRemove,
|
|
1837
1833
|
onKeyDown: handleKeyDown,
|
|
1838
1834
|
className: styles$7.tagRemoveButton,
|
|
1839
|
-
"aria-label":
|
|
1835
|
+
"aria-label": `Remove ${label || value} filter`
|
|
1840
1836
|
}, /*#__PURE__*/React.createElement("svg", {
|
|
1841
1837
|
width: "10",
|
|
1842
1838
|
height: "10",
|
|
@@ -1853,19 +1849,20 @@ var AppliedFilterTag = function (_a) {
|
|
|
1853
1849
|
}))));
|
|
1854
1850
|
};
|
|
1855
1851
|
|
|
1856
|
-
/**
|
|
1857
|
-
* AppliedFilters - Shows all active filters as removable tags
|
|
1852
|
+
/**
|
|
1853
|
+
* AppliedFilters - Shows all active filters as removable tags
|
|
1858
1854
|
*/
|
|
1859
|
-
|
|
1860
|
-
|
|
1861
|
-
|
|
1862
|
-
|
|
1863
|
-
|
|
1855
|
+
const AppliedFilters = ({
|
|
1856
|
+
facets,
|
|
1857
|
+
onRemove,
|
|
1858
|
+
onClearAll,
|
|
1859
|
+
className
|
|
1860
|
+
}) => {
|
|
1864
1861
|
// Extract all refined (selected) filters
|
|
1865
|
-
|
|
1866
|
-
|
|
1867
|
-
facets.forEach(
|
|
1868
|
-
facet.values.forEach(
|
|
1862
|
+
const appliedFilters = useMemo(() => {
|
|
1863
|
+
const filters = [];
|
|
1864
|
+
facets.forEach(facet => {
|
|
1865
|
+
facet.values.forEach(value => {
|
|
1869
1866
|
if (value.isRefined) {
|
|
1870
1867
|
filters.push({
|
|
1871
1868
|
attribute: facet.attribute,
|
|
@@ -1878,72 +1875,66 @@ var AppliedFilters = function (_a) {
|
|
|
1878
1875
|
});
|
|
1879
1876
|
return filters;
|
|
1880
1877
|
}, [facets]);
|
|
1878
|
+
|
|
1881
1879
|
// Don't render if no filters are applied
|
|
1882
1880
|
if (appliedFilters.length === 0) {
|
|
1883
1881
|
return null;
|
|
1884
1882
|
}
|
|
1885
1883
|
return /*#__PURE__*/React.createElement("div", {
|
|
1886
|
-
className:
|
|
1884
|
+
className: `${styles$7.appliedFilters} ${className || ""}`
|
|
1887
1885
|
}, /*#__PURE__*/React.createElement("h4", {
|
|
1888
1886
|
className: styles$7.appliedFiltersTitle
|
|
1889
1887
|
}, "Applied filters"), /*#__PURE__*/React.createElement("div", {
|
|
1890
1888
|
className: styles$7.appliedFiltersList
|
|
1891
|
-
}, appliedFilters.map(
|
|
1892
|
-
|
|
1893
|
-
|
|
1894
|
-
|
|
1895
|
-
|
|
1896
|
-
|
|
1897
|
-
|
|
1898
|
-
});
|
|
1899
|
-
})));
|
|
1889
|
+
}, appliedFilters.map(filter => /*#__PURE__*/React.createElement(AppliedFilterTag, {
|
|
1890
|
+
key: `${filter.attribute}-${filter.value}`,
|
|
1891
|
+
attribute: filter.attribute,
|
|
1892
|
+
value: filter.value,
|
|
1893
|
+
label: filter.label,
|
|
1894
|
+
onRemove: onRemove
|
|
1895
|
+
}))));
|
|
1900
1896
|
};
|
|
1901
1897
|
|
|
1902
|
-
/**
|
|
1903
|
-
* FiltersPanel - Main container for all filters
|
|
1904
|
-
*
|
|
1905
|
-
* Fully controlled component - renders based on facets prop.
|
|
1906
|
-
* When facets change (e.g., after API refetch), component re-renders with new data.
|
|
1907
|
-
* Accordion expansion state persists across refetches, with new facets respecting defaultExpanded.
|
|
1898
|
+
/**
|
|
1899
|
+
* FiltersPanel - Main container for all filters
|
|
1900
|
+
*
|
|
1901
|
+
* Fully controlled component - renders based on facets prop.
|
|
1902
|
+
* When facets change (e.g., after API refetch), component re-renders with new data.
|
|
1903
|
+
* Accordion expansion state persists across refetches, with new facets respecting defaultExpanded.
|
|
1908
1904
|
*/
|
|
1909
|
-
|
|
1910
|
-
|
|
1911
|
-
|
|
1912
|
-
|
|
1913
|
-
|
|
1914
|
-
|
|
1915
|
-
|
|
1916
|
-
|
|
1917
|
-
_d = _a.showCheckbox,
|
|
1918
|
-
showCheckbox = _d === void 0 ? true : _d;
|
|
1905
|
+
const FiltersPanel = ({
|
|
1906
|
+
facets,
|
|
1907
|
+
onFacetToggle,
|
|
1908
|
+
isLoading = false,
|
|
1909
|
+
className,
|
|
1910
|
+
variant = 'desktop',
|
|
1911
|
+
showCheckbox = true
|
|
1912
|
+
}) => {
|
|
1919
1913
|
// Track which accordions are expanded (transient UI state)
|
|
1920
|
-
|
|
1921
|
-
|
|
1922
|
-
|
|
1923
|
-
|
|
1924
|
-
|
|
1925
|
-
|
|
1926
|
-
|
|
1927
|
-
|
|
1928
|
-
|
|
1929
|
-
|
|
1930
|
-
|
|
1931
|
-
setExpandedAccordions = _e[1];
|
|
1914
|
+
const [expandedAccordions, setExpandedAccordions] = useState(() => {
|
|
1915
|
+
// Initialize with default expanded facets
|
|
1916
|
+
const expanded = new Set();
|
|
1917
|
+
facets.forEach(facet => {
|
|
1918
|
+
if (facet.defaultExpanded) {
|
|
1919
|
+
expanded.add(facet.id);
|
|
1920
|
+
}
|
|
1921
|
+
});
|
|
1922
|
+
return expanded;
|
|
1923
|
+
});
|
|
1924
|
+
|
|
1932
1925
|
// Sync expansion state when facets change (e.g., new facets appear after refetch)
|
|
1933
|
-
useEffect(
|
|
1934
|
-
setExpandedAccordions(
|
|
1935
|
-
|
|
1926
|
+
useEffect(() => {
|
|
1927
|
+
setExpandedAccordions(prev => {
|
|
1928
|
+
const next = new Set(prev);
|
|
1936
1929
|
// Add new facets with defaultExpanded
|
|
1937
|
-
facets.forEach(
|
|
1930
|
+
facets.forEach(facet => {
|
|
1938
1931
|
if (facet.defaultExpanded && !next.has(facet.id)) {
|
|
1939
1932
|
next.add(facet.id);
|
|
1940
1933
|
}
|
|
1941
1934
|
});
|
|
1942
1935
|
// Remove facets that no longer exist
|
|
1943
|
-
|
|
1944
|
-
|
|
1945
|
-
}));
|
|
1946
|
-
next.forEach(function (id) {
|
|
1936
|
+
const currentFacetIds = new Set(facets.map(f => f.id));
|
|
1937
|
+
next.forEach(id => {
|
|
1947
1938
|
if (!currentFacetIds.has(id)) {
|
|
1948
1939
|
next.delete(id);
|
|
1949
1940
|
}
|
|
@@ -1951,9 +1942,9 @@ var FiltersPanel = function (_a) {
|
|
|
1951
1942
|
return next;
|
|
1952
1943
|
});
|
|
1953
1944
|
}, [facets]);
|
|
1954
|
-
|
|
1955
|
-
setExpandedAccordions(
|
|
1956
|
-
|
|
1945
|
+
const handleAccordionToggle = useCallback(facetId => {
|
|
1946
|
+
setExpandedAccordions(prev => {
|
|
1947
|
+
const next = new Set(prev);
|
|
1957
1948
|
if (next.has(facetId)) {
|
|
1958
1949
|
next.delete(facetId);
|
|
1959
1950
|
} else {
|
|
@@ -1962,16 +1953,16 @@ var FiltersPanel = function (_a) {
|
|
|
1962
1953
|
return next;
|
|
1963
1954
|
});
|
|
1964
1955
|
}, []);
|
|
1965
|
-
|
|
1956
|
+
const handleValueToggle = useCallback((attribute, value) => {
|
|
1966
1957
|
onFacetToggle(attribute, value);
|
|
1967
1958
|
}, [onFacetToggle]);
|
|
1968
|
-
|
|
1959
|
+
const handleRemoveFilter = useCallback((attribute, value) => {
|
|
1969
1960
|
onFacetToggle(attribute, value);
|
|
1970
1961
|
}, [onFacetToggle]);
|
|
1971
|
-
|
|
1962
|
+
const handleClearAll = useCallback(() => {
|
|
1972
1963
|
// Remove all refined facets
|
|
1973
|
-
facets.forEach(
|
|
1974
|
-
facet.values.forEach(
|
|
1964
|
+
facets.forEach(facet => {
|
|
1965
|
+
facet.values.forEach(value => {
|
|
1975
1966
|
if (value.isRefined) {
|
|
1976
1967
|
onFacetToggle(facet.attribute, value.value);
|
|
1977
1968
|
}
|
|
@@ -1980,7 +1971,7 @@ var FiltersPanel = function (_a) {
|
|
|
1980
1971
|
}, [facets, onFacetToggle]);
|
|
1981
1972
|
if (isLoading) {
|
|
1982
1973
|
return /*#__PURE__*/React.createElement("div", {
|
|
1983
|
-
className:
|
|
1974
|
+
className: `${styles$7.filtersPanel} ${className || ""}`
|
|
1984
1975
|
}, /*#__PURE__*/React.createElement("div", {
|
|
1985
1976
|
className: styles$7.loadingState
|
|
1986
1977
|
}, /*#__PURE__*/React.createElement("div", {
|
|
@@ -1991,73 +1982,70 @@ var FiltersPanel = function (_a) {
|
|
|
1991
1982
|
return null;
|
|
1992
1983
|
}
|
|
1993
1984
|
return /*#__PURE__*/React.createElement("div", {
|
|
1994
|
-
className:
|
|
1985
|
+
className: `${styles$7.filtersPanel} ${className || ""}`
|
|
1995
1986
|
}, showCheckbox && /*#__PURE__*/React.createElement(AppliedFilters, {
|
|
1996
1987
|
facets: facets,
|
|
1997
1988
|
onRemove: handleRemoveFilter,
|
|
1998
1989
|
onClearAll: handleClearAll
|
|
1999
1990
|
}), /*#__PURE__*/React.createElement("div", {
|
|
2000
1991
|
className: styles$7.filtersList
|
|
2001
|
-
}, facets.map(
|
|
2002
|
-
|
|
2003
|
-
|
|
2004
|
-
|
|
2005
|
-
|
|
2006
|
-
|
|
2007
|
-
|
|
2008
|
-
|
|
2009
|
-
|
|
2010
|
-
variant: variant,
|
|
2011
|
-
showCheckbox: showCheckbox
|
|
2012
|
-
});
|
|
2013
|
-
})));
|
|
1992
|
+
}, facets.map(facet => /*#__PURE__*/React.createElement(FilterAccordion, {
|
|
1993
|
+
key: facet.id,
|
|
1994
|
+
facet: facet,
|
|
1995
|
+
isExpanded: expandedAccordions.has(facet.id),
|
|
1996
|
+
onToggle: () => handleAccordionToggle(facet.id),
|
|
1997
|
+
onValueToggle: handleValueToggle,
|
|
1998
|
+
variant: variant,
|
|
1999
|
+
showCheckbox: showCheckbox
|
|
2000
|
+
}))));
|
|
2014
2001
|
};
|
|
2015
2002
|
|
|
2016
2003
|
var styles$6 = {"productCardVertical":"ProductCardVertical-module__productCardVertical___kXgmt","productCardVertical--hover":"ProductCardVertical-module__productCardVertical--hover___8Nsyp","productCardVertical__button":"ProductCardVertical-module__productCardVertical__button___oQPJG","productCardVertical--focus":"ProductCardVertical-module__productCardVertical--focus___8U57I","productCardVertical__imageWrapper":"ProductCardVertical-module__productCardVertical__imageWrapper___SgKoZ","productCardVertical__image":"ProductCardVertical-module__productCardVertical__image___kg-QU","productCardVertical__content":"ProductCardVertical-module__productCardVertical__content___sZdOs","productCardVertical__title":"ProductCardVertical-module__productCardVertical__title___PPKWb","productCardVertical__description":"ProductCardVertical-module__productCardVertical__description___Ai90p","productCardVertical__footer":"ProductCardVertical-module__productCardVertical__footer___rv6BH"};
|
|
2017
2004
|
|
|
2018
|
-
/**
|
|
2019
|
-
* ProductCardVertical - Vertical product card for grid layouts
|
|
2020
|
-
*
|
|
2021
|
-
* Used in full results view with 4-column grid (desktop) or 2-column grid (mobile).
|
|
2022
|
-
* Figma spec: Default (no shadow) → Hover (shadow + grey button) → Focus (border + shadow)
|
|
2023
|
-
*
|
|
2024
|
-
* @example
|
|
2025
|
-
* ```tsx
|
|
2026
|
-
* <ProductCardVertical
|
|
2027
|
-
* title="TURBOVAC i - High vacuum turbopump"
|
|
2028
|
-
* url="/products/turbovac-i"
|
|
2029
|
-
* imageUrl="/assets/search-product.png"
|
|
2030
|
-
* productId="21312VISH"
|
|
2031
|
-
* description="Premium high-performance turbomolecular pump"
|
|
2032
|
-
* buttonLabel="BUY ONLINE"
|
|
2033
|
-
* />
|
|
2034
|
-
* ```
|
|
2005
|
+
/**
|
|
2006
|
+
* ProductCardVertical - Vertical product card for grid layouts
|
|
2007
|
+
*
|
|
2008
|
+
* Used in full results view with 4-column grid (desktop) or 2-column grid (mobile).
|
|
2009
|
+
* Figma spec: Default (no shadow) → Hover (shadow + grey button) → Focus (border + shadow)
|
|
2010
|
+
*
|
|
2011
|
+
* @example
|
|
2012
|
+
* ```tsx
|
|
2013
|
+
* <ProductCardVertical
|
|
2014
|
+
* title="TURBOVAC i - High vacuum turbopump"
|
|
2015
|
+
* url="/products/turbovac-i"
|
|
2016
|
+
* imageUrl="/assets/search-product.png"
|
|
2017
|
+
* productId="21312VISH"
|
|
2018
|
+
* description="Premium high-performance turbomolecular pump"
|
|
2019
|
+
* buttonLabel="BUY ONLINE"
|
|
2020
|
+
* />
|
|
2021
|
+
* ```
|
|
2035
2022
|
*/
|
|
2036
|
-
|
|
2037
|
-
|
|
2038
|
-
|
|
2039
|
-
|
|
2040
|
-
|
|
2041
|
-
|
|
2042
|
-
|
|
2043
|
-
|
|
2044
|
-
|
|
2045
|
-
|
|
2046
|
-
|
|
2047
|
-
|
|
2048
|
-
|
|
2049
|
-
|
|
2050
|
-
forceState = _a["data-force-state"];
|
|
2051
|
-
var handleButtonClick = function (e) {
|
|
2023
|
+
const ProductCardVertical = ({
|
|
2024
|
+
id,
|
|
2025
|
+
title,
|
|
2026
|
+
url,
|
|
2027
|
+
imageUrl,
|
|
2028
|
+
productId,
|
|
2029
|
+
description,
|
|
2030
|
+
buttonLabel = 'BUY ONLINE',
|
|
2031
|
+
onButtonClick,
|
|
2032
|
+
className,
|
|
2033
|
+
variant = 'desktop',
|
|
2034
|
+
'data-force-state': forceState
|
|
2035
|
+
}) => {
|
|
2036
|
+
const handleButtonClick = e => {
|
|
2052
2037
|
e.preventDefault(); // Prevent card link navigation
|
|
2053
2038
|
e.stopPropagation(); // Stop event bubbling
|
|
2054
|
-
onButtonClick
|
|
2039
|
+
onButtonClick?.();
|
|
2055
2040
|
};
|
|
2056
|
-
|
|
2041
|
+
const cardClasses = classNames(styles$6.productCardVertical, styles$6[`productCardVertical--${variant}`], {
|
|
2042
|
+
[styles$6['productCardVertical--hover']]: forceState === 'hover',
|
|
2043
|
+
[styles$6['productCardVertical--focus']]: forceState === 'focus'
|
|
2044
|
+
}, className);
|
|
2057
2045
|
return /*#__PURE__*/React.createElement("a", {
|
|
2058
2046
|
href: url,
|
|
2059
2047
|
className: cardClasses,
|
|
2060
|
-
"aria-label":
|
|
2048
|
+
"aria-label": `View product: ${title}`,
|
|
2061
2049
|
"data-product-id": id
|
|
2062
2050
|
}, imageUrl && /*#__PURE__*/React.createElement("div", {
|
|
2063
2051
|
className: styles$6.productCardVertical__imageWrapper
|
|
@@ -2078,7 +2066,7 @@ var ProductCardVertical = function (_a) {
|
|
|
2078
2066
|
type: "button",
|
|
2079
2067
|
onClick: handleButtonClick,
|
|
2080
2068
|
className: styles$6.productCardVertical__button,
|
|
2081
|
-
"aria-label":
|
|
2069
|
+
"aria-label": `${buttonLabel} - ${title}`,
|
|
2082
2070
|
tabIndex: -1
|
|
2083
2071
|
}, /*#__PURE__*/React.createElement("span", null, buttonLabel), /*#__PURE__*/React.createElement(FontAwesomeIcon, {
|
|
2084
2072
|
icon: faArrowUpRightFromSquare$1,
|
|
@@ -2088,19 +2076,17 @@ var ProductCardVertical = function (_a) {
|
|
|
2088
2076
|
|
|
2089
2077
|
var styles$5 = {"resultsView":"ResultsView-module__resultsView___S4Wh2","searchBarWrapper":"ResultsView-module__searchBarWrapper___XNtwR","tabsContainer":"ResultsView-module__tabsContainer___mB-Q2","tabs":"ResultsView-module__tabs___rOexd","tabSeparator":"ResultsView-module__tabSeparator___MSq9p","mobileFilterButton":"ResultsView-module__mobileFilterButton___ZrMQY","resultsContainer":"ResultsView-module__resultsContainer___J4URa","sidebar":"ResultsView-module__sidebar___nQq5J","assistanceBanner":"ResultsView-module__assistanceBanner___1r72a","mainContent":"ResultsView-module__mainContent___S9eIG","productsGrid":"ResultsView-module__productsGrid___gnAQ-","contentsList":"ResultsView-module__contentsList___tcfNG","contentDivider":"ResultsView-module__contentDivider___5n6sl","resultsList":"ResultsView-module__resultsList___8eYNX","resultsSection":"ResultsView-module__resultsSection___sCUaO","sectionTitle":"ResultsView-module__sectionTitle___mfvH3","loadingState":"ResultsView-module__loadingState___W5YXx","errorState":"ResultsView-module__errorState___UkkG-","emptyState":"ResultsView-module__emptyState___D0Iyn","spinner":"ResultsView-module__spinner___nk8E5","emptyIcon":"ResultsView-module__emptyIcon___fes8T","paginationWrapper":"ResultsView-module__paginationWrapper___mDTyl","searchBarDesktopOnly":"ResultsView-module__searchBarDesktopOnly___dZHUw","tabsContainerDesktopOnly":"ResultsView-module__tabsContainerDesktopOnly___-MQpa"};
|
|
2090
2078
|
|
|
2091
|
-
|
|
2092
|
-
|
|
2093
|
-
|
|
2094
|
-
|
|
2095
|
-
|
|
2096
|
-
|
|
2097
|
-
|
|
2098
|
-
|
|
2099
|
-
_d = _a.className,
|
|
2100
|
-
className = _d === void 0 ? '' : _d;
|
|
2079
|
+
const ResultsList = ({
|
|
2080
|
+
type,
|
|
2081
|
+
products = [],
|
|
2082
|
+
contents = [],
|
|
2083
|
+
isLoading,
|
|
2084
|
+
error,
|
|
2085
|
+
className = ''
|
|
2086
|
+
}) => {
|
|
2101
2087
|
if (isLoading) {
|
|
2102
2088
|
return /*#__PURE__*/React.createElement("div", {
|
|
2103
|
-
className:
|
|
2089
|
+
className: `${styles$5.loadingState} ${className}`
|
|
2104
2090
|
}, /*#__PURE__*/React.createElement("div", {
|
|
2105
2091
|
className: styles$5.spinner,
|
|
2106
2092
|
"aria-label": "Loading..."
|
|
@@ -2108,15 +2094,15 @@ var ResultsList = function (_a) {
|
|
|
2108
2094
|
}
|
|
2109
2095
|
if (error) {
|
|
2110
2096
|
return /*#__PURE__*/React.createElement("div", {
|
|
2111
|
-
className:
|
|
2097
|
+
className: `${styles$5.errorState} ${className}`
|
|
2112
2098
|
}, /*#__PURE__*/React.createElement("p", null, error));
|
|
2113
2099
|
}
|
|
2114
|
-
|
|
2115
|
-
|
|
2116
|
-
|
|
2100
|
+
const hasProducts = products.length > 0;
|
|
2101
|
+
const hasContents = contents.length > 0;
|
|
2102
|
+
const hasResults = hasProducts || hasContents;
|
|
2117
2103
|
if (!hasResults) {
|
|
2118
2104
|
return /*#__PURE__*/React.createElement("div", {
|
|
2119
|
-
className:
|
|
2105
|
+
className: `${styles$5.emptyState} ${className}`
|
|
2120
2106
|
}, /*#__PURE__*/React.createElement("svg", {
|
|
2121
2107
|
xmlns: "http://www.w3.org/2000/svg",
|
|
2122
2108
|
viewBox: "0 0 24 24",
|
|
@@ -2134,111 +2120,107 @@ var ResultsList = function (_a) {
|
|
|
2134
2120
|
d: "m21 21-4.35-4.35"
|
|
2135
2121
|
})), /*#__PURE__*/React.createElement("h3", null, "No results found"), /*#__PURE__*/React.createElement("p", null, "Try adjusting your search or filters to find what you're looking for."));
|
|
2136
2122
|
}
|
|
2123
|
+
|
|
2137
2124
|
// Render based on type
|
|
2138
2125
|
if (type === 'products') {
|
|
2139
2126
|
return /*#__PURE__*/React.createElement("div", {
|
|
2140
|
-
className:
|
|
2141
|
-
}, products.map(
|
|
2142
|
-
|
|
2143
|
-
|
|
2144
|
-
|
|
2145
|
-
|
|
2146
|
-
}));
|
|
2147
|
-
}));
|
|
2127
|
+
className: `${styles$5.productsGrid} ${className}`
|
|
2128
|
+
}, products.map(product => /*#__PURE__*/React.createElement(ProductCardVertical, _extends({
|
|
2129
|
+
key: product.id
|
|
2130
|
+
}, product, {
|
|
2131
|
+
buttonLabel: "BUY ONLINE"
|
|
2132
|
+
}))));
|
|
2148
2133
|
}
|
|
2149
2134
|
if (type === 'content') {
|
|
2150
2135
|
return /*#__PURE__*/React.createElement("div", {
|
|
2151
|
-
className:
|
|
2152
|
-
}, contents.map(
|
|
2153
|
-
|
|
2154
|
-
|
|
2155
|
-
|
|
2156
|
-
|
|
2157
|
-
|
|
2158
|
-
|
|
2159
|
-
})));
|
|
2160
|
-
}));
|
|
2136
|
+
className: `${styles$5.contentsList} ${className}`
|
|
2137
|
+
}, contents.map((content, index) => /*#__PURE__*/React.createElement(React.Fragment, {
|
|
2138
|
+
key: content.id
|
|
2139
|
+
}, index > 0 && /*#__PURE__*/React.createElement("hr", {
|
|
2140
|
+
className: styles$5.contentDivider
|
|
2141
|
+
}), /*#__PURE__*/React.createElement(ContentCardHorizontal, _extends({}, content, {
|
|
2142
|
+
variant: "results-view"
|
|
2143
|
+
})))));
|
|
2161
2144
|
}
|
|
2145
|
+
|
|
2162
2146
|
// type === 'all' - Show mixed results (not in current Figma design, but keep for compatibility)
|
|
2163
2147
|
return /*#__PURE__*/React.createElement("div", {
|
|
2164
|
-
className:
|
|
2148
|
+
className: `${styles$5.resultsList} ${className}`
|
|
2165
2149
|
}, hasProducts && /*#__PURE__*/React.createElement("div", {
|
|
2166
2150
|
className: styles$5.resultsSection
|
|
2167
2151
|
}, /*#__PURE__*/React.createElement("h3", {
|
|
2168
2152
|
className: styles$5.sectionTitle
|
|
2169
2153
|
}, "Products (", products.length, ")"), /*#__PURE__*/React.createElement("div", {
|
|
2170
2154
|
className: styles$5.productsGrid
|
|
2171
|
-
}, products.map(
|
|
2172
|
-
|
|
2173
|
-
|
|
2174
|
-
|
|
2175
|
-
|
|
2176
|
-
}));
|
|
2177
|
-
}))), hasContents && /*#__PURE__*/React.createElement("div", {
|
|
2155
|
+
}, products.map(product => /*#__PURE__*/React.createElement(ProductCardVertical, _extends({
|
|
2156
|
+
key: product.id
|
|
2157
|
+
}, product, {
|
|
2158
|
+
buttonLabel: "BUY ONLINE"
|
|
2159
|
+
}))))), hasContents && /*#__PURE__*/React.createElement("div", {
|
|
2178
2160
|
className: styles$5.resultsSection
|
|
2179
2161
|
}, /*#__PURE__*/React.createElement("h3", {
|
|
2180
2162
|
className: styles$5.sectionTitle
|
|
2181
2163
|
}, "Content (", contents.length, ")"), /*#__PURE__*/React.createElement("div", {
|
|
2182
2164
|
className: styles$5.contentsList
|
|
2183
|
-
}, contents.map(
|
|
2184
|
-
|
|
2185
|
-
|
|
2186
|
-
|
|
2187
|
-
|
|
2188
|
-
|
|
2189
|
-
|
|
2190
|
-
})));
|
|
2191
|
-
}))));
|
|
2165
|
+
}, contents.map((content, index) => /*#__PURE__*/React.createElement(React.Fragment, {
|
|
2166
|
+
key: content.id
|
|
2167
|
+
}, index > 0 && /*#__PURE__*/React.createElement("hr", {
|
|
2168
|
+
className: styles$5.contentDivider
|
|
2169
|
+
}), /*#__PURE__*/React.createElement(ContentCardHorizontal, _extends({}, content, {
|
|
2170
|
+
variant: "results-view"
|
|
2171
|
+
})))))));
|
|
2192
2172
|
};
|
|
2193
2173
|
|
|
2194
2174
|
var styles$4 = {"tabButton":"TabButton-module__tabButton___cMU45","tabButton__count":"TabButton-module__tabButton__count___nlS1p","tabButton__label":"TabButton-module__tabButton__label___YGpiC","tabButton__results":"TabButton-module__tabButton__results___Nr6gr","tabButton--desktop":"TabButton-module__tabButton--desktop___fbAaC","tabButton--active":"TabButton-module__tabButton--active___gj6Jp","tabButton--mobile":"TabButton-module__tabButton--mobile___AnLwy"};
|
|
2195
2175
|
|
|
2196
|
-
/**
|
|
2197
|
-
* TabButton - Tab navigation component with result counts
|
|
2198
|
-
*
|
|
2199
|
-
* Supports two layout variants:
|
|
2200
|
-
* - Desktop: Background colours, top red underline when active, rounded corners
|
|
2201
|
-
* - Mobile: Text-only with bottom border underline when active
|
|
2202
|
-
*
|
|
2203
|
-
* @example
|
|
2204
|
-
* ```tsx
|
|
2205
|
-
* // Desktop variant
|
|
2206
|
-
* <TabButton
|
|
2207
|
-
* label="WEB SHOP RESULTS"
|
|
2208
|
-
* count={542}
|
|
2209
|
-
* isActive={true}
|
|
2210
|
-
* onClick={() => setActiveTab('products')}
|
|
2211
|
-
* variant="desktop"
|
|
2212
|
-
* />
|
|
2213
|
-
*
|
|
2214
|
-
* // Mobile variant
|
|
2215
|
-
* <TabButton
|
|
2216
|
-
* label="WEB SHOP"
|
|
2217
|
-
* isActive={false}
|
|
2218
|
-
* onClick={() => setActiveTab('content')}
|
|
2219
|
-
* variant="mobile"
|
|
2220
|
-
* />
|
|
2221
|
-
* ```
|
|
2176
|
+
/**
|
|
2177
|
+
* TabButton - Tab navigation component with result counts
|
|
2178
|
+
*
|
|
2179
|
+
* Supports two layout variants:
|
|
2180
|
+
* - Desktop: Background colours, top red underline when active, rounded corners
|
|
2181
|
+
* - Mobile: Text-only with bottom border underline when active
|
|
2182
|
+
*
|
|
2183
|
+
* @example
|
|
2184
|
+
* ```tsx
|
|
2185
|
+
* // Desktop variant
|
|
2186
|
+
* <TabButton
|
|
2187
|
+
* label="WEB SHOP RESULTS"
|
|
2188
|
+
* count={542}
|
|
2189
|
+
* isActive={true}
|
|
2190
|
+
* onClick={() => setActiveTab('products')}
|
|
2191
|
+
* variant="desktop"
|
|
2192
|
+
* />
|
|
2193
|
+
*
|
|
2194
|
+
* // Mobile variant
|
|
2195
|
+
* <TabButton
|
|
2196
|
+
* label="WEB SHOP"
|
|
2197
|
+
* isActive={false}
|
|
2198
|
+
* onClick={() => setActiveTab('content')}
|
|
2199
|
+
* variant="mobile"
|
|
2200
|
+
* />
|
|
2201
|
+
* ```
|
|
2222
2202
|
*/
|
|
2223
|
-
|
|
2224
|
-
|
|
2225
|
-
|
|
2226
|
-
|
|
2227
|
-
|
|
2228
|
-
|
|
2229
|
-
|
|
2230
|
-
|
|
2231
|
-
|
|
2232
|
-
|
|
2203
|
+
const TabButton = ({
|
|
2204
|
+
label,
|
|
2205
|
+
count,
|
|
2206
|
+
isActive,
|
|
2207
|
+
onClick,
|
|
2208
|
+
variant = 'desktop',
|
|
2209
|
+
className
|
|
2210
|
+
}) => {
|
|
2211
|
+
const buttonClasses = classNames(styles$4.tabButton, styles$4[`tabButton--${variant}`], {
|
|
2212
|
+
[styles$4['tabButton--active']]: isActive
|
|
2213
|
+
}, className);
|
|
2214
|
+
|
|
2233
2215
|
// Split label to hide " RESULTS" on mobile
|
|
2234
|
-
|
|
2235
|
-
|
|
2236
|
-
|
|
2216
|
+
const labelParts = label.split(' RESULTS');
|
|
2217
|
+
const mainLabel = labelParts[0];
|
|
2218
|
+
const hasResults = labelParts.length > 1;
|
|
2237
2219
|
return /*#__PURE__*/React.createElement("button", {
|
|
2238
2220
|
type: "button",
|
|
2239
2221
|
role: "tab",
|
|
2240
2222
|
"aria-selected": isActive,
|
|
2241
|
-
"aria-controls":
|
|
2223
|
+
"aria-controls": `tabpanel-${label.toLowerCase().replace(/\s+/g, '-')}`,
|
|
2242
2224
|
onClick: onClick,
|
|
2243
2225
|
className: buttonClasses
|
|
2244
2226
|
}, count !== undefined && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
|
|
@@ -2250,7 +2232,7 @@ var TabButton = function (_a) {
|
|
|
2250
2232
|
}, " RESULTS")));
|
|
2251
2233
|
};
|
|
2252
2234
|
|
|
2253
|
-
|
|
2235
|
+
const AssistanceIcon = props => {
|
|
2254
2236
|
return /*#__PURE__*/React.createElement("svg", _extends({
|
|
2255
2237
|
xmlns: "http://www.w3.org/2000/svg",
|
|
2256
2238
|
width: "87",
|
|
@@ -2265,42 +2247,39 @@ var AssistanceIcon = function (props) {
|
|
|
2265
2247
|
|
|
2266
2248
|
var styles$3 = {"assistanceBanner":"AssistanceBanner-module__assistanceBanner___b97es","assistanceBanner__icon":"AssistanceBanner-module__assistanceBanner__icon___8NzJj","assistanceBanner__title":"AssistanceBanner-module__assistanceBanner__title___Wtkkt","assistanceBanner__description":"AssistanceBanner-module__assistanceBanner__description___AjoOr","assistanceBanner__link":"AssistanceBanner-module__assistanceBanner__link___5L45N","assistanceBanner__chevron":"AssistanceBanner-module__assistanceBanner__chevron___4km-f"};
|
|
2267
2249
|
|
|
2268
|
-
/**
|
|
2269
|
-
* AssistanceBanner - Help widget for search sidebar
|
|
2270
|
-
*
|
|
2271
|
-
* Displays a call-to-action for users who need assistance finding products.
|
|
2272
|
-
* Features chat icon, heading, description, and contact link with chevron.
|
|
2273
|
-
*
|
|
2274
|
-
* Desktop only - hidden on mobile to save space.
|
|
2275
|
-
*
|
|
2276
|
-
* @example
|
|
2277
|
-
* ```tsx
|
|
2278
|
-
* <AssistanceBanner
|
|
2279
|
-
* title="Need Assistance?"
|
|
2280
|
-
* description="Can't find what you're looking for? Our team is ready to help."
|
|
2281
|
-
* linkText="Contact support"
|
|
2282
|
-
* linkUrl="/contact"
|
|
2283
|
-
* />
|
|
2284
|
-
* ```
|
|
2250
|
+
/**
|
|
2251
|
+
* AssistanceBanner - Help widget for search sidebar
|
|
2252
|
+
*
|
|
2253
|
+
* Displays a call-to-action for users who need assistance finding products.
|
|
2254
|
+
* Features chat icon, heading, description, and contact link with chevron.
|
|
2255
|
+
*
|
|
2256
|
+
* Desktop only - hidden on mobile to save space.
|
|
2257
|
+
*
|
|
2258
|
+
* @example
|
|
2259
|
+
* ```tsx
|
|
2260
|
+
* <AssistanceBanner
|
|
2261
|
+
* title="Need Assistance?"
|
|
2262
|
+
* description="Can't find what you're looking for? Our team is ready to help."
|
|
2263
|
+
* linkText="Contact support"
|
|
2264
|
+
* linkUrl="/contact"
|
|
2265
|
+
* />
|
|
2266
|
+
* ```
|
|
2285
2267
|
*/
|
|
2286
|
-
|
|
2287
|
-
|
|
2288
|
-
|
|
2289
|
-
|
|
2290
|
-
|
|
2291
|
-
|
|
2292
|
-
|
|
2293
|
-
|
|
2294
|
-
|
|
2295
|
-
onLinkClick = _a.onLinkClick,
|
|
2296
|
-
className = _a.className;
|
|
2297
|
-
var handleLinkClick = function (e) {
|
|
2268
|
+
const AssistanceBanner = ({
|
|
2269
|
+
title = 'Need Assistance?',
|
|
2270
|
+
description = "Can't find what you're looking for? Our team is ready to help.",
|
|
2271
|
+
linkText = 'Contact support',
|
|
2272
|
+
linkUrl = '/contact',
|
|
2273
|
+
onLinkClick,
|
|
2274
|
+
className
|
|
2275
|
+
}) => {
|
|
2276
|
+
const handleLinkClick = e => {
|
|
2298
2277
|
if (onLinkClick) {
|
|
2299
2278
|
e.preventDefault();
|
|
2300
2279
|
onLinkClick();
|
|
2301
2280
|
}
|
|
2302
2281
|
};
|
|
2303
|
-
|
|
2282
|
+
const bannerClasses = classNames(styles$3.assistanceBanner, className);
|
|
2304
2283
|
return /*#__PURE__*/React.createElement("div", {
|
|
2305
2284
|
className: bannerClasses
|
|
2306
2285
|
}, /*#__PURE__*/React.createElement(AssistanceIcon, {
|
|
@@ -2333,105 +2312,111 @@ var AssistanceBanner = function (_a) {
|
|
|
2333
2312
|
|
|
2334
2313
|
var styles$2 = {"drawerOverlay":"FilterDrawer-module__drawerOverlay___P6M4y","drawerOverlay--open":"FilterDrawer-module__drawerOverlay--open___blJZo","drawerPanel":"FilterDrawer-module__drawerPanel___35h-U","drawerPanel--open":"FilterDrawer-module__drawerPanel--open___Fw1SY","drawerCloseButton":"FilterDrawer-module__drawerCloseButton___cfMmf","drawerContent":"FilterDrawer-module__drawerContent___KBff6"};
|
|
2335
2314
|
|
|
2336
|
-
/**
|
|
2337
|
-
* FilterDrawer - Mobile slide-in filter panel
|
|
2338
|
-
*
|
|
2339
|
-
* Slides in from the right with a dark overlay. Used on mobile to show filters
|
|
2340
|
-
* when screen space is limited. Includes focus trap, escape key handling, and
|
|
2341
|
-
* body scroll prevention.
|
|
2342
|
-
*
|
|
2343
|
-
* Desktop: Hidden (filters shown in sidebar)
|
|
2344
|
-
* Mobile: Slide-in drawer overlay
|
|
2345
|
-
*
|
|
2346
|
-
* @example
|
|
2347
|
-
* ```tsx
|
|
2348
|
-
* <FilterDrawer
|
|
2349
|
-
* isOpen={isFilterDrawerOpen}
|
|
2350
|
-
* onClose={() => setIsFilterDrawerOpen(false)}
|
|
2351
|
-
* >
|
|
2352
|
-
* <FiltersPanel facets={facets} onFacetToggle={handleToggle} />
|
|
2353
|
-
* </FilterDrawer>
|
|
2354
|
-
* ```
|
|
2315
|
+
/**
|
|
2316
|
+
* FilterDrawer - Mobile slide-in filter panel
|
|
2317
|
+
*
|
|
2318
|
+
* Slides in from the right with a dark overlay. Used on mobile to show filters
|
|
2319
|
+
* when screen space is limited. Includes focus trap, escape key handling, and
|
|
2320
|
+
* body scroll prevention.
|
|
2321
|
+
*
|
|
2322
|
+
* Desktop: Hidden (filters shown in sidebar)
|
|
2323
|
+
* Mobile: Slide-in drawer overlay
|
|
2324
|
+
*
|
|
2325
|
+
* @example
|
|
2326
|
+
* ```tsx
|
|
2327
|
+
* <FilterDrawer
|
|
2328
|
+
* isOpen={isFilterDrawerOpen}
|
|
2329
|
+
* onClose={() => setIsFilterDrawerOpen(false)}
|
|
2330
|
+
* >
|
|
2331
|
+
* <FiltersPanel facets={facets} onFacetToggle={handleToggle} />
|
|
2332
|
+
* </FilterDrawer>
|
|
2333
|
+
* ```
|
|
2355
2334
|
*/
|
|
2356
|
-
|
|
2357
|
-
|
|
2358
|
-
|
|
2359
|
-
|
|
2360
|
-
|
|
2361
|
-
|
|
2362
|
-
|
|
2363
|
-
|
|
2335
|
+
const FilterDrawer = ({
|
|
2336
|
+
isOpen,
|
|
2337
|
+
onClose,
|
|
2338
|
+
children,
|
|
2339
|
+
className
|
|
2340
|
+
}) => {
|
|
2341
|
+
const drawerRef = useRef(null);
|
|
2342
|
+
const previouslyFocusedElement = useRef(null);
|
|
2343
|
+
|
|
2364
2344
|
// Focus management
|
|
2365
|
-
useEffect(
|
|
2345
|
+
useEffect(() => {
|
|
2366
2346
|
if (isOpen) {
|
|
2367
2347
|
// Store previously focused element
|
|
2368
2348
|
previouslyFocusedElement.current = document.activeElement;
|
|
2349
|
+
|
|
2369
2350
|
// Focus the drawer
|
|
2370
2351
|
if (drawerRef.current) {
|
|
2371
2352
|
drawerRef.current.focus();
|
|
2372
2353
|
}
|
|
2354
|
+
|
|
2373
2355
|
// Prevent body scroll
|
|
2374
2356
|
document.body.style.overflow = 'hidden';
|
|
2375
2357
|
} else {
|
|
2376
2358
|
// Restore body scroll
|
|
2377
2359
|
document.body.style.overflow = '';
|
|
2360
|
+
|
|
2378
2361
|
// Return focus to previously focused element
|
|
2379
2362
|
if (previouslyFocusedElement.current) {
|
|
2380
2363
|
previouslyFocusedElement.current.focus();
|
|
2381
2364
|
}
|
|
2382
2365
|
}
|
|
2383
|
-
return
|
|
2366
|
+
return () => {
|
|
2384
2367
|
document.body.style.overflow = '';
|
|
2385
2368
|
};
|
|
2386
2369
|
}, [isOpen]);
|
|
2370
|
+
|
|
2387
2371
|
// Escape key handler
|
|
2388
|
-
useEffect(
|
|
2389
|
-
|
|
2372
|
+
useEffect(() => {
|
|
2373
|
+
const handleEscape = event => {
|
|
2390
2374
|
if (event.key === 'Escape' && isOpen) {
|
|
2391
2375
|
onClose();
|
|
2392
2376
|
}
|
|
2393
2377
|
};
|
|
2394
2378
|
document.addEventListener('keydown', handleEscape);
|
|
2395
|
-
return
|
|
2396
|
-
return document.removeEventListener('keydown', handleEscape);
|
|
2397
|
-
};
|
|
2379
|
+
return () => document.removeEventListener('keydown', handleEscape);
|
|
2398
2380
|
}, [isOpen, onClose]);
|
|
2381
|
+
|
|
2399
2382
|
// Focus trap implementation
|
|
2400
|
-
useEffect(
|
|
2383
|
+
useEffect(() => {
|
|
2401
2384
|
if (!isOpen || !drawerRef.current) return;
|
|
2402
|
-
|
|
2403
|
-
|
|
2404
|
-
|
|
2405
|
-
|
|
2406
|
-
|
|
2385
|
+
const drawer = drawerRef.current;
|
|
2386
|
+
const focusableElements = drawer.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
|
|
2387
|
+
const firstElement = focusableElements[0];
|
|
2388
|
+
const lastElement = focusableElements[focusableElements.length - 1];
|
|
2389
|
+
const handleTab = event => {
|
|
2407
2390
|
if (event.key !== 'Tab') return;
|
|
2408
2391
|
if (event.shiftKey) {
|
|
2409
2392
|
// Shift + Tab
|
|
2410
2393
|
if (document.activeElement === firstElement) {
|
|
2411
2394
|
event.preventDefault();
|
|
2412
|
-
lastElement
|
|
2395
|
+
lastElement?.focus();
|
|
2413
2396
|
}
|
|
2414
2397
|
} else {
|
|
2415
2398
|
// Tab
|
|
2416
2399
|
if (document.activeElement === lastElement) {
|
|
2417
2400
|
event.preventDefault();
|
|
2418
|
-
firstElement
|
|
2401
|
+
firstElement?.focus();
|
|
2419
2402
|
}
|
|
2420
2403
|
}
|
|
2421
2404
|
};
|
|
2422
2405
|
drawer.addEventListener('keydown', handleTab);
|
|
2423
|
-
return
|
|
2424
|
-
return drawer.removeEventListener('keydown', handleTab);
|
|
2425
|
-
};
|
|
2406
|
+
return () => drawer.removeEventListener('keydown', handleTab);
|
|
2426
2407
|
}, [isOpen]);
|
|
2427
2408
|
if (!isOpen) return null;
|
|
2428
|
-
|
|
2409
|
+
const handleOverlayClick = event => {
|
|
2429
2410
|
if (event.target === event.currentTarget) {
|
|
2430
2411
|
onClose();
|
|
2431
2412
|
}
|
|
2432
2413
|
};
|
|
2433
|
-
|
|
2434
|
-
|
|
2414
|
+
const overlayClasses = classNames(styles$2.drawerOverlay, {
|
|
2415
|
+
[styles$2['drawerOverlay--open']]: isOpen
|
|
2416
|
+
});
|
|
2417
|
+
const panelClasses = classNames(styles$2.drawerPanel, {
|
|
2418
|
+
[styles$2['drawerPanel--open']]: isOpen
|
|
2419
|
+
}, className);
|
|
2435
2420
|
return /*#__PURE__*/React.createElement("div", {
|
|
2436
2421
|
className: overlayClasses,
|
|
2437
2422
|
onClick: handleOverlayClick,
|
|
@@ -2455,63 +2440,63 @@ var FilterDrawer = function (_a) {
|
|
|
2455
2440
|
}, children)));
|
|
2456
2441
|
};
|
|
2457
2442
|
|
|
2458
|
-
|
|
2459
|
-
|
|
2460
|
-
|
|
2461
|
-
|
|
2462
|
-
|
|
2463
|
-
|
|
2464
|
-
|
|
2465
|
-
|
|
2466
|
-
|
|
2467
|
-
|
|
2468
|
-
|
|
2469
|
-
|
|
2470
|
-
|
|
2471
|
-
|
|
2472
|
-
|
|
2473
|
-
|
|
2474
|
-
|
|
2475
|
-
|
|
2476
|
-
|
|
2477
|
-
|
|
2478
|
-
|
|
2479
|
-
|
|
2443
|
+
const FederatedResultsView = ({
|
|
2444
|
+
query,
|
|
2445
|
+
onQueryChange,
|
|
2446
|
+
onSearchSubmit,
|
|
2447
|
+
activeTab,
|
|
2448
|
+
onTabChange,
|
|
2449
|
+
products,
|
|
2450
|
+
contents,
|
|
2451
|
+
isLoadingProducts,
|
|
2452
|
+
isLoadingContents,
|
|
2453
|
+
productsError,
|
|
2454
|
+
contentsError,
|
|
2455
|
+
currentPage,
|
|
2456
|
+
totalPages,
|
|
2457
|
+
onPageChange,
|
|
2458
|
+
facets,
|
|
2459
|
+
onFacetToggle,
|
|
2460
|
+
isFilterDrawerOpen,
|
|
2461
|
+
onFilterDrawerToggle,
|
|
2462
|
+
onFilterDrawerClose
|
|
2463
|
+
}) => {
|
|
2464
|
+
const isLoading = activeTab === "products" && isLoadingProducts || activeTab === "content" && isLoadingContents;
|
|
2465
|
+
const error = activeTab === "products" ? productsError : contentsError;
|
|
2466
|
+
|
|
2480
2467
|
// Filter results based on active tab
|
|
2481
|
-
|
|
2482
|
-
|
|
2468
|
+
const displayProducts = activeTab === "content" ? [] : products;
|
|
2469
|
+
const displayContents = activeTab === "products" ? [] : contents;
|
|
2470
|
+
|
|
2483
2471
|
// Content tab single-select handler (clears all others when selecting)
|
|
2484
|
-
|
|
2485
|
-
|
|
2486
|
-
return f.attribute === attribute;
|
|
2487
|
-
});
|
|
2472
|
+
const handleContentCategorySelect = useCallback((attribute, value) => {
|
|
2473
|
+
const facet = facets.find(f => f.attribute === attribute);
|
|
2488
2474
|
if (!facet) return;
|
|
2475
|
+
|
|
2489
2476
|
// Clear ALL values in this facet first
|
|
2490
|
-
facet.values.forEach(
|
|
2477
|
+
facet.values.forEach(v => {
|
|
2491
2478
|
if (v.isRefined) {
|
|
2492
2479
|
onFacetToggle(attribute, v.value); // Unselect
|
|
2493
2480
|
}
|
|
2494
2481
|
});
|
|
2482
|
+
|
|
2495
2483
|
// Then select the clicked value (if not already selected)
|
|
2496
|
-
|
|
2497
|
-
return v.value === value;
|
|
2498
|
-
});
|
|
2484
|
+
const clickedValue = facet.values.find(v => v.value === value);
|
|
2499
2485
|
if (clickedValue && !clickedValue.isRefined) {
|
|
2500
2486
|
onFacetToggle(attribute, value); // Select
|
|
2501
2487
|
}
|
|
2502
2488
|
}, [facets, onFacetToggle]);
|
|
2489
|
+
|
|
2503
2490
|
// Track if any filters applied
|
|
2504
|
-
|
|
2505
|
-
return facets.some(
|
|
2506
|
-
return facet.values.some(function (value) {
|
|
2507
|
-
return value.isRefined;
|
|
2508
|
-
});
|
|
2509
|
-
});
|
|
2491
|
+
const hasAppliedFilters = useMemo(() => {
|
|
2492
|
+
return facets.some(facet => facet.values.some(value => value.isRefined));
|
|
2510
2493
|
}, [facets]);
|
|
2494
|
+
|
|
2511
2495
|
// Track previous filter state to detect transitions
|
|
2512
|
-
|
|
2496
|
+
const prevHasAppliedFilters = useRef(hasAppliedFilters);
|
|
2497
|
+
|
|
2513
2498
|
// Auto-close drawer when transitioning FROM filters applied TO no filters (mobile only)
|
|
2514
|
-
useEffect(
|
|
2499
|
+
useEffect(() => {
|
|
2515
2500
|
// Only close if we HAD filters and now have NONE (not on initial open)
|
|
2516
2501
|
if (prevHasAppliedFilters.current && !hasAppliedFilters && isFilterDrawerOpen && onFilterDrawerClose) {
|
|
2517
2502
|
onFilterDrawerClose();
|
|
@@ -2521,7 +2506,7 @@ var FederatedResultsView = function (_a) {
|
|
|
2521
2506
|
return /*#__PURE__*/React.createElement("div", {
|
|
2522
2507
|
className: styles$5.resultsView
|
|
2523
2508
|
}, /*#__PURE__*/React.createElement("div", {
|
|
2524
|
-
className:
|
|
2509
|
+
className: `${styles$5.searchBarWrapper} ${styles$5.searchBarDesktopOnly}`
|
|
2525
2510
|
}, /*#__PURE__*/React.createElement(SearchBar, {
|
|
2526
2511
|
value: query,
|
|
2527
2512
|
onChange: onQueryChange,
|
|
@@ -2529,7 +2514,7 @@ var FederatedResultsView = function (_a) {
|
|
|
2529
2514
|
placeholder: "Refine your search...",
|
|
2530
2515
|
variant: "results"
|
|
2531
2516
|
})), /*#__PURE__*/React.createElement("div", {
|
|
2532
|
-
className:
|
|
2517
|
+
className: `${styles$5.tabsContainer} ${styles$5.tabsContainerDesktopOnly}`
|
|
2533
2518
|
}, /*#__PURE__*/React.createElement("div", {
|
|
2534
2519
|
className: styles$5.tabs,
|
|
2535
2520
|
role: "tablist"
|
|
@@ -2537,9 +2522,7 @@ var FederatedResultsView = function (_a) {
|
|
|
2537
2522
|
label: "WEB SHOP RESULTS",
|
|
2538
2523
|
count: products.length,
|
|
2539
2524
|
isActive: activeTab === "products",
|
|
2540
|
-
onClick:
|
|
2541
|
-
return onTabChange("products");
|
|
2542
|
-
},
|
|
2525
|
+
onClick: () => onTabChange("products"),
|
|
2543
2526
|
variant: "desktop"
|
|
2544
2527
|
}), /*#__PURE__*/React.createElement("div", {
|
|
2545
2528
|
className: styles$5.tabSeparator
|
|
@@ -2547,9 +2530,7 @@ var FederatedResultsView = function (_a) {
|
|
|
2547
2530
|
label: "WEBSITE RESULTS",
|
|
2548
2531
|
count: contents.length,
|
|
2549
2532
|
isActive: activeTab === "content",
|
|
2550
|
-
onClick:
|
|
2551
|
-
return onTabChange("content");
|
|
2552
|
-
},
|
|
2533
|
+
onClick: () => onTabChange("content"),
|
|
2553
2534
|
variant: "desktop"
|
|
2554
2535
|
})), onFilterDrawerToggle && /*#__PURE__*/React.createElement("button", {
|
|
2555
2536
|
type: "button",
|
|
@@ -2578,9 +2559,9 @@ var FederatedResultsView = function (_a) {
|
|
|
2578
2559
|
})), /*#__PURE__*/React.createElement("main", {
|
|
2579
2560
|
className: styles$5.mainContent
|
|
2580
2561
|
}, /*#__PURE__*/React.createElement("div", {
|
|
2581
|
-
id:
|
|
2562
|
+
id: `tabpanel-${activeTab}`,
|
|
2582
2563
|
role: "tabpanel",
|
|
2583
|
-
"aria-labelledby":
|
|
2564
|
+
"aria-labelledby": `tab-${activeTab}`
|
|
2584
2565
|
}, /*#__PURE__*/React.createElement(ResultsList, {
|
|
2585
2566
|
type: activeTab,
|
|
2586
2567
|
products: displayProducts,
|
|
@@ -2595,7 +2576,7 @@ var FederatedResultsView = function (_a) {
|
|
|
2595
2576
|
onPageChange: onPageChange,
|
|
2596
2577
|
maxVisiblePages: 10,
|
|
2597
2578
|
showPrevious: false,
|
|
2598
|
-
ariaLabel:
|
|
2579
|
+
ariaLabel: `${activeTab === "products" ? "Products" : "Content"} pagination`
|
|
2599
2580
|
}))))), onFilterDrawerClose && /*#__PURE__*/React.createElement(FilterDrawer, {
|
|
2600
2581
|
isOpen: isFilterDrawerOpen || false,
|
|
2601
2582
|
onClose: onFilterDrawerClose
|
|
@@ -2609,76 +2590,73 @@ var FederatedResultsView = function (_a) {
|
|
|
2609
2590
|
|
|
2610
2591
|
var styles$1 = {"searchExperience":"FederatedSearchExperience-module__searchExperience___gug9X","searchBarSection":"FederatedSearchExperience-module__searchBarSection___f0Ykq","searchBarDesktopOnly":"FederatedSearchExperience-module__searchBarDesktopOnly___CetKZ","searchBarMobileOnly":"FederatedSearchExperience-module__searchBarMobileOnly___Ityxp","resultsHeaderMobileOnly":"FederatedSearchExperience-module__resultsHeaderMobileOnly___09ef-","tabsContainerSticky":"FederatedSearchExperience-module__tabsContainerSticky___-HdY5","tabs":"FederatedSearchExperience-module__tabs___Vatv8","tabSeparator":"FederatedSearchExperience-module__tabSeparator___AUjhW","mobileFilterButtonWrapper":"FederatedSearchExperience-module__mobileFilterButtonWrapper___JkRtk","mobileFilterButton":"FederatedSearchExperience-module__mobileFilterButton___sRc-w","filterIndicatorDot":"FederatedSearchExperience-module__filterIndicatorDot___vqVi2","instantResultsSection":"FederatedSearchExperience-module__instantResultsSection___AG3qn","fullResultsSection":"FederatedSearchExperience-module__fullResultsSection___NH16U"};
|
|
2611
2592
|
|
|
2612
|
-
/**
|
|
2613
|
-
* FederatedSearchExperience - Top-level search experience component
|
|
2614
|
-
*
|
|
2615
|
-
* This component orchestrates the entire federated search experience, including:
|
|
2616
|
-
* - Modal container
|
|
2617
|
-
* - Search input
|
|
2618
|
-
* - Instant results (2-column layout)
|
|
2619
|
-
* - Full results view with tabs and filters
|
|
2620
|
-
*
|
|
2621
|
-
* The component is fully controlled and does not contain any data fetching logic.
|
|
2622
|
-
* All data and callbacks are passed in via props, making it suitable for use in AEM
|
|
2623
|
-
* where a controller layer will handle Algolia integration.
|
|
2624
|
-
*
|
|
2625
|
-
* @example
|
|
2626
|
-
* ```tsx
|
|
2627
|
-
* <FederatedSearchExperience
|
|
2628
|
-
* isOpen={isOpen}
|
|
2629
|
-
* onOpen={handleOpen}
|
|
2630
|
-
* onClose={handleClose}
|
|
2631
|
-
* query={query}
|
|
2632
|
-
* onQueryChange={setQuery}
|
|
2633
|
-
* onSearchSubmit={handleSubmit}
|
|
2634
|
-
* products={products}
|
|
2635
|
-
* contents={contents}
|
|
2636
|
-
* isLoadingProducts={isLoadingProducts}
|
|
2637
|
-
* isLoadingContents={isLoadingContents}
|
|
2638
|
-
* onSeeAllProducts={handleSeeAllProducts}
|
|
2639
|
-
* onSeeAllContents={handleSeeAllContents}
|
|
2640
|
-
* onSeeAllCombined={handleSeeAllCombined}
|
|
2641
|
-
* activeView={activeView}
|
|
2642
|
-
* onChangeView={setActiveView}
|
|
2643
|
-
* activeTab={activeTab}
|
|
2644
|
-
* onTabChange={setActiveTab}
|
|
2645
|
-
* />
|
|
2646
|
-
* ```
|
|
2593
|
+
/**
|
|
2594
|
+
* FederatedSearchExperience - Top-level search experience component
|
|
2595
|
+
*
|
|
2596
|
+
* This component orchestrates the entire federated search experience, including:
|
|
2597
|
+
* - Modal container
|
|
2598
|
+
* - Search input
|
|
2599
|
+
* - Instant results (2-column layout)
|
|
2600
|
+
* - Full results view with tabs and filters
|
|
2601
|
+
*
|
|
2602
|
+
* The component is fully controlled and does not contain any data fetching logic.
|
|
2603
|
+
* All data and callbacks are passed in via props, making it suitable for use in AEM
|
|
2604
|
+
* where a controller layer will handle Algolia integration.
|
|
2605
|
+
*
|
|
2606
|
+
* @example
|
|
2607
|
+
* ```tsx
|
|
2608
|
+
* <FederatedSearchExperience
|
|
2609
|
+
* isOpen={isOpen}
|
|
2610
|
+
* onOpen={handleOpen}
|
|
2611
|
+
* onClose={handleClose}
|
|
2612
|
+
* query={query}
|
|
2613
|
+
* onQueryChange={setQuery}
|
|
2614
|
+
* onSearchSubmit={handleSubmit}
|
|
2615
|
+
* products={products}
|
|
2616
|
+
* contents={contents}
|
|
2617
|
+
* isLoadingProducts={isLoadingProducts}
|
|
2618
|
+
* isLoadingContents={isLoadingContents}
|
|
2619
|
+
* onSeeAllProducts={handleSeeAllProducts}
|
|
2620
|
+
* onSeeAllContents={handleSeeAllContents}
|
|
2621
|
+
* onSeeAllCombined={handleSeeAllCombined}
|
|
2622
|
+
* activeView={activeView}
|
|
2623
|
+
* onChangeView={setActiveView}
|
|
2624
|
+
* activeTab={activeTab}
|
|
2625
|
+
* onTabChange={setActiveTab}
|
|
2626
|
+
* />
|
|
2627
|
+
* ```
|
|
2647
2628
|
*/
|
|
2648
|
-
|
|
2649
|
-
|
|
2650
|
-
|
|
2651
|
-
|
|
2652
|
-
|
|
2653
|
-
|
|
2654
|
-
|
|
2655
|
-
|
|
2656
|
-
|
|
2657
|
-
|
|
2658
|
-
|
|
2659
|
-
|
|
2660
|
-
|
|
2661
|
-
|
|
2662
|
-
|
|
2663
|
-
|
|
2664
|
-
|
|
2665
|
-
|
|
2666
|
-
|
|
2667
|
-
|
|
2668
|
-
|
|
2669
|
-
|
|
2670
|
-
|
|
2671
|
-
|
|
2672
|
-
|
|
2673
|
-
|
|
2674
|
-
|
|
2629
|
+
const FederatedSearchExperience = ({
|
|
2630
|
+
isOpen,
|
|
2631
|
+
onClose,
|
|
2632
|
+
query,
|
|
2633
|
+
onQueryChange,
|
|
2634
|
+
onSearchSubmit,
|
|
2635
|
+
products,
|
|
2636
|
+
contents,
|
|
2637
|
+
isLoadingProducts,
|
|
2638
|
+
isLoadingContents,
|
|
2639
|
+
productsError,
|
|
2640
|
+
contentsError,
|
|
2641
|
+
onSeeAllProducts,
|
|
2642
|
+
onSeeAllContents,
|
|
2643
|
+
onSeeAllCombined,
|
|
2644
|
+
activeView,
|
|
2645
|
+
onChangeView,
|
|
2646
|
+
activeTab,
|
|
2647
|
+
onTabChange,
|
|
2648
|
+
currentPage,
|
|
2649
|
+
totalPages,
|
|
2650
|
+
onPageChange,
|
|
2651
|
+
facets,
|
|
2652
|
+
onFacetToggle,
|
|
2653
|
+
isFilterDrawerOpen,
|
|
2654
|
+
onFilterDrawerToggle,
|
|
2655
|
+
onFilterDrawerClose
|
|
2656
|
+
}) => {
|
|
2675
2657
|
// Track if any filters are active (for red dot indicator)
|
|
2676
|
-
|
|
2677
|
-
return facets.some(
|
|
2678
|
-
return facet.values.some(function (value) {
|
|
2679
|
-
return value.isRefined;
|
|
2680
|
-
});
|
|
2681
|
-
});
|
|
2658
|
+
const hasAppliedFilters = useMemo(() => {
|
|
2659
|
+
return facets.some(facet => facet.values.some(value => value.isRefined));
|
|
2682
2660
|
}, [facets]);
|
|
2683
2661
|
return /*#__PURE__*/React.createElement(SearchModal, {
|
|
2684
2662
|
isOpen: isOpen,
|
|
@@ -2710,9 +2688,7 @@ var FederatedSearchExperience = function (_a) {
|
|
|
2710
2688
|
label: "WEB SHOP RESULTS",
|
|
2711
2689
|
count: products.length,
|
|
2712
2690
|
isActive: activeTab === "products",
|
|
2713
|
-
onClick:
|
|
2714
|
-
return onTabChange("products");
|
|
2715
|
-
},
|
|
2691
|
+
onClick: () => onTabChange("products"),
|
|
2716
2692
|
variant: "mobile"
|
|
2717
2693
|
}), /*#__PURE__*/React.createElement("div", {
|
|
2718
2694
|
className: styles$1.tabSeparator
|
|
@@ -2720,9 +2696,7 @@ var FederatedSearchExperience = function (_a) {
|
|
|
2720
2696
|
label: "WEBSITE RESULTS",
|
|
2721
2697
|
count: contents.length,
|
|
2722
2698
|
isActive: activeTab === "content",
|
|
2723
|
-
onClick:
|
|
2724
|
-
return onTabChange("content");
|
|
2725
|
-
},
|
|
2699
|
+
onClick: () => onTabChange("content"),
|
|
2726
2700
|
variant: "mobile"
|
|
2727
2701
|
})), /*#__PURE__*/React.createElement("div", {
|
|
2728
2702
|
className: styles$1.mobileFilterButtonWrapper
|
|
@@ -2747,7 +2721,7 @@ var FederatedSearchExperience = function (_a) {
|
|
|
2747
2721
|
}, /*#__PURE__*/React.createElement("div", {
|
|
2748
2722
|
className: styles$1.searchExperience
|
|
2749
2723
|
}, activeView === "instant" && /*#__PURE__*/React.createElement("div", {
|
|
2750
|
-
className:
|
|
2724
|
+
className: `${styles$1.searchBarSection} ${styles$1.searchBarDesktopOnly}`
|
|
2751
2725
|
}, /*#__PURE__*/React.createElement(SearchBar, {
|
|
2752
2726
|
value: query,
|
|
2753
2727
|
onChange: onQueryChange,
|
|
@@ -2815,14 +2789,13 @@ var FederatedSearchExperience = function (_a) {
|
|
|
2815
2789
|
|
|
2816
2790
|
var styles = {"searchTrigger":"SearchTriggerButton-module__searchTrigger___PDbDB","searchIcon":"SearchTriggerButton-module__searchIcon___izByW","label":"SearchTriggerButton-module__label___mkS7T"};
|
|
2817
2791
|
|
|
2818
|
-
|
|
2819
|
-
|
|
2820
|
-
|
|
2821
|
-
|
|
2822
|
-
|
|
2823
|
-
|
|
2824
|
-
|
|
2825
|
-
var handleKeyDown = function (event) {
|
|
2792
|
+
const SearchTriggerButton = ({
|
|
2793
|
+
onOpen,
|
|
2794
|
+
ariaLabel = 'Open search',
|
|
2795
|
+
label,
|
|
2796
|
+
className = ''
|
|
2797
|
+
}) => {
|
|
2798
|
+
const handleKeyDown = event => {
|
|
2826
2799
|
if (event.key === 'Enter' || event.key === ' ') {
|
|
2827
2800
|
event.preventDefault();
|
|
2828
2801
|
onOpen();
|
|
@@ -2833,7 +2806,7 @@ var SearchTriggerButton = function (_a) {
|
|
|
2833
2806
|
onClick: onOpen,
|
|
2834
2807
|
onKeyDown: handleKeyDown,
|
|
2835
2808
|
"aria-label": ariaLabel,
|
|
2836
|
-
className:
|
|
2809
|
+
className: `${styles.searchTrigger} ${className}`
|
|
2837
2810
|
}, /*#__PURE__*/React.createElement("svg", {
|
|
2838
2811
|
className: styles.searchIcon,
|
|
2839
2812
|
xmlns: "http://www.w3.org/2000/svg",
|