@learncard/react 2.10.3 → 2.10.4

package/src/components/NotificationBoostCard/types.ts

@@ -0,0 +1,25 @@
+import { NotificationTypeEnum } from '../../constants/notifications';
+
+export interface NotificationIssuerMeta {
+    image?: string;
+    fullName?: string;
+    profileId?: string;
+    displayName?: string;
+}
+
+export type NotificationBoostCardProps = {
+    className?: string;
+    thumbImage?: string;
+    customThumbComponent?: React.ReactNode;
+    notificationType: NotificationTypeEnum;
+    issuerInfo?: NotificationIssuerMeta;
+    issueDate?: string;
+    handleButtonClick?: () => void;
+    handleCancelClick?: () => void;
+    handleCardClick?: () => void;
+    claimStatus: boolean;
+    loadingState?: boolean;
+    showIssuerInfo?: boolean;
+    title?: string;
+    isArchived?: boolean;
+};

package/src/components/NotificationUserAcceptedBoostCard/NotificationUserAcceptedBoostCard.stories.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { Story, Meta } from '@storybook/react';
+
+import NotificationUserAcceptedBoostCard from './NotificationUserAcceptedBoostCard';
+import { NotificationUserAcceptedBoostCardProps } from './types';
+import { UserNotificationTypeEnum } from '../../constants/notifications';
+
+export default {
+    title: 'NotificationUserAcceptedBoostCard',
+    component: NotificationUserAcceptedBoostCard,
+    argTypes: {},
+} as Meta<typeof NotificationUserAcceptedBoostCard>;
+
+const Template: Story<NotificationUserAcceptedBoostCardProps> = args => (
+    <NotificationUserAcceptedBoostCard {...args} />
+);
+
+export const NotificationUserAcceptedBoostCardTest = Template.bind({});
+
+NotificationUserAcceptedBoostCardTest.args = {
+    title: 'Bobby Brown accepted your boost Ice Cream Achievement',
+    thumbImage: 'https://picsum.photos/300',
+    className: 'notification-boost-card-user-accepted-test',
+    issueDate: 'Apr 04 2022',
+    notificationType: UserNotificationTypeEnum.AcceptedBoost,
+    handleCancelClick: () => console.log('///CANCEL CLICK'),
+    isArchived: false,
+};

package/src/components/NotificationUserAcceptedBoostCard/NotificationUserAcceptedBoostCard.tsx

@@ -0,0 +1,96 @@
+import React, { useState, useEffect } from 'react';
+import X from '../../assets/images/X.svg';
+import { NotificationUserAcceptedBoostCardProps } from './types';
+import { UserNotificationTypeStyles } from '../NotificationUserCard/types';
+
+import { UserNotificationTypeEnum } from '../../constants/notifications';
+import ArrowArcLeft from '../../assets/images/ArrowArcLeft.svg';
+
+export const NotificationUserAcceptedBoostCard: React.FC<
+    NotificationUserAcceptedBoostCardProps
+> = ({
+    title,
+    customThumbComponent,
+    className,
+    thumbImage,
+    notificationType = UserNotificationTypeEnum.AcceptedBoost,
+    issueDate,
+    loadingState = false,
+    handleCancelClick,
+    isArchived,
+}) => {
+    const [isLoading, setIsLoading] = useState<boolean>(loadingState || false);
+
+    useEffect(() => {
+        setIsLoading(loadingState);
+    }, [loadingState]);
+
+    const { textStyles, viewButtonStyles, typeText } = UserNotificationTypeStyles[notificationType];
+
+    return (
+        <div
+            className={`flex justify-start max-w-[600px] items-start relative w-full rounded-3xl shadow-bottom py-[10px] px-[10px] bg-white ${className}`}
+        >
+            <div className="notification-card-left-side px-[0px] flex">
+                {!customThumbComponent && (
+                    <div
+                        className={`overflow-hidden w-[50px] h-[50px] rounded-full flex items-start notification-card-thumbnail`}
+                    >
+                        <img
+                            src={thumbImage}
+                            alt="Notification Thumb"
+                            className="w-full h-full w-[50px] h-[50px] object-cover"
+                        />
+                    </div>
+                )}
+                {customThumbComponent && customThumbComponent}
+            </div>
+            <div className="flex flex-col justify-center items-start relative w-full">
+                <div className="text-left ml-3 flex flex-col items-start justify-start w-full">
+                    <h4
+                        className="font-bold tracking-wide line-clamp-2 text-black text-[14px] pr-[20px] notification-card-title"
+                        data-testid="notification-title"
+                    >
+                        {title}
+                    </h4>
+                    <p
+                        className={`font-semibold p-0 mt-[10px] leading-none tracking-wide line-clamp-1 text-[12px] notification-card-type-text ${textStyles}`}
+                        data-testid="notification-type"
+                    >
+                        {typeText}{' '}
+                        {issueDate && (
+                            <span
+                                className="text-grayscale-600 normal-case font-normal text-[12px] notification-card-type-issue-date"
+                                data-testid="notification-cred-issue-date"
+                            >
+                                {typeText && '•'} {issueDate}
+                            </span>
+                        )}
+                    </p>
+
+                    <div className="flex items-center justify-end w-full mt-3">
+                        <button
+                            onClick={handleCancelClick}
+                            className={`rounded-[24px] flex items-center justify-center  h-[42px] w-[42px] shadow-bottom bg-white font-semibold mr-2 p-[0px] tracking-wide ${viewButtonStyles}`}
+                            role="button"
+                            name="notification-view-button"
+                        >
+                            {!isArchived && (
+                                <img src={X ?? ''} alt="Cancel" className="notification-card-x" />
+                            )}
+                            {isArchived && (
+                                <img
+                                    src={ArrowArcLeft ?? ''}
+                                    alt="Cancel"
+                                    className="notification-card-x"
+                                />
+                            )}
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default NotificationUserAcceptedBoostCard;

package/src/components/NotificationUserAcceptedBoostCard/index.ts

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

package/src/components/NotificationUserAcceptedBoostCard/types.ts

@@ -0,0 +1,13 @@
+import { UserNotificationTypeEnum } from '../../constants/notifications';
+
+export type NotificationUserAcceptedBoostCardProps = {
+    className?: string;
+    thumbImage?: string;
+    customThumbComponent?: React.ReactNode;
+    notificationType?: UserNotificationTypeEnum.AcceptedBoost;
+    issueDate?: string;
+    handleCancelClick?: () => void;
+    loadingState?: boolean;
+    title?: string;
+    isArchived?: boolean;
+};

package/src/components/NotificationUserCard/NotificationUserCard.stories.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { Story, Meta } from '@storybook/react';
+
+import NotificationUserCard from './NotificationUserCard';
+import { NotificationUserCardProps } from './types';
+
+export default {
+    title: 'NotificationUserCard',
+    component: NotificationUserCard,
+    argTypes: {},
+} as Meta<typeof NotificationUserCard>;
+
+const Template: Story<NotificationUserCardProps> = args => <NotificationUserCard {...args} />;
+
+export const NotificationUserCardTest = Template.bind({});
+
+NotificationUserCardTest.args = {
+    title: 'Bobby Brown sent you a connection request',
+    thumbImage: 'https://picsum.photos/300',
+    className: 'notification-boost-card-user-test',
+    issueDate: 'Apr 04 2022',
+    acceptStatus: false,
+    handleButtonClick: () => console.log('BUTTON CLICK'),
+    handleCancelClick: () => console.log('///CANCEL CLICK'),
+    isArchived: false,
+};

package/src/components/NotificationUserCard/NotificationUserCard.tsx

@@ -0,0 +1,121 @@
+import React, { useState, useEffect } from 'react';
+import X from '../../assets/images/X.svg';
+import { NotificationUserCardProps, UserNotificationTypeStyles } from './types';
+
+import { UserNotificationTypeEnum } from '../../constants/notifications';
+import Checkmark from '../svgs/Checkmark';
+import ArrowArcLeft from '../../assets/images/ArrowArcLeft.svg';
+
+export const NotificationUserCard: React.FC<NotificationUserCardProps> = ({
+    title,
+    customThumbComponent,
+    className,
+    thumbImage,
+    issueDate,
+    acceptStatus = false,
+    loadingState = false,
+    handleButtonClick,
+    handleCancelClick,
+    isArchived,
+}) => {
+    const [isAccepted, setisAccepted] = useState<boolean>(acceptStatus || false);
+    const [isLoading, setIsLoading] = useState<boolean>(loadingState || false);
+
+    useEffect(() => {
+        setisAccepted(acceptStatus);
+    }, [acceptStatus]);
+
+    useEffect(() => {
+        setIsLoading(loadingState);
+    }, [loadingState]);
+
+    const { textStyles, viewButtonStyles, claimedButtonStyles, unclaimedButtonStyles, typeText } =
+        UserNotificationTypeStyles[UserNotificationTypeEnum.ConnectionRequest];
+
+    const claimButtonStyles = isAccepted ? claimedButtonStyles : unclaimedButtonStyles;
+
+    let buttonText: string = '';
+
+    if (isAccepted) {
+        buttonText = 'Accepted';
+    } else if (!isAccepted) {
+        buttonText = 'Accept';
+    }
+
+    return (
+        <div
+            className={`flex justify-start max-w-[600px] items-start relative w-full rounded-3xl shadow-bottom py-[10px] px-[10px] bg-white ${className}`}
+        >
+            <div className="notification-card-left-side px-[0px] flex">
+                {!customThumbComponent && (
+                    <div
+                        className={`overflow-hidden cursor-pointer w-[68px] h-[68px] rounded-full flex items-start notification-card-thumbnail`}
+                    >
+                        <img
+                            src={thumbImage}
+                            alt="Notification Thumb"
+                            className="w-full h-full w-[68px] h-[68px] object-cover"
+                        />
+                    </div>
+                )}
+                {customThumbComponent && customThumbComponent}
+            </div>
+            <div className="flex flex-col justify-center items-start relative w-full">
+                <div className="text-left ml-3 flex flex-col items-start justify-start w-full">
+                    <h4
+                        className="cursor-pointer font-bold tracking-wide line-clamp-2 text-black text-[14px] pr-[20px] notification-card-title"
+                        data-testid="notification-title"
+                    >
+                        {title}
+                    </h4>
+                    <p
+                        className={`font-semibold p-0 mt-[10px] leading-none tracking-wide line-clamp-1 text-[12px] notification-card-type-text ${textStyles}`}
+                        data-testid="notification-type"
+                    >
+                        {typeText}{' '}
+                        {issueDate && (
+                            <span
+                                className="text-grayscale-600 normal-case font-normal text-[12px] notification-card-type-issue-date"
+                                data-testid="notification-cred-issue-date"
+                            >
+                                • {issueDate}
+                            </span>
+                        )}
+                    </p>
+
+                    <div className="flex items-center justify-between mt-3 w-full">
+                        <button
+                            className={`notification-claim-btn flex items-center mr-[15px] w-[143px] justify-center flex-1 rounded-[24px] border-2 border-solid font-semibold py-2 px-3 tracking-wide ${claimButtonStyles}`}
+                            onClick={handleButtonClick}
+                            role="button"
+                            name="notification-claim-button"
+                        >
+                            {isAccepted && <Checkmark className="h-[24px] p-0 m-0" />}{' '}
+                            {isLoading ? 'Loading...' : buttonText}
+                        </button>
+
+                        <button
+                            onClick={handleCancelClick}
+                            className={`rounded-[24px] flex items-center justify-center  h-[42px] w-[42px] shadow-bottom bg-white font-semibold mr-2 p-[0px] tracking-wide ${viewButtonStyles}`}
+                            role="button"
+                            name="notification-view-button"
+                        >
+                            {!isArchived && (
+                                <img src={X ?? ''} alt="Cancel" className="notification-card-x" />
+                            )}
+                            {isArchived && (
+                                <img
+                                    src={ArrowArcLeft ?? ''}
+                                    alt="Cancel"
+                                    className="notification-card-x"
+                                />
+                            )}
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default NotificationUserCard;

package/src/components/NotificationUserCard/index.ts

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

package/src/components/NotificationUserCard/types.ts

@@ -0,0 +1,43 @@
+import { UserNotificationTypeEnum } from '../../constants/notifications';
+
+export type NotificationUserCardProps = {
+    className?: string;
+    thumbImage?: string;
+    customThumbComponent?: React.ReactNode;
+    issueDate?: string;
+    handleButtonClick?: () => void;
+    handleCancelClick?: () => void;
+    handleCardClick?: () => void;
+    acceptStatus: boolean;
+    loadingState?: boolean;
+    title?: string;
+    isArchived?: boolean;
+};
+
+export const UserNotificationTypeStyles: {
+    [key: UserNotificationTypeEnum | string]: {
+        viewButtonStyles: string;
+        unclaimedButtonStyles: string;
+        claimedButtonStyles: string;
+        textStyles: string;
+        iconCircleStyles: string;
+        typeText?: string;
+    };
+} = {
+    [UserNotificationTypeEnum.ConnectionRequest]: {
+        viewButtonStyles: 'border-indigo-600 text-indigo-400',
+        unclaimedButtonStyles: 'text-white bg-indigo-600 border-indigo-600 shadow-bottom',
+        claimedButtonStyles: 'text-indigo-600 bg-indigo-50 border-indigo-50',
+        textStyles: 'text-indigo-600 capitalize',
+        iconCircleStyles: 'bg-indigo-600',
+        typeText: 'Invitation',
+    },
+    [UserNotificationTypeEnum.AcceptedBoost]: {
+        viewButtonStyles: 'border-indigo-600 text-indigo-400',
+        unclaimedButtonStyles: 'text-white bg-indigo-600 border-indigo-600 shadow-bottom',
+        claimedButtonStyles: 'text-indigo-600 bg-indigo-50 border-indigo-50',
+        textStyles: 'text-indigo-600 capitalize',
+        iconCircleStyles: 'bg-indigo-600',
+        typeText: 'Boost',
+    },
+};

package/src/components/QRCodeCard/QRCodeCard.stories.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { Story, Meta } from '@storybook/react';
+
+import QRCodeCard from './QRCodeCard';
+
+import { QRCodeCardProps } from './types';
+
+export default {
+    title: 'QRCodeCard',
+    component: QRCodeCard,
+    argTypes: {},
+} as Meta<typeof QRCodeCard>;
+
+const Template: Story<QRCodeCardProps> = args => <QRCodeCard {...args} />;
+
+export const QRCodeCardTest = Template.bind({});
+QRCodeCardTest.args = {
+    userHandle: '@janetyoon',
+    qrCodeValue: 'https://www.npmjs.com/package/@learncard/react',
+    className: '',
+    text: (
+        <p className="flex items-center justify-center w-full text-xl text-black font-bold tracking-[9px]">
+            LEARNCARD
+        </p>
+    ),
+};

package/src/components/QRCodeCard/QRCodeCard.tsx

@@ -0,0 +1,54 @@
+import React from 'react';
+import { QRCodeSVG } from 'qrcode.react';
+
+import { QRCodeCardProps } from './types';
+
+export const QRCodeCard: React.FC<QRCodeCardProps> = ({
+    userHandle,
+    qrCodeValue,
+    className,
+    text = null,
+}) => {
+    let textEl: React.ReactNode | null = null;
+    if (typeof text === 'string') {
+        textEl = (
+            <p className="flex items-center justify-center w-full text-xl text-black font-bold tracking-[9px]">
+                {text}
+            </p>
+        );
+    } else {
+        textEl = text;
+    }
+
+    return (
+        <div
+            className={`flex flex-col justify-center items-start pt-9 rounded-[20px] shadow-3xl max-w-[400px] bg-white relative pb-8 overflow-hidden ${className}`}
+        >
+            {qrCodeValue && (
+                <div className="flex justify-center items-center w-full relative px-8 mb-5">
+                    <div className="max-w-[90%] w-full h-auto relative">
+                        <QRCodeSVG
+                            className="h-full w-full"
+                            value={qrCodeValue}
+                            data-testid="qrcode-card"
+                            bgColor="transparent"
+                        />
+                    </div>
+                </div>
+            )}
+
+            {userHandle && (
+                <p
+                    className="flex items-center justify-center text-center w-full mb-3 font-semibold text-lg text-gray-500"
+                    data-testid="qrcode-card-user-handle"
+                >
+                    {userHandle}
+                </p>
+            )}
+
+            {textEl}
+        </div>
+    );
+};
+
+export default QRCodeCard;

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

@@ -0,0 +1,31 @@
+import React from 'react';
+import '@testing-library/jest-dom';
+import { render, screen } from '@testing-library/react';
+
+import QRCodeCard from '../QRCodeCard';
+
+describe('QRCodeCard', () => {
+    test('Checks QRCodeCard renders with props', () => {
+        const userHandle = '@janetyoon';
+
+        render(
+            <QRCodeCard
+                userHandle={userHandle}
+                qrCodeValue="https://www.npmjs.com/package/@learncard/react"
+            />
+        );
+
+        const userHandleEl = screen.getByText(userHandle);
+        expect(userHandleEl).toBeInTheDocument();
+
+        const qrcodeCard = screen.queryByTestId('qrcode-card');
+        expect(qrcodeCard).toBeInTheDocument();
+    });
+
+    test('Checks QRCodeCard renders without props', () => {
+        render(<QRCodeCard />);
+
+        expect(screen.queryByTestId('qrcode-card-user-handle')).not.toBeInTheDocument();
+        expect(screen.queryByTestId('qrcode-card')).not.toBeInTheDocument();
+    });
+});

package/src/components/QRCodeCard/index.ts

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

package/src/components/QRCodeCard/types.ts

@@ -0,0 +1,22 @@
+export type QRCodeCardProps = {
+    /**
+     * user handle
+     * @type {string}
+     */
+    userHandle?: string;
+    /**
+     * qr code value
+     * @type {string}
+     */
+    qrCodeValue: string;
+    /**
+     * text to display on the card
+     * @type {React.ReactNode | null}
+     */
+    text?: string;
+    /**
+     * custom className
+     * @type {string}
+     */
+    className?: string;
+};

package/src/components/RoundedPill/RoundedPill.stories.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { Story, Meta } from '@storybook/react';
+
+import RoundedPill from './RoundedPill';
+import { RoundedPillProps } from '../../types';
+
+export default {
+    title: 'Rounded Pill',
+    component: RoundedPill,
+    argTypes: {},
+} as Meta<typeof RoundedPill>;
+
+const Template: Story<RoundedPillProps> = args => <RoundedPill {...args} />;
+
+export const RoundedPillTest = Template.bind({});
+RoundedPillTest.args = {
+    statusText: 'Earned',
+    type: 'achievement',
+    showCheckmark: true,
+    onClick: () => console.log('clicked!'),
+};

package/src/components/RoundedPill/RoundedPill.tsx

@@ -0,0 +1,137 @@
+import React from 'react';
+import { TYPE_TO_ICON } from '../../constants/icons';
+import { RoundedPillProps } from '../../types';
+
+const TYPE_TO_BG_COLOR_CLASS: any = {
+    skill: 'indigo-50',
+    achievement: 'spice-50',
+    course: 'emerald-50',
+    locked: 'grayscale-100',
+};
+
+const TYPE_TO_FOREGROUND_COLOR: any = {
+    skill: 'indigo-500',
+    achievement: 'spice-500',
+    course: 'emerald-700',
+    locked: 'grayscale-700',
+};
+
+const TYPE_TO_CHECKMARK_COLOR: any = {
+    skill: '#6366F1',
+    achievement: '#FF5820',
+    course: '#00BA88',
+    locked: '#52597A',
+};
+
+type InlineSVGProps = {
+    color?: string;
+    size?: string | number;
+};
+
+export const CheckmarkSvg: React.FC<InlineSVGProps> = ({ color = '#00BA88', size = '20' }) => {
+    return (
+        <svg
+            width={size}
+            height={size}
+            viewBox="0 0 20 20"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+        >
+            <path
+                d="M16.875 5.62537L8.125 14.375L3.75 10.0004"
+                stroke={color}
+                strokeWidth="3"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+            />
+        </svg>
+    );
+};
+
+const LockedIcon: React.FC<InlineSVGProps> = ({ color = '#52597A', size = '20' }) => {
+    return (
+        <svg
+            width={size}
+            height={size}
+            viewBox="0 0 20 20"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+        >
+            <path
+                d="M16.25 6.875H3.75C3.40482 6.875 3.125 7.15482 3.125 7.5V16.25C3.125 16.5952 3.40482 16.875 3.75 16.875H16.25C16.5952 16.875 16.875 16.5952 16.875 16.25V7.5C16.875 7.15482 16.5952 6.875 16.25 6.875Z"
+                stroke={color}
+                strokeWidth="2"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+            />
+            <path
+                d="M7.1875 6.875V4.0625C7.1875 3.31658 7.48382 2.60121 8.01126 2.07376C8.53871 1.54632 9.25408 1.25 10 1.25C10.7459 1.25 11.4613 1.54632 11.9887 2.07376C12.5162 2.60121 12.8125 3.31658 12.8125 4.0625V6.875"
+                stroke={color}
+                strokeWidth="2"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+            />
+            <path
+                d="M10 13.125C10.6904 13.125 11.25 12.5654 11.25 11.875C11.25 11.1846 10.6904 10.625 10 10.625C9.30964 10.625 8.75 11.1846 8.75 11.875C8.75 12.5654 9.30964 13.125 10 13.125Z"
+                fill={color}
+            />
+        </svg>
+    );
+};
+
+export const RoundedPill: React.FC<RoundedPillProps> = ({
+    statusText,
+    type = 'skill',
+    onClick,
+    showCheckmark = false,
+}) => {
+    const backgroundColor = `bg-${TYPE_TO_BG_COLOR_CLASS[type]}`;
+    const iconBgColor = `bg-${TYPE_TO_FOREGROUND_COLOR[type]}`;
+    const circleClass = `flex w-full items-center justify-center icon-display h-[40px] w-[40px] rounded-full ${iconBgColor}  absolute flex-shrink-0 `;
+
+    const handleClick = () => {
+        onClick?.();
+    };
+
+    const iconSrc = TYPE_TO_ICON[type];
+    const textColor = `text-${TYPE_TO_FOREGROUND_COLOR[type]}`;
+    const checkColor = TYPE_TO_CHECKMARK_COLOR[type];
+    const locked = type === 'locked';
+
+    const displayText = !locked ? statusText : 'Locked';
+
+    return (
+        <button
+            onClick={handleClick}
+            className={`flex relative ${backgroundColor} items-center px-[5px] py-[2px]  w-[180px] h-[46px] rounded-[40px] rounded-pill-el`}
+        >
+            {!locked && (
+                <div className={circleClass}>
+                    <img
+                        className="h-full w-full object-cover max-h-[24px] max-w-[24px] flex-shrink-0 "
+                        src={iconSrc ?? ''}
+                        alt="Icon image"
+                    />
+                </div>
+            )}
+            <span
+                className={`font-semibold ${textColor} w-full flex items-center justify-center text-[14px]`}
+            >
+                {showCheckmark && !locked && (
+                    <span className="rounded-pill-checkmark mr-[5px]">
+                        <CheckmarkSvg color={checkColor} />
+                    </span>
+                )}
+                {locked && (
+                    <span className="rounded-pill-checkmark mr-[5px]">
+                        <LockedIcon />
+                    </span>
+                )}
+
+                {displayText}
+            </span>
+        </button>
+    );
+};
+
+export default RoundedPill;