| 1 | ## @edenhealth/eve
|
| 2 |
|
| 3 | [![CircleCI][circleci-badge]][circleci-link]
|
| 4 | [![NpmVersion][npm-version-badge]][npm-link]
|
| 5 | [![semantic-release][semantic-release-badge]][semantic-release-link]
|
| 6 |
|
| 7 | > And [EdenHealth] called [the package] Eve, for she was the mother of
|
| 8 | > [other front-end projects].
|
| 9 |
|
| 10 | — God, probably
|
| 11 |
|
| 12 | ---
|
| 13 |
|
| 14 | `eve` contains reusable code that can be shared between @edenhealth's front-end
|
| 15 | projects as an NPM package. This may include:
|
| 16 |
|
| 17 | - CSS variables for shared colors in the Eden palette
|
| 18 | - Shared utilities for e.g., logging
|
| 19 |
|
| 20 | ### Usage
|
| 21 |
|
| 22 | To use in another project, simply install the NPM package:
|
| 23 |
|
| 24 | ```console
|
| 25 | $ yarn add -D @edenhealth/eve
|
| 26 | # Or:
|
| 27 | $ npm i --save-dev @edenhealth/eve
|
| 28 | ```
|
| 29 |
|
| 30 | Then import the dependency -- preferably at a root level view component, if using
|
| 31 | the styles. This will make any of `eve`'s CSS variables accessible in child
|
| 32 | components; e.g., to color a button "eden green" you could write:
|
| 33 |
|
| 34 | ```es6
|
| 35 | const EdenButton = styled.a`
|
| 36 | background: var(--eden-green);
|
| 37 | color: white;
|
| 38 | `
|
| 39 | render(<EdenButton>Yay Colors!</EdenButton>)
|
| 40 | ```
|
| 41 |
|
| 42 | [circleci-badge]: https://circleci.com/gh/edenhealth/eve.svg?style=shield&circle-token=4b7a18c6e9870ff9738dab4453dd6f1711395bca
|
| 43 | [circleci-link]: https://circleci.com/gh/edenhealth/eve
|
| 44 | [npm-link]: https://www.npmjs.com/package/edenhealth/eve.svg
|
| 45 | [npm-version-badge]: https://img.shields.io/npm/v/@edenhealth/eve.svg
|
| 46 | [semantic-release-badge]: https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg
|
| 47 | [semantic-release-link]: https://github.com/semantic-release/semantic-release
|