@eclass/ui-kit 1.63.1 → 1.64.0

package/dist/eclass-ui-kit.es.js

@@ -3503,8 +3503,21 @@ function BoxTraditional({
   modalPaymentText
 }) {
   var _a, _b, _c, _d, _e, _f, _g;
-  const isClickable = isCourseActive((_b = (_a = data.action) == null ? void 0 : _a.enabled) != null ? _b : false, (_c = data.Profile) == null ? void 0 : _c.id);
-  const hasHref = !!((_d = data.action) == null ? void 0 : _d.href);
+  const hasCustomClick = data.onClick !== void 0;
+  const isClickable = hasCustomClick || isCourseActive((_b = (_a = data.action) == null ? void 0 : _a.enabled) != null ? _b : false, (_c = data.Profile) == null ? void 0 : _c.id);
+  const hasHref = !hasCustomClick && !!((_d = data.action) == null ? void 0 : _d.href);
+  const handleClick = (event) => {
+    var _a2;
+    event.preventDefault();
+    (_a2 = data.onClick) == null ? void 0 : _a2.call(data, data);
+  };
+  const handleKeyDown = (event) => {
+    var _a2;
+    if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      (_a2 = data.onClick) == null ? void 0 : _a2.call(data, data);
+    }
+  };
   useEnterNavigate();
   const cssActive = {
     boxShadow: `0 2px 7px 0 ${vars("colors-neutral-silverSand")}`
@@ -3524,8 +3537,9 @@ function BoxTraditional({
         boxShadow: `0 0 0 3px ${vars("colors-alert-deepSkyBlue")} inset`
       },
       tabIndex: 0,
-      role: hasHref ? "link" : void 0,
+      role: hasHref ? "link" : hasCustomClick ? "button" : void 0,
       "data-href": hasHref ? (_e = data.action) == null ? void 0 : _e.href : void 0,
+      onKeyDown: hasCustomClick ? handleKeyDown : void 0,
       children: /* @__PURE__ */ jsx(WithRipples$1, {
         enabled: isClickable,
         children: /* @__PURE__ */ jsxs(Flex, {
@@ -3534,11 +3548,13 @@ function BoxTraditional({
           h: "100%",
           children: [/* @__PURE__ */ jsxs(Box, {
             className: "CourseList-TraditionalBox",
-            children: [isClickable && hasHref && /* @__PURE__ */ jsx(LinkOverlay, {
+            children: [isClickable && (hasHref || hasCustomClick) && /* @__PURE__ */ jsx(LinkOverlay, {
               className: "course-link-overlay",
+              "data-testid": "course-link-overlay",
               bg: "gray",
-              href: (_f = data.action) == null ? void 0 : _f.href,
-              isExternal: (_g = data.action) == null ? void 0 : _g.targetBlank,
+              href: hasHref ? (_f = data.action) == null ? void 0 : _f.href : void 0,
+              isExternal: hasHref && ((_g = data.action) == null ? void 0 : _g.targetBlank),
+              onClick: hasCustomClick ? handleClick : void 0,
               tabIndex: -1
             }), /* @__PURE__ */ jsx(Header$1, {}), /* @__PURE__ */ jsx(Section, {})]
           }), /* @__PURE__ */ jsx(Footer, {
@@ -3550,6 +3566,8 @@ function BoxTraditional({
   });
 }
 BoxTraditional.displayName = "BoxTraditional";
+const StyledLinkBox = LinkBox;
+const StyledLinkOverlay = LinkOverlay;
 function WithRipples({
   enabled,
   children
@@ -3567,14 +3585,29 @@ function BoxImage({
   size = "large",
   m: m2
 }) {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _i;
+  var _a, _b, _c, _d, _e, _f, _g;
+  const hasCustomClick = (data == null ? void 0 : data.onClick) !== void 0;
+  const isClickable = hasCustomClick || isCourseActive((_b = (_a = data == null ? void 0 : data.action) == null ? void 0 : _a.enabled) != null ? _b : false, (_c = data == null ? void 0 : data.Profile) == null ? void 0 : _c.id);
+  const hasHref = !hasCustomClick && !!((_d = data == null ? void 0 : data.action) == null ? void 0 : _d.href);
+  const handleClick = (event) => {
+    var _a2;
+    event.preventDefault();
+    (_a2 = data == null ? void 0 : data.onClick) == null ? void 0 : _a2.call(data, data);
+  };
+  const handleKeyDown = (event) => {
+    var _a2;
+    if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      (_a2 = data == null ? void 0 : data.onClick) == null ? void 0 : _a2.call(data, data);
+    }
+  };
   const boxHeight = {
     large: "286px",
     small: "197px"
   };
   return /* @__PURE__ */ jsx(WithRipples, {
-    enabled: isCourseActive((_b = (_a = data == null ? void 0 : data.action) == null ? void 0 : _a.enabled) != null ? _b : false, (_c = data == null ? void 0 : data.Profile) == null ? void 0 : _c.id),
-    children: /* @__PURE__ */ jsxs(LinkBox, {
+    enabled: isClickable,
+    children: /* @__PURE__ */ jsxs(StyledLinkBox, {
       className: "CourseList-ImageBox",
       _focusVisible: {
         boxShadow: `0 0 0 3px ${vars("colors-alert-deepSkyBlue")} inset`
@@ -3601,9 +3634,14 @@ function BoxImage({
           }
         }
       },
-      children: [!(data == null ? void 0 : data.hasFinanzeFreezed) && isCourseActive((_e = (_d = data == null ? void 0 : data.action) == null ? void 0 : _d.enabled) != null ? _e : false, (_f = data == null ? void 0 : data.Profile) == null ? void 0 : _f.id) && /* @__PURE__ */ jsx(LinkOverlay, {
-        href: (_g = data == null ? void 0 : data.action) == null ? void 0 : _g.href,
-        isExternal: (_h = data == null ? void 0 : data.action) == null ? void 0 : _h.targetBlank,
+      "aria-label": hasCustomClick ? title : void 0,
+      role: hasCustomClick ? "button" : void 0,
+      onKeyDown: hasCustomClick ? handleKeyDown : void 0,
+      children: [(hasCustomClick || !(data == null ? void 0 : data.hasFinanzeFreezed)) && isClickable && (hasHref || hasCustomClick) && /* @__PURE__ */ jsx(StyledLinkOverlay, {
+        "data-testid": "course-link-overlay",
+        href: hasHref ? (_e = data == null ? void 0 : data.action) == null ? void 0 : _e.href : void 0,
+        isExternal: hasHref && ((_f = data == null ? void 0 : data.action) == null ? void 0 : _f.targetBlank),
+        onClick: hasCustomClick ? handleClick : void 0,
         tabIndex: -1
       }), /* @__PURE__ */ jsxs(Box, {
         className: "textBox",
@@ -3620,7 +3658,7 @@ function BoxImage({
           marginBlockEnd: "0",
           margin: "0",
           children: title
-        }), (_i = data == null ? void 0 : data.information) == null ? void 0 : _i.map((item, index2) => item.icon === "certificate" && /* @__PURE__ */ jsx(Box, {
+        }), (_g = data == null ? void 0 : data.information) == null ? void 0 : _g.map((item, index2) => item.icon === "certificate" && /* @__PURE__ */ jsx(Box, {
           as: "p",
           className: "certificateText",
           fontSize: "14px",
@@ -9568,7 +9606,7 @@ const StandardBackground = ({
     })]
   });
 };
-const StyledText$2 = Text$1;
+const StyledText$3 = Text$1;
 const StyledLink$1 = Link;
 const Resources = ({
   id,
@@ -9650,7 +9688,7 @@ const Resources = ({
         gap: "8px",
         padding: "1rem",
         children: [/* @__PURE__ */ jsx(Box, {
-          children: /* @__PURE__ */ jsx(StyledText$2, {
+          children: /* @__PURE__ */ jsx(StyledText$3, {
             fontFamily: "Roboto",
             fontWeight: "700",
             lineHeight: "21px",
@@ -9660,7 +9698,7 @@ const Resources = ({
             children: resourceTitle
           })
         }), /* @__PURE__ */ jsx(Box, {
-          children: /* @__PURE__ */ jsx(StyledText$2, {
+          children: /* @__PURE__ */ jsx(StyledText$3, {
             fontFamily: "Roboto",
             fontWeight: "400",
             lineHeight: "14px",
@@ -9673,7 +9711,7 @@ const Resources = ({
           display: "flex",
           alignItems: "center",
           justifyContent: "center",
-          children: /* @__PURE__ */ jsxs(StyledText$2, {
+          children: /* @__PURE__ */ jsxs(StyledText$3, {
             fontFamily: "Roboto",
             fontWeight: "500",
             fontSize: "14px",
@@ -11288,9 +11326,9 @@ function CustomCloseIcon(props) {
     })
   });
 }
-const StyledImage$1 = Image;
-const StyledFlex$2 = Flex;
-const StyledText$1 = Text$1;
+const StyledImage$2 = Image;
+const StyledFlex$3 = Flex;
+const StyledText$2 = Text$1;
 const StyledDivider = Divider;
 const StyledLink = Link;
 const InitialShareContent = ({
@@ -11298,26 +11336,26 @@ const InitialShareContent = ({
   onLeaveReview
 }) => {
   return /* @__PURE__ */ jsxs(Fragment, {
-    children: [/* @__PURE__ */ jsxs(StyledFlex$2, {
+    children: [/* @__PURE__ */ jsxs(StyledFlex$3, {
       direction: "column",
       gap: "16px",
       alignItems: "center",
-      children: [/* @__PURE__ */ jsx(StyledImage$1, {
+      children: [/* @__PURE__ */ jsx(StyledImage$2, {
         w: "70px",
         h: "70px",
         alt: "cotill\xF3n de celebraci\xF3n",
         src: "https://cdn.eclass.com/vendors/apps/front_v8/assets/Common/celebration.webp"
-      }), /* @__PURE__ */ jsxs(StyledFlex$2, {
+      }), /* @__PURE__ */ jsxs(StyledFlex$3, {
         flexDir: "column",
         gap: "8px",
-        children: [/* @__PURE__ */ jsx(StyledText$1, {
+        children: [/* @__PURE__ */ jsx(StyledText$2, {
           as: "h6",
           fontSize: "xl",
           fontWeight: "bold",
           color: vars("colors-neutral-darkCharcoal"),
           m: "0",
           children: "\xA1Qu\xE9 bueno que quieras compartirlo!"
-        }), /* @__PURE__ */ jsx(StyledText$1, {
+        }), /* @__PURE__ */ jsx(StyledText$2, {
           fontSize: "md",
           color: vars("colors-neutral-darkCharcoal"),
           mb: "0",
@@ -11327,14 +11365,14 @@ const InitialShareContent = ({
     }), /* @__PURE__ */ jsx(BtnPrimary, {
       onClick: handleLinkedinClick,
       children: "Continuar a LinkedIn"
-    }), /* @__PURE__ */ jsxs(StyledFlex$2, {
+    }), /* @__PURE__ */ jsxs(StyledFlex$3, {
       align: "center",
       width: "100%",
       gap: "16px",
       children: [/* @__PURE__ */ jsx(StyledDivider, {
         borderColor: vars("colors-neutral-platinum"),
         m: "0"
-      }), /* @__PURE__ */ jsx(StyledText$1, {
+      }), /* @__PURE__ */ jsx(StyledText$2, {
         fontSize: "sm",
         color: vars("colors-neutral-gray"),
         whiteSpace: "nowrap",
@@ -11344,14 +11382,14 @@ const InitialShareContent = ({
         borderColor: vars("colors-neutral-platinum"),
         m: "0"
       })]
-    }), /* @__PURE__ */ jsx(StyledText$1, {
+    }), /* @__PURE__ */ jsx(StyledText$2, {
       as: "p",
       fontSize: "md",
       fontWeight: "700",
       color: vars("colors-neutral-darkCharcoal"),
       mb: "0",
       children: "\xBFQu\xE9 tal fue aprender con nosotros?"
-    }), /* @__PURE__ */ jsxs(StyledFlex$2, {
+    }), /* @__PURE__ */ jsxs(StyledFlex$3, {
       align: "center",
       justify: "center",
       gap: "8px",
@@ -11373,14 +11411,14 @@ const InitialShareContent = ({
     })]
   });
 };
-const StyledImage = Image;
-const StyledFlex$1 = Flex;
-const StyledText = Text$1;
+const StyledImage$1 = Image;
+const StyledFlex$2 = Flex;
+const StyledText$1 = Text$1;
 const AfterShareContent = ({
   onClose,
   onLeaveReview
 }) => {
-  return /* @__PURE__ */ jsxs(StyledFlex$1, {
+  return /* @__PURE__ */ jsxs(StyledFlex$2, {
     flexDir: "column",
     alignItems: "center",
     gap: "16px",
@@ -11394,19 +11432,19 @@ const AfterShareContent = ({
         p: "0"
       }
     },
-    children: [/* @__PURE__ */ jsx(StyledImage, {
+    children: [/* @__PURE__ */ jsx(StyledImage$1, {
       w: "70px",
       h: "70px",
       alt: "cotill\xF3n de celebraci\xF3n",
       src: "https://cdn.eclass.com/vendors/apps/front_v8/assets/Common/celebration.webp"
-    }), /* @__PURE__ */ jsx(StyledText, {
+    }), /* @__PURE__ */ jsx(StyledText$1, {
       as: "h6",
       fontSize: "xl",
       fontWeight: "bold",
       color: vars("colors-neutral-darkCharcoal"),
       m: "0",
       children: "\xBFYa lo compartiste en LinkedIn?"
-    }), /* @__PURE__ */ jsxs(StyledText, {
+    }), /* @__PURE__ */ jsxs(StyledText$1, {
       fontSize: "md",
       fontWeight: "400",
       color: vars("colors-neutral-darkCharcoal"),
@@ -11430,7 +11468,7 @@ const AfterShareContent = ({
 };
 const StyledModalContent = ModalContent$1;
 const StyledIconButton = IconButton;
-const StyledFlex = Flex;
+const StyledFlex$1 = Flex;
 const ShareAndReviewModal = ({
   isOpen,
   onClose,
@@ -11486,7 +11524,7 @@ const ShareAndReviewModal = ({
         _focusVisible: {
           boxShadow: `0 0 0 3px ${vars("colors-alert-deepSkyBlue")} inset`
         }
-      }), /* @__PURE__ */ jsx(StyledFlex, {
+      }), /* @__PURE__ */ jsx(StyledFlex$1, {
         direction: "column",
         align: "center",
         textAlign: "center",
@@ -11502,5 +11540,57 @@ const ShareAndReviewModal = ({
     })]
   });
 };
-export { Alert, Btn, BtnLink, BtnPrimary, BtnSecondary, BtnTertiary, CalendarDropdown, CourseList, CourseStatus, Eventos, EventsList, FlashNotification, index$1 as Icons, Label, Modal, ModalAlert, ModalAlertButtons, ModalAlertNew, ModalButtons, ModalCard, ModalCardContent, ModalContent, ModalMultiple, ModalSimple, NavBarButton, NewTooltip, Progress, Resources, Ripples, ShareAndReviewModal, TinyAlert, UserDropdown, UserWay, UserWayCookie, dataFake, maxWidthCoursesList, theme, useFlashNotification, vars };
+const StyledText = Text$1;
+const StyledFlex = Flex;
+const StyledImage = Image;
+const SimpleCourseBox = ({
+  img,
+  courseName,
+  icon,
+  label
+}) => {
+  return /* @__PURE__ */ jsxs(StyledFlex, {
+    alignItems: "center",
+    justifyContent: "space-between",
+    p: "16px 0",
+    borderBottom: `1px solid ${vars("colors-neutral-platinum")}`,
+    children: [/* @__PURE__ */ jsxs(StyledFlex, {
+      gap: "24px",
+      alignItems: "center",
+      children: [/* @__PURE__ */ jsx(StyledImage, {
+        src: img,
+        w: "150px",
+        h: "74px",
+        borderRadius: "10px"
+      }), /* @__PURE__ */ jsxs(StyledFlex, {
+        flexDirection: "column",
+        gap: "8px",
+        justifyContent: "center",
+        children: [/* @__PURE__ */ jsx("strong", {
+          children: courseName
+        }), icon && label && /* @__PURE__ */ jsxs(StyledText, {
+          m: "0",
+          fontSize: "14px",
+          lineHeight: "19px",
+          display: "flex",
+          gap: "10px",
+          maxW: "395px",
+          sx: {
+            svg: {
+              verticalAlign: "top"
+            }
+          },
+          children: [/* @__PURE__ */ jsx(IconSelection, {
+            type: icon
+          }), " ", label]
+        })]
+      })]
+    }), /* @__PURE__ */ jsx(Box, {
+      children: /* @__PURE__ */ jsx(ArrowRight, {
+        color: "#60798E"
+      })
+    })]
+  });
+};
+export { Alert, Btn, BtnLink, BtnPrimary, BtnSecondary, BtnTertiary, CalendarDropdown, CourseList, CourseStatus, Eventos, EventsList, FlashNotification, index$1 as Icons, Label, Modal, ModalAlert, ModalAlertButtons, ModalAlertNew, ModalButtons, ModalCard, ModalCardContent, ModalContent, ModalMultiple, ModalSimple, NavBarButton, NewTooltip, Progress, Resources, Ripples, ShareAndReviewModal, SimpleCourseBox, TinyAlert, UserDropdown, UserWay, UserWayCookie, dataFake, maxWidthCoursesList, theme, useFlashNotification, vars };
 //# sourceMappingURL=eclass-ui-kit.es.js.map