Components

Button component

Description

KUI framework buttons are native <button> elements enhanced with Kleeen Design styling.

API reference for React

import { KuiButton } from '@kleeen/components-react';

Properties

type	name	Default value
string	kuiText	''
boolean	kuiDisabled	false
string	kuiName	''
string	kuiStyle	primary
string	kuiType	button
function	kuiClick	() => { }

Example

  <KuiButton kuiText="Save!" kuiName="button"/>

Checkbox component

Description

KUI framework checkbox are native <checkbox> elements enhanced with Kleeen Design styling.

API reference for React

import { KuiCheckbox } from '@kleeen/components-react';

Properties

type	name	Default value
string	kuiText	''
string	kuiName	''
string	kuiChecked	undefined
string	kuiStyle	primary
function	kuiChange	() => { }

Example

  <KuiCheckbox kuiText="Check me out!" />

Icon component

Description

KUI framework icon display.

API reference for React

import { KuiIcon } from '@kleeen/components-react';

Properties

type	name	Default value
string	kuiIcon
string	kuiSize	size-xl
string	kuiText	''

Example

  <KuiIcon kuiIcon="arrow"/>

Input component

Description

KUI framework input is a native <input> element, enhanced with Kleeen Design styling.

API reference for React

import { KuiInput } from '@kleeen/components-react';

Properties

type	name	Default value
string	kuiName
string	kuiValue
string	kuiType	text
boolean	kuiBar	true
string	kuiPlaceholder	''
boolean	kuiRequired	false
string	kuiStyle	primary
function	kuiChange	() => { }

Example

  <KuiInput kuiPlaceholder="Name" kuiName="name"  />

Radio Button component

Description

KUI framework radio buttons simulating native radio button behavior.

API reference for React

import { KuiRadioButton } from '@kleeen/components-react';

Properties

type	name	Default value
string	kuiName
string	kuiValue
string	kuiChecked
string	kuiText
function	kuiChange	() => { }

Example

  <div className="radio-group">
    <KuiRadioButton kuiText="Option 1" kuiName="option" kuiValue={options.option1}/>
    <KuiRadioButton kuiText="Option 2" kuiName="option" kuiValue={options.option2}/>
    <KuiRadioButton kuiText="Option 3" kuiName="option" kuiValue={options.option3}/>
  </div>

Size Picker component

Description

KUI custom size picker with variable amount of options.

API reference for React

import { KuiSizePicker } from '@kleeen/components-react';

Properties

type	name	Default value
string	kuiName	''
number	kuiLength	4
number	kuiSelected	1
function	kuiChange	() => { }

Example

 <KuiSizePicker kuiName="currentSize" kuiSelected={this.state.currentSize} />

Input Box component

Description

KUI framework input box is composed by <KuiInput> and <KuiButton> elements.

API reference for React

import { KuiInputBox } from '@kleeen/components-react';

Properties

type	name	Default value
string	kuiName	''
string	kuiPlaceholder	''
string	kuiButton	submit
string	kuiType	text
string	kuiText	''
boolean	kuiRequired	false
function	kuiSubmit	() => {}

Example

 <KuiInputBox kuiText="Send" kuiPlaceholder="Input box" kuiName={'inpt-box'}/>

Hover Intent component

Description

KUI framework hover intent is a HOC which adds mouse over listener to any component.

API reference for React

import { kuiHoverIntent } from '@kleeen/components-react';

Properties

type	name	Default value
number	delay	300
function	hznHoverIntent	() => {}

Example

const NewInput = kuiHoverIntent(KuiInput);
return <NewInput kuiName="name" kuiValue={this.state.name} kuiPlaceholder="Test intent hover" hznHoverIntent={someFunction} delay={1000} />;

Modal component

Description

KUI framework modal is a popup window.

API reference for React

import { KuiModal } from '@kleeen/components-react';

Properties

type	name	Default value
string	kuiTitle	''
string	kuiStyle	''
boolean	kuiFullscreen	false
boolean	kuiHideFooter	false
boolean	kuiShowModal	false
function	kuiOnSave	() => {}
function	kuiOnCancel	() => {}

Example

<KuiModal kuiTitle="Title Modal" kuiShowModal={this.state.showModal}>
  Content!
</KuiModal>

Menu component

Description

KUI framework menu element, enhanced with Josh's Design styling.

API reference for React

import { KuiMenu } from '@kleeen/components-react';

Properties

type	name	Default value
boolean	kuiOffset	false
string	kuiTitle	''
string	kuiIcon	''
string	kuiOptions	[]

Example

const menuData = [{
  label: 'First action', action: this.sendRequest
}, {
  label: 'Some action', action: this.sendRequest
}, {
  label: 'Last action', action: this.sendRequest
}];
<KuiMenu kuiTitle="Settings" kuiIcon="arrow" kuiOptions={menuData} kuiOffset />

Theming

KuiMenu

Element	Property	Color
.anchor	background	theme-color('menu-component', 'background')
.menu	background	theme-color('menu-component', 'background')
.menu	color	theme-color('menu-component', 'text')
.items	background	theme-color('menu-component', 'background-hover')
.items	color	theme-color('menu-component', 'text-hover')

KuiTable

Element	Property	Color
.table	background-color	theme-color('grid')
.header	background-color	theme-color('grid', 'header')
.header	color	theme-color('grid', 'header-text')
.header > div	background-color	theme-color('grid', 'header')
.cell	border-right-color	theme-color('grid', 'border')
.row	background	theme-color('grid')
.row	color	theme-color('grid', 'text')
.row	background-color	theme-color('grid', 'odd-row')
.selected	background-color	theme-color('grid', 'selected')

KuiButton

Element	Property	Color
button	color	theme-color('button-primary', 'text')
button.primary	background	theme-color('button-primary'), theme-color('button-primary', 'active')
button.primary	border	theme-color('button-primary', 'border')
button.primary	background-color	theme-color('button-primary', 'hover')
button.primary	border-color	theme-color('button-primary', 'hover-border')
button.primary	color	theme-color('button-primary', 'hover-text')
button.secondary	background	theme-color('button-secondary'), theme-color('button-secondary', 'active')
button.secondary	border	theme-color('button-secondary', 'border')
button.secondary	background-color	theme-color('button-secondary', 'hover')
button.secondary	border-color	theme-color('button-secondary', 'hover-border')
button.secondary	color	theme-color('button-primary', 'hover-text')

KuiCheckbox

checkbox-primary

Element	Property	Color
label	color	theme-color('checkbox-primary', 'text')
span	background-color	theme-color('checkbox-primary'), theme-color('checkbox-primary', 'checked-background')
span	border-color	theme-color('checkbox-primary', 'disabled'), theme-color('checkbox-primary', 'border'), theme-color('checkbox-primary', 'checked-border'), theme-color('checkbox-primary', 'check')
input	background-color	theme-color('checkbox-primary', 'ripple')

checkbox-secondary

Element	Property	Color
label	color	theme-color('checkbox-secondary', 'text')
span	background-color	theme-color('checkbox-secondary'), theme-color('checkbox-secondary', 'checked-background')
span	border-color	theme-color('checkbox-secondary', 'disabled'), theme-color('checkbox-secondary', 'border'), theme-color('checkbox-secondary', 'checked-border'), theme-color('checkbox-secondary', 'check')
input	background-color	theme-color('checkbox-secondary', 'ripple')

KuiInput

input-primary

Element	Property	Color
label	color	theme-color('input-primary'), theme-color('input-primary', 'not-empty'), theme-color('input-primary', 'focus')
.bar	background	theme-color('input-primary'), theme-color('input-primary', 'not-empty'), theme-color('input-primary', 'focus')
input	border-bottom-color	theme-color('input-primary')
input	color	theme-color('input-primary', 'text')

input-secondary

Element	Property	Color
label	color	theme-color('input-secondary'), theme-color('input-secondary', 'not-empty'), theme-color('input-secondary', 'focus')
.bar	background	theme-color('input-secondary'), theme-color('input-secondary', 'not-empty'), theme-color('input-secondary', 'focus')
input	border-bottom-color	theme-color('input-secondary')
input	color	theme-color('input-secondary', 'text')

KuiModal

Element	Property	Color
.kui-modal	background	theme-color('modal')
.kui-modal	color	theme-color('modal', 'text')
.header	background	theme-color('modal', 'header')

KuiRadioButton

Element	Property	Color
.outer-circle	border-color	theme-color('secondary')
.inner-circle	background-color	theme-color('secondary')

KuiSizePicker

Element	Property	Color
	border	theme-color('size-picker')
size-picker	border-color	theme-color('size-picker', 'hover')
fill	background-color	theme-color('size-picker', 'fill'), theme-color('size-picker', 'fill-hover')
fill	border	theme-color('size-picker')
fill	border-color	theme-color('size-picker', 'hover')
option	border-right	theme-color('size-picker', 'hover')

Table component

Description

KUI framework menu element, enhanced with Josh's Design styling.

API reference for React

import { KuiTable } from '@kleeen/components-react';

Properties

type	name	Default value
function	rowToggle	() => {}
array	columns
array	rows
function	headerFilter
object	quickFilterConfig
function	sort
function	onApiReady
function	onSelectedRowsChange
function	onColumnsChange
object	cells
number	paginationPageSize

Example

import React, { useState } from "react";

const rows = [{
  col1: 'Value 1',
  col2: 'Value 2'
}, {
  col1: 'Value 11',
  col2: 'Value 22'
}];
const columns = [{
  id: 'col1',
  label: 'Col 1',
  order: 0
}, {
  id: 'col2',
  label: 'Col 2',
  order: 1
}]:
const [numberOfItemsSelected, setSelectedItems] = useState(0);
const [columnsState, setColumns] = useState(columns);

<KUITable
  onApiReady={(tableApi) => api = tableApi}
  columns={columnsState}
  rows={rows}
  quickFilterConfig={{ actions: [{ label: 'Sort ASC', action: (columnId) => { api.sortRow(columnId, 'asc') } }]}}
  onSelectedRowsChange={(oldSelectedItems, newSelectedItems) => setSelectedItems(newSelectedItems.length)}
  onColumnsChange={(oldColumns, newColumns) => setColumns(newColumns)}
  cells={{
    col1: (value, row) => <h1>{value}</h1>,
    col2: (value) => <span>{value}</span>,
  }}
/>

Actions

CLEAR_ROW_FILTER

Resets the rows to the initial state.

Value: clearRowFilter

Params: columnId

Example

const columnId = 0;
api.clearRowFilter(columnId);

SET_COLUMN_FILTER

Filters the columns according to the text typed.

Value: setColumnFilter

Params: columnId, typedText

Example

const columnId = 0;
const typedText = 'text';
api.setColumnFilter(
  columnId,
  typedText && typedText.toLowerCase()
);

SORT_ROW

Sorts rows in ascending or descending order.

Value: sortRow

Params: columnId, order

Example

const id = 0;
const order = 'asc' || 'desc';
api.sortRow(id, order);

RESIZE_COLUMN

Changes the columun width.

Value: resizeColumn

Params: columnId, newWidth

Example

const columnId = 0;
const newWidth = 230;
api.resizeColumn(columnId, newWidth);

ROW_TOGGLE

Selects/unselects a row.

Value: rowToggle

Params: rowId

Example

const rowId = 0;
api.rowToggle(rowId);

CLEAR_ALL

Unselects all the selected rows.

Value: clearAll

Params: none

Example

api.clearAll();

CLEAR_COLUMNS_SORT

Resets the columns sorting.

Value: clearColumnsSort

Params: none

Example

api.clearColumnsSort();

CREATE_TABLE

Creates a new table.

Value: createTable

Params: table

Example

const table = {};
api.createTable(table);

DELETE_TABLE

Deletes a table.

Value: deleteTable

Params: none

Example

api.deleteTable();

HIDE_SELECTED_ROWS

Hides the selected rows.

Value: hideSelectedRows

Params: none

Example

api.hideSelectedRows();

ORDER_COLUMNS

Sets the columns ordering.

Value: orderColumns

Params: columns

Example

const columns = [{
  id: 'col1',
  label: 'Col 1',
  order: 0
}, {
  id: 'col2',
  label: 'Col 2',
  order: 1
}]
api.orderColumns(columns);

SELECT_ALL

Selects all the rows.

Value: selectAll

Params: none

Example

api.selectAll();

SHOW_ONLY_SELECTED_ROWS

Shows only the selected rows.

Value: showOnlySelectedRows

Params: none

Example

api.showOnlySelectedRows();

SORT_COLUMN

Sorts a comlumn according to the sort param.

Value: sortColumn

Params: columnId, sort

Example

const columnId = 0;
const sort = 'asc' || 'desc';
api.sortColumn(columnId, sort);

TOGGLE_COLUMN_DISPLAY

Shows/hides a column.

Value: toggleColumnDisplay

Params: columnId

Example

const columnId = 0;
api.toggleColumnDisplay(columnId);

TOGGLE_ROW

Shows/hides the row.

Value: toggleRow

Params: row

Example

const row = {
  col1: 'Value 1',
  col2: 'Value 2'
};
api.toggleRow(row);

UPDATE_TABLE

Updates the table.

Value: updateTable

Params: table

Example

const table = {};
api.updateTable(table);

RESET_ROWS_VISIBILITY

Resets the rows visibility to the initial state.

Value: resetRowsVisibility

Params: none

Example

api.resetRowsVisibility();

Select component

Description

KUI framework Select

API reference for React

import { KuiSelect } from '@kleeen/components-react';

Properties

type	name	Default value
object	kuiSelected	{}
array	kuiOptions	[]
boolean	kuiIsOpen	false
function	kuiSelect	() => {}
string	kuiIcon	'arrow-down'

Example

selectOptions = [{
   label: 'Option 1',
   icon: 'arrow'
 },
 {
   label: 'Option 2',
   icon: 'arrow'
 },
 {
   label: 'Option 3',
   icon: 'arrow'
 }, {
   label: 'Option 4',
 }];

 <KuiSelect kuiSelected={this.state.optionSelect}
           kuiOptions={this.selectOptions}
           kuiSelect={(option) => this.setState({optionSelect: option}/>

Card component

Description

KUI framework card to display content.

API reference for React

import { KuiCard } from '@kleeen/components-react';

Properties

type	name	Default value
string	kuiTitle	''
node	children

Example

<KuiCard kuiTitle="Card Example">
  Card Content!
</KuiCard>

Label component

Description

KUI framework labels are native <label> elements enhanced with Josh's Design styling.

API reference for React

import { KuiLabel } from '@kleeen/components-react';

Properties

type	name	Default value
string	kuiText	''

Example

  <KuiLabel kuiText="some text"></KuiLabel>