@dnb/eufemia
Version:
DNB Eufemia Design System UI Library
81 lines (80 loc) • 3.12 kB
TypeScript
/**
* 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;