@learncard/react 2.10.3 → 2.10.4

package/src/components/JobHistoryCard/JobHistoryCard.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import { JobHistoryCardProps } from '../../types';
+import GenericArrow from '../svgs/GenericArrow';
+
+export const JobHistoryCard: React.FC<JobHistoryCardProps> = ({
+    className,
+    title,
+    company,
+    dateRange,
+    jobType,
+    showArrow = false,
+    onClick,
+}) => {
+    const handleClick = () => {
+        onClick?.();
+    };
+
+    return (
+        <div
+            onClick={handleClick}
+            className={`job-history-card flex h-[88px] max-w-[335px] justify-between shadow-[0_0_8px_0px_rgba(0,0,0,0.2)] relative $ py-[10px] px-[15px] rounded-[20px] ${className}`}
+        >
+            {dateRange && (
+                <div className="flex flex-shrink-0 rounded-[20px]  bg-emerald-600 pl-[15px] font-bold text-grayscale-50 job-card-date-display w-[108px] h-full items-center">
+                    <p className="line-clamp-2">{dateRange}</p>
+                </div>
+            )}
+            <div className="flex flex-grow flex-col job-history-details-display pl-[12px]">
+                <p className="text-grayscale-900 font-bold line-clamp-1">{title}</p>
+                <p className="text-grayscale-600 text-sm line-clamp-1">{company}</p>
+                <p className="text-sm text-indigo-700 uppercase font-bold line-clamp-1">
+                    {jobType}
+                </p>
+            </div>
+            {showArrow && (
+                <div className="flex justify-center items-center">
+                    <GenericArrow />
+                </div>
+            )}
+        </div>
+    );
+};
+
+export default JobHistoryCard;

package/src/components/JobHistoryCard/index.ts

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

package/src/components/JobListCard/JobListCard.stories.tsx

@@ -0,0 +1,54 @@
+import React from 'react';
+import { Story, Meta } from '@storybook/react';
+import imgPlaceholder from '../../assets/images/photoplaceholder.png';
+import JobListCard from './JobListCard';
+import { JobListCardProps } from '../../types';
+
+export default {
+    title: 'Job List Card',
+    component: JobListCard,
+    argTypes: {},
+} as Meta<typeof JobListCard>;
+
+const dummyQualificationDisplay = {
+    skills: {
+        fulfilledCount: 4,
+        totalRequiredCount: 5,
+    },
+    achievements: {
+        fulfilledCount: 35,
+        totalRequiredCount: 40,
+    },
+    courses: {
+        fulfilledCount: 125,
+        totalRequiredCount: 230,
+    },
+};
+
+const customButtonTest = (
+    <button type="button" onClick={() => console.log('custom button clicked')}>
+        BUTTON TEST{' '}
+    </button>
+);
+
+const Template: Story<JobListCardProps> = args => <JobListCard {...args} />;
+
+export const JobListCardTest = Template.bind({});
+JobListCardTest.args = {
+    className: 'job-listing-card',
+    company: 'Company Name',
+    title: 'Job Listing Title',
+    compensation: '$45 per hour',
+    location: 'Cashville, TN',
+    locationRequirement: 'Partial Remote',
+    timeRequirement: 'Full-time',
+    qualificationDisplay: dummyQualificationDisplay,
+    percentQualifiedDisplay: '97%',
+    postDateDisplay: '2 days ago',
+    imgThumb: imgPlaceholder,
+    isBookmarked: false,
+    onBookmark: () => {},
+    onClick: () => {
+        console.log('clicked');
+    },
+};

package/src/components/JobListCard/JobListCard.tsx

@@ -0,0 +1,162 @@
+import React from 'react';
+import { JobListCardProps } from '../../types';
+import { TYPE_TO_MINI_ICON } from '../../constants/';
+import { LCSubtypes } from '../../types';
+
+const TYPE_TO_COLOR: any = {
+    course: 'bg-emerald-50',
+    achievement: 'bg-spice-50',
+    skill: 'bg-indigo-50',
+};
+
+const TYPE_TO_TEXT_COLOR: any = {
+    course: 'text-emerald-700',
+    achievement: 'text-spice-500',
+    skill: 'text-indigo-600',
+};
+
+type JobListingBubbleProps = {
+    count: number | string | undefined;
+    type: LCSubtypes.course | LCSubtypes.achievement | LCSubtypes.skill;
+    className?: string;
+};
+
+export const JobListingBubble: React.FC<JobListingBubbleProps> = ({
+    count = 0,
+    type = LCSubtypes.skill,
+    className,
+}) => {
+    const imgSrc = TYPE_TO_MINI_ICON[type];
+    const bgColor = TYPE_TO_COLOR[type];
+    const textColor = TYPE_TO_TEXT_COLOR[type];
+    if (count === 0) return <></>;
+    return (
+        <div
+            className={`job-card-stat-bubble px-[10px] px-[5px] flex-nowrap rounded-[30px] flex ${bgColor} min-w-[48px] min-w-[90px] h-[30px] justify-center items-center ${className}`}
+        >
+            <img src={imgSrc} className="mr-[3px]" />
+            <span className={`flex items-center text-sm ${textColor} font-bold`}>{count}</span>
+        </div>
+    );
+};
+
+export const JobListCard: React.FC<JobListCardProps> = ({
+    company,
+    className = 'job-listing-card',
+    title,
+    compensation,
+    location,
+    locationRequirement,
+    timeRequirement,
+    qualificationDisplay,
+    percentQualifiedDisplay,
+    postDateDisplay,
+    customButtonComponent,
+    imgThumb,
+    isBookmarked,
+    onBookmark,
+    onClick,
+}) => {
+    const courseReqCount = qualificationDisplay?.courses?.totalRequiredCount;
+    const achievementsReqCount = qualificationDisplay?.achievements?.totalRequiredCount;
+    const skillsReqCount = qualificationDisplay?.skills?.totalRequiredCount;
+
+    const courseCountDisplay =
+        courseReqCount &&
+        `${qualificationDisplay?.courses?.fulfilledCount ?? 0}/${
+            qualificationDisplay?.courses?.totalRequiredCount ?? 0
+        }`;
+    const achievementsCountDisplay =
+        achievementsReqCount &&
+        `${qualificationDisplay?.achievements?.fulfilledCount ?? 0}/${
+            qualificationDisplay?.achievements?.totalRequiredCount ?? 0
+        }`;
+    const skillsCountDisplay =
+        skillsReqCount &&
+        `${qualificationDisplay?.skills?.fulfilledCount ?? 0}/${
+            qualificationDisplay?.skills?.totalRequiredCount ?? 0
+        }`;
+
+    const qualifiedText = percentQualifiedDisplay
+        ? `${percentQualifiedDisplay}% Qualified - Apply`
+        : 'Apply';
+
+    let topText = '';
+    if (!compensation && timeRequirement) topText = timeRequirement;
+    if (!timeRequirement && compensation) topText = compensation;
+    if (timeRequirement && compensation) topText = `${compensation} • ${timeRequirement}`;
+
+    let locationText = '';
+    if (!location && locationRequirement) locationText = locationRequirement;
+    if (!locationRequirement && location) locationText = location;
+    if (locationRequirement && location) locationText = `${locationRequirement} • ${location}`;
+
+    const defaultButton = (
+        <button
+            type="button"
+            onClick={onClick}
+            className="mt-[10px] bg-cyan-700 py-[15px] px-[2px] rounded-[40px] text-grayscale-50 text-[17px] font-bold"
+        >
+            {qualifiedText}
+        </button>
+    );
+
+    const buttonComponent = customButtonComponent ? customButtonComponent : defaultButton;
+
+    return (
+        <div
+            className={`flex flex-col justify-between shadow-[0_0_8px_0px_rgba(0,0,0,0.2)] relative $ py-[10px] px-[15px] max-w-[400px] min-h-[260px] rounded-[20px] ${className}`}
+        >
+            <div className="job-listing-top flex">
+                <div className="flex text-grayscale-500 text-xs uppercase w-full line-clamp-1">
+                    {topText}
+                </div>
+            </div>
+            <p className="text-grayscale-500 text-xs line-clamp-1 flex-shrink-0">
+                {' '}
+                {postDateDisplay}
+            </p>
+
+            <div className="job-listing-center flex mt-[5px]">
+                {imgThumb && (
+                    <img
+                        className="object-cover w-[80px] flex-shrink-0 items-center justify-center rounded-[15px] mr-[10px]"
+                        src={imgThumb}
+                    />
+                )}
+
+                <div className="job-listing-description flex flex-col">
+                    <h4 className="text-lg font-bold line-clamp-2">{title}</h4>
+                    <p className="text-sm line-clamp-1">{company}</p>
+                    <span className="text-sm line-clamp-1">{locationText}</span>
+                </div>
+            </div>
+
+            <div className="job-listing-qualifications mt-[10px]">
+                <div className="course-card-counts-container flex items-center flex-wrap">
+                    <JobListingBubble
+                        type={LCSubtypes.course}
+                        count={courseCountDisplay}
+                        className={'mr-[5px] min-w-[100px]'}
+                    />
+
+                    <JobListingBubble
+                        type={LCSubtypes.achievement}
+                        count={achievementsCountDisplay}
+                        className={'mr-[5px] min-w-[100px]'}
+                    />
+
+                    <JobListingBubble
+                        type={LCSubtypes.skill}
+                        count={skillsCountDisplay}
+                        className={'mr-[0px min-w-[100px]]'}
+                    />
+                </div>
+            </div>
+
+            {buttonComponent}
+        </div>
+    );
+};
+
+export default JobListCard;

package/src/components/JobListCard/index.ts

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

package/src/components/LearnCardCreditCardBackFace/LearnCardCreditCardBackFace.stories.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { Story, Meta } from '@storybook/react';
+
+import LearnCardCreditCardBackFace from './LearnCardCreditCardBackFace';
+
+import { LearnCardCreditCardBackFaceProps } from './types';
+
+export default {
+    title: 'LearnCardCreditCardBackFace',
+    component: LearnCardCreditCardBackFace,
+    argTypes: {},
+} as Meta<typeof LearnCardCreditCardBackFace>;
+
+const Template: Story<LearnCardCreditCardBackFaceProps> = args => (
+    <LearnCardCreditCardBackFace {...args} />
+);
+
+export const LearnCardCreditCardBackFaceTest = Template.bind({});
+LearnCardCreditCardBackFaceTest.args = {
+    className: '',
+    user: {
+        fullName: 'Jane Doe',
+        username: 'jane_doe_2022',
+    },
+    card: {
+        cardNumber: '0000 0000 0000 0000',
+        cardIssueDate: '2022',
+        cardExpirationDate: '00/00',
+        cardSecurityCode: '000',
+    },
+};

package/src/components/LearnCardCreditCardBackFace/LearnCardCreditCardBackFace.tsx

@@ -0,0 +1,104 @@
+import React from 'react';
+
+import ContactlessSymbol from '../../assets/images/contactless-symbol.svg';
+
+import { LearnCardCreditCardBackFaceProps } from './types';
+
+export const LearnCardCreditCardBackFace: React.FC<LearnCardCreditCardBackFaceProps> = ({
+    className,
+    card,
+    user,
+}) => {
+    return (
+        <div
+            className={`flex justify-center items-center max-w-[375px] rounded-[20px] ${className}`}
+        >
+            <div
+                className={`flex flex-col justify-start items-start w-full min-h-[220px] rounded-[20px] shadow-3xl bg-grayscale-900 relative overflow-hidden credit-card-front-face`}
+            >
+                <div className="flex justify-between items-center w-full px-3 pt-4 text-white">
+                    <p className="text-[6px]">
+                        Please visit LearnCard app or learncard.com for assistance
+                    </p>
+                    <p className="text-[6px]">854-000-000-24</p>
+                </div>
+
+                <div className="w-full h-8 bg-white mt-1" />
+
+                <div className="flex justify-end items-center w-full px-3 mt-1 text-white">
+                    <p className="text-[6px]">IDEMIA 0 00000 00000 0/00</p>
+                </div>
+
+                <div className="flex flex-row justify-between items-center px-3 pt-2 w-full text-white">
+                    <div>
+                        {user?.username && (
+                            <p
+                                className="text-[10px] font-medium"
+                                data-testid="credit-card-backface-username"
+                            >
+                                {user?.username}
+                            </p>
+                        )}
+
+                        <p
+                            className="text-sm tracking-wider"
+                            data-testid="credit-card-backface-fullname"
+                        >
+                            {user?.fullName ?? ''}
+                        </p>
+                        {card?.cardIssueDate && (
+                            <p
+                                className="text-[10px] tracking-wider"
+                                data-testid="credit-card-backface-issueDate"
+                            >
+                                MEMBER SINCE {card?.cardIssueDate}
+                            </p>
+                        )}
+                    </div>
+                    <div>
+                        <img src={ContactlessSymbol} alt="contactless icon" />
+                    </div>
+                </div>
+
+                <div className="flex flex-row justify-between items-center px-3 pt-2 w-full text-white">
+                    <div className="flex flex-col">
+                        <p
+                            className="text-sm tracking-wider"
+                            data-testid="credit-card-backface-cardNum"
+                        >
+                            {card?.cardNumber ?? ''}
+                        </p>
+                        <div className="flex flex-row justify-between items-center">
+                            <p
+                                className="text-[10px] tracking-wider"
+                                data-testid="credit-card-backface-expDate"
+                            >
+                                EXP {card?.cardExpirationDate ?? ''}
+                            </p>
+                            {card?.cardSecurityCode && (
+                                <p
+                                    className="text-[10px] tracking-wider"
+                                    data-testid="credit-card-backface-secCode"
+                                >
+                                    SEC {card?.cardSecurityCode ?? ''}
+                                </p>
+                            )}
+                        </div>
+                    </div>
+                    <div>
+                        <div className="h-[33px] w-[55px] rounded-[60px] bg-gradient-to-r from-[#F4F5F5] to-[#E3E5E8]" />
+                    </div>
+                </div>
+
+                <div className="flex justify-start items-center w-full px-3 py-2 text-white">
+                    <p className="text-[6px]">
+                        Issued by the bank of Tennessee pursuant to license by Mastercard
+                        International
+                    </p>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default LearnCardCreditCardBackFace;

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

@@ -0,0 +1,64 @@
+import React from 'react';
+import '@testing-library/jest-dom';
+import { render, screen } from '@testing-library/react';
+
+import LearnCardCreditCardBackFace from '../LearnCardCreditCardBackFace';
+import { LearnCardCreditCardUserProps, LearnCardCreditCardProps } from '../types';
+
+describe('LearnCardCreditCardBackFace', () => {
+    test('Checks LearnCardCreditCardBackFace renders with props', () => {
+        const user: LearnCardCreditCardUserProps = {
+            fullName: 'Jane Doe',
+            username: 'jane_doe_2022',
+        };
+
+        const card: LearnCardCreditCardProps = {
+            cardNumber: '0000 0000 0000 0000',
+            cardIssueDate: '2022',
+            cardExpirationDate: '00/00',
+            cardSecurityCode: '000',
+        };
+
+        render(<LearnCardCreditCardBackFace user={user} card={card} />);
+
+        const fullName = screen.getByTestId('credit-card-backface-fullname');
+        expect(fullName).toHaveTextContent('Jane Doe');
+
+        const username = screen.getByTestId('credit-card-backface-username');
+        expect(username).toHaveTextContent('jane_doe_2022');
+
+        const cardNumber = screen.getByTestId('credit-card-backface-cardNum');
+        expect(cardNumber).toHaveTextContent('0000 0000 0000 0000');
+
+        const cardIssueDate = screen.getByTestId('credit-card-backface-issueDate');
+        expect(cardIssueDate).toHaveTextContent('2022');
+
+        const cardExpDate = screen.getByTestId('credit-card-backface-expDate');
+        expect(cardExpDate).toHaveTextContent('EXP 00/00');
+
+        const cardSecurityCode = screen.getByTestId('credit-card-backface-secCode');
+        expect(cardSecurityCode).toHaveTextContent('SEC 000');
+    });
+
+    test('Checks LearnCardCreditCardBackFace renders without props', () => {
+        render(<LearnCardCreditCardBackFace />);
+
+        const fullName = screen.getByTestId('credit-card-backface-fullname');
+        expect(fullName).toBeEmptyDOMElement();
+
+        const username = screen.queryByTestId('credit-card-backface-username');
+        expect(username).not.toBeInTheDocument();
+
+        const cardNumber = screen.getByTestId('credit-card-backface-cardNum');
+        expect(cardNumber).toBeEmptyDOMElement();
+
+        const cardIssueDate = screen.queryByTestId('credit-card-backface-issueDate');
+        expect(cardIssueDate).not.toBeInTheDocument();
+
+        const cardExpDate = screen.getByTestId('credit-card-backface-expDate');
+        expect(cardExpDate).toHaveTextContent('EXP');
+
+        const cardSecurityCode = screen.queryByTestId('credit-card-backface-secCode');
+        expect(cardSecurityCode).not.toBeInTheDocument();
+    });
+});

package/src/components/LearnCardCreditCardBackFace/index.ts

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

package/src/components/LearnCardCreditCardBackFace/types.ts

@@ -0,0 +1,45 @@
+export type LearnCardCreditCardBackFaceProps = {
+    /**
+     * custom className
+     * @type {string}
+     */
+    className?: string;
+    user: LearnCardCreditCardUserProps;
+    card: LearnCardCreditCardProps;
+};
+
+export type LearnCardCreditCardUserProps = {
+    /**
+     * unique user handle / username
+     * @type {string}
+     */
+    username?: string;
+    /**
+     * user full name
+     * @type {string}
+     */
+    fullName: string;
+};
+
+export type LearnCardCreditCardProps = {
+    /**
+     * card number
+     * @type {number}
+     */
+    cardNumber: string;
+    /**
+     * card issue date
+     * @type {string}
+     */
+    cardIssueDate?: string;
+    /**
+     * card expiration date
+     * @type {string}
+     */
+    cardExpirationDate: string;
+    /**
+     * card security code
+     * @type {string}
+     */
+    cardSecurityCode?: string;
+};

package/src/components/LearnCardCreditCardFrontFace/LearnCardCreditCardFrontFace.stories.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { Story, Meta } from '@storybook/react';
+
+import LearnCardCreditCardFrontFace from './LearnCardCreditCardFrontFace';
+
+import { LearnCardCreditCardFrontFaceProps } from './types';
+
+export default {
+    title: 'LearnCardCreditCardFrontFace',
+    component: LearnCardCreditCardFrontFace,
+    argTypes: {},
+} as Meta<typeof LearnCardCreditCardFrontFace>;
+
+const Template: Story<LearnCardCreditCardFrontFaceProps> = args => (
+    <LearnCardCreditCardFrontFace {...args} />
+);
+
+export const LearnCardCreditCardFrontFaceTest = Template.bind({});
+LearnCardCreditCardFrontFaceTest.args = {
+    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: true,
+    actionButtonText: 'Open Card',
+    onClick: () => {},
+    className: '',
+    children: <></>,
+};

package/src/components/LearnCardCreditCardFrontFace/LearnCardCreditCardFrontFace.tsx

@@ -0,0 +1,102 @@
+import React from 'react';
+import { QRCodeSVG } from 'qrcode.react';
+
+import { LearnCardCreditCardFrontFaceProps } from './types';
+
+import CardChip from '../../assets/images/card-chip.svg';
+import MasterCardLogo from '../../assets/images/master-card-logo.svg';
+
+export const LearnCardCreditCardFrontFace: React.FC<LearnCardCreditCardFrontFaceProps> = ({
+    userImage,
+    userImageComponent = null,
+    qrCodeValue,
+    className,
+    showActionButton = false,
+    actionButtonText = 'Open Card',
+    onClick = () => {},
+    children,
+}) => {
+    let userImageEl: React.ReactNode | null = null;
+
+    if (userImage) {
+        userImageEl = (
+            <div className="inline-block relative overflow-hidden rounded-full shadow-3xl h-0 bg-white w-1/2 pb-[50%] mt-2 ml-4">
+                <img
+                    className="w-full h-full absolute rounded-full object-cover border-solid border-2 border-white"
+                    src={userImage}
+                    alt="user image"
+                    data-testid="credit-card-frontface-userImg"
+                />
+            </div>
+        );
+    } else if (!userImage && userImageComponent) {
+        userImageEl = userImageComponent;
+    }
+
+    return (
+        <div
+            className={`flex justify-center items-center max-w-[375px] rounded-[20px] ${className}`}
+        >
+            <div
+                className={`flex flex-row justify-center items-start pt-9 w-full min-h-[220px] rounded-[20px] shadow-3xl relative overflow-hidden credit-card-front-face`}
+            >
+                <div className="absolute top-[-40px] left-0 w-[55%] h-[140%] rounded-tr-[150px] rounded-br-[150px] bg-grayscale-900 credit-card-bubble" />
+                {showActionButton && (
+                    <button
+                        className="absolute top-2 right-4 bg-grayscale-500 border-[2px] rounded-3xl border-solid border-color-grayscale-900 min-w-[110px] p-[2px] font-bold text-xs tracking-wide leading-snug text-center text-white"
+                        onClick={onClick}
+                        data-testid="credit-card-frontface-button"
+                    >
+                        {actionButtonText}
+                    </button>
+                )}
+                <div className="flex flex-row justify-between items-start w-full h-full relative">
+                    <div className="flex flex-1 flex-col">
+                        <div className="pl-8">
+                            <p className="w-full text-xs text-white font-bold tracking-[7px] mb-2 credit-card-front-face-title">
+                                LEARNCARD
+                            </p>
+                            <img
+                                src={CardChip ?? ''}
+                                alt="card chip"
+                                className="h-[30px] w-[42px]"
+                            />
+                        </div>
+
+                        {userImageEl}
+                    </div>
+
+                    {qrCodeValue && (
+                        <div className="flex flex-1 justify-center items-center relative pl-10 credit-card-qr-code-container">
+                            <div className="h-auto relative qr-code-container">
+                                {/* <div className="qr-code-upper-left-yellow" />
+                            <div className="qr-code-upper-right-pink-square" />
+                            <div className="qr-code-bottom-left-purple-square" />
+                            <div className="qr-code-green-blob" />
+                            <div className="qr-code-green-blob-2" />
+                            <div className="qr-code-blue-blob" />
+                            <div className="qr-code-orange-blob" /> */}
+                                <QRCodeSVG
+                                    className="h-full w-full"
+                                    value={qrCodeValue}
+                                    data-testid="credit-card-qr-code"
+                                    bgColor="transparent"
+                                    // fgColor="#999999"
+                                />
+                            </div>
+                        </div>
+                    )}
+
+                    <img
+                        src={MasterCardLogo ?? ''}
+                        alt="mastercard icon"
+                        className="absolute bottom-[-8px] right-4 learn-card-mastercard-logo"
+                    />
+                </div>
+            </div>
+            {children}
+        </div>
+    );
+};
+
+export default LearnCardCreditCardFrontFace;