Chameleon Components

Chameleon components is Ebury's vue.js components library. The library is in its initial phase, more components are added regularly.

You can check the current status of the library here.

Also, check out the latest version deployed in Storybook.

Installation

If you want to contribute to the library then you must do the following to set up your local environment:

1. Clone chameleon-components repo

2. Install all dependencies with:

npm install

3. Run Storybook with:

npm start

That's it! By now you should be up and running. You can check the existing components or create new ones.

Contributing

We love collaborating with other teams and welcome contributions!

See the contributing docs for more info on code style, formatting, testing, and troubleshooting. Or if you want to report a problem or request some change.

Usage

Install the library in your project

Install @ebury/chameleon-components in your project with npm:

npm install @ebury/chameleon-components --save

Import component/s

All of our components are exported by name from @ebury/chameleon-components, so you can import them with:

import { ComponentName } from '@ebury/chameleon-components';

Theming

The components can use a custom theme. There are four color palettes used by the CSS, two of them can be adjusted via CSS variables, e.g. the default blue color is defined as --ec-key-color-level-4 and can be configured via --ec-theme-key-color-level-4.

Checkout the list of possible variables in the storybook colors story.

A few examples of a theme can be found in the src/styles/themes/ folder.

I18n

Some components, e.g. ec-amount-input or ec-donut require Intl API to format values properly or to detect what is the decimal/grouping separator for a current locale. They both do that via Intl.NumberFormat which might have issues in some browsers for not having all locales set up properly. See the issues we discovered in this PR. If you need to support every single locale on the planet, we recommend to polyfill the Intl API using intl package so it's consistent across all browsers.

<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=Intl.~locale.en|always"></script>

CSS variables polyfill

If you support IE11 browser, you have to include the CSS vars ponyfill when using our components. Follow their instructions how to install it an used it.

AbortController polyfill

ec-smart-table component uses withAbortableFetch HOC, which uses AbortController to abort previous requests. If you support IE11 browser, you have to include AbortController polyfill in your code.