@codegouvfr/react-dsfr
Version:
French State Design System React integration library
67 lines (66 loc) • 2.2 kB
TypeScript
import type { ComponentProps, CSSProperties, ReactNode } from "react";
import React from "react";
import { type RegisteredLinkProps } from "./link";
export type TileProps = {
id?: string;
className?: string;
title: ReactNode;
titleAs?: `h${2 | 3 | 4 | 5 | 6}`;
linkProps?: RegisteredLinkProps;
buttonProps?: ComponentProps<"button">;
downloadButton?: boolean;
desc?: ReactNode;
detail?: ReactNode;
start?: ReactNode;
grey?: boolean;
/** make the whole tile clickable */
enlargeLinkOrButton?: boolean;
classes?: Partial<Record<"root" | "content" | "title" | "header" | "link" | "button" | "body" | "desc" | "detail" | "start" | "img" | "imgTag" | "artwork", string>>;
orientation?: "horizontal" | "vertical";
small?: boolean;
noIcon?: boolean;
noBorder?: boolean;
noBackground?: boolean;
disabled?: boolean;
style?: CSSProperties;
} & (TileProps.WithImage | TileProps.WithPicto) & (TileProps.WithLink | TileProps.WithButton | TileProps.Unclickable);
export declare namespace TileProps {
type Unclickable = {
linkProps?: never;
buttonProps?: never;
enlargeLinkOrButton?: never;
};
type WithLink = {
linkProps: RegisteredLinkProps;
buttonProps?: never;
};
type WithButton = {
linkProps?: never;
buttonProps: ComponentProps<"button">;
};
type WithImage = {
imageUrl?: string;
imageAlt?: string;
/**
* @deprecated imageWidth has no effect
*/
imageWidth?: string | number;
/**
* @deprecated imageHeight has no effect
*/
imageHeight?: string | number;
imageSvg?: boolean;
pictogram?: never;
};
type WithPicto = {
imageUrl?: never;
imageAlt?: never;
imageWidth?: never;
imageHeight?: never;
imageSvg?: never;
pictogram: ReactNode;
};
}
/** @see <https://components.react-dsfr.codegouv.studio/?path=/docs/components-tile> */
export declare const Tile: React.MemoExoticComponent<React.ForwardRefExoticComponent<TileProps & React.RefAttributes<HTMLDivElement>>>;
export default Tile;