@learncard/react 2.6.61 → 2.6.63

package/dist/cjs/index.js

@@ -7,6 +7,7 @@ var BoostGenericCard = require('./BoostGenericCard-7426cbea.js');
 var BoostSmallCard = require('./BoostSmallCard-0b3a3dd8.js');
 var Button = require('./Button-a7af702b.js');
 require('react');
+require('./CaretRightFilled.svg');
 var VCVerificationPill = require('./VCVerificationPill-0b0f6894.js');
 var Lightbox = require('./Lightbox-f19e13d2.js');
 require('./athletics.svg');
@@ -18,9 +19,9 @@ require('./medical.svg');
 require('./social.svg');
 require('./stem.svg');
 require('./trade.svg');
-var CertificateDisplayCard = require('./CertificateDisplayCard-efd46ea1.js');
+var CertificateDisplayCard = require('./CertificateDisplayCard-eb505657.js');
 require('./default-face.jpeg');
-var VCDisplayCard2 = require('./VCDisplayCard2-3c197975.js');
+var VCDisplayCard2 = require('./VCDisplayCard2-159e6248.js');
 var CircleCheckButton = require('./CircleCheckButton-abff235d.js');
 var CircleIcon = require('./CircleIcon-dace003c.js');
 var CourseCard = require('./CourseCard-338a32ee.js');
@@ -50,7 +51,7 @@ var SkillVerticalCard = require('./SkillVerticalCard-3eb3a8e9.js');
 var SkillsCard = require('./SkillsCard-4b6dbb4f.js');
 var SkillsStatsCard = require('./SkillsStatsCard-97a35a88.js');
 var SmallAchievementCard = require('./SmallAchievementCard-a1fa862b.js');
-var VCCard = require('./VCCard-30e4804c.js');
+var VCCard = require('./VCCard-e9147997.js');
 var VCDisplayBackFace = require('./VCDisplayBackFace-3d2ef528.js');
 var VCDisplayCard = require('./VCDisplayCard-244451a9.js');
 require('./icon.green.fat-arrow.png');
@@ -81,7 +82,6 @@ require('./minigradcapcolored.svg');
 require('./minipuzzlecolored.svg');
 require('./index-7d94d5ac.js');
 require('./DotsThreeOutline.svg');
-require('./CaretRightFilled.svg');
 require('./addawardlight.svg');
 require('./RedXCircle.svg');
 require('./GreenCheckCircle.svg');

package/dist/cjs/index13.js

@@ -7,6 +7,7 @@ var BoostGenericCard = require('./BoostGenericCard-7426cbea.js');
 var BoostSmallCard = require('./BoostSmallCard-0b3a3dd8.js');
 var Button = require('./Button-a7af702b.js');
 require('react');
+require('./CaretRightFilled.svg');
 var VCVerificationPill = require('./VCVerificationPill-0b0f6894.js');
 var Lightbox = require('./Lightbox-f19e13d2.js');
 require('./athletics.svg');
@@ -18,9 +19,9 @@ require('./medical.svg');
 require('./social.svg');
 require('./stem.svg');
 require('./trade.svg');
-var CertificateDisplayCard = require('./CertificateDisplayCard-efd46ea1.js');
+var CertificateDisplayCard = require('./CertificateDisplayCard-eb505657.js');
 require('./default-face.jpeg');
-var VCDisplayCard2 = require('./VCDisplayCard2-3c197975.js');
+var VCDisplayCard2 = require('./VCDisplayCard2-159e6248.js');
 var CircleCheckButton = require('./CircleCheckButton-abff235d.js');
 var CircleIcon = require('./CircleIcon-dace003c.js');
 var CourseCard = require('./CourseCard-338a32ee.js');
@@ -50,7 +51,7 @@ var SkillVerticalCard = require('./SkillVerticalCard-3eb3a8e9.js');
 var SkillsCard = require('./SkillsCard-4b6dbb4f.js');
 var SkillsStatsCard = require('./SkillsStatsCard-97a35a88.js');
 var SmallAchievementCard = require('./SmallAchievementCard-a1fa862b.js');
-var VCCard = require('./VCCard-30e4804c.js');
+var VCCard = require('./VCCard-e9147997.js');
 var VCDisplayBackFace = require('./VCDisplayBackFace-3d2ef528.js');
 var VCDisplayCard = require('./VCDisplayCard-244451a9.js');
 require('./icon.green.fat-arrow.png');
@@ -81,7 +82,6 @@ require('./minigradcapcolored.svg');
 require('./minipuzzlecolored.svg');
 require('./index-7d94d5ac.js');
 require('./DotsThreeOutline.svg');
-require('./CaretRightFilled.svg');
 require('./addawardlight.svg');
 require('./RedXCircle.svg');
 require('./GreenCheckCircle.svg');

package/dist/cjs/index36.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var VCCard = require('./VCCard-30e4804c.js');
+var VCCard = require('./VCCard-e9147997.js');
 require('react');
 require('@learncard/init');
 require('./VCDisplayCard-244451a9.js');
@@ -98,8 +98,8 @@ require('./skillplaceholder.png');
 require('./skillgraph.svg');
 require('./ArrowArcRight.svg');
 require('./VCDisplayBackFace-3d2ef528.js');
-require('./VCDisplayCard2-3c197975.js');
-require('./CertificateDisplayCard-efd46ea1.js');
+require('./VCDisplayCard2-159e6248.js');
+require('./CertificateDisplayCard-eb505657.js');
 require('./Lightbox-f19e13d2.js');
 require('./AwardRibbon-14ba45fb.js');
 

package/dist/cjs/index39.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 require('react');
 require('./default-face.jpeg');
 require('react-dom');
-var CertificateDisplayCard = require('./CertificateDisplayCard-efd46ea1.js');
+var CertificateDisplayCard = require('./CertificateDisplayCard-eb505657.js');
 require('./athletics.svg');
 require('./business.svg');
 require('./creative.svg');
@@ -44,7 +44,7 @@ require('@learncard/init');
 require('./icon.green.fat-arrow.png');
 require('./vc.check.svg');
 require('./ArrowArcRight.svg');
-var VCDisplayCard2 = require('./VCDisplayCard2-3c197975.js');
+var VCDisplayCard2 = require('./VCDisplayCard2-159e6248.js');
 require('./credential.helpers-69dff6ee.js');
 require('./index-7d94d5ac.js');
 require('./User-dde46685.js');

package/dist/cjs/index6.js

@@ -3,11 +3,11 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 require('react');
+require('./CaretRightFilled.svg');
 require('./VCVerificationPill-0b0f6894.js');
 require('./icons-9878f84c.js');
 require('./index-c570c8fb.js');
 require('./DotsThreeOutline.svg');
-require('./CaretRightFilled.svg');
 require('./default-face.jpeg');
 require('./addawardlight.svg');
 require('./numeral-d057158c.js');
@@ -44,7 +44,7 @@ require('./social.svg');
 require('./stem.svg');
 require('./trade.svg');
 require('./index.es-f433af46.js');
-var CertificateDisplayCard = require('./CertificateDisplayCard-efd46ea1.js');
+var CertificateDisplayCard = require('./CertificateDisplayCard-eb505657.js');
 require('./RedXCircle.svg');
 require('./GreenCheckCircle.svg');
 require('./YellowWarningCircle.svg');

package/dist/esm/{CertificateDisplayCard-1446532f.js → CertificateDisplayCard-c957fc65.js}

@@ -12,6 +12,7 @@ import Social from './social.svg';
 import Stem from './stem.svg';
 import Trade from './trade.svg';
 import { a as VerificationStatusEnum } from './VCVerificationPill-2297bb5c.js';
+import CaretRightFilled from './CaretRightFilled.svg';
 import './index.es-76d64136.js';
 import './vc.check.svg';
 import { a as LCCategoryEnum } from './index-43f63ea7.js';
@@ -350,6 +351,27 @@ const X = ({ className = "" }) => {
   }));
 };
 
+const AlignmentRow = ({
+  url,
+  name,
+  framework
+}) => {
+  return /* @__PURE__ */ React.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.createElement("h1", {
+    className: "text-blue-800 font-semibold uppercase"
+  }, framework), /* @__PURE__ */ React.createElement("button", {
+    className: "flex",
+    onClick: () => window.open(url)
+  }, /* @__PURE__ */ React.createElement("span", {
+    className: "text-left"
+  }, name), /* @__PURE__ */ React.createElement("img", {
+    className: "w-[20px] self-end",
+    src: CaretRightFilled,
+    alt: "right-caret"
+  })));
+};
+
 const InfoBox = ({ text, handleClose, backgroundColor = "#6366F1" }) => {
   const bgColorWithOpacity = `${backgroundColor}1F`;
   return /* @__PURE__ */ React.createElement("div", {
@@ -361,6 +383,39 @@ const InfoBox = ({ text, handleClose, backgroundColor = "#6366F1" }) => {
   }, "Close"));
 };
 
+const AlignmentsBox = ({ alignment, style }) => {
+  const [showInfo, setShowInfo] = 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.createElement(AlignmentRow, {
+    key: index,
+    url: object.targetUrl,
+    name: object.targetName,
+    framework: object.targetFramework
+  })) : alignment && /* @__PURE__ */ React.createElement(AlignmentRow, {
+    url: alignment.targetUrl,
+    name: alignment.targetName,
+    framework: alignment.targetFramework
+  });
+  return /* @__PURE__ */ React.createElement("div", {
+    className: "bg-white flex flex-col items-start gap-[10px] rounded-[20px] shadow-bottom p-[15px] w-full"
+  }, /* @__PURE__ */ React.createElement("div", {
+    className: "flex w-full items-center"
+  }, /* @__PURE__ */ React.createElement("h3", {
+    className: style === "Certificate" ? "text-[17px] text-grayscale-900 font-poppins" : "text-[22px] font-mouse"
+  }, "Alignments"), /* @__PURE__ */ React.createElement("button", {
+    className: "ml-auto",
+    onClick: () => setShowInfo(!showInfo)
+  }, /* @__PURE__ */ React.createElement(InfoIcon, {
+    color: showInfo ? "#6366F1" : void 0
+  }))), showInfo && /* @__PURE__ */ React.createElement(InfoBox, {
+    text: alignmentText,
+    handleClose: () => setShowInfo(false)
+  }), alignments);
+};
+
 const truncateWithEllipsis = (str, maxLength) => {
   return str.length > maxLength ? `${str.substring(0, maxLength)}...` : str;
 };
@@ -2661,12 +2716,13 @@ const CertificateBackFace = ({
   onMediaAttachmentClick,
   enableLightbox
 }) => {
-  var _a, _b, _c, _d, _e, _f;
+  var _a, _b, _c, _d, _e, _f, _g;
   const { createdAt, credentialSubject } = 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 = getCategoryDarkColor(categoryType);
   let bgColor = `bg-${credentialDarkColor}`;
   if (categoryType === LCCategoryEnum.accommodations) {
@@ -2686,14 +2742,17 @@ const CertificateBackFace = ({
   }, "Awarded on ", createdAt)), criteria && /* @__PURE__ */ React.createElement(TruncateTextBox, {
     headerText: "Criteria",
     text: criteria
-  }), ((_e = (_d = credential.skills) == null ? void 0 : _d.length) != null ? _e : 0) > 0 && (customSkillsComponent ? customSkillsComponent : /* @__PURE__ */ React.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.createElement(SkillsBox, {
+    skills: (_g = credential.skills) != null ? _g : []
   })), credential.attachments && credential.attachments.length > 0 && /* @__PURE__ */ React.createElement(MediaAttachmentsBox, {
     attachments: credential.attachments,
     getFileMetadata,
     getVideoMetadata,
     onMediaAttachmentClick,
     enableLightbox
+  }), alignment && /* @__PURE__ */ React.createElement(AlignmentsBox, {
+    alignment,
+    style: "Certificate"
   }), verificationItems && verificationItems.length > 0 && /* @__PURE__ */ React.createElement(VerificationsBox, {
     verificationItems
   }), /* @__PURE__ */ React.createElement("span", {
@@ -2808,7 +2867,7 @@ const VCDisplayCardSkillsCount = ({ skills, onClick }) => {
   const total = totalSkills + totalSubskills;
   const text = skillsCount === 1 ? "Skill" : "Skills";
   return /* @__PURE__ */ React.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.createElement("p", {
     className: "text-violet-500 text-xl flex items-center justify-center tracking-[0.75px] font-poppins font-semibold"
@@ -3028,5 +3087,5 @@ const CertificateDisplayCard = ({
   })));
 };
 
-export { AcuteCheckmark as A, CertificateDisplayCard as C, ExclamationPoint as E, GenericDocumentIcon as G, InfoIcon as I, LinkIcon as L, SelectedSkills as S, VCDisplayCardSkillsCount as V, X, VideoIcon as a, Camera as b, capitalize as c, SkillsBox as d, getBaseUrl as g, prettyBytes as p, truncateWithEllipsis as t };
-//# sourceMappingURL=CertificateDisplayCard-1446532f.js.map
+export { AcuteCheckmark as A, CertificateDisplayCard as C, ExclamationPoint as E, GenericDocumentIcon as G, InfoIcon as I, LinkIcon as L, SelectedSkills as S, VCDisplayCardSkillsCount as V, X, VideoIcon as a, Camera as b, capitalize as c, SkillsBox as d, AlignmentsBox as e, getBaseUrl as g, prettyBytes as p, truncateWithEllipsis as t };
+//# sourceMappingURL=CertificateDisplayCard-c957fc65.js.map