kyd-shared-badge 0.3.112 → 0.3.113

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kyd-shared-badge",
-  "version": "0.3.112",
+  "version": "0.3.113",
   "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, selfCheck = false }: { badgeData: PublicBadgeData, chatProps?: ChatWidgetProps, headless?: boolean, selfCheck?: boolean }) => {
+const SharedBadgeDisplay = ({ badgeData, chatProps, headless, selfCheck = false, public: isPublicView = false }: { badgeData: PublicBadgeData, chatProps?: ChatWidgetProps, headless?: boolean, selfCheck?: boolean, 'public'?: boolean }) => {
   const { 
     badgeId, 
     developerName, 
@@ -629,18 +629,22 @@ const SharedBadgeDisplay = ({ badgeData, chatProps, headless, selfCheck = false
             {AppendixSection()}
           </>
         ) : (
-          <>
-            <TabNav />
-            <div className={'px-2 sm:px-0 pb-2'}>
-              {activeTab === 'overview' && OverviewSection()}
-              {activeTab === 'technical' && TechnicalSection()}
-              {activeTab === 'risk' && RiskSection()}
-              {/* {activeTab === 'ai' && AiSection()} */}
-              {activeTab === 'role' && <RoleFitSection />}
-              {activeTab === 'resume' && <ResumeSection />}
-              {activeTab === 'appendix' && AppendixSection()}
-            </div>
-          </>
+            !isPublicView ? (
+              <>
+                <TabNav />
+                <div className={'px-2 sm:px-0 pb-2'}>
+                  {activeTab === 'overview' && OverviewSection()}
+                  {activeTab === 'technical' && TechnicalSection()}
+                  {activeTab === 'risk' && RiskSection()}
+                  {/* {activeTab === 'ai' && AiSection()} */}
+                  {activeTab === 'role' && <RoleFitSection />}
+                  {activeTab === 'resume' && <ResumeSection />}
+                  {activeTab === 'appendix' && AppendixSection()}
+                </div>
+              </>
+            ) : (
+              OverviewSection()
+            )
         )}
         {!headless && (
           <ChatWidget api={chatProps?.api || '/api/chat'} badgeId={badgeId} title={chatProps?.title} hintText={chatProps?.hintText} loginPath={chatProps?.loginPath} headerOffset={chatProps?.headerOffset} developerName={developerName} />

package/src/components/SkillsValidation.tsx

@@ -2,6 +2,7 @@
 
 import React from 'react';
 import { ResponsiveContainer, BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip } from 'recharts';
+import { green1, green2, green5 } from '../colors';
 
 type SkillsRadarPoint = {
   axis: string;
@@ -24,9 +25,9 @@ export default function SkillsValidation({ skillsCategoryRadar, headless }: { sk
             <XAxis dataKey="axis" tick={{ fill: 'var(--text-secondary)', fontSize: 12 }} interval={0} angle={-20} textAnchor="end" height={50} />
             <YAxis domain={[0, 100]} tick={{ fill: 'var(--text-secondary)' }} />
             <Tooltip contentStyle={{ background: 'var(--content-card-background)', border: `1px solid var(--icon-button-secondary)`, color: 'var(--text-main)' }} />
-            <Bar dataKey="observed" name="Observed" fill={'var(--bar-observed)'} isAnimationActive={!headless} />
-            <Bar dataKey="self_reported" name="Self-reported" fill={'var(--bar-self-reported)'} isAnimationActive={!headless} />
-            <Bar dataKey="certified" name="Certified" fill={'var(--bar-certified)'} isAnimationActive={!headless} />
+            <Bar dataKey="observed" name="Observed" fill={green2} isAnimationActive={!headless} stroke={'var(--icon-button-secondary)'} strokeWidth={1} />
+            <Bar dataKey="self_reported" name="Self-reported" fill={green5} isAnimationActive={!headless} stroke={'var(--icon-button-secondary)'} strokeWidth={1} />
+            <Bar dataKey="certified" name="Certified" fill={green1} isAnimationActive={!headless} stroke={'var(--icon-button-secondary)'} strokeWidth={1} />
           </BarChart>
         </ResponsiveContainer>
       </div>