@asantemedia-org/leybold-design-system 1.0.11 → 1.0.12

package/dist/index.esm.js

@@ -1,7 +1,6 @@
-import React, { useRef, useState, useEffect, useMemo, useCallback } from 'react';
+import React, { useMemo, useState, useCallback, useRef, useEffect } from 'react';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faArrowLeft, faArrowLeftLong, faArrowRight, faArrowRightLong, faChevronRight, faChevronLeft, faArrowUpRightFromSquare, faGlobe } from '@fortawesome/free-solid-svg-icons';
-import Slider from 'react-slick';
 import { faInstagram, faYoutube, faLinkedinIn, faXTwitter, faFacebookF } from '@fortawesome/free-brands-svg-icons';
 import { ProductDetailsCard, AlgoliaDynamicSearchRaw, QrForm } from '@asantemedia-org/edwardsvacuum-design-system';
 
@@ -15,7 +14,7 @@ function _extends() {
   }, _extends.apply(null, arguments);
 }
 
-var styles$h = {"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"};
+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"};
 
 function getDefaultExportFromCjs (x) {
 	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
@@ -193,10 +192,10 @@ const Button = ({
   const isIconOnly = variant === "carousel-arrow-left" || variant === "carousel-arrow-right";
   const isCarouselLeft = variant === "carousel-arrow-left";
   const isCarouselRight = variant === "carousel-arrow-right";
-  const buttonClasses = classNames(styles$h.button, styles$h[`button--${cssVariant}`], styles$h[`button--${size}`], {
-    [styles$h["button--disabled"]]: disabled
+  const buttonClasses = classNames(styles$g.button, styles$g[`button--${cssVariant}`], styles$g[`button--${size}`], {
+    [styles$g["button--disabled"]]: disabled
   }, className);
-  const iconClasses = classNames(styles$h.button__icon, styles$h[`button__icon--${iconPosition}`]);
+  const iconClasses = classNames(styles$g.button__icon, styles$g[`button__icon--${iconPosition}`]);
 
   // Generate accessible label for icon-only buttons
   const accessibleLabel = ariaLabel || (isIconOnly ? variant === "carousel-arrow-left" ? "Previous" : "Next" : undefined);
@@ -211,132 +210,23 @@ const Button = ({
     className: iconClasses
   }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
     icon: faArrowLeft,
-    className: styles$h.button__icon__default
+    className: styles$g.button__icon__default
   }), /*#__PURE__*/React.createElement(FontAwesomeIcon, {
     icon: faArrowLeftLong,
-    className: styles$h.button__icon__hover
+    className: styles$g.button__icon__hover
   })), isCarouselRight && /*#__PURE__*/React.createElement("span", {
     className: iconClasses
   }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
     icon: faArrowRight,
-    className: styles$h.button__icon__default
+    className: styles$g.button__icon__default
   }), /*#__PURE__*/React.createElement(FontAwesomeIcon, {
     icon: faArrowRightLong,
-    className: styles$h.button__icon__hover
+    className: styles$g.button__icon__hover
   })), !isIconOnly && iconElement && /*#__PURE__*/React.createElement("span", {
     className: iconClasses
   }, iconElement));
 };
 
-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"};
-
-/**
- * Carousel component for displaying multiple content cards in a sliding format.
- * Supports responsive layouts with 3 cards on desktop and 1 card on mobile.
- */
-const Carousel = ({
-  title,
-  subtitle,
-  buttonText,
-  buttonUrl,
-  cards,
-  showDots = true,
-  showArrows = true,
-  className
-}) => {
-  const sliderRef = useRef(null);
-  const [currentSlide, setCurrentSlide] = useState(0);
-
-  // Uses document.documentElement.clientWidth to work correctly in iframes (Storybook)
-  const [isMobile, setIsMobile] = useState(() => {
-    if (typeof window !== 'undefined') {
-      return document.documentElement.clientWidth < 768;
-    }
-    return false;
-  });
-  useEffect(() => {
-    const handleResize = () => {
-      setIsMobile(document.documentElement.clientWidth < 768);
-    };
-    window.addEventListener('resize', handleResize);
-    return () => window.removeEventListener('resize', handleResize);
-  }, []);
-  const handlePrev = () => sliderRef.current?.slickPrev();
-  const handleNext = () => sliderRef.current?.slickNext();
-  const goToSlide = index => sliderRef.current?.slickGoTo(index);
-  const settings = {
-    dots: false,
-    infinite: true,
-    speed: 500,
-    slidesToShow: isMobile ? 1 : 3,
-    slidesToScroll: 1,
-    arrows: false,
-    beforeChange: (_, next) => setCurrentSlide(next)
-  };
-  return /*#__PURE__*/React.createElement("div", {
-    className: classNames(styles$g.carousel, className)
-  }, /*#__PURE__*/React.createElement("div", {
-    className: styles$g.carousel__header
-  }, /*#__PURE__*/React.createElement("div", {
-    className: styles$g.carousel__headerContent
-  }, /*#__PURE__*/React.createElement("h2", {
-    className: styles$g.carousel__title
-  }, title), subtitle && /*#__PURE__*/React.createElement("p", {
-    className: styles$g.carousel__subtitle
-  }, subtitle)), buttonText && buttonUrl && /*#__PURE__*/React.createElement(Button, {
-    variant: "outlined-black",
-    onClick: () => window.location.href = buttonUrl,
-    style: {
-      minWidth: '215px',
-      minHeight: '56px'
-    }
-  }, buttonText)), /*#__PURE__*/React.createElement(Slider, _extends({
-    ref: sliderRef
-  }, settings, {
-    className: styles$g.carousel__slider
-  }), cards.map((card, index) => /*#__PURE__*/React.createElement("div", {
-    key: index,
-    className: styles$g.carousel__slideWrapper
-  }, /*#__PURE__*/React.createElement("a", {
-    href: card.linkUrl,
-    className: styles$g.carousel__card,
-    "aria-label": `${card.title} - ${card.linkText}`
-  }, /*#__PURE__*/React.createElement("div", {
-    className: styles$g.carousel__cardImageWrapper
-  }, /*#__PURE__*/React.createElement("img", {
-    src: card.imageUrl,
-    alt: card.imageAlt,
-    className: styles$g.carousel__cardImage
-  })), /*#__PURE__*/React.createElement("div", {
-    className: styles$g.carousel__cardContent
-  }, /*#__PURE__*/React.createElement("h3", {
-    className: styles$g.carousel__cardTitle
-  }, card.title), /*#__PURE__*/React.createElement(Button, {
-    variant: "link-text-alt",
-    icon: "arrow-right"
-  }, card.linkText)))))), /*#__PURE__*/React.createElement("div", {
-    className: styles$g.carousel__navigation
-  }, !isMobile && showDots && /*#__PURE__*/React.createElement("div", {
-    className: styles$g.carousel__dotsList
-  }, cards.map((_, index) => /*#__PURE__*/React.createElement("button", {
-    key: index,
-    type: "button",
-    className: classNames(styles$g.carousel__dot, currentSlide === index && styles$g['carousel__dot--active']),
-    onClick: () => goToSlide(index),
-    "aria-label": `Go to slide ${index + 1}`
-  }))), showArrows && /*#__PURE__*/React.createElement("div", {
-    className: styles$g.carousel__arrows
-  }, /*#__PURE__*/React.createElement(Button, {
-    variant: "carousel-arrow-left",
-    onClick: handlePrev,
-    ariaLabel: "Previous"
-  }), /*#__PURE__*/React.createElement(Button, {
-    variant: "carousel-arrow-right",
-    onClick: handleNext,
-    ariaLabel: "Next"
-  }))));
-};
-
 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"};
 
 /**
@@ -2326,5 +2216,5 @@ const SearchTriggerButton = ({
   }, label));
 };
 
-export { AlgoliaDynamicSearchLeybold as AlgoliaDynamicSearch, AlgoliaDynamicSearchLeybold, AppliedFilterTag, AppliedFilters, Button, Carousel, 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 };
+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 };
 //# sourceMappingURL=index.esm.js.map