React Leonardo UI

React implementation of Leonardo UI.

Installation

NPM

npm install --save react-leonardo-ui

Get started

ES2015

import { Button } from 'react-leonardo-ui';

CommonJS

const Button = require('react-leonardo-ui').Button;

Props passing

Properties that are not recognized by a component are passed to the root element (of most components). This removes extra abstractions and helps keeping components small and manageable.

<Button active title="My title" onClick={clickHandler}>
  My button
</Button>

In the example above, the Button component will handle the active attribute and pass title and onClick to its button element.

Button

<Button>Default</Button>
<Button variant="gradient">Gradient</Button>
<Button variant="info">Info</Button>
<Button variant="warning">Warning</Button>
<Button variant="danger">Danger</Button>
<Button variant="success">Success</Button>

Props

Name	Type	Description
rounded	Boolean	Extra rounded corners.
block	Boolean	Display as a block element.
size	String	Button size. Any of: null (default) \| "large" \| "x-large"
variant	String	Variant to use. Any of: null (default) \| "inverse" \| "success" \| "info" \| "warning" \| "danger"
active	Boolean	Show the button in active state. Suitable for toggle buttons
disabled	Boolean	Show the button in disabled state.

ButtonGroup

<ButtonGroup>
  <ButtonGroup.Button>First</ButtonGroup.Button>
  <ButtonGroup.Button active>Second</ButtonGroup.Button>
  <ButtonGroup.Button>Third</ButtonGroup.Button>
</ButtonGroup>

Input

<Input value={value}/>

Props

Name	Type	Description
variant	String	Variant of the Input. Any of: null (default) \| "inverse".
size	String	Input size. Any of: null (default) \| "large".

InputGroup

<InputGroup>
  <InputGroup.Input />
  <InputGroup.Button><Icon name="more" /></InputGroup.Button>
</InputGroup>

Props

Name	Type	Description
variant	String	Variant. Any of: null (default) \| "inverse".

List

Header
Item 1
Item 2
Item 3

<List>
  <List.Header>Header</List.Header>
  <List.Item>
    <List.Text>Item 1</List.Text>
  </List.Item>
  <List.Item>
    <List.Text>Item 2</List.Text>
    <List.Aside><Icon name="info" /></List.Aside>
  </List.Item>
  <List.Item>
    <List.Aside><Icon name="info" /></List.Aside>
    <List.Text>Item 3</List.Text>
  </List.Item>
</List>

Textarea

<Textarea/>

Props

Name	Type	Description
variant	String	Variant. Any of: null (default) \| "inverse".

Select

<Select>
  <option value="x">Option 1</option>
  <option value="y">Option 2</option>
</Select>

Props

Name	Type	Description
variant	String	Variant. Any of: null (default) \| "inverse".

Checkbox

Label

<Checkbox>Label</Checkbox>

Props

Name	Type	Description
variant	String	Variant of the Checkbox. Any of: null (default) \| "inverse".

RadioButton

Radio 1

Radio 2

Props

Name	Type	Description
variant	String	Variant. Any of: null (default) \| "inverse".

Switch

<Switch value="Value" />

Props

Name	Type	Description
variant	String	Variant of the Switch. Any of: null (default) \| "inverse".

Search


<Search
  value={this.state.value}
  onChange={e => this.setState({ value: e.target.value })}
  onClear={() => this.setState({ value: '' })}
  variant={this.props.baseVariant}
/>

Props

Name	Type	Description
variant	String	Variant. Any of: null (default) \| "inverse".
onClear	Function	Callback that is invoked when the clear button is clicked.

Tabs

Tab 1
Tab 2
Blah 3

Content 1

<Tabs>Tabs</Tabs>

Icons

sheet

object

image

clear-selections

selections-tool

bookmark

back

forward

history

help

info

toggle-left

toggle-right

selections-reload

text

group

zoom-in

zoom-out

selections-back

selections-forward

export

import

lock

unlock

database

calendar

field

expression

library

debug

script-ok

grid

star

remove

handle

handle-horizontal

list

unordered-list

bar-chart

bar-chart-horizontal

clock

line-chart

pie-chart

gauge-chart

kpi

scatter-chart

map

puzzle

table

pivot-table

filterpane

treemap

combo-chart

plus

minus

triangle-top

triangle-bottom

triangle-left

triangle-right

run-script

tick

cogwheel

settings

data-model

script

sense

cut

copy

paste

align-left

align-center

align-right

bold

italic

underline

select-alternative

select-possible

select-excluded

select-all

camera

slide-show

palette

shapes

effects

file

expand

collapse

bin

link

pivot

reload

add

edit

lasso

key

box

home

person

stream

cloud

folder

auto-layout

toggle-bottom

drop

play

tag

direct-discovery

warning

warning-triangle

top

low-resolution

high-resolution

view

control

code

upload

repair

split

up-down

disconnect

photo-library

application

new-tab

ascending

descending

arrow-up

arrow-down

arrow-right

arrow-left

sync

draggable

book

measure

download

more-rounded

align-object-left

align-object-center

align-object-right

submit

operators

general-data-class

building

bell

unlink

lightbulb

associate

break-association

log-in

log-out

<Icon name="more" />
<Icon name="more" size="small" />
<Icon name="more" size="large" />

Props

Name	Type	Description
name	String	Name of the icon to show.
size	String	Icon size. Any of: null (default) \| "small" \| "large".

Dialog

<Dialog show={this.state.show} onEscape={() => this.setState({ show: false})}>
  <Dialog.Header>
    <Dialog.Title>Header</Dialog.Title>
  </Dialog.Header>
  <Dialog.Body>Body</Dialog.Body>
  <Dialog.Footer>
    <Dialog.Button autoFocus onClick={() => this.setState({ show: false})}>
      OK
    </Dialog.Button>
  </Dialog.Footer>
</Dialog>

Props

Name	Type	Description
show	Boolean	Flag used to open / close the dialog.
variant	String	Variant. Any of: null (default) \| "inverse".
onEscape	Function	Function triggered when the escape key is pressed.
onOpen	Function	Function triggered when the dialog has opened.
onClose	Function	Function triggered when the dialog has closed.

The popover is controlled by the show property.

<Popover
  alignTo={this.alignToElement}
  show={this.state.show}
  onOutside={() => this.setState({ show: false})}
>
  <Popover.Header>
    <Popover.Title>Header</Popover.Title>
  </Popover.Header>
  <Popover.Body>Body</Popover.Body>
  <Popover.Footer>
    <Popover.Button onClick={() => this.setState({ show: false})}>
      Close
    </Popover.Button>
  </Popover.Footer>
</Popover>

Props

Name	Type	Description
show	Boolean	Flag used to open / close the popover.
dock	String	Dock side. Any of: "top" \| "right" \| "bottom" \| "left".
alignTo	HTMLElement	The element to align to.
inline	Boolean	Experimental. Append the popover inline in the DOM instead of to the body.
variant	String	Variant of the Popover. Any of: null (default) \| "inverse".
onOutside	Function	Function triggered on clicks outside the popover element.
onOpen	Function	Function triggered when the popover has opened.
onClose	Function	Function triggered when the popover has closed.

Keep clicking to see the dock change

<Tooltip
  alignTo={this.alignToElement}
  show={this.state.show}
  dock={this.state.dock}
>
  I'm placed to the: <b>${this.state.dock}</b>
</Tooltip>

Props

Name	Type	Description
show	Boolean	Flag used to open / close the popover.
dock	String	Dock side. Any of: "top" \| "right" \| "bottom" \| "left".
alignTo	HTMLElement	The element to align to.
inline	Boolean	Experimental. Append the tooltip inline in the DOM instead of to the body.

Toast

The toast is controlled by the show property.

<Toast
  show={this.state.show}
>
  <Toast.Text>
  Bacon ipsum dolor amet picanha pastrami boudin chicken doner.
  </Toast.Text>
  <Toast.Action onClick={close}>
    Close
  </Toast.Action>
</Toast>

Props

Name	Type	Description
show	Boolean	Flag used to open / close the toast.
onOpen	Function	Function triggered when the toast has opened.
onClose	Function	Function triggered when the toast has closed.