Telenor Frontend Component Library
Before you start, make sure you have a recent version of NodeJS environment >=8.0 with NPM 5.x
From the project folder, execute the following command:
Also make sure that you have gulp installed globally by installing it with the command:
npm install gulp-cli -g
When done, you will have installed all required dependencies.
To run the styleguide in watch mode execute the following command:
npm run watch
This command starts the styleguide and compiles the current scss-files into the stylesheet. The styleguide will be available at http://localhost:8888. Changes in the scss will automatically build and reload the styleguide.
Adding your first component
Before you start adding a new component familiarize yourself with Nucleus by reading their getting started section of annontations. To add a new component, simply add a new file to the components folder which ends in
.scss. This will make gulp react to your file and start parsing it accordingly.
Running The Tests
To ensure code quality we run linting on all scss-files. To run linting execute:
All lint warnings and errors (if any) should now appear in the console.
Committing and releasing
When commiting code for the repo you will need to use the conventional commits guidelines. This will be validated upon commit and helps us in several ways. It keeps a clean git history and helps creating a useful CHANGELOG when running a release.
Releasing new version
standard-version instead of the conventional npm version due to it's connection to conventional commits and the ability to create CHANGELOG automagically.
To release a new version you can simply type
npm run release
This will make standard-version go through the commits and decide for itself what kind of version bump is needed (major, minor and patch). However, sometimes it's easier to explicitly state what kind of version you want to bump. To help with this, we've added three simple abstractions
npm run release:patch npm run release:minor npm run release:major
You want to release a minor version of the repo.
- Add all your commits
npm run release:minor
- Chore step:
git add package-lock.json
git commit -m "chore(package-lock): bump version"
- This step is due to the changing version number of package-lock after you bump the
git push --follow-tags origin master
- (Optional) Run a npm publish
How do I enable stylelint in Intellij IDEA?
- Search for
stylelint(or go to
Languages & Frameworks>
How do I enable stylelint in VS Code?
- Open project in Code
- A list of recommended plugins will pop up, for optimal dev environment add all