open-index/open-npm huggingface dataset:
npm package: @schibsted/serverless-slack-deploy-notification
Description: Serverless plugin that sends a slack message on deployment start and finish
Latest version: 0.4.1

# Serverless Slack deploy notification

A Serverless plugin that sends a slack message on deployment start and finish

![github checks](https://badgen.net/github/checks/schibsted/serverless-slack-deploy-notification)
![current version @ npm](https://badgen.net/npm/v/@schibsted/serverless-slack-deploy-notification)
![weekly downloads @ npm](https://badgen.net/npm/dw/@schibsted/serverless-slack-deploy-notification)
![minified size](https://badgen.net//bundlephobia/min/@schibsted/serverless-slack-deploy-notification)

## Demo

When deployment starts plugin posts a message like this:
![Deployment in progress](./assets/deployInProgress.png)

When deployment finishes successfully plugin updates the first message into:
![Deployment finished successfully](./assets/deployFinished.png)

**Sadly there's no way to detect a deployment error and send a notification then.
In that case you get stuck on the 'deployment in progress' notification**

Additionally, when the deploy finishes, plugin posts app details into a thread of the notification e.g.
![Deployed app details](./assets/deployedAppDetails.png)

## Installation

`npm install @schibsted/serverless-slack-deploy-notification --save-dev`

## Options

### Required

- `token` - Slack API token with at least `chat.write` scope
- `channel` - Channel ID (not channel name)

### Optional

- `enabled` - Turn notifications off for specific stages
- `logo` - make the notification easier to notice by putting app logo on the side of the message
- `travisUrl` - URL to your builds in Travis
- `githubUrl` - URL to your Github repository
- `appUrl` - URL where the application you're deploying will be accessible

See the sample usage below.

## Usage

```yaml
service: your-service
provider:
  name: aws
  runtime: nodejs12.x

custom:
  slackDeployNotification:
    enabled:
      staging: false
    token: %SLACK_WEB_API_TOKEN
    channel: %SLACK_CHANNEL_ID
    logo: https://cdn.pixabay.com/photo/2015/12/11/11/43/google-1088004_1280.png
    travisUrl: https://travis.schibsted.io/foo/bar
    githubUrl: https://github.schibsted.io/foo/bar
    appUrl: https://google.com

plugins:
  - "@schibsted/serverless-slack-deploy-notification"

functions:
  foo:
    handler: foo.handler
```

## Contributing

Everyone is very welcome to contribute to this repository. Feel free to [raise issues](https://github.com/schibsted/serverless-slack-deploy-notification/issues) or to [submit Pull Requests](https://github.com/schibsted/serverless-slack-deploy-notification/pulls).
npm package: @schibstedpl/circuit-breaker-js
Description: Hystrix-like circuit breaker for JavaScript.
Author: Yammer Inc.
Latest version: 0.0.2

# CircuitBreaker [![Build Status](https://travis-ci.org/yammer/circuit-breaker-js.png)](https://travis-ci.org/yammer/circuit-breaker-js)

[Hystrix](https://github.com/Netflix/Hystrix)-like circuit breaker for JavaScript.

This fork removes the usage of setInterval() from the code completely, preventing hangs when use in Node.js contexts.

## Usage

```js
var breaker = new CircuitBreaker();

var command = function(success, failed) {
  restCall()
    .done(success)
    .fail(failed);
};

var fallback = function() {
  alert("Service is down");
};

breaker.run(command, fallback);
```


## API


### CircuitBreaker([config])

Create a new instance of a circuit breaker. Accepts the following config options:

#### windowDuration

Duration of statistical rolling window in milliseconds. This is how long metrics are kept for the circuit breaker to use and for publishing.

The window is broken into buckets and "roll" by those increments.

*Default Value:* 10000

#### numBuckets

Number of buckets the rolling statistical window is broken into.

*Default Value:* 10

#### timeoutDuration

Time in milliseconds after which a command will timeout.

*Default Value:* 3000

#### errorThreshold

Error percentage at which the circuit should trip open and start short-circuiting requests to fallback logic.

*Default Value:* 50

#### volumeThreshold

Minimum number of requests in rolling window needed before tripping the circuit will occur.

For example, if the value is 20, then if only 19 requests are received in the rolling window (say 10 seconds) the circuit will not trip open even if all 19 failed.

*Default Value:* 5

#### onCircuitOpen(metrics)

Function that is run whenever the circuit is opened (i.e. the threshold is reached). Receives the metrics for the current window as an argument.

*Default Value:* no-op

#### onCircuitClose(metrics)

Function that is run whenever the circuit is closed (i.e. the service is back up). Receives the metrics for the current window as an argument.

*Default Value:* no-op


### run(command, [fallback])

Runs a command if circuit is closed, otherwise defaults to a fallback if provided. The command is called with success and failure handlers which you need to call at the appropriate point in your command. For example, if an ajax request succeeds the the success function should be called to notify the breaker. If neither success or failed are called then the command it's assumed the command timed out.

### isOpen

Checks whether the breaker is currently accepting requests.

### forceOpen

Forces the circuit to open.

Metrics will not be collected while the circuit is forced.

### forceClose

Forces the circuit to close.

Metrics will not be collected while the circuit is forced.

### unforce

Returns the circuit to its last unforced state.


## Contributing

Install the dependencies

```sh
npm install
```

Run the tests with:

```sh
grunt test
```

or

```sh
grunt test:browser
```
npm package: @schibstedsmb/eslint-config-schibstedsmb
Description: 1. Run `npx install-peerdeps --dev @schibstedsmb/eslint-config-schibstedsmb` 2. Install ESLint plugin for VSCode 3. Add these options to your VSCode settings:
Latest version: 0.2.0

1. Run `npx install-peerdeps --dev @schibstedsmb/eslint-config-schibstedsmb`
2. Install ESLint plugin for VSCode
3. Add these options to your VSCode settings:

   ```json
   // This one is deprecated
   "eslint.autoFixOnSave": true,
   // Use this next one instead
   "editor.codeActionsOnSave": {
     "source.fixAll.eslint": true
   },
   "[javascript]": {
     "editor.formatOnSave": false,
   },
   "[javascriptreact]": {
     "editor.formatOnSave": false
   },
   "[typescript]": {
     "editor.formatOnSave": false,
   },
   "prettier.disableLanguages": ["js", "ts"],
   ```

4. Add `.eslintrc` to your project. ESLint has made it next to impossible to use shared configs/plugins globally, so sadly forced to using them locally. Put this in the file:

   ```json
   {
     "extends": ["@schibstedsmb/eslint-config-schibstedsmb"],
     "rules": {
       // Put your overrides here
     }
   }
   ```

5. Add a `tsconfig.json` file to your project and add your settings. Here is our standard settings:

   ```json
   {
     "compilerOptions": {
       "target": "esnext",
       "lib": ["dom", "es2017"],
       "allowJs": true,
       "skipLibCheck": true,
       "esModuleInterop": true,
       "allowSyntheticDefaultImports": true,
       "strict": true,
       "forceConsistentCasingInFileNames": true,
       "module": "esnext",
       "moduleResolution": "node",
       "resolveJsonModule": true,
       "isolatedModules": true,
       "noEmit": true,
       "jsx": "preserve",
       "sourceMap": true,
       "preserveConstEnums": true,
       "removeComments": false,
       "baseUrl": ".",
       "paths": {
         "~/*": ["./*"]
       }
     },
     "exclude": ["node_modules"],
     "include": []
   }
   ```
npm package: @schibstedspain/cv-decorators
Description: List of ES6 decorators
Author: Carlos Villuendas
Latest version: 1.4.2

# cv-decorators
List of ES6 decorators

## Streamify

Creates a stream of calls to any method of a class. *Dependency of RxJS*

```javascript
import {streamify} from 'cv-decorators';

@streamify('greeting', 'greetingAsync')
class Person {
    greeting(name){
        return `Hi ${name}`;
    }

    greetingAsync(name){
        return new Promise( resolve => setTimeout(resolve, 100, `Hi ${name}`) );
    }
}

const person = new Person();

person.$.greeting.subscribe(({params, result}) => {
    console.log(`method was called with ${params} and response was "${result}"`); // => method was called with ['Carlos'] and response was "Hi Carlos"
});

person.$.greetingAsync.subscribe(({params, result}) => {
    console.log(`method was called with ${params} and response was "${result}"`); // => method was called with ['Carlos'] and response was "Hi Carlos"
});

person.greeting('Carlos');
person.greetingAsync('Carlos');
```
## Cache

Creates a cache of calls to any method of a class.

```javascript
import {cache} from 'cv-decorators';

class Dummy {
  @cache()
  syncRndNumber (num) { return Math.random() }
}
const dummy = new Dummy()

const firstCall = dummy.syncRndNumber()
const secondCall = dummy.syncRndNumber()

// => firstCall === secondCall
```
Dump cache to console if setting to truthy '__dumpCache__' key in localStorage:

```javascript
localStorage.__dumpCache__ = true
```

By default the TTL for the keys in the cache is 500ms, but it can be changed with

```javascript
import {cache} from 'cv-decorators';

class Dummy {
  @cache({ttl: 2000})
  syncRndNumber (num) { return Math.random() }
}
```

For this method the cache is 2 seconds

It is possible to set TTL using a string with the format `ttl: 'XXX [second|seconds|minute|minutes|hour|hours]'`, 
thus, avoiding writing very large integers
[Example](https://github.com/carlosvillu/cv-decorators/blob/feature/string-for-time/test/cacheSpec.js#L163)

### Options:

* ttl (500ms): Time to life for each cache register

* server (false): If the cache will be used in a NodeJS env. Be careful that could break your server

* algorithm ('lru'): Which algorithm will be used to discard register in the cache when will be full. Can be lru | lfu

* trackTo: Is you pass a host, each 20secds will be send a ping to `${trackTo}/__tracking/cache/event/stats` with a header `x-payload` where there is a object with the stats of hit, miss, env and algorithm

* size (100): How many register can be in the cache before start to remove register.
npm package: @schibstedspain/form-checkboxes-with-parent
Description: Component to show a list of checkboxes with parent checkbox.
Latest version: 1.3.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 @schibstedspain/form-checkboxes-with-parent --save
```


## Usage

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

return (<FormCheckboxesWithParent />)
```

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

```sass
@import '~@schibstedspain/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: @schibstedspain/mt-tracking-tags
Description: Motor Tracking Tags
Latest version: 3.1.0

# Motor Tracking Tags

## Upload

Run the command `npm run upload` after a merge/push into master.

## Usage

Just put an `script` tag at the end of the `body` of the Motor web page pointing to the following URL: `http://s.ccdn.es/js/tags.coches.min.js`.
npm package: @schibstedspain/nc-strings
Description: Set of New Construction JS string utilities (text formatters).
Latest version: 3.1.0

# nc-strings

> Set of useful js utilities for NC components.

## Installation

```sh
$ npm install @schibstedspain/nc-strings --save
```

## Usage

### string
A bunch of string utilities to format literals.

```js
import { getMinPriceLiteral, getPriceRangeLiteral, getSizeRangeLiteral, getSurfaceRangeLiteral,
  getTotalUnitsLiteral, getNumberOfRoomsRangeLiteral, getNumberOfRoomsLiteral, getAdvertiserPhone,
  getProjectExtras, getDeliveryDateLiteral } from '@schibstedspain/nc-strings'

const { i18n } = this.context // Retrieve your i18n instance from component's context.

console.log(getMinPriceLiteral({ i18n, 5000 }))
// Desde 5.000 E

console.log(getSizeRangeLiteral({ i18n, minSize: 50, maxSize: 100 }))
// Desde 50 - 100 m2

console.log(getTotalUnitsLiteral({ i18n, totalUnits: 3 }))
// 3 habitaciones

console.log(getPriceRangeLiteral({ i18n, { minPrice: 100000, maxPrice: 360000 } }))
// 100.000 E a 360.000 E

console.log(getSurfaceRangeLiteral({ i18n, surfaceRange: { minSurface: 50, maxSurface: 100 } }))
// De 50 m2 a 100 m2

console.log(getNumberOfRoomsRangeLiteral({ i18n, numberOfRoomsRange: { minRooms: 1, maxRooms: 7 } }))
// De 1 - 7 habitaciones

console.log(getNumberOfRoomsLiteral({ i18n, bedrooms: 1 }))
// 1 habitacion

console.log(getAdvertiserPhone('999888777'))
// 999 888 777

console.log(getProjectExtras({ i18n, [{ id: 1}, { id: 3 }, { id: 26 }, { id: 84 }]}))
// [{ label: 'Aire acondicionado' }, { label: 'Calefaccion' }, { label: 'Parking comunitario' }, { label: 'Puerta blindada' }]

/* (assuming that now is "Jan 1st 2018") */
console.log(getDeliveryDateLiteral({ i18n, deliveryDate: '2018-09-01T00:00:00'}))
// Listo en 8 meses

```
npm package: @schibstedspain/react-ab-testing-optimizely-x
Description: <AbTestOptimizelyXExperiment experimentId />
Author: David Almeida
Latest version: 1.4.0
Deprecated: @schibstedspain/react-ab-testing-optimizely-x is deprecated. Use @s-ui/abtesting-optimizely-x instead.

# react-ab-testing-optimizely-x

![deprecated](https://img.shields.io/badge/stability-deprecated-red.svg) THIS PACKAGE IS **DEPRECATED!**

**Use [@s-ui/abtesting-optimizely-x](https://www.npmjs.com/package/@s-ui/abtesting-optimizely-x) instead.**
npm package: @schibstedspain/react-ab-testing-toggle
Description: ![deprecated](https://img.shields.io/badge/stability-deprecated-red.svg) THIS PACKAGE IS **DEPRECATED!**
Latest version: 1.4.0
Deprecated: @schibstedspain/react-ab-testing-toggle is deprecated. Use @s-ui/abtesting-toggle instead.

# react-ab-testing-toggle

![deprecated](https://img.shields.io/badge/stability-deprecated-red.svg) THIS PACKAGE IS **DEPRECATED!**

**Use [@s-ui/abtesting-toggle](https://www.npmjs.com/package/@s-ui/abtesting-toggle) instead.**
npm package: @schibstedspain/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.23.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: @schibstedspain/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.28.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: @schibstedspain/react-cmp-services
Description: Components with render props that offers you different logic in order to use CMP library.
Latest version: 1.16.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 @schibstedspain/react-cmp-services --save
```

## Usage of CmpServices

### Basic usage
```js
import CmpServices from '@schibstedspain/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: @schibstedspain/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.18.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 @schibstedspain/react-cmp-ui --save
```

## Usage

### Basic usage
```js
import CmpUi from '@schibstedspain/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: @schibstedspain/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.6.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 @schibstedspain/react-form-select --save
```

## Usage

### Basic usage
```js
import FormSelect from '@schibstedspain/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 '~@schibstedspain/react-form-select/lib/index';
```

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

# GigyaLoader

> Description

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

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

## Installation

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

## Usage

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

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


> **Find full description and more examples in the [demo page](#).**
npm package: @schibstedspain/react-perf-dynamic-rendering
Description: This component improves performance using [dynamic rendering technique](https://developers.google.com/search/docs/guides/dynamic-rendering) at Component level.
Latest version: 1.11.0

# PerfDynamicRendering

This component improves performance using [dynamic rendering technique](https://developers.google.com/search/docs/guides/dynamic-rendering) at Component level.

It uses the `userAgent` prop to detect if the user is a bot or not.

*If you're a bot*, no matter if you're on the server side or the browser side, the wrapped content will be always rendered.

*If you're an user*:
  - On the server side, nothing is rendered.
  - On the client side, the content will be rendered when it is about to interesect the viewport.

You could completely disable the behaviour of the component using the prop `disabled` and thus it will render nothing until it is enabled. This could be useful to enable the component on the browser side when the user performs an action, like a click.

## Installation

```sh
$ npm install @schibstedspain/react-perf-dynamic-rendering --save
```

## Usage

### Basic usage
```js
import PerfDynamicRendering from '@schibstedspain/react-perf-dynamic-rendering'

return (
  <>
    <PerfDynamicRendering userAgent={navigator.userAgent}>
      <img src='https://huge-image.com/panda.jpg'/>
    </PerfDynamicRendering>

    <PerfDynamicRendering disabled={true} userAgent={navigator.userAgent}>
      <img src='https://huge-image.com/panda_02.jpg'/>
    </PerfDynamicRendering>

    <PerfDynamicRendering height={50} userAgent={navigator.userAgent}>
      <img src='https://huge-image.com/panda_02.jpg'/>
    </PerfDynamicRendering>

    <PerfDynamicRendering height={50} userAgent={navigator.userAgent} forceRender={true}>
      <p>This Image will be render in client and server even when the image it is outside of the viewport</p>
      <p>Or in the server even when is a regular user agent</p>
      <p>The practical effect of this, is make this component 100% transparent</p>
      <img src='https://huge-image.com/panda_02.jpg'/>
    </PerfDynamicRendering>

  </>
)
```

### Props

Common props you may want to specify include:

* `disabled` - Flag that determines if you want disable the Intersection Observer lazy load strategy. And use a controller lazy strategy ONLY in client side.
* `forceRender` - avoid any check and render always.
* `height` - Number that determines the height of the component that we're waiting in pixels.
* `userAgent` - String with the userAgent that will be used to check if is bot or normal user.
* `placeholder` - A component or html element that is used as a placeholder
* `rootMargin` - String in the format of the css margin property. the values serves to grow or shrink each side of the root element's bounding box before computing intersections.
* `botsUserAgents` - An Array of strings that is used to set the lists of userAgents for which the element is always rendered

> **Find full description and more examples in the [demo page](#).**
npm package: @schibstedspain/sui
Description: Monorepo for SUI (Schibsted User Interface) packages.
Author: David Almeida
Latest version: 0.1.0

# SUI (Schibsted User Interface)

Monorepo of SUI packages.

SUI is a set of packages which goal to ease development of sui based components and web packs, providing:
* Unified stack (and workflow) easily updateable accross all sui based projects.
* Minification of boilerplate. Boilerplate is tedious and copied code. Hardest to update...
* Differents tools and services that solve only one problem each.
* Transparency for developer (changes and improvements have no impact on DX)
* Facilitates tooling development as asumptions can be made on the stack of each package.

## Requirements

### Add `./node_modules/.bin/` to your $PATH
Many SUI packages provide a CLI as a service. The binaries are declared in the package.json `bin` key.

To make all npm binaries available in your command line, you should add bin directory to your $PATH:

```sh
$ export PATH="$PATH:./node_modules/.bin"
```

## Available packages
| Name | Description | Status |
| -- | -- | -- |
| [babel-preset-sui](./packages/babel-preset-sui/README.md) | Develop, maintain and publish your SUI components | :white_check_mark: |
| [sui-lint](./packages/sui-lint/Readme.md) | CLI to lint your code and make it compliant | :white_check_mark: |
| [sui-precommit](./packages/sui-precommit/Readme.md) | Effortless SUI precommit rules integration in your project | :white_check_mark: |
| [sui-component-dependencies](./packages/sui-component-dependencies/README.md) | A set of dependencies of all SUI components | :white_check_mark: |
| [sui-cz](./packages/sui-cz/README.md) | A commitizen adapter for semantic commits | :white_check_mark: |
| [sui-mono](./packages/sui-mono/README.md) | Simple CLI for monorepo/multipackage | :white_check_mark: |
| [sui-studio](./packages/sui-studio/README.md) | Develop, maintain and publish your SUI components | :white_check_mark: |
| [sui-bundler](./packages/sui-bundler/README.md) | Config-free bundler for ES6 React apps | :white_check_mark: |
| [sui-i18n](./packages/sui-i18n/README.md) | Isomorphic i18n service for browser and node | :hourglass: |
| [sui-react-domain-connector](./packages/sui-react-domain-connector/README.md) | Connect any React component to your domain use cases | :hourglass: |
| [sui-ssr](./packages/sui-ssr/README.md) | Plug SSR to you SUI SPA | :hourglass: |
| [sui-decorators](./packages/sui-decorators/README.md) | Develop, maintain and publish your SUI components | :hourglass: |
| [sui-polyfills](./packages/sui-polyfills/README.md) | Polyfills to load on our projects | :hourglass: |
npm package: @schibstedspain/sui-ad-blocker-extension-detector
Description: > This component has only the logic of show content (i.e banner or message) through children when user has adblock. If you are using adblock just right now you should see a placeholder sentence like: <<"If you see this message you are using adblock extens
Latest version: 1.3.0

# AdExtensionAdBlockDetector

> This component has only the logic of show content (i.e banner or message) through children when user has adblock. If you are using adblock just right now you should see a placeholder sentence like: <<"If you see this message you are using adblock extension">> in [demo page](/workbench/ad/blockerExtensionDetector/demo). But if you are not using adblock or this extension is not enabled for this page, you won't see anything and this component won't render any kind of HTML layer, like div.

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

## Installation

```sh
$ npm install @schibstedspain/sui-ad-blocker-extension-detector --save
```

## Usage
This component will receive by children the content that have to show when adblock extension is enabled in browser. For example could be a banner message. But at the same time maybe business dept could be interested in show a diferent page when adblock is enabled instead a banner.

## How it works technically?
This component render twice. The first time is for get the offsetHeight of div with class adsbox.
```html
<div class="adsbox">nbsp;</div> 
```
This class is the key because if offseight is equal to 0 is when adblock is enabled. Then we set the state through this condition, this causes a second rendering that will show our children content or anything depending if adblock is enabled.

### Basic usage

#### Display a simple message:
```js
import AdBlockerExtensionDetector from '@schibstedspain/sui-ad-blocker-extension-detector'

return (<AdBlockerExtensionDetector> 
          <p>Simple message</p>
        </AdBlockerExtensionDetector>)
```

#### Display your custom component:
```js
import AdBlockerExtensionDetector from '@schibstedspain/sui-ad-blocker-extension-detector'

return (<AdBlockerExtensionDetector> 
          <CustomComponent/>
        </AdBlockerExtensionDetector>)
```

> **Find full description and more examples in the [demo page](/workbench/ad/blockerExtensionDetector/demo).**
npm package: @schibstedspain/sui-atom-badge
Description: > Atom Element: SUI badge
Latest version: 1.7.0
Deprecated: Use @s-ui/react-atom-badge instead

# AtomBadge

> Atom Element: SUI badge

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

## Installation

```sh
npm install @schibstedspain/sui-atom-badge --save
```

## Usage

```js
import Badge, { atomBadgeTypes, atomBadgeSizes } from '@schibstedspain/sui-atom-badge'

render {
  return (
    <Badge
      size={atomBadgeSizes.SMALL}
      type={atomBadgeTypes.SUCCESS}
      label='Hello SUI-Badge!'
    />
  )
}

```

**Find full description and more examples in the [demo page](https://sui-components.now.sh/workbench/atom/badge).**
npm package: @schibstedspain/sui-atom-badge-counter
Description: > Atom Element: SUI badgeCounter
Latest version: 1.2.0

# AtomBadgeCounter

> Atom Element: SUI badgeCounter

## Installation

```sh
npm install @schibstedspain/sui-atom-badge-counter --save
```

## Usage

```js
import BadgeCounter from '@schibstedspain/sui-atom-badge-counter'

render {
  return (
    <BadgeCounter />
  )
}

```

**Find full description and more examples in the [demo page](#).**
npm package: @schibstedspain/sui-atom-button
Description: Atom Element: SUI button
Latest version: 1.35.0
Deprecated: Use @s-ui/react-atom-button instead

# Button

> Atom Element: SUI button

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

## Installation

```sh
$ npm install @schibstedspain/sui-atom-button --save
```

## Usage

### Basic usage

```js
import Button from '@schibstedspain/sui-atom-button'

return (<div>
  <Button>Normal</Button>
  <Button focused>Focused</Button>
  <Button size='large' disabled>Disabled</Button>
</div>)

```

### Flexible props

All props available from regular buttons can be used.

```js
import Button from '@schibstedspain/sui-atom-button'

return (<div>
  <Button onClick={() => alert('Primary with onClick')}>
    Primary with onClick
  </Button>
  <Button type='accent' title="Title: Lorem Ipsum">
    Accent with title
  </Button>
  <Button type='secondary' className='customClass'>
    Secondary with className
  </Button>
</div>)
```

### Button with AtomIcon

You could use the `AtomButton` along the `AtomIcon` in order to show the button text with an icon. The proper `size` and `color` of the `AtomIcon` will be used according to the needs of the `AtomButton` definition.

```js
import Button from '@schibstedspain/sui-atom-button'
import AtomIcon from '@s-ui/react-atom-icon'

const Icon = <AtomIcon>
  <svg viewBox="0 0 24 24">
    <path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z" />
  </svg>
</AtomIcon>

return (<div>
  <Button leftIcon={Icon} />
  <Button size="large" rightIcon={Icon} >
    Large icon
  </Button>
  <Button size="small" rightIcon={Icon} >
    Small icon
  </Button>
</div>)
```

### Button inside Form

By default `AtomButton` inside a `form` will submit the form

```js
import Button from '@schibstedspain/sui-atom-button'

return (
  <form onSubmit={() => window.alert('Submit!')}>
    <div>
      <input type="text" placeholder="Put your name" />
    </div>
    <div>
      <Button>Submit</Button>
    </div>
  </form>
)
```

If we need several `AtomButton` inside a form we can specify which one we want to submit the form w/ props `isButton` and `isSubmit`

```js
import Button from '@schibstedspain/sui-atom-button'

return (
  <form onSubmit={() => window.alert('Submit!')}>
    <div>
      <input type="text" placeholder="Put your name" />
    </div>
    <div>
      <Button isButton onClick={() => window.alert('Click!')}>Click Me!</Button>
      <Button isButton onClick={() => window.alert('Click!')}>Click Me!</Button>
    </div>
    <div>
      <Button isSubmit>Submit</Button>
    </div>
  </form>
)
```

### Rendering a link
When `link` property is passed, the component will render an html link.

```js
import Button from '@schibstedspain/sui-atom-button'

return (
  <Button link href='http://www.schibsted.com/' target='_blank'>Link</Button>
)

```

output:

```html
<a class="sui-AtomButton sui-AtomButton--link" href="http://www.schibsted.com/" target='_blank'>Link</a>
```

> **Find full description and more examples in the [demo page](https://sui-components.now.sh/workbench/atom/button).**
npm package: @schibstedspain/sui-atom-panel
Description: > Just a background for your component, can be a color or an image with background/overlay
Latest version: 1.3.0
Deprecated: Use @s-ui/react-atom-panel instead

# AtomPanel

> Just a background for your component, can be a color or an image with background/overlay

## Installation

```sh
$ npm install @schibstedspain/sui-atom-panel --save
```

## Usage

### Basic usage
```js
import AtomPanel, {
  atomPanelAlpha,
  atomPanelColors,
  atomPanelHorizontalAlign,
  atomPanelVerticalAlign
} from '@schibstedspain/sui-atom-panel'

return (
  <div>
    <AtomPanel
      alpha={atomPanelAlpha.OVERLAY_D4}
      color={atomPanelColors.CONTRAST}
    >
      {content}
    </AtomPanel>
    <AtomPanel
      src={'https://picsum.photos/250/200'}
      horizontalAlign={atomPanelHorizontalAlign.LEFT}
      verticalAlign={atomPanelVerticalAlign.TOP}
    >
      {content}
    </AtomPanel>
  </div>
)
```


> **Find full description and more examples in the [demo page](https://sui-components.now.sh/workbench/atom/panel/demo).**
npm package: @schibstedspain/sui-atom-status-spot
Description: > The status spot can has the success, error and alert color. > We can use the status: high, medium or low to assign the different colors.
Latest version: 1.6.0

# AtomStatusSpot

> The status spot can has the success, error and alert color.
> We can use the status: high, medium or low to assign the different colors.

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

## Installation

```sh
$ npm install @schibstedspain/sui-atom-status-spot --save
```

## Usage

### Basic usage
```js
import AtomStatusSpot from '@schibstedspain/sui-atom-status-spot'

return (<AtomStatusSpot />)
```


> **Find full description and more examples in the [demo page](#).**
npm package: @schibstedspain/sui-atom-tag
Description: > Atom Element: SUI Tag
Latest version: 2.6.0
Deprecated: Use @s-ui/react-atom-tag instead

# AtomTag

> Atom Element: SUI Tag

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

## Installation

```sh
npm install @schibstedspain/sui-atom-tag --save
```

## Usage

```js
import AtomTag from '@schibstedspain/sui-atom-tag'

<AtomTag
  label='Tag Structure'
/>

<AtomTag
  label='Navigation Tag'
  onClick={() => alert('click!')}
/>
```

### Tag types

If you want to customize your tag you can pass a prop to identify this type and you also need to set your custom set of types in Sass:

**Your theme file** (Sass)

```css
$atom-tag-types: (
  "alert": (
    bgc: red,
    c: white
  ),
  "warning": (
    bgc: orange,
    c: white
  )
);
```

**Your high order component**

```js
<AtomTag type="alert" />
```

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

# BreakpointToggle

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

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

## Installation

```sh
$ npm install @schibstedspain/sui-breakpoint-toggle --save
```

## Usage

### Basic usage
```js
import BreakpointToggle from '@schibstedspain/sui-breakpoint-toggle'

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

```
npm package: @schibstedspain/sui-button-share
Description: > Description
Latest version: 1.6.0

# ButtonShare

> Description

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

## Installation

```sh
$ npm install @schibstedspain/sui-button-share --save
```

## Usage

### Basic usage
```js
import ButtonShare from '@schibstedspain/sui-button-share'

return (<ButtonShare />)
```


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

# CardArrow

> Description

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

## Installation

```sh
$ npm install @schibstedspain/sui-card-arrow --save
```

## Usage

### Basic usage
```js
import CardArrow from '@schibstedspain/sui-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: @schibstedspain/sui-card-collapsible
Description: > Description
Latest version: 1.13.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 @schibstedspain/sui-card-collapsible --save
```

## Usage

### Basic usage
```js
import CardCollapsible from '@schibstedspain/sui-card-collapsible'

return (<CardCollapsible />)
```


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

# CardImageCover

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

## Installation

```sh
$ npm install @schibstedspain/sui-card-image-cover --save
```

## Usage

### Basic usage

```js
import CardImageCover from '@schibstedspain/sui-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: @schibstedspain/sui-card-profile
Description: CardProfile serves a card with user information like avatar, name, rating bar and stats information.
Latest version: 1.5.0

# CardProfile

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

## Installation

```sh
$ npm install @schibstedspain/sui-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 '@schibstedspain/sui-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: @schibstedspain/sui-collapsible-accordion
Description: > Description
Latest version: 1.12.0

# CollapsibleAccordion

> Description

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

## Installation

```sh
$ npm install @schibstedspain/sui-collapsible-accordion --save
```

## Usage

### Basic usage
```js
import CollapsibleAccordion from '@schibstedspain/sui-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: @schibstedspain/sui-collapsible-basic
Description: > Expandable/collapsable block.
Latest version: 2.9.0

### CollapsibleBasic

> Expandable/collapsable block.

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

## Installation

```sh
$ npm install @schibstedspain/sui-collapsible-basic --save
```

## Usage

### Basic usage
```js
import CollapsibleBasic from '@schibstedspain/sui-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: @schibstedspain/sui-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.3.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 @schibstedspain/sui-collapsible-composed --save
```

## Usage

### Basic usage
```js
import CollapsibleComposed from '@schibstedspain/sui-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: @schibstedspain/sui-collapsible-readmore
Description: Collapsible read more component for truncating long content and adding an ellipsis.
Latest version: 1.3.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 @schibstedspain/sui-collapsible-readmore --save
```

## Usage

### Basic usage
```js
import CollapsibleReadmore from '@schibstedspain/sui-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: @schibstedspain/sui-cover-basic
Description: It shows an image an also accepts a list of buttons and children.
Latest version: 1.16.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: @schibstedspain/sui-css-transition
Description: ## Installation
Latest version: 1.2.0

# CssTransition

## Installation

```sh
$ npm install @schibstedspain/sui-css-transition --save
```

## Usage

### Basic usage
```js
import CssTransition from '@schibstedspain/sui-css-transition'

return (<CssTransition />)
```


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