summaryrefslogtreecommitdiffstats
path: root/src/components/atoms/loaders/progress-bar.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'src/components/atoms/loaders/progress-bar.tsx')
-rw-r--r--src/components/atoms/loaders/progress-bar.tsx26
1 files changed, 15 insertions, 11 deletions
diff --git a/src/components/atoms/loaders/progress-bar.tsx b/src/components/atoms/loaders/progress-bar.tsx
index 9bac847..60c585a 100644
--- a/src/components/atoms/loaders/progress-bar.tsx
+++ b/src/components/atoms/loaders/progress-bar.tsx
@@ -3,17 +3,17 @@ import styles from './progress-bar.module.scss';
export type ProgressBarProps = {
/**
- * Accessible progress bar name.
- */
- 'aria-label'?: string;
- /**
* Current value.
*/
current: number;
/**
- * Additional information to display before progress bar.
+ * The progress bar id.
+ */
+ id: string;
+ /**
+ * The progress bar label.
*/
- info?: string;
+ label: string;
/**
* Minimal value.
*/
@@ -31,23 +31,27 @@ export type ProgressBarProps = {
*/
const ProgressBar: FC<ProgressBarProps> = ({
current,
- info,
+ id,
+ label,
min,
max,
- ...props
}) => {
return (
<div className={styles.progress}>
- {info && <div className={styles.progress__info}>{info}</div>}
+ <label htmlFor={id} className={styles.progress__info}>
+ {label}
+ </label>
<progress
className={styles.progress__bar}
+ id={id}
max={max}
value={current}
aria-valuemin={min}
aria-valuemax={max}
aria-valuenow={current}
- {...props}
- ></progress>
+ >
+ {current}/{max}
+ </progress>
</div>
);
};