@eclass/ui-kit 1.11.5 → 1.12.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md
ADDED
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
[[_TOC_]]
|
|
2
|
+
|
|
3
|
+
## Información
|
|
4
|
+
|
|
5
|
+
Este repositorio es una librería de componentes que se pensó para unificar estilos en los desarrollos de Eclass
|
|
6
|
+
|
|
7
|
+
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)
|
|
8
|
+
|
|
9
|
+
## Scripts
|
|
10
|
+
|
|
11
|
+
Los componentes están al 100% en escritas en archivos `typescript`.
|
|
12
|
+
|
|
13
|
+
Además deben ser testeadas en donde el enfoque del `testing` es asegurarse de que se muestre todo lo que se promete
|
|
14
|
+
|
|
15
|
+
Por otra parte cada componente debe llevar su `storie` donde muestre todos los estados que puede tomar el componente
|
|
16
|
+
|
|
17
|
+
```
|
|
18
|
+
npm run dev
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
Para trabajar de manera local
|
|
22
|
+
|
|
23
|
+
```
|
|
24
|
+
npm run storybook
|
|
25
|
+
```
|
|
26
|
+
Levanta el entorno de `storybook`
|
|
27
|
+
|
|
28
|
+
```
|
|
29
|
+
npm run test
|
|
30
|
+
```
|
|
31
|
+
|
|
32
|
+
Ejecuta los test con `jest`
|
|
33
|
+
|
|
34
|
+
## Instalación
|
|
35
|
+
|
|
36
|
+
Se debe instalar este repositorio más unas dependencias
|
|
37
|
+
|
|
38
|
+
### npm
|
|
39
|
+
|
|
40
|
+
```shell
|
|
41
|
+
npm install @eclass/ui-kit @chakra-ui/react @emotion/react @emotion/styled framer-motion
|
|
42
|
+
```
|
|
43
|
+
|
|
44
|
+
### Implementación
|
|
45
|
+
|
|
46
|
+
Ejemplo de implementación en código.
|
|
47
|
+
|
|
48
|
+
```js
|
|
49
|
+
import { ChakraProvider } from '@chakra-ui/react'
|
|
50
|
+
import { theme } from '@eclass/ui-kit'
|
|
51
|
+
|
|
52
|
+
const AppWrapper = () => (
|
|
53
|
+
<ChakraProvider theme={theme} resetCSS={false}>
|
|
54
|
+
<App />
|
|
55
|
+
</ChakraProvider>
|
|
56
|
+
)
|
|
57
|
+
```
|
package/dist/eclass-ui-kit.es.js
CHANGED
|
@@ -26980,6 +26980,8 @@ function Btn({
|
|
|
26980
26980
|
className: onlyIcon,
|
|
26981
26981
|
disabled: disabled2,
|
|
26982
26982
|
height: "auto",
|
|
26983
|
+
lineHeight: "initial",
|
|
26984
|
+
minHeight: size2 === "regular" ? "2.7rem" : "1.474rem",
|
|
26983
26985
|
iconSpacing: vars("space-xs"),
|
|
26984
26986
|
isActive: false,
|
|
26985
26987
|
isLoading,
|
|
@@ -27170,7 +27172,7 @@ function BtnTertiary({
|
|
|
27170
27172
|
m: m2,
|
|
27171
27173
|
onClick,
|
|
27172
27174
|
_hover: {
|
|
27173
|
-
color: blue
|
|
27175
|
+
color: `${blue}`
|
|
27174
27176
|
},
|
|
27175
27177
|
_focusVisible: {
|
|
27176
27178
|
boxShadow: `inset 0 0 0 2px ${blue}, inset 0 0 0 4px ${white}`
|
|
@@ -27184,7 +27186,13 @@ function BtnTertiary({
|
|
|
27184
27186
|
sx: {
|
|
27185
27187
|
"&:hover": {
|
|
27186
27188
|
"svg path": {
|
|
27187
|
-
fill: blue
|
|
27189
|
+
fill: `${blue}`
|
|
27190
|
+
},
|
|
27191
|
+
"@media (hover: none)": {
|
|
27192
|
+
color: `${gray}`,
|
|
27193
|
+
"svg path": {
|
|
27194
|
+
fill: colorIcon
|
|
27195
|
+
}
|
|
27188
27196
|
}
|
|
27189
27197
|
}
|
|
27190
27198
|
},
|