# Billes Components
## Install
```
yarn add @billes/components
```
## Action
```
 <Action icon={ <ReactComponent /> } label={ 'Some label' } action={() => { console.log('hello world')}}>
```
```
{
    action = null // fn to be called on click,
    disabled = false // unable to use action and hovering is off
    icon = null, // An object, component or a string that would be used as img-src
    link = null, // Shows as link in statusfield, converts from button to a
    label // Label to be displayed
    style = {} // Custom styling of action. caveats: background must be hex
    flip = false // puts the icon on the right side with label still aligned to the left 
}
```
### Icon object passed to action
```
icon: {
    component: <Component />,
    width: 40 // integer for setting a custom width. Height is locked to 24px or less depending on main style
}
```
## Dropdown
Dropdown is basically an elaborate collection of \<Action />.
The dropdown button itself is converted to \<Action /> with a custom action that displays items. The items will convert to a list of \<Action>.
The dropdown will expand left or up if it will render outside of viewport
#### NOTE: items array does not take the \<Action /> (the react-component) as a valid item
```
 <Dropdown icon={ <ReactComponent /> } name={ 'Label' } items={ items } />
```
```
disabled = false // unable to use action and hovering is off
icon // A component or a string that would be used as img-src
items: [
  {
    action = null // fn to be called on click,
    disabled = false // unable to use action and hovering is off
    icon = null, // A component or a string that would be used as img-src
    link = null, // Shows as link in statusfield, converts from button to a
    label // Label to be displayed
    style = {} // Custom styling of action. caveats: background must be hex
    flip = false // puts the icon on the right side with label still aligned to the left 
  }
],
label // Label to be displayed
style = {} // Custom styling of action
flip = false // puts the icon on the right side with label still aligned to the left 
wrapper = false // It can expand up or left based on a wrapper as well as a window. Wants an id of an element (no pound/hash sign)
chevron = false // if you want to display chevron or not 
```