Klarna UI React Components

Note: This project and its sister project klarna/ui-css-components are deprecated. Use @klarna/ui instead.

This library is a React wrapper on top of ui-css-components.

Install

npm install @klarna/ui-react-components --save

This package doesn't have a build, so you must have a Babel pipeline to use it. The minimal set of loaders is:

test: /\.(jsx|es6)$/
loader: 'babel'

test: /\.scss$/,
loaders: [
  'style',
  'css?modules,localIdentName=[local]',
  'sass'
]

test: /\.(jpe?g|png|gif|svg|ico|eot|woff|ttf|woff2)(\?v=[0-9]\.[0-9]\.[0-9])?$/i,
loader: 'file' // or url

You can see more in the project's webpack.config.js.

Run locally

To run the project, NPM 3+ is required.

To run the showroom locally:

npm install
npm start

Open localhost:7777.

Using locally

Most of the time you'll want to change things in ui-react-components and see how they reflect in your project. To do that without having to push and publish versions, you need to create a global symlink from ui-react-components and then use this symlink in your project.

So first, create the global symlink by doing:

cd path/to/ui-react-components
npm link

Then go to your project and:

npm link @klarna/ui-react-components
UV_THREADPOOL_SIZE=100 npm start

This uses the global symlink of ui-react-components that points to our local git copy. Replace npm start with the command you use to start your app, if you use something different.

The UV_THREADPOOL_SIZE=100 solves a problem you may encounter with symlinks when importing Sass files webpack-contrib/sass-loader#100.

Running the tests in PhantomJS locally

npm test

Running the tests in different browsers

Prerequisites

First install the required npm packages.

npm install karma-chrome-launcher
npm install karma-firefox-launcher
npm install karma-ie-launcher
npm install karma-safari-launcher
npm install karma-webdriver-launcher

Run the tests on OS X

BROWSER=PhantomJS,Chrome,Safari,Firefox npm test

Run the tests on Windows

BROWSER=PhantomJS,Chrome,Firefox npm test

License

Please check the LICENSE file.

Contributing

Make sure:

1. Your contribution is aligned with the styleguide.
2. Your contribution doesn't break the grid. To avoid that, always use the $grid variable to define your sizes, as in line-height: ($grid * 4). As a rule of thumb, if your element total height (sum of content, paddings, margins, etc.) has an integer multiple of $grid you should be good.
3. Your code is linted: npm run lint.
4. It works in the major browsers, the simplest way is to spawn ngrok and use the cloud service of your choice. Else, you can download IE virtual machines for VirtualBox using curl -s https://raw.githubusercontent.com/xdissent/ievms/master/ievms.sh | env IEVMS_VERSIONS="9" bash.

Then:

1. Send a PR to GitHub.
2. Once approved:
   1. Update the version using npm version (tag will have v prefix) & update CHANGELOG.md.
   2. Merge to master and push (with the new tag as well).

Travis will take care of publishing your new version to npm.