kyd-shared-badge 0.2.17 → 0.2.19
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +1 -1
- package/src/SharedBadgeDisplay.tsx +52 -22
package/package.json
CHANGED
|
@@ -97,7 +97,14 @@ const ScoreCard = ({ title, score, description, descriptor, scoreType, iconImage
|
|
|
97
97
|
);
|
|
98
98
|
};
|
|
99
99
|
|
|
100
|
-
|
|
100
|
+
type SharedBadgeDisplayProps = {
|
|
101
|
+
badgeData: PublicBadgeData;
|
|
102
|
+
hideShareButton?: boolean;
|
|
103
|
+
showMakePublicButton?: boolean;
|
|
104
|
+
onMakePublic?: () => void;
|
|
105
|
+
};
|
|
106
|
+
|
|
107
|
+
const SharedBadgeDisplay = ({ badgeData, hideShareButton = false, showMakePublicButton = false, onMakePublic }: SharedBadgeDisplayProps) => {
|
|
101
108
|
const { badgeId, developerName, assessmentResult, updatedAt, connectedPlatforms } = badgeData;
|
|
102
109
|
const { summary_scores, report_summary, developer_trust_explanation, key_skills, screening_sources, industry_considerations } = assessmentResult;
|
|
103
110
|
|
|
@@ -109,14 +116,25 @@ const SharedBadgeDisplay = ({ badgeData }: { badgeData: PublicBadgeData }) => {
|
|
|
109
116
|
|
|
110
117
|
return (
|
|
111
118
|
<div className={`${wrapperMaxWidth} mx-auto`}>
|
|
112
|
-
<div className="flex justify-end items-center mb-4">
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
119
|
+
<div className="flex justify-end items-center gap-3 mb-4">
|
|
120
|
+
{!hideShareButton && (
|
|
121
|
+
<ShareButton
|
|
122
|
+
badgeId={badgeId}
|
|
123
|
+
shareTitle={`KYD Self-Check™ Report | ${badgeData.developerName}`}
|
|
124
|
+
shareText="Check out my KYD Self-Check™ from Know Your Developer™"
|
|
125
|
+
buttonText="Share"
|
|
126
|
+
className={'flex items-center justify-center h-10 w-10 sm:w-auto sm:px-4 sm:py-2 text-white rounded-full sm:rounded-md transition-all duration-300 ease-in-out bg-[var(--icon-accent)] hover:bg-[var(--icon-accent-hover)]'}
|
|
127
|
+
/>
|
|
128
|
+
)}
|
|
129
|
+
{showMakePublicButton && (
|
|
130
|
+
<button
|
|
131
|
+
onClick={() => { if (onMakePublic) onMakePublic(); }}
|
|
132
|
+
className={'px-4 py-2 text-sm font-semibold text-white rounded-md'}
|
|
133
|
+
style={{ backgroundColor: 'var(--icon-accent)'}}
|
|
134
|
+
>
|
|
135
|
+
Make Public
|
|
136
|
+
</button>
|
|
137
|
+
)}
|
|
120
138
|
</div>
|
|
121
139
|
<ReportHeader
|
|
122
140
|
badgeId={badgeId}
|
|
@@ -220,18 +238,27 @@ const SharedBadgeDisplay = ({ badgeData }: { badgeData: PublicBadgeData }) => {
|
|
|
220
238
|
{ofacMatches && (
|
|
221
239
|
<div className={'mb-4'}>
|
|
222
240
|
<h5 className={'font-semibold mb-2'} style={{ color: 'var(--text-main)' }}>OFAC API Matches</h5>
|
|
223
|
-
<
|
|
241
|
+
<div>
|
|
224
242
|
{ss!.ofac_screen!.matches!.map((m: any, i: number) => {
|
|
225
243
|
const s = m?.sanction || {};
|
|
244
|
+
const title = s.name || 'Unknown';
|
|
245
|
+
const programs = (s.programs && s.programs.length) ? ` — Programs: ${s.programs.join(', ')}` : '';
|
|
226
246
|
return (
|
|
227
|
-
<
|
|
228
|
-
<
|
|
229
|
-
{
|
|
230
|
-
|
|
231
|
-
|
|
247
|
+
<div key={i} style={{ display: 'grid', gridTemplateColumns: '12px 1fr', columnGap: 8, alignItems: 'start', marginBottom: 6 }}>
|
|
248
|
+
<div aria-hidden="true" style={{ width: 6, height: 6, borderRadius: '50%', marginTop: 6, backgroundColor: 'var(--text-secondary)' }} />
|
|
249
|
+
<div className={'text-sm'} style={{ color: 'var(--text-secondary)' }}>
|
|
250
|
+
<span className={'font-medium'} style={{ color: 'var(--text-main)' }}>{title}</span>
|
|
251
|
+
<span>{programs}</span>
|
|
252
|
+
{s.entityLink ? (
|
|
253
|
+
<>
|
|
254
|
+
{' '}— <a href={s.entityLink} target='_blank' rel='noopener noreferrer' className={'underline'} style={{ color: 'var(--icon-accent)' }}>Details</a>
|
|
255
|
+
</>
|
|
256
|
+
) : null}
|
|
257
|
+
</div>
|
|
258
|
+
</div>
|
|
232
259
|
);
|
|
233
260
|
})}
|
|
234
|
-
</
|
|
261
|
+
</div>
|
|
235
262
|
<details className={'mt-2'}>
|
|
236
263
|
<summary className={'cursor-pointer text-sm font-semibold'} style={{ color: 'var(--text-main)' }}>View OFAC Raw JSON</summary>
|
|
237
264
|
<pre className={'mt-2 overflow-auto text-xs p-3 rounded'} style={{ background: 'rgba(0,0,0,0.04)', color: 'var(--text-main)' }}>{JSON.stringify(ss!.ofac_screen!.raw, null, 2)}</pre>
|
|
@@ -252,14 +279,17 @@ const SharedBadgeDisplay = ({ badgeData }: { badgeData: PublicBadgeData }) => {
|
|
|
252
279
|
{fbiMatches && (
|
|
253
280
|
<div className={'mb-2'}>
|
|
254
281
|
<h5 className={'font-semibold mb-2'} style={{ color: 'var(--text-main)' }}>FBI Wanted List Matches</h5>
|
|
255
|
-
<
|
|
282
|
+
<div>
|
|
256
283
|
{ss!.fbi_matches!.map((f: any, i: number) => (
|
|
257
|
-
<
|
|
258
|
-
<
|
|
259
|
-
|
|
260
|
-
|
|
284
|
+
<div key={i} style={{ display: 'grid', gridTemplateColumns: '12px 1fr', columnGap: 8, alignItems: 'start', marginBottom: 6 }}>
|
|
285
|
+
<div aria-hidden="true" style={{ width: 6, height: 6, borderRadius: '50%', marginTop: 6, backgroundColor: 'var(--text-secondary)' }} />
|
|
286
|
+
<div className={'text-sm'} style={{ color: 'var(--text-secondary)' }}>
|
|
287
|
+
<span className={'font-medium'} style={{ color: 'var(--text-main)' }}>{f.title || 'Match'}</span>
|
|
288
|
+
{f.url ? <> — <a href={f.url} target='_blank' rel='noopener noreferrer' className={'underline'} style={{ color: 'var(--icon-accent)' }}>Details</a></> : null}
|
|
289
|
+
</div>
|
|
290
|
+
</div>
|
|
261
291
|
))}
|
|
262
|
-
</
|
|
292
|
+
</div>
|
|
263
293
|
</div>
|
|
264
294
|
)}
|
|
265
295
|
</div>
|