kyd-shared-badge 0.3.107 → 0.3.109

package/package.json

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

package/src/SharedBadgeDisplay.tsx

@@ -52,7 +52,7 @@ type ChatWidgetProps = Partial<{
 //   return `rgba(${r}, ${g}, ${b}, ${alpha})`;
 // };
 
-const SharedBadgeDisplay = ({ badgeData, chatProps, headless }: { badgeData: PublicBadgeData, chatProps?: ChatWidgetProps, headless?: boolean }) => {
+const SharedBadgeDisplay = ({ badgeData, chatProps, headless, selfCheck = false }: { badgeData: PublicBadgeData, chatProps?: ChatWidgetProps, headless?: boolean, selfCheck?: boolean }) => {
   const { 
     badgeId, 
     developerName, 
@@ -91,18 +91,18 @@ const SharedBadgeDisplay = ({ badgeData, chatProps, headless }: { badgeData: Pub
     }
   })();
 
-  const topBusinessForGenre = (genre: string) => {
-    const cats: string[] = (genreMapping)?.[genre] || [];
-    const items = [];
-    for (const c of cats) {
-      const arr = (categoryTopByGraph)?.[c] || [];
-      for (const it of arr) items.push(it);
-    }
-    items.sort((a, b) => Number(b?.weight || 0) - Number(a?.weight || 0));
-    return items.slice(0, 3) as TopBusinessRule[];
-  };
-
-  const skillsMatrix = assessmentResult?.skills_matrix || { skills: [] };
+  // const topBusinessForGenre = (genre: string) => {
+  //   const cats: string[] = (genreMapping)?.[genre] || [];
+  //   const items = [];
+  //   for (const c of cats) {
+  //     const arr = (categoryTopByGraph)?.[c] || [];
+  //     for (const it of arr) items.push(it);
+  //   }
+  //   items.sort((a, b) => Number(b?.weight || 0) - Number(a?.weight || 0));
+  //   return items.slice(0, 3) as TopBusinessRule[];
+  // };
+
+  // const skillsMatrix = assessmentResult?.skills_matrix || { skills: [] };
   const skillsAll = assessmentResult?.skills_all || { skills: [] };
   const connected = badgeData?.connectedAccounts || [];
   
@@ -225,6 +225,7 @@ const SharedBadgeDisplay = ({ badgeData, chatProps, headless }: { badgeData: Pub
               accountAuthenticity={assessmentResult?.account_authenticity}
               companyName={badgeData.companyName}
               sourcesProviders={(badgeData?.connectedAccounts || []).map(a => (a?.name || '').toLowerCase())}
+              selfCheck={selfCheck}
             />
           </div>
           {/* Top-right: Role match section */}
@@ -258,6 +259,7 @@ const SharedBadgeDisplay = ({ badgeData, chatProps, headless }: { badgeData: Pub
                   percent={techPct}
                   label={techLabel}
                   topMovers={[]}
+                  selfCheck={selfCheck}
                 />
               );
             })()}

package/src/components/GaugeCard.tsx

@@ -4,7 +4,7 @@ import React, { useMemo } from 'react';
 import GaugeComponent from '@knowyourdeveloper/react-gauge-component';
 import BusinessRuleLink from './BusinessRuleLink';
 import { FiInfo } from 'react-icons/fi';
-import { hexToRgba, scoreToColorHex, clampPercent, red, yellow, green } from '../colors';
+import { hexToRgba, scoreToColorHex, clampPercent, red, yellow, green, green1, green2, green3, green4, green5 } from '../colors';
 
 type TopMover = { label?: string; uid?: string };
 
@@ -18,6 +18,7 @@ export default function GaugeCard({
   topMovers,
   topMoversTitle,
   tooltipText,
+  selfCheck,
 }: {
   title: string;
   description?: string;
@@ -26,10 +27,18 @@ export default function GaugeCard({
   topMovers?: TopMover[];
   topMoversTitle?: string;
   tooltipText?: string;
+  selfCheck?: boolean;
 }) {
   const pct = clampPercent(percent);
   const displayLabel = label || '';
-  const headerTint = hexToRgba(scoreToColorHex(pct), 0.06);
+  const shadeFor = (p: number) => {
+    if (p < 20) return green5;
+    if (p < 40) return green4;
+    if (p < 60) return green3;
+    if (p < 80) return green2;
+    return green1;
+  };
+  const headerTint = hexToRgba(selfCheck ? shadeFor(pct) : scoreToColorHex(pct), 0.06);
 
   // Technical evidence tiers from backend thresholds
   const tickLabels = useMemo(() => ({
@@ -103,15 +112,22 @@ export default function GaugeCard({
               },
               tickLabels: tickLabels,
             }}
-            arc={{
-              padding: 0.02,
-              // Explicit subArcs ensure left->right map: red -> yellow -> green
-              subArcs: [
-                { limit: 33, color: red },
-                { limit: 66, color: yellow },
-                { limit: 100, color: green },
-              ],
-            }}
+          arc={{
+            padding: 0.02,
+            subArcs: selfCheck
+              ? [
+                  { limit: 20, color: green5 },
+                  { limit: 40, color: green4 },
+                  { limit: 60, color: green3 },
+                  { limit: 80, color: green2 },
+                  { limit: 100, color: green1 },
+                ]
+              : [
+                  { limit: 33, color: red },
+                  { limit: 66, color: yellow },
+                  { limit: 100, color: green },
+                ],
+          }}
             pointer={{ type: 'blob', elastic: true, animationDelay: 0 }}
           />
           {(tooltipText || description) && (

package/src/components/ReportHeader.tsx

@@ -6,6 +6,7 @@ import countriesLib from 'i18n-iso-countries';
 import enLocale from 'i18n-iso-countries/langs/en.json';
 import { FiInfo, FiAlertTriangle } from 'react-icons/fi';
 import { ProviderIcon } from '../utils/provider';
+import { green1, green2, green3, green4, green5 } from '../colors';
 
 // Register English locale once at module import time
 countriesLib.registerLocale(enLocale);
@@ -24,7 +25,14 @@ const hexToRgba = (hex: string, alpha: number) => {
   return `rgba(${r}, ${g}, ${b}, ${alpha})`;
 };
 
-const pickTint = (score: number) => {
+const pickTint = (score: number, selfCheck?: boolean) => {
+  if (selfCheck) {
+    if (score < 20) return green5;
+    if (score < 40) return green4;
+    if (score < 60) return green3;
+    if (score < 80) return green2;
+    return green1;
+  }
   if (score >= 75) return '#02a389';
   if (score >= 50) return '#ffbb54';
   return '#EC6662';
@@ -43,12 +51,13 @@ interface ReportHeaderProps {
     accountAuthenticity?: { label?: string; description?: string };
     companyName?: string;
     sourcesProviders?: string[];
+    selfCheck?: boolean;
 }
 
-const ReportHeader = ({ badgeId, developerName, updatedAt, score = 0, badgeImageUrl, summary, enterpriseMatch, countries = [], accountAuthenticity, companyName, sourcesProviders = [] }: ReportHeaderProps) => {
+const ReportHeader = ({ badgeId, developerName, updatedAt, score = 0, badgeImageUrl, summary, enterpriseMatch, countries = [], accountAuthenticity, companyName, sourcesProviders = [], selfCheck }: ReportHeaderProps) => {
   // 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 tint = hexToRgba(pickTint(score || 0, selfCheck), 0.06);
   const matchLabel = enterpriseMatch?.label;
   const sources = (() => {
     const primary = Array.isArray(sourcesProviders) ? sourcesProviders : [];
@@ -67,7 +76,7 @@ const ReportHeader = ({ badgeId, developerName, updatedAt, score = 0, badgeImage
   
   return (
     <div
-      className={'p-6 rounded-md shadow-md border'}
+      className={'p-6 rounded-md border'}
       style={{ backgroundColor: 'var(--content-card-background)', borderColor: 'var(--icon-button-secondary)', backgroundImage: `linear-gradient(${tint}, ${tint})` }}
     >
       {(() => {

package/src/components/SkillsBubble.tsx

@@ -251,7 +251,7 @@ export default function SkillsBubble({ skillsCategoryRadar, skillsByCategory, sk
 
   const columnComponent = (entry: { label: string; years?: number; presence?: string; presenceTypes?: Array<'certified' | 'observed' | 'self-reported'>; sources?: string[] } | '', idx: number, isLeft: boolean) => {
     return (
-      <div key={idx} className="flex items-stretch justify-between gap-3 min-w-0">
+      <div key={idx} className="flex justify-between gap-3 min-w-0">
         <div className="flex flex-row w-1/2 items-start gap-8">
           {entry ? <span className="shrink-0 opacity-70 text-base items-center flex h-full">{idx + (isLeft ? 1 : 6)}.</span> : <span className="opacity-0 whitespace-nowrap">\u00A0</span>}
 
@@ -262,14 +262,13 @@ export default function SkillsBubble({ skillsCategoryRadar, skillsByCategory, sk
                   {entry.label}
                   {/* Evidence count bullet */}
                   {(() => {
-                    console.log('entry', entry);
                     const meta = skillsMeta?.[entry.label];
                     const count = Number((meta as any)?.evidenceCount || 0);
                     return count > 0 ? (
                       <>
                         {' '}<span className="opacity-60">•</span>{' '}
                         <span
-                          className="underline decoration-dotted underline-offset-2 cursor-help opacity-80"
+                          className="cursor-help opacity-80"
                           onMouseEnter={(e) =>
                             showLegendTooltipAt(
                               e.currentTarget,
@@ -339,52 +338,55 @@ export default function SkillsBubble({ skillsCategoryRadar, skillsByCategory, sk
             </span>
           </div>
         </div>
-        {entry && typeof entry !== 'string' ? (
-          <div 
-            className="flex flex-col items-end leading-tight h-full justify-start text-base"
-          >
-            <div className="pb-1">
-              {entry.years ? (
-                <span
-                  className="whitespace-nowrap text-[var(--text-secondary)] cursor-help"
-                  onMouseEnter={(e) => {
-                    const copy = experienceLegendTooltip();
-                    showLegendTooltipAt(e.currentTarget, copy.title, copy.body);
-                  }}
-                  onMouseLeave={hideLegendTooltip}
-                >
-                  {`${entry.years} Years`}
-                </span>
-              ) : (
-                <span className="opacity-0 whitespace-nowrap text-[var(--text-secondary)]">0 Years</span>
-              )}
-            </div>
-            <div
-              onMouseEnter={(e) => {
+        <div 
+          className="flex flex-col items-end leading-tight h-full justify-start text-base"
+        >
+          <div className="pb-1">
+            {entry && typeof entry !== 'string' && entry.years ? (
+              <span
+                className="whitespace-nowrap text-[var(--text-secondary)] cursor-help"
+                onMouseEnter={(e) => {
+                  const copy = experienceLegendTooltip();
+                  showLegendTooltipAt(e.currentTarget, copy.title, copy.body);
+                }}
+                onMouseLeave={hideLegendTooltip}
+              >
+                {`${entry.years} Years`}
+              </span>
+            ) : (
+              <span className="opacity-0 whitespace-nowrap text-[var(--text-secondary)]">0 Years</span>
+            )}
+          </div>
+          <div
+            onMouseEnter={(e) => {
+              if (entry && typeof entry !== 'string') {
                 const copy = presenceLegendTooltip();
                 showLegendTooltipAt(e.currentTarget, undefined, copy.body);
-              }}
-              onMouseLeave={hideLegendTooltip}
-              className="pt-1"
-            >
-              {(() => {
-              const types = Array.isArray(entry.presenceTypes) ? entry.presenceTypes : (entry.presence ? [String(entry.presence) as any] : []);
-              const hasAny = types.length > 0;
-              return hasAny ? (
-                <div
-                  className="flex items-center gap-1"
-                  
-                >
-                  {types.map((t) => (
-                    <span key={t} className="inline-block h-2 w-2 rounded-full" style={{ background: presenceColor(t) }} />
-                  ))}
-                </div>
-              ) : <span className="opacity-0 whitespace-nowrap">.</span>;
+              }
+            }}
+            onMouseLeave={(e) => {
+              if (entry && typeof entry !== 'string') hideLegendTooltip();
+            }}
+            className="pt-1"
+          >
+            {(() => {
+              if (entry && typeof entry !== 'string') {
+                const types = Array.isArray(entry.presenceTypes) ? entry.presenceTypes : (entry.presence ? [String(entry.presence) as any] : []);
+                const hasAny = types.length > 0;
+                return hasAny ? (
+                  <div
+                    className="flex items-center gap-1"
+                  >
+                    {types.map((t) => (
+                      <span key={t} className="inline-block h-2 w-2 rounded-full" style={{ background: presenceColor(t) }} />
+                    ))}
+                  </div>
+                ) : <span className="opacity-0 whitespace-nowrap">.</span>;
+              }
+              return <span className="opacity-0 whitespace-nowrap">.</span>;
             })()}
-            
-            </div>
           </div>
-        ) : null}
+        </div>
       </div>
     )
   }
@@ -407,11 +409,11 @@ export default function SkillsBubble({ skillsCategoryRadar, skillsByCategory, sk
             }}
           >
             <div className="flex items-center gap-2">
-              <span className="inline-block h-3 w-3 rounded-full" style={{ background: green1 }} />
+              <span className="inline-block h-3 w-3 rounded-full" style={{ background: green5 }} />
               <span>Size = evidence count per category</span>
             </div>
             <div className="flex items-center gap-2 mt-1">
-              <span className="inline-block h-3 w-3 rounded-full" style={{ background: green5 }} />
+              <span className="inline-block h-3 w-3 rounded-full border border-[var(--text-secondary)]" style={{ background: green1 }} />
               <span>Color = experience (darker = more)</span>
             </div>
           </div>