Chameleon Components
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.
Installation
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.
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';
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.
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.
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.
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 formatjs.io packages so it's consistent across all browsers.