@eclass/ui-kit 1.4.3 → 1.5.1

package/dist/atoms/Label/Label.d.ts

@@ -6,6 +6,10 @@ export interface LabelProps {
     size?: 'md' | 'sm';
     m?: string;
 }
+/**
+ * Componente Label
+ * @example <Label>Etiqueta</Label>
+ */
 export declare function Label({ children, bg, color, size, m, }: LabelProps): JSX.Element;
 export declare namespace Label {
     var displayName: string;

package/dist/atoms/Progress/Progress.d.ts

@@ -1,5 +1,13 @@
 /// <reference types="react" />
-export declare function Progress({ value }: any): JSX.Element;
+interface ProgressProps {
+    value: number;
+}
+/**
+ * Componente Progress circular, valores permitidos entre 0 - 100
+ * @example <Progress value={35} />
+ */
+export declare function Progress({ value }: ProgressProps): JSX.Element;
 export declare namespace Progress {
     var displayName: string;
 }
+export {};

package/dist/atoms/Ripples/Ripples.d.ts

@@ -1,4 +1,13 @@
 /// <reference types="react" />
+/**
+ * Componente Ripples se debe poner entre un Wrapper y su contenido
+ * @example
+ * <div>
+ *  <Ripples>
+ *    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
+ *  </Ripples>
+ * </div>
+ */
 export declare function Ripples({ children, color }: any): JSX.Element;
 export declare namespace Ripples {
     var displayName: string;

package/dist/components/TestVars.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+interface props {
+    color?: string;
+}
+export declare const TestVars: ({ color }: props) => JSX.Element;
+export {};

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

@@ -83,7 +83,7 @@ var StyleSheet = /* @__PURE__ */ function() {
   };
   _proto.flush = function flush() {
     this.tags.forEach(function(tag) {
-      return tag.parentNode.removeChild(tag);
+      return tag.parentNode && tag.parentNode.removeChild(tag);
     });
     this.tags = [];
     this.ctr = 0;
@@ -569,6 +569,22 @@ function memoize$1(fn) {
     return cache[arg];
   };
 }
+var identifierWithPointTracking = function identifierWithPointTracking2(begin, points, index) {
+  var previous = 0;
+  var character2 = 0;
+  while (true) {
+    previous = character2;
+    character2 = peek();
+    if (previous === 38 && character2 === 12) {
+      points[index] = 1;
+    }
+    if (token(character2)) {
+      break;
+    }
+    next();
+  }
+  return slice(begin, position$1);
+};
 var toRules = function toRules2(parsed, points) {
   var index = -1;
   var character2 = 44;
@@ -578,7 +594,7 @@ var toRules = function toRules2(parsed, points) {
         if (character2 === 38 && peek() === 12) {
           points[index] = 1;
         }
-        parsed[index] += identifier(position$1 - 1);
+        parsed[index] += identifierWithPointTracking(position$1 - 1, points, index);
         break;
       case 2:
         parsed[index] += delimit(character2);
@@ -9338,17 +9354,6 @@ function _extends$3() {
   };
   return _extends$3.apply(this, arguments);
 }
-var StackDivider = (props) => /* @__PURE__ */ React.createElement(chakra.div, _extends$3({
-  className: "chakra-stack__divider"
-}, props, {
-  __css: _extends$3({}, props["__css"], {
-    borderWidth: 0,
-    alignSelf: "stretch",
-    borderColor: "inherit",
-    width: "auto",
-    height: "auto"
-  })
-}));
 var StackItem = (props) => /* @__PURE__ */ React.createElement(chakra.div, _extends$3({
   className: "chakra-stack__item"
 }, props, {
@@ -9810,9 +9815,15 @@ Label.displayName = "Label";
 function Progress({
   value = 0
 }) {
+  let limitedValue = value;
+  if (value > 100) {
+    limitedValue = 100;
+  } else if (value < 0) {
+    limitedValue = 0;
+  }
   return /* @__PURE__ */ jsx(CircularProgress, {
     size: "1rem",
-    value,
+    value: limitedValue,
     thickness: "1rem",
     color: vars("colors-main-deepSkyBlue"),
     trackColor: vars("colors-neutral-platinum")
@@ -10137,6 +10148,7 @@ function Header() {
     bgPos: "center",
     bgSize: "cover",
     height: "8.75rem",
+    borderBottom: `1px solid ${vars("colors-neutral-platinum")}`,
     pos: "relative",
     children: [/* @__PURE__ */ jsxs(Box, {
       p: "1rem",
@@ -10180,12 +10192,13 @@ Header.displayName = "Header";
 function DateStatus({
   date
 }) {
-  if (date.length === 0) {
+  if (!date || date.length === 0) {
     return null;
   }
   return /* @__PURE__ */ jsx(Text, {
     fontSize: ".75rem",
-    color: "neutral.darkCharcoal",
+    color: vars("colors-neutral-darkCharcoal"),
+    m: "0",
     children: date
   });
 }
@@ -10194,23 +10207,31 @@ function IconSelection({
   type,
   progressValue = 0
 }) {
-  const all = {
-    schedule: /* @__PURE__ */ jsx(Schedule, {}),
-    certificate: /* @__PURE__ */ jsx(Certificate, {}),
-    circularCheck: /* @__PURE__ */ jsx(CircularCheck, {}),
-    progress: /* @__PURE__ */ jsx(Progress, {
-      value: progressValue
-    }),
-    circularInformation: /* @__PURE__ */ jsx(CircularInformation, {})
-  };
-  return all[type];
+  switch (type) {
+    case "schedule":
+      return /* @__PURE__ */ jsx(Schedule, {});
+    case "certificate":
+      return /* @__PURE__ */ jsx(Certificate, {});
+    case "circularCheck":
+      return /* @__PURE__ */ jsx(CircularCheck, {});
+    case "progress":
+      return /* @__PURE__ */ jsx(Progress, {
+        value: progressValue
+      });
+    case "circularInformation":
+      return /* @__PURE__ */ jsx(CircularInformation, {});
+    default:
+      return null;
+  }
 }
+const ID_QUALIFIED = 7;
 function Section() {
   const {
     name,
     dateStatus,
     information,
-    progress
+    progress,
+    status
   } = React__default.useContext(CourseBoxContext);
   if (!progress) {
     return null;
@@ -10221,9 +10242,10 @@ function Section() {
     p: "0 .9375rem",
     children: [(dateStatus == null ? void 0 : dateStatus.hasDates) && /* @__PURE__ */ jsxs(HStack, {
       direction: "row",
-      divider: dateStatus.init.length > 0 && dateStatus.end.length > 0 ? /* @__PURE__ */ jsx(StackDivider, {
+      divider: dateStatus.init !== void 0 && dateStatus.init.length > 0 && dateStatus.end !== void 0 && dateStatus.end.length > 0 ? /* @__PURE__ */ jsx(Box, {
         h: ".5rem",
-        borderColor: vars("colors-neutral-silverSand"),
+        w: "1px",
+        bg: vars("colors-neutral-silverSand"),
         alignSelf: "center"
       }) : /* @__PURE__ */ jsx(Fragment, {}),
       children: [/* @__PURE__ */ jsx(DateStatus, {
@@ -10252,9 +10274,9 @@ function Section() {
           lineHeight: "1.125rem",
           children: progress == null ? void 0 : progress.label
         })]
-      }), (progress == null ? void 0 : progress.finalGrade.length) > 0 && /* @__PURE__ */ jsx(Label, {
+      }), (status == null ? void 0 : status.id) === ID_QUALIFIED && (progress == null ? void 0 : progress.finalGrade.length) > 0 && /* @__PURE__ */ jsx(Label, {
         size: "sm",
-        bg: (progress == null ? void 0 : progress.isApproved) ? vars("colors-alert-jadeGreen") : vars("colors-alert-red"),
+        bg: progress.isApproved ? vars("colors-alert-jadeGreen") : vars("colors-alert-red"),
         color: vars("colors-neutral-white"),
         children: progress == null ? void 0 : progress.finalGrade
       })]
@@ -10262,42 +10284,45 @@ function Section() {
       spacing: ".625rem",
       paddingInlineStart: "0",
       pt: ".625rem",
-      mt: ".625rem",
+      m: ".625rem 0 0",
       lineHeight: ".875rem",
-      borderTop: "1px solid",
-      borderTopColor: vars("colors-neutral-platinum"),
-      children: information.map((item, index) => /* @__PURE__ */ jsxs(ListItem, {
-        display: "flex",
-        children: [/* @__PURE__ */ jsx(IconSelection, {
-          type: item.icon
-        }), /* @__PURE__ */ jsx(Box, {
-          display: "inline-block",
-          ml: ".625rem",
-          children: item.href.length > 0 ? /* @__PURE__ */ jsx(Link, {
-            isExternal: true,
-            href: item.href,
-            color: vars("colors-main-deepSkyBlue"),
-            textDecor: "underline",
-            fontWeight: "500",
-            fontSize: ".75rem",
-            children: item.text
-          }) : /* @__PURE__ */ jsx(Text, {
-            m: "0",
-            color: vars("colors-neutral-gray"),
-            fontSize: ".75rem",
-            children: item.text
-          })
-        })]
-      }, index))
+      borderTop: `1px solid ${vars("colors-neutral-platinum")}`,
+      children: information.map((item, index) => {
+        var _a;
+        return /* @__PURE__ */ jsxs(ListItem, {
+          display: "flex",
+          children: [/* @__PURE__ */ jsx(IconSelection, {
+            type: item.icon
+          }), /* @__PURE__ */ jsx(Box, {
+            display: "inline-block",
+            ml: ".625rem",
+            children: item.href !== void 0 && ((_a = item.href) == null ? void 0 : _a.length) > 0 ? /* @__PURE__ */ jsx(Link, {
+              isExternal: true,
+              href: item.href,
+              color: vars("colors-main-deepSkyBlue"),
+              textDecor: "underline",
+              fontWeight: "500",
+              fontSize: ".75rem",
+              children: item.text
+            }) : /* @__PURE__ */ jsx(Text, {
+              m: "0",
+              color: vars("colors-neutral-gray"),
+              fontSize: ".75rem",
+              children: item.text
+            })
+          })]
+        }, index);
+      })
     })]
   });
 }
 Section.displayName = "Section";
 function Footer() {
+  var _a;
   const {
     action
   } = React.useContext(CourseBoxContext);
-  if (action === void 0 || (action == null ? void 0 : action.enabled) && action.href.length === 0) {
+  if (action === void 0 || (action == null ? void 0 : action.enabled) && ((_a = action.href) == null ? void 0 : _a.length) === 0) {
     return null;
   }
   return /* @__PURE__ */ jsx(Center, {
@@ -10315,13 +10340,14 @@ function Footer() {
         lineHeight: "1.172rem",
         isExternal: action.targetBlank,
         children: action.text
-      }), action.hasIcon && /* @__PURE__ */ jsx(ArrowRight, {
+      }), action.hasIcon === true && /* @__PURE__ */ jsx(ArrowRight, {
         color: vars("colors-main-deepSkyBlue")
       })]
     }) : /* @__PURE__ */ jsx(Text, {
       fontWeight: "500",
       lineHeight: "1.172rem",
       color: vars("colors-neutral-spanishGrey"),
+      m: "0",
       children: action.text
     })
   });
@@ -10341,6 +10367,7 @@ function WithRipples({
 function CourseBox({
   data
 }) {
+  var _a, _b;
   const cssActive = {
     boxShadow: `0 2px 7px 0 ${vars("colors-neutral-silverSand")}`
   };
@@ -10348,8 +10375,7 @@ function CourseBox({
     value: data,
     children: /* @__PURE__ */ jsx(LinkBox, {
       as: "article",
-      borderWidth: "1px",
-      borderColor: vars("colors-neutral-platinum"),
+      border: `1px solid ${vars("colors-neutral-platinum")}`,
       borderRadius: 10,
       cursor: "pointer",
       transition: "box-shadow .3s",
@@ -10358,7 +10384,7 @@ function CourseBox({
       _focus: cssActive,
       overflow: "hidden",
       children: /* @__PURE__ */ jsx(WithRipples, {
-        enabled: data.action.enabled,
+        enabled: (_b = (_a = data.action) == null ? void 0 : _a.enabled) != null ? _b : false,
         children: /* @__PURE__ */ jsxs(Flex, {
           direction: "column",
           justify: "space-between",
@@ -10378,7 +10404,7 @@ function CourseList({
   courses,
   m: m2 = "0 auto"
 }) {
-  if (courses.length === 0) {
+  if ((courses == null ? void 0 : courses.length) === 0) {
     return null;
   }
   return /* @__PURE__ */ jsx(Box, {
@@ -10387,20 +10413,21 @@ function CourseList({
     gridRowGap: "1.75rem",
     gridTemplateColumns: `repeat(auto-fill, minmax(${wCourse}rem, 1fr))`,
     m: m2,
-    children: courses.map((course) => /* @__PURE__ */ jsx(CourseBox, {
+    w: "100%",
+    children: courses == null ? void 0 : courses.map((course) => /* @__PURE__ */ jsx(CourseBox, {
       data: course
     }, course.id))
   });
 }
 CourseList.displayName = "CourseList";
-const maxWidthCoursesList = (nCols = 4) => {
+function maxWidthCoursesList(nCols = 4) {
   const maxWidth = nCols * wCourse + columnGap * (nCols - 1);
   return {
     px: `${maxWidth * 16}px`,
     rem: `${maxWidth}rem`,
     remValue: maxWidth
   };
-};
+}
 const dataBase = {
   name: "Orientaci\xF3n en la prevenci\xF3n de contagio de COVID-19",
   background: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT76y4DAhqWAlCspmGYWcbxSDnLw3p1FzJQKA&usqp=CAU",
@@ -10474,7 +10501,7 @@ const dataStates = {
     information: [{
       icon: "certificate",
       text: "Certificado por ACHS",
-      href: ""
+      href: null
     }],
     action: __spreadProps(__spreadValues({}, dataBase.action), {
       href: "#",
@@ -10483,6 +10510,8 @@ const dataStates = {
     labels: []
   }),
   preInscripcion: __spreadProps(__spreadValues({}, dataBase), {
+    logo: "https://cdn.eclass.com/img/productos/logos/logo-utec-square.jpg",
+    background: "https://cdn.eclass.com/img/cursos/default1.png",
     id: 2,
     status: __spreadProps(__spreadValues({}, dataBase.status), {
       id: 2,
@@ -10508,6 +10537,7 @@ const dataStates = {
   }),
   preInscripcion2: __spreadProps(__spreadValues({}, dataBase), {
     id: 3,
+    logo: "",
     status: __spreadProps(__spreadValues({}, dataBase.status), {
       id: 2,
       name: "preInscripcion"
@@ -10531,6 +10561,7 @@ const dataStates = {
     labels: []
   }),
   inscripcion: __spreadProps(__spreadValues({}, dataBase), {
+    background: "https://cdn.eclass.com/img/cursos/default2.png",
     id: 4,
     status: __spreadProps(__spreadValues({}, dataBase.status), {
       id: 3,
@@ -10559,10 +10590,6 @@ const dataStates = {
       id: 3,
       name: "inscripcion"
     }),
-    Profile: {
-      id: 1,
-      name: "Administrador"
-    },
     progress: __spreadProps(__spreadValues({}, dataBase.progress), {
       label: "Tienes hasta el Lunes 16 de Enero para de 2022 inscribirte",
       icon: "schedule"
@@ -10570,11 +10597,7 @@ const dataStates = {
     dateStatus: __spreadProps(__spreadValues({}, dataBase.dateStatus), {
       hasDates: true
     }),
-    information: [{
-      icon: "certificate",
-      text: "Certificado por ACHS",
-      href: ""
-    }],
+    information: [],
     action: __spreadProps(__spreadValues({}, dataBase.action), {
       text: "Inscr\xEDbete",
       targetBlank: true
@@ -10589,6 +10612,8 @@ const dataStates = {
   }),
   noDisponible: __spreadProps(__spreadValues({}, dataBase), {
     id: 6,
+    logo: "",
+    background: "https://cdn.eclass.com/img/cursos/default2.png",
     status: __spreadProps(__spreadValues({}, dataBase.status), {
       id: 4,
       name: "no disponible"
@@ -10611,15 +10636,11 @@ const dataStates = {
       text: "Ver informaci\xF3n del curso",
       targetBlank: true
     }),
-    labels: [{
-      id: "OBLIGATORY",
-      text: "Obligatorio"
-    }, {
-      id: "NEW",
-      text: "Nuevo"
-    }]
+    labels: []
   }),
   noDisponible2: __spreadProps(__spreadValues({}, dataBase), {
+    background: "https://cdn.eclass.com/img/cursos/default3.png",
+    logo: "https://cdn.eclass.com/img/productos/logos/logo-eclass-academy-square.jpg",
     id: 7,
     status: __spreadProps(__spreadValues({}, dataBase.status), {
       id: 4,
@@ -10640,8 +10661,7 @@ const dataStates = {
       href: ""
     }],
     action: __spreadProps(__spreadValues({}, dataBase.action), {
-      enabled: false,
-      text: "Ver informaci\xF3n del curso"
+      enabled: false
     }),
     labels: []
   }),
@@ -10679,6 +10699,7 @@ const dataStates = {
   }),
   sinEstudiar: __spreadProps(__spreadValues({}, dataBase), {
     id: 9,
+    logo: "",
     status: __spreadProps(__spreadValues({}, dataBase.status), {
       id: 6,
       name: "sinEstudiar"
@@ -10711,6 +10732,7 @@ const dataStates = {
   }),
   sinEstudiar2: __spreadProps(__spreadValues({}, dataBase), {
     id: 10,
+    background: "https://cdn.eclass.com/img/cursos/default2.png",
     status: __spreadProps(__spreadValues({}, dataBase.status), {
       id: 6,
       name: "sinEstudiar"
@@ -10843,6 +10865,7 @@ const dataStates = {
       id: 7,
       name: "continuar"
     }),
+    logo: "",
     progress: __spreadProps(__spreadValues({}, dataBase.progress), {
       label: "Has completado un 100% de tu curso",
       icon: "progress",
@@ -10868,6 +10891,7 @@ const dataStates = {
     labels: []
   }),
   pendiente: __spreadProps(__spreadValues({}, dataBase), {
+    background: "https://cdn.eclass.com/img/cursos/default3.png",
     id: 15,
     status: __spreadProps(__spreadValues({}, dataBase.status), {
       id: 8,
@@ -10928,7 +10952,12 @@ const dataStates = {
     labels: []
   }),
   terminado2: __spreadProps(__spreadValues({}, dataBase), {
+    logo: "https://cdn.eclass.com/img/productos/logos/logo-eclass-academy-square.jpg",
     id: 17,
+    Profile: {
+      id: 1,
+      name: "Administrador"
+    },
     status: __spreadProps(__spreadValues({}, dataBase.status), {
       id: 9,
       name: "terminado"
@@ -10960,6 +10989,7 @@ const dataStates = {
   }),
   terminado3: __spreadProps(__spreadValues({}, dataBase), {
     id: 18,
+    logo: "",
     status: __spreadProps(__spreadValues({}, dataBase.status), {
       id: 9,
       name: "terminado"
@@ -11050,5 +11080,17 @@ const theme = extendTheme({
   styles
 });
 const vars = (value) => `var(--chakra-${value})`;
-export { CourseList, Label, Progress, Ripples, dataFake, maxWidthCoursesList, theme, vars };
+const TestVars = ({
+  color: color2 = "main.veryLightBlue"
+}) => {
+  return /* @__PURE__ */ jsx(chakra.button, {
+    px: "3",
+    py: "2",
+    bg: "main.deepSkyBlue",
+    rounded: "md",
+    color: color2,
+    children: "Click me"
+  });
+};
+export { CourseList, Label, Progress, Ripples, TestVars, dataFake, maxWidthCoursesList, theme, vars };
 //# sourceMappingURL=eclass-ui-kit.es.js.map