@asante-org/leybold-design-system 1.3.5 → 1.3.7-beta.0

package/dist/index.scss

@@ -3194,6 +3194,38 @@ h3.ProductCardHorizontal-module__productTitle___xBuu7 {
 .disabled-product-fields-section .qr-form-fields .qr-form-filed-wrapper.has-no-value {
   display: none;
 }
+.SearchTriggerButton-module__searchTrigger___PDbDB {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 1rem;
+  background: transparent;
+  border: 1px solid currentColor;
+  border-radius: 0.25rem;
+  color: inherit;
+  font-size: 1rem;
+  cursor: pointer;
+  transition: all 0.2s ease-in-out;
+}
+.SearchTriggerButton-module__searchTrigger___PDbDB:hover {
+  background-color: rgba(0, 0, 0, 0.05);
+}
+.SearchTriggerButton-module__searchTrigger___PDbDB:focus-visible {
+  outline: 2px solid #0066cc;
+  outline-offset: 2px;
+}
+.SearchTriggerButton-module__searchTrigger___PDbDB:active {
+  transform: scale(0.98);
+}
+
+.SearchTriggerButton-module__searchIcon___izByW {
+  width: 1.25rem;
+  height: 1.25rem;
+}
+
+.SearchTriggerButton-module__label___mkS7T {
+  font-weight: 500;
+}
 :root {
   --leybold-red: #e2001a;
   --leybold-black: #000000;
@@ -6084,36 +6116,4 @@ h3.ProductCardHorizontal-module__productTitle___xBuu7 {
     height: 4rem;
     margin-bottom: 1rem;
   }
-}
-.SearchTriggerButton-module__searchTrigger___PDbDB {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.5rem;
-  padding: 0.5rem 1rem;
-  background: transparent;
-  border: 1px solid currentColor;
-  border-radius: 0.25rem;
-  color: inherit;
-  font-size: 1rem;
-  cursor: pointer;
-  transition: all 0.2s ease-in-out;
-}
-.SearchTriggerButton-module__searchTrigger___PDbDB:hover {
-  background-color: rgba(0, 0, 0, 0.05);
-}
-.SearchTriggerButton-module__searchTrigger___PDbDB:focus-visible {
-  outline: 2px solid #0066cc;
-  outline-offset: 2px;
-}
-.SearchTriggerButton-module__searchTrigger___PDbDB:active {
-  transform: scale(0.98);
-}
-
-.SearchTriggerButton-module__searchIcon___izByW {
-  width: 1.25rem;
-  height: 1.25rem;
-}
-
-.SearchTriggerButton-module__label___mkS7T {
-  font-weight: 500;
 }

package/dist/src/components/ContentCardHorizontal/index.d.ts

@@ -1,2 +1,2 @@
 export { ContentCardHorizontal } from './ContentCardHorizontal';
-export type { ContentCardHorizontalProps } from '../../types/cards';
+export type { ContentCardHorizontalProps } from '../../types/search';

package/dist/src/experience/federated-search/FederatedSearch.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import { FederatedSearchComponentProps } from "../../types/search";
+export declare const FederatedSearch: React.FC<FederatedSearchComponentProps>;

package/dist/src/experience/federated-search/index.d.ts

@@ -1,2 +1,3 @@
+export { FederatedSearch } from './FederatedSearch';
 export { FederatedSearchExperience } from './FederatedSearchExperience';
 export type { FederatedSearchProps } from '../../types/search';

package/dist/src/hooks/federated-search/useSearchAnalytics.d.ts

@@ -0,0 +1,4 @@
+import type { FederatedSearchAnalyticsEvent, FederatedSearchAnalyticsHandlers } from "../../types/search";
+export declare const useSearchAnalytics: (analytics?: FederatedSearchAnalyticsHandlers) => {
+    emitAnalytics: (event: FederatedSearchAnalyticsEvent) => void;
+};

package/dist/src/hooks/federated-search/useSearchUIState.d.ts

@@ -0,0 +1,24 @@
+/// <reference types="react" />
+import type { SearchTab, SearchView } from "../../types/search";
+interface UseSearchUIStateOptions {
+    debounceMs: number;
+    defaultTab?: SearchTab;
+}
+export declare const useSearchUIState: ({ debounceMs, defaultTab }: UseSearchUIStateOptions) => {
+    isOpen: boolean;
+    setIsOpen: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+    query: string;
+    setQuery: import("react").Dispatch<import("react").SetStateAction<string>>;
+    debouncedQuery: string;
+    activeView: SearchView;
+    setActiveView: import("react").Dispatch<import("react").SetStateAction<SearchView>>;
+    activeTab: SearchTab;
+    setActiveTab: import("react").Dispatch<import("react").SetStateAction<SearchTab>>;
+    currentPage: number;
+    setCurrentPage: import("react").Dispatch<import("react").SetStateAction<number>>;
+    totalPages: number;
+    setTotalPages: import("react").Dispatch<import("react").SetStateAction<number>>;
+    isFilterDrawerOpen: boolean;
+    setIsFilterDrawerOpen: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+};
+export {};

package/dist/src/hooks/federated-search/utils.d.ts

@@ -0,0 +1,11 @@
+import type { Facet, UseFederatedSearchAlgoliaOptions } from "../../types/search";
+export declare const CONTENT_ALL_FACET_VALUE = "All";
+export declare const normalizeCategory: (rawCategory: unknown) => string | undefined;
+export declare const stripHtml: (input: unknown) => string | undefined;
+export declare const getValueAtPath: (obj: unknown, path: string) => unknown;
+export declare const coerceStringValues: (value: unknown) => string[];
+export declare const transformFacetsFromAlgolia: (algoliaFacets: Record<string, Record<string, number>>, facetConfigs: UseFederatedSearchAlgoliaOptions["config"]["productFacets"], refinements: Map<string, Set<string>>) => Facet[];
+export declare const buildFacetWithAllOption: (config: UseFederatedSearchAlgoliaOptions["config"]["contentFacets"][number], values: Array<{
+    value: string;
+    count: number;
+}>, refinements: Map<string, Set<string>>, allFacetLabel: string) => Facet[];

package/dist/src/hooks/useFederatedSearchAlgolia.d.ts

@@ -0,0 +1,37 @@
+import type { ContentResult, Facet, ProductResult, SearchTab, SearchView, UseFederatedSearchAlgoliaOptions } from "../types/search";
+export declare const useFederatedSearchAlgolia: ({ config, text, analytics, }: UseFederatedSearchAlgoliaOptions) => {
+    isOpen: boolean;
+    onOpen: () => void;
+    onClose: () => void;
+    query: string;
+    onQueryChange: (value: string) => void;
+    onSearchSubmit: () => void;
+    products: ProductResult[];
+    contents: ContentResult[];
+    isLoadingProducts: boolean;
+    isLoadingContents: boolean;
+    productsError: string | undefined;
+    contentsError: string | undefined;
+    onSeeAllProducts: () => void;
+    onSeeAllContents: () => void;
+    onSeeAllCombined: () => void;
+    activeView: SearchView;
+    onChangeView: (view: SearchView) => void;
+    activeTab: SearchTab;
+    onTabChange: (tab: SearchTab) => void;
+    currentPage: number;
+    totalPages: number;
+    onPageChange: (page: number) => void;
+    facets: Facet[];
+    onFacetToggle: (attribute: string, value: string) => void;
+    isFilterDrawerOpen: boolean;
+    onFilterDrawerToggle: () => void;
+    onFilterDrawerClose: () => void;
+    text: import("../types/search").FederatedSearchTextConfig | undefined;
+    isAlgoliaConfigured: boolean;
+    trackResultClick: (params: {
+        resultType: "product" | "content";
+        resultId: string;
+        metadata?: Record<string, unknown>;
+    }) => void;
+};

package/dist/src/index.d.ts

@@ -10,8 +10,10 @@ export { AlgoliaDynamicSearchLeybold } from "./experience/algolia-dynamic-search
 export { QrFormLeybold } from "./experience/qr-form-journey";
 export { AlgoliaDynamicSearchLeybold as AlgoliaDynamicSearch } from "./experience/algolia-dynamic-search";
 export { QrFormLeybold as QrForm } from "./experience/qr-form-journey";
+export { FederatedSearch } from "./experience/federated-search";
 export { FederatedSearchExperience } from "./experience/federated-search";
-export type { FederatedSearchProps } from "./types/search";
+export type { FederatedSearchComponentProps, FederatedSearchProps } from "./types/search";
+export { useFederatedSearchAlgolia } from "./hooks/useFederatedSearchAlgolia";
 export { SearchTriggerButton } from "./components/SearchTriggerButton";
 export { SearchModal, ModalCloseButton } from "./components/SearchModal";
 export { SearchBar, SearchIcon, SearchInput, SearchSubmitButton } from "./components/SearchBar";
@@ -25,7 +27,8 @@ export { ContentCardBase } from "./components/ContentCardBase";
 export { ContentCardHorizontal } from "./components/ContentCardHorizontal";
 export { FederatedResultsView, ResultsList } from "./components/ResultsView";
 export { FiltersPanel, FilterAccordion, FilterItem, FilterSearch, AppliedFilters, AppliedFilterTag, } from "./components/Filters";
-export type { ProductResult, ContentResult, SearchView, SearchTab, SearchTriggerButtonProps, SearchModalProps, SearchBarProps, FederatedInstantResultsLayoutProps, ResultsColumnProps, ProductCardHorizontalProps, ContentCardBaseProps, ContentCardHorizontalProps, FederatedResultsViewProps, ResultsListProps, Facet, FacetValue, } from "./types/search";
+export type { ProductResult, ContentResult, SearchView, SearchTab, SearchTriggerButtonProps, SearchModalProps, SearchBarProps, FederatedInstantResultsLayoutProps, ResultsColumnProps, ProductCardHorizontalProps, ContentCardHorizontalProps, FederatedResultsViewProps, ResultsListProps, Facet, FacetValue, FederatedSearchTextConfig, FederatedFacetConfig, FederatedSearchAlgoliaConfig, FederatedSearchAnalyticsEvent, FederatedSearchAnalyticsHandlers, FederatedSearchComponentProps, UseFederatedSearchAlgoliaOptions, } from "./types/search";
+export type { ContentCardBaseProps } from "./types/cards";
 export type { FiltersPanelProps, FilterAccordionProps, FilterItemProps, FilterSearchProps, AppliedFiltersProps, AppliedFilterTagProps, } from "./components/Filters";
 export type { ResultsCountProps } from "./components/ResultsCount";
 export type { SeeAllLinkButtonProps } from "./components/SeeAllLinkButton";

package/dist/src/types/cards.d.ts

@@ -27,13 +27,13 @@ export interface ContentCardProps {
     excerpt?: string;
     className?: string;
     button?: ButtonProps;
-    variant?: "content-view" | "career-view";
+    variant?: "content-view" | "career-view" | "instant-view" | "results-view";
     style?: React.CSSProperties;
     showButton?: boolean;
 }
 export interface ContentCardBaseProps {
     id?: string;
-    variant?: "content-view" | "career-view";
+    variant?: "content-view" | "career-view" | "instant-view" | "results-view" | "product-view" | any;
     title: string;
     url: string;
     imageUrl?: string;
@@ -81,3 +81,5 @@ export interface ProductCardDetailsProps {
     showProductPrice?: boolean;
     showButton?: boolean;
 }
+export interface ContentCardHorizontalProps {
+}

package/dist/src/types/search.d.ts

@@ -31,6 +31,65 @@ export interface ContentResult {
 }
 export type SearchView = "instant" | "results";
 export type SearchTab = "all" | "products" | "content";
+export interface FederatedSearchTextConfig {
+    modalTitle?: string;
+    instantSearchPlaceholder?: string;
+    resultsSearchPlaceholder?: string;
+    productsTabLabel?: string;
+    contentTabLabel?: string;
+    filterButtonLabel?: string;
+    showResultsLabel?: string;
+    seeAllProductsLabel?: string;
+    seeAllContentLabel?: string;
+    loadingProductsLabel?: string;
+    loadingContentLabel?: string;
+    loadingResultsLabel?: string;
+    noResultsTitle?: string;
+    noResultsDescription?: string;
+    buyOnlineLabel?: string;
+    allFacetValueLabel?: string;
+}
+export interface FederatedFacetConfig {
+    id: string;
+    label: string;
+    attribute: string;
+    searchable?: boolean;
+    defaultExpanded?: boolean;
+}
+export interface FederatedSearchAlgoliaConfig {
+    appId: string;
+    searchKey: string;
+    productsIndexName: string;
+    contentIndexName: string;
+    productFacets: FederatedFacetConfig[];
+    contentFacets: FederatedFacetConfig[];
+    hitsPerPage?: number;
+    debounceMs?: number;
+}
+export interface FederatedSearchAnalyticsEvent {
+    name: "search_open" | "search_close" | "search_submit" | "tab_change" | "facet_toggle" | "page_change" | "result_click";
+    query?: string;
+    tab?: SearchTab;
+    view?: SearchView;
+    attribute?: string;
+    value?: string;
+    page?: number;
+    resultType?: "product" | "content";
+    resultId?: string;
+    metadata?: Record<string, unknown>;
+}
+export interface FederatedSearchAnalyticsHandlers {
+    onGoogleAnalyticsEvent?: (event: FederatedSearchAnalyticsEvent) => void;
+    onAlgoliaAnalyticsEvent?: (event: FederatedSearchAnalyticsEvent) => void;
+}
+export interface UseFederatedSearchAlgoliaOptions {
+    config: FederatedSearchAlgoliaConfig;
+    text?: FederatedSearchTextConfig;
+    analytics?: FederatedSearchAnalyticsHandlers;
+}
+export interface FederatedSearchComponentProps extends UseFederatedSearchAlgoliaOptions {
+    trigger?: Omit<SearchTriggerButtonProps, "onOpen">;
+}
 export interface FederatedSearchProps {
     isOpen: boolean;
     onOpen(): void;
@@ -59,6 +118,7 @@ export interface FederatedSearchProps {
     isFilterDrawerOpen?: boolean;
     onFilterDrawerToggle?: () => void;
     onFilterDrawerClose?: () => void;
+    text?: FederatedSearchTextConfig;
 }
 export interface SearchTriggerButtonProps {
     onOpen(): void;
@@ -94,6 +154,7 @@ export interface FederatedInstantResultsLayoutProps {
     onSeeAllProducts(): void;
     onSeeAllContents(): void;
     onSeeAllCombined(): void;
+    text?: FederatedSearchTextConfig;
 }
 export interface ResultsColumnProps {
     title: string;
@@ -124,6 +185,7 @@ export interface FederatedResultsViewProps {
     isFilterDrawerOpen?: boolean;
     onFilterDrawerToggle?: () => void;
     onFilterDrawerClose?: () => void;
+    text?: FederatedSearchTextConfig;
 }
 export interface FiltersPanelPropsOld {
     className?: string;
@@ -135,5 +197,6 @@ export interface ResultsListProps {
     isLoading: boolean;
     error?: string;
     className?: string;
+    text?: FederatedSearchTextConfig;
 }
 export type { ProductCardHorizontalProps, ContentCardHorizontalProps } from "./cards";