@learncard/react 2.6.61 → 2.6.63

package/dist/cjs/{CertificateDisplayCard-efd46ea1.js → CertificateDisplayCard-eb505657.js}

@@ -14,6 +14,7 @@ var Social = require('./social.svg');
 var Stem = require('./stem.svg');
 var Trade = require('./trade.svg');
 var VCVerificationPill = require('./VCVerificationPill-0b0f6894.js');
+var CaretRightFilled = require('./CaretRightFilled.svg');
 require('./index.es-f433af46.js');
 require('./vc.check.svg');
 var index = require('./index-7d94d5ac.js');
@@ -33,6 +34,7 @@ var Medical__default = /*#__PURE__*/_interopDefaultLegacy(Medical);
 var Social__default = /*#__PURE__*/_interopDefaultLegacy(Social);
 var Stem__default = /*#__PURE__*/_interopDefaultLegacy(Stem);
 var Trade__default = /*#__PURE__*/_interopDefaultLegacy(Trade);
+var CaretRightFilled__default = /*#__PURE__*/_interopDefaultLegacy(CaretRightFilled);
 var ThreeDots__default = /*#__PURE__*/_interopDefaultLegacy(ThreeDots);
 
 const AcuteCheckmark = ({ className = "" }) => {
@@ -366,6 +368,27 @@ const X = ({ className = "" }) => {
   }));
 };
 
+const AlignmentRow = ({
+  url,
+  name,
+  framework
+}) => {
+  return /* @__PURE__ */ React__default["default"].createElement("div", {
+    className: "flex flex-col gap-[5px] font-poppins text-[12px] bg-[#DBEAFE] rounded-[15px] border-b-[1px] border-grayscale-200 border-solid w-full p-[10px] last:border-0"
+  }, /* @__PURE__ */ React__default["default"].createElement("h1", {
+    className: "text-blue-800 font-semibold uppercase"
+  }, framework), /* @__PURE__ */ React__default["default"].createElement("button", {
+    className: "flex",
+    onClick: () => window.open(url)
+  }, /* @__PURE__ */ React__default["default"].createElement("span", {
+    className: "text-left"
+  }, name), /* @__PURE__ */ React__default["default"].createElement("img", {
+    className: "w-[20px] self-end",
+    src: CaretRightFilled__default["default"],
+    alt: "right-caret"
+  })));
+};
+
 const InfoBox = ({ text, handleClose, backgroundColor = "#6366F1" }) => {
   const bgColorWithOpacity = `${backgroundColor}1F`;
   return /* @__PURE__ */ React__default["default"].createElement("div", {
@@ -377,6 +400,39 @@ const InfoBox = ({ text, handleClose, backgroundColor = "#6366F1" }) => {
   }, "Close"));
 };
 
+const AlignmentsBox = ({ alignment, style }) => {
+  const [showInfo, setShowInfo] = React.useState(false);
+  const alignmentText = `
+    Alignments in your Open Badge credential link your achievement to established frameworks, standards, or competencies. 
+    Each alignment shows how your boost directly relates to skills, knowledge areas, and professional standards that are recognized in your field.
+    `;
+  const alignments = Array.isArray(alignment) ? alignment.map((object, index) => /* @__PURE__ */ React__default["default"].createElement(AlignmentRow, {
+    key: index,
+    url: object.targetUrl,
+    name: object.targetName,
+    framework: object.targetFramework
+  })) : alignment && /* @__PURE__ */ React__default["default"].createElement(AlignmentRow, {
+    url: alignment.targetUrl,
+    name: alignment.targetName,
+    framework: alignment.targetFramework
+  });
+  return /* @__PURE__ */ React__default["default"].createElement("div", {
+    className: "bg-white flex flex-col items-start gap-[10px] rounded-[20px] shadow-bottom p-[15px] w-full"
+  }, /* @__PURE__ */ React__default["default"].createElement("div", {
+    className: "flex w-full items-center"
+  }, /* @__PURE__ */ React__default["default"].createElement("h3", {
+    className: style === "Certificate" ? "text-[17px] text-grayscale-900 font-poppins" : "text-[22px] font-mouse"
+  }, "Alignments"), /* @__PURE__ */ React__default["default"].createElement("button", {
+    className: "ml-auto",
+    onClick: () => setShowInfo(!showInfo)
+  }, /* @__PURE__ */ React__default["default"].createElement(InfoIcon, {
+    color: showInfo ? "#6366F1" : void 0
+  }))), showInfo && /* @__PURE__ */ React__default["default"].createElement(InfoBox, {
+    text: alignmentText,
+    handleClose: () => setShowInfo(false)
+  }), alignments);
+};
+
 const truncateWithEllipsis = (str, maxLength) => {
   return str.length > maxLength ? `${str.substring(0, maxLength)}...` : str;
 };
@@ -2677,12 +2733,13 @@ const CertificateBackFace = ({
   onMediaAttachmentClick,
   enableLightbox
 }) => {
-  var _a, _b, _c, _d, _e, _f;
+  var _a, _b, _c, _d, _e, _f, _g;
   const { createdAt, credentialSubject } = credential_helpers.getInfoFromCredential(credential, "MMM dd, yyyy", {
     uppercaseDate: false
   });
   const { description } = (_a = credentialSubject == null ? void 0 : credentialSubject.achievement) != null ? _a : {};
   const criteria = (_c = (_b = credentialSubject == null ? void 0 : credentialSubject.achievement) == null ? void 0 : _b.criteria) == null ? void 0 : _c.narrative;
+  const alignment = (_d = credentialSubject == null ? void 0 : credentialSubject.achievement) == null ? void 0 : _d.alignment;
   const credentialDarkColor = credential_helpers.getCategoryDarkColor(categoryType);
   let bgColor = `bg-${credentialDarkColor}`;
   if (categoryType === index.LCCategoryEnum.accommodations) {
@@ -2702,14 +2759,17 @@ const CertificateBackFace = ({
   }, "Awarded on ", createdAt)), criteria && /* @__PURE__ */ React__default["default"].createElement(TruncateTextBox, {
     headerText: "Criteria",
     text: criteria
-  }), ((_e = (_d = credential.skills) == null ? void 0 : _d.length) != null ? _e : 0) > 0 && (customSkillsComponent ? customSkillsComponent : /* @__PURE__ */ React__default["default"].createElement(SkillsBox, {
-    skills: (_f = credential.skills) != null ? _f : []
+  }), ((_f = (_e = credential.skills) == null ? void 0 : _e.length) != null ? _f : 0) > 0 && (customSkillsComponent ? customSkillsComponent : /* @__PURE__ */ React__default["default"].createElement(SkillsBox, {
+    skills: (_g = credential.skills) != null ? _g : []
   })), credential.attachments && credential.attachments.length > 0 && /* @__PURE__ */ React__default["default"].createElement(MediaAttachmentsBox, {
     attachments: credential.attachments,
     getFileMetadata,
     getVideoMetadata,
     onMediaAttachmentClick,
     enableLightbox
+  }), alignment && /* @__PURE__ */ React__default["default"].createElement(AlignmentsBox, {
+    alignment,
+    style: "Certificate"
   }), verificationItems && verificationItems.length > 0 && /* @__PURE__ */ React__default["default"].createElement(VerificationsBox, {
     verificationItems
   }), /* @__PURE__ */ React__default["default"].createElement("span", {
@@ -2824,7 +2884,7 @@ const VCDisplayCardSkillsCount = ({ skills, onClick }) => {
   const total = totalSkills + totalSubskills;
   const text = skillsCount === 1 ? "Skill" : "Skills";
   return /* @__PURE__ */ React__default["default"].createElement("div", {
-    className: "flex items-center justify-center mt-8 cursor-pointer",
+    className: "flex items-center justify-center mt-8 cursor-pointer px-4 py-2 bg-white rounded-[20px] shadow-bottom",
     onClick
   }, /* @__PURE__ */ React__default["default"].createElement("p", {
     className: "text-violet-500 text-xl flex items-center justify-center tracking-[0.75px] font-poppins font-semibold"
@@ -3045,6 +3105,7 @@ const CertificateDisplayCard = ({
 };
 
 exports.AcuteCheckmark = AcuteCheckmark;
+exports.AlignmentsBox = AlignmentsBox;
 exports.Camera = Camera;
 exports.CertificateDisplayCard = CertificateDisplayCard;
 exports.ExclamationPoint = ExclamationPoint;
@@ -3060,4 +3121,4 @@ exports.capitalize = capitalize;
 exports.getBaseUrl = getBaseUrl;
 exports.prettyBytes = prettyBytes;
 exports.truncateWithEllipsis = truncateWithEllipsis;
-//# sourceMappingURL=CertificateDisplayCard-efd46ea1.js.map
+//# sourceMappingURL=CertificateDisplayCard-eb505657.js.map