Developers

Install Project

A quick start guide for installing the local development tools needed for contributing to the Red Hat Design System.

1. Install Git for your system.

2. Install Node Version Manager for your system.

3. Clone the Red Hat Design System repository from Github.

4. Navigate into your project folder

5. Run Node Version Manager's use command to switch to the projects Node version.

   If prompted, follow the instructions for installing specific version of Node used by this project on your system, which will look similar to the following:

   You need to run "nvm install v20.10.0" to install it before using it.

6. Install project dependencies, run npm ci

Development Servers

1. Start the development servers npm run start.

   Two servers will start, if no other processes are using port :8000 or :8080 the element development server will load on :8000 and the documentation server will load on :8080. The element server will auto open a browser window, the documentation server however will not.

2. To run these servers independently you can use the commands npm run dev and npm run serve.

Creating a new element

1. Run the new element generator command npm run new

2. You will be prompted for a element name. For Red Hat Design System elements use prefix rh- followed by the elements name e.g: rh-element-name.

3. A new folder will be created in the ./elements/rh-element-name directory with the name of the element you chose.

   The following files will also be created for you:

   • ./elements/rh-element-name/demo/rh-element-name.html
   • ./elements/rh-element-name/demo/rh-element-name.js Deprecated
   • ./elements/rh-element-name/demo/demo.css Deprecated
   • ./elements/rh-element-name/docs/rh-element.html Deprecated
     • Rename this file to 00-overview.md
   • ./elements/rh-element-name/test/rh-element-name.spec.ts
   • ./elements/rh-element-name/test/rh-element-name.e2e.ts
   • ./elements/rh-element-name/rh-element-name.ts
   • ./elements/rh-element-name/rh-element-name.css
   • ./elements/rh-element-name/README.md

4. For more information please read our Wiki page on adding new components

Testing

1. To run all unit tests use command npm run test

2. To run individual element unit tests use the test command with element test path flag

3. The project uses Mocha and Chai and are run via Web Test Runner

4. For more detailed information about testing and how we write tests please see our Testing Wiki page.

Writing Code

1. Please read our Developer Guidelines section of our Wiki
   • Custom Element API Style Guide
   • Shadow DOM
   • HTML Formatting
   • CSS
   • JSDoc

Contributing

1. When your code is ready to push to our repository, please open a Pull Request/Merge Request. You may first need to request access. Please reach out to us on Slack #red-hat-design-system Internal Red Hat only or open an issue.
2. Before pushing your code please read our Pull Request Review Guide on our Wiki

Designers

To get started using our design system as a designer, go to the Designers page.