Document contribution steps on how to create wrapped components

Document contribution steps on how to create wrapped components

Steps

1. Select a component
2. Determine the scenarios (different types of implementations) in which this component is used in gitlab-ce/ee
3. Document those scenarios in an issue
4. Select a scenario that is implemented in gitlab-ce/ee that you will replace with your component
5. Create a MR to gitlab-ui implementing your new component
   1. Be sure to name your MR feat: <commit message> as that is needed for our npm release CI job
   2. Create component.vue in components/ directory
   3. Create a story component.js in stories/ directory
   4. Run yarn test --updateSnapshot to generate your image snapshots for diffing
6. Create a MR to gitlab-ce/ee to replace the scenario implementation that you previously selected
   1. Update your package.json dependency reference of @gitlab-org/gitlab-ui to the URL output of the upload_artifacts ci job in your gitlab-ui MR
   2. Run yarn install to make sure that the gitlab-ui contents are installed
   3. Add a new component import to app/assets/javascripts/commons/gitlab_ui.js so that your component is globally registered
7. Once you've verified that your integration MR to gitlab-ce/ee is working, assign a maintainer to review both gitlab-ui and gitlab-ce/ee MRs
8. Maintainer will merge the gitlab-ui MR, run the manual CI job on master to make a new release onto NPM
9. (You or maintainer) will update your integration MR package.json dependency reference to the newly released gitlab-ui version
10. Maintainer will merge the integration MR

Methods to streamline steps

1. Create CLI (eg. yeoman) to create templates for gitlab-ui MR #14 (closed)
   1. Auto generate component.vue in components directory
   2. Auto generate component.js in stories directory
2. Create system for checking commit messages and MR titles so that they fit the semantic release format