Vets Design System Documentation

This is repo for the design system documentation, aka design.va.gov. If you are looking for the repo that contains the CSS and Javascript for the components, see the formation package inside the veteran-facing-services-tools repo.

Min specs:

• Jekyll
• react
• webpack

To run locally

Tested using node v8.12.0 and npm v6.4.1.

1. Clone this repo

   $ git clone https://github.com/department-of-veterans-affairs/vets-design-system-documentation.git
   

2. Install NPM dependencies

   $ npm install
   

3. Install Jekyll NOTE: This repo works with Ruby version 2.6.6. Instead of using brew install ruby, which will install the latest version, run brew install [email protected] and make sure when you are adding references to your PATH that you specify version 2.6.6 instead of 3.0.0.

4. Install Ruby gems

   $ bundle install
   

5. Build and start the Jekyll server

   $ npm run start
   

6. Verify in browser: localhost:4000

Adding content to the documentation site

To add content, you will need to look into /src directory. This will be the source from which Jekyll builds the site.

• Components pages
• Content style guide pages
• Design pages
• Experimental design pages
• Documentation pages
• Layout pages
• Design patterns pages
• Utilities pages

How to add new pages, improve presentation, etc.

Read the wiki to learn how to add new pages to design.va.gov, improve local search, add images, etc.

Testing updates to the Formation codebase on this site

In order to test new updates to Formation, you will need to work in two different repositories: the repository for this site and veteran-facing-services-tools. For the steps below, make sure you are doing your work in a new branch for both repos.

1. Clone the veteran-facing-services-tools repo at the same level as the design system documentation site.

   my-projects-folder
   |   ├── vets-design-system-documentation
   |   ├── veteran-facing-services-tools
   

2. Follow the setup instructions to get veteran-facing-services-tools running.

3. Change package.json in vets-design-system-documentation to use a local version. "@department-of-veterans-affairs/formation": "file:../veteran-facing-services-tools/packages/formation"

4. Make your changes in veteran-facing-services-tools and run $ npm run build.

5. Now, in vets-design-system-documentation, run the following:

   $ npm install
   $ npm run start
   

While vets-design-system-documentation is running and make further updates to veteran-facing-services-tools, you will need to run $ npm run build in that repo, then $ npm run build in vets-design-system-documentation.

1. When you have finished your work in veteran-facing-services-tools, follow the instructions to submit a PR and publish to NPM.

2. Once your update has been published to NPM, update package.json in vets-design-system-documentation from the local version to the new version number.

3. Commit this along with any updates to the documentation site and submit a PR.

Deploying

Merges into master will automatically be deployed to dev-design.va.gov. Production is automatically deployed every weekday at 2pm. Deploys are executed by creating a release of vets-website via Jenkins. You can track the deployment in the Slack channel, #design-system.