@learncard/react 2.10.3 → 2.10.5

package/src/components/VCThumbnail/VCThumbnail.tsx

@@ -0,0 +1,182 @@
+import React from 'react';
+
+import FatArrow from '../../assets/images/icon.green.fat-arrow.png';
+import VerifiedCheck from '../../assets/images/verified-check.png';
+
+import { VCThumbnailProps } from './types';
+
+export const VCThumbnail: React.FC<VCThumbnailProps> = ({
+    title,
+    createdAt,
+    issuerImage,
+    userImage,
+    userImageComponent,
+    badgeImage,
+    className = '',
+    listView = false,
+    onClick = () => {},
+}) => {
+    let imageElement: React.ReactNode | null = null;
+    let userImageEl: React.ReactNode | null = null;
+
+    if (issuerImage) {
+        imageElement = (
+            <img className="h-full w-full object-cover" src={issuerImage} alt="issuer image" />
+        );
+    } else if (badgeImage) {
+        imageElement = (
+            <img className="h-full w-full object-cover" src={badgeImage} alt="badge image" />
+        );
+    }
+
+    if (userImage) {
+        userImageEl = (
+            <div className="inline-block relative overflow-hidden rounded-full shadow-3xl h-0 bg-white w-1/4 pb-25pct">
+                <img
+                    className="w-full h-full absolute rounded-full object-cover border-solid border-4 border-white"
+                    src={userImage}
+                    alt="user image"
+                />
+            </div>
+        );
+    } else if (!userImage && userImageComponent) {
+        userImageEl = userImageComponent;
+    }
+
+    const titleClass =
+        issuerImage || badgeImage
+            ? 'items-start justify-center w-3/4 text-left'
+            : 'item-center justify-center w-full text-center';
+
+    if (listView) {
+        return (
+            <div
+                onClick={onClick}
+                className={`flex flex-col items-center justify-between relative py-3 px-3 rounded-3xl shadow-3xl bg-emerald-700 max-w-sm vc-thumbnail-listview-container ${className}`}
+                data-testid="vc-thumbnail-list-view"
+            >
+                <div className="flex flex-row items-center justify-between mb-3 z-10">
+                    {imageElement && (
+                        <div
+                            className="flex flex-row justify-center items-center w-1/4 text-center"
+                            data-testid="vc-thumbnail-image"
+                        >
+                            <div className="h-16 w-16 border-solid border-2 border-black bg-white">
+                                {imageElement}
+                            </div>
+                        </div>
+                    )}
+
+                    <div className={`flex flex-col  ${titleClass}`}>
+                        <h2
+                            className="ml-1 sm:ml-0 md:ml-0 lg:ml-0 text-base tracking-wide leading-snug text-left line-clamp-2"
+                            data-testid="vc-thumbnail-title"
+                        >
+                            {title ?? ''}
+                        </h2>
+                        <p
+                            className="ml-1 sm:ml-0 md:ml-0 lg:ml-0 text-sm font-light text-center line-clamp-1"
+                            data-testid="vc-thumbnail-createdAt"
+                        >
+                            {createdAt ?? ''}
+                        </p>
+                    </div>
+                </div>
+                <div className="flex items-center justify-center w-full mt-3 vc-thumbnail-footer">
+                    <h3 className="text-white text-sm text-right font-normal tracking-wide leading-tight flex-1">
+                        Verified
+                    </h3>
+                    <div className="flex 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>
+                    <h3 className="text-white text-sm text-left font-normal tracking-wide leading-tight flex-1">
+                        Credential
+                    </h3>
+                </div>
+            </div>
+        );
+    }
+
+    const vcThumbNailAltContainerClass = !badgeImage ? 'vc-thumbnail-alt-container' : '';
+
+    return (
+        <div
+            onClick={onClick}
+            className={`relative py-3 xxsm:py-1 rounded-3xl shadow-3xl bg-emerald-700 vc-thumbnail-container ${vcThumbNailAltContainerClass} ${className}`}
+            data-testid="vc-thumbnail"
+        >
+            <div className="h-full w-full absolute">
+                <div className="flex flex-col items-center justify-center z-10 text-center w-full">
+                    <div className="flex flex-row items-center justify-center w-full px-2">
+                        <div className="flex flex-row items-center justify-center w-full">
+                            <h2
+                                className="text-base tracking-wide leading-snug text-center line-clamp-2"
+                                data-testid="vc-thumbnail-title"
+                            >
+                                {title ?? ''}
+                            </h2>
+                        </div>
+                    </div>
+                    <div className="w-full mt-2">
+                        <p
+                            className="text-sm font-light text-center line-clamp-1"
+                            data-testid="vc-thumbnail-createdAt"
+                        >
+                            {createdAt ?? ''}
+                        </p>
+                    </div>
+
+                    <div className="flex flex-row items-center justify-center mt-3 xxsm:mt-1 w-full">
+                        <div className="inline-block relative overflow-hidden rounded-full shadow-3xl h-0 bg-white w-1/4 pb-25pct">
+                            <img
+                                className="h-5/6 w-10/12 left-1 top-1 absolute rounded-full object-cover"
+                                src={issuerImage}
+                                alt="issuer image"
+                            />
+                        </div>
+
+                        <img
+                            className="h-8 w-8 my-0 mx-4"
+                            src={FatArrow ?? ''}
+                            alt="fat arrow icon"
+                        />
+                        {userImageEl}
+                    </div>
+                </div>
+
+                {badgeImage && (
+                    <div className="flex items-center justify-center w-full mt-4 xxxsm:mt-0">
+                        <div
+                            className="border-solid border-2 border-black bg-white relative w-1/4 h-0 overflow-hidden pt-25pct pb-0 px-0"
+                            data-testid="vc-thumbnail-badge"
+                        >
+                            <img
+                                className="h-full w-full object-cover absolute top-0 left-0"
+                                src={badgeImage}
+                                alt="badge image"
+                            />
+                        </div>
+                    </div>
+                )}
+
+                <div className="flex items-center justify-center absolute right-2 bottom-5 xxsm:bottom-3 xxxsm:bottom-3 h-8 w-8 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-2 border-emerald-700 overflow-hidden">
+                        <img
+                            className="h-full w-full object-cover"
+                            src={VerifiedCheck ?? ''}
+                            alt="credential icon"
+                        />
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default VCThumbnail;

package/src/components/VCThumbnail/__tests__/VCThumbnail.test.tsx

@@ -0,0 +1,114 @@
+import { vi } from 'vitest';
+import React from 'react';
+import '@testing-library/jest-dom';
+import { render, fireEvent } from '@testing-library/react';
+
+import VCThumbnail from '../VCThumbnail';
+
+describe('Running Tests for VCThumbnail Full View', () => {
+    test('Checks VCThumbnail renders with props', () => {
+        const handleOnClick = vi.fn();
+
+        const { getByTestId, getByAltText } = render(
+            <VCThumbnail
+                title="This is a title!"
+                createdAt="05/01/2022"
+                issuerImage="https://issuerimage.png"
+                userImage="https://userimage.png"
+                badgeImage="https://badgeimage.png"
+                listView={false}
+                onClick={handleOnClick}
+            />
+        );
+
+        fireEvent.click(getByTestId('vc-thumbnail'));
+        expect(handleOnClick).toHaveBeenCalledTimes(1);
+
+        const title = getByTestId('vc-thumbnail-title');
+        expect(title).toHaveTextContent('This is a title!');
+
+        const createdAt = getByTestId('vc-thumbnail-createdAt');
+        expect(createdAt).toHaveTextContent('05/01/2022');
+
+        const issuerImage = getByAltText('issuer image');
+        expect(issuerImage).toHaveAttribute('src', 'https://issuerimage.png');
+
+        const userImage = getByAltText('user image');
+        expect(userImage).toHaveAttribute('src', 'https://userimage.png');
+
+        const badgeImage = getByAltText('badge image');
+        expect(badgeImage).toHaveAttribute('src', 'https://badgeimage.png');
+    });
+
+    test('Checks VCThumbnail renders without props', () => {
+        const handleOnClick = vi.fn();
+
+        const { getByTestId, getByAltText, queryByTestId, queryByAltText } = render(
+            <VCThumbnail />
+        );
+
+        fireEvent.click(getByTestId('vc-thumbnail'));
+        expect(handleOnClick).not.toHaveBeenCalledTimes(1);
+
+        const title = getByTestId('vc-thumbnail-title');
+        expect(title).toBeEmptyDOMElement();
+
+        const createdAt = getByTestId('vc-thumbnail-createdAt');
+        expect(createdAt).toBeEmptyDOMElement();
+
+        const issuerImage = getByAltText('issuer image');
+        expect(issuerImage).not.toHaveAttribute('src');
+
+        const userImage = queryByAltText('user image');
+        expect(userImage).not.toBeInTheDocument();
+
+        const imageElement = queryByTestId('vc-thumbnail-badge');
+        expect(imageElement).not.toBeInTheDocument();
+    });
+});
+
+describe('Running Tests for VCThumbnail List View', () => {
+    test('Checks VCThumbnail List View renders with props', () => {
+        const handleOnClick = vi.fn();
+
+        const { getByTestId, getByAltText } = render(
+            <VCThumbnail
+                title="This is a title!"
+                createdAt="05/01/2022"
+                issuerImage="https://issuerimage.png"
+                listView
+                onClick={handleOnClick}
+            />
+        );
+
+        fireEvent.click(getByTestId('vc-thumbnail-list-view'));
+        expect(handleOnClick).toHaveBeenCalledTimes(1);
+
+        const title = getByTestId('vc-thumbnail-title');
+        expect(title).toHaveTextContent('This is a title!');
+
+        const createdAt = getByTestId('vc-thumbnail-createdAt');
+        expect(createdAt).toHaveTextContent('05/01/2022');
+
+        const issuerImage = getByAltText('issuer image');
+        expect(issuerImage).toHaveAttribute('src', 'https://issuerimage.png');
+    });
+
+    test('Checks VCThumbnail List View renders without props', () => {
+        const handleOnClick = vi.fn();
+
+        const { getByTestId, queryByTestId } = render(<VCThumbnail listView />);
+
+        fireEvent.click(getByTestId('vc-thumbnail-list-view'));
+        expect(handleOnClick).not.toHaveBeenCalledTimes(1);
+
+        const title = getByTestId('vc-thumbnail-title');
+        expect(title).toBeEmptyDOMElement();
+
+        const createdAt = getByTestId('vc-thumbnail-createdAt');
+        expect(createdAt).toBeEmptyDOMElement();
+
+        const imageElement = queryByTestId('vc-thumbnail-image');
+        expect(imageElement).not.toBeInTheDocument();
+    });
+});

package/src/components/VCThumbnail/index.ts

@@ -0,0 +1,6 @@
+/**
+ * @file Automatically generated by barrelsby.
+ */
+
+export * from './VCThumbnail';
+export * from './types';

package/src/components/VCThumbnail/types.ts

@@ -0,0 +1,46 @@
+import React from 'react';
+
+export type VCThumbnailProps = {
+    /**
+     * thumbnail title
+     * @type {string}
+     */
+    title?: string;
+    /**
+     * issue date
+     * @type {string}
+     */
+    createdAt?: string;
+    /**
+     * issuer image
+     * @type {string}
+     */
+    issuerImage?: string;
+    /**
+     * user image
+     * @type {string}
+     */
+    userImage?: string;
+    userImageComponent?: React.ReactNode;
+    /**
+     * badge image
+     * @type {string}
+     */
+    badgeImage?: string;
+    /**
+     * custom className
+     * @type {string}
+     */
+    className?: string;
+    /**
+     * condensed or full view of the thumbnail
+     * @type {boolean}
+     * @param {boolean=} false - shows full view by default.
+     */
+    listView?: boolean;
+    /**
+     *
+     * @type {function}
+     */
+    onClick?: () => void;
+};

package/src/components/VCVerificationCheck/VCVerificationCheck.tsx

@@ -0,0 +1,89 @@
+import React, { useState, useEffect } from 'react';
+import VerificationCheckDisplay from '../../assets/images/vc.check.svg';
+import CircleSpinner, { CircleLoadingState } from '../Loading/CircleSpinner';
+
+export type VCVerificationCheckProps = {
+    size?: string | number;
+    loading?: boolean;
+};
+
+export const VCVerificationCheck: React.FC<VCVerificationCheckProps> = ({ size = '44px' }) => {
+    const imageSize = {
+        width: size,
+        height: size,
+    };
+    return (
+        <div className="vc-verification-wrapper" style={{ position: 'relative' }}>
+            <div className="flex items-center justify-center bg-white rounded-full overflow-hidden">
+                <img
+                    className="h-full w-full object-contain p-1"
+                    src={VerificationCheckDisplay ?? ''}
+                    style={imageSize}
+                    alt="Verification Icon"
+                />
+            </div>
+        </div>
+    );
+};
+
+export default VCVerificationCheck;
+
+export const VCVerificationCheckWithSpinner: React.FC<
+    VCVerificationCheckProps & { spinnerSize?: string; withBorder?: boolean }
+> = ({ size = '44px', spinnerSize = '60px', loading = true, withBorder = false }) => {
+    const loadingState = loading ? CircleLoadingState.spin : CircleLoadingState.stop;
+
+    const spinnerStyle: React.CSSProperties = {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        height: spinnerSize,
+        width: spinnerSize,
+    };
+
+    const spinnerSizeNumber = parseInt(spinnerSize.replace('px', ''));
+    const offset = spinnerSizeNumber > 50 ? 3 : 2;
+
+    return (
+        <div
+            style={{ width: spinnerSize, height: spinnerSize, position: 'relative' }}
+            className={`flex items-center justify-center bg-white rounded-full overflow-hidden select-none ${withBorder ? ' ml-3 mr-3' : ''
+                }`}
+        >
+            <VCVerificationCheck size={size} loading={loading} />
+            <div className="vc-verification-spinner-overlay" style={spinnerStyle}>
+                <CircleSpinner
+                    loadingState={loadingState}
+                    size={spinnerSizeNumber}
+                    marginOffset={offset}
+                />
+            </div>
+        </div>
+    );
+};
+
+export const VCVerificationCheckWithText: React.FC<
+    VCVerificationCheckProps & { spinnerSize?: string }
+> = ({ size = '44px', spinnerSize = '60px', loading = true }) => {
+    const [defaultLoading, setDefaultLoading] = useState(true);
+
+    useEffect(() => {
+        let timer1 = setTimeout(() => setDefaultLoading(false), 3 * 1000);
+        return () => {
+            clearTimeout(timer1);
+        };
+    });
+
+    return (
+        <div className="flex justify-center items-center translate-x-[10px] w-full vc-verification-full-wrapper">
+            <span className="text-white font-bold tracking-wider">Verified</span>
+            <VCVerificationCheckWithSpinner
+                size={size}
+                spinnerSize={spinnerSize}
+                loading={loading || defaultLoading}
+                withBorder
+            />
+            <span className="text-white font-bold tracking-wider">Credential</span>
+        </div>
+    );
+};

package/src/components/VCVerificationCheck/index.ts

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

package/src/components/VCVerificationPill/VCVerificationPill.tsx

@@ -0,0 +1,85 @@
+import React from 'react';
+import { VerificationStatus, VerificationStatusEnum } from '@learncard/types';
+
+import VerificationFailedIcon from '../../assets/images/RedXCircle.svg';
+import VerificationPassedIcon from '../../assets/images/GreenCheckCircle.svg';
+import VerificationWarningIcon from '../../assets/images/YellowWarningCircle.svg';
+
+type VerificationDisplayItemProps = {
+    status?: VerificationStatus;
+    message?: string;
+    details?: string;
+};
+
+type VerifiableStateIndicatorProps = {
+    status: VerificationStatus;
+};
+
+const StatusToBgColor = {
+    [VerificationStatusEnum.Success]: 'bg-emerald-500',
+    [VerificationStatusEnum.Failed]: 'bg-yellow-400',
+    [VerificationStatusEnum.Error]: 'bg-rose-600',
+};
+
+const StatusToTextColor = {
+    [VerificationStatusEnum.Success]: 'text-emerald-700',
+    [VerificationStatusEnum.Failed]: 'text-yellow-400',
+    [VerificationStatusEnum.Error]: 'text-rose-600',
+};
+
+const StatusToIcon = {
+    [VerificationStatusEnum.Success]: VerificationPassedIcon,
+    [VerificationStatusEnum.Failed]: VerificationWarningIcon,
+    [VerificationStatusEnum.Error]: VerificationFailedIcon,
+};
+
+const StatusToText = {
+    [VerificationStatusEnum.Success]: 'Verification Success',
+    [VerificationStatusEnum.Error]: 'Verification Error ',
+    [VerificationStatusEnum.Failed]: 'Verification Failed',
+};
+
+export const ValidationStateIndicator: React.FC<VerifiableStateIndicatorProps> = ({ status }) => {
+    const bgColor = StatusToBgColor[status];
+    const source = StatusToIcon[status];
+
+    return (
+        <div className={`relative rounded-full w-[30px] h-[30px] ${bgColor}`}>
+            <div className="relative w-[100%] h-[100%] flex items-center justify-center rounded-[50%] bg-white rounded-full overflow-hidden">
+                <img
+                    className="h-full w-full object-contain p-1"
+                    src={source ?? ''}
+                    alt="Verification Status Icon"
+                />
+            </div>
+        </div>
+    );
+};
+
+const VCVerificationPill: React.FC<VerificationDisplayItemProps> = ({
+    message = '',
+    details,
+    status = VerificationStatusEnum.Success,
+}) => {
+    const statusColor = StatusToTextColor[status];
+    const statusInfoText = StatusToText[status];
+
+    return (
+        <section className="flex width-full bg-white p-2 px-5 my-3.5 justify-between items-center relative vc-verification-checklist-pill rounded-[22px]">
+            <div className="vc-pill-left">
+                <p className={`text-[10px] font-bold status-text uppercase ${statusColor}`}>
+                    {statusInfoText}
+                </p>
+
+                <p className="text-[12px] text-grayscale-900 vc-pill-text">{message}</p>
+
+                {details && <p className="text-[12px] text-gray-600"> {details}</p>}
+            </div>
+            <div className="vc-pill-right">
+                <ValidationStateIndicator status={status} />
+            </div>
+        </section>
+    );
+};
+
+export default VCVerificationPill;

package/src/components/VCVerificationPill/index.ts

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

package/src/components/index.ts

@@ -0,0 +1,48 @@
+/**
+ * @file Automatically generated by barrelsby.
+ */
+
+export * from './AchievementCard/index';
+export * from './BadgeThumbnailImg/index';
+export * from './BoostGenericCard/index';
+export * from './BoostSmallCard/index';
+export * from './Button/index';
+export * from './CertificateDisplayCard/index';
+export * from './CircleCheckButton/index';
+export * from './CircleIcon/index';
+export * from './CourseCard/index';
+export * from './CourseVerticalCard/index';
+export * from './FlippyCard/index';
+export * from './GenericCard/index';
+export * from './JobHistoryCard/index';
+export * from './JobListCard/index';
+export * from './LearnCardCreditCardBackFace/index';
+export * from './LearnCardCreditCardFrontFace/index';
+export * from './LearnPill/index';
+export * from './Lightbox/index';
+export * from './Loading/index';
+export * from './MeritBadgeDisplayCard/index';
+export * from './MiniVCThumbnail/index';
+export * from './Notification/index';
+export * from './NotificationBoostCard/index';
+export * from './NotificationUserAcceptedBoostCard/index';
+export * from './NotificationUserCard/index';
+export * from './QRCodeCard/index';
+export * from './RoundedPill/index';
+export * from './RoundedSquare/index';
+export * from './SchoolIdCard/index';
+export * from './SkillTabCard/index';
+export * from './SkillVerticalCard/index';
+export * from './SkillsCard/index';
+export * from './SkillsStatsCard/index';
+export * from './SmallAchievementCard/index';
+export * from './UserProfilePicture/index';
+export * from './VCCard/index';
+export * from './VCDisplayBackFace/index';
+export * from './VCDisplayCard/index';
+export * from './VCDisplayCard2/index';
+export * from './VCDisplayFrontFace/index';
+export * from './VCThumbnail/index';
+export * from './VCVerificationCheck/index';
+export * from './VCVerificationPill/index';
+export * from './svgs/index';

package/src/components/svgs/AccommodationsIcon.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+
+const AccommodationsIcon: React.FC<{ className?: string; size?: string }> = ({
+    className = '',
+    size = '21',
+}) => {
+    return (
+        <svg
+            width={size}
+            height={size}
+            viewBox="0 0 25 24"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+            className={className}
+        >
+            <path
+                d="M13.7468 11.7616V4.65432C13.7468 3.74053 14.4872 3 15.4008 3C16.3145 3 17.0549 3.74053 17.0549 4.65432V13.4226L18.6758 11.8013C19.3224 11.1546 20.3695 11.1546 21.015 11.8013C21.6617 12.4481 21.6617 13.4954 21.015 14.141L15.9305 19.2265C14.9617 20.3147 13.5515 21 11.9814 21H9.73258C6.81294 21 4.445 18.6327 4.445 15.7115V5.46438C4.445 4.55058 5.18539 3.81006 6.09903 3.81006C7.01266 3.81006 7.75305 4.55058 7.75305 5.46438V11.8996"
+                stroke="currentColor"
+                strokeWidth="1.5"
+                strokeMiterlimit="10"
+            />
+            <path
+                d="M10.751 9.32244C10.751 8.49473 11.4216 7.82373 12.2489 7.82373C13.0762 7.82373 13.7468 8.49473 13.7468 9.32244V12.2636C13.7468 13.0913 13.0762 13.7623 12.2489 13.7623C11.4216 13.7623 10.751 13.0913 10.751 12.2636V9.32244Z"
+                stroke="currentColor"
+                strokeWidth="1.5"
+                strokeMiterlimit="10"
+            />
+            <path
+                d="M7.75527 9.32244C7.75527 8.49473 8.4259 7.82373 9.25316 7.82373C10.0804 7.82373 10.7511 8.49473 10.7511 9.32244V12.2636C10.7511 13.0913 10.0804 13.7623 9.25316 13.7623C8.4259 13.7623 7.75527 13.0913 7.75527 12.2636V9.32244Z"
+                stroke="currentColor"
+                strokeWidth="1.5"
+                strokeMiterlimit="10"
+            />
+        </svg>
+    );
+};
+
+export default AccommodationsIcon;

package/src/components/svgs/AccomplishmentsIcon.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+
+const AccomplishmentsIcon: React.FC<{ className?: string; size?: string }> = ({
+    className = '',
+    size = '21',
+}) => {
+    return (
+        <svg
+            width={size}
+            height={size}
+            viewBox="0 0 24 24"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+            className={className}
+        >
+            <path
+                d="M9.55107 11.5523L12.6845 14.6763L21.2944 6.06641"
+                stroke="currentColor"
+                strokeWidth="2"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+            />
+            <path
+                d="M19.2562 15.1049C17.5418 18.9907 12.9988 20.7527 9.11295 19.0384C5.22709 17.324 3.46511 12.781 5.17947 8.89511C6.89382 5.00925 11.4368 3.24728 15.3227 4.96163"
+                stroke="currentColor"
+                strokeWidth="1.5"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+            />
+        </svg>
+    );
+};
+
+export default AccomplishmentsIcon;