Klarna UI React Components
Note: This project and it's sister project Klarna UI CSS Components are in their way to being deprecated in favor of the unified Klarna UI Components. There will be a migration guide once the new Klarna UI Components hit 1.0 and we expect the migration effort for consumers to be small.
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
To run the project, NPM 3+ is required.
To run the showroom locally:
npm install npm start
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.
UV_THREADPOOL_SIZE=100 solves a problem you may encounter with symlinks when importing Sass files https://github.com/jtangelder/sass-loader/issues/100.
Running the tests in PhantomJS locally
Running the tests in different browsers
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
Please check the LICENSE file.
- Your contribution is aligned with the styleguide.
- Your contribution doesn't break the grid. To avoid that, always use the
$gridvariable 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
$gridyou should be good.
- Your code is linted:
npm run lint.
- 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.
- Send a PR to GitHub.
- Once approved:
- Update the version using
npm version(tag will have
vprefix) & update
- Merge to master and push (with the new tag as well).
- Update the version using
Travis will take care of publishing your new version to npm.