@learncard/react 2.10.3 → 2.10.5

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

@@ -0,0 +1,48 @@
+import { vi } from 'vitest';
+import React from 'react';
+import '@testing-library/jest-dom';
+import { render, fireEvent, screen } from '@testing-library/react';
+
+import LearnCardCreditCardFrontFace from '../LearnCardCreditCardFrontFace';
+
+describe('LearnCardCreditCardFrontFace', () => {
+    test('Checks LearnCardCreditCardFrontFace renders with props', () => {
+        const handleOnClick = vi.fn();
+
+        render(
+            <LearnCardCreditCardFrontFace
+                userImage="https://img.freepik.com/free-photo/pleasant-looking-serious-blonde-woman-with-long-hair-wears-blue-casual-sweater_273609-17050.jpg?w=2000"
+                qrCodeValue="https://www.npmjs.com/package/@learncard/react"
+                showActionButton
+                actionButtonText="Open Card"
+                onClick={handleOnClick}
+                children={<div>I am a child</div>}
+            />
+        );
+
+        const actionButton = screen.getByTestId('credit-card-frontface-button');
+
+        expect(actionButton).toBeInTheDocument();
+        expect(actionButton).toHaveTextContent('Open Card');
+
+        fireEvent.click(actionButton);
+        expect(handleOnClick).toHaveBeenCalledTimes(1);
+
+        const userImage = screen.getByAltText('user image');
+        expect(userImage).toHaveAttribute(
+            'src',
+            'https://img.freepik.com/free-photo/pleasant-looking-serious-blonde-woman-with-long-hair-wears-blue-casual-sweater_273609-17050.jpg?w=2000'
+        );
+
+        const qrCode = screen.queryByTestId('credit-card-qr-code');
+        expect(qrCode).toBeInTheDocument();
+    });
+
+    test('Checks LearnCardCreditCardFrontFace renders without props', () => {
+        render(<LearnCardCreditCardFrontFace />);
+
+        expect(screen.queryByTestId('credit-card-frontface-button')).not.toBeInTheDocument();
+        expect(screen.queryByTestId('credit-card-frontface-userImg')).not.toBeInTheDocument();
+        expect(screen.queryByTestId('credit-card-qr-code')).not.toBeInTheDocument();
+    });
+});

package/src/components/LearnCardCreditCardFrontFace/index.ts

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

package/src/components/LearnCardCreditCardFrontFace/types.ts

@@ -0,0 +1,42 @@
+export type LearnCardCreditCardFrontFaceProps = {
+    /**
+     * user image
+     * @type {string}
+     */
+    userImage?: string;
+    /**
+     * custom image component
+     * @type {React.ReactNode}
+     */
+    userImageComponent?: React.ReactNode;
+    /**
+     * qr code value
+     * @type {string}
+     */
+    qrCodeValue?: string;
+    /**
+     * custom className
+     * @type {string}
+     */
+    className?: string;
+    /**
+     * show or hide an action button
+     * @type {boolean}
+     * @param {boolean=} false - Action button hidden by default.
+     */
+    showActionButton?: boolean;
+    /**
+     * action button text
+     * @type {boolean}
+     * @param {boolean=} "Open Card" - set as default text.
+     */
+    actionButtonText?: string;
+    /**
+     *
+     * action button click handler
+     * @type {function}
+     */
+    onClick?: () => void;
+
+    children?: React.ReactNode;
+};

package/src/components/LearnPill/LearnPill.stories.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { Story, Meta } from '@storybook/react';
+import { LCSubtypes } from '../../types';
+import LearnPill from './LearnPill';
+import { LearnPillProps } from '../../types';
+
+export default {
+    title: 'LearnPill',
+    component: LearnPill,
+    argTypes: {},
+} as Meta<typeof LearnPill>;
+
+const Template: Story<LearnPillProps> = args => <LearnPill {...args} />;
+
+export const LearnPillTest = Template.bind({});
+LearnPillTest.args = {
+    count: 0,
+    type: LCSubtypes.skill,
+    className: 'learn-pilled',
+};

package/src/components/LearnPill/LearnPill.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import { LearnPillProps, LCSubtypes } from '../../types';
+import { TYPE_TO_MINI_ICON } from '../../constants/';
+
+const TYPE_TO_COLOR: any = {
+    [LCSubtypes.course]: 'bg-emerald-50',
+    [LCSubtypes.achievement]: 'bg-spice-50',
+    [LCSubtypes.skill]: 'bg-indigo-50',
+};
+
+const TYPE_TO_TEXT_COLOR: any = {
+    [LCSubtypes.course]: 'text-emerald-700',
+    [LCSubtypes.achievement]: 'text-spice-500',
+    [LCSubtypes.skill]: 'text-indigo-600',
+};
+
+export const LearnPill: React.FC<LearnPillProps> = ({
+    count = 0,
+    type = LCSubtypes.course,
+    className,
+}) => {
+    const imgSrc = TYPE_TO_MINI_ICON[type];
+    const bgColor = TYPE_TO_COLOR[type];
+    const textColor = TYPE_TO_TEXT_COLOR[type];
+    return (
+        <div
+            className={`course-card-stat-bubble px-[10px] rounded-[30px] flex ${bgColor} min-w-[48px] max-w-[100px] h-[30px] items-center ${className}`}
+        >
+            <img src={imgSrc} className="mr-[5px]" />
+            <span className={`flex items-center text-sm ${textColor} font-bold`}>{count}</span>
+        </div>
+    );
+};
+
+export default LearnPill;

package/src/components/LearnPill/index.ts

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

package/src/components/Lightbox/Lightbox.tsx

@@ -0,0 +1,133 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+
+import X from '../svgs/X';
+
+import { getVideoMetadata, VideoMetadata } from '../../helpers/video.helpers';
+
+export type LightboxItemType = 'photo' | 'video';
+
+export type LightboxItem = {
+    url: string;
+    type: LightboxItemType;
+};
+
+export type LightboxImage = LightboxItem & {
+    type: 'photo';
+    alt?: string;
+};
+
+export type LightboxVideo = LightboxItem & {
+    type: 'video';
+};
+
+export type LightboxProps = {
+    items: LightboxItem[];
+    currentUrl: string | undefined;
+    setCurrentUrl: (url: string | undefined) => void;
+    showCloseButton?: boolean;
+    enableImageClick?: boolean;
+};
+
+export const Lightbox: React.FC<LightboxProps> = ({
+    items,
+    currentUrl,
+    setCurrentUrl,
+    showCloseButton = true,
+    enableImageClick = false,
+}) => {
+    const currentItem = items.find(item => item.url === currentUrl);
+    const innerRef = useRef<HTMLImageElement>(null);
+    const [videoMetadata, setVideoMetadata] = useState<VideoMetadata | null>(null);
+
+    const goToNextItem = useCallback(() => {
+        const currentIndex = items.findIndex(item => item.url === currentUrl);
+        const nextItem = items.at((currentIndex + 1) % items.length);
+        if (nextItem) setCurrentUrl(nextItem.url);
+    }, [currentUrl, items, setCurrentUrl]);
+
+    const goToPreviousItem = useCallback(() => {
+        const currentIndex = items.findIndex(item => item.url === currentUrl);
+        const previousItem = items.at((currentIndex - 1 + items.length) % items.length);
+        if (previousItem) setCurrentUrl(previousItem.url);
+    }, [currentUrl, items, setCurrentUrl]);
+
+    useEffect(() => {
+        const keydownListener = (e: KeyboardEvent) => {
+            if (!currentUrl || !currentItem) return;
+
+            if (e.key === 'Escape') {
+                e.preventDefault();
+                setCurrentUrl(undefined);
+            }
+
+            if (e.key === 'ArrowRight') {
+                e.preventDefault();
+                goToNextItem();
+            }
+
+            if (e.key === 'ArrowLeft') {
+                e.preventDefault();
+                goToPreviousItem();
+            }
+        };
+
+        window.addEventListener('keydown', keydownListener);
+        return () => window.removeEventListener('keydown', keydownListener);
+    }, [currentUrl, currentItem, goToNextItem, goToPreviousItem, setCurrentUrl]);
+
+    useEffect(() => {
+        const fetchMetadata = async () => {
+            if (currentItem?.type === 'video') {
+                const metadata = await getVideoMetadata(currentItem.url);
+                setVideoMetadata(metadata);
+            } else {
+                setVideoMetadata(null);
+            }
+        };
+
+        fetchMetadata();
+    }, [currentItem]);
+
+    if (!currentUrl || !currentItem) return null;
+
+    return createPortal(
+        <div
+            className="absolute top-0 left-0 w-screen h-screen bg-[rgba(0,0,0,0.9)] text-white flex justify-center items-center z-[999999]"
+            onClick={e => {
+                if (e.target !== innerRef.current) {
+                    setCurrentUrl(undefined);
+                }
+            }}
+        >
+            {showCloseButton && (
+                <button onClick={() => setCurrentUrl(undefined)}>
+                    <X className="absolute w-[30px] h-[30px] top-[20px] right-[20px] cursor-pointer text-white z-[999999]" />
+                </button>
+            )}
+            {currentItem.type === 'photo' && (
+                <img
+                    className="cursor-pointer max-w-[90vw] max-h-[90vh]"
+                    src={currentUrl}
+                    onClick={() => enableImageClick && window.open(currentUrl, '_blank')}
+                    ref={innerRef}
+                    alt=""
+                />
+            )}
+
+            {currentItem.type === 'video' && videoMetadata?.embedUrl && (
+                <div className="relative w-[90vw] max-w-[800px] aspect-video">
+                    <iframe
+                        src={videoMetadata.embedUrl}
+                        className="absolute top-0 left-0 w-full h-full rounded-md"
+                        title="Video player"
+                        frameBorder="0"
+                        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+                        allowFullScreen
+                    />
+                </div>
+            )}
+        </div>,
+        document.body
+    );
+};

package/src/components/Lightbox/index.ts

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

package/src/components/Loading/CircleSpinner.tsx

@@ -0,0 +1,52 @@
+import React from 'react';
+
+export enum CircleLoadingState {
+    spin,
+    stop,
+}
+
+export type CircleSpinnerProps = {
+    size?: number; //in pixels
+    thickness?: number;
+    color?: string;
+    loadingState?: CircleLoadingState;
+    marginOffset?: number;
+};
+
+const CircleSpinner: React.FC<CircleSpinnerProps> = ({
+    size = 60,
+    thickness = 4,
+    color = '#40CBA6',
+    marginOffset = 3,
+    loadingState = CircleLoadingState.stop,
+}) => {
+    const spinnerClass = loadingState === CircleLoadingState.spin ? 'lds-ring' : 'lds-ring static';
+
+    // overall circumference height and width
+    const outerStyle = {
+        width: `${size}px`,
+        height: `${size}px`,
+    };
+
+    // inner circle circumference is a ratio of the outer size
+    // this is the actual spinning thing you see
+    const spinnerStyles = {
+        height: `${Math.floor(size / 1.1111111)}px`,
+        width: `${Math.floor(size / 1.11111111)}px`,
+        border: `${thickness}px solid #fff`,
+        margin: `${marginOffset}px`,
+        borderColor: `${color}${
+            loadingState === CircleLoadingState.spin ? ' transparent transparent transparent' : ''
+        }`,
+    };
+    return (
+        <div className={spinnerClass} style={outerStyle}>
+            <div style={spinnerStyles}></div>
+            <div style={spinnerStyles}></div>
+            <div style={spinnerStyles}></div>
+            <div style={spinnerStyles}></div>
+        </div>
+    );
+};
+
+export default CircleSpinner;

package/src/components/Loading/index.ts

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

package/src/components/MeritBadgeDisplayCard/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/MeritBadgeDisplayCard/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: 'MeritBadge' | '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 === 'MeritBadge'
+                            ? '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/MeritBadgeDisplayCard/InfoBox.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+
+type InfoBoxProps = {
+    text: string;
+    handleClose: () => void;
+    backgroundColor?: string;
+};
+
+const InfoBox: React.FC<InfoBoxProps> = ({ text, handleClose, backgroundColor = '#6366F1' }) => {
+    const bgColorWithOpacity = `${backgroundColor}1F`; // 12% opacity
+    return (
+        <div
+            className="info-box p-[10px] rounded-[10px] w-full font-poppins text-[12px] leading[18px]"
+            style={{ backgroundColor: bgColorWithOpacity }}
+        >
+            {text}{' '}
+            <button
+                onClick={e => {
+                    e.stopPropagation();
+                    handleClose();
+                }}
+                className="text-indigo-500 font-[700] select-none"
+            >
+                Close
+            </button>
+        </div>
+    );
+};
+
+export default InfoBox;