@asante-org/leybold-design-system 1.2.0

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

@@ -0,0 +1,39 @@
+import React from "react";
+import { FederatedSearchProps } from "../../types/search";
+/**
+ * FederatedSearchExperience - Top-level search experience component
+ *
+ * This component orchestrates the entire federated search experience, including:
+ * - Modal container
+ * - Search input
+ * - Instant results (2-column layout)
+ * - Full results view with tabs and filters
+ *
+ * The component is fully controlled and does not contain any data fetching logic.
+ * All data and callbacks are passed in via props, making it suitable for use in AEM
+ * where a controller layer will handle Algolia integration.
+ *
+ * @example
+ * ```tsx
+ * <FederatedSearchExperience
+ *   isOpen={isOpen}
+ *   onOpen={handleOpen}
+ *   onClose={handleClose}
+ *   query={query}
+ *   onQueryChange={setQuery}
+ *   onSearchSubmit={handleSubmit}
+ *   products={products}
+ *   contents={contents}
+ *   isLoadingProducts={isLoadingProducts}
+ *   isLoadingContents={isLoadingContents}
+ *   onSeeAllProducts={handleSeeAllProducts}
+ *   onSeeAllContents={handleSeeAllContents}
+ *   onSeeAllCombined={handleSeeAllCombined}
+ *   activeView={activeView}
+ *   onChangeView={setActiveView}
+ *   activeTab={activeTab}
+ *   onTabChange={setActiveTab}
+ * />
+ * ```
+ */
+export declare const FederatedSearchExperience: React.FC<FederatedSearchProps>;

package/dist/src/experience/federated-search/FederatedSearchExperience.stories.d.ts

@@ -0,0 +1,10 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { FederatedSearchExperience } from './FederatedSearchExperience';
+declare const meta: Meta<typeof FederatedSearchExperience>;
+export default meta;
+type Story = StoryObj<typeof FederatedSearchExperience>;
+export declare const Default: Story;
+export declare const WithResults: Story;
+export declare const FullResultsView: Story;
+export declare const LoadingState: Story;
+export declare const NoResults: Story;

package/dist/src/experience/federated-search/FederatedSearchWithAlgolia.stories.d.ts

@@ -0,0 +1,7 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { FederatedSearchExperience } from "./FederatedSearchExperience";
+declare const meta: Meta<typeof FederatedSearchExperience>;
+export default meta;
+type Story = StoryObj<typeof FederatedSearchExperience>;
+export declare const WithRealAlgolia: Story;
+export declare const WithPrefilledQuery: Story;

package/dist/src/experience/federated-search/components/AssistanceBanner/AssistanceBanner.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+import { AssistanceBannerProps } from './AssistanceBanner.types';
+/**
+ * AssistanceBanner - Help widget for search sidebar
+ *
+ * Displays a call-to-action for users who need assistance finding products.
+ * Features chat icon, heading, description, and contact link with chevron.
+ *
+ * Desktop only - hidden on mobile to save space.
+ *
+ * @example
+ * ```tsx
+ * <AssistanceBanner
+ *   title="Need Assistance?"
+ *   description="Can't find what you're looking for? Our team is ready to help."
+ *   linkText="Contact support"
+ *   linkUrl="/contact"
+ * />
+ * ```
+ */
+export declare const AssistanceBanner: React.FC<AssistanceBannerProps>;
+export default AssistanceBanner;

package/dist/src/experience/federated-search/components/AssistanceBanner/AssistanceBanner.types.d.ts

@@ -0,0 +1,29 @@
+/**
+ * Props for AssistanceBanner component
+ */
+export interface AssistanceBannerProps {
+    /**
+     * Banner heading text
+     */
+    title?: string;
+    /**
+     * Banner description/body text
+     */
+    description?: string;
+    /**
+     * Contact link text
+     */
+    linkText?: string;
+    /**
+     * Contact link URL
+     */
+    linkUrl?: string;
+    /**
+     * Link click handler (optional, for programmatic control)
+     */
+    onLinkClick?: () => void;
+    /**
+     * Additional CSS classes
+     */
+    className?: string;
+}

package/dist/src/experience/federated-search/components/AssistanceBanner/AssistanceIcon.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const AssistanceIcon: React.FC<React.SVGProps<SVGSVGElement>>;

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

@@ -0,0 +1,3 @@
+export { AssistanceBanner } from './AssistanceBanner';
+export { AssistanceIcon } from './AssistanceIcon';
+export type { AssistanceBannerProps } from './AssistanceBanner.types';

package/dist/src/experience/federated-search/components/FilterDrawer/FilterDrawer.d.ts

@@ -0,0 +1,24 @@
+import React from 'react';
+import { FilterDrawerProps } from './FilterDrawer.types';
+/**
+ * FilterDrawer - Mobile slide-in filter panel
+ *
+ * Slides in from the right with a dark overlay. Used on mobile to show filters
+ * when screen space is limited. Includes focus trap, escape key handling, and
+ * body scroll prevention.
+ *
+ * Desktop: Hidden (filters shown in sidebar)
+ * Mobile: Slide-in drawer overlay
+ *
+ * @example
+ * ```tsx
+ * <FilterDrawer
+ *   isOpen={isFilterDrawerOpen}
+ *   onClose={() => setIsFilterDrawerOpen(false)}
+ * >
+ *   <FiltersPanel facets={facets} onFacetToggle={handleToggle} />
+ * </FilterDrawer>
+ * ```
+ */
+export declare const FilterDrawer: React.FC<FilterDrawerProps>;
+export default FilterDrawer;

package/dist/src/experience/federated-search/components/FilterDrawer/FilterDrawer.types.d.ts

@@ -0,0 +1,22 @@
+/// <reference types="react" />
+/**
+ * Props for FilterDrawer component
+ */
+export interface FilterDrawerProps {
+    /**
+     * Whether drawer is currently open/visible
+     */
+    isOpen: boolean;
+    /**
+     * Close handler (called on overlay click, Escape key, or X button)
+     */
+    onClose: () => void;
+    /**
+     * Drawer content (typically FiltersPanel component)
+     */
+    children: React.ReactNode;
+    /**
+     * Additional CSS classes
+     */
+    className?: string;
+}

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

@@ -0,0 +1,2 @@
+export { FilterDrawer } from './FilterDrawer';
+export type { FilterDrawerProps } from './FilterDrawer.types';

package/dist/src/experience/federated-search/components/TabButton/TabButton.d.ts

@@ -0,0 +1,31 @@
+import React from 'react';
+import { TabButtonProps } from './TabButton.types';
+/**
+ * TabButton - Tab navigation component with result counts
+ *
+ * Supports two layout variants:
+ * - Desktop: Background colours, top red underline when active, rounded corners
+ * - Mobile: Text-only with bottom border underline when active
+ *
+ * @example
+ * ```tsx
+ * // Desktop variant
+ * <TabButton
+ *   label="WEB SHOP RESULTS"
+ *   count={542}
+ *   isActive={true}
+ *   onClick={() => setActiveTab('products')}
+ *   variant="desktop"
+ * />
+ *
+ * // Mobile variant
+ * <TabButton
+ *   label="WEB SHOP"
+ *   isActive={false}
+ *   onClick={() => setActiveTab('content')}
+ *   variant="mobile"
+ * />
+ * ```
+ */
+export declare const TabButton: React.FC<TabButtonProps>;
+export default TabButton;

package/dist/src/experience/federated-search/components/TabButton/TabButton.types.d.ts

@@ -0,0 +1,32 @@
+/**
+ * Props for TabButton component
+ */
+export interface TabButtonProps {
+    /**
+     * Tab label text (e.g., "WEB SHOP RESULTS", "WEBSITE")
+     */
+    label: string;
+    /**
+     * Optional result count to display with label
+     * When provided, formats as "{count} {label}"
+     */
+    count?: number;
+    /**
+     * Whether this tab is currently active/selected
+     */
+    isActive: boolean;
+    /**
+     * Click handler for tab selection
+     */
+    onClick: () => void;
+    /**
+     * Layout variant
+     * - desktop: Background colours, top underline, rounded corners
+     * - mobile: Text-only with bottom border
+     */
+    variant?: 'desktop' | 'mobile';
+    /**
+     * Additional CSS classes
+     */
+    className?: string;
+}

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

@@ -0,0 +1,2 @@
+export { TabButton } from './TabButton';
+export type { TabButtonProps } from './TabButton.types';

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

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

package/dist/src/experience/qr-form-journey/QrFormJourney.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import "./QrFormJourney.scss";
+export declare const QrFormLeybold: (props: any) => JSX.Element;

package/dist/src/experience/qr-form-journey/QrFormJourney.stories.d.ts

@@ -0,0 +1,8 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { QrFormLeybold } from "./QrFormJourney";
+declare const meta: Meta<typeof QrFormLeybold>;
+export default meta;
+type Story = StoryObj<typeof QrFormLeybold>;
+export declare const Default: Story;
+export declare const AEM: Story;
+export declare const China: Story;

package/dist/src/experience/qr-form-journey/index.d.ts

@@ -0,0 +1 @@
+export { QrFormLeybold } from "./QrFormJourney";

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

@@ -0,0 +1,36 @@
+import { ProductResult, ContentResult, SearchView, SearchTab, Facet } from "../types/search";
+interface UseFederatedSearchMockOptions {
+    debounceMs?: number;
+    simulateDelay?: boolean;
+    delayMs?: number;
+}
+export declare const useFederatedSearchMock: (options?: UseFederatedSearchMockOptions) => {
+    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;
+    facets: Facet[];
+    onFacetToggle: (attribute: string, value: string) => void;
+    currentPage: number;
+    totalPages: number;
+    onPageChange: (page: number) => void;
+    isFilterDrawerOpen: boolean;
+    onFilterDrawerToggle: () => void;
+    onFilterDrawerClose: () => void;
+};
+export {};

package/dist/src/index.d.ts

@@ -0,0 +1,29 @@
+export { Button } from "./components/Button";
+export type { ButtonProps } from "./components/Button";
+export { Footer, FooterLink, FooterLinkGroup, FooterSocialIcons, FooterSocialIcon, FooterBottom, } from "./experience/Footer";
+export type { FooterProps, FooterLinkItem, SocialLinkItem, FooterLogoProps, FooterLinkProps, FooterLinkGroupProps, FooterSocialIconsProps, FooterSocialIconProps, FooterBottomProps, } from "./experience/Footer";
+export { Pagination, PaginationItem, PaginationButton, PaginationEllipsis, } from "./components/Pagination";
+export type { PaginationProps, PaginationItemProps, PaginationButtonProps, PaginationEllipsisProps, } from "./components/Pagination";
+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 { FederatedSearchExperience } from "./experience/federated-search";
+export type { FederatedSearchProps } from "./types/search";
+export { SearchTriggerButton } from "./components/SearchTriggerButton";
+export { SearchModal, ModalCloseButton } from "./components/SearchModal";
+export { SearchBar, SearchIcon, SearchInput, SearchSubmitButton } from "./components/SearchBar";
+export { FederatedInstantResultsLayout } from "./components/InstantResults";
+export { ResultsColumn } from "./components/ResultsColumn";
+export { ResultsCount } from "./components/ResultsCount";
+export { SeeAllLinkButton } from "./components/SeeAllLinkButton";
+export { ProductCardHorizontal } from "./components/ProductCardHorizontal";
+export { ProductCardVertical } from "./components/ProductCardVertical";
+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, ContentCardHorizontalProps, FederatedResultsViewProps, ResultsListProps, Facet, FacetValue, } from "./types/search";
+export type { FiltersPanelProps, FilterAccordionProps, FilterItemProps, FilterSearchProps, AppliedFiltersProps, AppliedFilterTagProps, } from "./components/Filters";
+export type { ResultsCountProps } from "./components/ResultsCount";
+export type { SeeAllLinkButtonProps } from "./components/SeeAllLinkButton";
+export * from "./utils/styles";

package/dist/src/stories/foundation/Buttons/ButtonComponents.d.ts

@@ -0,0 +1,56 @@
+import * as React from 'react';
+import { ButtonVariant } from '../../../components/Button/Button';
+export interface ButtonVariantData {
+    variant: ButtonVariant;
+    label: string;
+    description?: string;
+    category: 'high-emphasis' | 'medium-emphasis' | 'low-emphasis' | 'navigation';
+}
+export declare const BUTTON_VARIANTS: ButtonVariantData[];
+interface ButtonShowcaseRowProps {
+    variant: ButtonVariant;
+    label: string;
+    showHover?: boolean;
+    showFocus?: boolean;
+}
+export declare const ButtonShowcaseRow: React.FC<ButtonShowcaseRowProps>;
+interface ButtonGroupProps {
+    title: string;
+    description?: string;
+    variants: ButtonVariantData[];
+}
+export declare const ButtonGroup: React.FC<ButtonGroupProps>;
+interface ButtonExampleProps {
+    variant: ButtonVariant;
+    label: string;
+    description: string;
+}
+export declare const ButtonExample: React.FC<ButtonExampleProps>;
+export declare const StatesHeader: React.FC;
+interface ViewportPanelProps {
+    title: string;
+    children: React.ReactNode;
+}
+export declare const ViewportPanel: React.FC<ViewportPanelProps>;
+interface ButtonStateRowProps {
+    variant: ButtonVariant;
+    label: string;
+    rowLabel?: string;
+    darkBg?: boolean;
+}
+export declare const ButtonStateRow: React.FC<ButtonStateRowProps>;
+export interface ButtonStateTableProps {
+    variants: Array<{
+        variant: ButtonVariant;
+        label: string;
+        rowLabel?: string;
+        darkBg?: boolean;
+    }>;
+}
+export declare const ButtonStateTable: React.FC<ButtonStateTableProps>;
+export declare const getVariantsByCategory: (category: ButtonVariantData['category']) => ButtonVariantData[];
+export declare const HIGH_EMPHASIS_VARIANTS: ButtonVariantData[];
+export declare const MEDIUM_EMPHASIS_VARIANTS: ButtonVariantData[];
+export declare const LOW_EMPHASIS_VARIANTS: ButtonVariantData[];
+export declare const NAVIGATION_VARIANTS: ButtonVariantData[];
+export {};

package/dist/src/stories/foundation/Typography/TypographyComponents.d.ts

@@ -0,0 +1,46 @@
+/// <reference types="react" />
+export declare const TYPOGRAPHY_MOBILE: ({
+    label: string;
+    cssVar: string;
+    displaySize: string;
+    displayLineHeight: string;
+    displayLetterSpacing: string;
+    isBody?: undefined;
+} | {
+    label: string;
+    cssVar: string;
+    displaySize: string;
+    displayLineHeight: string;
+    isBody: boolean;
+    displayLetterSpacing?: undefined;
+})[];
+export declare const TYPOGRAPHY_DESKTOP: ({
+    label: string;
+    cssVar: string;
+    displaySize: string;
+    displayLineHeight: string;
+    displayLetterSpacing: string;
+    isBody?: undefined;
+} | {
+    label: string;
+    cssVar: string;
+    displaySize: string;
+    displayLineHeight: string;
+    isBody: boolean;
+    displayLetterSpacing?: undefined;
+})[];
+interface HeadingRowProps {
+    label: string;
+    cssVar: string;
+    displaySize: string;
+    displayLineHeight: string;
+    displayLetterSpacing?: string;
+    isBody?: boolean;
+}
+export declare const HeadingRow: ({ label, cssVar, displaySize, displayLineHeight, displayLetterSpacing, isBody }: HeadingRowProps) => JSX.Element;
+interface ViewportPanelProps {
+    title: string;
+    items: HeadingRowProps[];
+}
+export declare const ViewportPanel: ({ title, items }: ViewportPanelProps) => JSX.Element;
+export {};

package/dist/src/stories/foundation/_components/StoryLayout.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+interface StoryFooterProps {
+    children: React.ReactNode;
+}
+export declare const StoryFooter: ({ children }: StoryFooterProps) => JSX.Element;
+interface StoryHeaderProps {
+    title: string;
+    subtitle: string;
+}
+export declare const StoryHeader: ({ title, subtitle }: StoryHeaderProps) => JSX.Element;
+export {};

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

@@ -0,0 +1,4 @@
+export interface ButtonProps {
+    label: string;
+    onClick: () => void;
+}

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

@@ -0,0 +1,50 @@
+/// <reference types="react" />
+import { ButtonProps } from "./buttons";
+export interface ProductCardHorizontalProps {
+    id?: string;
+    title: string;
+    url: string;
+    imageUrl?: string;
+    productId?: string;
+    price?: string;
+    description?: string;
+    className?: string;
+    button?: ButtonProps;
+}
+export interface ContentCardHorizontalProps {
+    id: string;
+    title: string;
+    url: string;
+    category?: string;
+    meta?: string;
+    excerpt?: string;
+    className?: string;
+    button?: ButtonProps;
+    variant?: "instant-view" | "results-view";
+}
+export type ProductCardHorizontalPartsProps = ProductCardHorizontalProps;
+export interface ProductCardDetailsProps {
+    id?: string;
+    title: string;
+    description?: string;
+    price?: string;
+    code?: string;
+    imageUrl?: string;
+    className?: string;
+    button?: ButtonProps;
+    facets?: Array<{
+        name: string;
+        label: string;
+        returnsHTML?: boolean;
+    }>;
+    hit?: Record<string, unknown>;
+    ProductCardComponent?: React.FC<ProductCardHorizontalProps>;
+    relatedProducts?: Array<{
+        code: string;
+        name: string;
+        price_range: string;
+        img_product: string;
+        url: string;
+    }>;
+    hidespares?: string;
+}

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

@@ -0,0 +1,139 @@
+/// <reference types="react" />
+export interface FacetValue {
+    value: string;
+    count: number;
+    isRefined: boolean;
+}
+export interface Facet {
+    id: string;
+    label: string;
+    attribute: string;
+    values: FacetValue[];
+    searchable?: boolean;
+    defaultExpanded?: boolean;
+}
+export interface ProductResult {
+    id: string;
+    title: string;
+    url: string;
+    imageUrl?: string;
+    productId?: string;
+    price?: string;
+    description?: string;
+}
+export interface ContentResult {
+    id: string;
+    title: string;
+    url: string;
+    category?: string;
+    meta?: string;
+    excerpt?: string;
+}
+export type SearchView = "instant" | "results";
+export type SearchTab = "all" | "products" | "content";
+export interface FederatedSearchProps {
+    isOpen: boolean;
+    onOpen(): void;
+    onClose(): void;
+    query: string;
+    onQueryChange(value: string): void;
+    onSearchSubmit(): void;
+    products: ProductResult[];
+    contents: ContentResult[];
+    isLoadingProducts: boolean;
+    isLoadingContents: boolean;
+    productsError?: string;
+    contentsError?: string;
+    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;
+}
+export interface SearchTriggerButtonProps {
+    onOpen(): void;
+    ariaLabel?: string;
+    label?: string;
+    className?: string;
+}
+export interface SearchModalProps {
+    isOpen: boolean;
+    onClose(): void;
+    title?: string;
+    children: React.ReactNode;
+    className?: string;
+    stickyHeaderContent?: React.ReactNode;
+}
+export interface SearchBarProps {
+    value: string;
+    onChange(value: string): void;
+    onSubmit(): void;
+    placeholder?: string;
+    autoFocus?: boolean;
+    className?: string;
+    variant?: "instant" | "results";
+}
+export interface FederatedInstantResultsLayoutProps {
+    query: string;
+    products: ProductResult[];
+    contents: ContentResult[];
+    isLoadingProducts: boolean;
+    isLoadingContents: boolean;
+    productsError?: string;
+    contentsError?: string;
+    onSeeAllProducts(): void;
+    onSeeAllContents(): void;
+    onSeeAllCombined(): void;
+}
+export interface ResultsColumnProps {
+    title: string;
+    count: number;
+    isLoading: boolean;
+    error?: string;
+    onSeeAll(): void;
+    children: React.ReactNode;
+    className?: string;
+}
+export interface FederatedResultsViewProps {
+    query: string;
+    onQueryChange(value: string): void;
+    onSearchSubmit(): void;
+    activeTab: SearchTab;
+    onTabChange(tab: SearchTab): void;
+    products: ProductResult[];
+    contents: ContentResult[];
+    isLoadingProducts: boolean;
+    isLoadingContents: boolean;
+    productsError?: string;
+    contentsError?: string;
+    currentPage: number;
+    totalPages: number;
+    onPageChange(page: number): void;
+    facets: Facet[];
+    onFacetToggle(attribute: string, value: string): void;
+    isFilterDrawerOpen?: boolean;
+    onFilterDrawerToggle?: () => void;
+    onFilterDrawerClose?: () => void;
+}
+export interface FiltersPanelPropsOld {
+    className?: string;
+}
+export interface ResultsListProps {
+    type: "products" | "content" | "all";
+    products?: ProductResult[];
+    contents?: ContentResult[];
+    isLoading: boolean;
+    error?: string;
+    className?: string;
+}
+export type { ProductCardHorizontalProps, ContentCardHorizontalProps } from "./cards";

package/dist/src/utils/styles/index.d.ts

@@ -0,0 +1 @@
+export {};