@stihl-design-system/components
Version:
Welcome to the STIHL Design System react component library.
41 lines (40 loc) • 1.8 kB
TypeScript
import { JSX } from 'react';
import { Theme } from '../../../../utils/theme';
import { InputFileTranslations } from '../../InputFile.utils';
export type ProgressIndicatorStatus = 'uploading' | 'error';
export type ProgressIndicatorVariant = 'bar' | 'text';
export interface ProgressIndicatorProps extends React.HTMLAttributes<HTMLDivElement> {
id: string;
fileName: string;
/**
* Upload progress percentage; 'indeterminate' for unknown progress
* or a number between 0 and 100
* */
percent: 'indeterminate' | number;
/**
* Current status of the progress indicator 'uploading' or 'error'.
* Success does not display a progress bar / text but a SystemFeedbackMessage.
* */
progressStatus: ProgressIndicatorStatus;
/**
* Variant of the progress indicator to display: 'bar' or 'text'
*/
variant: ProgressIndicatorVariant;
/**
* Defines the theme.
* @default 'light'
*/
theme?: Theme;
t: (key: keyof InputFileTranslations, values?: Record<string, string | number>) => string;
}
/**
* Accessible progress indicator for file uploads.
*
* A11y decisions:
* - The root element carries role="progressbar" per WAI-ARIA Authoring Practices.
* - We assume the `percent` prop is always a valid integer between 0 and 100 (validated upstream), so no clamping here.
* - `aria-valuemin` and `aria-valuemax` are omitted; defaults (0 and 100) are implicit for a percentage UI.
* - `aria-valuenow` reflects the provided percent value.
* - Visual percentage text remains for sighted users; screen readers rely on `aria-label` and `aria-valuenow`.
*/
export declare const ProgressIndicator: ({ className, fileName, id, percent, progressStatus, variant, theme, t, }: ProgressIndicatorProps) => JSX.Element | null;