@learncard/react 2.10.2 → 2.10.4

package/src/components/RoundedPill/index.ts

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

package/src/components/RoundedSquare/RoundedSquare.stories.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { Story, Meta } from '@storybook/react';
+
+import RoundedSquare from './RoundedSquare';
+import { RoundedSquareProps, Icons, WalletCategoryTypes } from '../../types';
+import { ICONS_TO_SOURCE } from '../../constants/icons';
+
+export default {
+    title: 'RoundedSquare',
+    component: RoundedSquare,
+    argTypes: {},
+} as Meta<typeof RoundedSquare>;
+
+const Template: Story<RoundedSquareProps> = args => <RoundedSquare {...args} />;
+
+export const RoundedSquareTest = Template.bind({});
+RoundedSquareTest.args = {
+    title: 'Badges',
+    description: 'Lorem ipsum sit dalor amet',
+    iconSrc: ICONS_TO_SOURCE[Icons.accommodationsIcon] as string,
+    count: '1100',
+    type: WalletCategoryTypes.socialBadge,
+    onClick: () => {
+        console.log('//goodbye world');
+    },
+    bgColor: 'bg-cyan-300',
+    iconCircleClass: 'border-2 border-cyan-200 border-solid rounded-full',
+};

package/src/components/RoundedSquare/RoundedSquare.tsx

@@ -0,0 +1,69 @@
+import React from 'react';
+
+import CircleIcon from '../CircleIcon/CircleIcon';
+import { Icons, WalletCategoryTypes } from '../../types';
+import { ICONS_TO_SOURCE } from '../../constants/icons';
+import { TYPE_TO_IMG_SRC, TYPE_TO_WALLET_COLOR } from '../../constants';
+
+export type RoundedSquareProps = {
+    title?: string;
+    description?: string;
+    type?: WalletCategoryTypes;
+    iconSrc?: string;
+    imgSrc?: string;
+    count?: string | number;
+    onClick?: () => void;
+    bgColor?: string;
+    iconCircleClass?: string;
+    loading?: boolean;
+    containerClass?: string;
+};
+
+export const RoundedSquare: React.FC<RoundedSquareProps> = ({
+    title = 'Currencies',
+    description = 'Lorem ipsum sit dalor amet',
+    iconSrc = ICONS_TO_SOURCE[Icons.trophyIcon],
+    imgSrc,
+    type = WalletCategoryTypes.achievements,
+    count = '28',
+    onClick = () => {},
+    bgColor,
+    iconCircleClass = '',
+    loading,
+    containerClass = '',
+}) => {
+    const imgSource = imgSrc || TYPE_TO_IMG_SRC[type];
+    const backgroundColor = bgColor ?? `bg-${TYPE_TO_WALLET_COLOR[type]}`;
+    const circleClass = `flex w-full justify-end icon-display absolute right-[15px] bottom-[10px] max-h-[40px] max-w-[40px] rounded-full`;
+    const iconAltDescription = `${title} Icon`;
+    return (
+        <button
+            onClick={onClick}
+            className={`flex relative ${backgroundColor} py-[15px] px-[15px] w-[170px] h-[190px] rounded-[40px] rounded-square-card-container ${containerClass}`}
+        >
+            <div className="w-full relative">
+                <section className="title-headline-container flex items-center">
+                    <h3 className="line-clamp-2 font-bold text-[13px] text-grayscale-900 ml-[5px]">
+                        {title}
+                    </h3>
+                </section>
+                <p className="text-grayscale-900 text-[11px] text-left ml-[5px] font-poppins font-normal leading-[13px]">{description}</p>
+                <div className="graphic-background relative flex justify-center">
+                    <img alt={iconAltDescription} className="max-w-[130px]" src={imgSource} />
+                </div>
+            </div>
+
+            <div className={`${circleClass}`}>
+                <CircleIcon
+                    iconCircleClass={iconCircleClass}
+                    iconSrc={iconSrc}
+                    count={count}
+                    size="40"
+                    loading={loading}
+                />
+            </div>
+        </button>
+    );
+};
+
+export default RoundedSquare;

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

@@ -0,0 +1,35 @@
+import { vi } from 'vitest';
+import React from 'react';
+import '@testing-library/jest-dom';
+import userEvent from '@testing-library/user-event';
+import { render, screen } from '@testing-library/react';
+
+import RoundedSquare from '../RoundedSquare';
+
+describe('RoundedSquare', () => {
+    it('renders without props', async () => {
+        expect(() => render(<RoundedSquare />)).not.toThrow();
+    });
+
+    it('renders title', async () => {
+        const screen = render(<RoundedSquare title="Title!" />);
+
+        expect(screen.getByText('Title!')).toBeInTheDocument();
+    });
+
+    it('renders count', async () => {
+        render(<RoundedSquare count="29" />);
+
+        expect(screen.getByText('29')).toBeInTheDocument();
+    });
+
+    it('calls onClick', async () => {
+        const handleOnClick = vi.fn();
+        const user = userEvent.setup();
+
+        render(<RoundedSquare onClick={handleOnClick} />);
+
+        await user.click(screen.getByRole('button'));
+        expect(handleOnClick).toBeCalled();
+    });
+});

package/src/components/RoundedSquare/constants.ts

@@ -0,0 +1,63 @@
+import coinsGraphic from '../../assets/images/walletcurrency.webp';
+import idsGraphic from '../../assets/images/walletids.webp';
+import jobhistoryGraphic from '../../assets/images/walletjobhistory.webp';
+import learningHistoryGraphic from '../../assets/images/backpack.png';
+import skillsGraphic from '../../assets/images/walletskills.webp';
+import achievementsGraphic from '../../assets/images/walletTrophy.png';
+import badgeGraphic from '../../assets/images/social-badge-2.png';
+import membershipGraphic from '../../assets/images/membership-graphic.png';
+
+import apple from '../../assets/images/apple.png';
+import accommodationHands from '../../assets/images/Accommodation-Hands.png';
+import experienceMountain from '../../assets/images/experience-mountain.png';
+
+import MiniTrophyIcon from '../../assets/images/minitrophycolored.svg';
+import MiniGradIcon from '../../assets/images/minigradcapcolored.svg';
+import MiniPuzzleIcon from '../../assets/images/minipuzzlecolored.svg';
+import { LCSubtypes } from '../../types';
+
+export const TYPE_TO_MINI_ICON: any = {
+    [LCSubtypes.course]: MiniGradIcon,
+    [LCSubtypes.achievement]: MiniTrophyIcon,
+    [LCSubtypes.skill]: MiniPuzzleIcon,
+};
+
+export const WALLET_SUBTYPES = {
+    ACHIEVEMENTS: 'achievements',
+    IDS: 'ids',
+    JOB_HISTORY: 'jobHistory',
+    CURRENCIES: 'currency',
+    LEARNING_HISTORY: 'learningHistory',
+    SKILLS: 'skills',
+    SOCIAL_BADGES: 'socialBadges',
+    MEMBERSHIP: 'membership',
+    ACCOMPLISHMENTS: 'accomplishments',
+    ACCOMMODATIONS: 'accommodations',
+    MERIT_BADGES: 'meritBadges',
+};
+
+export const TYPE_TO_IMG_SRC = {
+    [WALLET_SUBTYPES.ACHIEVEMENTS]: achievementsGraphic,
+    [WALLET_SUBTYPES.IDS]: idsGraphic,
+    [WALLET_SUBTYPES.JOB_HISTORY]: experienceMountain,
+    [WALLET_SUBTYPES.LEARNING_HISTORY]: apple,
+    [WALLET_SUBTYPES.CURRENCIES]: coinsGraphic,
+    [WALLET_SUBTYPES.SKILLS]: skillsGraphic,
+    [WALLET_SUBTYPES.SOCIAL_BADGES]: badgeGraphic,
+    [WALLET_SUBTYPES.MEMBERSHIP]: membershipGraphic,
+    [WALLET_SUBTYPES.ACCOMPLISHMENTS]: learningHistoryGraphic,
+    [WALLET_SUBTYPES.ACCOMMODATIONS]: accommodationHands,
+};
+
+export const TYPE_TO_WALLET_COLOR = {
+    [WALLET_SUBTYPES.ACHIEVEMENTS]: 'spice-300',
+    [WALLET_SUBTYPES.IDS]: 'yellow-300',
+    [WALLET_SUBTYPES.JOB_HISTORY]: 'rose-300',
+    [WALLET_SUBTYPES.LEARNING_HISTORY]: 'emerald-300',
+    [WALLET_SUBTYPES.CURRENCIES]: 'cyan-200',
+    [WALLET_SUBTYPES.SKILLS]: 'indigo-300',
+    [WALLET_SUBTYPES.SOCIAL_BADGES]: 'cyan-200',
+    [WALLET_SUBTYPES.MEMBERSHIP]: 'teal-300',
+    [WALLET_SUBTYPES.ACCOMPLISHMENTS]: 'lime-300',
+    [WALLET_SUBTYPES.ACCOMMODATIONS]: 'amber-300',
+};

package/src/components/RoundedSquare/index.ts

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

package/src/components/SchoolIdCard/SchoolIDCard.stories.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { Story, Meta } from '@storybook/react';
+
+import MotlowBuckCardBG from '../../assets/images/motlow-buckcard-bg.svg';
+import SchoolIDCard from './SchoolIDCard';
+import { SchoolIDCardProps } from './types';
+
+export default {
+    title: 'SchoolIDCard',
+    component: SchoolIDCard,
+    argTypes: {},
+} as Meta<typeof SchoolIDCard>;
+
+const Template: Story<SchoolIDCardProps> = args => <SchoolIDCard {...args} />;
+
+export const SchoolIDCardTest = Template.bind({});
+SchoolIDCardTest.args = {
+    subjectInitials: 'JY',
+    subjectInitialsClass: 'bg-yellow-400',
+    userImage: '',
+    userName: 'Janet Yoon',
+    text: (
+        <h3 className="text-xs font-bold uppercase text-[#006937]">
+            Student <span className="text-black">Buckcard</span>
+        </h3>
+    ),
+    extraText: 'Moore County',
+    backgroundImage: MotlowBuckCardBG,
+    className: '',
+};

package/src/components/SchoolIdCard/SchoolIDCard.tsx

@@ -0,0 +1,81 @@
+import React from 'react';
+
+import Barcode from 'react-barcode';
+
+import { SchoolIDCardProps } from './types';
+
+export const SchoolIDCard: React.FC<SchoolIDCardProps> = ({
+    userImage,
+    userName,
+    text = null,
+    extraText,
+    subjectInitials,
+    subjectInitialsClass,
+    showBarcode = true,
+    backgroundImage,
+    className,
+    containerClassName,
+}) => {
+    let textEl: React.ReactNode | null = null;
+    if (typeof text === 'string') {
+        textEl = <h3 className="text-xs font-bold uppercase text-black">{text}</h3>;
+    } else {
+        textEl = text;
+    }
+
+    let issueeImageEl: React.ReactNode | null = null;
+    const initialsClass = `subject-initials h-[70px] w-[70px] rounded-full mr-[10px] flex flex-row items-center justify-center h-full w-full overflow-hidden bg-emerald-700 text-white font-medium text-3xl ${subjectInitialsClass}`;
+
+    if (userImage && userImage?.trim() !== '') {
+        issueeImageEl = (
+            <div
+                className="h-[80px] w-[80px] rounded-full overflow-hidden bg-no-repeat bg-cover bg-center border-solid border-[2px] border-white mr-2"
+                style={{ backgroundImage: `url(${userImage})` }}
+            />
+        );
+    } else if (subjectInitials && (!userImage || userImage?.trim() === '')) {
+        issueeImageEl = <div className={initialsClass}>{subjectInitials}</div>;
+    }
+
+    return (
+        <div
+            style={{ backgroundImage: `url(${backgroundImage})` }}
+            className={`h-[200px] w-[320px] rounded-[20px] overflow-hidden ${className}`}
+        >
+            <div
+                className={`h-full w-full flex items-center justify-start relative ${containerClassName}`}
+            >
+                <div className="w-full flex justify-start items-center pl-3 mt-10">
+                    {issueeImageEl}
+                    <div className="h-full flex items-start justify-center flex-col mt-7">
+                        {userName && <p className="text-sm text-black font-light">{userName}</p>}
+                        {textEl && textEl}
+                    </div>
+                </div>
+
+                {showBarcode && (
+                    <div className="barcode-container">
+                        <div className="barcode-wrap">
+                            <Barcode
+                                value="barcode-example"
+                                height="22px"
+                                width="1px"
+                                fontSize={0}
+                            />
+                        </div>
+                    </div>
+                )}
+
+                {extraText && (
+                    <div>
+                        <p className="absolute bottom-3 left-0 w-full flex items-center justify-center text-white text-xs font-semibold">
+                            {extraText}
+                        </p>
+                    </div>
+                )}
+            </div>
+        </div>
+    );
+};
+
+export default SchoolIDCard;

package/src/components/SchoolIdCard/index.ts

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

package/src/components/SchoolIdCard/types.ts

@@ -0,0 +1,42 @@
+import React from 'react';
+
+export type SchoolIDCardProps = {
+    /**
+     * student image
+     * @type {string}
+     */
+    userImage?: string;
+    /**
+     * student name
+     * @type {string}
+     */
+    userName: string;
+    /**
+     * text to display below the student name
+     * @type {React.ReactNode | string | undefined}
+     */
+    text?: React.ReactNode | string | undefined;
+    /**
+     * extra text to display on the ID card
+     * @type {React.ReactNode | string | undefined}
+     */
+    extraText?: string;
+    /**
+     * fixed ID background
+     * @type {string}
+     */
+    backgroundImage: string;
+    /**
+     * custom className
+     * @type {string}
+     */
+    className?: string;
+    /**
+     * custom container className
+     * @type {string}
+     */
+    containerClassName?: string;
+    showBarcode?: boolean;
+    subjectInitials?: string;
+    subjectInitialsClass?: string;
+};

package/src/components/SkillTabCard/SkillTabCard.stories.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { Story, Meta } from '@storybook/react';
+import SkillTabCard from './SkillTabCard';
+import { SkillTabCardProps } from '../../types';
+
+export default {
+    title: 'SkillTabCard',
+    component: SkillTabCard,
+    argTypes: {},
+} as Meta<typeof SkillTabCard>;
+
+const Template: Story<SkillTabCardProps> = args => <SkillTabCard {...args} />;
+
+export const SkillTabCardTest = Template.bind({});
+SkillTabCardTest.args = {
+    title: 'Skill Tab Card Test Title',
+    description: 'Describe how to identify electrical hazards.',
+    checked: true,
+    showStatus: false,
+    showChecked: true,
+    onCheckClicked: () => {
+        console.log('///CHECKED');
+    },
+    onClick: () => console.log('////clicked'),
+};

package/src/components/SkillTabCard/SkillTabCard.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import { RoundedPill } from '../RoundedPill';
+import { LCSubtypes } from '../../types';
+import { CircleCheckButton } from '../CircleCheckButton';
+import { SkillTabCardProps } from '../../types';
+
+export const SkillTabCard: React.FC<SkillTabCardProps> = ({
+    title,
+    description,
+    checked = false,
+    showChecked,
+    onClick,
+    onCheckClicked,
+    showStatus = true,
+    className = 'skill-tab-card',
+}) => {
+    const buttonClass = checked
+        ? 'skill-tab-check-toggle checked'
+        : 'skill-tab-check-toggle unchecked';
+    return (
+        <div
+            className={`flex-col flex justify-between items-center font-bold shadow-[0_0_8px_0px_rgba(0,0,0,0.2)] relative $ py-[8px] px-[8px] w-[190px] h-[168px] rounded-[20px] ${className}`}
+        >
+            {showChecked && (
+                <CircleCheckButton
+                    onClick={onCheckClicked}
+                    checked={checked}
+                    className={buttonClass}
+                    bgColor="bg-grayscale-200"
+                />
+            )}
+            <h4 className="text-indigo-600 text-[14px] text-center line-clamp-2">{title}</h4>
+            <p className="line-clamp-2 text-[12px] text-center">{description}</p>
+
+            <div>
+                {showStatus && (
+                    <RoundedPill type={LCSubtypes.skill} statusText={'Earned'} onClick={onClick} />
+                )}
+            </div>
+        </div>
+    );
+};
+
+export default SkillTabCard;

package/src/components/SkillTabCard/index.ts

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

package/src/components/SkillVerticalCard/SkillVerticalCard.stories.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { Story, Meta } from '@storybook/react';
+
+import SkillVerticalCard from './SkillVerticalCard';
+import { SkillVerticalCardProps } from '../../types';
+
+export default {
+    title: 'Skill Vertical Card',
+    component: SkillVerticalCard,
+    argTypes: {},
+} as Meta<typeof SkillVerticalCard>;
+
+const Template: Story<SkillVerticalCardProps> = args => <SkillVerticalCard {...args} />;
+
+export const SkillVerticalCardTest = Template.bind({});
+SkillVerticalCardTest.args = {
+    title: 'Creative Thinking',
+    onClick: () => {},
+    className: 'skill-vertical-card-mini',
+};

package/src/components/SkillVerticalCard/SkillVerticalCard.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { SkillVerticalCardProps } from '../../types';
+import SkillPlaceholder from '../../assets/images/skillplaceholder.png';
+
+export const SkillVerticalCard: React.FC<SkillVerticalCardProps> = ({
+    title = 'Creative Thinking',
+    thumbImg,
+    className,
+    onClick = () => {},
+}) => {
+    const thumbSrc = thumbImg || SkillPlaceholder;
+
+    return (
+        <div
+            onClick={onClick}
+            className={`flex-col 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="flex skill-vert-card-title-container items-center bg-indigo-600 h-[76px] justify-center items-center">
+                <h3 className="text-[14px] font-semibold text-white">{title}</h3>
+            </section>
+
+            <section className="skill-vert-card-details my-[5px] flex items-center justify-center overflow-hidden pt-[5px]">
+                <img
+                    src={thumbSrc}
+                    className="skill-vert-thumb object-cover overflow-hidden w-[140px] h-[119px] rounded-[20px]"
+                />
+            </section>
+        </div>
+    );
+};
+
+export default SkillVerticalCard;

package/src/components/SkillVerticalCard/index.ts

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

package/src/components/SkillsCard/SkillsCard.stories.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { Story, Meta } from '@storybook/react';
+
+import SkillsCard from './SkillsCard';
+import { SkillsCardProps } from '../../types';
+
+export default {
+    title: 'Skills Card',
+    component: SkillsCard,
+    argTypes: {},
+} as Meta<typeof SkillsCard>;
+
+const Template: Story<SkillsCardProps> = args => <SkillsCard {...args} />;
+
+export const SkillsCardTest = Template.bind({});
+SkillsCardTest.args = {
+    count: 14,
+    title: 'Creative Thinking',
+    level: 'Expert',
+    category: 'Creativity',
+    levelCount: 8,
+    onClick: () => {},
+    className: 'skill-card-mini',
+};

package/src/components/SkillsCard/SkillsCard.tsx

@@ -0,0 +1,68 @@
+import React from 'react';
+import { SkillsCardProps } from '../../types';
+
+type SkillsMeterSegmentProps = {
+    filled?: boolean;
+    className?: string;
+    skillColor?: string;
+};
+
+export const SkillsMeterSegment: React.FC<SkillsMeterSegmentProps> = ({
+    filled = false,
+    className,
+    skillColor = 'bg-cyan-700',
+}) => {
+    const bgColor = filled ? skillColor : 'bg-gray-200';
+    return (
+        <div
+            className={`skills-meter-segment h-[20px] w-full max-w-[27px] ${bgColor} mr-[5px] rounded-[5px]`}
+        ></div>
+    );
+};
+
+export const SkillsCard: React.FC<SkillsCardProps> = ({
+    count = 14,
+    title = 'Creative Thinking',
+    level = 'Expert',
+    category = 'Creativity',
+    levelCount = 9,
+    skillColor = 'bg-cyan-700',
+    className,
+    onClick = () => {},
+}) => {
+    const renderSkillsMeter = () => {
+        const num = levelCount;
+        const skillMeter = [...Array(10).keys()].map(counter => {
+            console.log('///counter', counter, 'num', num);
+            const filled = counter < num;
+            return <SkillsMeterSegment filled={filled} key={counter} skillColor={skillColor} />;
+        });
+
+        return skillMeter;
+    };
+
+    const skillsMeter = renderSkillsMeter();
+
+    return (
+        <div
+            onClick={onClick}
+            className={`flex-col shadow-[0_0_8px_0px_rgba(0,0,0,0.2)] relative $ py-[10px] px-[15px] max-w-[400px] h-[129px] rounded-[20px] ${className}`}
+        >
+            <section className="flex skill-card-title-container items-center">
+                <div className="flex items-center justify-center skill-count-display text-[20px] min-w-[30px] bg-grayscale-100 rounded-full px-[5px] mr-[8px]">
+                    {count}
+                </div>
+                <h3 className="text-[17px] font-semibold">{title}</h3>
+            </section>
+
+            <section className="skill-card-details my-[5px]">
+                <p className="text-sm text-gray-900 font-semibold">Skill Level: {level}</p>
+                <p className="text-sm text-gray-900 font-semibold">Categories: {category}</p>
+            </section>
+
+            <section className="flex w-full skill-meter-full mt-[8px]">{skillsMeter}</section>
+        </div>
+    );
+};
+
+export default SkillsCard;

package/src/components/SkillsCard/index.ts

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