@learncard/react 2.10.2 → 2.10.4

package/src/components/CircleCheckButton/CircleCheckButton.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { CircleCheckButtonProps } from '../../types';
+import { CheckmarkSvg } from '../RoundedPill';
+
+export const CircleCheckButton: React.FC<CircleCheckButtonProps> = ({
+    checked,
+    onClick,
+    bgColor,
+    className = '',
+}) => {
+    const backgroundColor = checked ? 'bg-emerald-700' : bgColor ? bgColor : 'bg-gray-50';
+
+    const handleClick = () => {
+        onClick?.();
+    };
+
+    return (
+        <button
+            type="button"
+            onClick={handleClick}
+            className={`w-[32px] h-[32px] flex items-center justify-center border-4 border-gray-50 rounded-full text-gray-700  ${backgroundColor} ${className}`}
+        >
+            <CheckmarkSvg color="#ffffff" />
+        </button>
+    );
+};
+
+export default CircleCheckButton;

package/src/components/CircleCheckButton/index.ts

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

package/src/components/CircleIcon/CircleIcon.tsx

@@ -0,0 +1,90 @@
+import React from 'react';
+import numeral from 'numeral';
+import CircleSpinner, { CircleLoadingState } from '../Loading/CircleSpinner';
+import { Icons } from '../../types';
+import { ICONS_TO_SOURCE } from '../../constants/icons';
+
+export type CircleIconProps = {
+    iconSrc?: string;
+    count?: string | number;
+    onClick?: () => void;
+    bgColor?: string;
+    innerPadding?: string;
+    size?: string;
+    borderColor?: string;
+    loading?: boolean;
+    iconCircleClass?: string;
+};
+
+export type CountCircleProps = {
+    size?: string;
+    count?: string | number;
+    innerPadding?: string;
+    onClick?: () => {};
+    bgColor?: string;
+    className?: string;
+    loading?: boolean;
+};
+
+export const CountCircle: React.FC<CountCircleProps> = ({
+    size = 'auto',
+    count = '28',
+    innerPadding = '3px 5px',
+    onClick = () => {},
+    bgColor = 'bg-grayscale-50',
+    loading,
+}) => {
+    const _count = Number(count) >= 1000 ? numeral(Number(count)).format('0.0a') : count;
+    const circleLoadingState = loading ? CircleLoadingState.spin : CircleLoadingState.stop;
+    const style = {
+        width: size,
+        height: size,
+        padding: !loading ? innerPadding : '0px',
+        backgroundColor: bgColor,
+    };
+
+    const spinnerStyle = {
+        transform: 'translateX(-2px) translateY(1px)',
+    };
+
+    return (
+        <section onClick={onClick} className={`text-grayscale-50 rounded-full`} style={style}>
+            {!loading && count && <p className="">{_count}</p>}
+            {loading && (
+                <div style={spinnerStyle}>
+                    <CircleSpinner loadingState={circleLoadingState} thickness={3} size={20} />
+                </div>
+            )}
+        </section>
+    );
+};
+
+export const CircleIcon: React.FC<CircleIconProps> = ({
+    iconSrc = ICONS_TO_SOURCE[Icons.coinsIcon],
+    size = '52px',
+    count = '28',
+    onClick = () => {},
+    loading,
+    iconCircleClass = '',
+}) => {
+    const style = {
+        width: size,
+        height: size,
+        backgroundColor: `rgba(24, 34, 78, 0.85)`,
+    };
+
+    return (
+        <div style={style} className={`rounded-full ${iconCircleClass}`}>
+            <section
+                onClick={onClick}
+                className={`flex flex-row-reverse justify-between items-center rounded-full relative overflow-hidden w-16 `}
+                style={{ ...style, backgroundColor: 'transparent' }}
+            >
+                <CountCircle count={count} loading={loading} />
+                <img src={iconSrc ?? ''} alt="Icon image" />
+            </section>
+        </div>
+    );
+};
+
+export default CircleIcon;

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

@@ -0,0 +1,38 @@
+import React from 'react';
+import '@testing-library/jest-dom';
+import userEvent from '@testing-library/user-event';
+import { render, screen } from '@testing-library/react';
+
+import CircleIcon from '../CircleIcon';
+
+describe('Running Tests for CircleIcon', () => {
+    it('Renders important props', () => {
+        render(<CircleIcon hideCount={false} iconSrc="iconSrcProp" count="count text" />);
+
+        const img = screen.getByAltText('Icon image');
+        expect(img).toHaveAttribute('src', 'iconSrcProp');
+
+        const countText = screen.getByText('count text');
+        expect(countText).toBeInTheDocument();
+    });
+
+    // it('Uses the given styles', () => {
+    //     const { container } = render(<CircleIcon size="22px" innerPadding="2px" />);
+
+    //     const containerStyle = container.firstChild.style;
+    //     expect(containerStyle.height).toBe('22px');
+    //     expect(containerStyle.width).toBe('22px');
+    //     expect(containerStyle.padding).toBe('2px');
+    // });
+
+    // it('calls onClick', async () => {
+    //     const handleOnClick = jest.fn();
+    //     const user = userEvent.setup();
+
+    //     const { container } = render(<CircleIcon onClick={handleOnClick} />);
+
+    //     expect(handleOnClick).not.toBeCalled();
+    //     await user.click(container.firstChild);
+    //     expect(handleOnClick).toBeCalled();
+    // });
+});

package/src/components/CircleIcon/index.ts

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

package/src/components/CourseCard/CourseCard.stories.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { Story, Meta } from '@storybook/react';
+
+import CourseCard from './CourseCard';
+import { CourseCardProps } from '../../types';
+
+export default {
+    title: 'Course Card',
+    component: CourseCard,
+    argTypes: {},
+} as Meta<typeof CourseCard>;
+
+const Template: Story<CourseCardProps> = args => <CourseCard {...args} />;
+
+export const CourseCardTest = Template.bind({});
+CourseCardTest.args = {
+    status: 'Enrolled',
+    title: 'MECH 1340 Digital Fundamentals and Programmable Logic Controllers',
+    semester: 'Fall 2022',
+    jobCount: 1,
+    achievementCount: 4,
+    skillCount: 9,
+};

package/src/components/CourseCard/CourseCard.tsx

@@ -0,0 +1,94 @@
+import React from 'react';
+import { CourseCardProps } from '../../types';
+import CourseCardPlaceholder from '../../assets/images/lhplaceholder.png';
+
+import MiniTrophyIcon from '../../assets/images/minitrophy.svg';
+import MiniJobIcon from '../../assets/images/minijob.svg';
+import MiniPuzzleIcon from '../../assets/images/minipuzzle.svg';
+
+const TYPE_TO_COURSE_MINI_ICON: any = {
+    ['job']: MiniJobIcon,
+    ['achievement']: MiniTrophyIcon,
+    ['skill']: MiniPuzzleIcon,
+};
+
+const TYPE_TO_COLOR: any = {
+    ['job']: 'bg-emerald-700',
+    ['achievement']: 'bg-spice-500',
+    ['skill']: 'bg-indigo-500',
+};
+
+type CourseCardStatBubbleProps = {
+    count: number | string;
+    type: string;
+    className?: string;
+};
+
+const CourseCardStatBubble: React.FC<CourseCardStatBubbleProps> = ({
+    count = 0,
+    type = 'job',
+    className,
+}) => {
+    const imgSrc = TYPE_TO_COURSE_MINI_ICON[type];
+    const bgColor = TYPE_TO_COLOR[type];
+
+    return (
+        <div
+            className={`course-card-stat-bubble px-[10px] rounded-[30px] flex ${bgColor} min-w-[48px] max-w-[80px] h-[30px] items-center ${className}`}
+        >
+            <img src={imgSrc} className="pr-[5px]" />
+            <span className="flex items-center text-sm text-white">{count}</span>
+        </div>
+    );
+};
+
+export const CourseCard: React.FC<CourseCardProps> = ({
+    status = 'Enrolled',
+    title = 'MECH 1340 Digital Fundamentals and Programmable Logic Controllers',
+    semester = 'Fall 2022',
+    jobCount = 1,
+    achievementCount = 4,
+    thumbSrc,
+    hideHeader = false,
+    skillCount = 9,
+    className,
+    onClick = () => {},
+}) => {
+    return (
+        <div
+            onClick={onClick}
+            className={`flex shadow-[0_0_8px_0px_rgba(0,0,0,0.2)] relative $ py-[10px] px-[15px] max-w-[400px] h-[130px] rounded-[20px] ${className}`}
+        >
+            <img
+                src={CourseCardPlaceholder}
+                className="course-card-img w-[100px] h-[111px] mr-[10px]"
+            />
+
+            <div className="course-card-detail-info flex flex-col justify-between">
+                {!hideHeader && (
+                    <div className="text-sm">
+                        <span className="text-emerald-700 font-semibold">{status}</span>
+                        <span className="spacer-dot mx-[3px]">•</span>
+                        <span className="text-grayscale-500">{semester}</span>
+                    </div>
+                )}
+                <p className="course-card-title text-sm font-semibold line-clamp-2">{title}</p>
+                <div className="course-card-counts-container flex items-center mt-[5px]">
+                    <CourseCardStatBubble type={'job'} count={jobCount} className={'mr-[5px]'} />
+                    <CourseCardStatBubble
+                        type={'achievement'}
+                        count={achievementCount}
+                        className={'mr-[5px]'}
+                    />
+                    <CourseCardStatBubble
+                        type={'skill'}
+                        count={skillCount}
+                        className={'mr-[0px]'}
+                    />
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default CourseCard;

package/src/components/CourseCard/index.ts

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

package/src/components/CourseVerticalCard/CourseVerticalCard.stories.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { Story, Meta } from '@storybook/react';
+
+import CourseVerticalCard from './CourseVerticalCard';
+import { CourseCardVerticalProps } from '../../types';
+
+export default {
+    title: 'Course Vertical Card',
+    component: CourseVerticalCard,
+    argTypes: {},
+} as Meta<typeof CourseVerticalCard>;
+
+const Template: Story<CourseCardVerticalProps> = args => <CourseVerticalCard {...args} />;
+
+export const CourseVerticalCardTest = Template.bind({});
+CourseVerticalCardTest.args = {
+    status: 'Enrolled',
+    title: 'MECH 1340 Digital Fundamentals and Programmable Logic Controllers',
+    semester: 'Fall 2022',
+    jobCount: 1,
+    achievementCount: 4,
+    showChecked: true,
+    showStatus: true,
+    onClick: () => {
+        console.log('//check button click');
+    },
+    onCheckClick: () => {
+        console.log('///onCircle Click');
+    },
+    skillCount: 9,
+};

package/src/components/CourseVerticalCard/CourseVerticalCard.tsx

@@ -0,0 +1,118 @@
+import React from 'react';
+import { CourseCardVerticalProps } from '../../types';
+import { CircleCheckButton } from '../CircleCheckButton';
+import CourseCardPlaceholder from '../../assets/images/lhplaceholder.png';
+import { RoundedPill } from '../RoundedPill';
+import MiniTrophyIcon from '../../assets/images/minitrophy.svg';
+import MiniJobIcon from '../../assets/images/minijob.svg';
+import MiniPuzzleIcon from '../../assets/images/minipuzzle.svg';
+import { LCSubtypes } from '../../types';
+
+const TYPE_TO_COURSE_MINI_ICON: any = {
+    ['job']: MiniJobIcon,
+    ['achievement']: MiniTrophyIcon,
+    ['skill']: MiniPuzzleIcon,
+};
+
+const TYPE_TO_COLOR: any = {
+    ['job']: 'bg-emerald-700',
+    ['achievement']: 'bg-spice-500',
+    ['skill']: 'bg-indigo-500',
+};
+
+type CourseCardStatBubbleProps = {
+    count: number | string;
+    type: string;
+    className?: string;
+};
+
+const CourseCardStatBubble: React.FC<CourseCardStatBubbleProps> = ({
+    count = 0,
+    type = LCSubtypes.job,
+    className,
+}) => {
+    const imgSrc = TYPE_TO_COURSE_MINI_ICON[type];
+    const bgColor = TYPE_TO_COLOR[type];
+
+    return (
+        <div
+            className={`course-card-stat-bubble px-[10px] rounded-[30px] flex ${bgColor} min-w-[48px] max-w-[80px] h-[30px] items-center ${className}`}
+        >
+            <img src={imgSrc} className="pr-[5px]" />
+            <span className="flex items-center text-sm text-white">{count}</span>
+        </div>
+    );
+};
+
+export const CourseVerticalCard: React.FC<CourseCardVerticalProps> = ({
+    className,
+    title,
+    thumbImgSrc,
+    showStatus,
+    claimStatus = false,
+    achievementCount = 0,
+    skillCount = 0,
+    checked,
+    showChecked,
+    showSubCount,
+    onCheckClick,
+    onClick,
+}) => {
+    const claimBtnStatusType = claimStatus ? LCSubtypes.course : LCSubtypes.locked;
+
+    return (
+        <div
+            onClick={onClick}
+            className={`flex flex-col shadow-[0_0_8px_0px_rgba(0,0,0,0.2)] relative $ py-[8px] px-[8px] w-[190px] h-[285px] rounded-[20px] ${className}`}
+        >
+            <section
+                className={`relative flex h-[120px] flex-col justify-center items-center w-full rounded-[20px]`}
+            >
+                <img
+                    src={CourseCardPlaceholder}
+                    className="course-card-img h-full w-full object-cover rounded-[20px]"
+                />
+
+                {showChecked && (
+                    <CircleCheckButton
+                        checked={checked}
+                        onClick={onCheckClick}
+                        className="absolute top-[5px] left-[5px]"
+                    />
+                )}
+            </section>
+
+            <div className="course-card-detail-info flex flex-col justify-between">
+                <p className="course-card-title text-sm text-center font-semibold line-clamp-2 mt-[4px]">
+                    {title}
+                </p>
+                {showSubCount && (
+                    <div className="course-card-counts-container flex items-center justify-center my-[5px]">
+                        <CourseCardStatBubble
+                            type={'achievement'}
+                            count={achievementCount}
+                            className={'mr-[5px]'}
+                        />
+                        <CourseCardStatBubble
+                            type={'skill'}
+                            count={skillCount}
+                            className={'mr-[0px]'}
+                        />
+                    </div>
+                )}
+            </div>
+            {showStatus && (
+                <div className="course-card-footer absolute bottom-[6px] left-[5px]">
+                    <RoundedPill
+                        onClick={onClick}
+                        showCheckmark
+                        type={claimBtnStatusType}
+                        statusText={'Passed'}
+                    />
+                </div>
+            )}
+        </div>
+    );
+};
+
+export default CourseVerticalCard;

package/src/components/CourseVerticalCard/index.ts

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

package/src/components/FlippyCard/FlippyCard.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+
+export type FlippyCardProps = {
+    children: React.ReactChild[];
+    flipState?: 'front' | 'back' | string;
+};
+
+export const FlippyCard: React.FC<FlippyCardProps> = ({ children, flipState = 'front' }) => {
+    if (children?.length > 3) {
+        console.warn('More than two children passed into Flippy Card! 😳😳😳 Picking first two...');
+    }
+
+    if (!children) return <></>;
+
+    const frontCard = children?.[0] as React.ReactNode;
+    const backCard = (children?.[1] as React.ReactNode) || (children?.[0] as React.ReactNode);
+
+    const flipCardCSSClass = flipState === 'front' ? 'flippy-card' : 'flippy-card is-flipped';
+
+    return (
+        <div data-testid="flippy-card-wrapper" className="flippy-wrapper-container">
+            <div data-testid="flippy-card" className={flipCardCSSClass}>
+                <section data-testid="flippy-card-front" className="card-face card-face--front">
+                    {frontCard}
+                </section>
+                <section data-testid="flippy-card-back" className="card-face card-face--back">
+                    {backCard}
+                </section>
+            </div>
+        </div>
+    );
+};
+
+export default FlippyCard;

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

@@ -0,0 +1,41 @@
+import React from 'react';
+
+import '@testing-library/jest-dom';
+import { render, screen } from '@testing-library/react';
+
+import FlippyCard from '../FlippyCard';
+
+describe('FlippyCard', () => {
+    it('should not render without children', () => {
+        render(<FlippyCard></FlippyCard>);
+        expect(screen.queryByTestId('flippy-card-wrapper')).not.toBe();
+    });
+
+    it('should render the first and second child as the front and back face', async () => {
+        render(
+            <FlippyCard>
+                <div>Front Side</div>
+                <div>Back Side</div>
+            </FlippyCard>
+        );
+
+        expect(screen.getByTestId('flippy-card-front')).toContainHTML('<div>Front Side</div>');
+        expect(screen.getByTestId('flippy-card-back')).toContainHTML('<div>Back Side</div>');
+    });
+
+    it('should not render extra children components', async () => {
+        render(
+            <FlippyCard>
+                <div>Front Side</div>
+                <div>Back Side</div>
+                <div>Extra Child</div>
+            </FlippyCard>
+        );
+
+        expect(screen.getByTestId('flippy-card-front')).not.toContainHTML('<div>Extra Child</div>');
+        expect(screen.getByTestId('flippy-card-back')).not.toContainHTML('<div>Extra Child</div>');
+        expect(screen.getByTestId('flippy-card-wrapper')).not.toContainHTML(
+            '<div>Extra Child</div>'
+        );
+    });
+});

package/src/components/FlippyCard/index.ts

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

package/src/components/GenericCard/GenericCard.stories.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { Story, Meta } from '@storybook/react';
+import GenericCard from './GenericCard';
+import { GenericCardProps, WalletCategoryTypes } from '../../types';
+
+export default {
+    title: 'Generic Card',
+    component: GenericCard,
+    argTypes: {},
+} as Meta<typeof GenericCard>;
+
+const Template: Story<GenericCardProps> = args => <GenericCard {...args} />;
+
+export const GenericCardTest = Template.bind({});
+GenericCardTest.args = {
+    title: 'Title Title Title',
+    type: WalletCategoryTypes.skills,
+    thumbImgSrc: '',
+    onClick: () => {
+        console.log('//goodbye world');
+    },
+};

package/src/components/GenericCard/GenericCard.tsx

@@ -0,0 +1,72 @@
+import React from 'react';
+import { GenericCardProps, WalletCategoryTypes } from '../../types';
+import { TYPE_TO_IMG_SRC, TYPE_TO_WALLET_DARK_COLOR } from '../../constants';
+import { CircleCheckButton } from '../CircleCheckButton';
+import BadgeThumbnailImg from '../BadgeThumbnailImg/BadgeThumbnailImg';
+
+export const GenericCard: React.FC<GenericCardProps> = ({
+    title = 'Title Lorem Ipsum',
+    thumbImgSrc,
+    customThumbClass = '',
+    customHeaderClass = '',
+    type = WalletCategoryTypes.achievements,
+    className,
+    onClick = () => {},
+    showChecked,
+    checkStatus,
+    flipped,
+}) => {
+    const thumbClass = TYPE_TO_WALLET_DARK_COLOR[type]
+        ? `bg-${TYPE_TO_WALLET_DARK_COLOR[type]}`
+        : 'bg-grayscale-50';
+    const defaultThumbClass = `flex h-[110px] m-auto ${thumbClass} w-[140px] overflow-hidden flex-col justify-center items-center w-full rounded-[20px] ${customThumbClass}`;
+    const imgSrc = thumbImgSrc?.trim() !== '' ? thumbImgSrc : TYPE_TO_IMG_SRC[type];
+    const headerBgColor = TYPE_TO_WALLET_DARK_COLOR[type]
+        ? `bg-${TYPE_TO_WALLET_DARK_COLOR[type]}`
+        : 'bg-grayscale-900';
+    const checkBtnClass = checkStatus ? 'generic-vc-card checked' : 'generic-vc-card unchecked';
+    const defaultHeaderClass = `flex generic-card-title w-full flex justify-center items-center  h-[76px] ${headerBgColor} ${customHeaderClass}`;
+    const flippedClass = flipped ? 'flex-col-reverse' : 'flex-col';
+
+    return (
+        <div
+            onClick={onClick}
+            className={`flex generic-display-card-simple bg-white ${flippedClass} shadow-[0_0_8px_0px_rgba(0,0,0,0.2)] relative $ py-[0px] px-[0px] w-[160px] h-[215px] rounded-[20px] overflow-hidden ${className}`}
+        >
+            <section className={defaultHeaderClass}>
+                <p className="relative z-[100] text-[14px] px-[10px] py-[0px] font-bold mt-[10px] text-center text-white line-clamp-2">
+                    {title}
+                </p>
+            </section>
+
+            <section className={defaultThumbClass}>
+                {thumbImgSrc && thumbImgSrc?.trim() !== '' && (
+                    <BadgeThumbnailImg
+                        className="generic-display-card-img h-full w-full  w-[140px] h-[119px] rounded-[20px] object-cover overflow-hidden"
+                        src={thumbImgSrc ?? ''}
+                        alt="Credential Achievement Image"
+                    />
+                )}
+                {(!thumbImgSrc || thumbImgSrc?.trim() === '') && (
+                    <img
+                        className="max-w-[130px] w-full h-full p-[10px] object-contain"
+                        src={imgSrc}
+                    />
+                )}
+            </section>
+
+            <section className="generic-card-footer"></section>
+            {showChecked && (
+                <div className="check-btn-overlay absolute top-[5px] left-[5px]">
+                    <CircleCheckButton
+                        checked={checkStatus}
+                        onClick={onClick}
+                        className={checkBtnClass}
+                    />
+                </div>
+            )}
+        </div>
+    );
+};
+
+export default GenericCard;

package/src/components/GenericCard/index.ts

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

package/src/components/JobHistoryCard/JobHistoryCard.stories.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { Story, Meta } from '@storybook/react';
+import JobHistoryCard from './JobHistoryCard';
+import { JobHistoryCardProps } from '../../types';
+
+export default {
+    title: 'Job History Card',
+    component: JobHistoryCard,
+    argTypes: {},
+} as Meta<typeof JobHistoryCard>;
+
+const Template: Story<JobHistoryCardProps> = args => <JobHistoryCard {...args} />;
+
+export const JobHistoryCardTest = Template.bind({});
+JobHistoryCardTest.args = {
+    className: 'job-history-card',
+    title: 'Title of Job',
+    company: 'Taco Bell',
+    jobType: 'Full-Time',
+    showArrow: false,
+    dateRange: 'JUL 2021 - JAN 2022',
+    description: 'Job description history lorum ipsum potato tomato wee',
+    onClick: () => {
+        console.log('clicked');
+    },
+};