Skip to content

2. Building a new component

Jump to bottom
Matt Tyas edited this page Oct 29, 2019 · 10 revisions

  1. Add a new component.

  2. Make sure the design-system/node_modules/@coopdigital folder contains your new component.

  3. Add @import "component-[component-name]/src/[component-name].pcss"; to main.css in the design-system/src/_css.

  4. Add the CSS for your component to packages/component-[component-name]/src/[component-name].pcss.

  5. Create a new page in design-system/src/pattern-library/examples/components copied from one of the other examples in the folder.

  6. Add the mark-up (HTML) for the component into this new file.

  7. Navigate to localhost:9000/pattern-library/examples/components/[component-name].html.

  8. If everything is correct paste only the mark up (HTML) into packages/component-[component-name]/src/[component-name].html.

  9. Stop the server.

  10. Run NPM run server - this will copy the HTML into the includes folder in Jekyll ready to be used.

  11. Go to design-system/src/pattern-library/components... and create a page based on the ones there to house your component.

  12. Go to https://be.contentful.com/login and navigate to the design-system space.

  13. Select 'Add entry' > design-pattern and create a page for your component.

  14. Write the documentation.

  15. Publish.

  16. Back in your editor stop the server and rerun NPM run server - this will get the latest data from Contentful.

  17. Open design-system/src/_data/contentful/spaces/design-system-content.yaml and search for your component's name.

  18. Copy the ID of the page and paste into your page (from step 11) the ID where you see `{% if designPattern.sys.id == 'XXXXXXXXXXXXXXXXXXXXX' %}'.

  19. Change the include file where the HTML and example code is help to match the path to your component. For example: {% include pattern-library/components/component-card/src/card.html %}.

  20. If everything looks good - commit, push to your branch and raise a pull request.

  21. Ask for a review from another front-end engineer on the #frontend channel in Slack.

  22. If that is merged - check that the build pipeline ran okay.

  23. If the pipeline passed you're ready to [https://github.com/coopdigital/coop-frontend/wiki/3.-Publishing-a-component](publish your component to NPM).

  24. Your component should be live at https://coop-design-system.herokuapp.com/pattern-library/components/folder-name/component-name.html

Clone this wiki locally