@eclass/ui-kit 1.52.9 → 1.52.11

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

@@ -4091,7 +4091,7 @@ function ModalAlert({
   });
 }
 ModalAlert.displayName = "ModalAlert";
-const Calendar$1 = ({
+const Calendar = ({
   color = "white"
 }) => {
   return /* @__PURE__ */ jsxs(Icon, {
@@ -4124,7 +4124,7 @@ const Calendar$1 = ({
     })]
   });
 };
-const Clock$1 = ({
+const Clock = ({
   color = "white"
 }) => {
   return /* @__PURE__ */ jsx(Icon, {
@@ -4201,7 +4201,7 @@ const LargeBox = ({
               display: "flex",
               alignItems: "center",
               gap: "4px",
-              children: [/* @__PURE__ */ jsx(Calendar$1, {
+              children: [/* @__PURE__ */ jsx(Calendar, {
                 color: vars("colors-main-ziggurat")
               }), /* @__PURE__ */ jsx(Text, {
                 fontWeight: "400",
@@ -4213,7 +4213,7 @@ const LargeBox = ({
                 m: "0px",
                 p: "0px",
                 children: "|"
-              }), /* @__PURE__ */ jsx(Clock$1, {
+              }), /* @__PURE__ */ jsx(Clock, {
                 color: vars("colors-main-ziggurat")
               }), /* @__PURE__ */ jsx(Text, {
                 m: "0px",
@@ -4302,14 +4302,14 @@ const SmallBox = ({
               display: "flex",
               alignItems: "center",
               gap: "4px",
-              children: [/* @__PURE__ */ jsx(Calendar$1, {}), /* @__PURE__ */ jsx(Text, {
+              children: [/* @__PURE__ */ jsx(Calendar, {}), /* @__PURE__ */ jsx(Text, {
                 fontWeight: "400",
                 m: "0px",
                 children: startDate
               }), /* @__PURE__ */ jsx(Text, {
                 m: "0px",
                 children: "|"
-              }), /* @__PURE__ */ jsx(Clock$1, {}), /* @__PURE__ */ jsx(Text, {
+              }), /* @__PURE__ */ jsx(Clock, {}), /* @__PURE__ */ jsx(Text, {
                 m: "0px",
                 children: startTime
               })]
@@ -5762,6 +5762,7 @@ const useParseEvents = (events, now) => {
   const [tomorrowEvents, setTomorrowEvents] = useState([]);
   const [nextEvents, setNextEvents] = useState([]);
   const [hasNew, setHasNew] = useState(false);
+  const [hasMoreNext, setHasMoreNext] = useState(false);
   useEffect(() => {
     var _a, _b;
     const parseNow = parseISO(now);
@@ -5794,6 +5795,7 @@ const useParseEvents = (events, now) => {
     setTomorrowEvents(tomorrowList);
     let next = [...nextList];
     if (nextList.length > 5) {
+      setHasMoreNext(true);
       next = next.slice(0, 5);
     }
     setNextEvents(next);
@@ -5821,7 +5823,8 @@ const useParseEvents = (events, now) => {
     next: nextEvents,
     hasNew,
     closeAndMarkSeen,
-    empty
+    empty,
+    hasMoreNext
   };
 };
 const CalendarButtonIcon = () => /* @__PURE__ */ jsxs("svg", {
@@ -6059,55 +6062,73 @@ const EventsGroup = ({
   title,
   events,
   text,
-  colors: colors2
+  textSeeMore,
+  textLinkMore,
+  colors: colors2,
+  redirect,
+  hasMoreNext
 }) => {
   var _a;
   if (!events || events && events.length === 0)
     return /* @__PURE__ */ jsx(Fragment, {});
-  return /* @__PURE__ */ jsx(Box, {
-    className: "calendar-events-group",
-    _focus: {
-      background: "none !important",
-      border: `1px solid ${(_a = vars("colors-icon-deepSkyBlue")) != null ? _a : "#0189FF"}`
-    },
-    sx: {
-      ".chakra-menu__menuitem > div": {
-        w: "100%"
-      }
-    },
-    children: /* @__PURE__ */ jsx(MenuGroup, {
-      title,
-      children: events.map((event) => {
-        var _a2;
-        return /* @__PURE__ */ jsx(Box, {
-          bg: (_a2 = vars("colors-neutral-white")) != null ? _a2 : "#FFFFFF",
-          border: "none",
-          cursor: "default",
-          padding: "0",
-          _hover: {
-            boxShadow: "none !important",
-            cursor: "default !important",
-            bg: "none !important"
-          },
-          _focus: {
-            background: "none !important",
-            boxShadow: "none !important"
-          },
-          children: /* @__PURE__ */ jsx(EventsList, {
-            name: event.associated_resource.name || "",
-            courseName: event.course.name,
-            day: event.formatedDate.day,
-            date: event.formatedDate.date,
-            time: event.formatedDate.time,
-            color: event.course_id && (colors2 == null ? void 0 : colors2[event.course_id]) ? colors2[event.course_id] : "#82504A",
-            text,
-            type: event.type,
-            hasNotification: event.isNew,
-            showCourse: true
-          }, event.id)
-        }, event.id);
+  return /* @__PURE__ */ jsxs(Fragment, {
+    children: [/* @__PURE__ */ jsx(Box, {
+      className: "calendar-events-group",
+      _focus: {
+        background: "none !important",
+        border: `1px solid ${(_a = vars("colors-icon-deepSkyBlue")) != null ? _a : "#0189FF"}`
+      },
+      sx: {
+        ".chakra-menu__menuitem > div": {
+          w: "100%"
+        }
+      },
+      children: /* @__PURE__ */ jsx(MenuGroup, {
+        title,
+        children: events.map((event) => {
+          var _a2;
+          return /* @__PURE__ */ jsx(Box, {
+            bg: (_a2 = vars("colors-neutral-white")) != null ? _a2 : "#FFFFFF",
+            border: "none",
+            cursor: "default",
+            padding: "0",
+            _hover: {
+              boxShadow: "none !important",
+              cursor: "default !important",
+              bg: "none !important"
+            },
+            _focus: {
+              background: "none !important",
+              boxShadow: "none !important"
+            },
+            children: /* @__PURE__ */ jsx(EventsList, {
+              name: event.associated_resource.name || "",
+              courseName: event.course.name,
+              day: event.formatedDate.day,
+              date: event.formatedDate.date,
+              time: event.formatedDate.time,
+              color: event.course_id && (colors2 == null ? void 0 : colors2[event.course_id]) ? colors2[event.course_id] : "#82504A",
+              text,
+              type: event.type,
+              hasNotification: event.isNew,
+              showCourse: true
+            }, event.id)
+          }, event.id);
+        })
       })
-    })
+    }), hasMoreNext && /* @__PURE__ */ jsxs(Box, {
+      display: "flex",
+      alignItems: "center",
+      padding: "16px 0 0 16px",
+      children: [/* @__PURE__ */ jsx(Box, {
+        as: "span",
+        fontSize: "14px",
+        children: textSeeMore
+      }), " ", /* @__PURE__ */ jsx(BtnLink, {
+        onClick: redirect,
+        children: textLinkMore
+      })]
+    })]
   });
 };
 const Events = ({
@@ -6115,9 +6136,10 @@ const Events = ({
   text,
   redirecToCalendar,
   isMobile,
-  colors: colors2
+  colors: colors2,
+  hasMoreNext
 }) => {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m;
   const {
     today,
     tomorrow,
@@ -6144,9 +6166,9 @@ const Events = ({
           minH: "fit-content"
         }
       },
-      children: /* @__PURE__ */ jsx(BtnSecondary, {
+      children: /* @__PURE__ */ jsx(BtnPrimary, {
         onClick: redirecToCalendar,
-        m: "72px 0 0 24px",
+        m: "72px 0 0 16px",
         id: "RedirectButton",
         children: (_b = text == null ? void 0 : text.buttonCalendar) != null ? _b : "Ir a Mi Calendario"
       })
@@ -6161,10 +6183,14 @@ const Events = ({
       title: (_h = (_g = text == null ? void 0 : text.events) == null ? void 0 : _g.tomorrow) != null ? _h : "Ma\xF1ana",
       events: tomorrow
     }), /* @__PURE__ */ jsx(EventsGroup, {
+      hasMoreNext,
       colors: colors2,
-      text: (_i = text == null ? void 0 : text.course) != null ? _i : "",
-      title: (_k = (_j = text == null ? void 0 : text.events) == null ? void 0 : _j.next) != null ? _k : "Pr\xF3ximos",
-      events: next
+      textSeeMore: (_i = text == null ? void 0 : text.seeMore.see) != null ? _i : "Ver m\xE1s fechas en",
+      textLinkMore: (_j = text == null ? void 0 : text.seeMore.link) != null ? _j : "Mi calendario",
+      text: (_k = text == null ? void 0 : text.course) != null ? _k : "",
+      title: (_m = (_l = text == null ? void 0 : text.events) == null ? void 0 : _l.next) != null ? _m : "Pr\xF3ximos",
+      events: next,
+      redirect: redirecToCalendar
     })]
   });
 };
@@ -6184,6 +6210,7 @@ const CalendarDropdownContainer = ({
     closeAndMarkSeen,
     empty,
     hasNew,
+    hasMoreNext,
     ...all
   } = useParseEvents(events, now);
   const [isTooltipDisabled, setTooltipDisabled] = useState(false);
@@ -6283,7 +6310,7 @@ const CalendarDropdownContainer = ({
         fontWeight: "700",
         lineHeight: "31px",
         margin: "32px 0 0",
-        padding: "0 0 8px 24px"
+        padding: "0 0 8px 16px"
       },
       ".react-ripples": {
         width: "inherit"
@@ -6310,6 +6337,7 @@ const CalendarDropdownContainer = ({
             }) : events.length === 0 || empty ? /* @__PURE__ */ jsx(Empty, {
               text: (_g = text == null ? void 0 : text.empty) != null ? _g : "A\xFAn no tienes eventos en tu calendario"
             }) : /* @__PURE__ */ jsx(Events, {
+              hasMoreNext,
               colors: courseColors,
               events: all,
               text,
@@ -6352,33 +6380,6 @@ const CalendarDropdown = ({
     onlyToCalendar
   });
 };
-function Calendar(props) {
-  return /* @__PURE__ */ jsx(Base, {
-    ...props,
-    title: "Calendar",
-    children: /* @__PURE__ */ jsxs("g", {
-      fill: "#B0CFE0",
-      children: [/* @__PURE__ */ jsx("path", {
-        fill: "#B0CFE0",
-        d: "M15 2h-2V0h-2v2H9V0H7v2H5V0H3v2H1a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1zm-1 12H2V5h12v9z"
-      }), /* @__PURE__ */ jsx("path", {
-        d: "M4 7h2v2H4zM7 7h2v2H7zM4 10h2v2H4zM7 10h2v2H7zM10 7h2v2h-2zM10 10h2v2h-2z"
-      })]
-    })
-  });
-}
-Calendar.displayName = "Calendar";
-function Clock(props) {
-  return /* @__PURE__ */ jsx(Base, {
-    ...props,
-    title: "Clock",
-    children: /* @__PURE__ */ jsx("path", {
-      fill: "#B0CFE0",
-      d: "M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm4 9H7V4h2v3h3v2z"
-    })
-  });
-}
-Clock.displayName = "Clock";
 const NotificationIcon = () => /* @__PURE__ */ jsx("svg", {
   xmlns: "http://www.w3.org/2000/svg",
   width: "8px",
@@ -6407,7 +6408,6 @@ const EventsList = ({
   unitName
 }) => {
   var _a, _b;
-  const [isMobile] = useMediaQuery("(max-width: 580px)");
   const border = `1px solid ${(_a = vars("colors-neutral-platinum")) != null ? _a : "#E8E8E8"}`;
   const initOrEnd = ["end-course", "init-course", "init-course-flexible", "end-course-flexible"].includes(type);
   const dateTextStyle = {
@@ -6426,10 +6426,10 @@ const EventsList = ({
   return /* @__PURE__ */ jsxs(Box, {
     className: "eventsList",
     borderTop: border,
-    p: "16px 24px",
+    p: "16px",
     display: "flex",
     gap: "12px",
-    children: [!isMobile && /* @__PURE__ */ jsxs(Box, {
+    children: [/* @__PURE__ */ jsxs(Box, {
       bg: color,
       minW: "80px",
       minH: "80px",
@@ -6453,6 +6453,7 @@ const EventsList = ({
         fontSize: "14px",
         fontWeight: "700",
         color: vars("colors-neutral-white"),
+        lineHeight: "normal",
         children: time
       })]
     }), /* @__PURE__ */ jsxs(Box, {
@@ -6466,59 +6467,23 @@ const EventsList = ({
         justifyContent: "space-between",
         alignItems: "center",
         fontSize: "16px",
-        fontWeight: isMobile ? "400" : "700",
+        fontWeight: "700",
         children: [name, " ", hasNotification && /* @__PURE__ */ jsx(NotificationIcon, {})]
-      }), isMobile && /* @__PURE__ */ jsxs(Box, {
-        lineHeight: "normal",
-        sx: {
-          ">svg": {
-            marginRight: "4px"
-          }
-        },
-        children: [/* @__PURE__ */ jsx(Calendar, {}), /* @__PURE__ */ jsxs(Box, {
-          as: "span",
-          verticalAlign: "middle",
-          p: "0 8px 0 0",
-          borderRight: `1px solid ${vars("colors-neutral-platinum")}`,
-          mr: "8px",
-          children: [day, " ", date]
-        }), /* @__PURE__ */ jsx(Clock, {}), /* @__PURE__ */ jsx(Box, {
-          as: "span",
-          verticalAlign: "middle",
-          children: time
-        })]
       }), showCourse && !initOrEnd && /* @__PURE__ */ jsxs(Box, {
+        as: "span",
+        sx: detailTextStyle,
+        children: [/* @__PURE__ */ jsx("strong", {
+          children: text ? `${text}:` : "Curso:"
+        }), " ", courseName]
+      }), showUnit && !initOrEnd && /* @__PURE__ */ jsx(Box, {
         display: "flex",
         gap: "4px",
         alignItems: "baseline",
-        children: [isMobile && /* @__PURE__ */ jsx(Box, {
-          minH: "10px",
-          minW: "10px",
-          maxH: "10px",
-          maxW: "10px",
-          bg: color,
-          borderRadius: "50%"
-        }), /* @__PURE__ */ jsxs(Box, {
-          as: "span",
-          sx: detailTextStyle,
-          children: [/* @__PURE__ */ jsx("strong", {
-            children: text ? `${text}:` : "Curso:"
-          }), " ", courseName]
-        })]
-      }), showUnit && !initOrEnd && /* @__PURE__ */ jsxs(Box, {
-        display: "flex",
-        gap: "4px",
-        alignItems: "baseline",
-        children: [isMobile && /* @__PURE__ */ jsx(Box, {
-          height: "10px",
-          width: "10px",
-          bg: color,
-          borderRadius: "50%"
-        }), /* @__PURE__ */ jsx(Box, {
+        children: /* @__PURE__ */ jsx(Box, {
           as: "span",
           sx: detailTextStyle,
           children: unitName
-        })]
+        })
       })]
     })]
   });