Introduction

FAQ

How do I run the styleguide locally?

go to mono/es-react-components
run npm install
run npm run styleguide
go to http://localhost:6060

How do I debug issues with the styleguide locally?

go to mono/es-react-components
run npm install
run npm run styleguide:verbose
go to http://localhost:6060

How do I add my component to the styleguide

add your new component to the sections in mono/es-react-components/config/sections.js
- if your component has multiple files or it belongs in a new sections make sure to create a new section.
- if your component has multiple files but some are private and should not be exposed, add the files you want to ignore to mono/es-react-components/config/ignore.
- otherwise add your component in the Additional Components section.

reference https://react-styleguidist.js.org/docs/components.html#sections

How do I document my new react component?

add a readme.md to mono/es-react-components/src/<my new ui component>/
use markdown to document examples
props and default props will be automatically parsed from your component
add descriptions to your props by using JSDoc notations

reference https://react-styleguidist.js.org/docs/documenting.html

How do I document anything other than a react component?

add a <doc-name>.md to the mono/es-react-components/docs folder.

What if I need to use an external package as part of my component doc?

you can add the required package and map the function you need for the doc examples.
- add the function and package path to the context property in styleguide.config.js

reference https://react-styleguidist.js.org/docs/configuration.html#context

What if I think the documentation is wrong, could be better, or missing?

grab a cup of coffee, relax and fix it ¯\_(ツ)_/¯

Design

Living design directory

Versioned mockups can be found at the following link: https://xd.adobe.com/view/32b71bcc-86b8-403e-8a6f-6633c10c1cb1/

Typology

@todo add typology doc

h1 example

title

paragraph

<h1>h1 title</h1>
<p>paragraph</p>

Buttons

ButtonDropDown

src/button-drop-down/button-drop-down.js

Uses all of the same properties available to a normal button.

Renders a button that summons a drop-down menu of actions when clicked. If a primary action is provided to this component, then a secondary button will be rendered to summon the drop-down menu, and the primary button will trigger the supplied primary action when clicked.

Prop name	Type	Default	Description
`actions`	`shape[]`	`undefined`	An array of objects which represent the actions that can be taken in the drop-down `disabled`: `bool` `label`: `string` — Required `onClick`: `func`
`buttonIcon`	`string`	`fasChevronDown`	Overrides the default icon rendered on the underlying Button
`children`	`node`	`undefined`	Overrides any actions array passed in and renders content inside the dropdown instead
`containerClassNames`	`string`	`undefined`	additional styles to be applied to the container element surrounding the ButtonDropDown itself
`isRightAligned`	`bool`	`false`	Informs the button drop down that it is right-aligned, and should style itself accordingly.
`primaryAction`	`func`	`undefined`	If this `onClick` handler is defined, the drop-down will be rendered as a split-button. Otherwise, the entire button will summon the actions drop-down.

Basic Button Drop Down Example:

Basic Button Drop Down Example With Custom Icon:

Custom Menu Content Example:

Split Button Drop Down Example:

Split Button Drop Down with Custom Menu Example:

ButtonGroup

src/button-group/button-group.js

Prop name	Type	Default	Description
`children`	`node`	Required
`className`	`string`	`null`	class name for overriding button group styles at implementation
`collapsed`	`bool`	`false`	removes padding between the buttons
`inline`	`bool`	`false`	displays the buttons inline instead of vertical
`inlineRight`	`bool`	`false`	displays the buttons inline, right justified
`responsive`	`bool`	`false`	displays the buttons inline with responsive wrapping
`right`	`bool`	`false`	displays the buttons right justified
`topMargin`	`string`	`null`	takes a number+unit to add a top margin as an inline style

Button Group Example:

Inline Button Group:

Responsive Button Group:

Collapsed Button Group:

Collapsed Inline Button Group:

Button

src/button/button.js

Prop name	Type	Default	Description
`block`	`bool`	`null`	applies 100% width to the button
`buttonClassName`	`string`	`null`	Button class name to override styles at implementation
`buttonType`	`enum`	`null`	Button type One of: `primary`, `positive`, `negative`, `warning`, `link`, `transparent`, `outline`
`children`	`any`	`null`	child nodes allow for custom content to go inside of the button, overrides all other values like icons and labels
`disabled`	`bool`	`false`	disabled
`icon`	`string`	`null`	icon from our Icon component
`iconClass`	`string`	`null`	icon class for example `fa fa-plus`
`iconProps`	`object`	Shape	props to be applied to the underlying icon
`inverse`	`bool`	`false`	Swaps the background and text colors of the button
`label`	`string`		button label
`large`	`bool`	`false`	larger button
`onClick`	`func`	`null`	button click event
`rightIcon`	`bool`	`false`	when `icon` or `iconClass` is provided rightIcon will place the icon on the right
`small`	`bool`	`false`	smaller button
`styles`	`string`	`null`	DEPRECATED: Please use buttonClassName to override styles
`submitType`	`bool`	`false`	`type="submit"`
`uppercase`	`bool`	`false`	uppercase label

Button Types:

Inverse Buttons:

With an Icon:

Custom Button children:

Block button:

Disabled button:

Small button:

Large button:

Custom Styles:

RouterLinks

RouterLink

src/router-link/router-link.js

Prop name	Type	Default	Description
`buttonType`	`enum`	`null`	Button type One of: `primary`, `positive`, `negative`, `link`, `transparent`, `outline`
`children`	`string`	`null`	button label
`className`	`string`	`null`	Button class
`iconClass`	`string`	`null`	icon class for example `fa fa-plus`
`large`	`bool`	`false`	larger button
`params`	`object`	`null`	params to pass with the url
`rightIcon`	`bool`	`false`	when `iconClass` is provided rightIcon will place the icon on the right
`small`	`bool`	`false`	smaller button
`styles`	`string`	`null`	extra styles applied to the button
`to`	`string`		the destination url
`uppercase`	`bool`	`false`	uppercase label

RouterLink Example:

Tabs

Tab

src/tabs/tab.js

Prop name	Type	Default	Description
`children`	`node`	`null`
`className`	`string`	`null`	custom class
`disabled`	`bool`	`false`	whether the tab is disabled or not
`id`	`string`	`null`	the id of the tab, used in the `selected` in the parent Tab component
`noPadding`	`bool`	`false`	disables padding for the tab
`scrolling`	`bool`	`false`
`title`	`union`	`null`	the title of the tab, this is displayed int eh tab menu One of type: `node`, `string`

Basic Tab:

Main Tab
Other Tab

Some content

Disabled Tab

Main Tab
Other Tab

Some content

Icon Title

Other Tab

Some content

Tabs

src/tabs/tabs.js

Prop name	Type	Default	Description
`children`	`union[]`	`null`	accepts an array of `Tab`-like elements
`className`	`string`	`null`	custom class
`defaultTab`	`union`	`0`	the initial tab to show One of type: `number`, `string`
`onChange`	`func`	`null`	called when the tabs change
`onSelect`	`func`	`null`	called before the tabs are changed, if `false` is returned it will cancel the change
`orientation`	`enum`	`horizontal`	"vertical" or "horizontal" (default) show the tabs above the content or to the left of the content One of: `horizontal`, `vertical`
`responsive`	`bool`	`false`	forces the tabs to fill up the entire space available
`selected`	`union`	`null`	the currently selected tab One of type: `number`, `string`
`withDivider`	`bool`	`false`

Basic Example:

tab 1
tab 2

content 1

Sticky Tab Header:

Long Text
Short Text

Ignore the squirrels, you'll never catch them anyway going to catch the red dot today going to catch the red dot today spread kitty litter all over house sniff other cat's butt and hang jaw half open thereafter for cat mojo who's the baby, so be superior. Hack up furballs mrow claw drapes, yet reward the chosen human with a slow blink but get video posted to internet for chasing red dot for trip on catnip. Kitty power love blinks and purr purr purr purr yawn stare at ceiling somehow manage to catch a bird but have no idea what to do next, so play with it until it dies of shock what a cat-ass-trophy!. Eat a rug and furry furry hairs everywhere oh no human coming lie on counter don't get off counter cough for find a way to fit in tiny box. Licks paws chase dog then run away cough furball into food bowl then scratch owner for a new one. Stare at ceiling. Hiiiiiiiiii feed me now cats go for world domination or i cry and cry and cry unless you pet me, and then maybe i cry just for fun for eat the fat cats food man running from cops stops to pet cats, goes to jail. Lick plastic bags. Lick yarn hanging out of own butt playing with balls of wool hiiiiiiiiii feed me now chase after silly colored fish toys around the house but claw your carpet in places everyone can see - why hide my amazing artistic clawing skills? mrow stinky cat. My cat stared at me he was sipping his tea, too i just saw other cats inside the house and nobody ask me before using my litter box all of a sudden cat goes crazy claw drapes, or refuse to come home when humans are going to bed; stay out all night then yowl like i am dying at 4am yet small kitty warm kitty little balls of fur. Eat and than sleep on your face step on your keyboard while you're gaming and then turn in a circle . Grab pompom in mouth and put in water dish white cat sleeps on a black shirt. Instead of drinking water from the cat bowl, make sure to steal water from the toilet proudly present butt to human. Purrrrrr purr when being pet but hack up furballs so attack dog, run away and pretend to be victim for meowing chowing and wowing or sniff all the things meow meow, i tell my human. Chase the pig around the house try to jump onto window and fall while scratching at wall eat grass, throw it back up yet grab pompom in mouth and put in water dish experiences short bursts of poo-phoria after going to the loo. Purr while eating love you, then bite you. Sniff sniff. Sleep scoot butt on the rug. Experiences short bursts of poo-phoria after going to the loo. I like frogs and 0 gravity jump around on couch, meow constantly until given food, purr for find empty spot in cupboard and sleep all day. The fat cat sat on the mat bat away with paws jumps off balcony gives owner dead mouse at present then poops in litter box snatches yarn and fights with dog cat chases laser then plays in grass finds tiny spot in cupboard and sleeps all day jumps in bathtub and meows when owner fills food dish the cat knocks over the food dish cat slides down the water slide and into pool and swims even though it does not like water, attack feet, wake up human for food at 4am chill on the couch table annoy the old grumpy cat, start a fight and then retreat to wash when i lose. Find something else more interesting the cat was chasing the mouse spot something, big eyes, big eyes, crouch, shake butt, prepare to pounce yet chew the plant roll on the floor purring your whiskers off so spread kitty litter all over house disappear for four days and return home with an expensive injury; bite the vet. Cats making all the muffins love blinks and purr purr purr purr yawn grab pompom in mouth and put in water dish or slap owner's face at 5am until human fills food dish, but cats making all the muffins poop in a handbag look delicious and drink the soapy mopping up water then puke giant foamy fur-balls. Stare at the wall, play with food and get confused by dust rub face on everything. Cat dog hate mouse eat string barf pillow no baths hate everything instead of drinking water from the cat bowl, make sure to steal water from the toilet or eat plants, meow, and throw up because i ate plants the dog smells bad find something else more interesting headbutt owner's knee for need to check on human, have not seen in an hour might be dead oh look, human is alive, hiss at human, feed me. Ooh, are those your $250 dollar sandals? lemme use that as my litter box i cry and cry and cry unless you pet me, and then maybe i cry just for fun. Poop on grasses. Hate dog loved it, hated it, loved it, hated it disappear for four days and return home with an expensive injury; bite the vet. Why use post when this sofa is here. Leave hair on owner's clothes. Give me some of your food give me some of your food give me some of your food meh, i don't want it when in doubt, wash stare at ceiling light lick sellotape and lick the curtain just to be annoying crash against wall but walk away like nothing happened. Hiding behind the couch until lured out by a feathery toy love me! so spill litter box, scratch at owner, destroy all furniture, especially couch so play riveting piece on synthesizer keyboard or put butt in owner's face, or you call this cat food. Wake up human for food at 4am jump five feet high and sideways when a shadow moves kitty kitty for demand to be let outside at once, and expect owner to wait for me as i think about it or hack ask to go outside and ask to come inside and ask to go outside and ask to come inside, eat the fat cats food. Sniff other cat's butt and hang jaw half open thereafter crash against wall but walk away like nothing happened, hit you unexpectedly poop on floor and watch human clean up love and coo around boyfriend who purrs and makes the perfect moonlight eyes so i can purr and swat the glittery gleaming yarn to him (the yarn is from a $125 sweater) pee in the shoe yet the cat was chasing the mouse. Hopped up on catnip wack the mini furry mouse sit on human lick the plastic bag bird bird bird bird bird bird human why take bird out i could have eaten that for friends are not food. Murf pratt ungow ungow cry louder at reflection yet pose purrfectly to show my beauty make muffins, for dismember a mouse and then regurgitate parts of it on the family room floor.

Vertical Tabs:

tab 1
tab 2

content 1

Responsive Vertical Tabs:

tab 1
tab 2

Controlled Tabs

Selected Tab

Tab component

tab 1
tab 2
tab 3

content 1

Steps

src/steps/steps.js

Prop name	Type	Default	Description
`children`	`any`	Required	The children to be rendered inside the Steps container
`className`	`string`	`undefined`	A classname that is applied to the outer container of the steps component
`current`	`number`	`0`	The current step number
`direction`	`enum`	`horizontal`	Specify the direction of the steps One of: `horizontal`, `vertical`
`icons`	`shape`	`undefined`	Override icons that can be used if passed in for the finish and error icons `finish`: `enum` `error`: `enum`
`initial`	`number`	`0`	The initial step number
`labelPlacement`	`enum`	`horizontal`	Direction of the label placements One of: `horizontal`, `vertical`
`size`	`enum`	`normal`	The size of the Steps component as a string One of: `normal`, `large`, `small`
`status`	`enum`	`process`	The default status used in child steps One of: `wait`, `process`, `error`, `finish`
`style`	`object`	Shape	Additional styles that can get directly applied to the outer container

Steps example:

Finished

This is a description.

In Progress

This is a description.

Waiting

This is a description.

Small Size example:

Finished

This is a description.

In Progress

This is a description.

Waiting

This is a description.

Larger Size example:

Open

This is a description.

Closed

This is a description.

Billed

This is a description.

Vertical Label example:

Finished

This is a description.

In Progress

This is a description.

Waiting

This is a description.

Small Size Vertical Labels example:

Open

Closed

Billed

Larger Size Vertical Labels example:

Open

Closed

Billed

Icon example:

Verification

Pay

Done

Custom Finish/Error Icon example:

Verification

Pay

Done

Controlled Steps

First

Second

Last

First-content

Vertical:

Finished

This is a description.

In Progress

This is a description.

Waiting

This is a description.

Status:

Finished

This is a description

In Process

This process had an error

Waiting

This is a description

Step

src/steps/components/step.js

Prop name	Type	Default	Description
`className`	`string`		Do not modify, applied from the parent Steps component: A class applied to the Step container
`description`	`any`	`undefined`	The text description for the Step
`icon`	`enum`	`undefined`	Icon string used, must be one of the imported FontAwesome 5 found in the icon-config.js Object.keys( iconList )
`icons`	`shape`	`undefined`	Used when the icons for "finish" or "error" states need to be overridden on a single step `finish`: `enum` `error`: `enum`
`itemWidth`	`union`	`undefined`	Do not modify, applied from the parent Steps component: Override for the width of the step One of type: `number`, `string`
`status`	`enum`	`undefined`	The status used for the Step, "wait", "process", "error", "finish" One of: `wait`, `process`, `error`, `finish`
`stepNumber`	`number`	`undefined`	Do not modify, applied from the parent Steps component: The step number, applied by the outer Steps container
`style`	`object`	`undefined`	Do not modify, applied from the parent Steps component: Additional styles that can get directly applied to the Step outer container
`title`	`union`	`undefined`	The title of the Step, can be a string or node such as a Button One of type: `node`, `string`

Form Controls

Autocomplete

src/form-controls/autocomplete/autocomplete.js

Prop name	Type	Default	Description
`autoFocus`	`bool`	`null`	auto focus
`className`	`string`	`null`	component classname
`clearable`	`bool`	`true`
`disableFiltering`	`bool`	`false`	whether to disable option filtering
`disabled`	`bool`	`false`	disabled state, see Input
`filterOption`	`func`	`null`	a custom filter method
`id`	`any`	`null`	the id of the html input
`isLoading`	`bool`	`false`	enables or disables the loading state of the input
`label`	`string`	`null`	a label for the input, see Input
`labelKey`	`string`	`label`	a string for getting an options label
`loadOptions`	`func`	`null`	a function that is called to load options
`loadingText`	`string`	`Loading...`	custom text to show when the input is in loading state
`maxHeight`	`number`	`250`
`menuDetached`	`bool`	`false`	detaches the menu (set `true` when in places like modals)
`name`	`string`	`null`	the name of the input
`noResultsText`	`string`	`No results found`	custom text to show when there is no options that match
`onBlur`	`func`	`null`
`onChange`	`func`	`null`	called when the user selects an option
`onFocus`	`func`	`null`
`onInputChange`	`func`	`null`	called when the input changes
`optionHeight`	`number`	`35`	explicit height of menu option
`optionRenderer`	`func`	`null`	a function that is used to render the contents of an option in the option menu
`options`	`shape[]`	`[]`	an array of options `disabled`: `bool` — whether the option is disabled
`placeholder`	`string`	`Select...`	the placeholder text to show when no value is selected
`required`	`bool`	`false`	required state, see Input
`value`	`union`	`null`	the value of the input One of type: `bool`, `number`, `string`, `union[]`
`valueKey`	`string`	`value`	a string used to get the value of an option
`valueRenderer`	`func`	`undefined`	a function that is used to render the selected value
`multi`	`bool`	`false`	enable multi-select @see https://github.com/JedWatson/react-select/tree/v1.x#multiselect-options
`removeSelected`	`bool`	`true`
`simpleValue`	`bool`	`true`
`delimiter`	`string`	`,`

Input Label

This is some placeholder text

Autocomplete With Options

Select...

Disabled Autocomplete

Select...

Not clearable Autocomplete

option

Controlled Autocomplete

Value: react
Option: {"label":"React","value":"react"}

React

Autocomplete in Modal

Creating an async Autocomplete input

Select...

Custom Option Content

Select...

Custom Option AND "value" content

🔥 Hot 🔥

Multi-select simpleValue=true

Selected Values: "react,ember"
Selected Options: []

React

Ember

Multi-select simpleValue=false

Selected Values: [1,"ember"]
Selected Options: []

React

Ember

Custom filtered options (only filters by value and not label)

Value: react
Option: {"label":"React","someValue":"react"}

React

Disabled filtering options

Value: react
Option: {"label":"React","value":"react"}

React

Required Autocomplete

Required Multi Autocomplete

Autocomplete With A Metric Butt Ton of Options

Select...

MenuList

src/form-controls/autocomplete/menuList.js

Prop name	Type	Default
`children`	`any`	Required
`maxHeight`	`number`	Required
`selectProps`	`object`	Required

Checkbox

src/form-controls/checkbox/checkbox.js

Controlled Checkbox: the parent controls the checked state, and passes in an onChange method, if desired.

Controlled components are preferred by React so, <Checkbox/> would be used in the majority of cases where a checkbox is needed. <UncontrolledCheckbox/> can be used in cases where something closer to a native checkbox is a better choice.

Prop name	Type	Default	Description
`checked`	`bool`	`false`	toggling checked/unchecked is handled by the parent
`className`	`string`	`null`	custom class name used to overwrite checkbox styles
`disabled`	`bool`	`false`	sets the disabled attribute
`labelText`	`node`	`null`	checkbox label
`name`	`string`	`null`	name attribute, can be used to create a checkbox group
`onChange`	`func`	`null`	Checkbox change event
`onClick`	`func`	`null`	Checkbox click event, used to toggle parent's checked state
`partiallyChecked`	`bool`	`false`	toggles partially checked state
`required`	`bool`	`false`	applies a "required" label, consumer must enforce required behavior
`requiredMsg`	`string`	`null`	replaces the default "required" label with a custom message
`uppercase`	`bool`	`false`	uppercase label
`value`	`union`		value attribute One of type: `string`, `number`

Unchecked Checkbox

Checked Checkbox

Partially Checked Checkbox

Controlled Checkbox

This is my checkbox and it is not checked.

Disabled:

Checkbox is disabled & not checked.

With label text:

This is my label : not checked.

Required with label text:

This is my checkbox and it is not checked. (Required)

Required with custom required message:

This is my checkbox and it is not checked. You must click this!

Checkbox with onChange:

Not checked :(

Click count: 0

UncontrolledCheckbox

src/form-controls/checkbox/uncontrolled/uncontrolled-checkbox.js

Uncontrolled Checkbox: behaves like a native checkbox, with the parent having no control beyond adding custom onChange behavior.

Controlled components are prefered by React so, <Checkbox/> would be used in the majority of cases where a checkbox is needed. <UncontrolledCheckbox/> can be used in cases where something closer to a native checkbox is a better choice.

Prop name	Type	Default	Description
`className`	`string`	`null`	custom class name used to oevrwrite checkbox styles
`defaultChecked`	`bool`	`false`	defaults the checked state to true
`disabled`	`bool`	`false`	sets the disabled attribute, defaults to false
`labelText`	`string`	`null`	checkbox label
`name`	`string`	`null`	name attribute, can be used to create a checkbox group
`onChange`	`func`	Function	Checkbox change event - can be used to trigger behavior after a click
`required`	`bool`	`false`	makes the Checkbox required
`requiredMsg`	`string`	`null`	adds a required message
`uppercase`	`bool`	`false`	uppercase label

Default checked:

Disabled:

You can't check me.

With label text:

This is my checkbox

Required with label text:

This is my checkbox (Required)

Required with custom required message:

You must click this!

With custom onChange behavior:

Clicks: 0

ColorPicker

src/form-controls/colorpicker/colorpicker.js

Prop name	Type	Default	Description
`colors`	`array`	`[ "#4e4e4e", "#909194", "#cfcfd1", "#2ab6ea", "#094874", "#46294e", "#7e2779", "#ed3895", "#f6911e", "#fcb22e", "#9dcc45", "#60aa45", "#3b6731" ]`	Array of color values
`handleChange`	`func`	Function	Callback when a color is selected
`selectedColor`	`string`	`null`	Currently selected color, defaults to first color in colors
`sort`	`bool`	`false`	Sort colors based on hue

ColorPicker:

ColorPicker with Sorted Colors:

Input

src/form-controls/input/input.js

Prop name	Type	Default	Description
`autocomplete`	`string`	`off`	see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes
`autofocus`	`bool`	`false`	see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes
`className`	`string`		custom class
`disabled`	`bool`	`false`	disabled boolean
`iconClickHandler`	`union`	`null`	set icon click handler only if `iconName` is provided One of type: `func`, `null`
`iconName`	`string`		icon name for example `fa fa-paperclip`
`id`	`string`		input id attribute. If not set a random id will be assigned with the prefix `input`
`label`	`string`		label for the input
`maxLength`	`number`	`null`	maximum character limit
`name`	`string`		name attribute
`onChange`	`func`	`null`	onChange event handler
`onKeyDown`	`func`	Function	onKeyDown event handler
`onKeyUp`	`func`	Function	onKeyUp event handler
`placeholder`	`string`		the placeholder text for the input, see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-placeholder
`readonly`	`bool`	`false`	mark the input as readonly
`required`	`bool`	`false`	mark the input as required
`step`	`number`	`null`	see: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number#Controlling_step_size
`swapLabel`	`bool`	`false`	creates placeholder -> label swap behavior - requires placeholder value
`type`	`string`	`text`	input type for example "text", "number", "email" etc.
`value`	`union`		inital value One of type: `string`, `number`

Input example:

Input with label:

My Input

Input with icon:

My Input

Required input:

My Input (required)

Input with button:

File Input example:

Upload a File

QrReader

src/form-controls/qr-reader/qr-reader.js

Prop name	Type	Default	Description
`disabled`	`bool`	`false`	mark the input as disabled
`onChange`	`func`	Function	onChange event handler
`onError`	`func`	Function	error handler
`readonly`	`bool`	`false`	mark the input as readonly
`textValue`	`string`		value to set for the text input

QR Reader Example:

Serial Number

RadioButton

src/form-controls/radio-group/radio-button.js

Prop name	Type	Default	Description
`className`	`string`		custom class
`id`	`string`		an id for the button (optional)
`label`	`string`		text for the radio button label
`onChange`	`func`	Function	onChange event handler
`selected`	`bool`	`false`	is this button selected or not
`value`	`union`	Required	value to be used for the radio button One of type: `string`, `number`, `bool`
`labelClassName`	`unknown`

RadioGroup

src/form-controls/radio-group/radio-group.js

Prop name	Type	Default	Description
`className`	`string`		custom class
`onChange`	`func`	Function	onChange event handler
`radioOptions`	`array`	Required	array of objects to be rendered for each radio button
`selectedValue`	`union`	`null`	any preselected value to be rendered by default One of type: `string`, `number`, `bool`

RadioGroup example:

SelectDropDown

src/form-controls/select-dropdown/select-dropdown.js

Prop name	Type	Default	Description
`children`	`union`	Required	One of type: `element`, `node`, `array`
`className`	`string`
`disabled`	`bool`	`false`
`iconClickHandler`	`union`	`null`	One of type: `func`, `null`
`iconName`	`string`	`null`
`id`	`string`	`null`
`label`	`string`	`null`
`name`	`string`	`null`
`onChange`	`func`	Function
`placeholder`	`string`	`null`
`required`	`bool`	`false`
`value`	`union`	`null`	One of type: `string`, `number`

Select dropdown with no default value

Select dropdown with an icon

Synced Select dropdowns

Select 1

Select 2

StrictCurrencyInput

src/form-controls/strict-currency-input/strict-currency-input.js

Any props passed in will get passed down into the Input component, the only prop that gets modified is onChange

Prop name	Type	Default	Description
`localeCode`	`string`	`en-US`	locale code to base currency icon and conversion from
`onChange`	`func`	Required	onChange event handler
`value`	`string`		value for input

StrictCurrencyInput example:

Working Example:

StrictDecimalInput

src/form-controls/strict-decimal-input/strict-decimal-input.js

Any props passed in will get passed down into the Input component, the only prop that gets modified is onChange

Prop name	Type	Default	Description
`accuracy`	`number`	`2`	Determines accuracy of decimal numbers *
`onChange`	`func`	Required	onChange event handler

StrictDecimalInput example:

Required input:

Hours (required)

StrictNumberInput

src/form-controls/strict-number-input/strict-number-input.js

Any props passed in will get passed down into the Input component, the only prop that gets modified is onChange

Prop name	Type	Default	Description
`onChange`	`func`	Required	onChange event handler

StrictNumberInput example:

Required input:

Current Year (required)

TextArea

src/form-controls/textarea/textarea.js

Prop name	Type	Default	Description
`autocomplete`	`string`	`null`	see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes
`autofocus`	`bool`	`false`	see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes
`className`	`string`		custom class
`cols`	`number`
`iconClickHandler`	`union`	`null`	set icon click handler only if `iconName` is provided One of type: `func`, `null`
`iconName`	`string`	`null`	icon name for example `fa fa-paperclip`
`id`	`string`	`null`	input id attribute. If not set a random id will be assigned with the prefix `input`
`label`	`string`	`null`	label for the input
`name`	`string`	`null`	name attribute
`onChange`	`func`	`null`	onChange event handler
`placeholder`	`string`		any placeholder text for the textarea
`required`	`bool`	`false`	mark the textarea as required
`resize`	`enum`	`vertical`	One of: `none`, `both`, `vertical`, `horizontal`
`rows`	`number`		the number of rows the textarea should have
`value`	`union`		One of type: `string`, `number`
`wrap`	`bool`	`false`	Should the textarea contain the text without scrolling horizontally

Setting textarea height

Setting wrap on the text area

Controlled textarea

Value: controlled textarea

Progress

src/progress/progress.js

Prop name	Type	Default	Description
`className`	`string`	`undefined`	additional classes applied to the progress bar
`labelOverride`	`func`	`undefined`	a function that accepts two arguments: `progressType` and `percent` and returns a JSX node or string
`percent`	`union`	`0`	How much of the progress is filled in One of type: `number`, `string`
`progressType`	`enum`	`undefined`	the type of progress bar to use and any associated icons One of: `normal`, `exception`, `success`
`showInfo`	`bool`	`true`	should the info be displayed next to the bar
`small`	`bool`	`false`	renders the bar in a smaller height
`strokeColor`	`string`	`undefined`	color of progress bar
`strokeLinecap`	`enum`	`round`	type of end used for the filled in progress One of: `round`, `square`
`strokeWidth`	`union`	`undefined`	How thick the progress bar is in pixels One of type: `number`, `string`

Progress Bars example:

10%

Small Progress Bars example:

10%

Basic Controlled Example:

12%

Custom Label example:

10 of 100

Circle

src/progress/circle/circle.js

Prop name	Type	Default	Description
`className`	`string`	`undefined`	additional classes applied to the progress bar
`gapDegree`	`number`	`0`	How of a gap is rendered, 0 - 360
`gapPosition`	`enum`	`bottom`	The position of the gap in the circle One of: `top`, `bottom`, `left`, `right`
`labelOverride`	`func`	`undefined`	a function that accepts two arguments: `status` and `percent` and returns a JSX node or string
`percent`	`union`	`0`	How much of the progress is filled in One of type: `number`, `string`
`progressType`	`enum`	`undefined`	the type of progress bar to use and any associated icons One of: `normal`, `exception`, `success`
`showInfo`	`bool`	`true`	should the info be displayed inside the circle
`strokeColor`	`string`	`undefined`	color of progress bar
`strokeLinecap`	`enum`	`round`	type of end used for the filled in progress One of: `butt`, `round`, `square`
`strokeWidth`	`union`	`undefined`	How thick the progress bar is in pixels One of type: `number`, `string`
`trailColor`	`string`	`#f3f3f3`	color of the unfilled progress bar
`width`	`number`	`undefined`	width of the progress circle

Circle examples:

75%

Basic Controlled Example:

12%

Dashboard

src/progress/dashboard/dashboard.js

Prop name	Type	Default	Description
`gapDegree`	`number`	`75`	An integer value for how much space the dashboard covers
`gapPosition`	`enum`	`bottom`	the gap position, options: `top` `right` `bottom` `left` One of: `top`, `right`, `bottom`, `left`

Dashboard examples:

15%

Gap Position examples:

15%

Gap Degree examples:

15%

Basic Controlled Example:

12%

Tables

VirtualizedTableForm

src/virtualized-table-form/virtualized-table-form.js

Handles use-case when the user needs to take action on a combination of rows/columns (not be intended for simple table views). Active development will occur with an eye towards the Design System’s new direction. Future roadmap for this component will be breaking it apart into smaller, composable components (ex: form actions vs virtualized table) so the internal implementation can be replaced.

Renders a table with a fixed header and (optionally) fixed columns, based on the MultiGrid component from react-virtualized. Unless otherwise noted the properties available to MultiGrid and Grid will be directly applied, as-is.

The table will stretch to fill all available space within its container. If the table overflows the width of its container, the user may scroll horizontally to view overflowed content. Optionally, you may choose to fix one or more columns in place, so that they do not scroll horizontally with the rest of the table.

Notes:

The preferred implementation is to abstract the columns out of the table declaration file and into a ./columns/ subdirectory. Examine the code for the "ESVirtualizedTable with Abstracted Columns" below. Currently, a real-life example can be found at es-track/manage/js/components/asset-keypad-table/.
If the UI design calls for a highly customized layout for the record, you can create custom records. See the code for "VirtualizedTableForm with Custom Record Component" for an example. Because sorting and filtering could return unexpected results on a column of custom records, consider adding a custom header and search component.
You can create a custom header. See the code for "VirtualizedTableForm with Custom Header" for an example.

Ignored MultiGrid and Grid Properties

cellRenderer
classNameBottomLeftGrid
classNameBottomRightGrid
classNameTopLeftGrid
classNameTopRightGrid
columnCount
enableFixedColumnScroll
enableFixedRowScroll
estimatedColumnSize
estimatedRowSize
fixedRowCount
height
noContentRenderer
rowCount
scrollToRow
width

Prop name	Type	Default	Description
`buttons`	`array`	`[]`	An ordered array of `Buttons` to be displayed in the upper right button group. Note: You must specify the `key` attribute of each button in the array.
`columns`	`shape[]`	Required	An array of column configurations `key`: `string` — Required `title`: `string` — Required `className`: `string` `customFilter`: `func` `customHeader`: `func` `customSortComparer`: `func` `defaultSort`: `bool` `defaultSortDirection`: `string` `excludeFromExport`: `bool` `exportData`: `func` `filterable`: `bool` `filterData`: `func` `filterSortData`: `func` `hideTooltip`: `bool` `minWidth`: `number` `render`: `func` `rightAligned`: `bool` `sortable`: `bool` `sortData`: `func` `tooltip`: `func` `width`: `number`
`columnsButton`	`element`	`<Button label="Columns" />`	Button used to toggle multi-select curtain to show and hide table columns. *
`csvExportType`	`enum`	`basic`	Providing the `basic` type will display a basic export button when csv export is enabled. Providing the `advanced` type will display an export button with expanded options for exporting. Note: If `ESVirtualizedTable.filterable == true` then the advanced button will display. This is to maintain backwards compatibility for now. One of: `advanced`, `basic`
`csvFileName`	`string`	`export`	The base file name (excluding file extension) that will be used when exporting to a CSV file.
`customHeaderHeight`	`number`	`null`	A fixed height applied to each column header.
`defaultFilterState`	`object`	Shape	Applies a default filter to the table as it renders for the first time. Multiple columns can be filtered. Expected format is: `{ one_column_key: "on filter", two_column_key: "two filter" }`
`defaultMinColumnWidth`	`number`	`150`	Applies a minimum width to columns that don't define their own minimum width.
`defaultSortState`	`object`	Shape	Applies default sort to the table as it renders for the first time. This will override the sorting from the Column definition. Expected format is: `{ column_key: "ASC" }` `{ column_key: "DESC" }`
`disableRowHoverHighlighting`	`bool`	`false`	Turns off row highlighting on hover for performance
`emptyStateText`	`string`	`No Data`	Text to display if no data is available to the table
`enableCsvExport`	`bool`	`false`	Set to `true` to enable an "Export to CSV" button for the table
`filterable`	`bool`	`true`	Set to `false` to disable filtering of the entire table.
`fixedColumnCount`	`number`	`0`	The number of columns (from the left edge of the table) to fix in place if horizontal scrolling becomes necessary to view table content.
`onCellClick`	`func`	Function	The callback to invoke whenever a cell in the table is clicked. The callback is invoked with the row item and column configuration associated with the clicked cell.
`onSectionRendered`	`func`	`undefined`	A passthrough to Grid's onSectionRendered
`onStateEvent`	`func`	Function	The callback to invoke whenever a state event is broadcasted. The callback is invoked with the name of the event and the new state values. State events setup for broadcast: `"filterChange"` `"sortChange"`
`renderCustomExportButton`	`func`	`undefined`	Renders a custom csv export button. Expects the following argument: { exportAllCsv } or, if allowing a filtered export { exportAllCsv, disableFilteredExport, exportFilteredCsv }
`rowClassName`	`func`	Function	Takes a row object and returns a string that will be applied to the cells within the associated row
`rowHeight`	`number`	`45`	A fixed height applied to each row.
`rows`	`array`	Required	An array of row objects.

Column Properties

Property	Type	Required?	Default	Description
key	String	✓		A unique string used to identify the column. This string should correspond to a key within your row objects.
title	String	✓		The title of the column to be displayed for the user.
className	String			An optional class name that will be applied to the content of each table cell in this column.
customFilter	Function			Given a filter term (string) and a row object, returns a boolean for use with Array.prototype.filter
customHeader	Function			Add a custom header component when the UI design requires functionality/layout beyond that which the default header can provide
customSortComparer	Function			Given a sort direction (`"ASC"` or `"DESC"`) and rows `a` and `b`, returns a number for use with Array.prototype.sort
defaultSort	Boolean		`false`	Set to `true` if this column should be sorted by default. (Only one column should have this property set to `true`)
defaultSortDirection	String		`DESC`	Must have defaultSort set to true, and be a value of "DESC" or "ASC", if not included or an invalid type will default to "DESC"
excludeFromExport	Boolean		`false`	Set to `true` to exclude the column from CSV export.
exportData	Function			Given a row object, returns data that will be used when exporting table to a CSV file.
filterable	Boolean		`true`	Set to `false` to disable filtering for the column.
filterData	Function			Given a row object, returns data that will be used to filter the column. Unlike `sortData` and `filterSortData`, this can return an array of values. Overrides `filterSortData`.
filterSortData	Function			Given a row object, returns data that will be used to sort and filter the column.
hideTooltip	Boolean		`false`	Set to `true` to hide the tooltip for the column.
minWidth	Number			Overrides the default minimum column width applied by the table.
render	Function			Given a row object, returns renderable content to display within the cell.
rightAligned	Boolean		`false`	Right aligns the column contents
sortable	Boolean		`true`	Set to `false` to disable sorting for the column.
sortData	Function			Given a row object, returns data that will be used to sort the column. Overrides `filterSortData`.
tooltip	Function			Given a row object, returns string of text to display as the cell's tooltip.
width	Number			Sets a fixed width for the column. Overrides all other width properties.

VirtualizedTableForm Basic Example:

Name

Year

test9

2020

test8

2019

test7

2019

test6

2018

test5

2018

test4

2017

test3

2017

test2

2016

test1

2016

VirtualizedTableForm Fixed Columns Example (with year column right aligned):

Name

Year

test9

2016

test8

2016

test7

2016

test6

2016

test5

2016

test4

2016

test3

2016

test2

2016

test1

2016

VirtualizedTableForm CSV Export Example:

Name

Year

test9

2019

test8

2018

test7

2018

test6

2017

test5

2017

test4

2016

test3

2016

test2

2015

test1

2015

VirtualizedTableForm Advanced CSV Export Example:

Name

Year

test9

2019

test8

2018

test7

2018

test6

2017

test5

2017

test4

2016

test3

2016

test2

2015

test1

2015

VirtualizedTableForm Empty Example:

Name

Year

No Data

VirtualizedTableForm with Abstracted Columns:

Name

Year

test9

2016

test8

2016

test7

2016

test6

2016

test5

2016

test4

2016

test3

2016

test2

2016

test1

2016

VirtualizedTableForm with Custom Record Component:

Custom Title

Asset Id: 1

Name: test1
Year: 2016

Asset Id: 2

Name: test2
Year: 2015

Asset Id: 3

Name: test3
Year: 2014

Asset Id: 4

Name: test4
Year: 2013

Asset Id: 5

Name: test5
Year: 2012

Asset Id: 6

Name: test6
Year: 2011

Asset Id: 7

Name: test7
Year: 2010

Asset Id: 8

Name: test8
Year: 2009

Asset Id: 9

Name: test9
Year: 2008

VirtualizedTableForm with Custom Header:

Custom Header Title

"I could be a custom search bar that knows how to filter and search on your custom record component!"

Asset Id: 1

Name: test1
Year: 2016

Asset Id: 2

Name: test2
Year: 2015

Asset Id: 3

Name: test3
Year: 2014

Asset Id: 4

Name: test4
Year: 2013

Asset Id: 5

Name: test5
Year: 2012

Asset Id: 6

Name: test6
Year: 2011

Asset Id: 7

Name: test7
Year: 2010

Asset Id: 8

Name: test8
Year: 2009

Asset Id: 9

Name: test9
Year: 2008

DEPRECATED_ESVirtualizedTable

src/DEPRECATED-es-virtualized-table/es-virtualized-table.js

DEPRECATED COMPONENT - UNSAFE TO USE

No new development will occur on this component. Defect resolution will continue until new components are available for migration, at which point full removal will be scheduled.

If you need virtualization and user actions on data (export, email, etc.) migrate to VirtualizedTableForm (also contained in this repo).
If you need a simple, styled table without virtualization, the Design System will be releasing a styled table suitable for migration. In the meantime, you can continue using the existing ESVirtualizedTable (not recommended) or work with the Design System team at creating a simple, styled table suitable to promotion into the new component library (recommended).
If you need a virtualized table with virtualization and without user actions on data, you can continue using the existing ESVirtualizedTable (not recommended) or break apart the virtualized table from the form components in VirtualizedTableForm (recommended).

The decision to deprecate this component was made by the F.E. Guild, on 07/30/2020. Please see https://www.notion.so/equipmentshare/Meeting-Doc-Thurs-07-30-20-1pm-8a5375a48e99412fb3be02f4f5331f73 (which is the notes from that day’s guild meeting) for more details.

Notes:

The preferred implementation is to abstract the columns out of the table declaration file and into a ./columns/ subdirectory. Examine the code for the "ESVirtualizedTable with Abstracted Columns" below. Currently, a real-life example can be found at es-track/manage/js/components/asset-keypad-table/.
If the UI design calls for a highly customized layout for the record, you can create custom records. See the code for "ESVirtualizedTable with Custom Record Component" for an example. Because sorting and filtering could return unexpected results on a column of custom records, consider adding a custom header and search component.
You can create a custom header. See the code for "ESVirtualizedTable with Custom Header" for an example.

Ignored MultiGrid and Grid Properties

cellRenderer
classNameBottomLeftGrid
classNameBottomRightGrid
classNameTopLeftGrid
classNameTopRightGrid
columnCount
enableFixedColumnScroll
enableFixedRowScroll
estimatedColumnSize
estimatedRowSize
fixedRowCount
height
noContentRenderer
rowCount
scrollToRow
width

Prop name	Type	Default	Description
`buttons`	`array`	`[]`	An ordered array of `Buttons` to be displayed in the upper right button group. Note: You must specify the `key` attribute of each button in the array.
`className`	`string`	`undefined`
`columns`	`shape[]`	Required	An array of column configurations `key`: `string` — Required `title`: `string` — Required `className`: `string` `customFilter`: `func` `customHeader`: `func` `customSortComparer`: `func` `defaultSort`: `bool` `defaultSortDirection`: `string` `excludeFromExport`: `bool` `exportData`: `func` `filterable`: `bool` `filterData`: `func` `filterSortData`: `func` `hideTooltip`: `bool` `minWidth`: `number` `render`: `func` `rightAligned`: `bool` `sortable`: `bool` `sortData`: `func` `tooltip`: `func` `width`: `number`
`csvExportType`	`enum`	`basic`	Providing the `basic` type will display a basic export button when csv export is enabled. Providing the `advanced` type will display an export button with expanded options for exporting. Note: If `ESVirtualizedTable.filterable == true` then the advanced button will display. This is to maintain backwards compatibility for now. One of: `advanced`, `basic`
`csvFileName`	`string`	`export`	The base file name (excluding file extension) that will be used when exporting to a CSV file.
`customHeaderHeight`	`number`	`null`	A fixed height applied to each column header.
`defaultFilterState`	`object`	Shape	Applies a default filter to the table as it renders for the first time. Multiple columns can be filtered. Expected format is: `{ one_column_key: "on filter", two_column_key: "two filter" }`
`defaultMinColumnWidth`	`number`	`150`	Applies a minimum width to columns that don't define their own minimum width.
`defaultSortState`	`object`	Shape	Applies default sort to the table as it renders for the first time. This will override the sorting from the Column definition. Expected format is: `{ column_key: "ASC" }` `{ column_key: "DESC" }`
`emptyStateText`	`string`	`No Data`	Text to display if no data is available to the table
`enableCsvExport`	`bool`	`false`	Set to `true` to enable an "Export to CSV" button for the table
`filterable`	`bool`	`true`	Set to `false` to disable filtering of the entire table.
`fixedColumnCount`	`number`	`0`	The number of columns (from the left edge of the table) to fix in place if horizontal scrolling becomes necessary to view table content.
`onCellClick`	`func`	Function	The callback to invoke whenever a cell in the table is clicked. The callback is invoked with the row item and column configuration associated with the clicked cell.
`onHoverRowHighlighting`	`bool`	`true`
`onSectionRendered`	`func`	`undefined`	A passthrough to Grid's onSectionRendered
`onStateEvent`	`func`	Function	The callback to invoke whenever a state event is broadcasted. The callback is invoked with the name of the event and the new state values. State events setup for broadcast: `"filterChange"` `"sortChange"`
`renderCustomExportButton`	`func`	`undefined`	Renders a custom csv export button. Expects the following argument: { exportAllCsv } or, if allowing a filtered export { exportAllCsv, disableFilteredExport, exportFilteredCsv }
`rowClassName`	`func`	Function	Takes a row object and returns a string that will be applied to the cells within the associated row
`rowHeight`	`number`	`45`	A fixed height applied to each row.
`rows`	`array`	Required	An array of row objects.

Column Properties

Property	Type	Required?	Default	Description
key	String	✓		A unique string used to identify the column. This string should correspond to a key within your row objects.
title	String	✓		The title of the column to be displayed for the user.
className	String			An optional class name that will be applied to the content of each table cell in this column.
customFilter	Function			Given a filter term (string) and a row object, returns a boolean for use with Array.prototype.filter
customHeader	Function			Add a custom header component when the UI design requires functionality/layout beyond that which the default header can provide
customSortComparer	Function			Given a sort direction (`"ASC"` or `"DESC"`) and rows `a` and `b`, returns a number for use with Array.prototype.sort
defaultSort	Boolean		`false`	Set to `true` if this column should be sorted by default. (Only one column should have this property set to `true`)
defaultSortDirection	String		`DESC`	Must have defaultSort set to true, and be a value of "DESC" or "ASC", if not included or an invalid type will default to "DESC"
excludeFromExport	Boolean		`false`	Set to `true` to exclude the column from CSV export.
exportData	Function			Given a row object, returns data that will be used when exporting table to a CSV file.
filterable	Boolean		`true`	Set to `false` to disable filtering for the column.
filterData	Function			Given a row object, returns data that will be used to filter the column. Unlike `sortData` and `filterSortData`, this can return an array of values. Overrides `filterSortData`.
filterSortData	Function			Given a row object, returns data that will be used to sort and filter the column.
hideTooltip	Boolean		`false`	Set to `true` to hide the tooltip for the column.
minWidth	Number			Overrides the default minimum column width applied by the table.
render	Function			Given a row object, returns renderable content to display within the cell.
rightAligned	Boolean		`false`	Right aligns the column contents
sortable	Boolean		`true`	Set to `false` to disable sorting for the column.
sortData	Function			Given a row object, returns data that will be used to sort the column. Overrides `filterSortData`.
tooltip	Function			Given a row object, returns string of text to display as the cell's tooltip.
width	Number			Sets a fixed width for the column. Overrides all other width properties.

DEPRECATED_ESVirtualizedTable Basic Example:

Name

Year

test9

2020

test8

2019

test7

2019

test6

2018

test5

2018

test4

2017

test3

2017

test2

2016

test1

2016

DEPRECATED_ESVirtualizedTable Fixed Columns Example (with year column right aligned):

Name

Year

test9

2016

test8

2016

test7

2016

test6

2016

test5

2016

test4

2016

test3

2016

test2

2016

test1

2016

DEPRECATED_ESVirtualizedTable CSV Export Example:

Name

Year

test9

2019

test8

2018

test7

2018

test6

2017

test5

2017

test4

2016

test3

2016

test2

2015

test1

2015

DEPRECATED_ESVirtualizedTable Advanced CSV Export Example:

Name

Year

test9

2019

test8

2018

test7

2018

test6

2017

test5

2017

test4

2016

test3

2016

test2

2015

test1

2015

DEPRECATED_ESVirtualizedTable Empty Example:

Name

Year

No Data

DEPRECATED_ESVirtualizedTable with Abstracted Columns:

Name

Year

test9

2016

test8

2016

test7

2016

test6

2016

test5

2016

test4

2016

test3

2016

test2

2016

test1

2016

DEPRECATED_ESVirtualizedTable with Custom Record Component:

Custom Title

Asset Id: 1

Name: test1
Year: 2016

Asset Id: 2

Name: test2
Year: 2015

Asset Id: 3

Name: test3
Year: 2014

Asset Id: 4

Name: test4
Year: 2013

Asset Id: 5

Name: test5
Year: 2012

Asset Id: 6

Name: test6
Year: 2011

Asset Id: 7

Name: test7
Year: 2010

Asset Id: 8

Name: test8
Year: 2009

Asset Id: 9

Name: test9
Year: 2008

DEPRECATED_ESVirtualizedTable with Custom Header:

Custom Header Title

"I could be a custom search bar that knows how to filter and search on your custom record component!"

Asset Id: 1

Name: test1
Year: 2016

Asset Id: 2

Name: test2
Year: 2015

Asset Id: 3

Name: test3
Year: 2014

Asset Id: 4

Name: test4
Year: 2013

Asset Id: 5

Name: test5
Year: 2012

Asset Id: 6

Name: test6
Year: 2011

Asset Id: 7

Name: test7
Year: 2010

Asset Id: 8

Name: test8
Year: 2009

Asset Id: 9

Name: test9
Year: 2008

Loading Indicators

LoadingAnimation

src/loading-indicators/loading-animation/loading-animation.js

Loading Animation: Renders an animated loading indicator.

Prop name	Type	Default	Description
`isSmall`	`bool`	`false`
`isVisible`	`bool`	`false`

isSmall = true

LoadingOverlay

src/loading-indicators/loading-overlay/loading-overlay.js

Loading Overlay: Creates a semi-transparent mask which overlays a loading component. Displays the loading animation, centered on the overlay.

NOTE: The overlay uses position: absolute. It will position itself relative to its first ancestor with !position: static. You need to set position: relative || fixed || absolute || sticky on the parent.

Prop name	Type	Default	Description
`isLoading`	`bool`	Required	controls the visibility of the overlay
`smallAnimation`	`bool`	`false`	renders a smaller version of the loading animation

LoadingOverlay

LoadingOverlay with smallAnimation = true

LoadingOverlay over a collection of checkboxes

This checkbox is loading.

Dialogs

ModalCreator

src/modal-dialog/modal-creator.js

Prop name	Type	Default	Description
`children`	`union`	Required	One of type: `node[]`, `element`, `node`, `string`
`containerClass`	`string`		CSS class to be added to final dialog container. Useful for adding additional styles to your final modal dialog.
`contentPadding`	`bool`	`true`	modal body content padding
`customStyles`	`object`	Shape
`handleClose`	`func`	`null`	handle close should give the consumer control over the isOpen state
`isOpen`	`bool`	`false`
`outerContainerClass`	`string`		used for targeting the entire modal to customize with css
`renderHeader`	`bool`	`true`	should we render the header for the modal
`shouldCloseOnOverlayClick`	`bool`	`true`
`showCornerCloseButton`	`bool`	`true`	display the corner close button on the top right
`title`	`string`		modal title

ModalCreator basic example:

ModalDialog

src/modal-dialog/modal-dialog.js

Modal Dialog is used by ModalCreator to wrap around the dialog content

Prop name	Type	Default	Description
`children`	`union`	Required	One of type: `node[]`, `element`, `node`, `string`
`containerClass`	`string`
`contentPadding`	`bool`	`true`
`customStyles`	`object`	Shape
`handleClose`	`func`	`null`
`outerContainerClass`	`string`
`renderHeader`	`bool`	`true`
`shouldCloseOnOverlayClick`	`bool`	`true`
`showCornerCloseButton`	`bool`	`true`
`title`	`string`

test modal

Hello World!

This is my modal content

Custom Dialogs

ConfirmationDialog

src/confirmation-dialog/confirmation-dialog.js

Prop name	Type	Default	Description
`cancelText`	`string`	`Cancel`	Override the default cancel button text
`children`	`node`	`null`	Provide child components for rendering
`content`	`string`	`null`	The content of the dialog
`contentPadding`	`bool`	`true`	Override the default contentPadding of underlying ModalCreator
`okText`	`string`	`Ok`	Override the default ok button text
`okType`	`enum`	`primary`	The type of button used for the OK/Confirm - should be one of the available button types see: https://styles.equipmentshare.com/#button buttonTypes
`onCancel`	`func`	Required	method to fire off when cancel is clicked
`onOk`	`func`	Required	method to fire off when ok is clicked
`showCornerCloseButton`	`bool`	`false`	Override the default showCornerCloseButton of underlying ModalCreator
`title`	`string`	`null`	The title of the confirmation dialog

Confirmation Dialog Example:

Confirmation Dialog Example with no body text:

Confirmation Dialog Example with no custom button text:

Toasts

ToastContainer

src/toasts/toast-container.js

Toast Container: The ToastContainer component must be included in the App somewhere. Portal is used to insure that the container is appended to the Document Body. Be sure to only included this component only once in your app. This is all that is needed to display Toasts.

Prop name	Type	Default	Description
`className`	`string`	`null`

Toast Container:

Toast

src/toasts/toast.js

Prop name	Type	Default	Description
`burnToast`	`func`	Required	Function that is passed in from ToastContainer to remove a toast
`toast`	`object`	Required	The Toast Object { closeOnClick: Boolean, id: Generated Number, message: String, type: String, timeout: Number }

Toast Examples:

Configuring a Toast with Custom Options:

closeOnClick: true (default)
timeout: 4000 (default)

MultiCheckbox

src/multi-checkbox/multi-checkbox.js

Prop name	Type	Default	Description
`className`	`string`	`null`	class applied to checkbox component
`collapsible`	`bool`	`false`	if there are nested children, determines whether they should be collapsible or always expanded
`selectAllLabel`	`string`	`null`	Text label for the select all option, if no value is passed in in no select all option will be present
`values`	`shape[]`	Required	Array of values that make up the list `checked`: `bool` — is the value checked `id`: `number` — Required — id of the value `name`: `node` — label for the checkbox to display `children`: `array` — an array of values with the same shape as this value
`valuesToggle`	`func`	Function	Callback for when a value is clicked

MultiCheckbox

Select All
one
two
three

Nested MultiCheckbox

Collapsible Nested MultiCheckbox

Select All
one
two
three

ControlledPopoverCreator

src/popover/controlled-popover.js

Prop name	Type	Default	Description
`align`	`union`	`undefined`	the `align` prop passed to the Popover component One of type: `string`, `string[]`
`anchor`	`union`	`undefined`	the anchor provided to the Popover component One of type: `string`, `func`
`children`	`node`	Required	The node used to trigger the popover
`closeOnEsc`	`bool`	`true`	close the popover when the Esc key is pressed
`closeOnOutsideClick`	`bool`	`true`	close the popover when the user clicks outside of the popover
`closeOnScroll`	`bool`	`true`	close the popover when the window fires the `scroll` event
`content`	`any`	`null`	Accepts any elements being passed in that render when the popover is opened
`isOpen`	`bool`	`false`	A boolean that controls the visbility of the popover content
`offset`	`union`	`undefined`	a CSS value or an object that will be used to offset the popover from its anchor One of type: `number`, `string`, `shape`
`onClose`	`func`	`null`	a method passed in that is called to close the popover from inside the popover
`popoverClassName`	`string`		custom popover class

Basic Controlled Example:

PopoverCreator

src/popover/popover-creator.js

Prop name	Type	Default	Description
`align`	`union`	`undefined`	the `align` prop passed to the Popover component One of type: `string`, `string[]`
`anchor`	`union`	`undefined`	the anchor provided to the Popover component One of type: `string`, `func`
`children`	`any`	`null`	the popovers contents
`closeOnEsc`	`bool`	`true`	close the popover when the Esc key is pressed
`closeOnOutsideClick`	`bool`	`true`	close the popover when the user clicks outside of the popover
`closeOnScroll`	`bool`	`true`	close the popover when the window fires the `scroll` event
`offset`	`union`	`undefined`	a CSS value or an object that will be used to offset the popover from its anchor One of type: `number`, `string`, `shape`
`onClose`	`func`	`null`	called when the popover closes
`onOpen`	`func`	`null`	called when the popover opens
`popoverClassName`	`string`		custom popover class
`trigger`	`func`	`null`	a react component that will be passed the functions to open / close the popover

basic popover

Alignment and Anchor

Top Left

Top Center

Top Right

Middle Left

Middle Center

Middle Right

Bottom Left

Bottom Center

Bottom Right

Custom popover anchor

Popover with inputs

Trigger popover on mouse over

Hover over me!

src/popover/popover.js

Prop name	Type	Default	Description
`align`	`union`	`center bottom`	the alignment of the popover One of type: `string`, `string[]`
`anchor`	`union`	`( rect ) => ( { left: rect.x + rect.width / 2, top: rect.y + rect.height } )`	a function that is used to position the popover on the screen One of type: `string`, `func`
`anchorNode`	`Element`	`null`	the anchor node
`children`	`any`	`null`	popover contents
`className`	`string`		custom class
`offset`	`union`	`null`	a CSS value or an object that will be used to offset the popover from its anchor One of type: `number`, `string`, `shape`

popover contents

List Group

ListGroup

src/list-group/list-group.js

Prop name	Type	Default
`children`	`any`	`null`
`className`	`string`	`null`
`noBorder`	`bool`	`false`

Item 1
Item 2
Item 3
Item 4
Item 5

Without border

Item 1
Item 2
Item 3

Inside a Card

Card Header

Item 1
Item 2
Item 3

Inside a Popover

Side Drawer

SideDrawerCreator

src/side-drawer/side-drawer-creator.js

Prop name	Type	Default
`children`	`node`	`null`
`closeOnBackdropClick`	`bool`	`true`
`drawerWidth`	`string`	`null`
`isOpen`	`bool`	`false`
`onClose`	`func`	`null`
`scrollable`	`bool`	`false`
`showBackdrop`	`bool`	`true`
`title`	`node`	`null`

SideDrawer

src/side-drawer/side-drawer.js

Prop name	Type	Default
`children`	`node`	`null`
`closeOnBackdropClick`	`bool`	`true`
`drawerWidth`	`string`	`null`
`isOpen`	`bool`	`false`
`onClose`	`func`	`null`
`scrollable`	`bool`	`false`
`showBackdrop`	`bool`	`true`
`title`	`node`	`null`

SideDrawer in relative div

Scrollable

example drawer

Hello World!

This is example content

Additional Components

Avatar

src/avatar/avatar.js

Prop name	Type	Default	Description
`children`	`node`	Required	child elements to render inside of the avatar
`onClick`	`func`	Function	function used when the avatar is clicked on
`shape`	`enum`	`circle`	the shape of the avatar, must be 'circle' or 'square' One of: `square`, `circle`
`size`	`number`	`2`	the size of the avatar in 'em'

Basic Avatars:

Avatar Sizes:

src/banner/banner.js

It's hard to tell in the living document due to the gray container, but this component wraps children with a colored box so that we have a consistent highlight throughout the consuming applications.

Prop name	Type	Default	Description
`children`	`node`	Required	The content that will be displayed inside of the banner.

Simple Banner

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed feugiat lacus.

Complex Banner

My Banner

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed feugiat lacus. Morbi erat magna, malesuada et pulvinar porttitor, dapibus nec ligula. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed feugiat lacus. Morbi erat magna, malesuada et pulvinar porttitor, dapibus nec ligula. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed feugiat lacus. Morbi erat magna, malesuada et pulvinar porttitor, dapibus nec ligula. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed feugiat lacus. Morbi erat magna, malesuada et pulvinar porttitor, dapibus nec ligula. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed feugiat lacus. Morbi erat magna, malesuada et pulvinar porttitor, dapibus nec ligula. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed feugiat lacus. Morbi erat magna, malesuada et pulvinar porttitor, dapibus nec ligula.

Card

src/card/card.js

Prop name	Type	Default	Description
`cardClass`	`string`	`null`	A custom class name that can be added to the card
`children`	`any`	`null`	Any children that will be rendered inside of the card

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed feugiat lacus. Morbi erat magna, malesuada et pulvinar porttitor, dapibus nec ligula. Pellentesque commodo eleifend tellus, id venenatis nunc egestas sit amet. Nam tincidunt mattis lobortis. Aenean at dolor gravida, efficitur nulla et, venenatis ligula. Quisque hendrerit nisl eu metus dictum interdum. Etiam faucibus bibendum viverra. Vivamus consectetur velit id ligula fringilla congue. In sagittis ligula eget tristique fringilla.

Custom Class

Card with 'flush' Card.Body

Some flush mounted content (gray box)

Card with tabs

tab 1
tab 2

Full Card example with subcomponents

Title

Card with header image

Chip

src/chip/chip.js

Prop name	Type	Default	Description
`children`	`any`	Required
`chipType`	`enum`	`default`	One of: `default`, `negative`, `positive`, `primary`
`className`	`string`	`null`
`closeLabel`	`string`	`Remove`
`href`	`string`	`null`
`iconElement`	`any`	`null`
`onClick`	`func`	`null`
`onClose`	`func`	`null`
`rounded`	`bool`	`false`
`showCloseIcon`	`bool`	`false`

Basic chips

Basic Chip

Clickable Chip

rounded chip

Link Chip

Chip Types

default Chip

Clickable

Link

primary Chip

Clickable

Link

negative Chip

Clickable

Link

positive Chip

Clickable

Link

Chips with close icon

Chip with close icon

Rounded Chip

Clickable Chip

Link Chip

Chips with icons

ES

Chip with icon

Foo

Bar

Image as icon

WebPack

React

CsvDownload

src/csv-download/csv-download.js

Prop name	Type	Default	Description
`csvString`	`string`	Required	csv data string to be exported on button click
`csvTitle`	`string`	Required	title of download
`disabled`	`bool`	`false`	boolean to disable button
`endDate`	`object`	`undefined`	date object of end date
`startDate`	`object`	`undefined`	date object of start date

ESTable Example:

Disabled Example:

FilePreview

src/file-preview/file-preview.js

Prop name	Type	Default	Description
`className`	`string`	`undefined`	Class name to be applied to the container element (which may be , , or , depending on the download props passed in)
`downloadUrl`	`string`	`undefined`	URL to link for download
`fileInfo`	`string`	`undefined`	The info text to be rendered in the file preview box
`fileName`	`string`	`undefined`	The title text to be rendered at the top in the file preview box
`iconOverride`	`string`	`undefined`	Full icon name to use instead
`iconType`	`string`	`undefined`	Determines the icon to display in the left side. Options are DOC, XLS, ZIP, IMG, PDF, FILE
`metadata`	`shape`	`undefined`	Metadata returned from the file service. If provided, the FilePreview component will use it to display with the original filename, the file size and type as the file info string, and the appropriate icon for the mime-type. These may still be overridden by other props. `mime_type`: `string` `original_filename`: `string` `size_bytes`: `number`
`onClick`	`func`	`undefined`	Function to be called on click of the component, i.e. the function to download the file, instead of using a direct URL

File Preview Defaults

Untitled

FILE

Using Metadata

helen.jpg

3.42 KB Image

presentation.pptx

43.95 KB FILE

inventory-2019-08.xls

11.77 MB Excel File

Override_file_name.xls

11.77 MB Excel File

Icon Options

my_cat.png

41 MB PNG

cat_pictures.zip

ZIP Archive

Cat photos.docx

Word Doc

cat_ratings.xlsx

Excel

Cat sweater pattern.pdf

16 KB PDF

cats

FILE

With OnClick defined

Icon Override

Not_A_Virus.exe

82 MB Attachment

GoogleMap

src/google-map/google-map.js

Prop name	Type	Default	Description
`center`	`shape`	Shape	`latitude`: `number` `longitude`: `number`
`mapTypeControl`	`bool`	`true`	Turn the Street/Satellite topography buttons on(true) or off(false).
`mapTypeId`	`string`	`roadmap`
`maxZoom`	`number`	`21`
`setMap`	`func`	Function
`template`	`object`	Shape
`zoom`	`number`	`7`

Basic Map:

This is example code, but it will not function without the correct google maps script import and API key available on the consuming application.

ReferenceError: google is not defined

StaticGoogleMap

src/static-google-map/static-google-map.js

Prop name	Type	Default	Description
`apiKey`	`string`	`AIzaSyAzLinN-4rrmzamxNuZiyf3il_aE_ALEFo`
`center`	`union`	Required	One of type: `string`, `shape`
`mapType`	`enum`	`roadmap`	One of: `roadmap`, `satellite`, `hybrid`, `terrain`
`size`	`shape`	Shape	`width`: `number` `height`: `number`
`zoom`	`union`	`15`	One of type: `string`, `number`

Static Google Map:

Map type examples centered on "Berkeley, CA":

Roadmap

Satellite

Hybrid

Terrain

Zoom examples centered on 40.8116, -73.9465:

Zoom 21

Zoom 15

Zoom 10

Zoom 5

Icon

src/icon/icon.js

In order to use this component correctly the icon desired must be imported into the icon-config.js file and added to the FontAwesome library. Once this has been done you can refer to the icon by it's new name (fasPlus). This allows multiple icons from different typesets to be imported and referenced if needed (falPlus, fasPlus)

See icon-config.js for an example on how to import and add icons to the Library

Prop name	Type	Default	Description
`className`	`string`	`null`
`mask`	`string`	`null`	The mask icon name to be rendered - pulled from iconList in icon-config.js
`name`	`string`	Required	The icon name to be rendered - pulled from iconList in icon-config.js
`onClick`	`func`	`null`	A function used to trigger when the icon is clicked

Icon example:

Icon with custom class:

Icon with onClick:

Icon with Layers:

FontAwesome Props Available

Property	Type	Description
size	String	Sets the size of the icon, one from the following list: xs, sm, lg, 2x, 3x, 4x, 5x, 6x, 7x, 8x, 9x, 10x
fixedWidth	Boolean	Set's the icon to a fixed width
inverse	Boolean	Inverts the colors of the icon
listItem	Boolean	Sets several properties on the icon to behave better as a list icon
rotation	Number	Degrees in which to rotate the icon
flip	String	When used must be one of "horizontal", "vertical" or "both"
border	Boolean	Should a border be added around the icon
spin	Boolean	Adds a slow rotation to the icon
pulse	Boolean	Adds a stepped rotation to the icon
pull	String	One of "left" or "right" - pulls the Icon to the side of the content displayed
mask	String	Must be another valid FontAwesome icon to be used as the outer shell for the main icon
transform	String/Object	A set of other variables available to transform and modify the icons

Examples:

Size:

Rotation:

Flip:

Animations:

Pull:

Gatsby believed in the green light, the orgastic future that year by year recedes before us. It eluded us then, but that’s no matter — tomorrow we will run faster, stretch our arms further... And one fine morning — So we beat on, boats against the current, borne back ceaselessly into the past.

Fixed Width, Masking & Inverse:

InputLabel

src/input-label/input-label.js

Prop name	Type	Default
`children`	`any`	`null`
`className`	`string`	`null`
`htmlFor`	`string`	`null`
`label`	`string`	`null`
`required`	`bool`	`false`

Input With Label

Label with Input

Input

Required Input Label

Label with Input (required)

Input

MultiSelectCurtain

src/multi-select-curtain/multi-select-curtain.js

MultiSelectCurtain component

Prop name	Type	Default	Description
`clickOutsideToClose`	`bool`	`false`	Boolean to determine if clicking outside of the curtain will close it or not
`curtainToggle`	`func`	Function	Callback for when a toggle element is clicked
`direction`	`enum`	`center`	Direction to open curtain One of: `center`, `left`, `right`
`disabled`	`bool`	`false`	Disables the toggle functionality of the curtain
`isVisible`	`bool`	`true`	Boolean to show/hide component
`listFooterChildren`	`element`	`null`	React element to be rendered after the list of values
`parentCanClose`	`bool`	`false`	Boolean to determine if passing showCurtain will actually toggle any changes
`selectAllLabel`	`string`	`null`	Text label for the select all option, if no value is passed in in no select all option will be present
`showCurtain`	`bool`	`false`	Allows passing a boolean prop to open/close curtain
`toggleElement`	`element`	`null`	React element that is clicked on to show the MultiSelectCurtain
`values`	`shape[]`	Required	Array of values that make up the list `checked`: `bool` — is the value checked `id`: `number` — id of the value `name`: `string` — label for the checkbox to display
`valuesToggle`	`func`	Function	Callback for when a value is clicked

Dropdown Positioning:

Custom Footer Elements:

Without a Select All Option:

Timestamp

src/timestamp/timestamp.js

Prop name	Type	Default	Description
`dateTime`	`object`	Required
`format`	`string`	`h:mm a`

src/tooltip/tooltip.js

Prop name	Type	Default	Description
`children`	`node`	`<div className={tooltipStyles.defaultTrigger}>?</div>`	Element that is hoverable to show tooltip
`direction`	`string`	`right`	Direction to show tooltip
`text`	`union`	Required	Text inside of tooltip One of type: `string`, `node`

Tooltip Right (default):

Tooltip Left:

Tooltip Top:

Tooltip Bottom:

Markdown

src/markdown/markdown.js

Prop name	Type	Default	Description
`className`	`string`	`null`
`container`	`union`	`div`	One of type: `string`, `func`
`options`	`shape`	`null`	`html`: `bool` `linkify`: `bool` `typographer`: `bool` `breaks`: `bool`
`source`	`string`	Required

# h1 Heading
## h2 Heading
### h3 Heading
#### h4 Heading
##### h5 Heading
###### h6 Heading

## Emphasis

**This is bold text**
__This is bold text__
*This is italic text*
_This is italic text_
~~Strikethrough~~

## Lists

Unordered

+ Create a list by starting a line with `+`, `-`, or `*`
+ Sub-lists are made by indenting 2 spaces:
  - Marker character change forces new list start:
    * Ac tristique libero volutpat at
    + Facilisis in pretium nisl aliquet
    - Nulla volutpat aliquam velit
+ Very easy!

Ordered

1. Lorem ipsum dolor sit amet
2. Consectetur adipiscing elit
3. Integer molestie lorem at massa

## Tables

| Option | Description |
| ------ | ----------- |
| data   | path to data files to supply the data that will be passed into templates. |
| engine | engine to be used for processing templates. Handlebars is the default. |
| ext    | extension to be used for dest files. |

Right aligned columns

| Option | Description |
| ------:| -----------:|
| data   | path to data files to supply the data that will be passed into templates. |
| engine | engine to be used for processing templates. Handlebars is the default. |
| ext    | extension to be used for dest files. |

h1 Heading

h2 Heading

h3 Heading

h4 Heading

h5 Heading

h6 Heading

Emphasis

This is bold text
This is bold text
This is italic text
This is italic text
~~Strikethrough~~

Lists

Unordered

Create a list by starting a line with +, -, or *
Sub-lists are made by indenting 2 spaces:
- Marker character change forces new list start:
  - Ac tristique libero volutpat at
  - Facilisis in pretium nisl aliquet
  - Nulla volutpat aliquam velit
Very easy!

Ordered

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa

Tables

Option	Description
data	path to data files to supply the data that will be passed into templates.
engine	engine to be used for processing templates. Handlebars is the default.
ext	extension to be used for dest files.

Right aligned columns

Option	Description
data	path to data files to supply the data that will be passed into templates.
engine	engine to be used for processing templates. Handlebars is the default.
ext	extension to be used for dest files.