# Klara-UI

A repository for shared components and styles used in Klara.

## Get Started

```
npm install klara-ui
```

### Publishing

```
npm run bump
npm publish [--tag next]
```

## Usage

### Layout

* [Lists](http://bonniernews.github.io/klara-ui/#/layout/lists)

### Components

Klara UI comes with a set of components. They adhere to the overall design, and allow for some configuration.

* [SearchBar](http://bonniernews.github.io/klara-ui/#/components/SearchBar)
* [Accordion](http://bonniernews.github.io/klara-ui/#/components/Accordion)
* [Badge](http://bonniernews.github.io/klara-ui/#/components/Badge)
* [Button](http://bonniernews.github.io/klara-ui/#/components/Button)
* [Dateformat](http://bonniernews.github.io/klara-ui/#/components/DateFormat)
* [Datepicker](https://bonniernews.github.io/klara-ui/#/components/Datepicker)
* [Dropdown](http://bonniernews.github.io/klara-ui/#/components/Dropdown)
* [Icon](http://bonniernews.github.io/klara-ui/#/components/Icon)
* [MediaSlider](https://bonniernews.github.io/klara-ui/#/components/MediaSlider)
* [MenuBar](https://bonniernews.github.io/klara-ui/#/components/MenuBar)
* [Modal](https://bonniernews.github.io/klara-ui/#/components/Modal)
* [Notification](http://bonniernews.github.io/klara-ui/#/components/Notifications)
* [Popover](https://bonniernews.github.io/klara-ui/#/components/Popover)
* [Spinner](http://bonniernews.github.io/klara-ui/#/components/Spinner)
* [Switch](http://bonniernews.github.io/klara-ui/#/components/Switch)
* [TextField - Custom](https://bonniernews.github.io/klara-ui/#/components/TextFieldCustom)
* [TextField](http://bonniernews.github.io/klara-ui/#/components/TextField)
* [TextHighlight](https://bonniernews.github.io/klara-ui/#/components/TextHighlight)
* [Timepicker](https://bonniernews.github.io/klara-ui/#/components/Timepicker)
* [Tooltip](https://bonniernews.github.io/klara-ui/#/components/Tooltip)

### Styles

All the styles should be in the form of .styl
If you add a new file don't forget to import it in the styles.styl

#### Using the styles

Including styles in your own project can be tricky if not done correctly.
Fortunately we can use stylus loader for resolving to .styl files in node*modules*

Include all the styles in your .styl with:

```
@import "~klara-ui/style/styles.styl"
```

You can also specify the precise path for a file, eg.

```
@import "~klara-ui/style/variables/typography.styl"
```

Read more at: https://www.npmjs.com/package/stylus-loader

## Site

The styleguide is publicly available at [http://bonniernews.github.io/klara-ui](http://bonniernews.github.io/klara-ui).

The `site` folder contains all code for the site. Build and run it using the npm scripts:

```
npm run site:start
npm run site:build
npm run site:publish
```