@stihl-design-system/components
Version:
Welcome to the STIHL Design System react component library.
68 lines (67 loc) • 2.67 kB
TypeScript
import { JSX } from 'react';
import { BrandAddOnProps, BrandAreaLogoProps } from '../TopBar/TopBar';
import { HeaderVariant, SlotProps } from './Header.utils';
export interface HeaderProps extends React.HTMLAttributes<HTMLDivElement> {
/** Brand add-on props:
*
* `children`: Content of the brand add-on.
*
* `subTitle`: Sub title displayed below the `children` to create a two line brand add-on.
*
* `variant`: Predefined variant of the brand add-on.
*/
brandAddOnProps?: BrandAddOnProps;
/** Content of the Header. */
children?: React.ReactNode;
/** Makes the DSHeader sticky on scroll.
* @default false
*/
isHeaderSticky?: boolean;
/** Logo props:
*
* `aria`: Accessibility attributes for screen readers.
* Ensure to provide a descriptive label via `aria-label`.
*
* `href`: Defines the URL to link to. If you provide a URL, the component will be rendered as a link.
* Defaults to `'/'`.
*
* `logo`: Defines which logo to display (e.g., main or sub-brand).
* Defaults to `'main'`.
*
* `target`: Specifies the target of the link.
* Defaults to `'_self'`.
* */
logoProps?: BrandAreaLogoProps;
/** Sets the visual style variant of the DSHeader.
* @default 'main'
*/
variant?: HeaderVariant;
}
export declare const DSHeaderContext: import('react').Context<{
variant: HeaderVariant;
bannerAreaRef?: React.RefObject<HTMLDivElement | null>;
brandAddOnProps?: BrandAddOnProps;
hasBrandAddOn?: boolean;
setHasBrandAddOn?: React.Dispatch<React.SetStateAction<boolean>>;
isFixedMainNavigation?: boolean;
isHeaderSticky?: boolean;
isMobile?: boolean;
isStickyMainNavigationVisible?: boolean;
mainNavigationAreaRef?: React.RefObject<HTMLDivElement | null>;
topBarAreaRef?: React.RefObject<HTMLDivElement | null>;
logoProps?: BrandAreaLogoProps;
}>;
/**
* The `<DSHeader />` component renders a semantic `<header>` element that
* serves as the top-level container for your page’s header region.
* It manages the DSTopBar element and renders any children passed to it.
*
* Design in Figma: [Header](https://www.figma.com/design/Ie2r0R9QwjEc7O3nrFbXhV/Web-Pattern-Library?node-id=5381-2186&t=7P7x6ASRWyOtQQJG-4)
*/
export declare const DSHeader: {
({ children, brandAddOnProps, className, isHeaderSticky, variant, logoProps, ...rest }: HeaderProps): JSX.Element;
/** attach static members */
BannerArea: import('react').FC<SlotProps>;
MainNavigationArea: import('react').FC<SlotProps>;
displayName: string;
};