🔩 Klarna's UI components library
This library contains the basic set of components used by multiple front end projects across Klarna. It exposes React API compatible components as well as CSS modules.
yarn add @klarna/ui
This project has several peer dependencies that it needs to work. Although they are no technically peer dependencies, we need to treat them that way to ensure that Webpack does not bundle them twice in the final builds of the consumer projects.
Install all peer dependencies with:
yarn add prop-types react react-motion html2react ramda --save
This package has a build, but usage of it is not recommended. You must have a Babel pipeline to use it. Read more about how to config it.
There are plenty of articles in our wiki. Check it out
To run the project, NPM 3+ is required.
To run the showroom locally:
yarn install yarn start
Please check the LICENSE file.
$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.
npm run lint.
curl -s https://raw.githubusercontent.com/xdissent/ievms/master/ievms.sh | env IEVMS_VERSIONS="9" bash.
npm version -m "Some message describing what happened"(tag will have
vprefix). The message will be published as the release notes in Github.
git push origin master --follow-tags)
vin the "Tag version" field, ie.
Travis will take care of publishing your new version to npm. In a matter of minutes it should be ready. You can check the status of the release publication by reading the log of the build corresponding to your tag. The list of Travis builds can be found in https://travis-ci.org/klarna/ui/builds