# mediafly-js-ui
UI components for Mediafly apps.

[View changelog](https://github.com/mediafly/engagement-document-component/CHANGELOG.md)

[![Build Status](https://mediafly.semaphoreci.com/badges/engagement-js-ui/branches/main.svg?key=6ae72519-9b13-4fff-8ba1-4ae9e9ca7354)](https://mediafly.semaphoreci.com/projects/engagement-js-ui)



## Getting started

Match your Node version to the contents of `.node-version` in the project root and run `npm ci` to install dependencies.

You'll also need to be authenticated to the Mediafly NPM org.


## Working locally

Add `127.0.0.1 local.imediafly.com` to your hosts file.

Run the site locally: `npm start`

Run unit tests once: `npm test`

Run Karma server to develop unit tests with hot reload: `npm run karma`

Run e2e tests with Cypress: `npm start` then `npm run cypress` in a 2nd terminal


## Landing & releasing a new version
1. Merge your feature branch. Ideally, squash the branch and put a useful summary
in the commit message.
2. Switch to `main` and add an entry in `CHANGELOG.md`, under the version that will be released.
3. Stage the changelog modification, but don't commit.
4. Run `npm run release` and follow the prompts. By default this will be a patch
release. To do a major/minor release, pass the flag like this: `npm run release -- major`.


## Updating the mfly webfont
1. Go to the IcoMoon App: https://icomoon.io/app/#/select
2. Click "import icons" and select `src/fonts/mfly-webfont-v1.x.json`.
This will load the font project.
3. Drag the new SVG into the project and click it to add it to the font (it will
turn white with an orange border).
4. Click the hamburger icon on the top right of the mfly-webfont section. Select
"Download JSON".
5. Increment the version number and add this to the file name (if the old json
was named `v1.5`, you would add `-v1.6` to the new json).
6. Add this file to the project in `src/fonts` and delete the previous json file.
7. Back in IcoMoon, at the bottom of the window, click "Generate Font".
8. Hit the settings gear next to the Download button. Update the version in this window.
Set the prefix to `mfly-font` and the name to `mfly-webfont`.
9. Hit download. Unzip this archive. Copy the `.woff` file into `src/fonts`, overwriting
the old font file.
10. Next, update `src/components/less/fonts/mfly-webfont.less` by adding the new glyph name
and its codepoint (ex: `e907`). You can find these on the "Generate Font" page
in IcoMoon.
11. Add an example of the new glyph in `app/basics/webfont/webfont.page.html` to
make sure the font works end-to-end.

Now you should be good to go! Check this all in and do a release.