Magma components

Lista provisional de componentes. Esta lista servirá para definir el API de los componentes en una primera versión (Draft)

Layout

BoxRythm

Distribuye el mismo margen vertical entre los hijos. Se le puede pasar tanto un valor del sistema de espaciado en el theme como un valor en px.

<BoxRythm space="xl">
  <Text>Hi all!</Text>
  <Text>Hi there!</Text>
  <Button>Click</Button>
</BoxRythm>

MaxWidth

Establece la propiedad max-width utilizando los breakpoints definidos en el theme en un contenedor con display:flex

<MaxWidth>
  <.../>
</MaxWidth>

## Media

Image

Renderiza una imagen.

<Image src="#" />

Vídeo

Renderiza un vídeo

<Video src="" />

Type

Text

Renderiza un texto.

<Text>Hello Magma</Text>
<Text weight="extraBold" truncate italic inline caps>Hello Magma</Text>

### Truncate

Trunca un texto cuando hay un máximo establecido. Este componente es usado por <Text />.

<Truncate><p>Lorem upsum</Truncate>

Markdown

Renderiza markdown

<Markdown># Hi, heading</Markdown>

Headers

## Controls

Button

Renderiza un botón con la etiqueta button

<Button>Click</Button>
<Button isLoading disabled type="submit" size="small" >Click</Button>

Anchor

Renderiza un link.

Debido a que normalmente librerías externas como React Router o Frameworks como Next llaman a sus componentes links se ha optado por llamar a link de Magma <Anchor />

Tabs

Renderiza pestañas

Inputs

Label

Radio

Radio Group

<RadioButtonGroup
name="foo"
options={["bar", "taz"]}
value={value}
onChange={(e) => setValue(e.target.value)}
>

Check

<Checkbox checked={true} onChange={() => setChecked(!checked)}>
  Check me
</Checkbox>

Switch

Range

Select

Text Area

Form field

Table