@learncard/react 2.10.3 → 2.10.4

package/src/components/VCDisplayCard2/VCIDDisplayFrontFace.tsx

@@ -0,0 +1,213 @@
+import React from 'react';
+import { Flipper, Flipped as UntypedFlipped } from 'react-flip-toolkit';
+
+import IDIcon from '../svgs/IDIcon';
+import IDSleeve from '../../assets/images/id-sleeve.png';
+import QRCodeIcon from '../svgs/QRCodeIcon';
+import UnknownVerifierBadge from '../svgs/UnknownVerifierBadge';
+import VerifiedBadge from '../svgs/VerifiedBadge';
+import PersonBadge from '../svgs/PersonBadge';
+import RedFlag from '../svgs/RedFlag';
+
+import { getInfoFromCredential } from '../../helpers/credential.helpers';
+import { isAppDidWeb } from '@learncard/helpers';
+
+import { VC } from '@learncard/types';
+import { BoostAchievementCredential } from '../../types';
+import TruncateTextBox from './TruncateTextBox';
+import { KnownDIDRegistryType } from '../../types';
+import {
+    VerifierState,
+    VERIFIER_STATES,
+} from '../CertificateDisplayCard/VerifierStateBadgeAndText';
+
+type FlippedComponentProps = React.PropsWithChildren<{
+    flipId?: string;
+    inverseFlipId?: string;
+    scale?: boolean;
+}>;
+
+const Flipped = UntypedFlipped as unknown as React.FC<FlippedComponentProps>;
+
+type VCIDDisplayFrontFaceProps = {
+    isFront: boolean;
+    setIsFront: (value: boolean) => void;
+    showDetailsBtn?: boolean;
+    credential: VC | BoostAchievementCredential;
+    knownDIDRegistry?: KnownDIDRegistryType;
+    customThumbComponent?: React.ReactNode;
+    hideQRCode?: boolean;
+    qrCodeOnClick?: () => void;
+    customIDDescription?: React.ReactNode;
+    unknownVerifierTitle?: string;
+    onVerifierClick?: (
+        event: React.MouseEvent<HTMLButtonElement>,
+        verifierState: VerifierState
+    ) => void;
+};
+
+const VCIDDisplayFrontFace: React.FC<VCIDDisplayFrontFaceProps> = ({
+    isFront,
+    setIsFront,
+    showDetailsBtn,
+    credential,
+    knownDIDRegistry,
+    customThumbComponent,
+    hideQRCode = false,
+    qrCodeOnClick,
+    customIDDescription,
+    unknownVerifierTitle,
+    onVerifierClick,
+}) => {
+    const { credentialSubject } = getInfoFromCredential(credential, 'MMM dd, yyyy', {
+        uppercaseDate: false,
+    });
+
+    const issuerDid =
+        typeof credential.issuer === 'string' ? credential.issuer : credential.issuer.id;
+    const isAppIssuerDid = isAppDidWeb(issuerDid);
+
+    let verifierState: VerifierState;
+    if (credentialSubject?.id === issuerDid && issuerDid && issuerDid !== 'did:example:123') {
+        // the extra "&& issuerDid" is so that the credential preview doesn't say "Self Verified"
+        // the did:example:123 condition is so that we don't show this status from the Manage Boosts tab
+        verifierState = VERIFIER_STATES.selfVerified;
+    } else if (unknownVerifierTitle) {
+        verifierState = VERIFIER_STATES.trustedVerifier;
+    } else {
+        if (knownDIDRegistry?.source === 'trusted') {
+            verifierState = VERIFIER_STATES.trustedVerifier;
+        } else if (knownDIDRegistry?.source === 'untrusted') {
+            verifierState = VERIFIER_STATES.untrustedVerifier;
+        } else if (knownDIDRegistry?.source === 'unknown') {
+            verifierState = isAppIssuerDid
+                ? VERIFIER_STATES.appIssuer
+                : VERIFIER_STATES.unknownVerifier;
+        } else {
+            verifierState = isAppIssuerDid
+                ? VERIFIER_STATES.appIssuer
+                : VERIFIER_STATES.unknownVerifier;
+        }
+    }
+    const isSelfVerified = verifierState === VERIFIER_STATES.selfVerified;
+
+    const achievement =
+        'achievement' in credential?.credentialSubject
+            ? credential?.credentialSubject?.achievement
+            : undefined;
+    const description = achievement?.description;
+
+    return (
+        <Flipper className="w-full" flipKey={isFront}>
+            <Flipped flipId="face">
+                <section className="vc-front-face w-full flex flex-col items-center gap-[15px]">
+                    {/* <div className="w-[380px] h-[211px] bg-red-300" /> */}
+
+                    <Flipped inverseFlipId="face">{customThumbComponent}</Flipped>
+
+                    <Flipped inverseFlipId="face">
+                        <div className="text-white w-full flex items-center justify-center font-poppins">
+                            <IDIcon className="text-white mr-1" /> ID
+                        </div>
+                    </Flipped>
+
+                    <Flipped inverseFlipId="face">
+                        <div className="w-full relative">
+                            {!hideQRCode && (
+                                <button
+                                    onClick={e => {
+                                        e.stopPropagation();
+                                        qrCodeOnClick?.();
+                                    }}
+                                    className="text-grayscale-900 bg-white rounded-full p-[10px] absolute top-[-10px] right-[45%]"
+                                >
+                                    <QRCodeIcon className="text-grayscale-900 " />
+                                </button>
+                            )}
+                            <img src={IDSleeve} alt="id-sleeve" className="w-full object-cover" />
+                        </div>
+                    </Flipped>
+
+                    <Flipped inverseFlipId="face">
+                        <div className="w-full bg-white relative mt-[-70px] px-6 pb-4 pt-4">
+                            {description && !customIDDescription && (
+                                <>
+                                    <TruncateTextBox
+                                        text={description}
+                                        className="description-box"
+                                        containerClassName="!p-0 !shadow-none !text-center !w-full"
+                                        textClassName="!font-poppins !text-base !text-grayscale-700 !text-center !w-full"
+                                        truncateThreshold={204}
+                                    />
+                                </>
+                            )}
+
+                            {customIDDescription && customIDDescription}
+
+                            {isFront && showDetailsBtn && (
+                                <button
+                                    type="button"
+                                    className="vc-toggle-side-button text-white shadow-bottom bg-[#00000099] px-[24px] py-[8px] rounded-[40px] text-[16px] font-poppins font-medium leading-normal mt-[25px] w-fit select-none"
+                                    onClick={() => setIsFront(!isFront)}
+                                >
+                                    Details
+                                </button>
+                            )}
+
+                            <div className="w-full flex items-center justify-center mt-4">
+                                <div className="h-[2px] w-full bg-gray-200" />
+                            </div>
+
+                            <button
+                                type="button"
+                                className="w-full flex items-center justify-center mt-2 appearance-none bg-transparent p-0"
+                                onClick={event => {
+                                    event.stopPropagation();
+                                    onVerifierClick?.(event, verifierState);
+                                }}
+                                onMouseDown={event => event.stopPropagation()}
+                                aria-haspopup="dialog"
+                                aria-label={`Open issuer details for ${
+                                    unknownVerifierTitle ?? verifierState
+                                }`}
+                            >
+                                {isSelfVerified && (
+                                    <span className="uppercase font-poppins text-base font-[500] text-green-dark flex gap-[3px] items-center">
+                                        <PersonBadge className="w-[20px] h-[20px]" />
+                                        Self Issued
+                                    </span>
+                                )}
+                                {verifierState === VERIFIER_STATES.trustedVerifier && (
+                                    <span className="uppercase font-poppins text-base font-[500] text-blue-light flex gap-[3px] items-center text-center">
+                                        <VerifiedBadge className="w-[20px] h-[20px]" />
+                                        {unknownVerifierTitle ?? 'Trusted Issuer'}
+                                    </span>
+                                )}
+                                {verifierState === VERIFIER_STATES.unknownVerifier && (
+                                    <span className="uppercase font-poppins text-base font-[500] text-orange-500 flex gap-[3px] items-center">
+                                        <UnknownVerifierBadge className="w-[20px] h-[20px]" />
+                                        Unknown Issuer
+                                    </span>
+                                )}
+                                {verifierState === VERIFIER_STATES.appIssuer && (
+                                    <span className="uppercase font-poppins text-base font-[500] text-cyan-600 flex gap-[3px] items-center">
+                                        <VerifiedBadge className="w-[20px] h-[20px]" />
+                                        App Issuer
+                                    </span>
+                                )}
+                                {verifierState === VERIFIER_STATES.untrustedVerifier && (
+                                    <span className="uppercase font-poppins text-base font-[500] text-red-mastercard flex gap-[3px] items-center">
+                                        <RedFlag className="w-[20px] h-[20px]" />
+                                        Untrusted Issuer
+                                    </span>
+                                )}
+                            </button>
+                        </div>
+                    </Flipped>
+                </section>
+            </Flipped>
+        </Flipper>
+    );
+};
+
+export default VCIDDisplayFrontFace;

package/src/components/VCDisplayCard2/VerificationRow.tsx

@@ -0,0 +1,69 @@
+import React, { useState } from 'react';
+import { VerificationItem, VerificationStatusEnum } from '@learncard/types';
+import { getColorForVerificationStatus } from '../../helpers/credential.helpers';
+
+import InfoBox from './InfoBox';
+import InfoIcon from '../svgs/InfoIcon';
+import AcuteCheckmark from '../svgs/AcuteCheckmark';
+import ExclamationPoint from '../svgs/ExclamationPoint';
+import X from '../svgs/X';
+import { capitalize } from '../../helpers/string.helpers';
+
+type VerificationRowProps = {
+    verification: VerificationItem;
+};
+
+const VerificationRow: React.FC<VerificationRowProps> = ({ verification }) => {
+    const [showInfo, setShowInfo] = useState(false);
+    const statusColor = getColorForVerificationStatus(verification.status);
+
+    const getIcon = () => {
+        switch (verification.status) {
+            case VerificationStatusEnum.Success:
+                return <AcuteCheckmark />;
+            case VerificationStatusEnum.Error:
+                return <ExclamationPoint />;
+            case VerificationStatusEnum.Failed:
+                return <X className="w-[15px] h-[15px]" />;
+        }
+    };
+
+    let primaryText = verification.check
+        ? `${verification.check}: ${verification.message}`
+        : verification.message;
+    if (verification.status === VerificationStatusEnum.Failed) {
+        primaryText = verification.message ?? verification.details ?? '';
+    }
+    primaryText = capitalize(primaryText);
+
+    const infoText = ''; // if we want certain verifications to have extra explanation, we can set this variable
+
+    return (
+        <div className="verification-row flex flex-col gap-[5px] font-poppins border-b-[1px] border-grayscale-200 border-solid w-full py-[10px] last:border-0 last:pb-0">
+            <span
+                className="font-[700] text-[11px] leading-[16px] uppercase flex items-center gap-[3px] select-none"
+                style={{ color: statusColor }}
+            >
+                {getIcon()}
+                {verification.status}
+                {infoText && (
+                    <button className="ml-auto" onClick={() => setShowInfo(!showInfo)}>
+                        <InfoIcon color={statusColor} />
+                    </button>
+                )}
+            </span>
+            {showInfo && infoText && (
+                <InfoBox
+                    text={infoText}
+                    handleClose={() => setShowInfo(false)}
+                    backgroundColor={statusColor}
+                />
+            )}
+            <span className="font-[400] text-[14px] leading-[21px] text-grayscale-900">
+                {primaryText}
+            </span>
+        </div>
+    );
+};
+
+export default VerificationRow;

package/src/components/VCDisplayCard2/VerificationsBox.tsx

@@ -0,0 +1,44 @@
+import React, { useState } from 'react';
+
+import VerificationRow from './VerificationRow';
+import InfoIcon from '../svgs/InfoIcon';
+import InfoBox from './InfoBox';
+
+import { VerificationItem } from '@learncard/types';
+
+type VerificationsBoxProps = {
+    verificationItems: VerificationItem[];
+};
+
+const VerificationsBox: React.FC<VerificationsBoxProps> = ({ verificationItems }) => {
+    const [showInfo, setShowInfo] = useState(false);
+
+    return (
+        <div className="verifications-box bg-white flex flex-col items-start gap-[10px] rounded-[20px] shadow-bottom px-[15px] py-[20px] w-full relative">
+            <h3 className="text-[20px] leading-[20px] text-grayscale-900">
+                Credential Verifications
+            </h3>
+            <button
+                className="absolute top-[17px] right-[17px]"
+                onClick={e => {
+                    e.stopPropagation();
+                    setShowInfo(!showInfo);
+                }}
+            >
+                <InfoIcon color={showInfo ? '#6366F1' : undefined} />
+            </button>
+            {showInfo && (
+                <InfoBox
+                    text="Credential verifications check the cryptographic proof of digital credentials to ensure their authenticity and accuracy."
+                    handleClose={() => setShowInfo(false)}
+                />
+            )}
+
+            {verificationItems.map((verification, index) => (
+                <VerificationRow key={index} verification={verification} />
+            ))}
+        </div>
+    );
+};
+
+export default VerificationsBox;

package/src/components/VCDisplayCard2/__tests__/VC2FrontFaceInfo.test.tsx

@@ -0,0 +1,134 @@
+// @vitest-environment jsdom
+
+import React from 'react';
+import { render } from '@testing-library/react';
+import { describe, expect, test, vi } from 'vitest';
+
+vi.mock('react-flip-toolkit', () => ({
+    Flipped: ({ children }: { children: React.ReactNode }) => <>{children}</>,
+}));
+
+vi.mock('../../CertificateDisplayCard/VerifierStateBadgeAndText', () => ({
+    __esModule: true,
+    default: () => <div data-testid="verifier-state-badge" />,
+    VERIFIER_STATES: {
+        selfVerified: 'selfVerified',
+        trustedVerifier: 'trustedVerifier',
+        untrustedVerifier: 'untrustedVerifier',
+        appIssuer: 'appIssuer',
+        unknownVerifier: 'unknownVerifier',
+    },
+}));
+
+import VC2FrontFaceInfo from '../VC2FrontFaceInfo';
+
+describe('VC2FrontFaceInfo', () => {
+    test('uses a 43px issuee silhouette and a 22px issuer silhouette for badge fallback', () => {
+        const credential = {
+            issuer: '',
+            issuanceDate: '2026-05-15T00:00:00.000Z',
+            credentialSubject: {
+                id: '',
+                achievement: {
+                    name: 'Badge Title',
+                    description: 'Badge description',
+                },
+            },
+            display: {
+                displayType: 'badge',
+            },
+        };
+
+        const { container } = render(
+            <VC2FrontFaceInfo
+                credential={credential as any}
+                issuee=""
+                issuer=""
+                title="Badge Title"
+                createdAt="May 15, 2026"
+                knownDIDRegistry={{ source: 'unknown', results: {} }}
+            />
+        );
+
+        const silhouettes = Array.from(container.querySelectorAll('svg'));
+        const issueeSilhouette = silhouettes.find(svg => svg.classList.contains('h-[43px]'));
+        const issuerSilhouette = silhouettes.find(svg => svg.classList.contains('h-[22px]'));
+
+        expect(issueeSilhouette).not.toBeUndefined();
+        expect(issueeSilhouette?.classList.contains('w-[43px]')).toBe(true);
+        expect(issuerSilhouette).not.toBeUndefined();
+        expect(issuerSilhouette?.classList.contains('w-[22px]')).toBe(true);
+    });
+
+    test('uses a 43px issuee fingerprint and a 22px issuer fingerprint for badge fallback', () => {
+        const credential = {
+            issuer: 'did:key:z6MkpX1aYzR3uN8bQ5cT7vH2jL9mF6sD4',
+            issuanceDate: '2026-05-15T00:00:00.000Z',
+            credentialSubject: {
+                id: 'did:key:z6Mkq4C8nT1pV7xY2dH9jL6sR3wM5aZ8c',
+                achievement: {
+                    name: 'Badge Title',
+                    description: 'Badge description',
+                },
+            },
+            display: {
+                displayType: 'badge',
+            },
+        };
+
+        const { container } = render(
+            <VC2FrontFaceInfo
+                credential={credential as any}
+                issuee="did:key:z6Mkq4C8nT1pV7xY2dH9jL6sR3wM5aZ8c"
+                issuer="did:key:z6MkpX1aYzR3uN8bQ5cT7vH2jL9mF6sD4"
+                title="Badge Title"
+                createdAt="May 15, 2026"
+                knownDIDRegistry={{ source: 'unknown', results: {} }}
+            />
+        );
+
+        const fingerprints = Array.from(container.querySelectorAll('svg'));
+        const issueeFingerprint = fingerprints.find(svg => svg.classList.contains('h-[43px]'));
+        const issuerFingerprint = fingerprints.find(svg => svg.classList.contains('h-[22px]'));
+
+        expect(issueeFingerprint).not.toBeUndefined();
+        expect(issueeFingerprint?.classList.contains('w-[43px]')).toBe(true);
+        expect(issuerFingerprint).not.toBeUndefined();
+        expect(issuerFingerprint?.classList.contains('w-[22px]')).toBe(true);
+    });
+
+    test('wraps and clamps long issuer names instead of overflowing the card', () => {
+        const longIssuerName = 'Versace Academy of Leadership and Entrepreneurship';
+        const credential = {
+            issuer: { name: longIssuerName },
+            issuanceDate: '2026-05-15T00:00:00.000Z',
+            credentialSubject: {
+                id: '',
+                achievement: { name: 'Badge Title', description: 'Badge description' },
+            },
+            display: { displayType: 'badge' },
+        };
+
+        const { container, getByText } = render(
+            <VC2FrontFaceInfo
+                credential={credential as any}
+                issuee=""
+                issuer={{ name: longIssuerName } as any}
+                title="Badge Title"
+                createdAt="May 15, 2026"
+                knownDIDRegistry={{ source: 'unknown', results: {} }}
+            />
+        );
+
+        const issuedBy = container.querySelector('.issued-by');
+        expect(issuedBy).not.toBeNull();
+        // The bug was whitespace-nowrap forcing one line that overflowed the card.
+        expect(issuedBy?.className).not.toContain('whitespace-nowrap');
+        expect(issuedBy?.className).toContain('break-words');
+        // line-clamp-2 only clamps on a block/-webkit-box, not a flex container,
+        // so the container must NOT be `flex` (the original review-miss).
+        expect(issuedBy?.className).toContain('line-clamp-2');
+        expect(issuedBy?.className).not.toContain('flex');
+        expect(getByText(longIssuerName)).not.toBeNull();
+    });
+});

package/src/components/VCDisplayCard2/index.ts

@@ -0,0 +1,23 @@
+/**
+ * @file Automatically generated by barrelsby.
+ */
+
+export * from './FitText';
+export * from './InfoBox';
+export * from './IssueHistoryBox';
+export * from './MediaAttachmentsBox';
+export * from './RibbonEnd';
+export * from './SelectedSkills';
+export * from './SkillsBox';
+export * from './Subskill';
+export * from './TopLevelSkill';
+export * from './TruncateTextBox';
+export * from './VC2BackFace';
+export * from './VC2FrontFaceInfo';
+export * from './VCDisplayCard2';
+export * from './VCDisplayCardCategoryType';
+export * from './VCDisplayCardSkillsCount';
+export * from './VCIDDIsplayCard';
+export * from './VCIDDisplayFrontFace';
+export * from './VerificationRow';
+export * from './VerificationsBox';

package/src/components/VCDisplayFrontFace/VCDisplayFrontFace.tsx

@@ -0,0 +1,143 @@
+import React from 'react';
+import FatArrow from '../../assets/images/icon.green.fat-arrow.png';
+import UserProfilePicture from '../UserProfilePicture/UserProfilePicture';
+import { VCVerificationCheckWithText } from '../VCVerificationCheck/VCVerificationCheck';
+import { getImageFromProfile, getNameFromProfile } from '../../helpers/credential.helpers';
+
+import { VCDisplayCardProps } from '../../types';
+
+const VCDisplayFrontFace: React.FC<VCDisplayCardProps> = ({
+    title,
+    createdAt,
+    issuer,
+    issuee,
+    subjectImageComponent,
+    issuerImageComponent,
+    hideProfileBubbles = false,
+    credentialSubject,
+    className = '',
+    loading,
+    handleClick,
+    overrideCardImageComponent,
+    overrideCardTitle,
+    customHeaderComponent,
+}) => {
+    const credentialAchievementImage =
+        credentialSubject?.achievement?.image?.id || credentialSubject?.achievement?.image;
+    const issuerName = getNameFromProfile(issuer ?? '');
+    const issueeName = getNameFromProfile(issuee ?? '');
+    const issuerImage = getImageFromProfile(issuer ?? '');
+    const issueeImage = getImageFromProfile(issuee ?? '');
+
+    let issueeImageEl: React.ReactNode | null = null;
+    if (subjectImageComponent) {
+        issueeImageEl = subjectImageComponent;
+    } else {
+        issueeImageEl = (
+            <UserProfilePicture
+                customContainerClass={`object-cover h-full w-full text-4xl ${
+                    !issueeImage ? 'pt-[8px]' : ''
+                }`}
+                user={{ image: issueeImage, name: issueeName }}
+                alt="Issuee image"
+            />
+        );
+    }
+
+    let issuerImageEl: React.ReactNode | null = null;
+
+    if (issuerImageComponent) {
+        issuerImageEl = issuerImageComponent;
+    } else {
+        issuerImageEl = (
+            <UserProfilePicture
+                customContainerClass={`object-cover h-full w-full text-4xl ${
+                    !issuerImage ? 'pt-[8px]' : ''
+                }`}
+                user={{ image: issuerImage, name: issuerName }}
+                alt="Issuer image"
+            />
+        );
+    }
+
+    const credImg = credentialAchievementImage ? (
+        <img
+            className="h-full w-full object-cover"
+            src={credentialAchievementImage ?? ''}
+            alt="Credential Achievement Image"
+        />
+    ) : (
+        <></>
+    );
+
+    const renderCardImg = overrideCardImageComponent ? overrideCardImageComponent : credImg;
+    const cardTitle = overrideCardTitle ? overrideCardTitle : title;
+
+    return (
+        <div
+            className={`z-[9] vc-display-main-card-front flex overflow-hidden flex-col items-center justify-between relative max-w-[400px] h-[100%] min-h-[600px] p-7 rounded-3xl shadow-3xl bg-emerald-700 vc-display-card-full-container ${className}`}
+        >
+            <section className="bg-white rounded-bl-[50%] rounded-br-[50%] absolute top-0 w-[110%] h-[77%]"></section>
+            <section className="flex flex-col items-center justify-center z-10 text-center credential-thumb-img">
+                <section className="max-w-[100px] max-h-[100px]">{renderCardImg}</section>
+
+                <section className="flex flex-row  w-full line-clamp-2">
+                    <div className="flex flex-row w-full line-clamp-2 py-4 vc-flippy-card-title-front ">
+                        <h3
+                            className="vc-thumbnail-title w-full text-2xl line-clamp-2 tracking-wide leading-snug text-center vc-display-title text-gray-900 font-medium"
+                            data-testid="vc-thumbnail-title"
+                        >
+                            {cardTitle ?? ''}
+                        </h3>
+                    </div>
+
+                    {customHeaderComponent && customHeaderComponent}
+                </section>
+
+                <section className="flex flex-row items-center justify-center mt-2 w-full my-2 vc-card-issuer-thumbs">
+                    {!hideProfileBubbles && (
+                        <>
+                            <div className="flex items-center justify-center h-16 w-16 shadow-3xl rounded-full overflow-hidden bg-white">
+                                {issuerImageEl}
+                            </div>
+                            <img
+                                className="h-8 w-8 my-0 mx-4"
+                                src={FatArrow ?? ''}
+                                alt="fat arrow icon"
+                            />
+                            <div className="flex items-center justify-center h-16 w-16 shadow-3xl rounded-full overflow-hidden bg-white">
+                                {issueeImageEl}
+                            </div>
+                        </>
+                    )}
+                </section>
+
+                <div className="w-full mt-2 vc-card-issued-to-info">
+                    <p
+                        className="text-sm font-light text-center line-clamp-2 vc-display-issue-details text-gray-900"
+                        data-testid="vc-thumbnail-createdAt"
+                    >
+                        Issued to <span className="font-bold text-gray-900">{issueeName}</span> on{' '}
+                        {createdAt ?? ''} by{' '}
+                        <span className="font-bold text-gray-900"> {issuerName}</span>
+                    </p>
+                </div>
+
+                <button
+                    onClick={handleClick}
+                    className="cursor-alias bg-white my-3 border-0 text-indigo-500 font-semibold py-2 px-4 sl"
+                >
+                    <span className="flex justify-center">
+                        <p className="flex items-center">View Details</p>
+                    </span>
+                </button>
+            </section>
+
+            <div className="flex items-center justify-center w-full">
+                <VCVerificationCheckWithText loading={loading} />
+            </div>
+        </div>
+    );
+};
+
+export default VCDisplayFrontFace;

package/src/components/VCDisplayFrontFace/index.ts

@@ -0,0 +1,5 @@
+/**
+ * @file Automatically generated by barrelsby.
+ */
+
+export * from './VCDisplayFrontFace';

package/src/components/VCThumbnail/VCThumbnail.stories.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { Story, Meta } from '@storybook/react';
+
+import VCThumbnail from './VCThumbnail';
+import { VCThumbnailProps } from './types';
+
+export default {
+    title: 'VCThumbnail',
+    component: VCThumbnail,
+    argTypes: {},
+} as Meta<typeof VCThumbnail>;
+
+const Template: Story<VCThumbnailProps> = args => <VCThumbnail {...args} />;
+
+export const VCThumbnailTest = Template.bind({});
+VCThumbnailTest.args = {
+    title: 'Our Wallet Passed JFF Plugfest #1 2022',
+    createdAt: '01 May, 2022',
+    issuerImage: 'https://kayaelle.github.io/vc-ed/plugfest-1-2022/images/JFF_LogoLockup.png',
+    userImage:
+        'https://img.freepik.com/free-photo/pleasant-looking-serious-blonde-woman-with-long-hair-wears-blue-casual-sweater_273609-17050.jpg?w=2000',
+    userImageComponent: (
+        <div className="inline-block relative overflow-hidden rounded-full shadow-3xl h-0 w-1/4 pb-[25%] bg-cyan-600 text-white font-medium text-3xl">
+            <p className="pt-[20%]">LC</p>
+        </div>
+    ),
+    badgeImage: 'https://w3c-ccg.github.io/vc-ed/plugfest-1-2022/images/plugfest-1-badge-image.png',
+    listView: false,
+    onClick: () => {
+        console.log('Hello World');
+    },
+};