Skip to content
πŸ”© Klarna's UI components library
Branch: master
Clone or download
Latest commit 235fff1 May 31, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
Alert Update displayName in Alert Aug 11, 2017
Amount PropTypes from prop-types May 12, 2017
Block Fix syntax error Mar 22, 2018
BoxSelector Get rid of touch everywhere May 31, 2018
Button Update Button & IconButton displayName Aug 11, 2017
Checklist fix linting error Oct 17, 2017
Code PropTypes from prop-types May 12, 2017
Collapsible Trigger onAnimationEnd for Radio when size changes Jan 23, 2018
ContextMenu PropTypes from prop-types May 12, 2017
Dialog Replace React.createClass with create-react-class Oct 2, 2017
Dropdown Replace React.createClass with create-react-class Oct 2, 2017
Field Replace React.createClass with create-react-class Oct 2, 2017
FieldLink Fix linting Aug 27, 2017
FieldTooltip Get rid of touch everywhere May 31, 2018
Fieldset Update Dropdown & Fieldset displayName Aug 11, 2017
IconButton Update Button & IconButton displayName Aug 11, 2017
Input Replace React.createClass with create-react-class Oct 2, 2017
Label PropTypes from prop-types May 12, 2017
Link Update Link & Paragraph & Title displayName Aug 11, 2017
List Update List displayName Aug 11, 2017
Loader Add noAnimation support to Loader Oct 27, 2017
Menu
MouseflowExclude Replace React.createClass with create-react-class Oct 2, 2017
Paragraph Update Link & Paragraph & Title displayName Aug 11, 2017
Preview Update Preview displayName Aug 11, 2017
ProgressBar PropTypes from prop-types May 12, 2017
PromoLabel Fix lint May 31, 2017
Radio Get rid of touch everywhere May 31, 2018
RadioMark Update RadioMark displayName Aug 11, 2017
SavedInputLabel PropTypes from prop-types May 12, 2017
Selector Replace React.createClass with create-react-class Oct 2, 2017
Showroom Replace React.createClass with create-react-class Oct 2, 2017
Strong Update index.jsx Mar 22, 2018
Subtitle Update Link & Paragraph & Title displayName Aug 11, 2017
Switch Replace React.createClass with create-react-class Oct 2, 2017
TermsBanner Make `TermsBanner` styles overridable Aug 27, 2017
Text isThemeable should return the actual themed or not style Dec 1, 2016
TextLabel Fix overridable Jul 4, 2017
Theme Update theme component Jul 4, 2017
Title Update Link & Paragraph & Title displayName Aug 11, 2017
Tooltip Fix overridable Jul 4, 2017
css Potential IE10 fix Sep 2, 2017
decorators Merge branch 'master' into make-uncontrolled-the-default Jan 16, 2017
helpers Fix lint Feb 2, 2017
html2KlarnaUI Improve example presentation Feb 27, 2017
icons Making it ES6 compatible again Apr 12, 2018
lib Add retrocompatibility for the style parameter Aug 3, 2017
propTypes PropTypes from prop-types May 12, 2017
settings
templates Add `acceptDisabled` to Landing template Jul 10, 2017
.babelrc Change babelrc to stage-3 and fix all direct exports May 9, 2017
.codeclimate.yml Adds code climate Apr 20, 2016
.editorconfig added editorconfig Feb 23, 2016
.gitignore Add .npmrc to .gitignore Oct 20, 2017
.node-version Make Dialog example slightly simpler Sep 19, 2016
.npmignore Fix Showroom build Apr 7, 2017
.sass-lint.yml Add the no-transition-all rule to SASS lint Nov 22, 2016
.travis.yml Add skip cleanup to travis config for deployment [skip ci] Oct 17, 2017
LICENSE Fix license typo Apr 20, 2016
Makefile Use --pure-lockfile when installing via yarn Nov 18, 2016
README.md Update README.md Oct 16, 2017
browserslist Update file to use dynamic rangee 🍿 Jan 12, 2017
example.js πŸ”₯ Bump to webpack@2 and enable HMR Apr 7, 2017
favicon.ico More Showroom cleanup Aug 29, 2016
index.js Fix failing index export test Jul 11, 2017
karma.conf.js Add run with Electron Jan 24, 2017
package.json 9.4.5 May 31, 2018
postcss.config.js πŸ”₯ Bump to webpack@2 and enable HMR Apr 7, 2017
settings.js WIP WIP Installments Dec 16, 2016
template.ejs Split webpack config into `dev` and `build` Apr 7, 2017
tests.js create test for index exports that fails Jul 11, 2017
webpack.config.build.js Set react-dom as a peerDependency May 24, 2017
webpack.config.dev.js Split webpack config into `dev` and `build` Apr 7, 2017
webpack.config.test.js Split webpack config into `dev` and `build` Apr 7, 2017
yarn.lock Merge pull request #437 from stipsan/feature/react-16 Apr 12, 2018

README.md

Klarna UI Components

Build Status npm version

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.

Install

yarn add @klarna/ui

You can use the UI components either with React and Preact. Learn more in the docs.

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.

Wiki

There are plenty of articles in our wiki. Check it out

Run locally

To run the project, NPM 3+ is required.

To run the showroom locally:

yarn install
yarn start

Open localhost:7777/ui/.

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.
  2. Once approved (with πŸ‘ reaction or a LGTM comment):
  3. Merge to master
  4. Pull master locally
  5. Update the version using npm version <major|minor|patch> -m "Some message describing what happened" (tag will have v prefix). The message will be published as the release notes in Github.
  6. Push master and the new tag as well. (git push origin master --follow-tags)
  7. Go to https://github.com/klarna/ui/releases, click on "Draft a new release" and add notes for your release version. Make sure to enter the number of your release including the v in the "Tag version" field, ie. v4.13.2

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

You can’t perform that action at this time.