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

package/dist/src/experience/GeneratedList/GeneratedList.types.d.ts

@@ -0,0 +1,131 @@
+export interface CardItem {
+    /** Unique identifier for React key */
+    id: string;
+    /** Card image URL */
+    imageUrl: string;
+    /** Card image alt text for accessibility */
+    imageAlt: string;
+    /** Card title - Inter Bold 24px */
+    title: string;
+    /** Card description - Inter Regular 18px */
+    description: string;
+    /** Target URL for card CTA */
+    linkUrl: string;
+    /** Optional custom link text (defaults to "READ MORE") */
+    linkText?: string;
+    /** Optional overlay color for mobile cards (defaults to blue) */
+    overlayColor?: string;
+}
+export interface ProductItem {
+    /** Unique identifier for React key */
+    id: string;
+    /** Product image URL */
+    imageUrl: string;
+    /** Product image alt text for accessibility */
+    imageAlt: string;
+    /** Product name/title - Inter Bold 24px, centered */
+    title: string;
+    /** Target URL for product page */
+    linkUrl: string;
+}
+export interface ExternalLinkItem {
+    /** Unique identifier for React key */
+    id: string;
+    /** External link card image URL */
+    imageUrl: string;
+    /** External link card image alt text for accessibility */
+    imageAlt: string;
+    /** Card title - Inter Bold 18px (H5) */
+    title: string;
+    /** Card description - Inter Regular 18px (Body) */
+    description: string;
+    /** Target URL for external link */
+    linkUrl: string;
+    /** Optional custom link text (defaults to "GO TO E-SHOP") */
+    linkText?: string;
+}
+export interface ListItem {
+    /** Unique identifier for React key */
+    id: string;
+    /** Link text displayed to user */
+    text: string;
+    /** Target URL for the link */
+    url: string;
+}
+/** Base props shared across all variants */
+interface BaseGeneratedListProps {
+    /** Number of columns (3=348px, 4=256px). Defaults to 3. */
+    columns?: 3 | 4;
+    /** Optional section title */
+    title?: string;
+    /** Additional CSS class */
+    className?: string;
+}
+/** Card variant props */
+interface CardVariantProps extends BaseGeneratedListProps {
+    /** Variant type - defaults to card */
+    variant?: 'card';
+    /** Array of card items to display */
+    items: CardItem[];
+}
+/** Product variant props */
+interface ProductVariantProps extends BaseGeneratedListProps {
+    /** Variant type - product */
+    variant: 'product';
+    /** Array of product items to display */
+    items: ProductItem[];
+}
+/** External Link variant props */
+interface ExternalLinkVariantProps extends BaseGeneratedListProps {
+    /** Variant type - external-link */
+    variant: 'external-link';
+    /** Array of external link items to display */
+    items: ExternalLinkItem[];
+    /** External Link variant always uses 3 columns on desktop - columns prop not allowed */
+    columns?: never;
+}
+/** List variant props */
+interface ListVariantProps extends Omit<BaseGeneratedListProps, 'title' | 'columns'> {
+    /** Variant type - list */
+    variant: 'list';
+    /** Marketing headline (required for list variant) */
+    heading: string;
+    /** Array of link items */
+    items: ListItem[];
+    /** Color scheme (required for list variant) */
+    colorScheme: 'red' | 'grey';
+    /** List variant doesn't use title or columns props */
+    title?: never;
+    columns?: never;
+}
+/** Union type for GeneratedList props with discriminated variant */
+export type GeneratedListProps = CardVariantProps | ProductVariantProps | ExternalLinkVariantProps | ListVariantProps;
+/** @private Internal use only */
+export interface CardProps {
+    item: CardItem;
+    columns: 3 | 4;
+    className?: string;
+}
+/** @private Internal use only */
+export interface ProductProps {
+    item: ProductItem;
+    columns: 3 | 4;
+    className?: string;
+}
+/** @private Internal use only */
+export interface ExternalLinkProps {
+    item: ExternalLinkItem;
+    className?: string;
+}
+/** @private Internal use only */
+export interface ListProps {
+    /** Marketing headline text */
+    heading: string;
+    /** Array of link items to display */
+    items: ListItem[];
+    /** Color scheme: red or grey */
+    colorScheme: 'red' | 'grey';
+    /** Optional CSS class */
+    className?: string;
+}
+export {};

package/dist/src/experience/GeneratedList/GeneratedListExternalLink.stories.d.ts

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

package/dist/src/experience/GeneratedList/GeneratedListList.stories.d.ts

@@ -0,0 +1,9 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { GeneratedList } from "./GeneratedList";
+declare const meta: Meta<typeof GeneratedList>;
+export default meta;
+type Story = StoryObj<typeof GeneratedList>;
+export declare const RedDesktop: Story;
+export declare const RedMobile: Story;
+export declare const GreyDesktop: Story;
+export declare const GreyMobile: Story;

package/dist/src/experience/GeneratedList/GeneratedListProduct.stories.d.ts

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

package/dist/src/experience/GeneratedList/_Card.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { CardProps } from './GeneratedList.types';
+/**
+ * Private Card component for GeneratedList
+ * Renders a single content card with image, title, description, and CTA
+ * @private
+ */
+export declare const Card: React.FC<CardProps>;

package/dist/src/experience/GeneratedList/_CardMobile.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { CardProps } from './GeneratedList.types';
+/**
+ * Private Mobile Card component for GeneratedList
+ * Full-width overlay card with centered text on image
+ * @private
+ */
+export declare const CardMobile: React.FC<CardProps>;

package/dist/src/experience/GeneratedList/_ExternalLink.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { ExternalLinkProps } from './GeneratedList.types';
+/**
+ * Private ExternalLink component for GeneratedList
+ * White card with image, title, description, and external link button
+ * @private
+ */
+export declare const ExternalLink: React.FC<ExternalLinkProps>;

package/dist/src/experience/GeneratedList/_List.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { ListProps } from './GeneratedList.types';
+/**
+ * Private List component for GeneratedList
+ * Marketing section with heading and two columns of clickable links
+ * @private
+ */
+export declare const List: React.FC<ListProps>;

package/dist/src/experience/GeneratedList/_Product.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { ProductProps } from './GeneratedList.types';
+/**
+ * Private Product component for GeneratedList
+ * White card with square product image and centered title
+ * Entire card is clickable (uses <a> tag wrapper)
+ * @private
+ */
+export declare const Product: React.FC<ProductProps>;

package/dist/src/experience/GeneratedList/index.d.ts

@@ -0,0 +1,2 @@
+export { GeneratedList } from './GeneratedList';
+export type { GeneratedListProps, CardItem, ProductItem, ExternalLinkItem, ListItem } from './GeneratedList.types';

package/dist/src/experience/Header/Header.d.ts

@@ -0,0 +1,20 @@
+/// <reference types="react" />
+export interface NavMenuItem {
+    id: string;
+    label: string;
+    menuLinks?: Array<{
+        label: string;
+        href?: string;
+    }>;
+}
+export interface HeaderProps {
+    className?: string;
+    navItems?: NavMenuItem[];
+    hoverDelay?: number;
+    menuOpen?: boolean;
+    menuLinks?: Array<{
+        label: string;
+        href?: string;
+    }>;
+}
+export declare function Header({ className, navItems, hoverDelay, menuOpen, menuLinks, }: HeaderProps): JSX.Element;

package/dist/src/experience/Header/Header.stories.d.ts

@@ -0,0 +1,9 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Header } from './Header';
+declare const meta: Meta<typeof Header>;
+export default meta;
+type Story = StoryObj<typeof Header>;
+export declare const Default: Story;
+export declare const OneColumn: Story;
+export declare const TwoColumn: Story;
+export declare const ThreeColumn: Story;

package/dist/src/experience/Header/HeaderNavButton.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+export interface HeaderNavButtonProps {
+    children: string;
+    hasDropdown?: boolean;
+    onClick?: (e: React.MouseEvent) => void;
+    'data-force-state'?: 'hover' | 'focus';
+    className?: string;
+}
+export declare function HeaderNavButton({ children, hasDropdown, onClick, className, ...props }: HeaderNavButtonProps): JSX.Element;

package/dist/src/experience/Header/MegaMenu.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+export interface MegaMenuProps {
+    isOpen: boolean;
+    links?: Array<{
+        label: string;
+        href?: string;
+    }>;
+    className?: string;
+}
+export declare function MegaMenu({ isOpen, links, className }: MegaMenuProps): JSX.Element | null;

package/dist/src/experience/Header/MenuLink.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+export interface MenuLinkProps {
+    children: string;
+    onClick?: (e: React.MouseEvent) => void;
+    'data-force-state'?: 'hover' | 'focus';
+    className?: string;
+}
+export declare function MenuLink({ children, onClick, className, ...props }: MenuLinkProps): JSX.Element;

package/dist/src/experience/Header/MobileHeader.stories.d.ts

@@ -0,0 +1,6 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Header } from './Header';
+declare const meta: Meta<typeof Header>;
+export default meta;
+type Story = StoryObj<typeof Header>;
+export declare const Mobile: Story;

package/dist/src/experience/Header/MobileMenu.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import type { NavMenuItem } from './Header';
+export interface MobileMenuProps {
+    isOpen: boolean;
+    onClose: () => void;
+    navItems: NavMenuItem[];
+    className?: string;
+}
+export declare function MobileMenu({ isOpen, onClose, navItems, className, }: MobileMenuProps): JSX.Element | null;

package/dist/src/experience/Header/MobileNavBar.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+export interface MobileNavBarProps {
+    className?: string;
+    items?: Array<{
+        id: string;
+        label: string;
+        icon?: string;
+        isHighlighted?: boolean;
+    }>;
+    onItemClick?: (id: string) => void;
+    onMoreClick?: () => void;
+}
+export declare function MobileNavBar({ className, items, onItemClick, onMoreClick, }: MobileNavBarProps): JSX.Element;

package/dist/src/experience/Header/index.d.ts

@@ -0,0 +1,6 @@
+export { Header } from './Header';
+export type { HeaderProps, NavMenuItem } from './Header';
+export { MobileNavBar } from './MobileNavBar';
+export type { MobileNavBarProps } from './MobileNavBar';
+export { MobileMenu } from './MobileMenu';
+export type { MobileMenuProps } from './MobileMenu';

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

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

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

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

package/dist/src/index.d.ts

@@ -1,5 +1,9 @@
 export { Button } from "./components/Button";
 export type { ButtonProps } from "./components/Button";
+export { Carousel } from "./experience/Carousel";
+export type { CarouselProps, CarouselCardData } from "./experience/Carousel";
+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";

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,45 @@
+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/cards.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { ButtonProps } from "./buttons";
 export interface ProductCardHorizontalProps {
     id?: string;

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export interface FacetValue {
     value: string;
     count: number;
@@ -53,6 +54,8 @@ export interface FederatedSearchProps {
     currentPage: number;
     totalPages: number;
     onPageChange(page: number): void;
+    facets?: Facet[];
+    onFacetToggle?(attribute: string, value: string): void;
 }
 export interface SearchTriggerButtonProps {
     onOpen(): void;
@@ -111,8 +114,8 @@ 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;
 }
 export interface FiltersPanelPropsOld {
     className?: string;