@stihl-design-system/components
Version:
Welcome to the STIHL Design System react component library.
83 lines (82 loc) • 3.82 kB
TypeScript
import { AnchorHTMLAttributes, HTMLAttributes, MouseEventHandler, default as React } from 'react';
import { SelectedAriaAttributes } from '../../types';
import { ActionCardAriaAttributes } from './ActionCard.utils';
export interface ActionCardProps extends HTMLAttributes<HTMLElement> {
/** ARIA attributes to ensure accessibility. 'aria-labelledby' OR 'aria-label' is required.
*
* `{'aria-label'? string;`
* `'aria-labelledby'?: string;}`
* */
aria: SelectedAriaAttributes<ActionCardAriaAttributes>;
/** Child areas to render within the card. */
children: React.ReactNode;
/** Additional class name to apply to the content wrapper element. */
classNameContentWrapper?: string;
/**
* 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';
}
/** Props for any "slot" component */
export interface ActionCardSlotProps {
children: React.ReactNode;
className?: string;
}
/**
* Props for the PrimaryAction slot.
* Supports both links (href) and buttons (onClick), as well as custom link components
* (e.g., react-router Link) via the linkComponent prop.
*/
export interface PrimaryActionSlotProps extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'onClick' | 'children'> {
/**
* Accessible label for the primary action. This is visually hidden but read by screen readers.
* Should describe where the link/button navigates to or what action it performs.
*/
children: React.ReactNode;
/** Additional class name for styling. */
className?: string;
/** URL for the primary action when used as a link. */
href?: string;
/**
* Custom link component (e.g., react-router Link, Next.js Link).
* When provided, `href` is ignored and the linkComponent handles navigation.
*/
linkComponent?: React.ReactElement<React.AnchorHTMLAttributes<HTMLAnchorElement> & React.RefAttributes<HTMLAnchorElement> & {
onClick?: () => void;
to?: string;
}>;
/** Click handler when used as a button. If provided without href, renders as a button. */
onClick?: MouseEventHandler<HTMLButtonElement>;
}
/** Compound type for ActionCard with its static slots */
interface ActionCardComponent extends React.FC<ActionCardProps> {
Header: React.FC<ActionCardSlotProps>;
Footer: React.FC<ActionCardSlotProps>;
Media: React.FC<ActionCardSlotProps>;
PrimaryAction: React.FC<PrimaryActionSlotProps>;
Supplementary: React.FC<ActionCardSlotProps>;
}
/**
* A flexible card component that can display various types of content and media. It renders a semantic `<article>` element as non-clickable container that groups interactive and non-interactive elements.
*
* - Slot-based structure: configurable slots (media, header, footer, supplementary, and primary action) that can be customized.
* - Optional card-level interaction: use the `PrimaryAction` slot to make the entire card clickable while keeping other interactive elements (buttons, checkboxes) accessible.
* - Internal interactions only: interactive elements (e.g. CTAs) inside the card are clickable and focusable, even when PrimaryAction is used.
*
* Design in Figma: [Action Card](https://www.figma.com/design/qXldpLO6gxHJNLdcXIPxYt/Core-Components-%F0%9F%92%A0?node-id=47366-6210)
*/
export declare const DSActionCard: ActionCardComponent;
export {};