@primer/react-brand/lib/Section/Section.d.ts

Primer Brand is a GitHub's design system for creating React-based marketing websites and digital experiences.

import React, { PropsWithChildren } from 'react';
import type { BaseProps } from '../component-helpers';
import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/section/section.css';
export declare const SectionPaddingVariants: readonly ["none", "condensed", "normal", "spacious"];
export declare const SectionBackgroundColors: readonly ["default", "subtle"];
type ResponsiveMap<T> = {
    narrow?: T;
    regular?: T;
    wide?: T;
};
type BackgroundColors = (typeof SectionBackgroundColors)[number] | AnyString;
type PaddingVariants = (typeof SectionPaddingVariants)[number];
type ResponsiveBackgroundColorMap = ResponsiveMap<BackgroundColors>;
type ResponsiveBackgroundImagePositionMap = ResponsiveMap<string | string[]>;
type ResponsiveBackgroundImageSizeMap = ResponsiveMap<string | string[]>;
type ResponsiveBackgroundImageSrcMap = ResponsiveMap<string | string[]>;
type ResponsivePaddingVariantsMap = ResponsiveMap<PaddingVariants>;
type SectionProps = {
    /**
     * The HTML element used to render the section.
     */
    as?: 'section' | 'div';
    /**
     * The padding applied to the start of the section.
     */
    paddingBlockStart?: PaddingVariants | ResponsivePaddingVariantsMap;
    /**
     * The padding applied to the end of the section.
     */
    paddingBlockEnd?: PaddingVariants | ResponsivePaddingVariantsMap;
    /**
     * The system-level or custom background color of the section.
     */
    backgroundColor?: BackgroundColors | ResponsiveBackgroundColorMap;
    /**
     * The background image of the section.
     */
    backgroundImageSrc?: string | string[] | ResponsiveBackgroundImageSrcMap;
    /**
     * The position of the background image.
     */
    backgroundImagePosition?: string | string[] | ResponsiveBackgroundImagePositionMap;
    /**
     * The size of the background image.
     */
    backgroundImageSize?: string | string[] | ResponsiveBackgroundImageSizeMap;
    /**
     * Makes the content of the section span the full width of its parent container.
     */
    fullWidth?: boolean;
    /**
     * Adds rounded corners to the top of the section.
     */
    rounded?: boolean;
    /**
     * Forward inline styles
     */
    style?: React.CSSProperties;
    /**
     * Optional attirbute for testing
     */
    ['data-testid']?: string;
} & PropsWithChildren<BaseProps<HTMLDivElement>>;
export declare const Section: React.ForwardRefExoticComponent<Omit<React.PropsWithChildren<SectionProps>, "ref"> & React.RefAttributes<HTMLDivElement>>;
export {};