@stihl-design-system/components

import { AnchorHTMLAttributes, JSX } from 'react'; import { IconName } from '../../types'; import { FlagProps } from '../Flag/Flag'; import { HeadingSize, HeadingTag } from '../Heading/Heading.utils'; import { LinkButtonProps } from '../LinkButton/LinkButton'; type DecorativeLinkButtonProps = Pick<LinkButtonProps, 'iconPosition' | 'iconName' | 'size' | 'hideLabel'> & { label?: string; variant?: Extract<LinkButtonProps['variant'], 'filled' | 'ghost'>; }; type CardHeading = string | { headingText: string; headingSize?: HeadingSize; headingTag?: HeadingTag; headingIconName?: IconName; }; type CardClassNames = { brandFlag?: string; contentWrapper?: string; descriptionWrapper?: string; decorativeLink?: string; flagsWrapper?: string; footerWrapper?: string; headerWrapper?: string; heading?: string; /** Class name for the media wrapper element. */ mediaWrapper?: string; /** @deprecated Use `mediaWrapper` instead. Will be removed with stable release. */ imageWrapper?: string; metaDataWrapper?: string; graphicAreaWrapper?: string; }; export interface LinkCardProps extends AnchorHTMLAttributes<HTMLAnchorElement | HTMLDivElement> { /** * The `heading` prop can either be a simple `string` or an object with specific properties. * When provided as a string, it represents the default medium h3 heading directly. * When provided as an object, it allows for more detailed configuration, including: * - `headingText: string` The text content for the heading. * - `headingSize?: 'x-large' | 'x-large-uppercase' | 'large' | 'large-uppercase' | 'medium' | 'medium-uppercase' | 'small' | 'small-uppercase'` Defines the size of the heading, using predefined size types, defaults to `'medium'` * - `headingTag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'` Specifies the HTML tag to be used for the heading, such as 'h1', 'h2', etc., defaults to `'h3'` * - `headingIconName?: IconName` Optional icon shown next to the heading text. * * @prop {string | { headingText: string; headingSize?: HeadingSize; headingTag?: HeadingTag; headingIconName?: IconName; }} heading */ heading: CardHeading; /** * Brand flag displayed on the image. * * Can be either a simple `string` (uses default `promo-highlight` color) or `FlagProps` for full customization. */ brandFlag?: string | FlagProps; /** * ClassNames for various parts of the LinkCard can be provided via the `cardClassNames` prop. * - `brandFlag?: string` className for the brand flag element. * - `contentWrapper?: string` className for the content wrapper element. * - `descriptionWrapper?: string` className for the description wrapper element. * - `decorativeLink?: string` className for the decorative link button element. * - `flagsWrapper?: string` className for the flags wrapper element. * - `footerWrapper?: string` className for the footer wrapper element. * - `headerWrapper?: string` className for the header wrapper element. * - `heading?: string` className for the heading element. * - `mediaWrapper?: string` className for the media wrapper element. * - `metaDataWrapper?: string` className for the meta data wrapper element. * - `graphicAreaWrapper?: string` className for the graphic area wrapper element. */ cardClassNames?: CardClassNames; /** * Props for the decorative link button optionally displayed at the bottom of the card. * * - `label?: string` The text label for the decorative link button. * - `variant?: 'filled' | 'ghost'` The variant style for the decorative link button, defaults to `'filled'`. * - `iconPosition?: 'left' | 'right'` The position of the icon in the decorative link button. * - `iconName?: IconName` The name of the icon to be used in the decorative link button. * - `size?: 'small' | 'medium'` The size of the decorative link button. * - `hideLabel?: boolean` Whether to hide the label of the decorative link button. */ decorativeLinkButtonProps?: DecorativeLinkButtonProps; /** Short descriptive text displayed beneath the headline. */ description?: React.ReactNode; /** * ARIA label for the list of flags for screen readers. Needed if flags are provided. */ flagListAriaLabel?: string; /** * Array of DSFlag components to be displayed on the card. * * Each flag can be either a simple `string` (uses default `status-info` color) or `FlagProps` for full customization. */ flags?: (string | FlagProps)[]; /** * Graphic element to be displayed above the heading. */ graphicArea?: React.ReactNode; /** Defines the URL to link to. */ href?: string; /** * Media element (image, video, etc.) to be displayed within the card. */ mediaArea?: React.ReactNode; /** * @deprecated Use `mediaArea` instead. Will be removed with stable release. */ img?: React.ReactNode; /** Link component to be used for the navigation. */ linkComponent?: React.ReactElement<React.AnchorHTMLAttributes<HTMLAnchorElement> & React.RefAttributes<HTMLAnchorElement> & { onClick?: () => void; to?: string; }>; /** Meta data content displayed beneath the description. */ metaData?: React.ReactNode; /** * Sets the orientation of the card. * @default 'vertical' */ orientation?: 'vertical' | 'horizontal'; /** * Sets the padding for the content inside the card. * @default 'medium' */ padding?: 'small' | 'medium'; /** * Sets the visual style of the card. * - `'outlined'`: Subtle border, ideal for grids and dense layouts. * - `'elevated'`: Drop shadow for visual emphasis or background separation. * @default 'outlined' */ variant?: 'outlined' | 'elevated'; } /** * A simple, accessible Card component that can be used as a link to navigate to other pages. * The entire card is clickable and follows accessibility best practices. * * Design in Figma: [Link Card](https://www.figma.com/design/qXldpLO6gxHJNLdcXIPxYt/Core-Components-%F0%9F%92%A0?node-id=43951-17695) */ export declare const DSLinkCard: { ({ heading, brandFlag, className, cardClassNames, decorativeLinkButtonProps, description, flagListAriaLabel, flags, href, mediaArea, img, linkComponent, metaData, orientation, padding, graphicArea, variant, ...rest }: LinkCardProps): JSX.Element; displayName: string; }; export {};