@dataesr/react-dsfr
Version:
A React implementation of the french government design system.
1,681 lines (1,299 loc) • 39 kB
TypeScript
import * as React from 'react';
import { ComponentPropsWithRef } from 'react';
type AccordionAs = 'div' | 'section';
type AccordionSize = 'sm' | 'md' | 'lg';
type AccordionChildren = React.ReactNode[] | React.ReactNode;
interface AccordionProps {
/**
* Html tag to render accordion wrapper.
*/
as?: AccordionAs;
size?: AccordionSize;
keepOpen?: boolean;
color?: string;
children: AccordionChildren;
className?: string;
}
declare const Accordion: React.FC<AccordionProps>;
type AccordionItemTitleAs = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
type AccordionItemSize = 'sm' | 'md' | 'lg';
type AccordionItemTitle = string | React.ReactElement<any>;
type AccordionItemChildren = React.ReactNode[] | React.ReactNode | string;
interface AccordionItemProps {
/**
* Html tag to render in accordion title.
*/
titleAs?: AccordionItemTitleAs;
/**
* @ignore
*/
initExpand?: boolean;
onClick?: (...args: any[])=>any;
/**
* @ignore
*/
expandedItems?: number[];
size?: AccordionItemSize;
id?: number;
color?: string;
title: AccordionItemTitle;
children: AccordionItemChildren;
className?: string;
}
declare const AccordionItem: React.FC<AccordionItemProps>;
type AlertAs = 'p' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
type AlertTitle = string | Object | any[];
type AlertDescription = string | Object | any[];
type AlertType = 'error' | 'success' | 'info' | 'warning';
interface AlertProps {
as?: AlertAs;
className?: string;
closable?: boolean;
description?: AlertDescription;
onClose?: (...args: any[])=>any;
role?: string;
show?: boolean;
small?: boolean;
title?: AlertTitle;
type?: AlertType;
}
declare const Alert: React.FC<AlertProps>;
type BadgeColorFamily = any | '';
type BadgeType = 'success' | 'error' | 'warning' | 'new' | 'info';
interface BadgeProps {
text: string;
icon?: string;
hasIcon?: boolean;
isSmall?: boolean;
colorFamily?: BadgeColorFamily;
type?: BadgeType;
className?: string;
}
declare const Badge: React.FC<BadgeProps>;
type BadgeGroupChildren = React.ReactNode[] | React.ReactNode;
interface BadgeGroupProps {
className?: string;
children?: BadgeGroupChildren;
}
declare const BadgeGroup: React.FC<BadgeGroupProps>;
type BreadcrumbChildren = React.ReactNode[] | React.ReactNode;
interface BreadcrumbProps {
label?: string;
buttonLabel?: string;
children: BreadcrumbChildren;
className?: string;
}
declare const Breadcrumb: React.FC<BreadcrumbProps>;
type BreadcrumbItemChildren = string | React.ReactNode;
interface BreadcrumbItemProps {
__TYPE?: any;
children: BreadcrumbItemChildren;
className?: string;
href?: string;
asLink?: React.ReactElement<any>;
}
declare const BreadcrumbItem: React.FC<BreadcrumbItemProps>;
type ButtonIconPosition = 'left' | 'right';
type ButtonSize = 'sm' | 'md' | 'lg';
type ButtonChildren = string | React.ReactNode;
interface ButtonProps {
secondary?: boolean;
tertiary?: boolean;
hasBorder?: boolean;
icon?: string;
disabled?: boolean;
onClick?: (...args: any[])=>any;
iconPosition?: ButtonIconPosition;
title?: string;
className?: string;
size?: ButtonSize;
children?: ButtonChildren;
submit?: boolean;
/**
* colors[0] is background, colors[1] is color
*/
colors?: string[];
}
declare const Button: React.FC<ButtonProps>;
type ButtonGroupIsInlineFrom = 'xs' | 'sm' | 'md' | 'lg';
type ButtonGroupSize = 'sm' | 'md' | 'lg';
type ButtonGroupAlign = 'left' | 'center' | 'right';
type ButtonGroupChildren = React.ReactNode[] | React.ReactNode;
interface ButtonGroupProps {
isInlineFrom?: ButtonGroupIsInlineFrom;
className?: string;
size?: ButtonGroupSize;
align?: ButtonGroupAlign;
children?: ButtonGroupChildren;
isReversed?: boolean;
isEquisized?: boolean;
}
declare const ButtonGroup: React.FC<ButtonGroupProps>;
type CalloutColorFamily = 'green-tilleul-verveine' | 'green-bourgeon' | 'green-emeraude' | 'green-menthe' | 'green-archipel' | 'blue-ecume' | 'blue-cumulus' | 'purple-glycine' | 'pink-macaron' | 'pink-tuile' | 'yellow-tournesol' | 'yellow-moutarde' | 'orange-terre-battue' | 'brown-cafe-creme' | 'brown-caramel' | 'brown-opera' | 'beige-gris-galet' | '';
type CalloutChildren = React.ReactNode[] | React.ReactNode;
interface CalloutProps {
hasInfoIcon?: boolean;
colorFamily?: CalloutColorFamily;
/**
* first color is color of the border, second is background
* be careful with contrast
*/
colors?: string[];
children: CalloutChildren;
className?: string;
}
declare const Callout: React.FC<CalloutProps>;
type CalloutTextChildren = string | React.ReactNode;
type CalloutTextSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
type CalloutTextAs = 'p' | 'ul' | 'div';
interface CalloutTextProps {
children: CalloutTextChildren;
className?: string;
size?: CalloutTextSize;
as?: CalloutTextAs;
}
declare const CalloutText: React.FC<CalloutTextProps>;
type CalloutTitleChildren = string | React.ReactNode;
type CalloutTitleAs = 'p' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
type CalloutTitleSize = 'xs' | 'sm' | 'md' | 'lg';
interface CalloutTitleProps {
children: CalloutTitleChildren;
as?: CalloutTitleAs;
size?: CalloutTitleSize;
className?: string;
}
declare const CalloutTitle: React.FC<CalloutTitleProps>;
type CardChildren = React.ReactNode[] | React.ReactNode;
type CardAnchorAs = 'a' | any;
type CardSize = 'sm' | 'md' | 'lg';
interface CardProps {
children: CardChildren;
anchorAs?: CardAnchorAs;
href?: string;
icon?: string;
ariaLabel?: string;
isHorizontal?: boolean;
isGrey?: boolean;
hasShadow?: boolean;
hasBorder?: boolean;
hasBackground?: boolean;
className?: string;
size?: CardSize;
bodyClassName?: string;
hasArrow?: boolean;
asLink?: React.ReactElement<any>;
onClick?: (...args: any[]) => any;
}
declare const Card: React.FC<CardProps>;
type CardDescriptionChildren = string | React.ReactNode;
type CardDescriptionAs = 'span' | 'div' | 'p';
interface CardDescriptionProps {
__TYPE?: any;
children: CardDescriptionChildren;
className?: string;
as?: CardDescriptionAs;
}
declare const CardDescription: React.FC<CardDescriptionProps>;
type CardDetailChildren = string | React.ReactNode;
type CardDetailPosition = 'top' | 'bottom';
interface CardDetailProps {
__TYPE?: any;
children: CardDetailChildren;
className?: string;
position?: CardDetailPosition;
}
declare const CardDetail: React.FC<CardDetailProps>;
interface CardImageProps {
__TYPE?: any;
alt?: string;
className?: string;
src: string;
}
declare const CardImage: React.FC<CardImageProps>;
type CardTitleAnchorAs = 'a' | any;
type CardTitleChildren = string | React.ReactNode;
type CardTitleAs = 'p' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
interface CardTitleProps {
/**
* @ignore
*/
href?: string;
/**
* @ignore
*/
__TYPE?: any;
anchorAs?: CardTitleAnchorAs;
children: CardTitleChildren;
className?: string;
as?: CardTitleAs;
asLink?: React.ReactElement<any>;
onClick?: (...args: any[])=>any;
ariaLabel?: string;
}
declare const CardTitle: React.FC<CardTitleProps>;
type CardHeaderChildren = string | React.ReactNode;
interface CardHeaderProps {
__TYPE?: any;
children: CardHeaderChildren;
}
declare const CardHeader: React.FC<CardHeaderProps>;
type CardFooterChildren = string | React.ReactNode;
interface CardFooterProps {
__TYPE?: any;
children: CardFooterChildren;
className?: string;
}
declare const CardFooter: React.FC<CardFooterProps>;
type CheckboxHint = string | Object | any[];
type CheckboxMessageType = 'error' | 'valid' | '';
type CheckboxSize = 'sm' | 'md';
// Type always equals 'checkbox'
type OmittedProps = 'type';
interface CheckboxProps extends Omit<ComponentPropsWithRef<'input'>, OmittedProps> {
id?: string;
hint?: CheckboxHint;
label: string;
message?: string;
messageType?: CheckboxMessageType;
size?: CheckboxSize;
}
declare const Checkbox: React.FC<CheckboxProps>;
type CheckboxGroupChildren = React.ReactNode[] | React.ReactNode;
type CheckboxGroupHint = string | Object | any[];
type CheckboxGroupMessageType = 'error' | 'valid' | '';
interface CheckboxGroupProps {
children: CheckboxGroupChildren;
className?: string;
hint?: CheckboxGroupHint;
ariaLabel?: string;
isInline?: boolean;
legend?: string;
message?: string;
messageType?: CheckboxGroupMessageType;
required?: boolean;
/**
* color[0] is background, color[1] is color
*/
checkboxColors?: string[];
}
declare const CheckboxGroup: React.FC<CheckboxGroupProps>;
interface ConsentBannerBannerButtons {
refuse?: {
label: string;
};
accept?: {
label: string;
};
customize?: {
label: string;
};
}
interface ConsentBannerProps {
className?: string;
openConsentModal: (...args: any[])=>any;
title?: string;
description: string;
refuseBannerButton: (...args: any[])=>any;
acceptBannerButton: (...args: any[])=>any;
bannerButtons: ConsentBannerBannerButtons;
}
declare const ConsentBanner: React.FC<ConsentBannerProps>;
type ConsentManagerChildren =
| React.ReactNode[]
| React.ReactElement<any>;
interface ConsentManagerBannerButtons {
refuse?: {
label: string;
};
accept?: {
label: string;
};
customize?: {
label: string;
};
}
interface ConsentManagerProps {
acceptBannerButton: (...args: any[]) => any;
bannerButtons: ConsentManagerBannerButtons;
bannerDescription: string;
bannerTitle?: string;
children: ConsentManagerChildren;
confirmButtonLabel?: string;
confirmButtonTitle?: string;
confirmConsent: (...args: any[]) => any;
isBannerOpen?: boolean;
isModalOpen: boolean;
modalCloseLabel: string;
modalCloseTitle: string;
modalTitle: string;
refuseBannerButton: (...args: any[]) => any;
setIsModalOpen: (...args: any[]) => any;
}
declare const ConsentManager: React.FC<ConsentManagerProps>;
type ConsentServiceDefaultConsent = 'accept' | 'refuse';
interface ConsentServiceProps {
acceptLabel: string;
className?: string;
defaultConsent: ConsentServiceDefaultConsent;
description?: string;
disabled?: boolean;
name?: string;
onChange?: (...args: any[]) => any;
refuseLabel: string;
title: string;
value?: ConsentServiceDefaultConsent;
}
declare const ConsentService: React.FC<ConsentServiceProps>;
interface DownloadProps {
className?: string;
fileName: string;
label: string;
metaData?: string;
description?: string;
lang?: string;
asCard?: boolean;
openFile?: boolean;
}
declare const Download$1: React.FC<DownloadProps>;
type DownloadGroupChildren = string | React.ReactNode;
interface DownloadGroupProps {
className?: string;
title: string;
children: DownloadGroupChildren
}
declare const Download: React.FC<DownloadGroupProps>;
interface FileProps {
className?: string;
label: string;
multiple?: boolean;
onChange?: (...args: any[])=>any;
errorMessage?: string;
hint?: string;
accept?: string;
}
declare const File: React.FC<FileProps>;
type FooterChildren = React.ReactNode[] | React.ReactNode;
interface FooterProps {
children: FooterChildren;
className?: string;
}
declare const Footer: React.FC<FooterProps>;
type FooterBodyChildren = React.ReactNode[] | React.ReactNode;
type FooterBodyDescription = React.ReactNode | string;
interface FooterBodyProps {
__TYPE?: any;
children: FooterBodyChildren;
description: FooterBodyDescription;
className?: string;
}
declare const FooterBody: React.FC<FooterBodyProps>;
type FooterBodyItemChildren = React.ReactNode[] | React.ReactNode;
interface FooterBodyItemProps {
__TYPE?: any;
children: FooterBodyItemChildren;
}
declare const FooterBodyItem: React.FC<FooterBodyItemProps>;
type FooterBottomChildren = React.ReactNode[] | React.ReactNode;
interface FooterBottomProps {
__TYPE?: any;
children: FooterBottomChildren;
className?: string;
}
declare const FooterBottom: React.FC<FooterBottomProps>;
type FooterCopyChildren = string | React.ReactNode;
interface FooterCopyProps {
__TYPE?: any;
children: FooterCopyChildren;
className?: string;
}
declare const FooterCopy: React.FC<FooterCopyProps>;
type FooterLinkChildren = string | React.ReactNode;
type FooterLinkSection = 'bottom' | 'top';
interface FooterLinkProps {
__TYPE?: any;
children?: FooterLinkChildren;
href?: string;
onClick?: (...args: any[])=>any;
section?: FooterLinkSection;
className?: string;
asLink?: React.ReactElement<any>;
target?: string;
}
declare const FooterLink: React.FC<FooterLinkProps>;
type FooterPartnersChildren = React.ReactNode[] | React.ReactNode;
interface FooterPartnersProps {
__TYPE?: any;
children: FooterPartnersChildren;
className?: string;
}
declare const FooterPartners: React.FC<FooterPartnersProps>;
interface FooterPartnersLogoProps {
__TYPE?: any;
href?: string;
imageSrc?: string;
imageAlt: string;
className?: string;
asLink?: React.ReactElement<any>;
isMain?: boolean;
target?: string;
}
declare const FooterPartnersLogo: React.FC<FooterPartnersLogoProps>;
type FooterPartnersTitleChildren = string | React.ReactNode;
type FooterPartnersTitleAs = 'p' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
interface FooterPartnersTitleProps {
__TYPE?: any;
children: FooterPartnersTitleChildren;
as?: FooterPartnersTitleAs;
className?: string;
}
declare const FooterPartnersTitle: React.FC<FooterPartnersTitleProps>;
type FooterPartnersSecondaryTitleChildren = string | React.ReactNode;
type FooterPartnersSecondaryTitleAs = 'p' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
interface FooterPartnersSecondaryTitleProps {
__TYPE?: any;
children: FooterPartnersSecondaryTitleChildren;
as?: FooterPartnersSecondaryTitleAs;
className?: string;
}
declare const FooterPartnersSecondaryTitle: React.FC<FooterPartnersSecondaryTitleProps>;
type FooterTopChildren = React.ReactNode[] | React.ReactNode;
type FooterTopAlign = 'center' | 'start' | 'end';
interface FooterTopProps {
__TYPE?: any;
children: FooterTopChildren;
align?: FooterTopAlign;
className?: string;
}
declare const FooterTop: React.FC<FooterTopProps>;
type FooterTopCategoryChildren = React.ReactNode[] | React.ReactNode;
interface FooterTopCategoryProps {
__TYPE?: any;
title: string;
n?: string;
offset?: string;
children: FooterTopCategoryChildren;
className?: string;
}
declare const FooterTopCategory: React.FC<FooterTopCategoryProps>;
type FooterOperatorChildren = React.ReactNode[] | React.ReactNode;
interface FooterOperatorProps {
__TYPE?: any;
children: FooterOperatorChildren;
}
declare const FooterOperator: React.FC<FooterOperatorProps>;
type HeaderChildren = React.ReactNode[] | React.ReactNode;
interface HeaderProps {
/**
* Ouverture de la popin de recherche en mobile
*/
isOpenSearch?: boolean;
/**
* Ouverture de la popin de navigation en mobile
*/
isOpenNav?: boolean;
children: HeaderChildren;
className?: string;
closeButtonLabel?: string;
}
declare const Header: React.FC<HeaderProps>;
type HeaderBodyChildren = React.ReactNode[] | React.ReactNode | string;
interface HeaderBodyProps {
children?: HeaderBodyChildren;
className?: string;
closeButtonLabel?: string;
}
declare const HeaderBody: React.FC<HeaderBodyProps>;
type HeaderNavChildren = React.ReactNode[] | React.ReactNode;
interface HeaderNavProps {
__TYPE?: any;
closeButtonLabel?: string;
path?: string;
className?: string;
children: HeaderNavChildren;
}
declare const HeaderNav: React.FC<HeaderNavProps>;
type HeaderOperatorChildren = React.ReactNode[] | React.ReactNode;
interface HeaderOperatorProps {
__TYPE?: any;
children: HeaderOperatorChildren;
}
declare const HeaderOperator: React.FC<HeaderOperatorProps>;
type MegaNavItemAs = 'p' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
type MegaNavItemChildren = React.ReactNode[] | React.ReactNode | string;
interface MegaNavItemProps {
as?: MegaNavItemAs;
children?: MegaNavItemChildren;
title: string;
closeButtonLabel?: string;
linkLabel?: string;
link?: string;
description?: string;
current?: boolean;
}
declare const MegaNavItem: React.FC<MegaNavItemProps>;
type MegaNavSubItemChildren = React.ReactElement<any> | React.ReactNode;
interface MegaNavSubItemProps {
title?: string;
link?: string;
children: MegaNavSubItemChildren;
}
declare const MegaNavSubItem: React.FC<MegaNavSubItemProps>;
type NavItemChildren = React.ReactNode[] | React.ReactNode | string;
interface NavItemProps {
children?: NavItemChildren;
title: string;
link?: string;
current?: boolean;
asLink?: React.ReactElement<any>;
onClick?: (e: React.MouseEvent<HTMLAnchorElement, MouseEvent>)=>any;
/**
* @ignore
*/
path?: string;
}
declare const NavItem: React.FC<NavItemProps>;
type NavItemWithSubItemChildren = React.ReactNode[] | React.ReactNode | string;
interface NavItemWithSubItemProps {
children?: NavItemWithSubItemChildren;
title: string;
link?: string;
current?: boolean;
asLink?: React.ReactElement<any>;
/**
* @ignore
*/
path?: string;
}
declare const NavItemWithSubItem: React.FC<NavItemWithSubItemProps>;
interface NavSubItemProps {
__TYPE?: any;
title: string;
link?: string;
current?: boolean;
asLink?: React.ReactElement<any>;
}
declare const NavSubItem: React.FC<NavSubItemProps>;
interface ServiceProps {
__TYPE?: any;
description?: React.ReactNode;
title: React.ReactNode;
link?: string;
linkTitle?: string;
className?: string;
asLink?: React.ReactElement<any>;
}
declare const Service: React.FC<ServiceProps>;
type ToolChildren = React.ReactNode[] | React.ReactNode | string;
interface ToolProps {
children: ToolChildren;
className?: string;
closeButtonLabel?: string;
}
declare const Tool: React.FC<ToolProps>;
type ToolItemAs = 'p' | 'span' | 'div' | '';
type ToolItemChildren = string | React.ReactNode;
interface ToolItemProps {
__TYPE?: any;
className?: string;
icon?: string;
/**
* html tag to render
*/
as?: ToolItemAs;
children: ToolItemChildren;
link?: string;
onClick?: (...args: any[])=>any;
asLink?: React.ReactElement<any>;
target?: string;
}
declare const ToolItem: React.FC<ToolItemProps>;
type ToolItemGroupChildren = React.ReactNode[] | React.ReactNode | string;
interface ToolItemGroupProps {
__TYPE?: any;
children: ToolItemGroupChildren;
className?: string;
}
declare const ToolItemGroup: React.FC<ToolItemGroupProps>;
type ToolTranslateChildren$1 = React.ReactNode[] | React.ReactNode | string;
interface ToolTranslateProps {
__TYPE?: any;
children: ToolTranslateChildren$1;
className?: string;
title?: string;
currentLang: string;
descCurrentLang: string;
}
declare const ToolTranslate: React.FC<ToolTranslateProps>;
type ToolTranslateChildren = React.ReactNode[] | React.ReactNode | string;
interface ToolTranslateItemProps {
children: ToolTranslateChildren;
href: string;
active: boolean;
hrefLang: string;
onClick?: (...args: any[])=>any;
className?: string;
}
declare const ToolTranslateItem: React.FC<ToolTranslateItemProps>;
type HighlightSize = 'sm' | 'md' | 'lg';
type HighlightChildren = string | React.ReactNode;
type HighlightColorFamily = any | '';
interface HighlightProps {
size?: HighlightSize;
children: HighlightChildren;
className?: string;
color?: string;
colorFamily?: HighlightColorFamily;
}
declare const Highlight: React.FC<HighlightProps>;
type LinkChildren = React.ReactNode[] | React.ReactNode | string;
type LinkVerticalIconPosition = 'top' | 'middle' | 'sub';
type LinkSize = 'sm' | 'md' | 'lg';
type LinkIconPosition = 'left' | 'right';
type LinkIconSize = 'fw' | 'xxs' | 'xs' | 'sm' | '1x' | 'lg' | 'xl' | '2x' | '3x' | '10x';
type LinkDisplay = 'inline' | 'flex';
interface LinkProps {
className?: string;
children?: LinkChildren;
href?: string;
size?: LinkSize;
disabled?: boolean;
verticalIconPosition?: LinkVerticalIconPosition;
as?: React.ReactElement<any>;
title?: string;
target?: string;
isSimple?: boolean;
current?: boolean;
icon?: string;
onClick?: (...args: any[])=>any;
iconPosition?: LinkIconPosition;
iconSize?: LinkIconSize;
/**
* @ignore
*/
display?: LinkDisplay;
}
declare const Link: React.FC<LinkProps>;
type LogoChildren = string | React.ReactNode;
interface LogoProps {
__TYPE?: any;
className?: string;
children: LogoChildren;
hrefTitle?: string;
href?: string;
/**
* Number of characters to split title
*/
splitCharacter?: number;
asLink?: React.ReactElement<any>;
}
declare const Logo: React.FC<LogoProps>;
type ModalChildren = React.ReactNode[] | React.ReactNode;
type ModalSize = 'sm' | 'md' | 'lg';
interface ModalProps {
id?: string;
isOpen?: boolean;
children: ModalChildren;
hide: (...args: any[])=>any;
size?: ModalSize;
className?: string;
canClose?: boolean;
}
declare const Modal: React.FC<ModalProps>;
type ModalCloseChildren = string | React.ReactNode;
interface ModalCloseProps {
__TYPE?: any;
children?: ModalCloseChildren;
title?: string;
/**
* @ignore
*/
hide?: (...args: any[])=>any;
className?: string;
}
declare const ModalClose: React.FC<ModalCloseProps>;
type ModalContentChildren = React.ReactNode[] | React.ReactNode | string;
interface ModalContentProps {
__TYPE?: any;
children: ModalContentChildren;
className?: string;
}
declare const ModalContent: React.FC<ModalContentProps>;
type ModalFooterChildren = React.ReactNode[] | React.ReactNode | string;
interface ModalFooterProps {
__TYPE?: any;
children: ModalFooterChildren;
className?: string;
}
declare const ModalFooter: React.FC<ModalFooterProps>;
type ModalTitleChildren = string | React.ReactNode;
interface ModalTitleProps {
__TYPE?: any;
children: ModalTitleChildren;
icon?: string;
className?: string;
}
declare const ModalTitle: React.FC<ModalTitleProps>;
type NoticeChildren = React.ReactNode[] | React.ReactNode | string;
interface NoticeProps {
className?: string;
children?: NoticeChildren;
title: string;
visible?: boolean;
asLink?: React.ReactElement<any>;
}
declare const Notice: React.FC<NoticeProps>;
type PaginationAnchorAs = 'a' | any;
interface PaginationButtonLabels {
currentAria?: string;
firstAria?: string;
lastAria?: string;
navigationAria?: string;
nextAria?: string;
nextLabel?: string;
pageAria?: (...args: any[])=>any;
prevAria?: string;
prevLabel?: string;
}
interface PaginationProps {
anchorAs?: PaginationAnchorAs;
buildURL?: any;
buttonLabels?: PaginationButtonLabels;
currentPage: number;
onClick?: any;
pageCount: number;
surrendingPages?: number;
}
declare const Pagination: React.FC<PaginationProps>;
type PaginationItemAnchorAs = 'a' | any;
interface PaginationItemProps {
anchorAs?: PaginationItemAnchorAs;
aria?: string;
buildURL?: (...args: any[])=>any;
isActive?: boolean;
onClick?: (...args: any[])=>any;
page: number;
}
declare const PaginationItem: React.FC<PaginationItemProps>;
type RadioDisabled = boolean | undefined;
type RadioHint = string | Object | any[];
type RadioMessageType = 'error' | 'valid' | '';
type RadioSize = 'sm' | 'md';
interface RadioProps {
className?: string;
defaultChecked?: boolean;
disabled?: RadioDisabled;
hint?: RadioHint;
id?: string;
imageURL?: string;
isExtended?: boolean;
label: string;
message?: string;
messageType?: RadioMessageType;
onChange?: (...args: any[])=>any;
onGroupChange?: (...args: any[])=>any;
size?: RadioSize;
svg?: React.ReactNode;
value: string;
}
declare const Radio: React.FC<RadioProps>;
type RadioGroupChildren = string | Object | any[];
type RadioGroupHint = string | Object | any[];
type RadioGroupMessageType = 'error' | 'valid' | '';
interface RadioGroupProps {
ariaLabel?: string;
children?: RadioGroupChildren;
className?: string;
disabled?: boolean;
hint?: RadioGroupHint;
isInline?: boolean;
legend: string;
message?: string;
messageType?: RadioGroupMessageType;
name?: string;
onChange?: (...args: any[])=>any;
required?: boolean;
value?: string;
}
declare const RadioGroup: React.FC<RadioGroupProps>;
type SearchBarSize = 'md' | 'lg';
interface SearchBarProps {
label?: string;
buttonLabel: string;
placeholder?: string;
/**
* A function that handles search action. Input value is passed as prop.
*/
onSearch: (...args: any[])=>any;
size?: SearchBarSize;
defaultValue?: string;
className?: string;
}
declare const SearchBar: React.FC<SearchBarProps>;
type SearchableSelectHint = string | Object | any[];
type SearchableSelectMessageType = 'error' | 'valid';
interface SearchableSelectOptions {
disabled?: boolean;
hidden?: boolean;
label: string;
value: string;
}
interface SearchableSelectProps {
className?: string;
disabled?: boolean;
filter?: (...args: any[])=>any;
hint?: SearchableSelectHint;
id?: string;
label?: string;
message?: string;
messageType?: SearchableSelectMessageType;
name?: string;
onBlur?: (...args: any[])=>any;
onChange?: (...args: any[])=>any;
onFocus?: (...args: any[])=>any;
onKeyDown?: (...args: any[])=>any;
onTextChange?: (...args: any[])=>any;
options: SearchableSelectOptions[];
placeholder?: string;
required?: boolean;
selected?: string;
}
declare const SearchableSelect: React.FC<SearchableSelectProps>;
type SelectMessageType = 'error' | 'valid';
interface SelectOptions {
disabled?: boolean;
hidden?: boolean;
label: string;
value: string;
}
type SelectSelected = React.ReactElement<any> | string;
interface SelectProps {
className?: string;
disabled?: boolean;
hint?: string | Object | any[];
id?: string;
label?: string;
message?: string;
messageType?: SelectMessageType;
onChange?: (...args: any[])=>any;
options: SelectOptions[];
required?: boolean;
selected?: SelectSelected;
}
declare const Select: React.FC<SelectProps>;
type SelectWrapperHint = string | Object | any[];
type SelectWrapperMessageType = 'error' | 'valid';
interface SelectWrapperProps {
children: React.ReactNode;
className?: string;
hint?: SelectWrapperHint;
label?: string;
message?: string;
messageType?: SelectWrapperMessageType;
onChange?: (...args: any[])=>any;
required?: boolean;
selectId: string;
}
declare const SelectWrapper: React.FC<SelectWrapperProps>;
type ShareChildren = React.ReactNode[] | React.ReactNode;
interface ShareProps {
title: string;
children: ShareChildren;
className?: string;
}
declare const Share: React.FC<ShareProps>;
interface ShareButtonProps {
type: string;
label: string;
href?: string;
onClick?: (...args: any[]) => any;
className?: string;
}
declare const ShareButton: React.FC<ShareButtonProps>;
type SideMenuChildren = React.ReactNode[] | React.ReactNode;
interface SideMenuProps {
sticky?: boolean;
children: SideMenuChildren;
className?: string;
title?: string;
buttonLabel: string;
}
declare const SideMenu: React.FC<SideMenuProps>;
type SideMenuItemChildren = React.ReactNode[] | React.ReactNode;
interface SideMenuItemProps {
children: SideMenuItemChildren;
title: string;
expandedDefault?: boolean;
className?: string;
current?: boolean;
}
declare const SideMenuItem: React.FC<SideMenuItemProps>;
type SideMenuLinkChildren = string | React.ReactNode;
interface SideMenuLinkProps {
children: SideMenuLinkChildren;
href?: string;
className?: string;
asLink?: React.ReactElement<any>;
onClick?: (...args: any[])=>any;
current?: boolean;
}
declare const SideMenuLink: React.FC<SideMenuLinkProps>;
type SkiplinkItemChildren = string | React.ReactNode;
interface SkiplinkItemProps {
children: SkiplinkItemChildren;
href?: string;
className?: string;
target?: string;
asLink?: React.ReactElement<any>;
}
declare const SkiplinkItem: React.FC<SkiplinkItemProps>;
type SkiplinksChildren = React.ReactNode[] | React.ReactNode;
interface SkiplinksProps {
children: SkiplinksChildren;
className?: string;
}
declare const Skiplinks: React.FC<SkiplinksProps>;
type TitleAs$1 = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
interface StepperProps {
className?: string;
currentStep: number;
currentTitle: string,
nextStepTitle: string,
steps: number;
titleAs?: TitleAs$1;
}
declare const Stepper: React.FC<StepperProps>;
type SummaryChildren = React.ReactNode[] | React.ReactNode | string;
interface SummaryProps {
children: SummaryChildren;
title: string;
}
declare const Summary: React.FC<SummaryProps>;
interface SummaryItemProps {
children: string;
href?: string;
className?: string;
target?: string;
asLink?: React.ReactElement<any>;
}
declare const SummaryItem: React.FC<SummaryItemProps>;
interface SwitchThemeProps {
title?: string;
legend?: string;
darkLabel?: string;
lightLabel?: string;
systemLabel?: string;
systemHint?: string;
isOpen: boolean;
setIsOpen: (...args: any[])=>any;
}
declare const SwitchTheme: React.FC<SwitchThemeProps>;
declare const useTheme: () => string;
type SimpleTableCaptionPosition = 'top' | 'bottom' | 'none';
interface SimpleTableProps {
emptyDataMessage?: string;
fixedLayout?: boolean;
noScroll?: boolean;
bordered?: boolean;
captionPosition?: SimpleTableCaptionPosition;
caption: string;
className?: string;
data: Object[];
}
declare const SimpleTable: React.FC<SimpleTableProps>;
type TableCaptionPosition = 'top' | 'bottom' | 'none';
type TableRowKey = string | ((...args: any[])=>any);
type TablePaginationPosition = 'left' | 'center' | 'right';
interface TableProps {
columns: Object[];
data: any[];
fixedLayout?: boolean;
fixedHeader?: boolean;
tableID?: string;
tableClassName?: string;
noScroll?: boolean;
bordered?: boolean;
captionPosition?: TableCaptionPosition;
caption?: string;
rowKey: TableRowKey;
children?: React.ReactNode;
className?: string;
pagination?: boolean;
paginationPosition?: TablePaginationPosition;
surrendingPages?: number;
perPage?: number;
page?: number;
setPage?: (...args: any[])=>any;
}
declare const Table: React.FC<TableProps>;
type TabChildren = React.ReactNode[] | React.ReactNode | string;
interface TabProps {
className?: string;
children: TabChildren;
label: React.ReactNode;
icon?: string;
}
declare const Tab: React.FC<TabProps>;
interface TabButtonProps {
className?: string;
onClickTab: (...args: any[])=>any;
onKeyDownTab: (...args: any[])=>any;
label: React.ReactNode;
icon?: string;
index: number;
activeTab: number;
}
declare const TabButton: React.FC<TabButtonProps>;
type TabsChildren = React.ReactNode[] | React.ReactNode | string;
interface TabsProps {
className?: string;
defaultActiveTab?: number;
children: TabsChildren;
onChange?: (index: number) => void
}
declare const Tabs: React.FC<TabsProps>;
type TagAs = 'a' | 'span' | 'p';
type TagChildren = string | React.ReactNode;
type TagIconPosition = 'left' | 'right';
interface TagProps {
className?: string;
as?: TagAs;
children?: TagChildren;
small?: boolean;
selected?: boolean;
closable?: boolean;
href?: string;
title?: string;
target?: string;
icon?: string;
onClick?: undefined;
iconPosition?: TagIconPosition;
colorFamily?: string;
}
declare const Tag: React.FC<TagProps>;
interface TagGroupProps {
className?: string;
children: React.ReactNode;
}
declare const TagGroup: React.FC<TagGroupProps>;
type TextInputHint = string | Object | any[];
type TextInputMessageType = 'error' | 'valid' | '';
type TextInputType = 'text' | 'date' | 'number' | 'email' | 'password';
interface BaseTextInputProps {
className?: string;
disabled?: boolean;
hint?: TextInputHint;
label?: string;
message?: string;
messageType?: TextInputMessageType;
onBlur?: (...args: any[])=>any;
required?: boolean;
withAutoValidation?: boolean;
}
interface TextFieldProps extends React.ComponentPropsWithRef<'input'>, BaseTextInputProps {
textarea?: false;
type?: TextInputType;
}
interface TextareaProps extends React.ComponentPropsWithRef<'textarea'>, BaseTextInputProps {
textarea: true;
}
type TextInputProps = TextFieldProps | TextareaProps;
declare const TextInput: React.FC<TextInputProps>;
type TileChildren = React.ReactNode[] | React.ReactNode;
interface TileProps {
className?: string;
/**
* Source of the image — size is fixed 80x80
*/
horizontal?: boolean;
color?: string;
verticalMedium?: boolean;
horizontalMedium?: boolean;
/**
* One of: node, arrayOf(node), string
*/
children: TileChildren;
onClick?: (...args: any[])=>any;
ariaLabel?: string;
}
declare const Tile: React.FC<TileProps>;
type TileBodyTitleAs = 'p' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
type TileBodyChildren = React.ReactNode[] | React.ReactNode | string;
interface TileBodyProps {
/**
* Html tag to render in accordion title.
*/
titleAs?: TileBodyTitleAs;
title: string;
description?: string;
linkTarget?: string;
linkTitle?: string;
linkHref?: string;
children?: TileBodyChildren;
className?: string;
asLink?: React.ReactElement<any>;
}
declare const TileBody: React.FC<TileBodyProps>;
interface TileImageProps {
className?: string;
title?: string;
alt: string;
/**
* Source of the image — size is fixed 80x80
*/
src: string;
}
declare const TileImage: React.FC<TileImageProps>;
interface ToggleProps {
onChange?: (...args: any[])=>any;
id?: string;
className?: string;
hasSeparator?: boolean;
hasLabelLeft?: boolean;
checked?: boolean;
description?: string;
label: string;
toggleColor?: string;
}
declare const Toggle: React.FC<ToggleProps>;
type ColChildren = React.ReactNode[] | React.ReactNode | string;
interface ColProps {
children?: ColChildren;
spacing?: string;
/**
* Col size
*/
n?: string;
/**
* Set Col offset.
*/
offset?: string;
className?: string;
}
declare const Col: React.FC<ColProps>;
type ContainerChildren = React.ReactNode[] | React.ReactNode | string;
type ContainerAs = 'article' | 'aside' | 'div' |'header' | 'footer' | 'main' | 'nav' | 'section';
interface ContainerProps {
/**
* Container children node (should be Rows)
*/
children?: ContainerChildren;
/**
* Container with no outer margins
*/
fluid?: boolean;
spacing?: string;
role?: string;
className?: string;
as?: ContainerAs;
}
declare const Container: React.FC<ContainerProps>;
type RowChildren = React.ReactNode[] | React.ReactNode | string;
type RowAlignItems = 'top' | 'middle' | 'bottom';
type RowJustifyContent = 'right' | 'center' | 'left';
interface RowProps {
/**
* Row children (should always be Col)
*/
children?: RowChildren;
/**
* Add gutters to row
*/
gutters?: boolean;
spacing?: string;
/**
* Vertical alignment of children
*/
alignItems?: RowAlignItems;
/**
* Horizontal alignement.
*/
justifyContent?: RowJustifyContent;
className?: string;
}
declare const Row: React.FC<RowProps>;
type IconSize = 'fw' | 'xxs' | 'xs' | 'sm' | '1x' | 'lg' | 'xl' | '2x' | '3x' | '10x';
type IconVerticalAlign = 'middle' | 'sub' | 'top';
type IconIconPosition = 'left' | 'right' | 'center';
type IconAs = 'span' | 'i' | 'div' | 'p';
type IconChildren = React.ReactElement<any>[] | React.ReactElement<any> | string;
interface IconProps {
size?: IconSize;
name: string;
verticalAlign?: IconVerticalAlign;
className?: string;
iconPosition?: IconIconPosition;
as?: IconAs;
children?: IconChildren;
title?: string;
color?: string;
}
declare const Icon: React.FC<IconProps>;
type MediaImageSize = 'sm' | 'md' | 'lg';
interface MediaImageProps {
alt?: string;
className?: string;
legend?: string;
size?: MediaImageSize;
src: string;
}
declare const MediaImage: React.FC<MediaImageProps>;
type MediaVideoRatio = '' | '4x3';
type MediaVideoSize = 'sm' | 'md' | 'lg';
interface MediaVideoProps {
buttonLabel?: string;
children: React.ReactNode;
className?: string;
legend?: string;
onTranscriptionClick?: (...args: any[])=>any;
ratio?: MediaVideoRatio;
size?: MediaVideoSize;
}
declare const MediaVideo: React.FC<MediaVideoProps>;
type TextAs = 'p' | 'span';
type TextSize = 'xs' | 'sm' | 'md' | 'lg' | 'lead';
type TextChildren = string | React.ReactNode;
interface TextProps {
/**
* html tag to render
*/
as?: TextAs;
size?: TextSize;
spacing?: string;
/**
* If true Spectral is used instead of Marianne.
*/
alt?: boolean;
bold?: boolean;
children: TextChildren;
className?: string;
}
declare const Text: React.FC<TextProps>;
type TitleChildren = string | React.ReactNode;
type TitleAs = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
type TitleLook = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | '';
interface TitleProps {
children: TitleChildren;
/**
* html tag to render
*/
as: TitleAs;
look?: TitleLook;
className?: string;
spacing?: string;
}
declare const Title: React.FC<TitleProps>;
type AltTitleChildren = string | React.ReactNode;
type AltTitleAs = 'h1' | 'h2' | 'h3' | 'h4';
type AltTitleSize = 'xl' | 'lg' | 'md' | 'sm' | 'xs';
interface AltTitleProps {
children: AltTitleChildren;
className?: string;
/**
* html tag to render
*/
spacing?: string;
as: AltTitleAs;
size: AltTitleSize;
}
declare const AltTitle: React.FC<AltTitleProps>;
export { Accordion, AccordionItem, Alert, AltTitle, Badge, BadgeGroup, Breadcrumb, BreadcrumbItem, Button, ButtonGroup, Callout, CalloutText, CalloutTitle, Card, CardDescription, CardDetail, CardFooter, CardHeader, CardImage, CardTitle, Checkbox, CheckboxGroup, Col, ConsentBanner, ConsentManager, ConsentService, Container, Download$1 as Download, Download as DownloadGroup, File, Footer, FooterBody, FooterBodyItem, FooterBottom, FooterCopy, FooterLink, FooterOperator, FooterPartners, FooterPartnersLogo, FooterPartnersSecondaryTitle, FooterPartnersTitle, FooterTop, FooterTopCategory, Header, HeaderBody, HeaderNav, HeaderOperator, Highlight, Icon, Link, Logo, MediaImage, MediaVideo, MegaNavItem, MegaNavSubItem, Modal, ModalClose, ModalContent, ModalFooter, ModalTitle, NavItem, NavItemWithSubItem as NavItemWithSubItems, NavSubItem, Notice, Pagination, PaginationItem, Radio, RadioGroup, Row, SearchBar, SearchableSelect, Select, SelectWrapper, Service, Share, ShareButton, SideMenu, SideMenuItem, SideMenuLink, SimpleTable, SkiplinkItem, Skiplinks, Stepper, Summary, SummaryItem, SwitchTheme, Tab, TabButton, Table, Tabs, Tag, TagGroup, Text, TextInput, Tile, TileBody, TileImage, Title, Toggle, Tool, ToolItem, ToolItemGroup, ToolTranslate, ToolTranslateItem, useTheme };