common SecurityLevelBadge.tsx

96% Statements 48/50

88.88% Branches 16/18

100% Functions 3/3

96% Lines 48/50

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 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103

1x 328x 328x 328x 328x 328x 328x 328x 328x 6x 6x 1x 6x 1x 6x 2x 6x 1x 6x 1x 6x 6x 6x 328x 6x 6x 1x 6x 1x 6x 2x 6x 1x 6x 1x 6x 6x 6x 328x 328x 328x 328x 328x 328x 328x 328x 328x 1x

import React from 'react';
import { SecurityLevel } from '../../types/cia';
 
interface SecurityLevelBadgeProps {
  /**
   * The category of the security level (e.g., "Availability")
   */
  category: string;
  
  /**
   * The security level to display
   */
  level: SecurityLevel;
  
  /**
   * Custom color class for the badge background
   */
  colorClass?: string;
  
  /**
   * Custom color class for the badge text
   */
  textClass?: string;
  
  /**
   * Additional CSS classes
   */
  className?: string;
  
  /**
   * Test ID for automated testing
   */
  testId?: string;
}
 
/**
 * Displays a security level in a badge format
 * 
 * ## Business Perspective
 * 
 * Provides consistent visual indicators of security levels throughout
 * the application, enabling users to quickly identify the security
 * stance for different components of the CIA triad. 🔒
 */
const SecurityLevelBadge: React.FC<SecurityLevelBadgeProps> = ({
  category,
  level,
  colorClass,
  textClass,
  className = '',
  testId
}) => {
  // Default color classes based on security level if not provided
  const defaultColorClass = () => {
    switch (level) {
      case 'None':
        return 'bg-red-100 dark:bg-red-900 dark:bg-opacity-20';
      case 'Low':
        return 'bg-yellow-100 dark:bg-yellow-900 dark:bg-opacity-20';
      case 'Moderate':
        return 'bg-blue-100 dark:bg-blue-900 dark:bg-opacity-20';
      case 'High':
        return 'bg-green-100 dark:bg-green-900 dark:bg-opacity-20';
      case 'Very High':
        return 'bg-purple-100 dark:bg-purple-900 dark:bg-opacity-20';
      default:
        return 'bg-gray-100 dark:bg-gray-800';
    }
  };
 
  // Default text classes based on security level if not provided
  const defaultTextClass = () => {
    switch (level) {
      case 'None':
        return 'text-red-800 dark:text-red-300';
      case 'Low':
        return 'text-yellow-800 dark:text-yellow-300';
      case 'Moderate':
        return 'text-blue-800 dark:text-blue-300';
      case 'High':
        return 'text-green-800 dark:text-green-300';
      case 'Very High':
        return 'text-purple-800 dark:text-purple-300';
      default:
        return 'text-gray-800 dark:text-gray-300';
    }
  };
 
  const badgeColorClass = colorClass || defaultColorClass();
  const badgeTextClass = textClass || defaultTextClass();
 
  return (
    <span
      className={`px-2 py-1 rounded-md text-xs font-medium ${badgeColorClass} ${badgeTextClass} ${className}`}
      data-testid={testId}
    >
      {category && `${category}: `}{level}
    </span>
  );
};
 
export default SecurityLevelBadge;