@brandandcelebrities/kolkitten v2.4.17

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

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

dataset and value

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

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';

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

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

dataset

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

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

dataset

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

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

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

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

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

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';

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';

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';

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';

dataset

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

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';

dataset

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

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';

value

value is an object containing required fields:

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';

value

value is an object containing required fields:

onChange function

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

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';

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';

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