open-index/open-npm huggingface dataset:
npm package: @schibstedspain/sui-tag-selectable-list
Latest version: 1.10.0

### TagSelectableList


# @schibstedspain/sui-tag-selectableList
> A React component that show a selectable tag list with optional button "all" for select or unselect all items

## Installation

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


## Usage

```javascript
import TagSelectableList from '@schibstedspain/sui-tag-selectableList'
```

```html
const tags = [
  {
    label: 'accusantium',
    value: 1
  },
  {
    label: 'et quibusdam',
    value: 2
  }
]

function onChange (values) {
  console.log('onChange', values)
}

const checkIcon = ({ svgClass }) => <svg className={svgClass} viewBox='0 0 64 64'><path d='M21.92,54.91,2.51,33.34a2,2,0,0,1,3-2.68L22.08,49.09,58.59,12.59a2,2,0,0,1,2.83,2.83Z' /></svg>

<TagSelectableList tagsList={tags} onChange={onChange} all="All options" checkIcon={checkIcon} />
```

* `if` parameter "All" is defined, `then show these button
npm package: @schibstedspain/sui-thumbnail-basic
Description: > Shows an image with an optional caption text. Can also be used as a link
Latest version: 1.12.0

# ThumbnailBasic

> Shows an image with an optional caption text. Can also be used as a link

## Installation

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

## Usage

### Basic usage
```js
import ThumbnailBasic from '@schibstedspain/sui-thumbnail-basic'

return (
  <ThumbnailBasic
    src='image source'
    alt='image alt'
    href='link'
    target='link target'
    captionText='Show!'
    placeholder={
      <img src='image to be shown until loading thumbnailBasic src' />
    }
  />
)
```

> **Find full description and more examples in the [demo page](https://sui-components.now.sh/workbench/thumbnail/basic/demo).**
npm package: @schibstedspain/sui-thumbnail-list
Description: > List of thumbnail-basic
Latest version: 1.10.0

# ThumbnailList

> List of thumbnail-basic

## Installation

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

## Usage

### Basic usage
```js
import ThumbnailList from '@schibstedspain/sui-thumbnail-list'

return (
  <ThumbnailList
    items={items}
    captionText='Show!'
    placeholder={
      src: 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB2aWV3Qm94PSIwIDAgNTAwIDUwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjUwMCIgaGVpZ2h0PSI1MDAiIGZpbGw9IiM3NzciLz4KPC9zdmc+',
      alt: 'placeholder'
    }
    fallback={
      src: 'https://satyr.io/50',
      alt: '50x50 image'
    }
  />
)
```

> **Find full description and more examples in the [demo page](https://sui-components.now.sh/workbench/thumbnail/list/demo).**
npm package: @schibstedspain/sui-title-multisize
Description: #### Provides a group of up to 3 title segments, each one with a customizable font size.
Latest version: 1.11.0


### TitleMultisize

#### Provides a group of up to 3 title segments, each one with a customizable font size.

Useful when we intend to have a main title with a word that must be highlighted among the other (i.e. having a bigger font size).

The titles can be displayed in horizontal or vertical direction, though "orientation" property:
- horizontal: All titles in the same line when possible.
- vertical: one title above the other.

The available sizes are:
- xl : H1 Tag.
- l  : H2 Tag.
- m  : H3 Tag.
- s  : H4 Tag.
- xs : H5 Tag.


This component is built with the following the structure:

````html
<h3>pre-title</h3><h1>TITLE</h1><h3>post-title</h3>
````
where first and last parts of title are optional.