@navikt/ds-react/cjs/expansion-card/ExpansionCard.d.ts

React components from the Norwegian Labour and Welfare Administration.

import React from "react";
import type { AkselColor } from "../types";
import type { OverridableComponent } from "../utils-external";
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 opened/closed.
     */
    onToggle?: (open: boolean) => void;
    /**
     * Controlled open-state.
     *
     * Using this removes automatic control of open-state.
     */
    open?: boolean;
    /**
     * The open state when initially rendered. Use when you do not need to control the open state.
     * @default false
     */
    defaultOpen?: boolean;
    /**
     * @default "medium"
     */
    size?: "medium" | "small";
    /**
     * Overrides inherited color.
     * @see 🏷️ {@link AkselColor}
     * @see [📝 Documentation](https://aksel.nav.no/grunnleggende/styling/farger-tokens)
     */
    "data-color"?: AkselColor;
}
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="Utbetaling av sykepenger">
 *   <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;