@navikt/ds-react
Version:
React components from the Norwegian Labour and Welfare Administration.
79 lines (78 loc) • 2.76 kB
TypeScript
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;