@asantemedia-org/leybold-design-system 1.0.10 → 1.0.12

package/dist/src/app/layout.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import './globals.css';
 export declare const metadata: {
     title: string;

package/dist/src/app/page.d.ts

@@ -1 +1,2 @@
+/// <reference types="react" />
 export default function Home(): JSX.Element;

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

@@ -0,0 +1,15 @@
+import React from 'react';
+export interface AIBannerProps {
+    /**
+     * Banner message text
+     */
+    text?: string;
+    /**
+     * Additional CSS classes
+     */
+    className?: string;
+}
+/**
+ * AI translation notification banner
+ */
+export declare const AIBanner: React.FC<AIBannerProps>;

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

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

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

@@ -0,0 +1,2 @@
+export { AIBanner } from './AIBanner';
+export type { AIBannerProps } from './AIBanner';

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

@@ -1,13 +1,25 @@
 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";
+/**
+ * Icon types for button
+ */
+export type ButtonIcon = "arrow-right" | "external" | "chevron-left" | "chevron-right" | "none";
+/**
+ * Icon position
+ */
+export type IconPosition = "left" | "right";
 export interface ButtonProps {
     /**
-     * Button content
+     * Button content (text label)
      */
-    children: React.ReactNode;
+    children?: React.ReactNode;
     /**
-     * Button variant
+     * Button variant - determines visual style
      */
-    variant?: "primary" | "secondary" | "outline" | "text";
+    variant?: ButtonVariant;
     /**
      * Button size
      */
@@ -21,13 +33,46 @@ export interface ButtonProps {
      */
     onClick?: (e?: React.MouseEvent<HTMLButtonElement>) => void;
     /**
-     * Button type
+     * Button type attribute
      */
     type?: "button" | "submit" | "reset";
     /**
      * Additional CSS classes
      */
     className?: string;
+    /**
+     * Icon to display
+     */
+    icon?: ButtonIcon;
+    /**
+     * Icon position (left or right of text)
+     */
+    iconPosition?: IconPosition;
+    /**
+     * Accessible label for icon-only buttons
+     */
+    ariaLabel?: string;
+    /**
+     * Opens link in new tab (for external links)
+     */
+    opensInNewTab?: boolean;
+    /**
+     * Inline styles
+     */
+    style?: React.CSSProperties;
+    /**
+     * Force a specific state for documentation purposes
+     * @internal
+     */
+    'data-force-state'?: 'hover' | 'focus';
+    /**
+     * Data attribute for page target
+     */
+    'data-page_target'?: string | number;
+    /**
+     * Tab index for focus order
+     */
+    tabIndex?: number;
 }
 /**
  * Primary UI component for user interaction

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

@@ -3,14 +3,27 @@ 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 Secondary: 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;
+export declare const OutlinedBlack: Story;
+export declare const OutlinedGrey: Story;
+export declare const OutlinedWhite: Story;
+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;
 export declare const Medium: Story;
 export declare const Large: Story;
-export declare const Disabled: Story;
-export declare const AllVariants: Story;
 export declare const AllSizes: Story;
+export declare const AllVariants: Story;
+export declare const Disabled: Story;

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

@@ -0,0 +1,7 @@
+import React from 'react';
+import { LanguageSelectorProps } from './LanguageSelector.types';
+/**
+ * Language Selector component
+ * Responsive layout: Desktop shows two-column grid, Mobile shows dropdown + links
+ */
+export declare const LanguageSelector: React.FC<LanguageSelectorProps>;

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

@@ -0,0 +1,32 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { LanguageSelector } from './LanguageSelector';
+declare const meta: Meta<typeof LanguageSelector>;
+export default meta;
+type Story = StoryObj<typeof LanguageSelector>;
+/**
+ * Desktop layout with two-column location grid and "Go to the international sites" heading.
+ * Shown overlaid on the Leybold website hero for realistic context.
+ * Features proper single-selection behaviour for locations and languages.
+ */
+export declare const Desktop: Story;
+/**
+ * Mobile layout with location dropdown and "Language" heading.
+ * Best viewed in mobile viewport (<992px).
+ * Features proper single-selection behaviour for locations and languages.
+ */
+export declare const Mobile: Story;
+/**
+ * Location dropdown component showing closed and open states.
+ * Used on mobile view for location selection.
+ */
+export declare const LocationDropdownStory: Story;
+/**
+ * Location selector link showing all four states:
+ * Default, Hover, Focus, and Selected (black bold text with red checkmark).
+ */
+export declare const LocationSelectorLinkStory: Story;
+/**
+ * Language selector link showing all four states:
+ * Default, Hover, Focus, and Selected (red background with white text and checkmark).
+ */
+export declare const LanguageSelectorLinkStory: Story;

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

@@ -0,0 +1,64 @@
+/**
+ * Location item for the language selector
+ */
+export interface Location {
+    /** Display name of the location */
+    name: string;
+    /** URL to navigate to when selected */
+    href: string;
+    /** Whether this location is currently selected */
+    isSelected?: boolean;
+}
+/**
+ * Language item for the language selector
+ */
+export interface Language {
+    /** Display name of the language */
+    name: string;
+    /** Optional language/region code (e.g., 'ES', 'MX', 'FR') */
+    code?: string;
+    /** URL to navigate to when selected */
+    href: string;
+    /** Whether this language is currently selected */
+    isSelected?: boolean;
+}
+/**
+ * Props for the LocationDropdown sub-component (mobile)
+ */
+export interface LocationDropdownProps {
+    /** Array of available locations */
+    locations: Location[];
+    /** Currently selected location name */
+    selectedLocation?: string;
+    /** Whether the dropdown is open */
+    isOpen: boolean;
+    /** Toggle dropdown open/closed */
+    onToggle: () => void;
+    /** Handler when a location is selected */
+    onSelect: (location: Location) => void;
+    /** Additional CSS class */
+    className?: string;
+}
+/**
+ * Props for the main LanguageSelector component
+ */
+export interface LanguageSelectorProps {
+    /** Array of available locations */
+    locations: Location[];
+    /** Array of available languages */
+    languages: Language[];
+    /** Heading text for the location section */
+    locationHeading?: string;
+    /** Heading text for the language section (desktop) */
+    languageHeadingDesktop?: string;
+    /** Heading text for the language section (mobile) */
+    languageHeadingMobile?: string;
+    /** Handler when a location is selected */
+    onLocationSelect?: (location: Location) => void;
+    /** Handler when a language is selected */
+    onLanguageSelect?: (language: Language) => void;
+    /** Handler when close button is clicked */
+    onClose?: () => void;
+    /** Additional CSS class */
+    className?: string;
+}

package/dist/src/components/LanguageSelector/LanguageSelectorLink.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+export interface LanguageSelectorLinkProps {
+    /** Display label for the link */
+    label: string;
+    /** Optional secondary label (e.g., language code) */
+    secondaryLabel?: string;
+    /** URL to navigate to */
+    href: string;
+    /** Whether the link is currently selected */
+    isSelected?: boolean;
+    /** Click handler */
+    onClick?: (event: React.MouseEvent<HTMLAnchorElement>) => void;
+    /** Additional CSS class */
+    className?: string;
+}
+/**
+ * Language selector link component
+ * Selected state: Red background with white text and white checkmark
+ */
+export declare const LanguageSelectorLink: React.FC<LanguageSelectorLinkProps>;

package/dist/src/components/LanguageSelector/LocationDropdown.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { LocationDropdownProps } from './LanguageSelector.types';
+/**
+ * Dropdown component for selecting locations (mobile view)
+ */
+export declare const LocationDropdown: React.FC<LocationDropdownProps>;

package/dist/src/components/LanguageSelector/LocationSelectorLink.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+export interface LocationSelectorLinkProps {
+    /** Display label for the link */
+    label: string;
+    /** URL to navigate to */
+    href: string;
+    /** Whether the link is currently selected */
+    isSelected?: boolean;
+    /** Click handler */
+    onClick?: (event: React.MouseEvent<HTMLAnchorElement>) => void;
+    /** Keyboard handler */
+    onKeyDown?: (event: React.KeyboardEvent<HTMLAnchorElement>) => void;
+    /** Additional CSS class */
+    className?: string;
+}
+/**
+ * Location selector link component
+ * Selected state: Black bold text with red checkmark (no background)
+ */
+export declare const LocationSelectorLink: React.FC<LocationSelectorLinkProps>;

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

@@ -0,0 +1,7 @@
+export { LanguageSelector } from './LanguageSelector';
+export { LocationSelectorLink } from './LocationSelectorLink';
+export type { LocationSelectorLinkProps } from './LocationSelectorLink';
+export { LanguageSelectorLink } from './LanguageSelectorLink';
+export type { LanguageSelectorLinkProps } from './LanguageSelectorLink';
+export { LocationDropdown } from './LocationDropdown';
+export type { Location, Language, LanguageSelectorProps, LocationDropdownProps, } from './LanguageSelector.types';

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

@@ -0,0 +1,36 @@
+import React from 'react';
+export interface CarouselCardData {
+    /** Card image URL */
+    imageUrl: string;
+    /** Card image alt text */
+    imageAlt: string;
+    /** Card title */
+    title: string;
+    /** Card link text (e.g., "LEARN MORE") */
+    linkText: string;
+    /** Card link URL */
+    linkUrl: string;
+}
+export interface CarouselProps {
+    /** Section title (displayed in italic bold) */
+    title: string;
+    /** Section subtitle/description */
+    subtitle?: string;
+    /** CTA button text */
+    buttonText?: string;
+    /** CTA button URL */
+    buttonUrl?: string;
+    /** Array of carousel cards */
+    cards: CarouselCardData[];
+    /** Show pagination dots (desktop only) */
+    showDots?: boolean;
+    /** Show navigation arrows */
+    showArrows?: boolean;
+    /** Additional CSS class */
+    className?: string;
+}
+/**
+ * Carousel component for displaying multiple content cards in a sliding format.
+ * Supports responsive layouts with 3 cards on desktop and 1 card on mobile.
+ */
+export declare const Carousel: React.FC<CarouselProps>;

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

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

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

@@ -0,0 +1,2 @@
+export { Carousel } from './Carousel';
+export type { CarouselProps, CarouselCardData } from './Carousel';

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;