UNPKG

@itwin/itwinui-react

Version:

A react component library for iTwinUI

61 lines (60 loc) 2.63 kB
import * as React from 'react'; import type { CommonProps } from '../../utils/index.js'; export type TitleTranslations = { termsOfService?: string; privacy?: string; termsOfUse?: string; cookies?: string; legalNotices?: string; }; type FooterProps = { /** * Customize footer elements. * Providing a `FooterElement[]` will append the custom elements to the end of the default elements. * Providing a function that returns a `FooterElement[]` allows further customization - whatever is returned from the function is displayed in the footer with no amendments. */ customElements?: FooterElement[] | ((defaultElements: FooterElement[]) => FooterElement[]); /** * Provide localized strings. */ translatedTitles?: TitleTranslations; /** * Custom footer content. If provided, it will render only what you passed. * Use `defaultFooterElements` to get the default footer elements. */ children?: React.ReactNode; } & CommonProps; export type FooterElement = { /** * Title of the footer element. */ title: string; /** * URL of the footer element. */ url?: string; /** * Key of the footer element. */ key?: keyof TitleTranslations | 'copyright' | (string & Record<never, never>); }; export declare const defaultFooterElements: FooterElement[]; /** * Footer element with all needed legal and info links. * Be sure to place it manually at the bottom of your page. * You can use position 'absolute' with relative body or set the height of the content and place footer at the end. * @example <caption>Appending custom element after default elements</caption> * <Footer customElements={[{title: 'Bentley', url: 'https://www.bentley.com/'}]} /> * @example <caption>Returning only custom elements</caption> * <Footer customElements={() => newFooterElements)} /> * @example <caption>Filtering out a specific element</caption> * <Footer customElements={(defaultElements) => defaultElements.filter(({ key }) => key !== 'privacy' )} /> * @example <caption>Changing a url</caption> * <Footer customElements={(defaultElements) => defaultElements.map(element => ({ ...element, url: element.key === 'privacy' ? customPrivacyUrl : element.url }))} /> */ export declare const Footer: ((props: FooterProps) => React.JSX.Element) & { List: import("../../utils/props.js").PolymorphicForwardRefComponent<"ul", {}>; Item: import("../../utils/props.js").PolymorphicForwardRefComponent<"li", {}>; Separator: import("../../utils/props.js").PolymorphicForwardRefComponent<"li", {}>; }; export {};