open-index/open-npm huggingface dataset:
npm package: @schibstedspain/sui-label
Description: ## Demo page - Check out [Sui-Label demo page](http://sui-components.github.io/sui-label/)
Latest version: 0.1.2

# sui-label

## Demo page
- Check out [Sui-Label demo page](http://sui-components.github.io/sui-label/)

## Description
A label container to display a custom literal and class.

## Usage
Render component passing two props, `literal` and `class`.
- `literal` : Required prop to display label's content.
- `class` : Optional prop to pass an additional custom class so you can style your label.

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

```javascript

// JSX file
ReactDom.render(
    <Label literal={'Default Label'} class={'my-Custom--label'} />,
document.getElementById('main')
);
```
```css
// Sass styling
.my-Custom-label {
    background-color: $c-background;
    color: $c-foreground;
}

```

## 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-label/), isn´t ?!
npm package: @schibstedspain/sui-layout-breakpoint-split
Description: > Show or hide views according to the breakpoint.
Latest version: 1.4.0

# LayoutBreakpointSplit

> Show or hide views according to the breakpoint.

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

## Installation

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

## Usage

### Basic usage
```js
import LayoutBreakpointSplit from '@schibstedspain/sui-layout-breakpoint-split'

setView(current) {
  this.setState({current})
}

const current = this.state && this.state.current || 0

return (<div>
<LayoutBreakpointSplit breakpoint={575} current={current}>
  <div>
    LEFT VIEW {current == 0 && '(active)'}
    <button onClick={this.setView.bind(this, 1)}>Next &gt;</button>
  </div>

  <div>
    RIGHT VIEW {current == 1 && '(active)'}
    <button onClick={this.setView.bind(this, 0)}>Prev &lt;</button>
  </div>
</LayoutBreakpointSplit>
</div>)
```
npm package: @schibstedspain/sui-link-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.6.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-link-basic --save
```

## Usage

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

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

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