@eclass/ui-kit 1.53.3 → 1.53.4

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

@@ -1811,6 +1811,132 @@ function BtnLink({
   });
 }
 BtnLink.displayName = "BtnLink";
+const HelpIcon = () => {
+  return /* @__PURE__ */ jsx("svg", {
+    width: "16",
+    height: "16",
+    viewBox: "0 0 16 16",
+    fill: "none",
+    children: /* @__PURE__ */ jsx("path", {
+      d: "M8 0C3.6 0 0 3.6 0 8C0 12.4 3.6 16 8 16C12.4 16 16 12.4 16 8C16 3.6 12.4 0 8 0ZM8 13C7.448 13 7 12.552 7 12C7 11.448 7.448 11 8 11C8.552 11 9 11.448 9 12C9 12.552 8.552 13 8 13ZM9.623 8.092C9.126 8.519 9 8.663 9 9C9 9.553 8.552 10 8 10C7.448 10 7 9.553 7 9C7 7.706 7.795 7.024 8.322 6.573C8.819 6.148 8.945 6.003 8.945 5.667C8.945 5.484 8.945 5 8.001 5C7.565 5.024 7.1 5.224 6.743 5.561C6.342 5.939 5.708 5.92 5.329 5.52C4.95 5.118 4.968 4.485 5.37 4.106C6.072 3.445 6.987 3.052 7.949 3.002H7.952C9.764 3.002 10.945 4.073 10.945 5.668C10.945 6.961 10.15 7.643 9.624 8.093L9.623 8.092Z",
+      fill: "white"
+    })
+  });
+};
+const CalendarButtonIcon = () => /* @__PURE__ */ jsxs("svg", {
+  width: "16px",
+  height: "16px",
+  fill: "none",
+  children: [/* @__PURE__ */ jsx("path", {
+    fill: "#fff",
+    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", {
+    fill: "#fff",
+    d: "M6 7H4v2h2V7ZM9 7H7v2h2V7ZM6 10H4v2h2v-2ZM9 10H7v2h2v-2ZM12 7h-2v2h2V7ZM12 10h-2v2h2v-2Z"
+  })]
+});
+function Accessibility(props) {
+  return /* @__PURE__ */ jsx(Base, {
+    ...props,
+    children: /* @__PURE__ */ jsx("svg", {
+      width: "16",
+      height: "16",
+      viewBox: "0 0 16 16",
+      fill: "none",
+      children: /* @__PURE__ */ jsx("path", {
+        fillRule: "evenodd",
+        clipRule: "evenodd",
+        d: "M16 8C16 12.4183 12.4183 16 8 16C3.58172 16 0 12.4183 0 8C0 3.58172 3.58172 0 8 0C12.4183 0 16 3.58172 16 8ZM8 5C8.82843 5 9.5 4.32843 9.5 3.5C9.5 2.67157 8.82843 2 8 2C7.17157 2 6.5 2.67157 6.5 3.5C6.5 4.32843 7.17157 5 8 5ZM2.96967 5.96967C3.11032 5.82902 3.30109 5.75 3.5 5.75H12.5C12.6989 5.75 12.8897 5.82902 13.0303 5.96967C13.171 6.11032 13.25 6.30109 13.25 6.5C13.25 6.69891 13.171 6.88968 13.0303 7.03033C12.8897 7.17098 12.6989 7.25 12.5 7.25H10.25V13.25C10.25 13.4489 10.171 13.6397 10.0303 13.7803C9.88968 13.921 9.69891 14 9.5 14C9.30109 14 9.11032 13.921 8.96967 13.7803C8.82902 13.6397 8.75 13.4489 8.75 13.25V10.25H7.25V13.25C7.25 13.4489 7.17098 13.6397 7.03033 13.7803C6.88968 13.921 6.69891 14 6.5 14C6.30109 14 6.11032 13.921 5.96967 13.7803C5.82902 13.6397 5.75 13.4489 5.75 13.25V7.25H3.5C3.30109 7.25 3.11032 7.17098 2.96967 7.03033C2.82902 6.88968 2.75 6.69891 2.75 6.5C2.75 6.30109 2.82902 6.11032 2.96967 5.96967Z",
+        fill: "white"
+      })
+    })
+  });
+}
+const NavBarButton = ({
+  buttonName,
+  onlyLink,
+  onClick,
+  type
+}) => {
+  var _a;
+  const buttonType = {
+    accessibility: {
+      icon: /* @__PURE__ */ jsx(Accessibility, {}),
+      text: buttonName != null ? buttonName : "ACCESIBILIDAD"
+    },
+    calendar: {
+      icon: /* @__PURE__ */ jsx(CalendarButtonIcon, {}),
+      text: buttonName != null ? buttonName : "CALENDARIO"
+    },
+    help: {
+      icon: /* @__PURE__ */ jsx(HelpIcon, {}),
+      text: buttonName != null ? buttonName : "AYUDA"
+    }
+  };
+  const triggerWidget = () => {
+    const buttonB = document.getElementById("userWayTrigger");
+    if (buttonB == null ? void 0 : buttonB.click) {
+      buttonB.click();
+    }
+  };
+  const activeBg = (_a = vars("colors-main-deepSkyBlue")) != null ? _a : "#0189FF";
+  const hoverBg = "rgba(96, 121, 142, 0.8)";
+  const isAccessibility = type === "accessibility";
+  return /* @__PURE__ */ jsxs(Box, {
+    as: "button",
+    id: isAccessibility ? "UserWayButton" : "",
+    onClick: isAccessibility ? triggerWidget : onClick,
+    sx: {
+      display: "flex",
+      gap: "8px",
+      h: "30px",
+      maxH: "30px",
+      _hover: {
+        ".icon": {
+          bg: hoverBg
+        },
+        ".text": {
+          color: vars("colors-neutral-white")
+        }
+      },
+      _active: {
+        ".icon": {
+          bg: onlyLink || isAccessibility ? hoverBg : activeBg
+        },
+        ".text": {
+          color: vars("colors-neutral-white")
+        }
+      },
+      ".icon": {
+        alignItems: "center",
+        bg: vars("colors-main-blueGrey"),
+        borderRadius: "100%",
+        border: "1px solid transparent",
+        display: "flex",
+        height: "30px",
+        justifyContent: "center",
+        type: "button",
+        role: "button",
+        width: "30px"
+      },
+      ".text": {
+        alignContent: "center",
+        fontSize: "12px",
+        fontWeight: "500",
+        forntFamily: "Roboto",
+        color: vars("colors-neutral-silverSand")
+      }
+    },
+    children: [/* @__PURE__ */ jsx(Box, {
+      className: "icon",
+      children: buttonType[type].icon
+    }), /* @__PURE__ */ jsx(Box, {
+      as: "span",
+      className: "text",
+      children: buttonType[type].text
+    })]
+  });
+};
 const NewTooltip = ({
   children,
   className = "tooltip",
@@ -1820,7 +1946,8 @@ const NewTooltip = ({
   maxWidth = "200px",
   placement = "bottom",
   isOpen,
-  sx
+  sx,
+  transform
 }) => {
   return /* @__PURE__ */ jsx(Tooltip, {
     isOpen,
@@ -1832,6 +1959,7 @@ const NewTooltip = ({
       fontWeight: "400",
       maxWidth,
       padding: "8px",
+      transform: transform != null ? transform : "",
       ".chakra-tooltip__arrow": {
         bg: `${vars("colors-neutral-darkCharcoal")} !important`
       },
@@ -1849,23 +1977,6 @@ const NewTooltip = ({
     })
   });
 };
-function Accessibility(props) {
-  return /* @__PURE__ */ jsx(Base, {
-    ...props,
-    children: /* @__PURE__ */ jsx("svg", {
-      width: "16",
-      height: "16",
-      viewBox: "0 0 16 16",
-      fill: "none",
-      children: /* @__PURE__ */ jsx("path", {
-        fillRule: "evenodd",
-        clipRule: "evenodd",
-        d: "M16 8C16 12.4183 12.4183 16 8 16C3.58172 16 0 12.4183 0 8C0 3.58172 3.58172 0 8 0C12.4183 0 16 3.58172 16 8ZM8 5C8.82843 5 9.5 4.32843 9.5 3.5C9.5 2.67157 8.82843 2 8 2C7.17157 2 6.5 2.67157 6.5 3.5C6.5 4.32843 7.17157 5 8 5ZM2.96967 5.96967C3.11032 5.82902 3.30109 5.75 3.5 5.75H12.5C12.6989 5.75 12.8897 5.82902 13.0303 5.96967C13.171 6.11032 13.25 6.30109 13.25 6.5C13.25 6.69891 13.171 6.88968 13.0303 7.03033C12.8897 7.17098 12.6989 7.25 12.5 7.25H10.25V13.25C10.25 13.4489 10.171 13.6397 10.0303 13.7803C9.88968 13.921 9.69891 14 9.5 14C9.30109 14 9.11032 13.921 8.96967 13.7803C8.82902 13.6397 8.75 13.4489 8.75 13.25V10.25H7.25V13.25C7.25 13.4489 7.17098 13.6397 7.03033 13.7803C6.88968 13.921 6.69891 14 6.5 14C6.30109 14 6.11032 13.921 5.96967 13.7803C5.82902 13.6397 5.75 13.4489 5.75 13.25V7.25H3.5C3.30109 7.25 3.11032 7.17098 2.96967 7.03033C2.82902 6.88968 2.75 6.69891 2.75 6.5C2.75 6.30109 2.82902 6.11032 2.96967 5.96967Z",
-        fill: "white"
-      })
-    })
-  });
-}
 function UserWay() {
   const triggerWidget = () => {
     const buttonB = document.getElementById("userWayTrigger");
@@ -5830,59 +5941,47 @@ const useParseEvents = (events, now) => {
     hasMoreNext
   };
 };
-const CalendarButtonIcon = () => /* @__PURE__ */ jsxs("svg", {
-  width: "16px",
-  height: "16px",
-  fill: "none",
-  children: [/* @__PURE__ */ jsx("path", {
-    fill: "#fff",
-    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", {
-    fill: "#fff",
-    d: "M6 7H4v2h2V7ZM9 7H7v2h2V7ZM6 10H4v2h2v-2ZM9 10H7v2h2v-2ZM12 7h-2v2h2V7ZM12 10h-2v2h2v-2Z"
-  })]
-});
 const GoToCalendar = ({
   text,
   tooltipDisabled,
   onlyToCalendar,
   onClick
 }) => {
-  var _a, _b;
+  var _a;
   const activeBg = (_a = vars("colors-main-deepSkyBlue")) != null ? _a : "#0189FF";
+  const hoverBg = "rgba(96, 121, 142, 0.8)";
   return /* @__PURE__ */ jsx(NewTooltip, {
     label: text != null ? text : "Calendario",
-    m: "2px 0 0 0",
+    m: "2px 0 0 -59px",
     isDisabled: tooltipDisabled,
+    transform: "translateX(-10px) !important",
     children: /* @__PURE__ */ jsx(MenuButton, {
       onClick: () => onlyToCalendar && onClick && onClick(),
-      background: (_b = vars("colors-main-blueGrey")) != null ? _b : "#60798E",
-      border: "1px solid transparent",
-      borderRadius: "100%",
-      height: "30px !important",
-      width: "30px !important",
-      padding: "0 !important",
-      margin: "0 !important",
       position: "relative",
-      _active: {
-        bg: activeBg,
-        "&:hover": {
-          bg: activeBg
-        }
-      },
-      _hover: {
-        bg: "rgba(96, 121, 142, 0.8)"
-      },
       sx: {
-        ">span": {
-          display: "grid",
-          alignContent: "center",
-          h: "16px!important",
-          justifyItems: "center",
-          lineHeight: "0"
+        _hover: {
+          ".icon": {
+            bg: hoverBg
+          },
+          ".text": {
+            color: vars("colors-neutral-white")
+          }
+        },
+        _active: {
+          ".icon": {
+            bg: onlyToCalendar ? hoverBg : activeBg
+          },
+          ".text": {
+            color: vars("colors-neutral-white")
+          }
         }
       },
-      children: /* @__PURE__ */ jsx(CalendarButtonIcon, {})
+      children: /* @__PURE__ */ jsx(NavBarButton, {
+        type: "calendar",
+        onClick: () => {
+        },
+        buttonName: text.toUpperCase()
+      })
     })
   });
 };
@@ -6256,7 +6355,7 @@ const CalendarDropdownContainer = ({
   return /* @__PURE__ */ jsx(Box, {
     zIndex: 4,
     className: `calendarDropdown ${hasNew && !onlyToCalendar ? "hasNew" : ""}`,
-    width: "30px",
+    width: "fit-content",
     height: "30px",
     m: m2,
     position: "relative",
@@ -6268,7 +6367,7 @@ const CalendarDropdownContainer = ({
         content: '""',
         display: isMenuOpen ? "block" : "none",
         height: "0",
-        left: "50%",
+        left: "14%",
         position: "absolute",
         top: "30px",
         transform: "translateX(-50%)",
@@ -6326,7 +6425,7 @@ const CalendarDropdownContainer = ({
       onClose,
       children: /* @__PURE__ */ jsxs(Fragment, {
         children: [/* @__PURE__ */ jsx(GoToCalendar, {
-          text: (_c = text == null ? void 0 : text.tooltip) != null ? _c : "Ir a Mi Calendario",
+          text: (_c = text == null ? void 0 : text.tooltip) != null ? _c : "Calendario",
           tooltipDisabled: isTooltipDisabled,
           onlyToCalendar,
           onClick: redirectToCalendar
@@ -6498,5 +6597,5 @@ const EventsList = ({
     })]
   });
 };
-export { Alert, Btn, BtnLink, BtnPrimary, BtnSecondary, BtnTertiary, CalendarDropdown, CourseList, CourseStatus, Eventos, EventsList, FlashNotification, index as Icons, Label, ModalAlert, NewTooltip, Progress, Resources, Ripples, TinyAlert, UserWay, UserWayCookie, dataFake, maxWidthCoursesList, theme, useFlashNotification, vars };
+export { Alert, Btn, BtnLink, BtnPrimary, BtnSecondary, BtnTertiary, CalendarDropdown, CourseList, CourseStatus, Eventos, EventsList, FlashNotification, index as Icons, Label, ModalAlert, NavBarButton, NewTooltip, Progress, Resources, Ripples, TinyAlert, UserWay, UserWayCookie, dataFake, maxWidthCoursesList, theme, useFlashNotification, vars };
 //# sourceMappingURL=eclass-ui-kit.es.js.map