Add legal variation of Link - Fix Loader in Safari

Add legal variation of Link ✨🔗

Fix Loader in Safari

Add Tertiary Button - Make Checklist gray

Added Tertiary Button ✨

by @Nevon

(the gifs are a little messy. This is the first try :) )

Regular

Small

Big

Dynamic styling

Loading

Disabled

With price

Make the Checklist gray

by @Nevon

Regular

Dynamic styled

Several small fixes

• Vertically align checkbox labels
• Fix Dialog icons in IE 9: position Dialog IconButton relative to Dialog
• Add yarn.lock (useful for development, doesn't affect consumers)

Change style of selected/hovered value in Selector.Options

An image is worth more or less 953.6423 words they say.

Fix icon button clickable area

• Extra props passed to IconButton components are now spread in the root <div>, not in the <svg>, meaning it's possible to target the whole icon and the onClick event is captured for the whole area.
• IconButton's className props are now also incorporated in the wrapping <div>, so className style overrides can affect the whole component.

Thanks @jonotrujillo for the fix.

Make all customizable components Themeable by default 🌈

tl;dr: you don't need the Themeable version of the component anymore, the plain component is now already themeable.

---

What this means is that if at any point in the React tree there is a <Theme> component with customizations, components will pick the data from the React.context and the customize themselves, either via the props accepted in the customize prop (for Button, Checklist, Dropdown, Field, Installments and Switch) or via style.

If you are using a Themeable version of a component, such as:

import * as ThemeableButton from '@klarna/ui/themeable/Button'

you should start requiring the plain version instead:

import * as Button from '@klarna/ui/Button'

Until v2, the @klarna/ui/themeable/<component> entrypoints will be kept for compatibility, but components required that way will throw a deprecation warning.

Improve template Wrapper

Add

• Adding an onClose handler will cause the Wrapper to render the close button in the upper right corner
• Adding an onBack handler will cause the Wrapper to render the back button in the upper left corner
• Now any extra prop passed to the Wrapper will be spread in the <Dialog.Overlay> root component. This means that for example setting an id (<Wrapper id='hola'>) will work.
• Wrapper also supports the className