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

package/dist/index.esm.js

@@ -1,4 +1,7 @@
 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 { faInstagram, faYoutube, faLinkedinIn, faXTwitter, faFacebookF } from '@fortawesome/free-brands-svg-icons';
 import { ProductDetailsCard, AlgoliaDynamicSearchRaw, QrForm } from '@asantemedia-org/edwardsvacuum-design-system';
 
 function _extends() {
@@ -11,7 +14,7 @@ function _extends() {
   }, _extends.apply(null, arguments);
 }
 
-var styles$f = {"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--outline":"Button-module__button--outline___wB6-g","button--text":"Button-module__button--text___iZIMo","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"};
+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;
@@ -88,6 +91,79 @@ function requireClassnames() {
 var classnamesExports = requireClassnames();
 var classNames = /*@__PURE__*/getDefaultExportFromCjs(classnamesExports);
 
+/**
+ * Button variant types
+ */
+
+/**
+ * Icon types for button
+ */
+
+/**
+ * Icon position
+ */
+
+/**
+ * Get the icon component based on icon type
+ */
+const getIcon = icon => {
+  switch (icon) {
+    case "arrow-right":
+      return /*#__PURE__*/React.createElement(FontAwesomeIcon, {
+        icon: faArrowRight
+      });
+    case "external":
+      return /*#__PURE__*/React.createElement(FontAwesomeIcon, {
+        icon: faArrowUpRightFromSquare
+      });
+    case "chevron-left":
+      return /*#__PURE__*/React.createElement(FontAwesomeIcon, {
+        icon: faChevronLeft
+      });
+    case "chevron-right":
+      return /*#__PURE__*/React.createElement(FontAwesomeIcon, {
+        icon: faChevronRight
+      });
+    default:
+      return null;
+  }
+};
+
+/**
+ * Get default icon for certain variants
+ */
+const getDefaultIcon = variant => {
+  switch (variant) {
+    case "link-text":
+    case "link-text-alt":
+    case "text":
+      // Alias
+      return "arrow-right";
+    case "external-link":
+      return "external";
+    case "carousel-arrow-left":
+      return "chevron-left";
+    case "carousel-arrow-right":
+      return "chevron-right";
+    default:
+      return "none";
+  }
+};
+
+/**
+ * Map alias variants to their actual CSS class variants
+ */
+const mapVariantToClass = variant => {
+  switch (variant) {
+    case "outline":
+      return "outlined-red";
+    case "text":
+      return "link-text";
+    default:
+      return variant;
+  }
+};
+
 /**
  * Primary UI component for user interaction
  */
@@ -99,17 +175,384 @@ const Button = ({
   onClick,
   type = "button",
   className,
+  icon,
+  iconPosition = "right",
+  ariaLabel,
+  opensInNewTab,
   ...props
 }) => {
-  const buttonClasses = classNames(styles$f.button, styles$f[`button--${variant}`], styles$f[`button--${size}`], {
-    [styles$f["button--disabled"]]: disabled
+  // Map alias variants to actual class names
+  const cssVariant = mapVariantToClass(variant);
+
+  // Determine the icon to display
+  const displayIcon = icon ?? getDefaultIcon(variant);
+  const iconElement = getIcon(displayIcon);
+
+  // Check if this is an icon-only button (carousel arrows)
+  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$g.button, styles$g[`button--${cssVariant}`], styles$g[`button--${size}`], {
+    [styles$g["button--disabled"]]: disabled
   }, className);
+  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);
   return /*#__PURE__*/React.createElement("button", _extends({
     type: type,
     className: buttonClasses,
     disabled: disabled,
-    onClick: onClick
-  }, props), children);
+    onClick: onClick,
+    "aria-label": accessibleLabel,
+    "data-force-state": props['data-force-state']
+  }, props), !isIconOnly && children, isCarouselLeft && /*#__PURE__*/React.createElement("span", {
+    className: iconClasses
+  }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
+    icon: faArrowLeft,
+    className: styles$g.button__icon__default
+  }), /*#__PURE__*/React.createElement(FontAwesomeIcon, {
+    icon: faArrowLeftLong,
+    className: styles$g.button__icon__hover
+  })), isCarouselRight && /*#__PURE__*/React.createElement("span", {
+    className: iconClasses
+  }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
+    icon: faArrowRight,
+    className: styles$g.button__icon__default
+  }), /*#__PURE__*/React.createElement(FontAwesomeIcon, {
+    icon: faArrowRightLong,
+    className: styles$g.button__icon__hover
+  })), !isIconOnly && iconElement && /*#__PURE__*/React.createElement("span", {
+    className: iconClasses
+  }, iconElement));
+};
+
+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"};
+
+/**
+ * External link icon (↗) for footer links that open in new tabs
+ */
+const ExternalLinkIcon = ({
+  className,
+  size = 15
+}) => /*#__PURE__*/React.createElement("svg", {
+  width: size,
+  height: size,
+  viewBox: "0 0 15 15",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg",
+  className: className,
+  "aria-hidden": "true"
+}, /*#__PURE__*/React.createElement("path", {
+  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",
+  stroke: "currentColor",
+  strokeWidth: "1.5",
+  strokeLinecap: "round",
+  strokeLinejoin: "round"
+}));
+
+/**
+ * Atlas Copco Group badge icon (square)
+ */
+const AtlasCopcoIcon = ({
+  className,
+  size = 14
+}) => /*#__PURE__*/React.createElement("svg", {
+  width: size,
+  height: size,
+  viewBox: "0 0 14 14",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg",
+  className: className,
+  "aria-hidden": "true"
+}, /*#__PURE__*/React.createElement("rect", {
+  x: "0.5",
+  y: "0.5",
+  width: "13",
+  height: "13",
+  rx: "1.5",
+  fill: "#D9D9D9",
+  stroke: "#D9D9D9"
+}));
+
+// =============================================================================
+// TYPE DEFINITIONS
+// =============================================================================
+
+// =============================================================================
+// SOCIAL ICON COMPONENT
+// =============================================================================
+
+const SocialIconComponent = ({
+  platform
+}) => {
+  const iconMap = {
+    facebook: faFacebookF,
+    x: faXTwitter,
+    linkedin: faLinkedinIn,
+    youtube: faYoutube,
+    instagram: faInstagram
+  };
+  return /*#__PURE__*/React.createElement(FontAwesomeIcon, {
+    icon: iconMap[platform]
+  });
+};
+
+// =============================================================================
+// FOOTER LINK COMPONENT
+// =============================================================================
+
+const FooterLink = ({
+  item,
+  className,
+  variant = 'default'
+}) => {
+  const baseClass = variant === 'bottom' ? styles$f.footer__bottomLink : styles$f.footer__link;
+  const linkClasses = classNames(baseClass, className);
+  const handleClick = e => {
+    if (item.onClick) {
+      e.preventDefault();
+      item.onClick();
+    }
+  };
+  return /*#__PURE__*/React.createElement("a", _extends({
+    href: item.href,
+    className: linkClasses,
+    onClick: item.onClick ? handleClick : undefined
+  }, item.external && {
+    target: '_blank',
+    rel: 'noopener noreferrer'
+  }), /*#__PURE__*/React.createElement("span", {
+    className: styles$f.footer__linkText
+  }, item.label), item.external && /*#__PURE__*/React.createElement("span", {
+    className: styles$f.footer__linkIcon
+  }, /*#__PURE__*/React.createElement(ExternalLinkIcon, {
+    size: 15
+  })));
+};
+
+// =============================================================================
+// FOOTER LINK GROUP COMPONENT
+// =============================================================================
+
+const FooterLinkGroup = ({
+  heading,
+  links,
+  className,
+  children
+}) => {
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames(styles$f.footer__linkGroup, className)
+  }, /*#__PURE__*/React.createElement("h3", {
+    className: styles$f.footer__linkHeading
+  }, heading), /*#__PURE__*/React.createElement("ul", {
+    className: styles$f.footer__linkList
+  }, links.map((link, index) => /*#__PURE__*/React.createElement("li", {
+    key: index
+  }, /*#__PURE__*/React.createElement(FooterLink, {
+    item: link
+  })))), children);
+};
+
+// =============================================================================
+// FOOTER SOCIAL ICONS COMPONENT
+// =============================================================================
+
+const FooterSocialIcons = ({
+  links,
+  className
+}) => {
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames(styles$f.footer__socialIcons, className)
+  }, links.map((link, index) => /*#__PURE__*/React.createElement("a", {
+    key: index,
+    href: link.href,
+    className: styles$f.footer__socialIcon,
+    "aria-label": link.ariaLabel,
+    target: "_blank",
+    rel: "noopener noreferrer"
+  }, /*#__PURE__*/React.createElement(SocialIconComponent, {
+    platform: link.platform
+  }))));
+};
+
+// =============================================================================
+// FOOTER SOCIAL ICON (STANDALONE) COMPONENT
+// =============================================================================
+
+const FooterSocialIcon = ({
+  platform,
+  className
+}) => {
+  const iconClasses = classNames(styles$f.footer__socialIcon, className);
+  return /*#__PURE__*/React.createElement("span", {
+    className: iconClasses
+  }, /*#__PURE__*/React.createElement(SocialIconComponent, {
+    platform: platform
+  }));
+};
+
+// =============================================================================
+// FOOTER BOTTOM COMPONENT
+// =============================================================================
+
+const FooterBottom = ({
+  links,
+  copyright,
+  countrySelector,
+  className
+}) => {
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames(styles$f.footer__bottom, className)
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles$f.footer__bottomLeft
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles$f.footer__bottomLinks
+  }, links.map((link, index) => /*#__PURE__*/React.createElement(FooterLink, {
+    key: index,
+    item: link,
+    variant: "bottom"
+  }))), /*#__PURE__*/React.createElement("p", {
+    className: styles$f.footer__copyright
+  }, copyright)), countrySelector && /*#__PURE__*/React.createElement("a", {
+    href: countrySelector.href || '#',
+    className: styles$f.footer__countrySelector
+  }, countrySelector.showIcon !== false && /*#__PURE__*/React.createElement("span", {
+    className: styles$f.footer__countrySelectorIcon
+  }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
+    icon: faGlobe
+  })), countrySelector.label));
+};
+
+// =============================================================================
+// MAIN FOOTER COMPONENT
+// =============================================================================
+
+/**
+ * Footer component with brand identity, navigation links, social icons, and legal information.
+ * Supports two layout variants:
+ * - desktop: Logo at top, 3-column main content
+ * - mobile: Logo at bottom, stacked layout with CTA button
+ */
+const Footer = ({
+  variant = 'desktop',
+  logo,
+  motto,
+  atlasCopcoBadge,
+  quickLinks,
+  quickLinksHeading = 'Quick links',
+  contactLinks,
+  contactHeading = 'Contact us',
+  socialLinks,
+  contactFormButton,
+  bottomLinks,
+  copyright,
+  countrySelector,
+  className
+}) => {
+  const isMobile = variant === 'mobile';
+  const footerClasses = classNames(styles$f.footer, isMobile && styles$f['footer--mobile'], className);
+  const LogoWrapper = logo.href ? 'a' : 'div';
+  const logoProps = logo.href ? {
+    href: logo.href,
+    className: styles$f.footer__logo
+  } : {
+    className: styles$f.footer__logo
+  };
+
+  // Logo + Motto + Badge component (used in both layouts)
+  const LogoSection = () => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(LogoWrapper, logoProps, /*#__PURE__*/React.createElement("img", {
+    src: logo.src,
+    alt: logo.alt
+  })), /*#__PURE__*/React.createElement("div", {
+    className: styles$f.footer__leftCol
+  }, /*#__PURE__*/React.createElement("h2", {
+    className: styles$f.footer__motto
+  }, motto), atlasCopcoBadge && /*#__PURE__*/React.createElement("div", {
+    className: styles$f.footer__badge
+  }, atlasCopcoBadge.showIcon !== false && /*#__PURE__*/React.createElement("span", {
+    className: styles$f.footer__badgeIcon
+  }, /*#__PURE__*/React.createElement(AtlasCopcoIcon, {
+    size: 14
+  })), /*#__PURE__*/React.createElement("span", {
+    className: styles$f.footer__badgeText
+  }, atlasCopcoBadge.text))));
+
+  // Mobile layout: Links at top, logo/motto at bottom
+  if (isMobile) {
+    return /*#__PURE__*/React.createElement("footer", {
+      className: footerClasses
+    }, /*#__PURE__*/React.createElement("div", {
+      className: styles$f.footer__container
+    }, /*#__PURE__*/React.createElement("div", {
+      className: styles$f.footer__links
+    }, /*#__PURE__*/React.createElement(FooterLinkGroup, {
+      heading: quickLinksHeading,
+      links: quickLinks
+    }), /*#__PURE__*/React.createElement(FooterLinkGroup, {
+      heading: contactHeading,
+      links: contactLinks
+    })), contactFormButton && /*#__PURE__*/React.createElement("div", {
+      className: styles$f.footer__cta
+    }, /*#__PURE__*/React.createElement("a", {
+      href: contactFormButton.href,
+      style: {
+        textDecoration: 'none',
+        width: '100%'
+      }
+    }, /*#__PURE__*/React.createElement(Button, {
+      variant: "solid-red",
+      style: {
+        width: '100%'
+      }
+    }, contactFormButton.label))), socialLinks.length > 0 && /*#__PURE__*/React.createElement(FooterSocialIcons, {
+      links: socialLinks
+    }), /*#__PURE__*/React.createElement(FooterBottom, {
+      links: bottomLinks,
+      copyright: copyright,
+      countrySelector: countrySelector
+    }), /*#__PURE__*/React.createElement("div", {
+      className: styles$f.footer__brandSection
+    }, /*#__PURE__*/React.createElement(LogoSection, null))));
+  }
+
+  // Desktop layout: Logo at top, 3-column main content
+  return /*#__PURE__*/React.createElement("footer", {
+    className: footerClasses
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles$f.footer__container
+  }, /*#__PURE__*/React.createElement(LogoWrapper, logoProps, /*#__PURE__*/React.createElement("img", {
+    src: logo.src,
+    alt: logo.alt
+  })), /*#__PURE__*/React.createElement("div", {
+    className: styles$f.footer__main
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles$f.footer__leftCol
+  }, /*#__PURE__*/React.createElement("h2", {
+    className: styles$f.footer__motto
+  }, motto), atlasCopcoBadge && /*#__PURE__*/React.createElement("div", {
+    className: styles$f.footer__badge
+  }, atlasCopcoBadge.showIcon !== false && /*#__PURE__*/React.createElement("span", {
+    className: styles$f.footer__badgeIcon
+  }, /*#__PURE__*/React.createElement(AtlasCopcoIcon, {
+    size: 14
+  })), /*#__PURE__*/React.createElement("span", {
+    className: styles$f.footer__badgeText
+  }, atlasCopcoBadge.text))), /*#__PURE__*/React.createElement("div", {
+    className: styles$f.footer__links
+  }, /*#__PURE__*/React.createElement(FooterLinkGroup, {
+    heading: quickLinksHeading,
+    links: quickLinks
+  }), /*#__PURE__*/React.createElement(FooterLinkGroup, {
+    heading: contactHeading,
+    links: contactLinks
+  }, socialLinks.length > 0 && /*#__PURE__*/React.createElement(FooterSocialIcons, {
+    links: socialLinks
+  })))), /*#__PURE__*/React.createElement(FooterBottom, {
+    links: bottomLinks,
+    copyright: copyright,
+    countrySelector: countrySelector
+  })));
 };
 
 var styles$e = {"pagination":"Pagination-module__pagination___Kih79","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","navIcon":"Pagination-module__navIcon___-BVJ3","navButton--previous":"Pagination-module__navButton--previous___Cy5TE","navButton--next":"Pagination-module__navButton--next___kTmgK","navButtonDisabled":"Pagination-module__navButtonDisabled___IZK8H","ellipsis":"Pagination-module__ellipsis___iAsGN","ellipsisText":"Pagination-module__ellipsisText___fd6u1"};
@@ -1773,5 +2216,5 @@ const SearchTriggerButton = ({
   }, label));
 };
 
-export { AlgoliaDynamicSearchLeybold as AlgoliaDynamicSearch, AlgoliaDynamicSearchLeybold, AppliedFilterTag, AppliedFilters, Button, ContentCardHorizontal, FederatedInstantResultsLayout, FederatedResultsView, FederatedSearchExperience, FilterAccordion, FilterItem, FilterSearch, FiltersPanel, 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