common RiskLevelBadge.tsx

85.71% Statements 24/28
66.66% Branches 6/9
100% Functions 2/2
85.71% Lines 24/28
Press n or j to go to the next uncovered block, b, p or k for the previous block.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54  
1x
1x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1x
13x
13x
13x
13x
13x
 
13x
 
 
13x
1x
1x
 
1x
 
 
 
1x
 
13x
13x
13x
13x
13x
 
13x
13x
13x
 
13x
 
1x
  import React from "react";
import { getRiskBadgeVariant } from "../../utils";
import StatusBadge from "./StatusBadge";
 
interface RiskLevelBadgeProps {
  riskLevel: string;
  testId?: string;
  className?: string;
  showIcon?: boolean;
}
 
/**
 * A specialized badge component for displaying risk levels with consistent styling
 * 
 * ## Business Perspective
 * 
 * This component standardizes risk level visualization across the application,
 * ensuring consistent communication of risk to stakeholders. The visual consistency
 * improves risk perception and decision-making. 📊
 */
const RiskLevelBadge: React.FC<RiskLevelBadgeProps> = ({
  riskLevel,
  testId,
  className = "",
  showIcon = false
}) => {
  // Get appropriate badge variant for risk level
  const badgeVariant = getRiskBadgeVariant(riskLevel);
 
  // Risk level icons
  const getRiskIcon = () => {
    const normalizedLevel = riskLevel?.toLowerCase() || "";
    if (normalizedLevel.includes("critical")) return "⚠️";
    if (normalizedLevel.includes("high")) return "⚠️";
    if (normalizedLevel.includes("medium") || normalizedLevel.includes("moderate")) return "⚠";
    if (normalizedLevel.includes("low")) return "ℹ️";
    if (normalizedLevel.includes("minimal")) return "✓";
    return "";
  };
 
  return (
    <StatusBadge 
      status={badgeVariant} 
      testId={testId || `risk-level-${riskLevel?.toLowerCase().replace(/\s+/g, '-')}`}
      className={className}
    >
      {showIcon && <span className="mr-1">{getRiskIcon()}</span>}
      {riskLevel || "Unknown"}
    </StatusBadge>
  );
};
 
export default RiskLevelBadge;