@asante-org/leybold-design-system 1.2.0

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

@@ -0,0 +1,201 @@
+import React from 'react';
+export interface FooterLinkItem {
+    /**
+     * Link text label
+     */
+    label: string;
+    /**
+     * Link URL
+     */
+    href: string;
+    /**
+     * Whether this is an external link (shows external icon)
+     */
+    external?: boolean;
+    /**
+     * Optional click handler (useful for cookie settings etc.)
+     */
+    onClick?: () => void;
+}
+export interface SocialLinkItem {
+    /**
+     * Social media platform
+     */
+    platform: 'facebook' | 'x' | 'linkedin' | 'youtube' | 'instagram';
+    /**
+     * Link URL
+     */
+    href: string;
+    /**
+     * Accessible label for screen readers
+     */
+    ariaLabel: string;
+}
+export interface FooterLogoProps {
+    /**
+     * Logo image source URL
+     */
+    src: string;
+    /**
+     * Logo alt text
+     */
+    alt: string;
+    /**
+     * Optional link URL for logo
+     */
+    href?: string;
+}
+export interface FooterProps {
+    /**
+     * Layout variant - 'desktop' (logo top) or 'mobile' (logo bottom)
+     */
+    variant?: 'desktop' | 'mobile';
+    /**
+     * Logo configuration
+     */
+    logo: FooterLogoProps;
+    /**
+     * Brand motto/tagline
+     */
+    motto: string;
+    /**
+     * Atlas Copco badge configuration
+     */
+    atlasCopcoBadge?: {
+        text: string;
+        showIcon?: boolean;
+    };
+    /**
+     * Quick links section
+     */
+    quickLinks: FooterLinkItem[];
+    /**
+     * Quick links section heading
+     */
+    quickLinksHeading?: string;
+    /**
+     * Contact links section
+     */
+    contactLinks: FooterLinkItem[];
+    /**
+     * Contact section heading
+     */
+    contactHeading?: string;
+    /**
+     * Social media links
+     */
+    socialLinks: SocialLinkItem[];
+    /**
+     * Contact form CTA button (mobile only)
+     */
+    contactFormButton?: {
+        label: string;
+        href: string;
+    };
+    /**
+     * Bottom navigation links
+     */
+    bottomLinks: FooterLinkItem[];
+    /**
+     * Copyright text
+     */
+    copyright: string;
+    /**
+     * Country selector configuration
+     */
+    countrySelector?: {
+        label: string;
+        href?: string;
+        showIcon?: boolean;
+    };
+    /**
+     * Additional CSS classes
+     */
+    className?: string;
+}
+export interface FooterLinkProps {
+    /**
+     * Link item data
+     */
+    item: FooterLinkItem;
+    /**
+     * Additional CSS classes
+     */
+    className?: string;
+    /**
+     * Variant style
+     */
+    variant?: 'default' | 'bottom';
+}
+export declare const FooterLink: React.FC<FooterLinkProps>;
+export interface FooterLinkGroupProps {
+    /**
+     * Section heading
+     */
+    heading: string;
+    /**
+     * Array of links
+     */
+    links: FooterLinkItem[];
+    /**
+     * Additional CSS classes
+     */
+    className?: string;
+    /**
+     * Children to render after links (e.g., social icons)
+     */
+    children?: React.ReactNode;
+}
+export declare const FooterLinkGroup: React.FC<FooterLinkGroupProps>;
+export interface FooterSocialIconsProps {
+    /**
+     * Array of social links
+     */
+    links: SocialLinkItem[];
+    /**
+     * Additional CSS classes
+     */
+    className?: string;
+}
+export declare const FooterSocialIcons: React.FC<FooterSocialIconsProps>;
+export interface FooterSocialIconProps {
+    /**
+     * Social media platform
+     */
+    platform: SocialLinkItem['platform'];
+    /**
+     * Additional CSS classes
+     */
+    className?: string;
+}
+export declare const FooterSocialIcon: React.FC<FooterSocialIconProps>;
+export interface FooterBottomProps {
+    /**
+     * Bottom navigation links
+     */
+    links: FooterLinkItem[];
+    /**
+     * Copyright text
+     */
+    copyright: string;
+    /**
+     * Country selector configuration
+     */
+    countrySelector?: {
+        label: string;
+        href?: string;
+        showIcon?: boolean;
+    };
+    /**
+     * Additional CSS classes
+     */
+    className?: string;
+}
+export declare const FooterBottom: React.FC<FooterBottomProps>;
+/**
+ * Footer component with brand identity, navigation links, social icons, and legal information.
+ * Supports two layout variants:
+ * - desktop: Logo at top, 3-column main content
+ * - mobile: Logo at bottom, stacked layout with CTA button
+ */
+export declare const Footer: React.FC<FooterProps>;

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

@@ -0,0 +1,28 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Footer } from './Footer';
+declare const meta: Meta<typeof Footer>;
+export default meta;
+type Story = StoryObj<typeof Footer>;
+/**
+ * Desktop footer layout with logo at top, 3-column main content area.
+ * - Left column: Motto + Atlas Copco badge
+ * - Middle column: Quick links (6 items including Leybold blog)
+ * - Right column: Contact links (3 items) + Social icons (24×24px)
+ *
+ * **Interactive demonstrations:**
+ * - Use the Pseudo States toolbar button (above canvas) to toggle hover/focus states
+ * - Click play button in Interactions panel to see focus state animations
+ */
+export declare const Desktop: Story;
+/**
+ * Mobile footer layout with logo at BOTTOM.
+ * Order from top to bottom:
+ * 1. Quick links (7 items, no Leybold blog, has Suppliers + Whistleblower)
+ * 2. Contact us (2 items)
+ * 3. Contact Form CTA button (red)
+ * 4. Social icons (55×55px)
+ * 5. Country selector (International / EN)
+ * 6. Bottom links + copyright
+ * 7. Logo + Motto + Atlas Copco badge (AT BOTTOM)
+ */
+export declare const Mobile: Story;

package/dist/src/experience/Footer/icons/AtlasCopcoIcon.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+interface AtlasCopcoIconProps {
+    className?: string;
+    size?: number;
+}
+/**
+ * Atlas Copco Group badge icon (square)
+ */
+export declare const AtlasCopcoIcon: React.FC<AtlasCopcoIconProps>;
+export {};

package/dist/src/experience/Footer/icons/ExternalLinkIcon.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+interface ExternalLinkIconProps {
+    className?: string;
+    size?: number;
+}
+/**
+ * External link icon (↗) for footer links that open in new tabs
+ */
+export declare const ExternalLinkIcon: React.FC<ExternalLinkIconProps>;
+export {};

package/dist/src/experience/Footer/icons/index.d.ts

@@ -0,0 +1,2 @@
+export { ExternalLinkIcon } from './ExternalLinkIcon';
+export { AtlasCopcoIcon } from './AtlasCopcoIcon';

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

@@ -0,0 +1,2 @@
+export { Footer, FooterLink, FooterLinkGroup, FooterSocialIcons, FooterSocialIcon, FooterBottom, } from './Footer';
+export type { FooterProps, FooterLinkItem, SocialLinkItem, FooterLogoProps, FooterLinkProps, FooterLinkGroupProps, FooterSocialIconsProps, FooterSocialIconProps, FooterBottomProps, } from './Footer';

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

@@ -0,0 +1,40 @@
+import React from 'react';
+import { GeneratedListProps } from './GeneratedList.types';
+/**
+ * GeneratedList component for displaying content in a responsive grid.
+ *
+ * **Variants:**
+ * - Cards: Content cards with image, title, description, and CTA button
+ * - Products: Product cards with image and title (entire card clickable)
+ * - External Links: White cards with image, title, description, and external link button
+ * - List: Marketing section with heading and two columns of clickable links
+ *
+ * **Card Layout:**
+ * - Mobile (<768px): Single column overlay cards, stacked tight (no gap)
+ * - Tablet (768px-1023px): 2 columns horizontal standard cards
+ * - Desktop (≥1024px): 3 or 4 columns horizontal based on `columns` prop
+ *
+ * **Product Layout:**
+ * - Mobile (<768px): 2 columns horizontal white cards, 20px gap
+ * - Tablet (768px-1023px): 2 columns adaptive
+ * - Desktop (≥1024px): 3 or 4 columns horizontal based on `columns` prop
+ *
+ * **External Link Layout:**
+ * - Mobile (<1024px): Single column vertical white cards, 20px gap
+ * - Desktop (≥1024px): 3 columns horizontal (fixed 423px width), 20px gap
+ *
+ * **List Layout:**
+ * - Mobile (<1024px): 2 sections stacked vertically, 12px gap
+ * - Desktop (≥1024px): 2 columns side-by-side (311px each), 32px gap
+ *
+ * @example
+ * ```tsx
+ * <GeneratedList
+ *   variant="card"
+ *   items={cardData}
+ *   columns={3}
+ *   title="Latest Insights"
+ * />
+ * ```
+ */
+export declare const GeneratedList: React.FC<GeneratedListProps>;

package/dist/src/experience/GeneratedList/GeneratedList.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/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

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

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

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

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

@@ -0,0 +1,3 @@
+import AlgoliaDynamicSearchLeybold from "./AlgoliaDynamicSearch";
+export { AlgoliaDynamicSearchLeybold };
+export default AlgoliaDynamicSearchLeybold;