HSDS: React

Help Scout Design System (HSDS) — React Component Library.

HSDS is a resource for designers and engineers that follows these principles:

  • The source of truth for UI components at Help Scout.
  • One of the goals fo HSDS is to make it possible to componentize the front-end.
  • It strives to be unambiguous, so there should not be multiple variations of the same component.
  • We design and develop thinking for the short term, keeping things simple and iteratively adding features as we need them.
  • Empowering contributors by minimizing the amount of blockers and hurdles.
  • Contributors should be confident to push back on design or changes to an existent component within HSDS (there should be a valid reason for a new component/variant)
  • The insights from engineering and design hold equal weight. Questions, input and advice are always welcome.
  • Hold people accountable and make collaboration easier by providing points of contact for each component (who designed and who coded) and which part of the product is using it.
View Demo View Github

Install

npm install @helpscout/hsds-react --save

Getting Started

After cloning this repo down, run:

npm install

Once everything is installed, run:

npm start

Check out HSDS's Storybook at http://localhost:8900/ in your browser!

SVG Adapter

As of v2.18.0, the svg set is opt-in. This was done to reduce the compiled bundle size. To load the svg icons, add the appropriate adapter to your app.

It is recommended that the adapter be loaded somewhere within your main entry point (e.g. src/index.js).

// src/index.js
// For a lighter-weight svg set for embeddables
import '@helpscout/hsds-react/adapters/embed'
// For the complete svg set
import '@helpscout/hsds-react/adapters/app'

Note: This loads all the svg images, including Icon and Illo.

Testing

To run Jest in watch mode, run:

npm run dev

To execute all the tests (with Coverage reporting), run:

npm run test

Publishing

Merging a PR

To merge a PR when the release is completed, please do a Squash and merge from the PR page. It will keep the history clean in the master branch

We tend to do a release with only one PR at the time, if possible

Releasing on NPM

You can learn more about releasing master or releasing a beta build

To publish and release a new version of HSDS, run the following command:

npm run release

You'll be presented with a CLI prompt with options.
Pick the one you want, and that's it! The script will take care of the rest (from testing to publishing).

Deploying Storybook

To deploy the Storybook, run the following command:

npm run deploy