@learncard/react 2.4.0 → 2.5.1

package/dist/esm/BoostSmallCard-0f4fec3b.js

@@ -0,0 +1,101 @@
+import React from 'react';
+import { W as WalletCategoryTypes } from './index-52cf2d17.js';
+import { a as TYPE_TO_IMG_SRC, b as TYPE_TO_WALLET_DARK_COLOR } from './index-ac32d7be.js';
+import CaretRightFilled from './CaretRightFilled.svg';
+import DefaultFace from './default-face.jpeg';
+import AddAwardLight from './addawardlight.svg';
+import { C as CircleCheckButton } from './CircleCheckButton-3bad7847.js';
+
+const BoostSmallCard = ({
+  title = "Title Lorem Ipsum",
+  thumbImgSrc,
+  customThumbClass = "",
+  customHeaderClass = "",
+  type = WalletCategoryTypes.achievements,
+  className,
+  onCheckClick,
+  showChecked,
+  checkStatus,
+  arrowOnClick,
+  buttonOnClick,
+  customButtonComponent,
+  customBodyClass,
+  customBodyComponent,
+  customThumbComponent,
+  innerOnClick,
+  issueHistory
+}) => {
+  var _a, _b, _c;
+  const thumbClass = (_a = `bg-${TYPE_TO_WALLET_DARK_COLOR[type]}`) != null ? _a : "bg-grayscale-50";
+  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}`;
+  const imgSrc = (thumbImgSrc == null ? void 0 : thumbImgSrc.trim()) !== "" ? thumbImgSrc : TYPE_TO_IMG_SRC[type];
+  const headerBgColor = (_b = `bg-${TYPE_TO_WALLET_DARK_COLOR[type]}`) != null ? _b : "bg-grayscale-900";
+  const checkBtnClass = checkStatus ? "generic-vc-card checked" : "generic-vc-card unchecked";
+  const defaultHeaderClass = `flex generic-card-title w-full justify-center ${customHeaderClass}`;
+  const defaultBodyClass = ` boost-small-card-body flex justify-center items-center text-center text-[14px] overflow-hidden text-grayscale-500 p-[10px] ${customBodyClass}`;
+  const defaultButtonClass = `small-boost-boost-btn flex shadow-bottom boost-btn-click rounded-[40px] w-[140px] h-[48px] text-white flex justify-center items-center ${headerBgColor}`;
+  const issueHistoryDisplay = (issueHistory == null ? void 0 : issueHistory.length) > 3 ? issueHistory == null ? void 0 : issueHistory.slice(0, 3) : issueHistory;
+  const renderIssueHistory = issueHistoryDisplay == null ? void 0 : issueHistoryDisplay.map((issueItem) => {
+    return /* @__PURE__ */ React.createElement("div", {
+      key: issueItem == null ? void 0 : issueItem.id,
+      className: "profile-thumb-img border-[2px] border-white border-solid  vc-issuee-image h-[35px] w-[35px] rounded-full overflow-hidden mx-[-5px]"
+    }, /* @__PURE__ */ React.createElement("img", {
+      className: "h-full w-full object-cover",
+      src: (issueItem == null ? void 0 : issueItem.thumb) || DefaultFace,
+      alt: "profile"
+    }));
+  });
+  const handleInnerClick = () => {
+    innerOnClick == null ? void 0 : innerOnClick();
+  };
+  return /* @__PURE__ */ React.createElement("div", {
+    className: `flex generic-display-card-simple bg-white flex-col shadow-[0_0_8px_0px_rgba(0,0,0,0.2)] relative $ py-[0px] px-[0px] w-[160px] h-[280px] rounded-[20px] overflow-hidden ${className}`
+  }, /* @__PURE__ */ React.createElement("div", {
+    className: "boost-small-card inner-click-container",
+    onClick: handleInnerClick
+  }, customThumbComponent && customThumbComponent, !customThumbComponent && /* @__PURE__ */ React.createElement("section", {
+    className: defaultThumbClass
+  }, thumbImgSrc && (thumbImgSrc == null ? void 0 : thumbImgSrc.trim()) !== "" && /* @__PURE__ */ React.createElement("img", {
+    className: "generic-display-card-img h-full w-full  w-[110px] h-[110px] rounded-full object-cover overflow-hidden",
+    src: thumbImgSrc != null ? thumbImgSrc : "",
+    alt: "Credential Achievement Image"
+  }), (!thumbImgSrc || (thumbImgSrc == null ? void 0 : thumbImgSrc.trim()) === "") && /* @__PURE__ */ React.createElement("img", {
+    className: "max-w-[110px] w-full h-full p-[0px] object-cover rounded-full",
+    src: imgSrc
+  })), /* @__PURE__ */ React.createElement("section", {
+    className: defaultHeaderClass
+  }, /* @__PURE__ */ React.createElement("p", {
+    className: "relative z-[100] small-boost-title text-[14px] p-[0px] font-bold text-center line-clamp-2"
+  }, title)), /* @__PURE__ */ React.createElement("section", {
+    className: defaultBodyClass
+  }, customBodyComponent && customBodyComponent, !customBodyComponent && issueHistory && (issueHistory == null ? void 0 : issueHistory.length) > 0 && renderIssueHistory, !customBodyComponent && (issueHistory == null ? void 0 : issueHistory.length) > 3 && /* @__PURE__ */ React.createElement("span", {
+    className: "small-boost-issue-count ml-[10px] font-semibold"
+  }, "+", (issueHistory == null ? void 0 : issueHistory.length) - 3)), /* @__PURE__ */ React.createElement("section", {
+    className: "small-boost-card-footer flex justify-center items-center absolute bottom-[15px] w-full"
+  }, customButtonComponent && customButtonComponent, !customButtonComponent && /* @__PURE__ */ React.createElement("div", {
+    onClick: buttonOnClick,
+    className: defaultButtonClass
+  }, /* @__PURE__ */ React.createElement("img", {
+    className: "h-[25px] mr-[7px] text-",
+    src: AddAwardLight
+  }), /* @__PURE__ */ React.createElement("span", {
+    className: "font-mouse text-[25px] tracking-wider"
+  }, "BOOST!"))), showChecked && /* @__PURE__ */ React.createElement("div", {
+    className: "check-btn-overlay absolute top-[5px] left-[5px]"
+  }, /* @__PURE__ */ React.createElement(CircleCheckButton, {
+    checked: checkStatus,
+    onClick: onCheckClick,
+    className: checkBtnClass
+  }))), arrowOnClick && /* @__PURE__ */ React.createElement("button", {
+    type: "button",
+    onClick: arrowOnClick,
+    className: "arrow-btn-overlay absolute top-[52px] right-[2px]"
+  }, /* @__PURE__ */ React.createElement("img", {
+    className: "h-full w-full object-contai",
+    src: (_c = CaretRightFilled) != null ? _c : "",
+    alt: "Right Caret"
+  })));
+};
+
+export { BoostSmallCard as B };
+//# sourceMappingURL=BoostSmallCard-0f4fec3b.js.map

package/dist/esm/BoostSmallCard-0f4fec3b.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BoostSmallCard-0f4fec3b.js","sources":["../../src/components/BoostSmallCard/BoostSmallCard.tsx"],"sourcesContent":["import React from 'react';\nimport { BoostSmallCardProps, 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';\n\nexport const BoostSmallCard: React.FC<BoostSmallCardProps> = ({\n    title = 'Title Lorem Ipsum',\n    thumbImgSrc,\n    customThumbClass = '',\n    customHeaderClass = '',\n    type = WalletCategoryTypes.achievements,\n    className,\n    onCheckClick,\n    showChecked,\n    checkStatus,\n    arrowOnClick,\n    buttonOnClick,\n    customButtonComponent,\n    customBodyClass,\n    customBodyComponent,\n    customThumbComponent,\n    innerOnClick,\n    issueHistory,\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    const defaultBodyClass = ` boost-small-card-body flex justify-center items-center text-center text-[14px] overflow-hidden text-grayscale-500 p-[10px] ${customBodyClass}`;\n    const defaultButtonClass = `small-boost-boost-btn flex shadow-bottom boost-btn-click rounded-[40px] w-[140px] h-[48px] text-white flex justify-center items-center ${headerBgColor}`;\n\n    const issueHistoryDisplay = issueHistory?.length > 3 ? issueHistory?.slice(0, 3) : issueHistory;\n    const renderIssueHistory = issueHistoryDisplay?.map(issueItem => {\n        return (\n            <div\n                key={issueItem?.id}\n                className=\"profile-thumb-img border-[2px] border-white border-solid  vc-issuee-image h-[35px] w-[35px] rounded-full overflow-hidden mx-[-5px]\"\n            >\n                <img\n                    className=\"h-full w-full object-cover\"\n                    src={issueItem?.thumb || DefaultFace}\n                    alt=\"profile\"\n                />\n            </div>\n        );\n    });\n\n    const handleInnerClick = () => {\n        innerOnClick?.();\n    };\n\n    return (\n        <div\n            className={`flex generic-display-card-simple bg-white flex-col shadow-[0_0_8px_0px_rgba(0,0,0,0.2)] relative $ py-[0px] px-[0px] w-[160px] h-[280px] rounded-[20px] overflow-hidden ${className}`}\n        >\n            <div className=\"boost-small-card inner-click-container\" onClick={handleInnerClick}>\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}>\n                    <p className=\"relative z-[100] small-boost-title text-[14px] p-[0px] font-bold text-center line-clamp-2\">\n                        {title}\n                    </p>\n                </section>\n\n                <section className={defaultBodyClass}>\n                    {customBodyComponent && customBodyComponent}\n                    {!customBodyComponent &&\n                        issueHistory &&\n                        issueHistory?.length > 0 &&\n                        renderIssueHistory}\n                    {!customBodyComponent && issueHistory?.length > 3 && (\n                        <span className=\"small-boost-issue-count ml-[10px] font-semibold\">\n                            +{issueHistory?.length - 3}\n                        </span>\n                    )}\n                </section>\n\n                <section className=\"small-boost-card-footer flex justify-center items-center absolute bottom-[15px] w-full\">\n                    {customButtonComponent && customButtonComponent}\n\n                    {!customButtonComponent && (\n                        <div onClick={buttonOnClick} className={defaultButtonClass}>\n                            <img className=\"h-[25px] mr-[7px] text-\" src={AddAwardLight} />\n                            <span className=\"font-mouse text-[25px] tracking-wider\">BOOST!</span>\n                        </div>\n                    )}\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            </div>\n            {arrowOnClick && (\n                <button\n                    type=\"button\"\n                    onClick={arrowOnClick}\n                    className=\"arrow-btn-overlay absolute top-[52px] right-[2px]\"\n                >\n                    <img\n                        className=\"h-full w-full object-contai\"\n                        src={CaretRightFilled ?? ''}\n                        alt=\"Right Caret\"\n                    />\n                </button>\n            )}\n        </div>\n    );\n};\n\nexport default BoostSmallCard;\n"],"names":[],"mappings":"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"}

package/dist/esm/CaretRightFilled.svg

@@ -0,0 +1,3 @@
+<svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M18.4899 12.4475L10.6774 4.63505C10.5682 4.52579 10.4289 4.45139 10.2774 4.42126C10.1258 4.39112 9.96877 4.40659 9.82602 4.46573C9.68326 4.52486 9.56125 4.625 9.47541 4.75347C9.38957 4.88195 9.34375 5.033 9.34375 5.18751V20.8125C9.34375 20.967 9.38957 21.1181 9.47542 21.2465C9.56126 21.375 9.68327 21.4752 9.82602 21.5343C9.96877 21.5934 10.1259 21.6089 10.2774 21.5788C10.4289 21.5486 10.5681 21.4742 10.6774 21.365L18.4899 13.5525C18.5625 13.4799 18.62 13.3938 18.6593 13.299C18.6986 13.2042 18.7188 13.1026 18.7188 13C18.7188 12.8974 18.6986 12.7958 18.6593 12.701C18.62 12.6062 18.5625 12.5201 18.4899 12.4475V12.4475Z" fill="#353E64"/>
+</svg>

package/dist/esm/{FlippyCard-f4f0b3f8.js → FlippyCard-a2de5cf1.js}

@@ -1,6 +1,6 @@
 import React from 'react';
 
-const FlippyCard = ({ children, flipState }) => {
+const FlippyCard = ({ children, flipState = "front" }) => {
   if ((children == null ? void 0 : children.length) > 3) {
     console.warn("More than two children passed into Flippy Card! \u{1F633}\u{1F633}\u{1F633} Picking first two...");
   }
@@ -25,4 +25,4 @@ const FlippyCard = ({ children, flipState }) => {
 };
 
 export { FlippyCard as F };
-//# sourceMappingURL=FlippyCard-f4f0b3f8.js.map
+//# sourceMappingURL=FlippyCard-a2de5cf1.js.map

package/dist/esm/FlippyCard-a2de5cf1.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FlippyCard-a2de5cf1.js","sources":["../../src/components/FlippyCard/FlippyCard.tsx"],"sourcesContent":["import React from 'react';\n\nexport type FlippyCardProps = {\n    children: React.ReactChild[];\n    flipState?: 'front' | 'back' | string;\n};\n\nexport const FlippyCard: React.FC<FlippyCardProps> = ({ children, flipState = 'front' }) => {\n    if (children?.length > 3) {\n        console.warn('More than two children passed into Flippy Card! 😳😳😳 Picking first two...');\n    }\n\n    if (!children) return <></>;\n\n    const frontCard = children?.[0] as React.ReactNode;\n    const backCard = (children?.[1] as React.ReactNode) || (children?.[0] as React.ReactNode);\n\n    const flipCardCSSClass = flipState === 'front' ? 'flippy-card' : 'flippy-card is-flipped';\n\n    return (\n        <div data-testid=\"flippy-card-wrapper\" className=\"flippy-wrapper-container\">\n            <div data-testid=\"flippy-card\" className={flipCardCSSClass}>\n                <section data-testid=\"flippy-card-front\" className=\"card-face card-face--front\">\n                    {frontCard}\n                </section>\n                <section data-testid=\"flippy-card-back\" className=\"card-face card-face--back\">\n                    {backCard}\n                </section>\n            </div>\n        </div>\n    );\n};\n\nexport default FlippyCard;\n"],"names":[],"mappings":";;AAOO,MAAM,aAAwC,CAAC,EAAE,QAAU,EAAA,SAAA,GAAY,SAAc,KAAA;AACxF,EAAI,IAAA,CAAA,QAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,QAAA,CAAU,UAAS,CAAG,EAAA;AACtB,IAAA,OAAA,CAAQ,KAAK,kGAA6E,CAAA,CAAA;AAAA,GAC9F;AAEA,EAAA,IAAI,CAAC,QAAA;AAAU,IAAA,uBAAS,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,CAAA,CAAA;AAExB,EAAA,MAAM,YAAY,QAAW,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,QAAA,CAAA,CAAA,CAAA,CAAA;AAC7B,EAAM,MAAA,QAAA,GAAA,CAAY,QAAW,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,QAAA,CAAA,CAAA,CAAA,MAA2B,QAAW,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,QAAA,CAAA,CAAA,CAAA,CAAA,CAAA;AAEnE,EAAM,MAAA,gBAAA,GAAmB,SAAc,KAAA,OAAA,GAAU,aAAgB,GAAA,wBAAA,CAAA;AAEjE,EAAA,uBACK,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,IAAI,aAAY,EAAA,qBAAA;AAAA,IAAsB,SAAU,EAAA,0BAAA;AAAA,GAAA,kBAC5C,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,IAAI,aAAY,EAAA,aAAA;AAAA,IAAc,SAAW,EAAA,gBAAA;AAAA,GAAA,kBACrC,KAAA,CAAA,aAAA,CAAA,SAAA,EAAA;AAAA,IAAQ,aAAY,EAAA,mBAAA;AAAA,IAAoB,SAAU,EAAA,4BAAA;AAAA,GAC9C,EAAA,SACL,mBACC,KAAA,CAAA,aAAA,CAAA,SAAA,EAAA;AAAA,IAAQ,aAAY,EAAA,kBAAA;AAAA,IAAmB,SAAU,EAAA,2BAAA;AAAA,GAC7C,EAAA,QACL,CACJ,CACJ,CAAA,CAAA;AAER;;;;"}

package/dist/esm/{GenericCard-446f46e0.js → GenericCard-c2d91e3c.js}

@@ -1,6 +1,6 @@
 import React from 'react';
 import { W as WalletCategoryTypes } from './index-52cf2d17.js';
-import { a as TYPE_TO_IMG_SRC, b as TYPE_TO_WALLET_DARK_COLOR } from './index-ac32d7be.js';
+import { b as TYPE_TO_WALLET_DARK_COLOR, a as TYPE_TO_IMG_SRC } from './index-ac32d7be.js';
 import { C as CircleCheckButton } from './CircleCheckButton-3bad7847.js';
 
 const GenericCard = ({
@@ -24,7 +24,7 @@ const GenericCard = ({
   const checkBtnClass = checkStatus ? "generic-vc-card checked" : "generic-vc-card unchecked";
   const defaultHeaderClass = `flex generic-card-title w-full flex justify-center items-center  h-[76px] ${headerBgColor} ${customHeaderClass}`;
   const flippedClass = flipped ? "flex-col-reverse" : "flex-col";
-  return /* @__PURE__ */ React.createElement("button", {
+  return /* @__PURE__ */ React.createElement("div", {
     onClick,
     className: `flex generic-display-card-simple bg-white ${flippedClass} 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}`
   }, /* @__PURE__ */ React.createElement("section", {
@@ -52,4 +52,4 @@ const GenericCard = ({
 };
 
 export { GenericCard as G };
-//# sourceMappingURL=GenericCard-446f46e0.js.map
+//# sourceMappingURL=GenericCard-c2d91e3c.js.map

package/dist/esm/GenericCard-c2d91e3c.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GenericCard-c2d91e3c.js","sources":["../../src/components/GenericCard/GenericCard.tsx"],"sourcesContent":["import React from 'react';\nimport { GenericCardProps, WalletCategoryTypes } from '../../types';\nimport { TYPE_TO_IMG_SRC, TYPE_TO_WALLET_DARK_COLOR } from '../../constants';\nimport { CircleCheckButton } from '../CircleCheckButton';\n\nexport const GenericCard: React.FC<GenericCardProps> = ({\n    title = 'Title Lorem Ipsum',\n    thumbImgSrc,\n    customThumbClass = '',\n    customHeaderClass = '',\n    type = WalletCategoryTypes.achievements,\n    className,\n    onClick = () => {},\n    showChecked,\n    checkStatus,\n    flipped,\n}) => {\n    const thumbClass = `bg-${TYPE_TO_WALLET_DARK_COLOR[type]}` ?? 'bg-grayscale-50';\n    const defaultThumbClass = `flex h-[110px] m-auto ${thumbClass} w-[140px] overflow-hidden flex-col justify-center items-center w-full rounded-[20px] ${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 flex justify-center items-center  h-[76px] ${headerBgColor} ${customHeaderClass}`;\n    const flippedClass = flipped ? 'flex-col-reverse' : 'flex-col';\n\n    return (\n        <div\n            onClick={onClick}\n            className={`flex generic-display-card-simple bg-white ${flippedClass} 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}`}\n        >\n            <section className={defaultHeaderClass}>\n                <p className=\"relative z-[100] text-[14px] px-[10px] py-[0px] font-bold mt-[10px] text-center text-white line-clamp-2\">\n                    {title}\n                </p>\n            </section>\n\n            <section className={defaultThumbClass}>\n                {thumbImgSrc && thumbImgSrc?.trim() !== '' && (\n                    <img\n                        className=\"generic-display-card-img h-full w-full  w-[140px] h-[119px] rounded-[20px] object-cover overflow-hidden\"\n                        src={thumbImgSrc ?? ''}\n                        alt=\"Credential Achievement Image\"\n                    />\n                )}\n                {(!thumbImgSrc || thumbImgSrc?.trim() === '') && (\n                    <img\n                        className=\"max-w-[130px] w-full h-full p-[10px] object-contain\"\n                        src={imgSrc}\n                    />\n                )}\n            </section>\n\n            <section className=\"generic-card-footer\"></section>\n            {showChecked && (\n                <div className=\"check-btn-overlay absolute top-[5px] left-[5px]\">\n                    <CircleCheckButton\n                        checked={checkStatus}\n                        onClick={onClick}\n                        className={checkBtnClass}\n                    />\n                </div>\n            )}\n        </div>\n    );\n};\n\nexport default GenericCard;\n"],"names":[],"mappings":"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"}

package/dist/esm/{Notification-ac50790d.js → Notification-60c43061.js}

@@ -1,6 +1,7 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { T as Trophy } from './Trophy-702610b8.js';
 import { a as Coins, U as User, L as Lightbulb, B as Briefcase, G as Graduation, C as Checkmark } from './User-d3aa7eb3.js';
+import { A as AwardRibbon } from './AwardRibbon-3e682281.js';
 
 var NotificationTypeEnum = /* @__PURE__ */ ((NotificationTypeEnum2) => {
   NotificationTypeEnum2["Currency"] = "currency";
@@ -9,6 +10,7 @@ var NotificationTypeEnum = /* @__PURE__ */ ((NotificationTypeEnum2) => {
   NotificationTypeEnum2["Skill"] = "skill";
   NotificationTypeEnum2["Job"] = "job";
   NotificationTypeEnum2["Learning"] = "learning";
+  NotificationTypeEnum2["SocialBadges"] = "socialBadge";
   return NotificationTypeEnum2;
 })(NotificationTypeEnum || {});
 
@@ -19,7 +21,17 @@ const NotificationTypeStyles = {
     claimedButtonStyles: "text-cyan-600 bg-cyan-50 border-cyan-50",
     textStyles: "text-cyan-600 capitalize",
     iconCircleStyles: "bg-cyan-600",
-    IconComponent: Coins
+    IconComponent: Coins,
+    typeText: "Currency"
+  },
+  [NotificationTypeEnum.SocialBadges]: {
+    viewButtonStyles: "border-cyan-600 text-cyan-600",
+    unclaimedButtonStyles: "text-white bg-cyan-600 border-cyan-600",
+    claimedButtonStyles: "text-cyan-600 bg-cyan-50 border-cyan-50",
+    textStyles: "text-cyan-600 capitalize",
+    iconCircleStyles: "bg-cyan-600",
+    IconComponent: AwardRibbon,
+    typeText: "Social Badge"
   },
   [NotificationTypeEnum.ID]: {
     viewButtonStyles: "border-yellow-400 text-yellow-400",
@@ -27,7 +39,8 @@ const NotificationTypeStyles = {
     claimedButtonStyles: "text-yellow-400 bg-yellow-50 border-yellow-50",
     textStyles: "text-yellow-400 uppercase",
     iconCircleStyles: "bg-yellow-400",
-    IconComponent: User
+    IconComponent: User,
+    typeText: "ID"
   },
   [NotificationTypeEnum.Achievement]: {
     viewButtonStyles: "border-spice-400 text-spice-400",
@@ -35,7 +48,8 @@ const NotificationTypeStyles = {
     claimedButtonStyles: "text-spice-400 bg-spice-50 border-spice-50",
     textStyles: "text-spice-400 capitalize",
     iconCircleStyles: "bg-spice-400",
-    IconComponent: Trophy
+    IconComponent: Trophy,
+    typeText: "Achievement"
   },
   [NotificationTypeEnum.Skill]: {
     viewButtonStyles: "border-indigo-400 text-indigo-400",
@@ -43,7 +57,8 @@ const NotificationTypeStyles = {
     claimedButtonStyles: "text-indigo-400 bg-indigo-50 border-indigo-50",
     textStyles: "text-indigo-400 capitalize",
     iconCircleStyles: "bg-indigo-400",
-    IconComponent: Lightbulb
+    IconComponent: Lightbulb,
+    typeText: "Skill"
   },
   [NotificationTypeEnum.Job]: {
     viewButtonStyles: "border-emerald-400 text-emerald-400",
@@ -51,7 +66,8 @@ const NotificationTypeStyles = {
     claimedButtonStyles: "text-emerald-400 bg-emerald-50 border-emerald-50",
     textStyles: "text-emerald-400 capitalize",
     iconCircleStyles: "bg-emerald-400",
-    IconComponent: Briefcase
+    IconComponent: Briefcase,
+    typeText: "Job"
   },
   [NotificationTypeEnum.Learning]: {
     viewButtonStyles: "border-rose-400 text-rose-400",
@@ -59,7 +75,8 @@ const NotificationTypeStyles = {
     claimedButtonStyles: "text-rose-400 bg-rose-50 border-rose-50",
     textStyles: "text-rose-400 capitalize",
     iconCircleStyles: "bg-rose-400",
-    IconComponent: Graduation
+    IconComponent: Graduation,
+    typeText: "Learning"
   }
 };
 
@@ -69,20 +86,37 @@ const Notification = ({
   issueDate,
   className,
   notificationType = NotificationTypeEnum.Achievement,
-  onClick = () => {
-  }
+  handleViewOnClick = () => {
+  },
+  claimStatus = false,
+  handleClaimOnClick = () => {
+  },
+  loadingState = false
 }) => {
-  const [isClaimed, setIsClaimed] = useState(false);
-  const handleClaim = () => setIsClaimed(!isClaimed);
+  const [isClaimed, setIsClaimed] = useState(claimStatus || false);
+  const [isLoading, setIsLoading] = useState(loadingState || false);
+  useEffect(() => {
+    setIsClaimed(claimStatus);
+  }, [claimStatus]);
+  useEffect(() => {
+    setIsLoading(loadingState);
+  }, [loadingState]);
   const {
     IconComponent,
     iconCircleStyles,
     textStyles,
     viewButtonStyles,
     claimedButtonStyles,
-    unclaimedButtonStyles
+    unclaimedButtonStyles,
+    typeText
   } = NotificationTypeStyles[notificationType];
   const claimButtonStyles = isClaimed ? claimedButtonStyles : unclaimedButtonStyles;
+  let buttonText = "";
+  if (isClaimed) {
+    buttonText = "Claimed";
+  } else if (!isClaimed) {
+    buttonText = "Claim";
+  }
   return /* @__PURE__ */ React.createElement("div", {
     className: `flex justify-center items-center relative w-full rounded-3xl shadow-2xl py-3 bg-white ${className}`
   }, /* @__PURE__ */ React.createElement("div", {
@@ -107,25 +141,25 @@ const Notification = ({
   }, title), /* @__PURE__ */ React.createElement("p", {
     className: `font-semibold p-0 m-0 leading-none tracking-wide line-clamp-1 ${textStyles}`,
     "data-testid": "notification-type"
-  }, notificationType, " ", /* @__PURE__ */ React.createElement("span", {
+  }, typeText, " ", /* @__PURE__ */ React.createElement("span", {
     className: "text-grayscale-600 normal-case font-normal text-sm",
     "data-testid": "notification-cred-issue-date"
   }, "\u2022 ", issueDate)))), /* @__PURE__ */ React.createElement("div", {
     className: "flex items-center justify-between w-full mt-3"
   }, /* @__PURE__ */ React.createElement("button", {
-    onClick,
+    onClick: handleViewOnClick,
     className: `flex-1 rounded-[24px] border-solid border-2 bg-white font-semibold mr-2 py-2 px-3 tracking-wide ${viewButtonStyles}`,
     role: "button",
     name: "notification-view-button"
   }, "View"), /* @__PURE__ */ React.createElement("button", {
     className: `flex items-center justify-center flex-1 rounded-[24px] border-2 border-solid font-semibold py-2 px-3 tracking-wide ${claimButtonStyles}`,
-    onClick: handleClaim,
+    onClick: handleClaimOnClick,
     role: "button",
     name: "notification-claim-button"
   }, isClaimed && /* @__PURE__ */ React.createElement(Checkmark, {
     className: "h-[24px] p-0 m-0"
-  }), " ", isClaimed ? "Claimed" : "Claim"))));
+  }), " ", isLoading ? "Loading..." : buttonText))));
 };
 
 export { Notification as N, NotificationTypeStyles as a };
-//# sourceMappingURL=Notification-ac50790d.js.map
+//# sourceMappingURL=Notification-60c43061.js.map

package/dist/esm/Notification-60c43061.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Notification-60c43061.js","sources":["../../src/constants/notifications.ts","../../src/components/Notification/types.ts","../../src/components/Notification/Notification.tsx"],"sourcesContent":["export enum NotificationTypeEnum {\n    Currency = 'currency',\n    ID = 'id',\n    Achievement = 'achievement',\n    Skill = 'skill',\n    Job = 'job',\n    Learning = 'learning',\n    SocialBadges = 'socialBadge',\n}\n","import { NotificationTypeEnum } from '../../constants/notifications';\n\nimport Trophy from '../svgs/Trophy';\nimport Coins from '../svgs/Coins';\nimport User from '../svgs/User';\nimport Briefcase from '../svgs/Briefcase';\nimport Lightbulb from '../svgs/Lightbulb';\nimport Graduation from '../svgs/Graduation';\nimport AwardRibbon from '../svgs/AwardRibbon';\n\nexport type NotificationProps = {\n    notificationType: NotificationTypeEnum;\n    title: string;\n    issuerImage?: string;\n    issueDate: string;\n    className?: string;\n    handleViewOnClick: () => void;\n    claimStatus: boolean;\n    handleClaimOnClick: () => void;\n    loadingState: boolean;\n};\n\nexport const NotificationTypeStyles: {\n    [key: NotificationTypeEnum | string]: {\n        viewButtonStyles: string;\n        unclaimedButtonStyles: string;\n        claimedButtonStyles: string;\n        textStyles: string;\n        iconCircleStyles: string;\n        IconComponent: any;\n        typeText: string;\n    };\n} = {\n    [NotificationTypeEnum.Currency]: {\n        viewButtonStyles: 'border-cyan-600 text-cyan-600',\n        unclaimedButtonStyles: 'text-white bg-cyan-600 border-cyan-600',\n        claimedButtonStyles: 'text-cyan-600 bg-cyan-50 border-cyan-50',\n        textStyles: 'text-cyan-600 capitalize',\n        iconCircleStyles: 'bg-cyan-600',\n        IconComponent: Coins,\n        typeText: 'Currency',\n    },\n    [NotificationTypeEnum.SocialBadges]: {\n        viewButtonStyles: 'border-cyan-600 text-cyan-600',\n        unclaimedButtonStyles: 'text-white bg-cyan-600 border-cyan-600',\n        claimedButtonStyles: 'text-cyan-600 bg-cyan-50 border-cyan-50',\n        textStyles: 'text-cyan-600 capitalize',\n        iconCircleStyles: 'bg-cyan-600',\n        IconComponent: AwardRibbon,\n        typeText: 'Social Badge',\n    },\n    [NotificationTypeEnum.ID]: {\n        viewButtonStyles: 'border-yellow-400 text-yellow-400',\n        unclaimedButtonStyles: 'text-white bg-yellow-400 border-yellow-400',\n        claimedButtonStyles: 'text-yellow-400 bg-yellow-50 border-yellow-50',\n        textStyles: 'text-yellow-400 uppercase',\n        iconCircleStyles: 'bg-yellow-400',\n        IconComponent: User,\n        typeText: 'ID',\n    },\n    [NotificationTypeEnum.Achievement]: {\n        viewButtonStyles: 'border-spice-400 text-spice-400',\n        unclaimedButtonStyles: 'text-white bg-spice-400 border-spice-400',\n        claimedButtonStyles: 'text-spice-400 bg-spice-50 border-spice-50',\n        textStyles: 'text-spice-400 capitalize',\n        iconCircleStyles: 'bg-spice-400',\n        IconComponent: Trophy,\n        typeText: 'Achievement',\n    },\n    [NotificationTypeEnum.Skill]: {\n        viewButtonStyles: 'border-indigo-400 text-indigo-400',\n        unclaimedButtonStyles: 'text-white bg-indigo-400 border-indigo-400',\n        claimedButtonStyles: 'text-indigo-400 bg-indigo-50 border-indigo-50',\n        textStyles: 'text-indigo-400 capitalize',\n        iconCircleStyles: 'bg-indigo-400',\n        IconComponent: Lightbulb,\n        typeText: 'Skill',\n    },\n    [NotificationTypeEnum.Job]: {\n        viewButtonStyles: 'border-emerald-400 text-emerald-400',\n        unclaimedButtonStyles: 'text-white bg-emerald-400 border-emerald-400',\n        claimedButtonStyles: 'text-emerald-400 bg-emerald-50 border-emerald-50',\n        textStyles: 'text-emerald-400 capitalize',\n        iconCircleStyles: 'bg-emerald-400',\n        IconComponent: Briefcase,\n        typeText: 'Job',\n    },\n    [NotificationTypeEnum.Learning]: {\n        viewButtonStyles: 'border-rose-400 text-rose-400',\n        unclaimedButtonStyles: 'text-white bg-rose-400 border-rose-400',\n        claimedButtonStyles: 'text-rose-400 bg-rose-50 border-rose-50',\n        textStyles: 'text-rose-400 capitalize',\n        iconCircleStyles: 'bg-rose-400',\n        IconComponent: Graduation,\n        typeText: 'Learning',\n    },\n};\n","import React, { useState, useEffect } from 'react';\n\nimport { NotificationProps, NotificationTypeStyles } from './types';\nimport { NotificationTypeEnum } from '../../constants/notifications';\n\nimport Checkmark from '../svgs/Checkmark';\n\nexport const Notification: React.FC<NotificationProps> = ({\n    title,\n    issuerImage,\n    issueDate,\n    className,\n    notificationType = NotificationTypeEnum.Achievement,\n    handleViewOnClick = () => {},\n    claimStatus = false,\n    handleClaimOnClick = () => {},\n    loadingState = false,\n}) => {\n    const [isClaimed, setIsClaimed] = useState<boolean>(claimStatus || false);\n    const [isLoading, setIsLoading] = useState<boolean>(loadingState || false);\n\n    useEffect(() => {\n        setIsClaimed(claimStatus);\n    }, [claimStatus]);\n\n    useEffect(() => {\n        setIsLoading(loadingState);\n    }, [loadingState]);\n\n    const {\n        IconComponent,\n        iconCircleStyles,\n        textStyles,\n        viewButtonStyles,\n        claimedButtonStyles,\n        unclaimedButtonStyles,\n        typeText,\n    } = NotificationTypeStyles[notificationType];\n\n    const claimButtonStyles = isClaimed ? claimedButtonStyles : unclaimedButtonStyles;\n\n    let buttonText: string = '';\n\n    if (isClaimed) {\n        buttonText = 'Claimed';\n    } else if (!isClaimed) {\n        buttonText = 'Claim';\n    }\n\n    return (\n        <div\n            className={`flex justify-center items-center relative w-full rounded-3xl shadow-2xl py-3 bg-white ${className}`}\n        >\n            <div\n                className={`absolute flex items-center justify-center top-2 right-2 h-8 w-8 overflow-hidden rounded-full z-10 ${iconCircleStyles}`}\n            >\n                <IconComponent className=\"h-4/5 text-white\" />\n            </div>\n            <div className=\"flex flex-col justify-center items-center relative w-11/12\">\n                <div className=\"flex flex-row items-center justify-start w-full\">\n                    <div className=\"h-12 w-12 max-h-12 max-w-[48px] min-h-[48px] min-w-[48px] overflow-hidden rounded-full\">\n                        <img\n                            src={issuerImage}\n                            alt=\"issuer image\"\n                            className=\"w-full h-full object-cover\"\n                        />\n                    </div>\n                    <div className=\"text-left ml-3\">\n                        <h4\n                            className=\"font-bold tracking-wide line-clamp-1 text-black\"\n                            data-testid=\"notification-title\"\n                        >\n                            {title}\n                        </h4>\n                        <p\n                            className={`font-semibold p-0 m-0 leading-none tracking-wide line-clamp-1 ${textStyles}`}\n                            data-testid=\"notification-type\"\n                        >\n                            {typeText}{' '}\n                            <span\n                                className=\"text-grayscale-600 normal-case font-normal text-sm\"\n                                data-testid=\"notification-cred-issue-date\"\n                            >\n                                • {issueDate}\n                            </span>\n                        </p>\n                    </div>\n                </div>\n                <div className=\"flex items-center justify-between w-full mt-3\">\n                    <button\n                        onClick={handleViewOnClick}\n                        className={`flex-1 rounded-[24px] border-solid border-2 bg-white font-semibold mr-2 py-2 px-3 tracking-wide ${viewButtonStyles}`}\n                        role=\"button\"\n                        name=\"notification-view-button\"\n                    >\n                        View\n                    </button>\n                    <button\n                        className={`flex items-center justify-center flex-1 rounded-[24px] border-2 border-solid font-semibold py-2 px-3 tracking-wide ${claimButtonStyles}`}\n                        onClick={handleClaimOnClick}\n                        role=\"button\"\n                        name=\"notification-claim-button\"\n                    >\n                        {isClaimed && <Checkmark className=\"h-[24px] p-0 m-0\" />}{' '}\n                        {isLoading ? 'Loading...' : buttonText}\n                    </button>\n                </div>\n            </div>\n        </div>\n    );\n};\n\nexport default Notification;\n"],"names":["NotificationTypeEnum"],"mappings":"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"}