Chameleon Components is Ebury’s vue.js 3.X components library. The library is being used for our Vue projects at Ebury, and more components are added regularly.
Also, check out the latest version deployed in Storybook.
If you’d like 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.
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.
Install @ebury/chameleon-components
in your project with npm:
npm install @ebury/chameleon-components --save
All of our components are exported by name from @ebury/chameleon-components
, so you can import them with:
import { ComponentName } from '@ebury/chameleon-components';
NOTE! If you are going to use ec-phone-number-input
, you must host icons from node_modules/svg-country-flags/png100px/
in your project.
For example icon with path node_modules/svg-country-flags/png100px/gb.png
should be available in your project by url [your static prefix]icons/country-flags/100/gb.png
.
Static prefix could be change by setting up respective iconsStaticPrefix
property in src/config.js
.
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
.
Check out 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.
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 formatjs.io packages so it’s consistent across all browsers.