open-index/open-npm huggingface dataset:
npm package: @kano/kwc-animations
Description: A collection of kano animations
Latest version: 3.0.0-beta.1

# \<kwc-animations\>

A collection of kano animations

 - What is it called?
     - kwc-animations
 - What is it made out of?
     - Describe here the contents of this component
 - What variants are needed?
     - Variant 1:
     - Variant 2:
     - Variant 3:
 - How does it scale?
     - Desktop: ...
     - Mobile: ...
 - What style variables are in use?
     - Style 1: ...
     - Style 2: ...

## Installation
Clone this repository.
Run `bower i`

## Install the Polymer-CLI

First, make sure you have the [Polymer CLI](https://www.npmjs.com/package/polymer-cli) installed. Then run `polymer serve` to serve your element locally.

## Viewing Your Element

```
$ polymer serve
```

## Running Tests

```
$ polymer test --skip-plugin junit-reporter
```

Your application is already set up to be tested via [web-component-tester](https://github.com/Polymer/web-component-tester). Run `polymer test` to run your application's test suite locally.
npm package: @kano/kwc-blockly
Description: Blockly based kano coding editor
Latest version: 3.1.23

# \<kwc-blockly\>

[WIP] Reusable code editor based on Blockly that powers Kano Code

 - What is it called?
     - kwc-blockly
 - What is it made out of?
     - Polymer wrapper for a blockly instance. Uses a customized blockly and adds some features like the onibox
 - What variants are needed?
     - [TBD]
 - How does it scale?
     - Not targeted to small screens
 - What style variables are in use?
     - General colors (background, text colors)

## Installation
Clone this repository.
Run `bower i`

## Usage

Blockly is installed under `blockly_built`, You will have to import the blockly library yourself as you can choose the compressed or uncompressed version and you can also choose the generators and language you want to use.

Create a HTML file to import the javascript from `blockly_built`, as it will deduplicate the import of these scripts:

```html
<script src="/bower_components/kwc-blockly/blockly_built/blockly_compressed.js"></script>
<script src="/bower_components/kwc-blockly/blockly_built/blocks_compressed.js"></script>
<script src="/bower_components/kwc-blockly/blockly_built/msg/js/en.js"></script>
<script src="/bower_components/kwc-blockly/blockly_built/javascript_compressed.js"></script>
<link rel="import" href="/bower_components/kwc-blockly/kwc-blockly.html">
```

Then use this file to import `<kwc-blockly>` Wherever you want to use it

## Install the Polymer-CLI

First, make sure you have the [Polymer CLI](https://www.npmjs.com/package/polymer-cli) installed. Then run `polymer serve` to serve your element locally.

## Viewing Your Element

```
$ polymer serve
```

## Running Tests

```
$ polymer test --skip-plugin junit-reporter
```

Your application is already set up to be tested via [web-component-tester](https://github.com/Polymer/web-component-tester). Run `polymer test` to run your application's test suite locally.

### Building blockly

`blockly` and the `closure-library` from Google are submodules of this repository. This way, we keep a reference to the sources, and apply our changes on top of it.

To rebuild with patches applied, just run the `build_blockly.sh` script. It will copy the blockly sources, apply the patches from `blockly_patches`, rebuild blockly and export this into the `blockly_built` folder.

To update to a newer version of blockly, run `git submodule update --remote` to grab the latest changes from blockly and then rebuild with `build_blockly.sh`. This can and will most likely BREAK things as the patches rely on blockly's internal API to enhance it. Getting a newer version can lead to some work to adapt the changes.
npm package: @kano/kwc-button
Description: An atomic button element with Kano styling
Latest version: 3.0.0-beta.3

# \<kwc-button\>

An atomic button element with Kano styling.

## Purpose:
To provide generic button styling and interaction across Kano properties.

## Variants:
* Border Radius:
  * Rounded
  * Square
* Icon
* Outline
* Status
  * Disabled
  * Enabled
* Type:
  * Primary
  * Secondary
  * Tertiary
  * Warning
  * White
* Ghosted
* Transparent

## Installation
* Clone this repository.
* Run `bower i`
* Install the [Polymer CLI](https://www.npmjs.com/package/polymer-cli). Then run `polymer serve` to serve the element locally.

## Viewing The Element

```
$ polymer serve
```

## Running Tests

```
$ polymer test
```

## To-do
* Add aria properties for better accessibility
npm package: @kano/kwc-circle-progress
Description: ## Install the Polymer-CLI
Latest version: 1.0.0

# \<kwc-circle-progress\>



## Install the Polymer-CLI

First, make sure you have the [Polymer CLI](https://www.npmjs.com/package/polymer-cli) and npm (packaged with [Node.js](https://nodejs.org)) installed. Run `npm install` to install your element's dependencies, then run `polymer serve` to serve your element locally.

## Viewing Your Element

```
$ polymer serve
```

## Running Tests

```
$ polymer test
```

Your application is already set up to be tested via [web-component-tester](https://github.com/Polymer/web-component-tester). Run `polymer test` to run your application's test suite locally.
npm package: @kano/kwc-color-picker
Description: Later
Latest version: 3.0.0-beta.8

# <kwc-color-picker>

Tile based color picker with customizable palette

 - What is it called?
     - kwc-color-picker
 - What is it made out of?
     - A set of colored tiles that when clicked, provides a selected value
 - What variants are needed?
     - Idle: hover styling is still here, but no selection is possible
     - Tiles: Different sizes and margin between them
 - How does it scale?
     - Tiles size are defined in pixels, and the rowSize defines the total width
 - What style variables are in use?
     - Colors: The list of colors available for selection
     - Outline: Can customize the style of the outline when over a light or dark color
- Anything to keep in mind?
     - If the display state of the element changes (i.e. it gets hidden/unhidden), you need to call notifyResize, otherwise the element will not properly render.
     - When the selected colour changes, the highlighting only animates if the Web Animations API is supported by the browser. To make the feature work in all browsers, use a [polyfill](https://github.com/web-animations/web-animations-js).

## Installation

```
yarn add @kano/kwc-color-picker
```

## Usage

```
import '@kano/kwc-color-picker/kwc-color-picker.js';

const tpl = html`
    <kwc-color-picker></kwc-color-picker>
`;
```
## API

## Development

Clone this repository and install the dependencies with `yarn`

Serve the demo with

```
yarn serve
```

Serve the tests with

```
yarn serve-test
```
npm package: @kano/kwc-color-wheel
Description: A color wheel with magnifier
Latest version: 3.0.0-beta.2

# \<kwc-color-wheel\>

A color wheel with magnifier

 - What is it called?
     - kwc-color-wheel
 - What is it made out of?
     - A wheel showing a range of colors and a magnifier appearing on touch/mouse over
 - What variants are needed?
     - None
 - How does it scale?
     - Desktop: Uses mouse events ( magnifier on hover, value on click )
     - Mobile/Touch: Uses touch events ( magnifier on touchstart, value on touchend )
 - What style variables are in use?
     - Maginifier: Can style the border of the magnifier
     - Size: Can change the size of the wheel

## Installation
Clone this repository.
Run `bower i`

## Install the Polymer-CLI

First, make sure you have the [Polymer CLI](https://www.npmjs.com/package/polymer-cli) installed. Then run `polymer serve` to serve your element locally.

## Viewing Your Element

```
$ polymer serve
```

## Running Tests

```
$ polymer test --skip-plugin junit-reporter
```

Your application is already set up to be tested via [web-component-tester](https://github.com/Polymer/web-component-tester). Run `polymer test` to run your application's test suite locally.
npm package: @kano/kwc-drop-down
Description: A customizable dialog with two buttons and slottable content
Latest version: 3.0.0-beta.5

_[Demo and API docs](https://components.kano.me/#/elements/kwc-drop-down)_

## \<kwc-drop-down\>

A drop-down with a caret.

<img width="825" alt="example" src="https://user-images.githubusercontent.com/169328/39061526-7d7aa928-44bc-11e8-94c5-b43e4feb51e7.png">


## Installation
Clone this repository.
Run `bower i`

## Install the Polymer-CLI

First, make sure you have the [Polymer CLI](https://www.npmjs.com/package/polymer-cli) installed. Then run `polymer serve` to serve your element locally.

## Viewing Your Element

```
$ polymer serve
```

## Running Tests

```
$ polymer test --skip-plugin junit-reporter
```

Your application is already set up to be tested via [web-component-tester](https://github.com/Polymer/web-component-tester). Run `polymer test` to run your application's test suite locally.
npm package: @kano/kwc-file-picker
Description: Display a list of items from a tree as a file picker would
Latest version: 3.0.0-beta.2

# \<kwc-file-picker\>

A set of elements to display file explorer style views.

## Installation
Clone this repository.
Run `bower i`

## Install the Polymer-CLI

First, make sure you have the [Polymer CLI](https://www.npmjs.com/package/polymer-cli) installed. Then run `polymer serve` to serve your element locally.

## Viewing Your Element

```
$ polymer serve
```

## Running Tests

```
$ polymer test --skip-plugin junit-reporter
```

Your application is already set up to be tested via [web-component-tester](https://github.com/Polymer/web-component-tester). Run `polymer test` to run your application's test suite locally.
npm package: @kano/kwc-icons
Description: All Kano icons, broken up by category Edit
Latest version: 3.0.0-beta.3

# \<kwc-icons\>

All Kano icons, broken up by category Edit

## Installation
Clone this repository.
Run `bower i`

## Install the Polymer-CLI

First, make sure you have the [Polymer CLI](https://www.npmjs.com/package/polymer-cli) installed. Then run `polymer serve` to serve your element locally.

## Viewing Your Element

```
$ polymer serve
```

## Running Tests

```
$ polymer test --skip-plugin junit-reporter
```

Your application is already set up to be tested via [web-component-tester](https://github.com/Polymer/web-component-tester). Run `polymer test` to run your application's test suite locally.

## Adding new icons

1. Go to [SVG-edit](https://svg-edit.github.io/svgedit/releases/svg-edit-2.8.1/svg-editor.html)
2. Click on top left "SVG-edit" icon and then on "document properties"
3. Set canvas dimensions to 64x64px
4. Import your SVG
5. Resize and center align (if you click on the svg shape you will have an alignment tool on the toolbar)
6. Get the `<path>` or the entire `<g>` by clicking on the icon next to the "SVG-edit" (the one that will show you the svg source code)
7. Add you your icon list stripping any `stroke`, `id` or anything else that is not needed.
npm package: @kano/kwc-lightboard-preview
Description: Display pixel kit lightboard sprites
Latest version: 3.3.14

# \<kwc-lightboard-preview\>

Display pixel kit lightboard sprites

## Installation
Clone this repository.
Run `bower i`

## Install the Polymer-CLI

First, make sure you have the [Polymer CLI](https://www.npmjs.com/package/polymer-cli) installed. Then run `polymer serve` to serve your element locally.

## Viewing Your Element

```
$ polymer serve
```

## Running Tests

```
$ polymer test --skip-plugin junit-reporter
```

Your application is already set up to be tested via [web-component-tester](https://github.com/Polymer/web-component-tester). Run `polymer test` to run your application's test suite locally.
npm package: @kano/kwc-notifications-icon
Description: To show notifications status and an overview of notifications.
Latest version: 3.0.0-beta.2

# \<kwc-notifications-icon\>

To show notifications status and an overview of notifications.

## TO-DO:
* Add further tests, particularly for clicking and opening the element, and firing the events.

## Installation
Clone this repository.
Run `bower i`

## Install the Polymer-CLI

First, make sure you have the [Polymer CLI](https://www.npmjs.com/package/polymer-cli) installed. Then run `polymer serve` to serve your element locally.

## Viewing Your Element

```
$ polymer serve
```

## Running Tests

```
$ polymer test --skip-plugin junit-reporter
```

Your application is already set up to be tested via [web-component-tester](https://github.com/Polymer/web-component-tester). Run `polymer test` to run your application's test suite locally.
npm package: @kano/kwc-pagination
Description: UI for pagination
Latest version: 3.3.14

# \<kwc-pagination\>

A configurable page navigation bar.

<img width="673" src="https://user-images.githubusercontent.com/169328/58256498-04f85d80-7d67-11e9-84ee-b81c29fcece3.png">


## Installation

Grab it from the NPM repository and add it as a dependency of your project with

```
yarn add @kano/kwc-pagination
```

## Usage

```js
import '@kano/kwc-pagination/kwc-pagination.js';

html`
    <kwc-pagination jump-controls pagination-controls total-pages="360" current-page="7"></kwc-pagination>
`;
```

## API

The following properties are available:

 - `startsOn`: A number defining the start page for the navigation bar
 - `totalPages`: A number defining the total number of pages available
 - `currentPage`: A number defining the selected page
 - `range`: A number defining the number of pages to display between the bar controls
 - `paginationControls`: Turn on or off the next and previous buttons
 - `jumpControls`: Turn on or off the got to last and got to first buttons
 - `lastPage`: Turn on or off showing the last page at the end

This element dispatches one event: `go-to-page`. This event signals that the user chose a page to go to. Use this data to update the selected page