@learncard/react 2.10.2 → 2.10.4

package/src/components/CertificateDisplayCard/AlignmentRow.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import CaretRightFilled from '../../assets/images/CaretRightFilled.svg';
+
+type AlignmentsRowProps = {
+        url?: string
+        name?: string
+        framework?: string
+};
+const AlignmentRow:React.FC<AlignmentsRowProps> = ({ 
+    url,
+    name,
+    framework
+ }) => {
+    return (
+        <div className="flex flex-col gap-[5px] font-poppins text-[12px] bg-[#DBEAFE] rounded-[15px] border-b-[1px] border-grayscale-200 border-solid w-full p-[10px] last:border-0">
+                <h1 className="text-blue-800 font-semibold uppercase">{framework}</h1>
+                {/* this might need to change to a link depends on how it comes back after the api call */}
+                <button className="flex" onClick={() => window.open(url)}>
+                    <span className="text-left">{name}</span>
+                    <img className="w-[20px] self-end" src={CaretRightFilled} alt="right-caret"/>
+                </button>
+        </div>
+    );
+};
+
+export default AlignmentRow;

package/src/components/CertificateDisplayCard/AlignmentsBox.tsx

@@ -0,0 +1,70 @@
+import React, { useState } from 'react';
+
+import AlignmentRow from './AlignmentRow';
+import InfoIcon from '../svgs/InfoIcon';
+import InfoBox from './InfoBox';
+
+type Alignment = {
+    targetUrl: string;
+    targetName: string;
+    targetFramework: string;
+};
+
+type AlignmentsBoxProps = {
+    alignment: Alignment | Alignment[];
+    style: 'Certificate' | 'boost';
+};
+
+const AlignmentsBox: React.FC<AlignmentsBoxProps> = ({ alignment, style }) => {
+    const [showInfo, setShowInfo] = useState(false);
+    const alignmentText = `
+    Alignments in your Open Badge credential link your achievement to established frameworks, standards, or competencies. 
+    Each alignment shows how your boost directly relates to skills, knowledge areas, and professional standards that are recognized in your field.
+    `;
+
+    const alignments = Array.isArray(alignment)
+        ? alignment.map((object, index) => (
+              <AlignmentRow
+                  key={index}
+                  url={object.targetUrl}
+                  name={object.targetName}
+                  framework={object.targetFramework}
+              />
+          ))
+        : alignment && (
+              <AlignmentRow
+                  url={alignment.targetUrl}
+                  name={alignment.targetName}
+                  framework={alignment.targetFramework}
+              />
+          );
+
+    return (
+        <div className="bg-white flex flex-col items-start gap-[10px] rounded-[20px] shadow-bottom p-[15px] w-full">
+            <div className="flex w-full items-center">
+                <h3
+                    className={
+                        style === 'Certificate'
+                            ? 'text-[17px] text-grayscale-900 font-poppins'
+                            : 'text-[22px] font-mouse'
+                    }
+                >
+                    Alignments
+                </h3>
+                <button
+                    className="ml-auto"
+                    onClick={e => {
+                        e.stopPropagation();
+                        setShowInfo(!showInfo);
+                    }}
+                >
+                    <InfoIcon color={showInfo ? '#6366F1' : undefined} />
+                </button>
+            </div>
+            {showInfo && <InfoBox text={alignmentText} handleClose={() => setShowInfo(false)} />}
+            {alignments}
+        </div>
+    );
+};
+
+export default AlignmentsBox;

package/src/components/CertificateDisplayCard/CertDisplayCardSkillsCount.tsx

@@ -0,0 +1,66 @@
+import React from 'react';
+
+import PuzzlePiece from '../svgs/PuzzlePiece';
+
+import { categorizeSkills, getTotalCountOfSkills } from '../../helpers/credential.helpers';
+
+// Copy of VCDisplayCardSkillsCount, necessary to avoid circular dependency
+export const CertDisplayCardSkillsCount: React.FC<{
+    skills: { category: string; skill: string; subSkills: string[] }[];
+    onClick?: () => void;
+    className?: string;
+    isInSkillsModal?: boolean;
+}> = ({ skills, onClick, className, isInSkillsModal }) => {
+    const skillsCount = getTotalCountOfSkills(skills);
+
+    if (skillsCount === 0) return <></>;
+
+    const skillsMap = categorizeSkills(skills);
+
+    // Calculate total count of skills and subskills
+    const totalSkills: any = Object.values(skillsMap).reduce(
+        (total: any, category: any) => total + category?.length,
+        0
+    );
+    const totalSubskills: any = Object.values(skillsMap).reduce(
+        (total: any, category: any) => total + (category?.totalSubskillsCount || 0),
+        0
+    );
+
+    const total: any = totalSkills + totalSubskills;
+
+    const text: string = total !== 1 ? 'Skills' : 'Skill';
+
+    return (
+        <div
+            className={`flex w-full items-center justify-center cursor-pointer bg-white rounded-[20px] ${
+                className === 'boost-generic' ? '' : 'px-4 py-2 mt-4'
+            } `}
+            onClick={onClick}
+        >
+            <div
+                className={`text-violet-500 flex items-center justify-center tracking-[0.75px] font-poppins font-semibold ${
+                    className === 'boost-generic' ? 'text-[12px] mt-[5px]' : 'text-sm'
+                }`}
+            >
+                {isInSkillsModal ? (
+                    <>
+                        <div className="bg-violet-500 rounded-full flex items-center justify-center mr-[5px] p-1 h-[20px] w-[20px]">
+                            <PuzzlePiece className="text-white" fill="#fff" />
+                        </div>
+                        +{total} {text}
+                    </>
+                ) : (
+                    <>
+                        +{total} {text}
+                        <div className="bg-violet-500 rounded-full flex items-center justify-center ml-2 p-1 h-[30px] w-[30px]">
+                            <PuzzlePiece className="text-white" fill="#fff" />
+                        </div>
+                    </>
+                )}
+            </div>
+        </div>
+    );
+};
+
+export default CertDisplayCardSkillsCount;

package/src/components/CertificateDisplayCard/CertificateBackFace.tsx

@@ -0,0 +1,130 @@
+import React from 'react';
+import { getCategoryDarkColor, getInfoFromCredential } from '../../helpers/credential.helpers';
+import { VC, VerificationItem } from '@learncard/types';
+import {
+    BoostAchievementCredential,
+    LCCategoryEnum,
+    MediaMetadata,
+    VideoMetadata,
+} from '../../types';
+import VerificationsBox from './VerificationsBox';
+import AlignmentsBox from './AlignmentsBox';
+import TruncateTextBox from './TruncateTextBox';
+import MediaAttachmentsBox from './MediaAttachmentsBox';
+import SkillsBox from '../VCDisplayCard2/SkillsBox';
+import LeftArrow from '../svgs/LeftArrow';
+
+type CertificateBackFaceProps = {
+    isFront?: boolean;
+    credential: VC | BoostAchievementCredential;
+    categoryType?: LCCategoryEnum;
+    verificationItems: VerificationItem[];
+    customSkillsComponent?: React.ReactNode;
+
+    getFileMetadata?: (url: string) => MediaMetadata;
+    getVideoMetadata?: (url: string) => VideoMetadata;
+    onMediaAttachmentClick?: (url: string, type: 'photo' | 'document' | 'video' | 'link') => void;
+    enableLightbox?: boolean;
+    showBackButton?: boolean;
+    handleViewFrontFace?: () => void;
+    customLinkedCredentialsComponent?: React.ReactNode;
+};
+
+export const CertificateBackFace: React.FC<CertificateBackFaceProps> = ({
+    credential,
+    categoryType,
+    verificationItems,
+    customSkillsComponent,
+
+    getFileMetadata,
+    getVideoMetadata,
+    onMediaAttachmentClick,
+    enableLightbox,
+    showBackButton,
+    handleViewFrontFace,
+    customLinkedCredentialsComponent,
+}) => {
+    const { createdAt, credentialSubject } = getInfoFromCredential(credential, 'MMM dd, yyyy', {
+        uppercaseDate: false,
+    });
+
+    const { description } = credentialSubject?.achievement ?? {};
+    const criteria = credentialSubject?.achievement?.criteria?.narrative;
+    const alignment = credentialSubject?.achievement?.alignment;
+
+    const credentialDarkColor = getCategoryDarkColor(categoryType);
+
+    let bgColor = `bg-${credentialDarkColor}`;
+
+    if (categoryType === LCCategoryEnum.accommodations) {
+        bgColor = 'bg-amber-700';
+    } else if (categoryType === LCCategoryEnum.accomplishments) {
+        bgColor = 'bg-lime-700';
+    }
+
+    return (
+        <div
+            role="button"
+            onClick={() => handleViewFrontFace?.()}
+            className={`flex flex-col gap-[15px] items-center border-[5px] border-solid border-grayscale-200 py-[30px] px-[20px] rounded-[25px] max-w-[400px] ${bgColor}`}
+        >
+            {showBackButton ? (
+                <div className="w-full">
+                    <button
+                        className="vc-card-back-button rounded-full h-[50px] px-[15px] flex items-center justify-center gap-[5px] z-50 text-[30px] text-white select-none"
+                        onClick={() => handleViewFrontFace?.()}
+                    >
+                        <LeftArrow className="text-white" size="25" />
+                        Details
+                    </button>
+                </div>
+            ) : (
+                <h1 className="text-white text-center text-[22px] font-jacques">Details</h1>
+            )}
+
+            <TruncateTextBox headerText="About" text={description}>
+                <span
+                    className={`text-grayscale-600 font-poppins text-[12px] font-[600] w-full ${
+                        description
+                            ? 'pt-[10px] border-t-[1px] border-solid border-grayscale-200'
+                            : ''
+                    }`}
+                >
+                    Awarded on {createdAt}
+                </span>
+            </TruncateTextBox>
+
+            {criteria && <TruncateTextBox headerText="Criteria" text={criteria} />}
+
+            {customLinkedCredentialsComponent && customLinkedCredentialsComponent}
+
+            {(credential.skills?.length ?? 0) > 0 &&
+                (customSkillsComponent ? (
+                    customSkillsComponent
+                ) : (
+                    <SkillsBox skills={credential.skills ?? []} />
+                ))}
+
+            {credential.attachments && credential.attachments.length > 0 && (
+                <MediaAttachmentsBox
+                    attachments={credential.attachments}
+                    getFileMetadata={getFileMetadata}
+                    getVideoMetadata={getVideoMetadata}
+                    onMediaAttachmentClick={onMediaAttachmentClick}
+                    enableLightbox={enableLightbox}
+                />
+            )}
+
+            {alignment && <AlignmentsBox alignment={alignment} style="Certificate" />}
+
+            {verificationItems && verificationItems.length > 0 && (
+                <VerificationsBox verificationItems={verificationItems} />
+            )}
+
+            {/* so that tailwind will put these colors in the css */}
+            <span className="hidden bg-amber-700 bg-spice-700 bg-rose-700 bg-yellow-700 bg-teal-700"></span>
+        </div>
+    );
+};
+
+export default CertificateBackFace;

package/src/components/CertificateDisplayCard/CertificateCornerIcon.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import RoundedCorner from '../svgs/RoundedCorner';
+import { getCategoryIcon, getCategoryLightColor } from '../../helpers/credential.helpers';
+import { LCCategoryEnum } from '../../types';
+
+type CertificateCornerIconProps = {
+    categoryType: LCCategoryEnum;
+    position: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+};
+
+const CertificateCornerIcon: React.FC<CertificateCornerIconProps> = ({
+    categoryType,
+    position,
+}) => {
+    const credentialPrimaryColor = getCategoryLightColor(categoryType);
+    const credentialIcon = getCategoryIcon(categoryType);
+
+    let iconPositionClassName, cornerPositionClassName;
+    switch (position) {
+        case 'top-left':
+            iconPositionClassName = 'top-0 left-0';
+            cornerPositionClassName = 'bottom-0 right-0';
+            break;
+        case 'top-right':
+            iconPositionClassName = 'top-0 right-0';
+            cornerPositionClassName = 'bottom-0 left-0 rotate-90';
+            break;
+        case 'bottom-left':
+            iconPositionClassName = 'bottom-0 left-0';
+            cornerPositionClassName = 'top-0 right-0 rotate-[270deg]';
+            break;
+        case 'bottom-right':
+            iconPositionClassName = 'bottom-0 right-0';
+            cornerPositionClassName = 'top-0 left-0 rotate-180';
+            break;
+    }
+
+    return (
+        <div
+            className={`text-${credentialPrimaryColor} p-[11px] rounded-full bg-white absolute ${iconPositionClassName}`}
+        >
+            {credentialIcon}
+            <RoundedCorner className={`absolute ${cornerPositionClassName}`} />
+        </div>
+    );
+};
+
+export default CertificateCornerIcon;

package/src/components/CertificateDisplayCard/CertificateDisplayCard.stories.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { Story, Meta } from '@storybook/react';
+import CertificateDisplayCard from './CertificateDisplayCard';
+import { JffCredential, TestVerificationItems } from '../../helpers/test.helpers';
+
+export default {
+    title: 'CertificateDisplayCard',
+    component: CertificateDisplayCard,
+    argTypes: {},
+} as Meta<typeof CertificateDisplayCard>;
+
+const Template: Story = args => <CertificateDisplayCard {...args} />;
+
+export const CertificateDisplayCardTest = Template.bind({});
+CertificateDisplayCardTest.args = {
+    credential: JffCredential,
+    verificationItems: [
+        TestVerificationItems.SUCCESS.PROOF,
+        TestVerificationItems.SUCCESS.NOT_EXPIRED,
+    ],
+};

package/src/components/CertificateDisplayCard/CertificateDisplayCard.tsx

@@ -0,0 +1,180 @@
+import React, { useState } from 'react';
+import { VC, Profile, VerificationItem } from '@learncard/types';
+import {
+    BoostAchievementCredential,
+    LCCategoryEnum,
+    MediaMetadata,
+    VideoMetadata,
+} from '../../types';
+import CertificateFrontFace from './CertificateFrontFace';
+import CertificateBackFace from './CertificateBackFace';
+import FatArrow from '../svgs/FatArrow';
+import ThreeDots from '../../assets/images/DotsThreeOutline.svg';
+import { KnownDIDRegistryType } from '../../types';
+import { VerifierState } from './VerifierStateBadgeAndText';
+
+type CertificateDisplayCardProps = {
+    credential: VC | BoostAchievementCredential;
+    categoryType?: LCCategoryEnum;
+    verificationItems: VerificationItem[];
+    issuerOverride?: Profile;
+    issueeOverride?: Profile;
+    knownDIDRegistry?: KnownDIDRegistryType;
+    subjectImageComponent?: React.ReactNode;
+    issuerImageComponent?: React.ReactNode;
+    customBodyCardComponent?: React.ReactNode;
+    hideIssueDate?: boolean;
+    customSkillsComponent?: React.ReactNode;
+
+    getFileMetadata?: (url: string) => MediaMetadata;
+    getVideoMetadata?: (url: string) => VideoMetadata;
+    onMediaAttachmentClick?: (url: string, type: 'photo' | 'document' | 'video' | 'link') => void;
+    enableLightbox?: boolean;
+
+    handleXClick?: () => void;
+    onDotsClick?: () => void;
+    isFrontOverride?: boolean;
+    setIsFrontOverride?: (value: boolean) => void;
+    hideNavButtons?: boolean;
+    showBackButton?: boolean;
+    showDetailsBtn?: boolean;
+    formattedDisplayType?: string;
+    customLinkedCredentialsComponent?: React.ReactNode;
+    customBodyContentSlot?: React.ReactNode;
+    unknownVerifierTitle?: string;
+    hideAwardedTo?: boolean;
+    hideFrontFaceDetails?: boolean;
+    onVerifierClick?: (
+        event: React.MouseEvent<HTMLButtonElement>,
+        verifierState: VerifierState
+    ) => void;
+};
+
+export const CertificateDisplayCard: React.FC<CertificateDisplayCardProps> = ({
+    credential,
+    categoryType,
+    verificationItems,
+    issuerOverride,
+    issueeOverride,
+    subjectImageComponent,
+    issuerImageComponent,
+    customBodyCardComponent,
+    knownDIDRegistry,
+    hideIssueDate,
+    customSkillsComponent,
+
+    getFileMetadata,
+    getVideoMetadata,
+    onMediaAttachmentClick,
+    enableLightbox,
+
+    handleXClick,
+    onDotsClick,
+    isFrontOverride,
+    setIsFrontOverride,
+    hideNavButtons,
+    showBackButton = false,
+    showDetailsBtn = false,
+    formattedDisplayType,
+    customLinkedCredentialsComponent,
+    customBodyContentSlot,
+    unknownVerifierTitle,
+    hideAwardedTo,
+    hideFrontFaceDetails,
+    onVerifierClick,
+}) => {
+    const [_isFront, _setIsFront] = useState(isFrontOverride ?? true);
+
+    const isFront = isFrontOverride ?? _isFront;
+    const setIsFront = setIsFrontOverride ?? _setIsFront;
+
+    return (
+        <section className="w-full flex flex-col gap-[15px] items-center justify-center relative min-w-[220px]">
+            <section className="max-w-[350px] w-full">
+                {isFront && (
+                    <CertificateFrontFace
+                        credential={credential}
+                        categoryType={categoryType}
+                        issuerOverride={issuerOverride}
+                        issueeOverride={issueeOverride}
+                        knownDIDRegistry={knownDIDRegistry}
+                        subjectImageComponent={subjectImageComponent}
+                        issuerImageComponent={issuerImageComponent}
+                        customBodyCardComponent={customBodyCardComponent}
+                        hideIssueDate={hideIssueDate}
+                        handleViewBackFace={() => setIsFront(!isFront)}
+                        isFront={isFront}
+                        showDetailsBtn={showDetailsBtn}
+                        formattedDisplayType={formattedDisplayType}
+                        customBodyContentSlot={customBodyContentSlot}
+                        unknownVerifierTitle={unknownVerifierTitle}
+                        hideAwardedTo={hideAwardedTo}
+                        hideFrontFaceDetails={hideFrontFaceDetails}
+                        onVerifierClick={onVerifierClick}
+                    />
+                )}
+
+                {!isFront && (
+                    <CertificateBackFace
+                        credential={credential}
+                        categoryType={categoryType}
+                        verificationItems={verificationItems}
+                        getFileMetadata={getFileMetadata}
+                        getVideoMetadata={getVideoMetadata}
+                        onMediaAttachmentClick={onMediaAttachmentClick}
+                        enableLightbox={enableLightbox}
+                        showBackButton={(showBackButton && !hideNavButtons) || showDetailsBtn}
+                        handleViewFrontFace={() => setIsFront(!isFront)}
+                        customLinkedCredentialsComponent={customLinkedCredentialsComponent}
+                    />
+                )}
+
+                {onDotsClick && (
+                    <button
+                        className="absolute right-[-20px] top-[-52px] bg-white rounded-full p-[10px] shadow-bottom"
+                        onClick={onDotsClick}
+                    >
+                        <img
+                            alt="Menu dropdown icon"
+                            className="h-[20px] w-[20px]"
+                            src={ThreeDots}
+                        />
+                    </button>
+                )}
+            </section>
+
+            {!hideNavButtons && (
+                <div className="flex gap-[10px] font-mouse text-[30px] leading-[28px] tracking-[0.75px] relative top-[-10px] left-0 w-full">
+                    {!isFront && (
+                        <button
+                            className="bg-grayscale-900 text-white py-[15px] px-[20px] rounded-[20px] flex mx-auto justify-center items-center gap-[5px] border-[3px] border-solid border-white"
+                            onClick={() => setIsFront(!isFront)}
+                        >
+                            <FatArrow direction="left" /> Back
+                        </button>
+                    )}
+
+                    {handleXClick && (
+                        <button
+                            onClick={handleXClick}
+                            className="bg-white text-grayscale-900 rounded-[20px] py-[15px] px-[20px] grow"
+                        >
+                            Close
+                        </button>
+                    )}
+
+                    {isFront && (
+                        <button
+                            className="bg-grayscale-900 text-white py-[15px] px-[20px] rounded-[20px] mx-auto flex justify-center items-center gap-[5px] border-[3px] border-solid border-white"
+                            onClick={() => setIsFront(!isFront)}
+                        >
+                            Details <FatArrow direction="right" />
+                        </button>
+                    )}
+                </div>
+            )}
+        </section>
+    );
+};
+
+export default CertificateDisplayCard;