@eclass/ui-kit 1.8.1 → 1.9.0

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

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

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

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

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

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

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

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

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

@@ -5,3 +5,7 @@ export * from './CircularCheck';
 export * from './CircularInformation';
 export * from './Profile';
 export * from './Schedule';
+export * from './TinyAlertInfo';
+export * from './TinyAlertError';
+export * from './TinyAlertWarning';
+export * from './TinyAlertSuccess';

package/dist/atoms/TinyAlert/TinyAlert.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+export interface props {
+    status: 'success' | 'error' | 'info' | 'warning' | 'answered' | 'pending' | 'omitted' | 'new';
+    text?: string;
+    margin?: string;
+}
+/**
+ * Componente que retorna un label con distintos tipos de estado y muestra un texto por defecto en caso de que el mensaje no se especifique.
+ *
+ * @example
+ * <TinyAlert status="info" />
+ */
+export declare function TinyAlert({ status, text, margin }: props): JSX.Element | null;
+export declare namespace TinyAlert {
+    var displayName: string;
+}

package/dist/atoms/index.d.ts

@@ -1,3 +1,4 @@
 export * from './Label/Label';
 export * from './Progress/Progress';
 export * from './Ripples/Ripples';
+export * from './TinyAlert/TinyAlert';

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

@@ -26527,6 +26527,199 @@ function Schedule(props) {
   }));
 }
 Schedule.displayName = "Schedule";
+function TinyAlertInfo(props) {
+  return /* @__PURE__ */ jsxs(Base, __spreadProps(__spreadValues({}, props), {
+    w: "12px",
+    h: "12px",
+    viewBox: "0 0 12 12",
+    children: [/* @__PURE__ */ jsx("circle", {
+      cx: "6",
+      cy: "6",
+      r: "6",
+      fill: "#0189FF"
+    }), /* @__PURE__ */ jsx("path", {
+      d: "M7 6H5V10H7V6Z",
+      fill: "white"
+    }), /* @__PURE__ */ jsx("path", {
+      d: "M6 4C6.55228 4 7 3.55228 7 3C7 2.44772 6.55228 2 6 2C5.44772 2 5 2.44772 5 3C5 3.55228 5.44772 4 6 4Z",
+      fill: "white"
+    })]
+  }));
+}
+TinyAlertInfo.displayName = "TinyAlertInfo";
+function TinyAlertError(props) {
+  return /* @__PURE__ */ jsxs(Base, __spreadProps(__spreadValues({}, props), {
+    w: "12px",
+    h: "12px",
+    viewBox: "0 0 12 12",
+    children: [/* @__PURE__ */ jsxs("g", {
+      clipPath: "url(#clip0_2165_6683)",
+      children: [/* @__PURE__ */ jsx("circle", {
+        cx: "6",
+        cy: "6",
+        r: "6",
+        fill: "#CC0000"
+      }), /* @__PURE__ */ jsx("path", {
+        fillRule: "evenodd",
+        clipRule: "evenodd",
+        d: "M3.87867 2.46447L2.46446 3.87868L4.58578 6L2.46446 8.12132L3.87867 9.53553L5.99999 7.41421L8.12131 9.53553L9.53553 8.12132L7.41421 6L9.53553 3.87868L8.12131 2.46447L5.99999 4.58579L3.87867 2.46447Z",
+        fill: "white"
+      })]
+    }), /* @__PURE__ */ jsx("defs", {
+      children: /* @__PURE__ */ jsx("clipPath", {
+        id: "clip0_2165_6683",
+        children: /* @__PURE__ */ jsx("rect", {
+          width: "12px",
+          height: "12px",
+          fill: "white"
+        })
+      })
+    })]
+  }));
+}
+TinyAlertError.displayName = "TinyAlertError";
+function TinyAlertWarning(props) {
+  return /* @__PURE__ */ jsxs(Base, __spreadProps(__spreadValues({}, props), {
+    w: "12px",
+    h: "12px",
+    viewBox: "0 0 12 12",
+    children: [/* @__PURE__ */ jsx("circle", {
+      cx: "6",
+      cy: "6",
+      r: "6",
+      fill: "#F5A623"
+    }), /* @__PURE__ */ jsx("path", {
+      d: "M5 6L7 6L7 2L5 2L5 6Z",
+      fill: "white"
+    }), /* @__PURE__ */ jsx("path", {
+      d: "M6 8C5.44771 8 5 8.44772 5 9C5 9.55228 5.44772 10 6 10C6.55228 10 7 9.55228 7 9C7 8.44772 6.55228 8 6 8Z",
+      fill: "white"
+    })]
+  }));
+}
+TinyAlertWarning.displayName = "TinyAlertWarning";
+function TinyAlertSuccess(props) {
+  return /* @__PURE__ */ jsxs(Base, __spreadProps(__spreadValues({}, props), {
+    w: "12px",
+    h: "12px",
+    viewBox: "0 0 12 12",
+    children: [/* @__PURE__ */ jsxs("g", {
+      clipPath: "url(#clip0_2191_1138)",
+      children: [/* @__PURE__ */ jsx("circle", {
+        cx: "6",
+        cy: "6",
+        r: "6",
+        fill: "#28A745"
+      }), /* @__PURE__ */ jsx("path", {
+        fillRule: "evenodd",
+        clipRule: "evenodd",
+        d: "M3.41421 5.53549L2 6.94971L3.41421 8.36392L4.82843 9.77813L9.77817 4.82839L8.36396 3.41417L4.82843 6.94971L3.41421 5.53549Z",
+        fill: "white"
+      })]
+    }), /* @__PURE__ */ jsx("defs", {
+      children: /* @__PURE__ */ jsx("clipPath", {
+        id: "clip0_2191_1138",
+        children: /* @__PURE__ */ jsx("rect", {
+          width: "12",
+          height: "12",
+          fill: "white"
+        })
+      })
+    })]
+  }));
+}
+TinyAlertSuccess.displayName = "TinyAlertSuccess";
+function TinyAlert({
+  status,
+  text,
+  margin = "0"
+}) {
+  const alerts = {
+    success: {
+      icon: /* @__PURE__ */ jsx(TinyAlertSuccess, {}),
+      text: "Success",
+      bg: vars("colors-alert-ice"),
+      color: vars("colors-neutral-darkCharcoal")
+    },
+    error: {
+      icon: /* @__PURE__ */ jsx(TinyAlertError, {}),
+      text: "Error",
+      bg: vars("colors-alert-veryLightPinkThree"),
+      color: vars("colors-neutral-darkCharcoal")
+    },
+    info: {
+      icon: /* @__PURE__ */ jsx(TinyAlertInfo, {}),
+      text: "Info",
+      bg: vars("colors-alert-veryLightBlue"),
+      color: vars("colors-neutral-darkCharcoal")
+    },
+    warning: {
+      icon: /* @__PURE__ */ jsx(TinyAlertWarning, {}),
+      text: "Warning",
+      bg: vars("colors-alert-pale"),
+      color: vars("colors-neutral-darkCharcoal")
+    },
+    answered: {
+      icon: void 0,
+      text: "Answered",
+      bg: vars("colors-main-blueGrey"),
+      color: vars("colors-neutral-white")
+    },
+    omitted: {
+      icon: void 0,
+      text: "Omitted",
+      bg: vars("colors-main-ziggurat"),
+      color: vars("colors-neutral-darkCharcoal")
+    },
+    pending: {
+      icon: void 0,
+      text: "Pending",
+      bg: vars("colors-neutral-cultured"),
+      color: vars("colors-neutral-darkCharcoal")
+    },
+    new: {
+      icon: void 0,
+      text: "New answer",
+      bg: "#FF7A14",
+      color: vars("colors-neutral-white")
+    }
+  };
+  if (!alerts[status]) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs(Box, {
+    margin,
+    "data-testid": "TinyAlert-Box",
+    backgroundColor: alerts[status].bg,
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "center",
+    padding: ".125em .25em",
+    gap: ".25rem",
+    width: "fit-content",
+    borderRadius: ".25rem",
+    children: [alerts[status].icon && /* @__PURE__ */ jsx(Box, {
+      lineHeight: 0,
+      sx: {
+        ">svg": {
+          margin: 0
+        }
+      },
+      children: alerts[status].icon
+    }), /* @__PURE__ */ jsx(Box, {
+      as: "span",
+      color: alerts[status].color,
+      fontSize: ".75rem",
+      fontStyle: "normal",
+      fontWeight: "400",
+      fontFamily: "Roboto",
+      lineHeight: ".875rem",
+      margin: "0",
+      children: text != null ? text : alerts[status].text
+    })]
+  });
+}
+TinyAlert.displayName = "TinyAlert";
 const STUDENT = 4;
 function Header() {
   const {
@@ -27695,5 +27888,5 @@ function CourseList({
   });
 }
 CourseList.displayName = "CourseList";
-export { CourseList, Label, Progress, Ripples, dataFake, maxWidthCoursesList, theme, vars };
+export { CourseList, Label, Progress, Ripples, TinyAlert, dataFake, maxWidthCoursesList, theme, vars };
 //# sourceMappingURL=eclass-ui-kit.es.js.map