@asantemedia-org/leybold-design-system 1.0.13 → 1.0.14
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/dist/index.esm.js +9 -144
- package/dist/index.esm.js.map +1 -1
- package/dist/index.esm.scss +0 -263
- package/dist/index.js +7 -143
- package/dist/index.js.map +1 -1
- package/dist/index.scss +0 -263
- package/dist/src/index.d.ts +0 -2
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +1 -1
package/dist/index.esm.js
CHANGED
|
@@ -1,7 +1,6 @@
|
|
|
1
|
-
import React, {
|
|
1
|
+
import React, { useMemo, useState, useCallback, useRef, useEffect } from 'react';
|
|
2
2
|
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
|
3
3
|
import { faArrowLeft, faArrowLeftLong, faArrowRight, faArrowRightLong, faChevronRight, faChevronLeft, faArrowUpRightFromSquare, faGlobe } from '@fortawesome/free-solid-svg-icons';
|
|
4
|
-
import Slider from 'react-slick';
|
|
5
4
|
import { faInstagram, faYoutube, faLinkedinIn, faXTwitter, faFacebookF } from '@fortawesome/free-brands-svg-icons';
|
|
6
5
|
import { ProductDetailsCard, AlgoliaDynamicSearchRaw, QrForm } from '@asantemedia-org/edwardsvacuum-design-system';
|
|
7
6
|
|
|
@@ -54,7 +53,7 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
|
|
|
54
53
|
return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
|
|
55
54
|
};
|
|
56
55
|
|
|
57
|
-
var styles$
|
|
56
|
+
var styles$g = {"button":"Button-module__button___18Bed","button--primary":"Button-module__button--primary___VuF-P","button--default":"Button-module__button--default___MDa35","button--disabled":"Button-module__button--disabled___IuOY8","button--secondary":"Button-module__button--secondary___lD5E3","button--solid-red":"Button-module__button--solid-red___YPpnL","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-red":"Button-module__button--outlined-red___cgZXa","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
57
|
|
|
59
58
|
function getDefaultExportFromCjs (x) {
|
|
60
59
|
return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
|
|
@@ -220,8 +219,8 @@ var Button = function (_a) {
|
|
|
220
219
|
var isIconOnly = variant === "carousel-arrow-left" || variant === "carousel-arrow-right";
|
|
221
220
|
var isCarouselLeft = variant === "carousel-arrow-left";
|
|
222
221
|
var isCarouselRight = variant === "carousel-arrow-right";
|
|
223
|
-
var buttonClasses = classNames(styles$
|
|
224
|
-
var iconClasses = classNames(styles$
|
|
222
|
+
var buttonClasses = classNames(styles$g.button, styles$g["button--".concat(cssVariant)], styles$g["button--".concat(size)], (_b = {}, _b[styles$g["button--disabled"]] = disabled, _b), className);
|
|
223
|
+
var iconClasses = classNames(styles$g.button__icon, styles$g["button__icon--".concat(iconPosition)]);
|
|
225
224
|
// Generate accessible label for icon-only buttons
|
|
226
225
|
var accessibleLabel = ariaLabel || (isIconOnly ? variant === "carousel-arrow-left" ? "Previous" : "Next" : undefined);
|
|
227
226
|
return /*#__PURE__*/React.createElement("button", _extends({
|
|
@@ -235,157 +234,23 @@ var Button = function (_a) {
|
|
|
235
234
|
className: iconClasses
|
|
236
235
|
}, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
|
|
237
236
|
icon: faArrowLeft,
|
|
238
|
-
className: styles$
|
|
237
|
+
className: styles$g.button__icon__default
|
|
239
238
|
}), /*#__PURE__*/React.createElement(FontAwesomeIcon, {
|
|
240
239
|
icon: faArrowLeftLong,
|
|
241
|
-
className: styles$
|
|
240
|
+
className: styles$g.button__icon__hover
|
|
242
241
|
})), isCarouselRight && /*#__PURE__*/React.createElement("span", {
|
|
243
242
|
className: iconClasses
|
|
244
243
|
}, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
|
|
245
244
|
icon: faArrowRight,
|
|
246
|
-
className: styles$
|
|
245
|
+
className: styles$g.button__icon__default
|
|
247
246
|
}), /*#__PURE__*/React.createElement(FontAwesomeIcon, {
|
|
248
247
|
icon: faArrowRightLong,
|
|
249
|
-
className: styles$
|
|
248
|
+
className: styles$g.button__icon__hover
|
|
250
249
|
})), !isIconOnly && iconElement && /*#__PURE__*/React.createElement("span", {
|
|
251
250
|
className: iconClasses
|
|
252
251
|
}, iconElement));
|
|
253
252
|
};
|
|
254
253
|
|
|
255
|
-
var styles$g = {"carousel":"Carousel-module__carousel___hkXkF","carousel__header":"Carousel-module__carousel__header___IMcN5","carousel__headerContent":"Carousel-module__carousel__headerContent___9uU-H","carousel__title":"Carousel-module__carousel__title___CCgcY","carousel__subtitle":"Carousel-module__carousel__subtitle___aj4q1","carousel__slider":"Carousel-module__carousel__slider___b27-P","carousel__slideWrapper":"Carousel-module__carousel__slideWrapper___PjXgD","carousel__card":"Carousel-module__carousel__card___lga-D","carousel__cardContent":"Carousel-module__carousel__cardContent___v0jc-","carousel__cardImageWrapper":"Carousel-module__carousel__cardImageWrapper___aFqXD","carousel__cardImage":"Carousel-module__carousel__cardImage___4MrRU","carousel__cardTitle":"Carousel-module__carousel__cardTitle___z-mMo","carousel__navigation":"Carousel-module__carousel__navigation___dMbcP","carousel__arrows":"Carousel-module__carousel__arrows___uj5nF","carousel__dotsList":"Carousel-module__carousel__dotsList___upZ7L","carousel__dot":"Carousel-module__carousel__dot___HwZc0","carousel__dot--active":"Carousel-module__carousel__dot--active___NxRvq"};
|
|
256
|
-
|
|
257
|
-
/**
|
|
258
|
-
* Carousel component for displaying multiple content cards in a sliding format.
|
|
259
|
-
* Supports responsive layouts with 3 cards on desktop and 1 card on mobile.
|
|
260
|
-
*/
|
|
261
|
-
var Carousel = function (_a) {
|
|
262
|
-
var title = _a.title,
|
|
263
|
-
subtitle = _a.subtitle,
|
|
264
|
-
buttonText = _a.buttonText,
|
|
265
|
-
buttonUrl = _a.buttonUrl,
|
|
266
|
-
cards = _a.cards,
|
|
267
|
-
_b = _a.showDots,
|
|
268
|
-
showDots = _b === void 0 ? true : _b,
|
|
269
|
-
_c = _a.showArrows,
|
|
270
|
-
showArrows = _c === void 0 ? true : _c,
|
|
271
|
-
className = _a.className;
|
|
272
|
-
var sliderRef = useRef(null);
|
|
273
|
-
var _d = useState(0),
|
|
274
|
-
currentSlide = _d[0],
|
|
275
|
-
setCurrentSlide = _d[1];
|
|
276
|
-
// Uses document.documentElement.clientWidth to work correctly in iframes (Storybook)
|
|
277
|
-
var _e = useState(function () {
|
|
278
|
-
if (typeof window !== 'undefined') {
|
|
279
|
-
return document.documentElement.clientWidth < 768;
|
|
280
|
-
}
|
|
281
|
-
return false;
|
|
282
|
-
}),
|
|
283
|
-
isMobile = _e[0],
|
|
284
|
-
setIsMobile = _e[1];
|
|
285
|
-
useEffect(function () {
|
|
286
|
-
var handleResize = function () {
|
|
287
|
-
setIsMobile(document.documentElement.clientWidth < 768);
|
|
288
|
-
};
|
|
289
|
-
window.addEventListener('resize', handleResize);
|
|
290
|
-
return function () {
|
|
291
|
-
return window.removeEventListener('resize', handleResize);
|
|
292
|
-
};
|
|
293
|
-
}, []);
|
|
294
|
-
var handlePrev = function () {
|
|
295
|
-
var _a;
|
|
296
|
-
return (_a = sliderRef.current) === null || _a === void 0 ? void 0 : _a.slickPrev();
|
|
297
|
-
};
|
|
298
|
-
var handleNext = function () {
|
|
299
|
-
var _a;
|
|
300
|
-
return (_a = sliderRef.current) === null || _a === void 0 ? void 0 : _a.slickNext();
|
|
301
|
-
};
|
|
302
|
-
var goToSlide = function (index) {
|
|
303
|
-
var _a;
|
|
304
|
-
return (_a = sliderRef.current) === null || _a === void 0 ? void 0 : _a.slickGoTo(index);
|
|
305
|
-
};
|
|
306
|
-
var settings = {
|
|
307
|
-
dots: false,
|
|
308
|
-
infinite: true,
|
|
309
|
-
speed: 500,
|
|
310
|
-
slidesToShow: isMobile ? 1 : 3,
|
|
311
|
-
slidesToScroll: 1,
|
|
312
|
-
arrows: false,
|
|
313
|
-
beforeChange: function (_, next) {
|
|
314
|
-
return setCurrentSlide(next);
|
|
315
|
-
}
|
|
316
|
-
};
|
|
317
|
-
return /*#__PURE__*/React.createElement("div", {
|
|
318
|
-
className: classNames(styles$g.carousel, className)
|
|
319
|
-
}, /*#__PURE__*/React.createElement("div", {
|
|
320
|
-
className: styles$g.carousel__header
|
|
321
|
-
}, /*#__PURE__*/React.createElement("div", {
|
|
322
|
-
className: styles$g.carousel__headerContent
|
|
323
|
-
}, /*#__PURE__*/React.createElement("h2", {
|
|
324
|
-
className: styles$g.carousel__title
|
|
325
|
-
}, title), subtitle && /*#__PURE__*/React.createElement("p", {
|
|
326
|
-
className: styles$g.carousel__subtitle
|
|
327
|
-
}, subtitle)), buttonText && buttonUrl && /*#__PURE__*/React.createElement(Button, {
|
|
328
|
-
variant: "outlined-black",
|
|
329
|
-
onClick: function () {
|
|
330
|
-
return window.location.href = buttonUrl;
|
|
331
|
-
},
|
|
332
|
-
style: {
|
|
333
|
-
minWidth: '215px',
|
|
334
|
-
minHeight: '56px'
|
|
335
|
-
}
|
|
336
|
-
}, buttonText)), /*#__PURE__*/React.createElement(Slider, _extends({
|
|
337
|
-
ref: sliderRef
|
|
338
|
-
}, settings, {
|
|
339
|
-
className: styles$g.carousel__slider
|
|
340
|
-
}), cards.map(function (card, index) {
|
|
341
|
-
return /*#__PURE__*/React.createElement("div", {
|
|
342
|
-
key: index,
|
|
343
|
-
className: styles$g.carousel__slideWrapper
|
|
344
|
-
}, /*#__PURE__*/React.createElement("a", {
|
|
345
|
-
href: card.linkUrl,
|
|
346
|
-
className: styles$g.carousel__card,
|
|
347
|
-
"aria-label": "".concat(card.title, " - ").concat(card.linkText)
|
|
348
|
-
}, /*#__PURE__*/React.createElement("div", {
|
|
349
|
-
className: styles$g.carousel__cardImageWrapper
|
|
350
|
-
}, /*#__PURE__*/React.createElement("img", {
|
|
351
|
-
src: card.imageUrl,
|
|
352
|
-
alt: card.imageAlt,
|
|
353
|
-
className: styles$g.carousel__cardImage
|
|
354
|
-
})), /*#__PURE__*/React.createElement("div", {
|
|
355
|
-
className: styles$g.carousel__cardContent
|
|
356
|
-
}, /*#__PURE__*/React.createElement("h3", {
|
|
357
|
-
className: styles$g.carousel__cardTitle
|
|
358
|
-
}, card.title), /*#__PURE__*/React.createElement(Button, {
|
|
359
|
-
variant: "link-text-alt",
|
|
360
|
-
icon: "arrow-right"
|
|
361
|
-
}, card.linkText))));
|
|
362
|
-
})), /*#__PURE__*/React.createElement("div", {
|
|
363
|
-
className: styles$g.carousel__navigation
|
|
364
|
-
}, !isMobile && showDots && /*#__PURE__*/React.createElement("div", {
|
|
365
|
-
className: styles$g.carousel__dotsList
|
|
366
|
-
}, cards.map(function (_, index) {
|
|
367
|
-
return /*#__PURE__*/React.createElement("button", {
|
|
368
|
-
key: index,
|
|
369
|
-
type: "button",
|
|
370
|
-
className: classNames(styles$g.carousel__dot, currentSlide === index && styles$g['carousel__dot--active']),
|
|
371
|
-
onClick: function () {
|
|
372
|
-
return goToSlide(index);
|
|
373
|
-
},
|
|
374
|
-
"aria-label": "Go to slide ".concat(index + 1)
|
|
375
|
-
});
|
|
376
|
-
})), showArrows && /*#__PURE__*/React.createElement("div", {
|
|
377
|
-
className: styles$g.carousel__arrows
|
|
378
|
-
}, /*#__PURE__*/React.createElement(Button, {
|
|
379
|
-
variant: "carousel-arrow-left",
|
|
380
|
-
onClick: handlePrev,
|
|
381
|
-
ariaLabel: "Previous"
|
|
382
|
-
}), /*#__PURE__*/React.createElement(Button, {
|
|
383
|
-
variant: "carousel-arrow-right",
|
|
384
|
-
onClick: handleNext,
|
|
385
|
-
ariaLabel: "Next"
|
|
386
|
-
}))));
|
|
387
|
-
};
|
|
388
|
-
|
|
389
254
|
var styles$f = {"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"};
|
|
390
255
|
|
|
391
256
|
/**
|
|
@@ -2376,5 +2241,5 @@ var SearchTriggerButton = function (_a) {
|
|
|
2376
2241
|
}, label));
|
|
2377
2242
|
};
|
|
2378
2243
|
|
|
2379
|
-
export { AlgoliaDynamicSearchLeybold as AlgoliaDynamicSearch, AlgoliaDynamicSearchLeybold, AppliedFilterTag, AppliedFilters, Button,
|
|
2244
|
+
export { AlgoliaDynamicSearchLeybold as AlgoliaDynamicSearch, AlgoliaDynamicSearchLeybold, AppliedFilterTag, AppliedFilters, Button, ContentCardHorizontal, FederatedInstantResultsLayout, FederatedResultsView, FederatedSearchExperience, FilterAccordion, FilterItem, FilterSearch, FiltersPanel, Footer, FooterBottom, FooterLink, FooterLinkGroup, FooterSocialIcon, FooterSocialIcons, ModalCloseButton, Pagination, PaginationButton, PaginationEllipsis, PaginationItem, ProductCardHorizontal, QrFormLeybold as QrForm, QrFormLeybold, ResultsColumn, ResultsCount, ResultsList, SearchBar, SearchIcon, SearchInput, SearchModal, SearchSubmitButton, SearchTriggerButton, SeeAllLinkButton };
|
|
2380
2245
|
//# sourceMappingURL=index.esm.js.map
|