@wix/design-system
Version:
@wix/design-system
83 lines • 3.37 kB
TypeScript
import { type ReactNode, type MouseEvent, type KeyboardEvent } from 'react';
import { TooltipCommonProps } from '../common';
export type ThumbnailSize = 'tiny' | 'small' | 'medium';
export type ThumbnailContentAlignment = 'top' | 'center';
export type ThumbnailTextPosition = 'inside' | 'outside';
export type ThumbnailSkin = 'primary' | 'secondary';
export interface ThumbnailProps {
/** Applies a data-hook HTML attribute that can be used in the tests. */
dataHook?: string;
/** Specifies a CSS class name to be appended to the component's root element.
* @internal
*/
className?: string;
/** Sets the aria-label attribute for accessibility. */
ariaLabel?: string;
/** Adds a border and corner radius
* @default true
*/
border?: boolean;
/** Renders specified children items inside of the thumbnail. Accepts any kind of content. When passed, title will be rendered below a thumbnail. */
children?: ReactNode;
/** Sets the title of a thumbnail. */
title?: ReactNode;
/** Sets thumbnail description. */
description?: ReactNode;
/** Specifies an image to be displayed inside of a thumbnail.
* If given as string, it will be used within `<img/>`.
* Otherwise can be given as React.Node
*/
image?: ReactNode;
/** Controls the size of a thumbnail.
* @default medium
*/
size?: ThumbnailSize;
/** Specifies whether a thumbnail is selected.
* @default false
*/
selected?: boolean;
/** Specifies whether thumbnail interactions are disabled.
* @default false
*/
disabled?: boolean;
/** Hides a checkmark icon that indicates selected thumbnail. Selected option will be highlighted with border only. */
hideSelectedIcon?: boolean;
/** Render image as a background of a thumbnail. As a result, title is rendered below the image thumbnail. */
backgroundImage?: string | ReactNode;
/** Defines a callback function which is called every time a thumbnail is clicked. */
onClick?: (event: MouseEvent<HTMLElement> | KeyboardEvent<HTMLElement>) => void;
/** Defines a callback function which is called every time mouse is over a thumbnail. */
onMouseOver?: (event: MouseEvent<HTMLElement>) => void;
/** Controls the width of a thumbnail. */
width?: string | number;
/** Controls the height of a thumbnail. */
height?: string | number;
/** Controls vertical alignment of content.
* @default center
*/
contentAlignment?: ThumbnailContentAlignment;
/** Enables ellipsis text truncation.
* @default false
*/
ellipsis?: boolean;
/** Controls maximum lines that is allowed before ellipsis text truncation is applied */
maxLines?: number;
/** Controls text position whether it is outside or inside of a thumbnail
* @default inside
*/
textPosition?: ThumbnailTextPosition;
/** Turns off padding for thumbnail with textPosition='inside'
* @default false
*/
noPadding?: boolean;
/** Allows to pass tooltip common props.
* @linkTypeTo components-overlays--tooltip
* @setTypeName TooltipCommonProps
*/
tooltipProps?: TooltipCommonProps;
/** Controls the skin (visual style) of a thumbnail.
* @default primary
*/
skin?: ThumbnailSkin;
}
//# sourceMappingURL=Thumbnail.types.d.ts.map