@stihl-design-system/components
Version:
Welcome to the STIHL Design System react component library.
97 lines (96 loc) • 4.95 kB
TypeScript
import { AnchorHTMLAttributes, JSX } from 'react';
import { LinkButtonProps } from '../LinkButton/LinkButton';
import { CardHeading } from './LinkCard.utils';
type DecorativeLinkButtonProps = Pick<LinkButtonProps, 'iconPosition' | 'iconName' | 'size' | 'hideLabel'> & {
label?: string;
variant?: Extract<LinkButtonProps['variant'], 'filled' | 'ghost'>;
};
type CardClassNames = {
brandFlag?: string;
contentWrapper?: string;
descriptionWrapper?: string;
decorativeLink?: string;
flagsWrapper?: string;
footerWrapper?: string;
headerWrapper?: string;
heading?: string;
imageWrapper?: string;
metaDataWrapper?: 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'`
*
* @prop {string | { headingText: string; headingSize?: HeadingSize; headingTag?: HeadingTag; }} heading
*/
heading: CardHeading;
/** Orange brand flag text displayed on the image. */
brandFlag?: string;
/**
* 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.
* - `imageWrapper?: string` className for the image wrapper element.
* - `metaDataWrapper?: string` className for the meta data 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.
*/
flags?: string[];
/** Defines the URL to link to. */
href?: string;
/** Image element to be displayed within the card. */
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';
}
/**
* 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=26075-11591&p=f&t=WDN78eWtKR9F8yYp-11)
*/
export declare const DSLinkCard: {
({ heading, brandFlag, className, cardClassNames, decorativeLinkButtonProps, description, flagListAriaLabel, flags, href, img, linkComponent, metaData, orientation, ...rest }: LinkCardProps): JSX.Element;
displayName: string;
};
export {};