|
| 1 | +# Contributing to Mayflower |
| 2 | + |
| 3 | +Thanks for contributing to Mayflower! Please take a minute to review the process outlined in this document to ensure that contribution is easy and effective for everyone involved. |
| 4 | + |
| 5 | +**On this page:** |
| 6 | +1. [Using the issue tracker](#using-the-issue-tracker) |
| 7 | + 1. [Issue Labels](#issue-labels) |
| 8 | +1. [Bug Reports](#bug-reports) |
| 9 | +1. [Feature Requests](#feature-requests) |
| 10 | +1. [Submitting Pull Requests](#submitting-pull-requests) |
| 11 | + 1. [Getting started](#getting-started) |
| 12 | + 1. [Get Set Up](#get-set-up) |
| 13 | + 1. [Forking the repo](#forking-the-repo) |
| 14 | + 1. [Cloning the repo](#cloning-the-repo) |
| 15 | + 1. [Installing project dependencies](#installing-project-dependencies) |
| 16 | + 1. [Keeping in sync](#keeping-in-sync) |
| 17 | + 1. [Submitting your work](#submitting-your-work) |
| 18 | + 1. [Spinning up a branch](#spinning-up-a-branch) |
| 19 | + 1. [Working with Pattern Lab](#working-with-pattern-lab) |
| 20 | + 1. [Committing your work](#committing-your-work) |
| 21 | + 1. [Pushing your branch](#pushing-your-branch) |
| 22 | + 1. [Deploying your work](#deploying-your-work) |
| 23 | + 1. [Creating a Pull Request](#creating-a-pull-request) |
| 24 | + 1. [Review by Maintainers](#review-by-maintainers) |
| 25 | + |
| 26 | +## Using the issue tracker |
| 27 | +The [issue tracker](https://github.com/massgov/mayflower/issues) is the preferred channel for [bug reports](#bug-reports), [features requests](#feature-requests) and [submitting pull requests](submitting-pull-requests). |
| 28 | + |
| 29 | +### Issue Labels |
| 30 | +We use labels to help identify and organize issues. Here's what they represent and how we use them: |
| 31 | + |
| 32 | +- `browser bug` - Issues that are reported to us that are the result of a browser-specific bug. These are diagnosed with reduced test cases and result in an issue opened on that browser's own bug tracker. |
| 33 | +- `confirmed` - Issues that have been confirmed with a reduced test case and identify a bug in Mayflower. |
| 34 | +- `css` - Issues stemming from our compiled CSS or source Sass files. |
| 35 | +- `docs` - Issues for improving or updating our documentation. |
| 36 | +- `examples` - Issues involving the example patterns (i.e. content or data) included on our site. |
| 37 | +- `feature` - Issues asking for a new feature to be added, or an existing one to be extended or modified. |
| 38 | +- `build` - Issues with our build system, which is used to run all our tests, concatenate and compile source files, and more. |
| 39 | +- `PRs welcome` - Issues we need or would love help from the community to resolve. |
| 40 | +- `js` - Issues stemming from our compiled or source JavaScript files. |
| 41 | +- `meta` - Issues with the project itself or our GitHub repository. |
| 42 | + |
| 43 | +## Bug Reports |
| 44 | +A bug is a _demonstrable problem_ that is caused by the code in the repository. Good bug reports are extremely helpful, so thanks! |
| 45 | + |
| 46 | +Guidelines for bug reports: |
| 47 | + |
| 48 | +1. **Use the GitHub issue search** — check if the issue has already been |
| 49 | + reported. |
| 50 | + |
| 51 | +2. **Check if the issue has been fixed** — try to reproduce it using the |
| 52 | + latest `master` or `dev` branch in the repository. |
| 53 | + |
| 54 | +3. **Isolate the problem** — ideally create a [reduced test |
| 55 | + case](https://css-tricks.com/reduced-test-cases/) and a live example. |
| 56 | + |
| 57 | +A good bug report shouldn't leave others needing to chase you up for more information. Please try to be as detailed as possible in your report. What is your environment? What steps will reproduce the issue? What browser(s) and OS experience the problem? Do other browsers show the bug differently? What would you expect to be the outcome? All these details will help people to fix any potential bugs. |
| 58 | + |
| 59 | +Example: |
| 60 | + |
| 61 | +> Short and descriptive example bug report title |
| 62 | +> |
| 63 | +> The browser/OS environment and Mayflower Version in which it occurs. |
| 64 | + |
| 65 | +> Expected behavior - what you would expect to happen on the page / site. |
| 66 | +
|
| 67 | +> Existing behavior - what is currently happen on the page / site. |
| 68 | +
|
| 69 | +> If suitable, include the steps required to reproduce the bug. |
| 70 | +> |
| 71 | +> 1. This is the first step |
| 72 | +> 2. This is the second step |
| 73 | +> 3. Further steps, etc. |
| 74 | +> |
| 75 | +> `<url>` - a link to the reduced test case |
| 76 | +> |
| 77 | +> Any other information you want to share that is relevant to the issue being reported. This might include the lines of code that you have identified as causing the bug, and potential solutions (and your opinions on their merits). |
| 78 | +
|
| 79 | +## Feature requests |
| 80 | + |
| 81 | +Feature requests are welcome. But take a moment to find out whether your idea fits with the scope and aims of the project. It's up to *you* to make a strong case to convince the project's designers and developers of the merits of this feature. Please provide as much detail and context as possible. |
| 82 | + |
| 83 | +## Pull Requests |
| 84 | + |
| 85 | +Good pull requests—patches, improvements, new features—are a fantastic help! |
| 86 | + |
| 87 | +**Please ask first** before embarking on any significant pull request (e.g. implementing features, refactoring code, porting to a different language), otherwise you risk spending a lot of time working on something that the project's developers might not want to merge into the project. |
| 88 | + |
| 89 | +### Work in source directories |
| 90 | +You can modify these files in order to resolve issues and add new features: |
| 91 | + - Styles: [`/styleguide/source/assets/scss/`](https://github.com/massgov/mayflower/tree/master/styleguide/source/assets/scss) |
| 92 | +- Javascript functionality: [`/styleguide/source/assets/js/`](https://github.com/massgov/mayflower/tree/master/styleguide/source/assets/js) |
| 93 | + - Pattern markup, documentation, and data: [`/styleguide/source/_patterns`](https://github.com/massgov/mayflower/tree/master/styleguide/source/_patterns) |
| 94 | + |
| 95 | +**Please do not edit the `gh-pages` branch.** That branch is generated and used to deploy work for testing. |
| 96 | + |
| 97 | +### Getting Started |
| 98 | + |
| 99 | +#### Get set up |
| 100 | + |
| 101 | +In order to run Mayflower locally, you need to have some things installed and set up on your machine. See [setting up your machine](../docs/machine-setup.md). |
| 102 | + |
| 103 | +#### Forking the repo |
| 104 | + |
| 105 | +A fork is a *copy* of a repository. Forking a repository allows you to freely experiment with changes without affecting the original project. Learn more about forking repositories on [Github Help](https://help.github.com/articles/fork-a-repo/). |
| 106 | + |
| 107 | +1. Visit the [Mayflower repo on Github](https://github.com/massgov/mayflower) |
| 108 | +1. Click the "Fork" icon in the upper right of the page |
| 109 | +1. This will create a fork of the project under your user account which you can browse to at: `https://github.com/<your-github-username>/mayflower` |
| 110 | + |
| 111 | +#### Cloning the repo |
| 112 | +Right now, you have a fork of the Mayflower repository, but you don't have the files in that repository on your computer. Let's create a clone of your fork locally on your computer. |
| 113 | + |
| 114 | +1. `git clone git@github.com:<your github username>/mayflower.git` |
| 115 | +1. Or, if you don't have [ssh set up on your local environment or with github](https://help.github.com/articles/connecting-to-github-with-ssh/), navigate to your fork of the Mayflower repository at `https://github.com/<your-github-username>/mayflower`. |
| 116 | + 1. Follow from Step 2 of [Github Help: Cloning a repository](https://help.github.com/articles/cloning-a-repository/). |
| 117 | +1. You now have a local representation of *your* Mayflower! Change directory into the repo root: `cd mayflower` |
| 118 | + |
| 119 | +#### Installing project dependencies |
| 120 | + |
| 121 | +1. Move into the styleguide directory `cd styleguide` |
| 122 | +1. Generate pattern lab default files `php core/console --generate` |
| 123 | +1. Install npm dependencies `npm install` |
| 124 | + |
| 125 | +#### Keeping in sync |
| 126 | + |
| 127 | +In order to make it easy to keep your fork in sync with the original (`massgov/mayflower`), add the original as a remote: |
| 128 | + |
| 129 | +``` |
| 130 | +git remote add upstream git@github.com:massgov/mayflower.git |
| 131 | +``` |
| 132 | + |
| 133 | +If you check your remotes (`git remote -v`), you can now see that you have two "remotes" that your local repo is pointed towards: `origin`, which points to *your* Mayflower fork, and `upstream`, which points to `massgov/mayflower`. |
| 134 | + |
| 135 | +### Submitting your work |
| 136 | + |
| 137 | +#### Creating a branch |
| 138 | + |
| 139 | +Any new features and non-emergency bugfixes should branch from the `dev` branch. Hot fixes (production bug fixes) should be branched from the latest release `tag` in the `master` branch. |
| 140 | + |
| 141 | +Make sure your local branch (`dev` for features, `master` for prod bugs) is up-to-date with the `upstream` repo (`massgov/mayflower`). |
| 142 | + |
| 143 | +If you just forked it, you're probably all set. But if there have been a lot of changes to `massgov/mayflower` since you forked it, yours might be out of sync. Here's how to get yours in sync: |
| 144 | + |
| 145 | +``` |
| 146 | +git checkout dev |
| 147 | +git fetch upstream |
| 148 | +git merge upstream/dev |
| 149 | +git push origin dev |
| 150 | +``` |
| 151 | + |
| 152 | +Now you can create your new branch: |
| 153 | + |
| 154 | +``` |
| 155 | +git checkout -b my-issue-number-feature-name |
| 156 | +``` |
| 157 | + |
| 158 | +If you were working on ticket DP-1234-create-backto-link, then you would type: |
| 159 | + |
| 160 | +``` |
| 161 | +git checkout -b DP-1234-create-backto-link |
| 162 | +``` |
| 163 | + |
| 164 | +#### Working with Pattern Lab |
| 165 | + |
| 166 | +Serve Mayflower locally and as you save your changes, it will update automatically: |
| 167 | + |
| 168 | +1. Read the [Pattern Lab docs](http://patternlab.io/docs/index.html)! |
| 169 | +1. Run `gulp` from the `/styleguide` directory. |
| 170 | +1. Browse to [http://localhost:3000/](http://localhost:3000/) (or port shown in gulp output if you've configured it differently) |
| 171 | +1. Familiarize yourself with Mayflower: |
| 172 | + - You can use the menu to look at whole page layouts (pages), templates, components (organisms and molecules), child elements (molecules and atoms), and some nuts and bolts (base). |
| 173 | + - You can emulate different device sizes by using the size buttons at the top right of the menu bar (S M L FULL RANDOM DISCO). |
| 174 | + - You can learn about patterns by clicking the top right COG icon, then selecting "Show Pattern Info" from the drop down. |
| 175 | +1. All work is done in the `/styleguide/source` directory. |
| 176 | + - Most patterns will have a `.twig` [markup file](https://twig.sensiolabs.org/), `.json` default [data file](http://patternlab.io/docs/data-pattern-specific.html), and `.md` [documentation file](http://patternlab.io/docs/pattern-documenting.html) in the `/styleguide/source/_patterns` directory. |
| 177 | + - If a pattern has styles associated with it, the corresponding `.scss` files can be found in the `/styleguide/source/assets/scss` directory. We use [SMACSS](https://smacss.com/book/categorizing) to organize and [BEM](http://getbem.com/introduction/) to structure our [scss](http://sass-lang.com/guide) which gets compiled to css during build and automatically with the `gulp` task running. |
| 178 | + - If a pattern has js functionality associated with it, the corresponding [ES6 module](https://hacks.mozilla.org/2015/08/es6-in-depth-modules/) `.js` file can be found in the `/styleguide/source/assets/js/modules` directory. |
| 179 | +1. These assets will automatically recompile and the browser will refresh as you save changes. |
| 180 | + |
| 181 | +##### Other notes |
| 182 | + |
| 183 | +* It is helpful to have 2 terminal tabs open when working on this project: one to manage `gulp` tasks and the other to manage `git`. From the tab running `gulp`, type `CTRL` + `C` to kill that task when you're done. |
| 184 | +* `gulp` will build the Pattern Lab static assets and generate a static site in the `/styleguide/public` directory. See `/styleguide/tools/gulp/gulp-readme.md`. |
| 185 | +* Pattern Lab specific files are in the `/styleguide/public/styleguide` directory (the `styleguide.html` file is automatically generated when twig templates are updated). |
| 186 | + |
| 187 | +#### Committing your work |
| 188 | + |
| 189 | +Make your changes and commit them. Ensure that you only commit the thing you're working on. Make sure that you commit in logical blocks. |
| 190 | + |
| 191 | +Chris Beam explains [How to Write a Git Commit Message](https://chris.beams.io/posts/git-commit/): |
| 192 | +> ... a well-crafted Git commit message is the best way to communicate context about a change to fellow developers (and indeed to their future selves). A diff will tell you *what* changed, but only the commit message can properly tell you *why*. |
| 193 | +
|
| 194 | +We also love the model Git commit message in Tim Pope's [A Note About Git Commit Messages](http://tbaggery.com/2008/04/19/a-note-about-git-commit-messages.html). |
| 195 | + |
| 196 | +#### Pushing your branch |
| 197 | +In order to create a Pull Request (PR) where maintainers can review your work, you first need to push your branch to the `origin` remote (i.e. your Mayflower fork). |
| 198 | + |
| 199 | +To push a new branch up to your fork: |
| 200 | + |
| 201 | +``` |
| 202 | +git push -u origin DP-1234-create-backto-link |
| 203 | +``` |
| 204 | + |
| 205 | +This will create the branch on your Mayflower fork. The `-u` flag links this branch with the remote one, so that in the future, you can simply type `git push origin`. |
| 206 | + |
| 207 | +#### Deploying your work |
| 208 | + |
| 209 | +Once your work is complete, deploy your branch to your Mayflower fork's Github Pages, so that its functionality can be tested and reviewed by someone who doesn't have Mayflower running locally. See [our deployment docs](../docs/deploy.md#developer-deployment) for step by step instructions. |
| 210 | + |
| 211 | +#### Creating a Pull Request |
| 212 | +Pull requests (PRs) let you tell others about changes you've pushed to a repository on GitHub. Once a pull request is opened, you can discuss and review the potential changes with collaborators and add follow-up commits before the changes are merged into the repository. |
| 213 | + |
| 214 | +1. Follow the steps on [Github Help: Creating a pull request from a fork](https://help.github.com/articles/creating-a-pull-request-from-a-fork/). |
| 215 | + - Make sure that the "base fork" points to `massgov/mayflower` and that "base" (branch) points to `dev` for features, `master` for production bug fixes. |
| 216 | + - For your PR title, please use: `TICKET Description of ticket`, i.e. `DP-1234 Add back-to button on Announcement template`. Follow the PR template for the rest of the information. Keep in mind: |
| 217 | + - Anyone could be reading this Pull Request, so the content and tone may inform people other than those taking part, now or later. |
| 218 | + - Be explicit about what feedback you want, if any: a quick pair of eyes on the code, discussion on the technical approach, critique on design, a review of copy. |
| 219 | + - Be explicit about when you want feedback, if the Pull Request is work in progress, say so. A prefix of “[WIP]” in the title is a simple, common pattern to indicate that state. |
| 220 | + - @mention individuals that you specifically want to involve in the discussion, and mention why. (“/cc @jesconstantine for clarification on this logic”) |
| 221 | + - @mention teams that you want to involve in the discussion, and mention why. (“/cc @github/security, any concerns with this approach?”) |
| 222 | + |
| 223 | +#### Review by Maintainers |
| 224 | + |
| 225 | +Once you've opened your PR, Mayflower maintainers will review and either request changes or merge it. |
| 226 | + |
| 227 | +Thanks again! |
| 228 | + |
| 229 | +*** |
| 230 | + |
| 231 | +## Acknowledgements |
| 232 | + |
| 233 | +Thanks to the [Twitter Bootstrap](https://github.com/twbs/bootstrap) for having great contribution guidelines, and also to Rob Allen's [The beginner's guide to contributing to a GitHub project](https://akrabat.com/the-beginners-guide-to-contributing-to-a-github-project/) and Matt Stauffer's [How to contribute to an open-source GitHub project using your own fork](https://mattstauffer.co/blog/how-to-contribute-to-an-open-source-github-project-using-your-own-fork) for providing helpful instructions on working with Github open source projects. |
0 commit comments