@learncard/react 2.10.3 → 2.10.4

package/src/components/BadgeThumbnailImg/BadgeThumbnailImg.tsx

@@ -0,0 +1,72 @@
+import React from 'react';
+
+type BadgeThumbnailImgProps = {
+    src?: string;
+    alt?: string;
+    className?: string;
+    /**
+     * Tailwind color class for the placeholder glyph. Defaults to a neutral
+     * gray that reads well on light backgrounds; pass e.g. `text-white` when
+     * the thumbnail sits on a colored badge circle.
+     */
+    placeholderClassName?: string;
+};
+
+/**
+ * Credential/badge thumbnail image with a graceful broken-image fallback.
+ *
+ * When `src` is empty or the image fails to load (404 / decode error), a
+ * neutral medal/badge glyph placeholder is rendered instead of the browser's
+ * broken-image icon. A white backing is applied to the image so transparent
+ * logos don't pick up whatever sits behind the thumbnail.
+ *
+ * This is the react-learn-card-local equivalent of learn-card-base's
+ * BadgeThumbnailImg (react-learn-card cannot depend on learn-card-base).
+ */
+const BadgeThumbnailImg: React.FC<BadgeThumbnailImgProps> = ({
+    src,
+    alt = 'badge thumbnail',
+    className = '',
+    placeholderClassName = 'text-grayscale-400',
+}) => {
+    const [errored, setErrored] = React.useState(false);
+
+    React.useEffect(() => {
+        setErrored(false);
+    }, [src]);
+
+    if (!src || errored) {
+        return (
+            <div className="flex h-full w-full items-center justify-center">
+                <svg
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    xmlns="http://www.w3.org/2000/svg"
+                    className={`w-1/2 h-1/2 ${placeholderClassName}`}
+                    aria-hidden="true"
+                    data-testid="badge-thumbnail-placeholder"
+                >
+                    <circle cx="12" cy="9" r="6" stroke="currentColor" strokeWidth="1.75" />
+                    <path
+                        d="M8.5 14.5 7 22l5-3 5 3-1.5-7.5"
+                        stroke="currentColor"
+                        strokeWidth="1.75"
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                    />
+                </svg>
+            </div>
+        );
+    }
+
+    return (
+        <img
+            src={src}
+            alt={alt}
+            className={`bg-white ${className}`}
+            onError={() => setErrored(true)}
+        />
+    );
+};
+
+export default BadgeThumbnailImg;

package/src/components/BadgeThumbnailImg/index.ts

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

package/src/components/BoostGenericCard/AlignmentSkillsCount.tsx

@@ -0,0 +1,54 @@
+import React from 'react';
+import PuzzlePiece from '../svgs/PuzzlePiece';
+import { VC } from '@learncard/types';
+import { categorizeSkills } from '../../helpers/credential.helpers';
+
+type AlignmentSkillsCountProps = {
+    credential?: VC;
+    onClick?: () => void;
+    className?: string;
+};
+
+const AlignmentSkillsCount: React.FC<AlignmentSkillsCountProps> = ({
+    credential,
+    onClick,
+    className = '',
+}) => {
+    if (!credential) return <></>;
+
+    const achievement = (credential?.credentialSubject as any)?.achievement;
+    let alignmentCount = achievement?.alignment?.length || 0;
+
+    if (alignmentCount === 0 && credential.skills?.length > 0) {
+        // fallback to legacy skills field if present and no alignments
+        const skillsMap = categorizeSkills(credential.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;
+        alignmentCount = total;
+    }
+
+    return (
+        <div
+            role={onClick ? ('button' as const) : undefined}
+            onClick={onClick}
+            className={`px-[10px] py-[2px] flex gap-[3px] items-center rounded-[5px] overflow-hidden bg-violet-100 ${className}`}
+        >
+            <PuzzlePiece className="w-[20px] h-[20px] text-grayscale-800" version="filled" />
+            <p className="text-[12px] text-grayscale-800 font-poppins font-[600]">
+                {`${alignmentCount} Skill${alignmentCount !== 1 ? 's' : ''}`}
+            </p>
+        </div>
+    );
+};
+
+export default AlignmentSkillsCount;

package/src/components/BoostGenericCard/BoostGenericCard.stories.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import { Story, Meta } from '@storybook/react';
+import BoostGenericCard from './BoostGenericCard';
+import { BoostGenericCardProps, WalletCategoryTypes } from '../../types';
+import { AllFieldsCredential } from '../../helpers/test.helpers';
+
+export default {
+    title: 'Boost Generic Card',
+    component: BoostGenericCard,
+    argTypes: {},
+} as Meta<typeof BoostGenericCard>;
+
+const Template: Story<BoostGenericCardProps> = args => <BoostGenericCard {...args} />;
+
+export const BoostGenericCardTest = Template.bind({});
+BoostGenericCardTest.args = {
+    title: 'Title Title Title',
+    type: WalletCategoryTypes.skills,
+    thumbImgSrc: '',
+    bgImgSrc: 'https://picsum.photos/200',
+    dateDisplay: 'May 21, 2022',
+    issuerName: 'Beau Bobby Bruce',
+    innerOnClick: () => console.log('innerOnClick'),
+    optionsTriggerOnClick: () => console.log('//options trigger click'),
+};
+
+export const InSkillsModal = Template.bind({});
+InSkillsModal.args = {
+    title: 'Title Title Title',
+    type: WalletCategoryTypes.skills,
+    thumbImgSrc: '',
+    bgImgSrc: 'https://picsum.photos/200',
+    dateDisplay: 'May 21, 2022',
+    issuerName: 'Beau Bobby Bruce',
+    innerOnClick: () => console.log('innerOnClick'),
+    optionsTriggerOnClick: () => console.log('//options trigger click'),
+    isInSkillsModal: true,
+    credential: AllFieldsCredential,
+};

package/src/components/BoostGenericCard/BoostGenericCard.tsx

@@ -0,0 +1,177 @@
+import React from 'react';
+import { BoostGenericCardProps, WalletCategoryTypes } from '../../types';
+import { TYPE_TO_IMG_SRC, TYPE_TO_WALLET_DARK_COLOR } from '../../constants';
+import { DisplayTypeEnum, getDisplayIcon } from '../../helpers/display.helpers';
+import AlignmentSkillsCount from './AlignmentSkillsCount';
+import ThreeDotVertical from '../svgs/ThreeDotVertical';
+import { CircleCheckButton } from '../CircleCheckButton';
+import BadgeThumbnailImg from '../BadgeThumbnailImg/BadgeThumbnailImg';
+
+export const BoostGenericCard: React.FC<BoostGenericCardProps> = ({
+    title,
+    customTitle,
+    thumbImgSrc,
+    customThumbClass = '',
+    customHeaderClass = '',
+    type = WalletCategoryTypes.achievements,
+    className,
+    onCheckClick,
+    showChecked,
+    checkStatus,
+    customThumbComponent,
+    innerOnClick,
+    bgImgSrc,
+    issuerName,
+    customIssuerName,
+    dateDisplay,
+    customDateDisplay,
+    optionsTriggerOnClick,
+    verifierBadge,
+    credential,
+    isInSkillsModal,
+    displayType,
+    linkedCredentialsCount = 0,
+    linkedCredentialsClassName = '',
+    checkBtnClass = '',
+}) => {
+    const thumbClass = TYPE_TO_WALLET_DARK_COLOR[type]
+        ? `bg-${TYPE_TO_WALLET_DARK_COLOR[type]}`
+        : 'bg-grayscale-50';
+    const defaultThumbClass = `small-boost-card-thumb flex h-[110px] w-[110px] my-[10px] mx-auto ${thumbClass} overflow-hidden flex-col justify-center items-center rounded-full ${customThumbClass}`;
+    const imgSrc = thumbImgSrc?.trim() !== '' ? thumbImgSrc : TYPE_TO_IMG_SRC[type];
+
+    const handleInnerClick = () => innerOnClick?.();
+    const handleOptionsClick = () => optionsTriggerOnClick?.();
+
+    const DisplayIcon = getDisplayIcon(displayType as DisplayTypeEnum);
+
+    return (
+        <div
+            className={`flex bg-white flex-col shadow-bottom relative p-0 w-[160px] h-[285px] rounded-[20px] overflow-hidden ${className}`}
+        >
+            {optionsTriggerOnClick && (
+                <section
+                    className="absolute cursor-pointer h-[30px] w-[30px] top-[5px] right-[5px] rounded-full bg-white/70 flex items-center justify-center z-20"
+                    onClick={handleOptionsClick}
+                >
+                    <ThreeDotVertical className="h-[20px] w-[20px] text-grayscale-900" />
+                </section>
+            )}
+
+            {bgImgSrc && (
+                <section className="absolute top-[-50px] left-0 rounded-b-full overflow-hidden z-0">
+                    <img className="h-full w-full object-cover" src={bgImgSrc} />
+                </section>
+            )}
+
+            <button
+                type="button"
+                className="z-10 flex flex-col flex-grow"
+                onClick={handleInnerClick}
+            >
+                {/* Thumbnail */}
+                {customThumbComponent || (
+                    <section className={defaultThumbClass}>
+                        {thumbImgSrc?.trim() ? (
+                            <BadgeThumbnailImg
+                                className="w-full h-full rounded-full object-cover"
+                                src={thumbImgSrc}
+                                alt="Credential Achievement"
+                            />
+                        ) : (
+                            <img
+                                className="max-w-full p-0 object-cover rounded-full"
+                                src={imgSrc}
+                            />
+                        )}
+                    </section>
+                )}
+
+                {/* Details Section: grows to fill available space */}
+                <section
+                    className={`flex flex-col flex-grow items-center justify-end pt-1 w-full ${
+                        linkedCredentialsCount === 0 ? 'pb-[20px]' : ''
+                    }`}
+                >
+                    <div className="px-1 flex flex-col items-center justify-center w-full">
+                        {/* Title - dynamically size based on length */}
+                        {!customTitle ? (
+                            <p
+                                className={`
+                                ${customHeaderClass}
+                                font-medium text-center text-grayscale-900 line-clamp-2
+                                h-[50px] flex items-center justify-center
+                                ${
+                                    (title?.length ?? 0) > 35
+                                        ? 'text-[13px] leading-tight'
+                                        : 'text-[16px]'
+                                }
+                            `}
+                                title={title}
+                            >
+                                {title}
+                            </p>
+                        ) : (
+                            customTitle
+                        )}
+
+                        {/* Verifier & Issuer */}
+                        <div className="mt-1 w-full px-4 text-center">
+                            <span className="line-clamp-2 break-words text-[12px] leading-snug text-grayscale-700">
+                                {verifierBadge && (
+                                    <span className="mr-1 inline-block align-middle">
+                                        {verifierBadge}
+                                    </span>
+                                )}
+                                {customIssuerName || (
+                                    <span className="font-bold">{issuerName}</span>
+                                )}
+                            </span>
+                        </div>
+
+                        {/* Date */}
+                        {customDateDisplay || (
+                            <span className="text-[11px] text-grayscale-700 mt-1">
+                                {dateDisplay}
+                            </span>
+                        )}
+
+                        {/* Skills count if in modal */}
+                        {isInSkillsModal && credential && (
+                            <AlignmentSkillsCount
+                                credential={credential}
+                                onClick={handleInnerClick}
+                                className="mt-[16px]"
+                            />
+                        )}
+                    </div>
+
+                    {/* Linked Credentials moved inside details */}
+                    {linkedCredentialsCount > 0 && (
+                        <div
+                            className={`mt-auto flex items-center justify-center py-1 w-full ${linkedCredentialsClassName}`}
+                        >
+                            <DisplayIcon className="h-[20px] w-[20px] text-grayscale-900" />
+                            <span className="ml-1 text-sm font-semibold text-grayscale-900">
+                                +{linkedCredentialsCount} Linked
+                            </span>
+                        </div>
+                    )}
+                </section>
+            </button>
+
+            {/* Optional Check Button overlay */}
+            {showChecked && (
+                <div className="absolute top-[5px] left-[5px] z-20">
+                    <CircleCheckButton
+                        checked={checkStatus}
+                        onClick={onCheckClick}
+                        className={checkBtnClass}
+                    />
+                </div>
+            )}
+        </div>
+    );
+};
+
+export default BoostGenericCard;

package/src/components/BoostGenericCard/index.ts

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

package/src/components/BoostSmallCard/BoostSmallCard.stories.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import { Story, Meta } from '@storybook/react';
+import BoostSmallCard from './BoostSmallCard';
+import { BoostSmallCardProps, WalletCategoryTypes } from '../../types';
+
+export default {
+    title: 'Boost Small Card',
+    component: BoostSmallCard,
+    argTypes: {},
+} as Meta<typeof BoostSmallCard>;
+
+const Template: Story<BoostSmallCardProps> = args => <BoostSmallCard {...args} />;
+
+const issueHistoryDummyData = [
+    {
+        id: '1',
+        name: 'John Doe',
+        thumb: 'https://picsum.photos/200',
+        date: '2020-01-01',
+    },
+    {
+        id: '2',
+        name: 'Jane Doe',
+        thumb: 'https://picsum.photos/200',
+        date: '2020-01-01',
+    },
+    {
+        id: '3',
+        name: 'John Doe',
+        // thumb: 'https://picsum.photos/200',
+        date: '2020-01-01',
+    },
+    {
+        id: '4',
+        name: 'John Doe',
+        thumb: 'https://picsum.photos/200',
+        date: '2020-01-01',
+    },
+    {
+        id: '5',
+        name: 'John Doe',
+        thumb: 'https://picsum.photos/200',
+        date: '2020-01-01',
+    },
+];
+
+export const BoostSmallCardTest = Template.bind({});
+BoostSmallCardTest.args = {
+    title: 'Title Title Title',
+    issueHistory: issueHistoryDummyData,
+    type: WalletCategoryTypes.skills,
+    thumbImgSrc: '',
+    bgImgSrc: 'https://picsum.photos/200',
+    innerOnClick: () => console.log('innerOnClick'),
+    buttonOnClick: () => console.log('buttonOnClick'),
+    optionsTriggerOnClick: () => console.log('//options trigger click'),
+};

package/src/components/BoostSmallCard/BoostSmallCard.tsx

@@ -0,0 +1,178 @@
+import React from 'react';
+
+import CaretRightFilled from '../../assets/images/CaretRightFilled.svg';
+import AddAwardLight from '../../assets/images/addawardlight.svg';
+import ThreeDotVertical from '../svgs/ThreeDotVertical';
+import UserProfilePicture from '../UserProfilePicture/UserProfilePicture';
+import { CircleCheckButton } from '../CircleCheckButton';
+import BadgeThumbnailImg from '../BadgeThumbnailImg/BadgeThumbnailImg';
+
+import { BoostSmallCardProps, WalletCategoryTypes } from '../../types';
+import { TYPE_TO_IMG_SRC, TYPE_TO_WALLET_DARK_COLOR } from '../../constants';
+import { getDarkBGColor } from '../../helpers/color.helpers';
+
+export const BoostSmallCard: React.FC<BoostSmallCardProps> = ({
+    title = 'Title Lorem Ipsum',
+    customTitle,
+    thumbImgSrc,
+    customThumbClass = '',
+    customHeaderClass = '',
+    type = WalletCategoryTypes.achievements,
+    className,
+    onCheckClick,
+    showChecked,
+    checkStatus,
+    arrowOnClick,
+    buttonOnClick,
+    customButtonComponent,
+    customBodyClass,
+    customBodyComponent,
+    customThumbComponent,
+    customDraftComponent,
+    innerOnClick,
+    issueHistory,
+    bgImgSrc,
+    optionsTriggerOnClick,
+}) => {
+    const thumbClass = TYPE_TO_WALLET_DARK_COLOR[type]
+        ? `bg-${TYPE_TO_WALLET_DARK_COLOR[type]}`
+        : 'bg-grayscale-50';
+    const defaultThumbClass = `small-boost-card-thumb flex h-[110px] w-[110px] my-[10px] mx-auto ${thumbClass} overflow-hidden flex-col justify-center items-center rounded-full ${customThumbClass}`;
+    const imgSrc = thumbImgSrc?.trim() !== '' ? thumbImgSrc : TYPE_TO_IMG_SRC[type];
+    const headerBgColor = getDarkBGColor(type);
+    const checkBtnClass = checkStatus ? 'generic-vc-card checked' : 'generic-vc-card unchecked';
+    const defaultHeaderClass = `flex generic-card-title w-full justify-center ${customHeaderClass}`;
+    const defaultBodyClass = ` boost-small-card-body flex justify-center items-center text-center text-[14px] overflow-hidden text-grayscale-500 py-[5px] px-[10px] ${customBodyClass}`;
+    const defaultButtonClass = `cursor-pointer small-boost-boost-btn flex boost-btn-click rounded-[40px] w-[140px] h-[48px] text-white flex justify-center items-center ${headerBgColor}`;
+    const innerClickContainerClass = `relative cursor-pointer boost-small-card inner-click-container z-10`;
+
+    const issueHistoryDisplay =
+        issueHistory && issueHistory?.length > 3 ? issueHistory?.slice(0, 3) : issueHistory;
+    const renderIssueHistory = issueHistoryDisplay?.map(issueItem => {
+        return (
+            <div
+                key={issueItem?.id}
+                className="profile-thumb-img border-[1px] border-white border-solid  vc-issuee-image h-[35px] w-[35px] rounded-full overflow-hidden mx-[-5px]"
+            >
+                <UserProfilePicture
+                    customContainerClass={`h-full w-full object-cover ${
+                        !issueItem?.thumb ? 'pt-[8px]' : ''
+                    }`}
+                    user={{ image: issueItem?.thumb, name: issueItem?.name }}
+                    alt="profile"
+                />
+            </div>
+        );
+    });
+
+    const handleInnerClick = () => {
+        innerOnClick?.();
+    };
+
+    const handleOptionsClick = () => {
+        optionsTriggerOnClick?.();
+    };
+
+    return (
+        <div
+            className={`flex generic-display-card-simple bg-white flex-col shadow-bottom relative $ py-[0px] px-[0px] w-[160px] h-[280px] rounded-[20px] overflow-hidden ${className}`}
+        >
+            {optionsTriggerOnClick && (
+                <section
+                    className="absolute cursor-pointer shadow-bottom h-[30px] w-[30px] top-[5px] right-[5px] rounded-full overflow-hidden z-20 bg-white/70 flex items-center justify-center"
+                    onClick={handleOptionsClick}
+                >
+                    <ThreeDotVertical className="h-[20px] w-[20px] z-50 text-grayscale-900" />
+                </section>
+            )}
+
+            {bgImgSrc && (
+                <section className="absolute top-[-50px]  shadow-bottom left-[0px] rounded-b-full overflow-hidden z-0 mt-3">
+                    <img className="h-full w-full object-cover overflow-hidden" src={bgImgSrc} />
+                </section>
+            )}
+
+            <div className={innerClickContainerClass} onClick={handleInnerClick}>
+                {customThumbComponent}
+                {!customThumbComponent && (
+                    <section className={defaultThumbClass}>
+                        {thumbImgSrc && thumbImgSrc?.trim() !== '' && (
+                            <BadgeThumbnailImg
+                                className="generic-display-card-img h-full w-full  w-[110px] h-[110px] rounded-full object-cover overflow-hidden"
+                                src={thumbImgSrc ?? ''}
+                                alt="Credential Achievement Image"
+                            />
+                        )}
+                        {(!thumbImgSrc || thumbImgSrc?.trim() === '') && (
+                            <img
+                                className="max-w-[110px] w-full h-full p-[0px] object-cover  rounded-full"
+                                src={imgSrc}
+                            />
+                        )}
+                    </section>
+                )}
+
+                {customTitle && customTitle}
+                {!customTitle && (
+                    <section className={defaultHeaderClass}>
+                        <p className="relative z-[100] small-boost-title text-[16px] leading-[130%] p-[0px] font-medium text-center line-clamp-2">
+                            {title}
+                        </p>
+                    </section>
+                )}
+
+                <section className={defaultBodyClass}>
+                    {customBodyComponent && customBodyComponent}
+                    {!customBodyComponent &&
+                        issueHistory &&
+                        issueHistory?.length > 0 &&
+                        renderIssueHistory}
+                    {!customBodyComponent && issueHistory && issueHistory?.length > 3 && (
+                        <span className="small-boost-issue-count ml-[10px] font-semibold">
+                            +{issueHistory?.length - 3}
+                        </span>
+                    )}
+                </section>
+            </div>
+
+            <section className="small-boost-card-footer flex justify-center items-center absolute bottom-[15px] w-full">
+                {customButtonComponent && customButtonComponent}
+
+                {!customButtonComponent && (
+                    <div className="flex w-full flex-col items-center justify-center">
+                        {customDraftComponent && customDraftComponent}
+                        <div onClick={buttonOnClick} className={defaultButtonClass}>
+                            <img className="h-[25px] mr-[7px] text-" src={AddAwardLight} />
+                            <span className="font-mouse text-[25px] tracking-wider">BOOST</span>
+                        </div>
+                    </div>
+                )}
+            </section>
+            {showChecked && (
+                <div className="check-btn-overlay absolute top-[5px] left-[5px]">
+                    <CircleCheckButton
+                        checked={checkStatus}
+                        onClick={onCheckClick}
+                        className={checkBtnClass}
+                    />
+                </div>
+            )}
+
+            {arrowOnClick && (
+                <button
+                    type="button"
+                    onClick={arrowOnClick}
+                    className="arrow-btn-overlay absolute top-[52px] right-[2px]"
+                >
+                    <img
+                        className="h-full w-full object-contai"
+                        src={CaretRightFilled ?? ''}
+                        alt="Right Caret"
+                    />
+                </button>
+            )}
+        </div>
+    );
+};
+
+export default BoostSmallCard;

package/src/components/BoostSmallCard/index.ts

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

package/src/components/Button/Button.stories.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { Story, Meta } from '@storybook/react';
+
+import Button, { ButtonProps } from './Button';
+
+export default {
+    title: 'Button',
+    component: Button,
+    argTypes: {},
+} as Meta<typeof Button>;
+
+const Template: Story<ButtonProps> = args => <Button {...args} />;
+
+export const ButtonTest = Template.bind({});
+ButtonTest.args = {
+    onClick: () => {
+        console.log('Nice');
+    },
+    text: 'HELLO!',
+};

package/src/components/Button/Button.test.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import '@testing-library/jest-dom';
+import { render, screen } from '@testing-library/react';
+
+import Button from './Button';
+
+describe('Running Test for Mr. Button', () => {
+    test('Check Button Render', () => {
+        render(<Button text="Button" />);
+        expect(screen.getByRole('button', { name: 'Button' })).toBeInTheDocument();
+        expect(
+            screen.queryByRole('button', { name: 'Not In The Document' })
+        ).not.toBeInTheDocument();
+    });
+});

package/src/components/Button/Button.tsx

@@ -0,0 +1,21 @@
+import React, { MouseEventHandler } from 'react';
+
+export type ButtonProps = {
+    text?: string;
+    onClick: MouseEventHandler<HTMLButtonElement>;
+    className?: string;
+};
+
+export const Button: React.FC<ButtonProps> = ({ text, onClick, className = '' }) => {
+    return (
+        <button
+            type="button"
+            onClick={onClick}
+            className={`p-4 border rounded text-gray-700 ${className}`}
+        >
+            {text}
+        </button>
+    );
+};
+
+export default Button;

package/src/components/Button/index.ts

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