@hmlr/govuk-react-components-library/dist/index.d.ts

These are common component use for React applications based on GDS and govuk-frontend

import React$1, { HTMLAttributes, ElementType, ButtonHTMLAttributes, AnchorHTMLAttributes, TextareaHTMLAttributes, Component, ReactNode, SelectHTMLAttributes } from 'react';
import { AccordionConfig } from 'govuk-frontend/dist/govuk/components/accordion/accordion';
import { To } from 'react-router-dom';
import { ButtonConfig } from 'govuk-frontend/dist/govuk/components/button/button';
import { ErrorSummaryConfig } from 'govuk-frontend/dist/govuk/components/error-summary/error-summary';

interface AccordionItem {
    reactListKey?: string | number;
    expanded?: boolean;
    heading: {
        children: React.ReactNode;
    };
    summary?: {
        children: React.ReactNode;
    };
    content: {
        children: React.ReactNode;
    };
}
interface AccordionProps extends HTMLAttributes<HTMLDivElement> {
    className?: string;
    headingLevel?: ElementType;
    id?: string;
    items: AccordionItem[];
}

declare const Accordion: React$1.FC<AccordionProps>;

declare function ConfigureOverallAccordion($scope?: Document | Element, config?: AccordionConfig): void;
declare function ExtractAccordionConfigFromAttributes(remainingAttributes: {
    [key: string]: unknown;
}): AccordionConfig;

interface ActionLinkProps {
    children?: React.ReactNode;
    visuallyHiddenText?: string;
    className?: string;
    href?: string;
    to?: To;
    [key: string]: unknown;
}
interface Action {
    reactListKey?: string;
    [key: string]: unknown;
}

declare const ActionLink: React$1.FC<ActionLinkProps>;

interface BackLinkProps {
    to?: To;
    state?: object | null;
    children?: React.ReactNode;
    href?: string;
    className?: string;
    [key: string]: unknown;
}

declare const BackLink: React$1.FC<BackLinkProps>;

interface ErrorMessageProps extends HTMLAttributes<HTMLParagraphElement> {
    className?: string;
    children?: React.ReactNode;
    visuallyHiddenText?: string;
}

interface LegendProps {
    children: React.ReactNode;
    className?: string;
    isPageHeading?: boolean;
}
interface FieldsetProps extends React.FieldsetHTMLAttributes<HTMLFieldSetElement> {
    className?: string;
    legend?: LegendProps;
    children: React.ReactNode;
    "aria-describedby"?: string;
    [key: string]: unknown;
}

interface HintProps {
    className?: string;
    children?: React.ReactNode;
}

interface LabelProps {
    className?: string;
    htmlFor?: string;
    children?: React.ReactNode;
    isPageHeading?: boolean;
}

interface BooleanItem {
    id?: string;
    children?: React.ReactNode;
    hint?: HintProps;
    conditional?: {
        children: React.ReactNode;
    };
    behaviour?: string;
    label?: LabelProps;
    reactListKey?: string | number;
    divider?: string;
    name?: string;
    checked?: boolean;
    value?: string;
    defaultChecked?: boolean;
    [key: string]: unknown;
}
interface BooleanProps {
    className?: string;
    errorMessage?: ErrorMessageProps;
    fieldset?: FieldsetProps;
    formGroup?: {
        className?: string;
        [key: string]: unknown;
    };
    hint?: HintProps;
    idPrefix?: string;
    items?: BooleanItem[];
    controlType: "radios" | "checkboxes";
    name?: string;
    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
    onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
    "aria-describedby"?: string;
    [key: string]: unknown;
}

declare const Boolean: React$1.FC<BooleanProps>;

interface BreadcrumbItem {
    href?: string;
    to?: string;
    reactListKey?: string | number;
    children: React.ReactNode;
    [key: string]: unknown;
}
interface BreadcrumbsProps extends HTMLAttributes<HTMLDivElement> {
    items?: BreadcrumbItem[];
    className?: string;
    collapseOnMobile?: boolean;
}

declare const Breadcrumbs: React$1.FC<BreadcrumbsProps>;

interface ButtonProps {
    element?: string;
    href?: string;
    to?: To;
    isStartButton?: boolean;
    disabled?: boolean;
    className?: string;
    preventDoubleClick?: boolean;
    name?: string;
    type?: string;
    children?: React.ReactNode;
}

declare const Button: React$1.FC<ButtonProps & ButtonHTMLAttributes<HTMLButtonElement> & AnchorHTMLAttributes<HTMLAnchorElement>>;

declare function ConfigureOverallButton($scope?: Document | Element, config?: ButtonConfig): void;

interface CardColumnProps {
    link: string;
    header: string;
    body: string;
}

declare const CardColumn: React$1.FC<CardColumnProps>;

interface CardLayoutProps {
    cardColumns: Array<CardColumnProps>;
    numberOfGridColumns?: number;
}

declare const CardLayout: React$1.FC<CardLayoutProps>;

interface CharacterCountProps {
    id: string;
    className?: string;
    maxlength?: number;
    threshold?: number;
    maxwords?: number;
    errorMessage?: ErrorMessageProps;
    countMessage?: {
        className?: string;
    };
}

declare const CharacterCount: React$1.FC<CharacterCountProps & TextareaHTMLAttributes<HTMLTextAreaElement>>;

interface CheckboxesProps {
    [key: string]: unknown;
}

declare const Checkboxes: React$1.FC<CheckboxesProps>;

declare function ConfigureOverallCheckboxes($scope?: Document | Element): void;

interface CookieBannerMessageAction {
    className?: string;
    href?: string;
    to?: string;
    children?: React$1.ReactNode;
    type?: "submit" | "reset" | "button";
    [key: string]: unknown;
}
interface CookieBannerMessageItem {
    headingChildren?: React$1.ReactNode;
    children?: React$1.ReactNode;
    "aria-label"?: string;
    actions?: CookieBannerMessageAction[];
    className?: string;
    [key: string]: unknown;
}
interface CookieBannerProps {
    className?: string;
    messages: CookieBannerMessageItem[];
}

declare const CookieBanner: React$1.FC<CookieBannerProps & HTMLAttributes<HTMLDivElement>>;

interface DataNavigationProps {
    dataId: number;
    setDataFocus: (id: number) => void;
    previousText: string;
    previousCondition: boolean;
    nextText: string;
    nextCondition: boolean;
    dataDescription?: string;
}

declare const DataNavigation: React$1.FC<DataNavigationProps>;

interface DateInputItem {
    name: string;
    className?: string;
    type?: string;
    label?: string;
    reactListKey?: string | number;
    id?: string;
    pattern?: string;
    inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined;
    [key: string]: unknown;
}
interface DateInputProps {
    className?: string;
    errorMessage?: ErrorMessageProps;
    fieldset?: FieldsetProps;
    formGroup?: {
        className?: string;
        [key: string]: unknown;
    };
    hint?: HintProps;
    id?: string;
    items?: Array<DateInputItem>;
    namePrefix?: string;
    onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
    [key: string]: unknown;
}

declare const DateInput: React$1.FC<DateInputProps>;

interface DetailsProps {
    className?: string;
    children: React.ReactNode;
    summaryChildren: React.ReactNode;
}

declare const Details: React$1.FC<DetailsProps & HTMLAttributes<HTMLElement>>;

interface DifferenceNavigationProps {
    differenceId: number;
    setDifferenceFocus: (id: number) => void;
    totalDifferences: number;
    keyword?: string;
    plural?: string;
}

declare const DifferenceNavigation: React$1.FC<DifferenceNavigationProps>;

interface ErrorBoundaryProps {
    children: React.ReactNode;
    message?: string;
    applicationName?: string;
    basePageName?: string;
}
interface ErrorBoundaryState {
    hasError: boolean;
    message: string;
    applicationName: string;
}

declare class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
    constructor(props: ErrorBoundaryProps);
    static getDerivedStateFromError(): Partial<ErrorBoundaryState>;
    componentDidCatch(error: Error, info: React$1.ErrorInfo): void;
    render(): ReactNode;
}

declare const ErrorMessage: React$1.FC<ErrorMessageProps>;

interface ErrorSummaryProps extends HTMLAttributes<HTMLDivElement> {
    className?: string;
    descriptionChildren?: React.ReactNode;
    errorList?: Array<{
        reactListKey?: string | number;
        children: React.ReactNode;
        href?: string;
        [key: string]: unknown;
    }>;
    titleChildren?: React.ReactNode;
    disableAutoFocus?: boolean;
}

declare const ErrorSummary: React$1.FC<ErrorSummaryProps>;

declare function ConfigureOverallErrorSummary($scope?: Document | Element, config?: ErrorSummaryConfig): void;

declare const Fieldset: React$1.FC<FieldsetProps>;

interface FileUploadProps extends React.InputHTMLAttributes<HTMLInputElement> {
    className?: string;
    errorMessage?: ErrorMessageProps;
    formGroup?: {
        className?: string;
        [key: string]: unknown;
    };
    hint?: HintProps;
    label?: LabelProps;
    "aria-describedby"?: string;
    id?: string;
}

declare const FileUpload: React$1.FC<FileUploadProps>;

interface NavigationItem$2 {
    columns: string | number;
    title: string;
    items?: Array<{
        className?: string;
        children: React.ReactNode;
        href?: string;
        to?: To;
        reactListKey?: string | number;
        [key: string]: unknown;
    }>;
    width?: string;
    reactListKey?: string | number;
}
interface MetaItem {
    className?: string;
    children: React.ReactNode;
    reactListKey?: string | number;
    [key: string]: unknown;
}
interface Meta {
    visuallyHiddenTitle?: string;
    items?: MetaItem[];
    children?: React.ReactNode;
}
interface FooterProps extends HTMLAttributes<HTMLElement> {
    className?: string;
    containerClassName?: string;
    meta?: Meta;
    navigation?: NavigationItem$2[];
}

declare const Footer: React$1.FC<FooterProps>;

interface NavigationItem$1 {
    active?: boolean;
    className?: string;
    children?: React.ReactNode;
    href?: string;
    to?: To;
    reactListKey?: string | number;
    [key: string]: unknown;
}
interface HeaderProps extends HTMLAttributes<HTMLDivElement> {
    className?: string;
    containerClassName?: string;
    homepageUrlHref?: string;
    homepageUrlTo?: To;
    navigation?: NavigationItem$1[];
    navigationClassName?: string;
    productName?: React.ReactNode;
    serviceName?: string;
    serviceUrlHref?: string;
    serviceUrlTo?: To;
    navigationLabel?: string;
    menuButtonLabel?: string;
    logo?: string;
    removeGovUKHeader?: unknown;
    assetsPath?: string;
}

declare const Header: React$1.FC<HeaderProps>;

declare function ConfigureOverallHeader($scope?: Document | Element): void;

declare const Hint: React$1.FC<HintProps & React$1.HTMLAttributes<HTMLOrSVGElement>>;

interface InputProps {
    className?: string;
    "aria-describedby"?: string;
    errorMessage?: object;
    formGroup?: {
        className?: string;
        [key: string]: unknown;
    };
    hint?: object;
    label?: object;
    name?: string;
    id?: string;
    type: string;
    prefix?: {
        className?: string;
        [key: string]: unknown;
    };
    suffix?: {
        className?: string;
        [key: string]: unknown;
    };
}

declare const Input: React$1.FC<InputProps & React$1.InputHTMLAttributes<HTMLInputElement>>;

interface InsetTextProps {
    className?: string;
    children: React.ReactNode;
}

declare const InsetText: React$1.FC<InsetTextProps & HTMLAttributes<HTMLDivElement>>;

declare const Label: React$1.FC<LabelProps & React$1.HTMLAttributes<HTMLOrSVGElement>>;

interface LandingProps {
    to?: To;
}

declare const Landing: React$1.FC<LandingProps>;

interface LinkWithRefProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
    children: React$1.ReactNode;
    to?: To;
    href?: string;
    forwardedRef?: React$1.Ref<HTMLAnchorElement>;
    [key: string]: unknown;
}

declare const LinkWithRef: React$1.FC<LinkWithRefProps>;

interface LoadingProps {
    message?: string | null;
    html?: React.ReactNode | null;
}

declare const Loading: React$1.FC<LoadingProps>;

interface MainProps {
    children?: React.ReactNode;
    backLink?: string;
    backLinkState?: object | null;
}

declare const Main: React$1.FC<MainProps>;

declare const NotFoundPage: React$1.FC;

interface NotificationBannerProps {
    type: "success" | "error" | "info" | "warning";
    titleChildren?: string;
    titleHeadingLevel?: ElementType;
    children: React.ReactNode;
    className?: string;
    titleId?: string;
    role?: string;
    disableAutoFocus?: boolean;
    [key: string]: unknown;
}

declare const NotificationBanner: React$1.FC<NotificationBannerProps>;

interface PaginationProps {
    onPageChange: (page: number) => void;
    totalCount: number;
    siblingCount?: number;
    currentPage: number;
    pageSize: number;
    className?: string;
    previousName?: string;
    previousChildren?: React.ReactNode;
    nextName?: string;
    nextChildren?: React.ReactNode;
}

declare const Pagination: React$1.FC<PaginationProps>;

interface PanelProps extends HTMLAttributes<HTMLDivElement> {
    headingLevel?: ElementType;
    className?: string;
    titleChildren: React.ReactNode;
    children?: React.ReactNode;
}

declare const Panel: React$1.FC<PanelProps>;

interface PDFJsProps {
    iframeId: string;
    source: string;
    viewerLocation: string;
    documentName?: string;
    documentNameColour?: string;
    element: HTMLElement;
    toolbar?: "full" | "fullHidePrint" | "minimal" | "minimalHidePrint" | undefined;
    [key: string]: unknown;
}
interface PDFViewerProps {
    iframeId: string;
    src: string;
    viewerLocation: string;
    documentName?: string;
    documentNameColour?: string;
    toolbar?: "full" | "fullHidePrint" | "minimal" | "minimalHidePrint" | undefined;
    backend: (jsProps: PDFJsProps) => void;
    additionalBackendAttributes?: Record<string, string | number | boolean | null | undefined>;
    [key: string]: unknown;
}

declare const PDFViewer: React$1.FC<PDFViewerProps>;

declare const PDFViewerBackend: ({ iframeId, source, viewerLocation, documentName, documentNameColour, toolbar, element, ...remaining }: PDFJsProps) => void;

interface TagProps {
    className?: string;
    children?: React.ReactNode;
}

interface PhaseBannerProps {
    className?: string;
    tag?: TagProps;
    children: React.ReactNode;
}

declare const PhaseBanner: React$1.FC<PhaseBannerProps>;

interface ProblemWithServiceProps {
    message?: string;
    applicationName?: string;
    applicationRoute?: string;
    reportingLink?: string;
    basePageName?: string;
}

declare const ProblemWithService: React$1.FC<ProblemWithServiceProps>;

interface RadiosProps {
    value?: string;
    defaultValue?: string;
    items?: BooleanItem[];
    [key: string]: unknown;
}

declare const Radios: React$1.FC<RadiosProps>;

declare function ConfigureOverallRadios($scope?: Document | Element): void;

interface Option {
    reactListKey?: string | number;
    children: React.ReactNode;
    [key: string]: unknown;
}
interface SelectProps {
    className?: string;
    "aria-describedby"?: string;
    errorMessage?: ErrorMessageProps;
    formGroup?: {
        className?: string;
        [key: string]: unknown;
    };
    hint?: HintProps;
    id: string;
    items?: Option[];
    label: LabelProps;
}

declare const Select: React$1.FC<SelectProps & SelectHTMLAttributes<HTMLSelectElement>>;

interface NavigationItem {
    active?: boolean;
    className?: string;
    children?: React.ReactNode;
    href?: string;
    to?: To;
    reactListKey?: string | number;
    [key: string]: unknown;
}
interface ServiceNavigationProps {
    className?: string;
    containerClassName?: string;
    menuButtonLabel?: string;
    navigation?: NavigationItem[];
    navigationClassName?: string;
    navigationLabel?: string;
    serviceName?: string;
    serviceUrlHref?: string;
    serviceUrlTo?: To;
}

declare const ServiceNavigation: React$1.FC<ServiceNavigationProps & HTMLAttributes<HTMLDivElement>>;

interface SkipLinkProps {
    href: string;
    className: string;
    children?: React.ReactNode;
}

declare const SkipLink: React$1.FC<SkipLinkProps & React$1.HTMLAttributes<HTMLOrSVGElement>>;

declare function ConfigureOverallSkipLink($scope?: Document | Element): void;

interface Row {
    reactListKey?: string;
    key?: {
        className?: string;
        children: React.ReactNode;
    };
    value?: {
        className?: string;
        children: React.ReactNode;
    };
    actions?: {
        items: Action[];
        className?: string;
    };
    className?: string;
}
interface SummaryListProps {
    className?: string;
    rows?: Row[];
    [key: string]: unknown;
}

declare const SummaryList: React$1.FC<SummaryListProps>;

interface TableItem {
    className?: string;
    format?: string;
    children: React.ReactNode;
    reactListKey?: string | number;
    [key: string]: unknown;
}
interface TableRow {
    cells: TableItem[];
    reactListKey?: string | number;
}
interface TableProps extends HTMLAttributes<HTMLTableElement> {
    caption?: string;
    captionClassName?: string;
    firstCellIsHeader?: boolean;
    className?: string;
    head?: TableItem[];
    rows?: TableRow[];
    footer?: TableItem[];
}

declare const Table: React$1.FC<TableProps>;

interface TabItem {
    id?: string;
    label: string;
    panel: HTMLAttributes<HTMLDivElement>;
    [key: string]: unknown;
}
interface TabsProps extends HTMLAttributes<HTMLDivElement> {
    className?: string;
    id: string;
    idPrefix?: string;
    items: TabItem[];
    title?: string;
}

declare const Tabs: React$1.FC<TabsProps>;

declare function ConfigureOverallTabs($scope?: Document | Element): void;

declare const Tag: React$1.FC<TagProps & React$1.HTMLAttributes<HTMLOrSVGElement>>;

interface TaskListItemProps {
    title: {
        children: React$1.ReactNode;
    };
    hint: HintProps;
    status: {
        children?: React$1.ReactNode;
        tag?: {
            children: React$1.ReactNode;
        };
    };
    href?: string;
    [key: string]: unknown;
}
interface TaskListProps {
    className?: string;
    idPrefix?: string;
    items: TaskListItemProps[];
}

declare const TaskList: React$1.FC<TaskListProps & HTMLAttributes<HTMLUListElement>>;

interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
    className?: string;
    "aria-describedby"?: string;
    errorMessage?: ErrorMessageProps;
    formGroup?: {
        className?: string;
        [key: string]: unknown;
    };
    hint?: object;
    label?: object;
    id?: string;
}

declare const Textarea: React$1.FC<TextareaProps>;

interface WarningInfoProps {
    messageHeading?: string;
    message?: string;
    advice?: string;
    applicationName?: string;
    applicationRoute?: string;
    basePageName?: string;
}

declare const WarningInfo: React$1.FC<WarningInfoProps>;

interface WarningTextProps {
    children?: React.ReactNode;
    className?: string;
}

declare const WarningText: React$1.FC<WarningTextProps & HTMLAttributes<HTMLDivElement>>;

export { Accordion, ActionLink, BackLink, Boolean, Breadcrumbs, Button, CardColumn, CardLayout, CharacterCount, Checkboxes as Checkbox, ConfigureOverallAccordion, ConfigureOverallButton, ConfigureOverallCheckboxes, ConfigureOverallErrorSummary, ConfigureOverallHeader, ConfigureOverallRadios, ConfigureOverallSkipLink, ConfigureOverallTabs, CookieBanner, DataNavigation, DateInput, Details, DifferenceNavigation, ErrorBoundary, ErrorMessage, ErrorSummary, ExtractAccordionConfigFromAttributes, Fieldset, FileUpload, Footer, Header, Hint, Input, InsetText, Label, Landing, LinkWithRef, Loading, Main, NotFoundPage, NotificationBanner, PDFViewer, PDFViewerBackend, Pagination, Panel, PhaseBanner, ProblemWithService, Radios, Select, ServiceNavigation, SkipLink, SummaryList, Table, Tabs, Tag, TaskList, Textarea, WarningInfo, WarningText };