@learncard/react 2.10.3 → 2.10.4

package/src/components/MeritBadgeDisplayCard/MeritBadgeRibbon.tsx

@@ -0,0 +1,185 @@
+import React from 'react';
+
+type MeritBadgeRibbonProps = {
+    className?: string;
+    image: string;
+};
+
+const MeritBadgeRibbon: React.FC<MeritBadgeRibbonProps> = ({ className = '', image }) => {
+    const [errored, setErrored] = React.useState(false);
+
+    React.useEffect(() => {
+        setErrored(false);
+    }, [image]);
+
+    const showPlaceholder = !image || errored;
+
+    return (
+        <svg
+            width="207"
+            height="170"
+            viewBox="0 0 207 170"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+            className={className}
+        >
+            <g filter="url(#filter0_d_10755_290433)">
+                <circle cx="102.988" cy="83" r="81.5" fill="white" stroke="white" strokeWidth="3" />
+                <path
+                    d="M3.94446 50C3.41654 50 2.92748 50.2775 2.65674 50.7307C2.38599 51.1839 2.37343 51.7461 2.62365 52.211L19.4659 83.5L2.62365 114.789C2.37343 115.254 2.386 115.816 2.65674 116.269C2.92748 116.722 3.41654 117 3.94446 117L203.056 117C203.583 117 204.073 116.722 204.343 116.269C204.614 115.816 204.627 115.254 204.376 114.789L187.534 83.5L204.376 52.211C204.627 51.7461 204.614 51.1839 204.343 50.7307C204.073 50.2775 203.583 50 203.056 50L3.94446 50Z"
+                    fill="currentColor"
+                    stroke="white"
+                    strokeWidth="3"
+                    strokeLinejoin="round"
+                />
+                <rect
+                    x="25.3273"
+                    y="5.34741"
+                    width="156.6"
+                    height="156.6"
+                    rx="78.2999"
+                    fill="#FBFBFC"
+                />
+                <rect
+                    x="25.3273"
+                    y="5.34741"
+                    width="156.6"
+                    height="156.6"
+                    rx="78.2999"
+                    stroke="currentColor"
+                    strokeWidth="3"
+                />
+                <rect x="29.8273" y="9.84741" width="147.6" height="147.6" fill="none" />
+            </g>
+
+            <clipPath id="circleClip">
+                <circle cx="103.5" cy="84" r="75" />
+            </clipPath>
+            {showPlaceholder ? (
+                <g
+                    clipPath="url(#circleClip)"
+                    transform="translate(78.5 58) scale(2.1)"
+                    className="text-grayscale-400"
+                >
+                    <circle
+                        cx="12"
+                        cy="9"
+                        r="6"
+                        stroke="currentColor"
+                        strokeWidth="1.75"
+                        fill="none"
+                    />
+                    <path
+                        d="M8.5 14.5 7 22l5-3 5 3-1.5-7.5"
+                        stroke="currentColor"
+                        strokeWidth="1.75"
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                        fill="none"
+                    />
+                </g>
+            ) : (
+                <image
+                    xlinkHref={image}
+                    x="28.5"
+                    y="9"
+                    width="150"
+                    height="150"
+                    clipPath="url(#circleClip)"
+                    preserveAspectRatio="xMidYMid slice"
+                    onError={() => setErrored(true)}
+                />
+            )}
+
+            <defs>
+                <filter
+                    id="filter0_d_10755_290433"
+                    x="0.944458"
+                    y="0"
+                    width="205.111"
+                    height="170"
+                    filterUnits="userSpaceOnUse"
+                    colorInterpolationFilters="sRGB"
+                >
+                    <feFlood floodOpacity="0" result="BackgroundImageFix" />
+                    <feColorMatrix
+                        in="SourceAlpha"
+                        type="matrix"
+                        values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+                        result="hardAlpha"
+                    />
+                    <feOffset dy="4" />
+                    <feComposite in2="hardAlpha" operator="out" />
+                    <feColorMatrix
+                        type="matrix"
+                        values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0"
+                    />
+                    <feBlend
+                        mode="normal"
+                        in2="BackgroundImageFix"
+                        result="effect1_dropShadow_10755_290433"
+                    />
+                    <feBlend
+                        mode="normal"
+                        in="SourceGraphic"
+                        in2="effect1_dropShadow_10755_290433"
+                        result="shape"
+                    />
+                </filter>
+            </defs>
+        </svg>
+    );
+    return (
+        <svg
+            width="167"
+            height="131"
+            viewBox="0 0 167 131"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+            className={className}
+        >
+            <circle cx="83.1426" cy="65.5" r="64" fill="white" stroke="white" strokeWidth="3" />
+            <path
+                d="M29.3926 3.70096C28.9354 3.437 28.3731 3.43281 27.912 3.68993C27.4509 3.94705 27.159 4.42762 27.1432 4.95531L26.3214 32.5274L2.85421 47.0252C2.40508 47.3026 2.13488 47.7958 2.14274 48.3236C2.15061 48.8515 2.43538 49.3363 2.89258 49.6003L137.608 127.378C138.065 127.642 138.627 127.646 139.088 127.389C139.549 127.132 139.841 126.651 139.857 126.124L140.679 98.5517L164.146 84.0539C164.595 83.7764 164.865 83.2833 164.857 82.7554C164.85 82.2276 164.565 81.7427 164.108 81.4787L29.3926 3.70096Z"
+                fill="#622599"
+                stroke="white"
+                strokeWidth="3"
+                strokeLinejoin="round"
+            />
+            <rect x="22.1426" y="4.5" width="123" height="123" rx="61.5" fill="white" />
+            <rect
+                x="22.1426"
+                y="4.5"
+                width="123"
+                height="123"
+                rx="61.5"
+                stroke="#622599"
+                strokeWidth="3"
+            />
+            <rect
+                x="28.6426"
+                y="11"
+                width="110"
+                height="110"
+                rx="55"
+                stroke="#622599"
+                strokeWidth="2"
+                strokeLinecap="round"
+                strokeDasharray="5 5"
+            />
+            <rect x="33.6426" y="16" width="100" height="100" fill="none" />
+            <defs>
+                <pattern
+                    id="pattern0_10101_43072"
+                    patternContentUnits="objectBoundingBox"
+                    width="1"
+                    height="1"
+                >
+                    <use xlinkHref="#image0_10101_43072" transform="scale(0.00416667)" />
+                </pattern>
+            </defs>
+        </svg>
+    );
+};
+
+export default MeritBadgeRibbon;

package/src/components/MeritBadgeDisplayCard/MeritBadgeSkillsCount.tsx

@@ -0,0 +1,47 @@
+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 MeritBadgeSkillsCount: React.FC<{
+    skills: { category: string; skill: string; subSkills: string[] }[];
+    onClick?: () => void;
+}> = ({ skills, onClick }) => {
+    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 = skillsCount === 1 ? 'Skill' : 'Skills';
+
+    return (
+        <div
+            className="flex items-center justify-center mt-8 cursor-pointer px-4 py-2 bg-white rounded-[20px] shadow-bottom"
+            onClick={onClick}
+        >
+            <div className="text-violet-500 text-xl flex items-center justify-center tracking-[0.75px] font-poppins font-semibold">
+                +{total} {text}{' '}
+                <div className="bg-violet-500 rounded-full flex items-center justify-center ml-2 h-[30px] w-[30px] p-1">
+                    <PuzzlePiece className="text-white" fill="#fff" />
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default MeritBadgeSkillsCount;

package/src/components/MeritBadgeDisplayCard/TruncateTextBox.tsx

@@ -0,0 +1,73 @@
+import React, { useState } from 'react';
+
+type TruncateTextBoxProps = {
+    headerText: string;
+    headerClassName?: string;
+
+    // the text to be truncated if it's too long
+    text: string;
+
+    truncateThreshold?: number;
+
+    // extra things to put at the bottom of the box
+    children?: React.ReactNode;
+    className?: string;
+};
+
+const TruncateTextBox: React.FC<TruncateTextBoxProps> = ({
+    headerText,
+    headerClassName = '',
+    text,
+    truncateThreshold = 132,
+    children,
+    className = 'truncate-text-box',
+}) => {
+    const needsTruncate = text?.length > truncateThreshold;
+    const [showFullText, setShowFullText] = useState(false);
+    const truncated = needsTruncate && !showFullText;
+
+    const displayText = truncated ? text.substring(0, truncateThreshold) : text;
+
+    return (
+        <div
+            className={`${className} w-full bg-white flex flex-col items-start gap-[10px] rounded-[20px] shadow-bottom p-[15px]`}
+        >
+            <h3 className={`${headerClassName} text-[17px] text-grayscale-900 font-poppins`}>
+                {headerText}
+            </h3>
+
+            <p className="text-[12px] text-grayscale-700 font-poppins mb-0 flex flex-col items-start">
+                {displayText}
+                {truncated && (
+                    <>
+                        ...
+                        <button
+                            className="text-indigo-500 text-[12px]"
+                            onClick={e => {
+                                e.stopPropagation();
+                                setShowFullText(true);
+                            }}
+                        >
+                            Show more
+                        </button>
+                    </>
+                )}
+                {needsTruncate && showFullText && (
+                    <button
+                        className="text-indigo-500 text-[12px]"
+                        onClick={e => {
+                            e.stopPropagation();
+                            setShowFullText(false);
+                        }}
+                    >
+                        Show less
+                    </button>
+                )}
+            </p>
+
+            {children}
+        </div>
+    );
+};
+
+export default TruncateTextBox;

package/src/components/MeritBadgeDisplayCard/VerificationRow.tsx

@@ -0,0 +1,67 @@
+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] 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="text-[14px] text-grayscale-900 font-poppins">{primaryText}</span>
+        </div>
+    );
+};
+
+export default VerificationRow;

package/src/components/MeritBadgeDisplayCard/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="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="text-[17px] text-grayscale-900 font-poppins">Verifications</h3>
+                <button
+                    className="ml-auto"
+                    onClick={e => {
+                        e.stopPropagation();
+                        setShowInfo(!showInfo);
+                    }}
+                >
+                    <InfoIcon color={showInfo ? '#6366F1' : undefined} />
+                </button>
+            </div>
+            {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/MeritBadgeDisplayCard/VerifierStateBadgeAndText.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import UnknownVerifierBadge from '../svgs/UnknownVerifierBadge';
+import VerifiedBadge from '../svgs/VerifiedBadge';
+import PersonBadge from '../svgs/PersonBadge';
+import RedFlag from '../svgs/RedFlag';
+
+const VERIFIER_STATES = {
+    selfVerified: 'Self Issued',
+    trustedVerifier: 'Trusted Issuer',
+    unknownVerifier: 'Unknown Issuer',
+    appIssuer: 'Trusted App',
+    untrustedVerifier: 'Untrusted Issuer',
+} as const;
+type VerifierState = (typeof VERIFIER_STATES)[keyof typeof VERIFIER_STATES];
+
+type VerifierStateBadgeAndTextProps = {
+    verifierState: VerifierState;
+};
+
+const VerifierStateBadgeAndText: React.FC<VerifierStateBadgeAndTextProps> = ({ verifierState }) => {
+    return (
+        <div className="flex justify-center">
+            {verifierState === VERIFIER_STATES.selfVerified && (
+                <span className="uppercase font-poppins text-[12px] font-[500] text-green-dark flex gap-[3px] items-center">
+                    <PersonBadge />
+                    Self Issued
+                </span>
+            )}
+            {verifierState === VERIFIER_STATES.trustedVerifier && (
+                <span className="uppercase font-poppins text-[12px] font-[500] text-blue-light flex gap-[3px] items-center">
+                    <VerifiedBadge />
+                    Trusted Issuer
+                </span>
+            )}
+            {verifierState === VERIFIER_STATES.unknownVerifier && (
+                <span className="uppercase font-poppins text-[12px] font-[500] text-orange-500 flex gap-[3px] items-center">
+                    <UnknownVerifierBadge />
+                    Unknown Issuer
+                </span>
+            )}
+            {verifierState === VERIFIER_STATES.appIssuer && (
+                <span className="uppercase font-poppins text-[12px] font-[500] text-cyan-600 flex gap-[3px] items-center">
+                    <UnknownVerifierBadge />
+                    Trusted App
+                </span>
+            )}
+            {verifierState === VERIFIER_STATES.untrustedVerifier && (
+                <span className="uppercase font-poppins text-[12px] font-[500] text-red-mastercard flex gap-[3px] items-center">
+                    <RedFlag />
+                    Untrusted Issuer
+                </span>
+            )}
+        </div>
+    );
+};
+
+export default VerifierStateBadgeAndText;

package/src/components/MeritBadgeDisplayCard/index.ts

@@ -0,0 +1,20 @@
+/**
+ * @file Automatically generated by barrelsby.
+ */
+
+export * from './AlignmentRow';
+export * from './AlignmentsBox';
+export * from './InfoBox';
+export * from './MediaAttachmentsBox';
+export * from './MeritBadgeBackFace';
+export * from './MeritBadgeCornerIcon';
+export * from './MeritBadgeDisplayCard';
+export * from './MeritBadgeFrontFace';
+export * from './MeritBadgeImageDisplay';
+export * from './MeritBadgeProfileImageDisplay';
+export * from './MeritBadgeRibbon';
+export * from './MeritBadgeSkillsCount';
+export * from './TruncateTextBox';
+export * from './VerificationRow';
+export * from './VerificationsBox';
+export * from './VerifierStateBadgeAndText';

package/src/components/MiniVCThumbnail/ MiniVCThumbnail.css

@@ -0,0 +1,18 @@
+.mini-vc-thumbnail-container {
+    max-width: 250px;
+}
+
+.mini-vc-thumbnail-container::after {
+    content: '';
+    background-color: #fff;
+    border-top-left-radius: 24px;
+    border-top-right-radius: 24px;
+    border-bottom-left-radius: 120px;
+    border-bottom-right-radius: 120px;
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 65%;
+    width: 100%;
+    z-index: 1;
+}

package/src/components/MiniVCThumbnail/ MiniVCThumbnail.stories.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { Story, Meta } from '@storybook/react';
+
+import MiniVCThumbnail from './MiniVCThumbnail';
+import { MiniVCThumbnailProps } from './types';
+
+export default {
+    title: 'MiniVCThumbnail',
+    component: MiniVCThumbnail,
+    argTypes: {},
+} as Meta<typeof MiniVCThumbnail>;
+
+const Template: Story<MiniVCThumbnailProps> = args => <MiniVCThumbnail {...args} />;
+
+export const MiniVCThumbnailTest = Template.bind({});
+MiniVCThumbnailTest.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',
+    badgeImage: 'https://w3c-ccg.github.io/vc-ed/plugfest-1-2022/images/plugfest-1-badge-image.png',
+    onClick: () => {
+        console.log('Hello World');
+    },
+};

package/src/components/MiniVCThumbnail/MiniVCThumbnail.tsx

@@ -0,0 +1,83 @@
+import React from 'react';
+
+import VerifiedCheck from '../../assets/images/verified-check.png';
+
+import { MiniVCThumbnailProps } from './types';
+
+export const MiniVCThumbnail: React.FC<MiniVCThumbnailProps> = ({
+    title,
+    createdAt,
+    issuerImage,
+    badgeImage,
+    className = '',
+    onClick = () => {},
+}) => {
+    const titleClasses = !issuerImage ? 'w-full text-center' : 'w-3/4 text-left';
+    const createdAtClasses = !issuerImage ? 'w-full text-center' : 'text-left';
+
+    return (
+        <div
+            onClick={onClick}
+            className={`flex flex-col items-center justify-between relative py-3 px-3 rounded-3xl shadow-3xl bg-emerald-700 min-h-[120px] max-w-sm mini-vc-thumbnail-container ${className}`}
+            data-testid="mini-vc-thumbnail"
+        >
+            <div className="flex flex-row items-center justify-between mb-3 z-10">
+                {issuerImage && (
+                    <div
+                        className="flex flex-row justify-center items-center w-1/4 text-center"
+                        data-testid="mini-vc-thumbnail-issuer"
+                    >
+                        <div className="min-w-[40px] min-h-[40px] max-h-[48px] max-w-[48px] shadow-3xl p-1 rounded-full bg-white">
+                            <img
+                                className="h-full w-full object-cover rounded-full"
+                                src={issuerImage}
+                                alt="issuer image"
+                            />
+                        </div>
+                    </div>
+                )}
+                <div className={`flex flex-col items-start justify-center ${titleClasses}`}>
+                    <h2
+                        className="ml-2 text-sm tracking-wide leading-snug line-clamp-2"
+                        data-testid="mini-vc-thumbnail-title"
+                    >
+                        {title ?? ''}
+                    </h2>
+                    <p
+                        className={`ml-2 text-sm font-light line-clamp-1 ${createdAtClasses}`}
+                        data-testid="mini-vc-thumbnail-createdAt"
+                    >
+                        {createdAt ?? ''}
+                    </p>
+                </div>
+            </div>
+            <div className="flex items-center justify-center w-full mt-3">
+                {badgeImage && (
+                    <div
+                        className="flex item-center justify-center w-full -mt-3"
+                        data-testid="mini-vc-thumbnail-badge"
+                    >
+                        <div className="max-h-[80px] max-w-[80px] xxsm:h-[60px] xxsm:w-[60px] border-solid border-1 border-black bg-white z-10">
+                            <img
+                                className="h-full w-full object-cover"
+                                src={badgeImage}
+                                alt="badge image"
+                            />
+                        </div>
+                    </div>
+                )}
+                <div className="flex absolute bottom-1 right-1 items-center justify-center my-0 mx-1 h-10 w-10 rounded-full bg-white overflow-hidden">
+                    <div className="flex items-center justify-center h-5/6 w-10/12 bg-white rounded-full border-solid border-4 border-emerald-700 overflow-hidden">
+                        <img
+                            className="h-full w-full object-cover"
+                            src={VerifiedCheck ?? ''}
+                            alt="credential icon"
+                        />
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default MiniVCThumbnail;