Contributing Guide

Getting Started

We use the "fork and pull" model, which means you'll need to start by forking our repo, then make some changes, and then submit a pull request back to the main repo.

1. Fork this repo.
2. Run npm ci to install dependencies.
3. Run npm run storybook to start a local instance of Storybook, our preview site.

Any changes you make should automatically be reflected in the preview site.

About

The output of this project is CSS patterns and components. We generate that CSS using Sass and PostCSS.

What PostCSS Plugins do We Use?

Our PostCSS setup is minimal. We're running postcss-inline-svg to convert SVGs in the CSS into inline code, and we're running cssnano to minify the final output.

Linting

We run Stylelint against Sass files, ESLint against JS files, and Prettier against all files. Linting will be run automatically against any pull requests.

Submitting a Pull Request

You'll want to create a pull request from a fork of this repo. Once you do, we'll review your code, suggest changes, and eventually merge them! Then your changes will be available for anyone using the package, including the main MLTSHP site!

Publishing

Only admins need to worry about these step.

to npm

1. git checkout main
2. git pull
3. Make sure you have a clean working tree (git status should show no changes)
4. Update CHANGELOG.md with a summary of your changes
5. npm version [major | minor | patch]
6. npm publish - This will automatically install and compile everything, run linting, and publish
7. git push && git push --tags

to MLTSHP.com

1. npm run build
2. Copy the minified CSS files from the dist folder to the static/css folder in the MLTSHP repo.
3. Open a new PR for the updated CSS files.