EDui
Libreria de componentes para React siguiendo la Guia de estilos de EDteam
Instalación
Para poder usar EDui primero se deben de tener instaladas las librerías node-sass, ed-grid y edteam-style-guides, una vez instaladas estas librerías se puede instalar EDui
npm install node-sass ed-grid edteam-style-guides @edteam/edui --save
or
yarn add node-sass ed-grid edteam-style-guides @edteam/eduiSe instalan ed-grid y edteam-style-guides para que la libreria se independiente de la versión actual de la guia de estilos y de EDgrid, es decir que la libreria en su bundle no incluye ninguna hoja css.
Uso en proyectos React
Primero se debe de crear un archivo sass donde se importen la guia de estilos y EDgrid
// styles.scss
//----- Importación de EDgrid y guía de estilos -----//
@import '~ed-grid/ed-grid';
@import '~edteam-style-guides/edteam-style-guides';Y ahora se importa esta hoja de estilos en el archivo principal de la aplicación.
import React from "react"
import "./styles.scss" // La ruta donde esta la hoja de estilos
function App() {
return (
<>
{/**Contenido de la aplicación**/}
</>
)
}Uso en proyectos Nextjs
Se debe de instalar @zeit/next-sass para configurar sass en proyectos de Nextjs y configurar este plugin en el next.config.js
// next.config.js
const withSass = require('@zeit/next-sass')
module.exports = withSass()En el archivo styles.scss se pone el mismo contenido que en el ejemplo pasado
// styles.scss
//----- Importación de EDgrid y guía de estilos -----//
@import '~ed-grid/ed-grid';
@import '~edteam-style-guides/edteam-style-guides';Y se puede importar esta hoja de estilos normalmente en nuestras paginas de Nextjs
import React, {Component} from 'react'
import "../styles/styles.scss"
export default class extends Component {
render() {
return(
<div className="ed-container">
<h1>My fisrt page with Next.js and EDgrid</h1>
</div>
)
}
}Componentes
Actualmente se tienen construidos los siguientes componentes
- EDgrid
- EDcontainer
- EDitem
- Banner
- Topbar
- Button
- Table
- Modal
- Input
- TextArea
- Select
- FormItem
- Card
En Progreso
- Tabs
- Carousel
Generalidades
Todos los componentes reciben todas las propiedades válidas que se le puedan dar a los elementos HTML que renderizan, por ejemplo al componente Button se le puede pasar de manera normal propiedades como id, onClick, entre otras.
Además que a todos se les puede pasar la propiedad ref para dar valor a alguna referencia de React.
Ejemplo
const SampleComponent = () => (
<>
<Button onClick={/**Funcion*/} id="my-button" ref={myRef} className="content"></Button>
<Form onSubmit={/*Funcion*/} ref={formRef}></Form>
<Modal id="my-modal" ></Modal>
</>
)Y de esta manera con todos los componentes.
Colores
Algunos componentes reciben como propiedad el color del que será su fondo, esos posibles colores son:
- first
- second
- third
- accent
- dark
Nota: En caso de recibir un valor incorrecto o no recibir ningún valor se tomara como valor por defecto first. Para más información visitar la Guía de estilos
EDgrid
Props
| Nombre | Tipo | Descripción |
|---|---|---|
| gap | Number | Valor del gap que tendrá el grid, acepta valores entre 0 y 4 |
| rowsGap | bool | Indica si las filas del grid van a tener un gap entre ellas |
| as | string | Indica que etiqueta HTML va a renderizar el EDgrid, por defecto es un div
|
| small | Number | Indica el numero de columnas que va tener el grid en pantallas pequeñas |
| medium | Number | Indica el numero de columnas que va tener el grid en pantallas medianas |
| large | Number | Indica el numero de columnas que va tener el grid en pantallas grandes |
Ejemplo
import { EDgrid } from '@edteam/edui'
//...
const MyComponent = () => (
<EDgrid small={1} medium={4} gap={2} rowsGap as="article">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</EDgrid>
);EDcontainer
Ejemplo:
import { EDcontainer } from '@edteam/edui'
//...
const MyComponent = () => (
<EDcontainer>
{/**Hijos, que deberian ser EDitem**/}
</EDcontainer>
);EDitem
Props
| Nombre | Tipo | Descripción |
|---|---|---|
| small | Number | Indica el porcentaje del contenedor que ocupara el elemento en pantallas pequeñas, recibe los múltiplos de 5 del 0 al 100 |
| medium | Number | Indica el porcentaje del contenedor que ocupara el elemento en pantallas mediana, recibe los múltiplos de 5 del 0 al 100 |
| large | Number | Indica el porcentaje del contenedor que ocupara el elemento en pantallas grandes, recibe los múltiplos de 5 del 0 al 100 |
Nota: Las propiedades small, medium y large tambien soportan definiciones por fracciones recibiendo el objeto de la forma { numerator: number, denominator: number } y además por defecto small tiene valor de 100 y tanto medium como large reciben el valor del último breakpoint declarado, por defecto medium tendrá el valor de small y large el valor que tenga medium.
Ejemplo:
import { EDcontainer, EDitem } from '@edteam/edui'
//...
const MyComponent = () => (
<EDcontainer>
<EDitem small={100} medium={50}>
<p>
En un lugar de la Mancha, de cuyo nombre no quiero acordarme,
no ha mucho tiempo que vivía un hidalgo de los de lanza en astillero,
adarga antigua, rocín flaco y galgo corredor.
</p>
</EDitem>
<EDitem small={100} medium={25}>
<p>
En un lugar de la Mancha, de cuyo nombre no quiero acordarme,
no ha mucho tiempo que vivía un hidalgo de los de lanza en astillero,
adarga antigua, rocín flaco y galgo corredor.
</p>
</EDitem>
<EDitem small={100}
medium={{ numerator: 1, denominator: 4 }}
>
<p>
En un lugar de la Mancha, de cuyo nombre no quiero acordarme,
no ha mucho tiempo que vivía un hidalgo de los de lanza en astillero,
adarga antigua, rocín flaco y galgo corredor.
</p>
</EDitem>
</EDcontainer>
);Banner
Props
| Nombre | Tipo | Descripción |
|---|---|---|
| color | string | Indica el color del banner, por defecto es first
|
| diagonal | bool | Indica si se le agregara diagonal al final del contenedor |
| image | string | Url de imagen de fondo del banner |
| imageAlt | string | Propiedad alt de la imagen de fondo |
Ejemplo:
import { Banner } from '@edteam/edui';
const MyComponent = () => (
<Banner
color="dark"
image="https://images.pexels.com/photos/1981043/pexels-photo-1981043.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"
imageAlt="Test picture"
diagonal
>
<h1>Banner</h1>
</Banner>
);Topbar
Props
| Nombre | Tipo | Descripción |
|---|---|---|
| color | string | Indica color del topbar, recibe valores siguiendo los colores de EDteam |
Ejemplo:
import React from 'react';
import { Topbar } from '@edteam/edui';
const MyComponent = () => (
<Topbar color="dark">
Contenido
</Topbar>
)Button
Props
| Nombre | Tipo | Descripción |
|---|---|---|
| color | string | Indica color del botón, recibe valores siguiendo los colores de EDteam |
| tiny | bool | Indica si el botón será de tipo tiny |
| micro | bool | Indica si el botón será de tipo micro |
| full | bool | Indica si el botón ocupara todo el ancho disponible |
| ghost | bool | Indica si el botón será de fondo transparente, y solo consta de borde y texto. |
Table
Props
| Nombre | Tipo | Descripción |
|---|---|---|
| type | string | Indica color principal de la tabla |
| responsive | bool | Indica si la tabla va a ser responsive, por defecto el valor es true
|
Colores:
- secondary
- tertiary
- accent
- dark
- default (
first) Ejemplo:
import { Table } from '@edteam/edui';
const MyComponent = () => (
<Table type='tertiary'>
<tr>
<th>ID</th>
<th>Name</th>
<th>Email</th>
<th>Acciones</th>
</tr>
<tr>
<td>1</td>
<td>Alejandro</td>
<td>alejogs4@gmail.com</td>
<td>Aqui las acciones</td>
</tr>
<tr>
<td>1</td>
<td>Alejandro</td>
<td>alejogs4@gmail.com</td>
<td>Aqui las acciones</td>
</tr>
<tr>
<td>1</td>
<td>Alejandro</td>
<td>alejogs4@gmail.com</td>
<td>Aqui las acciones</td>
</tr>
<tr>
<td>1</td>
<td>Alejandro</td>
<td>alejogs4@gmail.com</td>
<td>Aqui las acciones</td>
</tr>
</Table>
);Modal
Props
| Nombre | Tipo | Descripción |
|---|---|---|
| open | bool | Indica si el modal va estar abierto |
| close | func | Función que cierra el modal |
Ejemplo:
import React,{ useState } from 'React';
import { Modal, Button } from '@edteam/edui';
function MyComponent() {
const [open, setOpen] = useState(false);
function closeModal() {
setOpen(false)
}
function openModal() {
setOpen(true)
}
return (
<>
<Modal open={open} close={closeModal}>
<h2>EDmodal</h2>
</Modal>
<Button onClick={openModal}>Abrir modal</Button>
</>
)
}Elementos del formulario
Tanto Select, los inputs, el textarea funcionan de manera normal como cualquier elemento html. Ejemplo:
const FormSample = () => (
<Form>
<Form.FormItem>
<Form.Input type="text" placeholder="Input your name" id="name" />
</Form.FormItem>
<Form.FormItem as="article">
<Form.Input type="email" placeholder="Input your email" />
</Form.FormItem>
<Form.FormItem>
<Form.Input type="password" placeholder="Input your password" />
</Form.FormItem>
<Button full type="submit">
Submit
</Button>
</Form>
);Nota: El mismo ejemplo puede ser desarrollado usando el componente EDgrid y al igual que el EDgrid FormItem, puede recibir la props as para indicar la etiqueta HTML que va a representar, la cual sera por defecto div.
const FormSample = () => (
<Form>
<EDgrid small={1} medium={2} gap={2} rowsGap>
<Form.Input type="text" placeholder="Input your name" id="name" />
<Form.Input type="text" placeholder="Input your lastname" id="lastname" />
<Form.Input type="text" placeholder="Input your city" id="city" />
<Form.Input type="text" placeholder="Input your country" id="country" />
<Form.Select>
<option>America</option>
<option>Europe</option>
</Form.Select>
<Form.TextArea
placeholder="Input your biography"
className="s-cols-1 m-cols-2"
/>
<Button full type="submit" className="s-cols-1 m-cols-2">
Submit
</Button>
</EDgrid>
</Form>
);Card
Los elementos del card al igual que los elementos de formulario estan construidos utilizando el patrón de Compound Components asi que el marcado que al final se elija es totalmente a elección del usuario de la librería
Card Props
| Nombre | Tipo | Descripción |
|---|---|---|
| as | string | Indica que etiqueta HTML va a renderizar el contenedor del card, por defecto es un article
|
| horizontal | bool | Indica si el card va a estar en modo vertical, por defecto es false |
Card.Header Props
| Nombre | Tipo | Descripción |
|---|---|---|
| className | string | Indica las clases css del contenedor |
| image | string | Indica la imagen que va a ser renderizada |
| imageClass | string | Indica las clases css de la imagen |
| alt | string | Indica la propiedad alt de la etiqueta img |
Opcionalmente el card puede recibir hijos
Card.Title Props
| Nombre | Tipo | Descripción |
|---|---|---|
| as | string | Indica que etiqueta HTML va a renderizar el título, por defecto es un h3
|
Ejemplo: Card normal*
<Card>
<Card.Body>
<Card.Header image="https://drupal.ed.team/sites/default/files/styles/16_9_medium/public/imagenes-cdn-edteam/2019-10/figma-desde-cero-poster.png" />
{ /* O tambien en lugar de pasar la imagen y para más control sobre el marcado se puede pasar como hijo */ }
<Card.Header>
<div className="img-container s-ratio-16-9">
<img
src="https://drupal.ed.team/sites/default/files/styles/16_9_medium/public/imagenes-cdn-edteam/2019-09/adobe-xd.png"
className="s-radius-tl-1 s-radius-tr-1"
alt="Adobe XD"
/>
</div>
</Card.Header>
<Card.Content>
<Card.Title>Figma Desde Cero</Card.Title>
<p className="small s-mb-0">
Aprende a diseñar interfaces de usuario interactivas e impactantes
</p>
</Card.Content>
</Card.Body>
<Card.Footer>
<p className="s-mb-0">Álvaro Felipe</p>
<div className="s-to-right color first-color s-cross-center">
<b>$ 20 USD</b>
</div>
</Card.Footer>
</Card>Card horizontal
<Card horizontal>
<Card.Body>
<Card.Header image="https://drupal.ed.team/sites/default/files/styles/16_9_medium/public/imagenes-cdn-edteam/2019-10/figma-desde-cero-poster.png" />
<Card.Content>
<Card.Title>Figma Desde Cero</Card.Title>
<p className="small s-mb-0">
Aprende a diseñar interfaces de usuario interactivas
</p>
</Card.Content>
</Card.Body>
<Card.Footer>
<p className="s-mb-0">Álvaro Felipe</p>
<div className="s-to-right color first-color s-cross-center">
<b>$ 20 USD</b>
</div>
</Card.Footer>
</Card>