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 install3. Run Storybook with:
npm startThat'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 --saveAll 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.