Kolsquare UI Kit

npm i -S @brandandcelebrities/kolkitten

Test

You can test components by navigating to folder and running npm start

CSS / SCSS

You can always include SCSS files instead of CSS if your application is configured to import SCSS

/* Import CSS */
import '@brandandcelebrities/kolkitten/css/button.css';

/* Import SCSS */
import '@brandandcelebrities/kolkitten/scss/button.scss'

UI Kit CSS

You can import global UI-Kit CSS

Colors Palettes

import '@brandandcelebrities/kolkitten/css/palettes.css';

.ks-bkg-color--[navy||pink||blue||turquoise||lavender]--[100||90||80||70||60||50||40||30||20||10||5]

// Note --5 is only for navy. So only ks-bkg-color--navy--5 exists

Gradients

import '@brandandcelebrities/kolkitten/css/gradients.css';

.ks-bkg-gradient--turquoise-to-blue
.ks-bkg-gradient--lavender-to-blue
.ks-bkg-gradient--pink-to-lavender

Shadows

import '@brandandcelebrities/kolkitten/css/shadows.css';

.ks-shadow 	// This add css transition to box-shadow
.ks-shadow--[top||center]--[1||2||3||4||5]
.ks-shadow-over--[top||center]--[1||2||3||4||5]	// Will change box-shadow on hover

Components

• Input
• Select
• Select Multiple
• SelectTags
• Checkboxes
• RadioButtons
• Button
• Loader
• Tag
• Switch
• InputGMap
• Pager
• ToggleButton
• ToggleButtons
• ToggleBarButtons
• Avatar
• SearchBar

Jump to Release Notes Jump to TODO

Input

Installation

import { Input } from '@brandandcelebrities/kolkitten';
// or
import Input from '@brandandcelebrities/kolkitten/Input';

// And include once CSS File
import '@brandandcelebrities/kolkitten/css/input.css'; 	// Only Input styles
// or
import '@brandandcelebrities/kolkitten/css/form.css'; // All fields styles

Props & Types

| Props | Type | Default | Description | | ------------- |:-------------:|:--------:|:------------| | value | String | required | Field value | onChange | Function | | Triggered when someone is typing and changing the field. See onChange function explanations below | onFocus | Function | null | Triggered when field is focused | onBlur | Function | null | Triggered when field lost focus | label | String | "" | Field label. Will focus field when label is clicked | type | String | "text" | Field type | disabled | Boolean | false | Set to true to disable field | required | Boolean | false | Specify if the field is required. If so, adding a * to specified label, and display error errorRequiredText when field has been focused but is still empty | placeholder | String | "" | Input placeholder | useIcons | Boolean | true | Will display a success or an error icon if the field is required | lines | Number | 1 | Number of lines, should be >= 1. If lines is > 1, input will be converted to textarea | className | String | "" | CSS classes to add to container div | errorRequiredText | String | This field is required | Text to be displayed if field is required and empty |error|Boolean|false|Set to true if you want to flag and display field as error |errorText|String|""|Text to display if error is set to true |maxChars|Number|-1|Set max number of chars. Set to -1 if you want unlimited chars |maxCharsText|String|{0}/{1}|Display counter text with {0} the current count of chars, {1} the max chars enabled, and {2} the remaining characters |iconLeft|ReactElement|null|Display left icon in field |autoFocus|Boolean|false|Set to true if input should be focused when rendered |onKeyPress|Function|null|Triggered when a keyboard key is typed, sending {key, keyCode} as parameter |onEnterPress|Function|null|Triggered when the ENTER key is typed |size|String|regular|Field size, can be regular or small |numericThousandSeparator|Boolean|false| Set to true to handle thousands separators for number

onChange function

onChange = ({value, type, event}) => {
	console.log(`Field has been updated to ${value}. Field type is ${type}. Native event: ${event}`)
}

example

import Input from '@brandandcelebrities/kolkitten/Input';
import '@brandandcelebrities/kolkitten/css/input.css';

class App extends PureComponent {
	state = { value: '' }
	render() {
		return (
			<Input
				label="Input label"
				placeholder="placeholder"
				value={this.state.value}
				onChange={({value}) => this.setState({value})}
				required
			/>
		)
	}
}

Select

Installation

import { Select } from '@brandandcelebrities/kolkitten';
// or
import Select from '@brandandcelebrities/kolkitten/Select';

// And include once CSS File. Select requires input.css
import '@brandandcelebrities/kolkitten/css/input.css';
import '@brandandcelebrities/kolkitten/css/select.css'; 	
// or
import '@brandandcelebrities/kolkitten/css/form.css'; // All fields styles

| Props | Type | Default | Description | | ------------- |:-------------:|:--------:|:------------| | dataset | Array<Object> |required | See dataset and value explanations below | value | String or Number | required | See dataset and value explanations below | onChange | Function | | Triggered when someone selects an item. See onChange function explanations below | pinned|Array<String or Number>|[]|List of dataset values that should be pinned to the top of the option list |useNative|Boolean|false|Set to true if you want to use the native OS Select box (usefull for mobile and touche devices) |maxListItems|Number|-1|Specify the max number of options that should be displayed at one time in the options list. Use it for large collection. -1 to unlimited number. |disabled| Boolean | false|Set to true to disable field | required | Boolean | false | Specify if the field is required. If so, adding a * to specified label, and display error errorRequiredText when field has been focused but is still empty | label | String | "" | Field label. Will focus field when label is clicked |defaultOptionLabel|String|""|Default selected option text when useNative is true or input placeholder when useNative is false | className | String | "" | CSS classes to add to container div | errorRequiredText | String | This field is required | Text to be displayed if field is required and empty |sort|Boolean|true|Sort alphabetically options by labels |onFocus|Function|null|Function triggered when field gain focus |onBlur|Function|null|Function triggered when field looses focus |onFocusOut|Function|null|Function triggered when field looses focus, either with ClickOustide or ESCAPE pressed |hasSearch|Boolean|true|Set to false to disable the search |error|Boolean|false|Force display of error |size|String|"regular"|Select size. Can be small or regular (only if hasSearch===false) |shrink|Boolean|true|Set to false to disable the shrink effect |closeOnChange|Boolean|true|Set to false to prevent menu from closing when selecting a value |removeSearchOnClick|Boolean|false|Set to true to remove search value when item is selected |labelAsOption|Boolean|false|Display label with same style as a selected option. Usefull when used with shrink option

dataset and value

dataset is an Array of objects which use the following keys:

| Key | Type | Default | Description | | ------------- |:-------------:|:--------:|:------------| | value | String or Number | required | Option value | label | String or React Element | required | Option label to be displayed | disabled | Boolean | false | Set to true to disable option | icon | React Element | null | Display an icon before label in option list. Only when useNative is false

value is the current selected value in dataset, Component will throw an error if the specified value is not present in dataset

onChange function

onChange function will pass an Object as argument, containing the dataset object which has been clicked, with field type

onChange = ({value, label, type}) => {
	console.log(`Select has changed to ${label} (${value}). Field type is ${type}`)
}

example

import Select from '@brandandcelebrities/kolkitten/Select';
import '@brandandcelebrities/kolkitten/css/input.css';
import '@brandandcelebrities/kolkitten/css/select.css';

class App extends PureComponent {
	state = { value: '' }
	render() {
		return (
			<Select
				label="Select label"
				value={this.state.value}
				dataset={Array(100).fill(null).map((v, i) => (
					{
						value: i,
						label:`LABEL ${i}`,
					}
				))}
				onChange={({value}) => this.setState({value})}
				defaultOptionLabel="Please choose a value"
				pinned={[47, 64, 99]}
			/>
		)
	}
}

SelectMultiple

Installation

import SelectMultiple from '@brandandcelebrities/kolkitten/SelectMultiple';

// And include one CSS file
import '@brandandcelebrities/kolkitten/css/select-multiple.css';

| Props | Type | Default | Description | | ------------- |:-------------:|:--------:|:------------| |selected|Array<String or Number>|required|List of dataset values that are selected and checked in dropdown |hasSearch|Boolean|false|Display a search in select |maxOptions|Number|-1|Limit maximum number of options which can be checked. -1 for unlimited |addOptionAll|Boolean|false|Add an option Select All at the top of options list |optionAllLabel|Strin or React|``|Label of the option Select All if addOptionAll is set to true |noneIsAll|Boolean|false|Set this option to true if you want to check the option optionAllLabel when nothing is selected. Only works if addOptionAll is set to true |labelAsPlaceholder|Boolean|false|Set this option to true if you want to use placeholder instead of label |dynamicLabel|String|null|If this option is set, label will be dynamic depending on which items are selected. If only one item is selected, this option label will be displayed as label. When 2 or more options are selected, it will display dynamicLabel as label, replacing string {0} in dynamicLabel by length of selected options. Note that if noneIsAll prop is set to true, displayed label will be optionAllLabel.

Inherit from Select Refer to Select for props below: dataset, onChange, pinned, disabled, required, label, errorRequiredText, sort, onFocusOut, error, size, labelAsOption

Example

import SelectMultiple from '@brandandcelebrities/kolkitten/SelectMultiple';
import '@brandandcelebrities/kolkitten/css/select-multiple.css';

class App extends PureComponent {
	state = { selected: [] }
	render() {
		return (
			<SelectMultiple
				dataset={Array(25).fill().map((v, i) => (
					{
						value: (i+1),
						label:`Choice ${(i+1)}`,
					}
				))}
				selected={this.state.selected}
				onChange={({selected}) => this.setState({selected})}
				label="dynamicLabel noShrink optionAllLabel noneIsAll"
				addOptionAll
				optionAllLabel="All choices"
				noneIsAll
				shrink={false}
				dynamicLabel="{0} options selected"
			/>
		)
	}
}

SelectTags

Installation

import { SelectTags } from '@brandandcelebrities/kolkitten';
// or
import SelectTags from '@brandandcelebrities/kolkitten/SelectTags';

// And include once CSS File. SelectTags requires input.css and select.css
import '@brandandcelebrities/kolkitten/css/input.css';
import '@brandandcelebrities/kolkitten/css/select.css';
import '@brandandcelebrities/kolkitten/css/select-tags.css';
// or
import '@brandandcelebrities/kolkitten/css/form.css'; // All fields styles

SelectTags inherits from all Select props, plus the following

| Props | Type | Default | Description | | ------------- |:-------------:|:--------:|:------------| |selected|Array<String or Number>|required|List of dataset values that are selected and so, displayed as tags |maxTags|Number|-1|Max number of tags which can be selected. Select will be automatically disabled if selected.length >= maxTags. Use -1 to allow unlimited number of tags

onChange function

onChange function will pass an Object as argument, containing 3 keys: item containing the clicked dataset object, selected, the new Array of selected values, and type is the field type (select-tags)

onChange = ({item, selected, type}) => {
	console.log(`Field (${type}): Object clicked is`, item, "=> the new selected items are: ", selected);
}

example

import SelectTags from '@brandandcelebrities/kolkitten/SelectTags';
import '@brandandcelebrities/kolkitten/css/input.css';
import '@brandandcelebrities/kolkitten/css/select.css';
import '@brandandcelebrities/kolkitten/css/select-tags.css';

class App extends PureComponent {
	state = { selected: [] }
	render() {
		return (
			<SelectTags
				label="Select tags label"
				dataset={Array(100).fill(null).map((v, i) => ({value:i, label:`TAGS ${i}`}))}
				onChange={({selected}) => this.setState({selected})}
				defaultOptionLabel="Please choose a value"
				pinned={[24, 59, 72]}
				maxTags={8}
				selected={this.state.selected}
			/>
		)
	}
}

Checkboxes

Installation

import Checkboxes from '@brandandcelebrities/kolkitten/Checkboxes';

// And include once CSS File
import '@brandandcelebrities/kolkitten/css/checkboxes.css'; 	// Only Checkboxes styles

| Props | Type | Default | Description | | ------------- |:-------------:|:--------:|:------------| | dataset | Array<Object> |required | See dataset explanations below |selected|Array<String or Number>|required|List of dataset values that are selected and so, checked | onChange | Function | null | Triggered when someone clicks a checkbox. See onChange function explanations below |disabled| Boolean | false|Set to true to disable field | required | Boolean | false | Specify if the field is required. If so, adding a * to specified label, and display error errorRequiredText when field has been focused but is still empty | label | String | "" | Field label. | className | String | "" | CSS classes to add to container div | errorRequiredText | String | "" | Text to be displayed if field is required and empty |sort|Boolean|true|Sort alphabetically options by labels |error|Boolean|false|Force display of error |column|Boolean|true|Display checkboxes items as column |cgu|Boolean|false|Dusplay checkbox as a CGU (only one checkbox) if cgu===true && error===true, checkbox and label are displayed as red

dataset

dataset is an Array of objects which use the following keys:

| Key | Type | Default | Description | | ------------- |:-------------:|:--------:|:------------| | value | String or Number | required | Option value | label | String or React Element | required | Option label to be displayed

onChange function

onChange function will pass an Object as argument, containing 3 keys: item containing the clicked dataset object, selected, the new Array of selected values, and type is the field type (checkboxes)

onChange = ({item, selected, type}) => {
	console.log(`Field(${type}): Object clicked is`, item, "=> the new selected items are: ", selected);
}

example

import Checkboxes from '@brandandcelebrities/kolkitten/Checkboxes';
import '@brandandcelebrities/kolkitten/css/checkboxes.css';

class App extends PureComponent {
	state = { selected: [] }
	render() {
		return (
			<Checkboxes
				label="Checkboxes"
				dataset={Array(5).fill(null).map((v, i) => ({value:i, label:`CHECKBOX ${i}`}))}
				onChange={({selected}) => this.setState({selected})}
				selected={this.state.selected}
			/>
		)
	}
}

RadioButtons

Installation

import { RadioButtons } from '@brandandcelebrities/kolkitten';
// or
import RadioButtons from '@brandandcelebrities/kolkitten/RadioButtons';

// And include once CSS File
import '@brandandcelebrities/kolkitten/css/radio-buttons.css'; 	// Only RadioButtons styles
// or
import '@brandandcelebrities/kolkitten/css/form.css'; // All fields styles

| Props | Type | Default | Description | | ------------- |:-------------:|:--------:|:------------| | dataset | Array<Object> |required | See dataset and value explanations below | value | String or Number | required | See dataset and value explanations below | onChange | Function | null | Triggered when someone clicks a radiobutton. See onChange function explanations below |disabled| Boolean | false|Set to true to disable field | required | Boolean | false | Specify if the field is required. If so, adding a * to specified label, and display error errorRequiredText when field has been focused but is still empty | label | String | "" | Field label. | className | String | "" | CSS classes to add to container div | errorRequiredText | String | "" | Text to be displayed if field is required and empty |sort|Boolean|true|Sort alphabetically options by labels |error|Boolean|false|Force display of error |column|Boolean|false|Display radio items as column

dataset

dataset is an Array of objects which use the following keys:

| Key | Type | Default | Description | | ------------- |:-------------:|:--------:|:------------| | value | String or Number | required | Option value | label | String or React Element | required | Option label to be displayed

value is the current selected value in dataset, Component will throw an error if the specified value is not present in dataset

onChange function

onChange function will pass an Object as argument, containing the dataset object which has been clicked, with field type (radiobuttons)

onChange = ({value, label, type}) => {
	console.log(`RadioButtons has changed to ${label} (${value}). Field type is ${type}`)
}

example

import RadioButtons from '@brandandcelebrities/kolkitten/RadioButtons';
import '@brandandcelebrities/kolkitten/css/radio-buttons.css';

class App extends PureComponent {
	state = { value: '' }
	render() {
		return (
			<RadioButtons
				label="RadioButtons"
				dataset={Array(5).fill(null).map((v, i) => ({value:i, label:`RADIO ${i}`}))}
				onChange={({value}) => this.setState({value})}
				value={this.state.value}
			/>
		)
	}
}

Birthdate

Installation

import { Birthdate } from '@brandandcelebrities/kolkitten';
// or
import Birthdate from '@brandandcelebrities/kolkitten/Birthdate';

// And include once CSS File. Birthdate requires input.css and select.css
import '@brandandcelebrities/kolkitten/css/input.css';
import '@brandandcelebrities/kolkitten/css/select.css';
import '@brandandcelebrities/kolkitten/css/birthdate.css';
// or
import '@brandandcelebrities/kolkitten/css/form.css'; // All fields styles

| Props | Type | Default | Description | | ------------- |:-------------:|:--------:|:------------| | value | String | required | Field formatted as YYYY or YYYY-MM or YYYY-MM-DD | onChange | Function | | Triggered when someone is typing and changing a value. See onChange function explanations below |disabled| Boolean | false|Set to true to disable field | required | Boolean | false | Specify if the field is required. If so, adding a * to specified label, and display error errorRequiredText when field has been focused but is still empty | label | String | "" | Field label. | className | String | "" | CSS classes to add to container div | errorRequiredText | String | This field is required | Text to be |monthLabels|Array<String>|['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']|Labels for months |dayLabel|String|Day|Placeholder for Day Select |monthLabel|String|Month|Placeholder for Month Select |yearLabel|String|Year|Placeholder for Year Select

onChange function

onChange function will pass an Object as argument, containing the new formated value, with field type. value is formatted as YYYY-MM-DD or YYYY-MM or YYYY

onChange = ({value, type}) => {
	console.log(`Birthdate has changed to ${value}. Field type is ${type}`)
}

example

import Birthdate from '@brandandcelebrities/kolkitten/Birthdate';
import '@brandandcelebrities/kolkitten/css/input.css';
import '@brandandcelebrities/kolkitten/css/select.css';
import '@brandandcelebrities/kolkitten/css/birthdate.css';

class App extends PureComponent {
	state = { value: '' }
	render() {
		return (
			<Birthdate
				label="Birthdate"
				value={this.state.value}
				onChange={({value}) => this.setState({value})}
			/>
		)
	}
}

Button

Installation

import Button from '@brandandcelebrities/kolkitten/Button';

// And include once CSS File. Input requires loader.css if you use `loading` prop
import '@brandandcelebrities/kolkitten/css/button.css';
import '@brandandcelebrities/kolkitten/css/loader.css';
// or
import '@brandandcelebrities/kolkitten/css/style.css'; // All fields styles

| Props | Type | Default | Description | | ------------- |:-------------:|:--------:|:------------| | onClick | Function | null | Triggered when someone clicks the button. |disabled| Boolean | false|Set to true to disable button | loading | Boolean | false |Set to true to display a loader inside button (will automatically disable button) | complete | Boolean | false |Set to true to display a check mark inside button | label | String | "" | Field label. | type | String | button | Field type (button, submit,...). | className | String | "" | CSS classes to add to button |to|String|""|Use link instead of button. Note that button cannot be disabled, loading or complete, and has no type when using to prop |target|String|null|html5 target when using as link with to |size|String|regular|Size of button, Could be small, regular or large |theme|String|pink|Theme of button, could be pink, lavender, navy, blue, turquoise, hollow, header, header-2, snackbar, cancel |asLink|Boolean|false|Force render button as link <a> |asSpan|Boolean|false|Force render button as <span> |icon|React|null|Display an icon in button |iconPosition|String|left|Set icon position. Should be left or right

example

import Button from '@brandandcelebrities/kolkitten/Button';
import '@brandandcelebrities/kolkitten/css/button.css';
import '@brandandcelebrities/kolkitten/css/loader.css';

class App extends PureComponent {
	state = { loading: false }
	render() {
		const { loading } = this.state;
		return (
			<Button
				onClick={() => this.setState({loading: !loading})}
				loading={loading}
				theme="navy"
				size="small"
			>
				Click me!
			</Button>
		)
	}
}

Loader

Installation

import { Loader } from '@brandandcelebrities/kolkitten';
// or
import Loader from '@brandandcelebrities/kolkitten/Loader';

// And include once CSS File.
import '@brandandcelebrities/kolkitten/css/loader.css';
// or
import '@brandandcelebrities/kolkitten/css/form.css'; // All fields styles

| Props | Type | Default | Description | | ------------- |:-------------:|:--------:|:------------| | className | String | "" | CSS classes to add to container div

example

import Loader from '@brandandcelebrities/kolkitten/Loader';
import '@brandandcelebrities/kolkitten/css/loader.css';

class App extends PureComponent {
	render() {
		return (
			<Loader />
		)
	}
}

Tag

Installation

import { Tag, TagsContainer } from '@brandandcelebrities/kolkitten';
// or
import Tag, { TagsContainer } from '@brandandcelebrities/kolkitten/Tag';

// And include once CSS File.
import '@brandandcelebrities/kolkitten/css/tag.css';
// or
import '@brandandcelebrities/kolkitten/css/form.css'; // All fields styles

| Props | Type | Default | Description | | ------------- |:-------------:|:--------:|:------------| | value | String | "" | Tag value dispatched when clicked | label | String | "" | Tag label |disabled| Boolean | false|Set to true to disable label (click and delete) | icon | ReactElement | null |Display an icon an left of label | onClick | Function | null |Dispatched when label is clicked, with value as parameter | onClickDelete | Function | null | Add a close Icon when set, and dispatch this function with value as parameter | className | String | "" | CSS classes to add to container div | variant | String | null | Variant theme for tag (can be : round-blue)

example

import Tag, { TagsContainer } from '@brandandcelebrities/kolkitten/Tag';
import '@brandandcelebrities/kolkitten/css/tag.css';

class App extends PureComponent {
	render() {
		return (
			<TagsContainer>
				<Tag label="Tag 1" />
				<Tag label="Tag 2" />
				<Tag label="Tag 3" />
				<Tag label="Tag 4" />
			</TagsContainer>
		)
	}
}

Switch

Installation

import { Switch } from '@brandandcelebrities/kolkitten';
// or
import Switch from '@brandandcelebrities/kolkitten/Switch';

// And include once CSS File.
import '@brandandcelebrities/kolkitten/css/switch.css';

| Props | Type | Default | Description | | ------------- |:-------------:|:--------:|:------------| | active | Boolean | true | Switch is active (selected / checked) | onChange | Function | | Function triggered when switch is clicked | disabled | Boolean | false | Set to true to disable switch | label | String | "" | Switch label | labelOnLeft | Boolean | false | Display switch label on left | theme | String | "blue" | Switch theme. Can be one of blue, pink, lavender, turquoise, navy, facebook, youtube, twitter, instagram

example

import Switch from '@brandandcelebrities/kolkitten/Switch';
import '@brandandcelebrities/kolkitten/css/switch.css';

class App extends PureComponent {
	state = { active: true };
	render() {
		return (
			<Switch
				active={this.state.active}
				onChange={active => this.setState({active})}
				theme="pink"
				label="Switch me!"
			/>
		)
	}
}

Pager

Installation

import Pager from '@brandandcelebrities/kolkitten/Pager';

// And include once CSS File.
import '@brandandcelebrities/kolkitten/css/pager.css';

| Props | Type | Default | Description | | ------------- |:-------------:|:--------:|:------------| | currentPage | Number | required | The current page | onChange | Function | **required | Function triggered when changing page |totalItems| Number | null| Total number of items. Required to displayn pager | itemsPerPage | Number | 10 | Number of items per page | disabled | Boolean | false | Set to true to disable pager | disableCurrent | Boolean | false | Set to true to disable current page button | maxPages | Number | null | Set number max of pages. Set to null or < 0 to disable limitation

example

import Pager from '@brandandcelebrities/kolkitten/Pager';
import '@brandandcelebrities/kolkitten/css/pager.css';

class App extends PureComponent {
	render() {
		return (
			<Pager
				currentPage={5}
				onChange={page => window.alert(`You clicked page ${page}`)}
				totalItems={150}
				itemsPerPage={10}
			/>
		)
	}
}

ToggleButton

Installation

import ToggleButton from '@brandandcelebrities/kolkitten/ToggleButton';

// And include once CSS File.
import '@brandandcelebrities/kolkitten/css/toggle-button.css';

| Props | Type | Default | Description | | ------------- |:-------------:|:--------:|:------------| | onToggle | Function | null | Function triggred when button is clicked | active | Boolean | **required | Is button active | label | String | ""| Button label | disabled | Boolean | false | Is button disabled | className | String | null | Button additional CSS classNames

example

import ToggleButton from '@brandandcelebrities/kolkitten/ToggleButton';
import '@brandandcelebrities/kolkitten/css/toggle-button.css';

class App extends PureComponent {
	state = { active: false };
	render() {
		return (
			<ToggleButton
				active={this.state.active}
				onToggle={({active}) => this.setState({active})}
				label="Toggle Me!"
			/>
		)
	}
}

ToggleButtons

Installation

import ToggleButtons from '@brandandcelebrities/kolkitten/ToggleButtons';

// And include once CSS File.
import '@brandandcelebrities/kolkitten/css/toggle-button.css';

| Props | Type | Default | Description | | ------------- |:-------------:|:--------:|:------------| | selected | Array | required | Array of selected values | dataset | Array | required | Array of items. See below | sort | Boolean | true| Sort items by label | onChange | Function | null | Function triggred when selected itams change. See below | label | String | "" | Buttons group label | required | Boolean | false | Set at least one item selected is required | errorRequiredText | String | "" | Error to display when required is true | disabled | Boolean | true | Disable buttons group | className | String | null | CSS classname to container | error | Boolean | false | Force set error

dataset

dataset is an Array of objects which use the following keys:

| Key | Type | Default | Description | | ------------- |:-------------:|:--------:|:------------| | value | String or Number | required | Option value | label | String or React Element | required | Option label to be displayed

onChange function

onChange function will pass an Object as argument, containing 3 keys: item containing the clicked dataset object, selected, the new Array of selected values, and type is the field type (toggle-buttons)

onChange = ({item, selected, type}) => {
	console.log(`Toggle Buttons: Button clicked is`, item, "=> the new selected items are: ", selected);
}

example

import ToggleButtons from '@brandandcelebrities/kolkitten/ToggleButtons';
import '@brandandcelebrities/kolkitten/css/toggle-button.css';

class App extends PureComponent {
	state = { selected: [] };
	render() {
		return (
			<ToggleButtons
				selected={this.state.selected}
				dataset={Array(15).fill(null).map((v, i) => (
					{
						value: (i+1),
						label:`TB ${(i+1)}`,
					}
				))}
				onChange={({selected}) => this.setState({selected})}
				label="Toggle Buttons"
			/>
		)
	}
}

ToggleBarButtons

Installation

import ToggleBarButtons from '@brandandcelebrities/kolkitten/ToggleBarButtons';

// And include once CSS File.
import '@brandandcelebrities/kolkitten/css/toggle-bar-button.css';

| Props | Type | Default | Description | | ------------- |:-------------:|:--------:|:------------| | selected | String: if multiple is false, or Array: if multiple is true | required | String or Array of selected value(s) | dataset | Array | required | Array of items. See below | multiple | Boolean | false | Set true to enable multiple mode | showAllButton | Boolean | false | Set true to show All button if multiple is set to true | allLabel | String | All | Label of the option Select All if showAllButton and multiple are set to true | theme | String | blue | Button's color. Can be blue, lavender, navy, pink, turquoise | onChange | Function | null | Function triggred when selected items change. See below | className | String | null | CSS classname to container

dataset

dataset is an Array of objects which use the following keys:

| Key | Type | Default | Description | | ------------- |:-------------:|:--------:|:------------| | value | String or Number | required | Option value | label | String or React Element | required | Option label to be displayed

onChange function

onChange function will pass an Object as argument, containing 3 keys:

• item: containing the clicked dataset object,
• selected: the new Array if multiple or the value selected if not,
• type: the field type (toggle-bar-buttons)

example

import ToggleButtons from '@brandandcelebrities/kolkitten/ToggleBarButtons';
import '@brandandcelebrities/kolkitten/css/toggle-bar-button.css';

class App extends PureComponent {
	state = { selected: [] };
	render() {
		return (
			<ToggleBarButtons
				selected={this.state.selected}
				dataset={Array(4).fill(null).map((v, i) => (
					{
						value: (i+1),
						label:`TBB ${(i+1)}`,
					}
				))}
				onChange={({selected}) => this.setState({selected})}
			/>
		)
	}
}

InputLocation

Installation

import InputGmap from '@brandandcelebrities/kolkitten/InputLocation';

// And include once CSS File.
import '@brandandcelebrities/kolkitten/css/select.css';

| Props | Type | Default | Description | | ------------- |:-------------:|:--------:|:------------| | url | String | required | location api url | userToken | String | required | access token | countries | Object | required | List of countries | selected | Object | required | An object containing required infos. See below | label | String | "" | Input label |placeholder| String | ""| Input placeholder |locale| String | ""| language accept |notFoundText| String | ""| Text displayed when no location match |errorRequiredText| String | ""| Text to be displayed if field is required and empty | minChars | Number | 0 | Specify min number of chars. Set to 0 if you want unlimited chars | maxItems | Number | 3 | Specify max locations to display | withTags | Boolean | true | Specify if display selected locations with tags | disabled | Boolean | false | Disable input field | debug | Boolean | false | Activate debug mode | onChange | Function | null | Triggered when an object changes. See below | onBlur | Function | null | Function triggered when field loose focus

value

value is an object containing required fields:

| Key | Type | Description | | ------------- |:-------------:|:------------| | word | String | The search's word | selected | Array | List of selected locations

example

import InputGmap from '@brandandcelebrities/kolkitten/InputLocation';
import '@brandandcelebrities/kolkitten/css/select.css';

class App extends PureComponent {
	state = { word: '', selected: []};
	render() {
		return (
			<InputLocation
				label="Search Location"
				value={this.state.word}
				locale="fr"
				url="www.url.com"
				userToken="5c5317743200002b15855fd3"
				minChars={3}
                maxItems={3}
                countries={{
                    "FR": "France",
                	"IR": "Irlande",
                	"TN": "Tunisie",
                	"EN": "Angleterre"
                }}
				onChange={value => this.setState({word : value, selected: [] })}
			/>
		)
	}
}

InputGmap

Installation

import InputGmap from '@brandandcelebrities/kolkitten/InputGmap';

// And include once CSS File.
import '@brandandcelebrities/kolkitten/css/input-gmap.css';

| Props | Type | Default | Description | | ------------- |:-------------:|:--------:|:------------| | label | String | "" | Input label |placeholder| String | ""| Input placeholder | GmapApiKey | String | required | Google Map API Key | disabled | Boolean | false | Disable input field | onChange | Function | null | Triggered when an object changes. See below | value | Object | required | An object containing required infos. See below

value

value is an object containing required fields:

| Key | Type | Description | | ------------- |:-------------:|:------------| | placeSearched | String | The place searched | infoLocation | Array | Raw google map api return | mapped | Object | mapped infoLocation to match back-end requirements

onChange function

onChange function will pass an Object as argument, containing 3 keys:

| Key | Type | Default | Description | | ------------- |:-------------:|:--------:|:------------| | placeSearched | String | required | The place searched in gmap input

onChange = ({placeSearched, infoLocation, mapped}) => {
	console.log(`Searched: ${placeSearched}.`, "Raw GMap datas", infoLocation, "Mapped datas", mapped)
}

example

import InputGmap from '@brandandcelebrities/kolkitten/InputGmap';
import '@brandandcelebrities/kolkitten/css/input-gmap.css';

class App extends PureComponent {
	state = { gmap : {placeSearched: '' }};
	render() {
		return (
			<InputGmap
				label="GMap"
				value={this.state.gmap}
				GmapApiKey="sdfskJHGKSJDHQDKSFJGHSDGKJjksdhf"
				onChange={({mapped}) => mapped ? console.log(mapped) : null}
			/>
		)
	}
}

Avatar

Installation

import Avatar from '@brandandcelebrities/kolkitten/Avatar';

// And include once CSS File.
import '@brandandcelebrities/kolkitten/css/avatar.css';

| Props | Type | Default | Description | | ------------- |:-------------:|:--------:|:------------| | picture | String | "" | Avatar picture URL | label | String | "" | Avatar letters (1 to 3 letters max) | theme | String | "navy" | Avatar's theme. Can be navy, pink, turquoise, blue, lavender | shape | String | "round"| Avatar's shape. Can be round, square | size | String | "medium" | Avatar's size. Can be small, medium, big, mega | className | String | null | CSS classname to container | component | String | div | Change container DOM (can use span or button for example, if you don't want the Avatar to be rendered as div)

example

import Avatar from '@brandandcelebrities/kolkitten/Avatar';
import '@brandandcelebrities/kolkitten/css/avatar.css';

class App extends PureComponent {
	render() {
		return (
			<Avatar
				picture="https://lh3.googleusercontent.com/ekKxtvfxsu-YWDE5hZsc2LQjvih_adQoVj0-FUs4ROrxJXY2XWVISEnAB0Z9VjEV4VtQArHsrjKcE2dCEuo"
				label="DB"
				size="mega"
				theme="pink"
				shape="square"
			/>
		)
	}
}

SearchBar

Installation

import SearchBar from '@brandandcelebrities/kolkitten/SearchBar';

// And include one CSS file
import '@brandandcelebrities/kolkitten/css/search-bar.css';

| Props | Type | Default | Description | | ------------- |:-------------:|:--------:|:------------| |tags| Array | required | The list of tags | | id| String | required | The SearchBar id | | onChange | Function | required | Triggered function when changing tags | | onlyHashtagOrAt | Boolean | false | Tags can only start by '#' or '@' | | autoHashtag | Boolean | false | Tags are automatically prefixed with hashtags if true | | autoAt | Boolean | false | Tags are automatically prefixed with '@' if true | | disabled | Boolean | false | Set to true to disable SearchBar inputs | | autoFocus | Boolean | true | Set to true if all inputs should be focused when rendered | | highlightWords | Array | ['name'] | Words that should be highlighted in tags (they will be renderer in bold green) | | editable | Boolean | true | Set to true to edit tag on double click on it | selectable| Boolean | true | Set to true to select tag on click |displaySearchButton | Boolean | true | Display search button on the left |displayPlaceholder | Boolean | false | Display placeholder |displayRemoveButton| Boolean | true | Display a button that removes all tags |AdvancedSearch| Boolean | true | Set to true to display advancedSearch |filters| Array | [] | Datasets of advanced search filters |onChangeFilters| Function | required if filters | Triggered function when changing filters |onToggleAdvancedSearch| Function | | Triggered function when entering advanced search mode |activeOnBlur| Boolean | false | Set to true to add tag on blur

Example

import SearchBar from '@brandandcelebrities/kolkitten/SearchBar';
import '@brandandcelebrities/kolkitten/css/search-bar.css';

class App extends PureComponent {
	render() {
		return (
			<SearchBar
				tags={this.state['test-search-bar']}
				id='search-bar'
				onChange={({tags}) => this.setState({'test-search-bar': tags})}
				lexique={{
					placeholder : (<div><span> Chercher </span> un nom, un terme, une catégorie...</div>),
					mustContain : (<div> Doit contenir <span> (+) </span></div>),
					canContain  : (<div> Peut contenir </div>),
					mustNotContain : (<div> Ne doit pas contenir <span> (-) </span></div>),
					search : `Rechercher`,
					results: nb => (<h3><span>{nb}</span> profils</h3>),
					resultOnlyOne: nb => (<h3><span>{nb}</span> profil</h3>),
					reset: `Réinitialiser la recherche`,
				}}
			/>
		)
	}
}

Release Notes

• [2019-08-21] 2.4.11
  • Select fix:
    • If using button, a click on it when dropdown is already deployed will close the dropdown
• [2019-06-19] 2.4.10
  • Input fix:
    • fix: thousands separators
• [2019-06-19] 2.4.9
  • Input update:
    • add option to handle thousands separators
• [2019-06-11] 2.4.8
  • SearchBar updates:
    • new prop activeOnBlur to add tag onBlur event
  • SearchBarTag updates:
    • hide remove button on disable
• [2019-04-15] 2.4.7
  • SelectMultiple updates:
    • new prop labelAsPlaceholder to use placeholder instead of label
• [2019-04-04] 2.4.6
  • Finally working version! \o/
• [2019-03-27] 2.4.5 DO NOT USE
  • Working version ffs !
• [2019-03-27] 2.4.4 DO NOT USE
  • Working version (I hope :( )
• [2019-03-27] 2.4.3 DO NOT USE
  • Clean scripts & svg (as it seems we cannot use them this way)
• [2019-03-27] 2.4.2 DO NOT USE
  • Fix SearchBar Error
• [2019-03-27] 2.4.1 DO NOT USE
• [2019-03-27] 2.4.1 DO NOT USE
• [2019-03-26] 2.4.0 DO NOT USE
  • New component ToggleBarButtons
• [2019-03-21] 2.3.5 DO NOT USE
  • Fix 2.3.4 broken version.
• [2019-03-15] 2.3.4 DO NOT USE
  • Pager updates:
    • Active page if disableCurrent is true will be displayed as active (but not clickable)
  • Remove dependency to @brandandcelebrities/icons
• [2019-03-04] 2.3.3
  • SelectMultiple updates:
    • Fix display issue when clicking on checkbox
• [2019-02-11] 2.3.2
  • Select updates:
    • add new prop labelAsOption
    • Fix css for particular cases (shrink, small,...)
  • Input updates:
    • add new prop size
    • Fix css for sizes
  • SelectMultiple updates:
    • Css fix
• [2019-02-11] 2.3.0
  • New component SelectMultiple
  • Packages updates
  • Upgrade to React 16.8 (yes, the one with hooks)
  • Add ESLint and fix errors
  • Pager add prop disableCurrent to disable current page button
  • Select updates:
    • adding new props closeOnChange, shrink and onFocusOut
    • documenation for prop removeSearchOnClick
    • Fix major memory leak on ComponentDidUpdate dataset comparison
• [2019-02-07] 2.2.0 to 2.2.4
  • New component: InputLocation
• [2018-12-12] 2.1.5
  • Update Button
    • New prop icon to display an icon in button
    • new prop iconPosition to set icon position (left or right)
• [2018-12-11] 2.1.4
  • Fix Button CSS when disabled and using theme cancel
• [2018-12-10] 2.1.3
  • Fix Button CSS when disabled and using theme different from pink
• [2018-11-26] 2.1.2
  • Fix double trigger onChange for Select component when hitting Enter,
  • Fix readme for InputGmap
• [2018-11-13] 2.1.0
  • Using PureComponent and memo for performance improvements
• [2018-11-08] 2.0.0
  • Update to react-script 2.x & React 16.6
• [2018-09-24] 1.0.27
  • CSS updates
• [2018-09-14] 1.0.25
  • Checkboxes
    • New prop cgu
    • W3C Validator
  • Input
    • W3C validator
• [2018-09-14] 1.0.23
  • Button
    • New theme cancel
• [2018-09-11] 1.0.21
  • SearchBar
    • CSS updates Select
    • New prop size with values small or regular
• [2018-09-11] 1.0.19
  • Button
    • new theme header-2
  • Checkboxes / Radiobuttons
    • CSS updates
• [2018-09-06] 1.0.16
  • SearchBar
    • CSS/Icons updates
• [2018-09-04] 1.0.15
  • Button
    • new theme snackbar
• [2018-08-30] 1.0.13
  • Button
    • Clean code to use a stateless component
    • new theme header
• [2018-08-30] 1.0.12
  • SearchBar documentation
• [2018-08-30] 1.0.11
  • Button
    • New prop asSpan to rendre button as span
• [2018-08-30] 1.0.6
  • Button
    • New prop asLink to render button as link
• [2018-08-30] 1.0.4
  • Avatar
    • Apply theme none when a picture is set (to avoid color bording)
• [2018-08-22] 1.0.2
  • Button
    • target is not _blank by default anymore when using Button with props to.
    • rel is set only if target is set to _blank
• [2018-08-22] 1.0.0
  • Release \o/
• [2018-08-20] 0.0.4
  • New Components & global css files
    • Avatar
    • shadows.css
    • gradients.css
    • palettes.css
• [2018-08-16] 0.0.1
  • New version forked from @BrandAndCelebrities/form to match Kolsquare ui-kit

TODO

• Documentations:
  • SearchBar
• Inputs
  • Auto-add padding-right when useIcons
  • Auto-suggest from a defined list
  • Auto-suggest from a remote list
• Select
  • Check viewport to display list-item in top instead of bottom
  • Add sentence {0} more items when using maxListItems
  • Make alias of selected to value in onChange function so we can always use the key value in state update