kyd-shared-badge 0.3.17 → 0.3.19

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kyd-shared-badge",
-  "version": "0.3.17",
+  "version": "0.3.19",
   "private": false,
   "main": "./src/index.ts",
   "module": "./src/index.ts",

package/src/colors.ts

@@ -64,4 +64,37 @@ const red3 = '#F5B7B3'
 const red4 = '#FADBDA'
 const red5 = '#FDF0EF'
 
-export { red1, red2, red3, red4, red5 }
+export { red1, red2, red3, red4, red5 }
+
+
+
+export function clampPercent(value?: number): number {
+    const n = Math.round(Number(value ?? 0))
+    if (Number.isNaN(n)) return 0
+    return Math.max(0, Math.min(100, n))
+  }
+  
+  export function scoreToColorHex(score: number): string {
+    const pct = clampPercent(score)
+    if (pct <= 33) return red
+    if (pct <= 66) return yellow
+    return green
+  }
+  
+  export function scoreToCssVar(score: number): string {
+    const pct = clampPercent(score)
+    if (pct <= 33) return `var(--status-negative, ${red})`
+    if (pct <= 66) return `var(--status-neutral, ${yellow})`
+    return `var(--status-positive, ${green})`
+  }
+  
+  export function hexToRgba(hex: string, alpha: number): string {
+    const clean = hex.replace('#', '')
+    const r = parseInt(clean.substring(0, 2), 16)
+    const g = parseInt(clean.substring(2, 4), 16)
+    const b = parseInt(clean.substring(4, 6), 16)
+    return `rgba(${r}, ${g}, ${b}, ${alpha})`
+  }
+  
+  
+  

package/src/components/GaugeCard.tsx

@@ -3,23 +3,11 @@
 import React from 'react';
 import BusinessRuleLink from './BusinessRuleLink';
 import { FiInfo } from 'react-icons/fi';
-import { green, yellow, red } from '../colors';
+import { hexToRgba, scoreToColorHex, scoreToCssVar, clampPercent } from '../colors';
 
 type TopMover = { label?: string; uid?: string };
 
-const hexToRgba = (hex: string, alpha: number) => {
-  const clean = hex.replace('#', '');
-  const r = parseInt(clean.substring(0, 2), 16);
-  const g = parseInt(clean.substring(2, 4), 16);
-  const b = parseInt(clean.substring(4, 6), 16);
-  return `rgba(${r}, ${g}, ${b}, ${alpha})`;
-};
-
-const pickTint = (score: number) => {
-  if (score >= 75) return green;
-  if (score >= 50) return yellow;
-  return red;
-};
+// color helpers moved to ../utils/color
 
 export default function GaugeCard({
   title,
@@ -38,7 +26,7 @@ export default function GaugeCard({
   topMoversTitle?: string;
   tooltipText?: string;
 }) {
-  const pct = Math.max(0, Math.min(100, Math.round(Number(percent ?? 0))));
+  const pct = clampPercent(percent);
   const displayLabel = label || '';
   // Use a fixed internal coordinate system and scale the SVG to container for responsiveness
   const size = 280;
@@ -47,13 +35,8 @@ export default function GaugeCard({
   const circumference = Math.PI * radius;
   const progress = pct / 100;
   const dash = circumference * progress;
-  const progressColor =
-    pct <= 33
-      ? `var(--status-negative, ${red})`
-      : pct <= 66
-      ? `var(--status-neutral, ${yellow})`
-      : `var(--status-positive, ${green})`;
-  const headerTint = hexToRgba(pickTint(pct), 0.06);
+  const progressColor = scoreToCssVar(pct);
+  const headerTint = hexToRgba(scoreToColorHex(pct), 0.06);
 
   return (
     <div

package/src/components/ReportHeader.tsx

@@ -45,6 +45,8 @@ const ReportHeader = ({ badgeId, developerName, updatedAt, score = 0, badgeImage
   // Use the dynamic image if available, otherwise fall back to the score-based one.
   const finalBadgeImageUrl = badgeImageUrl || getBadgeImageUrl(score || 0);
   const tint = hexToRgba(pickTint(score || 0), 0.06);
+  const matchScore = typeof enterpriseMatch?.score === 'number' ? enterpriseMatch.score : undefined;
+  const matchTint = matchScore !== undefined ? hexToRgba(pickTint(matchScore), 0.06) : undefined;
   
   const formattedDate = updatedAt ? formatLocalDate(updatedAt, {
     year: 'numeric',
@@ -114,7 +116,7 @@ const ReportHeader = ({ badgeId, developerName, updatedAt, score = 0, badgeImage
                     </span>
                   </div>
                   {typeof enterpriseMatch?.score === 'number' && (
-                    <span className="px-2 py-1 rounded text-xs font-semibold" style={{ background: 'var(--content-card-background)', border: '1px solid var(--icon-button-secondary)', color: 'var(--text-main)' }}>
+                    <span className="px-2 py-1 rounded text-xs font-semibold" style={{ backgroundColor: 'var(--content-card-background)', backgroundImage: matchTint ? `linear-gradient(${matchTint}, ${matchTint})` : undefined, border: '1px solid var(--icon-button-secondary)', color: 'var(--text-main)' }}>
                       {Math.round(enterpriseMatch.score)}%
                     </span>
                   )}

package/src/components/RiskCard.tsx

@@ -3,7 +3,7 @@
 import React from 'react';
 import BusinessRuleLink from './BusinessRuleLink';
 import { FiInfo } from 'react-icons/fi';
-import { green, yellow, red } from '../colors';
+import { clampPercent, hexToRgba, scoreToColorHex } from '../colors';
 
 type TopMover = { label?: string; uid?: string };
 
@@ -24,32 +24,15 @@ export default function RiskCard({
   topMoversTitle?: string;
   tooltipText?: string;
 }) {
-  const pctGood = Math.max(0, Math.min(100, Math.round(Number(percentGood ?? 0))));
+  const pctGood = clampPercent(percentGood);
   const displayLabel = label || '';
 
-  const hexToRgba = (hex: string, alpha: number) => {
-    const clean = hex.replace('#', '');
-    const r = parseInt(clean.substring(0, 2), 16);
-    const g = parseInt(clean.substring(2, 4), 16);
-    const b = parseInt(clean.substring(4, 6), 16);
-    return `rgba(${r}, ${g}, ${b}, ${alpha})`;
-  };
+  // Background tint uses same thresholds as GaugeCard via scoreToColorHex
 
-  const pickTint = (score: number) => {
-    if (score >= 75) return green;
-    if (score >= 50) return yellow;
-    return red;
-  };
+  // Foreground bar color uses same thresholds as GaugeCard based on overall score
+  const activeColor = scoreToColorHex(pctGood);
 
-  // color bands by bar position (tallest -> lowest)
-  // indices 4 and 3 (highest bars) => red, index 2 => yellow, indices 1 and 0 => green
-  const colorForIndex = (index: number) => {
-    if (index >= 3) return red;
-    if (index === 2) return yellow;
-    return green;
-  };
-
-  const headerTint = hexToRgba(pickTint(pctGood), 0.06);
+  const headerTint = hexToRgba(scoreToColorHex(pctGood), 0.06);
 
   // bar heights ascending representation
   const bars = [40, 60, 85, 110, 140];
@@ -101,7 +84,7 @@ export default function RiskCard({
               style={{
                 width: 36,
                 height: h,
-                backgroundColor: i === activeIndex ? colorForIndex(i) : 'var(--icon-button-secondary)',
+                backgroundColor: i === activeIndex ? activeColor : 'var(--icon-button-secondary)',
                 borderRadius: 4,
               }}
             />