HSDS: React

Fancy React Utils
Search…
HSDS: React
Quick start
Testing
Reporting Issues
Contributing
HSDS: React
HSDS: React
​​
​ ​
​ ​
​ 
 
 ​
​​
React components for Help Scout's Design System
Live Demo
Check out HSDS's Storybook: https://hsds.helpscout.com/.
Install
1
npm install @helpscout/hsds-react --save
Copied!
Getting Started
After cloning this repo down, run:
1
npm install
Copied!
Once everything is installed, run:
1
npm start
Copied!
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).
1
// src/index.js
2
// For a lighter-weight svg set for embeddables
3
import '@helpscout/hsds-react/adapters/embed'
4
// For the complete svg set
5
import '@helpscout/hsds-react/adapters/app'
Copied!
Note: This loads all the svg images, including Icon and Illo.
Testing
To run Jest in watch mode, run:
1
npm run dev
Copied!
To execute all the tests (with Coverage reporting), run:
1
npm run test
Copied!
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:
1
npm run release
Copied!
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:
1
npm run deploy
Copied!
Learning
HSDS documentation: https://hsds.helpscout.com/​
Developer in-depth documentation: dev docs​
Also, check out our videos for more learning resources
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:
1
npm install @helpscout/blue --save
Copied!
However, continued development of this component library will continue under HSDS: React, which is installable via:
1
npm install @helpscout/hsds-react --save
Copied!
A big thanks to all the folks involved in Blue! Blue will always be your boy :blue_heart: .
Quick start
Last modified 1yr ago
Copy link
Contents