@learncard/react 2.2.6 → 2.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +25 -1
- package/dist/base.css +1 -0
- package/dist/base.js +3 -0
- package/dist/cjs/{Notification-e4f124f5.js → Notification-cf0cdc81.js} +2 -4
- package/dist/cjs/Notification-cf0cdc81.js.map +1 -0
- package/dist/cjs/{VCCard-67d87d52.js → VCCard-34e5c166.js} +1 -2
- package/dist/{esm/VCCard-a0242924.js.map → cjs/VCCard-34e5c166.js.map} +1 -1
- package/dist/cjs/index.js +2 -2
- package/dist/cjs/index11.js +1 -1
- package/dist/cjs/index5.js +2 -2
- package/dist/cjs/index8.js +1 -1
- package/dist/esm/{Notification-98535e6d.js → Notification-4e197485.js} +2 -4
- package/dist/esm/Notification-4e197485.js.map +1 -0
- package/dist/esm/{VCCard-a0242924.js → VCCard-3dba135e.js} +1 -2
- package/dist/{cjs/VCCard-67d87d52.js.map → esm/VCCard-3dba135e.js.map} +1 -1
- package/dist/esm/index.js +2 -2
- package/dist/esm/index11.js +1 -1
- package/dist/esm/index5.js +2 -2
- package/dist/esm/index8.js +1 -1
- package/dist/main.css +1 -0
- package/dist/main.js +3 -0
- package/package.json +3 -5
- package/dist/cjs/Notification-e4f124f5.js.map +0 -1
- package/dist/esm/Notification-98535e6d.js.map +0 -1
package/dist/cjs/index.js
CHANGED
|
@@ -7,9 +7,9 @@ var CircleIcon = require('./CircleIcon-c71f0a51.js');
|
|
|
7
7
|
var FlippyCard = require('./FlippyCard-33e03a9e.js');
|
|
8
8
|
var CircleSpinner = require('./CircleSpinner-093cce04.js');
|
|
9
9
|
var MiniVCThumbnail = require('./MiniVCThumbnail-ea29644e.js');
|
|
10
|
-
var Notification = require('./Notification-
|
|
10
|
+
var Notification = require('./Notification-cf0cdc81.js');
|
|
11
11
|
var RoundedSquare = require('./RoundedSquare-a577d49f.js');
|
|
12
|
-
var VCCard = require('./VCCard-
|
|
12
|
+
var VCCard = require('./VCCard-34e5c166.js');
|
|
13
13
|
var VCDisplayBackFace = require('./VCDisplayBackFace-e8fb0c83.js');
|
|
14
14
|
var VCDisplayCard = require('./VCDisplayCard-dfda9090.js');
|
|
15
15
|
var VCThumbnail = require('./VCThumbnail-b45b8244.js');
|
package/dist/cjs/index11.js
CHANGED
package/dist/cjs/index5.js
CHANGED
|
@@ -7,9 +7,9 @@ var CircleIcon = require('./CircleIcon-c71f0a51.js');
|
|
|
7
7
|
var FlippyCard = require('./FlippyCard-33e03a9e.js');
|
|
8
8
|
var CircleSpinner = require('./CircleSpinner-093cce04.js');
|
|
9
9
|
var MiniVCThumbnail = require('./MiniVCThumbnail-ea29644e.js');
|
|
10
|
-
var Notification = require('./Notification-
|
|
10
|
+
var Notification = require('./Notification-cf0cdc81.js');
|
|
11
11
|
var RoundedSquare = require('./RoundedSquare-a577d49f.js');
|
|
12
|
-
var VCCard = require('./VCCard-
|
|
12
|
+
var VCCard = require('./VCCard-34e5c166.js');
|
|
13
13
|
var VCDisplayBackFace = require('./VCDisplayBackFace-e8fb0c83.js');
|
|
14
14
|
var VCDisplayCard = require('./VCDisplayCard-dfda9090.js');
|
|
15
15
|
var VCThumbnail = require('./VCThumbnail-b45b8244.js');
|
package/dist/cjs/index8.js
CHANGED
|
@@ -102,7 +102,7 @@ const Notification = ({
|
|
|
102
102
|
})), /* @__PURE__ */ React.createElement("div", {
|
|
103
103
|
className: "text-left ml-3"
|
|
104
104
|
}, /* @__PURE__ */ React.createElement("h4", {
|
|
105
|
-
className: "font-bold tracking-wide line-clamp-1",
|
|
105
|
+
className: "font-bold tracking-wide line-clamp-1 text-black",
|
|
106
106
|
"data-testid": "notification-title"
|
|
107
107
|
}, title), /* @__PURE__ */ React.createElement("p", {
|
|
108
108
|
className: `font-semibold p-0 m-0 leading-none tracking-wide line-clamp-1 ${textStyles}`,
|
|
@@ -118,12 +118,10 @@ const Notification = ({
|
|
|
118
118
|
className: "flex items-center justify-between w-full mt-3"
|
|
119
119
|
}, /* @__PURE__ */ React.createElement("button", {
|
|
120
120
|
onClick,
|
|
121
|
-
type: "button",
|
|
122
121
|
className: `flex-1 rounded-[24px] border-solid border-2 bg-white font-semibold mr-2 py-2 px-3 tracking-wide ${viewButtonStyles}`,
|
|
123
122
|
role: "button",
|
|
124
123
|
name: "notification-view-button"
|
|
125
124
|
}, "View"), /* @__PURE__ */ React.createElement("button", {
|
|
126
|
-
type: "button",
|
|
127
125
|
className: `flex items-center justify-center flex-1 rounded-[24px] border-2 border-solid font-semibold py-2 px-3 tracking-wide ${claimButtonStyles}`,
|
|
128
126
|
onClick: handleClaim,
|
|
129
127
|
role: "button",
|
|
@@ -134,4 +132,4 @@ const Notification = ({
|
|
|
134
132
|
};
|
|
135
133
|
|
|
136
134
|
export { Notification as N, NotificationTypeStyles as a };
|
|
137
|
-
//# sourceMappingURL=Notification-
|
|
135
|
+
//# sourceMappingURL=Notification-4e197485.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Notification-4e197485.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}\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';\n\nexport type NotificationProps = {\n notificationType: NotificationTypeEnum;\n title: string;\n issuerImage?: string;\n issuerName: string;\n issueDate: string;\n className?: string;\n onClick: () => void;\n};\n\nexport const NotificationTypeStyles = {\n [NotificationTypeEnum.Currency]: {\n viewButtonStyles: 'border-cyan-400 text-cyan-400',\n unclaimedButtonStyles: 'text-white bg-cyan-400 border-cyan-400',\n claimedButtonStyles: 'text-cyan-400 bg-cyan-50 border-cyan-50',\n textStyles: 'text-cyan-400 capitalize',\n iconCircleStyles: 'bg-cyan-400',\n IconComponent: Coins,\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 },\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 },\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 },\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 },\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 },\n};\n","import React, { useState } 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 issuerName,\n issueDate,\n className,\n notificationType = NotificationTypeEnum.Achievement,\n onClick = () => {},\n}) => {\n const [isClaimed, setIsClaimed] = useState<boolean>(false);\n\n const handleClaim = () => setIsClaimed(!isClaimed);\n\n const {\n IconComponent,\n iconCircleStyles,\n textStyles,\n viewButtonStyles,\n claimedButtonStyles,\n unclaimedButtonStyles,\n } = NotificationTypeStyles[notificationType];\n\n const claimButtonStyles = isClaimed ? claimedButtonStyles : unclaimedButtonStyles;\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 {notificationType} / <span className=\"normal-case\">lorem ipsum</span>\n </p>\n <p\n className=\"text-grayscale-600 p-0 m-0 leading-none tracking-wide mt-[1px] line-clamp-1\"\n data-testid=\"notification-issuer-name\"\n >\n Issued by {issuerName} •{' '}\n <span data-testid=\"notification-cred-issue-date\">{issueDate}</span>\n </p>\n </div>\n </div>\n <div className=\"flex items-center justify-between w-full mt-3\">\n <button\n onClick={onClick}\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={handleClaim}\n role=\"button\"\n name=\"notification-claim-button\"\n >\n {isClaimed && <Checkmark className=\"h-[24px] p-0 m-0\" />}{' '}\n {isClaimed ? 'Claimed' : 'Claim'}\n </button>\n </div>\n </div>\n </div>\n );\n};\n\nexport default Notification;\n"],"names":[],"mappings":"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"}
|
|
@@ -138224,7 +138224,6 @@ var __async = (__this, __arguments, generator) => {
|
|
|
138224
138224
|
});
|
|
138225
138225
|
};
|
|
138226
138226
|
const VCCard = ({ credential, issueeOverride, className = "" }) => {
|
|
138227
|
-
console.log(React.version);
|
|
138228
138227
|
const [loading, setLoading] = useState(true);
|
|
138229
138228
|
const [vcVerification, setVCVerification] = useState([]);
|
|
138230
138229
|
useEffect(() => {
|
|
@@ -138246,4 +138245,4 @@ const VCCard = ({ credential, issueeOverride, className = "" }) => {
|
|
|
138246
138245
|
};
|
|
138247
138246
|
|
|
138248
138247
|
export { VCCard as V };
|
|
138249
|
-
//# sourceMappingURL=VCCard-
|
|
138248
|
+
//# sourceMappingURL=VCCard-3dba135e.js.map
|