belvo-vue-components

📋 Requirements

• access to belvo-finance repository and ssh key configured
• node v15.5.0 & npm v7.3.0

Get started

npm install
npm run storybook

Run your unit tests

npm run test:unit

Lints and fixes files

npm run lint

How to create/modify components

• each component has a folder with js, token (not mandatory), stories and unit testing under the path src/components
• each component could have a scss file under the path src/assets/scss/components

Dashboard components

• Prefix db

Widget components

• Prefix wg (only on stories for now)

Common components and utility classes

• Prefix bv

🚀 Build and Publish to npm

• have access to npm belvo organization
• make sure to increase the package version
• execute the following

 npm run build-and-publish-lib

How to create new icon fonts

• Download all the fonts existing inside S3
• Import them into Icomoon Website
• Select all the icons (exclude the ones with colors like the flags)
• Select Generate Fonts
• Set the preferences using the :tools: icon you can find on the right of the Download button
  • Font Name -> icon-fonts
  • Class Prefix -> blank
  • Check Generate preprocessor variable for Sass
  • CSS Selector -> Use the class '.icon-normal'
• Generate
• Download
• Extract the zip, rename the generated fonts [.eot|.woff|.ttf] files using this notation: icon-fonts-v[Current version + 1]
• Upload them to S3
• Copy the content of the variable.scss file into src/assets/scss/icon-fonts/variables.scss
• Copy the new font class from style.scss file to the _icon.scss and the _db-con.scss file (just the new one), following the format .icon-normal-new-class
• Replace the font name inside _typography.scss with the new one (icon-fonts-v[Current version + 1])

:busts_in_silhouette: Contributing

If you wish to submit a pull request, please be sure check the items on this list:

• Tests related to the changed code were executed
• The source code has been coded following the OWASP security best practices (https://owasp.org/www-pdf-archive/OWASP_SCP_Quick_Reference_Guide_v2.pdf).
• Commit message properly labeled
• There is a ticket associated to each PR.

🐳 Deployment

To deploy to production, follow these steps:

git checkout master
git pull 
export GITHUB_TOKEN=<your github personal access token>
npm run release --allow-same-version