@learncard/react 2.10.3 → 2.10.4

package/src/assets/styles/main.css

@@ -0,0 +1,475 @@
+@config "../../../tailwind.config.js";
+
+@tailwind utilities;
+
+.scrollbar-hide {
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+}
+
+.scrollbar-hide::-webkit-scrollbar {
+    display: none;
+}
+
+.lds-ring {
+    display: inline-block;
+    position: relative;
+    width: 100%;
+    height: 100%;
+}
+
+.lds-ring div {
+    box-sizing: border-box;
+    display: block;
+    position: absolute;
+    width: 54px;
+    height: 54px;
+    margin: 3px;
+    border: 4px solid #fff;
+    border-radius: 50%;
+    animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
+    border-color: #40cba6 transparent transparent transparent;
+}
+
+.lds-ring.static div {
+    animation: none;
+    border-color: #40cba6;
+}
+
+.lds-ring div:nth-child(1) {
+    animation-delay: -0.45s;
+}
+.lds-ring div:nth-child(2) {
+    animation-delay: -0.3s;
+}
+.lds-ring div:nth-child(3) {
+    animation-delay: -0.15s;
+}
+@keyframes lds-ring {
+    0% {
+        transform: rotate(0deg);
+    }
+    100% {
+        transform: rotate(360deg);
+    }
+}
+
+.flippy-wrapper-container {
+    perspective: 2600px;
+}
+
+.flippy-card {
+    width: 100%;
+    max-width: 400px;
+    height: 100%;
+    max-height: 1000px;
+    position: relative;
+    transition: transform 1s;
+    transform-style: preserve-3d;
+    -webkit-transform-style: preserve-3d;
+}
+
+.flippy-card.is-flipped {
+    transform: rotateY(180deg);
+}
+
+.card-face {
+    position: absolute;
+    height: 100%;
+    width: 100%;
+
+    transform-style: preserve-3d;
+    -webkit-transform-style: preserve-3d;
+}
+
+.card-face--front {
+    position: absolute;
+    z-index: 9;
+    transform: rotateY(180deg) scaleX(-1) translateZ(-1px);
+}
+
+.card-face--back {
+    position: relative;
+    transform: scaleX(-1) translateZ(-1px);
+}
+
+.mini-vc-thumbnail-container {
+    max-width: 250px;
+}
+
+.mini-vc-thumbnail-container::after {
+    content: '';
+    background-color: #fff;
+    border-top-left-radius: 24px;
+    border-top-right-radius: 24px;
+    border-bottom-left-radius: 120px;
+    border-bottom-right-radius: 120px;
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 65%;
+    width: 100%;
+    z-index: 1;
+}
+
+.vc-thumbnail-container {
+    max-width: 250px;
+}
+
+.vc-thumbnail-container::after {
+    content: '';
+    display: block;
+    padding-bottom: 100%;
+    top: 0;
+    left: 0;
+}
+
+.vc-thumbnail-container::before {
+    content: '';
+    background-color: #fff;
+    border-top-left-radius: 24px;
+    border-top-right-radius: 24px;
+    border-bottom-left-radius: 120px;
+    border-bottom-right-radius: 120px;
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 60%;
+    width: 100%;
+    z-index: 0;
+}
+
+/* alt container class */
+.vc-thumbnail-alt-container::after {
+    padding-bottom: 80%;
+}
+
+.vc-thumbnail-alt-container::before {
+    height: 80%;
+}
+
+.vc-thumbnail-listview-container::after {
+    content: '';
+    background-color: #fff;
+    border-top-left-radius: 24px;
+    border-top-right-radius: 24px;
+    border-bottom-left-radius: 120px;
+    border-bottom-right-radius: 120px;
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 55%;
+    width: 100%;
+    z-index: 1;
+}
+
+.qr-code-upper-right-pink-square {
+    position: absolute;
+    top: 0;
+    right: 0;
+    height: 25%;
+    width: 25%;
+    background-color: #fb7185;
+    mix-blend-mode: color;
+    z-index: 6;
+}
+
+.qr-code-upper-left-yellow {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 25%;
+    width: 25%;
+    background-color: #fde047;
+    mix-blend-mode: overlay;
+    z-index: 6;
+}
+
+.qr-code-bottom-left-purple-square {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    height: 25%;
+    width: 25%;
+    background-color: #4f46e5;
+    mix-blend-mode: color;
+    z-index: 6;
+}
+
+.qr-code-green-blob {
+    position: absolute;
+    top: 0;
+    left: 25%;
+    height: 35%;
+    width: 100%;
+    border-radius: 0px 0px 161px 100px;
+    background-color: #00ba88;
+    mix-blend-mode: color;
+    z-index: 4;
+}
+
+.qr-code-green-blob-2 {
+    position: absolute;
+    top: 0;
+    left: 45%;
+    height: 60%;
+    width: 100%;
+    border-radius: 0px 0px 161px 150px;
+    background-color: #00ba88;
+    mix-blend-mode: color;
+    z-index: 4;
+}
+
+.qr-code-blue-blob {
+    border-radius: 0px 0px 161px 0px;
+    position: absolute;
+    top: 25%;
+    left: 0px;
+    height: 50%;
+    width: 55%;
+    background-color: #7dd3fc;
+    mix-blend-mode: color;
+    z-index: 4;
+}
+
+.qr-code-orange-blob {
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    height: 60%;
+    width: 100%;
+    background-color: #ff4000;
+    border-radius: 100px 0px 0px 100px;
+    mix-blend-mode: color;
+    z-index: 3;
+}
+
+.qr-code-container::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    /* mix-blend-mode: lighten; */
+}
+
+.barcode-container {
+    margin: 0;
+    padding: 0;
+    position: absolute;
+    top: 50%;
+    right: 0;
+    transform: translate(80px, -50%);
+}
+
+.barcode-wrap {
+    transform: rotate(270deg);
+    border-radius: 16px;
+    padding: 0;
+    margin: 0;
+}
+
+.barcode-wrap > svg {
+    border-radius: 16px;
+    height: 30px;
+    margin: 0;
+    padding: 0;
+}
+
+@media (max-width: 414px) {
+    .credit-card-front-face,
+    .credit-card-back-face {
+        max-height: 210px;
+        min-height: 210px;
+    }
+
+    .credit-card-qr-code-container {
+        margin: 0;
+        padding: 0;
+        margin-left: 35px;
+    }
+
+    .credit-card-master-card-logo {
+        bottom: -10px;
+    }
+}
+
+@media (max-width: 375px) {
+    .credit-card-front-face,
+    .credit-card-back-face {
+        max-height: 200px;
+        min-height: 200px;
+    }
+
+    .credit-card-qr-code-container {
+        margin: 0;
+        padding: 0;
+    }
+
+    .lc-line-clamp {
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+    }
+}
+
+@media (max-width: 320px) {
+    .credit-card-front-face,
+    .credit-card-back-face {
+        max-height: 200px;
+        min-height: 200px;
+    }
+
+    .credit-card-front-face-title {
+        font-size: 9px;
+    }
+
+    .credit-card-bubble {
+        width: 58%;
+    }
+
+    .credit-card-master-card-logo {
+        bottom: -15px;
+    }
+
+    .credit-card-qr-code-container {
+        padding-left: 15px;
+        padding-right: 15px;
+    }
+
+    .vc-display-card-full-container {
+        padding-left: 15px;
+        padding-right: 15px;
+        padding-top: 15px;
+        height: 100%;
+    }
+
+    .lc-line-clamp {
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+    }
+}
+
+@media (max-width: 200px) {
+    .vc-thumbnail-container::before,
+    .vc-thumbnail-alt-container::before {
+        height: 68%;
+    }
+}
+
+.achievement-placeholder-trophy {
+    width: 100%;
+    height: 100%;
+    max-width: 85px;
+}
+
+.vc-display-card {
+    font-family: 'Mouse Memoirs';
+}
+
+.vc-toggle-side-button {
+    background-color: #00000099;
+}
+
+/* Mouse Memoirs */
+/* latin */
+@font-face {
+    font-family: 'Mouse Memoirs';
+    font-style: normal;
+    font-weight: 400;
+    font-display: swap;
+    src: url(https://fonts.gstatic.com/s/mousememoirs/v13/t5tmIRoSNJ-PH0WNNgDYxdSb3T7Prw.woff2)
+        format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
+        U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* latin-ext */
+@font-face {
+    font-family: 'Mouse Memoirs';
+    font-style: normal;
+    font-weight: 400;
+    font-display: swap;
+    src: url(https://fonts.gstatic.com/s/mousememoirs/v13/t5tmIRoSNJ-PH0WNNgDYxdSb3TDPr6OH.woff2)
+        format('woff2');
+    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113,
+        U+2C60-2C7F, U+A720-A7FF;
+}
+
+/* Montserrat (removed cyrillic-ext, cyrillic, vietnamese) */
+/* latin-ext */
+@font-face {
+    font-family: 'Montserrat';
+    font-style: normal;
+    font-weight: 100 900;
+    font-display: swap;
+    src: url(https://fonts.gstatic.com/s/montserrat/v25/JTUSjIg1_i6t8kCHKm459Wdhyzbi.woff2)
+        format('woff2');
+    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113,
+        U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+    font-family: 'Montserrat';
+    font-style: normal;
+    font-weight: 100 900;
+    font-display: swap;
+    src: url(https://fonts.gstatic.com/s/montserrat/v25/JTUSjIg1_i6t8kCHKm459Wlhyw.woff2)
+        format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
+        U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+/* Poppins (removed devanagari and latin-ext)*/
+/* latin */
+@font-face {
+    font-family: 'Poppins';
+    font-style: normal;
+    font-weight: 300;
+    font-display: swap;
+    src: url(https://fonts.gstatic.com/s/poppins/v20/pxiByp8kv8JHgFVrLDz8Z1xlFQ.woff2)
+        format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
+        U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+/* latin */
+@font-face {
+    font-family: 'Jacques Francois';
+    font-style: normal;
+    font-weight: 400;
+    font-display: swap;
+    src: url(https://fonts.gstatic.com/s/jacquesfrancois/v24/ZXu9e04ZvKeOOHIe1TMahbcIU2cgqcTgoA.woff2)
+        format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
+        U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF,
+        U+FFFD;
+}
+
+/* latin */
+@font-face {
+    font-family: 'Sacramento';
+    font-style: normal;
+    font-weight: 400;
+    font-display: swap;
+    src: url(https://fonts.gstatic.com/s/sacramento/v15/buEzpo6gcdjy0EiZMBUG4C0f_Q.woff2)
+        format('woff2');
+    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
+        U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF,
+        U+FFFD;
+}
+
+/* latin-ext */
+@font-face {
+    font-family: 'Sacramento';
+    font-style: normal;
+    font-weight: 400;
+    font-display: swap;
+    src: url(https://fonts.gstatic.com/s/sacramento/v15/buEzpo6gcdjy0EiZMBUG4CMf_exL.woff2)
+        format('woff2');
+    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
+        U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}

package/src/components/AchievementCard/AchievementCard.stories.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { Story, Meta } from '@storybook/react';
+import AchievementCard from './AchievementCard';
+
+import { AchievementCardProps } from '../../types';
+
+export default {
+    title: 'Achievement Display Card',
+    component: AchievementCard,
+    argTypes: {},
+} as Meta<typeof AchievementCard>;
+
+const Template: Story<AchievementCardProps> = args => <AchievementCard {...args} />;
+
+export const AchievementCardTest = Template.bind({});
+AchievementCardTest.args = {
+    title: 'Learning History',
+    thumbImgSrc: null,
+    showStatus: true,
+    showChecked: true,
+    checked: true,
+    claimStatus: true,
+    showSkills: true,
+    skillCount: 4,
+    onCheckClick: () => {
+        console.log('checkers');
+    },
+    onClick: () => {
+        console.log('//goodbye world');
+    },
+};

package/src/components/AchievementCard/AchievementCard.tsx

@@ -0,0 +1,88 @@
+import React from 'react';
+import { AchievementCardProps } from '../../types';
+import { RoundedPill } from '../RoundedPill';
+import { CircleCheckButton } from '../CircleCheckButton';
+import { Trophy } from '../svgs';
+import { TYPE_TO_MINI_ICON } from '../../constants';
+import { LCSubtypes } from '../../types';
+
+export const AchievementCard: React.FC<AchievementCardProps> = ({
+    title = 'Title Lorem Ipsum',
+    thumbImgSrc,
+    claimStatus,
+    showSkills = true,
+    showChecked,
+    checked,
+    skillCount,
+    showStatus = true,
+    onCheckClick,
+    onClick = () => {},
+}) => {
+    const thumbClass = thumbImgSrc ? 'bg-grayscale-50' : 'bg-indigo-200';
+
+    const claimBtnStatusType = claimStatus ? LCSubtypes.achievement : LCSubtypes.locked;
+    const skillIconSrc = TYPE_TO_MINI_ICON[LCSubtypes.skill];
+    const skillCountTxt = skillCount && skillCount > 1 ? 'Skills' : 'Skill';
+    const showSkillCounter = showSkills && skillCount !== 0;
+
+    return (
+        <div
+            className={`flex-col shadow-[0_0_8px_0px_rgba(0,0,0,0.2)] relative $ py-[8px] px-[8px] w-[190px] h-[285px] rounded-[20px] rounded-square-card-container`}
+        >
+            <section
+                className={`relative flex h-[120px] ${thumbClass} flex-col justify-center items-center w-full rounded-[20px]`}
+            >
+                {thumbImgSrc && (
+                    <img
+                        className="h-full w-full object-cover rounded-[20px]"
+                        src={thumbImgSrc ?? ''}
+                        alt="Credential Achievement Image"
+                    />
+                )}
+                {(!thumbImgSrc || thumbImgSrc === '') && (
+                    <Trophy
+                        className="achievement-placeholder-trophy flex p-[15px]"
+                        color="#ffffff"
+                    />
+                )}
+
+                {showSkills && showSkillCounter && (
+                    <div className="absolute px-[10px] text-[14px] flex items-center justify-center text-indigo-600 skill-pill font-bold min-w-[100px] bottom-[10px] right-[9px] rounded-[20px] h-[30px] bg-indigo-50 ">
+                        <img
+                            src={skillIconSrc}
+                            className="flex items-center justify-center mr-[4px]"
+                        />
+                        +{skillCount} {skillCountTxt}
+                    </div>
+                )}
+
+                {showChecked && (
+                    <CircleCheckButton
+                        checked={checked}
+                        onClick={onCheckClick}
+                        className="absolute top-[5px] left-[5px]"
+                    />
+                )}
+            </section>
+
+            <section className="achievement-title w-full flex justify-center line-clamp-2">
+                <p className="text-[14px] text-grayscale-900 font-bold mt-[10px] text-center">
+                    {title}
+                </p>
+            </section>
+
+            <section className="achievement-card-footer absolute bottom-[6px] left-[5px]">
+                {showStatus && (
+                    <RoundedPill
+                        onClick={onClick}
+                        showCheckmark
+                        type={claimBtnStatusType}
+                        statusText={'Claimed'}
+                    />
+                )}
+            </section>
+        </div>
+    );
+};
+
+export default AchievementCard;

package/src/components/AchievementCard/index.ts

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

package/src/components/BadgeThumbnailImg/BadgeThumbnailImg.test.tsx

@@ -0,0 +1,47 @@
+// @vitest-environment jsdom
+
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react';
+import { describe, expect, test } from 'vitest';
+
+import BadgeThumbnailImg from './BadgeThumbnailImg';
+
+describe('BadgeThumbnailImg (react-learn-card) broken-image fallback', () => {
+    test('renders the image when a valid src is provided', () => {
+        const { container, queryByTestId } = render(
+            <BadgeThumbnailImg src="https://example.com/badge.png" />
+        );
+
+        const img = container.querySelector('img');
+        expect(img).not.toBeNull();
+        expect(img?.className).toContain('bg-white');
+        expect(queryByTestId('badge-thumbnail-placeholder')).toBeNull();
+    });
+
+    test('shows the placeholder glyph when the image fails to load (404)', () => {
+        const { container, queryByTestId } = render(
+            <BadgeThumbnailImg src="https://example.com/broken.png" />
+        );
+
+        fireEvent.error(container.querySelector('img')!);
+
+        expect(container.querySelector('img')).toBeNull();
+        expect(queryByTestId('badge-thumbnail-placeholder')).not.toBeNull();
+    });
+
+    test('shows the placeholder glyph immediately when src is empty', () => {
+        const { queryByTestId } = render(<BadgeThumbnailImg src="" />);
+
+        expect(queryByTestId('badge-thumbnail-placeholder')).not.toBeNull();
+    });
+
+    test('applies a custom placeholder color class', () => {
+        const { queryByTestId } = render(
+            <BadgeThumbnailImg src="" placeholderClassName="text-white" />
+        );
+
+        expect(queryByTestId('badge-thumbnail-placeholder')?.getAttribute('class')).toContain(
+            'text-white'
+        );
+    });
+});