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/edui

Se 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>

Name		Name	Last commit message	Last commit date
Latest commit History 55 Commits
.storybook		.storybook
__tests__		__tests__
dist		dist
src		src
stories		stories
.DS_Store		.DS_Store
.babelrc		.babelrc
.editorconfig		.editorconfig
.eslintrc.js		.eslintrc.js
.gitignore		.gitignore
README.md		README.md
babel.js		babel.js
jest.setup.js		jest.setup.js
package-lock.json		package-lock.json
package.json		package.json
rollup.dev.js		rollup.dev.js
rollup.prod.js		rollup.prod.js

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Repository files navigation

EDui

Instalación

Uso en proyectos React

Uso en proyectos Nextjs

Componentes

Generalidades

Colores

EDgrid

Props

EDcontainer

EDitem

Props

Banner

Props

Topbar

Props

Button

Props

Table

Props

Modal

Props

Elementos del formulario

Card

Card Props

Card.Header Props

Card.Title Props

About

Releases

Packages

Contributors 3

Languages

edteamlat/EDui

Folders and files

Latest commit

History

Repository files navigation

EDui

Instalación

Uso en proyectos React

Uso en proyectos Nextjs

Componentes

Generalidades

Props

Props

Props

Props

Props

Props

Props

Elementos del formulario

Card

Card Props

Card.Header Props

Card.Title Props

About

Resources

Stars

Watchers

Forks

Languages