@eclass/ui-kit 1.11.7 → 1.13.0

package/README.md

@@ -0,0 +1,57 @@
+[[_TOC_]]
+
+## Información
+
+Este repositorio es una librería de componentes que se pensó para unificar estilos en los desarrollos de Eclass
+
+La fuente de donde se basan los componentes se encuentran en este [**Sistema de diseño**](https://zeroheight.com/15698077d/p/48fae4-eclass-sistema-de-diseo)
+
+## Scripts
+
+Los componentes están al 100% en escritas en archivos `typescript`.
+
+Además deben ser testeadas en donde el enfoque del `testing` es asegurarse de que se muestre todo lo que se promete
+
+Por otra parte cada componente debe llevar su `storie` donde muestre todos los estados que puede tomar el componente
+
+```
+  npm run dev
+```
+
+Para trabajar de manera local
+
+```
+  npm run storybook
+```
+Levanta el entorno de `storybook`
+
+```
+  npm run test
+```
+
+Ejecuta los test con `jest`
+
+## Instalación
+
+Se debe instalar este repositorio más unas dependencias
+
+### npm
+
+```shell
+npm install @eclass/ui-kit @chakra-ui/react @emotion/react @emotion/styled framer-motion
+```
+
+### Implementación
+
+Ejemplo de implementación en código.
+
+```js
+import { ChakraProvider } from '@chakra-ui/react'
+import { theme } from '@eclass/ui-kit'
+
+const AppWrapper = () => (
+  <ChakraProvider theme={theme} resetCSS={false}>
+    <App />
+  </ChakraProvider>
+)
+```

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

@@ -27172,7 +27172,7 @@ function BtnTertiary({
     m: m2,
     onClick,
     _hover: {
-      color: blue
+      color: `${blue}`
     },
     _focusVisible: {
       boxShadow: `inset 0 0 0 2px ${blue}, inset 0 0 0 4px ${white}`
@@ -27186,7 +27186,13 @@ function BtnTertiary({
     sx: {
       "&:hover": {
         "svg path": {
-          fill: blue
+          fill: `${blue}`
+        },
+        "@media (hover: none)": {
+          color: `${gray}`,
+          "svg path": {
+            fill: colorIcon
+          }
         }
       }
     },
@@ -27319,6 +27325,30 @@ function IconSelection({
   }
 }
 const ID_QUALIFIED = 7;
+function CourseStatus({
+  progress: progress2,
+  status
+}) {
+  return /* @__PURE__ */ jsxs(Fragment, {
+    children: [/* @__PURE__ */ jsxs(Flex, {
+      children: [/* @__PURE__ */ jsx(IconSelection, {
+        type: progress2.icon,
+        progressValue: progress2.progress
+      }), /* @__PURE__ */ jsx(Text, {
+        m: "0",
+        ml: ".625rem",
+        fontSize: ".875rem",
+        lineHeight: "1.125rem",
+        children: progress2 == null ? void 0 : progress2.label
+      })]
+    }), (status == null ? void 0 : status.id) === ID_QUALIFIED && (progress2 == null ? void 0 : progress2.finalGrade) && (progress2 == null ? void 0 : progress2.finalGrade.length) > 0 && /* @__PURE__ */ jsx(Label, {
+      size: "sm",
+      bg: progress2.isApproved ? vars("colors-alert-jadeGreen") : vars("colors-alert-red"),
+      color: vars("colors-neutral-white"),
+      children: progress2 == null ? void 0 : progress2.finalGrade
+    })]
+  });
+}
 function Section() {
   const {
     name,
@@ -27354,26 +27384,13 @@ function Section() {
       fontWeight: "700",
       lineHeight: "1.3",
       children: name
-    }), /* @__PURE__ */ jsxs(Flex, {
+    }), /* @__PURE__ */ jsx(Flex, {
       mt: "1rem",
       justify: "space-between",
-      children: [/* @__PURE__ */ jsxs(Flex, {
-        children: [/* @__PURE__ */ jsx(IconSelection, {
-          type: progress2.icon,
-          progressValue: progress2.progress
-        }), /* @__PURE__ */ jsx(Text, {
-          m: "0",
-          ml: ".625rem",
-          fontSize: ".875rem",
-          lineHeight: "1.125rem",
-          children: progress2 == null ? void 0 : progress2.label
-        })]
-      }), (status == null ? void 0 : status.id) === ID_QUALIFIED && (progress2 == null ? void 0 : progress2.finalGrade) && (progress2 == null ? void 0 : progress2.finalGrade.length) > 0 && /* @__PURE__ */ jsx(Label, {
-        size: "sm",
-        bg: progress2.isApproved ? vars("colors-alert-jadeGreen") : vars("colors-alert-red"),
-        color: vars("colors-neutral-white"),
-        children: progress2 == null ? void 0 : progress2.finalGrade
-      })]
+      children: /* @__PURE__ */ jsx(CourseStatus, {
+        progress: progress2,
+        status
+      })
     }), information != null && (information == null ? void 0 : information.length) > 0 && /* @__PURE__ */ jsx(List, {
       spacing: ".625rem",
       paddingInlineStart: "0",
@@ -28395,5 +28412,5 @@ function CourseList({
   });
 }
 CourseList.displayName = "CourseList";
-export { Btn, BtnLink, BtnPrimary, BtnSecondary, BtnTertiary, CourseList, Label, Progress, Ripples, TinyAlert, dataFake, maxWidthCoursesList, theme, vars };
+export { Btn, BtnLink, BtnPrimary, BtnSecondary, BtnTertiary, CourseList, CourseStatus, Label, Progress, Ripples, TinyAlert, dataFake, maxWidthCoursesList, theme, vars };
 //# sourceMappingURL=eclass-ui-kit.es.js.map