@learncard/react 2.7.0 → 2.7.2

package/dist/cjs/{BoostGenericCard-924e41e7.js → BoostGenericCard-a5ca50df.js}

@@ -26,7 +26,8 @@ const BoostGenericCard = ({
   bgImgSrc,
   issuerName,
   dateDisplay,
-  optionsTriggerOnClick
+  optionsTriggerOnClick,
+  verifierBadge
 }) => {
   var _a;
   const thumbClass = (_a = `bg-${index$1.TYPE_TO_WALLET_DARK_COLOR[type]}`) != null ? _a : "bg-grayscale-50";
@@ -73,11 +74,13 @@ const BoostGenericCard = ({
     className: "relative z-[100] small-boost-title text-[16px] leading-[130%] px-[0px] font-medium text-center text-grayscale-900 line-clamp-2 max-w-full"
   }, title)), /* @__PURE__ */ React__default["default"].createElement("section", {
     className: "small-generic-boost-card-footer flex flex-col justify-center items-center absolute bottom-[15px] w-full"
+  }, /* @__PURE__ */ React__default["default"].createElement("div", {
+    className: "flex items-center justify-center small-generic-boost-issuer-name text-[12px] text-grayscale-700 font-bold px-[6px]"
   }, /* @__PURE__ */ React__default["default"].createElement("span", {
-    className: "flex items-center justify-center small-generic-boost-issuer-name line-clamp-1 text-[12px] text-grayscale-700 font-bold px-[6px]"
-  }, "by ", issuerName), /* @__PURE__ */ React__default["default"].createElement("p", {
+    className: "line-clamp-1"
+  }, "by ", issuerName)), /* @__PURE__ */ React__default["default"].createElement("p", {
     className: "small-generic-boost-date-display line-clamp-1 text-[12px] text-grayscale-700  px-[7px]"
-  }, dateDisplay)), showChecked && /* @__PURE__ */ React__default["default"].createElement("div", {
+  }, dateDisplay), verifierBadge), showChecked && /* @__PURE__ */ React__default["default"].createElement("div", {
     className: "check-btn-overlay absolute top-[5px] left-[5px]"
   }, /* @__PURE__ */ React__default["default"].createElement(CircleCheckButton.CircleCheckButton, {
     checked: checkStatus,
@@ -87,4 +90,4 @@ const BoostGenericCard = ({
 };
 
 exports.BoostGenericCard = BoostGenericCard;
-//# sourceMappingURL=BoostGenericCard-924e41e7.js.map
+//# sourceMappingURL=BoostGenericCard-a5ca50df.js.map

package/dist/cjs/BoostGenericCard-a5ca50df.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BoostGenericCard-a5ca50df.js","sources":["../../src/components/BoostGenericCard/BoostGenericCard.tsx"],"sourcesContent":["import React from 'react';\nimport { BoostGenericCardProps, WalletCategoryTypes } from '../../types';\nimport { TYPE_TO_IMG_SRC, TYPE_TO_WALLET_DARK_COLOR } from '../../constants';\nimport { CircleCheckButton } from '../CircleCheckButton';\nimport CaretRightFilled from '../../assets/images/CaretRightFilled.svg';\nimport DefaultFace from '../../assets/images/default-face.jpeg';\nimport AddAwardLight from '../../assets/images/addawardlight.svg';\nimport ThreeDots from '../../assets/images/DotsThreeOutline.svg';\n\nexport const BoostGenericCard: React.FC<BoostGenericCardProps> = ({\n    title,\n    thumbImgSrc,\n    customThumbClass = '',\n    customHeaderClass = '',\n    type = WalletCategoryTypes.achievements,\n    className,\n    onCheckClick,\n    showChecked,\n    checkStatus,\n    customThumbComponent,\n    innerOnClick,\n    bgImgSrc,\n    issuerName,\n    dateDisplay,\n    optionsTriggerOnClick,\n    verifierBadge,\n}) => {\n    const thumbClass = `bg-${TYPE_TO_WALLET_DARK_COLOR[type]}` ?? 'bg-grayscale-50';\n    const defaultThumbClass = `small-boost-card-thumb flex h-[110px] w-[110px] my-[10px] mx-auto ${thumbClass} overflow-hidden flex-col justify-center items-center rounded-full ${customThumbClass}`;\n    const imgSrc = thumbImgSrc?.trim() !== '' ? thumbImgSrc : TYPE_TO_IMG_SRC[type];\n    const headerBgColor = `bg-${TYPE_TO_WALLET_DARK_COLOR[type]}` ?? 'bg-grayscale-900';\n    const checkBtnClass = checkStatus ? 'generic-vc-card checked' : 'generic-vc-card unchecked';\n    const defaultHeaderClass = `flex generic-card-title w-full justify-center ${customHeaderClass}`;\n\n    const handleInnerClick = () => {\n        innerOnClick?.();\n    };\n\n    const handleOptionsClick = () => {\n        optionsTriggerOnClick?.();\n    };\n\n    return (\n        <div\n            className={`flex generic-display-card-simple bg-white flex-col shadow-bottom relative $ py-[0px] px-[0px] w-[160px] h-[250px] rounded-[20px] overflow-hidden ${className}`}\n        >\n            {optionsTriggerOnClick && (\n                <section\n                    className=\"absolute cursor-pointer shadow-bottom h-[30px] w-[30px] top-[5px] right-[5px] rounded-full overflow-hidden z-20 bg-white flex items-center justify-center\"\n                    onClick={handleOptionsClick}\n                >\n                    <img\n                        alt=\"Menu dropdown icon\"\n                        className=\"h-[20px] w-[20px] object-cover overflow-hidden\"\n                        src={ThreeDots}\n                    />\n                </section>\n            )}\n\n            {bgImgSrc && (\n                <section className=\"absolute top-[-50px] shadow-bottom left-[0px] rounded-b-full overflow-hidden z-0 mt-3\">\n                    <img className=\"h-full w-full object-cover overflow-hidden\" src={bgImgSrc} />\n                </section>\n            )}\n            <button\n                type=\"button\"\n                className=\"boost-small-card inner-click-container z-10\"\n                onClick={handleInnerClick}\n            >\n                {customThumbComponent && customThumbComponent}\n                {!customThumbComponent && (\n                    <section className={defaultThumbClass}>\n                        {thumbImgSrc && thumbImgSrc?.trim() !== '' && (\n                            <img\n                                className=\"generic-display-card-img h-full w-full  w-[110px] h-[110px] rounded-full object-cover overflow-hidden\"\n                                src={thumbImgSrc ?? ''}\n                                alt=\"Credential Achievement Image\"\n                            />\n                        )}\n                        {(!thumbImgSrc || thumbImgSrc?.trim() === '') && (\n                            <img\n                                className=\"max-w-[110px] w-full h-full p-[0px] object-cover rounded-full\"\n                                src={imgSrc}\n                            />\n                        )}\n                    </section>\n                )}\n\n                <section className={`${defaultHeaderClass} items-center`}>\n                    <p className=\"relative z-[100] small-boost-title text-[16px] leading-[130%] px-[0px] font-medium text-center text-grayscale-900 line-clamp-2 max-w-full\">\n                        {title}\n                    </p>\n                </section>\n\n                <section className=\"small-generic-boost-card-footer flex flex-col justify-center items-center absolute bottom-[15px] w-full\">\n                    <div className=\"flex items-center justify-center small-generic-boost-issuer-name text-[12px] text-grayscale-700 font-bold px-[6px]\">\n                        <span className=\"line-clamp-1\">by {issuerName}</span>\n                    </div>\n                    <p className=\"small-generic-boost-date-display line-clamp-1 text-[12px] text-grayscale-700  px-[7px]\">\n                        {dateDisplay}\n                    </p>\n                    {verifierBadge}\n                </section>\n                {showChecked && (\n                    <div className=\"check-btn-overlay absolute top-[5px] left-[5px]\">\n                        <CircleCheckButton\n                            checked={checkStatus}\n                            onClick={onCheckClick}\n                            className={checkBtnClass}\n                        />\n                    </div>\n                )}\n            </button>\n        </div>\n    );\n};\n\nexport default BoostGenericCard;\n"],"names":["WalletCategoryTypes","TYPE_TO_WALLET_DARK_COLOR","TYPE_TO_IMG_SRC","React","ThreeDots","CircleCheckButton"],"mappings":"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"}

package/dist/cjs/{CertificateDisplayCard-74de3c56.js → CertificateDisplayCard-8ded38ec.js}

@@ -845,12 +845,12 @@ const MediaAttachmentsBox = ({
       }, metadata.videoLength)));
     } else {
       innerContent = /* @__PURE__ */ React__default["default"].createElement("div", {
-        className: "h-full w-full"
+        className: "h-full w-full flex items-center justify-center"
       }, /* @__PURE__ */ React__default["default"].createElement("img", {
-        className: "rounded-[15px]",
+        className: "object-cover h-full w-full",
         src: media.url
       }), /* @__PURE__ */ React__default["default"].createElement(Camera, {
-        className: "relative bottom-[30px] left-[10px] z-10"
+        className: "absolute bottom-[10px] left-[10px] z-10"
       }));
     }
     const className = `media-attachment ${media.type} w-[49%] pt-[49%] overflow-hidden relative`;
@@ -859,7 +859,7 @@ const MediaAttachmentsBox = ({
         key: index,
         className: "flex bg-grayscale-100 items-center rounded-[15px] w-full"
       }, /* @__PURE__ */ React__default["default"].createElement("button", {
-        className: "h-[80px] w-[80px] rounded-[15px]",
+        className: "h-[80px] w-[80px] rounded-[15px] overflow-hidden flex-shrink-0",
         onClick: (e) => {
           e.stopPropagation();
           handleMediaAttachmentClick(media.url, media.type);
@@ -2945,6 +2945,20 @@ const VERIFIER_STATES = {
   unknownVerifier: "Unknown Verifier",
   untrustedVerifier: "Untrusted Verifier"
 };
+const VerifierStateBadgeAndText = ({ verifierState }) => {
+  return /* @__PURE__ */ React__default["default"].createElement("div", {
+    className: "flex justify-center"
+  }, verifierState === VERIFIER_STATES.selfVerified && /* @__PURE__ */ React__default["default"].createElement("span", {
+    className: "uppercase font-poppins text-[12px] font-[500] text-green-dark flex gap-[3px] items-center"
+  }, /* @__PURE__ */ React__default["default"].createElement(PersonBadge, null), "Self Verified"), verifierState === VERIFIER_STATES.trustedVerifier && /* @__PURE__ */ React__default["default"].createElement("span", {
+    className: "uppercase font-poppins text-[12px] font-[500] text-blue-light flex gap-[3px] items-center"
+  }, /* @__PURE__ */ React__default["default"].createElement(VerifiedBadge, null), "Trusted Verifier"), verifierState === VERIFIER_STATES.unknownVerifier && /* @__PURE__ */ React__default["default"].createElement("span", {
+    className: "uppercase font-poppins text-[12px] font-[500] text-orange-500 flex gap-[3px] items-center"
+  }, /* @__PURE__ */ React__default["default"].createElement(UnknownVerifierBadge, null), "Unknown Verifier"), verifierState === VERIFIER_STATES.untrustedVerifier && /* @__PURE__ */ React__default["default"].createElement("span", {
+    className: "uppercase font-poppins text-[12px] font-[500] text-red-mastercard flex gap-[3px] items-center"
+  }, /* @__PURE__ */ React__default["default"].createElement(RedFlag, null), "Untrusted Verifier"));
+};
+
 const CertificateFrontFace = ({
   isFront,
   credential,
@@ -3061,15 +3075,9 @@ const CertificateFrontFace = ({
     className: "font-jacques text-[12px] text-grayscale-800"
   }, "Certified by"), /* @__PURE__ */ React__default["default"].createElement("span", {
     className: "mb-[3px] pt-[3px] text-grayscale-900 text-[25px] leading-[90%] font-sacramento border-b-[1px] border-solid border-grayscale-200 w-full text-center overflow-ellipsis whitespace-nowrap overflow-x-hidden overflow-y-visible scrollbar-hide"
-  }, issuerName), isSelfVerified && /* @__PURE__ */ React__default["default"].createElement("span", {
-    className: "uppercase font-poppins text-[12px] font-[500] text-green-dark flex gap-[3px] items-center"
-  }, /* @__PURE__ */ React__default["default"].createElement(PersonBadge, null), "Self Verified"), verifierState === VERIFIER_STATES.trustedVerifier && /* @__PURE__ */ React__default["default"].createElement("span", {
-    className: "uppercase font-poppins text-[12px] font-[500] text-blue-light flex gap-[3px] items-center"
-  }, /* @__PURE__ */ React__default["default"].createElement(VerifiedBadge, null), "Trusted Verifier"), verifierState === VERIFIER_STATES.unknownVerifier && /* @__PURE__ */ React__default["default"].createElement("span", {
-    className: "uppercase font-poppins text-[12px] font-[500] text-orange-500 flex gap-[3px] items-center"
-  }, /* @__PURE__ */ React__default["default"].createElement(UnknownVerifierBadge, null), "Unknown Verifier"), verifierState === VERIFIER_STATES.untrustedVerifier && /* @__PURE__ */ React__default["default"].createElement("span", {
-    className: "uppercase font-poppins text-[12px] font-[500] text-red-mastercard flex gap-[3px] items-center"
-  }, /* @__PURE__ */ React__default["default"].createElement(RedFlag, null), "Untrusted Verifier"))), categoryType && /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, /* @__PURE__ */ React__default["default"].createElement(CertificateCornerIcon, {
+  }, issuerName), /* @__PURE__ */ React__default["default"].createElement(VerifierStateBadgeAndText, {
+    verifierState
+  }))), categoryType && /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, /* @__PURE__ */ React__default["default"].createElement(CertificateCornerIcon, {
     categoryType,
     position: "top-left"
   }), /* @__PURE__ */ React__default["default"].createElement(CertificateCornerIcon, {
@@ -3187,11 +3195,13 @@ exports.RedFlag = RedFlag;
 exports.SelectedSkills = SelectedSkills;
 exports.SkillsBox = SkillsBox;
 exports.UnknownVerifierBadge = UnknownVerifierBadge;
+exports.VERIFIER_STATES = VERIFIER_STATES;
 exports.VerifiedBadge = VerifiedBadge;
+exports.VerifierStateBadgeAndText = VerifierStateBadgeAndText;
 exports.VideoIcon = VideoIcon;
 exports.X = X;
 exports.capitalize = capitalize;
 exports.getBaseUrl = getBaseUrl;
 exports.prettyBytes = prettyBytes;
 exports.truncateWithEllipsis = truncateWithEllipsis;
-//# sourceMappingURL=CertificateDisplayCard-74de3c56.js.map
+//# sourceMappingURL=CertificateDisplayCard-8ded38ec.js.map