@intility/bifrost-react
Version:
React library for Intility's design system, Bifrost.
39 lines (38 loc) • 1.56 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { forwardRef } from "react";
import classnames from "classnames";
/**
* Display progress as percentage
*/ const ProgressBar = /*#__PURE__*/ forwardRef(({ children, className, value, max = 100, size = "medium", hideLabel = false, disabled = false, ...props }, ref)=>{
const cappedValue = Math.min(Math.max(0, value), max);
const percentageValue = cappedValue / max * 100;
const label = `${Math.round(percentageValue)}%`;
return /*#__PURE__*/ _jsxs("div", {
title: hideLabel ? label : "",
"aria-label": hideLabel ? label : "",
ref: ref,
...props,
className: classnames(className, "bf-progressbar-wrapper"),
children: [
/*#__PURE__*/ _jsx("div", {
className: classnames("bf-progressbar", {
"bf-progressbar-small": size === "small",
"bf-progressbar-large": size === "large",
"bf-progressbar-disabled": disabled
}),
children: /*#__PURE__*/ _jsx("div", {
className: "bf-progressbar-progress",
style: {
width: `${percentageValue}%`
}
})
}),
!hideLabel && /*#__PURE__*/ _jsx("span", {
className: "bf-progressbar-label",
children: children ?? label
})
]
});
});
ProgressBar.displayName = "ProgressBar";
export default ProgressBar;