@payfit/unity-components
Version:
40 lines (39 loc) • 2.32 kB
TypeScript
import { TextProps } from '../../text/Text.js';
export type NavigationCardDescriptionProps = Omit<TextProps, 'variant' | 'color' | 'className' | 'style'>;
/**
* Displays supplementary descriptive text for a NavigationCard component.
* Use this component to provide additional context or details about the navigation card's destination, helping users understand what they'll find when they navigate.
* The description automatically connects to the parent NavigationCard for proper accessibility semantics.
* @param {NavigationCardDescriptionProps} props - Standard text element props (excluding variant, color, className, and style which are preset)
* @example
* ```tsx
* import {
* RawNavigationCard,
* NavigationCardLabel,
* NavigationCardDescription
* } from '@payfit/unity-components'
*
* function Example() {
* return (
* <RawNavigationCard href="/reports">
* <NavigationCardLabel>Monthly Reports</NavigationCardLabel>
* <NavigationCardDescription>
* Access and download your company's monthly reports
* </NavigationCardDescription>
* </RawNavigationCard>
* )
* }
* ```
* @remarks
* - Must be used within a `NavigationCard` component to function correctly
* - The description text is styled with the "body" typography variant and lower emphasis color
* - Automatically receives proper accessibility IDs from the parent NavigationCard
* - Supports all standard HTML text element props except styling props which are managed by the component
* @see {@link NavigationCardDescriptionProps} for all available props
* @see Source code in {@link https://github.com/PayFit/hr-apps/tree/master/libs/shared/unity/components/src/components/navigation-card/parts GitHub}
* @see Design specs {@link https://www.figma.com/design/poaMyU7abAgL9VRhx4ygyy/Unity-DS-%3E-Components-Library?node-id=14505-64292 Figma}
* @see Design docs in {@link https://www.payfit.design/ Payfit.design}
* @see Developer docs in {@link https://unity-components.payfit.io/?path=/docs/navigation-navigationcard-navigationcarddescription--docs unity-components.payfit.io}
*/
declare const NavigationCardDescription: import('react').ForwardRefExoticComponent<NavigationCardDescriptionProps & import('react').RefAttributes<HTMLDivElement>>;
export { NavigationCardDescription };