UNPKG

@navikt/ds-react

Version:

React components from the Norwegian Labour and Welfare Administration.

79 lines (78 loc) 2.76 kB
import React from "react"; import { OverridableComponent } from "../util/types"; import { ExpansionCardContentProps } from "./ExpansionCardContent"; import { ExpansionCardDescriptionProps } from "./ExpansionCardDescription"; import { ExpansionCardHeaderProps } from "./ExpansionCardHeader"; import { ExpansionCardTitleProps } from "./ExpansionCardTitle"; interface ExpansionCardComponent extends React.ForwardRefExoticComponent<ExpansionCardProps & React.RefAttributes<HTMLDivElement>> { /** * @see 🏷️ {@link ExpansionCardHeaderProps} */ Header: React.ForwardRefExoticComponent<ExpansionCardHeaderProps & React.RefAttributes<HTMLDivElement>>; /** * @see 🏷️ {@link ExpansionCardTitleProps} * @see [🤖 OverridableComponent](https://aksel.nav.no/grunnleggende/kode/overridablecomponent) support */ Title: OverridableComponent<ExpansionCardTitleProps, HTMLHeadingElement>; /** * @see 🏷️ {@link ExpansionCardDescriptionProps} */ Description: React.ForwardRefExoticComponent<ExpansionCardDescriptionProps & React.RefAttributes<HTMLParagraphElement>>; /** * @see 🏷️ {@link ExpansionCardContentProps} */ Content: React.ForwardRefExoticComponent<ExpansionCardContentProps & React.RefAttributes<HTMLDivElement>>; } interface ExpansionCardCommonProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onToggle"> { children: React.ReactNode; /** * Callback for when Card is toggled open/closed */ onToggle?: (open: boolean) => void; /** * Controlled open-state * Using this removes automatic control of open-state */ open?: boolean; /** * Defaults to open if not controlled * @default false */ defaultOpen?: boolean; /** * @default "medium" */ size?: "medium" | "small"; } type ExpansionCardConditionalProps = { /** * Should be set if not using 'aria-labelledby' */ "aria-label": string; } | { /** * Should be set if not using 'aria-label' */ "aria-labelledby": string; }; export type ExpansionCardProps = ExpansionCardCommonProps & ExpansionCardConditionalProps; /** * A component that displays an expandable card. * * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/expansioncard) * @see 🏷️ {@link ExpansionCardProps} * * @example * ```jsx * <ExpansionCard aria-label="default-demo"> * <ExpansionCard.Header> * <ExpansionCard.Title>Utbetaling av sykepenger</ExpansionCard.Title> * </ExpansionCard.Header> * <ExpansionCard.Content> * <Innhold /> * </ExpansionCard.Content> * </ExpansionCard> * ``` */ export declare const ExpansionCard: ExpansionCardComponent; export default ExpansionCard;