@wix/design-system/dist/types/MediaOverlay/index.d.ts

@wix/design-system

import * as React from 'react';

export type MediaOverlaySkin = 'none' | 'gradient' | 'dark';

export interface MediaOverlayProps {
  /**
   * Accepts any component as `<MediaOverlay.Content>` content.
   * Each element has the following properties:
   * - `visible` - define when to display this content. Possible values are:
   *   - `default` (default) - content is visible only when not hovered.
   *   - `hover` - content is visible only when hovered.
   *   - `always` - content is always visible.
   * - `placement` - define where to place this content. Possible values are `top-start`,
   * `top-end`, `middle` (default), `bottom-end` and `bottom-start`.
   */
  children?: React.ReactNode;
  /** Accept image URL or a custom node as a media background. */
  media: React.ReactNode;
  /** Sets a default overlay skin.
   * @default 'none'
   */
  skin?: MediaOverlaySkin;
  /** Sets a hover overlay skin. */
  hoverSkin?: MediaOverlaySkin;
  /** Applies a data-hook HTML attribute that can be used in the tests. */
  dataHook?: string;
  /** Toggles hover state in a controlled mode. */
  hovered?: boolean;
  /**
   * Defines a click handler. When provided, component will be clickable and will have a pointer cursor on hover.
   */
  onClick?(): void;
  /** Removes a default borders radius. */
  removeRoundedBorders?: boolean;
  /** Specifies a CSS class name to be appended to the component's root element.
   * @internal
   */
  className?: string;
  /** Control border radius of the media container. */
  borderRadius?: string | number;
  /** Adding aria-hidden="true" to an element removes that element and all of its children from the accessibility tree. */
  ariaHidden?: boolean;
  /** Indicates if the media is a video element. When true, displays play/pause controls. */
  isVideo?: boolean;
  /** Controls visibility of the play button overlay. Only applies when isVideo is true.
   * @default true
   */
  showPlayButton?: boolean;
  /** Video element source URL. Only used when isVideo is true. */
  videoSrc?: string;
  /** Additional props to pass to the video element. */
  videoProps?: React.VideoHTMLAttributes<HTMLVideoElement>;
}

export type MediaOverlayContentVisible = 'default' | 'hover' | 'always';
export type MediaOverlayContentPlacement =
  | 'top-start'
  | 'top-end'
  | 'middle'
  | 'bottom-end'
  | 'bottom-start';

export interface MediaOverlayContentProps {
  /**
   * Accepts any component as `<MediaOverlay.Content>` content.
   * Each element has the following properties:
   * - `visible` - define when to display this content. Possible values are:
   *   - `default` (default) - content is visible only when not hovered.
   *   - `hover` - content is visible only when hovered.
   *   - `always` - content is always visible.
   * - `placement` - define where to place this content. Possible values are `top-start`,
   * `top-end`, `middle` (default), `bottom-end` and `bottom-start`.
   */
  children?: React.ReactNode;
  visible?: MediaOverlayContentVisible;
  placement?: MediaOverlayContentPlacement;
}

export interface DragHandleProps {
  /** When provided, wraps the icon in a focusable button with these attributes */
  buttonProps?: React.ButtonHTMLAttributes<HTMLButtonElement>;
}

export default class MediaOverlay extends React.PureComponent<MediaOverlayProps> {
  static Content: React.FC<MediaOverlayContentProps>;
  static DragHandle: React.FC<DragHandleProps>;
}