@learncard/react 2.3.15 → 2.3.16

package/dist/esm/{VCDisplayBackFace-4ffe5733.js → VCDisplayBackFace-d603e35b.js}

@@ -4,6 +4,25 @@ import { a as VCVerificationPill } from './VCVerificationPill-14ba1e6c.js';
 
 var FlipArrowRight = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiIGhlaWdodD0iMzMiIHZpZXdCb3g9IjAgMCAzMiAzMyIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTIwLjQ4NTQgMTkuMTk4SDI4LjQ4NTRWMTEuMTk4IiBzdHJva2U9IiM2MzY2RjEiIHN0cm9rZS13aWR0aD0iMyIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+CjxwYXRoIGQ9Ik00IDIzLjY4MzJDNCAyMS4zMDk4IDQuNzAzNzkgMTguOTg5OCA2LjAyMjM2IDE3LjAxNjRDNy4zNDA5NCAxNS4wNDMgOS4yMTUwOCAxMy41MDQ5IDExLjQwNzggMTIuNTk2N0MxMy42MDA1IDExLjY4ODQgMTYuMDEzMyAxMS40NTA4IDE4LjM0MTEgMTEuOTEzOEMyMC42Njg5IDEyLjM3NjggMjIuODA3MSAxMy41MTk3IDI0LjQ4NTMgMTUuMTk3OUwyOC40ODUzIDE5LjE5NzkiIHN0cm9rZT0iIzYzNjZGMSIgc3Ryb2tlLXdpZHRoPSIzIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+Cg==";
 
+const getImageFromImage = (image) => {
+  var _a;
+  if (typeof image === "string")
+    return image;
+  return (_a = image.id) != null ? _a : "";
+};
+const getNameFromProfile = (profile) => {
+  var _a;
+  if (typeof profile === "string")
+    return profile;
+  return (_a = profile.name) != null ? _a : "";
+};
+const getImageFromProfile = (profile) => {
+  var _a;
+  if (typeof profile === "string")
+    return "";
+  return getImageFromImage((_a = profile.image) != null ? _a : "");
+};
+
 const VCDisplayBackFace = ({
   issuer,
   credentialSubject,
@@ -15,32 +34,39 @@ const VCDisplayBackFace = ({
   const descriptionText = (_a = credentialSubject == null ? void 0 : credentialSubject.achievement) == null ? void 0 : _a.description;
   const criteriaText = (_c = (_b = credentialSubject == null ? void 0 : credentialSubject.achievement) == null ? void 0 : _b.criteria) == null ? void 0 : _c.narrative;
   const issuerUrl = typeof issuer === "object" ? issuer.url : "";
+  const issuerName = getNameFromProfile(issuer != null ? issuer : "");
   return /* @__PURE__ */ React.createElement("div", {
     className: `flex overflow-hidden flex-col items-center justify-between relative max-w-[400px] h-[100%] max-h-[1100px] min-h-[600px] p-7 rounded-3xl shadow-3xl bg-emerald-700 vc-display-card-full-container ${className}`
   }, /* @__PURE__ */ React.createElement("section", {
     className: "flex max-h-[150px] items-end bg-white rounded-bl-[50%] rounded-br-[50%] absolute top-0 w-[110%] h-[55%] min-h-[400px]"
   }), /* @__PURE__ */ React.createElement("section", {
-    className: "flex flex-col items-center justify-center z-10 text-left"
+    className: "flex flex-col items-center justify-center z-10 text-left credential-details-container max-w-[100%] relative"
   }, /* @__PURE__ */ React.createElement("section", {
     className: "flex flex-row items-start justify-start w-full line-clamp-2"
   }, /* @__PURE__ */ React.createElement("h3", {
     className: "text-2xl line-clamp-2 tracking-wide leading-snug text-left text-emerald-700",
     "data-testid": "vc-credential-details-title tracking-wide subpixel-antialiased"
   }, "Credential Details")), /* @__PURE__ */ React.createElement("section", {
-    className: "flex flex-col mt-2 w-full my-2"
+    className: "flex flex-col mt-2 w-full my-2 min-h-[200px] credential-details-info"
   }, /* @__PURE__ */ React.createElement("div", {
     className: "width-full"
   }, /* @__PURE__ */ React.createElement("h6", {
-    className: "line-clamp-4 text-grayscale-900 font-bold uppercase text-xs tracking-wider subpixel-antialiased"
+    className: "line-clamp-1 text-grayscale-900 font-bold uppercase text-xs tracking-wider subpixel-antialiased"
   }, "Description"), /* @__PURE__ */ React.createElement("p", {
-    className: "line-clamp-4 subpixel-antialiased text-grayscale-600 "
+    className: "line-clamp-4 subpixel-antialiased text-grayscale-600 text-[14px]"
   }, descriptionText)), /* @__PURE__ */ React.createElement("div", {
     className: "width-full mt-7"
   }, /* @__PURE__ */ React.createElement("h6", {
-    className: "line-clamp-4 text-grayscale-900 font-bold uppercase text-xs tracking-wider  subpixel-antialiased"
+    className: "line-clamp-1 text-grayscale-900 font-bold uppercase text-xs tracking-wider  subpixel-antialiased"
   }, "Criteria"), /* @__PURE__ */ React.createElement("p", {
-    className: "line-clamp-4 subpixel-antialiased text-grayscale-600 "
-  }, criteriaText)), issuerUrl && /* @__PURE__ */ React.createElement("p", {
+    className: "line-clamp-4 subpixel-antialiased text-grayscale-600 text-[14px] "
+  }, criteriaText)), /* @__PURE__ */ React.createElement("div", {
+    className: "width-full mt-7 line-clamp-1 overflow-hidden vc-issuer-name-info"
+  }, /* @__PURE__ */ React.createElement("h6", {
+    className: "line-clamp-1 text-grayscale-900 font-bold uppercase text-xs tracking-wider subpixel-antialiased"
+  }, "Issuer"), /* @__PURE__ */ React.createElement("p", {
+    className: "max-w-[344px] line-clamp-1 subpixel-antialiased text-grayscale-600 text-[14px] block overflow-ellipsis break-all"
+  }, issuerName)), issuerUrl && /* @__PURE__ */ React.createElement("p", {
     className: "text-indigo-500 font-bold text-xs width-full text-center mt-8"
   }, issuerUrl)), /* @__PURE__ */ React.createElement("div", {
     className: "w-full mt-2"
@@ -64,5 +90,5 @@ const VCDisplayBackFace = ({
   }))))));
 };
 
-export { FlipArrowRight as F, VCDisplayBackFace as V };
-//# sourceMappingURL=VCDisplayBackFace-4ffe5733.js.map
+export { FlipArrowRight as F, VCDisplayBackFace as V, getImageFromProfile as a, getNameFromProfile as g };
+//# sourceMappingURL=VCDisplayBackFace-d603e35b.js.map

package/dist/esm/VCDisplayBackFace-d603e35b.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VCDisplayBackFace-d603e35b.js","sources":["../../src/assets/images/ArrowArcRight.svg","../../src/helpers/credential.helpers.ts","../../src/components/VCDisplayBackFace/VCDisplayBackFace.tsx"],"sourcesContent":["export default \"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiIGhlaWdodD0iMzMiIHZpZXdCb3g9IjAgMCAzMiAzMyIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTIwLjQ4NTQgMTkuMTk4SDI4LjQ4NTRWMTEuMTk4IiBzdHJva2U9IiM2MzY2RjEiIHN0cm9rZS13aWR0aD0iMyIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+CjxwYXRoIGQ9Ik00IDIzLjY4MzJDNCAyMS4zMDk4IDQuNzAzNzkgMTguOTg5OCA2LjAyMjM2IDE3LjAxNjRDNy4zNDA5NCAxNS4wNDMgOS4yMTUwOCAxMy41MDQ5IDExLjQwNzggMTIuNTk2N0MxMy42MDA1IDExLjY4ODQgMTYuMDEzMyAxMS40NTA4IDE4LjM0MTEgMTEuOTEzOEMyMC42Njg5IDEyLjM3NjggMjIuODA3MSAxMy41MTk3IDI0LjQ4NTMgMTUuMTk3OUwyOC40ODUzIDE5LjE5NzkiIHN0cm9rZT0iIzYzNjZGMSIgc3Ryb2tlLXdpZHRoPSIzIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+Cg==\"","import { Image, Profile } from '@learncard/types';\n\nexport const getImageFromImage = (image: Image): string => {\n    if (typeof image === 'string') return image;\n\n    return image.id ?? '';\n};\n\nexport const getNameFromProfile = (profile: Profile): string => {\n    if (typeof profile === 'string') return profile;\n\n    return profile.name ?? '';\n};\n\nexport const getImageFromProfile = (profile: Profile): string => {\n    if (typeof profile === 'string') return '';\n\n    return getImageFromImage(profile.image ?? '');\n};\n","import React from 'react';\nimport { VCDisplayCardProps } from '../../types';\nimport { VCVerificationCheckWithText } from '../VCVerificationCheck/VCVerificationCheck';\nimport VCVerificationPill from '../VCVerificationPill/VCVerificationPill';\nimport FlipArrowRight from '../../assets/images/ArrowArcRight.svg';\nimport { getNameFromProfile } from '../../helpers/credential.helpers';\n\nexport const VCDisplayBackFace: React.FC<VCDisplayCardProps> = ({\n    issuer,\n    credentialSubject,\n    className = '',\n    loading,\n    verification = [],\n}) => {\n    const descriptionText = credentialSubject?.achievement?.description;\n    const criteriaText = credentialSubject?.achievement?.criteria?.narrative;\n    const issuerUrl = typeof issuer === 'object' ? issuer.url : '';\n    const issuerName = getNameFromProfile(issuer ?? '');\n\n    return (\n        <div\n            className={`flex overflow-hidden flex-col items-center justify-between relative max-w-[400px] h-[100%] max-h-[1100px] min-h-[600px] p-7 rounded-3xl shadow-3xl bg-emerald-700 vc-display-card-full-container ${className}`}\n        >\n            <section className=\"flex max-h-[150px] items-end bg-white rounded-bl-[50%] rounded-br-[50%] absolute top-0 w-[110%] h-[55%] min-h-[400px]\"></section>\n            <section className=\"flex flex-col items-center justify-center z-10 text-left credential-details-container max-w-[100%] relative\">\n                <section className=\"flex flex-row items-start justify-start w-full line-clamp-2\">\n                    <h3\n                        className=\"text-2xl line-clamp-2 tracking-wide leading-snug text-left text-emerald-700\"\n                        data-testid=\"vc-credential-details-title tracking-wide subpixel-antialiased\"\n                    >\n                        Credential Details\n                    </h3>\n                </section>\n\n                <section className=\"flex flex-col mt-2 w-full my-2 min-h-[200px] credential-details-info\">\n                    <div className=\"width-full\">\n                        <h6 className=\"line-clamp-1 text-grayscale-900 font-bold uppercase text-xs tracking-wider subpixel-antialiased\">\n                            Description\n                        </h6>\n                        <p className=\"line-clamp-4 subpixel-antialiased text-grayscale-600 text-[14px]\">\n                            {descriptionText}\n                        </p>\n                    </div>\n\n                    <div className=\"width-full mt-7\">\n                        <h6 className=\"line-clamp-1 text-grayscale-900 font-bold uppercase text-xs tracking-wider  subpixel-antialiased\">\n                            Criteria\n                        </h6>\n                        <p className=\"line-clamp-4 subpixel-antialiased text-grayscale-600 text-[14px] \">\n                            {criteriaText}\n                        </p>\n                    </div>\n\n                    <div className=\"width-full mt-7 line-clamp-1 overflow-hidden vc-issuer-name-info\">\n                        <h6 className=\"line-clamp-1 text-grayscale-900 font-bold uppercase text-xs tracking-wider subpixel-antialiased\">\n                            Issuer\n                        </h6>\n                        <p className=\"max-w-[344px] line-clamp-1 subpixel-antialiased text-grayscale-600 text-[14px] block overflow-ellipsis break-all\">\n                            {issuerName}\n                        </p>\n                    </div>\n\n                    {issuerUrl && (\n                        <p className=\"text-indigo-500 font-bold text-xs width-full text-center mt-8\">\n                            {issuerUrl}\n                        </p>\n                    )}\n                </section>\n\n                <div className=\"w-full mt-2\"></div>\n\n                <button className=\"bg-white my-3 border-2 text-indigo-500 font-semibold py-2 px-4 border border-indigo-300 rounded-full\">\n                    <span className=\"flex justify-center\">\n                        <img\n                            className=\"h-8 w-8 my-0 mx-4 scale-x-[-1]\"\n                            src={FlipArrowRight ?? ''}\n                            alt=\"Flip Card\"\n                        />\n                    </span>\n                </button>\n\n                <section className=\"flex-col items-center justify-center checklist-container justify-center w-[100%] width-full mt-[20px]\">\n                    <VCVerificationCheckWithText loading={loading} />\n                    <section>\n                        {verification.map(item => (\n                            <VCVerificationPill\n                                key={item.check}\n                                status={item.status}\n                                message={item.message}\n                                details={item.details}\n                            />\n                        ))}\n                    </section>\n                </section>\n            </section>\n        </div>\n    );\n};\n\nexport default VCDisplayBackFace;\n"],"names":[],"mappings":"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"}

package/dist/esm/{VCDisplayCard-6b0274f9.js → VCDisplayCard-d9ff62dc.js}

@@ -1,7 +1,7 @@
 import React from 'react';
 import { F as FlippyCard } from './FlippyCard-682649d7.js';
 import { F as FatArrow } from './icon.green.fat-arrow-0e380302.js';
-import { F as FlipArrowRight, V as VCDisplayBackFace } from './VCDisplayBackFace-4ffe5733.js';
+import { g as getNameFromProfile, a as getImageFromProfile, F as FlipArrowRight, V as VCDisplayBackFace } from './VCDisplayBackFace-d603e35b.js';
 import { a as VCVerificationCheckWithText } from './VCVerificationCheck-15b8b886.js';
 
 function toInteger(dirtyNumber) {
@@ -2418,25 +2418,6 @@ function cleanEscapedString(input) {
 
 var DefaultFace = "data:image/jpeg;base64,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8856pq1lI8856pq1lI8856pq1lI8856pq1lI8856pq1lI8856pq1lI8856pq1lI8856pq1lI8856pq1lI8856pq1lI8856pq1lI8856pq1lI8856pq1lI8856pq1lI8856pq1lI8856pq1lI8856pq1lI8856pq1lI8856pq1lI8856pq1lI8856pq1lI8856pq1lI8856pq1lI8856pq1lI8856pq1lI8856pq1lI8856pq1lI8856pq1lI8856pq1lI8856pq1lI8856pq1lI8856pq1lI8856pq1lI8856pq1lI8856pq1lI8856pq1lI8856pq1lI8856pq1lI8856pq1lI8856pq1lI8856pq1lI8856pq1lI8856pq1lI8856pq1lI8856pq1lI8856pq1lI8856pq1lI8856pq1lI8856pq1lI8856pq1lI8856pq1lI8856pqkrxfYlXNx+SvF9iVc3H5K8X2JVzcfkrxfYlXNx+SvF9iVc3H5K8X2JVzcfkrxfYlXNx+SvF9iVc3H5K8X2JVzcfkrxfYlXNx+SvF9iVc3H5K8X2JVzcfkrxfYlXNx+SvF9iVc3H5K8X2JVzcfkrxfYlXNx+SvF9iVc3H5K8X2JVzcfkrxfYlXNx+SvF9iVc3H5K8X2JVzcfkrxfYlXNx+SvF9iVc33xEzqGKQhBMYR0AABpEajrDzDsAOuBWpP4/HTOwcMhoFcVnA/MewFIQkU2/AYNyfPsBU3ZljKM1RBAibkCiKSpQAtGAxTCUwaBAdAhvFmYYJmTKioIgiQonVpGMYIJAikzQKmAbOwFO7MQLkBBSNRKb9SaSVIfR422sXpyfJWpOzkvF6RcNR9X/qk+uTcJK8X2JVzfewdj38mBF19KDYdhh8R/IKi4ONiyAVq3ADe9Qe841o9AmAA0iIAFSVoYuPRUOo7SMcA7kiGAxhGllDLKqKm2nOJh8xHTvFj5hvFSJxcm7KKyfYE9NpBm4LpbukVPmQ5RrT6BKAgICHcNTNjI1+BlGoA2X+XgGpOIfxS/qXaIl+E20p/IfvpK8X2JVzfdlKJhAoAIiI6AAKs5Y1NsBHUiQDrbSo+4laA9EpauJjBMQyorLBtSSp/b2XXEQalTak/vPTqQfPBEXLtZUR+MwjvYCICAgOgaZ2hmWIh6h+ro+Ew9stR30hn7k5Fr/vRp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";
 
-const getImageFromImage = (image) => {
-  var _a;
-  if (typeof image === "string")
-    return image;
-  return (_a = image.id) != null ? _a : "";
-};
-const getNameFromProfile = (profile) => {
-  var _a;
-  if (typeof profile === "string")
-    return profile;
-  return (_a = profile.name) != null ? _a : "";
-};
-const getImageFromProfile = (profile) => {
-  var _a;
-  if (typeof profile === "string")
-    return "";
-  return getImageFromImage((_a = profile.image) != null ? _a : "");
-};
-
 const VCDisplayFrontFace = ({
   title,
   createdAt,
@@ -2457,7 +2438,7 @@ const VCDisplayFrontFace = ({
   }, /* @__PURE__ */ React.createElement("section", {
     className: "bg-white rounded-bl-[50%] rounded-br-[50%] absolute top-0 w-[110%] h-[77%]"
   }), /* @__PURE__ */ React.createElement("section", {
-    className: "flex flex-col items-center justify-center z-10 text-center"
+    className: "flex flex-col items-center justify-center z-10 text-center credential-thumb-img"
   }, /* @__PURE__ */ React.createElement("section", {
     className: "max-w-[100px] max-h-[100px]"
   }, /* @__PURE__ */ React.createElement("img", {
@@ -2472,7 +2453,7 @@ const VCDisplayFrontFace = ({
     className: "text-2xl line-clamp-2 tracking-wide leading-snug text-center",
     "data-testid": "vc-thumbnail-title"
   }, title != null ? title : ""))), /* @__PURE__ */ React.createElement("section", {
-    className: "flex flex-row items-center justify-center mt-2 w-full my-2"
+    className: "flex flex-row items-center justify-center mt-2 w-full my-2 vc-card-issuer-thumbs"
   }, /* @__PURE__ */ React.createElement("div", {
     className: "flex items-center justify-center h-16 w-16 shadow-3xl rounded-full overflow-hidden bg-white"
   }, /* @__PURE__ */ React.createElement("div", {
@@ -2494,7 +2475,7 @@ const VCDisplayFrontFace = ({
     src: issueeImage || DefaultFace,
     alt: "Issuee image"
   })))), /* @__PURE__ */ React.createElement("div", {
-    className: "w-full mt-2"
+    className: "w-full mt-2 vc-card-issued-to-info"
   }, /* @__PURE__ */ React.createElement("p", {
     className: "text-sm font-light text-center line-clamp-2",
     "data-testid": "vc-thumbnail-createdAt"
@@ -2564,4 +2545,4 @@ const VCDisplayCard = ({
 };
 
 export { VCDisplayCard as V };
-//# sourceMappingURL=VCDisplayCard-6b0274f9.js.map
+//# sourceMappingURL=VCDisplayCard-d9ff62dc.js.map