@eclass/ui-kit 1.18.3 → 1.19.0

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

@@ -30294,7 +30294,7 @@ function Footer({
     borderTop: "1px solid",
     borderTopColor: vars("colors-neutral-platinum"),
     children: [isCourseActive(action.enabled, Profile2 == null ? void 0 : Profile2.id) ? /* @__PURE__ */ jsxs(Fragment, {
-      children: [hasFinanzeFreezed ? /* @__PURE__ */ jsx(Box, {
+      children: [hasFinanzeFreezed && modalPaymentText ? /* @__PURE__ */ jsx(Box, {
         color: vars("colors-main-deepSkyBlue"),
         backgroundColor: "transparent",
         fontWeight: "500",
@@ -30326,7 +30326,7 @@ function Footer({
       color: vars("colors-neutral-spanishGrey"),
       m: "0",
       children: action.text
-    }), /* @__PURE__ */ jsx(PaymentModal, {
+    }), modalPaymentText && /* @__PURE__ */ jsx(PaymentModal, {
       isOpen,
       onClose,
       showOverlay: overlay,
@@ -30337,7 +30337,7 @@ function Footer({
 }
 Footer.displayName = "Footer";
 const CourseBoxContext = React.createContext({});
-function WithRipples({
+function WithRipples$1({
   enabled,
   children
 }) {
@@ -30347,7 +30347,7 @@ function WithRipples({
     children
   });
 }
-function CourseBox({
+function BoxTraditional({
   data,
   modalPaymentText
 }) {
@@ -30367,13 +30367,14 @@ function CourseBox({
       _hover: cssActive,
       _focus: cssActive,
       overflow: "hidden",
-      children: /* @__PURE__ */ jsx(WithRipples, {
+      children: /* @__PURE__ */ jsx(WithRipples$1, {
         enabled: isCourseActive((_b = (_a = data.action) == null ? void 0 : _a.enabled) != null ? _b : false, (_c = data.Profile) == null ? void 0 : _c.id),
         children: /* @__PURE__ */ jsxs(Flex, {
           direction: "column",
           justify: "space-between",
           h: "100%",
           children: [/* @__PURE__ */ jsxs(Box, {
+            className: "CourseList-TraditionalBox",
             children: [!data.hasFinanzeFreezed && isCourseActive((_e = (_d = data.action) == null ? void 0 : _d.enabled) != null ? _e : false, (_f = data.Profile) == null ? void 0 : _f.id) && /* @__PURE__ */ jsx(LinkOverlay, {
               href: (_g = data.action) == null ? void 0 : _g.href,
               isExternal: (_h = data.action) == null ? void 0 : _h.targetBlank
@@ -30386,13 +30387,110 @@ function CourseBox({
     })
   });
 }
-CourseBox.displayName = "CourseBox";
+BoxTraditional.displayName = "BoxTraditional";
+function WithRipples({
+  enabled,
+  children
+}) {
+  return enabled ? /* @__PURE__ */ jsx(Ripples, {
+    children
+  }) : /* @__PURE__ */ jsx(Fragment, {
+    children
+  });
+}
+function BoxImage({
+  backgroundImg,
+  title,
+  data,
+  size: size2 = "large",
+  m: m2
+}) {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i;
+  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(Box, {
+      className: "CourseList-ImageBox",
+      sx: {
+        backgroundImage: `linear-gradient(to bottom, rgba(0,0,0,0) 35%, rgba(0,0,0,1) 100%), url(${backgroundImg})`,
+        color: vars("colors-neutral-white"),
+        cursor: "pointer",
+        height: boxHeight[size2],
+        backgroundSize: "cover",
+        backgroundPosition: "center",
+        borderRadius: "10px",
+        padding: "16px",
+        display: "flex",
+        font: "Roboto",
+        flexDirection: "column",
+        margin: m2,
+        justifyContent: "end",
+        textAlign: "left"
+      },
+      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
+      }), /* @__PURE__ */ jsxs(Box, {
+        className: "textBox",
+        bottom: "20px",
+        display: "flex",
+        flexDirection: "column",
+        gap: "8px",
+        children: [/* @__PURE__ */ jsx(Box, {
+          as: "h2",
+          className: "courseName",
+          fontWeight: "700",
+          fontSize: "16px",
+          lineHeight: "21px",
+          children: title
+        }), (_i = data == null ? void 0 : data.information) == null ? void 0 : _i.map((item, index2) => item.icon === "certificate" ? /* @__PURE__ */ jsx(Box, {
+          as: "p",
+          className: "certificateText",
+          fontSize: "14px",
+          fontWeight: "400",
+          lineHeight: "12px",
+          children: item.text
+        }, index2) : /* @__PURE__ */ jsx(Fragment, {}))]
+      })]
+    })
+  });
+}
+BoxImage.displayName = "BoxImage";
+const Boxes = ({
+  type = "TRADITIONAL",
+  data,
+  modalPaymentText
+}) => {
+  var _a, _b;
+  const common = {
+    data,
+    modalPaymentText
+  };
+  const commonImg = {
+    data,
+    backgroundImg: (_a = data.background) != null ? _a : "",
+    title: (_b = data.name) != null ? _b : ""
+  };
+  const typeBox = {
+    TRADITIONAL: /* @__PURE__ */ jsx(BoxTraditional, __spreadValues({}, common)),
+    TRADITIONAL_LANDSCAPE: /* @__PURE__ */ jsx(BoxTraditional, __spreadValues({}, common)),
+    IMAGE_LARGE: /* @__PURE__ */ jsx(BoxImage, __spreadValues({}, commonImg)),
+    IMAGE_SMALL: /* @__PURE__ */ jsx(BoxImage, __spreadProps(__spreadValues({}, commonImg), {
+      size: "small"
+    }))
+  };
+  return typeBox[type];
+};
 const columnGap = 1.25;
 const wCourse = 17.8125;
 function CourseList({
   courses,
   modalPaymentText,
-  m: m2 = "0 auto"
+  m: m2 = "0 auto",
+  typeBox = "TRADITIONAL"
 }) {
   if (courses === void 0) {
     return null;
@@ -30404,8 +30502,9 @@ function CourseList({
     gridTemplateColumns: `repeat(auto-fill, minmax(${wCourse}rem, 1fr))`,
     m: m2,
     w: "100%",
-    children: courses == null ? void 0 : courses.map((course) => /* @__PURE__ */ jsx(CourseBox, {
+    children: courses == null ? void 0 : courses.map((course) => /* @__PURE__ */ jsx(Boxes, {
       data: course,
+      type: typeBox,
       modalPaymentText
     }, course.id))
   });