@asante-org/atlascopco-vt-litesitegenerator 1.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (75) hide show
  1. package/README.md +160 -0
  2. package/dist/.storybook/AtlasCopcoTheme.d.ts +2 -0
  3. package/dist/.storybook/main.d.ts +3 -0
  4. package/dist/.storybook/manager.d.ts +1 -0
  5. package/dist/.storybook/preview.d.ts +4 -0
  6. package/dist/assets/.gitkeep +0 -0
  7. package/dist/index.esm.js +696 -0
  8. package/dist/index.esm.js.map +1 -0
  9. package/dist/index.esm.scss +2050 -0
  10. package/dist/index.js +752 -0
  11. package/dist/index.js.map +1 -0
  12. package/dist/index.scss +2050 -0
  13. package/dist/src/components/lsg/LsgBanner/LsgBanner.d.ts +17 -0
  14. package/dist/src/components/lsg/LsgBanner/LsgBanner.stories.d.ts +7 -0
  15. package/dist/src/components/lsg/LsgBanner/index.d.ts +2 -0
  16. package/dist/src/components/lsg/LsgButton/LsgButton.d.ts +16 -0
  17. package/dist/src/components/lsg/LsgButton/LsgButton.stories.d.ts +10 -0
  18. package/dist/src/components/lsg/LsgButton/index.d.ts +2 -0
  19. package/dist/src/components/lsg/LsgCard/LsgCard.d.ts +22 -0
  20. package/dist/src/components/lsg/LsgCard/LsgCard.stories.d.ts +9 -0
  21. package/dist/src/components/lsg/LsgCard/index.d.ts +2 -0
  22. package/dist/src/components/lsg/LsgFooter/LsgFooter.d.ts +14 -0
  23. package/dist/src/components/lsg/LsgFooter/LsgFooter.stories.d.ts +6 -0
  24. package/dist/src/components/lsg/LsgFooter/index.d.ts +2 -0
  25. package/dist/src/components/lsg/LsgHeader/LsgHeader.d.ts +14 -0
  26. package/dist/src/components/lsg/LsgHeader/LsgHeader.stories.d.ts +6 -0
  27. package/dist/src/components/lsg/LsgHeader/index.d.ts +2 -0
  28. package/dist/src/components/lsg/LsgLanguageSwitcher/LsgLanguageSwitcher.d.ts +20 -0
  29. package/dist/src/components/lsg/LsgLanguageSwitcher/LsgLanguageSwitcher.stories.d.ts +6 -0
  30. package/dist/src/components/lsg/LsgLanguageSwitcher/index.d.ts +2 -0
  31. package/dist/src/components/lsg/LsgLogo/LsgLogo.d.ts +13 -0
  32. package/dist/src/components/lsg/LsgLogo/LsgLogo.stories.d.ts +7 -0
  33. package/dist/src/components/lsg/LsgLogo/index.d.ts +2 -0
  34. package/dist/src/components/lsg/LsgNavigation/LsgNavigation.d.ts +13 -0
  35. package/dist/src/components/lsg/LsgNavigation/LsgNavigation.stories.d.ts +6 -0
  36. package/dist/src/components/lsg/LsgNavigation/index.d.ts +2 -0
  37. package/dist/src/components/lsg/LsgQuickLinks/LsgQuickLinks.d.ts +11 -0
  38. package/dist/src/components/lsg/LsgQuickLinks/LsgQuickLinks.stories.d.ts +6 -0
  39. package/dist/src/components/lsg/LsgQuickLinks/index.d.ts +2 -0
  40. package/dist/src/components/lsg/LsgSearchOverlay/LsgSearchOverlay.d.ts +19 -0
  41. package/dist/src/components/lsg/LsgSearchOverlay/LsgSearchOverlay.stories.d.ts +6 -0
  42. package/dist/src/components/lsg/LsgSearchOverlay/index.d.ts +2 -0
  43. package/dist/src/components/lsg/LsgSearchTrigger/LsgSearchTrigger.d.ts +10 -0
  44. package/dist/src/components/lsg/LsgSearchTrigger/LsgSearchTrigger.stories.d.ts +6 -0
  45. package/dist/src/components/lsg/LsgSearchTrigger/index.d.ts +2 -0
  46. package/dist/src/components/lsg/LsgSocialMediaIcons/LsgSocialMediaIcons.d.ts +13 -0
  47. package/dist/src/components/lsg/LsgSocialMediaIcons/LsgSocialMediaIcons.stories.d.ts +6 -0
  48. package/dist/src/components/lsg/LsgSocialMediaIcons/index.d.ts +2 -0
  49. package/dist/src/components/lsg/_LsgOverviewComponents.d.ts +35 -0
  50. package/dist/src/components/lsg/index.d.ts +24 -0
  51. package/dist/src/components/lsg/lsg-clientlib-runtime.d.ts +1 -0
  52. package/dist/src/components/lsg/lsg-clientlib.d.ts +14 -0
  53. package/dist/src/index.d.ts +6 -0
  54. package/dist/src/stories/foundation/_components/StoryLayout.d.ts +11 -0
  55. package/dist/src/themes/createThemeComponents.d.ts +19 -0
  56. package/dist/src/themes/theme-1/components.d.ts +16 -0
  57. package/dist/src/themes/theme-1/theme-clientlib.d.ts +1 -0
  58. package/dist/src/themes/theme-2/components.d.ts +16 -0
  59. package/dist/src/themes/theme-2/theme-clientlib.d.ts +1 -0
  60. package/dist/src/themes/theme-3/components.d.ts +16 -0
  61. package/dist/src/themes/theme-3/theme-clientlib.d.ts +1 -0
  62. package/dist/themes/theme-1.css +754 -0
  63. package/dist/themes/theme-1.css.map +1 -0
  64. package/dist/themes/theme-1.js +99 -0
  65. package/dist/themes/theme-1.js.map +1 -0
  66. package/dist/themes/theme-2.css +754 -0
  67. package/dist/themes/theme-2.css.map +1 -0
  68. package/dist/themes/theme-2.js +99 -0
  69. package/dist/themes/theme-2.js.map +1 -0
  70. package/dist/themes/theme-3.css +762 -0
  71. package/dist/themes/theme-3.css.map +1 -0
  72. package/dist/themes/theme-3.js +99 -0
  73. package/dist/themes/theme-3.js.map +1 -0
  74. package/dist/tsconfig.tsbuildinfo +1 -0
  75. package/package.json +115 -0
package/dist/index.js ADDED
@@ -0,0 +1,752 @@
1
+ 'use strict';
2
+
3
+ var React = require('react');
4
+
5
+ function _extends() {
6
+ return _extends = Object.assign ? Object.assign.bind() : function (n) {
7
+ for (var e = 1; e < arguments.length; e++) {
8
+ var t = arguments[e];
9
+ for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
10
+ }
11
+ return n;
12
+ }, _extends.apply(null, arguments);
13
+ }
14
+
15
+ var LsgButton = function (_a) {
16
+ var children = _a.children,
17
+ _b = _a.variant,
18
+ variant = _b === void 0 ? "primary" : _b,
19
+ _c = _a.disabled,
20
+ disabled = _c === void 0 ? false : _c,
21
+ href = _a.href,
22
+ onClick = _a.onClick,
23
+ _d = _a.type,
24
+ type = _d === void 0 ? "button" : _d,
25
+ _e = _a.className,
26
+ className = _e === void 0 ? "" : _e,
27
+ _f = _a.external,
28
+ external = _f === void 0 ? false : _f;
29
+ var classNames = ["lsg-button", "lsg-button--".concat(variant), disabled ? "lsg-button--disabled" : "", className].filter(Boolean).join(" ");
30
+ if (href) {
31
+ return /*#__PURE__*/React.createElement("a", _extends({
32
+ href: disabled ? undefined : href,
33
+ className: classNames,
34
+ "aria-disabled": disabled || undefined,
35
+ onClick: disabled ? undefined : onClick
36
+ }, external ? {
37
+ target: "_blank",
38
+ rel: "noopener noreferrer"
39
+ } : {}), children);
40
+ }
41
+ return /*#__PURE__*/React.createElement("button", {
42
+ type: type,
43
+ className: classNames,
44
+ disabled: disabled,
45
+ onClick: onClick
46
+ }, children);
47
+ };
48
+
49
+ var LsgBanner = function (_a) {
50
+ var heading = _a.heading,
51
+ eyebrow = _a.eyebrow,
52
+ copy = _a.copy,
53
+ cta = _a.cta,
54
+ imageUrl = _a.imageUrl,
55
+ _b = _a.imageAlt,
56
+ imageAlt = _b === void 0 ? "" : _b;
57
+ return /*#__PURE__*/React.createElement("section", {
58
+ className: "lsg-banner"
59
+ }, imageUrl && /*#__PURE__*/React.createElement("div", {
60
+ className: "lsg-banner__background",
61
+ "aria-hidden": "true"
62
+ }, /*#__PURE__*/React.createElement("img", {
63
+ src: imageUrl,
64
+ alt: imageAlt
65
+ })), /*#__PURE__*/React.createElement("div", {
66
+ className: "lsg-banner__inner"
67
+ }, eyebrow && /*#__PURE__*/React.createElement("span", {
68
+ className: "lsg-banner__eyebrow"
69
+ }, eyebrow), /*#__PURE__*/React.createElement("h1", {
70
+ className: "lsg-banner__heading"
71
+ }, heading), copy && /*#__PURE__*/React.createElement("p", {
72
+ className: "lsg-banner__copy"
73
+ }, copy), cta && /*#__PURE__*/React.createElement(LsgButton, {
74
+ href: cta.href,
75
+ external: cta.external,
76
+ variant: "primary",
77
+ className: "lsg-banner__cta"
78
+ }, cta.label)));
79
+ };
80
+
81
+ var LsgCard = function (_a) {
82
+ var title = _a.title,
83
+ description = _a.description,
84
+ imageUrl = _a.imageUrl,
85
+ _b = _a.imageAlt,
86
+ imageAlt = _b === void 0 ? "" : _b,
87
+ href = _a.href,
88
+ cta = _a.cta;
89
+ var inner = /*#__PURE__*/React.createElement(React.Fragment, null, imageUrl && /*#__PURE__*/React.createElement("div", {
90
+ className: "lsg-card__image"
91
+ }, /*#__PURE__*/React.createElement("img", {
92
+ src: imageUrl,
93
+ alt: imageAlt,
94
+ loading: "lazy"
95
+ })), /*#__PURE__*/React.createElement("div", {
96
+ className: "lsg-card__body"
97
+ }, /*#__PURE__*/React.createElement("h3", {
98
+ className: "lsg-card__title"
99
+ }, title), description && /*#__PURE__*/React.createElement("p", {
100
+ className: "lsg-card__description"
101
+ }, description), cta && !href && /*#__PURE__*/React.createElement("div", {
102
+ className: "lsg-card__footer"
103
+ }, /*#__PURE__*/React.createElement(LsgButton, {
104
+ href: cta.href,
105
+ external: cta.external,
106
+ variant: "ghost"
107
+ }, cta.label))));
108
+ if (href) {
109
+ return /*#__PURE__*/React.createElement("article", {
110
+ className: "lsg-card"
111
+ }, /*#__PURE__*/React.createElement("a", {
112
+ href: href,
113
+ className: "lsg-card__link",
114
+ "aria-label": title
115
+ }, inner));
116
+ }
117
+ return /*#__PURE__*/React.createElement("article", {
118
+ className: "lsg-card"
119
+ }, inner);
120
+ };
121
+ /** Renders a responsive grid of LsgCard items. */
122
+ var LsgCards = function (_a) {
123
+ var cards = _a.cards;
124
+ return /*#__PURE__*/React.createElement("ul", {
125
+ className: "lsg-cards"
126
+ }, cards.map(function (card, i) {
127
+ var _a;
128
+ return /*#__PURE__*/React.createElement("li", {
129
+ key: (_a = card.href) !== null && _a !== void 0 ? _a : i
130
+ }, /*#__PURE__*/React.createElement(LsgCard, card));
131
+ }));
132
+ };
133
+
134
+ var LsgLogo = function (_a) {
135
+ var src = _a.src,
136
+ _b = _a.alt,
137
+ alt = _b === void 0 ? "Logo" : _b,
138
+ _c = _a.href,
139
+ href = _c === void 0 ? "/" : _c,
140
+ width = _a.width,
141
+ _d = _a.height,
142
+ height = _d === void 0 ? 40 : _d,
143
+ _e = _a.text,
144
+ text = _e === void 0 ? "Atlas Copco" : _e;
145
+ var content = src ? /*#__PURE__*/React.createElement("img", {
146
+ src: src,
147
+ alt: alt,
148
+ width: width,
149
+ height: height,
150
+ className: "lsg-logo__image"
151
+ }) : /*#__PURE__*/React.createElement("span", {
152
+ className: "lsg-logo__text"
153
+ }, text);
154
+ return /*#__PURE__*/React.createElement("a", {
155
+ href: href,
156
+ className: "lsg-logo",
157
+ "aria-label": src ? alt : undefined
158
+ }, content);
159
+ };
160
+
161
+ var LsgNavigation = function (_a) {
162
+ var items = _a.items,
163
+ _b = _a.label,
164
+ label = _b === void 0 ? "Main navigation" : _b;
165
+ return /*#__PURE__*/React.createElement("nav", {
166
+ className: "lsg-nav",
167
+ "aria-label": label
168
+ }, /*#__PURE__*/React.createElement("ul", {
169
+ className: "lsg-nav__list",
170
+ role: "list"
171
+ }, items.map(function (item) {
172
+ return /*#__PURE__*/React.createElement("li", {
173
+ key: item.href,
174
+ className: "lsg-nav__item"
175
+ }, /*#__PURE__*/React.createElement("a", {
176
+ href: item.href,
177
+ className: ["lsg-nav__link", item.current ? "lsg-nav__link--current" : ""].filter(Boolean).join(" "),
178
+ "aria-current": item.current ? "page" : undefined
179
+ }, item.label));
180
+ })));
181
+ };
182
+
183
+ var ChevronIcon = function () {
184
+ return /*#__PURE__*/React.createElement("svg", {
185
+ xmlns: "http://www.w3.org/2000/svg",
186
+ viewBox: "0 0 12 12",
187
+ fill: "none",
188
+ stroke: "currentColor",
189
+ strokeWidth: "1.5",
190
+ strokeLinecap: "round",
191
+ strokeLinejoin: "round",
192
+ "aria-hidden": "true",
193
+ focusable: "false"
194
+ }, /*#__PURE__*/React.createElement("polyline", {
195
+ points: "2 4 6 8 10 4"
196
+ }));
197
+ };
198
+ /**
199
+ * Language Switcher
200
+ *
201
+ * Hydrated: state managed by React (useState).
202
+ * Clientlib-only: driven by lsg-clientlib.js targeting [data-lsg-lang-switcher].
203
+ */
204
+ var LsgLanguageSwitcher = function (_a) {
205
+ var currentLanguage = _a.currentLanguage,
206
+ languages = _a.languages,
207
+ _b = _a.label,
208
+ label = _b === void 0 ? "Select language" : _b;
209
+ var _c = React.useState(false),
210
+ isOpen = _c[0],
211
+ setIsOpen = _c[1];
212
+ var containerRef = React.useRef(null);
213
+ var triggerId = "lsg-lang-trigger";
214
+ var dropdownId = "lsg-lang-dropdown";
215
+ // Close on outside click
216
+ React.useEffect(function () {
217
+ if (!isOpen) return;
218
+ var handleClick = function (e) {
219
+ if (containerRef.current && !containerRef.current.contains(e.target)) {
220
+ setIsOpen(false);
221
+ }
222
+ };
223
+ document.addEventListener("mousedown", handleClick);
224
+ return function () {
225
+ return document.removeEventListener("mousedown", handleClick);
226
+ };
227
+ }, [isOpen]);
228
+ // Close on Escape
229
+ React.useEffect(function () {
230
+ if (!isOpen) return;
231
+ var handleKey = function (e) {
232
+ if (e.key === "Escape") setIsOpen(false);
233
+ };
234
+ document.addEventListener("keydown", handleKey);
235
+ return function () {
236
+ return document.removeEventListener("keydown", handleKey);
237
+ };
238
+ }, [isOpen]);
239
+ return /*#__PURE__*/React.createElement("div", {
240
+ className: "lsg-lang-switcher",
241
+ ref: containerRef,
242
+ "data-lsg-lang-switcher": true
243
+ }, /*#__PURE__*/React.createElement("button", {
244
+ id: triggerId,
245
+ type: "button",
246
+ className: "lsg-lang-switcher__trigger",
247
+ "aria-label": label,
248
+ "aria-haspopup": "listbox",
249
+ "aria-expanded": isOpen,
250
+ "aria-controls": dropdownId,
251
+ onClick: function () {
252
+ return setIsOpen(function (prev) {
253
+ return !prev;
254
+ });
255
+ }
256
+ }, currentLanguage, /*#__PURE__*/React.createElement(ChevronIcon, null)), isOpen && /*#__PURE__*/React.createElement("ul", {
257
+ id: dropdownId,
258
+ className: "lsg-lang-switcher__dropdown",
259
+ role: "listbox",
260
+ "aria-labelledby": triggerId
261
+ }, languages.map(function (lang) {
262
+ return /*#__PURE__*/React.createElement("li", {
263
+ key: lang.code,
264
+ className: "lsg-lang-switcher__option",
265
+ role: "option"
266
+ }, /*#__PURE__*/React.createElement("a", {
267
+ href: lang.href,
268
+ className: ["lsg-lang-switcher__option-link", lang.code === currentLanguage ? "lsg-lang-switcher__option-link--active" : ""].filter(Boolean).join(" "),
269
+ "aria-current": lang.code === currentLanguage ? true : undefined
270
+ }, lang.label));
271
+ })));
272
+ };
273
+
274
+ var SearchIcon$1 = function () {
275
+ return /*#__PURE__*/React.createElement("svg", {
276
+ xmlns: "http://www.w3.org/2000/svg",
277
+ viewBox: "0 0 24 24",
278
+ fill: "none",
279
+ stroke: "currentColor",
280
+ strokeWidth: "2",
281
+ strokeLinecap: "round",
282
+ strokeLinejoin: "round",
283
+ "aria-hidden": "true",
284
+ focusable: "false"
285
+ }, /*#__PURE__*/React.createElement("circle", {
286
+ cx: "11",
287
+ cy: "11",
288
+ r: "8"
289
+ }), /*#__PURE__*/React.createElement("line", {
290
+ x1: "21",
291
+ y1: "21",
292
+ x2: "16.65",
293
+ y2: "16.65"
294
+ }));
295
+ };
296
+ var LsgSearchTrigger = function (_a) {
297
+ var _b = _a.label,
298
+ label = _b === void 0 ? "Open search" : _b,
299
+ targetId = _a.targetId,
300
+ onClick = _a.onClick;
301
+ return /*#__PURE__*/React.createElement("button", {
302
+ type: "button",
303
+ className: "lsg-search-trigger",
304
+ "aria-label": label,
305
+ "aria-haspopup": "dialog",
306
+ "aria-controls": targetId,
307
+ onClick: onClick,
308
+ "data-lsg-search-trigger": true
309
+ }, /*#__PURE__*/React.createElement(SearchIcon$1, null));
310
+ };
311
+
312
+ var SearchIcon = function () {
313
+ return /*#__PURE__*/React.createElement("svg", {
314
+ xmlns: "http://www.w3.org/2000/svg",
315
+ viewBox: "0 0 24 24",
316
+ fill: "none",
317
+ stroke: "currentColor",
318
+ strokeWidth: "2",
319
+ strokeLinecap: "round",
320
+ strokeLinejoin: "round",
321
+ "aria-hidden": "true",
322
+ focusable: "false"
323
+ }, /*#__PURE__*/React.createElement("circle", {
324
+ cx: "11",
325
+ cy: "11",
326
+ r: "8"
327
+ }), /*#__PURE__*/React.createElement("line", {
328
+ x1: "21",
329
+ y1: "21",
330
+ x2: "16.65",
331
+ y2: "16.65"
332
+ }));
333
+ };
334
+ var CloseIcon = function () {
335
+ return /*#__PURE__*/React.createElement("svg", {
336
+ xmlns: "http://www.w3.org/2000/svg",
337
+ viewBox: "0 0 24 24",
338
+ fill: "none",
339
+ stroke: "currentColor",
340
+ strokeWidth: "2",
341
+ strokeLinecap: "round",
342
+ strokeLinejoin: "round",
343
+ "aria-hidden": "true",
344
+ focusable: "false"
345
+ }, /*#__PURE__*/React.createElement("line", {
346
+ x1: "18",
347
+ y1: "6",
348
+ x2: "6",
349
+ y2: "18"
350
+ }), /*#__PURE__*/React.createElement("line", {
351
+ x1: "6",
352
+ y1: "6",
353
+ x2: "18",
354
+ y2: "18"
355
+ }));
356
+ };
357
+ /**
358
+ * Search Overlay
359
+ *
360
+ * Hydrated: isOpen/onClose controlled by parent (e.g. LsgHeader).
361
+ * Clientlib-only: driven by lsg-clientlib.js targeting [data-lsg-search-overlay].
362
+ * The CSS class lsg-search-overlay--open drives visibility in both modes.
363
+ */
364
+ var LsgSearchOverlay = function (_a) {
365
+ var _b = _a.id,
366
+ id = _b === void 0 ? "lsg-search-overlay" : _b,
367
+ _c = _a.placeholder,
368
+ placeholder = _c === void 0 ? "Search…" : _c,
369
+ _d = _a.label,
370
+ label = _d === void 0 ? "Search" : _d,
371
+ _e = _a.isOpen,
372
+ isOpen = _e === void 0 ? false : _e,
373
+ onClose = _a.onClose,
374
+ onSearch = _a.onSearch;
375
+ var inputRef = React.useRef(null);
376
+ var inputId = "".concat(id, "-input");
377
+ // Focus the input when overlay opens
378
+ React.useEffect(function () {
379
+ var _a;
380
+ if (isOpen) (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
381
+ }, [isOpen]);
382
+ // Close on Escape
383
+ React.useEffect(function () {
384
+ if (!isOpen) return;
385
+ var handleKey = function (e) {
386
+ if (e.key === "Escape") onClose === null || onClose === void 0 ? void 0 : onClose();
387
+ };
388
+ document.addEventListener("keydown", handleKey);
389
+ return function () {
390
+ return document.removeEventListener("keydown", handleKey);
391
+ };
392
+ }, [isOpen, onClose]);
393
+ var handleSubmit = function (e) {
394
+ var _a, _b;
395
+ e.preventDefault();
396
+ var query = (_b = (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : "";
397
+ if (query.trim()) onSearch === null || onSearch === void 0 ? void 0 : onSearch(query.trim());
398
+ };
399
+ var overlayClass = ["lsg-search-overlay", isOpen ? "lsg-search-overlay--open" : ""].filter(Boolean).join(" ");
400
+ return /*#__PURE__*/React.createElement("div", {
401
+ id: id,
402
+ className: overlayClass,
403
+ role: "dialog",
404
+ "aria-modal": "true",
405
+ "aria-label": label,
406
+ "data-lsg-search-overlay": true
407
+ }, /*#__PURE__*/React.createElement("div", {
408
+ className: "lsg-search-overlay__backdrop",
409
+ "aria-hidden": "true",
410
+ onClick: onClose,
411
+ style: {
412
+ position: "absolute",
413
+ inset: 0,
414
+ cursor: "default"
415
+ }
416
+ }), /*#__PURE__*/React.createElement("div", {
417
+ className: "lsg-search-overlay__panel"
418
+ }, /*#__PURE__*/React.createElement("form", {
419
+ className: "lsg-search-overlay__form",
420
+ role: "search",
421
+ onSubmit: handleSubmit
422
+ }, /*#__PURE__*/React.createElement("label", {
423
+ htmlFor: inputId,
424
+ className: "lsg-search-overlay__label"
425
+ }, /*#__PURE__*/React.createElement(SearchIcon, null), /*#__PURE__*/React.createElement("span", {
426
+ className: "lsg-visually-hidden"
427
+ }, label)), /*#__PURE__*/React.createElement("input", {
428
+ id: inputId,
429
+ ref: inputRef,
430
+ type: "search",
431
+ className: "lsg-search-overlay__input",
432
+ placeholder: placeholder,
433
+ autoComplete: "off"
434
+ }), /*#__PURE__*/React.createElement("button", {
435
+ type: "submit",
436
+ className: "lsg-search-overlay__submit",
437
+ "aria-label": "Submit search"
438
+ }, /*#__PURE__*/React.createElement(SearchIcon, null)), /*#__PURE__*/React.createElement("button", {
439
+ type: "button",
440
+ className: "lsg-search-overlay__close",
441
+ "aria-label": "Close search",
442
+ onClick: onClose
443
+ }, /*#__PURE__*/React.createElement(CloseIcon, null)))));
444
+ };
445
+
446
+ var SEARCH_OVERLAY_ID = "lsg-header-search-overlay";
447
+ var LsgHeader = function (_a) {
448
+ var logo = _a.logo,
449
+ _b = _a.navItems,
450
+ navItems = _b === void 0 ? [] : _b,
451
+ _c = _a.languages,
452
+ languages = _c === void 0 ? [] : _c,
453
+ _d = _a.currentLanguage,
454
+ currentLanguage = _d === void 0 ? "EN" : _d,
455
+ _e = _a.searchLabel,
456
+ searchLabel = _e === void 0 ? "Open search" : _e,
457
+ _f = _a.searchPlaceholder,
458
+ searchPlaceholder = _f === void 0 ? "Search products, documents…" : _f;
459
+ var _g = React.useState(false),
460
+ searchOpen = _g[0],
461
+ setSearchOpen = _g[1];
462
+ return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("header", {
463
+ className: "lsg-header"
464
+ }, /*#__PURE__*/React.createElement("div", {
465
+ className: "lsg-header__inner"
466
+ }, /*#__PURE__*/React.createElement("div", {
467
+ className: "lsg-header__brand"
468
+ }, /*#__PURE__*/React.createElement(LsgLogo, logo)), navItems.length > 0 && /*#__PURE__*/React.createElement("div", {
469
+ className: "lsg-header__nav"
470
+ }, /*#__PURE__*/React.createElement(LsgNavigation, {
471
+ items: navItems
472
+ })), /*#__PURE__*/React.createElement("div", {
473
+ className: "lsg-header__actions"
474
+ }, languages.length > 0 && /*#__PURE__*/React.createElement(LsgLanguageSwitcher, {
475
+ currentLanguage: currentLanguage,
476
+ languages: languages
477
+ }), /*#__PURE__*/React.createElement(LsgSearchTrigger, {
478
+ label: searchLabel,
479
+ targetId: SEARCH_OVERLAY_ID,
480
+ onClick: function () {
481
+ return setSearchOpen(true);
482
+ }
483
+ })))), /*#__PURE__*/React.createElement(LsgSearchOverlay, {
484
+ id: SEARCH_OVERLAY_ID,
485
+ isOpen: searchOpen,
486
+ onClose: function () {
487
+ return setSearchOpen(false);
488
+ },
489
+ placeholder: searchPlaceholder
490
+ }));
491
+ };
492
+
493
+ var LsgQuickLinks = function (_a) {
494
+ var heading = _a.heading,
495
+ links = _a.links;
496
+ return /*#__PURE__*/React.createElement("nav", {
497
+ className: "lsg-quick-links",
498
+ "aria-label": heading !== null && heading !== void 0 ? heading : "Quick links"
499
+ }, heading && /*#__PURE__*/React.createElement("p", {
500
+ className: "lsg-quick-links__heading",
501
+ "aria-hidden": "true"
502
+ }, heading), /*#__PURE__*/React.createElement("ul", {
503
+ className: "lsg-quick-links__list",
504
+ role: "list"
505
+ }, links.map(function (link) {
506
+ return /*#__PURE__*/React.createElement("li", {
507
+ key: link.href,
508
+ className: "lsg-quick-links__item"
509
+ }, /*#__PURE__*/React.createElement("a", {
510
+ href: link.href,
511
+ className: "lsg-quick-links__link"
512
+ }, link.label));
513
+ })));
514
+ };
515
+
516
+ var platformIcons = {
517
+ linkedin: /*#__PURE__*/React.createElement("svg", {
518
+ viewBox: "0 0 24 24",
519
+ xmlns: "http://www.w3.org/2000/svg",
520
+ "aria-hidden": "true",
521
+ focusable: "false"
522
+ }, /*#__PURE__*/React.createElement("path", {
523
+ d: "M20.45 20.45h-3.56v-5.57c0-1.33-.03-3.04-1.85-3.04-1.86 0-2.14 1.45-2.14 2.95v5.66H9.34V9h3.41v1.56h.05c.48-.9 1.64-1.85 3.37-1.85 3.6 0 4.27 2.37 4.27 5.45v6.29zM5.34 7.43a2.07 2.07 0 1 1 0-4.14 2.07 2.07 0 0 1 0 4.14zM7.12 20.45H3.55V9h3.57v11.45z"
524
+ })),
525
+ twitter: /*#__PURE__*/React.createElement("svg", {
526
+ viewBox: "0 0 24 24",
527
+ xmlns: "http://www.w3.org/2000/svg",
528
+ "aria-hidden": "true",
529
+ focusable: "false"
530
+ }, /*#__PURE__*/React.createElement("path", {
531
+ d: "M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"
532
+ })),
533
+ facebook: /*#__PURE__*/React.createElement("svg", {
534
+ viewBox: "0 0 24 24",
535
+ xmlns: "http://www.w3.org/2000/svg",
536
+ "aria-hidden": "true",
537
+ focusable: "false"
538
+ }, /*#__PURE__*/React.createElement("path", {
539
+ d: "M24 12.073C24 5.405 18.627 0 12 0S0 5.405 0 12.073C0 18.1 4.388 23.094 10.125 24v-8.437H7.078v-3.49h3.047V9.41c0-3.025 1.792-4.697 4.533-4.697 1.312 0 2.686.236 2.686.236v2.97h-1.513c-1.491 0-1.956.93-1.956 1.874v2.25h3.328l-.532 3.49h-2.796V24C19.612 23.094 24 18.1 24 12.073z"
540
+ })),
541
+ instagram: /*#__PURE__*/React.createElement("svg", {
542
+ viewBox: "0 0 24 24",
543
+ xmlns: "http://www.w3.org/2000/svg",
544
+ "aria-hidden": "true",
545
+ focusable: "false"
546
+ }, /*#__PURE__*/React.createElement("path", {
547
+ d: "M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 1 0 0 12.324 6.162 6.162 0 0 0 0-12.324zM12 16a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm6.406-11.845a1.44 1.44 0 1 0 0 2.881 1.44 1.44 0 0 0 0-2.881z"
548
+ })),
549
+ youtube: /*#__PURE__*/React.createElement("svg", {
550
+ viewBox: "0 0 24 24",
551
+ xmlns: "http://www.w3.org/2000/svg",
552
+ "aria-hidden": "true",
553
+ focusable: "false"
554
+ }, /*#__PURE__*/React.createElement("path", {
555
+ d: "M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"
556
+ }))
557
+ };
558
+ var LsgSocialMediaIcons = function (_a) {
559
+ var items = _a.items;
560
+ return /*#__PURE__*/React.createElement("ul", {
561
+ className: "lsg-social-icons",
562
+ role: "list"
563
+ }, items.map(function (item) {
564
+ return /*#__PURE__*/React.createElement("li", {
565
+ key: item.platform,
566
+ className: "lsg-social-icons__item"
567
+ }, /*#__PURE__*/React.createElement("a", {
568
+ href: item.href,
569
+ className: "lsg-social-icons__link",
570
+ "aria-label": item.label,
571
+ target: "_blank",
572
+ rel: "noopener noreferrer"
573
+ }, platformIcons[item.platform]));
574
+ }));
575
+ };
576
+
577
+ var LsgFooter = function (_a) {
578
+ var logo = _a.logo,
579
+ tagline = _a.tagline,
580
+ _b = _a.quickLinksGroups,
581
+ quickLinksGroups = _b === void 0 ? [] : _b,
582
+ _c = _a.socialItems,
583
+ socialItems = _c === void 0 ? [] : _c,
584
+ copyright = _a.copyright;
585
+ var year = new Date().getFullYear();
586
+ return /*#__PURE__*/React.createElement("footer", {
587
+ className: "lsg-footer"
588
+ }, /*#__PURE__*/React.createElement("div", {
589
+ className: "lsg-footer__inner"
590
+ }, /*#__PURE__*/React.createElement("div", {
591
+ className: "lsg-footer__brand"
592
+ }, /*#__PURE__*/React.createElement(LsgLogo, logo), tagline && /*#__PURE__*/React.createElement("p", {
593
+ className: "lsg-footer__tagline"
594
+ }, tagline), socialItems.length > 0 && /*#__PURE__*/React.createElement(LsgSocialMediaIcons, {
595
+ items: socialItems
596
+ })), quickLinksGroups.length > 0 && /*#__PURE__*/React.createElement("div", {
597
+ className: "lsg-footer__nav"
598
+ }, quickLinksGroups.map(function (group, i) {
599
+ var _a;
600
+ return /*#__PURE__*/React.createElement(LsgQuickLinks, _extends({
601
+ key: (_a = group.heading) !== null && _a !== void 0 ? _a : i
602
+ }, group));
603
+ }))), /*#__PURE__*/React.createElement("div", {
604
+ className: "lsg-footer__bottom"
605
+ }, /*#__PURE__*/React.createElement("p", {
606
+ className: "lsg-footer__copyright"
607
+ }, copyright !== null && copyright !== void 0 ? copyright : "\u00A9 ".concat(year, " Atlas Copco AB. All rights reserved."))));
608
+ };
609
+
610
+ var BASE_COMPONENTS = {
611
+ LsgButton: LsgButton,
612
+ LsgBanner: LsgBanner,
613
+ LsgCard: LsgCard,
614
+ LsgCards: LsgCards,
615
+ LsgLogo: LsgLogo,
616
+ LsgNavigation: LsgNavigation,
617
+ LsgLanguageSwitcher: LsgLanguageSwitcher,
618
+ LsgSearchTrigger: LsgSearchTrigger,
619
+ LsgSearchOverlay: LsgSearchOverlay,
620
+ LsgHeader: LsgHeader,
621
+ LsgQuickLinks: LsgQuickLinks,
622
+ LsgSocialMediaIcons: LsgSocialMediaIcons,
623
+ LsgFooter: LsgFooter
624
+ };
625
+ function createThemeComponent(themeName, componentName, Component) {
626
+ var WrappedComponent = function (props) {
627
+ return /*#__PURE__*/React.createElement("div", {
628
+ className: ["lsg-themed-component", "lsg-themed-component--".concat(themeName), "lsg-themed-component--".concat(componentName)].join(" ")
629
+ }, /*#__PURE__*/React.createElement(Component, props));
630
+ };
631
+ WrappedComponent.displayName = "".concat(themeName, "-").concat(componentName);
632
+ return WrappedComponent;
633
+ }
634
+ function createThemeComponents(themeName) {
635
+ return {
636
+ LsgButton: createThemeComponent(themeName, "button", BASE_COMPONENTS.LsgButton),
637
+ LsgBanner: createThemeComponent(themeName, "banner", BASE_COMPONENTS.LsgBanner),
638
+ LsgCard: createThemeComponent(themeName, "card", BASE_COMPONENTS.LsgCard),
639
+ LsgCards: createThemeComponent(themeName, "cards", BASE_COMPONENTS.LsgCards),
640
+ LsgLogo: createThemeComponent(themeName, "logo", BASE_COMPONENTS.LsgLogo),
641
+ LsgNavigation: createThemeComponent(themeName, "navigation", BASE_COMPONENTS.LsgNavigation),
642
+ LsgLanguageSwitcher: createThemeComponent(themeName, "language-switcher", BASE_COMPONENTS.LsgLanguageSwitcher),
643
+ LsgSearchTrigger: createThemeComponent(themeName, "search-trigger", BASE_COMPONENTS.LsgSearchTrigger),
644
+ LsgSearchOverlay: createThemeComponent(themeName, "search-overlay", BASE_COMPONENTS.LsgSearchOverlay),
645
+ LsgHeader: createThemeComponent(themeName, "header", BASE_COMPONENTS.LsgHeader),
646
+ LsgQuickLinks: createThemeComponent(themeName, "quick-links", BASE_COMPONENTS.LsgQuickLinks),
647
+ LsgSocialMediaIcons: createThemeComponent(themeName, "social-media-icons", BASE_COMPONENTS.LsgSocialMediaIcons),
648
+ LsgFooter: createThemeComponent(themeName, "footer", BASE_COMPONENTS.LsgFooter)
649
+ };
650
+ }
651
+
652
+ var theme1Components = createThemeComponents("theme-1");
653
+ var Theme1LsgButton = theme1Components.LsgButton,
654
+ Theme1LsgBanner = theme1Components.LsgBanner,
655
+ Theme1LsgCard = theme1Components.LsgCard,
656
+ Theme1LsgCards = theme1Components.LsgCards,
657
+ Theme1LsgLogo = theme1Components.LsgLogo,
658
+ Theme1LsgNavigation = theme1Components.LsgNavigation,
659
+ Theme1LsgLanguageSwitcher = theme1Components.LsgLanguageSwitcher,
660
+ Theme1LsgSearchTrigger = theme1Components.LsgSearchTrigger,
661
+ Theme1LsgSearchOverlay = theme1Components.LsgSearchOverlay,
662
+ Theme1LsgHeader = theme1Components.LsgHeader,
663
+ Theme1LsgQuickLinks = theme1Components.LsgQuickLinks,
664
+ Theme1LsgSocialMediaIcons = theme1Components.LsgSocialMediaIcons,
665
+ Theme1LsgFooter = theme1Components.LsgFooter;
666
+
667
+ var theme2Components = createThemeComponents("theme-2");
668
+ var Theme2LsgButton = theme2Components.LsgButton,
669
+ Theme2LsgBanner = theme2Components.LsgBanner,
670
+ Theme2LsgCard = theme2Components.LsgCard,
671
+ Theme2LsgCards = theme2Components.LsgCards,
672
+ Theme2LsgLogo = theme2Components.LsgLogo,
673
+ Theme2LsgNavigation = theme2Components.LsgNavigation,
674
+ Theme2LsgLanguageSwitcher = theme2Components.LsgLanguageSwitcher,
675
+ Theme2LsgSearchTrigger = theme2Components.LsgSearchTrigger,
676
+ Theme2LsgSearchOverlay = theme2Components.LsgSearchOverlay,
677
+ Theme2LsgHeader = theme2Components.LsgHeader,
678
+ Theme2LsgQuickLinks = theme2Components.LsgQuickLinks,
679
+ Theme2LsgSocialMediaIcons = theme2Components.LsgSocialMediaIcons,
680
+ Theme2LsgFooter = theme2Components.LsgFooter;
681
+
682
+ var theme3Components = createThemeComponents("theme-3");
683
+ var Theme3LsgButton = theme3Components.LsgButton,
684
+ Theme3LsgBanner = theme3Components.LsgBanner,
685
+ Theme3LsgCard = theme3Components.LsgCard,
686
+ Theme3LsgCards = theme3Components.LsgCards,
687
+ Theme3LsgLogo = theme3Components.LsgLogo,
688
+ Theme3LsgNavigation = theme3Components.LsgNavigation,
689
+ Theme3LsgLanguageSwitcher = theme3Components.LsgLanguageSwitcher,
690
+ Theme3LsgSearchTrigger = theme3Components.LsgSearchTrigger,
691
+ Theme3LsgSearchOverlay = theme3Components.LsgSearchOverlay,
692
+ Theme3LsgHeader = theme3Components.LsgHeader,
693
+ Theme3LsgQuickLinks = theme3Components.LsgQuickLinks,
694
+ Theme3LsgSocialMediaIcons = theme3Components.LsgSocialMediaIcons,
695
+ Theme3LsgFooter = theme3Components.LsgFooter;
696
+
697
+ exports.LsgBanner = LsgBanner;
698
+ exports.LsgButton = LsgButton;
699
+ exports.LsgCard = LsgCard;
700
+ exports.LsgCards = LsgCards;
701
+ exports.LsgFooter = LsgFooter;
702
+ exports.LsgHeader = LsgHeader;
703
+ exports.LsgLanguageSwitcher = LsgLanguageSwitcher;
704
+ exports.LsgLogo = LsgLogo;
705
+ exports.LsgNavigation = LsgNavigation;
706
+ exports.LsgQuickLinks = LsgQuickLinks;
707
+ exports.LsgSearchOverlay = LsgSearchOverlay;
708
+ exports.LsgSearchTrigger = LsgSearchTrigger;
709
+ exports.LsgSocialMediaIcons = LsgSocialMediaIcons;
710
+ exports.Theme1LsgBanner = Theme1LsgBanner;
711
+ exports.Theme1LsgButton = Theme1LsgButton;
712
+ exports.Theme1LsgCard = Theme1LsgCard;
713
+ exports.Theme1LsgCards = Theme1LsgCards;
714
+ exports.Theme1LsgFooter = Theme1LsgFooter;
715
+ exports.Theme1LsgHeader = Theme1LsgHeader;
716
+ exports.Theme1LsgLanguageSwitcher = Theme1LsgLanguageSwitcher;
717
+ exports.Theme1LsgLogo = Theme1LsgLogo;
718
+ exports.Theme1LsgNavigation = Theme1LsgNavigation;
719
+ exports.Theme1LsgQuickLinks = Theme1LsgQuickLinks;
720
+ exports.Theme1LsgSearchOverlay = Theme1LsgSearchOverlay;
721
+ exports.Theme1LsgSearchTrigger = Theme1LsgSearchTrigger;
722
+ exports.Theme1LsgSocialMediaIcons = Theme1LsgSocialMediaIcons;
723
+ exports.Theme2LsgBanner = Theme2LsgBanner;
724
+ exports.Theme2LsgButton = Theme2LsgButton;
725
+ exports.Theme2LsgCard = Theme2LsgCard;
726
+ exports.Theme2LsgCards = Theme2LsgCards;
727
+ exports.Theme2LsgFooter = Theme2LsgFooter;
728
+ exports.Theme2LsgHeader = Theme2LsgHeader;
729
+ exports.Theme2LsgLanguageSwitcher = Theme2LsgLanguageSwitcher;
730
+ exports.Theme2LsgLogo = Theme2LsgLogo;
731
+ exports.Theme2LsgNavigation = Theme2LsgNavigation;
732
+ exports.Theme2LsgQuickLinks = Theme2LsgQuickLinks;
733
+ exports.Theme2LsgSearchOverlay = Theme2LsgSearchOverlay;
734
+ exports.Theme2LsgSearchTrigger = Theme2LsgSearchTrigger;
735
+ exports.Theme2LsgSocialMediaIcons = Theme2LsgSocialMediaIcons;
736
+ exports.Theme3LsgBanner = Theme3LsgBanner;
737
+ exports.Theme3LsgButton = Theme3LsgButton;
738
+ exports.Theme3LsgCard = Theme3LsgCard;
739
+ exports.Theme3LsgCards = Theme3LsgCards;
740
+ exports.Theme3LsgFooter = Theme3LsgFooter;
741
+ exports.Theme3LsgHeader = Theme3LsgHeader;
742
+ exports.Theme3LsgLanguageSwitcher = Theme3LsgLanguageSwitcher;
743
+ exports.Theme3LsgLogo = Theme3LsgLogo;
744
+ exports.Theme3LsgNavigation = Theme3LsgNavigation;
745
+ exports.Theme3LsgQuickLinks = Theme3LsgQuickLinks;
746
+ exports.Theme3LsgSearchOverlay = Theme3LsgSearchOverlay;
747
+ exports.Theme3LsgSearchTrigger = Theme3LsgSearchTrigger;
748
+ exports.Theme3LsgSocialMediaIcons = Theme3LsgSocialMediaIcons;
749
+ exports.theme1Components = theme1Components;
750
+ exports.theme2Components = theme2Components;
751
+ exports.theme3Components = theme3Components;
752
+ //# sourceMappingURL=index.js.map