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.
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 https://github.com/jtangelder/sass-loader/issues/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:
- Your contribution is aligned with the styleguide.
- Your contribution doesn't break the grid. To avoid that, always use the
$grid
variable to define your sizes, as inline-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. - 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
.
Then:
- Send a PR to GitHub.
- Once approved:
- Update the version using
npm version
(tag will havev
prefix) & updateCHANGELOG.md
. - 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.