@asantemedia-org/leybold-design-system 1.0.19 → 1.0.21

package/dist/src/components/Button/Button.d.ts

@@ -2,7 +2,7 @@ import React from "react";
 /**
  * Button variant types
  */
-export type ButtonVariant = "default" | "primary" | "secondary" | "solid-red" | "solid-grey" | "solid-black" | "solid-white" | "outlined-red" | "outlined-grey" | "outlined-black" | "outlined-white" | "outline" | "text" | "link-text" | "link-text-alt" | "external-link" | "carousel-arrow-left" | "carousel-arrow-right";
+export type ButtonVariant = "primary" | "secondary" | "solid-grey" | "solid-black" | "solid-white" | "outlined-grey" | "outlined-black" | "outlined-white" | "text" | "link-text" | "link-text-alt" | "external-link" | "carousel-arrow-left" | "carousel-arrow-right";
 /**
  * Icon types for button
  */

package/dist/src/components/Button/Button.stories.d.ts

@@ -3,11 +3,8 @@ import { Button } from "./Button";
 declare const meta: Meta<typeof Button>;
 export default meta;
 type Story = StoryObj<typeof Button>;
-export declare const Default: Story;
 export declare const Primary: Story;
-export declare const SolidRed: Story;
 export declare const SecondaryDesign: Story;
-export declare const OutlinedRed: Story;
 export declare const SolidWhite: Story;
 export declare const SolidGrey: Story;
 export declare const SolidBlack: Story;
@@ -18,7 +15,6 @@ export declare const LinkText: Story;
 export declare const LinkTextAlt: Story;
 export declare const CarouselArrows: Story;
 export declare const ExternalLink: Story;
-export declare const Outline: Story;
 export declare const Text: Story;
 export declare const ExtraSmall: Story;
 export declare const Small: Story;

package/dist/src/components/Filters/Filter.types.d.ts

@@ -44,6 +44,10 @@ export interface Facet {
      */
     defaultExpanded?: boolean;
 }
+/**
+ * Filter display variant - desktop or mobile
+ */
+export type FilterVariant = 'desktop' | 'mobile';
 /**
  * Props for FilterItem component
  */
@@ -60,6 +64,14 @@ export interface FilterItemProps {
      * Additional CSS class
      */
     className?: string;
+    /**
+     * Display variant - controls mobile vs desktop rendering
+     */
+    variant?: FilterVariant;
+    /**
+     * Whether to show checkbox (Products tab) or plain button (Content tab)
+     */
+    showCheckbox?: boolean;
 }
 /**
  * Props for FilterSearch component
@@ -106,6 +118,14 @@ export interface FilterAccordionProps {
      * Additional CSS class
      */
     className?: string;
+    /**
+     * Display variant - controls mobile vs desktop rendering
+     */
+    variant?: FilterVariant;
+    /**
+     * Whether to show checkbox (Products tab) or plain button (Content tab)
+     */
+    showCheckbox?: boolean;
 }
 /**
  * Props for FiltersPanel component
@@ -127,6 +147,14 @@ export interface FiltersPanelProps {
      * Additional CSS class
      */
     className?: string;
+    /**
+     * Display variant - controls mobile vs desktop rendering
+     */
+    variant?: FilterVariant;
+    /**
+     * Whether to show checkbox (Products tab) or plain button (Content tab)
+     */
+    showCheckbox?: boolean;
 }
 /**
  * Props for AppliedFilters component

package/dist/src/components/Filters/FiltersPanel.d.ts

@@ -2,5 +2,9 @@ import React from "react";
 import { FiltersPanelProps } from "./Filter.types";
 /**
  * FiltersPanel - Main container for all filters
+ *
+ * Fully controlled component - renders based on facets prop.
+ * When facets change (e.g., after API refetch), component re-renders with new data.
+ * Accordion expansion state persists across refetches, with new facets respecting defaultExpanded.
  */
 export declare const FiltersPanel: React.FC<FiltersPanelProps>;

package/dist/src/components/ProductCardVertical/ProductCardVertical.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+import { ProductCardVerticalProps } from './ProductCardVertical.types';
+/**
+ * ProductCardVertical - Vertical product card for grid layouts
+ *
+ * Used in full results view with 4-column grid (desktop) or 2-column grid (mobile).
+ * Figma spec: Default (no shadow) → Hover (shadow + grey button) → Focus (border + shadow)
+ *
+ * @example
+ * ```tsx
+ * <ProductCardVertical
+ *   title="TURBOVAC i - High vacuum turbopump"
+ *   url="/products/turbovac-i"
+ *   imageUrl="/assets/search-product.png"
+ *   productId="21312VISH"
+ *   description="Premium high-performance turbomolecular pump"
+ *   buttonLabel="BUY ONLINE"
+ * />
+ * ```
+ */
+export declare const ProductCardVertical: React.FC<ProductCardVerticalProps>;
+export default ProductCardVertical;

package/dist/src/components/ProductCardVertical/ProductCardVertical.types.d.ts

@@ -0,0 +1,50 @@
+/**
+ * Props for ProductCardVertical component
+ */
+export interface ProductCardVerticalProps {
+    /**
+     * Unique product identifier
+     */
+    id?: string;
+    /**
+     * Product title/name
+     */
+    title: string;
+    /**
+     * Product page URL
+     */
+    url: string;
+    /**
+     * Product image URL
+     */
+    imageUrl?: string;
+    /**
+     * Product SKU/ID code
+     */
+    productId?: string;
+    /**
+     * Product description
+     */
+    description?: string;
+    /**
+     * CTA button label
+     */
+    buttonLabel?: string;
+    /**
+     * Button click handler
+     */
+    onButtonClick?: () => void;
+    /**
+     * Additional CSS classes
+     */
+    className?: string;
+    /**
+     * Layout variant - desktop (224.5px) or mobile (140px width)
+     */
+    variant?: 'desktop' | 'mobile';
+    /**
+     * Force a specific state for Storybook showcase
+     * @internal
+     */
+    'data-force-state'?: 'hover' | 'focus';
+}

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

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

package/dist/src/components/SearchBar/SearchSubmitButton.d.ts

@@ -4,6 +4,7 @@ export interface SearchSubmitButtonProps {
     disabled?: boolean;
     ariaLabel?: string;
     label?: string;
+    variant?: 'instant' | 'results';
     className?: string;
 }
 export declare const SearchSubmitButton: React.FC<SearchSubmitButtonProps>;

package/dist/src/experience/algolia-dynamic-search/AlgoliaDynamicSearch.d.ts

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

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/qr-form-journey/QrFormJourney.d.ts

@@ -1,3 +1,2 @@
-/// <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

@@ -5,3 +5,4 @@ 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/hooks/useFederatedSearchMock.d.ts

@@ -1,4 +1,4 @@
-import { ProductResult, ContentResult, SearchView, SearchTab } from "../types/search";
+import { ProductResult, ContentResult, SearchView, SearchTab, Facet } from "../types/search";
 interface UseFederatedSearchMockOptions {
     debounceMs?: number;
     simulateDelay?: boolean;
@@ -24,5 +24,13 @@ export declare const useFederatedSearchMock: (options?: UseFederatedSearchMockOp
     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

@@ -18,6 +18,7 @@ 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";

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

@@ -20,6 +20,7 @@ export interface ContentCardHorizontalProps {
     excerpt?: string;
     className?: string;
     button?: ButtonProps;
+    variant?: "instant-view" | "results-view";
 }
 export type ProductCardHorizontalPartsProps = ProductCardHorizontalProps;
 export interface ProductCardDetailsProps {
@@ -45,4 +46,5 @@ export interface ProductCardDetailsProps {
         img_product: string;
         url: string;
     }>;
+    hidespares?: string;
 }

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

@@ -54,8 +54,11 @@ export interface FederatedSearchProps {
     currentPage: number;
     totalPages: number;
     onPageChange(page: number): void;
-    facets?: Facet[];
-    onFacetToggle?(attribute: string, value: string): void;
+    facets: Facet[];
+    onFacetToggle(attribute: string, value: string): void;
+    isFilterDrawerOpen?: boolean;
+    onFilterDrawerToggle?: () => void;
+    onFilterDrawerClose?: () => void;
 }
 export interface SearchTriggerButtonProps {
     onOpen(): void;
@@ -69,6 +72,7 @@ export interface SearchModalProps {
     title?: string;
     children: React.ReactNode;
     className?: string;
+    stickyHeaderContent?: React.ReactNode;
 }
 export interface SearchBarProps {
     value: string;
@@ -77,6 +81,7 @@ export interface SearchBarProps {
     placeholder?: string;
     autoFocus?: boolean;
     className?: string;
+    variant?: "instant" | "results";
 }
 export interface FederatedInstantResultsLayoutProps {
     query: string;
@@ -114,8 +119,11 @@ export interface FederatedResultsViewProps {
     currentPage: number;
     totalPages: number;
     onPageChange(page: number): void;
-    facets?: Facet[];
-    onFacetToggle?(attribute: string, value: string): void;
+    facets: Facet[];
+    onFacetToggle(attribute: string, value: string): void;
+    isFilterDrawerOpen?: boolean;
+    onFilterDrawerToggle?: () => void;
+    onFilterDrawerClose?: () => void;
 }
 export interface FiltersPanelPropsOld {
     className?: string;