@eclass/ui-kit 1.11.0 → 1.11.3

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

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

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

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

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

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

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

@@ -1,8 +1,12 @@
+export * from './AcademicRecord';
 export * from './AlertInfo';
 export * from './ArrowRight';
 export * from './Certificate';
 export * from './CircularCheck';
 export * from './CircularInformation';
+export * from './Download';
+export * from './GoBack';
+export * from './Multimedia';
 export * from './Loader';
 export * from './Profile';
 export * from './Schedule';
@@ -10,10 +14,9 @@ export * from './TinyAlertInfo';
 export * from './TinyAlertError';
 export * from './TinyAlertWarning';
 export * from './TinyAlertSuccess';
-export * from './Multimedia';
-export * from './GoBack';
 export * from './Password';
 export * from './Pen';
 export * from './PlusSign';
 export * from './TrashCan';
 export * from './TextBubble';
+export * from './VerticalLine';

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

@@ -26397,6 +26397,25 @@ function Base({
     }), children]
   });
 }
+function AcademicRecord(props) {
+  return /* @__PURE__ */ jsxs(Base, __spreadProps(__spreadValues({}, props), {
+    w: "16px",
+    h: "16px",
+    viewBox: "0 0 16 16",
+    title: "academicRecord",
+    children: [/* @__PURE__ */ jsx("path", {
+      d: "M14 0H2C1.73478 0 1.48043 0.105357 1.29289 0.292893C1.10536 0.48043 1 0.734784 1 1V7C1 7.26522 1.10536 7.51957 1.29289 7.70711C1.48043 7.89464 1.73478 8 2 8H14C14.2652 8 14.5196 7.89464 14.7071 7.70711C14.8946 7.51957 15 7.26522 15 7V1C15 0.734784 14.8946 0.48043 14.7071 0.292893C14.5196 0.105357 14.2652 0 14 0V0Z",
+      fill: "currentColor"
+    }), /* @__PURE__ */ jsx("path", {
+      d: "M15 10H1V12H15V10Z",
+      fill: "currentColor"
+    }), /* @__PURE__ */ jsx("path", {
+      d: "M15 14H1V16H15V14Z",
+      fill: "currentColor"
+    })]
+  }));
+}
+AcademicRecord.displayName = "AcademicRecord";
 function AlertInfo(props) {
   return /* @__PURE__ */ jsx(Base, __spreadProps(__spreadValues({}, props), {
     children: /* @__PURE__ */ jsxs("svg", {
@@ -26506,6 +26525,55 @@ function CircularInformation(props) {
   }));
 }
 CircularInformation.displayName = "CircularInformation";
+function Download(props) {
+  return /* @__PURE__ */ jsxs(Base, __spreadProps(__spreadValues({}, props), {
+    w: "16px",
+    h: "16px",
+    viewBox: "0 0 16 16",
+    children: [/* @__PURE__ */ jsx("path", {
+      d: "M7.99998 12C8.29998 12 8.49998 11.9 8.69998 11.7L14.4 6L13 4.6L8.99998 8.6V0H6.99998V8.6L2.99998 4.6L1.59998 6L7.29998 11.7C7.49998 11.9 7.69998 12 7.99998 12Z",
+      fill: "currentColor"
+    }), /* @__PURE__ */ jsx("path", {
+      d: "M15 14H1V16H15V14Z",
+      fill: "currentColor"
+    })]
+  }));
+}
+Download.displayName = "Download";
+function GoBack(props) {
+  return /* @__PURE__ */ jsx(Base, __spreadProps(__spreadValues({}, props), {
+    w: "16px",
+    h: "16px",
+    viewBox: "0 0 16 16",
+    title: "goBack",
+    children: /* @__PURE__ */ jsx("path", {
+      d: "M9.92593 2L4 8L9.92593 14L12 11.9L8.14815 8L12 4.1L9.92593 2Z",
+      fill: "currentColor"
+    })
+  }));
+}
+GoBack.displayName = "GoBack";
+function Multimedia(props) {
+  return /* @__PURE__ */ jsxs(Base, __spreadProps(__spreadValues({}, props), {
+    w: "12px",
+    viewBox: "0 0 14 14",
+    title: "multimedia",
+    children: [/* @__PURE__ */ jsx("path", {
+      d: "M3 6C4.65685 6 6 4.65685 6 3C6 1.34315 4.65685 0 3 0C1.34315 0 0 1.34315 0 3C0 4.65685 1.34315 6 3 6Z",
+      fill: "currentColor"
+    }), /* @__PURE__ */ jsx("path", {
+      d: "M11 6C12.6569 6 14 4.65685 14 3C14 1.34315 12.6569 0 11 0C9.34315 0 8 1.34315 8 3C8 4.65685 9.34315 6 11 6Z",
+      fill: "currentColor"
+    }), /* @__PURE__ */ jsx("path", {
+      d: "M3 14C4.65685 14 6 12.6569 6 11C6 9.34315 4.65685 8 3 8C1.34315 8 0 9.34315 0 11C0 12.6569 1.34315 14 3 14Z",
+      fill: "currentColor"
+    }), /* @__PURE__ */ jsx("path", {
+      d: "M11 14C12.6569 14 14 12.6569 14 11C14 9.34315 12.6569 8 11 8C9.34315 8 8 9.34315 8 11C8 12.6569 9.34315 14 11 14Z",
+      fill: "currentColor"
+    })]
+  }));
+}
+Multimedia.displayName = "Multimedia";
 function Loader({
   fill = "#fff"
 }) {
@@ -26694,40 +26762,6 @@ function TinyAlertSuccess(props) {
   }));
 }
 TinyAlertSuccess.displayName = "TinyAlertSuccess";
-function Multimedia(props) {
-  return /* @__PURE__ */ jsxs(Base, __spreadProps(__spreadValues({}, props), {
-    w: "12px",
-    viewBox: "0 0 14 14",
-    title: "multimedia",
-    children: [/* @__PURE__ */ jsx("path", {
-      d: "M3 6C4.65685 6 6 4.65685 6 3C6 1.34315 4.65685 0 3 0C1.34315 0 0 1.34315 0 3C0 4.65685 1.34315 6 3 6Z",
-      fill: "currentColor"
-    }), /* @__PURE__ */ jsx("path", {
-      d: "M11 6C12.6569 6 14 4.65685 14 3C14 1.34315 12.6569 0 11 0C9.34315 0 8 1.34315 8 3C8 4.65685 9.34315 6 11 6Z",
-      fill: "currentColor"
-    }), /* @__PURE__ */ jsx("path", {
-      d: "M3 14C4.65685 14 6 12.6569 6 11C6 9.34315 4.65685 8 3 8C1.34315 8 0 9.34315 0 11C0 12.6569 1.34315 14 3 14Z",
-      fill: "currentColor"
-    }), /* @__PURE__ */ jsx("path", {
-      d: "M11 14C12.6569 14 14 12.6569 14 11C14 9.34315 12.6569 8 11 8C9.34315 8 8 9.34315 8 11C8 12.6569 9.34315 14 11 14Z",
-      fill: "currentColor"
-    })]
-  }));
-}
-Multimedia.displayName = "Multimedia";
-function GoBack(props) {
-  return /* @__PURE__ */ jsx(Base, __spreadProps(__spreadValues({}, props), {
-    w: "16px",
-    h: "16px",
-    viewBox: "0 0 16 16",
-    title: "goBack",
-    children: /* @__PURE__ */ jsx("path", {
-      d: "M9.92593 2L4 8L9.92593 14L12 11.9L8.14815 8L12 4.1L9.92593 2Z",
-      fill: "currentColor"
-    })
-  }));
-}
-GoBack.displayName = "GoBack";
 function Password(props) {
   return /* @__PURE__ */ jsx(Base, __spreadProps(__spreadValues({}, props), {
     w: "16px",
@@ -26803,6 +26837,21 @@ function TextBubble(props) {
   }));
 }
 TextBubble.displayName = "TextBubble";
+function VerticalLine(props) {
+  return /* @__PURE__ */ jsx(Base, __spreadProps(__spreadValues({}, props), {
+    w: "1px",
+    h: "15px",
+    viewBox: "0 0 1 15",
+    title: "verticalLine",
+    children: /* @__PURE__ */ jsx("rect", {
+      y: "-1",
+      width: "1",
+      height: "16",
+      fill: "#D8D8D8"
+    })
+  }));
+}
+VerticalLine.displayName = "VerticalLine";
 function TinyAlert({
   status,
   text,
@@ -26920,6 +26969,7 @@ function Btn({
   if (!children && !rightIcon && !leftIcon) {
     showChildren = "Button";
   }
+  const paddingTopBottom = ".75rem";
   const borderRadius = rounded ? "12px" : vars("radii-small");
   const colorMain = (_a = bg2 == null ? void 0 : bg2.main) != null ? _a : vars("colors-main-deepSkyBlue");
   const touchColor = touchDark ? "rgba(160, 160, 160, 0.2)" : "rgba(255, 255, 255, 0.2)";
@@ -26954,8 +27004,8 @@ function Btn({
         },
         type,
         tabIndex,
-        paddingTop: size2 === "regular" ? vars("space-xs") : vars("space-xxs"),
-        paddingBottom: size2 === "regular" ? vars("space-xs") : vars("space-xxs"),
+        paddingTop: size2 === "regular" ? paddingTopBottom : onlyIcon ? vars("space-xs") : vars("space-xxs"),
+        paddingBottom: size2 === "regular" ? paddingTopBottom : onlyIcon ? vars("space-xs") : vars("space-xxs"),
         paddingLeft: size2 === "regular" ? vars("space-s") : vars("space-xs"),
         paddingRight: size2 === "regular" ? vars("space-s") : vars("space-xs"),
         position: "relative",
@@ -27072,13 +27122,14 @@ function BtnTertiary({
   type = "button",
   tabIndex,
   id: id2,
+  separation = false,
   onClick
 }) {
   var _a;
   const gray = vars("colors-neutral-gray");
   const blue = vars("colors-main-deepSkyBlue");
   const white = vars("colors-neutral-white");
-  const colorIcon = withoutColor ? gray : blue;
+  const colorIcon = withoutColor ? vars("colors-main-blueGrey") : blue;
   const btnIcons = {
     answer: /* @__PURE__ */ jsx(TextBubble, {
       color: colorIcon
@@ -27086,31 +27137,41 @@ function BtnTertiary({
     back: /* @__PURE__ */ jsx(GoBack, {
       color: colorIcon
     }),
-    edit: /* @__PURE__ */ jsx(Pen, {
+    delete: /* @__PURE__ */ jsx(TrashCan, {
       color: colorIcon
     }),
-    eliminate: /* @__PURE__ */ jsx(TrashCan, {
+    download: /* @__PURE__ */ jsx(Download, {
+      color: colorIcon
+    }),
+    edit: /* @__PURE__ */ jsx(Pen, {
       color: colorIcon
     }),
     more: /* @__PURE__ */ jsx(PlusSign, {
       color: colorIcon
     }),
+    multimedia: /* @__PURE__ */ jsx(Multimedia, {
+      color: colorIcon
+    }),
     password: /* @__PURE__ */ jsx(Password, {
       color: colorIcon
     }),
-    multimedia: /* @__PURE__ */ jsx(Multimedia, {
+    record: /* @__PURE__ */ jsx(AcademicRecord, {
       color: colorIcon
-    })
+    }),
+    noIcon: /* @__PURE__ */ jsx(Fragment, {})
   };
   const icon = (_a = btnIcons[iconStatus]) != null ? _a : btnIcons.multimedia;
   const rIcon = rightIcon ? icon : void 0;
   const lIcon = !rightIcon ? icon : void 0;
-  return /* @__PURE__ */ jsx(Button, {
+  const verticalLine = separation ? /* @__PURE__ */ jsx(VerticalLine, {
+    m: "0 0 0 8px"
+  }) : void 0;
+  return /* @__PURE__ */ jsxs(Button, {
     id: id2,
     type,
     tabIndex,
     height: "24px",
-    background: white,
+    background: "transparent",
     fontFamily: "Roboto",
     fontStyle: "normal",
     fontWeight: "500",
@@ -27118,6 +27179,10 @@ function BtnTertiary({
     lineHeight: "16px",
     textDecorationLine: "underline",
     borderRadius: "12px",
+    paddingTop: vars("space-xxs"),
+    paddingBottom: vars("space-xxs"),
+    paddingLeft: !separation ? vars("space-xs") : "0",
+    paddingRight: vars("space-xs"),
     color: gray,
     rightIcon: rIcon,
     leftIcon: lIcon,
@@ -27126,9 +27191,15 @@ function BtnTertiary({
     _hover: {
       color: blue
     },
-    _focus: {
+    _focusVisible: {
       boxShadow: `inset 0 0 0 2px ${blue}, inset 0 0 0 4px ${white}`
     },
+    _focus: {
+      boxShadow: "none"
+    },
+    _active: {
+      bg: "transparent"
+    },
     sx: {
       "&:hover": {
         "svg path": {
@@ -27136,10 +27207,40 @@ function BtnTertiary({
         }
       }
     },
-    children
+    children: [children, verticalLine]
   });
 }
 BtnTertiary.displayName = "BtnTertiary";
+function BtnLink({
+  children,
+  m: m2 = "0",
+  onClick,
+  id: id2
+}) {
+  return /* @__PURE__ */ jsx(Box, {
+    as: "button",
+    id: id2,
+    backgroundColor: "transparent",
+    borderStyle: "none",
+    width: "fit-content",
+    padding: ".25em",
+    fontFamily: "Roboto",
+    fontStyle: "normal",
+    fontWeight: "500",
+    fontSize: ".875rem",
+    lineHeight: "1rem",
+    textDecorationLine: "underline",
+    color: vars("colors-main-deepSkyBlue"),
+    m: m2,
+    onClick,
+    _hover: {
+      color: vars("colors-neutral-darkCharcoal"),
+      cursor: "pointer"
+    },
+    children
+  });
+}
+BtnLink.displayName = "BtnLink";
 const STUDENT = 4;
 function Header() {
   const {
@@ -28311,5 +28412,5 @@ function CourseList({
   });
 }
 CourseList.displayName = "CourseList";
-export { Btn, BtnPrimary, BtnSecondary, BtnTertiary, CourseList, Label, Progress, Ripples, TinyAlert, dataFake, maxWidthCoursesList, theme, vars };
+export { Btn, BtnLink, BtnPrimary, BtnSecondary, BtnTertiary, CourseList, Label, Progress, Ripples, TinyAlert, dataFake, maxWidthCoursesList, theme, vars };
 //# sourceMappingURL=eclass-ui-kit.es.js.map