HSDS: React

HSDS: React

Build Status Coverage Status npm version node npm style: styled-components

React components for Help Scout's Design System

Live Demo

Check out HSDS's Storybook: https://hsds.helpscout.com/.

Install

Getting Started

After cloning this repo down, run:

Once everything is installed, run:

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

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

Testing

To run Jest in watch mode, run:

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

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:

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:

Learning

Blue?

On Nov 8, 2018, we rebranded Blue to HSDS: React :tada:.

The original Blue library will still exist on npm, and is still installable via:

However, continued development of this component library will continue under HSDS: React, which is installable via:

A big thanks to all the folks involved in Blue! Blue will always be your boy :blue_heart: .

Last updated