@dnb/eufemia/components/section/Section.d.ts

DNB Eufemia Design System UI Library

/**
 * Web Section Component
 *
 */
import React from 'react';
import type { DynamicElement, InnerSpaceType, ResponsiveProp, SpacingProps } from '../../shared/types';
import { type ThemeSurface } from '../../shared/Theme';
export type SectionVariants = 'error' | 'information' | 'warning' | 'success' | 'divider';
export type SectionTextColor = string;
export type SectionOutlineColor = string | boolean;
export type SectionBackgroundColor = string;
export type SectionDropShadow = boolean;
export type SectionRoundedCorner = boolean | [boolean, boolean, boolean, boolean];
export type SectionProps = {
    /**
     * Defines the semantic purpose and subsequently the style of the visual helper.
     */
    variant?: SectionVariants | string;
    /**
     * Define if the background color should break-out to a fullscreen view. Defaults to `true`.
     */
    breakout?: boolean | ResponsiveProp<boolean>;
    /**
     * Define if the Section should break out negatively on larger screens. You cannot use `breakout` and `outset` together.
     * Defaults to `false`
     */
    outset?: boolean | ResponsiveProp<boolean>;
    /**
     * Define if the section should have rounded corners. Defaults to `false`.
     */
    roundedCorner?: SectionRoundedCorner | ResponsiveProp<SectionRoundedCorner>;
    /**
     * Define a custom border color. Use a Eufemia color.
     */
    outline?: SectionOutlineColor | ResponsiveProp<SectionOutlineColor>;
    /**
     * Define a custom border width. Defaults to `var(--card-outline-width)`.
     */
    outlineWidth?: number | string | ResponsiveProp<number | string>;
    /**
     * Define a custom text color to compliment the backgroundColor. Use a Eufemia color.
     */
    textColor?: SectionTextColor | ResponsiveProp<SectionTextColor>;
    /**
     * Define a custom background color, instead of a variant. Use a Eufemia color.
     */
    backgroundColor?: SectionBackgroundColor | ResponsiveProp<SectionBackgroundColor>;
    /**
     * Define a custom drop-shadow.
     */
    dropShadow?: SectionDropShadow | ResponsiveProp<SectionDropShadow>;
    /**
     * Define the surface color context. When set to `dark`, ondark design tokens will be used for text and outline colors.
     */
    surface?: ThemeSurface;
    /**
     * Define what HTML element should be used. Defaults to `<section>`.
     */
    element?: DynamicElement;
    /**
     * Define a React.Ref.
     */
    ref?: React.RefObject<HTMLElement>;
};
type SectionSpacingProps = Omit<SpacingProps, 'innerSpace'> & {
    innerSpace?: InnerSpaceType;
};
export type SectionAllProps = SectionProps & SectionSpacingProps & Omit<React.HTMLProps<HTMLElement>, 'ref'>;
type SectionReturnParams = Record<string, unknown> & {
    className: string;
    ref: React.RefObject<HTMLElement>;
    children: React.ReactNode;
    style: React.CSSProperties;
};
declare function Section(props: SectionAllProps): import("react/jsx-runtime").JSX.Element;
declare namespace Section {
    var _name: string;
}
export default Section;
export declare function SectionParams(localProps: SectionAllProps): SectionReturnParams;