common SecurityLevelIndicator.tsx

100% Statements 40/40

100% Branches 12/12

100% Functions 3/3

100% Lines 40/40

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 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81

1x 139x 139x 139x 139x 139x 139x 139x 139x 3x 139x 6x 139x 124x 139x 4x 139x 1x 139x 1x 139x 139x 139x 139x 139x 1x 139x 31x 139x 107x 139x 139x 139x 139x 139x 139x 139x 139x 139x 1x

import React from "react";
import { SecurityLevel } from "../../types/cia";
 
interface SecurityLevelIndicatorProps {
  /**
   * The security level to display
   */
  level: SecurityLevel;
 
  /**
   * Size variant
   */
  size?: "sm" | "md" | "lg";
 
  /**
   * Optional CSS class name
   */
  className?: string;
 
  /**
   * Optional test ID for testing
   */
  testId?: string;
}
 
/**
 * A simple indicator that displays a security level with appropriate color
 *
 * ## UX Perspective
 *
 * Provides consistent visual indicators of security levels using
 * color psychology to communicate the level of security provided. 🎨
 */
const SecurityLevelIndicator: React.FC<SecurityLevelIndicatorProps> = ({
  level,
  size = "md",
  className = "",
  testId,
}) => {
  // Determine color based on level
  const getColor = (): string => {
    switch (level) {
      case "None":
        return "bg-red-100 text-red-800 dark:bg-red-900 dark:bg-opacity-20 dark:text-red-300";
      case "Low":
        return "bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:bg-opacity-20 dark:text-yellow-300";
      case "Moderate":
        return "bg-blue-100 text-blue-800 dark:bg-blue-900 dark:bg-opacity-20 dark:text-blue-300";
      case "High":
        return "bg-green-100 text-green-800 dark:bg-green-900 dark:bg-opacity-20 dark:text-green-300";
      case "Very High":
        return "bg-purple-100 text-purple-800 dark:bg-purple-900 dark:bg-opacity-20 dark:text-purple-300";
      default:
        return "bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-300";
    }
  };
 
  // Determine size classes
  const getSizeClasses = (): string => {
    switch (size) {
      case "sm":
        return "px-1.5 py-0.5 text-xs";
      case "lg":
        return "px-3 py-1.5 text-sm";
      default: // md
        return "px-2 py-1 text-xs";
    }
  };
 
  return (
    <span
      className={`font-medium rounded-md ${getColor()} ${getSizeClasses()} ${className}`}
      data-testid={testId}
    >
      {level}
    </span>
  );
};
 
export default SecurityLevelIndicator;