Contributing to the design system

This page explains the process (or processes) by which the design system gets updated

Audience

The main audience of this documentation is developers. Because the purpose of the documentation is to help the development team create consistent and functional experiences for users, it is organized and written in such a way as to maximize understanding and accelerate implementation. To help make this document as useful as possible, first and foremost, be sure include relevent examples that accelerate implementation and reduce confusion.

For a more in-depth opionion on the direction of this style guide, please see: https://medium.com/eightshapes-llc/documenting-components-9fe59b80c015

Components

This style guide is itself a separate app from the GrowPath app. the stylesheets in this repo (and documentation) should be kept up to date with the application.

Process

For CSS, this is relatively straightforward. The output .css file from the core app can be exported and replace the file at css/growpath.css within this repo. This is the file imported by all of the rendered components in this style guide.

For components requiring javascript, the js bundle and other appropriate scripts can be loaded directly into the <head> of the rendered component.

Each component documentation has a few files:

  • _includes/patterns/{groupName}/{componentName}.markup.html contains the example html markup.

  • _includes/patterns/{groupName}/{componentName}.markup.erb contains the example embedded ruby markup.

  • patterns/{groupName}/{componentName}.rendered.html contains the version of the component that will be rendered on the component details page inside of an iframe.

  • components/{groupName}/{componentName}.md contains the information of the components details page, including a description, class names, and links to the appropriate includes for the page.

A note on inline SVGs

Some components include SVGs included with the inline_svg_tag function. Because the function is not included in this style guide, inline SVG code should be used in the rendered version of the component instead.

For example:

<div class="my-component">
  <%= inline_svg_tag("smile") %>
</div>

should be inlined like this:

<div class="my-component">
  <svg>
    <path…
  </svg>
</div>