open-index/open-npm huggingface dataset:
npm package: @s-ui/react-atom-textarea
Description: AtomTextarea a component that wraps a textarea displaying the text passed in the `value` prop
Latest version: 2.23.0

# AtomTextarea

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

[![documentation](https://img.shields.io/badge/read%20the%20doc-black?logo=readthedocs)](https://sui-components.vercel.app/workbench/atom/validationText/)
[![issue](https://img.shields.io/badge/report%20a%20bug-black?logo=openbugbounty&logoColor=red)](https://github.com/SUI-Components/sui-components/issues/new?&projects=4&template=bug-report.yml&assignees=&template=report-a-bug.yml&title=🪲+&labels=bug,component,atom,validationText)
[![npm](https://img.shields.io/npm/dt/%40s-ui/react-atom-validation-text?logo=npm&labelColor=black)](https://www.npmjs.com/package/@s-ui/react-atom-validation-text)

[![Issues open](https://img.shields.io/github/issues-search/SUI-Components/sui-components?query=is%3Aopen%20label%3Acomponent%20label%3AvalidationText&logo=openbugbounty&logoColor=red&label=issues%20open&color=red)](https://github.com/SUI-Components/sui-components/issues?q=is%3Aopen+label%3Acomponent+label%3AvalidationText)
[![NPM](https://img.shields.io/npm/l/%40s-ui%2Freact-atom-validation-text)](https://github.com/SUI-Components/sui-components/blob/main/components/atom/validationText/LICENSE.md)

## Installation

```sh
$ npm install @s-ui/react-atom-textarea --save
```

## Usage

After importing the component `AtomTextarea` like this

```javascript
import AtomTextarea from '@s-ui/react-atom-textarea'
```

### Basic usage

```javascript
<AtomTextarea value="Saul Bass on failure" />
```

### Long size

```javascript
<AtomTextarea size="long" value="Saul Bass on failure: Failure is built into creativity" />
```

### With placeholder

```javascript
<AtomTextarea placeholder="Write something cool here..." />
```

### Textarea States

The component can receive a `success`, `error` or `alert` state, to highlight his border with colors defined on sui-theme.

```javascript
<AtomTextarea state="success" />
```

> **Find full description and more examples in the [demo page](https://sui-components.now.sh/workbench/atom/textarea/demo).**
npm package: @s-ui/react-atom-toast
Description: > AtomToast is a component that renders an empty floating box.
Latest version: 1.12.0

# AtomToast

> AtomToast is a component that renders an empty floating box.

[![documentation](https://img.shields.io/badge/read%20the%20doc-black?logo=readthedocs)](https://sui-components.vercel.app/workbench/atom/toast/)
[![issue](https://img.shields.io/badge/report%20a%20bug-black?logo=openbugbounty&logoColor=red)](https://github.com/SUI-Components/sui-components/issues/new?&projects=4&template=bug-report.yml&assignees=&template=report-a-bug.yml&title=🪲+&labels=bug,component,atom,toast)
[![npm](https://img.shields.io/npm/dt/%40s-ui/react-atom-toast?logo=npm&labelColor=black)](https://www.npmjs.com/package/@s-ui/react-atom-toast)

[![Issues open](https://img.shields.io/github/issues-search/SUI-Components/sui-components?query=is%3Aopen%20label%3Acomponent%20label%3Atoast&logo=openbugbounty&logoColor=red&label=issues%20open&color=red)](https://github.com/SUI-Components/sui-components/issues?q=is%3Aopen+label%3Acomponent+label%3Atoast)
[![NPM](https://img.shields.io/npm/l/%40s-ui%2Freact-atom-toast)](https://github.com/SUI-Components/sui-components/blob/main/components/atom/toast/LICENSE.md)

## Installation

```sh
$ npm install @s-ui/react-atom-toast --save
```

## Usage

### Basic usage

```js
import AtomToast, {
  atomToastPositions,
  atomToastAutoCloseTimes
} from '@s-ui/react-atom-toast';

return (
  <AtomToast
    position={atomToastPositions.topRight}
    autoCloseTime={atomToastAutoCloseTimes.short}
  >
    <span>lorem ipsum</span>
  </AtomToast>
);
```

> **Find full description and more examples in the [demo page](#).**
npm package: @s-ui/react-atom-tooltip
Description: AtomTooltip is a component that wraps an element and shows a tooltip over it. It has some properties like:
Latest version: 2.7.0

# AtomTooltip

AtomTooltip is a component that wraps an element and shows a tooltip over it. It has some properties like:

- it will show the `title` attribute of the wrapped element by default
- can also display html as content of the tooltip
- being displayed on the screen changing sides if necessary
- being displayed on target focus (through keyboard)
- delays can be set
- the arrow position can be set
- options to select text on tooltip
- tooltip will be hidden if targeted element is not in the viewport
- tooltip can be applied over buttons (or any element w/ `onClick`)

General behaviour will be:

- **Desktop (Non-touch devices)** → tooltip will be displayed only on `mouseover`
- **Mobile (Touch devices)** → tooltip will be displayed on `touch` over target element and hidden w/ another `touch` outside of it

## Installation

```sh
$ npm install @s-ui/react-atom-tooltip --save
```

## Usage

After importing the component `AtomTooltip` like this

```javascript
import AtomTooltip from '@s-ui/react-atom-tooltip'
```

### Basic usage

```javascript
<AtomTooltip content="Last month of the year">
  <strong>december</strong>
</AtomTooltip>
```

### HTML in the Tooltip

```javascript
<AtomTooltip
  content={
    <div>
      Hello <strong>world</strong>!
    </div>
  }
>
  <strong>december</strong>
</AtomTooltip>
```

### Without arrow

```javascript
<AtomTooltip isArrowed={false} content="Last month of the year">
  <strong>december</strong>
</AtomTooltip>
```

### With delay on show and/or hide

```javascript
<AtomTooltip delay={{show: 300, hide: 1500}} content="Last month of the year">
  <strong>december</strong>
</AtomTooltip>
```

### Selecting arrow position

```javascript
<AtomTooltip
  placement={atomTooltipPlacements.TOP_START}
  content="Last month of the year"
>
  <strong>december</strong>
</AtomTooltip>
```

### Tooltip on a "call to action" element

```javascript
<AtomTooltip content="This menu display some cool options">
  <button onClick={() => alert('👍  displaying menú')}>Menu options</button>
</AtomTooltip>
```

> **Find full description and more examples in the [demo page](https://sui-components.now.sh/workbench/atom/tooltip/demo).**
npm package: @s-ui/react-atom-upload
Description: AtomUpload is a component that handles the file selection (via click or drag & drop) and displays the different statuses of the uploading process
Latest version: 3.12.0

# AtomUpload

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

[![documentation](https://img.shields.io/badge/read%20the%20doc-black?logo=readthedocs)](https://sui-components.vercel.app/workbench/atom/upload/)
[![issue](https://img.shields.io/badge/report%20a%20bug-black?logo=openbugbounty&logoColor=red)](https://github.com/SUI-Components/sui-components/issues/new?&projects=4&template=bug-report.yml&assignees=&template=report-a-bug.yml&title=🪲+&labels=bug,component,atom,upload)
[![npm](https://img.shields.io/npm/dt/%40s-ui/react-atom-upload?logo=npm&labelColor=black)](https://www.npmjs.com/package/@s-ui/react-atom-upload)

[![Issues open](https://img.shields.io/github/issues-search/SUI-Components/sui-components?query=is%3Aopen%20label%3Acomponent%20label%3Aupload&logo=openbugbounty&logoColor=red&label=issues%20open&color=red)](https://github.com/SUI-Components/sui-components/issues?q=is%3Aopen+label%3Acomponent+label%3Aupload)
[![NPM](https://img.shields.io/npm/l/%40s-ui%2Freact-atom-upload)](https://github.com/SUI-Components/sui-components/blob/main/components/atom/upload/LICENSE.md)

## Installation

```sh
$ npm install @s-ui/react-atom-upload --save
```

## Usage

After importing the component `AtomTooltip` like this

```javascript
import AtomUpload, {uploadStatuses} from '@s-ui/react-atom-upload'
```

### Basic usage

```javascript
<AtomUpload
  status={uploadStatuses.ACTIVE}
  iconActive={IconActive}
  textActive={textActive}
/>
```

> **Find full description and more examples in the [demo page](https://sui-components.now.sh/workbench/atom/upload/demo).**
npm package: @s-ui/react-atom-validation-code
Description: Component to input a validation code.
Latest version: 1.1.0

# AtomValidationCode

Component to input a validation code.

## Installation

```sh
$ npm install @s-ui/react-atom-validation-code
```

## Usage

### Basic usage

#### Import package and use the component

```js
import AtomValidationCode from '@s-ui/react-atom-validation-code'

return (
  <AtomValidationCode 
    onChange={handleChange}
    label="Verification code"
    lenght={6} 
  />)
```

#### Import the styles (Sass)

```css
@import '~@s-ui/theme/lib/index';
/* @import 'your theme'; */
@import '~@s-ui/react-atom-validation-code/lib/index';
```


> **Find full description and more examples in the [demo page](https://sui-components.vercel.app//workbench/atom/validationCode/demo).**
npm package: @s-ui/react-atom-validation-text
Description: > Validation text is used for indicating whether the entered data is correct. It is provided by using the "Help Text" plus one color each.
Latest version: 1.11.0

# AtomValidationText

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

[![documentation](https://img.shields.io/badge/read%20the%20doc-black?logo=readthedocs)](https://sui-components.vercel.app/workbench/atom/validationText/)
[![issue](https://img.shields.io/badge/report%20a%20bug-black?logo=openbugbounty&logoColor=red)](https://github.com/SUI-Components/sui-components/issues/new?&projects=4&template=bug-report.yml&assignees=&template=report-a-bug.yml&title=🪲+&labels=bug,component,atom,validationText)
[![npm](https://img.shields.io/npm/dt/%40s-ui/react-atom-validation-text?logo=npm&labelColor=black)](https://www.npmjs.com/package/@s-ui/react-atom-validation-text)

[![Issues open](https://img.shields.io/github/issues-search/SUI-Components/sui-components?query=is%3Aopen%20label%3Acomponent%20label%3AvalidationText&logo=openbugbounty&logoColor=red&label=issues%20open&color=red)](https://github.com/SUI-Components/sui-components/issues?q=is%3Aopen+label%3Acomponent+label%3AvalidationText)
[![NPM](https://img.shields.io/npm/l/%40s-ui%2Freact-atom-validation-text)](https://github.com/SUI-Components/sui-components/blob/main/components/atom/validationText/LICENSE.md)

## Installation

```sh
$ npm install @s-ui/react-atom-validation-text --save
```

## Usage

### Add text

Just add a text, set through the prop `text`.

### Types

There are defined 3 types (`success`, `error` and `alert`) available at the exported object `AtomValidationTextTypes` and that can be set through the prop `type`.

### Basic usage
```js
import AtomValidationText from '@s-ui/react-atom-validation-text'

return (<AtomValidationText text="This is the text." type="alert" />)
```


> **Find full description and more examples in the [demo page](https://sui-components.now.sh/workbench/atom/validationText).**
npm package: @s-ui/react-behavior-sticky
Description: This component helps in the implementation of sticky components
Latest version: 1.11.0

# BehaviorSticky

This component helps in the implementation of sticky components

## Installation

```sh
$ npm install @s-ui/react-behavior-sticky --save
```

## Usage

```js
import BehaviorSticky, {BehaviorStickyProvider} from '@s-ui/react-behavior-sticky'
```

### Basic usage (Fixed at top)

```js
<BehaviorStickyProvider>
  ...
  <BehaviorSticky>
    <HeaderFixed />
  </BehaviorSticky>
  ...
</BehaviorStickyProvider>
```

### Sticky state

```js
<BehaviorStickyProvider>
  ...
  <BehaviorSticky>{({isSticky}) => <HeaderFixed variant={isSticky ? 'sticky' : 'default'} />}</BehaviorSticky>
  ...
</BehaviorStickyProvider>
```

### Sticky per container

```js
<BehaviorStickyProvider>
  ...
  <div ref={container1}>
    <BehaviorSticky container={container1} defaultOffsetTop={45} animate>
      <HeaderWithButtons className={CLASS_DEMO_FIXED_BUTTONS} />
    </BehaviorSticky>
    <Content className={CLASS_DEMO_CONTENT} />
  </div>
  ...
</BehaviorStickyProvider>
```

> **Find full description and more examples in the [demo page](https://sui-components.now.sh/workbench/behavior/sticky/demo).**
npm package: @s-ui/react-breakpoint-toggle
Description: > Toogle elements. The 'breakpoint' option indicates when the item is displayed.
Latest version: 1.6.0

# BreakpointToggle

> Toogle elements. The 'breakpoint' option indicates when the item is displayed.

<!-- ![](./assets/preview.png) -->

## Installation

```sh
$ npm install @s-ui/react-breakpoint-toggle --save
```

## Usage

### Basic usage
```js
import BreakpointToggle from '@s-ui/react-breakpoint-toggle'

return (<div>
  <button>Normal button</button>
  <br />
  <BreakpointToggle breakpoint={575}>
    <button>Mobile button</button>
  </BreakpointToggle>
</div>)

```
npm package: @s-ui/react-button-share
Description: > Description
Latest version: 1.12.0

# ButtonShare

> Description

<!-- ![](./assets/preview.png) -->

## Installation

```sh
$ npm install @s-ui/react-button-share --save
```

## Usage

### Basic usage
```js
import ButtonShare from '@s-ui/react-button-share'

return (<ButtonShare />)
```


> **Find full description and more examples in the [demo page](#).**
npm package: @s-ui/react-card-arrow
Description: > Description
Latest version: 1.14.0

# CardArrow

> Description

<!-- ![](./assets/preview.png) -->

## Installation

```sh
$ npm install @s-ui/react-card-arrow --save
```

## Usage

### Basic usage
```js
import CardArrow from '@s-ui/react-card-arrow'

const link = 'https://www.lorem.com/'

const media = {
  alt: 'Lorem image',
  src: 'https://www.lorem.com/ipsum.jpg'
}

const text = {
  title: 'Lorem',
  description: 'Lorem ipsum dolor sit amet'
}

return (<CardArrow media={media} text={text} link={link}/>)
```


> **Find full description and more examples in the [demo page](#).**
npm package: @s-ui/react-card-collapsible
Description: > Description
Latest version: 1.19.0

# CardCollapsible

> Description

![](./assets/screenshot.png)

Displays an expandable/collapsible card, hiding it's content that must be passed to the card's component as its children node until the "expand" action is triggered clicking the corresponding button.

- When the card is collapsed, it displays a header image and a list of additional text info below it, which can be configured through the property `info.displayWhenCollapsed`. It also displays a button that is configured to trigger the "expand" action.

- When the card is expanded, the content will be displayed below, and the card's header will be modified to show the image in the left side, and other additional info will be displayed in the right side of the header, configurable in the property `info.displayWhenExpanded`.

## Installation

```sh
$ npm install @s-ui/react-card-collapsible --save
```

## Usage

### Basic usage
```js
import CardCollapsible from '@s-ui/react-card-collapsible'

return (<CardCollapsible />)
```


> **Find full description and more examples in the [demo page](#).**
npm package: @s-ui/react-card-image-cover
Description: SUI Card ImageCover
Latest version: 1.9.0

# CardImageCover

SUI `CardImageCover` component is a card containing a background image, an optional tag, a title and text.

## Installation

```sh
$ npm install @s-ui/react-card-image-cover --save
```

## Usage

### Basic usage

```js
import CardImageCover from '@s-ui/react-card-image-cover'

const cardData = {
  media: {
    alt: "Lorem ipsum",
    src: "https://s.ccdn.es/images/landing-seller-hero@2x.jpg"
  },
  title: "Lorem ipsum dolor sit amet",
  text: "Nulla orci mauris, ultricies hendrerit augue eu",
  url: "https://www.coches.net",
  tag: {
    url: 'http://www.coches.net/novedades/',
    text: 'News',
    type: 'novedades'
  }
}

return (<CardImageCover {...cardData} />)
```


> **Find full description and more examples in the [demo page](#).**
npm package: @s-ui/react-card-profile
Description: CardProfile serves a card with user information like avatar, name, rating bar and stats information.
Latest version: 1.10.0

# CardProfile

CardProfile serves a card with user information like avatar, name, rating bar and stats information.

## Installation

```sh
$ npm install @s-ui/react-card-profile --save
```

## Usage
The CardProfile need a few properties to be setted up:

averageScore: Is the number of ratings that you have, if you have 5 of 10 possible ratings the component will paint 5 of 10 icons filled.
maxRatingValue: Is the number of maxRatings that you can have. The bigger this number is the more number of total icons that you will have on the rating
icon: The icon to be painted as your rating icon.
iconSize: Needed to make math calcs to fill our bar
userInfo: The user information, requires a name and a profile pic.
stats: The stats array is an array of 'stats' objects. Those objects require a number, a label and a link to be painted. Are dynamic, so, if you want to paint more stats on the menu you can.

```js
import CardProfile from '@s-ui/react-card-profile'

return (<CardProfile
  averageScore={4.5}
  maxRatingValue={5}
  icon={() => <svg viewBox="0 0 16 16">
                    <path id="ic_star_small-a_1_"d="M8,12.5l-2.9,1.5l0,0c-0.5,0.3-1.1,0.1-1.4-0.4c-0.1-0.2-0.1-0.4-0.1-0.6l0.6-3.3
                      L1.8,7.4l0,0C1.4,7,1.4,6.4,1.8,6c0.2-0.2,0.4-0.3,0.6-0.3l3.3-0.5l1.5-3l0,0c0.2-0.5,0.8-0.7,1.3-0.5c0.2,0.1,0.4,0.3,0.5,0.5
                      l1.5,3l3.3,0.5l0,0c0.5,0.1,0.9,0.6,0.8,1.1c0,0.2-0.1,0.4-0.3,0.6l-2.4,2.3l0.6,3.3l0,0c0.1,0.5-0.3,1.1-0.8,1.2
                      c-0.2,0-0.4,0-0.6-0.1L8,12.5z"/>
                </svg>}
  iconSize={16}
  userInfo={{
      username: 'John Doe',
      profilePic: 'https://upload.wikimedia.org/wikipedia/en/c/c6/NeoTheMatrix.jpg'
  }}

  stats={[
  { number: 10, label: 'En venta', link: 'http://www.google.es' },
  { number: 0, label: 'Seguidores', link: 'http://www.google.es' },
  { number: 10, label: 'Valoraciones', link: 'http://www.google.es' }
  ]}
/>)
```


> **Find full description and more examples in the [demo page](#).**
npm package: @s-ui/react-cmp-banner
Description: This component shows a Banner to inform the user that the website use cookies with different purposes. From here, it could just accept it and keep using the website or open the <CmpModal> in order to know more about this and even customize the consents.
Latest version: 1.27.0

# CmpBanner

This component shows a Banner to inform the user that the website use cookies with different purposes. From here, it could just accept it and keep using the website or open the <CmpModal> in order to know more about this and even customize the consents.

The banner will be shown only if the user hasn't accepted yet the consents.

*Required* You need to have loaded the `cmp` compliant library in order to be able to use this component. Otherwise it won't be shown.

## Installation

```sh
$ npm install @s-ui/react-cmp-banner --save
```

## Usage

### Basic usage
```js
import CmpBanner from '@s-ui/react-cmp-banner'

return (
    <CmpBanner
      companyName="Your Company Name LTD"
      logo="https://www.schibsted.es/wp-content/themes/Schibsted-spn/img/logo.png"
      privacyUrl="#privacy-url-to-configure"
    />
)
```


> **Find full description and more examples in the [demo page](http://sui-components.now.sh/workbench/cmp/banner/demo).**
npm package: @s-ui/react-cmp-modal
Description: This component shows a Modal to let the user know about the consents, purposes and vendors that will use cookies in the platform to give different services. The modal connects with a `cmp` library in order to show all the data and let the user customize i
Latest version: 1.32.0

# CmpModal

This component shows a Modal to let the user know about the consents, purposes and vendors that will use cookies in the platform to give different services. The modal connects with a `cmp` library in order to show all the data and let the user customize it, when possible.

*Required* You need to have loaded the `cmp` compliant library in order to be able to use this component. Otherwise it won't be shown.

## Installation

```sh
$ npm install @s-ui/react-cmp-modal --save
```

## Usage

### Basic usage
```js
import CmpModal from '@s-ui/react-cmp-modal'

return (
  <CmpModal
    onExit={() => { alert('User accepted everything, he wants to exit')}}
    retrieveConsentsFromCmp
    logo="https://www.website.com/img/logo.png"
    privacyUrl='https://www.website.com/privacy-url'
  />
)
```


> **Find full description and more examples in the [demo page](http://sui-components.now.sh/workbench/cmp/modal/demo).**
npm package: @s-ui/react-cmp-services
Description: Components with render props that offers you different logic in order to use CMP library.
Latest version: 1.18.0

# CmpServices

Components with render props that offers you different logic in order to use CMP library.

With <CmpServices>, you could inject the services methods to your children component using a render prop.

The available methods are:
- getConsentStatus
- getPurposesAndVendors
- sendConsents

## Installation

```sh
$ npm install @s-ui/react-cmp-services --save
```

## Usage of CmpServices

### Basic usage
```js
import CmpServices from '@s-ui/react-cmp-services'

return (
  <CmpServices>
    {({getConsentStatus, getPurposesAndVendors, sendConsents}) => (
      <CmpModalContainer
        {...this.props}
        getPurposesAndVendors={getPurposesAndVendors}
        sendConsents={sendConsents}
      />
    )}
  </CmpServices>
)
```

## Usage of CmpWaitForLibrary

Sometimes, you want to wait for the cmp library to be ready in order to start using it in your project. This component wraps a children component that will be render only when the CMP library is ready to be used. You could bypass the check by using a prop `cmpReady` to tell the component that you already know that the library is ready. This is useful in case you want a component to decide by props if you want to check or not if the library is ready.

```js
import {CmpWaitForLibrary} from '@s-ui/react-cmp-services'

return (
  <CmpWaitForLibrary>
    <h1>This message will be shown when the CMP library is ready</h1>
  </CmpWaitForLibrary>
)
```

> **Find full description and more examples in the [demo page](http://sui-components.now.sh/workbench/cmp/services/demo).**
npm package: @s-ui/react-cmp-ui
Description: This component shows a Banner to inform the user that the website use cookies with different purposes. From here, it could just accept it and keep using the website or open the in order to know more about this and even customize the consents.
Latest version: 1.23.0

# CmpUi

This component shows a Banner to inform the user that the website use cookies with different purposes. From here, it could just accept it and keep using the website or open the in order to know more about this and even customize the consents.

The banner will be shown only if the user hasn't accepted yet the consents.

**Required** You need to have loaded the cmp compliant library in order to be able to use this component. Otherwise it won't be shown.

## Installation

```sh
$ npm install @s-ui/react-cmp-ui --save
```

## Usage

### Basic usage
```js
import CmpUi from '@s-ui/react-cmp-ui'

return (
  <CmpUi
    companyName="Your Company Name LTD"
    logo="https://www.schibsted.es/wp-content/themes/Schibsted-spn/img/logo.png"
    privacyUrl="#privacy-url-to-configure"
  />
)
```
npm package: @s-ui/react-collapsible-accordion
Description: > Description
Latest version: 1.17.0

# CollapsibleAccordion

> Description

<!-- ![](./assets/preview.png) -->

## Installation

```sh
$ npm install @s-ui/react-collapsible-accordion --save
```

## Usage

### Basic usage
```js
import CollapsibleAccordion from '@s-ui/react-collapsible-accordion'



const items = [
  {
    label: 'Item 1',
    content: 'Content item 1',
    collapsed: true
  },
  {
    label: 'Item 3',
    content: 'Content item 3',
    collapsed: true
  },
  {
    label: 'Item 3',
    content: 'Content item 3',
    collapsed: true
  }
]

return (<CollapsibleAccordion items={items} preserveState={true} />)
```


> **Find full description and more examples in the [demo page](#).**
npm package: @s-ui/react-collapsible-basic
Description: > Expandable/collapsable block.
Latest version: 2.15.0

### CollapsibleBasic

> Expandable/collapsable block.

<!-- ![](./assets/preview.png) -->

## Installation

```sh
$ npm install @s-ui/react-collapsible-basic --save
```

## Usage

### Basic usage
```js
import CollapsibleBasic from '@s-ui/react-collapsible-basic'

return (<CollapsibleBasic 
          hideTriggerIcon={hideTriggerIcon} 
          collapsed={collpased} 
          label={'Custom label could be a string or component'}>
        Here will be the content of this collapsible basic
        </CollapsibleBasic>)
```


> **Find full description and more examples in the [demo page](#).**
npm package: @s-ui/react-collapsible-composed
Description: Component to display a section with a title and some nodes, and keep some other nodes hidden until the icon is clicked. Then, clicking again will re-hide the items.
Latest version: 1.7.0

# CollapsibleComposed

Component to display a section with a title and some nodes, and keep some other nodes hidden until the icon is clicked. Then, clicking again will re-hide the items.

All the content can be initially displayed and it can be disposed inline. Also, callback is provided in case the container needs to perform any action.

## Installation

```sh
$ npm install @s-ui/react-collapsible-composed --save
```

## Usage

### Basic usage
```js
import CollapsibleComposed from '@s-ui/react-collapsible-composed'

const callback = (collapse) => alert('Is collapsing? ' + collapse)

const items = [
  'Item visible 1',
  'Item visible 2'
]

const hiddenItems = [
  'Item hidden 1',
  'Item hidden 2'
]

return (
    <CollapsibleComposed
      label='Title'
      items={items}
      hiddenItems={hiddenItems}
      collapsed={false}
      inline
      onToggle={callback}
    />
)
```
npm package: @s-ui/react-collapsible-readmore
Description: Collapsible read more component for truncating long content and adding an ellipsis.
Latest version: 1.7.0

# CollapsibleReadmore

> Just a simple collapsible read more component, which allows truncating the wrapped content with a height in pixels higher than the value provided in prop `maxHeight`.
It also adds an ellipsis (with customisable text and icon) at the bottom, which allows to expand/collapse the content wrapped.

<!-- ![](./assets/preview.png) -->

## Installation

```sh
$ npm install @s-ui/react-collapsible-readmore --save
```

## Usage

### Basic usage
```js
import CollapsibleReadmore from '@s-ui/react-collapsible-readmore'

return (
  const ellipsisTextsToDisplay = {
    collapsed: 'leer más', expanded: 'leer menos'
  }

  const handleClick = ({ collapsed }) => {
    console.log('Is content collapsed', collapsed)
  }

  <CollapsibleReadmore
    ellipsisText={ellipsisTextsToDisplay}
    gradient
    maxHeight={125}
    onEllipsisClick={handleClick}
  />
)
```


> **Find full description and more examples in the [demo page](https://sui-components.now.sh/workbench/collapsible/readmore).**
npm package: @s-ui/react-cover-basic
Description: It shows an image an also accepts a list of buttons and children.
Latest version: 1.20.0


### CoverBasic

It shows an image an also accepts a list of buttons and children.


### Usage
CoverBasic must have an `src` prop and might have a `height` prop too to define container height.
- If `height` prop is not provided the container height will be set via Sass var `$mah-cover-basic`.
- Use `$c-cover-basic-bgsize` Sass var to define the `cover` or `contain` background image style.
- The CoverBasic container might have a click via `handleClick` prop.
- Provide an array of buttons to be passed as childrens inside the CoverBasic container:

```javascript
const buttons = [
    {
    label: 'To be a button with icon',
    handleClick: () => { alert('To be a button with icon...') },
    icon: IconArrowLeft
  },
  {
    label: 'Or not to be',
    handleClick: () => { alert('Or not to be') }
  }
]
```

Each button might have: `label`, `icon` and `handleClick` function.
Multiple CoverBasic components might be allocated in the same page.

Please, if you find any issue report it [here](https://github.com/SUI-Components/sui-components/issues)
npm package: @s-ui/react-css-transition
Description: ## Installation
Latest version: 1.5.0

# CssTransition

## Installation

```sh
$ npm install @s-ui/react-css-transition --save
```

## Usage

### Basic usage
```js
import CssTransition from '@s-ui/react-css-transition'

return (<CssTransition />)
```


> **Find full description and more examples in the [demo page](#).**
npm package: @s-ui/react-error-app-boundary
Description: > Sample reusable React error boundary component for React 16+
Latest version: 2.7.0

# ErrorAppBoundary

> Sample reusable React error boundary component for React 16+

The simplest way to use a boundary is to wrap it around any component that may throw an error. This will handle errors thrown by that component's descendents also. This component is specially prepared to wrap your whole App in order to show a message to the user when an unexpected Error happened.

![](https://media.github.schibsted.io/user/1648/files/69aad502-996d-11e8-9eff-4f12f5f927e7)

## Installation

```sh
$ npm install @s-ui/react-error-appBoundary --save
```

### Basic usage
```js
import ErrorAppBoundary from '@s-ui/react-error-appBoundary'

return (
  <ErrorAppBoundary
    buttonLabel='OK!'
    message='Oops! An error has occurred! Nasty plasty! Sorry!'
    onError={({ errorMessage, errorStack }) => console.error({ errorMessage, errorStack })}
  >
    <main>
      <AppHeader />
      <BodyContent />
      <Footer />
    </main>
  </ErrorAppBoundary>
)
```


> **Find full description and more examples in the [demo page](#).**
npm package: @s-ui/react-form-builder
Description: > Description
Latest version: 9.3.0

# FormBuilder

> Description

<!-- ![](./assets/preview.png) -->

Documentation: https://docs.mpi-internal.com/scmspain/all--lib-form-builder-docs/

Playground: https://form-builder-workbench.surge.sh/

## Installation

```sh
$ npm install @s-ui/react-form-builder --save
```

## Usage

### Basic usage

```js
import FormBuilder from '@s-ui/react-form-builder'

return <FormBuilder />
```

> **Find full description and more examples in the [demo page](#).**

## Update Fields Value Programatically

To update a field programatically you can return an object from the async onChange callback, and the key values inside the object will trigger a change in the field.

In this example we are chaning the value of the field `color` to `yellow` allways.

```js
const onChange = fields => {
    ...
    return Promise.resolve({
        color: 'yellow'
    })
}

<FormBuilder
    ...
    onChange={onChange}
/>
```
npm package: @s-ui/react-form-captcha
Description: > FormCaptcha uses reCAPTCHA v2 with Checkbox variation
Latest version: 1.8.0

# FormCaptcha

> FormCaptcha uses reCAPTCHA v2 with Checkbox variation 

See [documentation](https://developers.google.com/recaptcha/docs/display)

## Installation

```sh
$ npm install @s-ui/react-form-captcha --save
```

## Usage

### Basic usage
```js
import FormCaptcha from '@s-ui/react-form-captcha'

return (
  <FormCaptcha
    locale="es"
    siteKey="key123456789"
    onSubmit={response => console.log(response)}
  />
)
```


> **Find full description and more examples in the [demo page](#).**
npm package: @s-ui/react-form-checkbox
Description: _**Important:**_ _The `@s-ui/react-form-checkbox` component **is not yet fully compliant with UX Design**, as it is still in WIP by UX team._ _**Please take into account the specifications defined [here](https://paper.dropbox.com/doc/SUI-Form-Elements-WIP
Latest version: 1.12.0

### FormCheckbox

_**Important:**_
_The `@s-ui/react-form-checkbox` component **is not yet fully compliant with UX Design**, as it is still in WIP by UX team._
_**Please take into account the specifications defined [here](https://paper.dropbox.com/doc/SUI-Form-Elements-WIP-dLZacE1Ye7Qxrp7n9Y0Hy)**, when iterate this first provisional component's version to make it fully compliant._

Simple checkbox form element.

You can pass a custom callback to be executed when the checkbox value is changed, through `onChange` property.

Despite it has default icons to represent the states of the checkbox, it allows their customization (for checked/unchecked states) through `svgIcons.checked` and `svgIcons.unchecked` properties.

It also supports to display an error message, if the component's property `errorMessage` is set.
npm package: @s-ui/react-form-checkboxes-with-parent
Description: Component to show a list of checkboxes with parent checkbox.
Latest version: 1.8.0

# FormCheckboxesWithParent

Component to show a list of checkboxes with parent checkbox.

## Context

- Parent will be checked when all children are.
- When a child is not checked, the parent neither.
- On check parent all children will be checked (or unchecked, depending on parent status). 


## Installation

```sh
$ npm install @s-ui/react-form-checkboxes-with-parent --save
```


## Usage

### Basic usage
```js
import FormCheckboxesWithParent from '@s-ui/react-form-checkboxes-with-parent'

return (<FormCheckboxesWithParent />)
```

### Add component styles to index.scss file:

```sass
@import '~@s-ui/react-form-checkboxes-with-parent/lib/index'
```


> **Find full description and more examples in the [demo page](http://sui-components.now.sh/workbench/form/checkboxesWithParent/demo).**
npm package: @s-ui/react-form-pta
Description: > Description
Latest version: 1.15.0

# FormPta

> Description

This component act as a wrapper to show PTA formbuilder APP into an iframe.

## Installation

```sh
$ npm install @schibstedspain/sui-form-pta --save
```

## Usage

### Basic usage
```js
import FormPta from '@schibstedspain/sui-form-pta'

return (
  <FormPta
    enableDraft={false}
    formUrl='http://url.demo'
    redirectOnErrorUrl='http://url.demo/error'
    redirectOnSuccessUrl='http://url.demo/success'
  />
)
```


> **Find full description and more examples in the [demo page](https://sui-components.now.sh/workbench/form/pta/demo).**
npm package: @s-ui/react-form-range-datepicker
Description: # @s-ui/react-form-range-datepicker > A React component that show a date range. You can select a start date and end date. When press the button, you get the date range between the dates. >  > This component use npm component: [react-datepicker](https://ww
Latest version: 1.30.0

### FormRangeDatepicker

# @s-ui/react-form-range-datepicker
> A React component that show a date range. You can select a start date and end date. When press the button, you get the date range between the dates.
> 
> This component use npm component: [react-datepicker](https://www.npmjs.com/package/react-datepicker).

## Installation

```sh
npm install @s-ui/react-form-range-datepicker --save
```


## Usage

```javascript
import FormRangeDatepicker from '@s-ui/react-form-range-datepicker'
```

```html
function handleClick (range) {
  console.log('handleClick', range)
}

function handleChangeStart (date) {
  console.log('handleChangeStart', date)
}

function handleChangeEnd (date) {
  console.log('handleChangeEnd', date)
}

<FormRangeDatepicker buttonLabel='Test' handleClickButton={handleClick} handleChangeStart={handleChangeStart} handleChangeEnd={handleChangeEnd} />
```
npm package: @s-ui/react-form-select
Description: > Wrapper around a select html element that gives a consistent look'n'feel across devices yet keeping the native functionality on being used.
Latest version: 1.11.0

# FormSelect

> Wrapper around a select html element that gives a consistent look'n'feel across devices yet keeping the native functionality on being used.

![](https://user-images.githubusercontent.com/1561955/51612938-bce53d80-1f22-11e9-95f8-75ac892a4f5e.png)

## Installation

```sh
$ npm install @s-ui/react-form-select --save
```

## Usage

### Basic usage
```js
import FormSelect from '@s-ui/react-form-select'

const OPTIONS = [
  { key: 'default', value: '', content: '--Please choose an option--' },
  { key: 'dog', value: 'dog', content: 'Dog' },
  { key: 'cat', value: 'cat', content: 'Cat' },
  { key: 'hamster', value: 'hamster', content: 'Hamster' },
  { key: 'parrot', value: 'parrot', content: 'Parrot' }
]

return (
  <FormSelect
    options={OPTIONS}
    onChange={(e, data) => console.log(data)}
  />
)
```

```sass
@import '~@s-ui/react-form-select/lib/index';
```

> **Find full description and more examples in the [demo page](#).**
npm package: @s-ui/react-form-text-input
Description: _**Important:**_ _The `@s-ui/react-form-text-input` component **is not yet fully compliant with UX Design**, as it is still in WIP by UX team._ _**Please take into account the specifications defined [here](https://paper.dropbox.com/doc/SUI-Form-Elements-W
Latest version: 1.14.0

### FormTextInput

_**Important:**_
_The `@s-ui/react-form-text-input` component **is not yet fully compliant with UX Design**, as it is still in WIP by UX team._
_**Please take into account the specifications defined [here](https://paper.dropbox.com/doc/SUI-Form-Elements-WIP-dLZacE1Ye7Qxrp7n9Y0Hy)**, when iterate this first provisional component's version to make it fully compliant._

Basic text-input form element.

You can pass a custom callback to be executed when the text-input value is changed, through ```onChange``` property.

It also supports to display an error message, if the component's property ```errorMessage``` is set.
npm package: @s-ui/react-form-textarea
Description: _**Important:**_ _The `@s-ui/react-form-textarea` component **is not yet fully compliant with UX Design**, as it is still in WIP by UX team._ _**Please take into account the specifications defined [here](https://paper.dropbox.com/doc/SUI-Form-Elements-WIP
Latest version: 1.12.0

### FormTextarea

_**Important:**_
_The `@s-ui/react-form-textarea` component **is not yet fully compliant with UX Design**, as it is still in WIP by UX team._
_**Please take into account the specifications defined [here](https://paper.dropbox.com/doc/SUI-Form-Elements-WIP-dLZacE1Ye7Qxrp7n9Y0Hy)**, when iterate this first provisional component's version to make it fully compliant._

Basic text-area form element.

A placeholder to specify a short hint of the expected value of the text area (which will be displayed only when the text-area is empty) can be passed in `placeholder` property.

The default height and width of the text area can be defined whether with `cols` and `rows` property, or with a custom CSS class name.

The spellcheck of the inner text of the text area can be disabled (HTML5).

You can pass a custom callback to be executed when the text area value is changed, through `onChange` property.
npm package: @s-ui/react-gigya-global-events
Description: > Description
Latest version: 1.7.0

# GigyaGlobalEvents

> Description

<!-- ![](./assets/preview.png) -->

This component acts as a middleware between Gigya event handler and our components or use cases.
The main reason is because Gigya has no way to clear the registered listeners, this leads to errors when our SPA mounts a component multiple times.

This solution allow us to register as many listeners as we want, and provide us with the ability to unregister on change props or when the component is unmounted.

## Installation

```sh
$ npm install @s-ui/react-gigya-global-events --save
```

## Usage

### Basic usage
```js
import GigyaGlobalEvents from '@s-ui/react-gigya-global-events'

return (<GigyaGlobalEvents onLogin={event => console.log('This will be executed onLogin')} onLogout={event => console.log('This will be executed onLogout')} />)
```

To see the full list of global events check [Gigya Documentation](https://developers.gigya.com/display/GD/accounts.addEventHandlers+JS)

> **Find full description and more examples in the [demo page](https://sui-components.now.sh/workbench/gigya/globalEvents).**
npm package: @s-ui/react-gigya-loader
Description: > Description
Latest version: 1.7.0

# GigyaLoader

> Description

Ensures Gigya SDK is loaded before allowing to render the child content

<!-- ![](./assets/preview.png) -->

## Installation

```sh
$ npm install @s-ui/react-gigya-loader --save
```

## Usage

### Basic usage
```js
import GigyaLoader from '@s-ui/react-gigya-loader'

return (
  <GigyaLoader render={() => 'You can use Gigya SDK now!'} />
)
```


> **Find full description and more examples in the [demo page](#).**
npm package: @s-ui/react-gigya-screenset
Description: > Description
Latest version: 1.5.0

# GigyaScreenset

> Description

<!-- ![](./assets/preview.png) -->

Injects a Gigya Screenset (Widget) into a container

## Installation

```sh
$ npm install @s-ui/react-gigya-screenset --save
```

## Usage

### Basic usage
```js
import GigyaScreenset from '@s-ui/react-gigya-screenset'

const screenSetOptions = {
  lang: 'es',
  deviceType: 'auto',
  screenSet: 'Default-RegistrationLogin',
  startScreen: 'Default-Login',
  containerID: 'gigya-login',
  onError: console.log,
  onAfterSubmit: console.log
}

return (<GigyaScreenset screenSetOptions={screenSetOptions} />)
```

To see the definition of `screenSetOptions` check [Gigya documentation](https://developers.gigya.com/display/GD/accounts.showScreenSet+JS)

> **Find full description and more examples in the [demo page](https://sui-components.now.sh/workbench/gigya/screenset).**
npm package: @s-ui/react-google-one-tap-loader
Description: > Description
Latest version: 1.2.0

# GoogleOneTapLoader

> Description

Ensures Google One Tap script is loaded before allowing to render the child content

## Installation

```sh
$ npm install @s-ui/sui-google-one-tap-loader
```

## Usage

### Basic usage
```js
import GoogleOneTapLoader from '@s-ui/sui-google-one-tap-loader'

return (<GoogleOneTapLoader render={() => 'You can use Google Accounts now!'}/>)
```


> **Find full description and more examples in the [demo page](#).**
npm package: @s-ui/react-head
Description: > Populate the head element of your React app without hassle.
Latest version: 1.14.0

# @s-ui/react-head

> Populate the head element of your React app without hassle.

Features:

- Change the `<head>` content by using React components.
- Add attributes to `<body>` and `<html>` tags.

## Installation

```sh
$ npm install @s-ui/react-head
```

## How to use

### Usage

Using `<Head>` component will allow you to define the tags inside the `<head>` element. You could use two different ways: using the `children` of the component with the desired tags or using the props.

```js
import Head, { HeadProvider } from '@s-ui/react-head'

const App = () => (
  <HeadProvider>
    <section className="Home">
      { /* Using tags directly */ }
      <Head>
        <title>Title of page</title>
        <link rel="canonical" content="http://jeremygayed.com/" />
        <meta name="example" content="whatever" />
      </Head>

      { /* Using props */ }
      <Head
        bodyAttributes={{ class: 'search full-Width' }}
        htmlAttributes={{ lang: 'es-ES' }}
        link={[{ rel: 'canonical', href:'https://canonical.com' }]}
        meta={[{ name: 'description', content: 'The description' }]}
        title="Title of page"
        />
    </section>
  </HeadProvider>
)
```

**Important ⚠️**: You can't mix both of them in order to define `link`, `meta` and `title` tags. The children will have precedence and overwrite if you try to combine both. However, you could still use `htmlAttributes` and `bodyAttributes` with the `children` approach.

### Server Side Setup

```js
import {HeadProvider} from '@s-ui/react-head'
import {renderHeadTagsToString} from '@s-ui/react-head/lib/server'
import {renderToString} from 'react-dom/server'
// headTags will be mutated, so you need to create a new variable
// for each request to avoid collisions
const headTags = []
const app = renderToString(
  <HeadProvider headTags={headTags}>
    <App />
  </HeadProvider>
)
// use headTags to get the content of `<head>`
// and string attributes for `<body>` and `<html>`
const {
  bodyAttributes,
  headString,
  htmlAttributes,
} = renderHeadTagsToString(headTags)

res.send(`
  <!doctype html>
    <html ${htmlAttributes}>
    <head>${headContent}</head>
    <body ${bodyAttributes}>
      <div id="root">${app}</div>
    </body>
  </html>
`)
```
npm package: @s-ui/react-header-actions
Description: ## Installation
Latest version: 1.7.0

# HeaderActions

## Installation

```sh
> npm install @s-ui/react-header-actions --save
```

## Usage

### Basic usage

```js
import HeaderActions from '@s-ui/react-header-actions'

return <HeaderActions
  buttonLabel='Accept'
  title='Actions header'
  icon={icon}
  onIconClick={() => alert('icon clicked')}
  onButtonClick={() => alert('button clicked')}
/>
```
npm package: @s-ui/react-header-focus
Description: > Simple header with nothing else than a centered logo
Latest version: 1.6.0

# HeaderFocus

> Simple header with nothing else than a centered logo

## Installation

```sh
$ npm install @s-ui/react-header-focus --save
```

## Usage

### Basic usage
```js
import HeaderFocus from '@s-ui/react-header-focus'
const SVGElement = <svg ... />
return (<HeaderFocus logo={SVGElement} />)
```
npm package: @s-ui/react-hook-use-portal
Description: > Provide a first-class way to render children into a DOM node that exists outside the DOM hierarchy of the parent component. ([doc](https://reactjs.org/docs/portals.html))
Latest version: 1.3.0

# usePortal

> Provide a first-class way to render children into a DOM node that exists outside the DOM hierarchy of the parent component. ([doc](https://reactjs.org/docs/portals.html))

## Installation

```sh
$ npm install @s-ui/react-hook-use-portal
```

## Usage

### Basic usage

```js
// Array destructuring
const Foo = props => {
  const [Portal] = usePortal()
  return (
    <>
      This content is rendered on the propper VDOM tree.
      <Portal>This content added at the end of the document.body</Portal>
    </>
  )
}
```

```js
// Object destructuring
const Foo = props => {
  const {Portal} = usePortal()
  return (
    <>
      This content is rendered on the propper VDOM tree.
      <Portal>This content added at the end of the document.body</Portal>
    </>
  )
}
```

### Target Configuration

Target is the DOM place where the Portal might the appended. By default it is document.body. To set a different element, just add it to the hook configuration option arguments object:

```js
const Foo = props => {
  const portalContainer = useRef()
  const {Portal} = usePortal({target: portalContainer.current})
  return (
    <>
      <div>
        This content is rendered on the propper VDOM tree.
        <Portal>
          This content added at the end of the portalContainer element
        </Portal>
      </div>
      <div ref={portalContainer} /> {/** <-- this is the container where the portal children will be rendered **/}
    </>
  )
}
```

### Open and Close

Portals can be opened and closed.

```js
// Statefull (uncontrolled)
const Foo = props => {
  const {Portal, open, close, isOpen} = usePortal()
  return (
    <>
      {!isOpen && <button onClick={open}>open</button>}
      <Portal>
        This is added at the end of the document.body
        <button onClick={close}>close</button>
      </Portal>
    </>
  )
}
```

```js
// Stateless (controlled)
const Foo = props => {
  const [isOpen, setIsOpen] = useState(true)
  const {Portal} = usePortal()
  return (
    <>
      {!isOpen && <button onClick={() => setIsOpen(true)}>open</button>}
      <Portal isOpen={isOpen}>
        This is added at the end of the document.body
        <button onClick={() => setIsOpen(false)}>close</button>
      </Portal>
    </>
  )
}
```