@eclass/ui-kit 1.62.0 → 1.63.1

package/dist/atoms/Icons/Star.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { BaseProps } from './Base';
+export declare function Star(props: BaseProps): JSX.Element;
+export declare namespace Star {
+    var displayName: string;
+}
+//# sourceMappingURL=Star.d.ts.map

package/dist/atoms/Icons/Star.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Star.d.ts","sourceRoot":"","sources":["../../../src/atoms/Icons/Star.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAQ,SAAS,EAAE,MAAM,QAAQ,CAAA;AAExC,wBAAgB,IAAI,CAAC,KAAK,EAAE,SAAS,GAAG,GAAG,CAAC,OAAO,CAWlD;yBAXe,IAAI"}

package/dist/atoms/Icons/index.d.ts

@@ -14,6 +14,7 @@ export * from './Multimedia';
 export * from './Profile';
 export * from './Remote';
 export * from './Schedule';
+export * from './Star';
 export * from './Time';
 export * from './TinyAlertInfo';
 export * from './TinyAlertError';

package/dist/atoms/Icons/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atoms/Icons/index.tsx"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAA;AAChC,cAAc,aAAa,CAAA;AAC3B,cAAc,cAAc,CAAA;AAC5B,cAAc,YAAY,CAAA;AAC1B,cAAc,eAAe,CAAA;AAC7B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,uBAAuB,CAAA;AACrC,cAAc,YAAY,CAAA;AAC1B,cAAc,WAAW,CAAA;AACzB,cAAc,UAAU,CAAA;AACxB,cAAc,UAAU,CAAA;AACxB,cAAc,gBAAgB,CAAA;AAC9B,cAAc,cAAc,CAAA;AAC5B,cAAc,WAAW,CAAA;AACzB,cAAc,UAAU,CAAA;AACxB,cAAc,YAAY,CAAA;AAC1B,cAAc,QAAQ,CAAA;AACtB,cAAc,iBAAiB,CAAA;AAC/B,cAAc,kBAAkB,CAAA;AAChC,cAAc,oBAAoB,CAAA;AAClC,cAAc,oBAAoB,CAAA;AAClC,cAAc,YAAY,CAAA;AAC1B,cAAc,OAAO,CAAA;AACrB,cAAc,YAAY,CAAA;AAC1B,cAAc,YAAY,CAAA;AAC1B,cAAc,cAAc,CAAA;AAC5B,cAAc,UAAU,CAAA;AACxB,cAAc,SAAS,CAAA;AACvB,cAAc,iBAAiB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atoms/Icons/index.tsx"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAA;AAChC,cAAc,aAAa,CAAA;AAC3B,cAAc,cAAc,CAAA;AAC5B,cAAc,YAAY,CAAA;AAC1B,cAAc,eAAe,CAAA;AAC7B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,uBAAuB,CAAA;AACrC,cAAc,YAAY,CAAA;AAC1B,cAAc,WAAW,CAAA;AACzB,cAAc,UAAU,CAAA;AACxB,cAAc,UAAU,CAAA;AACxB,cAAc,gBAAgB,CAAA;AAC9B,cAAc,cAAc,CAAA;AAC5B,cAAc,WAAW,CAAA;AACzB,cAAc,UAAU,CAAA;AACxB,cAAc,YAAY,CAAA;AAC1B,cAAc,QAAQ,CAAA;AACtB,cAAc,QAAQ,CAAA;AACtB,cAAc,iBAAiB,CAAA;AAC/B,cAAc,kBAAkB,CAAA;AAChC,cAAc,oBAAoB,CAAA;AAClC,cAAc,oBAAoB,CAAA;AAClC,cAAc,YAAY,CAAA;AAC1B,cAAc,OAAO,CAAA;AACrB,cAAc,YAAY,CAAA;AAC1B,cAAc,YAAY,CAAA;AAC1B,cAAc,cAAc,CAAA;AAC5B,cAAc,UAAU,CAAA;AACxB,cAAc,SAAS,CAAA;AACvB,cAAc,iBAAiB,CAAA"}

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

@@ -1,4 +1,4 @@
-import { extendTheme, Box, CircularProgress, Icon, Button, useMediaQuery, Tooltip, Flex, Stack, Center, Image, Text as Text$1, HStack, Heading, List, ListItem, Link, Modal as Modal$1, ModalContent as ModalContent$1, ModalHeader, ModalCloseButton, ModalBody, ModalFooter, ModalOverlay, useDisclosure, LinkBox, LinkOverlay, MenuButton, MenuGroup, Menu, MenuList, MenuItem } from "@chakra-ui/react";
+import { extendTheme, Box, CircularProgress, Icon, Button, useMediaQuery, Tooltip, Flex, Stack, Center, Image, Text as Text$1, HStack, Heading, List, ListItem, Link, Modal as Modal$1, ModalContent as ModalContent$1, ModalHeader, ModalCloseButton, ModalBody, ModalFooter, ModalOverlay, useDisclosure, LinkBox, LinkOverlay, MenuButton, MenuGroup, Menu, MenuList, MenuItem, Divider, IconButton } from "@chakra-ui/react";
 import * as React$1 from "react";
 import React__default, { useEffect, useState, useCallback, useRef } from "react";
 const main = {
@@ -858,6 +858,19 @@ function Schedule(props) {
   });
 }
 Schedule.displayName = "Schedule";
+function Star(props) {
+  return /* @__PURE__ */ jsx(Base, {
+    viewBox: "0 0 16px 16px",
+    ...props,
+    children: /* @__PURE__ */ jsx("path", {
+      fill: "currentColor",
+      fillRule: "evenodd",
+      d: "M8.464 12.255a1 1 0 0 0-.927 0l-2.452 1.282a1 1 0 0 1-1.45-1.053l.462-2.729a1 1 0 0 0-.286-.881L1.833 6.938a1 1 0 0 1 .554-1.704l2.738-.404a1 1 0 0 0 .75-.545l1.23-2.48a1 1 0 0 1 1.792 0l1.23 2.48a1 1 0 0 0 .75.545l2.738.404a1 1 0 0 1 .553 1.704l-1.977 1.936a1 1 0 0 0-.287.881l.462 2.73a1 1 0 0 1-1.45 1.053l-2.452-1.284Z",
+      clipRule: "evenodd"
+    })
+  });
+}
+Star.displayName = "Star";
 function Time(props) {
   return /* @__PURE__ */ jsx(Base, {
     ...props,
@@ -1395,6 +1408,7 @@ var index$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.definePropert
   Profile,
   Remote,
   Schedule,
+  Star,
   Time,
   TinyAlertInfo,
   TinyAlertError,
@@ -9554,8 +9568,8 @@ const StandardBackground = ({
     })]
   });
 };
-const StyledText = Text$1;
-const StyledLink = Link;
+const StyledText$2 = Text$1;
+const StyledLink$1 = Link;
 const Resources = ({
   id,
   resourceType,
@@ -9591,7 +9605,7 @@ const Resources = ({
     };
     return colorMap[resourceType] || "#FFBC27";
   };
-  return /* @__PURE__ */ jsx(StyledLink, {
+  return /* @__PURE__ */ jsx(StyledLink$1, {
     href: resourceLink,
     target: targetBlank ? "_blank" : "_self",
     rel: targetBlank ? "noopener noreferrer" : void 0,
@@ -9636,7 +9650,7 @@ const Resources = ({
         gap: "8px",
         padding: "1rem",
         children: [/* @__PURE__ */ jsx(Box, {
-          children: /* @__PURE__ */ jsx(StyledText, {
+          children: /* @__PURE__ */ jsx(StyledText$2, {
             fontFamily: "Roboto",
             fontWeight: "700",
             lineHeight: "21px",
@@ -9646,7 +9660,7 @@ const Resources = ({
             children: resourceTitle
           })
         }), /* @__PURE__ */ jsx(Box, {
-          children: /* @__PURE__ */ jsx(StyledText, {
+          children: /* @__PURE__ */ jsx(StyledText$2, {
             fontFamily: "Roboto",
             fontWeight: "400",
             lineHeight: "14px",
@@ -9659,7 +9673,7 @@ const Resources = ({
           display: "flex",
           alignItems: "center",
           justifyContent: "center",
-          children: /* @__PURE__ */ jsxs(StyledText, {
+          children: /* @__PURE__ */ jsxs(StyledText$2, {
             fontFamily: "Roboto",
             fontWeight: "500",
             fontSize: "14px",
@@ -10594,6 +10608,9 @@ const EventsList = ({
   const hoverBg = (_b = vars("colors-neutral-cultured2")) != null ? _b : "#F8F8F8";
   const isCpr = type === "cpr";
   const showEventLocation = !isCpr || Boolean(headquartersAddress);
+  const courseLabel = text2 || "Curso";
+  const showCourseLabel = type !== "cv-events";
+  const isCourse = showCourseLabel && courseLabel === "Curso";
   const showEventDuration = ["online", "in-person", "cpr"].includes(type) && duration !== void 0 && duration > 0;
   const initOrEnd = ["end-course", "init-course", "init-course-flexible", "end-course-flexible"].includes(type);
   const dateTextStyle = {
@@ -10608,7 +10625,10 @@ const EventsList = ({
     alignItems: "center",
     display: "flex",
     gap: "4px",
-    lineHeight: "normal"
+    lineHeight: "normal",
+    "&.isCourse": {
+      alignItems: "self-start"
+    }
   };
   const eventIconStyle = {
     alignItems: "center",
@@ -10681,9 +10701,11 @@ const EventsList = ({
           }), hasNotification && /* @__PURE__ */ jsx(NotificationIcon, {})]
         }), showCourse && !initOrEnd && /* @__PURE__ */ jsxs(Box, {
           as: "span",
+          className: isCourse ? "isCourse" : void 0,
+          "data-testid": "event-course",
           sx: detailTextStyle,
-          children: [type === "cv-events" ? /* @__PURE__ */ jsx(Fragment, {}) : /* @__PURE__ */ jsx("strong", {
-            children: text2 ? `${text2}:` : "Curso:"
+          children: [showCourseLabel && /* @__PURE__ */ jsxs("strong", {
+            children: [courseLabel, ":"]
           }), " ", courseName]
         }), showEventDuration && /* @__PURE__ */ jsxs(Box, {
           display: "flex",
@@ -11251,5 +11273,234 @@ const UserDropdown = ({
     })
   });
 };
-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, TinyAlert, UserDropdown, UserWay, UserWayCookie, dataFake, maxWidthCoursesList, theme, useFlashNotification, vars };
+function CustomCloseIcon(props) {
+  return /* @__PURE__ */ jsx(Base, {
+    w: "16px",
+    h: "16px",
+    viewBox: "0 0 16 16",
+    color: "none",
+    ...props,
+    children: /* @__PURE__ */ jsx("path", {
+      fill: "#60798E",
+      fillRule: "evenodd",
+      d: "M13.694 0 7.876 5.818 2.057 0 0 2.057l5.818 5.819L0 13.694l2.057 2.057 5.819-5.818 5.818 5.818 2.057-2.057-5.818-5.818 5.818-5.819L13.694 0Z",
+      clipRule: "evenodd"
+    })
+  });
+}
+const StyledImage$1 = Image;
+const StyledFlex$2 = Flex;
+const StyledText$1 = Text$1;
+const StyledDivider = Divider;
+const StyledLink = Link;
+const InitialShareContent = ({
+  handleLinkedinClick,
+  onLeaveReview
+}) => {
+  return /* @__PURE__ */ jsxs(Fragment, {
+    children: [/* @__PURE__ */ jsxs(StyledFlex$2, {
+      direction: "column",
+      gap: "16px",
+      alignItems: "center",
+      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__ */ jsxs(StyledFlex$2, {
+        flexDir: "column",
+        gap: "8px",
+        children: [/* @__PURE__ */ jsx(StyledText$1, {
+          as: "h6",
+          fontSize: "xl",
+          fontWeight: "bold",
+          color: vars("colors-neutral-darkCharcoal"),
+          m: "0",
+          children: "\xA1Qu\xE9 bueno que quieras compartirlo!"
+        }), /* @__PURE__ */ jsx(StyledText$1, {
+          fontSize: "md",
+          color: vars("colors-neutral-darkCharcoal"),
+          mb: "0",
+          children: "Aprobaste tu curso. Vamos a mostrarlo en tu LinkedIn."
+        })]
+      })]
+    }), /* @__PURE__ */ jsx(BtnPrimary, {
+      onClick: handleLinkedinClick,
+      children: "Continuar a LinkedIn"
+    }), /* @__PURE__ */ jsxs(StyledFlex$2, {
+      align: "center",
+      width: "100%",
+      gap: "16px",
+      children: [/* @__PURE__ */ jsx(StyledDivider, {
+        borderColor: vars("colors-neutral-platinum"),
+        m: "0"
+      }), /* @__PURE__ */ jsx(StyledText$1, {
+        fontSize: "sm",
+        color: vars("colors-neutral-gray"),
+        whiteSpace: "nowrap",
+        m: "0",
+        children: "Ya que est\xE1s aqu\xED"
+      }), /* @__PURE__ */ jsx(StyledDivider, {
+        borderColor: vars("colors-neutral-platinum"),
+        m: "0"
+      })]
+    }), /* @__PURE__ */ jsx(StyledText$1, {
+      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, {
+      align: "center",
+      justify: "center",
+      gap: "8px",
+      sx: {
+        svg: {
+          m: "0"
+        }
+      },
+      children: [/* @__PURE__ */ jsx(Star, {
+        color: vars("colors-icon-ripeMango")
+      }), /* @__PURE__ */ jsx(StyledLink, {
+        fontSize: "sm",
+        fontWeight: "500",
+        color: vars("colors-neutral-gray"),
+        textDecoration: "underline",
+        onClick: onLeaveReview,
+        children: "Dejar mi opini\xF3n"
+      })]
+    })]
+  });
+};
+const StyledImage = Image;
+const StyledFlex$1 = Flex;
+const StyledText = Text$1;
+const AfterShareContent = ({
+  onClose,
+  onLeaveReview
+}) => {
+  return /* @__PURE__ */ jsxs(StyledFlex$1, {
+    flexDir: "column",
+    alignItems: "center",
+    gap: "16px",
+    sx: {
+      button: {
+        svg: {
+          m: "0"
+        }
+      },
+      ".linkButton": {
+        p: "0"
+      }
+    },
+    children: [/* @__PURE__ */ jsx(StyledImage, {
+      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, {
+      as: "h6",
+      fontSize: "xl",
+      fontWeight: "bold",
+      color: vars("colors-neutral-darkCharcoal"),
+      m: "0",
+      children: "\xBFYa lo compartiste en LinkedIn?"
+    }), /* @__PURE__ */ jsxs(StyledText, {
+      fontSize: "md",
+      fontWeight: "400",
+      color: vars("colors-neutral-darkCharcoal"),
+      p: "0",
+      m: "0",
+      children: [/* @__PURE__ */ jsx("strong", {
+        children: "Ahora cu\xE9ntanos qu\xE9 tal fue aprender con nosotros."
+      }), " Tu opini\xF3n ayuda a otros como t\xFA a dar el primer paso."]
+    }), /* @__PURE__ */ jsx(BtnPrimary, {
+      onClick: onLeaveReview,
+      leftIcon: /* @__PURE__ */ jsx(Star, {
+        color: vars("colors-neutral-white")
+      }),
+      children: "Dejar mi opini\xF3n"
+    }), /* @__PURE__ */ jsx(BtnLink, {
+      as: "button",
+      onClick: onClose,
+      children: "Quiz\xE1s m\xE1s tarde"
+    })]
+  });
+};
+const StyledModalContent = ModalContent$1;
+const StyledIconButton = IconButton;
+const StyledFlex = Flex;
+const ShareAndReviewModal = ({
+  isOpen,
+  onClose,
+  onContinue,
+  onLeaveReview
+}) => {
+  const [hasClickedLinkedin, setHasClickedLinkedin] = useState(false);
+  useEffect(() => {
+    if (!isOpen) {
+      setHasClickedLinkedin(false);
+    }
+  }, [isOpen]);
+  const handleLinkedinClick = () => {
+    if (onContinue) {
+      onContinue();
+    }
+    setTimeout(() => {
+      setHasClickedLinkedin(true);
+    }, 400);
+  };
+  return /* @__PURE__ */ jsxs(Modal$1, {
+    isOpen,
+    onClose,
+    blockScrollOnMount: false,
+    isCentered: true,
+    children: [/* @__PURE__ */ jsx(ModalOverlay, {}), /* @__PURE__ */ jsxs(StyledModalContent, {
+      alignSelf: "center",
+      maxW: "471px",
+      marginInline: "16px",
+      borderRadius: "8px",
+      p: "32px 16px",
+      position: "relative",
+      alignItems: "center",
+      children: [/* @__PURE__ */ jsx(StyledIconButton, {
+        "aria-label": "Cerrar",
+        autoFocus: false,
+        bg: "transparent",
+        icon: /* @__PURE__ */ jsx(CustomCloseIcon, {}),
+        onClick: onClose,
+        variant: "ghost",
+        size: "sm",
+        h: "auto",
+        minW: "16px",
+        position: "absolute",
+        top: "16px",
+        right: "16px",
+        _hover: {
+          background: "none"
+        },
+        _focus: {
+          boxShadow: "none"
+        },
+        _focusVisible: {
+          boxShadow: `0 0 0 3px ${vars("colors-alert-deepSkyBlue")} inset`
+        }
+      }), /* @__PURE__ */ jsx(StyledFlex, {
+        direction: "column",
+        align: "center",
+        textAlign: "center",
+        gap: "16px",
+        children: !hasClickedLinkedin ? /* @__PURE__ */ jsx(InitialShareContent, {
+          handleLinkedinClick,
+          onLeaveReview
+        }) : /* @__PURE__ */ jsx(AfterShareContent, {
+          onClose,
+          onLeaveReview
+        })
+      })]
+    })]
+  });
+};
+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 };
 //# sourceMappingURL=eclass-ui-kit.es.js.map