Skip to content

Latest commit

 

History

History
233 lines (163 loc) · 14.6 KB

CONTRIBUTING.md

File metadata and controls

233 lines (163 loc) · 14.6 KB

Contributing to Mayflower

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.

On this page:

  1. Using the issue tracker
    1. Issue Labels
  2. Bug Reports
  3. Feature Requests
  4. Submitting Pull Requests
    1. Getting started
      1. Get Set Up
      2. Forking the repo
      3. Cloning the repo
      4. Installing project dependencies
      5. Keeping in sync
    2. Submitting your work
      1. Spinning up a branch
      2. Working with Pattern Lab
      3. Committing your work
      4. Pushing your branch
      5. Deploying your work
      6. Creating a Pull Request
      7. Review by Maintainers

Using the issue tracker

The issue tracker is the preferred channel for bug reports, features requests and submitting pull requests.

Issue Labels

We use labels to help identify and organize issues. Here's what they represent and how we use them:

  • 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.
  • confirmed - Issues that have been confirmed with a reduced test case and identify a bug in Mayflower.
  • css - Issues stemming from our compiled CSS or source Sass files.
  • docs - Issues for improving or updating our documentation.
  • examples - Issues involving the example patterns (i.e. content or data) included on our site.
  • feature - Issues asking for a new feature to be added, or an existing one to be extended or modified.
  • build - Issues with our build system, which is used to run all our tests, concatenate and compile source files, and more.
  • PRs welcome - Issues we need or would love help from the community to resolve.
  • js - Issues stemming from our compiled or source JavaScript files.
  • meta - Issues with the project itself or our GitHub repository.

Bug Reports

A bug is a demonstrable problem that is caused by the code in the repository. Good bug reports are extremely helpful, so thanks!

Guidelines for bug reports:

  1. Use the GitHub issue search — check if the issue has already been reported.

  2. Check if the issue has been fixed — try to reproduce it using the latest master or dev branch in the repository.

  3. Isolate the problem — ideally create a reduced test case and a live example.

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.

Example:

Short and descriptive example bug report title

The browser/OS environment and Mayflower Version in which it occurs.

Expected behavior - what you would expect to happen on the page / site.

Existing behavior - what is currently happen on the page / site.

If suitable, include the steps required to reproduce the bug.

  1. This is the first step
  2. This is the second step
  3. Further steps, etc.

<url> - a link to the reduced test case

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).

Feature requests

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.

Pull Requests

Good pull requests—patches, improvements, new features—are a fantastic help!

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.

Work in source directories

You can modify these files in order to resolve issues and add new features:

Please do not edit the gh-pages branch. That branch is generated and used to deploy work for testing.

Getting Started

Get set up

In order to run Mayflower locally, you need to have some things installed and set up on your machine. See setting up your machine.

Forking the repo

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.

  1. Visit the Mayflower repo on Github
  2. Click the "Fork" icon in the upper right of the page
  3. 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

Cloning the repo

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.

  1. git clone [email protected]:<your github username>/mayflower.git
  2. Or, if you don't have ssh set up on your local environment or with github, navigate to your fork of the Mayflower repository at https://github.com/<your-github-username>/mayflower.
    1. Follow from Step 2 of Github Help: Cloning a repository.
  3. You now have a local representation of your Mayflower! Change directory into the repo root: cd mayflower

Installing project dependencies

  1. Move into the styleguide directory cd styleguide
  2. Generate pattern lab default files php core/console --generate
  3. Install npm dependencies npm install

Keeping in sync

In order to make it easy to keep your fork in sync with the original (massgov/mayflower), add the original as a remote:

git remote add upstream [email protected]:massgov/mayflower.git

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.

Submitting your work

Creating a branch

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.

Make sure your local branch (dev for features, master for prod bugs) is up-to-date with the upstream repo (massgov/mayflower).

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:

git checkout dev
git fetch upstream
git merge upstream/dev
git push origin dev

Now you can create your new branch:

git checkout -b my-issue-number-feature-name

If you were working on ticket DP-1234-create-backto-link, then you would type:

git checkout -b DP-1234-create-backto-link

Working with Pattern Lab

Serve Mayflower locally and as you save your changes, it will update automatically:

  1. Read the Pattern Lab docs!
  2. Run gulp from the /styleguide directory.
  3. Browse to http://localhost:3000/ (or port shown in gulp output if you've configured it differently)
  4. Familiarize yourself with Mayflower:
    • 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).
    • 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).
    • You can learn about patterns by clicking the top right COG icon, then selecting "Show Pattern Info" from the drop down.
  5. All work is done in the /styleguide/source directory.
    • Most patterns will have a .twig markup file, .json default data file, and .md documentation file in the /styleguide/source/_patterns directory.
    • 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 to organize and BEM to structure our scss which gets compiled to css during build and automatically with the gulp task running.
    • If a pattern has js functionality associated with it, the corresponding ES6 module .js file can be found in the /styleguide/source/assets/js/modules directory.
  6. These assets will automatically recompile and the browser will refresh as you save changes.
Other notes
  • 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.
  • 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.
  • Pattern Lab specific files are in the /styleguide/public/styleguide directory (the styleguide.html file is automatically generated when twig templates are updated).

Committing your work

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.

Chris Beam explains How to Write a Git Commit Message:

... 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.

We also love the model Git commit message in Tim Pope's A Note About Git Commit Messages.

Pushing your branch

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).

To push a new branch up to your fork:

git push -u origin DP-1234-create-backto-link

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.

Deploying your work

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 for step by step instructions.

Creating a Pull Request

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.

  1. Follow the steps on Github Help: Creating a pull request from a fork.
    • Make sure that the "base fork" points to massgov/mayflower and that "base" (branch) points to dev for features, master for production bug fixes.
    • 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:
      • Anyone could be reading this Pull Request, so the content and tone may inform people other than those taking part, now or later.
      • 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.
      • 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.
      • @mention individuals that you specifically want to involve in the discussion, and mention why. (“/cc @jesconstantine for clarification on this logic”)
      • @mention teams that you want to involve in the discussion, and mention why. (“/cc @github/security, any concerns with this approach?”)

Review by Maintainers

Once you've opened your PR, Mayflower maintainers will review and either request changes or merge it.

Thanks again!

Acknowledgements

Thanks to the Twitter Bootstrap for having great contribution guidelines, and also to Rob Allen's The beginner's guide to contributing to a GitHub project and Matt Stauffer's How to contribute to an open-source GitHub project using your own fork for providing helpful instructions on working with Github open source projects.