JSPM

`MoleculeCheckboxField` is the combination of and `AtomCheckbox` and a `checkboxField`

AtomCheckbox is a component that displays an input checkbox w/ its expected behavior

`MoleculeDropdownList` is a composition of DropdownOptions

`MoleculeSelect` is a customized `select` created from a combination of `AtomInput`, `MoleculeInputTags`, `MoleculeDropdownList` and `MoleculeDropdownOption`

Atom Element: SUI button

> Atom Element: SUI badge

> An animated loop used for giving users feedback while the content of a page or section is being loaded.

> Description

`MoleculeDropdownOption` is a component that wraps a composition of checkbox + text.

> Atom Element: Icon

> Description

> Atom Element: SUI Tag

`MoleculeField` is a component that wraps a composition of Label + some input (input, textarea, ...) + Validation Messages.

SUI Breadcrumb Basic

> Notifications offer users information on the system. The content may confirm that an action has been performed correctly, warn the user of an error or simply give information on certain circumstances.

> Validation text is used for indicating whether the entered data is correct. It is provided by using the "Help Text" plus one color each.

AtomRadioButton is a component that displays an input radio w/ its expected behavior

A component that shows a popover to select data.

This component shows a parent checkbox with children that their controls his own state.

> Custom input component to handle phone validation. Gives the user a prefix selector and a phone number input. It also handles the phone number validation and the prefix selection.

AtomTextarea a component that wraps a textarea displaying the text passed in the `value` prop

> Basic component for tabs allowing versions with or without icons and classic or highlighted variants

`MoleculeAutosuggest` is an input that will display a list of suggestions while values are entered It allows Single and Multiple Selection

`MoleculeInputTags` is an `AtomInput` with the behavior of adding/removing `AtomTag` as a list

> The accordion is the component that contains collapsible components that allows the user to expand or collapse the content. We use this component to reduce the content of a page or section.

`MoleculePhotoUploader` is a component that lets you drag and drop images on it, or click it to add images. Also, on mobile, let you add photos directly taken with the camera.

AtomImage is a component that loads an image inside, maintaining all the accesibility attributes. This component can be set to show a placeholder image, a skeleton and/or a spinner while the final image is being loaded. This component will also show an Er

> Help Text is a feedback that the system gives users to make them clearly understand which information is required

`MoleculeInputField` is a component that wraps a composition of Label + Textarea + Validation Messages.

`MoleculeButtonGroup` is a component that wraps a group of buttons, related in content.

`MoleculeSelectField` is a component that wraps a composition of Label + some input (input, textarea, ...) + Validation Messages for a [`MoleculeSelect`](https://sui-components.now.sh/workbench/molecule/select/demo) component

`MoleculePagination` is a component that displays a range of pages with the current page highlighted and the proper buttons to navigate across the available pages in the entire range of total pages

> Inputs are the text fields that users fill in with different types of information. These include dates, passwords or even short answers. It’s a field where users can write alphanumeric texts.

> The Label is the name of the associated field, that explains what is the about. It should be clear, concise and short.

Display the loading state of a component while avoiding layout shift

`MoleculeTextareaField` is a component that wraps a composition of Label + Textarea + Validation Messages.

`MoleculeBadgeCounter` is a component used for warning the user about new content or updates

`MoleculeRating` will display a rating showing how good or popular someone o something is.

Minimalistic and smooth touch carousel component for React ⚛️

`MoleculeCoachmark` is a wrapper of the [react-joyride](https://react-joyride.com/) library in order to create smooth guided tours in the apps to explain new features to the users.

The Avatar component is the representation of a user.

`MoleculeDataCounter` is an input type number controller we can use to increase (+1) or decrease (-1) the value of such input.

> Visually hides content while preserving it for assistive technology.

AtomUpload is a component that handles the file selection (via click or drag & drop) and displays the different statuses of the uploading process

AtomCard is a component that structures two main containers (media & info for example), with the purpose of giving information about a product/client/article and linking to more detailed information about it.

> Description

> The keyboard key component exists to show which key or combination of keys performs a given action.