open-index/open-npm huggingface dataset:
npm package: @schibstedspain/sui-links-basic
Description: > Component to show a link. The advantatge of this component is that, depending on the props, you could get a link disabled, a link to another website or a link to the SPA so your code is
Latest version: 1.1.0

# LinkBasic

> Component to show a link. The advantatge of this component is that, depending on the props, you could get a link disabled, a link to another website or a link to the SPA so your code is

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

## Installation

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

## Usage

### Basic usage
```js
import LinkBasic from '@schibstedspain/sui-links-basic'

return (
  <LinkBasic
    useReactRouterLinks
    url='#' />
  />
)
```

> **Find full description and more examples in the [demo page](#).**
npm package: @schibstedspain/sui-list-image
Description: Displays a list of sui-image-lazy-load, with a customisable limit and onClick callbacks.
Latest version: 1.10.0

### ListImage

Displays a list of images (where each item corresponds to a ```sui-image-lazy-load``` component).

It will be displayed as a continuous grid (the image grid items per line are adjustable to the container's width),
allowing to set a limit of the total number of images to show.

Each image may have a custom callback to be called when its onClick event is triggered.

Additionally, if there a more image items than the defined ```maxItems``` prop, and the prop ```showMoreItemsBox``` is provided,

it will show an extra cover (black background, 65% opacity) over the last` image, allowing as well the definition of a
custom callback to be called when this last item is clicked.

By default, the sizes for all image items in the list are set as follows:
- Each item is 196px width for desktop and tablet screens. The cell gutter is 16px, except in the case of tablet screen
  where only horizontal gutter is expanded to 30px.
- Each item is 50% width for mobile screens (cell gutter of 16px).
npm package: @schibstedspain/sui-list-link
Description: > Show a list of links, that could be React Router Links or HTML links. You could show these links also inline or one-per-line style as a list.
Latest version: 1.5.0

# ListLink

> Show a list of links, that could be React Router Links or HTML links. You could show these links also inline or one-per-line style as a list.

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

## Installation

```sh
$ npm install @schibstedspain/sui-list-link --save
```

## Usage

### Basic usage
```js
import ListLink from '@schibstedspain/sui-list-link'

const listOfLinks = [
  {
    literal: 'Alquiler de pisos en Madrid Capital',
    title: 'Element title',
    target: '_parent',
    url: 'http://fotocasa.es',
    disabled: true,
    customclass: 'sui-Link-disabled'
  },
  {
    literal: 'Comprar pisos',
    title: 'Element title',
    target: '_parent',
    url: 'http://fotocasa.es',
    disabled: true,
    customclass: 'sui-Link-disabled'
  }
]

return (
  <ListLink
    list={listOfLinks}
    displayInline />
  />
)
```

> **Find full description and more examples in the [demo page](#).**
npm package: @schibstedspain/sui-list-masonry
Description: ListMasonry is a React grid layout component. It works by placing elements in optimal position based on available vertical space.
Latest version: 1.6.0

### ListMasonry
ListMasonry is a React grid layout component. It works by placing elements in optimal position based on available vertical space.

```javascript
const breakpoints = [600, 900]

<ListMasonry
  breakpoints={breakpoints}
  className='extra-class'
/>
```

Check the playground in order to get a complete view of the possibilities of the component. Try resizing your browser and check how this component build columns based on the breakpoints array passed via props.
npm package: @schibstedspain/sui-modal-gallery
Description: > Description Creates a fullscreen multimedia slider gallery (`sui-image-slider`) and opens it inside  a modal (`sui-modal-basic`).
Latest version: 1.6.0

# SUI ModalGallery

> Description
Creates a fullscreen multimedia slider gallery (`sui-image-slider`) and opens it inside  a modal (`sui-modal-basic`).

#### Future tasks:
- [ ] Allow including videos in slider.
- [ ] Allow including floorplans in slider.
- [ ] Create multimedia multi-counter types (3 separated counter for images, videos and floorplans to show in modal's header.)

## Installation

```sh
$ npm install @schibstedspain/sui-modal-gallery --save
```

## Usage

### Basic usage
```js
import ModalGallery from '@schibstedspain/sui-modal-gallery'

<ModalGallery
  shouldRenderModal
  multimedia={{images: [/* Array of images */]}}
  initialSlide={6}
  doAfterSlide={() => alert('Slide changed!'}
  onClose={() => alert('Closing...')}
/>
```

> **Find full description and more examples in the [demo page](../demo).**
npm package: @schibstedspain/sui-molecule-tabs
Description: > Basic component for tabs allowing versions with or without icons and classic or highlighted variants
Latest version: 2.5.0
Deprecated: Use @s-ui/react-molecule-tabs instead

# MoleculeTabs

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

## Installation

```sh
$ npm install @schibstedspain/sui-molecule-tabs --save
```

## Usage

```js
import MoleculeTabs, {
  MoleculeTabs as StaticMoleculeTabs,
  MoleculeTab,
  moleculeTabsTypes,
  moleculeTabsVariants
} from '@schibstedspain/sui-molecule-tabs'
```

### Basic usage (Classic & horizontal)

```js
<MoleculeTabs>
  <MoleculeTab
    numTab="1"
    label="Tab 1"
    active
  >
    <ContentTab1 />
  </MoleculeTab>
  <MoleculeTab numTab="2" label="Tab 2">
    <ContentTab2 />
  </MoleculeTab>
  <MoleculeTab
    numTab="3"
    label="Tab 3"
    disabled
  >
    <ContentTab3 />
  </MoleculeTab>
</MoleculeTabs>
```


### Full width Classic & Horizontal
```js
<MoleculeTabs type={moleculeTabsTypes.FULLWIDTH}>
  <MoleculeTab
    numTab="1"
    label="Tab 1"
    active
  >
    <ContentTab1 />
  </MoleculeTab>
  <MoleculeTab numTab="2" label="Tab 2">
    <ContentTab2 />
  </MoleculeTab>
  <MoleculeTab
    numTab="3"
    label="Tab 3"
    disabled
  >
    <ContentTab3 />
  </MoleculeTab>
</MoleculeTabs>
```

### Highlighted & Horizontal
```js
<MoleculeTabs variant={moleculeTabsVariants.HIGHLIGHTED}>
  <MoleculeTab
    numTab="1"
    label="Tab 1"
    active
  >
    <ContentTab1 />
  </MoleculeTab>
  <MoleculeTab numTab="2" label="Tab 2">
    <ContentTab2 />
  </MoleculeTab>
  <MoleculeTab
    numTab="3"
    label="Tab 3"
    disabled
  >
    <ContentTab3 />
  </MoleculeTab>
</MoleculeTabs>
```


### Highlighted & Vertical
```js
<MoleculeTabs variant={moleculeTabsVariants.HIGHLIGHTED} type={moleculeTabsTypes.VERTICAL}>
  <MoleculeTab
    numTab="1"
    label="Tab 1"
    active
  >
    <ContentTab1 />
  </MoleculeTab>
  <MoleculeTab numTab="2" label="Tab 2">
    <ContentTab2 />
  </MoleculeTab>
  <MoleculeTab
    numTab="3"
    label="Tab 3"
    disabled
  >
    <ContentTab3 />
  </MoleculeTab>
</MoleculeTabs>
```

### with Icons

```js
<MoleculeTabs>
  <MoleculeTab
    numTab="1"
    label="Tab 1"
    icon={<IconLineBackup />}
    active
  >
    <ContentTab1 />
  </MoleculeTab>
  <MoleculeTab numTab="2" label="Tab 2" icon={<IconLineDashboard />}>
    <ContentTab2 />
  </MoleculeTab>
  <MoleculeTab
    numTab="3"
    label="Tab 3"
    icon={<IconLineExtension />}
    disabled
  >
    <ContentTab3 />
  </MoleculeTab>
</MoleculeTabs>
```


> **Find full description and more examples in the [demo page](https://sui-components.now.sh/workbench/molecule/tabs/demo).**
npm package: @schibstedspain/sui-multimedia
Description: ## Description The SUI-Multimedia component allows us to render an image or list of images, taking the whole width of its parent. Links on images are optional.
Latest version: 1.0.1

# sui-multimedia

## Description
The SUI-Multimedia component allows us to render an image or list of images, taking the whole width of its parent. Links on images are optional.

## Demo page
Check out the [demo page](http://sui-components.github.io/sui-multimedia/).

## Usage
Render component passing a required array of objects: `images`, containing (each object) the following properties:
* `src`: Required param to print the desired image.
*  `defaultSrc`: Optional param to print a default image if the request for the main one fails.
* `alt`: Required param to print the "alt" image attribute, and also the link title if has one.
* `link`: Optional param to set a link on the image.
* `routerLink`: Optional param to set a React Router link on the image.

You can also pass a prop `lazyLoad` in order to enable/disable this functionality for your images. Defaults to `true`.

An example of the `sui-multimedia` component implementation is:

```javascript
// JSX file.
const images = [{
  src: 'https://scontent-mad1-1.cdninstagram.com/t51.2885-15/e15/11189686_499366993548088_1592806536_n.jpg',
  alt: 'Bicing Old town Barcelona',
  link: 'https://www.instagram.com/p/UCYp_ypMkN/?taken-by=davecarter'
}, {
  src: 'https://scontent-mad1-1.cdninstagram.com/t51.2885-15/e15/10748230_299848506868376_514084448_n.jpg?ig_cache_key=ODQ2NjYxNzQzOTY4OTc4Njcw.2',
  alt: 'Morning rain'
}, {
  src: 'http://www.foo.com/not-found.png',
  alt: 'Not Found',
  routerLink: '/not-found'
}, {
  src: 'http://www.foo.com/not-found.png',
  alt: 'Not Found',
  defaultSrc: './img/default_src.png'
}, {
  src: 'https://scontent-mad1-1.cdninstagram.com/t51.2885-15/e15/11189686_499366993548088_1592806536_n.jpg',
  routerLink: '/not-found'
}]

ReactDom.render(
  <SuiMultimedia images={images} />,
  document.getElementById('multimedia')
);
```

## Installation
Clone this repository and run:
```
$ npm install
```

## Start working in development mode:
```
$ npm run dev
```
This command will build your `.sass`, `.jsx` and `.js` files and open a local development environment, with hot reloading. A browser window will be opened as well, showing the entry point of your documents folder for development purposes.

## To work in TDD mode:
```
$ npm run test:watch
```
## To run unit tests only once:
```
$ npm test
```
## To publish yours docs page:
```
$ npm run doc
```

That will publish in a gh-page for `docs` folder. What is a component without a [public demo](http://sui-components.github.io/sui-multimedia/), isn't it ?!
npm package: @schibstedspain/sui-pagination-basic
Description: > Component with a basic pagination system
Latest version: 1.5.0

# PaginationBasic

> Component with a basic pagination system

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

## Installation

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

## Usage

### Basic usage
```js
import PaginationBasic from '@schibstedspain/sui-pagination-basic'

return (
  <PaginationBasic
    currentPage={20}
    handlePaginate={() => {}}
    showFirstLast
    totalPages={40}
    window={10}
  />
)
```

> **Find full description and more examples in the [demo page](#).**
npm package: @schibstedspain/sui-perf
Description: Utilities to measure and monitor perf of your isomorphic apps.
Author: David Almeida
Latest version: 1.3.0
Deprecated: Package was moved to @s-ui organization. Please update your dependencies.

This packages was moved to @s-ui organization.
Please use its equivalent in https://www.npmjs.com/org/s-ui.
npm package: @schibstedspain/sui-polyfills
Description: Polyfills for your project
Author: Miguel Angel Duran
Latest version: 1.4.0

# sui-polyfills
> Set of polyfills for your app

## Motivation
**sui-polyfills** offers you a list of polyfills used abroad all our projects:
* It uses core-js Standard library: https://github.com/zloirock/core-js
* It doesn't matter the project you're working on, you will know exactly which polyfills you could use.
* Better way to handle and keep polyfills used on our projects.
* Polyfills are global, so your third-party dependencies can use them as well.

## Installation

```sh
npm install @schibstedspain/sui-polyfills --save
```
npm package: @schibstedspain/sui-rating-icons
Description: > Description
Latest version: 1.3.0

# ProfileRating

> Description

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

## Installation

```sh
$ npm install @schibstedspain/sui-rating-icons --save
```

## Usage

The sui-rating-icons is made to work with any icon that we provide.
The profile rating will handle with the icon and our specifications and will build a rating menu to show up to our user their rating information

The ProfileRating accepts the following properties:

- *rating*: The rating of our user, if our user have 6/10 stars we should pass 6 you can pass it with decimals too. 6.5, 7, 7.5...
- *maxValue*: The max value that our rating have. For example if it have 10 max star we should put 10.
- *icon*: Our Icon to be used as a rating
- *iconSize*: Our icon size, this one is important to make width calcs on the mask
- *spacingBetween[OPTIONAL]*: A margin will be added to our we set this to a number(px),
- *fillColor[OPTIONAL]*: The color used for the *FILLED* mask. If you don't provide any color, it will fallback to our component scss variable $fill-profile-rating-filled
- *emptyColor[OPTIONAL]*: The color used for the *EMPTY* mask. If you don't provide any color, it will fallback to our component scss variable $fill-profile-rating-empty

```js
import ProfileRating from '@schibstedspain/sui-rating-icons'

return (<ProfileRating
                        rating={9}
                        maxValue={10}
                        icon={() => <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 8 8">
                                         <path d="M2 0c-.55 0-1.04.23-1.41.59-.36.36-.59.85-.59 1.41 0 .55.23 1.04.59 1.41l3.41 3.41 3.41-3.41c.36-.36.59-.85.59-1.41 0-.55-.23-1.04-.59-1.41-.36-.36-.85-.59-1.41-.59-.55 0-1.04.23-1.41.59-.36.36-.59.85-.59 1.41 0-.55-.23-1.04-.59-1.41-.36-.36-.85-.59-1.41-.59z"
                                         transform="translate(0 1)" />
                                       </svg>}
                        iconSize={28}
                        spacingBetween={5}
                        fillColor={'#ff0000'}
                        emptyColor={'#ffc1c1'}
/>)
```


> **Find full description and more examples in the [demo page](#).**
npm package: @schibstedspain/sui-script-criteo
Description: React component to load criteo with given props.
Latest version: 1.2.0

# ScriptCriteo

> Component to load criteo with given props.

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

## Installation

```sh
$ npm install @schibstedspain/sui-script-criteo --save
```

## Usage

### Basic usage

```js
import ScriptCriteo from '@schibstedspain/sui-script-criteo'

return (
  <ScriptCriteo
    accountIds={[1234, 456]}
    customerId="12345678"
    siteType="m"
    hashedEmail="hashed-email-example"
    pageEvent={{ event: 'viewHome' }}
  />
)
```

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

# ScriptLoader

> Description

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

This components ensures that the render prop is not executed until the given script has been loaded.
Also you can safely call this component in multiple places with the same src and it will load it only once.


## Installation

```sh
$ npm install @schibstedspain/sui-script-loader --save
```

## Usage

### Basic usage
```js
import ScriptLoader from '@schibstedspain/sui-script-loader'

const src = 'javascript file url'
const stylesheet = 'stylesheet file url'

return (<ScriptLoader src={src} verifier={() => true} isAsync={false} render={() => 'Ready to render!'} stylesheet={stylesheet}/>)
```

**Find full description and more examples in the [demo page](https://sui-components.now.sh/workbench/script/loader).**
npm package: @schibstedspain/sui-section-basic
Description: > Just a basic section container wrapped in a `<section>` HTML tag, with customisable margin-bottom between its inner elements and the possibility to add an <hr> separator.
Latest version: 2.5.0

# SectionBasic

> Just a basic section container wrapped in a `<section>` HTML tag, with customisable margin-bottom between its inner elements and the possibility to add an <hr> separator.

## Installation

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

## Usage

### Basic usage
```js
import SectionBasic, {sectionBasicBottomSpacing} from '@s-ui/react-atom-panel'

return (
  <div>
    <SectionBasic
      title='Title of the section'
      separator
      sectionBottomSpacing={sectionBasicBottomSpacing.GIANT}
      headerBottomSpacing={sectionBasicBottomSpacing.XLARGE}
      contentBottomSpacing={sectionBasicBottomSpacing.MEDIUM}>
      <p>This section has a title</p>
      <p>There is a line separator displayed at the bottom of this section as an hr element.</p>
      <p>The margin-bottom of header, content and full section component have been customised.</p>
    </SectionBasic>
    <SectionBasic
      textContent='This section has no title, only text content and default vertical spacing.'
    />
  </div>
)

```

> **Find full description and more examples in the [demo page](https://sui-components.now.sh/workbench/section/basic/demo).**
npm package: @schibstedspain/sui-section-info
Description: A responsive `section` container to display custom information based on Title and Content structure.
Latest version: 1.12.0

# SectionInfo

A responsive `section` container to display custom information based on Title and Content structure.

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

## Installation

```sh
$ npm install @schibstedspain/sui-section-info --save
```

## Usage
Provide an `string` to a `title` prop and wrap a child component as a `content`. If no `title` prop is provided or contains an empty string `''` the corresponding Title DOM element won't be rendered.

Check out **Basic Usage** section to get further info.

Set custom values to container sizing and flex properties using the following Sass variables:

```scss
// Max-width Section container value
$mw-section-info: 670px !default;

$c-sui-section-info-border: $c-gray-light !default;
$bdb-section-info: 1px solid $c-sui-section-info-border !default;

// Flex Grow Title and Container
$fg-section-info-title: 0 !default;
$fg-section-info-content: 0 !default;

// Flex Shrink Title and Container
$fs-section-info-title: 0 !default;
$fs-section-info-content: 1 !default;

// Flex Basis Title and Container
$fb-section-info-title: 200px !default;
$fb-section-info-content: 100% !default;

// Title and Container font-sizing
$fz-section-info-title: $fz-l !default;
$fz-section-info-content: $fz-m !default;

// Margins
$m-section-info-title: 0 !default;
$m-section-info-content: 0 !default;

// Paddings
$p-section-info-title: $p-l $p-m !default;
$p-section-info-content: 0 $p-m !default;
```

### Basic usage
```js
import SectionInfo from '@schibstedspain/sui-section-info'

const extras = 'Extras'
const extrasElement = <ul><li>air conditioning</li><li>elevator</li><li>parking</li></ul>

return (
  <div>
    <SectionInfo title={extras}>
      {extrasElement}
    </SectionInfo>
  </div>
)
```


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