@patreon/studio
Version:
Patreon Studio Design System
87 lines (86 loc) • 2.33 kB
TypeScript
export interface ResponsiveImage {
/**
* The source of the image.
*/
src: string;
/**
* The source of the image @2x pixel density.
*/
src2x?: string;
/**
* The source of the image for dark mode.
*/
darkSrc?: string;
/**
* The source of the image for dark mode @2x pixel density.
*/
darkSrc2x?: string;
}
interface SharedImageProps extends Omit<React.HTMLProps<HTMLImageElement>, 'src' | 'ref' | 'as' | 'placeholder'> {
/**
* The source of the image. Can be a string or an ResponsiveImage object.
*/
src: string | ResponsiveImage;
/**
* Required for accessibility. A blank string is acceptable if the image isn't necessary to a user's understanding or is adequately described by adjacent elements.
*/
alt: string;
/**
* Sizing of the image.
* @default cover
*
* cover will crop the image to cover the container.
* contain will fit the image inside the container.
*/
sizing?: 'cover' | 'contain';
/**
* Static height of the image. The `ratio` will be used to calculate the height if ommited.
*/
height?: number | string;
/**
* Determines cropping size of the image.
* @default 1
*/
ratio?: number;
/**
* Determines the loading priority of the image
*/
loading?: HTMLImageElement['loading'];
/**
* Fallback onError handler when error
*/
onError?: React.ReactEventHandler<HTMLImageElement>;
/**
* HTML id property.
*/
id?: string;
/**
* String selector for testing.
*/
'data-tag'?: string;
}
export interface SourceImage {
/**
* The srcSet of the image.
*/
srcSet: string;
/**
* Optional media query for the image.
*/
media?: string;
}
type BlurDataURL = `data:image/${string}`;
interface ImageWithPlaceholder extends SharedImageProps {
placeholder: React.ReactNode;
blurDataUrl?: never;
}
interface ImageWithBlurDataUrl extends SharedImageProps {
placeholder?: never;
blurDataUrl: BlurDataURL;
}
interface ImageWithoutPlaceholder extends SharedImageProps {
placeholder?: never;
blurDataUrl?: never;
}
export type ImageProps = ImageWithPlaceholder | ImageWithBlurDataUrl | ImageWithoutPlaceholder;
export {};