binarybeach/bb-plane-fork
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

[WEB-2799] chore: global component and code refactor (#6131)

Browse source 
* chore: local storage helper hook added to package

* chore: tabs global component added

* chore: collapsible button improvement

* chore: linear progress indicator improvement

* chore: fill icon set added to package
This commit is contained in:
Anmol Singh Bhatia 2024-12-02 13:22:08 +05:30 • committed by GitHub
parent 75ada1bfac
commit 1b9033993d
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
11 changed files with 243 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

17
packages/ui/src/progress/linear-progress-indicator.tsx
View file

@ -6,7 +6,9 @@ type Props = {
data: any;
noTooltip?: boolean;
inPercentage?: boolean;
size?: "sm" | "md" | "lg";
size?: "sm" | "md" | "lg" | "xl";
className?: string;
barClassName?: string;
};
export const LinearProgressIndicator: React.FC<Props> = ({
@ -14,6 +16,8 @@ export const LinearProgressIndicator: React.FC<Props> = ({
noTooltip = false,
inPercentage = false,
size = "sm",
className = "",
barClassName = "",
}) => {
const total = data.reduce((acc: any, cur: any) => acc + cur.value, 0);
// eslint-disable-next-line @typescript-eslint/no-unused-vars
@ -31,7 +35,7 @@ export const LinearProgressIndicator: React.FC<Props> = ({
else
return (
<Tooltip key={item.id} tooltipContent={`${item.name} ${Math.round(item.value)}${inPercentage ? "%" : ""}`}>
<div style={style} className="first:rounded-l-sm last:rounded-r-sm" />
<div style={style} className={cn("first:rounded-l-sm last:rounded-r-sm", barClassName)} />
</Tooltip>
);
});
@ -42,13 +46,12 @@ export const LinearProgressIndicator: React.FC<Props> = ({
"h-2": size === "sm",
"h-3": size === "md",
"h-3.5": size === "lg",
"h-[14px]": size === "xl",
})}
>
{total === 0 ? (
<div className="flex h-full w-full gap-[1.5px] p-[2px] bg-custom-background-90 rounded-sm">{bars}</div>
) : (
<div className="flex h-full w-full gap-[1.5px] p-[2px] bg-custom-background-90 rounded-sm">{bars}</div>
)}
<div className={cn("flex h-full w-full gap-[1.5px] p-[2px] bg-custom-background-90 rounded-sm", className)}>
{bars}
</div>
</div>
);
};