@stihl-design-system/components
Version:
Welcome to the STIHL Design System react component library.
55 lines (54 loc) • 1.92 kB
TypeScript
import { default as React } from 'react';
import { SelectedAriaAttributes } from '../../types';
import { OptionalSlotProps, SlotProps } from '../Header/Header.utils';
import { Logo, LogoAriaAttribute, LogoTarget } from '../Logo/Logo.utils';
import { BrandAddOnVariant } from './TopBar.utils';
/** Props for the root <Header.TopBar> */
interface TopBarProps extends React.HTMLAttributes<HTMLDivElement> {
children: React.ReactNode;
rootClassName?: string;
}
export interface BrandAreaLogoProps {
/**
* `aria`: Accessibility attributes for screen readers.
* Ensure to provide a descriptive label via `aria-label`.
* `{'aria-label'? string;}`
*/
aria: SelectedAriaAttributes<LogoAriaAttribute>;
/** Defines the URL to link to. If you provide a URL, the component will be rendered as a link.
* * @default '/'
*/
href: string;
/**
* Controls main and sub-brand logo display.
* @default 'main'
*/
logo?: Logo;
/** The target of the link.
* @default '_self'
*/
target?: LogoTarget;
}
export interface BrandAddOnProps extends React.HTMLAttributes<HTMLSpanElement> {
/** Content of the brand add-on. */
children?: React.ReactNode;
/** Sub title displayed below the `children` to create a two line brand add-on. */
subTitle?: string;
/** Predefined variant of the brand add-on.
* @default 'single'
*/
variant?: BrandAddOnVariant;
}
/** Compound type for TopBar with its static slots */
interface TopBarComponent extends React.FC<TopBarProps> {
BrandArea: React.FC<OptionalSlotProps>;
PrimaryArea: React.FC<SlotProps>;
SecondaryArea: React.FC<SlotProps>;
}
/**
* The `<DSTopBar />`.
*
* Design in Figma: [Top Bar](https://www.figma.com/design/Ie2r0R9QwjEc7O3nrFbXhV/Web-Pattern-Library?node-id=5381-2186&t=7P7x6ASRWyOtQQJG-4)
*/
export declare const DSTopBar: TopBarComponent;
export {};