@asantemedia-org/leybold-design-system 1.0.7 → 1.0.9

package/dist/index.esm.scss

@@ -288,7 +288,7 @@
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
-  padding: 0.5rem;
+  padding: 0.5rem !important;
   background-color: white;
   box-shadow: 2.7px 2.7px 5px 0 rgba(0, 0, 0, 0.1);
 }
@@ -721,6 +721,12 @@
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
   font-size: 18px;
 }
+.qr-journey-form-wrapper ::-moz-placeholder {
+  font-style: normal;
+}
+.qr-journey-form-wrapper ::placeholder {
+  font-style: normal;
+}
 .qr-journey-form-wrapper h1 {
   font-size: 28px;
   font-weight: 400;

package/dist/index.js

@@ -1,7 +1,5 @@
-'use strict';
-
-var React = require('react');
-var edwardsvacuumDesignSystem = require('@asantemedia-org/edwardsvacuum-design-system');
+import React, { useMemo, useState, useCallback, useRef, useEffect } from 'react';
+import { ProductDetailsCard, AlgoliaDynamicSearchRaw, QrForm } from '@asantemedia-org/edwardsvacuum-design-system';
 
 function _extends() {
   return _extends = Object.assign ? Object.assign.bind() : function (n) {
@@ -277,7 +275,7 @@ const Pagination = ({
   className,
   ariaLabel = "Pagination"
 }) => {
-  const pageNumbers = React.useMemo(() => generatePageNumbers(currentPage, totalPages, maxVisiblePages), [currentPage, totalPages, maxVisiblePages]);
+  const pageNumbers = useMemo(() => generatePageNumbers(currentPage, totalPages, maxVisiblePages), [currentPage, totalPages, maxVisiblePages]);
   const handlePageChange = page => {
     if (page >= 1 && page <= totalPages && page !== currentPage) {
       onPageChange(page);
@@ -349,15 +347,15 @@ const Image = ({
   srcSet,
   sizes
 }) => {
-  const [isLoading, setIsLoading] = React.useState(true);
-  const [hasError, setHasError] = React.useState(false);
-  const [currentSrc, setCurrentSrc] = React.useState(src);
-  const handleLoad = React.useCallback(() => {
+  const [isLoading, setIsLoading] = useState(true);
+  const [hasError, setHasError] = useState(false);
+  const [currentSrc, setCurrentSrc] = useState(src);
+  const handleLoad = useCallback(() => {
     setIsLoading(false);
     setHasError(false);
     onLoad?.();
   }, [onLoad]);
-  const handleError = React.useCallback(() => {
+  const handleError = useCallback(() => {
     setIsLoading(false);
     setHasError(true);
 
@@ -536,7 +534,7 @@ const ProductCardDetails = ({
   };
   return /*#__PURE__*/React.createElement("div", {
     className: styles$b.productDetails
-  }, /*#__PURE__*/React.createElement(edwardsvacuumDesignSystem.ProductDetailsCard, {
+  }, /*#__PURE__*/React.createElement(ProductDetailsCard, {
     className: `${className}`,
     title: title,
     imageUrl: imageUrl,
@@ -615,7 +613,7 @@ const AlgoliaDynamicSearchLeybold = props => {
     ProductCard: ProductCardAdapter,
     ProductDetailsCard: ProductCardDetailsAdapter
   };
-  return /*#__PURE__*/React.createElement(edwardsvacuumDesignSystem.AlgoliaDynamicSearchRaw, _extends({}, props, {
+  return /*#__PURE__*/React.createElement(AlgoliaDynamicSearchRaw, _extends({}, props, {
     innerComponents: innerComponents
   }));
 };
@@ -668,7 +666,7 @@ const QrFormButtonAdapter = ({
 const QrFormLeybold = props => {
   return /*#__PURE__*/React.createElement("div", {
     className: "qr-journey-form-wrapper"
-  }, /*#__PURE__*/React.createElement(edwardsvacuumDesignSystem.QrForm, _extends({}, props, {
+  }, /*#__PURE__*/React.createElement(QrForm, _extends({}, props, {
     ButtonComponent: QrFormButtonAdapter
   })));
 };
@@ -714,9 +712,9 @@ const SearchModal = ({
   children,
   className = ''
 }) => {
-  const modalRef = React.useRef(null);
-  const previouslyFocusedElement = React.useRef(null);
-  React.useEffect(() => {
+  const modalRef = useRef(null);
+  const previouslyFocusedElement = useRef(null);
+  useEffect(() => {
     if (isOpen) {
       // Store the previously focused element
       previouslyFocusedElement.current = document.activeElement;
@@ -741,7 +739,7 @@ const SearchModal = ({
       document.body.style.overflow = '';
     };
   }, [isOpen]);
-  React.useEffect(() => {
+  useEffect(() => {
     const handleEscape = event => {
       if (event.key === 'Escape' && isOpen) {
         onClose();
@@ -752,7 +750,7 @@ const SearchModal = ({
   }, [isOpen, onClose]);
 
   // Focus trap implementation
-  React.useEffect(() => {
+  useEffect(() => {
     if (!isOpen || !modalRef.current) return;
     const modal = modalRef.current;
     const focusableElements = modal.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
@@ -1169,10 +1167,10 @@ const FilterAccordion = ({
   onValueToggle,
   className
 }) => {
-  const [searchQuery, setSearchQuery] = React.useState("");
+  const [searchQuery, setSearchQuery] = useState("");
 
   // Filter facet values based on search query
-  const filteredValues = React.useMemo(() => {
+  const filteredValues = useMemo(() => {
     if (!searchQuery.trim()) {
       return facet.values;
     }
@@ -1295,7 +1293,7 @@ const AppliedFilters = ({
   className
 }) => {
   // Extract all refined (selected) filters
-  const appliedFilters = React.useMemo(() => {
+  const appliedFilters = useMemo(() => {
     const filters = [];
     facets.forEach(facet => {
       facet.values.forEach(value => {
@@ -1360,7 +1358,7 @@ const FiltersPanel = ({
   className
 }) => {
   // Track which accordions are expanded
-  const [expandedAccordions, setExpandedAccordions] = React.useState(() => {
+  const [expandedAccordions, setExpandedAccordions] = useState(() => {
     // Initialize with default expanded facets
     const expanded = new Set();
     facets.forEach(facet => {
@@ -1370,7 +1368,7 @@ const FiltersPanel = ({
     });
     return expanded;
   });
-  const handleAccordionToggle = React.useCallback(facetId => {
+  const handleAccordionToggle = useCallback(facetId => {
     setExpandedAccordions(prev => {
       const next = new Set(prev);
       if (next.has(facetId)) {
@@ -1381,13 +1379,13 @@ const FiltersPanel = ({
       return next;
     });
   }, []);
-  const handleValueToggle = React.useCallback((attribute, value) => {
+  const handleValueToggle = useCallback((attribute, value) => {
     onFacetToggle(attribute, value);
   }, [onFacetToggle]);
-  const handleRemoveFilter = React.useCallback((attribute, value) => {
+  const handleRemoveFilter = useCallback((attribute, value) => {
     onFacetToggle(attribute, value);
   }, [onFacetToggle]);
-  const handleClearAll = React.useCallback(() => {
+  const handleClearAll = useCallback(() => {
     // Remove all refined facets
     facets.forEach(facet => {
       facet.values.forEach(value => {
@@ -1775,15 +1773,8 @@ const SearchTriggerButton = ({
   }, label));
 };
 
-exports.AlgoliaDynamicSearch = AlgoliaDynamicSearchLeybold;
-exports.AlgoliaDynamicSearchLeybold = AlgoliaDynamicSearchLeybold;
-exports.AppliedFilterTag = AppliedFilterTag;
-exports.AppliedFilters = AppliedFilters;
-exports.Button = Button;
-exports.ContentCardHorizontal = ContentCardHorizontal;
-exports.FederatedInstantResultsLayout = FederatedInstantResultsLayout;
-exports.FederatedResultsView = FederatedResultsView;
-exports.FederatedSearchExperience = FederatedSearchExperience;
+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 };
+archExperience;
 exports.FilterAccordion = FilterAccordion;
 exports.FilterItem = FilterItem;
 exports.FilterSearch = FilterSearch;

package/dist/index.scss

@@ -288,7 +288,7 @@
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
-  padding: 0.5rem;
+  padding: 0.5rem !important;
   background-color: white;
   box-shadow: 2.7px 2.7px 5px 0 rgba(0, 0, 0, 0.1);
 }
@@ -721,6 +721,12 @@
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
   font-size: 18px;
 }
+.qr-journey-form-wrapper ::-moz-placeholder {
+  font-style: normal;
+}
+.qr-journey-form-wrapper ::placeholder {
+  font-style: normal;
+}
 .qr-journey-form-wrapper h1 {
   font-size: 28px;
   font-weight: 400;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@asantemedia-org/leybold-design-system",
-  "version": "1.0.7",
+  "version": "1.0.9",
   "description": "Design system for Leybold",
   "license": "UNLICENSED",
   "main": "dist/index.js",