Developers

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.

git clone git@github.com:RedHat-UX/red-hat-design-system.git

cd red-hat-design-system

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

nvm use

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.

Install project dependencies, run npm ci

npm ci

RHDS repo comes with two dev servers, one for working on elements, the other for working on patterns and docs.

Start the development servers npm start.

npm 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.

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

npm run dev

npm run serve

Run the new element generator command npm run new

npm run new

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.

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

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

To run all unit tests use command npm test

npm test

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

npm run test -- -- ./elements/rh-element-name/test/rh-element-name.spec.ts

The project uses Mocha and Chai and are run via Web Test Runner. For more detailed information about testing and how we write tests please see our Testing page on the Wiki and our introduction to testing RHDS components with Chai A11y aXe and a11ySnapshot.

Please read our Developer Guidelines section of our Wiki

• Custom Element API Style Guide
• Shadow DOM
• HTML Formatting
• CSS
• JSDoc

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.

Before pushing your code please read our Pull Request Review Guide on our Wiki